Update src/app/page.tsx

src/app/contact/page.tsx

@@ -1,25 +1,12 @@
 "use client";
 
-import { ThemeProvider } from "@/components/theme/ThemeProvider";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import { useState } from "react";
-
-const ContactPage = () => {
-  const [formData, setFormData] = useState({
-    name: "",    email: "",    message: ""});
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({ ...prev, [name]: value }));
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    // Handle form submission
-    console.log("Form submitted:", formData);
-    setFormData({ name: "", email: "", message: "" });
-  };
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+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 (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -31,93 +18,53 @@ const ContactPage = () => {
       cardStyle="solid"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      headingFontWeight="semibold"
     >
-      <NavbarLayoutFloatingInline
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "About", id: "#about" },
-          { name: "Services", id: "#services" },
-          { name: "Contact", id: "/contact" },
-        ]}
-        brandName="billiclipd"
-        button={{
-          text: "Book a Call",          href: "/contact"}}
-        animateOnLoad={true}
-      />
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { 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-page" data-section="contact-page" className="pt-40 pb-20 px-4">
-        <div className="max-w-2xl mx-auto">
-          <h1 className="text-5xl font-bold mb-4 text-center">Get in Touch</h1>
-          <p className="text-lg text-center mb-12 opacity-75">
-            Ready to turn your content into viral clips? Fill out the form below and our team will get back to you within 24 hours.
-          </p>
-
-          <form onSubmit={handleSubmit} className="space-y-6 bg-card p-8 rounded-lg border border-accent">
-            <div>
-              <label htmlFor="name" className="block text-sm font-medium mb-2">
-                Full Name
-              </label>
-              <input
-                type="text"
-                id="name"
-                name="name"
-                value={formData.name}
-                onChange={handleInputChange}
-                required
-                className="w-full px-4 py-2 rounded border border-accent bg-background text-foreground focus:outline-none focus:border-primary-cta"
-                placeholder="Your name"
-              />
-            </div>
-
-            <div>
-              <label htmlFor="email" className="block text-sm font-medium mb-2">
-                Email Address
-              </label>
-              <input
-                type="email"
-                id="email"
-                name="email"
-                value={formData.email}
-                onChange={handleInputChange}
-                required
-                className="w-full px-4 py-2 rounded border border-accent bg-background text-foreground focus:outline-none focus:border-primary-cta"
-                placeholder="your@email.com"
-              />
-            </div>
-
-            <div>
-              <label htmlFor="message" className="block text-sm font-medium mb-2">
-                Message
-              </label>
-              <textarea
-                id="message"
-                name="message"
-                value={formData.message}
-                onChange={handleInputChange}
-                required
-                rows={5}
-                className="w-full px-4 py-2 rounded border border-accent bg-background text-foreground focus:outline-none focus:border-primary-cta resize-none"
-                placeholder="Tell us about your project..."
-              />
-            </div>
-
-            <button
-              type="submit"
-              className="w-full bg-primary-cta text-primary-cta-text font-semibold py-3 rounded hover:opacity-90 transition-opacity"
-            >
-              Send Message
-            </button>
-          </form>
-
-          <div className="mt-12 text-center">
-            <p className="text-sm opacity-60">Or reach out to us directly at:</p>
-            <p className="text-lg font-semibold mt-2">hello@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>
+
+      <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>
   );
-};
-
-export default ContactPage;
+}

src/app/layout.tsx

@@ -1,14 +1,8 @@
 import type { Metadata } from "next";
-import { Poppins } from "next/font/google";
-import "./globals.css";
-
-const poppins = Poppins({
-  variable: "--font-poppins",  subsets: ["latin"],
-  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
-});
+import "./styles/globals.css";
 
 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 - 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."};
 
 export default function RootLayout({
   children,
@@ -16,10 +10,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={`${poppins.variable}`}>
-        {children}
-      
+    <html lang="en">
+      <body>{children}
         <script
           dangerouslySetInnerHTML={{
             __html: `

src/app/page.tsx

@@ -1,12 +1,15 @@
 "use client";
 
-import { ThemeProvider } from "@/components/theme/ThemeProvider";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import HeroCentered from "@/components/sections/hero/HeroCentered";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
-import { Mail } from "lucide-react";
+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 FooterCard from "@/components/sections/footer/FooterCard";
+import { Sparkles, Hexagon, House, MessageSquareText, Settings, CircleDollarSign, ArrowLeftRight, Send, Twitter, Linkedin } from "lucide-react";
 
-const HomePage = () => {
+export default function Home() {
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -18,56 +21,151 @@ const HomePage = () => {
       cardStyle="solid"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      headingFontWeight="semibold"
     >
-      <NavbarLayoutFloatingInline
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "About", id: "#about" },
-          { name: "Services", id: "#services" },
-          { name: "Contact", id: "/contact" },
-        ]}
-        brandName="billiclipd"
-        button={{
-          text: "Book a Call",          href: "/contact"}}
-        animateOnLoad={true}
-      />
-
-      <div id="hero" data-section="hero">
-        <HeroCentered
-          background={{ variant: "plain" }}
-          avatars={[
-            { src: "asset://avatar1", alt: "User 1" },
-            { src: "asset://avatar2", alt: "User 2" },
-            { src: "asset://avatar3", alt: "User 3" },
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Features", id: "#features" },
+            { name: "About", id: "#about" },
+            { name: "Contact", id: "/contact" },
           ]}
-          avatarText="Trusted by content creators"
-          title="Turn Longform into Viral Clips"
-          description="Professional clip editing service. We transform your YouTube videos, podcasts, and streams into TikTok, Reels, and Shorts that drive engagement."
-          buttons={[
-            { text: "Get Started", href: "/contact" },
-            { text: "Learn More", href: "#services" },
-          ]}
-          buttonAnimation="slide-up"
+          brandName="billiclipd"
+          bottomLeftText="Global Community"
+          bottomRightText="hello@example.com"
         />
       </div>
 
-      <div id="contact-cta" data-section="contact-cta">
-        <ContactCTA
-          tag="Ready to Go Viral?"
-          tagIcon={Mail}
-          title="Let's Turn Your Content into Clips"
-          description="Our team of expert editors is ready to help you maximize your content's reach. Book a consultation call with us today."
+      <div id="hero" data-section="hero">
+        <HeroBillboardDashboard
+          background={{ variant: "radial-gradient" }}
+          tag="Viral Clip Specialist"
+          tagIcon={Sparkles}
+          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."
           buttons={[
             { text: "Book a Call", href: "/contact" },
-            { text: "View Our Work", href: "#services" },
+            { text: "View Portfolio", href: "#features" },
           ]}
-          background={{ variant: "plain" }}
+          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
+          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"
+            },
+            {
+              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"
+            },
+            {
+              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"
+            },
+            {
+              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="Our Process"
+          description="How we transform your content into viral sensations"
+          tag="What We Do"
+          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."
+          ]}
+          buttons={[
+            { text: "Book a Call", href: "/contact" },
+            { text: "Learn More", href: "#features" },
+          ]}
+          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)}
+        />
+      </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>
   );
-};
-
-export default HomePage;
+}