Switch to version 14: modified src/app/page.tsx

Merge version_17 into main

src/app/contact/page.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import ContactText from "@/components/sections/contact/ContactText";
+import FooterCard from "@/components/sections/footer/FooterCard";
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="largeSmall"
+      background="aurora"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "about" },
+            { name: "Features", id: "features" },
+            { name: "Pricing", id: "pricing" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          brandName="billiclipd"
+        />
+      </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>
+      </div>
+
+      <footer>
+        <FooterCard
+          logoText="billiclipd"
+          copyrightText="© 2025 | billiclipd. All rights reserved."
+        />
+      </footer>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -1,61 +1,17 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
-import { Inter } from "next/font/google";
-import { Public_Sans } from "next/font/google";
-import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
-
-const halant = Halant({
-  variable: "--font-halant",  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
-});
-
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
-});
-
-const publicSans = Public_Sans({
-  variable: "--font-public-sans",  subsets: ["latin"],
-});
+import "./styles/globals.css";
 
 export const metadata: Metadata = {
-  title: "Shortform Content Clipping & Viral Growth | Clipping Culture",  description: "Transform your longform content into viral shortform clips. 10B+ views generated. TikTok, Reels, Shorts optimization. Proven methodology for organic creator growth.",  keywords: "shortform content clipping, TikTok clips, viral growth, content repurposing, Instagram Reels, YouTube Shorts",  metadataBase: new URL("https://clippingculture.com"),
-  alternates: {
-    canonical: "https://clippingculture.com"
-  },
-  openGraph: {
-    title: "Turn Longform Into Viral Clips | Clipping Culture",    description: "I transform your best podcast, stream, and video moments into high-retention shortform content optimized for TikTok, Instagram Reels, and YouTube Shorts.",    url: "https://clippingculture.com",    siteName: "Clipping Culture",    type: "website",    images: [
-      {
-        url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-vibrant-tiktok-style-vertical-video-fr-1772847774345-4bf0afdb.png",        alt: "Clipping Culture viral shortform content"
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",    title: "Turn Longform Into Viral Clips",    description: "10B+ views generated. Transform your content into trending shortform clips.",    images: [
-      "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-vibrant-tiktok-style-vertical-video-fr-1772847774345-4bf0afdb.png"
-    ],
-  },
-  robots: {
-    index: true,
-    follow: true,
-  },
-};
+  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."};
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${halant.variable} ${inter.variable} ${publicSans.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+    <html lang="en">
+      <body>{children}
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1423,7 +1379,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -1,322 +1,180 @@
 "use client";
 
 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 TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
-import FaqBase from "@/components/sections/faq/FaqBase";
+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 FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
-import ProductCardFour from "@/components/sections/product/ProductCardFour";
-import {
-  Sparkles,
-  TrendingUp,
-  Zap,
-  BarChart3,
-  Trophy,
-  MessageSquare,
-  HelpCircle,
-  Eye,
-  Users,
-  Award,
-} from "lucide-react";
+import FooterCard from "@/components/sections/footer/FooterCard";
+import { Sparkles, CheckCircle, MessageCircle, Zap } from "lucide-react";
 
-export default function LandingPage() {
+export default function Home() {
   return (
     <ThemeProvider
-      defaultButtonVariant="bounce-effect"
+      defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
-      borderRadius="pill"
+      borderRadius="rounded"
       contentWidth="mediumLarge"
-      sizing="mediumSizeLargeTitles"
-      background="noise"
-      cardStyle="soft-shadow"
-      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="solid"
-      headingFontWeight="light"
+      sizing="largeSmall"
+      background="aurora"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingOverlay
-          brandName="billiclipd"
+        <NavbarStyleApple
           navItems={[
-            { name: "Case Studies", id: "case-studies" },
+            { name: "Home", id: "/" },
             { name: "About", id: "about" },
-            { name: "Process", id: "process" },
-            { name: "Contact", id: "contact" },
+            { name: "Features", id: "features" },
+            { name: "Pricing", id: "pricing" },
+            { name: "Contact", id: "/contact" },
           ]}
-          button={{
-            text: "Book A Call",            href: "https://calendly.com"
-          }}
+          brandName="billiclipd"
         />
       </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"
-          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"
-            },
-          ]}
-          rightCarouselItems={[
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/uploaded-1772881750051-0ym5nbmx.jpg",              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"
+        <HeroBillboardCarousel
+          background={{ variant: "sparkles-gradient" }}
+          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"
           buttons={[
-            { text: "See My Work", href: "#case-studies" },
-            { text: "Book A Call", href: "https://calendly.com" },
+            { text: "Get Started", href: "/contact" },
+            { text: "View Portfolio", href: "features" },
           ]}
-          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 campaigns 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"
+          mediaItems={[
+            { imageSrc: "/placeholders/placeholder1.webp?_wi=1", imageAlt: "Viral clip example 1" },
+            { imageSrc: "/placeholders/placeholder1.webp?_wi=2", imageAlt: "Viral clip example 2" },
+            { imageSrc: "/placeholders/placeholder1.webp?_wi=3", imageAlt: "Viral clip example 3" },
+            { imageSrc: "/placeholders/placeholder1.webp?_wi=4", imageAlt: "Viral clip example 4" },
+            { imageSrc: "/placeholders/placeholder1.webp?_wi=5", imageAlt: "Viral clip example 5" },
           ]}
-          speed={40}
-          showCard={true}
-        />
-      </div>
-
-      <div id="process" data-section="process">
-        <FeatureCardSix
-          title="The Process"
-          description="Launching a campaign has never been easier. Say goodbye to slow agencies—with my clipping methodology, you launch, scale, and analyze viral campaigns in record time."
-          tag="Proven Workflow"
-          tagIcon={Zap}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          features={[
-            {
-              id: 1,
-              title: "Step #1",              description: "Book an Intro CallWe start with a quick intro call to understand your goals, target audience, and creative direction. From there, our team builds a custom clipping campaign designed to maximize reach and engagement — whether you’re a brand, artist, creator, or product. ",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/an-illustration-showing-a-consultation-v-1772847774769-61fe5500.png",              imageAlt: "Consultation call strategy planning",              buttons: [{ text: "Start Your Campaign", href: "https://calendly.com" }],
-            },
-            {
-              id: 2,
-              title: "Our team Starts posting  ",              description: "Once the deal is locked, Content gets distributed across TikTok, Instagram Reels, YouTube Shorts, and more—simultaneously—with my proven optimization techniques.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/an-illustration-showing-multiple-clipper-1772847774950-e137f1c3.png",              imageAlt: "Content distribution across platforms"
-            },
-            {
-              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.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/an-analytics-dashboard-showing-real-time-1772847775477-be40e150.png",              imageAlt: "Analytics dashboard real-time metrics"
-            },
-          ]}
-        />
-      </div>
-
-      <div id="metrics" data-section="metrics">
-        <MetricCardOne
-          title="Measurable Results That Speak"
-          description="Track the impact of your clipping campaigns with clear, actionable metrics."
-          tag="Performance Metrics"
-          tagIcon={BarChart3}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          metrics={[
-            {
-              id: "1",              value: "10M ",              title: "Views Generated",              description: "Average Views per client",              icon: Eye,
-            },
-            {
-              id: "2",              value: "1000 ",              title: "Clipper Network",              description: "We have more than 1000 Clippers Waiting",              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 optimized clipping campaigns."
-          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: "BBNO$ campaign case study"
-            },
-            {
-              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: "Dhar Mann case study"
-            },
-            {
-              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",              imageAlt: "Paul American case study"
-            },
-            {
-              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: "Tate McCrae campaign"
-            },
-          ]}
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
         />
       </div>
 
       <div id="about" data-section="about">
-        <TextSplitAbout
-          title="Why I Do This"
-          description={[
-            "I started clipping 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 network of 40,000+ expert clippers and a proven methodology, I've helped launch campaigns that generated over 10 billion views. No agencies. No gatekeeping. Just 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."
+        <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}
-          showBorder={false}
-          buttons={[{ text: "Schedule Consultation", href: "https://calendly.com" }]}
+          buttons={[
+            { text: "Learn More", href: "/contact" },
+            { text: "See Examples", href: "features" },
+          ]}
         />
       </div>
 
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTwo
-          title="What Clients Say"
-          description="Real feedback from creators and brands who've experienced the impact of optimized shortform campaigns."
-          tag="Client Testimonials"
-          tagIcon={MessageSquare}
-          tagAnimation="slide-up"
+      <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?_wi=6", imageAlt: "TikTok example 1" },
+                { imageSrc: "/placeholders/placeholder1.webp?_wi=7", imageAlt: "TikTok example 2" },
+              ],
+            },
+            {
+              title: "Instagram Reels",              description: "Eye-catching vertical videos designed for Instagram engagement",              icon: MessageCircle,
+              mediaItems: [
+                { imageSrc: "/placeholders/placeholder1.webp?_wi=8", imageAlt: "Instagram example 1" },
+                { imageSrc: "/placeholders/placeholder1.webp?_wi=9", 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?_wi=10", imageAlt: "YouTube example 1" },
+                { imageSrc: "/placeholders/placeholder1.webp?_wi=11", 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?_wi=12", imageAlt: "Multi-platform 1" },
+                { imageSrc: "/placeholders/placeholder1.webp?_wi=13", imageAlt: "Multi-platform 2" },
+              ],
+            },
+          ]}
+          animationType="depth-3d"
           textboxLayout="default"
           useInvertedBackground={false}
-          testimonials={[
+          buttons={[
+            { text: "View Our Work", href: "/contact" },
+          ]}
+        />
+      </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",              name: "Alex Rivera",              role: "Podcast Host",              testimonial: "Within 2 weeks of launching my clipping campaign, my podcast downloads tripled. The viral clips on TikTok and Instagram are driving real listeners to my full episodes. Best investment I've made.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-professional-headshot-of-a-successful--1772847773799-11aec6b8.png?_wi=1",              imageAlt: "Alex Rivera podcast host"
+              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",              name: "Jordan Chen",              role: "Brand Marketing Director",              testimonial: "We tried traditional agencies for months with minimal results. Clipping Culture delivered 25M views in the first month—all organic, zero ad spend. The transparency and speed are unmatched.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-professional-headshot-of-a-brand-marke-1772847774096-d4ca7a22.png",              imageAlt: "Jordan Chen brand director"
+              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",              name: "Sam Thompson",              role: "Content Creator",              testimonial: "I was drowning in content repurposing. Having a team of clippers handle it freed me up to focus on creating. My viral clips are now my #1 lead source for brand deals.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-professional-headshot-of-a-social-medi-1772847774170-c3d5b803.png",              imageAlt: "Sam Thompson content creator"
-            },
-            {
-              id: "4",              name: "Maya Patel",              role: "Music Producer",              testimonial: "The clipping process was simple and collaborative. My music got in front of millions of new listeners through optimized short-form content. Highly recommend for any artist looking to scale.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-professional-headshot-of-a-different-c-1772847773694-573d36da.png",              imageAlt: "Maya Patel music producer"
-            },
-            {
-              id: "5",              name: "David Lee",              role: "Startup CEO",              testimonial: "Our product launch videos became trending clips within days. The organic reach we got from Clipping Culture's network was worth 10x the investment in traditional advertising.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-professional-headshot-of-a-brand-repre-1772847774538-779f0ff6.png",              imageAlt: "David Lee startup CEO"
-            },
-            {
-              id: "6",              name: "Emma Watson",              role: "Influencer",              testimonial: "Clear metrics, real-time updates, and clips that actually trend. This is how modern content distribution should work. No fluff, just results.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab38TzdGBnNuMLrvS5uTUM2zMr/a-professional-headshot-of-a-successful--1772847773799-11aec6b8.png?_wi=2",              imageAlt: "Emma Watson influencer"
+              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"
-        />
-      </div>
-
-      <div id="faq" data-section="faq">
-        <FaqBase
-          title="Frequently Asked Questions"
-          description="Everything you need to know before getting started with your clipping campaign."
-          tag="Help & Support"
-          tagIcon={HelpCircle}
-          tagAnimation="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          faqs={[
-            {
-              id: "1",              title: "What exactly is Clipping Culture?",              content: "Clipping Culture is a shortform content clipping and distribution service. I transform your longform content (podcasts, streams, videos) into high-retention clips optimized for TikTok, Instagram Reels, and YouTube Shorts. I use a network of 40,000+ expert clippers to distribute your content across platforms, driving organic reach and viral growth."
-            },
-            {
-              id: "2",              title: "How does the clipping process work?",              content: "Step 1: Book an intro call where we discuss your goals and content strategy. Step 2: Your content gets assigned to our network of clippers who create and optimize clips for each platform. Step 3: Clips launch simultaneously across social platforms and we track real-time performance with detailed analytics."
-            },
-            {
-              id: "3",              title: "How quickly can I launch a campaign?",              content: "Most campaigns launch within 2-5 business days after the initial strategy call. Your content goes through our optimization process, gets distributed to the clipper network, and begins gaining traction immediately. Real-time results start appearing within hours."
-            },
-            {
-              id: "4",              title: "What types of creators and businesses do you work with?",              content: "I work with podcasters, streamers, musicians, influencers, TV shows, brands, product launches, apps, startups, casinos, and content entrepreneurs. Essentially, if you have longform content and want to maximize viral reach through shortform clips, we're a fit."
-            },
-            {
-              id: "5",              title: "Is there a cost to start? What's the pricing model?",              content: "Pricing varies based on your campaign scope, content volume, and distribution network size. I offer custom packages tailored to your goals. 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 optimizing them for viral growth across platforms. My clipping methodology includes audience research, platform algorithms, trend analysis, optimal timing, and distribution through a massive creator network. It's a complete organic growth system, not just editing."
-            },
-            {
-              id: "7",              title: "Do I retain ownership of my clips?",              content: "100%. You retain full ownership of all clips created. I handle distribution and optimization, but the content is yours. We simply amplify it through my 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 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."
-            },
-          ]}
-          faqsAnimation="slide-up"
-          animationType="smooth"
         />
       </div>
 
       <div id="contact" data-section="contact">
         <ContactText
-          text="Ready to turn your longform content into viral shortform campaigns? Let's discuss your strategy and explore how I can help you reach millions of engaged viewers—no ad spend required."
+          text="Ready to turn your content into viral sensations? Book a call with our team to discuss your clipping strategy."
           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" },
+            { text: "Book a Call", href: "/contact" },
+            { text: "View Portfolio", href: "features" },
           ]}
+          background={{ variant: "sparkles-gradient" }}
+          useInvertedBackground={false}
         />
       </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: "Testimonials", href: "#testimonials" },
-                { label: "FAQ", href: "#faq" },
-              ],
-            },
-            {
-              items: [
-                { label: "Contact", href: "#contact" },
-                { label: "Book A Call", href: "https://calendly.com" },
-                { label: "Privacy Policy", href: "#" },
-              ],
-            },
-          ]}
+      <footer>
+        <FooterCard
+          logoText="billiclipd"
+          copyrightText="© 2025 | billiclipd. All rights reserved."
         />
-      </div>
+      </footer>
     </ThemeProvider>
   );
-}
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-public-sans), sans-serif;
+  font-family: var(--font-inter-tight), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-public-sans), sans-serif;
+  font-family: var(--font-inter-tight), sans-serif;
 }