@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import 'tailwindcss';
:root {
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --border: 214 32% 91%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --primary: 239 84% 60%;
  --primary-foreground: 0 0% 100%;
  --secondary: 264 89% 57%;
  --secondary-foreground: 0 0% 100%;
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;
  --accent: 189 94% 43%;
  --radius: 1rem;
  --app-font-sans: 'Inter', sans-serif;
}
body { font-family: var(--app-font-sans); overflow-x: hidden; }
.gradient-text {
  background: linear-gradient(to right, #4F46E5, #7C3AED, #06B6D4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } }
.animate-marquee { animation: marquee 30s linear infinite; }
@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 10s infinite; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }
.glass-panel {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 8px 30px rgba(0,0,0,0.04);
}
@keyframes dash-flow { to { stroke-dashoffset: -20; } }
.animate-dash-flow { animation: dash-flow 1s linear infinite; }

src/pages/LandingPage.tsx
import Navbar from "@/components/sections/Navbar"
import Hero from "@/components/sections/Hero"
import TrustedBy from "@/components/sections/TrustedBy"
import Features from "@/components/sections/Features"
import AIWorkflow from "@/components/sections/AIWorkflow"
import DashboardPreview from "@/components/sections/DashboardPreview"
import Benefits from "@/components/sections/Benefits"
import Integrations from "@/components/sections/Integrations"
import Testimonials from "@/components/sections/Testimonials"
import Pricing from "@/components/sections/Pricing"
import FAQ from "@/components/sections/FAQ"
import FinalCTA from "@/components/sections/FinalCTA"
import Footer from "@/components/sections/Footer"
export default function LandingPage() {
  return (
    
      
      
        
        
        
        
        
        
        
        
        
        
        
      
      
    
  )
}

Dependencies (install karo pehle)
npm install framer-motion lucide-react react-icons @radix-ui/react-accordion
# ya
pnpm add framer-motion lucide-react react-icons @radix-ui/react-accordion

Baaki section files (Navbar, Hero, TrustedBy, Features, AIWorkflow, DashboardPreview, Benefits, Integrations, Testimonials, Pricing, FAQ, FinalCTA, Footer) — kya main ek-ek karke saare ka code bhi yahan paste kar doon? Ya preview mein dekh ke theek lagti hai toh aur modifications chahiye?


3 actions
Page live ho gayi — screenshot leta hoon:


2 actions
Page bilkul sahi chal rahi hai! Ab baaki saare section files ka code de raha hoon jo aapko copy karne hain:

src/components/sections/Navbar.tsx
import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Menu, X, ArrowRight } from 'lucide-react';
export default function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
  const navLinks = [
    { name: 'Features', href: '#features' },
    { name: 'Pricing', href: '#pricing' },
    { name: 'Resources', href: '#resources' },
    { name: 'Testimonials', href: '#testimonials' },
    { name: 'Contact', href: '#contact' },
  ];
  return (
    
      
        
          
            F
          
          
            FlowAI
          
        
        
          {navLinks.map((link) => (
            
              {link.name}
            
          ))}
        
        
          
            Log in
          
          
            Get Started
            
          
        
         setMobileMenuOpen(!mobileMenuOpen)}>
          {mobileMenuOpen ?  : }
        
      
      
        {mobileMenuOpen && (
          
            {navLinks.map((link) => (
               setMobileMenuOpen(false)}>
                {link.name}
              
            ))}
            
              Log in
              Get Started
            
          
        )}
      
    
  );
}

