Merge version_1 into main #1

Merged
bender merged 1 commits from version_1 into main 2026-04-15 13:54:42 +00:00

View File

@@ -19,352 +19,185 @@ export default function LandingPage() {
defaultButtonVariant="text-shift"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Features",
id: "features",
},
{
name: "Results",
id: "metrics",
},
{
name: "Testimonials",
id: "testimonials",
},
{
name: "FAQ",
id: "faq",
},
]}
brandName="ShortsMagic"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Features", id: "features" },
{ name: "Results", id: "metrics" },
{ name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" },
{ name: "Blog", id: "blog" },
{ name: "Contact", id: "contact" }
]}
brandName="ShortsMagic"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Turn Long Videos Into Viral Shorts Instantly"
description="Paste your YouTube link and let our AI engine automatically extract the most engaging moments, optimize them for mobile, and generate perfectly captioned clips."
buttons={[
{
text: "Start Converting",
href: "#contact",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169845.jpg"
showBlur={true}
avatars={[
{
src: "http://img.b2bpic.net/free-photo/man-with-vr-headset-touching-holographic-screen_53876-101150.jpg",
alt: "User avatar 1",
},
{
src: "http://img.b2bpic.net/free-photo/empty-medical-cabinet-private-clinic-with-laptop-diagnostics_482257-122738.jpg",
alt: "User avatar 2",
},
{
src: "http://img.b2bpic.net/free-photo/closeup-photo-turned-digital-midi-controller_400718-29.jpg",
alt: "User avatar 3",
},
{
src: "http://img.b2bpic.net/free-photo/person-having-conversation-with-ai-virtual-assistant-producing-clips_482257-127292.jpg",
alt: "User avatar 4",
},
{
src: "http://img.b2bpic.net/free-photo/focused-woman-working-with-ai-chatbot-her-desktop-computer_482257-120813.jpg",
alt: "User avatar 5",
},
]}
avatarText="Trusted by 50,000+ creators"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Turn Long Videos Into Viral Shorts Instantly"
description="Paste your YouTube link and let our AI engine automatically extract the most engaging moments, optimize them for mobile, and generate perfectly captioned clips."
buttons={[{ text: "Start Converting", href: "#contact" }]}
imageSrc="http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169845.jpg"
showBlur={true}
avatars={[
{ src: "http://img.b2bpic.net/free-photo/man-with-vr-headset-touching-holographic-screen_53876-101150.jpg", alt: "User avatar 1" },
{ src: "http://img.b2bpic.net/free-photo/empty-medical-cabinet-private-clinic-with-laptop-diagnostics_482257-122738.jpg", alt: "User avatar 2" },
{ src: "http://img.b2bpic.net/free-photo/closeup-photo-turned-digital-midi-controller_400718-29.jpg", alt: "User avatar 3" },
{ src: "http://img.b2bpic.net/free-photo/person-having-conversation-with-ai-virtual-assistant-producing-clips_482257-127292.jpg", alt: "User avatar 4" },
{ src: "http://img.b2bpic.net/free-photo/focused-woman-working-with-ai-chatbot-her-desktop-computer_482257-120813.jpg", alt: "User avatar 5" }
]}
avatarText="Trusted by 50,000+ creators"
/>
</div>
<div id="features" data-section="features">
<FeatureCardNineteen
textboxLayout="default"
useInvertedBackground={false}
features={[
{
tag: "AI Intelligence",
title: "Smart Highlights",
subtitle: "AI detection",
description: "Our model automatically identifies the most viral moments from your long-form videos.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-architect-using-tablet-with-touch-screen-analyze-building-model-architectural-development-man-engineer-working-with-device-construction-layout-design_482257-39970.jpg",
},
{
tag: "Optimized",
title: "Vertical Format",
subtitle: "Mobile ready",
description: "Seamlessly reframe your horizontal content for TikTok, Reels, and YouTube Shorts.",
imageSrc: "http://img.b2bpic.net/free-photo/ui-ux-representations-with-smartphone_23-2150201876.jpg",
},
{
tag: "Accessibility",
title: "Auto-Captions",
subtitle: "Text generation",
description: "Engage your audience with stunning, perfectly synced dynamic captions automatically.",
imageSrc: "http://img.b2bpic.net/free-photo/hand-with-player_1134-101.jpg",
},
]}
title="Smart Features for Creators"
description="ShortsMagic uses advanced AI to make your content work harder for you."
/>
</div>
<div id="features" data-section="features">
<FeatureCardNineteen
textboxLayout="default"
useInvertedBackground={false}
features={[
{
tag: "AI Intelligence", title: "Smart Highlights", subtitle: "AI detection", description: "Our model automatically identifies the most viral moments from your long-form videos.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-architect-using-tablet-with-touch-screen-analyze-building-model-architectural-development-man-engineer-working-with-device-construction-layout-design_482257-39970.jpg"
},
{
tag: "Optimized", title: "Vertical Format", subtitle: "Mobile ready", description: "Seamlessly reframe your horizontal content for TikTok, Reels, and YouTube Shorts.", imageSrc: "http://img.b2bpic.net/free-photo/ui-ux-representations-with-smartphone_23-2150201876.jpg"
},
{
tag: "Accessibility", title: "Auto-Captions", subtitle: "Text generation", description: "Engage your audience with stunning, perfectly synced dynamic captions automatically.", imageSrc: "http://img.b2bpic.net/free-photo/hand-with-player_1134-101.jpg"
}
]}
title="Smart Features for Creators"
description="ShortsMagic uses advanced AI to make your content work harder for you."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="depth-3d"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
metrics={[
{
id: "m1",
value: "10x",
description: "Average reach boost",
},
{
id: "m2",
value: "90%",
description: "Time saved editing",
},
{
id: "m3",
value: "500k+",
description: "Clips generated monthly",
},
]}
title="Proven Performance"
description="Creators using ShortsMagic see massive growth in reach."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="depth-3d"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
metrics={[
{ id: "m1", value: "10x", description: "Average reach boost" },
{ id: "m2", value: "90%", description: "Time saved editing" },
{ id: "m3", value: "500k+", description: "Clips generated monthly" }
]}
title="Proven Performance"
description="Creators using ShortsMagic see massive growth in reach."
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={[
"TechTube",
"GrowthLabs",
"ContentKings",
"MediaMaster",
"VisionaryCreators",
"SocialBoost",
"CreatorElite",
]}
title="Trusted by Top Creators"
description="We partner with leading agencies and creators to bring the best tools to market."
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={["TechTube", "GrowthLabs", "ContentKings", "MediaMaster", "VisionaryCreators", "SocialBoost", "CreatorElite"]}
title="Trusted by Top Creators"
description="We partner with leading agencies and creators to bring the best tools to market."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{
id: "1",
name: "Alex Rivers",
role: "Tech Influencer",
company: "RiversTech",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-headphones_23-2149386585.jpg",
},
{
id: "2",
name: "Jamie Lee",
role: "Creative Lead",
company: "StudioMix",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-man-pressing-buttons-calculator-pink-shirt-jeans-looking-optimistic-front-view_176474-99023.jpg",
},
{
id: "3",
name: "Jordan Smith",
role: "Content Strategist",
company: "GrowthCo",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/working-man_1098-18366.jpg",
},
{
id: "4",
name: "Casey Morgan",
role: "YouTube Creator",
company: "MorganMedia",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-work_23-2149097959.jpg",
},
{
id: "5",
name: "Taylor Quinn",
role: "Founder",
company: "StreamFast",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/man-signs-documents-businessman-sitting-table-manager-working-office_1157-42012.jpg",
},
]}
kpiItems={[
{
value: "5M+",
label: "Views Generated",
},
{
value: "4.9/5",
label: "User Rating",
},
{
value: "15k+",
label: "Happy Creators",
},
]}
title="What Creators Say"
description="Join thousands of successful creators scaling their content empire."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{ id: "1", name: "Alex Rivers", role: "Tech Influencer", company: "RiversTech", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-headphones_23-2149386585.jpg" },
{ id: "2", name: "Jamie Lee", role: "Creative Lead", company: "StudioMix", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-man-pressing-buttons-calculator-pink-shirt-jeans-looking-optimistic-front-view_176474-99023.jpg" },
{ id: "3", name: "Jordan Smith", role: "Content Strategist", company: "GrowthCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/working-man_1098-18366.jpg" },
{ id: "4", name: "Casey Morgan", role: "YouTube Creator", company: "MorganMedia", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-work_23-2149097959.jpg" },
{ id: "5", name: "Taylor Quinn", role: "Founder", company: "StreamFast", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-signs-documents-businessman-sitting-table-manager-working-office_1157-42012.jpg" }
]}
kpiItems={[
{ value: "5M+", label: "Views Generated" },
{ value: "4.9/5", label: "User Rating" },
{ value: "15k+", label: "Happy Creators" }
]}
title="What Creators Say"
description="Join thousands of successful creators scaling their content empire."
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "q1",
title: "How does it work?",
content: "Simply paste any YouTube link, and our AI analyzes the video to find the most viral potential segments.",
},
{
id: "q2",
title: "Is it free to use?",
content: "We offer a generous free tier for creators, with premium options for higher volume editing needs.",
},
{
id: "q3",
title: "Can I customize captions?",
content: "Yes, our editor allows full control over fonts, styles, and animation of your captions.",
},
]}
title="Common Questions"
description="Everything you need to know about ShortsMagic."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{ id: "q1", title: "How does it work?", content: "Simply paste any YouTube link, and our AI analyzes the video to find the most viral potential segments." },
{ id: "q2", title: "Is it free to use?", content: "We offer a generous free tier for creators, with premium options for higher volume editing needs." },
{ id: "q3", title: "Can I customize captions?", content: "Yes, our editor allows full control over fonts, styles, and animation of your captions." }
]}
title="Common Questions"
description="Everything you need to know about ShortsMagic."
faqsAnimation="slide-up"
/>
</div>
<div id="blog" data-section="blog">
<BlogCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
title="Content Strategy Insights"
description="Tips, tricks, and industry news for scaling your social presence."
blogs={[
{
id: "b1",
category: "Strategy",
title: "Mastering the Short-Form Algorithm",
excerpt: "Learn how to optimize your shorts for maximum reach in 2025.",
imageSrc: "http://img.b2bpic.net/free-photo/man-controlling-smart-lamp-with-his-phone_23-2149036889.jpg",
authorName: "Jane Doe",
authorAvatar: "http://img.b2bpic.net/free-photo/upbeat-freelancer-front-digital-device_482257-124312.jpg",
date: "Oct 24",
},
{
id: "b2",
category: "Growth",
title: "Why AI is the Creator's Best Friend",
excerpt: "How to save hours of manual editing and focus on creativity.",
imageSrc: "http://img.b2bpic.net/free-photo/arrow-paper-cut-out_23-2148456203.jpg",
authorName: "John Smith",
authorAvatar: "http://img.b2bpic.net/free-photo/happy-smiling-man-winter-sweater-is-posing-photographer-studio_613910-13711.jpg",
date: "Oct 22",
},
{
id: "b3",
category: "Tools",
title: "Optimizing Captions for Engagement",
excerpt: "Psychology-backed design tips for dynamic captions.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-home-creating-3d-render-apartment-interior-layout_482257-126412.jpg",
authorName: "Sarah Wilson",
authorAvatar: "http://img.b2bpic.net/free-photo/businesswoman-with-notebook-looking-her-side_114579-65357.jpg",
date: "Oct 20",
},
]}
/>
</div>
<div id="blog" data-section="blog">
<BlogCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
title="Content Strategy Insights"
description="Tips, tricks, and industry news for scaling your social presence."
blogs={[
{ id: "b1", category: "Strategy", title: "Mastering the Short-Form Algorithm", excerpt: "Learn how to optimize your shorts for maximum reach in 2025.", imageSrc: "http://img.b2bpic.net/free-photo/man-controlling-smart-lamp-with-his-phone_23-2149036889.jpg", authorName: "Jane Doe", authorAvatar: "http://img.b2bpic.net/free-photo/upbeat-freelancer-front-digital-device_482257-124312.jpg", date: "Oct 24" },
{ id: "b2", category: "Growth", title: "Why AI is the Creator's Best Friend", excerpt: "How to save hours of manual editing and focus on creativity.", imageSrc: "http://img.b2bpic.net/free-photo/arrow-paper-cut-out_23-2148456203.jpg", authorName: "John Smith", authorAvatar: "http://img.b2bpic.net/free-photo/happy-smiling-man-winter-sweater-is-posing-photographer-studio_613910-13711.jpg", date: "Oct 22" },
{ id: "b3", category: "Tools", title: "Optimizing Captions for Engagement", excerpt: "Psychology-backed design tips for dynamic captions.", imageSrc: "http://img.b2bpic.net/free-photo/woman-home-creating-3d-render-apartment-interior-layout_482257-126412.jpg", authorName: "Sarah Wilson", authorAvatar: "http://img.b2bpic.net/free-photo/businesswoman-with-notebook-looking-her-side_114579-65357.jpg", date: "Oct 20" }
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{
variant: "gradient-bars",
}}
tag="Get Started"
title="Ready to Scale Your Content?"
description="Paste your first YouTube link today and see the magic in seconds."
imageSrc="http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-network-communications-design_1048-14836.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{ variant: "gradient-bars" }}
tag="Get Started"
title="Ready to Scale Your Content?"
description="Paste your first YouTube link today and see the magic in seconds."
imageSrc="http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-network-communications-design_1048-14836.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Platform",
items: [
{
label: "Features",
href: "#features",
},
{
label: "Pricing",
href: "#",
},
{
label: "FAQ",
href: "#faq",
},
],
},
{
title: "Company",
items: [
{
label: "About Us",
href: "#",
},
{
label: "Blog",
href: "#blog",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
]}
logoText="ShortsMagic"
copyrightText="© 2025 ShortsMagic | All Rights Reserved"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Platform", items: [
{ label: "Features", href: "#features" },
{ label: "Pricing", href: "#" },
{ label: "FAQ", href: "#faq" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "#" },
{ label: "Blog", href: "#blog" },
{ label: "Contact", href: "#contact" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" }
]
}
]}
logoText="ShortsMagic"
copyrightText="© 2025 ShortsMagic | All Rights Reserved"
/>
</div>
</ReactLenis>
</ThemeProvider>
);