diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..089abbf --- /dev/null +++ b/app/globals.css @@ -0,0 +1,82 @@ +@import "tailwindcss"; + +@theme inline { + --color-background: #0a0a14; + --color-surface: #12121f; + --color-surface-light: #1e1e30; + --color-foreground: #ffffff; + --color-foreground-muted: #a0a0b8; + --color-primary: #3b82f6; + --color-primary-hover: #2563eb; + --color-accent: #8b5cf6; + --color-border: #2a2a40; + --color-border-hover: #3b3b55; + --radius-sm: 0.375rem; + --radius-md: 0.5rem; + --radius-lg: 0.75rem; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + background-color: var(--color-background); + color-scheme: dark; +} + +body { + color: var(--color-foreground); + background-color: var(--color-background); + font-family: + system-ui, + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + sans-serif; + line-height: 1.6; +} + +/* Typography */ +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--color-foreground); + font-weight: 700; + line-height: 1.2; +} + +h1 { + font-size: 2.5rem; + font-weight: 800; + letter-spacing: -0.025em; +} + +h2 { + font-size: 1.25rem; + font-weight: 600; +} + +p { + color: var(--color-foreground-muted); + line-height: 1.6; +} + +/* Transitions */ +button, +a { + transition: all 0.2s ease-in-out; +} + +/* Focus styles for accessibility */ +button:focus-visible, +a:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 2px; +} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..b2dda05 --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,21 @@ +import type { Metadata } from "next"; +import "./globals.css"; + +export const metadata: Metadata = { + title: "Games", + description: "A collection of games", +}; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + + {children} + + + ); +} diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..fadf4f5 --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,92 @@ +import GameCard from "@/components/GameCard"; + +const games = [ + { + id: 1, + title: "Chess Master", + description: "Play chess against AI or friends online in real time.", + image: "/placeholder.svg?height=200&width=300", + category: "Strategy", + }, + { + id: 2, + title: "Quick Quiz", + description: "Test your knowledge with fun trivia questions.", + image: "/placeholder.svg?height=200&width=300", + category: "Trivia", + }, + { + id: 3, + title: "Memory Match", + description: "Challenge your memory with this classic card-matching game.", + image: "/placeholder.svg?height=200&width=300", + category: "Puzzle", + }, + { + id: 4, + title: "Snake Game", + description: "Eat food, grow longer, and avoid running into yourself.", + image: "/placeholder.svg?height=200&width=300", + category: "Arcade", + }, + { + id: 5, + title: "Word Builder", + description: "Create as many words as you can from scrambled letters.", + image: "/placeholder.svg?height=200&width=300", + category: "Word", + }, + { + id: 6, + title: "Puzzle Solver", + description: "Solve challenging jigsaw puzzles of increasing difficulty.", + image: "/placeholder.svg?height=200&width=300", + category: "Puzzle", + }, +]; + +export default function Home() { + return ( + <> + + Skip to game list + + +
+
+

+ Game Collection +

+

+ Discover our selection of fun and challenging games +

+
+
+ +
+
+
+

+ Available Games +

+ +
    + {games.map((game) => ( +
  • + +
    • + ))} +
+
+
+
+ + ); +} diff --git a/components/GameCard.tsx b/components/GameCard.tsx new file mode 100644 index 0000000..dcbd683 --- /dev/null +++ b/components/GameCard.tsx @@ -0,0 +1,57 @@ +"use client"; + +interface GameCardProps { + game: { + id: number; + title: string; + description: string; + image: string; + category: string; + }; +} + +export default function GameCard({ game }: GameCardProps) { + return ( +
+ {/* Image */} +
+ {`Preview + + {/* Category badge */} + +
+ + {/* Content */} +
+

{game.title}

+ +

Category: {game.category}

+ +

+ {game.description} +

+ +
+ +
+
+
+ ); +} diff --git a/package-lock.json b/package-lock.json index a2add5d..fcd4e96 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "devDependencies": { "@eslint/eslintrc": "^3", "@tailwindcss/postcss": "^4", + "@types/react": "19.2.15", "eslint": "^9", "eslint-config-next": "15.3.4", "tailwindcss": "^4", @@ -2009,6 +2010,16 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/react": { + "version": "19.2.15", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.15.tgz", + "integrity": "sha512-eRwcGNHve+E8qtEQSSRl6urh+rFop4v8gm6O8rGv25CodbvFdLjA1vVQ1KkiFE0w0UPOnb8tDiFKL5lp0rtY5Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "csstype": "^3.2.2" + } + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "8.50.1", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.50.1.tgz", @@ -3017,6 +3028,13 @@ "node": ">= 8" } }, + "node_modules/csstype": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", + "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", + "dev": true, + "license": "MIT" + }, "node_modules/damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", diff --git a/package.json b/package.json index 174e763..61cb385 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "devDependencies": { "@eslint/eslintrc": "^3", "@tailwindcss/postcss": "^4", + "@types/react": "19.2.15", "eslint": "^9", "eslint-config-next": "15.3.4", "tailwindcss": "^4", diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..dee27c7 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,39 @@ +{ + "compilerOptions": { + "target": "ES2017", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "noEmit": true, + "incremental": true, + "module": "esnext", + "esModuleInterop": true, + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "baseUrl": ".", + "paths": { + "@/*": ["./*"] + }, + "plugins": [ + { + "name": "next" + } + ] + }, + "include": [ + "next-env.d.ts", + ".next/types/**/*.ts", + "**/*.ts", + "**/*.tsx" + ], + "exclude": [ + "node_modules" + ] +}