SmileLab - Phone Mockups

22:I[5034,["2260","static/chunks/2260-77a3f345bbc959a0.js","9356","static/chunks/9356-25b16f818c154d03.js","186","static/chunks/186-f0d420b86c8a5104.js","2879","static/chunks/2879-a133dff9dcb21fbb.js","5034","static/chunks/5034-0ef16291859fdba9.js","4995","static/chunks/app/(frontend)/%5Blocale%5D/(dashboard)/library/page-47aa2f755169809f.js"],"LibraryBrowser"] 23:T2752,**Create a scroll-driven landing page for "Terova" -- a circular-systems / waste-reclamation tech company. Use React + Vite + TypeScript + Tailwind CSS + Framer Motion + Lucide React. The page has 4 major zones stacked vertically.** --- ### GLOBAL SETUP - **Font**: Google Fonts `Inter` (weights 300, 400, 500, 600, 700). Body uses `'Inter', system-ui, sans-serif`. Tailwind config overrides `fontFamily.sans` to `"Flexo Soft Medium", system-ui, sans-serif` (but only affects Tailwind's `font-sans` utility -- the body CSS directly sets Inter). - **Background color**: `#19261D` (dark muted green-black) - **Text color**: white - **Anti-aliasing**: `-webkit-font-smoothing: antialiased` - **Selection**: `rgba(255, 255, 255, 0.2)` background - **Dependencies**: `framer-motion ^12.42.2`, `lucide-react ^0.344.0`, `react ^18.3.1`, `react-dom ^18.3.1` --- ### PERSISTENT ELEMENT: DICE ICON (Fixed, bottom-right) A fixed-position element at `bottom-4 right-4` (responsive: `sm:bottom-6 sm:right-6`), `z-50`. It's a 10x10 (sm:11x11, md:12x12) rounded-md box with background `#E2DBC8`. Inside is a 3x3 CSS grid showing 5 dots (like the "5" face of a die) -- dots are 7px circles colored `#1C261E`. The dots sit at positions: top-left, top-right, center, bottom-left, bottom-right. --- ### SECTION 1: HERO (Fixed fullscreen with parallax fade) **Behavior**: The hero is `position: fixed; inset: 0; z-index: 0`. As the user scrolls, it fades out using JavaScript: `opacity = Math.max(0, 1 - scrollY / (innerHeight * 0.6))`. A `170vh` spacer div follows in the DOM to create scroll room before the next section. **Layout**: Full viewport, `flex flex-col`, background `#464340`, with `px-3 py-3` (responsive sm/md padding). Contains a single inner card div that is `flex-1 rounded-2xl relative`. **Background video** (inside the card, absolutely positioned with `rounded-2xl overflow-hidden`): ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260703_154802_dcffa901-509b-4aa3-8e34-36bbf6edcfcb.mp4 ``` `autoPlay muted loop playsInline`, `object-cover h-full w-full`. **Content overlay** (relative z-10, flex-col justify-between): - **Top-left**: Large heading: "Circular systems / for a cleaner / planet" (3 lines via `
`). Styled: `text-[2.5rem] sm:text-6xl md:text-7xl lg:text-8xl`, `font-normal`, `leading-[1.05]`, `tracking-tighter`, `text-[#E2DBC8]/80`. Wrapped in a `` component. - **Bottom center**: Two elements centered: 1. Paragraph: "Next-Generation Portable Waste / Reclamation Technology" (line break with `
`). `text-sm sm:text-base`, `text-[#E2DBC8]/80`, `max-w-xs`. Wrapped in ``. 2. Link: "Start Here" -- `text-xs uppercase tracking-[0.2em] text-[#E2DBC8]/50` with `hover:text-[#E2DBC8]` transition. Wrapped in ``. - **Bottom-left notch with social icons**: An absolutely positioned element at `bottom-0 left-0`. It contains a `flex items-center gap-4` div with background `#464340`, `px-5 py-3 rounded-tr-[20px]`. Two decorative concave-corner divs use `radial-gradient(circle at 100% 0%, transparent 20px, #464340 20px)` -- one above (top, 20x20) and one to the right (bottom, 20x20). Icons: `Linkedin`, `Phone`, `Mail` from lucide-react, size 18, color `text-[#E2DBC8]/60` with `hover:text-[#E2DBC8]`. --- ### REVEAL COMPONENT (Reusable animation wrapper) Uses `IntersectionObserver` with `threshold: 0.15`. When visible, transitions from `translate-y-8 opacity-0` to `translate-y-0 opacity-100`. Duration `700ms`, `ease-out`, `will-change-transform`. Accepts optional `delay` (applied as `transitionDelay`), `className`, and `as` ('div' or 'span'). --- ### SECTION 2: ABOUT / TEXT REVEAL (Scroll-driven character opacity) **Background**: `#1C261E`. Layout: `min-h-screen`, content aligned to bottom with `flex items-end`. **Text content**: A single paragraph with per-character opacity animation driven by scroll. The text reads: > "Our planet's ecological balance is shifting at an unprecedented pace. Resource recovery obstacles and contamination crises have surpassed critical limits, and the pursuit of transformative green solutions has never carried more weight." **Animation mechanic** (uses `framer-motion`): - `useScroll({ target: containerRef, offset: ['start 0.8', 'end 0.2'] })` - Each character's opacity transitions from `0.3` to `1` based on its position in the text. - For character at index `i` out of `total`: `start = i/total`, `end = start + 0.005`. UseTransform maps `scrollYProgress` from `[start, end]` to `[0.3, 1]`. - Words are wrapped in `inline-block whitespace-nowrap` spans to prevent breaks mid-word. - Visible/invisible span layering: invisible span holds space, absolute motion.span shows the animated character. - All characters colored `text-[#E2DBC8]`, `font-normal`. - Typography: `text-2xl sm:text-3xl md:text-5xl lg:text-6xl`, `leading-snug` (lg: `leading-[1.15]`), `tracking-tight`. - Container padding: `px-5 pb-10 sm:px-8 sm:pb-14 md:px-12 md:pb-16`. --- ### SECTION 3: SCROLL VIDEO + PINNED STAT OVERLAYS This section has two sub-systems: #### A) Scroll-linked Video Background (Sticky) **Video URL**: ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260703_102446_48ac5215-4f23-49f4-a433-ec9798029150.mp4 ``` **Implementation**: Extracts up to 120 frames from the video into `ImageBitmap` objects (scaled to max 1280px width). Renders frames onto a full-screen `

Restore
Your True
Smile

Subscribe to Our Community

RestoreYour TrueSmile

Subscribe to Our Community

Restore
Your True
Smile

CleanTech

Innovation Studio

Capabilities Overview

Luxury Ecommerce Design

Guardnet

AI Workflow Agents

AI Image Generator UI

Luminex

Benefits Features

AI Automation Hero

Lumina

Veloce Finance

Digital Epoch

Cybersecurity Hero

HR SaaS Hero

Supplement Shop

Dental Implant Clinic

Portal

Community CTA

Orbis Cards