src/components/sections/Hero.tsx
import React, { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { Play, Star, ShieldCheck, Users, Activity, MessageSquare } from 'lucide-react';
function AnimatedCounter({ target, duration = 2 }: { target: number; duration?: number }) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    let startTime: number;
    let af: number;
    const step = (ts: number) => {
      if (!startTime) startTime = ts;
      const progress = Math.min((ts - startTime) / (duration * 1000), 1);
      setCount(Math.floor(progress * target));
      if (progress < 1) af = requestAnimationFrame(step);
    };
    af = requestAnimationFrame(step);
    return () => cancelAnimationFrame(af);
  }, [target, duration]);
  return {count.toLocaleString()};
}
export default function Hero() {
  return (
    
      
      
      
      
        
          
            
            Now with GPT-4o Integration
          
          
            Powerful AI Automation for{' '}
            Modern Businesses
          
          
            Connect your tools, build intelligent workflows, and put your operations on autopilot.
            FlowAI turns days of manual work into seconds of automated precision.
          
          
            
              Start Building Free
            
            
               Watch Demo
            
          
          
             SOC2 Certified
             GDPR Compliant
            
              {[...Array(5)].map((_, i) => )}
              4.9/5 Rating
            
            
              
              + Users
            
          
        
        {/* Dashboard Mockup */}
        
          
            
              
              
              
            
            
              
                
                
                  {[...Array(5)].map((_, i) => )}
                
              
              
                
                  
                  
                
                
                  {[...Array(4)].map((_, i) => (
                    
                      
                      
                    
                  ))}
                
                
                  
                  
                    {[40,70,45,90,65,85,100,55,75,40].map((h, i) => (
                      
                    ))}
                  
                
              
            
          
          
            
            Workflow ActiveSyncing 1.2k records
          
          
            
            AI InsightAnomaly detected
          
        
      
    
  );
}

src/components/sections/TrustedBy.tsx
import React from 'react';
const COMPANIES = ["Notion","Linear","Vercel","Stripe","Figma","Loom","Intercom","Retool","Airtable","Webflow","Zapier","HubSpot"];
export default function TrustedBy() {
  return (
    
      
        
          Trusted by innovative teams at
        
      
      
        
        
        
          
            {COMPANIES.map((c, i) => (
              {c}
            ))}
          
          
            {COMPANIES.map((c, i) => (
              {c}
            ))}
          
        
      
    
  );
}

src/components/sections/Features.tsx
import React from 'react';
import { motion } from 'framer-motion';
import { Workflow, BarChart3, MessageSquare, Users, Shield, Zap } from 'lucide-react';
const features = [
  { icon: , title: "Smart Workflow Builder", description: "Drag-and-drop intuitive interface to create complex multi-step automations without writing a single line of code." },
  { icon: , title: "Real-Time Analytics", description: "Monitor your processes with live dashboards. Spot bottlenecks and optimize performance instantly." },
  { icon: , title: "AI Chat Assistant", description: "Describe what you want to automate in plain text, and our GPT-4o powered AI builds the workflow for you." },
  { icon: , title: "Team Collaboration", description: "Share workflows, manage permissions, and collaborate in real-time with your entire organization." },
  { icon: , title: "Security & Compliance", description: "Enterprise-grade security. SOC2 Type II certified, end-to-end encryption, and comprehensive audit logs." },
  { icon: , title: "API Integrations", description: "Connect to over 500+ business tools seamlessly. If it has an API, FlowAI can automate it." },
];
export default function Features() {
  return (
    
      
        
          Everything you need
          Built for scale, designed for speed
          Replace scattered tools and manual processes with one intelligent platform.
        
        
          {features.map((feature, idx) => (
            
              
                {feature.icon}
              
              {feature.title}
              {feature.description}
            
          ))}
        
      
    
  );
}

src/components/sections/AIWorkflow.tsx
import React from 'react';
import { motion } from 'framer-motion';
import { Play, Filter, Cpu, Zap, Bell } from 'lucide-react';
export default function AIWorkflow() {
  const nodes = [
    { icon: , label: "Trigger: New Lead", delay: 0 },
    { icon: , label: "Filter: High Intent", delay: 0.2 },
    { icon: , label: "AI Process: Draft Reply", delay: 0.4 },
    { icon: , label: "Action: Send Email", delay: 0.6 },
    { icon: , label: "Notify: Slack", delay: 0.8 },
  ];
  return (
    
      
      
      
      
        
          Watch your workflows come alive
          See exactly what's happening at every step.
        
        
          
            {nodes.map((node, index) => (
              
                
                  
                    {node.icon}
                  
                  {node.label}
                
                {index < nodes.length - 1 && (
                  
                    
                      
                      
                    
                  
                )}
                {index < nodes.length - 1 && (
                  
                )}
              
            ))}
          
        
      
    
  );
}

