Access ALL prompts for stunning animated websites in one click:
motionsites.ai
Full Prompt to Recreate the Landing Page
Create a dark, premium SaaS landing page for a fictional company called "APEX" — a revenue acceleration platform. The design uses a "liquid glass" aesthetic with ultra-dark backgrounds, translucent glassmorphic elements, and green accent color. The page is built with React, Vite, TypeScript, Tailwind CSS, shadcn/ui, and hls.js for video streaming.
GLOBAL DESIGN SYSTEM
Font: Geist Sans (install @fontsource/geist-sans, weights 400, 500, 600, 700). Apply via font-family: 'Geist Sans', 'Inter', system-ui, sans-serif on body.
Color Palette (HSL, CSS variables in :root):
--background: 260 87% 3% (near-black with slight purple)
--foreground: 40 6% 95% (warm off-white)
--primary: 121 95% 76% (vivid green — accent only)
--primary-foreground: 0 0% 5%
--secondary: 240 4% 16%
--border: 240 4% 20%
--hero-heading: 40 10% 96% (bright warm white for headings)
--hero-sub: 40 6% 82% (muted warm gray for subtext)
--card: 240 6% 9%
--muted: 240 4% 16%
--muted-foreground: 240 5% 65%
--radius: 0.75rem
Map all colors in tailwind.config.ts as hsl(var(--token)). Add hero.heading and hero.sub as custom colors.
"Liquid Glass" utility class (in index.css under
@layer utilities):
.liquid-glass {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.liquid-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(180deg,
rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
-webkit-mask: linear-gradient(
#fff 0 0) content-box, linear-gradient(
#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
Button Variants (in shadcn button.tsx):
hero: bg-primary text-primary-foreground rounded-full px-6 py-3 text-base font-medium hover:bg-primary/90
heroSecondary: liquid-glass text-foreground rounded-full px-6 py-3 text-base font-normal hover:bg-white/5
Marquee animation (tailwind.config.ts keyframes):
marquee: { "0%": { transform: "translateX(0%)" }, "100%": { transform: "translateX(-50%)" } }
Animation: marquee 20s linear infinite
SECTION 1: HERO
Full-viewport hero with a background MP4 video playing behind all content.
Video URL:
d8j0ntlcm91z4.cloudfront.net…
Use a standard <video> tag with <source> (not HLS). Attributes: autoPlay loop muted playsInline. Positioned absolute inset-0 w-full h-full object-cover.
Gradient overlay (absolute, pointer-events-none):
linear-gradient(to bottom, transparent 0%, transparent 30%, hsl(260 87% 3% / 0.1) 45%, hsl(260 87% 3% / 0.4) 60%, hsl(260 87% 3% / 0.75) 75%, hsl(260 87% 3%) 95%)
Content (relative z-10, flex column, min-h-screen):
Navbar — centered, liquid-glass rounded-3xl container (max-w-[850px]) containing:Logo: small SVG crosshair icon in a w-7 h-7 rounded-lg bg-gradient-to-b from-secondary to-mutedbox "APEX" text (text-xl font-semibold)
Nav items: "Features" (dropdown chevron), "Solutions", "Plans", "Learning" (dropdown chevron) — plain text buttons
CTA: <Button variant="hero" size="sm">Sign Up</Button>
Announcement Badge — liquid-glass rounded-full pill: "Nova Launched!" nested "Explore" badge with ChevronRight icon
Heading — text-hero-heading text-4xl sm:text-6xl lg:text-7xl font-semibold leading-[1.05] tracking-tight max-w-5xl:Accelerate Your
Revenue Growth Now
Subheading — text-hero-sub text-lg max-w-md mt-4 opacity-80: "Drive your funnel forward with clever workflows, analytics, and seamless lead management."
CTA Buttons — flex gap-4 mt-8: "Start Free Right Now" (hero variant) "Schedule a Consult" (heroSecondary variant)
Social Proof Bar — at bottom of hero. Left text: "Relied on by brands across the globe" (2-line, text-foreground/50 text-sm). Right: infinite marquee scrolling 6 fake brand names (Vortex, Nimbus, Prysma, Cirrus, Kynder, Halcyn) each with a liquid-glass w-6 h-6 rounded-lg icon showing the first letter. Array is duplicated for seamless loop. Uses animate-marquee.
SECTION 2: FEATURES (3-Column Cards with Background Video)
Background HLS Video:
stream.mux.com/Jwr2RhmsNrd6G…
Use hls.js for playback. Video is absolute inset-0 object-cover behind the section.
Gradient overlays on top of video:
Top: bg-gradient-to-b from-background via-background/80 to-transparent(height 40%)
Bottom: bg-gradient-to-t from-background via-background/80 to-transparent(height 40%)
Overall darkening: bg-background/40
Section header:
Badge: liquid-glass rounded-full pill — "Core Platform" "Overview" with ChevronRight
Heading: text-hero-heading text-3xl sm:text-5xl font-semibold: "Built for Teams That / Ship Relentlessly"
Sub: "Three pillars that keep your revenue engine humming without the operational drag."
3 Feature Cards (grid md:grid-cols-3 gap-6), each liquid-glass rounded-3xl p-8:
Lightning Workflows — "Automate repetitive tasks with intelligent pipelines that adapt to your team's rhythm and velocity." Stat: "3.2x faster" / "pipeline throughput"
Deep-Dive Analytics — "Uncover patterns hiding in your funnel. Real-time cohort analysis with zero configuration required." Stat: "148%" / "avg. conversion lift"
Compliance Engine — "SOC 2, GDPR, and HIPAA guardrails baked into every interaction. Audit trails generated automatically." Stat: "Zero" / "compliance incidents"
Each card has a border-t border-border/50 divider above the stat. Hover: hover:bg-white/[0.03].
SECTION 3: CHESS SECTION (Video Left, Content Right)
py-32 px-4, max-w-6xl, grid lg:grid-cols-2 gap-20 items-center.
Left — Video:liquid-glass rounded-3xl aspect-[4/3] overflow-hidden
HLS video:
stream.mux.com/1CCfG6mPC7LbM…
Right — Content:
Badge: "Smart Routing" "New"
Heading: "Every Lead Finds / Its Perfect Path"
Body: "Intelligent lead scoring meets adaptive routing. Each prospect is matched to the rep, sequence, and cadence most likely to convert — in real time."
Bullet list (3 items with w-1.5 h-1.5 rounded-full bg-primarydots): "AI-scored lead qualification", "Dynamic rep assignment", "Multi-touch attribution"
Buttons: "See It in Action" (hero) "Read the Docs" (heroSecondary)
SECTION 4: REVERSE CHESS SECTION (Content Left, Video Right)
Same layout as Chess but reversed with order- classes for mobile-first.
Left — Content (order-2 lg:order-1):
Badge: "Pipeline Studio" "Beta"
Heading: "Design Funnels / That Actually Close"
Body: "Drag-and-drop pipeline builder with live conversion metrics at every stage. See exactly where deals stall and why."
4 stat cards in a grid grid-cols-2 gap-4, each liquid-glass rounded-2xl p-4:"47.2%" / "win-rate increase"
"12 days" / "shorter sales cycle"
"2.8x" / "deal velocity"
"91%" / "forecast accuracy"
Button: "Try Pipeline Studio" (hero)
Right — Video (order-1 lg:order-2):liquid-glass rounded-3xl aspect-[4/3]
HLS video:
stream.mux.com/f0001qPDy00mv…
SECTION 5: NUMBERS SECTION (Full-Width Background Video)
Background HLS Video:
stream.mux.com/Kec29dVyJgiPd…
Gradient overlay:
linear-gradient(to top, hsl(260 87% 3%) 0%, hsl(260 87% 3% / 0.85) 15%, hsl(260 87% 3% / 0.4) 40%, hsl(260 87% 3% / 0.15) 60%, hsl(260 87% 3% / 0.3) 100%)
Content (relative z-10, py-32):
Hero metric (centered): $4.7B in text-7xl sm:text-[8rem] lg:text-[10rem] font-semibold tracking-tighter label "Revenue influenced" description. mb-24.
Bottom two metrics in a liquid-glass rounded-3xl p-12 grid md:grid-cols-2 with a vertical md:border-r border-border/50 divider:"18M" / "Leads processed monthly"
"99.97%" / "Platform uptime"
SECTION 6: TESTIMONIALS
py-32, centered header 3-column card grid.
Header:
"Trusted by Revenue / Leaders Everywhere"
"Hear from the teams that made the switch."
3 Testimonial cards (liquid-glass rounded-3xl p-8), middle card offset with md:-translate-y-6:
Clara Whitfield, VP Revenue, Meridian Health (initials "CW")
Derek Tanaka, Growth Lead, Baseform (initials "DT")
Simone Reuter, CRO, Alpenhaus Group (initials "SR")
Each card: quoted text divider avatar circle (w-10 h-10 rounded-full bg-secondary) with initials name/role.
SECTION 7: CTA FOOTER WRAPPER (Background Video)
Wrapper component with shared background HLS video behind both CTA and Footer.
HLS Video:
stream.mux.com/tLkHO1qZoaaQO…
Gradient overlay:
linear-gradient(to bottom, hsl(260 87% 3%) 0%, hsl(260 87% 3% / 0.85) 15%, hsl(260 87% 3% / 0.4) 40%, hsl(260 87% 3% / 0.15) 60%, hsl(260 87% 3% / 0.3) 100%)
CTA Section (relative z-10):
liquid-glass rounded-[2rem] p-12 sm:p-20 centered card
Heading: "Ready to Outpace / Your Pipeline Targets?"
Sub: "Join 2,400 teams already accelerating revenue with APEX. No credit card required."
Buttons: "Start Free Today" (hero) "Talk to Sales" (heroSecondary)
Footer (relative z-10):
5-column grid: Brand (2-col span with logo tagline) "Product" (Features, Pricing, Integrations, Changelog, Roadmap) "Company" (About, Blog, Careers, Press) "Resources" (Documentation, Community, Support, Status)
Bottom bar: "© 2026 APEX Inc." Privacy / Terms / Cookies links
Borders: border-t border-border/30
KEY DEPENDENCIES
hls.js, @fontsource/geist-sans, lucide-react, class-variance-authority, tailwindcss-animate,
@radix-ui/react-slot, shadcn/ui components, react-router-dom, @tanstack/react-query
PAGE STRUCTURE (Index.tsx)
<HeroSection />
<FeaturesSection />
<ChessSection />
<ReverseChessSection />
<NumbersSection />
<TestimonialsSection />
<CTAFooterWrapper /> (contains CTASection FooterSect