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 React, { useState } from "react";
|
||||||
import {
|
import {
|
||||||
Check,
|
Check,
|
||||||
Clock,
|
Clock,
|
||||||
Zap,
|
Zap,
|
||||||
Video,
|
Image,
|
||||||
Image,
|
|
||||||
ArrowRight,
|
ArrowRight,
|
||||||
|
Video,
|
||||||
Star,
|
Star,
|
||||||
Sparkle,
|
Sparkle,
|
||||||
Rocket,
|
Rocket,
|
||||||
|
|
@ -16,16 +16,17 @@ import {
|
||||||
Building,
|
Building,
|
||||||
GraduationCap,
|
GraduationCap,
|
||||||
FileText,
|
FileText,
|
||||||
|
|
||||||
Palette,
|
Palette,
|
||||||
LucideProps
|
LucideProps,
|
||||||
} from 'lucide-react';
|
} from "lucide-react";
|
||||||
import Link from 'next/link';
|
import Link from "next/link";
|
||||||
|
|
||||||
// TypeScript Interfaces
|
// TypeScript Interfaces
|
||||||
interface Feature {
|
interface Feature {
|
||||||
id: string;
|
id: string;
|
||||||
icon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
|
icon: React.ForwardRefExoticComponent<
|
||||||
|
Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>
|
||||||
|
>;
|
||||||
title: string;
|
title: string;
|
||||||
description: string;
|
description: string;
|
||||||
highlights: string[];
|
highlights: string[];
|
||||||
|
|
@ -38,7 +39,9 @@ interface Feature {
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ProblemItem {
|
interface ProblemItem {
|
||||||
icon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
|
icon: React.ForwardRefExoticComponent<
|
||||||
|
Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>
|
||||||
|
>;
|
||||||
title: string;
|
title: string;
|
||||||
description: string;
|
description: string;
|
||||||
stat: string;
|
stat: string;
|
||||||
|
|
@ -51,7 +54,9 @@ interface StatItem {
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Industry {
|
interface Industry {
|
||||||
icon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
|
icon: React.ForwardRefExoticComponent<
|
||||||
|
Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>
|
||||||
|
>;
|
||||||
name: string;
|
name: string;
|
||||||
description: string;
|
description: string;
|
||||||
useCases: string[];
|
useCases: string[];
|
||||||
|
|
@ -64,181 +69,214 @@ interface FAQ {
|
||||||
}
|
}
|
||||||
|
|
||||||
const AIVideoGenerator: React.FC = () => {
|
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 [hoveredCard, setHoveredCard] = useState<string | null>(null);
|
||||||
|
|
||||||
const features: Feature[] = [
|
const features: Feature[] = [
|
||||||
{
|
{
|
||||||
id: 'text-to-video',
|
id: "text-to-video",
|
||||||
icon: FileText,
|
icon: FileText,
|
||||||
title: 'Text-to-Video Generation',
|
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.',
|
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: [
|
highlights: [
|
||||||
'Natural Language Understanding: The AI interprets your text and creates relevant visuals, motion, and pacing',
|
"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',
|
"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',
|
"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',
|
"Style Adaptation: Choose from cinematic, corporate, social media, educational, or custom styles",
|
||||||
'Multiple Output Options: Generate 3-5 video variations and choose your favorite'
|
"Multiple Output Options: Generate 3-5 video variations and choose your favorite",
|
||||||
],
|
],
|
||||||
examples: {
|
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',
|
input:
|
||||||
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'
|
"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',
|
gradient: "from-purple-500 to-pink-500",
|
||||||
popular: true
|
popular: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'image-to-video',
|
id: "image-to-video",
|
||||||
icon: Image,
|
icon: Image,
|
||||||
title: 'Image-to-Video Transformation',
|
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.',
|
description:
|
||||||
|
"Bring your images to life with AI-powered animation and motion. Transform static photos into engaging video content that captures attention.",
|
||||||
highlights: [
|
highlights: [
|
||||||
'Smart Image Analysis: AI detects subjects, backgrounds, and focal points to create natural motion',
|
"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',
|
"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',
|
"Batch Processing: Transform multiple images into a cohesive video story automatically",
|
||||||
'Background Enhancement: AI can replace or enhance backgrounds while keeping subjects sharp',
|
"Background Enhancement: AI can replace or enhance backgrounds while keeping subjects sharp",
|
||||||
'Slide Show to Video: Convert image collections into professional video presentations'
|
"Slide Show to Video: Convert image collections into professional video presentations",
|
||||||
],
|
],
|
||||||
examples: {
|
examples: {
|
||||||
input: 'Real estate property photos: living room, kitchen, bedroom, backyard',
|
input:
|
||||||
output: 'Smooth 45-second property tour video with panning effects, transitions between rooms, and text overlays highlighting features'
|
"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[] = [
|
const problemItems: ProblemItem[] = [
|
||||||
{
|
{
|
||||||
icon: Zap,
|
icon: Zap,
|
||||||
title: 'Prohibitively Expensive',
|
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.',
|
description:
|
||||||
stat: '$1,000-$5,000 per minute',
|
"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.",
|
||||||
color: 'red'
|
stat: "$1,000-$5,000 per minute",
|
||||||
|
color: "red",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Clock,
|
icon: Clock,
|
||||||
title: 'Time-Consuming Production',
|
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.',
|
description:
|
||||||
stat: '10-40 hours per video',
|
"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.",
|
||||||
color: 'orange'
|
stat: "10-40 hours per video",
|
||||||
|
color: "orange",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Video,
|
icon: Video,
|
||||||
title: 'Technical Skills Required',
|
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.',
|
description:
|
||||||
stat: 'Months of learning required',
|
"Learning complex editing software like Premiere Pro or After Effects takes months. Most businesses lack the in-house expertise to create professional-quality videos.",
|
||||||
color: 'purple'
|
stat: "Months of learning required",
|
||||||
|
color: "purple",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Palette,
|
icon: Palette,
|
||||||
title: 'Inconsistent Quality',
|
title: "Inconsistent Quality",
|
||||||
description: 'Amateur videos damage brand perception, while inconsistent quality across platforms confuses audiences and weakens your brand authority.',
|
description:
|
||||||
stat: 'Brand perception at risk',
|
"Amateur videos damage brand perception, while inconsistent quality across platforms confuses audiences and weakens your brand authority.",
|
||||||
color: 'blue'
|
stat: "Brand perception at risk",
|
||||||
}
|
color: "blue",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const stats: StatItem[] = [
|
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: "87%",
|
||||||
{ number: '12+', label: 'hours spent per video without AI' }
|
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[] = [
|
const industries: Industry[] = [
|
||||||
{
|
{
|
||||||
icon: Users,
|
icon: Users,
|
||||||
name: 'Social Media & Marketing',
|
name: "Social Media & Marketing",
|
||||||
description: 'Create engaging content for all social platforms with platform-optimized videos that drive engagement and conversions.',
|
description:
|
||||||
|
"Create engaging content for all social platforms with platform-optimized videos that drive engagement and conversions.",
|
||||||
useCases: [
|
useCases: [
|
||||||
'Instagram Reels & Stories',
|
"Instagram Reels & Stories",
|
||||||
'TikTok viral content',
|
"TikTok viral content",
|
||||||
'Facebook ads and posts',
|
"Facebook ads and posts",
|
||||||
'YouTube shorts and content'
|
"YouTube shorts and content",
|
||||||
],
|
],
|
||||||
results: 'Results: 300% engagement increase, 5x more content'
|
results: "Results: 300% engagement increase, 5x more content",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: ShoppingCart,
|
icon: ShoppingCart,
|
||||||
name: 'E-commerce & Retail',
|
name: "E-commerce & Retail",
|
||||||
description: 'Generate product videos, demos, and promotional content that showcases products and drives sales.',
|
description:
|
||||||
|
"Generate product videos, demos, and promotional content that showcases products and drives sales.",
|
||||||
useCases: [
|
useCases: [
|
||||||
'Product demonstration videos',
|
"Product demonstration videos",
|
||||||
'Customer testimonial videos',
|
"Customer testimonial videos",
|
||||||
'Promotional campaign videos',
|
"Promotional campaign videos",
|
||||||
'Social commerce content'
|
"Social commerce content",
|
||||||
],
|
],
|
||||||
results: 'Results: 85% higher conversion, 3.2x ROAS'
|
results: "Results: 85% higher conversion, 3.2x ROAS",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Building,
|
icon: Building,
|
||||||
name: 'Corporate & Training',
|
name: "Corporate & Training",
|
||||||
description: 'Create professional training materials, internal communications, and corporate presentations efficiently.',
|
description:
|
||||||
|
"Create professional training materials, internal communications, and corporate presentations efficiently.",
|
||||||
useCases: [
|
useCases: [
|
||||||
'Employee training videos',
|
"Employee training videos",
|
||||||
'Internal communication',
|
"Internal communication",
|
||||||
'Corporate announcements',
|
"Corporate announcements",
|
||||||
'Process documentation'
|
"Process documentation",
|
||||||
],
|
],
|
||||||
results: 'Results: 70% time savings, consistent quality'
|
results: "Results: 70% time savings, consistent quality",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: GraduationCap,
|
icon: GraduationCap,
|
||||||
name: 'Education & Courses',
|
name: "Education & Courses",
|
||||||
description: 'Develop engaging educational content, course materials, and tutorial videos that improve learning outcomes.',
|
description:
|
||||||
|
"Develop engaging educational content, course materials, and tutorial videos that improve learning outcomes.",
|
||||||
useCases: [
|
useCases: [
|
||||||
'Online course content',
|
"Online course content",
|
||||||
'Educational explainers',
|
"Educational explainers",
|
||||||
'Student engagement videos',
|
"Student engagement videos",
|
||||||
'Tutorial and how-to content'
|
"Tutorial and how-to content",
|
||||||
],
|
],
|
||||||
results: 'Results: 45% better retention, scalable content'
|
results: "Results: 45% better retention, scalable content",
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const faqs: FAQ[] = [
|
const faqs: FAQ[] = [
|
||||||
{
|
{
|
||||||
question: 'How long does it take to generate a video?',
|
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.'
|
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?',
|
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.'
|
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?',
|
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.'
|
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?',
|
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.'
|
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?',
|
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.'
|
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?',
|
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.'
|
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?',
|
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.'
|
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 => {
|
const getColorClass = (color: string): string => {
|
||||||
switch (color) {
|
switch (color) {
|
||||||
case 'red': return 'red';
|
case "red":
|
||||||
case 'orange': return 'orange';
|
return "red";
|
||||||
case 'purple': return 'purple';
|
case "orange":
|
||||||
case 'blue': return 'blue';
|
return "orange";
|
||||||
default: return 'purple';
|
case "purple":
|
||||||
|
return "purple";
|
||||||
|
case "blue":
|
||||||
|
return "blue";
|
||||||
|
default:
|
||||||
|
return "purple";
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
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 */}
|
{/* Hero Section */}
|
||||||
<section className="relative overflow-hidden">
|
<section className="relative overflow-hidden">
|
||||||
<div className="absolute inset-0">
|
<div className="absolute inset-0">
|
||||||
|
|
@ -252,37 +290,43 @@ const AIVideoGenerator: React.FC = () => {
|
||||||
<Sparkle className="w-4 h-4" />
|
<Sparkle className="w-4 h-4" />
|
||||||
<span>AI Video Generator</span>
|
<span>AI Video Generator</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 className="text-5xl md:text-7xl font-bold text-black mb-6 leading-tight">
|
<h1 className="text-5xl md:text-7xl font-bold text-black mb-6 leading-tight">
|
||||||
AI Video Generator:
|
AI Video Generator:
|
||||||
<span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
|
<span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
|
||||||
Create Professional Videos from Text & Images
|
Create Professional Videos from Text & Images
|
||||||
</span>
|
</span>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<p className="text-xl md:text-2xl text-black/80 mb-8 max-w-4xl mx-auto leading-relaxed">
|
<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.
|
Transform text and images into engaging, professional-quality
|
||||||
Save 80% on video production costs and create video content 10x faster with AI.
|
videos in minutes. Save 80% on video production costs and create
|
||||||
|
video content 10x faster with AI.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
|
<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">
|
<Link href={"https://dashboard.planpostai.com/video-generation"}>
|
||||||
<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>
|
<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">
|
||||||
<Rocket className="w-6 h-6 relative z-10" />
|
<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>
|
||||||
<span className="relative z-10">Start Your Free Trial</span>
|
<Rocket className="w-6 h-6 relative z-10" />
|
||||||
<ArrowRight className="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform" />
|
<span className="relative z-10">Start Your Free Trial</span>
|
||||||
</button></Link>
|
<ArrowRight className="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform" />
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center justify-center space-x-4 text-black/80 mb-8">
|
<div className="flex items-center justify-center space-x-4 text-black/80 mb-8">
|
||||||
<div className="flex items-center space-x-1">
|
<div className="flex items-center space-x-1">
|
||||||
{[...Array(5)].map((_, i) => (
|
{[...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>
|
</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>
|
</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">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
|
||||||
{problemItems.map((item: ProblemItem, index: number) => (
|
{problemItems.map((item: ProblemItem, index: number) => (
|
||||||
<div
|
<div
|
||||||
key={index}
|
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"
|
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`}>
|
<div
|
||||||
<item.icon className={`w-7 h-7 text-${getColorClass(item.color)}-600`} />
|
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>
|
</div>
|
||||||
<h3 className="text-xl font-bold text-black mb-4">{item.title}</h3>
|
<h3 className="text-xl font-bold text-black mb-4">
|
||||||
<p className="text-black/80 mb-4 leading-relaxed">{item.description}</p>
|
{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">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
@ -321,8 +377,13 @@ const AIVideoGenerator: React.FC = () => {
|
||||||
{/* Stats */}
|
{/* Stats */}
|
||||||
<div className="grid md:grid-cols-3 gap-8 text-center mb-12">
|
<div className="grid md:grid-cols-3 gap-8 text-center mb-12">
|
||||||
{stats.map((stat: StatItem, index: number) => (
|
{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
|
||||||
<div className="text-3xl font-bold text-purple-600 mb-2">{stat.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 className="text-gray-600 text-sm">{stat.label}</div>
|
<div className="text-gray-600 text-sm">{stat.label}</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
@ -331,7 +392,8 @@ const AIVideoGenerator: React.FC = () => {
|
||||||
<div className="text-center">
|
<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">
|
<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">
|
<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>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -339,7 +401,12 @@ const AIVideoGenerator: React.FC = () => {
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* AI Solution 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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="text-center mb-16">
|
<div className="text-center mb-16">
|
||||||
<h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
|
<h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
|
||||||
|
|
@ -349,8 +416,9 @@ const AIVideoGenerator: React.FC = () => {
|
||||||
</span>
|
</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-xl text-black/80 max-w-3xl mx-auto">
|
<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,
|
PlanPost AI transforms how businesses create video content. From
|
||||||
generate professional videos that engage audiences and drive results.
|
simple text descriptions or existing images, generate professional
|
||||||
|
videos that engage audiences and drive results.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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">
|
<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]" />
|
<Rocket className="w-6 h-6 text-[#6a47ed]" />
|
||||||
</div>
|
</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">
|
<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>
|
</p>
|
||||||
</div>
|
</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">
|
<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]" />
|
<Palette className="w-6 h-6 text-[#ff4ca5]" />
|
||||||
</div>
|
</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">
|
<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>
|
</p>
|
||||||
</div>
|
</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">
|
<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]" />
|
<Video className="w-6 h-6 text-[#6a47ed]" />
|
||||||
</div>
|
</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">
|
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -410,23 +487,29 @@ const AIVideoGenerator: React.FC = () => {
|
||||||
onMouseLeave={() => setHoveredCard(null)}
|
onMouseLeave={() => setHoveredCard(null)}
|
||||||
className={`p-6 rounded-2xl text-left transition-all duration-300 backdrop-blur-sm border-2 ${
|
className={`p-6 rounded-2xl text-left transition-all duration-300 backdrop-blur-sm border-2 ${
|
||||||
activeFeature === feature.id
|
activeFeature === feature.id
|
||||||
? 'bg-white shadow-xl border-[#6a47ed] transform scale-105'
|
? "bg-white shadow-xl border-[#6a47ed] transform scale-105"
|
||||||
: hoveredCard === feature.id
|
: hoveredCard === feature.id
|
||||||
? 'bg-white/80 shadow-lg border-white/40 transform scale-102'
|
? "bg-white/80 shadow-lg border-white/40 transform scale-102"
|
||||||
: 'bg-white/50 border-white/20'
|
: "bg-white/50 border-white/20"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className="flex items-start justify-between mb-4">
|
<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" />
|
<feature.icon className="w-6 h-6 text-white" />
|
||||||
</div>
|
</div>
|
||||||
{feature.popular && (
|
{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>
|
</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">
|
<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>
|
</p>
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
|
|
@ -437,30 +520,41 @@ const AIVideoGenerator: React.FC = () => {
|
||||||
<div
|
<div
|
||||||
key={feature.id}
|
key={feature.id}
|
||||||
className={`bg-white/80 backdrop-blur-sm rounded-3xl shadow-2xl border border-white/20 p-8 transition-all duration-500 ${
|
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 className="grid grid-cols-1 xl:grid-cols-2 gap-12">
|
||||||
<div>
|
<div>
|
||||||
<div className="flex items-center space-x-4 mb-6">
|
<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" />
|
<feature.icon className="w-7 h-7 text-white" />
|
||||||
</div>
|
</div>
|
||||||
<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>
|
<p className="text-black/70">{feature.description}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
{feature.highlights.map((highlight: string, index: number) => (
|
{feature.highlights.map(
|
||||||
<div key={index} className="flex items-start space-x-4 p-4 bg-white/50 rounded-xl border border-white/30">
|
(highlight: string, index: number) => (
|
||||||
<div className="w-6 h-6 bg-[#6a47ed]/10 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
|
<div
|
||||||
<Check className="w-4 h-4 text-[#6a47ed]" />
|
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>
|
</div>
|
||||||
<span className="text-black/80 leading-relaxed">{highlight}</span>
|
)
|
||||||
</div>
|
)}
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -468,25 +562,35 @@ const AIVideoGenerator: React.FC = () => {
|
||||||
{feature.examples && (
|
{feature.examples && (
|
||||||
<div className="bg-gradient-to-br from-[#6a47ed]/5 to-[#ff4ca5]/5 rounded-2xl p-6 border border-[#6a47ed]/10">
|
<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">
|
<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>
|
</h4>
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<div className="flex items-center space-x-2 mb-2">
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
<div className="w-3 h-3 bg-[#6a47ed] rounded-full"></div>
|
<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>
|
||||||
<div className="bg-white/60 rounded-xl p-4 border border-white/30">
|
<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>
|
||||||
<div>
|
<div>
|
||||||
<div className="flex items-center space-x-2 mb-2">
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
<div className="w-3 h-3 bg-[#ff4ca5] rounded-full"></div>
|
<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>
|
||||||
<div className="bg-white/60 rounded-xl p-4 border border-white/30">
|
<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>
|
</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">
|
<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="grid grid-cols-2 gap-4">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div className="text-2xl font-bold text-[#6a47ed]">4K</div>
|
<div className="text-2xl font-bold text-[#6a47ed]">
|
||||||
<div className="text-sm text-black/70">Maximum Resolution</div>
|
4K
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-black/70">
|
||||||
|
Maximum Resolution
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div className="text-2xl font-bold text-[#6a47ed]">1-3 min</div>
|
<div className="text-2xl font-bold text-[#6a47ed]">
|
||||||
<div className="text-sm text-black/70">Generation Time</div>
|
1-3 min
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-black/70">
|
||||||
|
Generation Time
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div className="text-2xl font-bold text-[#6a47ed]">15s-10m</div>
|
<div className="text-2xl font-bold text-[#6a47ed]">
|
||||||
<div className="text-sm text-black/70">Video Length</div>
|
15s-10m
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-black/70">
|
||||||
|
Video Length
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div className="text-2xl font-bold text-[#6a47ed]">5</div>
|
<div className="text-2xl font-bold text-[#6a47ed]">
|
||||||
<div className="text-sm text-black/70">Style Options</div>
|
5
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-black/70">
|
||||||
|
Style Options
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -522,7 +644,12 @@ const AIVideoGenerator: React.FC = () => {
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Industries 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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="text-center mb-16">
|
<div className="text-center mb-16">
|
||||||
<h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
|
<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">
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
{industries.map((industry: Industry, index: number) => (
|
{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">
|
<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" />
|
<industry.icon className="w-7 h-7 text-purple-600" />
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-2xl font-bold text-black mb-4">{industry.name}</h3>
|
<h3 className="text-2xl font-bold text-black mb-4">
|
||||||
<p className="text-black/80 mb-6 leading-relaxed">{industry.description}</p>
|
{industry.name}
|
||||||
|
</h3>
|
||||||
|
<p className="text-black/80 mb-6 leading-relaxed">
|
||||||
|
{industry.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
<div className="space-y-2 mb-6">
|
<div className="space-y-2 mb-6">
|
||||||
{industry.useCases.map((useCase: string, idx: number) => (
|
{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" />
|
<Check className="w-4 h-4 text-green-500" />
|
||||||
{useCase}
|
{useCase}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -552,7 +689,9 @@ const AIVideoGenerator: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-purple-50 p-4 rounded-2xl border border-purple-200">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
@ -576,29 +715,36 @@ const AIVideoGenerator: React.FC = () => {
|
||||||
{[
|
{[
|
||||||
{
|
{
|
||||||
step: 1,
|
step: 1,
|
||||||
title: 'Describe Your Video',
|
title: "Describe Your Video",
|
||||||
description: 'Enter your text prompt or upload images. Specify style, duration, and platform preferences.',
|
description:
|
||||||
content: '[Text input interface with style options]'
|
"Enter your text prompt or upload images. Specify style, duration, and platform preferences.",
|
||||||
|
content: "[Text input interface with style options]",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
step: 2,
|
step: 2,
|
||||||
title: 'AI Generates Your Video',
|
title: "AI Generates Your Video",
|
||||||
description: 'Our AI creates multiple video versions with professional editing, motion graphics, and sound.',
|
description:
|
||||||
content: '[AI generation progress indicator]'
|
"Our AI creates multiple video versions with professional editing, motion graphics, and sound.",
|
||||||
|
content: "[AI generation progress indicator]",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
step: 3,
|
step: 3,
|
||||||
title: 'Customize & Publish',
|
title: "Customize & Publish",
|
||||||
description: 'Review, make quick edits if needed, and publish directly to your platforms or download.',
|
description:
|
||||||
content: '[Video editor with publishing options]'
|
"Review, make quick edits if needed, and publish directly to your platforms or download.",
|
||||||
}
|
content: "[Video editor with publishing options]",
|
||||||
|
},
|
||||||
].map((item, index) => (
|
].map((item, index) => (
|
||||||
<div key={index} className="text-center">
|
<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">
|
<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}
|
{item.step}
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-xl font-bold text-black mb-4">{item.title}</h3>
|
<h3 className="text-xl font-bold text-black mb-4">
|
||||||
<p className="text-black/80 mb-4 leading-relaxed">{item.description}</p>
|
{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">
|
<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>
|
<span className="text-black/50 text-sm">{item.content}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -608,17 +754,25 @@ const AIVideoGenerator: React.FC = () => {
|
||||||
|
|
||||||
<div className="text-center mt-12">
|
<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">
|
<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>
|
</button>
|
||||||
<p className="text-black/70 text-sm mt-4">
|
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* FAQ 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="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="text-center mb-16">
|
<div className="text-center mb-16">
|
||||||
<h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
|
<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">
|
<div className="space-y-6">
|
||||||
{faqs.map((faq: FAQ, index: number) => (
|
{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">
|
<div
|
||||||
<h3 className="text-lg font-bold text-black mb-3">{faq.question}</h3>
|
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>
|
<p className="text-black/80 leading-relaxed">{faq.answer}</p>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
@ -652,19 +811,33 @@ const AIVideoGenerator: React.FC = () => {
|
||||||
Start Creating Professional Videos
|
Start Creating Professional Videos
|
||||||
<span className="block">in Minutes, Not Days</span>
|
<span className="block">in Minutes, Not Days</span>
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<p className="text-xl text-white/90 mb-8">
|
<p className="text-xl text-white/90 mb-8">
|
||||||
Join 3,500+ businesses creating stunning video content with AI
|
Join 3,500+ businesses creating stunning video content with AI
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
<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: "80% Cost Savings",
|
||||||
{ title: 'No Skills Required', desc: 'Create studio-quality videos without any technical expertise' }
|
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) => (
|
].map((item, index) => (
|
||||||
<div key={index} className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
|
<div
|
||||||
<h3 className="text-lg font-bold text-white mb-2">{item.title}</h3>
|
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>
|
<p className="text-white/80 text-sm">{item.desc}</p>
|
||||||
</div>
|
</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">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto mb-8">
|
||||||
{[
|
{[
|
||||||
'Create videos from text descriptions',
|
"Create videos from text descriptions",
|
||||||
'Transform images into engaging videos',
|
"Transform images into engaging videos",
|
||||||
'4K broadcast-quality output',
|
"4K broadcast-quality output",
|
||||||
'Platform-optimized for all social media',
|
"Platform-optimized for all social media",
|
||||||
'Full commercial rights included'
|
"Full commercial rights included",
|
||||||
].map((benefit: string, index: number) => (
|
].map((benefit: string, index: number) => (
|
||||||
<div key={index} className="flex items-center gap-3 text-white">
|
<div key={index} className="flex items-center gap-3 text-white">
|
||||||
<Check className="w-5 h-5 text-green-300" />
|
<Check className="w-5 h-5 text-green-300" />
|
||||||
|
|
@ -686,11 +859,14 @@ const AIVideoGenerator: React.FC = () => {
|
||||||
</div>
|
</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">
|
<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>
|
</button>
|
||||||
|
|
||||||
<p className="text-white/80 text-sm">
|
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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";
|
"use client";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import Image from "next/image";
|
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 { Sheet, SheetContent, SheetTitle, SheetTrigger } from "./ui/sheet";
|
||||||
import { useState } from "react";
|
import { useState, useRef, useEffect } from "react";
|
||||||
|
|
||||||
const megaMenuData = [
|
const megaMenuData = [
|
||||||
{
|
{
|
||||||
|
|
@ -11,50 +22,69 @@ const megaMenuData = [
|
||||||
title: "AI Social Media Content Generator",
|
title: "AI Social Media Content Generator",
|
||||||
description: "Create stunning social media posts in minutes",
|
description: "Create stunning social media posts in minutes",
|
||||||
route: "/ai-content-generator",
|
route: "/ai-content-generator",
|
||||||
badge: "Popular"
|
badge: "Popular",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Palette,
|
icon: Palette,
|
||||||
title: "AI Image Generator",
|
title: "AI Image Generator",
|
||||||
description: "Craft eye-catching thumbnails instantly",
|
description: "Craft eye-catching thumbnails instantly",
|
||||||
route: "/ai-image-generator",
|
route: "/ai-image-generator",
|
||||||
badge: "New"
|
badge: "New",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: TrendingUp,
|
icon: TrendingUp,
|
||||||
title: "AI-Powered Meta Ads Optimization",
|
title: "AI-Powered Meta Ads Optimization",
|
||||||
description: "Create high-converting ads in seconds",
|
description: "Create high-converting ads in seconds",
|
||||||
route: "/ai-meta-ads-optimization"
|
route: "/ai-meta-ads-optimization",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: FileText,
|
icon: FileText,
|
||||||
title: "SEO Geo Article Writer",
|
title: "SEO Geo Article Writer",
|
||||||
description: "Location-optimized content that ranks",
|
description: "Location-optimized content that ranks",
|
||||||
route: "/seo-geo-article-writer"
|
route: "/seo-geo-article-writer",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Video,
|
icon: Video,
|
||||||
title: "AI Video Generator",
|
title: "AI Video Generator",
|
||||||
description: "Turn text into engaging videos automatically",
|
description: "Turn text into engaging videos automatically",
|
||||||
route: "/ai-video-generator"
|
route: "/ai-video-generator",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Zap,
|
icon: Zap,
|
||||||
title: "AI Bulk Content",
|
title: "AI Bulk Content",
|
||||||
description: "SEO-optimized articles that drive traffic",
|
description: "SEO-optimized articles that drive traffic",
|
||||||
route: "/bulk-content"
|
route: "/bulk-content",
|
||||||
}
|
},
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function Header() {
|
export default function Header() {
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const [activeMenu, setActiveMenu] = useState<string | null>(null);
|
const [activeMenu, setActiveMenu] = useState<string | null>(null);
|
||||||
|
const menuRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
setIsOpen(false);
|
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 (
|
return (
|
||||||
<nav className="flex items-center justify-between pr-4 absolute z-50 w-full">
|
<nav className="flex items-center justify-between pr-4 absolute z-50 w-full">
|
||||||
<Link href="/">
|
<Link href="/">
|
||||||
|
|
@ -68,25 +98,34 @@ export default function Header() {
|
||||||
|
|
||||||
{/* Desktop Menu */}
|
{/* 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">
|
<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
|
Home
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="relative group"
|
className="relative group"
|
||||||
onMouseEnter={() => setActiveMenu('features')}
|
ref={menuRef}
|
||||||
|
onMouseEnter={() => setActiveMenu("features")}
|
||||||
onMouseLeave={() => setActiveMenu(null)}
|
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
|
Features
|
||||||
{activeMenu === 'features' ? (
|
{activeMenu === "features" ? (
|
||||||
<ChevronUp className="w-4 h-4" />
|
<ChevronUp className="w-4 h-4" />
|
||||||
) : (
|
) : (
|
||||||
<ChevronDown className="w-4 h-4" />
|
<ChevronDown className="w-4 h-4" />
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{activeMenu === 'features' && (
|
{activeMenu === "features" && (
|
||||||
<div className="absolute left-1/2 -translate-x-1/2 top-full pt-4 w-[900px]">
|
<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="bg-white rounded-2xl shadow-2xl border border-gray-100 p-8">
|
||||||
<div className="grid grid-cols-3 gap-6">
|
<div className="grid grid-cols-3 gap-6">
|
||||||
|
|
@ -95,22 +134,25 @@ export default function Header() {
|
||||||
key={idx}
|
key={idx}
|
||||||
href={item.route}
|
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"
|
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">
|
<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" />
|
<item.icon className="w-6 h-6 text-white" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<div className="flex items-center gap-2 mb-1">
|
<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">
|
<h4 className="font-semibold text-gray-900 group-hover/item:text-purple-600 transition-colors text-sm leading-tight">
|
||||||
{item.title}
|
{item.title}
|
||||||
</h4>
|
</h4>
|
||||||
{item.badge && (
|
{item.badge && (
|
||||||
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
|
<span
|
||||||
item.badge === "Popular"
|
className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
|
||||||
? "bg-orange-100 text-orange-700"
|
item.badge === "Popular"
|
||||||
: "bg-green-100 text-green-700"
|
? "bg-orange-100 text-orange-700"
|
||||||
}`}>
|
: "bg-green-100 text-green-700"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
{item.badge}
|
{item.badge}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
|
@ -119,25 +161,31 @@ export default function Header() {
|
||||||
{item.description}
|
{item.description}
|
||||||
</p>
|
</p>
|
||||||
<div className="flex items-center gap-1 text-purple-600 opacity-0 group-hover/item:opacity-100 transition-opacity">
|
<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" />
|
<ArrowRight className="w-3 h-3" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</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
|
Pricing
|
||||||
</Link>
|
</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
|
Contact
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -192,7 +240,9 @@ export default function Header() {
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<div className="space-y-4">
|
<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">
|
<div className="grid gap-3 ml-2">
|
||||||
{megaMenuData.map((item, idx) => (
|
{megaMenuData.map((item, idx) => (
|
||||||
<Link
|
<Link
|
||||||
|
|
@ -203,8 +253,12 @@ export default function Header() {
|
||||||
>
|
>
|
||||||
<item.icon className="w-5 h-5 text-purple-600 flex-shrink-0" />
|
<item.icon className="w-5 h-5 text-purple-600 flex-shrink-0" />
|
||||||
<div>
|
<div>
|
||||||
<p className="font-medium text-sm text-gray-900">{item.title}</p>
|
<p className="font-medium text-sm text-gray-900">
|
||||||
<p className="text-xs text-gray-600">{item.description}</p>
|
{item.title}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-gray-600">
|
||||||
|
{item.description}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
|
|
@ -260,4 +314,4 @@ export default function Header() {
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue