Revamp UI/UX with new design and responsive layout#58
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Seems you are using me but didn't get OPENAI_API_KEY seted in Variables/Secrets for this repo. you could follow readme for more information |
|
CodeAnt AI is reviewing your PR. Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
Code Review by Qodo
1. No reduced-motion fallback
|
|
View changes in DiffLens |
1 similar comment
|
View changes in DiffLens |
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
Cache: Disabled due to Reviews > Disable Cache setting 📝 WalkthroughSummary by CodeRabbit
WalkthroughThis PR redesigns the "coming soon" UI with a dark theme: new root tokens and accent variables, updated animated gradient, revamped coming-soon card layout, refreshed typography and button styles, language selector/focus styling, and mobile positioning tweaks. Small page integration changes remove a hidden label and center the card. ChangesComing Soon UI Redesign
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 3❌ Failed checks (1 warning, 2 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
✨ Simplify code
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
builder-io-integration
Bot
changed the title
|
View changes in DiffLens |
Hard-Coded Secrets (1)
More info on how to fix Hard-Coded Secrets in General. Vulnerable Libraries (5)
More info on how to fix Vulnerable Libraries in JavaScript. 👉 Go to the dashboard for detailed results. 📥 Happy? Share your feedback with us. |
…isort, Prettier, RuboCop, Ruff Formatter, Rustfmt, Scalafmt, StandardJS, StandardRB, swift-format and Yapf This commit fixes the style issues introduced in 0f92a6c according to the output from Autopep8, Black, ClangFormat, dotnet-format, isort, Prettier, RuboCop, Ruff Formatter, Rustfmt, Scalafmt, StandardJS, StandardRB, swift-format and Yapf. Details: #58
|
View changes in DiffLens |
|
Seems you are using me but didn't get OPENAI_API_KEY seted in Variables/Secrets for this repo. you could follow readme for more information |
![codereviewbot-ai[bot]](https://avatars.githubusercontent.com/in/309638?s=60&v=4){kind=small}
| backdrop-filter: blur(40px); | ||
| -webkit-backdrop-filter: blur(40px); |
There was a problem hiding this comment.
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.
| id="language-select" | ||
| value={lang} |
There was a problem hiding this comment.
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);
}}| <p className="coming-soon-subtitle">{t.subtitle}</p> | ||
| </div> |
There was a problem hiding this comment.
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>
|
View changes in DiffLens |
PR Summary by QodoRevamp Coming Soon page styling and responsive layout WalkthroughsDescription• Refresh global theme colors, gradients, and component styling for a modern UI. • Improve Coming Soon card centering and responsiveness across mobile/tablet breakpoints. • Simplify language selector UI by removing the screen-reader-only label. Diagramgraph TD
A["app/page.tsx (Home)"] --> B["ComingSoonCard"] --> C["app/globals.css"]
A --> D["LanguageSelector"] --> C
C --> E["Theme variables"]
C --> F["Responsive breakpoints"]
High-Level AssessmentThe following are alternative approaches to this PR: 1. Rely on CSS class-only centering (remove inline margin)
2. Use Tailwind utilities for layout instead of custom CSS
3. Keep an accessible label (sr-only) and adjust copy instead of removing
Recommendation: Prefer removing the inline File ChangesEnhancement (1)
Bug fix (1)
|
codeant-ai
Bot
added
the
size:L
![codescene-delta-analysis[bot]](https://avatars.githubusercontent.com/in/53921?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the styling of the 'coming soon' page, introducing a new color palette, responsive layout adjustments, hover transitions, and action buttons. The feedback highlights two minor redundancies: an inline style for margin centering in app/page.tsx that is already handled by the CSS class, and a duplicate background color declaration in app/globals.css for the language selector.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| 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" }}> |
There was a problem hiding this comment.
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.
| <div className="coming-soon-card" style={{ margin: "auto" }}> | |
| <div className="coming-soon-card"> |
| -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; |
There was a problem hiding this comment.
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;
}
|
View changes in DiffLens |
1 similar comment
|
View changes in DiffLens |
 |
