Revamp UI with new design system and landing page updates#7
Open
srexrg wants to merge 25 commits into
Open
Conversation
Import the approved Claude Design output ('Websight UI revamp project') as a
versioned reference for the revamp: the final emerald sidebar app
(WebSight.dc.html, 8 screens + d3 globe), the landing page, and the earlier
A/B dashboard exploration, plus a distilled design-system.md and README.
Files are reference snapshots, not runnable app code.
Plan for the first revamp slice - upgrade to latest stable (Next 16, React 19.2, TS 6, Tailwind 4.3), establish emerald light design tokens + Hanken Grotesk/JetBrains Mono + Phosphor, and rewrite the landing page to match design/WebSight-Landing.dc.html. Frontend-only; data layer untouched.
- react + react-dom: 19.0.0 -> 19.2.7 - @types/react: 19.0.2 -> 19.2.17 - @types/react-dom: 19.0.2 -> 19.2.3 - tailwindcss: ^4 -> 4.3.1 - @tailwindcss/postcss: ^4 -> 4.3.1 - typescript: ^5 -> 6.0.3 TS6 strictness fix: added global.d.ts with `declare module '*.css'` to resolve TS2882 on the plain CSS side-effect import in app/layout.tsx. TypeScript 6 now requires type declarations for non-JS/TS side-effect imports; this minimal declaration satisfies the check without changing runtime behavior. @supabase cookie type error (TS7006 on setAll cookiesToSet parameter) did not surface - no changes to utils/supabase/ files needed.
- Bump next 15.2.8 -> 16.2.9 and eslint-config-next 15.2.3 -> 16.2.9 - No async-API changes needed: server.ts already awaits cookies(), [domain]/page.tsx already awaits params/searchParams, middleware.ts uses request.cookies (no async needed), route.ts uses createClient() - tsconfig.json updated by Next 16 build: jsx preserve -> react-jsx, added .next/dev/types to include (mandatory Next 16 change) - tsc: no errors; build: 12 routes generated, all green - next lint broken (ESLint circular JSON / flat-config incompatibility); expected, tracked for task 0.4
- Bump Radix primitives: accordion@1.2.14, dialog@1.1.17,
dropdown-menu@2.1.18, select@2.3.1, slot@1.3.0, tabs@1.1.15,
tooltip@1.2.10
- Fix ESLint setup for Next 16:
- Change lint script from `next lint` (removed in Next 16) to `eslint .`
- Rewrite eslint.config.mjs to use native flat config by importing
eslint-config-next 16's built-in flat config exports directly
(no FlatCompat needed; the package now ships native flat config arrays)
- Add ignores for lib/database.types.ts and public/** (non-UTF-8 files)
- Trivial lint fixes in pre-existing code:
- Remove 5 unused imports in TrackingScript.tsx
- Remove unused Monitor import in AnalyticsOverview.tsx
- Remove unused FaInstagram import in Footer.tsx
- Remove orphan FaGithub expression in Navbar.tsx
- Fix unescaped apostrophes in Cta.tsx and hero.tsx
- Replace any types with Record<string, unknown> in analytics.ts
- Convert useEffect+setState mount patterns to lazy useState init
in WorldMap.tsx and login-button.tsx
Remaining: 1 pre-existing lint error in AnalyticsClient.tsx
(react-hooks/set-state-in-effect: prop-sync pattern, non-trivial refactor,
file likely rewritten in a later phase).
Verification: tsc PASS, build PASS, lint 1 error (reported above).
…ding dashboard rewrite
Port the ANNOUNCEMENT and NAV blocks from WebSight-Landing.dc.html. AnnouncementBar: dark #0E1310 strip, emerald pill via bg-brand, ArrowRight in #5FD3A6 accent, links to /auth. Navbar: sticky bg-white/86 backdrop-blur, max-w-[1180px] container, Logo component, navLinks from lib/landing/content, Sign in + Start free Button (bg-brand). No hardcoded #0E9C6E. Server components, no use client.
Port hero section from design/WebSight-Landing.dc.html: radial emerald glow, OPEN SOURCE pill with blinking dot, 66px/800 headline with text-brand "visitors", subhead, two CTAs (emerald solid + white outline), trust ticks with CheckCircle fill, and product-visual card (browser chrome, mini sidebar nav, 4 metric cards in font-mono, visitors area-chart SVG, live panel with Globe size=120). Server component; no "use client". All emerald via bg-brand/text-brand/ bg-accent/text-[#0B7E58] tokens.
Create TrustBar component with 12k+ eyebrow and logo row from content data. Rewrite Features with brand eyebrow, 44px heading, and 3-col tinted card grid.
Creates GlobeHighlight (id="globe", Globe size=320, wsFloat animation, globePoints checklist) and RealtimeHighlight (LiveBadge, liveFeed rows with iconMap icon chips, dark CTA to /auth). All emerald color via bg-brand/text-brand/bg-accent tokens; build/tsc/lint green.
Install.tsx: client component with syntax-colored code block, clipboard copy button with 1.5s "Copied" feedback, and 3 numbered steps from content. StatsBand.tsx: server component dark band with 4 mono stats from content.
Replaces decorative SVG globe in GlobeHighlight with a three-globe + @react-three/fiber WebGL globe, emerald-themed with animated arcs and auto-rotation. Also fixes pre-existing TS errors in iconMap typing.
Dark radial spotlight backdrop for contrast on the light page, deep emerald globe with brighter hex-dot continents and mint/white glowing arcs + markers.
…d clipboard
Replace web-font class strings in miniNav with @phosphor-icons/react/dist/ssr
components (ChartLine, Broadcast, GlobeHemisphereWest, FileText, UsersThree,
GearSix) rendered via <item.Icon size={14} weight={...} />. Also add .catch(()=>{})
to the clipboard.writeText promise in Install.tsx to silence unhandled rejections
on insecure origins.
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
A full revamp of the WebSight marketing front: upgraded the stack to latest stable, established a new emerald light design system, and rewrote the landing page end-to-end (including an interactive 3D visitor globe) to match the approved Claude Design mockups. Frontend-only - the data model, auth,
tracker.js, and API routes are untouched.What's included
Phase 0 - Stack upgrade (own commits, independently verifiable)
Phase 1 - Design system foundation
#0E9C6E) inapp/globals.css; shared keyframesLogo/LiveBadgebrand atomsPhase 2 - Landing rewrite (13 sections, data-driven)
lib/landing/content.ts; retired 7 old components (~1,860 lines removed)three-globe+@react-three/fiberv9) themed to an emerald dark-spotlight, mounted in the globe highlight (ssr:falseclient boundary)Verification
npx tsc --noEmit,npm run lint,npm run buildall green