Skip to content

Modernize UI design and accessibility #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LCSOGthb merged 2 commits into from
May 24, 2026
+260 −72
Merged

Modernize UI design and accessibility #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1f9f7dd
feat: overhaul UI styling with Tailwind and custom properties
v0[bot] May 24, 2026
723a9a1
style: format code with Autopep8, Black, ClangFormat, dotnet-format, …
deepsource-autofix[bot] May 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
236 changes: 198 additions & 38 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
@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;
:root {
--bg-base: #09090b;
--bg-surface: #18181b;
--bg-elevated: #27272a;
--text-primary: #fafafa;
--text-secondary: #a1a1aa;
--text-muted: #71717a;
--border-default: #3f3f46;
--border-subtle: #27272a;
--accent-blue: #3b82f6;
--accent-blue-hover: #2563eb;
--accent-blue-active: #1d4ed8;
--accent-violet: #8b5cf6;
--focus-ring: #60a5fa;
}
Comment on lines +3 to 17

@devin-ai-integration devin-ai-integration Bot May 24, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 Info: Removal of @theme inline means custom colors are no longer available as Tailwind utilities

The old code registered custom colors via @theme inline { ... } which allowed Tailwind v4 to generate utility classes like bg-background, text-foreground-muted, bg-primary, etc. The new code uses plain :root CSS variables and hand-rolled utility classes instead. I verified that no old Tailwind theme utility class names are referenced anywhere in the codebase — the migration is complete. However, this is a deliberate architectural shift: future developers cannot use Tailwind's utility syntax (e.g., bg-base/50 for opacity variants or responsive variants like sm:bg-surface) with these custom colors. They must use the custom CSS classes or inline styles instead.

Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.


* {
Expand All @@ -23,60 +23,220 @@
}

html {
background-color: var(--color-background);
background-color: var(--bg-base);
color-scheme: dark;
scroll-behavior: smooth;

@sourcery-ai sourcery-ai Bot May 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Consider honoring prefers-reduced-motion for smooth scrolling.

Global smooth scrolling can be uncomfortable for users with motion sensitivity. Wrap this in a media query, e.g. @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }, so users with reduced motion enabled get instant scrolling instead.

@gemini-code-assist gemini-code-assist Bot May 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Smooth scrolling can cause motion sickness for some users. It is a best practice to respect the user's system preference for reduced motion by wrapping this property in a @media (prefers-reduced-motion: no-preference) query.

@qodo-code-review qodo-code-review Bot May 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Action required

1. Reduced-motion preference ignored 🐞 Bug ≡ Correctness

app/globals.css enables smooth scrolling and motion effects unconditionally, which can cause
discomfort for users who set prefers-reduced-motion. There is no CSS override to disable these
behaviors when that accessibility preference is enabled.
Agent Prompt 
## Issue description
The global stylesheet enables motion (smooth scrolling + hover transforms/transitions) for all users, including those who explicitly set `prefers-reduced-motion: reduce`.

## Issue Context
Motion should be reduced/disabled when `prefers-reduced-motion: reduce` is set. Currently, `scroll-behavior: smooth` is always on, and hover transforms/transitions are always active.

## Fix Focus Areas
- app/globals.css[25-153]

## Suggested fix
Add a reduced-motion media query to disable smooth scrolling and remove/disable transitions/animations/transforms, e.g.:

```css
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* disable most motion */
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }

  .btn-primary:hover,
  .card:hover {
    transform: none;
  }
}
```

(Alternatively, gate smooth scrolling behind `@media (prefers-reduced-motion: no-preference)`.)

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

}
Comment on lines +28 to 29

@coderabbitai coderabbitai Bot May 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Add prefers-reduced-motion fallback for global motion effects.

Smooth scrolling and global transitions/transforms are applied unconditionally. Add a reduced-motion override to avoid motion-triggered accessibility issues.

Proposed fix 
 html {
   background-color: var(--bg-base);
   color-scheme: dark;
   scroll-behavior: smooth;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition: none !important;
+  }
+}

