import { useState } from "react"; import { motion, AnimatePresence } from "motion/react"; import { ArrowRight, Check, Zap, Shield, BarChart3, ChevronDown, Twitter, Github, Linkedin } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; import { Container } from "@/components/ui/container"; import { Separator } from "@/components/ui/separator"; // Mock data for logo strip const LOGO_SVGS = [ { name: "TechCorp", icon: "TC" }, { name: "DataFlow", icon: "DF" }, { name: "Nexus", icon: "NX" }, { name: "Vertex", icon: "VT" } ]; // Feature data const FEATURES = [ { title: "Blazing Fast Performance", description: "Optimized architecture delivering 99.9% uptime and sub-100ms response times.", icon: Zap, color: "text-orange-500" }, { title: "Enterprise-Grade Security", description: "SOC2 compliant with end-to-end encryption and automatic audit trails.", icon: Shield, color: "text-emerald-500" }, { title: "Real-Time Analytics", description: "Live dashboards with predictive insights and custom reporting.", icon: BarChart3, color: "text-blue-500" } ]; // Pricing tiers const PRICING = [ { name: "Starter", price: "$29", description: "Perfect for individuals and small projects", features: ["5 GB Storage", "Basic Analytics", "Email Support", "API Access"], cta: "Start Free", popular: false }, { name: "Pro", price: "$99", description: "For growing teams and businesses", features: ["50 GB Storage", "Advanced Analytics", "Priority Support", "Custom Integrations"], cta: "Start Trial", popular: true }, { name: "Enterprise", price: "Custom", description: "For large-scale operations", features: ["Unlimited Storage", "Dedicated Infrastructure", "24/7 Phone Support", "Custom SLA"], cta: "Contact Sales", popular: false } ]; // FAQ Data const FAQ = [ { question: "Can I cancel my subscription at any time?", answer: "Yes, you can cancel or downgrade your plan at any time. No questions asked. You'll retain access until the end of your billing period." }, { question: "Do you offer a free trial?", answer: "Absolutely! Every plan comes with a 14-day free trial. No credit card required to start." }, { question: "What payment methods do you accept?", answer: "We accept all major credit cards, PayPal, and bank transfers for enterprise accounts." }, { question: "Is my data secure?", answer: "Security is our top priority. We use bank-grade encryption, regular security audits, and are SOC2 Type II certified." } ]; // Motion variants for smooth animations const fadeInUp = { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: "easeOut" } } }; const staggerChildren = { animate: { transition: { staggerChildren: 0.1 } } }; function AccordionItem({ question, answer }: { question: string; answer: string }) { const [isOpen, setIsOpen] = useState(false); return ( {isOpen && (

{answer}

)} ); } export default function App() { return (

{/* Navigation Header */}

SaaSify

{/* Hero Section */}

{/* Background pattern */}

Build, Launch, and Scale Your SaaS Faster

The all-in-one platform for modern SaaS teams. Ship features, not infrastructure.

{/* Logo Strip */}

Trusted by forward-thinking teams

{LOGO_SVGS.map((logo, index) => (

{logo.icon}

{logo.name} ))}

{/* Features Section */}

Powerful Features, Zero Complexity

Everything you need to build, deploy, and scale your application with confidence.

{FEATURES.map((feature, index) => (

{feature.title} {feature.description} ))}

{/* Pricing Section */}

Simple, Transparent Pricing

Choose the plan that fits your needs. All plans include our core features.

{PRICING.map((plan, index) => ( {plan.popular && (

)}

{plan.name} {plan.popular && ( Most Popular )}

{plan.price} {plan.price !== "Custom" && /month}

{plan.description}

{feature}

))}

{/* FAQ Section */}

Frequently Asked Questions

Everything you need to know about our platform.

{FAQ.map((item, index) => ( ))}

{/* Footer */}

); }

SaaS Landing Page