"use client";
 
import { Navbar } from "./navbar";
import { Hero } from "./hero";
import { Features } from "./features";
import { Testimonials } from "./testimonials";
import { Pricing } from "./pricing";
import { FAQ } from "./faq";
import { Footer } from "./footer";
 
export function SaasStarterPage() {
  return (
    <div className="min-h-screen bg-[#151817] text-white font-sans antialiased selection:bg-[#5BA97C]/30 selection:text-[#5BA97C]">
      <Navbar />
      <main>
        <Hero />
        <Features />
        <Pricing />
        <Testimonials />
        <FAQ />
      </main>
      <Footer />
    </div>
  );
}

"use client";
 
import { useState } from "react";
import {
  motion,
  AnimatePresence,
  useScroll,
  useMotionValueEvent,
} from "framer-motion";
import { Menu, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
 
const navItems = [
  { name: "Product", href: "#features" },
  { name: "Solutions", href: "#solutions" },
  { name: "Pricing", href: "#pricing" },
  { name: "Resources", href: "#blog" },
];
 
export function Navbar() {
  const { scrollY } = useScroll();
  const [scrolled, setScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
  useMotionValueEvent(scrollY, "change", (latest) => {
    setScrolled(latest > 50);
  });
 
  return (
    <>
      <motion.nav
        initial={{ y: -100, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
        className="absolute top-0 left-0 right-0 z-50 pt-6 px-4"
      >
        <div className="max-w-7xl mx-auto flex justify-center">
          <motion.div
            className="relative flex items-center justify-between px-6 py-3 rounded-full"
            animate={{
              scaleX: scrolled ? 0.95 : 1,
              backgroundColor: scrolled
                ? "rgba(21, 24, 23, 0.8)"
                : "rgba(21, 24, 23, 0)",
            }}
            transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
            style={{ width: "100%", maxWidth: scrolled ? "900px" : "1200px" }}
          >
            {/* Backdrop blur layer */}
            <motion.div
              className="absolute inset-0 rounded-full -z-10"
              animate={{
                backdropFilter: scrolled ? "blur(16px)" : "blur(0px)",
                border: scrolled
                  ? "1px solid rgba(255, 255, 255, 0.08)"
                  : "1px solid transparent",
              }}
              transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
            />
 
            {/* Logo */}
            <a href="#" className="flex items-center gap-2 group relative z-10">
              <div className="relative w-8 h-8 flex items-center justify-center rounded-lg bg-white/10 overflow-hidden group-hover:bg-[#5BA97C] transition-colors duration-300">
                <span className="text-white font-bold text-lg relative z-10 group-hover:text-[#151817] transition-colors duration-300">
                  S
                </span>
              </div>
              <span className="font-semibold text-lg tracking-tight text-white">
                SaaS<span className="text-[#5BA97C]">.ai</span>
              </span>
            </a>
 
            {/* Desktop Navigation */}
            <div className="hidden md:flex items-center gap-1 bg-white/5 rounded-full p-1 border border-white/5 backdrop-blur-sm">
              {navItems.map((item) => (
                <a
                  key={item.name}
                  href={item.href}
                  className="relative px-4 py-2 text-sm font-medium text-white/70 hover:text-white transition-colors rounded-full group"
                >
                  <span className="relative z-10">{item.name}</span>
                  <motion.div
                    className="absolute inset-0 bg-white/10 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
                    layoutId="nav-hover"
                  />
                </a>
              ))}
            </div>
 
            {/* CTA */}
            <div className="hidden md:flex items-center gap-4">
              <a
                href="#"
                className="text-sm font-medium text-white/70 hover:text-white transition-colors"
              >
                Sign In
              </a>
              <Button className="bg-white text-black hover:bg-white/90 rounded-full px-6 font-semibold shadow-lg shadow-white/5 transition-all duration-300">
                Get Started
              </Button>
            </div>
 
            {/* Mobile Toggle */}
            <button
              className="md:hidden text-white p-2"
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            >
              {isMobileMenuOpen ? <X /> : <Menu />}
            </button>
          </motion.div>
        </div>
      </motion.nav>
 
      {/* Mobile Menu Overlay */}
      <AnimatePresence>
        {isMobileMenuOpen && (
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            transition={{ duration: 0.3, ease: "easeOut" }}
            className="fixed inset-0 z-40 bg-[#151817] pt-32 px-6 md:hidden"
          >
            <div className="flex flex-col gap-6">
              {navItems.map((item, i) => (
                <motion.a
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: i * 0.1, duration: 0.3 }}
                  key={item.name}
                  href={item.href}
                  className="text-3xl font-medium text-white/90 hover:text-[#5BA97C] transition-colors"
                  onClick={() => setIsMobileMenuOpen(false)}
                >
                  {item.name}
                </motion.a>
              ))}
              <div className="h-px bg-white/10 my-4" />
              <Button className="w-full bg-white text-black h-12 text-lg font-semibold rounded-xl">
                Get Started Now
              </Button>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}

"use client";
 
import { useRef } from "react";
import { motion, useScroll, useTransform, useSpring } from "framer-motion";
import {
  ArrowRight,
  Play,
  CheckCircle2,
  TrendingUp,
  Users,
  ShieldCheck,
} from "lucide-react";
import { Button } from "@/components/ui/button";
 
export function Hero() {
  const containerRef = useRef(null);
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start start", "end start"],
  });
 
  // Parallax transforms for "Exploded View" effect
  const yMain = useTransform(scrollYProgress, [0, 1], [0, 200]);
  const yCard1 = useTransform(scrollYProgress, [0, 1], [0, -100]);
  const yCard2 = useTransform(scrollYProgress, [0, 1], [0, -200]);
  const yCard3 = useTransform(scrollYProgress, [0, 1], [0, -50]);
  const rotateX = useTransform(scrollYProgress, [0, 1], [0, 10]);
  const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0]);
 
  return (
    <section
      ref={containerRef}
      className="relative min-h-[130vh] flex flex-col items-center pt-40 bg-[#151817] overflow-hidden perspective-1000"
    >
      {/* Cinematic Spotlight Background */}
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute top-[-20%] left-1/2 -translate-x-1/2 w-[1200px] h-[1000px] bg-[radial-gradient(ellipse_at_center,rgba(255,255,255,0.03),transparent_70%)] blur-[100px]" />
        <div className="absolute top-[-10%] left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-[radial-gradient(ellipse_at_center,rgba(91,169,124,0.08),transparent_70%)] blur-[80px]" />
 
        {/* Animated Grid */}
        <div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff03_1px,transparent_1px),linear-gradient(to_bottom,#ffffff03_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
      </div>
 
      <div className="container relative z-10 px-4 text-center">
        {/* Premium Badge */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, ease: "easeOut" }}
          className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 backdrop-blur-md mb-8 hover:bg-white/10 transition-colors cursor-pointer group"
        >
          <span className="flex h-1.5 w-1.5 rounded-full bg-[#5BA97C] shadow-[0_0_10px_#5BA97C]" />
          <span className="text-sm font-medium text-white/80 tracking-wide">
            v2.0 is live
          </span>
        </motion.div>
 
        {/* Headline */}
        <motion.h1
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.1, ease: "easeOut" }}
          className="text-5xl md:text-8xl font-bold tracking-tighter text-white mb-8 leading-[1.1]"
        >
          The intelligence engine <br />
          <span className="text-white/40">for your business.</span>
        </motion.h1>
 
        {/* Subheadline */}
        <motion.p
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.2, ease: "easeOut" }}
          className="text-lg md:text-xl text-white/60 max-w-2xl mx-auto mb-12 leading-relaxed"
        >
          Deploy autonomous agents that optimize your infrastructure, scale your
          database, and secure your endpoints.
        </motion.p>
 
        {/* CTAs */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.3, ease: "easeOut" }}
          className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-32"
        >
          <Button className="h-14 px-8 bg-white text-black hover:bg-white/90 rounded-full text-lg font-semibold shadow-[0_0_30px_-10px_rgba(255,255,255,0.3)] hover:shadow-[0_0_50px_-10px_rgba(255,255,255,0.4)] hover:scale-105 transition-all duration-300">
            Start Building
            <ArrowRight className="ml-2 w-5 h-5" />
          </Button>
          <Button
            variant="outline"
            className="h-14 px-8 border-white/10 bg-white/5 text-white hover:bg-white/10 rounded-full text-lg font-medium backdrop-blur-sm hover:scale-105 transition-all duration-300"
          >
            <Play className="mr-2 w-4 h-4 fill-white" />
            Watch Demo
          </Button>
        </motion.div>
 
        {/* EXPLODED VIEW DASHBOARD */}
        <div className="relative max-w-6xl mx-auto h-[600px]">
          {/* Main Dashboard Layer */}
          <motion.div
            style={{ y: yMain, rotateX, opacity }}
            className="absolute inset-x-0 top-0 rounded-2xl border border-white/10 bg-[#151817]/90 backdrop-blur-xl shadow-2xl overflow-hidden z-10"
          >
            {/* Window Controls */}
            <div className="h-12 border-b border-white/10 flex items-center px-4 gap-2 bg-white/5">
              <div className="flex gap-2">
                <div className="w-3 h-3 rounded-full bg-white/20" />
                <div className="w-3 h-3 rounded-full bg-white/20" />
                <div className="w-3 h-3 rounded-full bg-white/20" />
              </div>
            </div>
 
            {/* Dashboard UI */}
            <div className="p-8 grid grid-cols-12 gap-8 min-h-[600px]">
              <div className="col-span-3 space-y-4">
                {[...Array(5)].map((_, i) => (
                  <div key={i} className="h-10 w-full rounded-lg bg-white/5" />
                ))}
              </div>
              <div className="col-span-9 space-y-6">
                <div className="h-64 w-full rounded-xl bg-gradient-to-br from-white/5 to-transparent border border-white/5 relative overflow-hidden">
                  <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#5BA97C]/10 to-transparent" />
                  <div className="absolute bottom-0 left-0 right-0 flex items-end justify-between px-8 pb-0 h-40 gap-4">
                    {[40, 60, 45, 70, 50, 80, 60, 90].map((h, i) => (
                      <div
                        key={i}
                        className="w-full bg-white/10 rounded-t-sm"
                        style={{ height: `${h}%` }}
                      />
                    ))}
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-6">
                  <div className="h-32 rounded-xl bg-white/5" />
                  <div className="h-32 rounded-xl bg-white/5" />
                </div>
              </div>
            </div>
          </motion.div>
 
          {/* Floating Card 1: Revenue (Top Right) */}
          <motion.div
            style={{ y: yCard1 }}
            className="absolute -right-12 -top-12 z-20 p-6 rounded-2xl bg-[#1A1D1C] border border-white/10 shadow-2xl w-64 backdrop-blur-xl"
          >
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 rounded-full bg-[#5BA97C]/20 flex items-center justify-center text-[#5BA97C]">
                <TrendingUp className="w-5 h-5" />
              </div>
              <div>
                <div className="text-sm text-white/60">Revenue</div>
                <div className="text-xl font-bold text-white">+124%</div>
              </div>
            </div>
            <div className="h-1 w-full bg-white/10 rounded-full overflow-hidden">
              <div className="h-full w-3/4 bg-[#5BA97C]" />
            </div>
          </motion.div>
 
          {/* Floating Card 2: Active Users (Left) */}
          <motion.div
            style={{ y: yCard2 }}
            className="absolute -left-12 top-32 z-30 p-6 rounded-2xl bg-[#1A1D1C] border border-white/10 shadow-2xl w-64 backdrop-blur-xl"
          >
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400">
                <Users className="w-5 h-5" />
              </div>
              <div>
                <div className="text-sm text-white/60">Active Users</div>
                <div className="text-xl font-bold text-white">8,542</div>
              </div>
            </div>
            <div className="flex -space-x-2">
              {[...Array(4)].map((_, i) => (
                <div
                  key={i}
                  className="w-8 h-8 rounded-full border-2 border-[#1A1D1C] bg-white/10"
                />
              ))}
            </div>
          </motion.div>
 
          {/* Floating Card 3: Security (Bottom Right) */}
          <motion.div
            style={{ y: yCard3 }}
            className="absolute right-12 bottom-32 z-20 p-4 rounded-2xl bg-[#1A1D1C] border border-white/10 shadow-2xl flex items-center gap-3 backdrop-blur-xl"
          >
            <div className="w-8 h-8 rounded-full bg-green-500/20 flex items-center justify-center text-green-400">
              <ShieldCheck className="w-4 h-4" />
            </div>
            <div className="text-sm font-medium text-white">System Secure</div>
            <CheckCircle2 className="w-4 h-4 text-[#5BA97C] ml-2" />
          </motion.div>
        </div>
      </div>
    </section>
  );
}

