Initial commit

src/app/about/page.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import Link from "next/link";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
+import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Sparkles, Award, Zap } from 'lucide-react';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="mediumLarge"
+      sizing="mediumLargeSizeMediumTitles"
+      background="floatingGradient"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="glass"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="AgentAI"
+          navItems={[
+            { name: "Features", href: "/#features" },
+            { name: "Pricing", href: "/pricing" },
+            { name: "About", href: "/about" },
+            { name: "Docs", href: "https://docs.example.com" }
+          ]}
+          button={{ text: "Start Free Trial", href: "/contact" }}
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <TestimonialAboutCard
+          tag="Enterprise Trust"
+          title="Transforming how enterprises automate complex business processes with AI agents that deliver measurable results"
+          description="Sarah Chen"
+          subdescription="VP Operations, Fortune 500 Tech Company"
+          icon={Sparkles}
+          imageSrc="http://img.b2bpic.net/free-photo/relaxed-coworkers-office-having-fun-chatting-while-reviewing-documents_482257-126482.jpg"
+          imageAlt="enterprise team business collaboration office"
+          useInvertedBackground="noInvert"
+        />
+      </div>
+
+      <div id="metrics" data-section="metrics">
+        <MetricCardTwo
+          title="Proven Impact at Scale"
+          description="Real results from enterprises transforming their operations with AgentAI"
+          tag="Results"
+          metrics={[
+            {
+              id: "1",
+              value: "78%",
+              description: "Average Process Automation Increase"
+            },
+            {
+              id: "2",
+              value: "2.3x",
+              description: "Return on Investment in Year One"
+            },
+            {
+              id: "3",
+              value: "1,200+",
+              description: "Active Enterprise Deployments"
+            },
+            {
+              id: "4",
+              value: "99.9%",
+              description: "Platform Uptime & Reliability"
+            }
+          ]}
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground="invertDefault"
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Get Started"
+          title="Ready to Transform Your Operations?"
+          description="Join hundreds of enterprises using AgentAI to automate complex workflows, reduce costs, and accelerate growth. Start your free trial today or schedule a demo with our team."
+          tagIcon={Zap}
+          inputPlaceholder="Enter your work email"
+          buttonText="Start Free Trial"
+          termsText="By signing up, you agree to our Terms of Service and Privacy Policy. No credit card required."
+          useInvertedBackground="noInvert"
+        />
+      </div>
+
+      <FooterBaseCard
+        logoText="AgentAI"
+        copyrightText="© 2025 AgentAI Inc. All rights reserved."
+        columns={[
+          {
+            title: "Product",
+            items: [
+              { label: "Features", href: "/#features" },
+              { label: "Pricing", href: "/pricing" },
+              { label: "Security", href: "#" },
+              { label: "Roadmap", href: "#" }
+            ]
+          },
+          {
+            title: "Company",
+            items: [
+              { label: "About", href: "/about" },
+              { label: "Blog", href: "#" },
+              { label: "Careers", href: "#" },
+              { label: "Contact", href: "/contact" }
+            ]
+          },
+          {
+            title: "Developers",
+            items: [
+              { label: "Documentation", href: "https://docs.example.com" },
+              { label: "API Reference", href: "#" },
+              { label: "GitHub", href: "#" },
+              { label: "Integration Hub", href: "#" }
+            ]
+          },
+          {
+            title: "Legal",
+            items: [
+              { label: "Privacy Policy", href: "#" },
+              { label: "Terms of Service", href: "#" },
+              { label: "Compliance", href: "#" },
+              { label: "Cookie Settings", href: "#" }
+            ]
+          }
+        ]}
+      />
+    </ThemeProvider>
+  );
+}

