Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,19 +2,14 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
+import Input from '@/components/form/Input';
-import FeatureBento from '@/components/sections/feature/FeatureBento';
+import ButtonElasticEffect from '@/components/button/ButtonElasticEffect/ButtonElasticEffect';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { useState } from "react";
-import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+export default function ClipToolPage() {
-import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
+  const [videoUrl, setVideoUrl] = useState("");
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import SplitAbout from '@/components/sections/about/SplitAbout';
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
-import { MessageSquare, Smartphone, Sparkles } from "lucide-react";
 
-export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="hover-bubble"
@@ -29,237 +24,47 @@ export default function LandingPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
+            <NavbarLayoutFloatingOverlay
-      navItems={[
+              brandName="ClipGen AI"
-        {
+              navItems={[]}
-          name: "Features",          id: "#features"},
+            />
-        {
+        </div>
-          name: "Pricing",          id: "#pricing"},
-        {
-          name: "FAQ",          id: "#faq"},
-      ]}
-      brandName="ClipGen AI"
-      button={{
-        text: "Get Started",        href: "#contact"}}
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="tool-interface" data-section="tool-interface" className="py-20 flex flex-col items-center justify-center min-h-[80vh] px-4 text-center">
-      <HeroSplitKpi
+          <h1 className="text-4xl md:text-5xl font-bold mb-6">ClipGen AI Tool</h1>
-      background={{
+          <p className="max-w-xl mb-10 opacity-80">Paste your YouTube video URL below to start generating high-impact clips with custom layout and caption settings.</p>
-        variant: "gradient-bars"}}
-      title="Turn Long Videos into Viral Clips in Seconds"
-      description="Stop wasting hours cutting videos. Upload your long-form content, and our AI instantly extracts the most engaging moments for TikTok, Reels, and Shorts."
-      kpis={[
-        {
-          value: "90%",          label: "Time Saved"},
-        {
-          value: "100+",          label: "Clips Generated"},
-        {
-          value: "24/7",          label: "Automated AI"},
-      ]}
-      enableKpiAnimation={true}
-      buttons={[
-        {
-          text: "Start Generating",          href: "#contact"},
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg"
-      mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-young-business-woman-standing-outside-office-buildings-business-success-concept_58466-11854.jpg",          alt: "Portrait of young business woman standing outside office buildings"},
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-young-confident-woman-startup-manager-office-posing-with-confidence-looking_1258-195341.jpg",          alt: "Portrait of young confident woman startup manager"},
-        {
-          src: "http://img.b2bpic.net/free-photo/good-looking-business-woman-with-arms-crossed_23-2147626300.jpg",          alt: "Good looking business woman with arms crossed"},
-        {
-          src: "http://img.b2bpic.net/free-photo/young-attractive-emotional-girl-business-style-clothes_78826-2303.jpg",          alt: "Young attractive emotional girl in business style clothes"},
-        {
-          src: "http://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5366.jpg",          alt: "Man portrait posing in a loft modern space"},
-      ]}
-      avatarText="Trusted by 5,000+ creators"
-      marqueeItems={[
-        {
-          type: "text",          text: "AI-Powered"},
-        {
-          type: "text",          text: "Lightning Fast"},
-        {
-          type: "text",          text: "Multi-Platform"},
-        {
-          type: "text",          text: "High Engagement"},
-        {
-          type: "text",          text: "Creator Approved"},
-      ]}
-    />
-  </div>
           
-  <div id="about" data-section="about">
+          <div className="w-full max-w-lg space-y-6">
-      <SplitAbout
+            <Input 
-      textboxLayout="split"
+              value={videoUrl}
-      useInvertedBackground={true}
+              onChange={setVideoUrl}
-      title="The AI Tool Content Creators Trust"
+              placeholder="Paste YouTube URL here..."
-      description="We believe creators should spend their time creating, not editing. Our platform automates the tedious parts of content distribution so you can focus on your story."
+              ariaLabel="YouTube Video URL"
-      bulletPoints={[
+            />
-        {
-          title: "Auto Clip Detection",          description: "AI finds the funniest, loudest, and most engaging moments automatically."},
-        {
-          title: "Auto Captions",          description: "Engage your viewers with perfectly synced subtitles for every clip."},
-        {
-          title: "Multi-Platform Export",          description: "Automatically resize for TikTok, Reels, and Shorts in one click."},
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/post-production-specialist-using-headphones-test-improve-audio-quality_482257-121838.jpg"
-      mediaAnimation="blur-reveal"
-    />
-  </div>
             
-  <div id="features" data-section="features">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-left">
-      <FeatureBento
+                <div className="p-4 rounded-xl border">
-      animationType="slide-up"
+                    <h3 className="font-semibold mb-2">Captions</h3>
-      textboxLayout="default"
+                    <p className="text-sm opacity-70">Enable AI-powered subtitles</p>
-      useInvertedBackground={false}
+                </div>
-      features={[
+                <div className="p-4 rounded-xl border">
-        {
+                    <h3 className="font-semibold mb-2">Layout</h3>
-          title: "Auto Highlights",          description: "AI analyzes audio and video to find the best moments.",          bentoComponent: "reveal-icon",          icon: Sparkles,
+                    <p className="text-sm opacity-70">Optimize for TikTok/Reels</p>
-        },
+                </div>
-        {
+                <div className="p-4 rounded-xl border">
-          title: "Smart Captions",          description: "Generated captions that actually stay on beat.",          bentoComponent: "reveal-icon",          icon: MessageSquare,
+                    <h3 className="font-semibold mb-2">Timeframe</h3>
-        },
+                    <p className="text-sm opacity-70">Select clip duration</p>
-        {
+                </div>
-          title: "Vertical Resizing",          description: "Turn landscape into portrait perfectly every time.",          bentoComponent: "reveal-icon",          icon: Smartphone,
+            </div>
-        },
-      ]}
-      title="Built for Creators Who Need More Reach"
-      description="Powerful AI tools that integrate seamlessly into your workflow."
-    />
-  </div>
 
-  <div id="testimonials" data-section="testimonials">
+            <ButtonElasticEffect 
-      <TestimonialCardTwo
+                text="Generate Clips Now" 
-      animationType="slide-up"
+                onClick={() => alert(`Generating clips for: ${videoUrl}`)}
-      textboxLayout="default"
+                className="w-full"
-      useInvertedBackground={true}
+            />
-      testimonials={[
+          </div>
-        {
+        </div>
-          id: "1",          name: "Sarah Johnson",          role: "Podcaster",          testimonial: "I used to spend 5 hours editing. Now I do it in 5 minutes.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-digital-nomad-standing-office-with-laptop-smiling-working-her_1258-195345.jpg"},
-        {
-          id: "2",          name: "Michael Chen",          role: "YouTuber",          testimonial: "The AI detection is surprisingly smart at finding funny bits.",          imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5365.jpg"},
-        {
-          id: "3",          name: "Emily Rodriguez",          role: "Streamer",          testimonial: "Finally, an AI tool that actually gets the vertical framing right.",          imageSrc: "http://img.b2bpic.net/free-photo/male-office-worker-sitting-desk_1098-21342.jpg"},
-        {
-          id: "4",          name: "David Kim",          role: "Marketer",          testimonial: "My TikTok traffic has doubled since using these clips.",          imageSrc: "http://img.b2bpic.net/free-photo/working-man_1098-18366.jpg"},
-        {
-          id: "5",          name: "Anna Lee",          role: "Small Business Owner",          testimonial: "Best investment for my social media marketing strategy.",          imageSrc: "http://img.b2bpic.net/free-photo/african-man-glasses-posing-city-with-gently-smile-gorgeous-brunette-black-guy-chilling-outdoor-big-headphones_197531-21898.jpg"},
-      ]}
-      title="Creators Who Save Hours Weekly"
-      description="Join thousands of creators who have scaled their content output with our platform."
-    />
-  </div>
-
-  <div id="social-proof" data-section="social-proof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "StreamLabs",        "PodCastify",        "CreatorSpace",        "GrowthTube",        "ClipMedia",        "VideoLaunch",        "ViralPath"]}
-      title="Used by Leading Creators"
-      description="Trusted by thousands of professionals in the creator economy."
-    />
-  </div>
-
-  <div id="pricing" data-section="pricing">
-      <PricingCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      plans={[
-        {
-          id: "basic",          badge: "Free",          price: "$0",          subtitle: "For getting started",          features: [
-            "5 clips per month",            "Watermark on exports",            "Standard support"],
-          buttons: [
-            {
-              text: "Get Started",              href: "#"},
-          ],
-        },
-        {
-          id: "pro",          badge: "Premium",          price: "$29/mo",          subtitle: "For pro creators",          features: [
-            "Unlimited clips",            "HD Exports",            "Faster processing",            "Custom captions"],
-          buttons: [
-            {
-              text: "Upgrade Now",              href: "#"},
-          ],
-        },
-      ]}
-      title="Simple, Transparent Pricing"
-      description="Start with our free plan or upgrade for unlimited clip generation."
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqDouble
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "1",          title: "Is my video data private?",          content: "Yes, we prioritize your privacy and data security."},
-        {
-          id: "2",          title: "Can I use this for Reels?",          content: "Absolutely, it's perfect for Reels, TikTok, and YouTube Shorts."},
-        {
-          id: "3",          title: "How fast is processing?",          content: "Most clips are processed in under 60 seconds."},
-      ]}
-      title="Frequently Asked Questions"
-      description="Have more questions? Check out our help docs."
-      faqsAnimation="blur-reveal"
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={true}
-      background={{
-        variant: "plain"}}
-      tag="Get Started Today"
-      title="Ready to Scale Your Content?"
-      description="Sign up now and start getting more engagement with AI-powered video clips."
-      buttons={[
-        {
-          text: "Sign Up Free",          href: "#"},
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="http://img.b2bpic.net/free-photo/video-editor-polishing-raw-footage-chroma-key-pc-closeup_482257-122541.jpg"
-      logoText="ClipGen AI"
-      columns={[
-        {
-          title: "Product",          items: [
-            {
-              label: "Features",              href: "#features"},
-            {
-              label: "Pricing",              href: "#pricing"},
-          ],
-        },
-        {
-          title: "Support",          items: [
-            {
-              label: "FAQ",              href: "#faq"},
-            {
-              label: "Contact",              href: "#contact"},
-          ],
-        },
-        {
-          title: "Legal",          items: [
-            {
-              label: "Privacy",              href: "#"},
-            {
-              label: "Terms",              href: "#"},
-          ],
-        },
-      ]}
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );