Add src/lib/animations/lenis-smooth-scroll.tsx

Add src/lib/animations/gsap-utils.ts
Add src/lib/animations/framer-motion-wrapper.tsx
2026-06-09 23:37:50 +00:00 · 2026-06-09 23:37:50 +00:00 · 2026-06-09 23:37:49 +00:00 · 2026-06-09 23:37:49 +00:00 · 2026-06-09 23:37:48 +00:00 · 2026-06-09 23:37:48 +00:00
12 changed files with 1263 additions and 168 deletions
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroSignup from '@/components/sections/hero/HeroSignup';
+import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Settings, Workflow, Home, Users, UserPlus, CreditCard, Star, Globe, ClipboardEdit, Gift, ShieldAlert, BarChart2, Monitor } from "lucide-react";
+
+export default function AdminPage() {
+    const navItems = [
+        { name: "Features", id: "features" },
+        { name: "Pricing", id: "pricing" },
+        { name: "Docs", href: "/docs" },
+        { name: "Contact", id: "contact" },
+        { name: "Admin", href: "/admin" }
+    ];
+
+    const managementFeatures = [
+        {
+            title: "Salon Management",            description: "Manage salon profiles, services, schedules, and capacity.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature1.webp",            imageAlt: "Salon Management"
+        },
+        {
+            title: "Barber Management",            description: "Oversee barber profiles, availability, performance, and commission.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature2.webp",            imageAlt: "Barber Management"
+        },
+        {
+            title: "Client Management",            description: "Handle client accounts, booking history, preferences, and communication.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature3.webp",            imageAlt: "Client Management"
+        },
+        {
+            title: "Payment Management",            description: "Track transactions, process refunds, manage subscriptions, and view financial reports.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature4.webp",            imageAlt: "Payment Management"
+        },
+        {
+            title: "Review Management",            description: "Monitor customer feedback, respond to reviews, and manage ratings.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature5.webp",            imageAlt: "Review Management"
+        },
+        {
+            title: "Language Management",            description: "Control multi-language support for the platform and content.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature6.webp",            imageAlt: "Language Management"
+        },
+        {
+            title: "Content Management",            description: "Update and manage website content, promotions, and announcements.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature1.webp",            imageAlt: "Content Management"
+        },
+        {
+            title: "Promotion Management",            description: "Create, schedule, and track marketing campaigns and discounts.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature2.webp",            imageAlt: "Promotion Management"
+        },
+        {
+            title: "Fraud Detection",            description: "Implement tools and alerts to detect and prevent fraudulent activities.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature3.webp",            imageAlt: "Fraud Detection"
+        },
+        {
+            title: "Global Analytics",            description: "Access comprehensive data insights and reports for informed decision-making.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature4.webp",            imageAlt: "Global Analytics"
+        },
+        {
+            title: "System Monitoring",            description: "Monitor system health, performance, and security in real-time.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature5.webp",            imageAlt: "System Monitoring"
+        }
+    ];
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="background-highlight"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="gradient-bordered"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="layered"
+            headingFontWeight="semibold"
+        >
+            <NavbarStyleFullscreen
+                navItems={navItems}
+                brandName="AgentFlow"
+                bottomLeftText="Build Smarter"
+                bottomRightText="hello@agentflow.ai"
+            />
+            <HeroSignup
+                background={{ variant: "canvas-reveal" }}
+                tag="Management Platform"
+                tagIcon={Settings}
+                title="Super Admin Panel"
+                description="Centralized control for salon and barber operations, client management, payments, and global analytics."
+                buttons={[
+                    { text: "Access Panel", href: "#" }
+                ]}
+            />
+            <FeatureCardSix
+                tag="Key Modules"
+                tagIcon={Workflow}
+                title="Comprehensive Management Features"
+                description="Our Super Admin Panel offers a complete suite of tools to efficiently manage every aspect of your business."
+                textboxLayout="default"
+                useInvertedBackground={false}
+                features={managementFeatures.map(f => ({
+                    title: f.title,
+                    description: f.description,
+                    imageSrc: f.imageSrc,
+                    imageAlt: f.imageAlt,
+                    buttons: [{ text: "Learn More", href: "#" }]
+                }))}
+            />
+        </ThemeProvider>
+    );
+}
--- a/src/app/ai-style-recommendation/page.tsx
+++ b/src/app/ai-style-recommendation/page.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import TextBox from "@/components/Textbox";
+import ButtonBounceEffect from "@/components/button/ButtonBounceEffect/ButtonBounceEffect";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import { Sparkles } from "lucide-react";
+
+export default function AIStyleRecommendationPage() {
+    const navItems = [
+        { name: "Features", id: "features" },
+        { name: "Pricing", id: "pricing" },
+        { name: "Docs", id: "docs" },
+        { name: "AI Style Recommendation", id: "/ai-style-recommendation" },
+        { name: "Contact", id: "contact" }
+    ];
+
+    const footerColumns = [
+        {
+            title: "Product",            items: [
+                { label: "Features", href: "#features" },
+                { label: "Pricing", href: "#pricing" },
+                { label: "Integrations", href: "#" },
+                { label: "Changelog", href: "#" },
+            ],
+        },
+        {
+            title: "Resources",            items: [
+                { label: "Documentation", href: "#" },
+                { label: "API Reference", href: "#" },
+                { label: "Tutorials", href: "#" },
+                { label: "Blog", href: "#" },
+            ],
+        },
+        {
+            title: "Company",            items: [
+                { label: "About", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "#contact" },
+                { label: "Press", href: "#" },
+            ],
+        },
+    ];
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="background-highlight"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="gradient-bordered"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="layered"
+            headingFontWeight="semibold"
+        >
+            <NavbarStyleFullscreen
+                navItems={navItems}
+                brandName="AgentFlow"
+                bottomLeftText="Build Smarter"
+                bottomRightText="hello@agentflow.ai"
+            />
+            <div id="ai-style-recommendation">
+                <TextBox
+                    title="Unlock Your Perfect Style with AI"
+                    description="Our advanced AI analyzes your photo, detects face shape, and suggests personalized hairstyles and style recommendations. See your transformation with a before & after preview!"
+                    tag="AI Style Recommender"
+                    tagIcon={Sparkles}
+                    textboxLayout="default"
+                    center={true}
+                    buttons={[
+                        { text: "Upload Your Photo", onClick: () => console.log("Upload photo clicked") }
+                    ]}
+                />
+                <div className="container mx-auto px-4 py-16 text-center">
+                    <h2 className="text-3xl font-bold mb-8">How it Works</h2>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                        <TextBox
+                            title="1. Upload Your Photo"
+                            description="Securely upload a clear photo of yourself. Our AI needs a good view of your face for accurate analysis."
+                            textboxLayout="default"
+                            center={true}
+                            buttonContainerClassName="hidden"
+                        />
+                        <TextBox
+                            title="2. AI Analysis"
+                            description="Our intelligent algorithms detect your face shape and analyze your features to understand your unique style potential."
+                            textboxLayout="default"
+                            center={true}
+                            buttonContainerClassName="hidden"
+                        />
+                        <TextBox
+                            title="3. Personalized Recommendations"
+                            description="Receive AI-generated hairstyle suggestions, clothing style tips, and a 'before & after' preview to visualize your new look."
+                            textboxLayout="default"
+                            center={true}
+                            buttonContainerClassName="hidden"
+                        />
+                    </div>
+                </div>
+            </div>
+            <FooterBaseCard
+                logoText="AgentFlow"
+                columns={footerColumns}
+                copyrightText="© 2025 AgentFlow. All rights reserved."
+            />
+        </ThemeProvider>
+    );
+}
--- a/src/app/barber-dashboard/page.tsx
+++ b/src/app/barber-dashboard/page.tsx
@@ -0,0 +1,179 @@
+"use client";
+
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { Calendar, User, Clock, BarChart3, Activity, MessageSquare, Layers, Lock, Sparkles, Zap, Star, Mail } from 'lucide-react';
+
+export default function BarberDashboardPage() {
+    const navItems = [
+        { name: "Dashboard", id: "/barber-dashboard" },
+        { name: "Features", id: "#features" },
+        { name: "Analytics", id: "#analytics" },
+        { name: "Reviews", id: "#reviews" },
+        { name: "Contact", id: "#contact" }
+    ];
+
+    const features = [
+        {
+            title: "Appointment Management",            description: "Seamlessly book, reschedule, and manage client appointments with an intuitive calendar view.",            icon: Calendar,
+        },
+        {
+            title: "Client Management",            description: "Maintain detailed client profiles, service history, and preferences for a personalized experience.",            icon: User,
+        },
+        {
+            title: "Schedule Management",            description: "Efficiently organize your daily, weekly, and monthly schedule, block out time, and manage staff availability.",            icon: Clock,
+        },
+        {
+            title: "Revenue Tracking",            description: "Monitor sales, track payments, and generate financial reports to keep an eye on your barbershop's earnings.",            icon: BarChart3,
+        },
+        {
+            title: "Performance Analytics",            description: "Gain insights into booking trends, client retention, and service popularity with comprehensive analytics.",            icon: Activity,
+        },
+        {
+            title: "Reviews Management",            description: "Collect, display, and respond to client reviews to build trust and improve your online reputation.",            icon: MessageSquare,
+        },
+        {
+            title: "Portfolio Management",            description: "Showcase your best work with an integrated digital portfolio to attract new clients.",            icon: Layers,
+        },
+        {
+            title: "Availability Control",            description: "Set specific working hours, break times, and days off to manage your availability with ease.",            icon: Lock,
+        },
+    ];
+
+    const metrics = [
+        { id: "1", value: "$25K", title: "Total Revenue", description: "Generated in the last 30 days." },
+        { id: "2", value: "500+", title: "Appointments Booked", description: "This month across all barbers." },
+        { id: "3", value: "90%", title: "Client Retention", description: "Rate for repeat customers." },
+    ];
+
+    const testimonials = [
+        {
+            id: "1",            name: "John D. Barber",            role: "Owner, The Gents Place",            quote: "This dashboard changed everything! Appointments are a breeze, and I finally have a clear view of my revenue.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif",            imageAlt: "John D. Barber",            title: "Revolutionary Business Tool"
+        },
+        {
+            id: "2",            name: "Maria C. Styles",            role: "Master Barber",            quote: "Client management is so much easier. I can see their history and preferences instantly, making every cut perfect.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image6.avif",            imageAlt: "Maria C. Styles",            title: "A Must-Have for Barbers"
+        },
+        {
+            id: "3",            name: "David L. Cutts",            role: "Freelance Barber",            quote: "The availability control and schedule management features are a lifesaver. I can finally balance work and life.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image7.avif",            imageAlt: "David L. Cutts",            title: "Improved Work-Life Balance"
+        }
+    ];
+
+    const footerColumns = [
+        {
+            title: "Product",            items: [
+                { label: "Dashboard", href: "/barber-dashboard" },
+                { label: "Features", href: "#features" },
+                { label: "Pricing", href: "#" },
+            ],
+        },
+        {
+            title: "Resources",            items: [
+                { label: "Support", href: "#" },
+                { label: "Blog", href: "#" },
+                { label: "FAQ", href: "#" },
+            ],
+        },
+        {
+            title: "Company",            items: [
+                { label: "About Us", href: "#" },
+                { label: "Contact", href: "#contact" },
+                { label: "Careers", href: "#" },
+            ],
+        },
+    ];
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="background-highlight"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="gradient-bordered"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="layered"
+            headingFontWeight="semibold"
+        >
+            <NavbarStyleFullscreen
+                navItems={navItems}
+                brandName="BarberFlow"
+                bottomLeftText="Transform Your Barbershop"
+                bottomRightText="support@barberflow.com"
+            />
+            <HeroLogo
+                logoText="Barber Dashboard"
+                description="Streamline your barbershop operations with all-in-one appointment, client, and schedule management. Focus on your craft, we'll handle the rest."
+                buttons={[
+                    { text: "Get Started", href: "#contact" },
+                    { text: "Learn More", href: "#features" },
+                ]}
+                imageSrc="https://images.unsplash.com/photo-1616394584738-6be71e193913?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                imageAlt="Barber dashboard screenshot"
+                showDimOverlay={false}
+            />
+            <div id="features" data-section="features">
+                <FeatureCardSix
+                    features={features}
+                    title="All-in-One Barber Management"
+                    description="Take control of your business with our powerful and intuitive dashboard, designed specifically for barbers."
+                    tag="Capabilities"
+                    tagIcon={Sparkles}
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                />
+            </div>
+            <div id="analytics" data-section="analytics">
+                <MetricCardEleven
+                    metrics={metrics}
+                    title="Key Business Insights"
+                    description="Track your performance and make informed decisions with real-time analytics tailored for barbershops."
+                    tag="Performance"
+                    tagIcon={Zap}
+                    animationType="slide-up"
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                    imageSrc="https://images.unsplash.com/photo-1542744095-291d6f6e4455?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                    imageAlt="Dashboard with charts"
+                />
+            </div>
+            <div id="reviews" data-section="reviews">
+                <TestimonialCardTen
+                    testimonials={testimonials}
+                    title="What Barbers Are Saying"
+                    description="Hear from barbers who transformed their business and client experience with BarberFlow."
+                    tag="Feedback"
+                    tagIcon={Star}
+                    textboxLayout="default"
+                    animationType="slide-up"
+                    useInvertedBackground={false}
+                />
+            </div>
+            <div id="contact" data-section="contact">
+                <ContactCTA
+                    tag="Get Started"
+                    tagIcon={Mail}
+                    title="Ready to Supercharge Your Barbershop?"
+                    description="Join hundreds of barbers streamlining their operations. Get started with BarberFlow today!"
+                    buttons={[
+                        { text: "Start Free Trial", href: "#" },
+                        { text: "Book a Demo", href: "#" },
+                    ]}
+                    background={{ variant: "canvas-reveal" }}
+                    useInvertedBackground={false}
+                />
+            </div>
+            <FooterSimple
+                columns={footerColumns}
+                bottomLeftText="© 2025 BarberFlow. All rights reserved."
+                bottomRightText="Made with care for barbers."
+            />
+        </ThemeProvider>
+    );
+}
--- a/src/app/booking/page.tsx
+++ b/src/app/booking/page.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import HeroBillboard from "@/components/sections/hero/HeroBillboard";
+import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
+import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { CalendarCheck, Clock, ArrowRight, CircleDollarSign, CheckCircle, MessageSquare, Hourglass, BellRing } from "lucide-react";
+
+export default function BookingPage() {
+    const navItemsBooking = [
+        { name: "Booking Process", id: "booking-process" },
+        { name: "FAQs", id: "booking-faqs" }
+    ];
+
+    const bookingFeatures = [
+        {
+            title: "Real-time Availability",            description: "View and select slots that are instantly updated across our schedule, ensuring you always see what's truly open.",            icon: Clock,
+            mediaItems: [{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/ai-agents/image1.webp?_wi=1" }]
+        },
+        {
+            title: "Interactive Calendar",            description: "Easily navigate through dates and times with a user-friendly calendar interface. Select your preferred slot with a tap.",            icon: CalendarCheck,
+            mediaItems: [{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif?_wi=1" }]
+        },
+        {
+            title: "Multi-step Reservation",            description: "Our guided booking flow makes reservations simple, breaking it down into clear, easy-to-follow steps.",            icon: ArrowRight,
+            mediaItems: [{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/testimonial/testimonial1.webp?_wi=1" }]
+        },
+        {
+            title: "Instant Confirmation",            description: "Receive immediate confirmation of your booking, along with all the details you need, sent directly to your email.",            icon: CheckCircle,
+            mediaItems: [{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image6.avif?_wi=1" }]
+        },
+        {
+            title: "Appointment Reminders",            description: "Never miss an appointment with automated reminders sent to your preferred communication channel.",            icon: BellRing,
+            mediaItems: [{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image7.avif?_wi=1" }]
+        }
+    ];
+
+    const bookingFaqs = [
+        {
+            id: "1",            title: "How do I view available booking slots?",            content: "Simply select your desired service, and our interactive calendar will display all real-time available slots. Click on a date to see times."
+        },
+        {
+            id: "2",            title: "Can I reschedule or cancel my appointment?",            content: "Yes, you can easily reschedule or cancel your appointment through your booking confirmation email or by logging into your account. Please refer to our cancellation policy for details."
+        },
+        {
+            id: "3",            title: "What happens after I complete my reservation?",            content: "Upon successful reservation, you'll receive an instant confirmation email with all appointment details. We'll also send reminders closer to your booking time."
+        },
+        {
+            id: "4",            title: "Do you support group bookings?",            content: "Currently, our system supports individual bookings. For group reservations, please contact our support team directly."
+        },
+        {
+            id: "5",            title: "Is there a waiting list for fully booked slots?",            content: "We do not currently offer an automated waiting list. We recommend checking back regularly as availability can change."
+        }
+    ];
+
+    const footerColumns = [
+        {
+            title: "Services",            items: [
+                { label: "Book Now", href: "/booking#booking-form" },
+                { label: "Pricing", href: "/#pricing" },
+                { label: "Features", href: "/#features" }
+            ]
+        },
+        {
+            title: "Company",            items: [
+                { label: "About Us", href: "/#about" },                { label: "Contact", href: "/#contact" },
+                { label: "Careers", href: "#" }
+            ]
+        }
+    ];
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="background-highlight"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="gradient-bordered"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="layered"
+            headingFontWeight="semibold"
+        >
+            <NavbarStyleFullscreen
+                navItems={navItemsBooking}
+                brandName="AgentFlow"
+                bottomLeftText="Book Your Slot"
+                bottomRightText="hello@agentflow.ai"
+            />
+            <HeroBillboard
+                tag="Live Booking"
+                tagIcon={CalendarCheck}
+                title="Experience Seamless Online Reservations"
+                description="Book your preferred services with real-time availability, instant confirmation, and an intuitive, animated flow designed for your convenience."
+                buttons={[
+                    { text: "Book Now", href: "#booking-form" },
+                    { text: "Back to Home", href: "/" }
+                ]}
+                background={{ variant: "radial-gradient" }}
+                imageSrc="https://images.unsplash.com/photo-1556742526-70e28151522f?w=1200&h=800&fit=crop&q=80"
+                imageAlt="Booking calendar interface"
+            />
+            <div id="booking-process">
+                <FeatureCardTwentyFive
+                    features={bookingFeatures}
+                    animationType="slide-up"
+                    tag="How It Works"
+                    tagIcon={Hourglass}
+                    title="Your Multi-Step Reservation System"
+                    description="From selecting your slot to receiving reminders, our booking process is designed for clarity and ease."
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                />
+            </div>
+            <div id="booking-form">
+                <ContactSplit
+                    tag="Confirm Your Booking"
+                    tagIcon={CircleDollarSign}
+                    title="Secure Your Spot Instantly"
+                    description="Fill in your details below to finalize your reservation. You'll receive an instant confirmation email with all the specifics."
+                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/e-commerce/contact.webp?_wi=1"
+                    imageAlt="Confirmation screen"
+                    mediaAnimation="slide-up"
+                    mediaPosition="right"
+                    inputPlaceholder="Enter your email for confirmation"
+                    buttonText="Confirm Booking"
+                    termsText="By clicking Confirm Booking, you agree to our terms and conditions for services."
+                    background={{ variant: "sparkles-gradient" }}
+                    useInvertedBackground={false}
+                    onSubmit={(email) => console.log("Booking confirmed for:", email)}
+                />
+            </div>
+            <div id="booking-faqs">
+                <FaqSplitMedia
+                    faqs={bookingFaqs}
+                    tag="Booking Help"
+                    tagIcon={MessageSquare}
+                    title="Frequently Asked Questions About Booking"
+                    description="Find answers to common questions regarding our reservation process, cancellations, and more."
+                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/ai-agents/image1.webp?_wi=1"
+                    imageAlt="Customer support"
+                    mediaAnimation="slide-up"
+                    mediaPosition="left"
+                    faqsAnimation="slide-up"
+                    useInvertedBackground={false}
+                />
+            </div>
+            <FooterBaseCard
+                logoText="AgentFlow"
+                columns={footerColumns}
+                copyrightText="© 2025 AgentFlow. All rights reserved."
+            />
+        </ThemeProvider>
+    );
+}
--- a/src/app/docs/page.tsx
+++ b/src/app/docs/page.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroSignup from '@/components/sections/hero/HeroSignup';
+import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { FileText, HelpCircle, Bot, Code, Database } from "lucide-react";
+
+export default function DocsPage() {
+    const navItems = [
+        { name: "Features", id: "features" },
+        { name: "Pricing", id: "pricing" },
+        { name: "Docs", href: "/docs" },
+        { name: "Contact", id: "contact" },
+        { name: "Admin", href: "/admin" }
+    ];
+
+    const docsFeatures = [
+        {
+            title: "Agent Creation Guide",            description: "Step-by-step instructions on how to build and configure your first AI agent.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature1.webp",            imageAlt: "Agent Creation Guide"
+        },
+        {
+            title: "API Reference",            description: "Detailed documentation for integrating AgentFlow with your existing systems.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature2.webp",            imageAlt: "API Reference"
+        },
+        {
+            title: "Integrations Setup",            description: "Guides for connecting AgentFlow with popular third-party tools and services.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature3.webp",            imageAlt: "Integrations Setup"
+        },
+        {
+            title: "Troubleshooting & FAQs",            description: "Common issues and solutions to help you resolve problems quickly.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/feature4.webp",            imageAlt: "Troubleshooting & FAQs"
+        }
+    ];
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="background-highlight"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="gradient-bordered"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="layered"
+            headingFontWeight="semibold"
+        >
+            <NavbarStyleFullscreen
+                navItems={navItems}
+                brandName="AgentFlow"
+                bottomLeftText="Build Smarter"
+                bottomRightText="hello@agentflow.ai"
+            />
+            <HeroSignup
+                background={{ variant: "canvas-reveal" }}
+                tag="Resources"
+                tagIcon={FileText}
+                title="Documentation Center"
+                description="Find comprehensive guides, API references, and tutorials to help you master AgentFlow."
+                buttons={[
+                    { text: "Browse Docs", href: "#" }
+                ]}
+            />
+            <FeatureCardSix
+                tag="Getting Started"
+                tagIcon={HelpCircle}
+                title="Popular Topics"
+                description="Explore our most frequently accessed documentation and tutorials."
+                textboxLayout="default"
+                useInvertedBackground={false}
+                features={docsFeatures.map(f => ({
+                    title: f.title,
+                    description: f.description,
+                    imageSrc: f.imageSrc,
+                    imageAlt: f.imageAlt,
+                    buttons: [{ text: "Read More", href: "#" }]
+                }))}
+            />
+        </ThemeProvider>
+    );
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,224 +10,200 @@ import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
 import FaqDouble from "@/components/sections/faq/FaqDouble";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Bot, Brain, Sparkles, User, Code, Database, Workflow, Settings, Search, FileText, Send, CheckCircle, Zap, MessageSquare, CreditCard, Star, HelpCircle, Mail, Activity, Shield, Clock, BarChart3, Layers, GitBranch, Lock, Eye } from "lucide-react";
+import { Bot, Brain, Sparkles, User, Code, Database, Workflow, Settings, Search, FileText, Send, CheckCircle, Zap, MessageSquare, CreditCard, Star, HelpCircle, Mail, Activity, Shield, Clock, BarChart3, Layers, GitBranch, Lock, Eye, Telegram, Instagram, Tiktok, MapPin, Cloud, Headset, Users } from "lucide-react";

 export default function AIAgentsTemplatePage() {
    const navItems = [
        { name: "Features", id: "features" },
+        { name: "Integrations", id: "integrations" },
        { name: "Pricing", id: "pricing" },
        { name: "Docs", id: "docs" },
-        { name: "Contact", id: "contact" },
+        { name: "Contact", id: "contact" }
    ];

    const features: FeatureCard[] = [
        {
-            bentoComponent: "3d-task-list",
-            title: "Agent Tasks",
-            items: [
+            bentoComponent: "3d-task-list",            title: "Agent Tasks",            items: [
                { icon: Search, label: "Research competitors", time: "2m ago" },
                { icon: FileText, label: "Analyze market data", time: "5m ago" },
                { icon: CheckCircle, label: "Generate report", time: "8m ago" },
-                { icon: Send, label: "Send to stakeholders", time: "10m ago" },
+                { icon: Send, label: "Send to stakeholders", time: "10m ago" }
            ],
-            description: "Agents break down complex goals into manageable tasks and execute them autonomously.",
+            description: "Agents break down complex goals into manageable tasks and execute them autonomously."
        },
        {
-            bentoComponent: "chat",
-            aiIcon: Bot,
+            bentoComponent: "chat",            aiIcon: Bot,
            userIcon: User,
            exchanges: [
                { userMessage: "Summarize our Q4 sales data", aiResponse: "Q4 revenue was $2.4M, up 23% from Q3. Top performer: Enterprise tier." },
-                { userMessage: "What about customer retention?", aiResponse: "Retention rate improved to 94%, with churn down 12% quarter-over-quarter." },
+                { userMessage: "What about customer retention?", aiResponse: "Retention rate improved to 94%, with churn down 12% quarter-over-quarter." }
            ],
-            placeholder: "Ask your agent anything...",
-            title: "Natural Conversations",
-            description: "Interact with your agents through natural language. They understand context and intent.",
+            placeholder: "Ask your agent anything...",            title: "Natural Conversations",            description: "Interact with your agents through natural language. They understand context and intent."
        },
        {
-            bentoComponent: "3d-card-grid",
-            items: [
+            bentoComponent: "3d-card-grid",            items: [
                { name: "Code", icon: Code },
                { name: "Data", icon: Database },
                { name: "Workflow", icon: Workflow },
-                { name: "Config", icon: Settings },
+                { name: "Config", icon: Settings }
            ],
            centerIcon: Brain,
-            title: "Tool Integration",
-            description: "Connect agents to your existing tools and let them take action across your entire stack.",
+            title: "Tool Integration",            description: "Connect agents to your existing tools and let them take action across your entire stack."
+        }
+    ];
+
+    const integrations = [
+        {
+            id: "telegram",            title: "Telegram Bot",            description: "Automate interactions and deliver real-time updates through custom Telegram bots.",            tags: ["Messaging", "Automation"],
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/integrations/telegram.webp"
        },
+        {
+            id: "whatsapp",            title: "WhatsApp Business",            description: "Engage customers directly on WhatsApp for support, notifications, and marketing.",            tags: ["Messaging", "Customer Service"],
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/integrations/whatsapp.webp"
+        },
+        {
+            id: "instagram",            title: "Instagram Management",            description: "Schedule posts, respond to DMs, and analyze performance directly from our platform.",            tags: ["Social Media", "Marketing"],
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/integrations/instagram.webp"
+        },
+        {
+            id: "tiktok",            title: "TikTok Integration",            description: "Manage content, track trends, and automate campaigns on the fastest-growing social platform.",            tags: ["Social Media", "Marketing"],
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/integrations/tiktok.webp"
+        },
+        {
+            id: "google-maps",            title: "Google Maps API",            description: "Integrate location services, geotagging, and mapping functionalities into your applications.",            tags: ["Location", "Mapping"],
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/integrations/google-maps.webp"
+        },
+        {
+            id: "cloudinary",            title: "Cloudinary Asset Management",            description: "Store, optimize, and deliver images and videos efficiently with Cloudinary integration.",            tags: ["Media", "Storage"],
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/integrations/cloudinary.webp"
+        },
+        {
+            id: "email-automation",            title: "Email Automation",            description: "Automate personalized email campaigns, newsletters, and transactional messages.",            tags: ["Marketing", "Communication"],
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/integrations/email.webp"
+        },
+        {
+            id: "sms-gateway",            title: "SMS Gateway",            description: "Send automated SMS notifications, alerts, and marketing messages globally.",            tags: ["Messaging", "Communication"],
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/integrations/sms.webp"
+        },
+        {
+            id: "analytics",            title: "Advanced Analytics",            description: "Gain deep insights into user behavior, agent performance, and business metrics.",            tags: ["Data", "Insights"],
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/integrations/analytics.webp"
+        },
+        {
+            id: "crm",            title: "CRM Sync",            description: "Keep your customer data synchronized across all platforms for a unified view.",            tags: ["Sales", "Customer Management"],
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/integrations/crm.webp"
+        },
+        {
+            id: "live-chat",            title: "Live Chat Support",            description: "Provide real-time support to your customers directly on your website or app.",            tags: ["Customer Service", "Engagement"],
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/integrations/live-chat.webp"
+        },
+        {
+            id: "support-system",            title: "Helpdesk & Support System",            description: "Streamline customer inquiries and provide efficient support with integrated helpdesk tools.",            tags: ["Customer Service", "Helpdesk"],
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/integrations/support.webp"
+        },
+        {
+            id: "faq-integration",            title: "Automated FAQ",            description: "Deploy AI agents to answer common questions instantly, reducing support load.",            tags: ["Customer Service", "Knowledge Base"],
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/integrations/faq.webp"
+        }
    ];

    const testimonials = [
        {
-            id: "1",
-            name: "Sarah Chen",
-            handle: "CTO at DataFlow",
-            testimonial: "AgentFlow cut our data processing time by 80%. The agents handle complex workflows that used to require a team of engineers.",
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/testimonial/testimonial1.webp",
-            imageAlt: "Sarah Chen",
+            id: "1",            name: "Sarah Chen",            handle: "CTO at DataFlow",            testimonial: "AgentFlow cut our data processing time by 80%. The agents handle complex workflows that used to require a team of engineers.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/testimonial/testimonial1.webp",            imageAlt: "Sarah Chen"
        },
        {
-            id: "2",
-            name: "Marcus Rodriguez",
-            handle: "VP Engineering at ScaleUp",
-            testimonial: "We deployed 50 agents in production within a week. The reliability and observability tools are exceptional.",
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/testimonial/testimonial2.webp",
-            imageAlt: "Marcus Rodriguez",
+            id: "2",            name: "Marcus Rodriguez",            handle: "VP Engineering at ScaleUp",            testimonial: "We deployed 50 agents in production within a week. The reliability and observability tools are exceptional.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/testimonial/testimonial2.webp",            imageAlt: "Marcus Rodriguez"
        },
        {
-            id: "3",
-            name: "Emily Watson",
-            handle: "Head of AI at TechCorp",
-            testimonial: "Finally, an AI platform that lets us build agents that actually work in production. The tool integration is seamless.",
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/testimonial/testimonial3.webp",
-            imageAlt: "Emily Watson",
+            id: "3",            name: "Emily Watson",            handle: "Head of AI at TechCorp",            testimonial: "Finally, an AI platform that lets us build agents that actually work in production. The tool integration is seamless.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/testimonial/testimonial3.webp",            imageAlt: "Emily Watson"
        },
        {
-            id: "4",
-            name: "Maria Park",
-            handle: "Founder at AutomateAI",
-            testimonial: "AgentFlow's natural language interface means our non-technical team can now build and deploy their own agents.",
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif",
-            imageAlt: "Maria Park",
+            id: "4",            name: "Maria Park",            handle: "Founder at AutomateAI",            testimonial: "AgentFlow's natural language interface means our non-technical team can now build and deploy their own agents.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif",            imageAlt: "Maria Park"
        },
        {
-            id: "5",
-            name: "Lisa Thompson",
-            handle: "Director of Ops at CloudScale",
-            testimonial: "The enterprise security features gave us confidence to deploy agents handling sensitive customer data.",
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image6.avif",
-            imageAlt: "Lisa Thompson",
+            id: "5",            name: "Lisa Thompson",            handle: "Director of Ops at CloudScale",            testimonial: "The enterprise security features gave us confidence to deploy agents handling sensitive customer data.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image6.avif",            imageAlt: "Lisa Thompson"
        },
        {
-            id: "6",
-            name: "Daniella Kim",
-            handle: "Lead Engineer at Nexus",
-            testimonial: "We went from manual reporting to fully automated insights in days. Our agents now handle what took us hours.",
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image7.avif",
-            imageAlt: "Daniella Kim",
-        },
+            id: "6",            name: "Daniella Kim",            handle: "Lead Engineer at Nexus",            testimonial: "We went from manual reporting to fully automated insights in days. Our agents now handle what took us hours.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image7.avif",            imageAlt: "Daniella Kim"
+        }
    ];

    const pricingPlans = [
        {
-            id: "starter",
-            price: "$29/mo",
-            name: "Starter",
-            buttons: [{ text: "Get Started", href: "#" }],
+            id: "starter",            price: "$29/mo",            name: "Starter",            buttons: [{ text: "Get Started", href: "#" }],
            features: [
-                "3 active agents",
-                "5,000 agent runs/month",
-                "Basic integrations",
-                "Community support",
-                "7-day log retention",
-            ],
+                "3 active agents",                "5,000 agent runs/month",                "Basic integrations",                "Community support",                "7-day log retention"
+            ]
        },
        {
-            id: "pro",
-            price: "$99/mo",
-            name: "Professional",
-            buttons: [{ text: "Get Started", href: "#" }],
+            id: "pro",            price: "$99/mo",            name: "Professional",            buttons: [{ text: "Get Started", href: "#" }],
            features: [
-                "15 active agents",
-                "50,000 agent runs/month",
-                "All integrations",
-                "Email support",
-                "30-day log retention",
-            ],
+                "15 active agents",                "50,000 agent runs/month",                "All integrations",                "Email support",                "30-day log retention"
+            ]
        },
        {
-            id: "business",
-            badge: "Most Popular",
-            badgeIcon: Star,
-            price: "$299/mo",
-            name: "Business",
-            buttons: [{ text: "Get Started", href: "#" }],
+            id: "business",            badge: "Most Popular",            badgeIcon: Star,
+            price: "$299/mo",            name: "Business",            buttons: [{ text: "Get Started", href: "#" }],
            features: [
-                "50 active agents",
-                "250,000 agent runs/month",
-                "Custom integrations",
-                "Priority support",
-                "90-day log retention",
-            ],
+                "50 active agents",                "250,000 agent runs/month",                "Custom integrations",                "Priority support",                "90-day log retention"
+            ]
        },
        {
-            id: "enterprise",
-            price: "Custom",
-            name: "Enterprise",
-            buttons: [{ text: "Contact Sales", href: "#" }],
+            id: "enterprise",            price: "Custom",            name: "Enterprise",            buttons: [{ text: "Contact Sales", href: "#" }],
            features: [
-                "Unlimited agents",
-                "Unlimited agent runs",
-                "Dedicated integrations",
-                "24/7 dedicated support",
-                "Unlimited log retention",
-            ],
-        },
+                "Unlimited agents",                "Unlimited agent runs",                "Dedicated integrations",                "24/7 dedicated support",                "Unlimited log retention"
+            ]
+        }
    ];

    const faqs = [
        {
-            id: "1",
-            title: "What are AI agents and how do they work?",
-            content: "AI agents are autonomous software programs that can reason, plan, and execute tasks on your behalf. They use large language models combined with tool integrations to understand goals, break them into steps, and take action across your systems.",
+            id: "1",            title: "What are AI agents and how do they work?",            content: "AI agents are autonomous software programs that can reason, plan, and execute tasks on your behalf. They use large language models combined with tool integrations to understand goals, break them into steps, and take action across your systems."
        },
        {
-            id: "2",
-            title: "How long does it take to set up my first agent?",
-            content: "Most users have their first agent running within 15 minutes. Our intuitive interface and pre-built templates make it easy to get started, and our documentation covers everything from basic setup to advanced configurations.",
+            id: "2",            title: "How long does it take to set up my first agent?",            content: "Most users have their first agent running within 15 minutes. Our intuitive interface and pre-built templates make it easy to get started, and our documentation covers everything from basic setup to advanced configurations."
        },
        {
-            id: "3",
-            title: "What integrations are available?",
-            content: "AgentFlow connects with 100+ popular tools including Slack, GitHub, Jira, Salesforce, Google Workspace, and more. We also provide APIs and SDKs for custom integrations with your internal systems.",
+            id: "3",            title: "What integrations are available?",            content: "AgentFlow connects with 100+ popular tools including Slack, GitHub, Jira, Salesforce, Google Workspace, and more. We also provide APIs and SDKs for custom integrations with your internal systems."
        },
        {
-            id: "4",
-            title: "Is my data secure with AgentFlow?",
-            content: "Security is our top priority. We're SOC 2 Type II certified, use end-to-end encryption, and never train on your data. Enterprise plans include additional features like SSO, audit logs, and dedicated infrastructure.",
+            id: "4",            title: "Is my data secure with AgentFlow?",            content: "Security is our top priority. We're SOC 2 Type II certified, use end-to-end encryption, and never train on your data. Enterprise plans include additional features like SSO, audit logs, and dedicated infrastructure."
        },
        {
-            id: "5",
-            title: "Can I control what actions agents can take?",
-            content: "Yes, you have full control over agent permissions. Set granular access controls, require approvals for sensitive actions, and monitor all agent activity in real-time through our dashboard.",
+            id: "5",            title: "Can I control what actions agents can take?",            content: "Yes, you have full control over agent permissions. Set granular access controls, require approvals for sensitive actions, and monitor all agent activity in real-time through our dashboard."
        },
        {
-            id: "6",
-            title: "What happens if I exceed my plan limits?",
-            content: "We'll notify you when you're approaching your limits. You can upgrade anytime, and we offer flexible overage pricing so your agents won't stop working unexpectedly.",
-        },
+            id: "6",            title: "What happens if I exceed my plan limits?",            content: "We'll notify you when you're approaching your limits. You can upgrade anytime, and we offer flexible overage pricing so your agents won't stop working unexpectedly."
+        }
    ];

    const footerColumns = [
        {
-            title: "Product",
-            items: [
+            title: "Product",            items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
-                { label: "Integrations", href: "#" },
-                { label: "Changelog", href: "#" },
-            ],
+                { label: "Integrations", href: "#integrations" },
+                { label: "Changelog", href: "#" }
+            ]
        },
        {
-            title: "Resources",
-            items: [
+            title: "Resources",            items: [
                { label: "Documentation", href: "#" },
                { label: "API Reference", href: "#" },
                { label: "Tutorials", href: "#" },
-                { label: "Blog", href: "#" },
-            ],
+                { label: "Blog", href: "#" }
+            ]
        },
        {
-            title: "Company",
-            items: [
+            title: "Company",            items: [
                { label: "About", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#contact" },
-                { label: "Press", href: "#" },
-            ],
-        },
+                { label: "Press", href: "#" }
+            ]
+        }
    ];

    return (
@@ -257,44 +233,36 @@ export default function AIAgentsTemplatePage() {
                description="Deploy intelligent agents that can reason, use tools, and collaborate to automate your most complex workflows."
                buttons={[
                    { text: "Get Started", href: "#" },
-                    { text: "Learn More", href: "#" },
+                    { text: "Learn More", href: "#" }
                ]}
                dashboard={{
-                    title: "Agent Control Center",
-                    logoIcon: Bot,
-                    imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face",
-                    imageAlt: "Operator avatar",
-                    buttons: [
+                    title: "Agent Control Center",                    logoIcon: Bot,
+                    imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face",                    imageAlt: "Operator avatar",                    buttons: [
                        { text: "Deploy Agent", href: "#" },
-                        { text: "View Logs", href: "#" },
+                        { text: "View Logs", href: "#" }
                    ],
                    sidebarItems: [
                        { icon: Activity, active: true },
                        { icon: Brain },
                        { icon: Database },
                        { icon: Workflow },
-                        { icon: Settings },
+                        { icon: Settings }
                    ],
                    stats: [
                        {
-                            title: "Active Agents",
-                            values: [47, 52, 49],
-                            description: "Autonomous agents currently running across all workflows.",
+                            title: "Active Agents",                            values: [47, 52, 49],
+                            description: "Autonomous agents currently running across all workflows."
                        },
                        {
-                            title: "Tasks Completed",
-                            values: [12840, 15230, 14100],
-                            description: "Total tasks executed by agents in the current billing cycle.",
+                            title: "Tasks Completed",                            values: [12840, 15230, 14100],
+                            description: "Total tasks executed by agents in the current billing cycle."
                        },
                        {
-                            title: "Avg Response Time",
-                            values: [84, 72, 91],
-                            valueSuffix: "ms",
-                            description: "Mean latency across all agent tool calls and reasoning steps.",
-                        },
+                            title: "Avg Response Time",                            values: [84, 72, 91],
+                            valueSuffix: "ms",                            description: "Mean latency across all agent tool calls and reasoning steps."
+                        }
                    ],
-                    chartTitle: "Agent Runs (24h)",
-                    chartData: [
+                    chartTitle: "Agent Runs (24h)",                    chartData: [
                        { value: 120 },
                        { value: 85 },
                        { value: 140 },
@@ -302,10 +270,9 @@ export default function AIAgentsTemplatePage() {
                        { value: 170 },
                        { value: 130 },
                        { value: 155 },
-                        { value: 110 },
+                        { value: 110 }
                    ],
-                    listTitle: "Recent Agent Activity",
-                    listItems: [
+                    listTitle: "Recent Agent Activity",                    listItems: [
                        { icon: CheckCircle, title: "Report generated: Q4 Sales", status: "Completed" },
                        { icon: Search, title: "Web research: competitor pricing", status: "Running" },
                        { icon: Send, title: "Email drafted: client follow-up", status: "Completed" },
@@ -315,8 +282,8 @@ export default function AIAgentsTemplatePage() {
                        { icon: Shield, title: "Security scan: api-gateway", status: "Completed" },
                        { icon: BarChart3, title: "Dashboard updated: KPIs", status: "Completed" },
                        { icon: Clock, title: "Scheduled: weekly digest", status: "Pending" },
-                        { icon: Brain, title: "Model fine-tune: support-v2", status: "Running" },
-                    ],
+                        { icon: Brain, title: "Model fine-tune: support-v2", status: "Running" }
+                    ]
                }}
            />
            <div id="features">
@@ -342,26 +309,34 @@ export default function AIAgentsTemplatePage() {
                features={[
                    {
                        icon: GitBranch,
-                        title: "Version Control",
-                        description: "Track every change to your agent logic with built-in versioning. Roll back instantly if something goes wrong.",
+                        title: "Version Control",                        description: "Track every change to your agent logic with built-in versioning. Roll back instantly if something goes wrong."
                    },
                    {
                        icon: Shield,
-                        title: "Enterprise Security",
-                        description: "SOC 2 compliant with end-to-end encryption, SSO, and granular role-based access controls for every agent.",
+                        title: "Enterprise Security",                        description: "SOC 2 compliant with end-to-end encryption, SSO, and granular role-based access controls for every agent."
                    },
                    {
                        icon: Eye,
-                        title: "Full Observability",
-                        description: "Monitor every reasoning step, tool call, and decision your agents make with real-time logs and tracing.",
+                        title: "Full Observability",                        description: "Monitor every reasoning step, tool call, and decision your agents make with real-time logs and tracing."
                    },
                    {
                        icon: Lock,
-                        title: "Permission Guards",
-                        description: "Define exactly what each agent can access and do. Require human approval for sensitive or irreversible actions.",
-                    },
+                        title: "Permission Guards",                        description: "Define exactly what each agent can access and do. Require human approval for sensitive or irreversible actions."
+                    }
                ]}
            />
+            <div id="integrations" data-section="integrations">
+                <FeatureCardTwentyFour
+                    features={integrations}
+                    animationType="slide-up"
+                    title="Seamlessly Integrate with Your Favorite Platforms"
+                    description="Connect AgentFlow to essential tools for messaging, marketing, analytics, and more to unify your workflows."
+                    tag="Integrations"
+                    tagIcon={Workflow}
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                />
+            </div>
            <MetricSplitMediaAbout
                tag="Why AgentFlow"
                tagIcon={Zap}
@@ -369,7 +344,7 @@ export default function AIAgentsTemplatePage() {
                description="Our battle-tested infrastructure handles millions of agent runs daily across organizations of all sizes. With enterprise-grade reliability, SOC 2 compliance, and end-to-end encryption built in from day one, you can deploy with confidence knowing your agents and data are secure."
                metrics={[
                    { value: "99.9%", title: "Uptime SLA" },
-                    { value: "<100ms", title: "Average Response Time" },
+                    { value: "<100ms", title: "Average Response Time" }
                ]}
                imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/ai-agents/image1.webp"
                imageAlt="AgentFlow Dashboard"
@@ -417,7 +392,7 @@ export default function AIAgentsTemplatePage() {
                    description="Join thousands of teams using AgentFlow to automate their workflows and unlock new levels of productivity. Start your free trial today."
                    buttons={[
                        { text: "Start Free Trial", href: "#" },
-                        { text: "Talk to Sales", href: "#" },
+                        { text: "Talk to Sales", href: "#" }
                    ]}
                    background={{ variant: "canvas-reveal" }}
                    useInvertedBackground={false}
--- a/src/app/payment/page.tsx
+++ b/src/app/payment/page.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { CreditCard, Apple, Google, Paypal, Banknote, MousePointerClick, Wallet, Receipt, History, Repeat, PiggyBank, Bookmark } from "lucide-react";
+
+export default function PaymentSystemPage() {
+    const navItems = [
+        { name: "Features", id: "features" },
+        { name: "Pricing", id: "pricing" },
+        { name: "Payments", href: "/payment" },
+        { name: "Docs", id: "docs" },
+        { name: "Contact", id: "contact" }
+    ];
+
+    const footerColumns = [
+        {
+            title: "Product",            items: [
+                { label: "Features", href: "/#features" },
+                { label: "Pricing", href: "/#pricing" },
+                { label: "Integrations", href: "#" },
+                { label: "Changelog", href: "#" },
+            ],
+        },
+        {
+            title: "Resources",            items: [
+                { label: "Documentation", href: "#" },
+                { label: "API Reference", href: "#" },
+                { label: "Tutorials", href: "#" },
+                { label: "Blog", href: "#" },
+            ],
+        },
+        {
+            title: "Company",            items: [
+                { label: "About", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "/#contact" },
+                { label: "Press", href: "#" },
+            ],
+        },
+    ];
+
+    const paymentFeatures = [
+        {
+            id: "stripe",            title: "Stripe Integration",            descriptions: ["Seamlessly process payments using the industry-leading Stripe platform, ensuring reliability and security."],
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/payment/stripe-logo.png?_wi=1"
+        },
+        {
+            id: "apple-pay",            title: "Apple Pay Support",            descriptions: ["Offer customers a fast and secure checkout experience with Apple Pay, reducing friction and increasing conversions."],
+            icon: Apple
+        },
+        {
+            id: "google-pay",            title: "Google Pay Support",            descriptions: ["Integrate Google Pay for Android users, providing another convenient and widely adopted payment method."],
+            icon: Google
+        },
+        {
+            id: "paypal",            title: "PayPal Payments",            descriptions: ["Accept payments via PayPal, a trusted choice for millions of users worldwide."],
+            icon: Paypal
+        },
+        {
+            id: "bank-cards",            title: "Bank Card Processing",            descriptions: ["Support all major credit and debit cards, including Visa, Mastercard, American Express, and Discover."],
+            icon: CreditCard
+        },
+        {
+            id: "one-click",            title: "One-Click Payments",            descriptions: ["Enable lightning-fast checkouts for returning customers with secure one-click payment options."],
+            icon: MousePointerClick
+        },
+        {
+            id: "saved-cards",            title: "Saved Card Management",            descriptions: ["Allow users to securely save multiple payment methods for future purchases, enhancing convenience."],
+            icon: Bookmark
+        },
+        {
+            id: "deposits",            title: "Customer Deposits",            descriptions: ["Manage customer deposits for bookings, pre-orders, or services, with clear tracking and reconciliation."],
+            icon: Wallet
+        },
+        {
+            id: "tips",            title: "Tipping Functionality",            descriptions: ["Integrate an optional tipping system, allowing customers to show appreciation for exceptional service."],
+            icon: PiggyBank
+        },
+        {
+            id: "invoices",            title: "Automated Invoicing",            descriptions: ["Generate professional invoices automatically for every transaction, streamlining your billing process."],
+            icon: Receipt
+        },
+        {
+            id: "refunds",            title: "Easy Refunds",            descriptions: ["Process full or partial refunds directly from your dashboard with just a few clicks."],
+            icon: Repeat
+        },
+        {
+            id: "history",            title: "Payment History",            descriptions: ["Access a comprehensive transaction history, including status, details, and customer information."],
+            icon: History
+        }
+    ];
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="background-highlight"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="gradient-bordered"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="layered"
+            headingFontWeight="semibold"
+        >
+            <NavbarStyleFullscreen
+                navItems={navItems}
+                brandName="AgentFlow"
+                bottomLeftText="Build Smarter"
+                bottomRightText="hello@agentflow.ai"
+            />
+
+            <FeatureCardTwentySeven
+                animationType="slide-up"
+                tag="Payments"
+                tagIcon={CreditCard}
+                title="Comprehensive Payment System"
+                description="Manage all your transactions with a robust payment solution supporting multiple methods, secure storage, and advanced features."
+                textboxLayout="default"
+                useInvertedBackground={false}
+                features={paymentFeatures}
+            />
+
+            <FooterBaseCard
+                logoText="AgentFlow"
+                columns={footerColumns}
+                copyrightText="© 2025 AgentFlow. All rights reserved."
+            />
+        </ThemeProvider>
+    );
+}
--- a/src/app/salon-admin/page.tsx
+++ b/src/app/salon-admin/page.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroSplit from "@/components/sections/hero/HeroSplit";
+import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
+import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Settings, Users, Calendar, User, Boxes, CreditCard, Gift, BarChart3, Activity, FileText, Bot } from "lucide-react";
+
+export default function SalonAdminPanelPage() {
+    const navItems = [
+        { name: "Admin Panel", id: "/salon-admin" },
+        { name: "Features", id: "features" },
+        { name: "Pricing", id: "pricing" },
+        { name: "Docs", id: "docs" },
+        { name: "Contact", id: "contact" }
+    ];
+
+    const featureCards = [
+        {
+            title: "Staff Management",            description: "Efficiently manage your team members, roles, and schedules.",            icon: Users,
+        },
+        {
+            title: "Appointment Management",            description: "Streamline booking, rescheduling, and cancellation of appointments.",            icon: Calendar,
+        },
+        {
+            title: "Customer Management",            description: "Maintain detailed customer profiles, history, and preferences.",            icon: User,
+        },
+        {
+            title: "Inventory Management",            description: "Track and manage product stock, supplies, and orders.",            icon: Boxes,
+        },
+        {
+            title: "Payroll Management",            description: "Automate payroll processing, commission, and staff payments.",            icon: CreditCard,
+        },
+        {
+            title: "Coupons & Promotions",            description: "Create and manage discounts, loyalty programs, and marketing campaigns.",            icon: Gift,
+        },
+    ].map(feature => ({
+        ...feature,
+        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/ai-agents/image1.webp",        imageAlt: feature.title
+    })); // Add placeholder image to satisfy propsSchema
+
+    const metrics = [
+        { id: "1", value: "$12,345", title: "Revenue This Month", description: "Total earnings from services and products.", icon: BarChart3 },
+        { id: "2", value: "+15%", title: "Growth Rate", description: "Month-over-month revenue increase.", icon: Activity },
+        { id: "3", value: "180", title: "Appointments Booked", description: "Number of client appointments this week.", icon: Calendar },
+        { id: "4", value: "32", title: "New Customers", description: "New clients acquired in the last 30 days.", icon: Users },
+        { id: "5", value: "$2,500", title: "Inventory Value", description: "Current value of salon product stock.", icon: Boxes },
+        { id: "6", value: "85%", title: "Staff Utilization", description: "Average booking rate for salon staff.", icon: Settings }
+    ];
+
+    const footerColumns = [
+        {
+            title: "Product",            items: [
+                { label: "Features", href: "#features" },
+                { label: "Pricing", href: "#pricing" },
+                { label: "Integrations", href: "#" },
+                { label: "Changelog", href: "#" },
+            ],
+        },
+        {
+            title: "Resources",            items: [
+                { label: "Documentation", href: "#" },
+                { label: "API Reference", href: "#" },
+                { label: "Tutorials", href: "#" },
+                { label: "Blog", href: "#" },
+            ],
+        },
+        {
+            title: "Company",            items: [
+                { label: "About", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "#contact" },
+                { label: "Press", href: "#" },
+            ],
+        },
+    ];
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="background-highlight"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="gradient-bordered"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="layered"
+            headingFontWeight="semibold"
+        >
+            <NavbarStyleFullscreen
+                navItems={navItems}
+                brandName="AgentFlow"
+                bottomLeftText="Build Smarter"
+                bottomRightText="hello@agentflow.ai"
+            />
+            <div id="hero">
+                <HeroSplit
+                    background={{ variant: "radial-gradient" }}
+                    tag="Salon Administration"
+                    tagIcon={Settings}
+                    title="Empower Your Salon Operations with Smart Management"
+                    description="A comprehensive admin panel to manage staff, appointments, customers, and finances with ease. Take control of your salon's success."
+                    buttons={[
+                        { text: "Get Started", href: "#" },
+                        { text: "Learn More", href: "#features" },
+                    ]}
+                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/ai-agents/image1.webp"
+                    imageAlt="Salon Admin Panel Dashboard"
+                    mediaAnimation="slide-up"
+                    imagePosition="right"
+                />
+            </div>
+            <div id="features">
+                <FeatureCardOne
+                    features={featureCards}
+                    animationType="slide-up"
+                    gridVariant="three-columns-all-equal-width"
+                    tag="Key Features"
+                    tagIcon={Bot}
+                    title="All-in-One Salon Management Solution"
+                    description="From staff coordination to client relationships, our platform handles every aspect of your salon operations."
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                />
+            </div>
+            <div id="analytics">
+                <MetricCardOne
+                    metrics={metrics}
+                    animationType="slide-up"
+                    gridVariant="uniform-all-items-equal"
+                    tag="Performance Insights"
+                    tagIcon={BarChart3}
+                    title="Unlock Your Salon's Growth Potential"
+                    description="Gain real-time insights into your revenue, appointments, and customer base with advanced analytics."
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                />
+            </div>
+            <FooterBaseCard
+                logoText="AgentFlow"
+                columns={footerColumns}
+                copyrightText="© 2025 AgentFlow. All rights reserved."
+            />
+        </ThemeProvider>
+    );
+}
--- a/src/i18n-config.ts
+++ b/src/i18n-config.ts
@@ -0,0 +1,8 @@
+export const i18n = {
+  defaultLocale: 'en',
+  locales: ['en', 'ru', 'es', 'de', 'fr', 'it', 'pt', 'pl', 'tr', 'ar', 'zh', 'ja', 'uk'],
+  localeDetection: true,
+  rtlLocales: ['ar'], // Arabic is Right-To-Left
+};
+
+export type Locale = (typeof i18n)['locales'][number];
--- a/src/lib/animations/framer-motion-wrapper.tsx
+++ b/src/lib/animations/framer-motion-wrapper.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import React from 'react';
+import { motion, AnimatePresence, Variants } from 'framer-motion';
+
+export { motion, AnimatePresence };
+export type { Variants };
+
+interface FramerMotionWrapperProps {
+  children: React.ReactNode;
+  variants?: Variants;
+  initial?: string | boolean;
+  animate?: string | boolean;
+  exit?: string | boolean;
+  transition?: object;
+  className?: string;
+  [key: string]: any; // Allows for other motion props
+}
+
+/**
+ * A generic Framer Motion wrapper for animating elements.
+ * Provides a simple way to use `motion.div` with common animation properties.
+ */
+export function FramerMotionWrapper({
+  children,
+  variants,
+  initial = "hidden",  animate = "visible",  exit = "exit",  transition,
+  className,
+  ...rest
+}: FramerMotionWrapperProps) {
+  return (
+    <motion.div
+      variants={variants}
+      initial={initial}
+      animate={animate}
+      exit={exit}
+      transition={transition}
+      className={className}
+      {...rest}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+// Example variants for common animations
+export const fadeInVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: { duration: 0.8 } },
+  exit: { opacity: 0, transition: { duration: 0.5 } },
+};
+
+export const slideUpVariants: Variants = {
+  hidden: { opacity: 0, y: 50 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.7, ease: "easeOut" } },
+  exit: { opacity: 0, y: -50, transition: { duration: 0.4, ease: "easeIn" } },
+};
--- a/src/lib/animations/gsap-utils.ts
+++ b/src/lib/animations/gsap-utils.ts
@@ -0,0 +1,65 @@
+"use client";
+
+import { useEffect } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+// Register ScrollTrigger globally once
+gsap.registerPlugin(ScrollTrigger);
+
+/**
+ * Custom hook to manage GSAP animations, ensuring proper cleanup.
+ * @param animationFn A function that defines the GSAP animation(s).
+ * @param dependencies Dependencies for the useEffect hook.
+ */
+export function useGsapAnimation(animationFn: () => gsap.core.Tween | gsap.core.Timeline | void, dependencies: React.DependencyList = []) {
+  useEffect(() => {
+    const animation = animationFn();
+    return () => {
+      // Kill the animation on unmount to prevent memory leaks
+      if (animation && 'kill' in animation) {
+        animation.kill();
+      }
+      // Also clean up ScrollTrigger instances associated with elements, if applicable.
+      // This is more complex and usually handled within specific component ScrollTrigger setups.
+      // For general cases, ensure ScrollTrigger contexts are used if many triggers are made.
+    };
+  }, dependencies);
+}
+
+/**
+ * Helper function for creating a simple fade-in-up animation on scroll.
+ */
+export const fadeInUp = (target: gsap.DOMTarget, options?: ScrollTrigger.Vars) => {
+  return gsap.fromTo(target,
+    { autoAlpha: 0, y: 50 },
+    {
+      autoAlpha: 1,
+      y: 0,
+      duration: 1,
+      ease: "power3.out",      scrollTrigger: {
+        trigger: target,
+        start: "top 80%",        end: "bottom 20%",        toggleActions: "play none none reverse",        ...options
+      }
+    }
+  );
+};
+
+/**
+ * Helper function for horizontal scroll animation.
+ */
+export const horizontalScroll = (section: gsap.DOMTarget, panels: gsap.DOMTarget[], options?: ScrollTrigger.Vars) => {
+  if (!section || !panels || panels.length === 0) return;
+
+  gsap.to(panels, {
+    xPercent: -100 * (panels.length - 1),
+    ease: "none",    scrollTrigger: {
+      trigger: section,
+      pin: true,
+      scrub: 1,
+      snap: 1 / (panels.length - 1),
+      end: () => "+=" + section.offsetWidth, // Scrolls for the full width of the section
+      ...options
+    }
+  });
+};
--- a/src/lib/animations/lenis-smooth-scroll.tsx
+++ b/src/lib/animations/lenis-smooth-scroll.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { ReactNode, useEffect } from "react";
+import Lenis from "@studio-freight/lenis";
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+interface LenisProviderProps {
+  children: ReactNode;
+  root?: boolean; // If true, applies to the window scroll. If false, applies to a specific div.
+  className?: string; // Only relevant if root is false
+}
+
+/**
+ * Provides smooth scrolling using Lenis.
+ * This component should ideally wrap the entire application in layout.tsx.
+ * If `root` is false, it can be applied to a specific scrollable div.
+ */
+export function LenisSmoothScroll({ children, root = true, className }: LenisProviderProps) {
+  useEffect(() => {
+    const lenis = new Lenis({
+      duration: 1.2,
+      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://www.desmos.com/calculator/brs54l4xgi
+      orientation: "vertical",      gestureOrientation: "vertical",      smoothWheel: true,
+      wheelMultiplier: 1,
+      smoothTouch: false,
+      touchMultiplier: 2,
+      syncTouch: false,
+      infinite: false,
+    });
+
+    function raf(time: DOMHighResTimeStamp) {
+      lenis.raf(time);
+      requestAnimationFrame(raf);
+    }
+
+    requestAnimationFrame(raf);
+
+    // Integrate with GSAP ScrollTrigger
+    // This is crucial for GSAP ScrollTrigger to work correctly with Lenis.
+    // Ensure GSAP and ScrollTrigger are already registered globally or imported locally.
+    const syncScroll = () => {
+      // Check if GSAP and ScrollTrigger are available globally or imported.
+      // If using GSAP context, pass the context.
+      if (typeof window !== 'undefined' && window.innerWidth > 768) { // Example: only enable for larger screens
+        lenis.on('scroll', ScrollTrigger.update);
+        gsap.ticker.add((time) => {
+          lenis.raf(time * 1000)
+        })
+        gsap.ticker.lagSmoothing(0)
+      }
+    };
+
+    // Delay syncScroll to ensure ScrollTrigger is registered if it's external
+    const timeout = setTimeout(syncScroll, 0);
+
+
+    return () => {
+      clearTimeout(timeout);
+      lenis.destroy();
+      // Remove the listener for GSAP ScrollTrigger if it was added
+      if (typeof window !== 'undefined' && window.innerWidth > 768) {
+        gsap.ticker.remove(lenis.raf)
+        // lenis.off('scroll', ScrollTrigger.update); // Lenis handles removing its own listeners
+      }
+    };
+  }, []);
+
+  if (root) {
+    return <>{children}</>;
+  } else {
+    // If not root, apply to a specific div
+    return (
+      <div className={className} style={{ overflowY: 'scroll' }}>
+        {children}
+      </div>
+    );
+  }
+}
Author	SHA1	Message	Date
bender	4c6e26cb4e	Add src/lib/animations/lenis-smooth-scroll.tsx	2026-06-09 23:37:50 +00:00
bender	6fc5a31513	Add src/lib/animations/gsap-utils.ts	2026-06-09 23:37:50 +00:00
bender	59d0c88a8d	Add src/lib/animations/framer-motion-wrapper.tsx	2026-06-09 23:37:49 +00:00
bender	b2edd6c478	Add src/i18n-config.ts	2026-06-09 23:37:49 +00:00
bender	c7f358ba2d	Add src/app/salon-admin/page.tsx	2026-06-09 23:37:48 +00:00
bender	65bbd09e2b	Add src/app/payment/page.tsx	2026-06-09 23:37:48 +00:00
bender	157c936136	Update src/app/page.tsx	2026-06-09 23:37:48 +00:00
bender	8a9fdc91a1	Add src/app/docs/page.tsx	2026-06-09 23:37:47 +00:00
bender	b954fadb41	Add src/app/booking/page.tsx	2026-06-09 23:37:47 +00:00
bender	4f64815da6	Add src/app/barber-dashboard/page.tsx	2026-06-09 23:37:46 +00:00
bender	6251823f75	Add src/app/ai-style-recommendation/page.tsx	2026-06-09 23:37:46 +00:00
bender	9b2a4fffe3	Add src/app/admin/page.tsx	2026-06-09 23:37:45 +00:00