Skip to content

Revamp UI/UX with new design and responsive layout #58

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 12 commits into from
Jun 9, 2026
Merged

Revamp UI/UX with new design and responsive layout #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
33a16ab
Center container with auto margins in globals.css
builderio-bot Jun 9, 2026
ac17159
Refine main content centering with mx-auto utility
builderio-bot Jun 9, 2026
c37318a
Center coming-soon-card on screen with auto margin
builderio-bot Jun 9, 2026
dba9a50
Fix Coming Soon card centering with auto margin
builderio-bot Jun 9, 2026
cf54204
Center coming soon card layout
builderio-bot Jun 9, 2026
d0ae0b3
Remove inline margin style from coming-soon-card
builderio-bot Jun 9, 2026
9c52a21
Fix coming soon card centering with explicit margin auto
builderio-bot Jun 9, 2026
a7ea278
Add adaptive screen support for mobile and tablet devices
builderio-bot Jun 9, 2026
d80fc2c
Remove "Select language" label from language selector
builderio-bot Jun 9, 2026
a0a81c2
Revamp UI/UX with modern color scheme and interactive elements
builderio-bot Jun 9, 2026
0f92a6c
Refine Coming Soon card styling and remove action buttons
builderio-bot Jun 9, 2026
4454d9a
style: format code with Autopep8, Black, ClangFormat, dotnet-format, …
deepsource-autofix[bot] Jun 9, 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
223 changes: 176 additions & 47 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
@import "tailwindcss";

:root {
--bg-base: #0a0a0f;
--bg-surface: rgba(255, 255, 255, 0.05);
--bg-card: rgba(255, 255, 255, 0.08);
--text-primary: #ffffff;
--text-secondary: rgba(255, 255, 255, 0.7);
--border-default: rgba(255, 255, 255, 0.12);
--border-hover: rgba(255, 255, 255, 0.2);
--focus-ring: rgba(255, 255, 255, 0.5);
--bg-base: #0f172a;
--bg-surface: rgba(226, 232, 240, 0.08);
--bg-card: rgba(30, 41, 59, 0.4);
--text-primary: #f1f5f9;
--text-secondary: #cbd5e1;
--border-default: rgba(148, 163, 184, 0.1);
--border-hover: rgba(148, 163, 184, 0.3);
--focus-ring: rgba(99, 102, 241, 0.5);
--accent: #6366f1;
--accent-light: #818cf8;
}