"use client";
 
import { motion } from "framer-motion";
import {
  Zap,
  Shield,
  BarChart3,
  Code2,
  Layers,
  Smartphone,
  Database,
  Workflow,
  Lock,
  Sparkles,
  Cpu,
  Globe,
} from "lucide-react";
import { cn } from "@/lib/utils";
 
const features = [
  {
    title: "AI-Powered Analytics",
    description:
      "Predictive insights that help you make better decisions before problems arise.",
    icon: BarChart3,
    colSpan: 2,
    bg: "bg-gradient-to-br from-[#5BA97C]/20 to-transparent",
  },
  {
    title: "Global Edge Network",
    description: "Deploy your application to 35+ regions in seconds.",
    icon: Globe,
    colSpan: 1,
    bg: "bg-white/[0.02]",
  },
  {
    title: "Neural Security",
    description:
      "Automated threat detection powered by machine learning models.",
    icon: Shield,
    colSpan: 1,
    bg: "bg-white/[0.02]",
  },
  {
    title: "Smart Automation",
    description:
      "Build complex workflows with our visual drag-and-drop editor.",
    icon: Workflow,
    colSpan: 2,
    bg: "bg-gradient-to-bl from-[#5BA97C]/10 to-transparent",
  },
  {
    title: "Database Scaling",
    description: "Serverless database that scales to zero when not in use.",
    icon: Database,
    colSpan: 1,
    bg: "bg-white/[0.02]",
  },
  {
    title: "Real-time Sync",
    description:
      "Synchronize state across clients with sub-millisecond latency.",
    icon: Zap,
    colSpan: 1,
    bg: "bg-white/[0.02]",
  },
  {
    title: "API Generation",
    description: "Auto-generate type-safe SDKs from your database schema.",
    icon: Code2,
    colSpan: 1,
    bg: "bg-white/[0.02]",
  },
];
 
