Merge version_2 into main #3
289
src/app/page.tsx
289
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 FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
||||
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";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import Input from '@/components/form/Input';
|
||||
import ButtonElasticEffect from '@/components/button/ButtonElasticEffect/ButtonElasticEffect';
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ClipToolPage() {
|
||||
const [videoUrl, setVideoUrl] = useState("");
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
@@ -29,238 +24,48 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Features", id: "#features"},
|
||||
{
|
||||
name: "Pricing", id: "#pricing"},
|
||||
{
|
||||
name: "FAQ", id: "#faq"},
|
||||
]}
|
||||
brandName="ClipGen AI"
|
||||
button={{
|
||||
text: "Get Started", href: "#contact"}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="ClipGen AI"
|
||||
navItems={[]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
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="tool-interface" data-section="tool-interface" className="py-20 flex flex-col items-center justify-center min-h-[80vh] px-4 text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-6">ClipGen AI Tool</h1>
|
||||
<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>
|
||||
|
||||
<div className="w-full max-w-lg space-y-6">
|
||||
<Input
|
||||
value={videoUrl}
|
||||
onChange={setVideoUrl}
|
||||
placeholder="Paste YouTube URL here..."
|
||||
ariaLabel="YouTube Video URL"
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-left">
|
||||
<div className="p-4 rounded-xl border">
|
||||
<h3 className="font-semibold mb-2">Captions</h3>
|
||||
<p className="text-sm opacity-70">Enable AI-powered subtitles</p>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl border">
|
||||
<h3 className="font-semibold mb-2">Layout</h3>
|
||||
<p className="text-sm opacity-70">Optimize for TikTok/Reels</p>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl border">
|
||||
<h3 className="font-semibold mb-2">Timeframe</h3>
|
||||
<p className="text-sm opacity-70">Select clip duration</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="The AI Tool Content Creators Trust"
|
||||
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."
|
||||
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">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Auto Highlights", description: "AI analyzes audio and video to find the best moments.", bentoComponent: "reveal-icon", icon: Sparkles,
|
||||
},
|
||||
{
|
||||
title: "Smart Captions", description: "Generated captions that actually stay on beat.", bentoComponent: "reveal-icon", icon: MessageSquare,
|
||||
},
|
||||
{
|
||||
title: "Vertical Resizing", description: "Turn landscape into portrait perfectly every time.", bentoComponent: "reveal-icon", icon: Smartphone,
|
||||
},
|
||||
]}
|
||||
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">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
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>
|
||||
<ButtonElasticEffect
|
||||
text="Generate Clips Now"
|
||||
onClick={() => alert(`Generating clips for: ${videoUrl}`)}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user