src/app/blog/page.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import ReactLenis from "lenis/react";
+import BlogCardOne from '@/components/sections/blog/BlogCardOne';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+
+type BlogPost = {
+    id: string;
+    category: string;
+    title: string;
+    excerpt: string;
+    imageSrc: string;
+    imageAlt?: string;
+    authorName: string;
+    authorAvatar: string;
+    date: string;
+    onBlogClick?: () => void;
+};
+
+const defaultPosts: BlogPost[] = [
+    {
+        id: "1",        category: "Design",        title: "UX review presentations",        excerpt: "How do you create compelling presentations that wow your colleagues and impress your managers?",        imageSrc: "/placeholders/placeholder3.avif",        imageAlt: "Abstract design with purple and silver tones",        authorName: "Olivia Rhye",        authorAvatar: "/placeholders/placeholder3.avif",        date: "20 Jan 2025",        onBlogClick: () => console.log("Blog 1 clicked"),
+    },
+    {
+        id: "2",        category: "Development",        title: "Building scalable applications",        excerpt: "Learn the best practices for building applications that can handle millions of users.",        imageSrc: "/placeholders/placeholder4.webp",        imageAlt: "Development workspace",        authorName: "John Smith",        authorAvatar: "/placeholders/placeholder4.webp",        date: "18 Jan 2025",        onBlogClick: () => console.log("Blog 2 clicked"),
+    },
+    {
+        id: "3",        category: "Marketing",        title: "Content strategy essentials",        excerpt: "Discover how to create a content strategy that drives engagement and conversions.",        imageSrc: "/placeholders/placeholder3.avif",        imageAlt: "Marketing strategy board",        authorName: "Sarah Johnson",        authorAvatar: "/placeholders/placeholder3.avif",        date: "15 Jan 2025",        onBlogClick: () => console.log("Blog 3 clicked"),
+    },
+    {
+        id: "4",        category: "Product",        title: "Product management 101",        excerpt: "Everything you need to know to become an effective product manager in 2025.",        imageSrc: "/placeholders/placeholder4.webp",        imageAlt: "Product planning session",        authorName: "Mike Davis",        authorAvatar: "/placeholders/placeholder4.webp",        date: "12 Jan 2025",        onBlogClick: () => console.log("Blog 4 clicked"),
+    },
+];
+
+export default function BlogPage() {
+    const [posts, setPosts] = useState<BlogPost[]>(defaultPosts);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchPosts = async () => {
+            try {
+                const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+                const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
+
+                if (!apiUrl || !projectId) {
+                    console.warn("NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured, using default posts");
+                    setIsLoading(false);
+                    return;
+                }
+
+                const url = `${apiUrl}/posts/${projectId}?status=published`;
+                const response = await fetch(url, {
+                    method: "GET",                    headers: {
+                        "Content-Type": "application/json"},
+                });
+
+                if (response.ok) {
+                    const resp = await response.json();
+                    const data = resp.data;
+                    if (Array.isArray(data) && data.length > 0) {
+                        const mappedPosts = data.map((post: any) => ({
+                            id: post.id || String(Math.random()),
+                            category: post.category || "General",                            title: post.title || "Untitled",                            excerpt: post.excerpt || post.content.slice(0, 30) || "",                            imageSrc: post.imageUrl || "/placeholders/placeholder3.avif",                            imageAlt: post.imageAlt || post.title || "",                            authorName: post.author?.name || "Anonymous",                            authorAvatar: post.author?.avatar || "/placeholders/placeholder3.avif",                            date: post.date || post.createdAt || new Date().toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" }),
+                            onBlogClick: () => console.log(`Blog ${post.id} clicked`),
+                        }));
+                        setPosts(mappedPosts);
+                    }
+                } else {
+                    console.warn(`API request failed with status ${response.status}, using default posts`);
+                }
+            } catch (error) {
+                console.error("Error fetching posts:", error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchPosts();
+    }, []);
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="shift-hover"
+            defaultTextAnimation="background-highlight"
+            borderRadius="pill"
+            contentWidth="mediumLarge"
+            sizing="mediumLargeSizeMediumTitles"
+            background="floatingGradient"
+            cardStyle="gradient-bordered"
+            primaryButtonStyle="double-inset"
+            secondaryButtonStyle="glass"
+            headingFontWeight="light"
+        >
+            <ReactLenis root>
+                <div className="min-h-screen bg-background">
+                    <NavbarLayoutFloatingInline
+                        brandName="AgentAI"
+                        navItems={[
+                            { name: "Home", id: "/" },
+                            { name: "Features", id: "features" },
+                            { name: "Pricing", id: "pricing" },
+                            { name: "About", id: "about" },
+                            { name: "Docs", id: "https://docs.example.com" }
+                        ]}
+                        button={{ text: "Start Free Trial", href: "#contact" }}
+                    />
+
+                    {isLoading ? (
+                        <div className="w-content-width mx-auto py-20 text-center">
+                            <p className="text-foreground">Loading posts...</p>
+                        </div>
+                    ) : (
+                        <BlogCardOne
+                            blogs={posts}
+                            title="Latest Insights"
+                            description="Explore our thoughts on AI, technology, and innovation in the digital world"
+                            textboxLayout="default"
+                            useInvertedBackground="noInvert"
+                            animationType="slide-up"
+                            carouselMode="buttons"
+                            tag="Blog"
+                        />
+                    )}
+
+                    <FooterBaseCard
+                        logoText="AgentAI"
+                        copyrightText="© 2025 AgentAI Inc. All rights reserved."
+                        columns={[
+                            {
+                                title: "Product",                                items: [
+                                    { label: "Features", href: "#features" },
+                                    { label: "Pricing", href: "/pricing" },
+                                    { label: "Security", href: "#" },
+                                    { label: "Roadmap", href: "#" }
+                                ]
+                            },
+                            {
+                                title: "Company",                                items: [
+                                    { label: "About", href: "/about" },
+                                    { label: "Blog", href: "#" },
+                                    { label: "Careers", href: "#" },
+                                    { label: "Contact", href: "/contact" }
+                                ]
+                            },
+                            {
+                                title: "Developers",                                items: [
+                                    { label: "Documentation", href: "https://docs.example.com" },
+                                    { label: "API Reference", href: "#" },
+                                    { label: "GitHub", href: "#" },
+                                    { label: "Integration Hub", href: "#" }
+                                ]
+                            },
+                            {
+                                title: "Legal",                                items: [
+                                    { label: "Privacy Policy", href: "#" },
+                                    { label: "Terms of Service", href: "#" },
+                                    { label: "Compliance", href: "#" },
+                                    { label: "Cookie Settings", href: "#" }
+                                ]
+                            }
+                        ]}
+                    />
+                </div>
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}

src/app/contact/page.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import Link from "next/link";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FaqBase from '@/components/sections/faq/FaqBase';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Award, Zap } from 'lucide-react';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="mediumLarge"
+      sizing="mediumLargeSizeMediumTitles"
+      background="floatingGradient"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="glass"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="AgentAI"
+          navItems={[
+            { name: "Features", href: "/#features" },
+            { name: "Pricing", href: "/pricing" },
+            { name: "About", href: "/about" },
+            { name: "Docs", href: "https://docs.example.com" }
+          ]}
+          button={{ text: "Start Free Trial", href: "/contact" }}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Get Started"
+          title="Ready to Transform Your Operations?"
+          description="Join hundreds of enterprises using AgentAI to automate complex workflows, reduce costs, and accelerate growth. Start your free trial today or schedule a demo with our team."
+          tagIcon={Zap}
+          inputPlaceholder="Enter your work email"
+          buttonText="Start Free Trial"
+          termsText="By signing up, you agree to our Terms of Service and Privacy Policy. No credit card required."
+          useInvertedBackground="noInvert"
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
+        <FaqBase
+          title="Frequently Asked Questions"
+          description="Everything you need to know about AgentAI and our AI automation platform"
+          tag="Support"
+          textboxLayout="default"
+          useInvertedBackground="invertDefault"
+          faqs={[
+            {
+              id: "1",
+              title: "How long does it take to deploy an AI agent?",
+              content: "Most deployments are completed within 2-4 weeks. Our expert implementation team handles setup, training, and integration with your existing systems. For simple use cases, you can have agents running in days using our pre-built templates."
+            },
+            {
+              id: "2",
+              title: "What kind of support do you provide?",
+              content: "We offer 24/7 priority support for all enterprise customers, dedicated account managers, regular training sessions, and comprehensive documentation. Our support team includes AI specialists who understand your business needs."
+            },
+            {
+              id: "3",
+              title: "How secure is AgentAI?",
+              content: "AgentAI meets the highest enterprise security standards including SOC 2 Type II compliance, end-to-end encryption, role-based access control, and comprehensive audit trails. We also support on-premise deployment for maximum security."
+            },
+            {
+              id: "4",
+              title: "Can AgentAI integrate with our existing systems?",
+              content: "Yes, AgentAI integrates seamlessly with most enterprise systems via APIs, webhooks, and pre-built connectors. Our integration team can build custom connections for any legacy or specialized systems you use."
+            }
+          ]}
+          animationType="smooth"
+        />
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardTwelve
+          testimonials={[
+            {
+              id: "1",
+              name: "Michael Torres",
+              imageSrc: "http://img.b2bpic.net/free-photo/confident-european-businessman-smiling-closeup-portrait-jobs-career-campaign_53876-128975.jpg",
+              imageAlt: "Michael Torres"
+            },
+            {
+              id: "2",
+              name: "Jennifer Wu",
+              imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1563.jpg",
+              imageAlt: "Jennifer Wu"
+            },
+            {
+              id: "3",
+              name: "David Patel",
+              imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1664.jpg",
+              imageAlt: "David Patel"
+            },
+            {
+              id: "4",
+              name: "Lisa Anderson",
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg",
+              imageAlt: "Lisa Anderson"
+            }
+          ]}
+          cardTitle="Over 500+ enterprise teams trust AgentAI to power their autonomous operations"
+          cardTag="Industry Leaders"
+          cardTagIcon={Award}
+          useInvertedBackground="noInvert"
+        />
+      </div>
+
+      <FooterBaseCard
+        logoText="AgentAI"
+        copyrightText="© 2025 AgentAI Inc. All rights reserved."
+        columns={[
+          {
+            title: "Product",
+            items: [
+              { label: "Features", href: "/#features" },
+              { label: "Pricing", href: "/pricing" },
+              { label: "Security", href: "#" },
+              { label: "Roadmap", href: "#" }
+            ]
+          },
+          {
+            title: "Company",
+            items: [
+              { label: "About", href: "/about" },
+              { label: "Blog", href: "#" },
+              { label: "Careers", href: "#" },
+              { label: "Contact", href: "/contact" }
+            ]
+          },
+          {
+            title: "Developers",
+            items: [
+              { label: "Documentation", href: "https://docs.example.com" },
+              { label: "API Reference", href: "#" },
+              { label: "GitHub", href: "#" },
+              { label: "Integration Hub", href: "#" }
+            ]
+          },
+          {
+            title: "Legal",
+            items: [
+              { label: "Privacy Policy", href: "#" },
+              { label: "Terms of Service", href: "#" },
+              { label: "Compliance", href: "#" },
+              { label: "Cookie Settings", href: "#" }
+            ]
+          }
+        ]}
+      />
+    </ThemeProvider>
+  );
+}