* {
Expand Down Expand Up @@ -54,14 +56,14 @@ body {
z-index: 0;
background: linear-gradient(
135deg,
#0a0a0f 0%,
#1a1a2e 25%,
#16213e 50%,
#0f3460 75%,
#0a0a0f 100%
#0f172a 0%,
#1e293b 25%,
#334155 50%,
#1e40af 75%,
#0f172a 100%
);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
animation: gradientShift 20s ease infinite;
}

@keyframes gradientShift {
Expand Down Expand Up @@ -95,29 +97,56 @@ body {

.coming-soon-card {
position: relative;
background: var(--bg-card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border-default);
border-radius: 1.5rem;
background: rgba(30, 41, 59, 0.25);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
Comment on lines +101 to +102

@codereviewbot-ai codereviewbot-ai Bot Jun 9, 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.

High backdrop-filter: blur(40px) may cause performance issues

Applying backdrop-filter: blur(40px) (and its webkit variant) can be very resource-intensive, especially on lower-end devices or in browsers with limited support. This can lead to sluggish UI performance and increased battery usage.

Recommendation:
Consider reducing the blur radius or providing a fallback for browsers that do not support backdrop-filter. Test on a range of devices to ensure acceptable performance.

border: 1px solid rgba(148, 163, 184, 0.15);
border-radius: 2.5rem;
text-align: center;
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.05) inset;
/* Square: fluid size clamped between 280px and 480px */
width: clamp(280px, min(80vw, 80vh), 480px);
height: clamp(280px, min(80vw, 80vh), 480px);
/* Center content inside the square */
0 20px 40px -10px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.08) inset;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
/* Rectangle: wider than tall for hero feel */
width: clamp(300px, min(85vw, 85vh), 580px);
max-width: 580px;
padding: 3.5rem 3rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
margin: auto;
}

.coming-soon-card:hover {
background: rgba(30, 41, 59, 0.35);
border-color: rgba(148, 163, 184, 0.25);
box-shadow:
0 20px 40px -10px rgba(99, 102, 241, 0.15),
0 0 0 1px rgba(148, 163, 184, 0.15) inset;
}

@media (max-width: 768px) {
.coming-soon-card {
width: clamp(280px, 90vw, 550px);
padding: 2.5rem 2rem;
}
}

@media (max-width: 480px) {
.coming-soon-card {
border-radius: 1.125rem;
width: clamp(260px, 85vw, 350px);
padding: 2rem 1.5rem;
border-radius: 1.5rem;
}

.action-buttons {
gap: 0.75rem;
}

.btn {
padding: 0.625rem 1.25rem;
font-size: 0.875rem;
}
}

Expand All @@ -126,32 +155,123 @@ body {
======================================== */

.coming-soon-title {
font-size: 3rem;
font-size: 3.2rem;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--text-primary);
margin-bottom: 0.75rem;
margin-bottom: 1.25rem;
background: linear-gradient(
135deg,
var(--accent-light) 20%,
var(--accent) 80%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
opacity: 0.95;
}

@media (max-width: 768px) {
.coming-soon-title {
font-size: 2.75rem;
}
}

@media (max-width: 640px) {
.coming-soon-title {
font-size: 2rem;
font-size: 2.25rem;
}
}

@media (max-width: 480px) {
.coming-soon-title {
font-size: 1.875rem;
margin-bottom: 0.75rem;
}
}

.coming-soon-subtitle {
font-size: 1.125rem;
color: var(--text-secondary);
font-size: 1.1rem;
color: rgba(203, 213, 225, 0.85);
font-weight: 400;
line-height: 1.7;
margin-bottom: 0;
max-width: 100%;
letter-spacing: 0.3px;
}

@media (max-width: 640px) {
@media (max-width: 768px) {
.coming-soon-subtitle {
font-size: 1rem;
}
}

@media (max-width: 640px) {
.coming-soon-subtitle {
font-size: 0.9rem;
}
}

@media (max-width: 480px) {
.coming-soon-subtitle {
font-size: 0.8rem;
}
}

/* ========================================
ACTION BUTTONS
======================================== */

.action-buttons {
display: flex;
gap: 1rem;
justify-content: center;
width: 100%;
flex-wrap: wrap;
}

.btn {
padding: 0.75rem 1.75rem;
border-radius: 0.75rem;
font-weight: 600;
font-size: 1rem;
border: none;
cursor: pointer;
transition: all 0.2s ease-in-out;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}

.btn-primary {
Comment on lines +230 to +248

@codeant-ai codeant-ai Bot Jun 9, 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: The new button styling splits core sizing/interaction styles into .btn while .btn-primary only sets colors/shadow, but existing components already use btn-primary alone. This creates a contract mismatch where primary buttons render with browser-default padding/border/radius and inconsistent hit area. Make .btn-primary self-contained for required button base styles or ensure all btn-primary usages also include .btn. [api mismatch]

Severity Level: Major ⚠️ 
- ❌ GameCard Play button rendered with inconsistent padding and radius.
- ⚠️ CTA hit area smaller, worsened tap accessibility.
Steps of Reproduction ✅ 
1. Inspect the base button styles in `app/globals.css:230-242`, where the `.btn` class
defines core sizing and interaction behavior (padding, border-radius, display:
inline-flex, gap, etc.).

2. Inspect the primary-variant styles in `app/globals.css:244-248`, where `.btn-primary`
only sets background gradient, text color, and box-shadow, but does not repeat the base
sizing/interaction properties from `.btn`.

3. Open `components/GameCard.tsx:13-67` and see that the "Play Now" CTA is rendered as a
`<button>` with `className="btn-primary w-full"` at `components/GameCard.tsx:58-60`,
omitting the `.btn` base class entirely.

4. Confirm via search (`Grep` over `**/*.tsx`) that there are no usages of `.btn` in JSX
and that `btn-primary` is only used alone (`components/GameCard.tsx:60`), meaning the base
`.btn` styles never apply to this CTA; in a browser, this causes the GameCard primary
button to use browser-default padding/border/radius with only the gradient/shadow from
`.btn-primary`, producing a smaller, inconsistent hit area compared to the intended
design.

Fix in Cursor | Fix in VSCode Claude

(Use Cmd/Ctrl + Click for best experience)

Prompt for AI Agent 🤖 
This is a comment left during a code review.

**Path:** app/globals.css
**Line:** 230:248
**Comment:**
	*Api Mismatch: The new button styling splits core sizing/interaction styles into `.btn` while `.btn-primary` only sets colors/shadow, but existing components already use `btn-primary` alone. This creates a contract mismatch where primary buttons render with browser-default padding/border/radius and inconsistent hit area. Make `.btn-primary` self-contained for required button base styles or ensure all `btn-primary` usages also include `.btn`.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
👍 | 👎

background: linear-gradient(
135deg,
var(--accent) 0%,
var(--accent-light) 100%
);
color: white;
box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
}

.btn-secondary {
background: rgba(226, 232, 240, 0.08);
color: var(--text-primary);
Comment on lines +222 to +265

@greptile-apps greptile-apps Bot Jun 9, 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.

P2 Unused CSS classes added

.action-buttons, .btn, .btn-primary, and .btn-secondary are defined here but are never referenced in page.tsx or any other component. If these are intended for a future feature, they'll accumulate as dead code and increase stylesheet weight until they're actually wired up.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Fix in Cursor Fix in Codex Fix in Claude Code Fix in Conductor

border: 1px solid var(--border-default);
}

.btn-secondary:hover {
background: rgba(226, 232, 240, 0.12);
border-color: var(--accent);
color: var(--accent-light);
}

/* ========================================
LANGUAGE SELECTOR
======================================== */
Expand All @@ -163,35 +283,36 @@ body {

.language-selector select {
appearance: none;
background: var(--bg-surface);
background: rgba(30, 41, 59, 0.5);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--border-default);
border-radius: 0.5rem;
padding: 0.5rem 2.25rem 0.5rem 0.875rem;
border-radius: 0.75rem;
padding: 0.5rem 2.5rem 0.5rem 1rem;
Comment on lines 288 to +291

@gemini-code-assist gemini-code-assist Bot Jun 9, 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

The background-color property on line 290 is redundant because background: rgba(30, 41, 59, 0.5); is already defined on line 278 for the same selector. Removing it simplifies the CSS rules.

  transition: all 0.2s ease-in-out;
  min-width: 120px;
}

font-size: 0.875rem;
font-weight: 500;
font-weight: 600;
color: var(--text-primary);
cursor: pointer;
transition: all 0.15s ease-in-out;
min-width: 100px;
transition: all 0.2s ease-in-out;
min-width: 120px;
background-color: rgba(30, 41, 59, 0.5);
}
Comment on lines +297 to 299

@llamapreview llamapreview Bot Jun 9, 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.

P2 | Confidence: High

The .language-selector select rule declares both a background shorthand (which sets all background sub‑properties, including background-color) and then a separate background-color with the same value. This duplication is unnecessary and makes the CSS harder to read and maintain. The second declaration overrides nothing, but it could cause confusion if someone later changes only one of them. Remove the redundant background-color line.


.language-selector select:hover {
border-color: var(--border-hover);
background: rgba(255, 255, 255, 0.08);
border-color: var(--accent);
background: rgba(30, 41, 59, 0.6);
}

.language-selector select:focus {
outline: none;
border-color: var(--focus-ring);
box-shadow: 0 0 0 2px var(--focus-ring);
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.language-selector select:focus-visible {
outline: none;
border-color: var(--focus-ring);
box-shadow: 0 0 0 2px var(--focus-ring);
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.language-selector::after {
Expand Down Expand Up @@ -224,6 +345,14 @@ body {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

@media (max-width: 480px) {
.version-label {
font-size: 0.625rem;
bottom: 1rem;
right: 1rem;
}
}

/* ========================================
FOCUS & ACCESSIBILITY
======================================== */
Expand Down
5 changes: 1 addition & 4 deletions app/page.tsx
View file
Open in desktop

@devin-ai-integration devin-ai-integration Bot Jun 9, 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.

🚩 Pre-existing aria-label version mismatch

The aria-label reads "Version 0.13 Beta" while the visible text content reads "Version: 0.14 β" (line 47). This mismatch was introduced in a prior PR (#54, commit a60f240) and is not touched by this PR's diff, but it means screen readers announce an outdated version number. This should be fixed separately.

(Refers to lines 46-47)

Open in Devin Review

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

Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,6 @@
{/* Language selector - top right */}
<div className="fixed top-4 right-4 z-20 sm:top-6 sm:right-6">
<div className="language-selector">
<label htmlFor="language-select" className="sr-only">
Select language
</label>
<select
id="language-select"
value={lang}
Comment on lines 23 to 24

@codereviewbot-ai codereviewbot-ai Bot Jun 9, 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.

The use of as Language in the onChange handler relies on the assumption that all <option> values exactly match the Language type. If the options ever diverge from the type, this could cause runtime errors or unexpected behavior. To improve type safety, consider deriving the options from the Language type itself or validating the value before updating the state.

Recommended solution:

onChange={(e) => {
  const value = e.target.value;
  if (value === 'en' || value === 'zh') setLang(value);
}}

Expand All @@ -39,7 +36,7 @@
id="main-content"
className="fixed inset-0 z-10 flex items-center justify-center p-4"
>
<div className="coming-soon-card">
<div className="coming-soon-card" style={{ margin: "auto" }}>

Check warning on line 39 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L39 

This JSX attribute is specific to React.

Check warning on line 39 in app/page.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/page.tsx#L39 

Unexpected style attribute.

@gemini-code-assist gemini-code-assist Bot Jun 9, 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

The inline style style={{ margin: "auto" }} is redundant because margin: auto; has already been added to the .coming-soon-card class in app/globals.css (line 118). Removing this inline style keeps the JSX clean and adheres to the separation of concerns.

Suggested change
<div className="coming-soon-card" style={{ margin: "auto" }}>
<div className="coming-soon-card">

@devin-ai-integration devin-ai-integration Bot Jun 9, 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: Redundant inline margin:auto duplicates CSS class rule

The inline style style={{ margin: "auto" }} on line 39 is redundant with the .coming-soon-card CSS class which already declares margin: auto at app/globals.css:118. Both achieve the same effect. The git history shows multiple commits attempting to fix centering (commits 9c52a21, d0ae0b3, dba9a50, c37318a), suggesting this has been a recurring issue. Having it in both places is belt-and-suspenders but adds unnecessary specificity coupling.

Open in Devin Review

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

@greptile-apps greptile-apps Bot Jun 9, 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.

P2 Redundant inline margin: auto style

The .coming-soon-card CSS class already sets margin: auto (line 118 of globals.css). The inline style={{ margin: "auto" }} is a duplicate that adds no effect but can cause confusion about which source controls the margin if either changes in the future.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Fix in Cursor Fix in Codex Fix in Claude Code Fix in Conductor

@llamapreview llamapreview Bot Jun 9, 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.

P2 | Confidence: High

The .coming-soon-card CSS class already sets margin: auto;, and the parent <main> element uses flex items-center justify-center (which centers the child without any margin). Adding an inline style={{ margin: "auto" }} is redundant and introduces a duplicate styling path. This clutters the JSX and could cause maintenance overhead if the centering strategy is later changed. Remove the inline style to rely on the CSS class and flexbox centering.

Suggested change
<div className="coming-soon-card" style={{ margin: "auto" }}>
<div className="coming-soon-card">

<h1 className="coming-soon-title">{t.title}</h1>
<p className="coming-soon-subtitle">{t.subtitle}</p>
</div>
Comment on lines 41 to 42

@codereviewbot-ai codereviewbot-ai Bot Jun 9, 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.

Rendering t.title and t.subtitle assumes that the translation object always contains these keys. If getTranslation(lang) returns undefined or an incomplete object, this could result in runtime errors or display of undefined in the UI. To enhance robustness, add fallback values or error handling for missing translations.

Recommended solution:

<h1 className="coming-soon-title">{t?.title ?? 'Coming Soon'}</h1>
<p className="coming-soon-subtitle">{t?.subtitle ?? ''}</p>

@llamapreview llamapreview Bot Jun 9, 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.

[Contextual Comment]
This comment refers to code near real line 46. Anchored to nearest_changed(42) line 42.

P2 | Confidence: High

The displayed version text is 0.14 β but the aria-label attribute still reads Version 0.13 Beta. This mismatch causes assistive technologies (screen readers) to announce outdated and incorrectly formatted version information, creating a gap between visual and auditory content. While this does not break functionality, it degrades the accessibility of the component.

Suggested change
</div>
<div className="version-label" aria-label="Version 0.14 Beta">
Version: 0.14 β
</div>

Evidence: aria-label:Version 0.13 Beta, text:Version: 0.14 β

Expand Down
Loading