Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| a830549069 | |||
| 13bea032e7 | |||
| e9ae2d83ff | |||
| 4e66f324df | |||
| ed497f179e | |||
| 073d424b0f | |||
| ab65a13d37 |
349
src/app/page.tsx
349
src/app/page.tsx
@@ -2,19 +2,43 @@
|
||||
|
||||
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("");
|
||||
const [captions, setCaptions] = useState(true);
|
||||
const [layout, setLayout] = useState("vertical");
|
||||
const [timeframe, setTimeframe] = useState("30s");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [clips, setClips] = useState<string[]>([]);
|
||||
|
||||
const handleGenerate = async () => {
|
||||
if (!videoUrl) {
|
||||
setError("Please enter a valid YouTube URL.");
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const response = await fetch('/api/generate-clips', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ videoUrl, captions, layout, timeframe })
|
||||
});
|
||||
const data = await response.json();
|
||||
if (data.error) throw new Error(data.error);
|
||||
setClips(data.clips || []);
|
||||
} catch (err: any) {
|
||||
setError(err.message || "Something went wrong. Please try again.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
@@ -29,238 +53,83 @@ 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">Input your YouTube URL and configure your clipping settings below.</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-3 gap-4 text-left">
|
||||
<div className="p-4 rounded-xl border">
|
||||
<h3 className="font-semibold mb-2">Captions</h3>
|
||||
<select
|
||||
value={captions ? "on" : "off"}
|
||||
onChange={(e) => setCaptions(e.target.value === "on")}
|
||||
className="w-full bg-transparent border-none focus:ring-0"
|
||||
>
|
||||
<option value="on">Enabled</option>
|
||||
<option value="off">Disabled</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl border">
|
||||
<h3 className="font-semibold mb-2">Layout</h3>
|
||||
<select
|
||||
value={layout}
|
||||
onChange={(e) => setLayout(e.target.value)}
|
||||
className="w-full bg-transparent border-none focus:ring-0"
|
||||
>
|
||||
<option value="vertical">Vertical (9:16)</option>
|
||||
<option value="square">Square (1:1)</option>
|
||||
<option value="horizontal">Horizontal (16:9)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl border">
|
||||
<h3 className="font-semibold mb-2">Time</h3>
|
||||
<select
|
||||
value={timeframe}
|
||||
onChange={(e) => setTimeframe(e.target.value)}
|
||||
className="w-full bg-transparent border-none focus:ring-0"
|
||||
>
|
||||
<option value="30s">30 Seconds</option>
|
||||
<option value="60s">60 Seconds</option>
|
||||
<option value="90s">90 Seconds</option>
|
||||
</select>
|
||||
</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>
|
||||
<ButtonElasticEffect
|
||||
text={loading ? "Processing..." : "Generate Clips Now"}
|
||||
onClick={handleGenerate}
|
||||
disabled={loading}
|
||||
className="w-full"
|
||||
/>
|
||||
|
||||
<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>
|
||||
{error && <p className="text-red-500 mt-4">{error}</p>}
|
||||
|
||||
<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>
|
||||
{clips.length > 0 && (
|
||||
<div className="mt-10 grid grid-cols-1 gap-6 w-full">
|
||||
<h2 className="text-2xl font-semibold">Generated Clips</h2>
|
||||
{clips.map((clip, i) => (
|
||||
<video key={i} src={clip} controls className="w-full rounded-2xl shadow-lg" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user