From d718bdf357af57ee0eea6914e0eeeac45f2a3834 Mon Sep 17 00:00:00 2001 From: Anuraj Jit Saikia Date: Sun, 21 Jun 2026 00:50:56 +0530 Subject: [PATCH] feat(web): redesign landing page with spotlight hero and shimmer cards MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Rework the logged-out marketing landing page on the refined-dark direction: a slim top nav (logo + sign in), a UPI-aware pill badge above the headline, and a top-anchored amber spotlight backed by a faded dot grid behind the hero. Feature cards gain ringed icon badges, brighter hover borders, and a single hover-triggered light sweep (no looping shimmer). Buttons stay clean — no glow or hover gimmicks. Spotlight and sweep are static CSS; reduced-motion neutralizes the sweep globally. --- apps/web/src/index.css | 71 ++++++++++++++++++++++++++ apps/web/src/screens/LandingScreen.tsx | 65 +++++++++++++++-------- 2 files changed, 114 insertions(+), 22 deletions(-) diff --git a/apps/web/src/index.css b/apps/web/src/index.css index a75edfd..65eae54 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -140,6 +140,77 @@ html, body { } } +/* ─── Landing redesign ───────────────────────────────────────────── + Top-anchored amber spotlight + faded dot grid. Static (no JS, no + animation) so it's cheap; lives only behind the hero, rest stays + clean dark. Content must sit in a relative z-10 wrapper above these. */ +.hero-spotlight { + position: relative; + overflow: hidden; +} +.hero-spotlight::before { + /* faint dotted grid, masked so it fades out below the fold */ + content: ""; + position: absolute; + inset: 0; + background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1.4px); + background-size: 26px 26px; + -webkit-mask-image: radial-gradient(110% 70% at 50% 0%, #000 0%, transparent 65%); + mask-image: radial-gradient(110% 70% at 50% 0%, #000 0%, transparent 65%); + pointer-events: none; +} +.hero-spotlight::after { + /* two stacked amber radials: a tight strong core + a wide soft wash */ + content: ""; + position: absolute; + inset: 0; + background: + radial-gradient(55% 45% at 50% -8%, rgba(245, 158, 11, 0.24) 0%, transparent 60%), + radial-gradient(120% 70% at 50% -10%, rgba(245, 158, 11, 0.07) 0%, transparent 70%); + pointer-events: none; +} + +/* Feature card: dark surface, border brightens on hover, with a single + diagonal light sweep that runs only on hover (not a looping shimmer). + Reduced-motion users get the border change without the sweep. */ +.feat-card { + position: relative; + overflow: hidden; + background: var(--gradient-surface); + border: 1px solid var(--color-border-subtle); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-card); + transition: + border-color var(--dur-mid) var(--ease-out), + transform var(--dur-mid) var(--ease-out); +} +.feat-card:hover { + border-color: var(--color-border-default); + transform: translateY(-2px); +} +.feat-card > * { + position: relative; + z-index: 1; +} +.feat-card::after { + content: ""; + position: absolute; + inset: 0; + z-index: 0; + background: linear-gradient( + 120deg, + transparent 30%, + rgba(255, 255, 255, 0.06) 50%, + transparent 70% + ); + transform: translateX(-120%); + transition: transform 700ms var(--ease-out); + pointer-events: none; +} +.feat-card:hover::after { + transform: translateX(120%); +} + /* Honor reduced-motion globally — covers landing animations + existing transitions */ @media (prefers-reduced-motion: reduce) { *, diff --git a/apps/web/src/screens/LandingScreen.tsx b/apps/web/src/screens/LandingScreen.tsx index fa1f114..7ec28ef 100644 --- a/apps/web/src/screens/LandingScreen.tsx +++ b/apps/web/src/screens/LandingScreen.tsx @@ -31,9 +31,10 @@ export function LandingScreen() { return (
- {/* Ambient hero glow */} -
-
+ {/* Hero owns the amber spotlight + dot-grid backdrop */} +
+
+