Skip to content

Launch Coming Soon page with animated gradient and language selector #49

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 25, 2026
Merged

Launch Coming Soon page with animated gradient and language selector #49

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
133a6a9
feat: add "Coming Soon" page with animated gradient and selectors
v0[bot] May 24, 2026
bf9c783
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
297 changes: 152 additions & 145 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,14 @@
@import "tailwindcss";

: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;
--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);
Comment on lines +4 to +11

@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 | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Description: Check if GameCard component is imported/used in the codebase

rg -n --type=ts --type=tsx -C2 'GameCard'

Repository: LCSOGthb/Games

Length of output: 86

🏁 Script executed:

rg -n -C2 'GameCard' --glob '*.{ts,tsx}'

Repository: LCSOGthb/Games

Length of output: 480

Define missing CSS tokens used by GameCard

components/GameCard.tsx references --bg-elevated and --border-subtle, but app/globals.css no longer defines them, so those styles resolve to invalid var() values. A repo-wide search for GameCard only matches components/GameCard.tsx, so it may be currently unused, but the component is still broken—add the missing variables or update GameCard to use existing tokens.

🤖 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 4 - 11, GameCard.tsx is using missing CSS
tokens --bg-elevated and --border-subtle which resolve to invalid var() values;
either add those variables to app/globals.css (e.g., map --bg-elevated to an
elevated surface color consistent with --bg-card/--bg-surface and
--border-subtle to a lighter variant of --border-default/--border-hover) or
update components/GameCard.tsx to replace --bg-elevated and --border-subtle with
existing tokens like --bg-card/--bg-surface and --border-default/--border-hover
so the component resolves to valid styles.

}

* {
Expand All @@ -22,10 +17,15 @@
box-sizing: border-box;
}

html,
body {
height: 100%;
overflow: hidden;
Comment on lines +20 to +23

@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: overflow: hidden on html and body prevents scrolling entirely

The new CSS at app/globals.css:20-23 sets overflow: hidden on both html and body. For the current "Coming Soon" page with minimal content, this is fine. However, if any future content is added (e.g., more text, form fields, legal disclaimers), users won't be able to scroll to see it. This is an intentional design choice for the current single-viewport layout but could become a problem as the site evolves.

Open in Devin Review

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

@cubic-dev-ai cubic-dev-ai Bot May 24, 2026 •
edited
Loading

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: Global overflow: hidden on html, body will clip content that exceeds the viewport (e.g., on small screens or at higher zoom levels) and can prevent keyboard users from scrolling focused elements into view. Consider applying overflow: hidden to a dedicated wrapper element (like the gradient background) rather than globally, or use min-h-screen layout patterns instead.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At app/globals.css, line 22:

<comment>Global `overflow: hidden` on `html, body` will clip content that exceeds the viewport (e.g., on small screens or at higher zoom levels) and can prevent keyboard users from scrolling focused elements into view. Consider applying `overflow: hidden` to a dedicated wrapper element (like the gradient background) rather than globally, or use `min-h-screen` layout patterns instead.</comment>

<file context>
@@ -22,182 +17,210 @@
 
+html, body {
+  height: 100%;
+  overflow: hidden;
+}
+
</file context>
Fix with Cubic

}
Comment on lines +20 to +24

@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.

🧹 Nitpick | 🔵 Trivial | 💤 Low value

overflow: hidden on body prevents scrolling.

Setting overflow: hidden on both html and body disables scrolling entirely. This is fine for the current fixed-height "Coming Soon" layout, but will break if content ever exceeds the viewport (e.g., on very small screens or if the card grows).

Consider using overflow-x: hidden if only horizontal overflow should be prevented, or ensure this is intentional for the landing page only.

🤖 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 20 - 24, The CSS rule applying overflow: hidden
to html and body prevents all scrolling; update the rule targeting the html
and/or body selectors in app/globals.css (the "html, body { height: 100%;
overflow: hidden; }" block) so it only hides horizontal overflow (use
overflow-x: hidden) or restrict this rule to the landing/Coming Soon layout only
(e.g., remove global overflow on body and apply a scoped class for the
fixed-height page) to preserve vertical scrolling on small screens or when
content grows.


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