Also applies to: 107-113, 131-166

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/globals.css` around lines 28 - 29, Add a prefers-reduced-motion override
so users who request reduced motion are not exposed to global smooth scrolling
or transitions: where you currently set "scroll-behavior: smooth" and where you
apply global transitions/transforms (the global rules around the
"scroll-behavior: smooth" line and the blocks around lines 107-113 and 131-166),
add a CSS media query for "`@media` (prefers-reduced-motion: reduce)" that resets
scroll-behavior to "auto" and disables animations/transitions/transforms (e.g.,
set animation: none, transition: none and remove transform effects) for html,
body, * and their ::before/::after so the global motion is suppressed for users
who prefer reduced motion.


body {
color: var(--color-foreground);
background-color: var(--color-background);
color: var(--text-primary);
background-color: var(--bg-base);
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
sans-serif;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--color-foreground);
/* ========================================
TYPOGRAPHY HIERARCHY
======================================== */

h1 {
font-size: 2rem;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.2;
color: var(--text-primary);
}

h1 {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.025em;
@media (min-width: 640px) {
h1 {
font-size: 2.5rem;
}
}

h2 {
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.3;
color: var(--text-primary);
}

h3 {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.4;
color: var(--text-primary);
}

p {
color: var(--color-foreground-muted);
line-height: 1.6;
color: var(--text-secondary);
line-height: 1.65;
}

/* Transitions */
button,
a {
transition: all 0.2s ease-in-out;
/* ========================================
FOCUS & ACCESSIBILITY
======================================== */

:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}

/* Focus styles for accessibility */
button:focus-visible,
Comment on lines +87 to 94

@gemini-code-assist gemini-code-assist Bot May 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This block is redundant because the universal :focus-visible selector on line 82 already applies these exact styles to all focusable elements. Removing this block will keep the CSS more concise and maintainable.

a:focus-visible {
outline: 2px solid var(--color-primary);
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}

Comment on lines 100 to +102

@devin-ai-integration devin-ai-integration Bot May 24, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 Info: transition: all applied globally to all interactive elements

The rule at app/globals.css:100-102 applies transition: all 0.15s ease-in-out to all button, a, input, select, and textarea elements. transition: all can cause unexpected animations on any CSS property change (e.g., layout shifts, color changes on state updates) and has minor performance implications since the browser must check all properties for transitions. A more targeted approach like transition-property: color, background-color, border-color, box-shadow, transform would be safer. Not a bug in the current small codebase, but could become an issue as the app grows.

Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.

/* ========================================
INTERACTIVE ELEMENTS
======================================== */

button,
a,
input,
select,
textarea {
transition: all 0.15s ease-in-out;
}

/* Primary Button Base */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.625rem 1rem;
font-size: 0.875rem;
font-weight: 600;
color: white;
background-color: var(--accent-blue);
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.15s ease-in-out;
}

.btn-primary:hover {
background-color: var(--accent-blue-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-primary:active {
background-color: var(--accent-blue-active);
transform: translateY(0);
box-shadow: none;
}

.btn-primary:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}

/* ========================================
CARD / PANEL STYLING
======================================== */

.card {
background-color: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 0.75rem;
overflow: hidden;
transition: all 0.2s ease-in-out;
}

.card:hover {
border-color: var(--border-default);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.05);
transform: translateY(-2px);
}

/* ========================================
HEADER / NAVIGATION
======================================== */

.site-header {
background-color: rgba(24, 24, 27, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-subtle);
position: sticky;
top: 0;
z-index: 50;
}

/* ========================================
BADGE / TAG STYLING
======================================== */

.badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.625rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.01em;
border-radius: 0.375rem;
background-color: var(--accent-violet);
color: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ========================================
SKIP LINK (Accessibility)
======================================== */

.skip-link {
position: absolute;
top: -100%;
left: 1rem;
z-index: 100;
padding: 0.75rem 1rem;
font-weight: 600;
color: white;
background-color: var(--accent-blue);
border-radius: 0.5rem;
text-decoration: none;
}

.skip-link:focus {
top: 1rem;
Comment on lines +211 to +217

@devin-ai-integration devin-ai-integration Bot May 24, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 Info: CSS class .text-muted maps to --text-secondary, not --text-muted

The naming between CSS utility classes and CSS custom properties is mismatched: .text-muted at app/globals.css:211 maps to var(--text-secondary) (#a1a1aa), while .text-subtle at app/globals.css:215 maps to var(--text-muted) (#71717a). This creates a confusing indirection — a developer might reasonably expect .text-muted to use --text-muted. While the actual colors rendered are correct for the design intent (muted = secondary brightness, subtle = dimmest), the naming inconsistency is a maintenance footgun that could lead to future misuse.

Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.

}

/* ========================================
UTILITY CLASSES
======================================== */

.text-muted {
color: var(--text-secondary);
}

.text-subtle {
color: var(--text-muted);
}

.bg-base {
background-color: var(--bg-base);
}

.bg-surface {
background-color: var(--bg-surface);
}

.bg-elevated {
background-color: var(--bg-elevated);
}
18 changes: 11 additions & 7 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
import type { Metadata } from "next";
import type { Metadata, Viewport } from "next";
import "./globals.css";

export const metadata: Metadata = {
title: "Games",
description: "A collection of games",
title: "Game Collection",
description: "Discover our selection of fun and challenging games to play",
};

export const viewport: Viewport = {

Check warning on line 9 in app/layout.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/layout.tsx#L9 

Exporting a non-component with components is not allowed.
themeColor: "#09090b",
width: "device-width",
initialScale: 1,
};

export default function RootLayout({
Expand All @@ -12,10 +18,8 @@
children: React.ReactNode;
}) {
return (
<html lang="en" className="bg-background">
<body className="antialiased bg-background text-foreground">
{children}
</body>
<html lang="en">
<body className="antialiased">{children}</body>

Check warning on line 22 in app/layout.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/layout.tsx#L22 

This JSX attribute is specific to React.
</html>
);
}
46 changes: 29 additions & 17 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,35 +48,36 @@
export default function Home() {
return (
<>
<a
href="#game-list"
className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:rounded-lg focus:bg-primary focus:px-4 focus:py-2 focus:text-white focus:font-semibold"
>
<a href="#game-list" className="skip-link">

Check notice on line 51 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L51 

Incorrect use of string literal detected.

Check warning on line 51 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L51 

This JSX attribute is specific to React.

@coderabbitai coderabbitai Bot May 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Prevent skip-link target from being hidden by the sticky header.

#game-list can be obscured after jump navigation because the header is sticky. Add scroll margin on the anchor target.

Proposed fix 
-            <ul
+            <ul
               id="game-list"
-              className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"
+              className="scroll-mt-28 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"
               aria-label="Available games"
               style={{ listStyle: "none", padding: 0, margin: 0 }}
             >

Also applies to: 77-79

🧰 Tools
🪛 GitHub Check: Codacy Static Code Analysis

[notice] 51-51: app/page.tsx#L51
Incorrect use of string literal detected.

[warning] 51-51: app/page.tsx#L51
This JSX attribute is specific to React.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/page.tsx` at line 51, The anchor target with id "game-list" is obscured
by the sticky header when jump-navigation is used; update the CSS for the target
element(s) (the element(s) with id "game-list" and any other anchor targets
referenced at lines 77-79) to add a top offset for scrolling—e.g., apply a
scroll-margin-top or use :target { scroll-margin-top: <header-height>; } (or set
scroll-padding-top on the scrolling container) so the element is fully visible
after navigation; locate the target element(s) in app/page.tsx and add the
appropriate CSS class or rule to account for the sticky header height.

