跳到主要内容
返回画廊
PAID · 已付费

SaaS Pricing Flow

Pricingheropage_type: hero2026-05-08

Prompt:

Build a React + TypeScript + Vite pricing page section with a full-screen background video and three pricing cards. Use the Inter font (no import needed, system fallback to sans-serif).

Background video:

  • URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_064122_c4750c0e-7476-4b44-94a2-a85a65c63bf2.mp4
  • Fixed, full viewport (100vw x 100vh), object-fit: cover, z-index: -1, no overlays, autoPlay, muted, playsInline, no loop attribute.
  • Implement boomerang playback via throttled seek:
    • State: direction (1 fwd / -1 rev), currentTarget (sec), seekPending flag, lastTs, rafId.
    • On ended: set direction = -1, currentTarget = video.duration, seekPending = false, start requestAnimationFrame(step).
    • step(ts): compute dt from lastTs, decrement currentTarget by dt. If <= 0, set direction = 1, video.currentTime = 0, call video.play(), return. Else call doSeek() and request next frame.
    • doSeek(): if video.seeking, set seekPending = true and return (never stack seeks). Else clear seekPending and set video.currentTime = currentTarget.
    • On seeked: if direction === -1 && seekPending, call doSeek() again.

Header (.c3-header) — centered, max-width 1100px, margin-bottom 40px:

  • Logo (absolute left): https://pub-f170a2592d2c4a1485466404c36807be.r2.dev/Tests/logoipsum-415.svg, 32px wide, filter: brightness(0) invert(1).
  • Nav pill (.c3-nav) centered: background: rgba(30,35,45,0.75), backdrop-filter: blur(10px), border-radius 100px, 1px border rgba(255,255,255,0.15), inset shadow. Links: Home, Pricing (active = white/500), FAQ, Contact, and a white pill "Download" button (.c3-nav-btn) with black text. Font size 0.82rem, gap 20px. Close button (.c3-nav-close) is a 32px circle shown in mobile drawer.
  • Hamburger (mobile only, absolute right): 32px circle with 3-line span.

Watermark (.c3-watermark-container) — absolute, top 150px, centered:

  • .c3-watermark-top: "Forma AI", 2.8rem, weight 600, color rgba(164,244,253,1), positioned with top: -20px and margin-bottom: -90px so it overlaps.
  • .c3-watermark-main: "Pricing", 16rem, weight 800, line-height 0.9, letter-spacing -0.05em. Text uses gradient linear-gradient(to right, #091020 0%, #0B2551 25%, #A4F4FD 65%, #00d2ff 100%) clipped to text. Apply filter: url(#c3-noise).
  • Include inline SVG filter #c3-noise with feTurbulence (fractalNoise, baseFrequency 0.5, 2 octaves), feComponentTransfer slope 0.075 alpha, feComposite in, feBlend overlay.

Grid (.c3-grid) — 3 columns, gap 24px, max-width 1100px, margin-top 175px, transform: translateX(20px).

Cards (.c3-card):

  • Background linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.4)), backdrop-filter: blur(14px) brightness(0.91), 1px white border, border-radius: 44px, padding 50px 24px, min-height 580px, transition: all 0.6s cubic-bezier(0.22,1,0.36,1).
  • ::before overlay: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%).
  • Hover: background rgba(15,15,15,0.6), border rgba(34,211,238,0.7), transform: translateY(-12px) scale(1.01).
  • .c3-card-pro variant has slightly darker gradient.
  • Each card has tier label (.c3-tier-small, 1.1rem, weight 400, rgba(255,255,255,0.6)), price (.c3-tier-large, 2.8rem, weight 500, letter-spacing -0.02em), description (.c3-desc, 0.88rem, rgba(255,255,255,0.45), min-height 3.2em, margin-bottom 40px), 5-item checklist, and "Choose Plan" button.

Checklist items (.c3-list li): gap 14px, 0.92rem, rgba(255,255,255,0.8), margin-bottom 18px. Check icon is a 28px circle rgba(255,255,255,0.15) containing a 14px white stroke SVG check (path M20 6L9 17l-5-5, stroke-width 4, round caps).

Card content:

  1. Free / Free — "For creators taking their first steps with Forma." — Up to 3 projects in the cloud; Image export up to 1080p; Basic editing tools; Free templates and icons; Access via web and mobile app.
  2. Standard / $9,99/m (or $99,99/y) — "For freelancers and small teams who need more freedom and flexibility." — Up to 50 projects in the cloud; Export up to 4K; Advanced editing toolkit; Team collaboration (up to 5 members); Access to premium template library.
  3. Pro / $19,99/m (or $199,99/y) (use .c3-card-pro) — "For studios, agencies, and professional creators working with brands." — Unlimited projects; Export up to 8K + animations; AI-powered content generation tools; Unlimited team members; Brand customization.

Button (.c3-btn): white bg, black text, 10px/32px padding, border-radius 100px, weight 600, 0.88rem, margin-top auto, centered. Hover: #f5f5f5, scale 1.02, shadow.

Yearly toggle (.c3-toggle-wrap) below grid, max-width 1100px:

  • .c3-toggle: 52x28 white pill with black 20px knob at left+4/top+4. Active state: bg rgba(255,255,255,0.2), knob translates 24px right and turns white. Transition cubic-bezier(0.4,0,0.2,1).
  • Label "Yearly" — 1rem, weight 500, white.
  • Clicking toggles yearly state, swapping prices between monthly ($9,99/m, $19,99/m) and yearly ($99,99/y, $199,99/y).

Body: background-color: #000, padding 40px 20px, flex column centered, overflow-x: hidden.

Responsive (max-width: 1024px):

  • Watermark becomes relative/centered; "Forma AI" 2rem; "Pricing" 6rem, solid #00d2ff (no gradient/filter).
  • Grid becomes horizontal scroll-snap row (overflow-x: auto, scroll-snap-type: x mandatory, cards flex: 0 0 320px, scroll-snap-align: center), hidden scrollbar, full viewport width.
  • Nav hidden by default, becomes full-screen overlay (rgba(15,20,25,0.6) + blur) when .active, links 1.5rem, close button top-right.
  • Hamburger visible.

Use class prefix c3- throughout. All state in a single App.tsx component using useState for menuOpen and yearly, and useRef + useEffect for the video boomerang logic.

回到全部 177 条