features all page hide video button and clickable all button
This commit is contained in:
unknown
parent
1462d35121
commit
b8f165156b
7 changed files with 2668 additions and 1453 deletions
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,13 +1,13 @@
|
|||
'use client'
|
||||
"use client";
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Check,
|
||||
Clock,
|
||||
Zap,
|
||||
Video,
|
||||
Image,
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
Check,
|
||||
Clock,
|
||||
Zap,
|
||||
Image,
|
||||
ArrowRight,
|
||||
Video,
|
||||
Star,
|
||||
Sparkle,
|
||||
Rocket,
|
||||
|
|
@ -16,16 +16,17 @@ import {
|
|||
Building,
|
||||
GraduationCap,
|
||||
FileText,
|
||||
|
||||
Palette,
|
||||
LucideProps
|
||||
} from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
LucideProps,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
// TypeScript Interfaces
|
||||
interface Feature {
|
||||
id: string;
|
||||
icon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
|
||||
icon: React.ForwardRefExoticComponent<
|
||||
Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>
|
||||
>;
|
||||
title: string;
|
||||
description: string;
|
||||
highlights: string[];
|
||||
|
|
@ -38,7 +39,9 @@ interface Feature {
|
|||
}
|
||||
|
||||
interface ProblemItem {
|
||||
icon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
|
||||
icon: React.ForwardRefExoticComponent<
|
||||
Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>
|
||||
>;
|
||||
title: string;
|
||||
description: string;
|
||||
stat: string;
|
||||
|
|
@ -51,7 +54,9 @@ interface StatItem {
|
|||
}
|
||||
|
||||
interface Industry {
|
||||
icon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
|
||||
icon: React.ForwardRefExoticComponent<
|
||||
Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>
|
||||
>;
|
||||
name: string;
|
||||
description: string;
|
||||
useCases: string[];
|
||||
|
|
@ -64,181 +69,214 @@ interface FAQ {
|
|||
}
|
||||
|
||||
const AIVideoGenerator: React.FC = () => {
|
||||
const [activeFeature, setActiveFeature] = useState<string>('text-to-video');
|
||||
const [activeFeature, setActiveFeature] = useState<string>("text-to-video");
|
||||
const [hoveredCard, setHoveredCard] = useState<string | null>(null);
|
||||
|
||||
const features: Feature[] = [
|
||||
{
|
||||
id: 'text-to-video',
|
||||
id: "text-to-video",
|
||||
icon: FileText,
|
||||
title: 'Text-to-Video Generation',
|
||||
description: 'Transform any text description into a complete, professional video. Our AI understands context, emotion, and storytelling to create videos that engage and convert.',
|
||||
title: "Text-to-Video Generation",
|
||||
description:
|
||||
"Transform any text description into a complete, professional video. Our AI understands context, emotion, and storytelling to create videos that engage and convert.",
|
||||
highlights: [
|
||||
'Natural Language Understanding: The AI interprets your text and creates relevant visuals, motion, and pacing',
|
||||
'Automatic Scene Generation: Creates multiple scenes with smooth transitions based on your text structure',
|
||||
'Voiceover & Music Integration: Adds professional voiceovers and background music that matches your content tone',
|
||||
'Style Adaptation: Choose from cinematic, corporate, social media, educational, or custom styles',
|
||||
'Multiple Output Options: Generate 3-5 video variations and choose your favorite'
|
||||
"Natural Language Understanding: The AI interprets your text and creates relevant visuals, motion, and pacing",
|
||||
"Automatic Scene Generation: Creates multiple scenes with smooth transitions based on your text structure",
|
||||
"Voiceover & Music Integration: Adds professional voiceovers and background music that matches your content tone",
|
||||
"Style Adaptation: Choose from cinematic, corporate, social media, educational, or custom styles",
|
||||
"Multiple Output Options: Generate 3-5 video variations and choose your favorite",
|
||||
],
|
||||
examples: {
|
||||
input: 'Create a 60-second promotional video for our new coffee shop, showing morning customers enjoying artisanal coffee in a cozy atmosphere with warm lighting',
|
||||
output: 'Professional 60-second video with multiple scenes: coffee brewing, customers chatting, close-ups of coffee art, and text overlays about the coffee shop experience'
|
||||
input:
|
||||
"Create a 60-second promotional video for our new coffee shop, showing morning customers enjoying artisanal coffee in a cozy atmosphere with warm lighting",
|
||||
output:
|
||||
"Professional 60-second video with multiple scenes: coffee brewing, customers chatting, close-ups of coffee art, and text overlays about the coffee shop experience",
|
||||
},
|
||||
gradient: 'from-purple-500 to-pink-500',
|
||||
popular: true
|
||||
gradient: "from-purple-500 to-pink-500",
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
id: 'image-to-video',
|
||||
id: "image-to-video",
|
||||
icon: Image,
|
||||
title: 'Image-to-Video Transformation',
|
||||
description: 'Bring your images to life with AI-powered animation and motion. Transform static photos into engaging video content that captures attention.',
|
||||
title: "Image-to-Video Transformation",
|
||||
description:
|
||||
"Bring your images to life with AI-powered animation and motion. Transform static photos into engaging video content that captures attention.",
|
||||
highlights: [
|
||||
'Smart Image Analysis: AI detects subjects, backgrounds, and focal points to create natural motion',
|
||||
'Multiple Animation Styles: Choose from ken burns effects, parallax scrolling, object animation, or custom motions',
|
||||
'Batch Processing: Transform multiple images into a cohesive video story automatically',
|
||||
'Background Enhancement: AI can replace or enhance backgrounds while keeping subjects sharp',
|
||||
'Slide Show to Video: Convert image collections into professional video presentations'
|
||||
"Smart Image Analysis: AI detects subjects, backgrounds, and focal points to create natural motion",
|
||||
"Multiple Animation Styles: Choose from ken burns effects, parallax scrolling, object animation, or custom motions",
|
||||
"Batch Processing: Transform multiple images into a cohesive video story automatically",
|
||||
"Background Enhancement: AI can replace or enhance backgrounds while keeping subjects sharp",
|
||||
"Slide Show to Video: Convert image collections into professional video presentations",
|
||||
],
|
||||
examples: {
|
||||
input: 'Real estate property photos: living room, kitchen, bedroom, backyard',
|
||||
output: 'Smooth 45-second property tour video with panning effects, transitions between rooms, and text overlays highlighting features'
|
||||
input:
|
||||
"Real estate property photos: living room, kitchen, bedroom, backyard",
|
||||
output:
|
||||
"Smooth 45-second property tour video with panning effects, transitions between rooms, and text overlays highlighting features",
|
||||
},
|
||||
gradient: 'from-blue-500 to-cyan-500'
|
||||
}
|
||||
gradient: "from-blue-500 to-cyan-500",
|
||||
},
|
||||
];
|
||||
|
||||
const problemItems: ProblemItem[] = [
|
||||
{
|
||||
icon: Zap,
|
||||
title: 'Prohibitively Expensive',
|
||||
description: 'Professional video production costs $1,000-$5,000 per minute. Most businesses can\'t afford consistent video content at these rates, missing out on video\'s 80% higher conversion rates.',
|
||||
stat: '$1,000-$5,000 per minute',
|
||||
color: 'red'
|
||||
title: "Prohibitively Expensive",
|
||||
description:
|
||||
"Professional video production costs $1,000-$5,000 per minute. Most businesses can't afford consistent video content at these rates, missing out on video's 80% higher conversion rates.",
|
||||
stat: "$1,000-$5,000 per minute",
|
||||
color: "red",
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
title: 'Time-Consuming Production',
|
||||
description: 'From scripting to filming to editing, creating one video can take 10-40 hours. The average marketer spends 15+ hours weekly trying to create basic video content.',
|
||||
stat: '10-40 hours per video',
|
||||
color: 'orange'
|
||||
title: "Time-Consuming Production",
|
||||
description:
|
||||
"From scripting to filming to editing, creating one video can take 10-40 hours. The average marketer spends 15+ hours weekly trying to create basic video content.",
|
||||
stat: "10-40 hours per video",
|
||||
color: "orange",
|
||||
},
|
||||
{
|
||||
icon: Video,
|
||||
title: 'Technical Skills Required',
|
||||
description: 'Learning complex editing software like Premiere Pro or After Effects takes months. Most businesses lack the in-house expertise to create professional-quality videos.',
|
||||
stat: 'Months of learning required',
|
||||
color: 'purple'
|
||||
title: "Technical Skills Required",
|
||||
description:
|
||||
"Learning complex editing software like Premiere Pro or After Effects takes months. Most businesses lack the in-house expertise to create professional-quality videos.",
|
||||
stat: "Months of learning required",
|
||||
color: "purple",
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
title: 'Inconsistent Quality',
|
||||
description: 'Amateur videos damage brand perception, while inconsistent quality across platforms confuses audiences and weakens your brand authority.',
|
||||
stat: 'Brand perception at risk',
|
||||
color: 'blue'
|
||||
}
|
||||
title: "Inconsistent Quality",
|
||||
description:
|
||||
"Amateur videos damage brand perception, while inconsistent quality across platforms confuses audiences and weakens your brand authority.",
|
||||
stat: "Brand perception at risk",
|
||||
color: "blue",
|
||||
},
|
||||
];
|
||||
|
||||
const stats: StatItem[] = [
|
||||
{ number: '87%', label: 'of marketers say video is their most effective content' },
|
||||
{ number: '$2,500', label: 'average cost per professional video' },
|
||||
{ number: '12+', label: 'hours spent per video without AI' }
|
||||
{
|
||||
number: "87%",
|
||||
label: "of marketers say video is their most effective content",
|
||||
},
|
||||
{ number: "$2,500", label: "average cost per professional video" },
|
||||
{ number: "12+", label: "hours spent per video without AI" },
|
||||
];
|
||||
|
||||
const industries: Industry[] = [
|
||||
{
|
||||
icon: Users,
|
||||
name: 'Social Media & Marketing',
|
||||
description: 'Create engaging content for all social platforms with platform-optimized videos that drive engagement and conversions.',
|
||||
name: "Social Media & Marketing",
|
||||
description:
|
||||
"Create engaging content for all social platforms with platform-optimized videos that drive engagement and conversions.",
|
||||
useCases: [
|
||||
'Instagram Reels & Stories',
|
||||
'TikTok viral content',
|
||||
'Facebook ads and posts',
|
||||
'YouTube shorts and content'
|
||||
"Instagram Reels & Stories",
|
||||
"TikTok viral content",
|
||||
"Facebook ads and posts",
|
||||
"YouTube shorts and content",
|
||||
],
|
||||
results: 'Results: 300% engagement increase, 5x more content'
|
||||
results: "Results: 300% engagement increase, 5x more content",
|
||||
},
|
||||
{
|
||||
icon: ShoppingCart,
|
||||
name: 'E-commerce & Retail',
|
||||
description: 'Generate product videos, demos, and promotional content that showcases products and drives sales.',
|
||||
name: "E-commerce & Retail",
|
||||
description:
|
||||
"Generate product videos, demos, and promotional content that showcases products and drives sales.",
|
||||
useCases: [
|
||||
'Product demonstration videos',
|
||||
'Customer testimonial videos',
|
||||
'Promotional campaign videos',
|
||||
'Social commerce content'
|
||||
"Product demonstration videos",
|
||||
"Customer testimonial videos",
|
||||
"Promotional campaign videos",
|
||||
"Social commerce content",
|
||||
],
|
||||
results: 'Results: 85% higher conversion, 3.2x ROAS'
|
||||
results: "Results: 85% higher conversion, 3.2x ROAS",
|
||||
},
|
||||
{
|
||||
icon: Building,
|
||||
name: 'Corporate & Training',
|
||||
description: 'Create professional training materials, internal communications, and corporate presentations efficiently.',
|
||||
name: "Corporate & Training",
|
||||
description:
|
||||
"Create professional training materials, internal communications, and corporate presentations efficiently.",
|
||||
useCases: [
|
||||
'Employee training videos',
|
||||
'Internal communication',
|
||||
'Corporate announcements',
|
||||
'Process documentation'
|
||||
"Employee training videos",
|
||||
"Internal communication",
|
||||
"Corporate announcements",
|
||||
"Process documentation",
|
||||
],
|
||||
results: 'Results: 70% time savings, consistent quality'
|
||||
results: "Results: 70% time savings, consistent quality",
|
||||
},
|
||||
{
|
||||
icon: GraduationCap,
|
||||
name: 'Education & Courses',
|
||||
description: 'Develop engaging educational content, course materials, and tutorial videos that improve learning outcomes.',
|
||||
name: "Education & Courses",
|
||||
description:
|
||||
"Develop engaging educational content, course materials, and tutorial videos that improve learning outcomes.",
|
||||
useCases: [
|
||||
'Online course content',
|
||||
'Educational explainers',
|
||||
'Student engagement videos',
|
||||
'Tutorial and how-to content'
|
||||
"Online course content",
|
||||
"Educational explainers",
|
||||
"Student engagement videos",
|
||||
"Tutorial and how-to content",
|
||||
],
|
||||
results: 'Results: 45% better retention, scalable content'
|
||||
}
|
||||
results: "Results: 45% better retention, scalable content",
|
||||
},
|
||||
];
|
||||
|
||||
const faqs: FAQ[] = [
|
||||
{
|
||||
question: 'How long does it take to generate a video?',
|
||||
answer: 'Most videos are generated in 1-3 minutes, depending on length and complexity. Our AI processes your request and creates multiple scenes, adds motion graphics, applies transitions, and integrates sound automatically. You\'ll have a complete, professional video ready in under 5 minutes.'
|
||||
question: "How long does it take to generate a video?",
|
||||
answer:
|
||||
"Most videos are generated in 1-3 minutes, depending on length and complexity. Our AI processes your request and creates multiple scenes, adds motion graphics, applies transitions, and integrates sound automatically. You'll have a complete, professional video ready in under 5 minutes.",
|
||||
},
|
||||
{
|
||||
question: 'What video quality can I expect?',
|
||||
answer: 'We deliver broadcast-quality videos up to 4K resolution. All videos include professional color grading, smooth transitions, and cinematic pacing. The quality rivals agency-produced videos but at a fraction of the cost and time. Higher-tier plans include 4K and HDR quality options.'
|
||||
question: "What video quality can I expect?",
|
||||
answer:
|
||||
"We deliver broadcast-quality videos up to 4K resolution. All videos include professional color grading, smooth transitions, and cinematic pacing. The quality rivals agency-produced videos but at a fraction of the cost and time. Higher-tier plans include 4K and HDR quality options.",
|
||||
},
|
||||
{
|
||||
question: 'Can I customize the AI-generated videos?',
|
||||
answer: 'Yes! All videos are fully customizable. You can edit text, swap images, adjust timing, change music, and modify colors. Our intuitive editor makes it easy to make quick changes without any technical skills. You can also regenerate specific scenes or the entire video with different styles.'
|
||||
question: "Can I customize the AI-generated videos?",
|
||||
answer:
|
||||
"Yes! All videos are fully customizable. You can edit text, swap images, adjust timing, change music, and modify colors. Our intuitive editor makes it easy to make quick changes without any technical skills. You can also regenerate specific scenes or the entire video with different styles.",
|
||||
},
|
||||
{
|
||||
question: 'Do you provide commercial rights for the videos?',
|
||||
answer: 'Yes, all videos generated with PlanPost AI include full commercial rights. You can use them for marketing, advertising, social media, websites, and any other business purposes. We also provide royalty-free music and stock footage where applicable.'
|
||||
question: "Do you provide commercial rights for the videos?",
|
||||
answer:
|
||||
"Yes, all videos generated with PlanPost AI include full commercial rights. You can use them for marketing, advertising, social media, websites, and any other business purposes. We also provide royalty-free music and stock footage where applicable.",
|
||||
},
|
||||
{
|
||||
question: 'How does the text-to-video AI understand my content?',
|
||||
answer: 'Our AI uses advanced natural language processing to understand context, emotion, and storytelling elements in your text. It analyzes your description to determine appropriate visuals, pacing, music, and style. The more detailed your description, the better the AI can match your vision.'
|
||||
question: "How does the text-to-video AI understand my content?",
|
||||
answer:
|
||||
"Our AI uses advanced natural language processing to understand context, emotion, and storytelling elements in your text. It analyzes your description to determine appropriate visuals, pacing, music, and style. The more detailed your description, the better the AI can match your vision.",
|
||||
},
|
||||
{
|
||||
question: 'What video formats and lengths are supported?',
|
||||
answer: 'We support all major video formats (MP4, MOV, AVI) and lengths from 15 seconds to 10 minutes. The AI automatically optimizes video length based on your target platform and content type. You can also specify exact duration preferences in your video description.'
|
||||
question: "What video formats and lengths are supported?",
|
||||
answer:
|
||||
"We support all major video formats (MP4, MOV, AVI) and lengths from 15 seconds to 10 minutes. The AI automatically optimizes video length based on your target platform and content type. You can also specify exact duration preferences in your video description.",
|
||||
},
|
||||
{
|
||||
question: 'Can I use my own brand elements in the videos?',
|
||||
answer: 'Absolutely. You can upload your logo, brand colors, fonts, and other brand assets. The AI will incorporate these elements consistently across all generated videos. Enterprise plans include custom brand style training for complete brand consistency.'
|
||||
}
|
||||
question: "Can I use my own brand elements in the videos?",
|
||||
answer:
|
||||
"Absolutely. You can upload your logo, brand colors, fonts, and other brand assets. The AI will incorporate these elements consistently across all generated videos. Enterprise plans include custom brand style training for complete brand consistency.",
|
||||
},
|
||||
];
|
||||
|
||||
const getColorClass = (color: string): string => {
|
||||
switch (color) {
|
||||
case 'red': return 'red';
|
||||
case 'orange': return 'orange';
|
||||
case 'purple': return 'purple';
|
||||
case 'blue': return 'blue';
|
||||
default: return 'purple';
|
||||
case "red":
|
||||
return "red";
|
||||
case "orange":
|
||||
return "orange";
|
||||
case "purple":
|
||||
return "purple";
|
||||
case "blue":
|
||||
return "blue";
|
||||
default:
|
||||
return "purple";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen" style={{ background: 'linear-gradient(135deg, #c8bcf3a8 0%, #e5c5fdd0 100%)' }}>
|
||||
|
||||
<div
|
||||
className="min-h-screen"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #c8bcf3a8 0%, #e5c5fdd0 100%)",
|
||||
}}
|
||||
>
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden">
|
||||
<div className="absolute inset-0">
|
||||
|
|
@ -252,37 +290,43 @@ const AIVideoGenerator: React.FC = () => {
|
|||
<Sparkle className="w-4 h-4" />
|
||||
<span>AI Video Generator</span>
|
||||
</div>
|
||||
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-bold text-black mb-6 leading-tight">
|
||||
AI Video Generator:
|
||||
<span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
|
||||
Create Professional Videos from Text & Images
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
|
||||
<p className="text-xl md:text-2xl text-black/80 mb-8 max-w-4xl mx-auto leading-relaxed">
|
||||
Transform text and images into engaging, professional-quality videos in minutes.
|
||||
Save 80% on video production costs and create video content 10x faster with AI.
|
||||
Transform text and images into engaging, professional-quality
|
||||
videos in minutes. Save 80% on video production costs and create
|
||||
video content 10x faster with AI.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
|
||||
<Link href={"https://dashboard.planpostai.com/video-generation"}><button className="group relative bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-10 py-5 rounded-2xl font-semibold text-lg hover:shadow-2xl transition-all duration-300 shadow-xl hover:scale-105 flex items-center space-x-3 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
|
||||
<Rocket className="w-6 h-6 relative z-10" />
|
||||
<span className="relative z-10">Start Your Free Trial</span>
|
||||
<ArrowRight className="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform" />
|
||||
</button></Link>
|
||||
|
||||
|
||||
<Link href={"https://dashboard.planpostai.com/video-generation"}>
|
||||
<button className="group relative bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-10 py-5 rounded-2xl font-semibold text-lg hover:shadow-2xl transition-all duration-300 shadow-xl hover:scale-105 flex items-center space-x-3 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
|
||||
<Rocket className="w-6 h-6 relative z-10" />
|
||||
<span className="relative z-10">Start Your Free Trial</span>
|
||||
<ArrowRight className="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center space-x-4 text-black/80 mb-8">
|
||||
<div className="flex items-center space-x-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
|
||||
<Star
|
||||
key={i}
|
||||
className="w-5 h-5 text-yellow-400 fill-current"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="font-medium">4.9/5 from 3,500+ video creators</span>
|
||||
<span className="font-medium">
|
||||
4.9/5 from 3,500+ video creators
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -302,17 +346,29 @@ const AIVideoGenerator: React.FC = () => {
|
|||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
|
||||
{problemItems.map((item: ProblemItem, index: number) => (
|
||||
<div
|
||||
<div
|
||||
key={index}
|
||||
className="group bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-105"
|
||||
>
|
||||
<div className={`w-14 h-14 bg-${getColorClass(item.color)}-100 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
|
||||
<item.icon className={`w-7 h-7 text-${getColorClass(item.color)}-600`} />
|
||||
<div
|
||||
className={`w-14 h-14 bg-${getColorClass(
|
||||
item.color
|
||||
)}-100 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}
|
||||
>
|
||||
<item.icon
|
||||
className={`w-7 h-7 text-${getColorClass(item.color)}-600`}
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-black mb-4">{item.title}</h3>
|
||||
<p className="text-black/80 mb-4 leading-relaxed">{item.description}</p>
|
||||
<h3 className="text-xl font-bold text-black mb-4">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-black/80 mb-4 leading-relaxed">
|
||||
{item.description}
|
||||
</p>
|
||||
<div className="bg-black/5 rounded-xl p-3 border border-black/10">
|
||||
<p className="text-sm font-semibold text-black/70">{item.stat}</p>
|
||||
<p className="text-sm font-semibold text-black/70">
|
||||
{item.stat}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -321,8 +377,13 @@ const AIVideoGenerator: React.FC = () => {
|
|||
{/* Stats */}
|
||||
<div className="grid md:grid-cols-3 gap-8 text-center mb-12">
|
||||
{stats.map((stat: StatItem, index: number) => (
|
||||
<div key={index} className="bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-purple-100">
|
||||
<div className="text-3xl font-bold text-purple-600 mb-2">{stat.number}</div>
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-purple-100"
|
||||
>
|
||||
<div className="text-3xl font-bold text-purple-600 mb-2">
|
||||
{stat.number}
|
||||
</div>
|
||||
<div className="text-gray-600 text-sm">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -331,7 +392,8 @@ const AIVideoGenerator: React.FC = () => {
|
|||
<div className="text-center">
|
||||
<div className="bg-gradient-to-r from-[#6a47ed]/10 to-[#ff4ca5]/10 rounded-3xl p-8 border border-[#6a47ed]/20 max-w-2xl mx-auto backdrop-blur-sm">
|
||||
<h3 className="text-2xl md:text-3xl font-bold text-black mb-4">
|
||||
What if you could create studio-quality videos in minutes, without any technical skills?
|
||||
What if you could create studio-quality videos in minutes,
|
||||
without any technical skills?
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -339,7 +401,12 @@ const AIVideoGenerator: React.FC = () => {
|
|||
</section>
|
||||
|
||||
{/* AI Solution Section */}
|
||||
<section className="py-20" style={{ background: 'linear-gradient(135deg, #f9f1ff 0%, #e8ddff 100%)' }}>
|
||||
<section
|
||||
className="py-20"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #f9f1ff 0%, #e8ddff 100%)",
|
||||
}}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
|
||||
|
|
@ -349,8 +416,9 @@ const AIVideoGenerator: React.FC = () => {
|
|||
</span>
|
||||
</h2>
|
||||
<p className="text-xl text-black/80 max-w-3xl mx-auto">
|
||||
PlanPost AI transforms how businesses create video content. From simple text descriptions or existing images,
|
||||
generate professional videos that engage audiences and drive results.
|
||||
PlanPost AI transforms how businesses create video content. From
|
||||
simple text descriptions or existing images, generate professional
|
||||
videos that engage audiences and drive results.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -359,9 +427,12 @@ const AIVideoGenerator: React.FC = () => {
|
|||
<div className="w-12 h-12 bg-[#6a47ed]/10 rounded-2xl flex items-center justify-center mb-4">
|
||||
<Rocket className="w-6 h-6 text-[#6a47ed]" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-black mb-4">Instant Video Generation</h3>
|
||||
<h3 className="text-xl font-bold text-black mb-4">
|
||||
Instant Video Generation
|
||||
</h3>
|
||||
<p className="text-black/80">
|
||||
Create complete videos from text prompts in under 2 minutes. No filming, no editing, no technical skills required.
|
||||
Create complete videos from text prompts in under 2 minutes. No
|
||||
filming, no editing, no technical skills required.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -369,9 +440,12 @@ const AIVideoGenerator: React.FC = () => {
|
|||
<div className="w-12 h-12 bg-[#ff4ca5]/10 rounded-2xl flex items-center justify-center mb-4">
|
||||
<Palette className="w-6 h-6 text-[#ff4ca5]" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-black mb-4">Studio-Quality Results</h3>
|
||||
<h3 className="text-xl font-bold text-black mb-4">
|
||||
Studio-Quality Results
|
||||
</h3>
|
||||
<p className="text-black/80">
|
||||
Professional motion graphics, smooth transitions, and perfect pacing that rivals agency-produced videos.
|
||||
Professional motion graphics, smooth transitions, and perfect
|
||||
pacing that rivals agency-produced videos.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -379,9 +453,12 @@ const AIVideoGenerator: React.FC = () => {
|
|||
<div className="w-12 h-12 bg-[#6a47ed]/10 rounded-2xl flex items-center justify-center mb-4">
|
||||
<Video className="w-6 h-6 text-[#6a47ed]" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-black mb-4">Platform-Optimized</h3>
|
||||
<h3 className="text-xl font-bold text-black mb-4">
|
||||
Platform-Optimized
|
||||
</h3>
|
||||
<p className="text-black/80">
|
||||
Automatically format videos for Instagram, TikTok, YouTube, Facebook, and more with perfect dimensions and length.
|
||||
Automatically format videos for Instagram, TikTok, YouTube,
|
||||
Facebook, and more with perfect dimensions and length.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -410,23 +487,29 @@ const AIVideoGenerator: React.FC = () => {
|
|||
onMouseLeave={() => setHoveredCard(null)}
|
||||
className={`p-6 rounded-2xl text-left transition-all duration-300 backdrop-blur-sm border-2 ${
|
||||
activeFeature === feature.id
|
||||
? 'bg-white shadow-xl border-[#6a47ed] transform scale-105'
|
||||
? "bg-white shadow-xl border-[#6a47ed] transform scale-105"
|
||||
: hoveredCard === feature.id
|
||||
? 'bg-white/80 shadow-lg border-white/40 transform scale-102'
|
||||
: 'bg-white/50 border-white/20'
|
||||
? "bg-white/80 shadow-lg border-white/40 transform scale-102"
|
||||
: "bg-white/50 border-white/20"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className={`w-12 h-12 rounded-xl flex items-center justify-center bg-gradient-to-r ${feature.gradient}`}>
|
||||
<div
|
||||
className={`w-12 h-12 rounded-xl flex items-center justify-center bg-gradient-to-r ${feature.gradient}`}
|
||||
>
|
||||
<feature.icon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
{feature.popular && (
|
||||
<span className="bg-[#ff4ca5] text-white text-xs px-2 py-1 rounded-full">Most Popular</span>
|
||||
<span className="bg-[#ff4ca5] text-white text-xs px-2 py-1 rounded-full">
|
||||
Most Popular
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<h3 className="font-bold text-black mb-2 text-left">{feature.title}</h3>
|
||||
<h3 className="font-bold text-black mb-2 text-left">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-black/70 text-sm text-left leading-relaxed">
|
||||
{feature.description.split('.').slice(0, 2).join('.')}.
|
||||
{feature.description.split(".").slice(0, 2).join(".")}.
|
||||
</p>
|
||||
</button>
|
||||
))}
|
||||
|
|
@ -437,30 +520,41 @@ const AIVideoGenerator: React.FC = () => {
|
|||
<div
|
||||
key={feature.id}
|
||||
className={`bg-white/80 backdrop-blur-sm rounded-3xl shadow-2xl border border-white/20 p-8 transition-all duration-500 ${
|
||||
activeFeature === feature.id ? 'block animate-fadeIn' : 'hidden'
|
||||
activeFeature === feature.id ? "block animate-fadeIn" : "hidden"
|
||||
}`}
|
||||
>
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-12">
|
||||
<div>
|
||||
<div className="flex items-center space-x-4 mb-6">
|
||||
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center bg-gradient-to-r ${feature.gradient}`}>
|
||||
<div
|
||||
className={`w-14 h-14 rounded-2xl flex items-center justify-center bg-gradient-to-r ${feature.gradient}`}
|
||||
>
|
||||
<feature.icon className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-3xl font-bold text-black">{feature.title}</h3>
|
||||
<h3 className="text-3xl font-bold text-black">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-black/70">{feature.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="space-y-4">
|
||||
{feature.highlights.map((highlight: string, index: number) => (
|
||||
<div key={index} className="flex items-start space-x-4 p-4 bg-white/50 rounded-xl border border-white/30">
|
||||
<div className="w-6 h-6 bg-[#6a47ed]/10 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
|
||||
<Check className="w-4 h-4 text-[#6a47ed]" />
|
||||
{feature.highlights.map(
|
||||
(highlight: string, index: number) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start space-x-4 p-4 bg-white/50 rounded-xl border border-white/30"
|
||||
>
|
||||
<div className="w-6 h-6 bg-[#6a47ed]/10 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
|
||||
<Check className="w-4 h-4 text-[#6a47ed]" />
|
||||
</div>
|
||||
<span className="text-black/80 leading-relaxed">
|
||||
{highlight}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-black/80 leading-relaxed">{highlight}</span>
|
||||
</div>
|
||||
))}
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -468,25 +562,35 @@ const AIVideoGenerator: React.FC = () => {
|
|||
{feature.examples && (
|
||||
<div className="bg-gradient-to-br from-[#6a47ed]/5 to-[#ff4ca5]/5 rounded-2xl p-6 border border-[#6a47ed]/10">
|
||||
<h4 className="font-bold text-black mb-4 text-lg">
|
||||
{feature.id === 'text-to-video' ? 'Text-to-Video Example' : 'Real Estate Example'}
|
||||
{feature.id === "text-to-video"
|
||||
? "Text-to-Video Example"
|
||||
: "Real Estate Example"}
|
||||
</h4>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="flex items-center space-x-2 mb-2">
|
||||
<div className="w-3 h-3 bg-[#6a47ed] rounded-full"></div>
|
||||
<p className="text-sm font-semibold text-black/70">Input</p>
|
||||
<p className="text-sm font-semibold text-black/70">
|
||||
Input
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white/60 rounded-xl p-4 border border-white/30">
|
||||
<p className="text-black/80 font-medium">{feature.examples.input}</p>
|
||||
<p className="text-black/80 font-medium">
|
||||
{feature.examples.input}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center space-x-2 mb-2">
|
||||
<div className="w-3 h-3 bg-[#ff4ca5] rounded-full"></div>
|
||||
<p className="text-sm font-semibold text-black/70">AI Output</p>
|
||||
<p className="text-sm font-semibold text-black/70">
|
||||
AI Output
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white/60 rounded-xl p-4 border border-white/30">
|
||||
<p className="text-black/80 font-medium">{feature.examples.output}</p>
|
||||
<p className="text-black/80 font-medium">
|
||||
{feature.examples.output}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -494,23 +598,41 @@ const AIVideoGenerator: React.FC = () => {
|
|||
)}
|
||||
|
||||
<div className="bg-gradient-to-br from-[#6a47ed]/5 to-[#ff4ca5]/5 rounded-2xl p-6 border border-[#6a47ed]/10">
|
||||
<h4 className="font-bold text-black mb-4 text-lg">Video Specifications</h4>
|
||||
<h4 className="font-bold text-black mb-4 text-lg">
|
||||
Video Specifications
|
||||
</h4>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-[#6a47ed]">4K</div>
|
||||
<div className="text-sm text-black/70">Maximum Resolution</div>
|
||||
<div className="text-2xl font-bold text-[#6a47ed]">
|
||||
4K
|
||||
</div>
|
||||
<div className="text-sm text-black/70">
|
||||
Maximum Resolution
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-[#6a47ed]">1-3 min</div>
|
||||
<div className="text-sm text-black/70">Generation Time</div>
|
||||
<div className="text-2xl font-bold text-[#6a47ed]">
|
||||
1-3 min
|
||||
</div>
|
||||
<div className="text-sm text-black/70">
|
||||
Generation Time
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-[#6a47ed]">15s-10m</div>
|
||||
<div className="text-sm text-black/70">Video Length</div>
|
||||
<div className="text-2xl font-bold text-[#6a47ed]">
|
||||
15s-10m
|
||||
</div>
|
||||
<div className="text-sm text-black/70">
|
||||
Video Length
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-[#6a47ed]">5</div>
|
||||
<div className="text-sm text-black/70">Style Options</div>
|
||||
<div className="text-2xl font-bold text-[#6a47ed]">
|
||||
5
|
||||
</div>
|
||||
<div className="text-sm text-black/70">
|
||||
Style Options
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -522,7 +644,12 @@ const AIVideoGenerator: React.FC = () => {
|
|||
</section>
|
||||
|
||||
{/* Industries Section */}
|
||||
<section className="py-20" style={{ background: 'linear-gradient(135deg, #f9f1ff 0%, #e8ddff 100%)' }}>
|
||||
<section
|
||||
className="py-20"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #f9f1ff 0%, #e8ddff 100%)",
|
||||
}}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
|
||||
|
|
@ -535,16 +662,26 @@ const AIVideoGenerator: React.FC = () => {
|
|||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{industries.map((industry: Industry, index: number) => (
|
||||
<div key={index} className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg hover:shadow-2xl transition-all duration-300">
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg hover:shadow-2xl transition-all duration-300"
|
||||
>
|
||||
<div className="w-14 h-14 bg-purple-100 rounded-2xl flex items-center justify-center mb-6">
|
||||
<industry.icon className="w-7 h-7 text-purple-600" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-black mb-4">{industry.name}</h3>
|
||||
<p className="text-black/80 mb-6 leading-relaxed">{industry.description}</p>
|
||||
|
||||
<h3 className="text-2xl font-bold text-black mb-4">
|
||||
{industry.name}
|
||||
</h3>
|
||||
<p className="text-black/80 mb-6 leading-relaxed">
|
||||
{industry.description}
|
||||
</p>
|
||||
|
||||
<div className="space-y-2 mb-6">
|
||||
{industry.useCases.map((useCase: string, idx: number) => (
|
||||
<div key={idx} className="flex items-center gap-2 text-sm text-black/70">
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-center gap-2 text-sm text-black/70"
|
||||
>
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
{useCase}
|
||||
</div>
|
||||
|
|
@ -552,7 +689,9 @@ const AIVideoGenerator: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div className="bg-purple-50 p-4 rounded-2xl border border-purple-200">
|
||||
<p className="text-purple-700 text-sm font-semibold">{industry.results}</p>
|
||||
<p className="text-purple-700 text-sm font-semibold">
|
||||
{industry.results}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -576,29 +715,36 @@ const AIVideoGenerator: React.FC = () => {
|
|||
{[
|
||||
{
|
||||
step: 1,
|
||||
title: 'Describe Your Video',
|
||||
description: 'Enter your text prompt or upload images. Specify style, duration, and platform preferences.',
|
||||
content: '[Text input interface with style options]'
|
||||
title: "Describe Your Video",
|
||||
description:
|
||||
"Enter your text prompt or upload images. Specify style, duration, and platform preferences.",
|
||||
content: "[Text input interface with style options]",
|
||||
},
|
||||
{
|
||||
step: 2,
|
||||
title: 'AI Generates Your Video',
|
||||
description: 'Our AI creates multiple video versions with professional editing, motion graphics, and sound.',
|
||||
content: '[AI generation progress indicator]'
|
||||
title: "AI Generates Your Video",
|
||||
description:
|
||||
"Our AI creates multiple video versions with professional editing, motion graphics, and sound.",
|
||||
content: "[AI generation progress indicator]",
|
||||
},
|
||||
{
|
||||
step: 3,
|
||||
title: 'Customize & Publish',
|
||||
description: 'Review, make quick edits if needed, and publish directly to your platforms or download.',
|
||||
content: '[Video editor with publishing options]'
|
||||
}
|
||||
title: "Customize & Publish",
|
||||
description:
|
||||
"Review, make quick edits if needed, and publish directly to your platforms or download.",
|
||||
content: "[Video editor with publishing options]",
|
||||
},
|
||||
].map((item, index) => (
|
||||
<div key={index} className="text-center">
|
||||
<div className="w-20 h-20 bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] rounded-2xl flex items-center justify-center mx-auto mb-4 text-white font-bold text-xl">
|
||||
{item.step}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-black mb-4">{item.title}</h3>
|
||||
<p className="text-black/80 mb-4 leading-relaxed">{item.description}</p>
|
||||
<h3 className="text-xl font-bold text-black mb-4">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-black/80 mb-4 leading-relaxed">
|
||||
{item.description}
|
||||
</p>
|
||||
<div className="bg-white/60 rounded-xl h-32 flex items-center justify-center border border-white/30">
|
||||
<span className="text-black/50 text-sm">{item.content}</span>
|
||||
</div>
|
||||
|
|
@ -608,17 +754,25 @@ const AIVideoGenerator: React.FC = () => {
|
|||
|
||||
<div className="text-center mt-12">
|
||||
<button className="bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-12 py-5 rounded-2xl font-semibold text-lg hover:shadow-2xl transition-all duration-300 shadow-xl hover:scale-105">
|
||||
Start Your Free Trial →
|
||||
<Link href={"https://dashboard.planpostai.com/video-generation"}>
|
||||
Start Your Free Trial →{" "}
|
||||
</Link>
|
||||
</button>
|
||||
<p className="text-black/70 text-sm mt-4">
|
||||
No credit card required • Create your first video in 2 minutes • No video skills needed
|
||||
No credit card required • Create your first video in 2 minutes •
|
||||
No video skills needed
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="py-20" style={{ background: 'linear-gradient(135deg, #f9f1ff 0%, #e8ddff 100%)' }}>
|
||||
<section
|
||||
className="py-20"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #f9f1ff 0%, #e8ddff 100%)",
|
||||
}}
|
||||
>
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
|
||||
|
|
@ -631,8 +785,13 @@ const AIVideoGenerator: React.FC = () => {
|
|||
|
||||
<div className="space-y-6">
|
||||
{faqs.map((faq: FAQ, index: number) => (
|
||||
<div key={index} className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg">
|
||||
<h3 className="text-lg font-bold text-black mb-3">{faq.question}</h3>
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg"
|
||||
>
|
||||
<h3 className="text-lg font-bold text-black mb-3">
|
||||
{faq.question}
|
||||
</h3>
|
||||
<p className="text-black/80 leading-relaxed">{faq.answer}</p>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -652,19 +811,33 @@ const AIVideoGenerator: React.FC = () => {
|
|||
Start Creating Professional Videos
|
||||
<span className="block">in Minutes, Not Days</span>
|
||||
</h2>
|
||||
|
||||
|
||||
<p className="text-xl text-white/90 mb-8">
|
||||
Join 3,500+ businesses creating stunning video content with AI
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
{[
|
||||
{ title: '80% Cost Savings', desc: 'Create videos for a fraction of traditional production costs' },
|
||||
{ title: '10x Faster Creation', desc: 'Generate professional videos in minutes instead of days' },
|
||||
{ title: 'No Skills Required', desc: 'Create studio-quality videos without any technical expertise' }
|
||||
{
|
||||
title: "80% Cost Savings",
|
||||
desc: "Create videos for a fraction of traditional production costs",
|
||||
},
|
||||
{
|
||||
title: "10x Faster Creation",
|
||||
desc: "Generate professional videos in minutes instead of days",
|
||||
},
|
||||
{
|
||||
title: "No Skills Required",
|
||||
desc: "Create studio-quality videos without any technical expertise",
|
||||
},
|
||||
].map((item, index) => (
|
||||
<div key={index} className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
|
||||
<h3 className="text-lg font-bold text-white mb-2">{item.title}</h3>
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20"
|
||||
>
|
||||
<h3 className="text-lg font-bold text-white mb-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-white/80 text-sm">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -672,11 +845,11 @@ const AIVideoGenerator: React.FC = () => {
|
|||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto mb-8">
|
||||
{[
|
||||
'Create videos from text descriptions',
|
||||
'Transform images into engaging videos',
|
||||
'4K broadcast-quality output',
|
||||
'Platform-optimized for all social media',
|
||||
'Full commercial rights included'
|
||||
"Create videos from text descriptions",
|
||||
"Transform images into engaging videos",
|
||||
"4K broadcast-quality output",
|
||||
"Platform-optimized for all social media",
|
||||
"Full commercial rights included",
|
||||
].map((benefit: string, index: number) => (
|
||||
<div key={index} className="flex items-center gap-3 text-white">
|
||||
<Check className="w-5 h-5 text-green-300" />
|
||||
|
|
@ -686,11 +859,14 @@ const AIVideoGenerator: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<button className="bg-white text-[#6a47ed] px-12 py-5 rounded-2xl font-semibold text-lg hover:bg-slate-100 transition-all duration-300 shadow-2xl hover:shadow-3xl hover:scale-105 mb-4">
|
||||
Start Your 14-Day Free Trial →
|
||||
<Link href={"https://dashboard.planpostai.com/video-generation"}>
|
||||
Start Your 14-Day Free Trial →
|
||||
</Link>
|
||||
</button>
|
||||
|
||||
|
||||
<p className="text-white/80 text-sm">
|
||||
No credit card required • Create your first video today • 30-day money-back guarantee
|
||||
No credit card required • Create your first video today • 30-day
|
||||
money-back guarantee
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -698,4 +874,4 @@ const AIVideoGenerator: React.FC = () => {
|
|||
);
|
||||
};
|
||||
|
||||
export default AIVideoGenerator;
|
||||
export default AIVideoGenerator;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,9 +1,20 @@
|
|||
"use client";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { Menu, ChevronDown, ChevronUp, ArrowRight, Sparkles, Zap, Palette, TrendingUp, FileText, Video} from "lucide-react";
|
||||
import {
|
||||
Menu,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
ArrowRight,
|
||||
Sparkles,
|
||||
Zap,
|
||||
Palette,
|
||||
TrendingUp,
|
||||
FileText,
|
||||
Video,
|
||||
} from "lucide-react";
|
||||
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "./ui/sheet";
|
||||
import { useState } from "react";
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
|
||||
const megaMenuData = [
|
||||
{
|
||||
|
|
@ -11,50 +22,69 @@ const megaMenuData = [
|
|||
title: "AI Social Media Content Generator",
|
||||
description: "Create stunning social media posts in minutes",
|
||||
route: "/ai-content-generator",
|
||||
badge: "Popular"
|
||||
badge: "Popular",
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
title: "AI Image Generator",
|
||||
description: "Craft eye-catching thumbnails instantly",
|
||||
route: "/ai-image-generator",
|
||||
badge: "New"
|
||||
badge: "New",
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
title: "AI-Powered Meta Ads Optimization",
|
||||
description: "Create high-converting ads in seconds",
|
||||
route: "/ai-meta-ads-optimization"
|
||||
route: "/ai-meta-ads-optimization",
|
||||
},
|
||||
{
|
||||
icon: FileText,
|
||||
title: "SEO Geo Article Writer",
|
||||
description: "Location-optimized content that ranks",
|
||||
route: "/seo-geo-article-writer"
|
||||
route: "/seo-geo-article-writer",
|
||||
},
|
||||
{
|
||||
icon: Video,
|
||||
title: "AI Video Generator",
|
||||
description: "Turn text into engaging videos automatically",
|
||||
route: "/ai-video-generator"
|
||||
route: "/ai-video-generator",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "AI Bulk Content",
|
||||
description: "SEO-optimized articles that drive traffic",
|
||||
route: "/bulk-content"
|
||||
}
|
||||
|
||||
route: "/bulk-content",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Header() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [activeMenu, setActiveMenu] = useState<string | null>(null);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handleClose = () => {
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
// Close menu when clicking outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
|
||||
setActiveMenu(null);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Close menu when a link is clicked
|
||||
const handleMenuLinkClick = () => {
|
||||
setActiveMenu(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<nav className="flex items-center justify-between pr-4 absolute z-50 w-full">
|
||||
<Link href="/">
|
||||
|
|
@ -68,25 +98,34 @@ export default function Header() {
|
|||
|
||||
{/* Desktop Menu */}
|
||||
<div className="hidden md:flex items-center space-x-16 px-8 pt-5 pb-4 rounded-b-3xl text-gray-800 font-medium bg-white shadow-sm">
|
||||
<Link href="/" className="hover:text-purple-600 transition-colors duration-200">
|
||||
<Link
|
||||
href="/"
|
||||
className="hover:text-purple-600 transition-colors duration-200"
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
|
||||
<div
|
||||
|
||||
<div
|
||||
className="relative group"
|
||||
onMouseEnter={() => setActiveMenu('features')}
|
||||
ref={menuRef}
|
||||
onMouseEnter={() => setActiveMenu("features")}
|
||||
onMouseLeave={() => setActiveMenu(null)}
|
||||
>
|
||||
<button className="flex items-center gap-1 hover:text-purple-600 transition-colors duration-200 font-semibold">
|
||||
<button
|
||||
className="flex items-center gap-1 hover:text-purple-600 transition-colors duration-200 font-semibold"
|
||||
onClick={() =>
|
||||
setActiveMenu(activeMenu === "features" ? null : "features")
|
||||
}
|
||||
>
|
||||
Features
|
||||
{activeMenu === 'features' ? (
|
||||
{activeMenu === "features" ? (
|
||||
<ChevronUp className="w-4 h-4" />
|
||||
) : (
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{activeMenu === 'features' && (
|
||||
|
||||
{activeMenu === "features" && (
|
||||
<div className="absolute left-1/2 -translate-x-1/2 top-full pt-4 w-[900px]">
|
||||
<div className="bg-white rounded-2xl shadow-2xl border border-gray-100 p-8">
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
|
|
@ -95,22 +134,25 @@ export default function Header() {
|
|||
key={idx}
|
||||
href={item.route}
|
||||
className="group/item flex items-start gap-4 p-4 rounded-xl hover:bg-gradient-to-r hover:from-purple-50 hover:to-blue-50 transition-all duration-200 border border-transparent hover:border-purple-100"
|
||||
onClick={handleMenuLinkClick}
|
||||
>
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-purple-500 to-blue-500 rounded-lg flex items-center justify-center">
|
||||
<item.icon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h4 className="font-semibold text-gray-900 group-hover/item:text-purple-600 transition-colors text-sm leading-tight">
|
||||
{item.title}
|
||||
</h4>
|
||||
{item.badge && (
|
||||
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
|
||||
item.badge === "Popular"
|
||||
? "bg-orange-100 text-orange-700"
|
||||
: "bg-green-100 text-green-700"
|
||||
}`}>
|
||||
<span
|
||||
className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
|
||||
item.badge === "Popular"
|
||||
? "bg-orange-100 text-orange-700"
|
||||
: "bg-green-100 text-green-700"
|
||||
}`}
|
||||
>
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -119,25 +161,31 @@ export default function Header() {
|
|||
{item.description}
|
||||
</p>
|
||||
<div className="flex items-center gap-1 text-purple-600 opacity-0 group-hover/item:opacity-100 transition-opacity">
|
||||
<span className="text-xs font-medium">Learn more</span>
|
||||
<span className="text-xs font-medium">
|
||||
Learn more
|
||||
</span>
|
||||
<ArrowRight className="w-3 h-3" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Link href="/#pricingSection" className="hover:text-purple-600 transition-colors duration-200">
|
||||
<Link
|
||||
href="/#pricingSection"
|
||||
className="hover:text-purple-600 transition-colors duration-200"
|
||||
>
|
||||
Pricing
|
||||
</Link>
|
||||
|
||||
<Link href="/contact" className="hover:text-purple-600 transition-colors duration-200">
|
||||
|
||||
<Link
|
||||
href="/contact"
|
||||
className="hover:text-purple-600 transition-colors duration-200"
|
||||
>
|
||||
Contact
|
||||
</Link>
|
||||
</div>
|
||||
|
|
@ -192,7 +240,9 @@ export default function Header() {
|
|||
</li>
|
||||
<li>
|
||||
<div className="space-y-4">
|
||||
<p className="text-lg font-semibold text-purple-600">Features</p>
|
||||
<p className="text-lg font-semibold text-purple-600">
|
||||
Features
|
||||
</p>
|
||||
<div className="grid gap-3 ml-2">
|
||||
{megaMenuData.map((item, idx) => (
|
||||
<Link
|
||||
|
|
@ -203,8 +253,12 @@ export default function Header() {
|
|||
>
|
||||
<item.icon className="w-5 h-5 text-purple-600 flex-shrink-0" />
|
||||
<div>
|
||||
<p className="font-medium text-sm text-gray-900">{item.title}</p>
|
||||
<p className="text-xs text-gray-600">{item.description}</p>
|
||||
<p className="font-medium text-sm text-gray-900">
|
||||
{item.title}
|
||||
</p>
|
||||
<p className="text-xs text-gray-600">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
|
|
@ -260,4 +314,4 @@ export default function Header() {
|
|||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue