Files
748387ee-7967-422d-831f-e14…/src/app/features/page.tsx

186 lines
8.2 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import FooterBase from "@/components/sections/footer/FooterBase";
import Link from "next/link";
import { Zap, Type, Globe, Palette, Music, Image as ImageIcon, Sparkles } from "lucide-react";
export default function FeaturesPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="smallMedium"
sizing="largeSizeMediumTitles"
background="noiseDiagonalGradient"
cardStyle="subtle-shadow"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="solid"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "How It Works", id: "how-it-works" },
{ name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" },
]}
button={{
text: "Start Free Trial",
href: "/contact",
}}
brandName="ViralAI Studio"
/>
</div>
<div id="features" data-section="features">
<FeatureBorderGlow
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.",
},
{
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.",
},
{
icon: Globe,
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.",
},
{
icon: Music,
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="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."
tag="Core Capabilities"
tagIcon={Sparkles}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="how-it-works" data-section="how-it-works">
<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=2",
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=2",
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=2",
imageAlt: "Animation style conversions",
},
]}
title="Key Video Processing Features"
description="Comprehensive toolkit for modern content creators. Each feature is optimized for viral content generation and multi-platform publishing."
tag="Processing Tools"
tagIcon={Sparkles}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="feature-deep-dive" data-section="feature-deep-dive">
<div className="mx-auto px-4 md:px-6 py-20 text-center">
<h2 className="text-4xl font-light mb-6">Advanced Feature Set</h2>
<p className="text-lg text-gray-600 max-w-3xl mx-auto mb-12">
Explore the complete suite of AI-powered video editing capabilities designed to streamline your creative workflow and maximize content performance across all platforms.
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="p-8 bg-card rounded-2xl">
<h3 className="text-2xl font-light mb-3">Intelligent Analysis</h3>
<p className="text-gray-600">Our advanced AI algorithms analyze your videos in real-time, identifying the most engaging moments and automatically creating optimized cuts.</p>
</div>
<div className="p-8 bg-card rounded-2xl">
<h3 className="text-2xl font-light mb-3">Multi-Format Export</h3>
<p className="text-gray-600">Export to every major platform simultaneously with platform-specific optimizations ensuring your content looks perfect everywhere.</p>
</div>
<div className="p-8 bg-card rounded-2xl">
<h3 className="text-2xl font-light mb-3">Custom Branding</h3>
<p className="text-gray-600">Add logos, watermarks, and branded elements to your videos with our intuitive overlay system and brand template library.</p>
</div>
<div className="p-8 bg-card rounded-2xl">
<h3 className="text-2xl font-light mb-3">Collaboration Tools</h3>
<p className="text-gray-600">Work seamlessly with team members through cloud-based project sharing, comments, and real-time editing capabilities.</p>
</div>
</div>
</div>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
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: [
{ label: "About Us", href: "#" },
{ label: "Blog", href: "https://blog.viralaistudio.com" },
{ label: "Careers", href: "#" },
{ label: "Press Kit", href: "#" },
],
},
{
title: "Support",
items: [
{ label: "Help Center", href: "#faq" },
{ label: "Contact", href: "/contact" },
{ label: "Community", href: "#" },
{ label: "Status Page", href: "#" },
],
},
]}
logoText="ViralAI Studio"
copyrightText="© 2025 ViralAI Studio. All rights reserved."
/>
</div>
</ThemeProvider>
);
}