src/app/globals.css

@@ -0,0 +1,538 @@
+@import "tailwindcss";
+
+:root {
+  /* Base units */
+  /* --vw is set by ThemeProvider */
+
+  --background: #f7f6f7;;
+  --card: #ffffff;;
+  --foreground: #0c1325;;
+  --primary-cta: #0798ff;;
+  --secondary-cta: #ffffff;;
+  --accent: #93c7ff;;
+  --background-accent: #a8cde8;;
+
+  /* Base spacing units */
+  --vw-0_25: calc(var(--vw) * 0.25);
+  --vw-0_5: calc(var(--vw) * 0.5);
+  --vw-0_625: calc(var(--vw) * 0.625);
+  --vw-0_75: calc(var(--vw) * 0.75);
+  --vw-1: calc(var(--vw) * 1);
+  --vw-1_25: calc(var(--vw) * 1.25);
+  --vw-1_5: calc(var(--vw) * 1.5);
+  --vw-1_75: calc(var(--vw) * 1.75);
+  --vw-2: calc(var(--vw) * 2);
+  --vw-2_25: calc(var(--vw) * 2.25);
+  --vw-2_5: calc(var(--vw) * 2.5);
+  --vw-2_75: calc(var(--vw) * 2.75);
+  --vw-3: calc(var(--vw) * 3);
+
+  /* width */
+  --width-5: clamp(4rem, 5vw, 6rem);
+  --width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
+  --width-10: clamp(7.5rem, 10vw, 10rem);
+  --width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
+  --width-15: clamp(11.25rem, 15vw, 15rem);
+  --width-17: clamp(12.75rem, 17vw, 17rem);
+  --width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
+  --width-20: clamp(15rem, 20vw, 20rem);
+  --width-21: clamp(15.75rem, 21vw, 21rem);
+  --width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
+  --width-25: clamp(18.75rem, 25vw, 25rem);
+  --width-26: clamp(19.5rem, 26vw, 26rem);
+  --width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
+  --width-30: clamp(22.5rem, 30vw, 30rem);
+  --width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
+  --width-35: clamp(26.25rem, 35vw, 35rem);
+  --width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
+  --width-40: clamp(30rem, 40vw, 40rem);
+  --width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
+  --width-45: clamp(33.75rem, 45vw, 45rem);
+  --width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
+  --width-50: clamp(37.5rem, 50vw, 50rem);
+  --width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
+  --width-55: clamp(41.25rem, 55vw, 55rem);
+  --width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
+  --width-60: clamp(45rem, 60vw, 60rem);
+  --width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
+  --width-65: clamp(48.75rem, 65vw, 65rem);
+  --width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
+  --width-70: clamp(52.5rem, 70vw, 70rem);
+  --width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
+  --width-75: clamp(56.25rem, 75vw, 75rem);
+  --width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
+  --width-80: clamp(60rem, 80vw, 80rem);
+  --width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
+  --width-85: clamp(63.75rem, 85vw, 85rem);
+  --width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
+  --width-90: clamp(67.5rem, 90vw, 90rem);
+  --width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
+  --width-95: clamp(71.25rem, 95vw, 95rem);
+  --width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
+  --width-100: clamp(75rem, 100vw, 100rem);
+  /* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
+  --width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
+  --width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
+  --width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
+  --width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
+  --width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
+  --width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
+  --width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
+
+  --height-4: 1rem;
+  --height-5: 1.25rem;
+  --height-6: 1.5rem;
+  --height-7: 1.75rem;
+  --height-8: 2rem;
+  --height-9: 2.25rem;
+  --height-10: 2.5rem;
+  --height-11: 2.75rem;
+  --height-12: 3rem;
+  --height-30: 7.5rem;
+  --height-90: 22.5rem;
+  --height-100: 25rem;
+  --height-110: 27.5rem;
+  --height-120: 30rem;
+  --height-130: 32.5rem;
+  --height-140: 35rem;
+  --height-150: 37.5rem;
+
+  /* hero page padding */
+  --padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
+  --padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
+  --padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
+  --padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
+}
+
+@media (max-width: 767px) {
+  :root {
+    /* --vw and text sizing are set by ThemeProvider */
+
+    --width-5: 5vw;
+    --width-7_5: 7.5vw;
+    --width-10: 10vw;
+    --width-12_5: 12.5vw;
+    --width-15: 15vw;
+    --width-17_5: 17.5vw;
+    --width-20: 20vw;
+    --width-22_5: 22.5vw;
+    --width-25: 25vw;
+    --width-27_5: 27.5vw;
+    --width-30: 30vw;
+    --width-32_5: 32.5vw;
+    --width-35: 35vw;
+    --width-37_5: 37.5vw;
+    --width-40: 40vw;
+    --width-42_5: 42.5vw;
+    --width-45: 45vw;
+    --width-47_5: 47.5vw;
+    --width-50: 50vw;
+    --width-52_5: 52.5vw;
+    --width-55: 55vw;
+    --width-57_5: 57.5vw;
+    --width-60: 60vw;
+    --width-62_5: 62.5vw;
+    --width-65: 65vw;
+    --width-67_5: 67.5vw;
+    --width-70: 70vw;
+    --width-72_5: 72.5vw;
+    --width-75: 75vw;
+    --width-77_5: 77.5vw;
+    --width-80: 80vw;
+    --width-82_5: 82.5vw;
+    --width-85: 85vw;
+    --width-87_5: 87.5vw;
+    --width-90: 90vw;
+    --width-92_5: 92.5vw;
+    --width-95: 95vw;
+    --width-97_5: 97.5vw;
+    --width-100: 100vw;
+    /* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
+    --width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
+    --width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
+    --width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
+    --width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
+    --width-carousel-item-3: var(--width-content-width);
+    --width-carousel-item-4: var(--width-content-width);
+    --width-x-padding-mask-fade: 10vw;
+
+    --height-4: 3.5vw;
+    --height-5: 4.5vw;
+    --height-6: 5.5vw;
+    --height-7: 6.5vw;
+    --height-8: 7.5vw;
+    --height-9: 8.5vw;
+    --height-10: 9vw;
+    --height-11: 10vw;
+    --height-12: 11vw;
+    --height-30: 25vw;
+    --height-90: 81vw;
+    --height-100: 90vw;
+    --height-110: 99vw;
+    --height-120: 108vw;
+    --height-130: 117vw;
+    --height-140: 126vw;
+    --height-150: 135vw;
+  }
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-primary-cta: var(--primary-cta);
+  --color-secondary-cta: var(--secondary-cta);
+  --color-accent: var(--accent);
+  --color-background-accent: var(--background-accent);
+
+  /* theme border radius */
+  --radius-theme: var(--theme-border-radius);
+  --radius-theme-capped: var(--theme-border-radius-capped);
+
+  /* text */
+  --text-2xs: var(--text-2xs);
+  --text-xs: var(--text-xs);
+  --text-sm: var(--text-sm);
+  --text-base: var(--text-base);
+  --text-lg: var(--text-lg);
+  --text-xl: var(--text-xl);
+  --text-2xl: var(--text-2xl);
+  --text-3xl: var(--text-3xl);
+  --text-4xl: var(--text-4xl);
+  --text-5xl: var(--text-5xl);
+  --text-6xl: var(--text-6xl);
+  --text-7xl: var(--text-7xl);
+  --text-8xl: var(--text-8xl);
+  --text-9xl: var(--text-9xl);
+
+  /* height */
+  --height-4: var(--height-4);
+  --height-5: var(--height-5);
+  --height-6: var(--height-6);
+  --height-7: var(--height-7);
+  --height-8: var(--height-8);
+  --height-9: var(--height-9);
+  --height-11: var(--height-11);
+  --height-12: var(--height-12);
+
+  --height-10: var(--height-10);
+  --height-30: var(--height-30);
+  --height-90: var(--height-90);
+  --height-100: var(--height-100);
+  --height-110: var(--height-110);
+  --height-120: var(--height-120);
+  --height-130: var(--height-130);
+  --height-140: var(--height-140);
+  --height-150: var(--height-150);
+
+  --height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
+
+  /* width */
+  --width-5: var(--width-5);
+  --width-7_5: var(--width-7_5);
+  --width-10: var(--width-10);
+  --width-12_5: var(--width-12_5);
+  --width-15: var(--width-15);
+  --width-17: var(--width-17);
+  --width-17_5: var(--width-17_5);
+  --width-20: var(--width-20);
+  --width-21: var(--width-21);
+  --width-22_5: var(--width-22_5);
+  --width-25: var(--width-25);
+  --width-26: var(--width-26);
+  --width-27_5: var(--width-27_5);
+  --width-30: var(--width-30);
+  --width-32_5: var(--width-32_5);
+  --width-35: var(--width-35);
+  --width-37_5: var(--width-37_5);
+  --width-40: var(--width-40);
+  --width-42_5: var(--width-42_5);
+  --width-45: var(--width-45);
+  --width-47_5: var(--width-47_5);
+  --width-50: var(--width-50);
+  --width-52_5: var(--width-52_5);
+  --width-55: var(--width-55);
+  --width-57_5: var(--width-57_5);
+  --width-60: var(--width-60);
+  --width-62_5: var(--width-62_5);
+  --width-65: var(--width-65);
+  --width-67_5: var(--width-67_5);
+  --width-70: var(--width-70);
+  --width-72_5: var(--width-72_5);
+  --width-75: var(--width-75);
+  --width-77_5: var(--width-77_5);
+  --width-80: var(--width-80);
+  --width-82_5: var(--width-82_5);
+  --width-85: var(--width-85);
+  --width-87_5: var(--width-87_5);
+  --width-90: var(--width-90);
+  --width-92_5: var(--width-92_5);
+  --width-95: var(--width-95);
+  --width-97_5: var(--width-97_5);
+  --width-100: var(--width-100);
+  --width-content-width: var(--width-content-width);
+  --width-carousel-padding: var(--width-carousel-padding);
+  --width-carousel-padding-controls: var(--width-carousel-padding-controls);
+  --width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
+  --width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
+  --width-carousel-item-3: var(--width-carousel-item-3);
+  --width-carousel-item-4: var(--width-carousel-item-4);
+  --width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
+  --width-content-width-expanded: var(--width-content-width-expanded);
+
+  /* gap */
+  --spacing-1: var(--vw-0_25);
+  --spacing-2: var(--vw-0_5);
+  --spacing-3: var(--vw-0_75);
+  --spacing-4: var(--vw-1);
+  --spacing-5: var(--vw-1_25);
+  --spacing-6: var(--vw-1_5);
+  --spacing-7: var(--vw-1_75);
+  --spacing-8: var(--vw-2);
+
+  --spacing-x-1: var(--vw-0_25);
+  --spacing-x-2: var(--vw-0_5);
+  --spacing-x-3: var(--vw-0_75);
+  --spacing-x-4: var(--vw-1);
+  --spacing-x-5: var(--vw-1_25);
+  --spacing-x-6: var(--vw-1_5);
+
+  /* border radius */
+  --radius-none: 0;
+  --radius-sm: var(--vw-0_5);
+  --radius: var(--vw-0_75);
+  --radius-md: var(--vw-1);
+  --radius-lg: var(--vw-1_25);
+  --radius-xl: var(--vw-1_75);
+  --radius-full: 999px;
+
+  /* padding */
+  --padding-1: var(--vw-0_25);
+  --padding-2: var(--vw-0_5);
+  --padding-2.5: var(--vw-0_625);
+  --padding-3: var(--vw-0_75);
+  --padding-4: var(--vw-1);
+  --padding-5: var(--vw-1_25);
+  --padding-6: var(--vw-1_5);
+  --padding-7: var(--vw-1_75);
+  --padding-8: var(--vw-2);
+
+  --padding-x-1: var(--vw-0_25);
+  --padding-x-2: var(--vw-0_5);
+  --padding-x-3: var(--vw-0_75);
+  --padding-x-4: var(--vw-1);
+  --padding-x-5: var(--vw-1_25);
+  --padding-x-6: var(--vw-1_5);
+  --padding-x-7: var(--vw-1_75);
+  --padding-x-8: var(--vw-2);
+
+  --padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
+  --padding-hero-page-padding: var(--padding-hero-page-padding);
+  --padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
+  --padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
+
+  /* margin */
+  --margin-1: var(--vw-0_25);
+  --margin-2: var(--vw-0_5);
+  --margin-3: var(--vw-0_75);
+  --margin-4: var(--vw-1);
+  --margin-5: var(--vw-1_25);
+  --margin-6: var(--vw-1_5);
+  --margin-7: var(--vw-1_75);
+  --margin-8: var(--vw-2);
+
+  --margin-x-1: var(--vw-0_25);
+  --margin-x-2: var(--vw-0_5);
+  --margin-x-3: var(--vw-0_75);
+  --margin-x-4: var(--vw-1);
+  --margin-x-5: var(--vw-1_25);
+  --margin-x-6: var(--vw-1_5);
+  --margin-x-7: var(--vw-1_75);
+  --margin-x-8: var(--vw-2);
+}
+
+@layer components {}
+
+@layer utilities {
+
+  .tag-card {
+    @apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
+  }
+
+  .mask-padding-x {
+    -webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
+    mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
+  }
+
+  .mask-fade-bottom {
+    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
+    mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
+  }
+
+  .mask-fade-y {
+    mask-image: linear-gradient(to bottom,
+        transparent 0%,
+        black var(--vw-1_5),
+        black calc(100% - var(--vw-1_5)),
+        transparent 100%);
+  }
+
+  .mask-fade-bottom-large {
+    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
+    mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
+  }
+
+  .mask-fade-bottom-long {
+    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
+    mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
+  }
+
+  .mask-fade-top-long {
+    -webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
+    mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
+  }
+
+  .mask-fade-xy {
+    -webkit-mask-image:
+      linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
+      linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
+    mask-image:
+      linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
+      linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
+    -webkit-mask-composite: source-in;
+    mask-composite: intersect;
+  }
+
+  /* ANIMATION */
+
+  .animation-container {
+    animation:
+      fadeInOpacity 0.8s ease-in-out forwards,
+      fadeInTranslate 0.6s forwards;
+  }
+
+  .animation-container-fade {
+    animation: fadeInOpacity 0.8s ease-in-out forwards;
+  }
+
+  @keyframes fadeInOpacity {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeInTranslate {
+    from {
+      transform: translateY(0.75vh);
+    }
+
+    to {
+      transform: translateY(0vh);
+    }
+  }
+
+  @keyframes aurora {
+    from {
+      background-position: 50% 50%, 50% 50%;
+    }
+
+    to {
+      background-position: 350% 50%, 350% 50%;
+    }
+  }
+
+  @keyframes spin-slow {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes spin-reverse {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(-360deg);
+    }
+  }
+
+  .animate-spin-slow {
+    animation: spin-slow 15s linear infinite;
+  }
+
+  .animate-spin-reverse {
+    animation: spin-reverse 10s linear infinite;
+  }
+
+  @keyframes marquee-vertical {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(-50%);
+    }
+  }
+
+  .animate-marquee-vertical {
+    animation: marquee-vertical 20s linear infinite;
+  }
+
+  @keyframes orbit {
+    from {
+      transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * var(--initial-position, 0deg)));
+    }
+    to {
+      transform: rotate(calc(var(--initial-position, 0deg) + 360deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * (var(--initial-position, 0deg) + 360deg)));
+    }
+  }
+
+  @keyframes map-dot-pulse {
+    0%, 100% {
+      transform: scale(0.4);
+      opacity: 0.6;
+    }
+    50% {
+      transform: scale(1.4);
+      opacity: 1;
+    }
+  }
+
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
+}
+
+html {
+  overscroll-behavior: none;
+  overscroll-behavior-y: none;
+}
+
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-open-sans), sans-serif;
+  position: relative;
+  min-height: 100vh;
+  overscroll-behavior: none;
+  overscroll-behavior-y: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-open-sans), sans-serif;
+}