src/components/sections/DashboardPreview.tsx
import React from 'react';
import { motion } from 'framer-motion';
export default function DashboardPreview() {
  return (
    
      
        
          
            
              
                
                
                
              
              
                app.flowai.com/dashboard
              
            
            
              
                
                  F
                  FlowAI Workspaces
                
                
                  {['Overview','Workflows','Analytics','Integrations','Settings'].map((item, i) => (
                    {item}
                  ))}
                
              
              
                
                  Overview
                  New Workflow
                
                
                  {[
                    { label: 'Active Workflows', value: '24', trend: '+12%' },
                    { label: 'Tasks Automated', value: '14.2k', trend: '+24%' },
                    { label: 'Hours Saved', value: '342', trend: '+8%' },
                    { label: 'Success Rate', value: '99.8%', trend: '+0.1%' }
                  ].map((stat, i) => (
                    
                      {stat.label}
                      
                        {stat.value}
                        {stat.trend}
                      
                    
                  ))}
                
                
                  
                    Automation Volume
                    
                      {[30,40,25,50,45,70,60,85,95,80,100,90].map((h, i) => (
                        
                          
                        
                      ))}
                    
                  
                  
                    Recent Activity
                    
                      {[1,2,3,4].map(i => (
                        
                          
                          
                            
                            
                          
                        
                      ))}
                    
                  
                
              
            
          
        
      
    
  );
}

src/components/sections/Benefits.tsx
import React from 'react';
import { motion } from 'framer-motion';
import { CheckCircle2 } from 'lucide-react';
export default function Benefits() {
  const benefits = [
    "Save 10+ hours per week per employee",
    "No-code visual builder accessible to anyone",
    "SOC2 Type II certified & GDPR compliant",
    "99.99% guaranteed uptime SLA",
    "24/7 dedicated enterprise support"
  ];
  return (
    
      
        
          
            
              
              
                
                  {[
                    { color: "bg-indigo-50", dot: "bg-indigo-200", bar: "bg-indigo-300", y: [0,-10,0], w: "w-1/2" },
                    { color: "bg-violet-50", dot: "bg-violet-200", bar: "bg-violet-300", y: [0,10,0], w: "w-3/4", mt: "mt-8" },
                    { color: "bg-cyan-50", dot: "bg-cyan-200", bar: "bg-cyan-300", y: [0,10,0], w: "w-full", mt: "-mt-8" },
                    { color: "bg-emerald-50", dot: "bg-emerald-200", bar: "bg-emerald-300", y: [0,-10,0], w: "w-2/3" },
                  ].map((item, i) => (
                    
                      
                      
                    
                  ))}
                
              
            
          
          
            
              Why modern teams choose FlowAI
              
                We believe software should work for you, not the other way around. FlowAI automates the busywork so your team can focus on the creative, high-impact tasks that drive growth.
              
            
            
              {benefits.map((benefit, idx) => (
                
                  
                  {benefit}
                
              ))}
            
            
              Start Your Free Trial
            
          
        
      
    
  );
}

src/components/sections/Integrations.tsx
import React from 'react';
import { motion } from 'framer-motion';
import { SiWhatsapp, SiGoogle, SiZapier, SiStripe, SiHubspot, SiMeta, SiNotion, SiJira, SiGithub, SiMailchimp, SiShopify, SiIntercom, SiZoom, SiFigma, SiLinear, SiAirtable, SiWebflow, SiSnowflake, SiDatabricks } from 'react-icons/si';
const integrations = [
  { name: "Slack", label: "Slack", color: "#4A154B" },
  { name: "WhatsApp", icon: SiWhatsapp, color: "#25D366" },
  { name: "Google", icon: SiGoogle, color: "#4285F4" },
  { name: "Zapier", icon: SiZapier, color: "#FF4A00" },
  { name: "OpenAI", label: "AI", color: "#412991" },
  { name: "Stripe", icon: SiStripe, color: "#008CDD" },
  { name: "HubSpot", icon: SiHubspot, color: "#FF7A59" },
  { name: "Meta", icon: SiMeta, color: "#0668E1" },
  { name: "Salesforce", label: "SF", color: "#00A1E0" },
  { name: "Notion", icon: SiNotion, color: "#000000" },
  { name: "Jira", icon: SiJira, color: "#0052CC" },
  { name: "GitHub", icon: SiGithub, color: "#181717" },
  { name: "Twilio", label: "TW", color: "#F22F46" },
  { name: "Mailchimp", icon: SiMailchimp, color: "#FFE01B" },
  { name: "Shopify", icon: SiShopify, color: "#95BF47" },
  { name: "Intercom", icon: SiIntercom, color: "#286090" },
  { name: "Zoom", icon: SiZoom, color: "#2D8CFF" },
  { name: "Figma", icon: SiFigma, color: "#F24E1E" },
  { name: "Linear", icon: SiLinear, color: "#5E6AD2" },
  { name: "Airtable", icon: SiAirtable, color: "#18BFFF" },
  { name: "Webflow", icon: SiWebflow, color: "#4353FF" },
  { name: "AWS", label: "AWS", color: "#232F3E" },
  { name: "Snowflake", icon: SiSnowflake, color: "#29B5E8" },
  { name: "Databricks", icon: SiDatabricks, color: "#FF3621" },
] as const;
export default function Integrations() {
  return (
    
      
        
          Connects with your entire stack
          FlowAI plays nice with over 500+ apps.
        
        
          {integrations.map((item, idx) => {
            const Icon = 'icon' in item ? item.icon : null;
            const label = 'label' in item ? item.label : null;
            return (
              
                
                  {Icon ? (
                    
                  ) : (
                    {label}
                  )}
                
                {item.name}
              
            );
          })}
        
      
    
  );
}