export function Features() {
  return (
    <section className="relative py-32 bg-[#151817] overflow-hidden">
      {/* Background Noise */}
      <div className="absolute inset-0 opacity-[0.03] bg-[url('https://grainy-gradients.vercel.app/noise.svg')]" />
 
      <div className="container mx-auto px-4 relative z-10">
        <div className="max-w-3xl mx-auto text-center mb-20">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[#5BA97C] text-sm font-medium mb-6"
          >
            <Cpu className="w-4 h-4" />
            <span>Intelligent Core</span>
          </motion.div>
 
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="text-4xl md:text-6xl font-bold text-white mb-6"
          >
            Features that <span className="text-[#5BA97C]">think ahead</span>
          </motion.h2>
 
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2 }}
            className="text-xl text-white/60"
          >
            Built with an AI-first architecture to automate the boring stuff.
          </motion.p>
        </div>
 
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-7xl mx-auto">
          {features.map((feature, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1 }}
              whileHover={{ scale: 1.02 }}
              className={cn(
                "group relative p-8 rounded-3xl border border-white/10 overflow-hidden backdrop-blur-sm hover:border-[#5BA97C]/50 transition-colors duration-500",
                feature.colSpan === 2 ? "md:col-span-2" : "md:col-span-1",
                feature.bg,
              )}
            >
              {/* Hover Glow */}
              <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-[radial-gradient(800px_circle_at_var(--mouse-x)_var(--mouse-y),rgba(91,169,124,0.15),transparent_40%)]" />
 
              <div className="relative z-10 h-full flex flex-col justify-between">
                <div>
                  <div className="w-12 h-12 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center mb-6 group-hover:bg-[#5BA97C] group-hover:text-[#151817] transition-colors duration-300">
                    <feature.icon className="w-6 h-6 text-white group-hover:text-[#151817]" />
                  </div>
                  <h3 className="text-2xl font-semibold text-white mb-3">
                    {feature.title}
                  </h3>
                  <p className="text-white/60 leading-relaxed">
                    {feature.description}
                  </p>
                </div>
 
                {feature.colSpan === 2 && (
                  <div className="mt-8 h-32 w-full rounded-xl bg-black/20 border border-white/5 overflow-hidden relative">
                    <div className="absolute inset-0 bg-gradient-to-r from-transparent via-[#5BA97C]/10 to-transparent w-[200%] animate-shimmer" />
                    {/* Abstract visualization */}
                    <div className="absolute bottom-0 left-0 right-0 h-full flex items-end justify-around px-4 pb-4 gap-2">
                      {[40, 70, 50, 90, 60, 80, 50].map((h, j) => (
                        <div
                          key={j}
                          className="w-full bg-[#5BA97C]/20 rounded-t-sm"
                          style={{ height: `${h}%` }}
                        />
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

"use client";
 
import { motion } from "framer-motion";
import { Star, Quote } from "lucide-react";
import { cn } from "@/lib/utils";
 
const testimonials = [
  {
    quote:
      "The AI capabilities are mind-blowing. It predicted our server load spikes with 99% accuracy.",
    author: "Sarah Chen",
    role: "CTO at TechFlow",
    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
  },
  {
    quote:
      "Finally, a platform that understands modern development workflows. The automation is a game-changer.",
    author: "Mark Davis",
    role: "Lead Engineer",
    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
  },
  {
    quote:
      "We reduced our infrastructure costs by 40% just by switching to their intelligent scaling.",
    author: "Jessica Lee",
    role: "DevOps Lead",
    avatar: "https://i.pravatar.cc/150?u=a04258114e29026302d",
  },
];
 
export function Testimonials() {
  return (
    <section className="relative py-32 bg-[#151817] overflow-hidden">
      <div className="container mx-auto px-4 relative z-10">
        <div className="max-w-3xl mx-auto text-center mb-20">
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-4xl md:text-6xl font-bold text-white mb-6"
          >
            Trusted by <span className="text-[#5BA97C]">visionaries</span>
          </motion.h2>
        </div>
 
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-7xl mx-auto">
          {testimonials.map((testimonial, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1 }}
              className="relative p-8 rounded-3xl border border-white/5 bg-white/[0.02] backdrop-blur-sm hover:bg-white/[0.04] transition-colors group"
            >
              <Quote className="w-10 h-10 text-[#5BA97C]/20 mb-6 group-hover:text-[#5BA97C] transition-colors" />
 
              <div className="flex gap-1 mb-6">
                {[...Array(5)].map((_, i) => (
                  <Star
                    key={i}
                    className="w-4 h-4 fill-yellow-400 text-yellow-400"
                  />
                ))}
              </div>
 
              <p className="text-white/80 mb-8 leading-relaxed text-lg">
                "{testimonial.quote}"
              </p>
 
              <div className="flex items-center gap-4">
                <img
                  src={testimonial.avatar}
                  alt={testimonial.author}
                  className="w-12 h-12 rounded-full border-2 border-[#5BA97C]/20"
                />
                <div>
                  <div className="font-semibold text-white">
                    {testimonial.author}
                  </div>
                  <div className="text-sm text-white/40">
                    {testimonial.role}
                  </div>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

"use client";
 
import { useState } from "react";
import { motion } from "framer-motion";
import { Check, Sparkles, Zap } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
 
const plans = [
  {
    name: "Starter",
    price: { monthly: 0, yearly: 0 },
    description: "Perfect for side projects",
    features: [
      "Up to 3 projects",
      "Basic analytics",
      "Community support",
      "1GB storage",
      "API access",
    ],
  },
  {
    name: "Pro",
    price: { monthly: 29, yearly: 290 },
    description: "For growing businesses",
    popular: true,
    features: [
      "Unlimited projects",
      "Advanced analytics",
      "Priority support",
      "10GB storage",
      "Custom domains",
      "Team collaboration",
      "Advanced security",
    ],
  },
  {
    name: "Enterprise",
    price: { monthly: 99, yearly: 990 },
    description: "For large organizations",
    features: [
      "Everything in Pro",
      "Dedicated support",
      "Unlimited storage",
      "SSO & SAML",
      "SLA guarantee",
      "Audit logs",
      "Custom contracts",
    ],
  },
];
 
export function Pricing() {
  const [isYearly, setIsYearly] = useState(false);
 
  return (
    <section className="relative py-32 bg-[#151817] overflow-hidden">
      {/* Background Glows */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[1000px] h-[1000px] bg-[#5BA97C]/5 rounded-full blur-[120px] pointer-events-none" />
 
      <div className="container mx-auto px-4 relative z-10">
        <div className="max-w-3xl mx-auto text-center mb-20">
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-4xl md:text-6xl font-bold text-white mb-6"
          >
            Simple, transparent <span className="text-[#5BA97C]">pricing</span>
          </motion.h2>
 
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="flex items-center justify-center gap-4"
          >
            <span
              className={cn(
                "text-sm font-medium transition-colors",
                !isYearly ? "text-white" : "text-white/50",
              )}
            >
              Monthly
            </span>
            <button
              onClick={() => setIsYearly(!isYearly)}
              className="relative w-16 h-8 rounded-full bg-white/10 border border-white/10 p-1 transition-colors hover:border-[#5BA97C]/50"
            >
              <motion.div
                animate={{ x: isYearly ? 32 : 0 }}
                transition={{ type: "spring", stiffness: 500, damping: 30 }}
                className="w-6 h-6 rounded-full bg-[#5BA97C] shadow-lg"
              />
            </button>
            <span
              className={cn(
                "text-sm font-medium transition-colors",
                isYearly ? "text-white" : "text-white/50",
              )}
            >
              Yearly{" "}
              <span className="text-[#5BA97C] text-xs ml-1 font-bold">
                -20%
              </span>
            </span>
          </motion.div>
        </div>
 
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-7xl mx-auto">
          {plans.map((plan, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 1, y: 10 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-50px" }}
              transition={{ duration: 0.5, delay: i * 0.1, ease: "easeOut" }}
              className={cn(
                "relative p-8 rounded-3xl border backdrop-blur-xl flex flex-col transition-all duration-300",
                plan.popular
                  ? "bg-white/[0.03] border-[#5BA97C]/30 shadow-[0_0_40px_-10px_rgba(91,169,124,0.15)]"
                  : "bg-white/[0.01] border-white/10 hover:border-white/20 hover:bg-white/[0.02]",
              )}
            >
              {plan.popular && (
                <motion.div
                  animate={{ opacity: [0.5, 1, 0.5] }}
                  transition={{
                    duration: 4,
                    repeat: Infinity,
                    ease: "easeInOut",
                  }}
                  className="absolute inset-0 rounded-3xl bg-gradient-to-b from-[#5BA97C]/5 to-transparent pointer-events-none"
                />
              )}
              {plan.popular && (
                <div className="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full bg-white text-black text-xs font-bold uppercase tracking-wider shadow-lg">
                  Most Popular
                </div>
              )}
 
              <div className="mb-8">
                <h3 className="text-xl font-bold text-white mb-2">
                  {plan.name}
                </h3>
                <p className="text-white/50 text-sm h-10">{plan.description}</p>
              </div>
 
              <div className="mb-8 flex items-baseline gap-1">
                <span className="text-5xl font-bold text-white">
                  ${isYearly ? plan.price.yearly : plan.price.monthly}
                </span>
                <span className="text-white/50">
                  /{isYearly ? "year" : "month"}
                </span>
              </div>
 
              <Button
                className={cn(
                  "w-full h-12 rounded-xl font-semibold mb-8 transition-all duration-300",
                  plan.popular
                    ? "bg-white text-black hover:bg-white/90 hover:scale-105 shadow-lg"
                    : "bg-white/10 text-white hover:bg-white/20",
                )}
              >
                Get Started
              </Button>
 
              <ul className="space-y-4 flex-1">
                {plan.features.map((feature, j) => (
                  <li
                    key={j}
                    className="flex items-start gap-3 text-sm text-white/70"
                  >
                    <div
                      className={cn(
                        "w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0",
                        plan.popular
                          ? "bg-[#5BA97C]/20 text-[#5BA97C]"
                          : "bg-white/10 text-white/50",
                      )}
                    >
                      <Check className="w-3 h-3" />
                    </div>
                    {feature}
                  </li>
                ))}
              </ul>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

"use client";
 
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Plus, Minus } from "lucide-react";
import { cn } from "@/lib/utils";
 
const faqs = [
  {
    question: "How does the AI prediction work?",
    answer:
      "Our models analyze your historical traffic patterns and infrastructure usage to predict future load with high accuracy, allowing for proactive scaling.",
  },
  {
    question: "Is my data secure?",
    answer:
      "Absolutely. We use military-grade encryption at rest and in transit. Our AI models are trained on anonymized data and never access your customer PII.",
  },
  {
    question: "Can I deploy to my own cloud?",
    answer:
      "Yes, Enterprise plans support BYOC (Bring Your Own Cloud) deployments to AWS, GCP, or Azure VPCs.",
  },
  {
    question: "What happens if I exceed my limits?",
    answer:
      "We don't hard cap your usage. You'll be notified when you're approaching limits, and we offer a grace period before auto-scaling to the next tier.",
  },
];
 
export function FAQ() {
  const [openIndex, setOpenIndex] = useState<number | null>(0);
 
  return (
    <section className="relative py-32 bg-[#151817] border-t border-white/5">
      <div className="container mx-auto px-4">
        <div className="max-w-3xl mx-auto text-center mb-20">
          <h2 className="text-4xl md:text-6xl font-bold text-white mb-6">
            Common <span className="text-[#5BA97C]">questions</span>
          </h2>
        </div>
 
        <div className="max-w-3xl mx-auto space-y-4">
          {faqs.map((faq, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 1, y: 10 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-50px" }}
              className={cn(
                "rounded-2xl border transition-all duration-300 overflow-hidden",
                openIndex === i
                  ? "bg-white/[0.05] border-[#5BA97C]/30"
                  : "bg-transparent border-white/5 hover:border-white/10",
              )}
            >
              <button
                onClick={() => setOpenIndex(openIndex === i ? null : i)}
                className="flex items-center justify-between w-full p-6 text-left"
              >
                <span
                  className={cn(
                    "text-lg font-medium transition-colors",
                    openIndex === i ? "text-[#5BA97C]" : "text-white",
                  )}
                >
                  {faq.question}
                </span>
                <div
                  className={cn(
                    "w-8 h-8 rounded-full flex items-center justify-center transition-colors",
                    openIndex === i
                      ? "bg-white text-black"
                      : "bg-white/5 text-white",
                  )}
                >
                  {openIndex === i ? (
                    <Minus className="w-4 h-4" />
                  ) : (
                    <Plus className="w-4 h-4" />
                  )}
                </div>
              </button>
              <AnimatePresence>
                {openIndex === i && (
                  <motion.div
                    initial={{ height: 0, opacity: 0 }}
                    animate={{ height: "auto", opacity: 1 }}
                    exit={{ height: 0, opacity: 0 }}
                    transition={{ duration: 0.3, ease: "circOut" }}
                  >
                    <div className="px-6 pb-6 text-white/60 leading-relaxed">
                      {faq.answer}
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

"use client";
 
import { Twitter, Github, Linkedin, ArrowUpRight } from "lucide-react";
 
export function Footer() {
  return (
    <footer className="relative bg-[#151817] pt-24 pb-12 border-t border-white/5 overflow-hidden">
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(91,169,124,0.05),transparent_50%)]" />
 
      {/* Giant Brand Text */}
      <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-full text-center pointer-events-none select-none overflow-hidden">
        <h1 className="text-[15vw] font-bold text-white/[0.02] leading-none tracking-tighter">
          SaaS.ai
        </h1>
      </div>
 
      <div className="max-w-7xl mx-auto px-4 relative z-10">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-12 mb-20">
          <div className="col-span-2 md:col-span-1">
            <a href="#" className="flex items-center gap-2 mb-6 group">
              <div className="w-8 h-8 rounded-lg bg-[#5BA97C] flex items-center justify-center text-[#151817] font-bold">
                S
              </div>
              <span className="text-xl font-bold text-white">SaaS.ai</span>
            </a>
            <p className="text-white/50 text-sm leading-relaxed mb-6">
              Building the next generation of intelligent software interfaces.
            </p>
            <div className="flex gap-4">
              {[Twitter, Github, Linkedin].map((Icon, i) => (
                <a
                  key={i}
                  href="#"
                  className="w-10 h-10 rounded-full bg-white/5 border border-white/5 flex items-center justify-center text-white/50 hover:text-[#5BA97C] hover:bg-white/10 transition-all duration-300"
                >
                  <Icon className="w-4 h-4" />
                </a>
              ))}
            </div>
          </div>
 
          {[
            {
              title: "Product",
              items: ["Features", "Integrations", "Pricing", "Changelog"],
            },
            {
              title: "Resources",
              items: [
                "Documentation",
                "API Reference",
                "Community",
                "Help Center",
              ],
            },
            {
              title: "Company",
              items: ["About", "Blog", "Careers", "Contact"],
            },
          ].map((section, i) => (
            <div key={i}>
              <h3 className="font-semibold text-white mb-6">{section.title}</h3>
              <ul className="space-y-4">
                {section.items.map((item) => (
                  <li key={item}>
                    <a
                      href="#"
                      className="group flex items-center gap-2 text-sm text-white/50 hover:text-[#5BA97C] transition-colors"
                    >
                      {item}
                      <ArrowUpRight className="w-3 h-3 opacity-0 -translate-y-1 translate-x-1 group-hover:opacity-100 group-hover:translate-y-0 group-hover:translate-x-0 transition-all" />
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
 
        <div className="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-4">
          <p className="text-sm text-white/30">
            © {new Date().getFullYear()} SaaS.ai Inc. All rights reserved.
          </p>
          <div className="flex gap-8 text-sm">
            <a
              href="#"
              className="text-white/30 hover:text-white transition-colors"
            >
              Privacy Policy
            </a>
            <a
              href="#"
              className="text-white/30 hover:text-white transition-colors"
            >
              Terms of Service
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}