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

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-03 00:23:52 +00:00
parent fd80b29779
commit db9e9843e8
1 changed files with 49 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
src/app/page.tsx
View File

@@ -1,15 +1,15 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterBase from "@/components/sections/footer/FooterBase";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBase from '@/components/sections/footer/FooterBase';
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() {
const handleNewsletterSubmit = (email: string) => {
@@ -23,7 +23,7 @@ export default function HomePage() {
borderRadius="pill"
contentWidth="smallMedium"
sizing="largeSizeMediumTitles"
background="noiseDiagonalGradient"
background="circleGradient"
cardStyle="subtle-shadow"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="solid"
@@ -34,14 +34,12 @@ export default function HomePage() {
navItems={[
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "How It Works", id: "how-it-works" },
{ name: "How It Works", id: "products" },
{ name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" },
]}
button={{
text: "Start Free Trial",
href: "/contact",
}}
text: "Start Free Trial", href: "contact"}}
brandName="ViralAI Studio"
/>
</div>
@@ -50,9 +48,9 @@ export default function HomePage() {
<HeroLogoBillboardSplit
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."
background={{ variant: "noiseDiagonalGradient" }}
background={{ variant: "radial-gradient" }}
buttons={[
{ text: "Start Free Trial", href: "/contact" },
{ text: "Start Free Trial", href: "contact" },
{ text: "View Demo", href: "https://example.com/demo" },
]}
layoutOrder="default"
@@ -69,34 +67,22 @@ export default function HomePage() {
features={[
{
icon: Zap,
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.",
},
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."},
{
icon: Type,
title: "AI Auto Caption Generator",
description: "Speech-to-text transcription with animated TikTok-style captions. Multi-language subtitle support and customizable caption styles.",
},
title: "AI Auto Caption Generator", description: "Speech-to-text transcription with animated TikTok-style captions. Multi-language subtitle support and customizable caption styles."},
{
icon: Globe,
title: "Video Translation & Dubbing",
description: "Translate videos into any language with AI voice cloning and lip-sync support. Reach global audiences effortlessly.",
},
title: "Video Translation & Dubbing", description: "Translate videos into any language with AI voice cloning and lip-sync support. Reach global audiences effortlessly."},
{
icon: Palette,
title: "Cartoon & Animation Generator",
description: "Convert real video into 3D, Anime, or Sketch animation styles. Add AI avatar presenters for personalized content.",
},
title: "Cartoon & Animation Generator", description: "Convert real video into 3D, Anime, or Sketch animation styles. Add AI avatar presenters for personalized content."},
{
icon: Music,
title: "Beat Sync Editing",
description: "Upload music and auto-cut videos to beat drops. Add transitions synchronized perfectly to music tempo.",
},
title: "Beat Sync Editing", description: "Upload music and auto-cut videos to beat drops. Add transitions synchronized perfectly to music tempo."},
{
icon: ImageIcon,
title: "Auto Thumbnail Generator",
description: "AI face detection, viral YouTube templates, and bold text overlays. Generate thumbnails that maximize click-through rates.",
},
title: "Auto Thumbnail Generator", description: "AI face detection, viral YouTube templates, and bold text overlays. Generate thumbnails that maximize click-through rates."},
]}
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."
@@ -108,51 +94,21 @@ export default function HomePage() {
/>
</div>
<div id="how-it-works" data-section="how-it-works">
<div id="products" data-section="products">
<ProductCardOne
products={[
{
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?_wi=1",
imageAlt: "Video conversion to shorts",
},
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"},
{
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?_wi=1",
imageAlt: "AI-generated animated captions",
},
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"},
{
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?_wi=1",
imageAlt: "Animation style conversions",
},
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"},
{
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",
},
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"},
{
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",
},
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"},
{
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",
},
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"},
]}
title="Key Video Processing Features"
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 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">
<TestimonialCardSixteen
testimonials={[
{
id: "1",
name: "Sarah Chen",
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: "1", name: "Sarah Chen", 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"},
{
id: "2",
name: "Marcus Johnson",
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: "2", name: "Marcus Johnson", 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"},
{
id: "3",
name: "Emma Rodriguez",
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: "3", name: "Emma Rodriguez", 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"},
{
id: "4",
name: "Alex Kim",
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",
},
id: "4", name: "Alex Kim", 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={[
{ value: "10x", label: "Faster video editing" },
@@ -216,13 +159,6 @@ export default function HomePage() {
/>
</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 className="mx-auto px-4 md:px-6 mb-12">
<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."
background={{ variant: "sparkles-gradient" }}
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"
mediaAnimation="slide-up"
mediaPosition="left"
@@ -252,17 +188,15 @@ export default function HomePage() {
<FooterBase
columns={[
{
title: "Product",
items: [
{ label: "Features", href: "/features" },
{ label: "Pricing", href: "/pricing" },
title: "Product", items: [
{ label: "Features", href: "features" },
{ label: "Pricing", href: "pricing" },
{ label: "API Docs", href: "https://docs.viralaistudio.com" },
{ label: "Roadmap", href: "#" },
],
},
{
title: "Company",
items: [
title: "Company", items: [
{ label: "About Us", href: "#" },
{ label: "Blog", href: "https://blog.viralaistudio.com" },
{ label: "Careers", href: "#" },
@@ -270,10 +204,9 @@ export default function HomePage() {
],
},
{
title: "Support",
items: [
{ label: "Help Center", href: "#faq" },
{ label: "Contact", href: "/contact" },
title: "Support", items: [
{ label: "Help Center", href: "faq" },
{ label: "Contact", href: "contact" },
{ label: "Community", href: "#" },
{ label: "Status Page", href: "#" },
],