Prompt - Converion Hero 👇 motionsites.ai/

❤️‍🔥Access ALL prompts for stunning animated websites in one click: motionsites.ai **Prompt:** Build a single-page hero landing page for "Veridia" -- a biometric verification platform for online banking. Use React TypeScript Tailwind CSS Vite. Use `lucide-react` for icons. Do NOT install any other UI libraries. ## Fonts Load these fonts in `index.html`: - **Helvetica Now Text** (primary body font) from: `db.onlinewebfonts.com/c/08e0…` - **Google Fonts** (used only for the logo ticker): Space Grotesk (500,700), Playfair Display (600), Archivo (700), IBM Plex Mono (600), Oswald (500), Syne (700), DM Serif Display (regular). Load via: `fonts.googleapis.com/css2?fa…` Set the page title to: `Veridia -- Biometric verification for online banking` ## Tailwind Config Extend the default config with: ```js fontFamily: { sans: ['"Helvetica Now Text"', 'Helvetica', 'Arial', 'sans-serif'], }, colors: { cream: '#ffffff', line: 'rgba(0, 0, 0, 0.1)', ink: '#171c18', moss: '#24401f', }, ``` ## Global CSS (`index.css`) ```css @tailwind base; @tailwind components; @tailwind utilities; html { font-family: 'Helvetica Now Text', Helvetica, Arial, sans-serif; } ``` ## Layout Structure The entire page is a centered container with `max-w-[1180px]`, `border-x border-line`, on a `bg-cream` background. The page uses a distinctive grid-line aesthetic with decorative "plus" markers at section dividers. ### Decorative Elements 1. **Plus marker component**: A small 11x11px SVG that draws a crosshair/plus shape. Rendered in `text-black/40`. Used at the left and right edges of every horizontal divider. 2. **Divider component**: A full-width 1px horizontal line (`bg-line`) that spans the full viewport width (`w-screen`) centered, with a Plus marker positioned at the left edge and right edge of the content container. z-index 20. ### Header (z-30, h-16, px-5 sm:px-8) - **Left**: Fingerprint icon from lucide-react (h-5 w-5, strokeWidth 2.25) "Veridia" text (text-[17px], font-medium, tracking-tight). - **Center** (hidden on mobile, `md:flex`): Nav links -- "Service", "Solutions", "Billing", "Story" (text-[13px], text-ink/80, hover:text-ink with transition). - **Right**: "Access" button (rounded-full, border border-ink/25, px-4 py-1.5, text-[13px], hover fills with ink bg and cream text) a hamburger menu button visible only below `md` breakpoint (h-9 w-9, rounded-full, border border-ink/25). Toggles between `Menu` and `X` icons from lucide-react. - **Mobile menu** (shown when hamburger is open): Absolutely positioned below header (`top-16`), full width, bg-cream, each link is a block element with `border-t border-line`, `px-5 py-3.5`, `text-[14px]`. Clicking a link closes the menu. ### Divider after header ### Hero Section (`<section className="relative">`) - **Background video**: Absolutely positioned, fills the entire section. Uses this exact CloudFront URL: ``` d8j0ntlcm91z4.cloudfront.net… ``` Video attributes: `autoPlay`, `muted`, `loop`, `playsInline`. Styled with `h-full w-full origin-bottom scale-[1.15] select-none object-cover object-bottom`. - **Heading overlay** (relative z-10, px-5, pb-8, pt-10 sm:pt-14, text-center): - `<h1>` with `max-w-3xl mx-auto`, font sizes: `text-3xl` / `sm:text-4xl` / `md:text-[44px]`, `leading-[1.15]`, `tracking-[-0.035em]`. - Line 1: "One unified biometric validation" (default ink color) - Line 2: "engine for safer online banking" (text-moss, `#24401f`) - Each line is a `<span className="block">`. - **Divider** after the heading area. - **Spacer div** for the video illustration area: `h-[300px] sm:h-[400px] md:h-[480px]`. ### Subtext CTA Section (px-5, pb-14, pt-8 sm:pt-10, text-center) - **Paragraph**: `max-w-xs sm:max-w-sm mx-auto`, `text-[13px]`, `leading-relaxed`, `text-ink/70`. Text: "Effortless onboarding, fraud prevention, and identity checks for modern banks and fintech platforms." - **Two CTA buttons** (mt-7, flex-wrap, gap-3, centered): 1. "Get your beta invite" -- `bg-ink`, `text-cream`, `rounded-full`, `px-5 py-2.5`, `text-[13px]`, `hover:scale-[1.03] hover:bg-black`, `transition-transform duration-200`. 2. "Speak with sales" -- `bg-black/[0.06]`, `text-ink`, `rounded-full`, `px-5 py-2.5`, `text-[13px]`, `hover:bg-black/10`, `transition-colors duration-200`. ### Divider ### Logo Ticker Section (flex-wrap, gap-x-10 gap-y-6, px-5 py-10, sm:justify-between sm:px-10) Seven text-based logos, each using a different Google Font and rendered in `text-[#9d9a90]` with `hover:text-ink` transition. `text-lg sm:text-xl`. Each logo has an inline style object: | Name | Font Family | Weight | Extra | |--------------|----------------------|--------|--------------------| | Payro | Space Grotesk | 700 | | | Harbor Bank | Playfair Display | 600 | | | Ledgerwise | Archivo | 700 | | | NovaPay | Syne | 700 | | | Finch.Money | IBM Plex Mono | 600 | | | MERIDIAN | Oswald | 500 | letterSpacing: 0.18em | | Centavo | DM Serif Display | 400 | | ### Divider ### Footer spacer: `min-h-[64px] flex-1` --- That is the complete, copy-paste-ready prompt. It covers every element, exact class names, responsive breakpoints, the video URL, all fonts, the Tailwind theme, and the full layout structure.

