Compare commits
24 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| a28f5b933e | |||
| 2d7923bba9 | |||
| 56790cf01a | |||
| 48b5c2361c | |||
| 093a668204 | |||
| 98ac3d397e | |||
| b1708b2dfc | |||
| 26bbe46ebe | |||
| 34fb48bbee | |||
| 69d2ad107a | |||
| 2cc27ff9f2 | |||
| fb3d4a4e99 | |||
| f04802d200 | |||
| d9895300d9 | |||
| 194f51f947 | |||
| 40ec4c5d27 | |||
| 2e647729a1 | |||
| c29e2c0d20 | |||
| f3ff8b25ed | |||
| dc58062c0f | |||
| d6c2e8700a | |||
| d165f3c904 | |||
| d4db10e3a8 | |||
| 48c7387885 |
112
src/app/features/page.tsx
Normal file
112
src/app/features/page.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
"use client"
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { Sparkles, Zap, TrendingUp, Star, Crown } from "lucide-react";
|
||||
|
||||
export default function FeaturesPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="largeSmall"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="SparkReel"
|
||||
navItems={[
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "/pricing" },
|
||||
{ name: "How It Works", id: "how-it-works" },
|
||||
{ name: "Teaser Generator", id: "/teaser-generator" }
|
||||
]}
|
||||
button={{ text: "Start Creating Free", href: "#hero" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
title="Everything You Need to Create"
|
||||
description="SparkReel packs professional-grade video creation tools into one intuitive platform. From text-to-video magic to AI avatars, trending templates, and one-click social exports—we've got your viral video covered."
|
||||
tag="✨ Core Features"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="bento-grid"
|
||||
animationType="blur-reveal"
|
||||
features={[
|
||||
{
|
||||
id: "text-to-video", title: "Text-to-Video Magic", description: "Describe your video in a sentence. Our AI generates stunning 4K/60fps video using Google Veo 3.1, Kling 3.0, Sora 2, and Runway Gen-4.5. Up to 60 seconds of pure creativity.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/modern-icon-illustration-of-text-transfo-1774130479489-b5ca3ab1.png?_wi=3", imageAlt: "Text-to-video generation"
|
||||
},
|
||||
{
|
||||
id: "ai-avatars", title: "AI Avatars & Voices", description: "Choose from 150+ diverse AI avatars or upload your own face. Pair with perfect voice (150+ voices, 50+ languages, multiple emotions). Lip-sync accuracy guaranteed.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/illustration-of-diverse-ai-avatar-faces--1774130480151-77695131.png?_wi=3", imageAlt: "AI avatar selection library"
|
||||
},
|
||||
{
|
||||
id: "auto-captions", title: "Auto-Subtitles & Captions", description: "Professional captions generated instantly. Choose from 25+ animated styles—cinematic, anime, hyper-real, claymation, cyberpunk, vintage VHS, and more. Match your vibe.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/icon-showing-a-video-frame-with-animated-1774130480714-5414e1da.png?_wi=3", imageAlt: "Auto-caption styling options"
|
||||
},
|
||||
{
|
||||
id: "trending-templates", title: "Trending Templates", description: "One-click trending formats: duet-style, green-screen effects, product zoom, story arcs. Scans viral Shorts daily. Never miss what's hot. Auto-caption + hashtag suggestions included.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/icon-showing-multiple-video-template-car-1774130479713-58f65af6.png?_wi=1", imageAlt: "Trending video template library"
|
||||
},
|
||||
{
|
||||
id: "music-sync", title: "AI Music & Beat Sync", description: "AI-generated royalty-free music that syncs perfectly to your video. Choose mood, tempo, genre. Stems included for custom mixing. No copyright strikes.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/icon-showing-multiple-video-template-car-1774130479713-58f65af6.png?_wi=2", imageAlt: "Music and beat synchronization"
|
||||
},
|
||||
{
|
||||
id: "one-click-export", title: "One-Click Social Export", description: "Export directly to TikTok, Instagram Reels, YouTube Shorts with perfect dimensions. Schedule posts, auto-add trending captions, hashtags, and watermark removed on paid plans.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/icon-depicting-a-video-being-exported-or-1774130479031-a847aa6b.png?_wi=3", imageAlt: "Multi-platform social export"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Pricing", href: "/pricing" },
|
||||
{ label: "How It Works", href: "#how-it-works" },
|
||||
{ label: "Dashboard", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Contact", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Creator Fund", href: "#" },
|
||||
{ label: "Community", href: "#" },
|
||||
{ label: "Tutorials", href: "#" },
|
||||
{ label: "API Docs", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "DMCA", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
bottomLeftText="© 2025 SparkReel. All rights reserved."
|
||||
bottomRightText="Made for creators. Powered by AI."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
117
src/app/page.tsx
117
src/app/page.tsx
@@ -4,12 +4,12 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
|
||||
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
|
||||
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
|
||||
import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
|
||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
||||
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { Sparkles, Zap, TrendingUp, Star, Crown } from "lucide-react";
|
||||
import { Sparkles, Zap, TrendingUp, Star, Crown, Users } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -47,7 +47,7 @@ export default function LandingPage() {
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{ text: "Start Creating Free", href: "#pricing" },
|
||||
{ text: "Create Your First Video Free", href: "#pricing" },
|
||||
{ text: "See How It Works", href: "#how-it-works" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
@@ -56,12 +56,12 @@ export default function LandingPage() {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/a-tiktok-style-vertical-video-preview-sh-1774130479551-8a68bd8f.png?_wi=1", imageAlt: "Sunset landscape vertical video generated by SparkReel"
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/a-vertical-product-showcase-video-in-9-1-1774130481988-5b814438.jpg", imageAlt: "Product showcase video with effects"
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/a-vertical-product-showcase-video-in-9-1-1774130481988-5b814438.jpg?_wi=1", imageAlt: "Product showcase video with effects"
|
||||
}
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/a-vertical-educational-explainer-video-i-1774130480241-8a246d9a.png", imageAlt: "Educational explainer video"
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/a-vertical-educational-explainer-video-i-1774130480241-8a246d9a.png?_wi=1", imageAlt: "Educational explainer video"
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/a-tiktok-style-vertical-video-preview-sh-1774130479551-8a68bd8f.png?_wi=2", imageAlt: "TikTok-style trending video"
|
||||
@@ -91,13 +91,13 @@ export default function LandingPage() {
|
||||
animationType="blur-reveal"
|
||||
features={[
|
||||
{
|
||||
id: "text-to-video", title: "Text-to-Video Magic", description: "Describe your video in a sentence. Our AI generates stunning 4K/60fps video using Google Veo 3.1, Kling 3.0, Sora 2, and Runway Gen-4.5. Up to 60 seconds of pure creativity.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/modern-icon-illustration-of-text-transfo-1774130479489-b5ca3ab1.png", imageAlt: "Text-to-video generation"
|
||||
id: "text-to-video", title: "Text-to-Video Magic", description: "Describe your video in a sentence. Our AI generates stunning 4K/60fps video using Google Veo 3.1, Kling 3.0, Sora 2, and Runway Gen-4.5. Up to 60 seconds of pure creativity.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/modern-icon-illustration-of-text-transfo-1774130479489-b5ca3ab1.png?_wi=1", imageAlt: "Text-to-video generation"
|
||||
},
|
||||
{
|
||||
id: "ai-avatars", title: "AI Avatars & Voices", description: "Choose from 150+ diverse AI avatars or upload your own face. Pair with perfect voice (150+ voices, 50+ languages, multiple emotions). Lip-sync accuracy guaranteed.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/illustration-of-diverse-ai-avatar-faces--1774130480151-77695131.png", imageAlt: "AI avatar selection library"
|
||||
id: "ai-avatars", title: "AI Avatars & Voices", description: "Choose from 150+ diverse AI avatars or upload your own face. Pair with perfect voice (150+ voices, 50+ languages, multiple emotions). Lip-sync accuracy guaranteed.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/illustration-of-diverse-ai-avatar-faces--1774130480151-77695131.png?_wi=1", imageAlt: "AI avatar selection library"
|
||||
},
|
||||
{
|
||||
id: "auto-captions", title: "Auto-Subtitles & Captions", description: "Professional captions generated instantly. Choose from 25+ animated styles—cinematic, anime, hyper-real, claymation, cyberpunk, vintage VHS, and more. Match your vibe.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/icon-showing-a-video-frame-with-animated-1774130480714-5414e1da.png", imageAlt: "Auto-caption styling options"
|
||||
id: "auto-captions", title: "Auto-Subtitles & Captions", description: "Professional captions generated instantly. Choose from 25+ animated styles—cinematic, anime, hyper-real, claymation, cyberpunk, vintage VHS, and more. Match your vibe.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/icon-showing-a-video-frame-with-animated-1774130480714-5414e1da.png?_wi=1", imageAlt: "Auto-caption styling options"
|
||||
},
|
||||
{
|
||||
id: "trending-templates", title: "Trending Templates", description: "One-click trending formats: duet-style, green-screen effects, product zoom, story arcs. Scans viral Shorts daily. Never miss what's hot. Auto-caption + hashtag suggestions included.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/icon-showing-multiple-video-template-car-1774130479713-58f65af6.png?_wi=1", imageAlt: "Trending video template library"
|
||||
@@ -106,7 +106,7 @@ export default function LandingPage() {
|
||||
id: "music-sync", title: "AI Music & Beat Sync", description: "AI-generated royalty-free music that syncs perfectly to your video. Choose mood, tempo, genre. Stems included for custom mixing. No copyright strikes.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/icon-showing-multiple-video-template-car-1774130479713-58f65af6.png?_wi=2", imageAlt: "Music and beat synchronization"
|
||||
},
|
||||
{
|
||||
id: "one-click-export", title: "One-Click Social Export", description: "Export directly to TikTok, Instagram Reels, YouTube Shorts with perfect dimensions. Schedule posts, auto-add trending captions, hashtags, and watermark removed on paid plans.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/icon-depicting-a-video-being-exported-or-1774130479031-a847aa6b.png", imageAlt: "Multi-platform social export"
|
||||
id: "one-click-export", title: "One-Click Social Export", description: "Export directly to TikTok, Instagram Reels, YouTube Shorts with perfect dimensions. Schedule posts, auto-add trending captions, hashtags, and watermark removed on paid plans.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/icon-depicting-a-video-being-exported-or-1774130479031-a847aa6b.png?_wi=1", imageAlt: "Multi-platform social export"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
@@ -128,7 +128,7 @@ export default function LandingPage() {
|
||||
id: "step-2-generate", title: "2. AI Creates Magic", description: "Our AI engines (Veo, Kling, Sora, Runway) process your prompt and generate a stunning video in 30-120 seconds. Pick your AI model, quality level (4K available), and style. Watch it come to life.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/illustration-of-an-ai-processing-animati-1774130479422-c9ea3216.png", imageAlt: "Step 2: AI video generation"
|
||||
},
|
||||
{
|
||||
id: "step-3-polish", title: "3. Polish in One Click", description: "Auto-subtitles, trending captions, AI music sync, color grading. Our smart editor adds the finishing touches. Or dive into the timeline editor for full control. Your choice.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/illustration-showing-a-polished-finished-1774130478901-9af59b38.png", imageAlt: "Step 3: Video polishing and editing"
|
||||
id: "step-3-polish", title: "3. Polish in One Click", description: "Auto-subtitles, trending captions, AI music sync, color grading. Our smart editor adds the finishing touches. Or dive into the timeline editor for full control. Your choice.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/illustration-showing-a-polished-finished-1774130478901-9af59b38.png?_wi=1", imageAlt: "Step 3: Video polishing and editing"
|
||||
},
|
||||
{
|
||||
id: "step-4-share", title: "4. Post & Watch It Blow Up", description: "Export to TikTok, Reels, Shorts with perfect formatting. Schedule posts, track analytics, get inside the creator community. Your viral moment starts now.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/illustration-showing-a-video-being-share-1774130479790-dc488ddc.png", imageAlt: "Step 4: Share and go viral"
|
||||
@@ -138,47 +138,47 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
<PricingCardNine
|
||||
title="Simple, Fair Pricing"
|
||||
description="No hidden fees. No surprise charges. Pay only for what you create. Credits rollover up to 50%. Start free, upgrade anytime. Referral bonuses too—turn your friends into creators."
|
||||
textboxLayout="default"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
plans={[
|
||||
{
|
||||
id: "free", badge: "Get Started", badgeIcon: Sparkles,
|
||||
price: "Free", subtitle: "Limited daily credits, watermarked videos", buttons: [{ text: "Start Creating", href: "#" }],
|
||||
features: [
|
||||
"50 credits/day (limited hours)", "Watermark on videos", "Basic templates only", "AI music (limited library)", "Auto-captions (3 styles)", "Perfect for trying it out"
|
||||
]
|
||||
id: "free", title: "Get Started", price: "Free", period: "", features: [
|
||||
"1 video/month", "480p resolution", "Basic templates", "Watermark included", "Limited AI voices (5)", "Basic captions (3 styles)", "Perfect for trying it out"
|
||||
],
|
||||
button: { text: "Start Free", href: "#hero" },
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/a-tiktok-style-vertical-video-preview-sh-1774130479551-8a68bd8f.png?_wi=1", imageAlt: "Free tier - TikTok style video"
|
||||
},
|
||||
{
|
||||
id: "starter", badge: "Trending", badgeIcon: TrendingUp,
|
||||
price: "$10/mo", subtitle: "200 credits • No watermark", buttons: [{ text: "Choose Plan", href: "#" }],
|
||||
features: [
|
||||
"200 credits/month", "No watermark", "25+ trending templates", "150+ AI voices & avatars", "Advanced captions (all 25+ styles)", "Priority support", "Perfect for casual creators"
|
||||
]
|
||||
id: "starter", title: "Popular", price: "$10/mo", period: "", features: [
|
||||
"200 credits/month", "No watermark", "Basic styles + Subtitles", "25+ trending templates", "150+ AI voices", "Advanced captions (10 styles)", "Priority support", "Perfect for casual creators"
|
||||
],
|
||||
button: { text: "Start Now", href: "#community" },
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/a-vertical-product-showcase-video-in-9-1-1774130481988-5b814438.jpg?_wi=2", imageAlt: "Starter tier - Product showcase"
|
||||
},
|
||||
{
|
||||
id: "creator", badge: "Most Popular", badgeIcon: Star,
|
||||
price: "$29/mo", subtitle: "800 credits • All features", buttons: [{ text: "Choose Plan", href: "#" }],
|
||||
features: [
|
||||
"800 credits/month", "Custom AI avatars (face upload)", "All trending templates + custom", "150+ voices, 50+ languages", "Animated caption styles", "AI music stems (custom mixing)", "Analytics dashboard", "Perfect for serious creators"
|
||||
]
|
||||
id: "creator", title: "Most Popular", price: "$29/mo", period: "", features: [
|
||||
"800 credits/month", "Custom AI avatars (face upload)", "Avatars + Music + Templates", "All trending templates + custom", "150+ voices, 50+ languages", "Animated caption styles (25+)", "AI music stems (custom mixing)", "Analytics dashboard", "Perfect for serious creators"
|
||||
],
|
||||
button: { text: "Upgrade Now", href: "#community" },
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/a-vertical-educational-explainer-video-i-1774130480241-8a246d9a.png?_wi=2", imageAlt: "Creator tier - Educational video"
|
||||
},
|
||||
{
|
||||
id: "pro", badge: "Premium Power", badgeIcon: Zap,
|
||||
price: "$49/mo", subtitle: "2,500 credits • Priority", buttons: [{ text: "Choose Plan", href: "#" }],
|
||||
features: [
|
||||
"2,500 credits/month", "4K unlimited (no credit penalty)", "Priority generation queue", "Multi-video batch generation", "Real-time collab editing", "Video remix & continuation", "Advanced analytics", "Trend alerts", "Perfect for YouTube/Reels pros"
|
||||
]
|
||||
id: "pro", title: "Premium Power", price: "$49/mo", period: "", features: [
|
||||
"2,500 credits/month", "4K unlimited (no credit penalty)", "Priority generation queue", "Trend detector included", "Multi-video batch generation", "Real-time collab editing", "Video remix & continuation", "Advanced analytics", "Trend alerts", "Perfect for YouTube/Reels pros"
|
||||
],
|
||||
button: { text: "Go Pro", href: "#community" },
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/a-tiktok-style-vertical-video-preview-sh-1774130479551-8a68bd8f.png?_wi=2", imageAlt: "Pro tier - Trending video"
|
||||
},
|
||||
{
|
||||
id: "business", badge: "Enterprise", badgeIcon: Crown,
|
||||
price: "$149/mo", subtitle: "Unlimited • Teams", buttons: [{ text: "Choose Plan", href: "#" }],
|
||||
features: [
|
||||
"Unlimited credits", "Team seats (up to 5)", "White-label option", "API access", "Brand kit management", "Full video editing suite", "24/7 priority support", "Custom integrations", "Perfect for agencies & e-commerce"
|
||||
]
|
||||
id: "business", title: "Enterprise", price: "$149/mo", period: "", features: [
|
||||
"Unlimited credits", "Team seats (up to 5)", "API access", "White-label option", "Brand kit management", "Full video editing suite", "24/7 priority support", "Custom integrations", "Perfect for agencies & e-commerce"
|
||||
],
|
||||
button: { text: "Contact Sales", href: "#community" },
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/a-vertical-product-showcase-video-in-9-1-1774130481988-5b814438.jpg?_wi=3", imageAlt: "Enterprise tier - Advanced showcase"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
@@ -253,6 +253,45 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="community" data-section="community">
|
||||
<FeatureCardThree
|
||||
title="Join Our Creator Community"
|
||||
description="Connect with thousands of creators, share tips, collaborate on projects, and grow together. Access exclusive tutorials, trending templates, and beta features before anyone else."
|
||||
tag="👥 Community Hub"
|
||||
tagIcon={Users}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="bento-grid"
|
||||
animationType="blur-reveal"
|
||||
buttons={[
|
||||
{ text: "Join the Community", href: "#" },
|
||||
{ text: "View Events", href: "#" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: "creator-collab", title: "Creator Collaborations", description: "Connect with fellow creators for duets, remixes, and joint projects. Build your network and amplify your reach across the community.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/illustration-of-diverse-ai-avatar-faces--1774130480151-77695131.png?_wi=2", imageAlt: "Creator collaboration features"
|
||||
},
|
||||
{
|
||||
id: "trend-shared", title: "Shared Trend Insights", description: "Access real-time trending data from the community. See what's working, learn from top creators, and stay ahead of the curve.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/modern-icon-illustration-of-text-transfo-1774130479489-b5ca3ab1.png?_wi=2", imageAlt: "Trend insights dashboard"
|
||||
},
|
||||
{
|
||||
id: "exclusive-templates", title: "Exclusive Templates", description: "Get first access to trending templates created by top creators in the SparkReel community. Beta test new features before official release.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/icon-showing-multiple-video-template-car-1774130479713-58f65af6.png?_wi=1", imageAlt: "Exclusive template library"
|
||||
},
|
||||
{
|
||||
id: "events-workshops", title: "Live Events & Workshops", description: "Join weekly live sessions with industry experts, top creators, and SparkReel team. Learn advanced techniques, get feedback, and celebrate wins.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/icon-depicting-a-video-being-exported-or-1774130479031-a847aa6b.png?_wi=2", imageAlt: "Community events and workshops"
|
||||
},
|
||||
{
|
||||
id: "rewards-program", title: "Rewards & Recognition", description: "Earn badges, credits, and exclusive perks by contributing templates, helping others, and creating amazing content. Get featured in our creator spotlight.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/icon-showing-a-video-frame-with-animated-1774130480714-5414e1da.png?_wi=2", imageAlt: "Community rewards program"
|
||||
},
|
||||
{
|
||||
id: "support-network", title: "Creator Support Network", description: "Get help from the community and our support team. Share challenges, celebrate successes, and grow alongside thousands of creators.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/illustration-showing-a-polished-finished-1774130478901-9af59b38.png?_wi=2", imageAlt: "Creator support network"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
@@ -275,7 +314,7 @@ export default function LandingPage() {
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Creator Fund", href: "#" },
|
||||
{ label: "Community", href: "#" },
|
||||
{ label: "Community", href: "#community" },
|
||||
{ label: "Tutorials", href: "#" },
|
||||
{ label: "API Docs", href: "#" }
|
||||
]
|
||||
@@ -295,4 +334,4 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
221
src/app/pricing/page.tsx
Normal file
221
src/app/pricing/page.tsx
Normal file
@@ -0,0 +1,221 @@
|
||||
"use client"
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { Sparkles, Zap, TrendingUp, Star, Crown, Check, X } from "lucide-react";
|
||||
|
||||
export default function PricingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="largeSmall"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="SparkReel"
|
||||
navItems={[
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "/pricing" },
|
||||
{ name: "How It Works", id: "how-it-works" },
|
||||
{ name: "Teaser Generator", id: "/teaser-generator" }
|
||||
]}
|
||||
button={{ text: "Start Creating Free", href: "#hero" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
title="Simple, Fair Pricing"
|
||||
description="No hidden fees. No surprise charges. Pay only for what you create. Credits rollover up to 50%. Start free, upgrade anytime. Referral bonuses too—turn your friends into creators."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
plans={[
|
||||
{
|
||||
id: "free", title: "Get Started", price: "Free", period: "", features: [
|
||||
"1 video/month", "480p resolution", "Basic templates", "Watermark included", "Limited AI voices (5)", "Basic captions (3 styles)", "Perfect for trying it out"
|
||||
],
|
||||
button: { text: "Start Free", href: "#" },
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/a-tiktok-style-vertical-video-preview-sh-1774130479551-8a68bd8f.png?_wi=1", imageAlt: "Free tier - TikTok style video"
|
||||
},
|
||||
{
|
||||
id: "starter", title: "Popular", price: "$10/mo", period: "", features: [
|
||||
"200 credits/month", "No watermark", "Basic styles + Subtitles", "25+ trending templates", "150+ AI voices", "Advanced captions (10 styles)", "Priority support", "Perfect for casual creators"
|
||||
],
|
||||
button: { text: "Upgrade Now", href: "#" },
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/a-vertical-product-showcase-video-in-9-1-1774130481988-5b814438.jpg?_wi=2", imageAlt: "Starter tier - Product showcase"
|
||||
},
|
||||
{
|
||||
id: "creator", title: "Most Popular", price: "$29/mo", period: "", features: [
|
||||
"800 credits/month", "Custom AI avatars (face upload)", "Avatars + Music + Templates", "All trending templates + custom", "150+ voices, 50+ languages", "Animated caption styles (25+)", "AI music stems (custom mixing)", "Analytics dashboard", "Perfect for serious creators"
|
||||
],
|
||||
button: { text: "Upgrade Now", href: "#" },
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/a-vertical-educational-explainer-video-i-1774130480241-8a246d9a.png?_wi=2", imageAlt: "Creator tier - Educational video"
|
||||
},
|
||||
{
|
||||
id: "pro", title: "Premium Power", price: "$49/mo", period: "", features: [
|
||||
"2,500 credits/month", "4K unlimited (no credit penalty)", "Priority generation queue", "Trend detector included", "Multi-video batch generation", "Real-time collab editing", "Video remix & continuation", "Advanced analytics", "Trend alerts", "Perfect for YouTube/Reels pros"
|
||||
],
|
||||
button: { text: "Go Pro", href: "#" },
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/a-tiktok-style-vertical-video-preview-sh-1774130479551-8a68bd8f.png?_wi=2", imageAlt: "Pro tier - Trending video"
|
||||
},
|
||||
{
|
||||
id: "business", title: "Enterprise", price: "$149/mo", period: "", features: [
|
||||
"Unlimited credits", "Team seats (up to 5)", "API access", "White-label option", "Brand kit management", "Full video editing suite", "24/7 priority support", "Custom integrations", "Perfect for agencies & e-commerce"
|
||||
],
|
||||
button: { text: "Contact Sales", href: "#" },
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGykJLWuejlEv5Zr54ZFlJ2tfV/a-vertical-product-showcase-video-in-9-1-1774130481988-5b814438.jpg?_wi=3", imageAlt: "Enterprise tier - Advanced showcase"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full bg-gradient-to-br from-blue-900/5 via-transparent to-purple-900/5 py-20 px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<h2 className="text-4xl font-bold text-center mb-4">Feature Comparison</h2>
|
||||
<p className="text-center text-gray-600 dark:text-gray-400 mb-12">See what's included in each plan</p>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-200 dark:border-gray-800">
|
||||
<th className="text-left py-4 px-4 font-semibold">Feature</th>
|
||||
<th className="text-center py-4 px-4 font-semibold">Free</th>
|
||||
<th className="text-center py-4 px-4 font-semibold">Starter</th>
|
||||
<th className="text-center py-4 px-4 font-semibold">Creator</th>
|
||||
<th className="text-center py-4 px-4 font-semibold">Pro</th>
|
||||
<th className="text-center py-4 px-4 font-semibold">Enterprise</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b border-gray-100 dark:border-gray-900">
|
||||
<td className="py-4 px-4 font-medium">Text-to-Video Generation</td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100 dark:border-gray-900">
|
||||
<td className="py-4 px-4 font-medium">AI Avatars & Voices</td>
|
||||
<td className="text-center"><X className="w-5 h-5 text-gray-400 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100 dark:border-gray-900">
|
||||
<td className="py-4 px-4 font-medium">AI Music & Beat Sync</td>
|
||||
<td className="text-center"><X className="w-5 h-5 text-gray-400 mx-auto" /></td>
|
||||
<td className="text-center"><X className="w-5 h-5 text-gray-400 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100 dark:border-gray-900">
|
||||
<td className="py-4 px-4 font-medium">Auto-Subtitles & Captions</td>
|
||||
<td className="text-center">3 styles</td>
|
||||
<td className="text-center">10 styles</td>
|
||||
<td className="text-center">25+ styles</td>
|
||||
<td className="text-center">25+ styles</td>
|
||||
<td className="text-center">25+ styles</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100 dark:border-gray-900">
|
||||
<td className="py-4 px-4 font-medium">4K Resolution</td>
|
||||
<td className="text-center"><X className="w-5 h-5 text-gray-400 mx-auto" /></td>
|
||||
<td className="text-center"><X className="w-5 h-5 text-gray-400 mx-auto" /></td>
|
||||
<td className="text-center"><X className="w-5 h-5 text-gray-400 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100 dark:border-gray-900">
|
||||
<td className="py-4 px-4 font-medium">No Watermark</td>
|
||||
<td className="text-center"><X className="w-5 h-5 text-gray-400 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100 dark:border-gray-900">
|
||||
<td className="py-4 px-4 font-medium">Trending Templates</td>
|
||||
<td className="text-center">Basic</td>
|
||||
<td className="text-center">25+</td>
|
||||
<td className="text-center">All</td>
|
||||
<td className="text-center">All + Custom</td>
|
||||
<td className="text-center">All + Custom</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100 dark:border-gray-900">
|
||||
<td className="py-4 px-4 font-medium">Analytics Dashboard</td>
|
||||
<td className="text-center"><X className="w-5 h-5 text-gray-400 mx-auto" /></td>
|
||||
<td className="text-center"><X className="w-5 h-5 text-gray-400 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-4 px-4 font-medium">Priority Support</td>
|
||||
<td className="text-center"><X className="w-5 h-5 text-gray-400 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
<td className="text-center"><Check className="w-5 h-5 text-green-500 mx-auto" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Pricing", href: "/pricing" },
|
||||
{ label: "How It Works", href: "#how-it-works" },
|
||||
{ label: "Dashboard", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Contact", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Creator Fund", href: "#" },
|
||||
{ label: "Community", href: "#" },
|
||||
{ label: "Tutorials", href: "#" },
|
||||
{ label: "API Docs", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "DMCA", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
bottomLeftText="© 2025 SparkReel. All rights reserved."
|
||||
bottomRightText="Made for creators. Powered by AI."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user