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

Merge version_17 into main

src/app/contact/page.tsx

@@ -1,10 +1,9 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import ContactForm from "@/components/form/ContactForm";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import ContactText from "@/components/sections/contact/ContactText";
 import FooterCard from "@/components/sections/footer/FooterCard";
-import { Mail, Twitter, Linkedin } from "lucide-react";
 
 export default function ContactPage() {
   return (
@@ -12,59 +11,98 @@ export default function ContactPage() {
       defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
-      contentWidth="medium"
-      sizing="medium"
-      background="none"
-      cardStyle="solid"
+      contentWidth="mediumLarge"
+      sizing="largeSmall"
+      background="aurora"
+      cardStyle="glass-elevated"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="semibold"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen
+        <NavbarStyleApple
           navItems={[
             { name: "Home", id: "/" },
-            { name: "Features", id: "#features" },
-            { name: "About", id: "#about" },
+            { name: "About", id: "about" },
+            { name: "Features", id: "features" },
+            { name: "Pricing", id: "pricing" },
             { name: "Contact", id: "/contact" },
           ]}
           brandName="billiclipd"
-          bottomLeftText="Global Community"
-          bottomRightText="hello@example.com"
         />
       </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 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>
 
-      <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"
-          },
-        ]}
-      />
+      <footer>
+        <FooterCard
+          logoText="billiclipd"
+          copyrightText="© 2025 | billiclipd. All rights reserved."
+        />
+      </footer>
     </ThemeProvider>
   );
 }

src/app/layout.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import "./styles/globals.css";
 
 export const metadata: Metadata = {
-  title: "billiclipd - Turn Longform into Viral Clips",  description: "Professional clip editing service. Transform your YouTube videos, podcasts, and streams into TikTok, Reels, and Shorts that drive engagement."};
+  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,

src/app/page.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
-import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
-import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
+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, Hexagon, House, MessageSquareText, Settings, CircleDollarSign, ArrowLeftRight, Send, Twitter, Linkedin } from "lucide-react";
+import { Sparkles, CheckCircle, MessageCircle, Zap } from "lucide-react";
 
 export default function Home() {
   return (
@@ -15,157 +16,165 @@ export default function Home() {
       defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
-      contentWidth="medium"
-      sizing="medium"
-      background="none"
-      cardStyle="solid"
+      contentWidth="mediumLarge"
+      sizing="largeSmall"
+      background="aurora"
+      cardStyle="glass-elevated"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="semibold"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen
+        <NavbarStyleApple
           navItems={[
             { name: "Home", id: "/" },
-            { name: "Features", id: "#features" },
-            { name: "About", id: "#about" },
+            { name: "About", id: "about" },
+            { name: "Features", id: "features" },
+            { name: "Pricing", id: "pricing" },
             { name: "Contact", id: "/contact" },
           ]}
           brandName="billiclipd"
-          bottomLeftText="Global Community"
-          bottomRightText="hello@example.com"
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroBillboardDashboard
-          background={{ variant: "radial-gradient" }}
-          tag="Viral Clip Specialist"
-          tagIcon={Sparkles}
+        <HeroBillboardCarousel
+          background={{ variant: "sparkles-gradient" }}
           title="Turn Longform Content Into Viral Clips"
-          description="Turn your podcasts, streams, and long-form videos into viral clips for TikTok, Instagram Reels, and YouTube Shorts. Expert clipping services with 10M+ views generated."
+          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: "Book a Call", href: "/contact" },
-            { text: "View Portfolio", href: "#features" },
+            { text: "Get Started", href: "/contact" },
+            { text: "View Portfolio", href: "features" },
+          ]}
+          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" },
+          ]}
+        />
+      </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" },
           ]}