Skip to game list
</a>

<header className="sticky top-0 z-40 bg-surface/95 backdrop-blur-sm border-b border-border">
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<h1 className="text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
Game Collection
</h1>
<p className="text-foreground-muted mt-2 text-base">
Discover our selection of fun and challenging games
<header className="site-header">

Check warning on line 55 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L55 

This JSX attribute is specific to React.
<div className="max-w-6xl mx-auto px-6 py-8">

Check notice on line 56 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L56 

These CSS classes should be sorted.

Check warning on line 56 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L56 

This JSX attribute is specific to React.
<h1 className="text-balance">Game Collection</h1>

Check warning on line 57 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L57 

Avoid raw text in JSX for user-facing content.

Check notice on line 57 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L57 

Incorrect use of string literal detected.

Check warning on line 57 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L57 

JSX element not internationalized: 'Game Collection'.  You should support different languages in your website or app with internationalization.

Check warning on line 57 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L57 

This JSX attribute is specific to React.
<p className="mt-3 text-base text-muted max-w-xl">

Check warning on line 58 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L58 

Avoid raw text in JSX for user-facing content.

Check notice on line 58 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L58 

Incorrect use of string literal detected.

Check warning on line 58 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L58 

JSX element not internationalized: '             Discover our selection of fun and challenging games to play           '.  You should support different languages in your website or app with internationalization.
Discover our selection of fun and challenging games to play
</p>
</div>
</header>