❤️‍🔥Access ALL prompts for stunning animated websites in one click: http:// motionsites.ai Build a full-screen, dark-themed hero section for a geology brand called **Lithos**, using **React 18 TypeScript Vite Tailwind CSS** and **lucide-react** for icons. The signature feature is a **cursor-following spotlight that reveals a second image** through a soft circular mask on top of a base image. Match every detail below exactly. ### Fonts Add this to the top of `src/index.css`, then `@tailwind base/components/utilities`: ```css @import url('fonts.googleapis.com/css2?fa…'); * { font-family: 'Inter', sans-serif; } .font-playfair { font-family: 'Playfair Display', serif; } ``` - Body/UI font: **Inter**. - Display/wordmark accent: **Playfair Display, italic**. ### Asset URLs (use these exactly) - Base image (`BG_IMAGE_1`): `images.higgs.ai/?default=1&o…` - Reveal image (`BG_IMAGE_2`): `images.higgs.ai/?default=1&o…` ### Layout & structure Root wrapper: `min-h-screen bg-white tracking-[-0.02em]`, inline `fontFamily: "'Inter', sans-serif"`. **Section** (`<section>`): `relative w-full overflow-hidden h-screen bg-black`, inline `style={{ height: '100dvh' }}`. Layers, by z-index: 1. **Base image** (`z-10`): `absolute inset-0 bg-center bg-cover bg-no-repeat`, background = `BG_IMAGE_1`. 2. **Reveal layer** (`z-30`): a `RevealLayer` component (see below) showing `BG_IMAGE_2`. 3. **Heading** (`z-50`): `absolute top-[14%] left-0 right-0 flex flex-col items-center text-center px-5 pointer-events-none`. An `<h1>` with `text-white leading-[0.95]` containing two block spans: - Line 1: `block font-playfair italic font-normal text-5xl sm:text-7xl md:text-8xl`, inline `letterSpacing: '-0.05em'`, text **"Layers hold"**. - Line 2: `block font-normal text-5xl sm:text-7xl md:text-8xl -mt-1`, inline `letterSpacing: '-0.08em'`, text **"tales of time"**. 4. **Bottom-left paragraph** (`z-50`): `hidden sm:block absolute bottom-14 left-10 md:left-14 max-w-[260px]`. `<p className="text-sm text-white/80 leading-relaxed">` — "Every layer of sediment records a chapter of our planet, from ancient seabeds to drifting ash, layered across millions of years beneath us." 5. **Bottom-right block** (`z-50`): `absolute bottom-10 sm:bottom-24 left-5 right-5 sm:left-auto sm:right-10 md:right-14 max-w-full sm:max-w-[260px] flex flex-col items-start gap-4 sm:gap-5`. Contains a `<p className="text-xs sm:text-sm text-white/80 leading-relaxed">` — "Our interactive maps let you peel back the crust to trace how stones, fossils, and deep time combine to shape the ground beneath your feet." — and a **Start Digging** button: `bg-[#e8702a] hover:bg-[#d2611f] text-white text-sm font-medium px-7 py-3 rounded-full transition-all hover:scale-[1.03] active:scale-95 hover:shadow-lg hover:shadow-[#e8702a]/30`. ### The cursor spotlight reveal (core mechanic) In the parent, define `const SPOTLIGHT_R = 260;` and track the mouse with smoothing: - Refs: `mouse` (raw), `smooth` (eased), `rafRef`; state `cursorPos` (init `{x:-999,y:-999}`). - `mousemove` listener stores raw `e.clientX/clientY`. - A `requestAnimationFrame` loop lerps: `smooth.x = (mouse.x - smooth.x) * 0.1` (same for y), then `setCursorPos`. Clean up listener cancel RAF on unmount. `RevealLayer({ image, cursorX, cursorY })`: - Holds a hidden `<canvas>` (`absolute inset-0 pointer-events-none`, `style={{display:'none'}}`) sized to `window.innerWidth/Height` on mount resize. - A reveal `<div>` (`absolute inset-0 bg-center bg-cover bg-no-repeat z-30 pointer-events-none`) with the reveal image as background. - On every render: clear canvas, build a **radial gradient** at `(cursorX, cursorY)` from radius 0 → `SPOTLIGHT_R` with stops: `0 → rgba(255,255,255,1)`, `0.4 → 1`, `0.6 → 0.75`, `0.75 → 0.4`, `0.88 → 0.12`, `1 → 0`. Fill an arc of radius `SPOTLIGHT_R` with it. Then `canvas.toDataURL()` and apply it as `maskImage`/`webkitMaskImage` on the reveal div with `maskSize: '100% 100%'`. This makes the second image visible only inside the soft glowing circle that trails the cursor. ### Navigation (fixed, over hero) `<nav className="fixed top-0 left-0 right-0 z-[100] flex items-center justify-between p-4 sm:p-5">`: - **Left**: an inline SVG logo (26×26, viewBox `0 0 256 256`, `fill="#ffffff"`, path `M 256 256 L 128 256 L 0 128 L 128 128 Z M 256 128 L 128 128 L 0 0 L 128 0 Z`) wordmark `<span className="text-white text-2xl font-playfair italic">Lithos</span>`. - **Center pill** (`hidden md:flex absolute left-1/2 -translate-x-1/2 bg-white/20 backdrop-blur-md border border-white/30 rounded-full px-2 py-2 items-center gap-1`): buttons **Course** (active: full white text), then **Field Guides, Geology, Plans, Live Tour** (`text-white/80 ... hover:bg-white/20 hover:text-white transition-colors`, `px-4 py-1.5 rounded-full text-sm font-medium`). - **Right (desktop)**: `hidden md:block bg-white text-gray-900 text-sm font-semibold px-6 py-2.5 rounded-full hover:bg-gray-100` — **Sign Up**. ### Animations (premium, on load) Add to `index.css`: ```css @keyframes heroReveal { 0%{opacity:0;transform:translateY(28px);filter:blur(12px)} 100%{opacity:1;transform:translateY(0);filter:blur(0)} } @keyframes heroFadeUp { 0%{opacity:0;transform:translateY(20px)} 100%{opacity:1;transform:translateY(0)} } @keyframes heroZoom { 0%{transform:scale(1.12)} 100%{transform:scale(1)} } .hero-anim { opacity:0; animation-fill-mode:forwards; animation-timing-function:cubic-bezier(0.16,1,0.3,1); } .hero-reveal { animation-name:heroReveal; animation-duration:1.1s; } .hero-fade { animation-name:heroFadeUp; animation-duration:1s; } .hero-zoom { animation:heroZoom 1.8s cubic-bezier(0.16,1,0.3,1) forwards; } @media (prefers-reduced-motion: reduce){ .hero-anim,.hero-zoom{ animation:none; opacity:1; } } ``` Apply: - Base image div → add `hero-zoom` (slow Ken Burns zoom-out). - Heading line 1 → `hero-anim hero-reveal`, inline `animationDelay: '0.25s'`; line 2 → same with `'0.42s'` (blur-rise, staggered). - Bottom-left paragraph wrapper → `hero-anim hero-fade`, `animationDelay: '0.7s'`. - Bottom-right wrapper → `hero-anim hero-fade`, `animationDelay: '0.85s'`. ### Responsiveness - Heading scales `text-5xl` → `sm:text-7xl` → `md:text-8xl`. - Center nav pill and desktop Sign Up are `hidden` below `md`; the mobile hamburger is `md:hidden`. - Bottom-left paragraph is `hidden sm:block`; bottom-right block is full-width on mobile (`left-5 right-5`) and right-anchored from `sm`. - Use `100dvh` so mobile browser chrome doesn't clip the section.