-          dashboard={{
-            title: "Clip Analytics Hub",            logoIcon: Hexagon,
-            imageSrc: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face",            buttons: [
-              { text: "Dashboard", href: "#" },
-              { text: "Export CSV", href: "#" },
-            ],
-            sidebarItems: [
-              { icon: House, active: true },
-              { icon: MessageSquareText },
-              { icon: Settings },
-            ],
-            stats: [
-              {
-                title: "Clips Created",                values: [1240, 1856, 2130],
-                description: "Total viral clips."
-              },
-              {
-                title: "Total Views",                values: [10240000, 12500000, 13450000],
-                valuePrefix: "",                valueSuffix: "M+",                description: "Across all platforms."
-              },
-              {
-                title: "Engagement Rate",                values: [8.5, 12.3, 15.7],
-                valueSuffix: "%",                description: "Average engagement."
-              },
-            ],
-            chartTitle: "Views Over Time",            chartData: [
-              { value: 50 },
-              { value: 30 },
-              { value: 70 },
-              { value: 40 },
-              { value: 90 },
-            ],
-            listTitle: "Recent Clips",            listItems: [
-              {
-                icon: CircleDollarSign,
-                title: "5-Sec Motivational",                status: "Published"
-              },
-              {
-                icon: ArrowLeftRight,
-                title: "3-Min Podcast Clip",                status: "Processing"
-              },
-              {
-                icon: Send,
-                title: "Highlight Reel",                status: "Published"
-              },
-            ],
-          }}
         />
       </div>
 
       <div id="features" data-section="features">
-        <FeatureCardEight
+        <FeatureCardTwentyFive
+          title="Our Clipping Services"
+          description="Professional video editing and content repurposing for maximum reach"
+          tag="What We Do"
+          tagIcon={Zap}
           features={[
             {
-              id: 1,
-              title: "Content Analysis",              description: "We analyze your longform content to identify the most viral moments and trending hooks.",              imageSrc: "https://images.unsplash.com/photo-1611532736597-de2d4265fba3?w=500&h=300&fit=crop"
+              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" },
+              ],
             },
             {
-              id: 2,
-              title: "Professional Editing",              description: "Our expert editors craft high-quality clips optimized for each platform's unique algorithm.",              imageSrc: "https://images.unsplash.com/photo-1598899134739-24c46f58b8c0?w=500&h=300&fit=crop"
+              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" },
+              ],
             },
             {
-              id: 3,
-              title: "Multi-Platform Optimization",              description: "Each clip is tailored for TikTok, Instagram Reels, and YouTube Shorts with proper formatting.",              imageSrc: "https://images.unsplash.com/photo-1611339555312-e607c90352fd?w=500&h=300&fit=crop"
+              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" },
+              ],
             },
             {
-              id: 4,
-              title: "Performance Analytics",              description: "Track engagement metrics, reach, and performance across all platforms in real-time.",              imageSrc: "https://images.unsplash.com/photo-1460925895917-aeb19be489c7?w=500&h=300&fit=crop"
+              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" },
+              ],
             },
           ]}
-          title="Our Process"
-          description="How we transform your content into viral sensations"
-          tag="What We Do"
+          animationType="depth-3d"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          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",              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="about" data-section="about">
-        <TextSplitAbout
-          title="Why Choose billiclipd?"
-          description={[
-            "With over 10 million views generated across TikTok, Instagram Reels, and YouTube Shorts, we know what makes content go viral. Our team combines data-driven insights with creative excellence to transform your longform content into short-form sensations.",            "We don't just edit clips—we create content strategies that maximize your reach and engagement on every platform."
-          ]}
+      <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: "Learn More", href: "#features" },
+            { text: "View Portfolio", href: "features" },
           ]}
+          background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
         />
       </div>
 
-      <div id="contact" data-section="contact">
-        <ContactCenter
-          tag="Get Started"
-          title="Ready to Go Viral?"
-          description="Let's transform your content into clips that generate millions of views. Book a call with our team to discuss your project."
-          background={{ variant: "radial-gradient" }}
-          useInvertedBackground={false}
-          buttonText="Book a Call"
-          onSubmit={(email) => console.log("Email:", email)}
+      <footer>
+        <FooterCard
+          logoText="billiclipd"
+          copyrightText="© 2025 | billiclipd. All rights reserved."
         />
-      </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"
-          },
-        ]}
-      />
+      </footer>
     </ThemeProvider>
   );
 }