Files
45f16e1b-3bbd-4dee-8bf2-bde…/src/app/page.tsx
2026-03-07 23:48:03 +00:00

276 lines
14 KiB
TypeScript

"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroCentered from "@/components/sections/hero/HeroCentered";
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
import SplitAbout from "@/components/sections/about/SplitAbout";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import {
Zap,
TrendingUp,
Palette,
Monitor,
Upload,
Lock,
Target,
Globe,
Users,
DollarSign,
Gift,
Sparkles,
Crown,
CheckCircle,
Heart,
} from "lucide-react";
export default function Home() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Features", id: "#features" },
{ name: "Pricing", id: "#pricing" },
{ name: "About", id: "#about" },
];
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="Syncora"
bottomLeftText="AI-Powered Content Creation"
bottomRightText="hello@syncora.app"
/>
</div>
<div id="hero" data-section="hero">
<HeroCentered
title="Transform Your Content Creation with AI"
description="Generate AI-powered scripts, trending video ideas, and customizable animations for YouTube, TikTok, Instagram, and Facebook. One platform. All your platforms. Unlimited possibilities."
background={{ variant: "animated-grid" }}
avatars={[
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdN0gwMXJN4o9AEjWIWDR10e3G/portrait-of-a-professional-female-conten-1772927098524-a1bb9fd2.png", alt: "Portrait of a professional female content creator in her late 20s, smiling confidently at camera. Mo"},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdN0gwMXJN4o9AEjWIWDR10e3G/portrait-of-a-male-content-creator-in-hi-1772927098976-ece44af1.png", alt: "Portrait of a male content creator in his early 30s, friendly expression, modern professional settin"},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdN0gwMXJN4o9AEjWIWDR10e3G/portrait-of-a-creative-female-profession-1772927098345-8bac2707.png", alt: "Portrait of a creative female professional in her mid-20s with modern style, warm and welcoming expr"},
]}
avatarText="Trusted by 5,000+ creators"
buttons={[
{ text: "Start Free Trial", href: "/signup" },
{ text: "View Demo", href: "#features" },
]}
buttonAnimation="slide-up"
/>
</div>
<div id="features" data-section="features">
<FeatureHoverPattern
title="Powerful AI-Driven Tools"
description="Everything creators need to produce professional content at scale"
tag="Platform Features"
tagIcon={Sparkles}
textboxLayout="default"
useInvertedBackground={false}
features={[
{
icon: Zap,
title: "AI Script Generator", description:
"Generate engaging video scripts tailored to your niche. Choose from fitness, tech reviews, lifestyle, and more."},
{
icon: TrendingUp,
title: "Trending Ideas", description:
"Get real-time trending video concepts optimized for each platform with platform-specific ratios."},
{
icon: Palette,
title: "Thumbnail Animations", description:
"Customizable animated thumbnails with AI design suggestions. Upload your images and enhance them instantly."},
{
icon: Monitor,
title: "Multi-Platform Support", description:
"YouTube (16:9), TikTok (9:16), Instagram Reels (9:16), Facebook (16:9 or 1:1). All in one place."},
{
icon: Upload,
title: "Image Integration", description:
"Upload your own images and integrate them seamlessly with AI designs for unique thumbnails."},
{
icon: Lock,
title: "Secure Storage", description:
"Your content is saved to your account. Access it anytime, anywhere. Never lose your ideas."},
]}
animationType="slide-up"
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardEight
title="Flexible Pricing for Every Creator"
description="Choose the plan that works best for you. No hidden fees. Cancel anytime."
tag="Transparent Pricing"
tagIcon={DollarSign}
textboxLayout="default"
useInvertedBackground={true}
animationType="slide-up"
plans={[
{
id: "free", badge: "Free Trial", badgeIcon: Gift,
price: "$0", subtitle: "Perfect for getting started", buttons: [{ text: "Get Started", href: "/signup" }],
features: [
"1 AI-generated script per day", "1 animated thumbnail per day", "Access to trending ideas", "Basic image upload (up to 5MB)", "YouTube, TikTok, Instagram, Facebook support", "Mobile app access", "Community support"],
},
{
id: "monthly", badge: "Most Popular", badgeIcon: Sparkles,
price: "$10", subtitle: "Billed monthly. Great for consistent creators.", buttons: [{ text: "Subscribe Now", href: "/checkout?plan=monthly" }],
features: [
"Unlimited AI-generated scripts", "Unlimited animated thumbnails", "Advanced customization options", "Unlimited image uploads", "All platform formats supported", "Priority email support", "Download in HD quality", "Monthly content calendar", "Early access to new features"],
},
{
id: "lifetime", badge: "Best Value", badgeIcon: Crown,
price: "$50", subtitle: "One-time payment. Unlimited access forever.", buttons: [{ text: "Buy Lifetime", href: "/checkout?plan=lifetime" }],
features: [
"Unlimited everything forever", "All current and future features", "Lifetime updates included", "Priority support 24/7", "Team collaboration (up to 5 users)", "Advanced analytics dashboard", "Custom branding options", "API access for integrations", "No subscription. Ever."],
},
]}
/>
</div>
<div id="about" data-section="about">
<SplitAbout
title="Why Syncora?"
description="We built Syncora because content creators deserve better tools. No complicated interfaces. No expensive software. Just AI that works."
tag="Our Mission"
tagIcon={Heart}
textboxLayout="default"
useInvertedBackground={false}
imagePosition="right"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdN0gwMXJN4o9AEjWIWDR10e3G/modern-software-dashboard-for-content-cr-1772927099490-052886ae.png"
imageAlt="Syncora Platform Interface"
mediaAnimation="slide-up"
bulletPoints={[
{
icon: Zap,
title: "Time-Saving AI", description:
"Generate scripts and designs in seconds, not hours. Spend time creating, not planning."},
{
icon: Target,
title: "Niche-Specific Content", description:
"Whether you're in fitness, tech, lifestyle, or any other niche, we've got you covered."},
{
icon: Globe,
title: "Platform Optimized", description:
"Every video is optimized for its platform with correct aspect ratios and trending formats."},
{
icon: Users,
title: "Creator Community", description:
"Join thousands of creators using Syncora daily. Share ideas, learn, and grow together."},
]}
buttons={[{ text: "See All Features", href: "#features" }]}
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
title="Trusted by Creators Worldwide"
description="Compare Syncora to free tools and see why creators are making the switch"
tag="Why We're Different"
tagIcon={CheckCircle}
textboxLayout="default"
useInvertedBackground={true}
names=[
"YouTube", "TikTok", "Instagram", "Facebook", "Creator Tools", "Content Studio", "Video Hub"]
speed={40}
showCard={true}
buttons={[{ text: "Join 5,000+ Creators", href: "/signup" }]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
sideTitle="Frequently Asked Questions"
sideDescription="Everything you need to know about Syncora"
textPosition="left"
useInvertedBackground={false}
faqsAnimation="slide-up"
animationType="smooth"
faqs={[
{
id: "1", title: "What's included in the free tier?", content:
"The free tier gives you access to 1 AI-generated script and 1 animated thumbnail per day. You can use all platform formats (YouTube, TikTok, Instagram, Facebook) and upload up to 5MB of images daily. It's perfect for testing the platform."},
{
id: "2", title: "Can I cancel my subscription anytime?", content:
"Yes! You can cancel your monthly subscription at any time with no penalties. Your access continues until the end of your billing period. If you purchase the lifetime access, there's no subscription to cancel—it's yours forever."},
{
id: "3", title: "What payment methods do you accept?", content:
"We accept credit card (Visa, Mastercard, American Express), Apple Pay, and Cash App. All payments are processed securely through industry-standard encryption."},
{
id: "4", title: "What aspect ratios does Syncora support?", content:
"We support all major platform ratios: YouTube Shorts (9:16), TikTok (9:16), Instagram Reels (9:16), YouTube standard (16:9), and Facebook (16:9 or 1:1). Our AI automatically adapts your content to each format."},
{
id: "5", title: "Can I use Syncora content commercially?", content:
"Yes! All content generated through Syncora is yours to use. Whether you monetize on YouTube, sell products, or use it for commercial purposes, you have full rights to everything you create."},
{
id: "6", title: "How do I access my saved content?", content:
"Once you sign up with your email, all your generated scripts and designs are saved to your account. You can access them from any device—desktop, tablet, or mobile—by logging in anytime."},
{
id: "7", title: "Is my personal data safe?", content:
"Absolutely. We use enterprise-grade encryption to protect your data. We never sell your information to third parties, and we comply with GDPR and other privacy regulations."},
{
id: "8", title: "Can I upgrade from free or monthly to lifetime?", content:
"Yes! You can upgrade anytime. If you've already paid for monthly, we'll credit that towards your lifetime purchase, so you only pay the difference."},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
title="Ready to Transform Your Content?"
description="Join thousands of creators using Syncora. Start with one free use per day and upgrade whenever you're ready. No credit card required."
useInvertedBackground={false}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AdN0gwMXJN4o9AEjWIWDR10e3G/sleek-dashboard-interface-showing-syncor-1772927098863-4a07f700.png"
imageAlt="Syncora Dashboard"
mediaAnimation="slide-up"
mediaPosition="right"
inputs={[
{
name: "email", type: "email", placeholder: "Enter your email", required: true,
},
{
name: "niche", type: "text", placeholder: "Your content niche (e.g., fitness, tech reviews)", required: true,
},
]}
textarea={{
name: "message", placeholder: "Tell us about your content goals (optional)", rows: 4,
required: false,
}}
buttonText="Get Started Free"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Syncora"
leftLink={{ text: "Privacy Policy", href: "#privacy" }}
rightLink={{ text: "Terms of Service", href: "#terms" }}
/>
</div>
</ThemeProvider>
);
}