bender/748387ee-7967-422d-831f-e140cce96712
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main

Browse Source 
Merge version_1 into main
This commit was merged in pull request #2.
This commit is contained in:
bender
2026-03-03 00:23:57 +00:00
parent 8943acba27 2b6b247c27
commit c8a7695b16
5 changed files with 131 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/app/contact/page.tsx
View File

@@ -1,10 +1,10 @@
"use client"; "use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered"; import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ContactSplit from "@/components/sections/contact/ContactSplit"; import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia"; import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterBase from "@/components/sections/footer/FooterBase"; import FooterBase from '@/components/sections/footer/FooterBase';
import { HelpCircle } from "lucide-react"; import { HelpCircle } from "lucide-react";
export default function ContactPage() { export default function ContactPage() {
@@ -19,7 +19,7 @@ export default function ContactPage() {
borderRadius="pill" borderRadius="pill"
contentWidth="smallMedium" contentWidth="smallMedium"
sizing="largeSizeMediumTitles" sizing="largeSizeMediumTitles"
background="noiseDiagonalGradient" background="circleGradient"
cardStyle="subtle-shadow" cardStyle="subtle-shadow"
primaryButtonStyle="diagonal-gradient" primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
@@ -30,14 +30,12 @@ export default function ContactPage() {
navItems={[ navItems={[
{ name: "Features", id: "features" }, { name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" }, { name: "Pricing", id: "pricing" },
{ name: "How It Works", id: "how-it-works" }, { name: "How It Works", id: "products" },
{ name: "Testimonials", id: "testimonials" }, { name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" }, { name: "FAQ", id: "faq" },
]} ]}
button={{ button={{
text: "Start Free Trial", text: "Start Free Trial", href: "contact"}}
href: "/contact",
}}
brandName="ViralAI Studio" brandName="ViralAI Studio"
/> />
</div> </div>
@@ -49,7 +47,7 @@ export default function ContactPage() {
description="Get the latest features, tips, and best practices delivered to your inbox. Join our creator community and never miss an update." description="Get the latest features, tips, and best practices delivered to your inbox. Join our creator community and never miss an update."
background={{ variant: "sparkles-gradient" }} background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false} useInvertedBackground={false}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/abstract-technology-background-with-warm-1772497231143-4baf05db.png?_wi=2" imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/abstract-technology-background-with-warm-1772497231143-4baf05db.png"
imageAlt="ViralAI Studio technology background" imageAlt="ViralAI Studio technology background"
mediaAnimation="slide-up" mediaAnimation="slide-up"
mediaPosition="left" mediaPosition="left"
@@ -64,20 +62,11 @@ export default function ContactPage() {
<FaqSplitMedia <FaqSplitMedia
faqs={[ faqs={[
{ {
id: "1", id: "1", title: "How does AI highlight detection work?", content: "Our AI analyzes video content using advanced machine learning models to identify moments with high engagement potential. It considers factors like visual changes, audio peaks, scene transitions, and sentiment analysis. The system learns from viral content patterns to ensure your shorts have maximum impact."},
title: "How does AI highlight detection work?",
content: "Our AI analyzes video content using advanced machine learning models to identify moments with high engagement potential. It considers factors like visual changes, audio peaks, scene transitions, and sentiment analysis. The system learns from viral content patterns to ensure your shorts have maximum impact.",
},
{ {
id: "2", id: "2", title: "What video formats are supported?", content: "ViralAI Studio supports MP4, MOV, AVI, MKV, and WebM formats. We can process videos in any resolution from 720p to 8K, and automatically optimize them for your chosen export format. Upload larger files with our cloud processing or batch upload multiple videos."},
title: "What video formats are supported?",
content: "ViralAI Studio supports MP4, MOV, AVI, MKV, and WebM formats. We can process videos in any resolution from 720p to 8K, and automatically optimize them for your chosen export format. Upload larger files with our cloud processing or batch upload multiple videos.",
},
{ {
id: "3", id: "3", title: "Can I export to multiple platforms at once?", content: "Yes! One of our key features is simultaneous multi-platform export. Generate 16:9 (YouTube), 9:16 (TikTok/Reels), and 1:1 (Instagram Feed) versions in a single click. You can also set up direct posting to your social media accounts with our integrations."},
title: "Can I export to multiple platforms at once?",
content: "Yes! One of our key features is simultaneous multi-platform export. Generate 16:9 (YouTube), 9:16 (TikTok/Reels), and 1:1 (Instagram Feed) versions in a single click. You can also set up direct posting to your social media accounts with our integrations.",
},
]} ]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/friendly-customer-support-representative-1772497230606-2e080611.png" imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/friendly-customer-support-representative-1772497230606-2e080611.png"
imageAlt="ViralAI Studio customer support" imageAlt="ViralAI Studio customer support"
@@ -120,17 +109,15 @@ export default function ContactPage() {
<FooterBase <FooterBase
columns={[ columns={[
{ {
title: "Product", title: "Product", items: [
items: [ { label: "Features", href: "features" },
{ label: "Features", href: "/features" }, { label: "Pricing", href: "pricing" },
{ label: "Pricing", href: "/pricing" },
{ label: "API Docs", href: "https://docs.viralaistudio.com" }, { label: "API Docs", href: "https://docs.viralaistudio.com" },
{ label: "Roadmap", href: "#" }, { label: "Roadmap", href: "#" },
], ],
}, },
{ {
title: "Company", title: "Company", items: [
items: [
{ label: "About Us", href: "#" }, { label: "About Us", href: "#" },
{ label: "Blog", href: "https://blog.viralaistudio.com" }, { label: "Blog", href: "https://blog.viralaistudio.com" },
{ label: "Careers", href: "#" }, { label: "Careers", href: "#" },
@@ -138,10 +125,9 @@ export default function ContactPage() {
], ],
}, },
{ {
title: "Support", title: "Support", items: [
items: [ { label: "Help Center", href: "faq" },
{ label: "Help Center", href: "#faq" }, { label: "Contact", href: "contact" },
{ label: "Contact", href: "/contact" },
{ label: "Community", href: "#" }, { label: "Community", href: "#" },
{ label: "Status Page", href: "#" }, { label: "Status Page", href: "#" },
], ],

80
src/app/features/page.tsx
View File

@@ -1,10 +1,10 @@
"use client"; "use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered"; import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow"; import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import ProductCardOne from "@/components/sections/product/ProductCardOne"; import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FooterBase from "@/components/sections/footer/FooterBase"; import FooterBase from '@/components/sections/footer/FooterBase';
import Link from "next/link"; import Link from "next/link";
import { Zap, Type, Globe, Palette, Music, Image as ImageIcon, Sparkles } from "lucide-react"; import { Zap, Type, Globe, Palette, Music, Image as ImageIcon, Sparkles } from "lucide-react";
@@ -16,7 +16,7 @@ export default function FeaturesPage() {
borderRadius="pill" borderRadius="pill"
contentWidth="smallMedium" contentWidth="smallMedium"
sizing="largeSizeMediumTitles" sizing="largeSizeMediumTitles"
background="noiseDiagonalGradient" background="circleGradient"
cardStyle="subtle-shadow" cardStyle="subtle-shadow"
primaryButtonStyle="diagonal-gradient" primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
@@ -27,14 +27,12 @@ export default function FeaturesPage() {
navItems={[ navItems={[
{ name: "Features", id: "features" }, { name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" }, { name: "Pricing", id: "pricing" },
{ name: "How It Works", id: "how-it-works" }, { name: "How It Works", id: "products" },
{ name: "Testimonials", id: "testimonials" }, { name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" }, { name: "FAQ", id: "faq" },
]} ]}
button={{ button={{
text: "Start Free Trial", text: "Start Free Trial", href: "contact"}}
href: "/contact",
}}
brandName="ViralAI Studio" brandName="ViralAI Studio"
/> />
</div> </div>
@@ -44,34 +42,22 @@ export default function FeaturesPage() {
features={[ features={[
{ {
icon: Zap, icon: Zap,
title: "Long Video to Viral Shorts", title: "Long Video to Viral Shorts", description: "Upload MP4/MOV files and automatically detect highlights. AI generates optimized 9:16, 16:9, and 1:1 formats with auto-zoom and transitions."},
description: "Upload MP4/MOV files and automatically detect highlights. AI generates optimized 9:16, 16:9, and 1:1 formats with auto-zoom and transitions.",
},
{ {
icon: Type, icon: Type,
title: "AI Auto Caption Generator", title: "AI Auto Caption Generator", description: "Speech-to-text transcription with animated TikTok-style captions. Multi-language subtitle support and customizable caption styles."},
description: "Speech-to-text transcription with animated TikTok-style captions. Multi-language subtitle support and customizable caption styles.",
},
{ {
icon: Globe, icon: Globe,
title: "Video Translation & Dubbing", title: "Video Translation & Dubbing", description: "Translate videos into any language with AI voice cloning and lip-sync support. Reach global audiences effortlessly."},
description: "Translate videos into any language with AI voice cloning and lip-sync support. Reach global audiences effortlessly.",
},
{ {
icon: Palette, icon: Palette,
title: "Cartoon & Animation Generator", title: "Cartoon & Animation Generator", description: "Convert real video into 3D, Anime, or Sketch animation styles. Add AI avatar presenters for personalized content."},
description: "Convert real video into 3D, Anime, or Sketch animation styles. Add AI avatar presenters for personalized content.",
},
{ {
icon: Music, icon: Music,
title: "Beat Sync Editing", title: "Beat Sync Editing", description: "Upload music and auto-cut videos to beat drops. Add transitions synchronized perfectly to music tempo."},
description: "Upload music and auto-cut videos to beat drops. Add transitions synchronized perfectly to music tempo.",
},
{ {
icon: ImageIcon, icon: ImageIcon,
title: "Auto Thumbnail Generator", title: "Auto Thumbnail Generator", description: "AI face detection, viral YouTube templates, and bold text overlays. Generate thumbnails that maximize click-through rates."},
description: "AI face detection, viral YouTube templates, and bold text overlays. Generate thumbnails that maximize click-through rates.",
},
]} ]}
title="Powerful AI-Driven Features" title="Powerful AI-Driven Features"
description="Everything creators need to produce viral content at scale. From intelligent video analysis to automated editing, ViralAI Studio handles the heavy lifting." description="Everything creators need to produce viral content at scale. From intelligent video analysis to automated editing, ViralAI Studio handles the heavy lifting."
@@ -83,30 +69,15 @@ export default function FeaturesPage() {
/> />
</div> </div>
<div id="how-it-works" data-section="how-it-works"> <div id="products" data-section="products">
<ProductCardOne <ProductCardOne
products={[ products={[
{ {
id: "1", id: "1", name: "Smart Highlight Detection", price: "AI-Powered", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/visual-representation-of-video-conversio-1772497231109-892372a4.png", imageAlt: "Video conversion to shorts"},
name: "Smart Highlight Detection",
price: "AI-Powered",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/visual-representation-of-video-conversio-1772497231109-892372a4.png?_wi=2",
imageAlt: "Video conversion to shorts",
},
{ {
id: "2", id: "2", name: "Animated Captions", price: "Multi-Language", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/modern-video-frame-showing-ai-generated--1772497231199-6a63da07.png", imageAlt: "AI-generated animated captions"},
name: "Animated Captions",
price: "Multi-Language",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/modern-video-frame-showing-ai-generated--1772497231199-6a63da07.png?_wi=2",
imageAlt: "AI-generated animated captions",
},
{ {
id: "3", id: "3", name: "Animation Styles", price: "Multiple Formats", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/showcase-multiple-animation-style-conver-1772497231229-b973d03e.png", imageAlt: "Animation style conversions"},
name: "Animation Styles",
price: "Multiple Formats",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/showcase-multiple-animation-style-conver-1772497231229-b973d03e.png?_wi=2",
imageAlt: "Animation style conversions",
},
]} ]}
title="Key Video Processing Features" title="Key Video Processing Features"
description="Comprehensive toolkit for modern content creators. Each feature is optimized for viral content generation and multi-platform publishing." description="Comprehensive toolkit for modern content creators. Each feature is optimized for viral content generation and multi-platform publishing."
@@ -150,17 +121,15 @@ export default function FeaturesPage() {
<FooterBase <FooterBase
columns={[ columns={[
{ {
title: "Product", title: "Product", items: [
items: [ { label: "Features", href: "features" },
{ label: "Features", href: "/features" }, { label: "Pricing", href: "pricing" },
{ label: "Pricing", href: "/pricing" },
{ label: "API Docs", href: "https://docs.viralaistudio.com" }, { label: "API Docs", href: "https://docs.viralaistudio.com" },
{ label: "Roadmap", href: "#" }, { label: "Roadmap", href: "#" },
], ],
}, },
{ {
title: "Company", title: "Company", items: [
items: [
{ label: "About Us", href: "#" }, { label: "About Us", href: "#" },
{ label: "Blog", href: "https://blog.viralaistudio.com" }, { label: "Blog", href: "https://blog.viralaistudio.com" },
{ label: "Careers", href: "#" }, { label: "Careers", href: "#" },
@@ -168,10 +137,9 @@ export default function FeaturesPage() {
], ],
}, },
{ {
title: "Support", title: "Support", items: [
items: [ { label: "Help Center", href: "faq" },
{ label: "Help Center", href: "#faq" }, { label: "Contact", href: "contact" },
{ label: "Contact", href: "/contact" },
{ label: "Community", href: "#" }, { label: "Community", href: "#" },
{ label: "Status Page", href: "#" }, { label: "Status Page", href: "#" },
], ],

27
src/app/layout.tsx
View File

@@ -5,38 +5,23 @@ import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag"; import Tag from "@/tag/Tag";
const raleway = Raleway({ const raleway = Raleway({
variable: "--font-raleway", variable: "--font-raleway", subsets: ["latin"],
subsets: ["latin"],
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "ViralAI Studio - AI Video Editing for Creators", title: "ViralAI Studio - AI Video Editing for Creators", description: "Transform long-form videos into viral shorts with AI. Auto-captions, animations, beat-sync, and multi-platform export. Start free today.", keywords: "AI video editor, short form video, TikTok creator, video editing software, viral content creation", robots: {
description: "Transform long-form videos into viral shorts with AI. Auto-captions, animations, beat-sync, and multi-platform export. Start free today.",
keywords: "AI video editor, short form video, TikTok creator, video editing software, viral content creation",
robots: {
index: true, index: true,
follow: true, follow: true,
}, },
openGraph: { openGraph: {
title: "ViralAI Studio - Create Viral Videos with AI", title: "ViralAI Studio - Create Viral Videos with AI", description: "AI-powered video editing platform for creators. Convert long videos to shorts, add captions, animations, and export to all platforms.", url: "https://viralaistudio.com", siteName: "ViralAI Studio", type: "website", images: [
description: "AI-powered video editing platform for creators. Convert long videos to shorts, add captions, animations, and export to all platforms.",
url: "https://viralaistudio.com",
siteName: "ViralAI Studio",
type: "website",
images: [
{ {
url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/a-sleek-modern-video-editing-dashboard-i-1772497231603-8bde64ed.png", url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/a-sleek-modern-video-editing-dashboard-i-1772497231603-8bde64ed.png", alt: "ViralAI Studio Dashboard"},
alt: "ViralAI Studio Dashboard",
},
], ],
}, },
twitter: { twitter: {
card: "summary_large_image", card: "summary_large_image", title: "ViralAI Studio - Create Viral Videos with AI", description: "AI-powered video editing. Short-form content creation made easy.", images: [
title: "ViralAI Studio - Create Viral Videos with AI", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/a-sleek-modern-video-editing-dashboard-i-1772497231603-8bde64ed.png"],
description: "AI-powered video editing. Short-form content creation made easy.",
images: [
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/a-sleek-modern-video-editing-dashboard-i-1772497231603-8bde64ed.png",
],
}, },
}; };

165
src/app/page.tsx
View File

@@ -1,15 +1,15 @@
"use client"; "use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered"; import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit"; import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow"; import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import ProductCardOne from "@/components/sections/product/ProductCardOne"; import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen"; import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import ContactSplit from "@/components/sections/contact/ContactSplit"; import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBase from "@/components/sections/footer/FooterBase"; import FooterBase from '@/components/sections/footer/FooterBase';
import Link from "next/link"; import Link from "next/link";
import { Zap, Type, Globe, Palette, Music, Image as ImageIcon, Sparkles, CreditCard, Heart, HelpCircle } from "lucide-react"; import { Zap, Type, Globe, Palette, Music, Image as ImageIcon, Sparkles, Heart, HelpCircle, CreditCard } from "lucide-react";
export default function HomePage() { export default function HomePage() {
const handleNewsletterSubmit = (email: string) => { const handleNewsletterSubmit = (email: string) => {
@@ -23,7 +23,7 @@ export default function HomePage() {
borderRadius="pill" borderRadius="pill"
contentWidth="smallMedium" contentWidth="smallMedium"
sizing="largeSizeMediumTitles" sizing="largeSizeMediumTitles"
background="noiseDiagonalGradient" background="circleGradient"
cardStyle="subtle-shadow" cardStyle="subtle-shadow"
primaryButtonStyle="diagonal-gradient" primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
@@ -34,14 +34,12 @@ export default function HomePage() {
navItems={[ navItems={[
{ name: "Features", id: "features" }, { name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" }, { name: "Pricing", id: "pricing" },
{ name: "How It Works", id: "how-it-works" }, { name: "How It Works", id: "products" },
{ name: "Testimonials", id: "testimonials" }, { name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" }, { name: "FAQ", id: "faq" },
]} ]}
button={{ button={{
text: "Start Free Trial", text: "Start Free Trial", href: "contact"}}
href: "/contact",
}}
brandName="ViralAI Studio" brandName="ViralAI Studio"
/> />
</div> </div>
@@ -50,9 +48,9 @@ export default function HomePage() {
<HeroLogoBillboardSplit <HeroLogoBillboardSplit
logoText="VIRAL AI STUDIO" logoText="VIRAL AI STUDIO"
description="Transform long-form videos into viral shorts. AI-powered editing, auto-captions, beat-sync transitions, and multi-platform export in seconds. Create TikTok, Reels, and YouTube content automatically." description="Transform long-form videos into viral shorts. AI-powered editing, auto-captions, beat-sync transitions, and multi-platform export in seconds. Create TikTok, Reels, and YouTube content automatically."
background={{ variant: "noiseDiagonalGradient" }} background={{ variant: "radial-gradient" }}
buttons={[ buttons={[
{ text: "Start Free Trial", href: "/contact" }, { text: "Start Free Trial", href: "contact" },
{ text: "View Demo", href: "https://example.com/demo" }, { text: "View Demo", href: "https://example.com/demo" },
]} ]}
layoutOrder="default" layoutOrder="default"
@@ -69,34 +67,22 @@ export default function HomePage() {
features={[ features={[
{ {
icon: Zap, icon: Zap,
title: "Long Video to Viral Shorts", title: "Long Video to Viral Shorts", description: "Upload MP4/MOV files and automatically detect highlights. AI generates optimized 9:16, 16:9, and 1:1 formats with auto-zoom and transitions."},
description: "Upload MP4/MOV files and automatically detect highlights. AI generates optimized 9:16, 16:9, and 1:1 formats with auto-zoom and transitions.",
},
{ {
icon: Type, icon: Type,
title: "AI Auto Caption Generator", title: "AI Auto Caption Generator", description: "Speech-to-text transcription with animated TikTok-style captions. Multi-language subtitle support and customizable caption styles."},
description: "Speech-to-text transcription with animated TikTok-style captions. Multi-language subtitle support and customizable caption styles.",
},
{ {
icon: Globe, icon: Globe,
title: "Video Translation & Dubbing", title: "Video Translation & Dubbing", description: "Translate videos into any language with AI voice cloning and lip-sync support. Reach global audiences effortlessly."},
description: "Translate videos into any language with AI voice cloning and lip-sync support. Reach global audiences effortlessly.",
},
{ {
icon: Palette, icon: Palette,
title: "Cartoon & Animation Generator", title: "Cartoon & Animation Generator", description: "Convert real video into 3D, Anime, or Sketch animation styles. Add AI avatar presenters for personalized content."},
description: "Convert real video into 3D, Anime, or Sketch animation styles. Add AI avatar presenters for personalized content.",
},
{ {
icon: Music, icon: Music,
title: "Beat Sync Editing", title: "Beat Sync Editing", description: "Upload music and auto-cut videos to beat drops. Add transitions synchronized perfectly to music tempo."},
description: "Upload music and auto-cut videos to beat drops. Add transitions synchronized perfectly to music tempo.",
},
{ {
icon: ImageIcon, icon: ImageIcon,
title: "Auto Thumbnail Generator", title: "Auto Thumbnail Generator", description: "AI face detection, viral YouTube templates, and bold text overlays. Generate thumbnails that maximize click-through rates."},
description: "AI face detection, viral YouTube templates, and bold text overlays. Generate thumbnails that maximize click-through rates.",
},
]} ]}
title="Powerful AI-Driven Features" title="Powerful AI-Driven Features"
description="Everything creators need to produce viral content at scale. From intelligent video analysis to automated editing, ViralAI Studio handles the heavy lifting." description="Everything creators need to produce viral content at scale. From intelligent video analysis to automated editing, ViralAI Studio handles the heavy lifting."
@@ -108,51 +94,21 @@ export default function HomePage() {
/> />
</div> </div>
<div id="how-it-works" data-section="how-it-works"> <div id="products" data-section="products">
<ProductCardOne <ProductCardOne
products={[ products={[
{ {
id: "1", id: "1", name: "Smart Highlight Detection", price: "AI-Powered", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/visual-representation-of-video-conversio-1772497231109-892372a4.png", imageAlt: "Video conversion to shorts"},
name: "Smart Highlight Detection",
price: "AI-Powered",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/visual-representation-of-video-conversio-1772497231109-892372a4.png?_wi=1",
imageAlt: "Video conversion to shorts",
},
{ {
id: "2", id: "2", name: "Animated Captions", price: "Multi-Language", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/modern-video-frame-showing-ai-generated--1772497231199-6a63da07.png", imageAlt: "AI-generated animated captions"},
name: "Animated Captions",
price: "Multi-Language",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/modern-video-frame-showing-ai-generated--1772497231199-6a63da07.png?_wi=1",
imageAlt: "AI-generated animated captions",
},
{ {
id: "3", id: "3", name: "Animation Styles", price: "Multiple Formats", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/showcase-multiple-animation-style-conver-1772497231229-b973d03e.png", imageAlt: "Animation style conversions"},
name: "Animation Styles",
price: "Multiple Formats",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/showcase-multiple-animation-style-conver-1772497231229-b973d03e.png?_wi=1",
imageAlt: "Animation style conversions",
},
{ {
id: "4", id: "4", name: "Beat Synchronization", price: "Auto-Aligned", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/music-beat-sync-editing-visualization-sh-1772497231286-61822367.png", imageAlt: "Music beat sync editing"},
name: "Beat Synchronization",
price: "Auto-Aligned",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/music-beat-sync-editing-visualization-sh-1772497231286-61822367.png",
imageAlt: "Music beat sync editing",
},
{ {
id: "5", id: "5", name: "Smart Thumbnails", price: "Face Detection", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/youtube-thumbnail-generator-interface-di-1772497232751-cf1f8bb8.png", imageAlt: "YouTube thumbnail generator"},
name: "Smart Thumbnails",
price: "Face Detection",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/youtube-thumbnail-generator-interface-di-1772497232751-cf1f8bb8.png",
imageAlt: "YouTube thumbnail generator",
},
{ {
id: "6", id: "6", name: "Multi-Platform Export", price: "One Click", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/social-media-export-interface-showing-si-1772497231438-df4e3d62.png", imageAlt: "Social media export interface"},
name: "Multi-Platform Export",
price: "One Click",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/social-media-export-interface-showing-si-1772497231438-df4e3d62.png",
imageAlt: "Social media export interface",
},
]} ]}
title="Key Video Processing Features" title="Key Video Processing Features"
description="Comprehensive toolkit for modern content creators. Each feature is optimized for viral content generation and multi-platform publishing." description="Comprehensive toolkit for modern content creators. Each feature is optimized for viral content generation and multi-platform publishing."
@@ -165,41 +121,28 @@ export default function HomePage() {
/> />
</div> </div>
<div id="pricing" data-section="pricing">
<div className="mx-auto px-4 md:px-6 py-20">
<h2 className="text-4xl font-light mb-4">Flexible Subscription Plans</h2>
<p className="text-lg mb-12">Choose the perfect plan for your creative needs. Upgrade or downgrade anytime with no hidden fees.</p>
</div>
</div>
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen <TestimonialCardSixteen
testimonials={[ testimonials={[
{ {
id: "1", id: "1", name: "Sarah Chen", role: "Content Creator", company: "SarahCreates", rating: 5,
name: "Sarah Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/professional-headshot-of-a-content-creat-1772497229916-9dd35fab.png"},
role: "Content Creator",
company: "SarahCreates",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/professional-headshot-of-a-content-creat-1772497229916-9dd35fab.png?_wi=1",
},
{ {
id: "2", id: "2", name: "Marcus Johnson", role: "YouTube Producer", company: "Epic Productions", rating: 5,
name: "Marcus Johnson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/young-female-video-editor-creator-in-a-c-1772497230751-a76dc93c.png"},
role: "YouTube Producer",
company: "Epic Productions",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/young-female-video-editor-creator-in-a-c-1772497230751-a76dc93c.png?_wi=1",
},
{ {
id: "3", id: "3", name: "Emma Rodriguez", role: "TikTok Creator", company: "ViralVibes", rating: 5,
name: "Emma Rodriguez", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/male-filmmaker-content-creator-in-casual-1772497230900-ce88c137.png"},
role: "TikTok Creator",
company: "ViralVibes",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/male-filmmaker-content-creator-in-casual-1772497230900-ce88c137.png?_wi=1",
},
{ {
id: "4", id: "4", name: "Alex Kim", role: "Video Director", company: "Creative Studio Co", rating: 5,
name: "Alex Kim", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/female-tiktok-social-media-creator-in-mo-1772497230988-d3cc123f.png"},
role: "Video Director",
company: "Creative Studio Co",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/female-tiktok-social-media-creator-in-mo-1772497230988-d3cc123f.png",
},
]} ]}
kpiItems={[ kpiItems={[
{ value: "10x", label: "Faster video editing" }, { value: "10x", label: "Faster video editing" },
@@ -216,13 +159,6 @@ export default function HomePage() {
/> />
</div> </div>
<div id="pricing" data-section="pricing">
<div className="mx-auto px-4 md:px-6">
<h2 className="text-4xl font-light mb-4">Flexible Subscription Plans</h2>
<p className="text-lg mb-12">Choose the perfect plan for your creative needs. Upgrade or downgrade anytime with no hidden fees.</p>
</div>
</div>
<div id="faq" data-section="faq"> <div id="faq" data-section="faq">
<div className="mx-auto px-4 md:px-6 mb-12"> <div className="mx-auto px-4 md:px-6 mb-12">
<h2 className="text-4xl font-light mb-4">Frequently Asked Questions</h2> <h2 className="text-4xl font-light mb-4">Frequently Asked Questions</h2>
@@ -237,7 +173,7 @@ export default function HomePage() {
description="Get the latest features, tips, and best practices delivered to your inbox. Join our creator community and never miss an update." description="Get the latest features, tips, and best practices delivered to your inbox. Join our creator community and never miss an update."
background={{ variant: "sparkles-gradient" }} background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false} useInvertedBackground={false}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/abstract-technology-background-with-warm-1772497231143-4baf05db.png?_wi=1" imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/abstract-technology-background-with-warm-1772497231143-4baf05db.png"
imageAlt="ViralAI Studio technology background" imageAlt="ViralAI Studio technology background"
mediaAnimation="slide-up" mediaAnimation="slide-up"
mediaPosition="left" mediaPosition="left"
@@ -252,17 +188,15 @@ export default function HomePage() {
<FooterBase <FooterBase
columns={[ columns={[
{ {
title: "Product", title: "Product", items: [
items: [ { label: "Features", href: "features" },
{ label: "Features", href: "/features" }, { label: "Pricing", href: "pricing" },
{ label: "Pricing", href: "/pricing" },
{ label: "API Docs", href: "https://docs.viralaistudio.com" }, { label: "API Docs", href: "https://docs.viralaistudio.com" },
{ label: "Roadmap", href: "#" }, { label: "Roadmap", href: "#" },
], ],
}, },
{ {
title: "Company", title: "Company", items: [
items: [
{ label: "About Us", href: "#" }, { label: "About Us", href: "#" },
{ label: "Blog", href: "https://blog.viralaistudio.com" }, { label: "Blog", href: "https://blog.viralaistudio.com" },
{ label: "Careers", href: "#" }, { label: "Careers", href: "#" },
@@ -270,10 +204,9 @@ export default function HomePage() {
], ],
}, },
{ {
title: "Support", title: "Support", items: [
items: [ { label: "Help Center", href: "faq" },
{ label: "Help Center", href: "#faq" }, { label: "Contact", href: "contact" },
{ label: "Contact", href: "/contact" },
{ label: "Community", href: "#" }, { label: "Community", href: "#" },
{ label: "Status Page", href: "#" }, { label: "Status Page", href: "#" },
], ],

120
src/app/pricing/page.tsx
View File

@@ -1,10 +1,10 @@
"use client"; "use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered"; import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo"; import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen"; import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import FooterBase from "@/components/sections/footer/FooterBase"; import FooterBase from '@/components/sections/footer/FooterBase';
import { Sparkles, Heart, CreditCard } from "lucide-react"; import { Sparkles, Heart, CreditCard } from "lucide-react";
export default function PricingPage() { export default function PricingPage() {
@@ -15,7 +15,7 @@ export default function PricingPage() {
borderRadius="pill" borderRadius="pill"
contentWidth="smallMedium" contentWidth="smallMedium"
sizing="largeSizeMediumTitles" sizing="largeSizeMediumTitles"
background="noiseDiagonalGradient" background="circleGradient"
cardStyle="subtle-shadow" cardStyle="subtle-shadow"
primaryButtonStyle="diagonal-gradient" primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
@@ -26,14 +26,12 @@ export default function PricingPage() {
navItems={[ navItems={[
{ name: "Features", id: "features" }, { name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" }, { name: "Pricing", id: "pricing" },
{ name: "How It Works", id: "how-it-works" }, { name: "How It Works", id: "products" },
{ name: "Testimonials", id: "testimonials" }, { name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" }, { name: "FAQ", id: "faq" },
]} ]}
button={{ button={{
text: "Start Free Trial", text: "Start Free Trial", href: "contact"}}
href: "/contact",
}}
brandName="ViralAI Studio" brandName="ViralAI Studio"
/> />
</div> </div>
@@ -42,63 +40,31 @@ export default function PricingPage() {
<PricingCardTwo <PricingCardTwo
plans={[ plans={[
{ {
id: "free", id: "free", badge: "Starter Plan", badgeIcon: Sparkles,
badge: "Starter Plan", price: "Free", subtitle: "Perfect for trying out ViralAI Studio", buttons: [
badgeIcon: Sparkles, { text: "Get Started", href: "contact" },
price: "Free",
subtitle: "Perfect for trying out ViralAI Studio",
buttons: [
{ text: "Get Started", href: "/contact" },
{ text: "Learn More", href: "/" }, { text: "Learn More", href: "/" },
], ],
features: [ features: [
"3 AI-generated shorts per month", "3 AI-generated shorts per month", "Basic caption generation", "Standard animation styles", "720p export quality", "Single platform export"],
"Basic caption generation",
"Standard animation styles",
"720p export quality",
"Single platform export",
],
}, },
{ {
id: "pro", id: "pro", badge: "Pro Plan", badgeIcon: Sparkles,
badge: "Pro Plan", price: "$29/month", subtitle: "Ideal for active content creators", buttons: [
badgeIcon: Sparkles, { text: "Start Pro Trial", href: "contact" },
price: "$29/month", { text: "Chat to Sales", href: "contact" },
subtitle: "Ideal for active content creators",
buttons: [
{ text: "Start Pro Trial", href: "/contact" },
{ text: "Chat to Sales", href: "/contact" },
], ],
features: [ features: [
"Unlimited AI-generated shorts", "Unlimited AI-generated shorts", "Advanced animated captions", "All animation styles (3D, Anime, Sketch)", "4K export quality", "Multi-platform simultaneous export", "AI avatar presenter", "Priority support"],
"Advanced animated captions",
"All animation styles (3D, Anime, Sketch)",
"4K export quality",
"Multi-platform simultaneous export",
"AI avatar presenter",
"Priority support",
],
}, },
{ {
id: "premium", id: "premium", badge: "Premium Plan", badgeIcon: Sparkles,
badge: "Premium Plan", price: "$99/month", subtitle: "For professional studios and agencies", buttons: [
badgeIcon: Sparkles, { text: "Start Premium", href: "contact" },
price: "$99/month", { text: "Custom Quote", href: "contact" },
subtitle: "For professional studios and agencies",
buttons: [
{ text: "Start Premium", href: "/contact" },
{ text: "Custom Quote", href: "/contact" },
], ],
features: [ features: [
"Unlimited everything", "Unlimited everything", "Video translation to 50+ languages", "Advanced lip-sync technology", "8K export quality", "API access for integrations", "White-label options", "Dedicated account manager", "Custom branding templates"],
"Video translation to 50+ languages",
"Advanced lip-sync technology",
"8K export quality",
"API access for integrations",
"White-label options",
"Dedicated account manager",
"Custom branding templates",
],
}, },
]} ]}
title="Flexible Subscription Plans" title="Flexible Subscription Plans"
@@ -115,29 +81,14 @@ export default function PricingPage() {
<TestimonialCardSixteen <TestimonialCardSixteen
testimonials={[ testimonials={[
{ {
id: "1", id: "1", name: "Sarah Chen", role: "Content Creator", company: "SarahCreates", rating: 5,
name: "Sarah Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/professional-headshot-of-a-content-creat-1772497229916-9dd35fab.png"},
role: "Content Creator",
company: "SarahCreates",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/professional-headshot-of-a-content-creat-1772497229916-9dd35fab.png?_wi=2",
},
{ {
id: "2", id: "2", name: "Marcus Johnson", role: "YouTube Producer", company: "Epic Productions", rating: 5,
name: "Marcus Johnson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/young-female-video-editor-creator-in-a-c-1772497230751-a76dc93c.png"},
role: "YouTube Producer",
company: "Epic Productions",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/young-female-video-editor-creator-in-a-c-1772497230751-a76dc93c.png?_wi=2",
},
{ {
id: "3", id: "3", name: "Emma Rodriguez", role: "TikTok Creator", company: "ViralVibes", rating: 5,
name: "Emma Rodriguez", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/male-filmmaker-content-creator-in-casual-1772497230900-ce88c137.png"},
role: "TikTok Creator",
company: "ViralVibes",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/male-filmmaker-content-creator-in-casual-1772497230900-ce88c137.png?_wi=2",
},
]} ]}
kpiItems={[ kpiItems={[
{ value: "10x", label: "Faster video editing" }, { value: "10x", label: "Faster video editing" },
@@ -182,17 +133,15 @@ export default function PricingPage() {
<FooterBase <FooterBase
columns={[ columns={[
{ {
title: "Product", title: "Product", items: [
items: [ { label: "Features", href: "features" },
{ label: "Features", href: "/features" }, { label: "Pricing", href: "pricing" },
{ label: "Pricing", href: "/pricing" },
{ label: "API Docs", href: "https://docs.viralaistudio.com" }, { label: "API Docs", href: "https://docs.viralaistudio.com" },
{ label: "Roadmap", href: "#" }, { label: "Roadmap", href: "#" },
], ],
}, },
{ {
title: "Company", title: "Company", items: [
items: [
{ label: "About Us", href: "#" }, { label: "About Us", href: "#" },
{ label: "Blog", href: "https://blog.viralaistudio.com" }, { label: "Blog", href: "https://blog.viralaistudio.com" },
{ label: "Careers", href: "#" }, { label: "Careers", href: "#" },
@@ -200,10 +149,9 @@ export default function PricingPage() {
], ],
}, },
{ {
title: "Support", title: "Support", items: [
items: [ { label: "Help Center", href: "faq" },
{ label: "Help Center", href: "#faq" }, { label: "Contact", href: "contact" },
{ label: "Contact", href: "/contact" },
{ label: "Community", href: "#" }, { label: "Community", href: "#" },
{ label: "Status Page", href: "#" }, { label: "Status Page", href: "#" },
], ],