src/app/page.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import Link from "next/link";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
+import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Sparkles, Award, Zap } from 'lucide-react';
+
+export default function HomePage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="mediumLarge"
+      sizing="mediumLargeSizeMediumTitles"
+      background="floatingGradient"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="glass"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="AgentAI"
+          navItems={[
+            { name: "Features", id: "features" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "About", id: "/about" },
+            { name: "Docs", id: "https://docs.example.com" }
+          ]}
+          button={{ text: "Start Free Trial", href: "/contact" }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroCarouselLogo
+          logoText="AGENTAI"
+          description="Intelligent automation platform empowering enterprises to scale operations with AI-driven agents that learn, adapt, and deliver measurable ROI"
+          buttons={[
+            { text: "Start Free Trial", href: "/contact" },
+            { text: "Watch Demo", href: "https://www.youtube.com" }
+          ]}
+          slides={[
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169866.jpg",
+              imageAlt: "Advanced AI automation technology interface"
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-vector/user-panel-template-infographic-dashboard_23-2148378206.jpg",
+              imageAlt: "Enterprise AI dashboard with analytics"
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/information-technology-connection-graphics-concept_53876-121040.jpg",
+              imageAlt: "Intelligent workflow automation system"
+            }
+          ]}
+          autoplayDelay={5000}
+          showDimOverlay={true}
+        />
+      </div>
+
+      <div id="features" data-section="features">
+        <FeatureCardThree
+          title="Powerful Features Built for Enterprise Scale"
+          description="Everything you need to deploy, manage, and optimize intelligent agents across your organization"
+          tag="Capabilities"
+          features={[
+            {
+              id: "01",
+              title: "Autonomous Agent Design",
+              description: "Build sophisticated AI agents that operate independently, make intelligent decisions, and learn from interactions without constant human intervention",
+              imageSrc: "http://img.b2bpic.net/free-vector/artificial-intelligence-technology-landing-page_23-2150369305.jpg",
+              imageAlt: "ai agent design technology interface"
+            },
+            {
+              id: "02",
+              title: "Real-Time Analytics & Monitoring",
+              description: "Track agent performance, decision accuracy, and business impact through comprehensive dashboards with real-time insights and predictive analytics",
+              imageSrc: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",
+              imageAlt: "analytics monitoring real-time dashboard data"
+            },
+            {
+              id: "03",
+              title: "Multi-Agent Orchestration",
+              description: "Coordinate multiple AI agents seamlessly to handle complex workflows, ensuring optimal resource allocation and synchronized execution across systems",
+              imageSrc: "http://img.b2bpic.net/free-photo/standard-quality-control-collage-concept_23-2149595844.jpg",
+              imageAlt: "orchestration coordination workflow automation system"
+            },
+            {
+              id: "04",
+              title: "Enterprise Security & Compliance",
+              description: "Bank-level encryption, role-based access control, audit trails, and compliance frameworks ensuring your AI operations meet the strictest regulatory requirements",
+              imageSrc: "http://img.b2bpic.net/free-photo/finger-pressing-button-with-padlock_1134-121.jpg",
+              imageAlt: "security protection encryption compliance enterprise"
+            }
+          ]}
+          textboxLayout="default"
+          gridVariant="four-items-2x2-equal-grid"
+          animationType="slide-up"
+          useInvertedBackground="invertDefault"
+        />
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardTwelve
+          testimonials={[
+            {
+              id: "1",
+              name: "Michael Torres",
+              imageSrc: "http://img.b2bpic.net/free-photo/confident-european-businessman-smiling-closeup-portrait-jobs-career-campaign_53876-128975.jpg",
+              imageAlt: "Michael Torres"
+            },
+            {
+              id: "2",
+              name: "Jennifer Wu",
+              imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1563.jpg",
+              imageAlt: "Jennifer Wu"
+            },
+            {
+              id: "3",
+              name: "David Patel",
+              imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1664.jpg",
+              imageAlt: "David Patel"
+            },
+            {
+              id: "4",
+              name: "Lisa Anderson",
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg",
+              imageAlt: "Lisa Anderson"
+            }
+          ]}
+          cardTitle="Over 500+ enterprise teams trust AgentAI to power their autonomous operations"
+          cardTag="Industry Leaders"
+          cardTagIcon={Award}
+          useInvertedBackground="noInvert"
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Get Started"
+          title="Ready to Transform Your Operations?"
+          description="Join hundreds of enterprises using AgentAI to automate complex workflows, reduce costs, and accelerate growth. Start your free trial today or schedule a demo with our team."
+          tagIcon={Zap}
+          inputPlaceholder="Enter your work email"
+          buttonText="Start Free Trial"
+          termsText="By signing up, you agree to our Terms of Service and Privacy Policy. No credit card required."
+          useInvertedBackground="invertDefault"
+        />
+      </div>
+
+      <FooterBaseCard
+        logoText="AgentAI"
+        copyrightText="© 2025 AgentAI Inc. All rights reserved."
+        columns={[
+          {
+            title: "Product",
+            items: [
+              { label: "Features", href: "#features" },
+              { label: "Pricing", href: "/pricing" },
+              { label: "Security", href: "#" },
+              { label: "Roadmap", href: "#" }
+            ]
+          },
+          {
+            title: "Company",
+            items: [
+              { label: "About", href: "/about" },
+              { label: "Blog", href: "#" },
+              { label: "Careers", href: "#" },
+              { label: "Contact", href: "/contact" }
+            ]
+          },
+          {
+            title: "Developers",
+            items: [
+              { label: "Documentation", href: "https://docs.example.com" },
+              { label: "API Reference", href: "#" },
+              { label: "GitHub", href: "#" },
+              { label: "Integration Hub", href: "#" }
+            ]
+          },
+          {
+            title: "Legal",
+            items: [
+              { label: "Privacy Policy", href: "#" },
+              { label: "Terms of Service", href: "#" },
+              { label: "Compliance", href: "#" },
+              { label: "Cookie Settings", href: "#" }
+            ]
+          }
+        ]}
+      />
+    </ThemeProvider>
+  );
+}