src/components/sections/Testimonials.tsx
import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Star, ChevronLeft, ChevronRight } from 'lucide-react';
const testimonials = [
  { name: "Sarah Jenkins", title: "VP of Operations", company: "Acme Corp", quote: "FlowAI completely transformed how our teams communicate. We've automated over 10,000 tasks in our first month alone.", initials: "SJ", color: "from-blue-400 to-indigo-500" },
  { name: "Marcus Chen", title: "CTO", company: "TechFlow", quote: "The visual builder is incredible. It's powerful enough for our engineers, yet intuitive enough that marketing can build their own workflows.", initials: "MC", color: "from-emerald-400 to-teal-500" },
  { name: "Elena Rodriguez", title: "Founder", company: "Lumina", quote: "We scaled from 10 to 50 employees without adding a single admin role, purely because FlowAI handles all our onboarding automatically.", initials: "ER", color: "from-purple-400 to-pink-500" },
  { name: "David Smith", title: "Growth Lead", company: "Nexus", quote: "The AI assistant is magical. I typed 'send a Slack message when a high-value Stripe customer churns' and it built the entire workflow.", initials: "DS", color: "from-amber-400 to-orange-500" },
  { name: "Aisha Patel", title: "Director of IT", company: "GlobalNet", quote: "Security was our main concern, but FlowAI's SOC2 compliance, granular RBAC, and audit logs made it an easy sell to our infosec team.", initials: "AP", color: "from-cyan-400 to-blue-500" },
];
export default function Testimonials() {
  const [current, setCurrent] = useState(0);
  const next = () => setCurrent(p => (p + 1) % testimonials.length);
  const prev = () => setCurrent(p => (p - 1 + testimonials.length) % testimonials.length);
  return (
    
      
        
          Loved by operators
          Don't just take our word for it.
        
        
          
            
               { if (offset.x < -50) next(); else if (offset.x > 50) prev(); }}
                className="absolute inset-0 flex flex-col items-center text-center px-4 md:px-16 cursor-grab">
                {[...Array(5)].map((_, i) => )}
                "{testimonials[current].quote}"
                
                  
                    {testimonials[current].initials}
                  
                  
                    {testimonials[current].name}
                    {testimonials[current].title}, {testimonials[current].company}
                  
                
              
            
          
          
            
            
              {testimonials.map((_, idx) => (
                 setCurrent(idx)}
                  className={`h-2.5 rounded-full transition-all ${idx === current ? 'bg-[#4F46E5] w-8' : 'bg-gray-200 w-2.5 hover:bg-indigo-300'}`} />
              ))}
            
            
          
        
      
    
  );
}

src/components/sections/Pricing.tsx
import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { Check } from 'lucide-react';
export default function Pricing() {
  const [annual, setAnnual] = useState(true);
  const plans = [
    { name: "Starter", desc: "Perfect for individuals and small teams.", price: annual ? 29 : 39, features: ["1,000 tasks/month","Visual workflow builder","Core integrations","Community support","1 week data history"] },
    { name: "Professional", desc: "For growing companies that need power.", price: annual ? 79 : 99, popular: true, features: ["10,000 tasks/month","AI Chat Assistant","Premium integrations","Priority email support","3 months data history","Team collaboration"] },
    { name: "Enter **…**
_This response is too long to display in full.