❤️🔥 Access this prompt as well as UNLIMITED prompts for stunning AI websites in one click: motionsites.ai

❤️‍🔥 Access ALL prompts from this video for stunning AI websites in one click: motionsites.ai

❤️‍🔥 Unlimited ANIMATED prompts for AI websites from the video in one click: motionsites.ai/

Access ALL prompts for stunning animated websites in one click: motionsites.ai Prompt: Build a fullscreen hero landing page for a creative agency called "VANGUARD" using React, Tailwind CSS, and Vite. The page should be a single viewport-height section with a looping background video and all content overlaid on top. **Background video:** Use this exact CloudFront URL as a fullscreen `<video>` element with `autoPlay`, `muted`, `loop`, and `playsInline` attributes, set to `object-cover` to fill the entire viewport: ``` d8j0ntlcm91z4.cloudfront.net… ``` **Fonts (loaded in index.html):** 1. "FSP DEMO - PODIUM Sharp 4.11" from `db.onlinewebfonts.com/c/8b75…` -- used for the brand name and main heading. Create a `.font-podium` utility class for it and register it in tailwind.config.js as `fontFamily.podium`. 2. "Inter" from Google Fonts (weights 400, 500, 600, 700) -- used for body text, nav links, stats, and CTAs. Register it in tailwind.config.js as `fontFamily.inter`. **Icons:** Use `lucide-react` for all icons: `ArrowUpRight`, `Award`, `Crown`, and `X`. **Navbar:** - Horizontal bar at the top with responsive padding (`px-6 sm:px-10 lg:px-16`, `py-5 lg:py-7`). - Left: brand name "VANGUARD" in `font-podium`, white, bold, uppercase, `text-2xl sm:text-3xl`, `tracking-wider`. - Center (hidden below `md`): four nav links -- "Projects", "Studio", "Offerings", "Inquire" -- in `font-inter`, `text-sm`, `text-white/80`, `tracking-widest`, uppercase, with `hover:text-white` transition. - Right (hidden below `md`): a "GET IN TOUCH" link with an `ArrowUpRight` icon, styled as a bordered button (`border border-white/30 hover:border-white/60`, `px-6 py-3`, `text-xs`, `tracking-widest`, uppercase, `hover:bg-white/10`). - Right (visible below `md`): a hamburger button made of three white `div` bars (`w-6 h-0.5`, `w-6 h-0.5`, `w-4 h-0.5` with `space-y-1.5`). **Mobile Menu Overlay (below `md` only):** - Fixed fullscreen overlay (`fixed inset-0 z-50`) with `bg-black/95 backdrop-blur-sm`. - Toggles visibility via React `useState` -- when open: `opacity-100 visible`, when closed: `opacity-0 invisible`, with `transition-all duration-500`. - Header row matches the navbar: brand name on left, `X` close icon on right. - Centered vertically: each of the 4 nav links rendered in `font-podium`, `text-4xl sm:text-5xl`, white, uppercase, with staggered entrance animations using inline `style` -- each item gets `transitionDelay: i * 80 100ms`, `opacity` and `translateY(20px)` transitions based on the open state. - Below the links: a "GET IN TOUCH" bordered button with the same staggered animation pattern. - All links call `setMenuOpen(false)` on click. **Hero Content (vertically centered, left-aligned):** All hero elements use staggered `animate-fade-up` animations (defined in CSS as `@keyframes fade-up` translating from `translateY(30px), opacity:0` to `translateY(0), opacity:1` over `0.8s ease-out`). Each successive element has an additional `0.2s` delay. Elements start with `opacity: 0` and use `animation-fill-mode: forwards`. 1. **Tagline:** A `Crown` icon (lucide, `w-4 h-4`, `text-white/70`) followed by "World-Class Digital Collective" in `text-white/70`, `text-xs sm:text-sm`, `font-inter`, `tracking-[0.3em]`, uppercase. Uses `animate-fade-up` (no delay). Has `mb-6 lg:mb-8`. 2. **Main Heading:** Three lines in `font-podium`, white, uppercase, `leading-[0.92]`, `tracking-tight`, each using `text-[clamp(2.8rem,8vw,7rem)]`: - "Design." - "Disrupt." - "Conquer." Uses `animate-fade-up-delay-1` (0.2s delay). 3. **Subtext:** "We build fierce brand identities" (line break) "that don't just turn heads --" then bold white "they lead." in `text-white/70`, `text-sm sm:text-base`, `font-inter`, `leading-relaxed`, `max-w-md`. Uses `animate-fade-up-delay-2` (0.4s delay). `mt-6 lg:mt-8`. 4. **CTA Row:** Uses `animate-fade-up-delay-3` (0.6s delay), `mt-8 lg:mt-10`, `flex flex-wrap items-center gap-4 sm:gap-6`. - Black button "SEE OUR WORK" with `ArrowUpRight` icon. `bg-black hover:bg-neutral-900`, `px-5 sm:px-7 py-3 sm:py-4`, `text-[11px] sm:text-xs`, `tracking-widest`, uppercase. Arrow has `group-hover:translate-x-0.5 group-hover:-translate-y-0.5` transition. - Beside it (hidden on mobile, `hidden sm:flex`): an `Award` icon (`w-8 h-8`, `text-white/50`) with two lines of text: "Top-Rated" / "Brand Studio" in `text-white/60`, `text-xs`, `tracking-wider`, uppercase. 5. **Stats Row:** Uses `animate-fade-up-delay-4` (0.8s delay), `mt-8 sm:mt-10 lg:mt-14`, `flex flex-wrap gap-6 sm:gap-12 lg:gap-16`. Three stats: - "250 " / "Brands Transformed" - "95%" / "Client Retention" - "10 " / "Years in the Game" Values in `font-inter`, white, `text-2xl sm:text-4xl lg:text-5xl`, bold, `tracking-tight`. Labels in `text-white/50`, `text-[9px] sm:text-xs`, `tracking-widest`, uppercase, `mt-1`. **CSS Animations (defined in index.css under `@layer utilities`):** ```css @keyframes fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes scale-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } ``` With classes: `.animate-fade-up` (0s delay), `.animate-fade-up-delay-1` through `.animate-fade-up-delay-4` (0.2s increments, starting `opacity: 0`), `.animate-fade-in`, `.animate-fade-in-delay`. **Responsive behavior:** - Full layout is mobile-first with breakpoints at `sm` (640px), `md` (768px), and `lg` (1024px). - Nav links and "GET IN TOUCH" button show at `md` ; hamburger shows below `md`. - Award badge hides on mobile (`hidden sm:flex`). - All text sizes, paddings, gaps, and margins scale up through `sm:` and `lg:` prefixes. - Stats and CTA row use `flex-wrap` to prevent overflow on small screens. Make everything fully mobile responsive. Use a single `App.tsx` component with `useState` for the menu toggle. No routing needed.

