Update src/app/layout.tsx

Merge version_15 into main

src/app/contact/page.tsx

@@ -1,98 +1,70 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
-import { useEffect } from "react";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import ContactForm from "@/components/form/ContactForm";
+import FooterCard from "@/components/sections/footer/FooterCard";
+import { Mail, Twitter, Linkedin } from "lucide-react";
 
 export default function ContactPage() {
-  useEffect(() => {
-    const script = document.createElement("script");
-    script.src = "https://assets.calendly.com/assets/external/widget.js";
-    script.async = true;
-    document.body.appendChild(script);
-    return () => {
-      document.body.removeChild(script);
-    };
-  }, []);
-
   return (
     <ThemeProvider
-      defaultButtonVariant="bounce-effect"
+      defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
-      borderRadius="pill"
-      contentWidth="mediumLarge"
-      sizing="mediumSizeLargeTitles"
-      background="noise"
-      cardStyle="soft-shadow"
-      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="solid"
-      headingFontWeight="light"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingOverlay
-          brandName="billiclipd"
+        <NavbarStyleFullscreen
           navItems={[
-            { name: "Case Studies", id: "case-studies" },
-            { name: "About", id: "about" },
-            { name: "Process", id: "process" },
+            { name: "Home", id: "/" },
+            { name: "Features", id: "#features" },
+            { name: "About", id: "#about" },
             { name: "Contact", id: "/contact" },
           ]}
-          button={{
-            text: "Book A Call",            href: "https://calendly.com"
-          }}
+          brandName="billiclipd"
+          bottomLeftText="Global Community"
+          bottomRightText="hello@example.com"
         />
       </div>
 
-      <div className="min-h-screen pt-20 pb-20">
-        <div className="flex flex-col items-center justify-center">
-          <div className="w-full max-w-4xl px-4 sm:px-6 lg:px-8">
-            <div className="text-center mb-12">
-              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-4">
-                Schedule a Call With Me
-              </h1>
-              <p className="text-lg sm:text-xl text-foreground/70">
-                Book a time that works for you. Let's discuss your project and how I can help you turn your content into viral clips.
-              </p>
-            </div>
-
-            <div className="w-full bg-card rounded-2xl p-4 sm:p-6 lg:p-8 shadow-lg">
-              <div
-                className="calendly-inline-widget w-full h-screen min-h-[800px] sm:min-h-[900px] lg:min-h-[1000px]"
-                data-url="https://calendly.com/ibbiyousuf420/30min"
-              ></div>
-            </div>
-          </div>
+      <div className="flex items-center justify-center min-h-screen py-20">
+        <div className="w-full">
+          <ContactForm
+            title="Get in Touch"
+            description="Ready to turn your content into viral clips? Reach out to our team and let's discuss your project."
+            tag="Contact Us"
+            tagIcon={Mail}
+            inputPlaceholder="your@email.com"
+            buttonText="Send Message"
+            termsText="We'll get back to you within 24 hours."
+            centered={true}
+            useInvertedBackground={false}
+            onSubmit={(email) => console.log("Email:", email)}
+          />
         </div>
       </div>
 
-      <div id="footer" data-section="footer">
-        <FooterLogoEmphasis
-          logoText="billiclipd"
-          columns={[
-            {
-              items: [
-                { label: "Home", href: "/" },
-                { label: "Case Studies", href: "#case-studies" },
-                { label: "Process", href: "#process" },
-              ],
-            },
-            {
-              items: [
-                { label: "About", href: "#about" },
-                { label: "FAQ", href: "#faq" },
-              ],
-            },
-            {
-              items: [
-                { label: "Contact", href: "/contact" },
-                { label: "Book A Call", href: "https://calendly.com" },
-                { label: "Privacy Policy", href: "#" },
-              ],
-            },
-          ]}
-        />
-      </div>
+      <FooterCard
+        logoText="billiclipd"
+        copyrightText="© 2025 | billiclipd. All rights reserved."
+        socialLinks={[
+          {
+            icon: Twitter,
+            href: "https://twitter.com/billiclipd",            ariaLabel: "Twitter"
+          },
+          {
+            icon: Linkedin,
+            href: "https://linkedin.com/company/billiclipd",            ariaLabel: "LinkedIn"
+          },
+        ]}
+      />
     </ThemeProvider>
   );
 }