body {
Expand All @@ -45,159 +45,190 @@ body {
}

/* ========================================
TYPOGRAPHY HIERARCHY
ANIMATED GRADIENT BACKGROUND
======================================== */

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

@media (min-width: 640px) {
h1 {
font-size: 2.5rem;
.animated-gradient {
position: fixed;
inset: 0;
z-index: 0;
background: linear-gradient(
135deg,
#0a0a0f 0%,
#1a1a2e 25%,
#16213e 50%,
#0f3460 75%,
#0a0a0f 100%
);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
Comment on lines +67 to 77

@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.

🧹 Nitpick | 🔵 Trivial | ⚡ Quick win

Rename keyframe to kebab-case per linting rules.

Stylelint reports that keyframe names should follow kebab-case convention.

♻️ Proposed fix 
-@keyframes gradientShift {
+@keyframes gradient-shift {
   0% {
     background-position: 0% 50%;
   }

Also update the reference in .animated-gradient:

-  animation: gradientShift 15s ease infinite;
+  animation: gradient-shift 15s ease infinite;
🧰 Tools
🪛 Stylelint (17.11.1)

[error] 67-67: Expected keyframe name "gradientShift" to be kebab-case (keyframes-name-pattern)

(keyframes-name-pattern)

🤖 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 67 - 77, Rename the keyframes identifier from
"gradientShift" to a kebab-case name (e.g. "gradient-shift") and update any
references to it (notably the animation declaration in the ".animated-gradient"
rule) so the `@keyframes` name and the animation-name or animation shorthand match
the new kebab-case identifier; ensure you update both the `@keyframes` block (was
gradientShift) and the ".animated-gradient" CSS where that keyframe is used.


h2 {
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.3;
color: var(--text-primary);
/* Subtle overlay for depth */
.animated-gradient::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at center,
transparent 0%,
rgba(0, 0, 0, 0.3) 100%
);
pointer-events: none;
}

h3 {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.4;
color: var(--text-primary);
/* ========================================
CARD STYLING
======================================== */

.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;
padding: 3rem 4rem;
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;
}

p {
color: var(--text-secondary);
line-height: 1.65;
@media (max-width: 640px) {
.coming-soon-card {
padding: 2rem 1.5rem;
margin: 0 1rem;
border-radius: 1rem;
}
}

/* ========================================
FOCUS & ACCESSIBILITY
TYPOGRAPHY
======================================== */

:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
.coming-soon-title {
font-size: 3rem;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
color: var(--text-primary);
margin-bottom: 0.75rem;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
@media (max-width: 640px) {
.coming-soon-title {
font-size: 2rem;
}
}

.coming-soon-subtitle {
font-size: 1.125rem;
color: var(--text-secondary);
font-weight: 400;
}

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

/* ========================================
INTERACTIVE ELEMENTS
LANGUAGE SELECTOR
======================================== */

button,
a,
input,
select,
textarea {
transition: all 0.15s ease-in-out;
.language-selector {
position: relative;
display: inline-block;
}

/* 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;
.language-selector select {
appearance: none;
background: var(--bg-surface);
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;
font-size: 0.875rem;
font-weight: 500;
color: var(--text-primary);
cursor: pointer;
transition: all 0.15s ease-in-out;
min-width: 100px;
}

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

.btn-primary:active {
background-color: var(--accent-blue-active);
transform: translateY(0);
box-shadow: none;
.language-selector select:focus {
outline: none;
border-color: var(--focus-ring);
box-shadow: 0 0 0 2px var(--focus-ring);
}

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

@cubic-dev-ai cubic-dev-ai Bot May 24, 2026 •
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P3: The :focus-visible rule is redundant since it has identical declarations to the :focus rule above it. Since :focus-visible is a subset of :focus, the styles will already apply via the :focus selector. If the intent is to only show the focus ring for keyboard users, use :focus:not(:focus-visible) to reset and keep only the :focus-visible rule.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At app/globals.css, line 177:

<comment>The `:focus-visible` rule is redundant since it has identical declarations to the `:focus` rule above it. Since `:focus-visible` is a subset of `:focus`, the styles will already apply via the `:focus` selector. If the intent is to only show the focus ring for keyboard users, use `:focus:not(:focus-visible)` to reset and keep only the `:focus-visible` rule.</comment>

<file context>
@@ -22,182 +17,210 @@
-  border-radius: 0.75rem;
-  overflow: hidden;
-  transition: all 0.2s ease-in-out;
+.language-selector select:focus-visible {
+  outline: none;
+  border-color: var(--focus-ring);
</file context>
Fix with Cubic

outline: none;
border-color: var(--focus-ring);
box-shadow: 0 0 0 2px var(--focus-ring);
}

/* ========================================
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);
.language-selector::after {
content: "";
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid var(--text-secondary);
pointer-events: none;
}

/* ========================================
HEADER / NAVIGATION
VERSION LABEL
======================================== */

.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;
.version-label {
position: fixed;
bottom: 1.25rem;
right: 1.5rem;
z-index: 10;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
color: #ffffff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ========================================
BADGE / TAG STYLING
FOCUS & ACCESSIBILITY
======================================== */

.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);
:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}

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

.skip-link {
Expand All @@ -208,35 +239,11 @@ textarea {
padding: 0.75rem 1rem;
font-weight: 600;
color: white;
background-color: var(--accent-blue);
background-color: #3b82f6;
border-radius: 0.5rem;
text-decoration: none;
}

.skip-link:focus {
top: 1rem;
}

/* ========================================
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);
}
4 changes: 2 additions & 2 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
import "./globals.css";

export const metadata: Metadata = {
title: "Game Collection",
description: "Discover our selection of fun and challenging games to play",
title: "Coming Soon",
description: "Something amazing is on the way",

Check notice on line 6 in app/layout.tsx

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

app/layout.tsx#L6 

Unquoted property 'description' found.
};

export const viewport: Viewport = {
Expand Down
Loading
Loading