# SECTION 1 — HERO SECTION (CURRENTLY BUILT)

## OVERVIEW

BUILD A FULL-VIEWPORT HERO SECTION FOR "SYNEX," A WEALTH MANAGEMENT PLATFORM. THE AESTHETIC IS EDITORIAL-MINIMAL WITH A TACTILE, ORGANIC TWIST: WARM OFF-WHITE BACKGROUND, LARGE REFINED TYPOGRAPHY, TWO PHOTOREALISTIC STONES FLANKING THE COMPOSITION AT THE BOTTOM, AND A PRODUCT DASHBOARD SCREENSHOT RISING CENTRALLY BETWEEN THEM. THE MOOD IS PREMIUM, CALM, CONFIDENT — THINK APPLE KEYNOTE CROSSED WITH SWISS EDITORIAL DESIGN, GROUNDED BY NATURAL TEXTURE (STONES, GRASS).

## LAYOUT & STRUCTURE

THE HERO IS A SINGLE FULL-BLEED SECTION WITH MIN-HEIGHT 100VH, POSITION RELATIVE, OVERFLOW HIDDEN. IT USES A LAYERED Z-INDEX COMPOSITION (BACKGROUND GRADIENT → TEXT CONTENT → LEFT STONE BASE → LEFT STONE GRASS OVERLAY → CENTERED DASHBOARD IMAGE → RIGHT STONE BASE → RIGHT STONE GRASS OVERLAY → BOTTOM DARK FADE → SCROLL INDICATOR → FIXED NAVBAR ON TOP). THE BACKGROUND COLOR IS A WARM PAPER TONE (#F2F2F0). A SUBTLE RADIAL GRADIENT SITS BEHIND EVERYTHING: ELLIPSE 80% WIDE × 60% TALL, ANCHORED AT 50% 30%, FADING FROM RGBA(220,220,215,0.6) AT CENTER TO TRANSPARENT AT 70% — THIS GIVES A SOFT TOP-DOWN HALO BEHIND THE HEADLINE.

## TYPOGRAPHY (GLOBAL FONT: INTER TIGHT, LOADED FROM GOOGLE FONTS WITH WEIGHTS 300–900)

EYEBROW LABEL — "FINANCE REIMAGINED" — INTER TIGHT 500, 12PX MOBILE / 13PX SM / 14PX MD, COLOR RGBA(0,0,0,0.50), CENTERED, SITS WITH MARGIN-BOTTOM 12–16PX.

HEADLINE (H1) — TWO STACKED LINES, BOTH INTER TIGHT 500, LETTER-SPACING -1.36PX, LINE-HEIGHT 1.05 (LG: 73.088PX EXACT):

LINE 1: "A NEW STANDARD" — COLOR RGBA(0,0,0,0.20) (INTENTIONALLY FADED/GHOST)

LINE 2: "IN WEALTH MANAGEMENT" — COLOR #05050C (NEAR-BLACK)

SIZES: 34PX MOBILE → 44PX SM → 56PX MD → 68PX LG

SUBHEAD PARAGRAPH — "TAKE FULL CONTROL OF YOUR ASSETS WITH A UNIFIED PLATFORM FOR INVESTING, TRACKING, AND GROWING YOUR PORTFOLIO IN REAL TIME." — INTER TIGHT 500, 14PX MOBILE / 16PX SM / 18PX MD, COLOR RGBA(0,0,0,0.20), MAX-WIDTH 460PX, CENTERED, MARGIN-TOP 16–20PX.

ALL TEXT CONTENT SITS IN A CENTERED FLEX COLUMN STARTING WITH TOP PADDING 90PX MOBILE / 110PX SM / 140PX MD (TO CLEAR THE FIXED NAVBAR).

## NAVBAR (FIXED, TOP:0, Z-50)

BACKGROUND RGBA(242,242,240,0.85) WITH BACKDROP-FILTER BLUR(12PX). PADDING 16PX VERTICAL, 40PX HORIZONTAL. LAYOUT IS A 3-COLUMN CSS GRID (GRID-COLS-3, ITEMS-CENTER) SO THE MIDDLE COLUMN IS MATHEMATICALLY CENTERED TO THE VIEWPORT REGARDLESS OF THE SIDE COLUMNS' WIDTHS.

LEFT CELL (JUSTIFY-SELF-START): SYNEX SVG LOGO FROM https://qclay.design/lovable/synex/logo.svg, HEIGHT 28PX.

MIDDLE CELL (JUSTIFY-SELF-CENTER): FOUR NAV LINKS — DASHBOARD, ASSETS, ANALYTICS, MARKETS. EACH IS INTER TIGHT 600, 13PX, LETTER-SPACING 1.5PX, COLOR #111111, PADDING 8PX 14PX. HOVER TRANSITIONS OPACITY TO 0.55 OVER 200MS.

RIGHT CELL (JUSTIFY-SELF-END): A GLOBE ICON (LUCIDE-REACT GLOBE, 16PX, #111) FOLLOWED BY "ENGLISH" LABEL (INTER TIGHT 400, 13PX, #111), THEN A PRIMARY CTA BUTTON. CTA: BLACK PILL (BACKGROUND #111111, BORDER-RADIUS 9999PX, PADDING 10PX 20PX), WHITE TEXT "LAUNCH APP" (INTER TIGHT 600, 13PX), WITH A SMALL CIRCULAR INDICATOR ON ITS LEFT — OUTER CIRCLE 18×18 WITH RGBA(255,255,255,0.20), INNER DOT 6×6 SOLID WHITE. HOVER TRANSITIONS BACKGROUND TO #333333 OVER 200MS.

## STONES (STONEREVEAL COMPONENT, MOUNTED TWICE — LEFT AND RIGHT)

TWO PHOTOREALISTIC STONES ANCHORED TO THE BOTTOM CORNERS. EACH INSTANCE IS AN ABSOLUTELY-POSITIONED WRAPPER AT BOTTOM:0, WITH SIDE:0 (LEFT OR RIGHT), W-FIT, CURSOR-CROSSHAIR. HEIGHTS ARE RESPONSIVE: 280PX MOBILE / 380PX SM / 500PX MD / 600PX LG / 680PX XL.

EACH STONE IS COMPOSED OF TWO STACKED IMAGES:

BASE STONE (ZBASE: 1 FOR LEFT, 4 FOR RIGHT): THE DRY/CLEAN STONE PNG (STONE-LEFT.PNG / STONE-RIGHT.PNG).

GRASS OVERLAY (ZGRASS: 2 FOR LEFT, 5 FOR RIGHT): THE SAME STONE BUT COVERED IN MOSS/GRASS (STONE-G-LEFT.PNG / STONE-G-RIGHT.PNG), POSITIONED ABSOLUTELY ON TOP, POINTER-EVENTS NONE.

BOTH IMAGES USE OBJECT-FIT CONTAIN, OBJECT-POSITION ANCHORED TO THE CORRESPONDING BOTTOM EDGE ("LEFT BOTTOM" OR "RIGHT BOTTOM").

STONE ENTRY ANIMATION — BASE IMAGE FADES IN FROM OPACITY 0 WITH X-OFFSET (-40PX FOR LEFT, +40PX FOR RIGHT) TO OPACITY 1 / X:0 OVER 0.9S, EASEOUT, WITH A 0.5S DELAY.

MOSSY REVEAL INTERACTION (THE SIGNATURE MICRO-INTERACTION) — ON MOUSE ENTER, A RADIAL MASK REVEALS THE GRASS OVERLAY THROUGH A SOFT CIRCLE THAT FOLLOWS THE CURSOR:

A MOTION VALUE RADIUSRAW IS SET TO 120 ON MOUSEENTER AND BACK TO 0 ON MOUSELEAVE.

A SPRING (STIFFNESS 200, DAMPING 25) SMOOTHS IT INTO RADIUS.

THE GRASS IMAGE'S CSS MASK IS RADIAL-GRADIENT(CIRCLE ${RADIUS}PX AT ${X}PX ${Y}PX, BLACK 0%, BLACK 40%, TRANSPARENT 100%), WHERE X/Y ARE TRACKED FROM THE MOUSEMOVE EVENT RELATIVE TO THE WRAPPER'S BOUNDING RECT.

EFFECT: AS THE USER HOVERS, A SOFT CIRCULAR "WET" PATCH OF MOSS ORGANICALLY APPEARS UNDER THE CURSOR AND FADES OUT AT THE EDGES; ON LEAVE, IT SPRINGS CLOSED.

## DASHBOARD IMAGE (Z-INDEX 3, BETWEEN THE TWO STONES)

A CENTERED CONTAINER AT ABSOLUTE BOTTOM:0, LEFT:0, RIGHT:0, WITH FLEX JUSTIFY-CENTER (THIS GUARANTEES TRUE HORIZONTAL CENTERING EVEN WHILE FRAMER MOTION ANIMATES THE INNER ELEMENT'S TRANSFORM). POINTER-EVENTS NONE SO IT DOESN'T BLOCK STONE HOVER.

INNER MOTION.DIV WIDTHS: 92VW MOBILE / 72VW SM / 60VW MD / 54VW LG, CAPPED AT MAX-WIDTH 944PX (INTENTIONALLY ~20% SMALLER THAN FULL-WIDTH TO AVOID COLLIDING WITH TEXT ON ULTRA-WIDE SCREENS).

THE IMAGE IS DASHBOARD.PNG FROM https://qclay.design/lovable/synex/Dashboard.png, WIDTH 100%, HEIGHT AUTO, OBJECT-CONTAIN, BORDER-RADIUS 12PX ON TOP CORNERS ONLY, WITH A LAYERED SHADOW: 0 -8PX 80PX RGBA(0,0,0,0.12), 0 40PX 120PX RGBA(0,0,0,0.10) (A SOFT TOP GLOW PLUS A DEEP AMBIENT DROP).

DASHBOARD ENTRY ANIMATION — INITIAL: OPACITY 0, Y:80, BLUR 8PX → ANIMATE: OPACITY 1, Y:0, BLUR 0 — OVER 1.0S, 0.6S DELAY, EASING CUBIC-BEZIER(0.22, 1, 0.36, 1) (EXPO-OUT FEEL: A CONFIDENT UPWARD RISE).

## BOTTOM DARK FADE (Z-INDEX 6)

A NON-INTERACTIVE OVERLAY AT THE BOTTOM OF THE SECTION, HEIGHT 220PX, FULL WIDTH, WITH GRADIENT FROM RGBA(5,5,12,0.85) AT BOTTOM → RGBA(5,5,12,0.5) AT 40% → TRANSPARENT AT TOP. THIS ANCHORS THE COMPOSITION AND PROVIDES CONTRAST FOR THE WHITE SCROLL INDICATOR TEXT.

## SCROLL INDICATOR (Z-INDEX 20, BOTTOM 10PX)

CENTERED HORIZONTALLY VIA LEFT:0 RIGHT:0 MX-AUTO W-FIT, FLEX ROW WITH 8PX GAP. CONTAINS:

A SMALL STAR SVG (https://qclay.design/lovable/synex/star.svg), 14×14PX.

LABEL "SCROLL TO EXPLORE" — INTER TIGHT 500, 14PX, LETTER-SPACING -0.28PX, COLOR #FFF.

TWO SIMULTANEOUS ANIMATIONS:

CONTAINER FLOAT: OPACITY 0→1 OVER 0.6S WITH 1.2S DELAY, THEN A CONTINUOUS GENTLE VERTICAL BOB — Y OSCILLATES 0 → -4 → 0 OVER 2.5S, INFINITE, EASEINOUT.

STAR SPIN: CONTINUOUS ROTATION 0→360° OVER 4S, INFINITE REPEAT, EASEINOUT (INTENTIONALLY NOT LINEAR — IT HAS A SOFT ACCELERATE/DECELERATE FEEL EACH ROTATION, LIKE A SLOW GENTLE PULSE RATHER THAN A MECHANICAL SPIN).

## TEXT ENTRY ANIMATIONS (STAGGERED BLUR-UP ON LOAD)

EACH TEXT ELEMENT ANIMATES FROM OPACITY 0 + BLUR(8–12PX) + Y OFFSET → OPACITY 1 + BLUR 0 + Y:0, EASEOUT, STAGGERED:

EYEBROW: 0.6S DURATION, 0.1S DELAY, Y:16, BLUR 8PX

HEADLINE LINE 1: 0.7S, 0.2S DELAY, Y:24, BLUR 12PX

HEADLINE LINE 2: 0.7S, 0.32S DELAY, Y:24, BLUR 12PX

SUBHEAD: 0.7S, 0.45S DELAY, Y:20, BLUR 8PX

THIS PRODUCES A CINEMATIC, TOP-TO-BOTTOM FOCUS-IN CASCADE.

## ASSETS USED (ALL HOSTED, NO LOCAL COPIES)

https://qclay.design/lovable/synex/logo.svg — SYNEX WORDMARK

https://qclay.design/lovable/synex/star.svg — 4-POINT STAR FOR SCROLL INDICATOR

https://qclay.design/lovable/synex/stone-left.png — LEFT STONE, DRY

https://qclay.design/lovable/synex/stone-g-left.png — LEFT STONE WITH MOSS

https://qclay.design/lovable/synex/stone-right.png — RIGHT STONE, DRY

https://qclay.design/lovable/synex/stone-g-right.png — RIGHT STONE WITH MOSS

https://qclay.design/lovable/synex/Dashboard.png — PRODUCT UI SCREENSHOT

## TECH STACK

REACT 18 + VITE + TYPESCRIPT + TAILWIND CSS V3 + FRAMER MOTION + LUCIDE-REACT. COMPONENTS LIVE IN SRC/COMPONENTS/SYNEX/ (HERO.TSX, NAVBAR.TSX, STONEREVEAL.TSX). PAGE ENTRY IS SRC/PAGES/INDEX.TSX WHICH RENDERS <HERO /> INSIDE A <MAIN> WITH AN SR-ONLY H1 FOR SEO. DOCUMENT TITLE: "SYNEX — A NEW STANDARD IN WEALTH MANAGEMENT". META DESCRIPTION MATCHES THE SUBHEAD COPY.