From 8b163c7f8d77541db8e339fec045b172835633b4 Mon Sep 17 00:00:00 2001 From: v0 Date: Sun, 24 May 2026 02:10:31 +0000 Subject: [PATCH 1/6] fix: Implement proper card layout for games collection - Create responsive grid layout with proper card styling - Add GameCard component with image, title, description, and category - Implement hover effects and smooth transitions - Add gradient background and proper spacing - Ensure cards maintain consistent height and alignment --- app/globals.css | 33 ++++++++++++++++++++ app/layout.tsx | 19 ++++++++++++ app/page.tsx | 69 +++++++++++++++++++++++++++++++++++++++++ components/GameCard.tsx | 48 ++++++++++++++++++++++++++++ 4 files changed, 169 insertions(+) create mode 100644 app/globals.css create mode 100644 app/layout.tsx create mode 100644 app/page.tsx create mode 100644 components/GameCard.tsx diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..7262d44 --- /dev/null +++ b/app/globals.css @@ -0,0 +1,33 @@ +@import 'tailwindcss'; + +@theme { + --color-primary: #3b82f6; + --color-primary-dark: #1e40af; + --color-secondary: #10b981; + --color-accent: #f59e0b; + --color-neutral-50: #f9fafb; + --color-neutral-100: #f3f4f6; + --color-neutral-200: #e5e7eb; + --color-neutral-300: #d1d5db; + --color-neutral-600: #4b5563; + --color-neutral-700: #374151; + --color-neutral-900: #111827; + --color-background: #ffffff; + --color-foreground: #111827; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + background-color: var(--color-background); +} + +body { + color: var(--color-foreground); + background-color: var(--color-background); + font-family: system-ui, -apple-system, sans-serif; +} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..c5a835a --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,19 @@ +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..42efa91 --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,69 @@ +import GameCard from '@/components/GameCard' + +const games = [ + { + id: 1, + title: 'Chess Master', + description: 'Play chess against AI or friends', + image: '/placeholder.svg?height=200&width=300', + category: 'Strategy', + }, + { + id: 2, + title: 'Quick Quiz', + description: 'Test your knowledge with fun trivia', + image: '/placeholder.svg?height=200&width=300', + category: 'Trivia', + }, + { + id: 3, + title: 'Memory Match', + description: 'Challenge your memory with this classic game', + image: '/placeholder.svg?height=200&width=300', + category: 'Puzzle', + }, + { + id: 4, + title: 'Snake Game', + description: 'Eat food and grow longer', + image: '/placeholder.svg?height=200&width=300', + category: 'Arcade', + }, + { + id: 5, + title: 'Word Builder', + description: 'Create words from scrambled letters', + image: '/placeholder.svg?height=200&width=300', + category: 'Word', + }, + { + id: 6, + title: 'Puzzle Solver', + description: 'Solve challenging jigsaw puzzles', + image: '/placeholder.svg?height=200&width=300', + category: 'Puzzle', + }, +] + +export default function Home() { + return ( +
+
+
+

+ Game Collection +

+

+ Choose from our selection of fun and challenging games +

+
+ +
+ {games.map((game) => ( + + ))} +
+
+
+ ) +} diff --git a/components/GameCard.tsx b/components/GameCard.tsx new file mode 100644 index 0000000..1c18f2c --- /dev/null +++ b/components/GameCard.tsx @@ -0,0 +1,48 @@ +'use client' + +interface GameCardProps { + game: { + id: number + title: string + description: string + image: string + category: string + } +} + +export default function GameCard({ game }: GameCardProps) { + return ( +
+
+ {/* Image Container */} +
+ {game.title} +
+ + {game.category} + +
+
+ + {/* Content Container */} +
+

+ {game.title} +

+

+ {game.description} +

+ + {/* Button */} + +
+
+
+ ) +} From 83dedb3d39f28de522de1acb6e4ea5da8680a2a6 Mon Sep 17 00:00:00 2001 From: v0 Date: Sun, 24 May 2026 02:11:37 +0000 Subject: [PATCH 2/6] feat: add path aliases to tsconfig.json Enable '@/*' path alias for correct module resolution Co-authored-by: LCSOGthb <185141600+LCSOGthb@users.noreply.github.com> --- package-lock.json | 18 ++++++++++++++++++ package.json | 1 + tsconfig.json | 39 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 58 insertions(+) create mode 100644 tsconfig.json 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" + ] +} From 5ef7a1efed6381a08e562aefb4f40e3d45ea65ee Mon Sep 17 00:00:00 2001 From: v0 Date: Sun, 24 May 2026 02:13:49 +0000 Subject: [PATCH 3/6] fix: enhance accessibility across the application Add skip link, semantic structure, button labels, contrast, and focus styles Co-authored-by: LCSOGthb <185141600+LCSOGthb@users.noreply.github.com> --- app/page.tsx | 61 ++++++++++++++++++++++++++--------------- components/GameCard.tsx | 59 ++++++++++++++++++++++----------------- 2 files changed, 73 insertions(+), 47 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 42efa91..fe2e5b5 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -4,42 +4,42 @@ const games = [ { id: 1, title: 'Chess Master', - description: 'Play chess against AI or friends', + 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', + 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 game', + 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 and grow longer', + 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 words from scrambled letters', + 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', + description: 'Solve challenging jigsaw puzzles of increasing difficulty.', image: '/placeholder.svg?height=200&width=300', category: 'Puzzle', }, @@ -47,23 +47,40 @@ const games = [ export default function Home() { return ( -
-
-
-

- Game Collection -

-