src/app/pricing/page.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import Link from "next/link";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
+import FaqBase from '@/components/sections/faq/FaqBase';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { DollarSign, Award, Zap } from 'lucide-react';
+
+export default function PricingPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="mediumLarge"
+      sizing="mediumLargeSizeMediumTitles"
+      background="floatingGradient"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="glass"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="AgentAI"
+          navItems={[
+            { name: "Features", href: "/" },
+            { name: "Pricing", href: "/pricing" },
+            { name: "About", href: "/about" },
+            { name: "Docs", href: "https://docs.example.com" }
+          ]}
+          button={{ text: "Start Free Trial", href: "/contact" }}
+        />
+      </div>
+
+      <div id="pricing" data-section="pricing">
+        <PricingCardNine
+          title="Flexible Plans for Any Enterprise Scale"
+          description="Choose the plan that fits your automation needs and budget"
+          tag="Pricing"
+          tagIcon={DollarSign}
+          plans={[
+            {
+              id: "starter",
+              title: "Starter",
+              price: "Custom",
+              period: "Contact Sales",
+              imageSrc: "http://img.b2bpic.net/free-photo/people-leaning-desk-standing_23-2147650958.jpg",
+              imageAlt: "pricing plan startup business growth",
+              button: { text: "Get Started", href: "/contact" },
+              features: [
+                "Up to 5 AI agents",
+                "Basic automation workflows",
+                "Email support",
+                "Monthly reporting",
+                "API access"
+              ]
+            },
+            {
+              id: "professional",
+              title: "Professional",
+              price: "Custom",
+              period: "Contact Sales",
+              imageSrc: "http://img.b2bpic.net/free-photo/team-young-colleagues-having-meeting-cafe_273609-16137.jpg",
+              imageAlt: "professional enterprise business success growth",
+              button: { text: "Request Demo", href: "/contact" },
+              features: [
+                "Up to 50 AI agents",
+                "Advanced multi-agent orchestration",
+                "Priority support 24/7",
+                "Real-time analytics dashboard",
+                "Custom workflow builder",
+                "Compliance & audit tools"
+              ]
+            },
+            {
+              id: "enterprise",
+              title: "Enterprise",
+              price: "Custom",
+              period: "Contact Sales",
+              imageSrc: "http://img.b2bpic.net/free-photo/office-scene-with-two-persons_23-2147626431.jpg",
+              imageAlt: "enterprise organization corporation scale success",
+              button: { text: "Schedule Consultation", href: "/contact" },
+              features: [
+                "Unlimited AI agents",
+                "White-label platform",
+                "Dedicated account manager",
+                "Custom integrations",
+                "Advanced security & compliance",
+                "SLA guarantees"
+              ]
+            }
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground="noInvert"
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
+        <FaqBase
+          title="Frequently Asked Questions"
+          description="Everything you need to know about AgentAI and our AI automation platform"
+          tag="Support"
+          textboxLayout="default"
+          useInvertedBackground="invertDefault"
+          faqs={[
+            {
+              id: "1",
+              title: "How long does it take to deploy an AI agent?",
+              content: "Most deployments are completed within 2-4 weeks. Our expert implementation team handles setup, training, and integration with your existing systems. For simple use cases, you can have agents running in days using our pre-built templates."
+            },
+            {
+              id: "2",
+              title: "What kind of support do you provide?",
+              content: "We offer 24/7 priority support for all enterprise customers, dedicated account managers, regular training sessions, and comprehensive documentation. Our support team includes AI specialists who understand your business needs."
+            },
+            {
+              id: "3",
+              title: "How secure is AgentAI?",
+              content: "AgentAI meets the highest enterprise security standards including SOC 2 Type II compliance, end-to-end encryption, role-based access control, and comprehensive audit trails. We also support on-premise deployment for maximum security."
+            },
+            {
+              id: "4",
+              title: "Can AgentAI integrate with our existing systems?",
+              content: "Yes, AgentAI integrates seamlessly with most enterprise systems via APIs, webhooks, and pre-built connectors. Our integration team can build custom connections for any legacy or specialized systems you use."
+            },
+            {
+              id: "5",
+              title: "What's the learning curve for our team?",
+              content: "We provide comprehensive training programs tailored to your team's technical level. Most users are productive within 2-3 days, and advanced features can be mastered through our certification program within 2 weeks."
+            },
+            {
+              id: "6",
+              title: "How do you measure ROI and success?",
+              content: "Our analytics dashboard tracks key metrics including process automation rates, cost savings, time saved, and business outcomes. We work with you to define success metrics and provide quarterly business reviews to demonstrate value."
+            }
+          ]}
+          animationType="smooth"
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Get Started"
+          title="Ready to Transform Your Operations?"
+          description="Join hundreds of enterprises using AgentAI to automate complex workflows, reduce costs, and accelerate growth. Start your free trial today or schedule a demo with our team."
+          tagIcon={Zap}
+          inputPlaceholder="Enter your work email"
+          buttonText="Start Free Trial"
+          termsText="By signing up, you agree to our Terms of Service and Privacy Policy. No credit card required."
+          useInvertedBackground="noInvert"
+        />
+      </div>
+
+      <FooterBaseCard
+        logoText="AgentAI"
+        copyrightText="© 2025 AgentAI Inc. All rights reserved."
+        columns={[
+          {
+            title: "Product",
+            items: [
+              { label: "Features", href: "/#features" },
+              { label: "Pricing", href: "/pricing" },
+              { label: "Security", href: "#" },
+              { label: "Roadmap", href: "#" }
+            ]
+          },
+          {
+            title: "Company",
+            items: [
+              { label: "About", href: "/about" },
+              { label: "Blog", href: "#" },
+              { label: "Careers", href: "#" },
+              { label: "Contact", href: "/contact" }
+            ]
+          },
+          {
+            title: "Developers",
+            items: [
+              { label: "Documentation", href: "https://docs.example.com" },
+              { label: "API Reference", href: "#" },
+              { label: "GitHub", href: "#" },
+              { label: "Integration Hub", href: "#" }
+            ]
+          },
+          {
+            title: "Legal",
+            items: [
+              { label: "Privacy Policy", href: "#" },
+              { label: "Terms of Service", href: "#" },
+              { label: "Compliance", href: "#" },
+              { label: "Cookie Settings", href: "#" }
+            ]
+          }
+        ]}
+      />
+    </ThemeProvider>
+  );
+}