From 5b2a9aeb50b74552c33a39ffa9cfbe17c9e38078 Mon Sep 17 00:00:00 2001 From: Harsh Singh Date: Sun, 7 Jun 2026 02:17:33 +0530 Subject: [PATCH] feat: pricing page, presets gallery, enhanced landing page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - /pricing: monthly/annual toggle (20% savings), 5 tiers (Free→$20→$32→$48→$160→Enterprise), full feature comparison table, FAQ accordion - /presets: 12 templates with search, category filters, hover preview/use overlays - /: full landing page rewrite — pipeline (6 steps), features, presets showcase, 5 testimonials, pricing teaser, FAQ, full footer with links - create page: nav updated with Presets + Pricing links, removed unused state vars Co-Authored-By: Claude Sonnet 4.6 --- src/app/create/page.tsx | 9 +- src/app/page.tsx | 353 ++++++++++++++++++++++++++------ src/app/presets/page.tsx | 285 ++++++++++++++++++++++++++ src/app/pricing/page.tsx | 423 +++++++++++++++++++++++++++++++++++++++ 4 files changed, 1008 insertions(+), 62 deletions(-) create mode 100644 src/app/presets/page.tsx create mode 100644 src/app/pricing/page.tsx diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx index 36a4a54..8a8abf7 100644 --- a/src/app/create/page.tsx +++ b/src/app/create/page.tsx @@ -30,8 +30,6 @@ function CreatePageInner() { const [prompt, setPrompt] = useState(TEMPLATE_PROMPTS[templateName] || ""); const [fps, setFps] = useState([24]); const [quality, setQuality] = useState([80]); - const [videoFile, setVideoFile] = useState(null); - const [videoUrl, setVideoUrl] = useState(null); const [isGenerating, setIsGenerating] = useState(false); const [isExtracting, setIsExtracting] = useState(false); const [progress, setProgress] = useState(0); @@ -88,8 +86,6 @@ function CreatePageInner() { }; const handleUpload = async (file: File) => { - setVideoFile(file); - setVideoUrl(URL.createObjectURL(file)); setStep(2); setIsExtracting(true); setProgress(20); @@ -137,7 +133,10 @@ function CreatePageInner() { ScrollCraft -
+
+ Presets + Pricing +
{/* Steps */} diff --git a/src/app/page.tsx b/src/app/page.tsx index c2170b1..ee29e69 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,28 +1,57 @@ "use client"; import Link from "next/link"; +import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; -import { ArrowRight, Sparkles, Zap, Download, Play } from "lucide-react"; - -const TEMPLATES = [ - { title: "SaaS Hero", description: "Floating UI with depth", color: "from-violet-600 to-purple-900" }, - { title: "Product Launch", description: "Cinematic reveal", color: "from-blue-600 to-indigo-900" }, - { title: "Agency Portfolio", description: "Bold & minimal", color: "from-rose-600 to-pink-900" }, - { title: "App Showcase", description: "Device mockup scroll", color: "from-emerald-600 to-teal-900" }, - { title: "E-commerce", description: "Product 360 spin", color: "from-amber-600 to-orange-900" }, - { title: "Restaurant", description: "Food & atmosphere", color: "from-red-600 to-rose-900" }, +import { ArrowRight, Sparkles, Zap, Download, Play, Check } from "lucide-react"; + +const PIPELINE = [ + { step: "01", title: "Pick a preset", desc: "Choose from 12+ production-ready templates across SaaS, agency, e-commerce, and more." }, + { step: "02", title: "Describe your atmosphere", desc: "Tell the AI your visual style — noir, golden hour, brutalist, neon dystopia — in plain English." }, + { step: "03", title: "AI generates keyframes", desc: "State-of-the-art image generation creates cinematic web-first visuals from your prompt." }, + { step: "04", title: "Image animates to video", desc: "The keyframe comes to life as an 8-second cinematic video with subtle camera movement." }, + { step: "05", title: "Frames extracted for scroll", desc: "400+ optimized frames are extracted and mapped to your scroll position automatically." }, + { step: "06", title: "Deploy as HTML/CSS/JS", desc: "Download a production-ready ZIP and deploy to Vercel, Netlify, or any static host instantly." }, ]; const FEATURES = [ - { icon: Sparkles, title: "AI Video Generation", desc: "Describe your vision and get a cinematic 8-second video generated by AI" }, - { icon: Zap, title: "Auto Frame Extraction", desc: "400+ frames extracted automatically for buttery-smooth scroll animation" }, - { icon: Play, title: "Scroll Engine", desc: "Native browser scroll — no WebGL, no Three.js, works on every device" }, - { icon: Download, title: "One-Click Export", desc: "Production-ready HTML/CSS/JS bundle, deployable anywhere in seconds" }, + { icon: Sparkles, title: "AI Video Generation", desc: "Describe your vision — get a cinematic 8-second video from Luma AI or Runway ML." }, + { icon: Zap, title: "400+ Frame Extraction", desc: "FFmpeg extracts frames automatically. Native browser scroll — no WebGL, no Three.js." }, + { icon: Play, title: "Scroll Engine", desc: "Canvas-based engine maps scroll to frames at 10–40 FPS. Works on every device." }, + { icon: Download, title: "One-Click Export", desc: "Production-ready HTML/CSS/JS ZIP. Deploy anywhere in under a minute." }, +]; + +const PRESETS = [ + { name: "OrbitCRM", category: "SaaS", gradient: "from-violet-900 to-black", accent: "#a78bfa" }, + { name: "TripVault", category: "Mobile App", gradient: "from-sky-900 to-indigo-950", accent: "#38bdf8" }, + { name: "Shopnest", category: "E-commerce", gradient: "from-amber-950 to-black", accent: "#f59e0b" }, + { name: "VisionForge", category: "AI Platform", gradient: "from-fuchsia-950 to-black", accent: "#e879f9" }, + { name: "StackForge", category: "Dev Tool", gradient: "from-gray-900 to-black", accent: "#22d3ee" }, + { name: "Meridian", category: "Agency", gradient: "from-slate-900 to-black", accent: "#e2e8f0" }, +]; + +const TESTIMONIALS = [ + { name: "Isabella R.", location: "Italy", role: "E-commerce founder", quote: "Sales converted from day one. The 3D scroll made our product page feel like a luxury brand site overnight." }, + { name: "Arjun M.", location: "India", role: "Startup founder", quote: "Replaced a $4,000 agency quote with a 15-minute session. The output was honestly better than what they proposed." }, + { name: "Priya S.", location: "India", role: "Restaurant owner", quote: "Built my restaurant's full site in under 10 minutes. Customers keep asking who designed it." }, + { name: "Lukas B.", location: "Germany", role: "Indie developer", quote: "Launched my SaaS landing page before the weekend was over. The scroll animation is unlike anything I could have hand-coded." }, + { name: "Amara O.", location: "Ghana", role: "Consultant", quote: "My clients think I hired a design agency. I just type a prompt and export the ZIP." }, +]; + +const FAQ = [ + { q: "Do I need to know how to code?", a: "Not at all. You describe your vision in plain English, the AI handles everything else. The export is pure HTML/CSS/JS you can deploy anywhere." }, + { q: "How does the scroll animation work?", a: "We extract 400+ frames from a short AI-generated video, then use a canvas-based engine to display the correct frame based on your scroll position. No WebGL or Three.js required." }, + { q: "Can I use my own video?", a: "Yes. On the /create page you can upload your own MP4, MOV, or WebM and we'll extract frames from it just like AI-generated videos." }, + { q: "Where can I host the exported site?", a: "Anywhere that serves static files — Vercel, Netlify, Cloudflare Pages, GitHub Pages, or your own server. Just unzip and upload." }, + { q: "What AI models do you use?", a: "We support Luma AI (Dream Machine) and Runway ML for video generation. On Pro plans you can bring your own API key. Fal.ai and Gemini support coming soon." }, ]; export default function Home() { + const [openFaq, setOpenFaq] = useState(null); + return (
+ {/* Nav */} + {/* Hero */}
-
-
+
+
AI-Powered · No Code · 3D Scroll @@ -56,8 +87,8 @@ export default function Home() {

- Describe a visual atmosphere. Our AI generates a cinematic video, extracts 400+ frames, - and wires it all up as a silky 3D parallax scroll experience — exported as pure HTML. + Describe a visual atmosphere. AI generates a cinematic video, extracts 400+ frames, + and wires it up as a silky 3D parallax scroll — exported as pure HTML. No code.

@@ -66,15 +97,24 @@ export default function Home() { Create your site - +
-
-
+
+ {["7-day free trial", "No credit card", "Deploy anywhere"].map((t) => ( +
+ {t} +
+ ))} +
+ + {/* Hero visual */} +
+
@@ -86,19 +126,54 @@ export default function Home() {
-
+ {/* Social proof strip */} +
+
+ {["400+ frames per site", "Sub-2s load time", "10–40 FPS", "Works on every device", "No WebGL required", "Deploy anywhere"].map((t) => ( +
+
+ {t} +
+ ))} +
+
+ + {/* Pipeline */} +
- How it works + The pipeline

From prompt to production
- in 4 steps + in 6 steps +

+
+
+ {PIPELINE.map((p) => ( +
+
{p.step}
+

{p.title}

+

{p.desc}

+
+ ))} +
+
+
+ + {/* Features */} +
+
+
+ Core technology +

+ Everything you need.
+ Nothing you don't.

{FEATURES.map((f, i) => (
-
{i + 1}
+
{i + 1}
@@ -110,56 +185,220 @@ export default function Home() {
-
+ {/* Presets showcase */} +
-
- Ready to use -

Start from a template

-

- Production-tested starters for every industry. Customize with AI or edit directly. -

+
+
+ 12 presets & counting +

Start from a preset

+

+ Production-tested starters with pre-built AI prompts, scroll layouts, and section structures. +

+
+ + +
-
- {TEMPLATES.map((t) => ( - -
-
-
-

{t.title}

-

{t.description}

+
+ {PRESETS.map((p) => ( + +
+
+
+
+

{p.name}

+

{p.category}

-
- +
+
))}
+
+ + + +
+ {/* Testimonials */} +
+
+
+ From our users +

+ Real sites. Real results. +

+
+
+ {TESTIMONIALS.map((t) => ( +
+

+ “{t.quote}” +

+
+
+ {t.name[0]} +
+
+

{t.name}

+

{t.role} · {t.location}

+
+
+
+ ))} + {/* Filler CTA card */} +
+
+ +
+

Your site could be next

+

Build and launch in under 15 minutes

+ + + +
+
+
+
+ + {/* Pricing teaser */} +
+
+ Pricing +

+ Free to start.
+ Scales with you. +

+

+ 7-day free trial with 100 AI credits. No card required. Upgrade to unlock more sites, higher resolution, and custom domains. +

+
+ + + + + + +
+
+
+ + {/* FAQ */} +
+
+
+ FAQ +

Frequently asked

+
+
+ {FAQ.map((item, i) => ( +
+ + {openFaq === i && ( +
+ {item.a} +
+ )} +
+ ))} +
+
+
+ + {/* Final CTA */}
-

Ready to build?

-

No design skills. No code. Just describe what you see in your head.

- - - +

+ Ready to build? +

+

+ No design skills. No code. Just describe what you see in your head. +

+
+ + + + + + +
-
-
-
- + {/* Footer */} +
+
+
+
+
+
+ +
+ ScrollCraft +
+

AI-powered 3D scroll website builder. Build cinematic sites in minutes.

+
+
+

Product

+
+ {[["Features", "/#features"], ["Presets", "/presets"], ["Pricing", "/pricing"], ["3D Builder", "/create"]].map(([label, href]) => ( + {label} + ))} +
+
+
+

Company

+
+ {[["About", "/about"], ["Blog", "/blog"], ["Changelog", "/changelog"], ["Contact", "/contact"]].map(([label, href]) => ( + {label} + ))} +
+
+
+

Legal

+
+ {[["Privacy Policy", "/privacy"], ["Terms of Service", "/terms"], ["Cookie Policy", "/cookies"]].map(([label, href]) => ( + {label} + ))} +
+
+
+
+

© 2026 ScrollCraft. All rights reserved.

+

Built with Next.js & AI

- ScrollCraft — Built with Next.js & AI
diff --git a/src/app/presets/page.tsx b/src/app/presets/page.tsx new file mode 100644 index 0000000..7a4e2e2 --- /dev/null +++ b/src/app/presets/page.tsx @@ -0,0 +1,285 @@ +"use client"; +import { useState } from "react"; +import Link from "next/link"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import { Input } from "@/components/ui/input"; +import { ArrowRight, Search, Sparkles, Eye } from "lucide-react"; + +const CATEGORIES = ["All", "SaaS", "Agency", "E-commerce", "Mobile App", "Startup", "Developer Tool", "AI Platform", "Fintech", "Logistics"]; + +const PRESETS = [ + { + name: "Meridian", + category: "Agency", + description: "Premium agency portfolio with bold editorial scroll", + tags: ["Dark", "Minimal", "Editorial"], + gradient: "from-slate-900 via-slate-800 to-black", + accent: "#e2e8f0", + prompt: "A slow cinematic pan through a modernist architecture interior. Concrete and glass. Dark, premium, editorial feel. Shallow depth of field.", + }, + { + name: "TripVault", + category: "Mobile App", + description: "Travel app showcase with destination flythrough", + tags: ["Colorful", "Immersive", "3D"], + gradient: "from-sky-900 via-blue-900 to-indigo-950", + accent: "#38bdf8", + prompt: "Aerial cinematic flyover of turquoise tropical coastline at golden hour. Drone shot, warm colors, crystal water, lush green islands.", + }, + { + name: "Shopnest", + category: "E-commerce", + description: "Luxury e-commerce with product reveal scroll", + tags: ["Luxury", "Dark", "Product"], + gradient: "from-amber-950 via-yellow-950 to-black", + accent: "#f59e0b", + prompt: "Ultra slow macro product shot. Luxury leather texture in dramatic studio lighting. Black background, golden rim light. Commercial photography.", + }, + { + name: "OrbitCRM", + category: "SaaS", + description: "Dark SaaS hero with floating UI elements", + tags: ["SaaS", "Dark", "Tech"], + gradient: "from-violet-950 via-purple-950 to-black", + accent: "#a78bfa", + prompt: "Cinematic flythrough of a dark futuristic digital dashboard. Glowing UI panels float in dark space. Purple and blue neon accents. Depth of field blur.", + }, + { + name: "SyncBase", + category: "SaaS", + description: "Productivity tool with clean minimal scroll", + tags: ["Minimal", "Clean", "Productivity"], + gradient: "from-emerald-950 via-teal-950 to-black", + accent: "#34d399", + prompt: "Abstract flowing data streams in deep space. Green and teal particle effects moving through darkness. Clean, technical, modern.", + }, + { + name: "StackForge", + category: "Developer Tool", + description: "Dev tool landing with code-aesthetic depth", + tags: ["Developer", "Dark", "Code"], + gradient: "from-gray-900 via-zinc-900 to-black", + accent: "#22d3ee", + prompt: "Cinematic zoom through lines of glowing code on dark screens. Matrix-like but premium. Cyan and white light trails. Depth of field.", + }, + { + name: "VisionForge", + category: "AI Platform", + description: "AI platform hero with neural network visuals", + tags: ["AI", "Futuristic", "Dark"], + gradient: "from-fuchsia-950 via-pink-950 to-black", + accent: "#e879f9", + prompt: "Abstract neural network visualization. Glowing nodes and connections in deep purple space. Data flowing between points. Ultra cinematic.", + }, + { + name: "Halo", + category: "Fintech", + description: "Fintech stablecoin landing with premium feel", + tags: ["Finance", "Premium", "Dark"], + gradient: "from-blue-950 via-indigo-950 to-black", + accent: "#60a5fa", + prompt: "Abstract liquid metal surface with ripples. Futuristic financial data overlays. Dark blue, silver, premium. Cinematic macro shot.", + }, + { + name: "Targo", + category: "Logistics", + description: "Transport & logistics with bold red branding", + tags: ["Bold", "Red", "Dynamic"], + gradient: "from-red-950 via-rose-950 to-black", + accent: "#f87171", + prompt: "Time-lapse of cargo ships and trucks moving at dusk. Bold industrial aesthetic. Red sky, motion blur, cinematic grade.", + }, + { + name: "Mindloop", + category: "Startup", + description: "Newsletter / content platform with liquid-glass UI", + tags: ["Glass", "Minimal", "Mono"], + gradient: "from-neutral-900 via-zinc-900 to-black", + accent: "#a3a3a3", + prompt: "Slow motion liquid glass surface with subtle refractions. Monochrome. Ultra minimal. Premium material render. Studio lighting.", + }, + { + name: "Power AI", + category: "AI Platform", + description: "Full-screen dark video hero with AI gradient", + tags: ["AI", "Dark", "Bold"], + gradient: "from-indigo-950 via-violet-950 to-black", + accent: "#818cf8", + prompt: "Abstract AI energy field. Electric indigo and violet light bursts in dark space. Powerful, dynamic, cinematic. Slow motion.", + }, + { + name: "AutoMachines", + category: "Developer Tool", + description: "Automation hero with Spline 3D aesthetic", + tags: ["3D", "Dark", "Automation"], + gradient: "from-stone-900 via-neutral-900 to-black", + accent: "#d4d4d4", + prompt: "Cinematic shot of robotic assembly arms in dark factory. Sparks flying, precision motion. Industrial but premium. Slow motion.", + }, +]; + +export default function PresetsPage() { + const [search, setSearch] = useState(""); + const [activeCategory, setActiveCategory] = useState("All"); + + const filtered = PRESETS.filter((p) => { + const matchesSearch = + p.name.toLowerCase().includes(search.toLowerCase()) || + p.description.toLowerCase().includes(search.toLowerCase()) || + p.tags.some((t) => t.toLowerCase().includes(search.toLowerCase())); + const matchesCategory = activeCategory === "All" || p.category === activeCategory; + return matchesSearch && matchesCategory; + }); + + return ( +
+ {/* Nav */} + + + {/* Header */} +
+ + Production-ready presets + +

+ Start from a preset +

+

+ Every preset comes with a pre-built AI prompt, scroll layout, and section structure. Customize in seconds. +

+
+ + {/* Search + filters */} +
+
+ + setSearch(e.target.value)} + placeholder="Search presets..." + className="pl-9 bg-card border-white/10 focus:border-primary/50" + /> +
+
+ {CATEGORIES.map((cat) => ( + + ))} +
+
+ + {/* Grid */} +
+ {filtered.length === 0 ? ( +
+

No presets found

+

Try a different search or category

+
+ ) : ( +
+ {filtered.map((preset) => ( +
+ {/* Visual preview */} +
+ {/* Fake scroll lines to suggest 3D scroll */} +
+ {[...Array(5)].map((_, i) => ( +
+ ))} +
+ {/* Accent glow */} +
+
+
+ {preset.tags.map((tag) => ( + + {tag} + + ))} +
+

{preset.name}

+

{preset.category}

+
+ {/* Hover overlay */} +
+ + + + +
+
+ + {/* Info */} +
+

{preset.name}

+

{preset.description}

+
+
+ ))} +
+ )} +
+ + {/* Bottom CTA */} +
+

Don't see what you need?

+

+ Start from scratch with a custom prompt — describe any atmosphere and our AI will generate it. +

+ + + +
+ + {/* Footer */} +
+
+
+ +
+ ScrollCraft — Built with Next.js & AI +
+
+
+ ); +} diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx new file mode 100644 index 0000000..1ffc810 --- /dev/null +++ b/src/app/pricing/page.tsx @@ -0,0 +1,423 @@ +"use client"; +import { useState } from "react"; +import Link from "next/link"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import { ArrowLeft, Check, Minus, Sparkles, Zap } from "lucide-react"; + +const PLANS = [ + { + name: "Free Trial", + monthly: 0, + annual: 0, + description: "Try everything, no card needed", + badge: null, + cta: "Start free", + ctaVariant: "outline" as const, + highlight: false, + credits: "100 AI credits", + features: [ + "100 AI credits", + "1 website", + "Free subdomain", + "720p video generation", + "ZIP export", + "Community support", + ], + missing: [ + "Custom domain", + "Design-change chats", + "Image upscaling", + "Cloud save", + ], + }, + { + name: "Basic", + monthly: 25, + annual: 20, + description: "Perfect for freelancers & side projects", + badge: null, + cta: "Get Basic", + ctaVariant: "outline" as const, + highlight: false, + credits: "1,500 credits / mo", + features: [ + "1,500 AI credits / month", + "2 full 3D websites", + "Free subdomain", + "30 images / 15 videos", + "20 design-change chats", + "HD image generation", + "720p video generation", + "ZIP export", + "Email support", + ], + missing: [ + "Custom domain", + "1080p video generation", + "Image upscaling", + "Cloud save", + ], + }, + { + name: "Basic Plus", + monthly: 40, + annual: 32, + description: "More credits, more sites", + badge: null, + cta: "Get Basic Plus", + ctaVariant: "outline" as const, + highlight: false, + credits: "2,500 credits / mo", + features: [ + "2,500 AI credits / month", + "4 full 3D websites", + "Free subdomain", + "50 images / 25 videos", + "35 design-change chats", + "HD image generation", + "720p video generation", + "ZIP export", + "Priority email support", + ], + missing: [ + "Custom domain", + "1080p video generation", + "Image upscaling", + "Cloud save", + ], + }, + { + name: "Pro", + monthly: 60, + annual: 48, + description: "For serious builders & agencies", + badge: "Most Popular", + cta: "Get Pro", + ctaVariant: "default" as const, + highlight: true, + credits: "6,000 credits / mo", + features: [ + "6,000 AI credits / month", + "7 full 3D websites", + "Free subdomain", + "Custom domain support", + "120 images / 60 videos", + "40 design-change chats", + "HD + 1080p video generation", + "All base AI models", + "Image upscaling", + "ZIP export", + "Priority support", + ], + missing: [ + "4K video generation", + "Cloud save", + "Business OS", + ], + }, + { + name: "Premium", + monthly: 200, + annual: 160, + description: "Maximum power for power users", + badge: null, + cta: "Get Premium", + ctaVariant: "outline" as const, + highlight: false, + credits: "25,000 credits / mo", + features: [ + "25,000 AI credits / month", + "30 full 3D websites", + "Free subdomain", + "Custom domain support", + "500 images / 250 videos", + "160 design-change chats", + "HD + 1080p + 4K video", + "All base AI models", + "Image upscaling", + "Full cloud save", + "Business OS", + "REST API access", + "Dedicated support", + ], + missing: [], + }, +]; + +const FAQ = [ + { + q: "What is an AI credit?", + a: "Credits are consumed when you generate images or videos. Roughly: 1 image = 1 credit, 1 video = 50 credits. Unused credits don't roll over.", + }, + { + q: "Can I cancel anytime?", + a: "Yes. Cancel from your dashboard at any time — you keep access until the end of your billing period.", + }, + { + q: "What's the difference between monthly and annual?", + a: "Annual billing saves you 20%. You're charged once per year upfront.", + }, + { + q: "Do I own the exported code?", + a: "Yes, 100%. You can modify, host, resell, or white-label any site you export.", + }, + { + q: "Can I bring my own AI API key?", + a: "Yes on Pro and above — connect your own Fal.ai, Gemini, or Luma AI key to use your own quota.", + }, + { + q: "Is there an enterprise plan?", + a: "Yes. We build custom 3D websites for your brand and offer white-label solutions. Contact us for pricing.", + }, +]; + +export default function PricingPage() { + const [annual, setAnnual] = useState(true); + const [openFaq, setOpenFaq] = useState(null); + + return ( +
+ {/* Nav */} + + + {/* Header */} +
+
+ + Simple, transparent pricing + +

+ Start free.
+ + Scale when ready. + +

+

+ Every plan includes our full 3D scroll engine, ZIP export, and AI video generation. +

+ + {/* Billing toggle */} +
+ + +
+
+ + {/* Plans */} +
+
+ {PLANS.map((plan) => ( +
+ {plan.badge && ( +
+ + {plan.badge} + +
+ )} + +
+

{plan.name}

+

{plan.description}

+
+ +
+
+ + ${annual ? plan.annual : plan.monthly} + + /mo +
+ {plan.annual > 0 && annual && ( +

+ Billed ${plan.annual * 12}/yr +

+ )} + {plan.annual === 0 && ( +

No credit card needed

+ )} +
+ + + {plan.credits} + + + + + + +
+ {plan.features.map((f) => ( +
+ + {f} +
+ ))} + {plan.missing.map((f) => ( +
+ + {f} +
+ ))} +
+
+ ))} +
+ + {/* Enterprise */} +
+
+

Enterprise

+

+ Custom 3D websites built for your brand by our team. White-label, dedicated infrastructure, SLA, and custom AI model training. +

+
+ + + +
+
+ + {/* Feature comparison table */} +
+

Full comparison

+
+ + + + + {PLANS.map(p => ( + + ))} + + + + {[ + { label: "AI credits / mo", values: ["100", "1,500", "2,500", "6,000", "25,000"] }, + { label: "Websites", values: ["1", "2", "4", "7", "30"] }, + { label: "Design-change chats", values: ["—", "20", "35", "40", "160"] }, + { label: "Video resolution", values: ["720p", "720p", "720p", "1080p", "4K"] }, + { label: "Image upscaling", values: [false, false, false, true, true] }, + { label: "Custom domain", values: [false, false, false, true, true] }, + { label: "Full cloud save", values: [false, false, false, false, true] }, + { label: "REST API access", values: [false, false, false, false, true] }, + { label: "Business OS", values: [false, false, false, false, true] }, + { label: "ZIP export", values: [true, true, true, true, true] }, + { label: "Bring your own API key", values: [false, false, false, true, true] }, + ].map((row, i) => ( + + + {row.values.map((v, vi) => ( + + ))} + + ))} + +
Feature + {p.name} +
{row.label} + {typeof v === "boolean" ? ( + v ? : + ) : ( + {v} + )} +
+
+
+ + {/* FAQ */} +
+

Frequently asked

+
+ {FAQ.map((item, i) => ( +
+ + {openFaq === i && ( +
+ {item.a} +
+ )} +
+ ))} +
+
+ + {/* Bottom CTA */} +
+

+ 7 days free. No card required. +

+

Try the full Pro experience — upgrade only when you love it.

+ + + +
+ + {/* Footer */} + +
+ ); +}