Access ALL prompts for stunning animated websites in one click: motionsites.ai Build a password manager landing page hero section using React, TypeScript, Tailwind CSS, Framer Motion, and Lucide React icons. Here is every specification: --- ### Fonts - **Heading font:** "Helvetica Now Display Bold" -- load via this stylesheet in `index.html`: ``` <link href="db.onlinewebfonts.com/c/04e6…" rel="stylesheet"> ``` - **Body font:** "Inter" (weights 300-900) -- load via Google Fonts in `index.css`: ``` @import url('fonts.googleapis.com/css2?fa…'); ``` ### CSS Variables (defined in `:root` in `index.css`) ``` --font-heading: 'Helvetica Now Display Bold', sans-serif; --font-body: 'Inter', sans-serif; --color-text: #192837; --color-accent: #7342E2; --color-login-bg: #F2F2EE; ``` Global reset: `* { box-sizing: border-box; }`, body uses `var(--font-body)`, `var(--color-text)`, margin/padding 0. --- ### Background Full-viewport looping background video, absolutely positioned, covering the entire page with `object-cover`. URL: ``` d8j0ntlcm91z4.cloudfront.net… ``` Attributes: `autoPlay`, `muted`, `loop`, `playsInline`. Classes: `absolute inset-0 z-0 w-full h-full object-cover`. --- ### Logo (inline SVG component) A custom geometric SVG logo, 32x32, viewBox `0 0 256 256`, fill `#192837`: ``` M 64 128 L 64.5 128 L 32 95 L 0 64 L 0 0 L 64 0 L 128 64 L 128 64.5 L 161 32 L 192 0 L 256 0 L 256 64 L 192 128 L 128 128 L 128 192 L 96 223 L 63.5 256 L 0 256 L 0 192 Z M 256 192 L 224 223 L 191.5 256 L 128 256 L 128 192 L 192 128 L 256 128 Z ``` --- ### Navbar - Max-width `1280px`, centered with `margin: 0 auto`. - Padding: `px-5 sm:px-8 py-4 sm:py-5`. - `relative z-10`, flexbox with `justify-between`, `items-center`. - **Left:** Logo component. - **Center (desktop, hidden on mobile `md:flex`):** 5 nav links -- "Vault", "Plans", "Install", "News", "Help". Each is `text-sm font-medium`, color `var(--color-text)`, `transition-opacity hover:opacity-70`, gap-8. - **Right (desktop, hidden on mobile `md:flex`):** Two pill buttons with `gap-3`: - "Start For Free": background `#7342E2`, white text, `text-sm font-semibold px-5 py-2.5 rounded-full`, hover shadow, active scale-95. - "Sign In": background `#F2F2EE`, text `var(--color-text)`, same sizing/rounding. - **Mobile (`md:hidden`):** Hamburger button using Lucide `Menu` icon (24px). Toggles to `X` icon when open. --- ### Mobile Menu (slide-in sheet) Uses Framer Motion `AnimatePresence`. Two layers: 1. **Backdrop:** Fixed overlay, `rgba(25,40,55,0.35)` background, `backdrop-blur(4px)`. Fades in/out over 0.3s. Clicking dismisses the menu. 2. **Sheet:** Fixed, right-aligned, `width: min(88vw, 360px)`, `height: 100dvh`, background `#CFC8C5`, box-shadow `-12px 0 48px rgba(25,40,55,0.18)`. Slides in from right with custom cubic bezier `[0.22, 1, 0.36, 1]` over 0.45s; exits with `[0.55, 0, 1, 0.45]` over 0.35s. Contents: - **Header:** Logo circular close button (40x40, background `rgba(25,40,55,0.1)`, X icon 20px), with `whileTap={{ scale: 0.9 }}`. - **Divider:** 1px line, `rgba(25,40,55,0.12)`, margin `0 24px`. - **Nav links:** Each link staggers in from right (x: 24 to 0, delay `0.18 i * 0.07`, duration 0.4s). Font size `1.1rem`, rounded-xl, hover `bg-black/10`. - **CTA buttons:** Same "Start For Free" (`#7342E2`) and "Sign In" (`#F2F2EE`) as desktop, full-width, `py-3.5 rounded-full`, font size `0.95rem`. --- ### Hero Content - Centered container, max-width `1280px`, `relative z-10`. - Padding top: `clamp(40px, 8vw, 72px)`, bottom `48px`. - Inner content wrapper: max-width `660px`, centered. **Heading (`<h1>`):** - Font: `var(--font-heading)`. - Size: `clamp(1.65rem, 5vw, 3rem)`. - Line-height: `1.05`, letter-spacing: `-0.01em`. - Color: `var(--color-text)`. - Text-align: center. - Two lines: - Line 1 (nowrap): `Lock` [Zap icon 24px] `Down Your` [LockKeyhole icon 24px] `Passwords` - Line 2: `with Ironclad Security` [Fingerprint icon 24px] - All inline icons: color `#192837`, `display: inline`, `verticalAlign: middle`, `position: relative`, `top: -2px`, margin `0 4px` (Fingerprint has `marginLeft: 6px` only). - Animates: fade-up from `y: 28`, `opacity: 0`, duration 0.6s, ease `[0.22, 1, 0.36, 1]`, delay `0 * 0.15`. **Subtext (`<p>`):** - Font: `var(--font-body)`. - Size: `clamp(0.9rem, 2.5vw, 1.1rem)`. - Color: `var(--color-text)` at `opacity: 0.8`. - Max-width: `560px`, line-height `1.65`, text-align center. - Copy: "Zero stress, total control. Unbreakable storage, one-tap access, and pro-grade tools for your non-stop world." - Animates: same fade-up, delay `1 * 0.15`. **CTA Button:** - Pill button (`borderRadius: 50px`), background `#7342E2`, white text. - Size: `clamp(0.9rem, 2vw, 1rem)`, padding `17px 24px`, min-width `210px`. - Box-shadow: `0 4px 24px rgba(115,66,226,0.28)`. - Flexbox with `justify-between`, gap `32px`. - Label: "Get It Free" with `ArrowRightCircle` icon (20px) on right. - Hover: `scale: 1.04, brightness(1.1)`. Tap: `scale: 0.96`. - Animates: same fade-up, delay `2 * 0.15`. --- ### Animation System (Framer Motion variants) All hero elements use a shared `fadeUp` variant: ``` hidden: { opacity: 0, y: 28 } visible: (i) => ({ opacity: 1, y: 0, transition: { delay: i * 0.15, duration: 0.6, ease: [0.22, 1, 0.36, 1] } }) ``` --- ### Dependencies - `react`, `react-dom` (v18) - `framer-motion` - `lucide-react` (icons: ArrowRightCircle, Zap, LockKeyhole, Fingerprint, Menu, X) - Tailwind CSS 3 with default config, no custom theme extensions - Vite TypeScript