src/app/layout.tsx

@@ -1,14 +1,14 @@
 import type { Metadata } from "next";
-import { Poppins } from "next/font/google";
-import "./globals.css";
+import "./styles/globals.css";
+import { Inter } from "next/font/google";
 
-const poppins = Poppins({
-  variable: "--font-poppins",  subsets: ["latin"],
-  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+const inter = Inter({
+  variable: "--font-inter",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "billiclipd | Viral Clip Specialist",  description: "Turn longform content into viral clips for TikTok, Instagram Reels, and YouTube Shorts. Expert clipping services with 10M+ views generated."};
+  title: "billiclipd | Viral Clip Editing Services",  description: "Transform your long-form content into viral clips. Expert editing for TikTok, Instagram Reels, and YouTube Shorts. 10M+ views generated."
+};
 
 export default function RootLayout({
   children,
@@ -17,8 +17,21 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={`${poppins.variable}`}>
+      <body className={inter.variable}>
         {children}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              try {
+                if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                  document.documentElement.classList.add('dark')
+                } else {
+                  document.documentElement.classList.remove('dark')
+                }
+              } catch (e) {}
+            `,
+          }}
+        />
       
         <script
           dangerouslySetInnerHTML={{

src/app/page.tsx

@@ -2,285 +2,141 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
-import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
-import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
-import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
-import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
-import FaqBase from "@/components/sections/faq/FaqBase";
-import ContactText from "@/components/sections/contact/ContactText";
-import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
-import ProductCardFour from "@/components/sections/product/ProductCardFour";
-import {
-  Sparkles,
-  TrendingUp,
-  Zap,
-  BarChart3,
-  Trophy,
-  HelpCircle,
-  Eye,
-  Users,
-  Award,
-} from "lucide-react";
+import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
+import SplitAbout from "@/components/sections/about/SplitAbout";
+import ContactFaq from "@/components/sections/contact/ContactFaq";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { Phone, Users } from "lucide-react";
 
-export default function LandingPage() {
+export default function Page() {
   return (
     <ThemeProvider
-      defaultButtonVariant="bounce-effect"
+      defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
-      borderRadius="pill"
-      contentWidth="mediumLarge"
-      sizing="mediumSizeLargeTitles"
-      background="noise"
-      cardStyle="soft-shadow"
-      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="solid"
-      headingFontWeight="light"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
-          brandName="billiclipd"
           navItems={[
-            { name: "Case Studies", id: "case-studies" },
-            { name: "About", id: "about" },
-            { name: "Process", id: "process" },
-            { name: "Contact", id: "contact" },
+            { name: "Home", id: "/" },
+            { name: "About", id: "#about" },
+            { name: "Contact", id: "#contact" }
           ]}
+          brandName="billiclipd"
           button={{
-            text: "Book A Call",            href: "https://calendly.com"
+            text: "Book a Call",            href: "https://calendly.com/ibbiyousuf420/30min"
           }}
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroSplitDoubleCarousel
-          title="Turn LongForm Into Viral Clips"
-          description="I transform your best podcast, stream, and video moments into high-retention shortform content optimized for TikTok, Instagram Reels, and YouTube Shorts. More views, more followers, more growth—no ad spend required."
-          tag="Shortform Specialist"
-          tagIcon={Sparkles}
-          tagAnimation="slide-up"
+        <HeroSplitKpi
+          title="Turn Longform Content Into Viral Clips"
+          description="Expert clip editing services that transform your YouTube videos, podcasts, and streams into viral TikToks, Instagram Reels, and YouTube Shorts. We've generated 10M+ views for creators."
           background={{ variant: "glowing-orb" }}
-          leftCarouselItems={[
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-mr1xedhd.jpg?_wi=1",              imageAlt: "TikTok viral clip example"
-            },
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-h65hjshx.jpg?_wi=1",              imageAlt: "Professional editing dashboard"
-            },
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-1pjxjkc4.jpg?_wi=1",              imageAlt: "Instagram Reels clip"
-            },
+          tag="Trusted by 500+ Creators"
+          tagIcon={Users}
+          tagAnimation="slide-up"
+          kpis={[
+            { value: "10M+", label: "Views Generated" },
+            { value: "99.8%", label: "Client Satisfaction" },
+            { value: "3-5 Days", label: "Turnaround Time" }
           ]}
-          rightCarouselItems={[
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881750051-0ym5nbmx.jpg?_wi=1",              imageAlt: "YouTube Shorts content"
-            },
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-mr1xedhd.jpg?_wi=2",              imageAlt: "Trending clips montage"
-            },
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-h65hjshx.jpg?_wi=2",              imageAlt: "Editing interface"
-            },
-          ]}
-          carouselPosition="right"
+          enableKpiAnimation={true}
           buttons={[
-            { text: "See My Work", href: "#case-studies" },
-            { text: "Book A Call", href: "https://calendly.com" },
+            {
+              text: "Book a Call",              href: "https://calendly.com/ibbiyousuf420/30min"
+            }
           ]}
-          buttonAnimation="slide-up"
-        />
-      </div>
-
-      <div id="social-proof" data-section="social-proof">
-        <SocialProofOne
-          title="Trusted by Top Creators and Brands"
-          description="Over 10M+ views generated. I've powered viral content for artists, influencers, TV shows, and products reaching hundreds of millions of followers."
-          tag="10M+ Views Generated"
-          tagIcon={TrendingUp}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          names={[
-            "Brandon Clark 600K Followers",            "Sexyishaan 60K Followers",            "Ericcouu 300K Followers",            "Brandon Clark 600K Followers",            "Sexyishaan 60K Followers",            "Ericcouu 300K Followers",            "Brandon Clark 600K Followers",            "Sexyishaan 60K Followers"
-          ]}
-          speed={40}
-          showCard={true}
-        />
-      </div>
-
-      <div id="process" data-section="process">
-        <FeatureCardSix
-          title="The Process"
-          description="Launching your private clipping project has never been easier. Say goodbye to slow agencies—with my personalized clipping methodology, you launch, scale, and analyze viral content in record time with direct team access."
-          tag="Proven Workflow"
-          tagIcon={Zap}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          features={[
-            {
-              id: 1,
-              title: "Step #1",              description: "Book an Intro Call. We start with a quick intro call to understand your goals, target audience, and creative direction. From there, my team builds a custom private clipping project designed to maximize reach and engagement — whether you're a brand, artist, creator, or product.",              buttons: [{ text: "Start Your Project", href: "https://calendly.com" }],
-            },
-            {
-              id: 2,
-              title: "Our Team Starts Posting",              description: "Once we align on strategy, personalized content gets distributed across TikTok, Instagram Reels, YouTube Shorts, and more—simultaneously—with my proven optimization techniques. Direct team management ensures every clip reflects your brand's vision."
-            },
-            {
-              id: 3,
-              title: "Track Real-Time Results",              description: "Watch your clips climb trending charts in real-time. Full transparency with detailed analytics showing views, engagement, growth metrics, and ROI. Optimize on the fly based on what's working with direct collaboration and personalized guidance."
-            },
-          ]}
-        />
-      </div>
-
-      <div id="metrics" data-section="metrics">
-        <MetricCardOne
-          title="Measurable Results That Speak"
-          description="Track the impact of your private clipping projects with clear, actionable metrics from our dedicated team."
-          tag="Performance Metrics"
-          tagIcon={BarChart3}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          metrics={[
-            {
-              id: "1",              value: "10M ",              title: "Views Generated",              description: "Average Views per private project",              icon: Eye,
-            },
-            {
-              id: "2",              value: "1000 ",              title: "Expert Team",              description: "Dedicated clipping specialists for your projects",              icon: Users,
-            },
-            {
-              id: "3",              value: "💯 ",              title: "Organic Growth",              description: "Zero ad spend required—pure algorithmic reach",              icon: TrendingUp,
-            },
-            {
-              id: "4",              value: "3-5x",              title: "Avg ROI",              description: "Return on investment vs traditional marketing",              icon: Award,
-            },
-          ]}
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
-        />
-      </div>
-
-      <div id="case-studies" data-section="case-studies">
-        <ProductCardFour
-          title="Client Success Stories"
-          description="From independent creators to global brands—here's the impact of our personalized clipping and team management approach."
-          tag="Proven Results"
-          tagIcon={Trophy}
-          textboxLayout="default"
-          useInvertedBackground={false}
-          products={[
-            {
-              id: "bbno",              name: "Ericcouu - Influencer",              price: "",              variant: "Viral Growth",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-h65hjshx.jpg",              imageAlt: "Ericcouu success story"
-            },
-            {
-              id: "dhar-mann",              name: "Brandon Clark - Gym Coach",              price: "",              variant: "Followers | Trending Content",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-mr1xedhd.jpg",              imageAlt: "Brandon Clark success story"
-            },
-            {
-              id: "paul-american",              name: "PB Investing - Trader",              price: "",              variant: "Followers | Trading Content",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881750051-0ym5nbmx.jpg?_wi=2",              imageAlt: "PB Investing success story"
-            },
-            {
-              id: "tate-mccrae",              name: "Sexyishaan - Influencer",              price: "",              variant: "Entertainment",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881146961-1pjxjkc4.jpg",              imageAlt: "Sexyishaan success story"
-            },
-          ]}
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
+          imageSrc="/hero-image.jpg"
+          imageAlt="Viral clips showcase"
+          mediaAnimation="slide-up"
+          imagePosition="right"
         />
       </div>
 
       <div id="about" data-section="about">
-        <TextSplitAbout
-          title="Why you need Clipping"
-          description={[
-            "I started private clipping work because I saw creators and brands struggling to repurpose their best content. They were sitting on goldmines—podcasts, streams, videos—but lacked the time, skills, or network to turn them into viral clips.",            "Now, with a dedicated team of expert clippers and a proven personalized methodology, I've helped launch private projects that generated over 10 Million views. No agencies. No gatekeeping. Just direct collaboration and results.",            "Every client I work with gets direct access to a team obsessed with viral growth, algorithmic optimization, and transparent metrics. Your success is my success, and my team is committed to your project's unique vision."
-          ]}
-          useInvertedBackground={false}
-          showBorder={false}
-          buttons={[{ text: "Schedule Consultation", href: "https://calendly.com" }]}
-        />
-      </div>
-
-      <div id="faq" data-section="faq">
-        <FaqBase
-          title="Frequently Asked Questions"
-          description="Everything you need to know before starting your private clipping project with our dedicated team."
-          tag="Help & Support"
-          tagIcon={HelpCircle}
-          tagAnimation="slide-up"
+        <SplitAbout
+          title="About Our Clipping Service"
+          description="We specialize in transforming long-form content into short, shareable clips optimized for viral growth across all platforms."
           textboxLayout="default"
           useInvertedBackground={false}
-          faqs={[
+          bulletPoints={[
             {
-              id: "1",              title: "Whats Clipping ?",              content: "Clipping is the process of turning long-form content such as podcasts, livestreams, and YouTube videos into short, high-impact clips designed for platforms like TikTok, Instagram Reels, and YouTube Shorts.Through private clipping collaboration, you work directly with my dedicated team to identify the most engaging moments from your content. We then transform those moments into high-retention short-form videos with optimized hooks, captions, and formatting designed to perform well in social media algorithms. "
+              title: "Expert Editing",              description: "Our team uses advanced editing techniques to create engaging, fast-paced clips that capture attention."
             },
             {
-              id: "2",              title: "How does the process work?",              content: "Step 1: Book an intro call where we discuss your goals, content strategy, and vision. Step 2: Your content gets assigned to our dedicated team who create and optimize clips for each platform while maintaining direct communication with you. Step 3: Clips launch simultaneously across social platforms and we track real-time performance together with detailed analytics and regular updates."
+              title: "Multi-Platform Optimization",              description: "Every clip is tailored for TikTok, Instagram Reels, YouTube Shorts, and more with the right aspect ratios and formats."
             },
             {
-              id: "3",              title: "How quickly can I Start?",              content: "Most private clipping projects launch within 2-5 business days after the initial strategy call. Your content goes through our personalized optimization process, and begins gaining traction immediately. Real-time results start appearing within hours, with our team providing direct updates on performance."
-            },
-            {
-              id: "4",              title: "What types of creators and businesses do you work with?",              content: "I work with podcasters, streamers,  influencers, TV shows, brands, product launches, apps, startups, and content entrepreneurs seeking personalized team management. Essentially, if you have longform or short-form content and want to maximize viral reach through direct collaboration with expert clippers, we're a fit."
-            },
-            {
-              id: "5",              title: "Is there a cost to start? What's the pricing model?",              content: "Pricing varies based on your project scope, content volume, and dedicated team support level. I offer custom packages tailored to your specific goals and vision. Contact me for a consultation and I'll provide transparent pricing with no hidden fees."
-            },
-            {
-              id: "6",              title: "How is this different from hiring a video editor?",              content: "I'm not just editing videos—I'm providing personalized team management and optimization for viral growth across platforms. My private clipping collaboration includes audience research, platform algorithms, trend analysis, optimal timing, direct communication with your dedicated team, and distribution through my network. It's a complete organic growth system with direct collaboration, not just editing."
-            },
-            {
-              id: "7",              title: "Do I retain ownership of my clips?",              content: "100%. You retain full ownership of all clips created through our private collaboration. My team handles creation, optimization, and distribution, but the content is yours. We simply amplify it through our network to drive maximum views and engagement."
-            },
-            {
-              id: "8",              title: "What kind of results should I expect?",              content: "Results vary based on content quality, audience size, and platform fit. My private collaboration clients typically see 3-5x ROI within the first month. Many experience viral clips (100K-500K+ views), new followers, lead generation, and increased business opportunities from the exposure managed by our dedicated team."
-            },
+              title: "Quick Turnaround",              description: "Get your clips back in 3-5 business days, ready to boost your growth immediately."
+            }
+          ]}
+          imageSrc="/about-image.jpg"
+          imageAlt="Clipping service in action"
+          mediaAnimation="slide-up"
+          imagePosition="right"
+          buttons={[
+            {
+              text: "Book a Call",              href: "https://calendly.com/ibbiyousuf420/30min"
+            }
           ]}
-          faqsAnimation="slide-up"
-          animationType="smooth"
         />
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactText
-          text="Ready To Turn Your Content Into Viral Clips 👇 "
-          animationType="entrance-slide"
-          background={{ variant: "radial-gradient" }}
-          useInvertedBackground={false}
-          buttons={[
-            { text: "Book A Call", href: "https://calendly.com" },
-            { text: "See Case Studies", href: "#case-studies" },
+        <ContactFaq
+          faqs={[
+            {
+              id: "1",              title: "What's your turnaround time?",              content: "We typically deliver clips within 3-5 business days. Rush orders available upon request."
+            },
+            {
+              id: "2",              title: "How many clips do you produce per project?",              content: "We create multiple clips from your source material, ensuring you get maximum content to distribute across platforms."
+            },
+            {
+              id: "3",              title: "Do you handle different video formats?",              content: "Yes! We work with YouTube videos, podcasts, streams, and any long-form content. We optimize for all major platforms."
+            },
+            {
+              id: "4",              title: "What's your pricing?",              content: "Pricing varies based on video length and clip quantity. Book a call to discuss your specific needs and get a custom quote."
+            }
           ]}
+          ctaTitle="Ready to Go Viral?"
+          ctaDescription="Let's discuss how we can help you maximize your content's reach."
+          ctaButton={{
+            text: "Book a Free Call",            href: "https://calendly.com/ibbiyousuf420/30min"
+          }}
+          ctaIcon={Phone}
+          useInvertedBackground={false}
+          animationType="slide-up"
         />
       </div>
 
-      <div id="footer" data-section="footer">
-        <FooterLogoEmphasis
-          logoText="billiclipd"
-          columns={[
-            {
-              items: [
-                { label: "Home", href: "/" },
-                { label: "Case Studies", href: "#case-studies" },
-                { label: "Process", href: "#process" },
-              ],
-            },
-            {
-              items: [
-                { label: "About", href: "#about" },
-                { label: "FAQ", href: "#faq" },
-              ],
-            },
-            {
-              items: [
-                { label: "Contact", href: "#contact" },
-                { label: "Book A Call", href: "https://calendly.com" },
-                { label: "Privacy Policy", href: "#" },
-              ],
-            },
-          ]}
-        />
-      </div>
+      <FooterBase
+        columns={[
+          {
+            title: "Product",            items: [
+              { label: "Clip Editing", href: "#hero" },
+              { label: "About Us", href: "#about" },
+              { label: "Contact", href: "#contact" }
+            ]
+          },
+          {
+            title: "Legal",            items: [
+              { label: "Privacy Policy", href: "#" },
+              { label: "Terms of Service", href: "#" }
+            ]
+          }
+        ]}
+        logoText="billiclipd"
+        copyrightText="© 2025 | billiclipd"
+      />
     </ThemeProvider>
   );
-}
+}