feat: UVAI UI/UX full refactor — features page, pricing, Nav, LandingNav - #205
Merged
Conversation
Remove emojis, replace decorative shapes, use real mockups, tighten typography, and refine UI elements. Co-authored-by: Hayden <154503486+groupthinking@users.noreply.github.com>
…ngNav cross-page links - pricing: replace emoji shield/chat with SVG icons - pricing: replace unicode ✓ CheckItem with inline SVG polyline - pricing: replace unicode ✓/— in comparison table with <TableCheck>/<TableDash> SVG components - pricing: fix Pro card bg (remove purple gradient, use teal tint) - pricing: fix hero gradient-text to use inline teal gradient (no class dependency) - pricing: fix FAQ HTML entity literal in JS string - pricing: swap Nav→LandingNav for consistent marketing nav experience - Nav: replace gradient logo div with clean bordered SVG icon (matches LandingNav) - LandingNav: convert anchor-only links to proper Next.js <Link> with cross-page routes - LandingNav: add active-state highlight based on usePathname - features: swap Nav→LandingNav for consistent marketing nav experience Co-authored-by: v0[bot] <v0[bot]@users.noreply.github.com>
Contributor
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (4)
Disabled knowledge base sources:
📝 WalkthroughSummary by CodeRabbitRelease Notes
WalkthroughThis PR redesigns the Features and Pricing landing pages with a consistent navigation experience. Navigation components are improved to detect current routes and apply active-link styling. Both pages switch from the old ChangesLanding Pages Navigation & Visual Redesign
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested labels
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request refactors the landing and pricing pages to replace standard emojis and icons with inline SVGs, adds interactive visual mockup components to showcase platform features, and updates navigation links. The review feedback highlights a layout overlap issue caused by the fixed header when navigating to section anchors, identifies opportunities to replace inline styles with Tailwind CSS utility classes for better maintainability, and suggests updating the 'Features' navigation link to point directly to the newly introduced dedicated features page.
| {SECTIONS.map((section, sectionIdx) => { | ||
| const isEven = sectionIdx % 2 === 0; | ||
| return ( | ||
| <section key={section.id} id={section.id}> |
Contributor
There was a problem hiding this comment.
Since the LandingNav component is fixed at the top of the page, clicking on any of the section nav pills will cause the page to scroll to the target section, but the top portion of the section (including the title and tag) will be covered by the fixed header. Adding a scroll margin top (scroll-mt-24) to the section elements resolves this overlap issue.
Suggested change
| <section key={section.id} id={section.id}> | |
| <section key={section.id} id={section.id} className="scroll-mt-24"> |
Comment on lines
+169
to
+175
| <span | ||
| style={{ | ||
| WebkitBackgroundClip: 'text', | ||
| WebkitTextFillColor: 'transparent', | ||
| backgroundImage: 'linear-gradient(135deg, #6af2de 0%, #14b8a6 100%)', | ||
| }} | ||
| >transparent</span> |
Contributor
There was a problem hiding this comment.
Using inline styles for static gradients in a Tailwind CSS project reduces maintainability and consistency. This inline style can be fully replaced with standard Tailwind CSS gradient and text clipping utility classes.
<span className="bg-gradient-to-br from-[#6af2de] to-[#14b8a6] bg-clip-text text-transparent">transparent</span>
References
- Tailwind CSS is specified as the styling framework for the project. Inline styles should be avoided in favor of Tailwind utility classes to maintain styling consistency and keep the codebase clean. (link)
Comment on lines
+37
to
+41
| <div | ||
| className="w-8 h-8 rounded-lg flex items-center justify-center transition-transform duration-200 group-hover:scale-105" | ||
| style={{ border: '2px solid #6af2de', color: '#6af2de' }} | ||
| aria-hidden | ||
| > |
Contributor
There was a problem hiding this comment.
The inline styles for the logo border and text color can be fully replaced with Tailwind CSS classes using arbitrary values (border-2 border-[#6af2de] text-[#6af2de]). This avoids inline styles and maintains consistency with the rest of the Tailwind-based styling.
Suggested change
| <div | |
| className="w-8 h-8 rounded-lg flex items-center justify-center transition-transform duration-200 group-hover:scale-105" | |
| style={{ border: '2px solid #6af2de', color: '#6af2de' }} | |
| aria-hidden | |
| > | |
| <div | |
| className="w-8 h-8 rounded-lg flex items-center justify-center border-2 border-[#6af2de] text-[#6af2de] transition-transform duration-200 group-hover:scale-105" | |
| aria-hidden | |
| > |
References
- Tailwind CSS is specified as the styling framework for the project. Inline styles should be avoided in favor of Tailwind utility classes to maintain styling consistency and keep the codebase clean. (link)
Comment on lines
8
to
13
| const NAV_LINKS = [ | ||
| { href: '#features', label: 'Features' }, | ||
| { href: '#workflow', label: 'Workflow' }, | ||
| { href: '#templates', label: 'Templates' }, | ||
| { href: '#contact', label: 'Contact' }, | ||
| { href: '/#features', label: 'Features', page: '/features' }, | ||
| { href: '/#workflow', label: 'How it works' }, | ||
| { href: '/pricing', label: 'Pricing', page: '/pricing' }, | ||
| { href: '/#contact', label: 'Contact' }, | ||
| ]; |
Contributor
There was a problem hiding this comment.
Since Commit 1 introduces a dedicated, fully refactored /features page, the 'Features' link in the main navigation should point directly to /features instead of the home page anchor /#features. This ensures a consistent user experience across pages.
Suggested change
| const NAV_LINKS = [ | |
| { href: '#features', label: 'Features' }, | |
| { href: '#workflow', label: 'Workflow' }, | |
| { href: '#templates', label: 'Templates' }, | |
| { href: '#contact', label: 'Contact' }, | |
| { href: '/#features', label: 'Features', page: '/features' }, | |
| { href: '/#workflow', label: 'How it works' }, | |
| { href: '/pricing', label: 'Pricing', page: '/pricing' }, | |
| { href: '/#contact', label: 'Contact' }, | |
| ]; | |
| const NAV_LINKS = [ | |
| { href: '/features', label: 'Features', page: '/features' }, | |
| { href: '/#workflow', label: 'How it works' }, | |
| { href: '/pricing', label: 'Pricing', page: '/pricing' }, | |
| { href: '/#contact', label: 'Contact' }, | |
| ]; |
groupthinking
added a commit
that referenced
this pull request
May 27, 2026
* chore: trigger uvai.io production deploy * feat: UVAI UI/UX full refactor — features page, pricing, Nav, LandingNav (#205) Zero emoji, real product mockups per feature section, SVG icons everywhere, LandingNav with proper cross-page routing and active states. Co-authored-by: v0[bot] <v0[bot]@users.noreply.github.com> * test: improve test coverage, fix Vercel build, dashboard auto-select, E2E resilience (#206) - 155 new unit tests (middleware, API models, error handling) - Fix Vercel ERESOLVE build failure via .npmrc legacy-peer-deps - Fix dashboard ?video= URL param auto-select (issue #159) - Fix next.config.js duplicate redirects/headers - Fix CI test dependency installation for Python 3.12 - Make SSE stream always emit terminal pipeline_status event - Make E2E tests resilient to live server degraded mode - Replace banned dQw4w9WgXcQ video ID with auJzb1D-fag throughout * fix: remove hardcoded Grok API key (#194) 🎯 What: Removed the hardcoded fallback value for the GROK_API_KEY in TriModelConsensusTool.⚠️ Risk: Hardcoded API keys in source code can be exploited if the codebase is exposed or leaked, leading to unauthorized API access, quota exhaustion, and potential financial loss. 🛡️ Solution: Removed the hardcoded string so the tool relies strictly on the environment variable, aligning with secure configuration management practices. Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com> * feat(web): add privacy/terms/api-docs/app/login routes; noindex prototype pages (#204) Resolves 404s on /privacy, /terms, /api/docs, /app, /login and ensures /prototype carries a noindex robots tag. Scope is intentionally narrow and does not overlap PR #202 (assets, robots, sitemap, JSON-LD, a11y). - /privacy, /terms: server-rendered legal placeholder pages with proper metadata, canonical URLs, and footer links. Plain-language, startup- friendly; will be replaced before enterprise contracts. - /api/docs: human-readable reference matching the documentation pointer returned by /api JSON. Lists actual /api/* routes that exist in code. - /app, /login: server redirects to /dashboard, marked noindex. UVAI has no auth gate today, so this matches actual product behavior. - /prototype: adds a route layout with robots.index=false because the underlying page is an internal prototype spec, not a public surface. - LandingFooter: surfaces Privacy and Terms links now that the pages exist. Build: next build succeeds, 25 routes generated. Type-check and ESLint clean. Co-authored-by: Claude <claude@anthropic.com> Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com> * test: add unit tests for DatabaseOptimizer._calculate_performance_grade (#182) Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com> * fix(security): SECRET_KEY, CORS wildcard, SQL injection, command injection (#207) Resolves conflicts manually — the conflicting hunks were all in tests/e2e/pipeline.test.ts and .github/workflows/e2e-tests.yml which were already fixed better in #206. The security-relevant changes are applied cleanly: - code_generator.py (#193): replace hardcoded SECRET_KEY with os.getenv/secrets.token_urlsafe - code_generator.py (#195): restrict CORS allow_origins from ["*"] to localhost origins - real_api_endpoints.py (#196): read ALLOWED_ORIGINS from env; default to localhost origins - database_cleanup_service.py (#197): validate table name with regex before SQL use; quote safe_table_name with double quotes for PRAGMA and DELETE statements - deployment_manager.py (#200): add path traversal guard (resolve + is_dir check); add --ignore-scripts to npm install; use resolved_path for all cwd args - tests/unit/test_database_cleanup_security.py: new unit tests for SQL injection prevention Closes #193 #195 #196 #197 #200 https://claude.ai/code/session_01AgA9F82EwazbdB5R2f9nsd Co-authored-by: Claude <noreply@anthropic.com> * chore: move legacy .agent content under .github (#162) * chore: move legacy agent files into .github Agent-Logs-Url: https://github.com/groupthinking/EventRelay/sessions/8e79c6e5-9755-40a2-b8b0-73b9ff75249e Co-authored-by: groupthinking <154503486+groupthinking@users.noreply.github.com> * docs: fix relocated agent references Agent-Logs-Url: https://github.com/groupthinking/EventRelay/sessions/8e79c6e5-9755-40a2-b8b0-73b9ff75249e Co-authored-by: groupthinking <154503486+groupthinking@users.noreply.github.com> * docs: remove vague agent rule reference Agent-Logs-Url: https://github.com/groupthinking/EventRelay/sessions/8e79c6e5-9755-40a2-b8b0-73b9ff75249e Co-authored-by: groupthinking <154503486+groupthinking@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: groupthinking <154503486+groupthinking@users.noreply.github.com> * chore(web): UVAI Phase 1 — SEO, a11y, missing static assets Live uvai.io referenced /favicon.ico, /icon.svg, /apple-touch-icon.png but apps/web/public/ did not exist in the repo, producing 404s. Layout metadata also pointed metadataBase and og.url at the legacy v0-uvai.vercel.app host rather than the canonical uvai.io domain. Changes: - Add apps/web/public with favicon.ico (multi-res), icon.svg, apple-touch-icon.png, og-image.png (1200x630), manifest.json, robots.txt. - Add apps/web/src/app/sitemap.ts (Next.js Metadata Route sitemap). - layout.tsx: metadataBase + og.url -> https://uvai.io, add alternates.canonical, inject Organization/WebSite/SoftwareApplication JSON-LD, add skip-to-main link. - page.tsx: <main id=\"main\"> as skip-link target. - LandingNav.tsx: aria-label=\"Primary\" on nav, aria-labels on brand + GitHub external link, visible focus rings on all interactive elements. - HeroSection.tsx: focus rings on CTAs, honor prefers-reduced-motion for marquee. - Add CHANGELOG.md with timestamped entry. Local verification: - npx eslint on touched files: clean - npm run build (apps/web): success, /sitemap.xml route generated, TypeScript clean No production / deploy / DNS / secret changes. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * chore(web): PR #202 review fixes — no dangerouslySetInnerHTML, MD022, skip-link in layout, central SITE_URL Addresses code review feedback on PR #202. 1. layout.tsx: replace dangerouslySetInnerHTML JSON-LD with React <script>{jsonLdString}</script> children. jsonLdString escapes `<` -> `<` to prevent any nested `</script>` breakout. Build verified: rendered HTML contains exactly one valid JSON-LD block. Complies with repo policy that forbids dangerouslySetInnerHTML. 2. CHANGELOG.md: markdownlint MD022 — blank lines after `#### Added`, `### Changed`, and `### Notes / known follow-ups (not in this change)`. 3. Skip-to-main-content target moved from `apps/web/src/app/page.tsx`'s <main> to the root layout's content wrapper. The link now works on every route (dashboard, pricing, features, playground, prototype, not-found), not just the homepage. Duplicate `id="main"` removed from page.tsx — rendered HTML on `/` now contains exactly one `id="main"`. 4. Add apps/web/src/lib/site.ts exporting SITE_URL = 'https://uvai.io'. layout.tsx (metadataBase, alternates.canonical, og.url, JSON-LD URLs) and sitemap.ts both consume it. Pricing/playground references kept as-is — those are mailto: addresses and api.uvai.io examples in code samples, not the same axis as the site origin. Failing CI check (E2E Pipeline Tests) is unrelated to this PR: - E2E runs vitest against BASE_URL=https://uvai.io (the live deployment) - Live root returns 200 but is stale (title still "UVAI — Video to Software") - This PR touches zero files under tests/e2e/, src/youtube_extension/, or apps/web/src/app/api/ - Resolution requires a redeploy of the current main, which is outside this PR's scope per the original instructions Local verification: - npx eslint on touched files: clean (exit 0) - npm run build (apps/web): ✓ Compiled, TypeScript clean, 21 pages - Rendered HTML inspection: JSON-LD block present and well-formed; id="main" present on /, /pricing, /features, /dashboard, /playground; exactly one id="main" on each prerendered page (no duplicates) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> --------- Co-authored-by: v0[bot] <v0[bot]@users.noreply.github.com> Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com> Co-authored-by: Claude <claude@anthropic.com> Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com> Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: Claude Code <claude-code@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Full UI/UX refactor across the marketing surface of UVAI. Two focused commits.
Commit 1 —
/featurespage complete rewrite✓charactersrounded-lgwith per-person accent colorstext-balanceon headings, tighter hierarchy,font-monosection nav pillsCommit 2 — App-wide audit
✓/—table cells →<TableCheck>/<TableDash>SVG components, Pro card purple gradient removed (teal tint), hero.gradient-textclass → inline teal gradient, FAQ HTML entity bug fixed<a href="#hash">→<Link href="/page#hash">withusePathnameactive-state highlighting,/featuresand/pricingadded as cross-page destinationsLandingNavinstead ofNavfor a unified marketing experience