<main id="main-content" className="min-h-screen bg-background">
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<main id="main-content" className="bg-base min-h-screen">

Check notice on line 64 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L64 

These CSS classes should be sorted.

Check warning on line 64 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L64 

This JSX attribute is specific to React.

Check warning on line 64 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L64 

id attribute should not be a static string literal. Generate unique IDs using useId().
<div className="max-w-6xl mx-auto px-6 py-10">

Check notice on line 65 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L65 

These CSS classes should be sorted.

Check warning on line 65 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L65 

This JSX attribute is specific to React.
<section aria-labelledby="games-heading">
<h2 id="games-heading" className="sr-only">
Available Games
</h2>
<div className="flex items-center justify-between mb-8">

Check notice on line 67 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L67 

These CSS classes should be sorted.

Check warning on line 67 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L67 

This JSX attribute is specific to React.
<h2 id="games-heading" className="text-xl font-semibold">

Check warning on line 68 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L68 

Avoid raw text in JSX for user-facing content.

Check notice on line 68 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L68 

Incorrect use of string literal detected.

Check warning on line 68 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L68 

JSX element not internationalized: '                 All Games               '.  You should support different languages in your website or app with internationalization.

Check notice on line 68 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L68 

These CSS classes should be sorted.

Check warning on line 68 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L68 

This JSX attribute is specific to React.

Check warning on line 68 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L68 

id attribute should not be a static string literal. Generate unique IDs using useId().
All Games
</h2>
<span className="text-sm text-subtle">

Check warning on line 71 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L71 

This JSX attribute is specific to React.
{games.length} games available
</span>
</div>

<ul
id="game-list"
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 list-none p-0 m-0"
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"
aria-label="Available games"
style={{ listStyle: "none", padding: 0, margin: 0 }}

Check warning on line 80 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L80 

Unexpected style attribute.
>
Comment on lines 79 to 81

@gemini-code-assist gemini-code-assist Bot May 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Avoid using inline styles for layout and reset properties. These should be handled via Tailwind utility classes (e.g., list-none p-0 m-0) to maintain consistency with the rest of the application's styling approach.

Suggested change
aria-label="Available games"
style={{ listStyle: "none", padding: 0, margin: 0 }}
>
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 list-none p-0 m-0"
aria-label="Available games"

{games.map((game) => (
<li key={game.id}>
Expand All @@ -87,6 +88,17 @@
</section>
</div>
</main>

<footer
className="bg-surface border-t"

Check notice on line 93 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L93 

These CSS classes should be sorted.

Check warning on line 93 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L93 

This JSX attribute is specific to React.
style={{ borderColor: "var(--border-subtle)" }}

Check warning on line 94 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L94 

Unexpected style attribute.
>
<div className="max-w-6xl mx-auto px-6 py-6">

Check notice on line 96 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L96 

These CSS classes should be sorted.

Check warning on line 96 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L96 

This JSX attribute is specific to React.
<p className="text-sm text-subtle text-center">

Check warning on line 97 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L97 

Avoid raw text in JSX for user-facing content.

Check notice on line 97 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L97 

Incorrect use of string literal detected.

Check warning on line 97 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L97 

JSX element not internationalized: '             Game Collection - Built with Next.js           '.  You should support different languages in your website or app with internationalization.

Check notice on line 97 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L97 

These CSS classes should be sorted.

Check warning on line 97 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L97 

This JSX attribute is specific to React.
Game Collection - Built with Next.js
</p>
</div>
</footer>
</>
);
}
Loading
Loading