Access ALL prompts for stunning animated websites in one click: motionsites.ai Prompt: Build a full-screen hero section for a data-security SaaS landing page called "securify" using React TypeScript Tailwind CSS, with a looping fullscreen background video, a floating pill-shaped navbar, and large staggered typography. **Fonts & Global Styles** Load Google font "Readex Pro" weights 300, 400, 500, 600, 700. Set body `font-family: 'Readex Pro', system-ui, -apple-system, sans-serif;`, background `#000`, color `#fff`, antialiased. Make `html, body, #root` height 100%. Add a `.hero-title` class with `letter-spacing: -0.04em; line-height: 0.95;`. **Section container** A `<section>` with classes: `relative h-screen w-full overflow-hidden bg-black`. **Background video** `<video>` with `className="absolute inset-0 w-full h-full object-cover"`, autoPlay loop muted playsInline, and `src="d8j0ntlcm91z4.cloudfront.net…"`. **Navbar** (absolute, z-20, px-6 md:px-10 pt-6, top-0 left-0 right-0) A `<nav>` with `flex items-center justify-between gap-4`. Left pill: `flex items-center gap-2 bg-neutral-900/90 backdrop-blur rounded-full pl-4 pr-6 py-3` containing: - A custom white SVG logo (viewBox `0 0 256 256`, class `h-5 w-5`) with path: `M 128 192 L 128 256 L 64.5 256 L 32 223 L 0 192 L 0 128 L 64 128 Z M 256 192 L 256 256 L 192.5 256 L 160 223 L 128 192 L 128 128 L 192 128 Z M 128 64 L 128 128 L 64.5 128 L 32 95 L 0 64 L 0 0 L 64 0 Z M 256 64 L 256 128 L 192.5 128 L 160 95 L 128 64 L 128 0 L 192 0 Z` filled `#ffffff`. - Brand text "securify" (`text-white text-sm font-normal tracking-tight`). Center pill (hidden on mobile): `hidden md:flex items-center gap-1 bg-neutral-900/90 backdrop-blur rounded-full px-3 py-2` with four anchor links: "platform", "solutions", "company", "support" -- each `text-neutral-300 hover:text-white transition-colors text-sm px-5 py-2 rounded-full`. Right button: "get started" -- `bg-white text-black text-sm font-normal rounded-full px-6 py-3 hover:bg-neutral-200 transition-colors`. **Foreground content wrapper**: `relative h-full w-full` (rendered after Navbar, above the video). Three giant staggered headline words (each an `<h1>` with class `hero-title absolute text-white font-medium text-[14vw] md:text-[13vw]`): - "protect" -- `left-4 md:left-10 top-[18%]` - "your" -- `right-4 md:right-10 top-[38%]` - "data" -- `left-[18%] md:left-[28%] top-[58%]` All lowercase. **Description paragraph** (absolute, `left-6 md:left-10 top-[46%]`, `max-w-[240px] text-[15px] leading-snug text-white/90`): "we can guarding your data with utmost care, empowering you with privacy everywhere" **Stat block -- top-right** (`absolute right-6 md:right-24 top-[14%]`): - Row: `flex items-center gap-3 justify-end` -- a diagonal divider (`hidden md:block h-px w-24 bg-white/40 rotate-[20deg]`) then number " 65k" (`text-4xl md:text-5xl font-medium tracking-tight`). - Sublabel: "startups use" (`text-xs md:text-sm text-white/70 mt-1 text-right`). **Stat block -- bottom-left** (`absolute left-6 md:left-20 bottom-20 md:bottom-24`): - Row: number " 1.5b" then divider `hidden md:block h-px w-24 bg-white/40 rotate-[-20deg]`. - Sublabel: "gb data was protected" (`text-xs md:text-sm text-white/70 mt-1`). **Stat block -- bottom-right** (`absolute right-6 md:right-20 bottom-16 md:bottom-20`): - Row: diagonal divider `rotate-[-20deg]` then " 300k". - Sublabel: "downloads" (right-aligned, `text-white/70`). **Notes** - All text is lowercase. - Navbar pills use `bg-neutral-900/90 backdrop-blur`. - Only transitions: `hover:text-white` on nav links, `hover:bg-neutral-200` on the button. - No purple/indigo anywhere; palette is pure black, white, neutral-900, and white opacity variants (`white/40`, `white/70`, `white/90`). - Responsive: mobile hides nav links and diagonal dividers; typography scales via vw units. - No bottom gradient overlay.

