Update src/app/layout.tsx

Merge version_15 into main

src/app/contact/page.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
-import ContactText from "@/components/sections/contact/ContactText";
+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() {
   return (
@@ -11,98 +12,59 @@ export default function ContactPage() {
       defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
-      contentWidth="mediumLarge"
-      sizing="largeSmall"
-      background="aurora"
-      cardStyle="glass-elevated"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      headingFontWeight="semibold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleApple
+        <NavbarStyleFullscreen
           navItems={[
             { name: "Home", id: "/" },
-            { name: "About", id: "about" },
-            { name: "Features", id: "features" },
-            { name: "Pricing", id: "pricing" },
+            { name: "Features", id: "#features" },
+            { name: "About", id: "#about" },
             { name: "Contact", id: "/contact" },
           ]}
           brandName="billiclipd"
+          bottomLeftText="Global Community"
+          bottomRightText="hello@example.com"
         />
       </div>
 
-      <div id="contact-hero" data-section="contact-hero" className="py-20">
-        <ContactText
-          text="Get in touch with our team. We'd love to hear about your content and discuss how we can help you go viral."
-          animationType="entrance-slide"
-          buttons={[
-            { text: "Schedule a Call", onClick: () => window.open("https://calendly.com/billiclipd", "_blank") },
-            { text: "Back to Home", href: "/" },
-          ]}
-          background={{ variant: "sparkles-gradient" }}
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="contact-form" data-section="contact-form" className="py-20">
-        <div className="flex flex-col items-center justify-center">
-          <div className="w-full max-w-2xl rounded-theme bg-card p-10">
-            <h2 className="mb-2 text-4xl font-bold text-foreground">Let's Connect</h2>
-            <p className="mb-8 text-lg text-foreground/75">
-              Fill out the form below or reach out directly. We typically respond within 24 hours.
-            </p>
-            <form className="space-y-6">
-              <div>
-                <label className="block text-sm font-medium text-foreground mb-2">
-                  Full Name
-                </label>
-                <input
-                  type="text"
-                  className="w-full px-4 py-3 rounded-theme border border-accent/20 bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
-                  placeholder="Your name"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-foreground mb-2">
-                  Email
-                </label>
-                <input
-                  type="email"
-                  className="w-full px-4 py-3 rounded-theme border border-accent/20 bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
-                  placeholder="your@email.com"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-foreground mb-2">
-                  Message
-                </label>
-                <textarea
-                  rows={5}
-                  className="w-full px-4 py-3 rounded-theme border border-accent/20 bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
-                  placeholder="Tell us about your project..."
-                />
-              </div>
-              <button
-                type="submit"
-                className="w-full px-6 py-3 rounded-theme bg-primary-cta text-primary-cta-text font-semibold hover:opacity-90 transition-opacity"
-              >
-                Send Message
-              </button>
-            </form>
-            <p className="mt-8 text-center text-sm text-foreground/75">
-              Or schedule a call directly: billing@billiclipd.com
-            </p>
-          </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>
 
-      <footer>
-        <FooterCard
-          logoText="billiclipd"
-          copyrightText="© 2025 | billiclipd. All rights reserved."
-        />
-      </footer>
+      <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,8 +1,14 @@
 import type { Metadata } from "next";
 import "./styles/globals.css";
+import { Inter } from "next/font/google";
+
+const inter = Inter({
+  variable: "--font-inter",  subsets: ["latin"],
+});
 
 export const metadata: Metadata = {
-  title: "billiclipd - Viral Clip Specialist",  description: "Turn Longform Content Into Viral Clips. Expert clipping services that transform your YouTube videos, podcasts, and streams into shareable short-form content."};
+  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,
@@ -10,8 +16,23 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body>{children}
+    <html lang="en" suppressHydrationWarning>
+      <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={{
             __html: `

src/app/page.tsx

@@ -1,180 +1,142 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
-import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
-import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
-import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
-import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
-import ContactText from "@/components/sections/contact/ContactText";
-import FooterCard from "@/components/sections/footer/FooterCard";
-import { Sparkles, CheckCircle, MessageCircle, Zap } from "lucide-react";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+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 Home() {
+export default function Page() {
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
-      contentWidth="mediumLarge"
-      sizing="largeSmall"
-      background="aurora"
-      cardStyle="glass-elevated"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleApple
+        <NavbarLayoutFloatingOverlay
           navItems={[
             { name: "Home", id: "/" },
-            { name: "About", id: "about" },
-            { name: "Features", id: "features" },
-            { name: "Pricing", id: "pricing" },
-            { name: "Contact", id: "/contact" },
+            { name: "About", id: "#about" },
+            { name: "Contact", id: "#contact" }
           ]}
           brandName="billiclipd"
+          button={{
+            text: "Book a Call",            href: "https://calendly.com/ibbiyousuf420/30min"
+          }}
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroBillboardCarousel
-          background={{ variant: "sparkles-gradient" }}
+        <HeroSplitKpi
           title="Turn Longform Content Into Viral Clips"
-          description="Expert clipping services that transform your YouTube videos, podcasts, and streams into shareable short-form content. 10M+ views generated."
-          tag="Viral Clip Specialist"
+          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" }}
+          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" }
+          ]}
+          enableKpiAnimation={true}
           buttons={[
-            { text: "Get Started", href: "/contact" },
-            { text: "View Portfolio", href: "features" },
-          ]}
-          mediaItems={[
-            { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Viral clip example 1" },
-            { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Viral clip example 2" },
-            { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Viral clip example 3" },
-            { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Viral clip example 4" },
-            { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Viral clip example 5" },
+            {
+              text: "Book a Call",              href: "https://calendly.com/ibbiyousuf420/30min"
+            }
           ]}
+          imageSrc="/hero-image.jpg"
+          imageAlt="Viral clips showcase"
+          mediaAnimation="slide-up"
+          imagePosition="right"
         />
       </div>
 
       <div id="about" data-section="about">
-        <InlineImageSplitTextAbout
-          heading={[
-            { type: "text", content: "Transform Your Content Into" },
-            { type: "image", src: "/placeholders/placeholder1.webp", alt: "billiclipd logo" },
-            { type: "text", content: "Viral Moments" },
-          ]}
-          useInvertedBackground={false}
-          buttons={[
-            { text: "Learn More", href: "/contact" },
-            { text: "See Examples", href: "features" },
-          ]}
-        />
-      </div>
-
-      <div id="features" data-section="features">
-        <FeatureCardTwentyFive
-          title="Our Clipping Services"
-          description="Professional video editing and content repurposing for maximum reach"
-          tag="What We Do"
-          tagIcon={Zap}
-          features={[
-            {
-              title: "TikTok Optimization",              description: "Perfectly formatted and edited clips for TikTok's viral algorithm",              icon: CheckCircle,
-              mediaItems: [
-                { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "TikTok example 1" },
-                { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "TikTok example 2" },
-              ],
-            },
-            {
-              title: "Instagram Reels",              description: "Eye-catching vertical videos designed for Instagram engagement",              icon: MessageCircle,
-              mediaItems: [
-                { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Instagram example 1" },
-                { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Instagram example 2" },
-              ],
-            },
-            {
-              title: "YouTube Shorts",              description: "High-quality short-form content for YouTube's growing platform",              icon: Sparkles,
-              mediaItems: [
-                { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "YouTube example 1" },
-                { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "YouTube example 2" },
-              ],
-            },
-            {
-              title: "Multi-Platform Distribution",              description: "Strategic repurposing of content across all major social platforms",              icon: Zap,
-              mediaItems: [
-                { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Multi-platform 1" },
-                { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Multi-platform 2" },
-              ],
-            },
-          ]}
-          animationType="depth-3d"
+        <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}
+          bulletPoints={[
+            {
+              title: "Expert Editing",              description: "Our team uses advanced editing techniques to create engaging, fast-paced clips that capture attention."
+            },
+            {
+              title: "Multi-Platform Optimization",              description: "Every clip is tailored for TikTok, Instagram Reels, YouTube Shorts, and more with the right aspect ratios and formats."
+            },
+            {
+              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: "View Our Work", href: "/contact" },
+            {
+              text: "Book a Call",              href: "https://calendly.com/ibbiyousuf420/30min"
+            }
           ]}
         />
       </div>
 
-      <div id="pricing" data-section="pricing">
-        <PricingCardThree
-          title="Simple, Transparent Pricing"
-          description="Choose the plan that fits your content needs"
-          tag="Pricing"
-          tagIcon={Sparkles}
-          plans={[
-            {
-              id: "1",              price: "$499",              name: "Starter",              buttons: [
-                { text: "Get Started", href: "/contact" },
-                { text: "Chat to Sales", href: "/contact" },
-              ],
-              features: [
-                "Up to 5 viral clips per month",                "TikTok & Instagram optimization",                "Basic editing and effects",                "Email support"],
-            },
-            {
-              id: "2",              badge: "Most Popular",              badgeIcon: Sparkles,
-              price: "$999",              name: "Professional",              buttons: [
-                { text: "Get Started", href: "/contact" },
-                { text: "Chat to Sales", href: "/contact" },
-              ],
-              features: [
-                "Up to 15 viral clips per month",                "All platforms included",                "Advanced editing & custom effects",                "Priority support",                "Performance analytics"],
-            },
-            {
-              id: "3",              price: "$1,999",              name: "Agency",              buttons: [
-                { text: "Get Started", href: "/contact" },
-                { text: "Chat to Sales", href: "/contact" },
-              ],
-              features: [
-                "Unlimited viral clips",                "All platforms + emerging platforms",                "White-label solutions",                "Dedicated account manager",                "Custom strategy & analytics",                "24/7 priority support"],
-            },
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
-      </div>
-
       <div id="contact" data-section="contact">
-        <ContactText
-          text="Ready to turn your content into viral sensations? Book a call with our team to discuss your clipping strategy."
-          animationType="entrance-slide"
-          buttons={[
-            { text: "Book a Call", href: "/contact" },
-            { text: "View Portfolio", href: "features" },
+        <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."
+            }
           ]}
-          background={{ variant: "sparkles-gradient" }}
+          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>
 
-      <footer>
-        <FooterCard
-          logoText="billiclipd"
-          copyrightText="© 2025 | billiclipd. All rights reserved."
-        />
-      </footer>
+      <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>
   );
 }