- Choose from our selection of fun and challenging games -

-
+ <> + + Skip to game list + + +
+
+ +
+

+ Game Collection +

+

+ Choose from our selection of fun and challenging games +

+
+ +
    + {games.map((game) => ( +
  • + +
    • + ))} +
-
- {games.map((game) => ( - - ))}
-
-
+
+ ) } diff --git a/components/GameCard.tsx b/components/GameCard.tsx index 1c18f2c..f1ec717 100644 --- a/components/GameCard.tsx +++ b/components/GameCard.tsx @@ -12,37 +12,46 @@ interface GameCardProps { export default function GameCard({ game }: GameCardProps) { return ( -
-
- {/* Image Container */} -
- {game.title} -
- - {game.category} - -
+
+ {/* Image */} +
+ {`Preview + +
+ + {/* Content */} +
+

+ {game.title} +

+ +

Category: {game.category}

- {/* Content Container */} -
-

- {game.title} -

-

- {game.description} -

+

+ {game.description} +

- {/* Button */} -
-
+ ) } From cd63430d0ba49129e198976d327560857f1b427e Mon Sep 17 00:00:00 2001 From: v0 Date: Sun, 24 May 2026 03:00:27 +0000 Subject: [PATCH 4/6] feat: Transform UI with modern dark gaming theme - Implement vibrant dark theme with cyan, purple, and pink accent colors - Add gradient text effects for headings with premium look - Enhance GameCard with gradient overlays, smooth hover animations, and shadow effects - Upgrade typography hierarchy with larger, bolder headings - Add sticky header with glassmorphism effect - Improve button styling with gradient backgrounds and shadow depth - Enhance spacing and visual hierarchy throughout --- app/globals.css | 79 ++++++++++++++++++++++++++++++++++------- app/layout.tsx | 4 +-- app/page.tsx | 24 ++++++------- components/GameCard.tsx | 28 ++++++++++----- 4 files changed, 99 insertions(+), 36 deletions(-) diff --git a/app/globals.css b/app/globals.css index 7262d44..347039a 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,19 +1,24 @@ @import 'tailwindcss'; @theme { - --color-primary: #3b82f6; - --color-primary-dark: #1e40af; - --color-secondary: #10b981; - --color-accent: #f59e0b; - --color-neutral-50: #f9fafb; - --color-neutral-100: #f3f4f6; - --color-neutral-200: #e5e7eb; - --color-neutral-300: #d1d5db; - --color-neutral-600: #4b5563; - --color-neutral-700: #374151; - --color-neutral-900: #111827; - --color-background: #ffffff; - --color-foreground: #111827; + --color-background: #0f0f1e; + --color-surface: #1a1a2e; + --color-surface-light: #252540; + --color-foreground: #ffffff; + --color-foreground-secondary: #b0b0c3; + --color-primary: #00d9ff; + --color-primary-dark: #00a8cc; + --color-accent: #ff006e; + --color-accent-secondary: #8338ec; + --color-success: #00ff88; + --color-neutral-50: #f0f0ff; + --color-neutral-100: #e0e0ff; + --color-neutral-200: #c0c0e0; + --color-neutral-300: #a0a0c0; + --color-neutral-600: #6060a0; + --color-neutral-700: #404080; + --color-neutral-900: #0f0f1e; + --radius: 0.75rem; } * { @@ -24,6 +29,7 @@ html { background-color: var(--color-background); + color-scheme: dark; } body { @@ -31,3 +37,50 @@ body { background-color: var(--color-background); font-family: system-ui, -apple-system, sans-serif; } + +header { + background: linear-gradient(135deg, rgba(0, 217, 255, 0.05) 0%, rgba(131, 56, 236, 0.05) 100%); + border-bottom: 1px solid rgba(0, 217, 255, 0.1); +} + +main { + max-width: 1400px; + margin: 0 auto; + padding: 4rem 1rem; +} + +h1 { + font-size: clamp(2.5rem, 8vw, 3.5rem); + font-weight: 900; + color: var(--color-foreground); + background: linear-gradient(135deg, #00d9ff 0%, #ff006e 50%, #8338ec 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + letter-spacing: -0.02em; + margin-bottom: 1rem; +} + +h2 { + font-size: 1.875rem; + font-weight: 700; + color: var(--color-foreground); +} + +p { + color: var(--color-foreground-secondary); + line-height: 1.6; + font-size: 1.05rem; +} + +button, +a { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Focus visible 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 index c5a835a..9b0e4ce 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -12,8 +12,8 @@ export default function RootLayout({ children: React.ReactNode }) { return ( - - {children} + + {children} ) } diff --git a/app/page.tsx b/app/page.tsx index fe2e5b5..b8fa0cc 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -50,26 +50,26 @@ export default function Home() { <> Skip to game list -
-
+
+
+

Game Collection

+

+ Discover our selection of fun and challenging games +

+
+
-
-

- Game Collection -

-

- Choose from our selection of fun and challenging games -

-
+
+
    {games.map((game) => ( diff --git a/components/GameCard.tsx b/components/GameCard.tsx index f1ec717..d77f795 100644 --- a/components/GameCard.tsx +++ b/components/GameCard.tsx @@ -1,5 +1,7 @@ 'use client' +import { useState } from 'react' + interface GameCardProps { game: { id: number @@ -11,41 +13,49 @@ interface GameCardProps { } export default function GameCard({ game }: GameCardProps) { + const [isHovered, setIsHovered] = useState(false) + return (
    setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} > {/* Image */} -
    +
    {`Preview -
    - ) + ); }