|
Overall Grade |
Security Reliability Complexity Hygiene |
Code Review Summary
| Analyzer | Status | Updated (UTC) | Details |
|---|---|---|---|
| JavaScript |  |
Jun 9, 2026 3:00p.m. | Review ↗ |
| Python | |
Jun 9, 2026 3:00p.m. | Review ↗ |
| Rust | |
Jun 9, 2026 3:00p.m. | Review ↗ |
| Secrets | |
Jun 9, 2026 3:00p.m. | Review ↗ |
| Ruby | |
Jun 9, 2026 3:00p.m. | Review ↗ |
| Shell | |
Jun 9, 2026 3:00p.m. | Review ↗ |
| Scala | |
Jun 9, 2026 3:00p.m. | Review ↗ |
| SQL | |
Jun 9, 2026 3:00p.m. | Review ↗ |
| Terraform | |
Jun 9, 2026 3:00p.m. | Review ↗ |
| Code coverage |  |
Jun 9, 2026 3:00p.m. | Review ↗ |
| Swift | |
Jun 9, 2026 3:00p.m. | Review ↗ |
| C & C++ | |
Jun 9, 2026 3:00p.m. | Review ↗ |
| C# | |
Jun 9, 2026 3:00p.m. | Review ↗ |
| Ansible | |
Jun 9, 2026 3:00p.m. | Review ↗ |
Important
AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.
|
There was a problem hiding this comment.
Gates Passed
See analysis details in CodeScene
Quality Gate Profile: Pay Down Tech Debt
Install CodeScene MCP: safeguard and uplift AI-generated code. Catch issues early with our IDE extension and CLI tool.
Not up to standards ⛔🔴 Issues
|
| Category | Results |
|---|---|
| BestPractice | 2 medium |
🟢 Metrics 0 complexity
Metric Results Complexity 0
NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
There was a problem hiding this comment.
🚩 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)
Was this helpful? React with 👍 or 👎 to provide feedback.
| 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" }}> |
There was a problem hiding this comment.
📝 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.
Was this helpful? React with 👍 or 👎 to provide feedback.
|
Review changes with |
Reviewer's GuideRevamps the coming-soon page with a new slate/indigo theme, glassy rectangular card, gradient headline, polished language selector, and breakpoint-based responsive adjustments, plus new reusable button styles. Flow diagram for updated coming-soon layout and stylingflowchart LR
subgraph RootTheme[CSS root theme]
bgBase[--bg-base]
bgCard[--bg-card]
accent[--accent]
accentLight[--accent-light]
end
bodyBg[body gradient background]
card[coming-soon-card]
title[coming-soon-title]
subtitle[coming-soon-subtitle]
langSel[language-selector select]
buttons[action-buttons / btn classes]
bgBase --> bodyBg
bgCard --> card
accent --> title
accentLight --> title
accent --> langSel
accentLight --> buttons
bodyBg --> card
card --> title
card --> subtitle
card --> buttons
langSel -. fixed top-right .-> card
subgraph ResponsiveBreakpoints[Responsive styles]
bp768[<= 768px: card, title, subtitle scale]
bp640[<= 640px: title, subtitle scale]
bp480[<= 480px: card, buttons, version-label tighten]
end
bp768 --> card
bp768 --> title
bp768 --> subtitle
bp640 --> title
bp640 --> subtitle
bp480 --> card
bp480 --> buttons
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| /* ======================================== | ||
| 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 { | ||
| 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); |
There was a problem hiding this comment.
.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!
| 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" }}> |
There was a problem hiding this comment.
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!
|
View changes in DiffLens |
1 similar comment
|
View changes in DiffLens |
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
| 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 { |
There was a problem hiding this comment.
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
|
CodeAnt AI finished reviewing your PR. |
coderabbitai
Bot
added
v0
and removed
size:L
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- Removing the
<label>from the language selector leaves the<select>without an accessible name; consider addingaria-labelor a visually hidden label to retain screen reader usability. - The inline
style={{ margin: 'auto' }}on.coming-soon-cardduplicates the new CSS rule and can be removed to keep centering logic in a single place. - There are several hard-coded color RGBA values (e.g., for the card background and borders) that could be expressed via the existing CSS variables (or new ones) to keep the theme more consistent and easier to tweak.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Removing the `<label>` from the language selector leaves the `<select>` without an accessible name; consider adding `aria-label` or a visually hidden label to retain screen reader usability.
- The inline `style={{ margin: 'auto' }}` on `.coming-soon-card` duplicates the new CSS rule and can be removed to keep centering logic in a single place.
- There are several hard-coded color RGBA values (e.g., for the card background and borders) that could be expressed via the existing CSS variables (or new ones) to keep the theme more consistent and easier to tweak.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
![llamapreview[bot]](https://avatars.githubusercontent.com/in/1023541?s=60&v=4){kind=small}
There was a problem hiding this comment.
AI Code Review by LlamaPReview
🎯 TL;DR & Recommendation
Recommendation: Approve with suggestions
This PR delivers a well-executed visual refresh of the coming-soon page with a cohesive slate/indigo palette, responsive layout, and smoother animations. The few issues found are minor non-blocking improvements that should be addressed before merge.
🌟 Strengths
- Clean separation of design tokens via CSS variables.
- Responsive breakpoints at 768px, 640px, and 480px are well thought out.
| Priority | File | Category | Impact Summary | Anchors |
|---|---|---|---|---|
| P2 | app/page.tsx | Bug | aria-label version text mismatch | aria-label:Version 0.13 Beta, text:Version: 0.14 β |
| P2 | app/globals.css | Maintainability | Unused button CSS classes | search:.btn-primary |
| P2 | app/globals.css | Maintainability | Duplicated background-color property | |
| P2 | app/page.tsx | Maintainability | Redundant inline margin:auto |
🔍 Notable Themes
The findings centre on code cleanliness: removing dead CSS, deduplicating properties, and trimming redundant markup reduces maintenance debt.
⚠️ **Unanchored Suggestions (Manual Review Recommended)**
The following suggestions could not be precisely anchored to a specific line in the diff. This can happen if the code is outside the changed lines, has been significantly refactored, or if the suggestion is a general observation. Please review them carefully in the context of the full file.
📁 File: app/globals.css
Speculative: The PR introduces complete CSS rules for .action-buttons, .btn, .btn-primary, and .btn-secondary, yet the page JSX does not render any buttons or reference these classes. The PR description explicitly states these styles are “for future use.” While forward-looking code can be acceptable, including dead CSS increases the bundle size, adds unnecessary code to review, and may mislead future maintainers into thinking buttons exist. This should be removed until the buttons are actually implemented, or accompanied by a clear comment.
Related Code:
.btn-primary {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
color: white;
box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}💡 Have feedback? We'd love to hear it in our GitHub Discussions.
✨ This review was generated by LlamaPReview Advanced, which is free for all open-source projects. Learn more.
| min-width: 120px; | ||
| background-color: rgba(30, 41, 59, 0.5); | ||
| } |
There was a problem hiding this comment.
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.
| 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" }}> |
There was a problem hiding this comment.
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.
| <div className="coming-soon-card" style={{ margin: "auto" }}> | |
| <div className="coming-soon-card"> |
| <div className="coming-soon-card" style={{ margin: "auto" }}> | ||
| <h1 className="coming-soon-title">{t.title}</h1> | ||
| <p className="coming-soon-subtitle">{t.subtitle}</p> | ||
| </div> |
There was a problem hiding this comment.
[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.
| </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 β
Code Review SummaryStatus: No New Issues Found | Recommendation: Merge All changes in this PR are CSS styling updates and JSX adjustments. The existing inline comments have already addressed the key concerns:
The removed sr-only label has been properly replaced with Files Reviewed (2 files)
Reviewed by laguna-m.1-20260312:free · 185,602 tokens |
✅ Deploy Preview for lsngames ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for lsngames ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
2 participants
User description
Summary
This PR revamps the visual design of the coming-soon page with a refreshed color palette, improved card layout, and full responsive/adaptive screen support. It also removes the hidden screen-reader label from the language selector and centers the card properly on all screen sizes.
Problem
The coming-soon card was not centered on the screen, the overall UI felt visually heavy and lacked polish, and there was no adaptive/responsive styling for smaller screen sizes. The language selector also included an unnecessary hidden label element.
Key Changes
--bg-base,--bg-card,--accent,--accent-light, etc.) with a refreshed animated gradient backgroundmax-width: 580px), increased border-radius to2.5rem, enhanced backdrop blur to40px, and added a hover state with subtle indigo glowmargin: autoboth in CSS and inline style to ensure the card is properly centered within the flex container768px,640px, and480pxfor the card, title, subtitle, buttons, and version label.coming-soon-titleusingbackground-clip: text.action-buttons,.btn,.btn-primary, and.btn-secondaryCSS classes for future use<label>element from the JSX15sto20sfor a smoother feelTip
This PR wasn't reviewed by Quality Agent. Enable it in Project Settings to get AI-powered code review on every PR.
To clone this PR locally use the Github CLI with command
gh pr checkout 58You can tag me at @BuilderIO for anything you want me to fix or change
CodeAnt-AI Description
Refresh the coming-soon page with a clearer layout and mobile-friendly spacing
What Changed
Impact
✅ Cleaner coming-soon screen✅ Fewer layout issues on mobile✅ Easier language selection💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.
Summary by Sourcery
Revamp the coming-soon page with a new indigo-themed glassmorphism design and improved responsive layout.
New Features:
Bug Fixes:
Enhancements: