jade-clone

byOmkar

Build a pixel-perfect clone of Vizard.ai as a single index.html file (CSS in <style>, JS in <script>, no libraries, no images — all mockups in pure HTML/CSS). ## Brand Name: Vizard | Primary: #6246EA (purple) | Fonts: "Plus Jakarta Sans" (headings) + "Inter" (body) via Google Fonts ## Colors (CSS vars) --purple:#6246EA; --purple-dim:#EDE9FF; --bg:#fff; --bg-alt:#F8F7FF; --bg-dark:#0D0D14; --text:#0D0D14; --text2:#4B4B6B; --text3:#9898B0; --border:#E8E6F8; ## Sections (top to bottom) 1. NAVBAR — fixed, blur bg, logo (purple spark SVG + "vizard"), nav links (Use cases, Tools, Resources, Pricing, API), right: "Log in" + solid purple pill "Get clips for free". Mobile hamburger. 2. HERO — centered, radial purple glow bg, badge "✦ #1 AI Video Clipping Tool", H1 (56px): "Turn your long video into viral clips with AI magic" (highlight "viral clips" + "AI magic" in purple), subtitle, big CTA "Get clips for free →", social proof "★★★★★ Loved by 1M+ creators", CSS-only editor mockup card below (dark bg, fake timeline + 3 clip cards + sidebar). 3. STATS — 4 stats in a row: 1M+ Creators, 10M+ Clips, 50+ Languages, 80% Time Saved. Animate count-up on scroll. 4. LOGO STRIP — #F8F7FF bg, "Trusted by creators from" + infinite CSS marquee of brand name pills: HubSpot · Adobe · Canva · Notion · Figma · Shopify · Stripe. 5. FEATURES — H2 "Everything you need to go viral", 3-col card grid (1-col mobile). 6 cards with inline SVG icon in purple circle: AI Clip Generator (badge: "Most Popular"), Auto Captions, Smart Reframing, Brand Templates, Team Workspace, Multi-Platform Export. Hover: lift + shadow. 6. HOW IT WORKS — #F8F7FF bg, 3 steps horizontal with dashed connecting line. Each: faint huge number (01/02/03), icon, title, body. Steps: Upload → AI Detects → Export. 7. USE CASE TABS — 4 pill tabs (Marketers, Podcasters, Coaches, Agencies). Each tab: 2-col layout, text left (badge + H3 + body + 3 bullet checkmarks), CSS mockup right. JS tab switching. 8. TESTIMONIALS — #F8F7FF bg, 3-col card grid, 6 cards each with ★★★★★, italic quote, avatar initial circle, name + role. Fade-in on scroll staggered. 9. PRICING — Monthly/Yearly toggle (JS price swap). 3 cards: Free ($0), Pro ($18/mo yearly — featured, 2px purple border, "Most Popular" badge), Team ($39/mo yearly). Each with feature checklist. FAQ accordion below (3 Qs). 10. CTA BANNER — full purple bg, white H2 "Start repurposing videos today", white outlined button "Get clips for free →". 11. FOOTER — #0D0D14 bg, 4 cols: brand + social icons, Product links, Use Cases links, Company links. Bottom bar: copyright + Privacy/Terms. ## Interactions - Navbar shadow on scroll - Hero mockup: CSS float animation (translateY, 4s infinite) - All sections: fade-in + slideUp on scroll (IntersectionObserver) - Stat counters: count up on scroll - Pricing toggle: animated price number swap - CTA buttons: purple glow pulse on hover - Marquee: pause on hover ## Rules - One file only: index.html - Zero JS libraries, zero images - All icons: inline SVG - All mockups: pure HTML/CSS - Real copy (no lorem ipsum) — use text from above sections - Smooth scroll, mobile responsive (breakpoints: 768px, 1024px)