Access ALL prompts for stunning animated websites in one click: motionsites.ai Build a full-screen hero landing page for a renewable energy company using React, Vite, TypeScript, Tailwind CSS, Framer Motion, and Lucide React icons. Use the Inter font from Google Fonts (weights 300-900). The page background is `#F7F7F7`. ## Dependencies ``` react, react-dom, framer-motion, lucide-react, clsx, tailwind-merge ``` ## Global CSS (`index.css`) Import Inter from Google Fonts: `fonts.googleapis.com/css2?fa…` Set `font-family: 'Inter', sans-serif` on the body. Add a `.liquid-glass` utility class: - `background: rgba(255, 255, 255, 0.01)` with `background-blend-mode: luminosity` - `backdrop-filter: blur(4px)` and `-webkit-backdrop-filter: blur(4px)` - No border, `box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1)`, `position: relative`, `overflow: hidden` - A `::before` pseudo-element with `position: absolute; inset: 0; border-radius: inherit; padding: 1.4px` and a vertical linear gradient of white at varying opacities (`rgba(255,255,255,0.45)` at 0%/100%, `rgba(255,255,255,0.15)` at 20%/80%, `rgba(255,255,255,0)` at 40%/60%`), masked with `-webkit-mask-composite: xor` / `mask-composite: exclude` to create a glass border effect. Add a `.tracking-tight-custom` utility with `letter-spacing: -0.06em`. Add a `@keyframes scroll` animation: `0% { transform: translateX(0) }` to `100% { transform: translateX(-50%) }`. ## Utility: `cn()` helper A small utility combining `clsx` and `tailwind-merge`: ```ts import { type ClassValue, clsx } from 'clsx'; import { twMerge } from 'tailwind-merge'; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } ``` ## Component: `<StaggeredFade>` Props: `text: string`, `className?: string`, `style?: React.CSSProperties`. Renders a `<motion.h1>` that splits the `text` into individual characters. Each character is a `<motion.span>` with a staggered fade-in animation: each letter delays by `i * 0.03` seconds with `0.3s` duration, transitioning from `opacity: 0` to `opacity: 1`. Uses `useInView` with `once: true` to trigger on scroll into view. The base className merges `'text-xl text-center sm:text-4xl font-bold tracking-tighter md:text-6xl md:leading-[4rem]'` with the passed `className` using the `cn()` helper. ## Component: `<FadeDown>` Props: `children: React.ReactNode`, `delay?: number` (default `0`), `className?: string`. A `<motion.div>` wrapper that animates from `{ opacity: 0, y: -20 }` to `{ opacity: 1, y: 0 }` over `0.6s` with the specified delay. Triggers once on entering the viewport via `useInView({ once: true })`. ## Component: `<BoomerangVideoBg>` This is the key background video component that creates a forward/reverse boomerang loop effect. **Video URL:** `d8j0ntlcm91z4.cloudfront.net…` **How it works:** 1. Renders a `<video>` element (autoPlay, muted, playsInline, crossOrigin="anonymous") that plays through once (NOT looped). 2. While the video plays, it captures every frame into offscreen `<canvas>` elements using `requestVideoFrameCallback` (with a `setInterval` at 60fps fallback for unsupported browsers). Each captured frame is scaled to a max width of 960px maintaining aspect ratio. 3. When the video `ended` event fires, it sets a `ready` state to `true`. 4. Once ready, hides the `<video>` and shows a visible `<canvas>`. A `requestAnimationFrame` loop plays back the captured frames at 30fps in a boomerang pattern: forward through all frames, then reverse back to the start, repeating infinitely. 5. The outer wrapper div has classes: `absolute inset-0 w-full h-full`. 6. Both the `<video>` and `<canvas>` have classes: `w-full h-full object-cover`. 7. Visibility is toggled via `style={{ display: ready ? 'none' : 'block' }}` on the video and the inverse on the canvas. ## Main Layout (`App.tsx`) The root is `<div className="h-screen flex flex-col bg-[#F7F7F7] relative overflow-hidden">`. ### Video Background The `<BoomerangVideoBg>` is placed inside a container: `<div className="fixed inset-0 z-0" style={{ top: 200 }}>`. This pushes the video 200px down from the top of the viewport so it sits behind the lower portion of the hero. ### Navigation Bar A `<nav>` with classes `flex items-center justify-between px-4 md:px-8 py-4 md:py-6 relative z-10`. **Left side:** - A logo image: `<img src="/image.png" alt="LGPSM" className="h-6 md:h-7" />` (user's own logo PNG) - A language selector: `<Globe>` icon (lucide-react, `w-4 h-4`) "En" text, `text-sm text-black` **Center (hidden on mobile, `hidden lg:flex items-center gap-8`):** - Nav links: "Renewables", "Strategies", "Photovoltaic", "Wind Systems", "Packages" - Each link: `text-sm text-gray-700 hover:text-gray-900` **Right side:** - "Sign In" link (hidden on mobile `hidden sm:block`): `text-sm text-gray-700 hover:text-gray-900 border border-black/20 px-4 md:px-6 py-2 md:py-2.5 rounded-full transition-colors` - "Clean Energy" button: `px-4 md:px-6 py-2 md:py-2.5 bg-black text-white text-sm rounded-full hover:bg-gray-900 transition-colors` ### Hero Content Wrapper: `<div className="flex-1 flex flex-col items-center px-4 md:px-8 relative pt-4 md:pt-8">` with an inner `<div className="relative z-10 flex flex-col items-center">`. **Badge pill** (top, centered): - Classes: `mb-3 px-3 md:px-4 py-1.5 md:py-2 border border-black/20 rounded-full flex items-center gap-1.5 md:gap-2 text-xs md:text-sm` - Content: sun emoji, arrow, globe emoji, text "Delivering power innovate" (hidden on mobile, shortened to "Power innovate" on small screens), arrow, plant emoji **Main Heading** (using `<StaggeredFade>`): - Text: `"Renewable Power For Tomorrow, Infinite Clean Solutions"` - Classes: `text-3xl sm:text-4xl md:text-5xl lg:text-6xl leading-tight font-normal text-center max-w-5xl mb-3 md:mb-4 px-4` - Color: `#31463B` (dark green) via inline style **Subheading** (wrapped in `<FadeDown delay={0.5}>`): - `<p>` with classes: `text-center text-gray-600 max-w-3xl mb-4 md:mb-5 text-sm md:text-base lg:text-lg px-4` - Text: `"Sustainable Energy Platform. Engineering, deploying, and servicing solar arrays for homes, businesses, and large-scale operations worldwide."` **CTA Buttons** (wrapped in `<FadeDown delay={0.7}>`): - Wrapper classes: `flex flex-col sm:flex-row items-center gap-3 md:gap-4 px-4` - **Primary button** ("Explore Options"): - Classes: `pl-4 md:pl-6 pr-2 py-2 bg-gradient-to-r from-[#3C684D] to-[#4A7144] text-white rounded-full flex items-center gap-2 hover:opacity-90 transition-opacity text-sm md:text-base` - Contains a `<Leaf>` icon (`w-4 h-4`), the text, and a circular icon container (`w-7 h-7 md:w-8 md:h-8 rounded-full`) with inline style `background: linear-gradient(59deg, #567A5E 0%, #78A873 100%)` containing a `<Play>` icon (`w-3 h-3 md:w-4 md:h-4 fill-white text-white`) - **Secondary button** ("Start Network"): - Classes: `pl-4 md:pl-6 pr-2 py-2 bg-white text-gray-700 rounded-full flex items-center gap-2 hover:bg-gray-50 transition-colors text-sm md:text-base` - Contains the text and a circular icon container with inline style `background: linear-gradient(59deg, #EEEEEE 0%, #CBCBCB 100%)` containing an `<ArrowRight>` icon (`w-3 h-3 md:w-4 md:h-4 fill-black text-black`) ## Color Palette Summary | Token | Value | |---|---| | Page background | `#F7F7F7` | | Heading text | `#31463B` | | Body text | Tailwind `gray-600` | | Nav text | Tailwind `gray-700` | | Primary CTA gradient | `#3C684D` to `#4A7144` | | Primary CTA icon gradient | 59deg, `#567A5E` to `#78A873` | | Secondary CTA icon gradient | 59deg, `#EEEEEE` to `#CBCBCB` | | Nav button | `bg-black` / `text-white` | | Sign-in border | `border-black/20` | ## Responsive Breakpoints All elements use Tailwind's default breakpoints (`sm:`, `md:`, `lg:`). Nav links are hidden below `lg`. Sign-in button hidden below `sm`. CTA buttons stack vertically below `sm`. Font sizes scale from `text-3xl` to `lg:text-6xl`. Padding scales from `px-4` to `md:px-8`.