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">
|
||||||
|
|
@ -261,28 +299,34 @@ const AIVideoGenerator: React.FC = () => {
|
||||||
</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>
|
||||||
|
|
@ -306,13 +350,25 @@ const AIVideoGenerator: React.FC = () => {
|
||||||
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>
|
||||||
))}
|
))}
|
||||||
|
|
@ -659,12 +818,26 @@ const AIVideoGenerator: React.FC = () => {
|
||||||
|
|
||||||
<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>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
'use client'
|
"use client";
|
||||||
|
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from "react";
|
||||||
import {
|
import {
|
||||||
Check,
|
Check,
|
||||||
Clock,
|
Clock,
|
||||||
|
|
@ -9,26 +9,25 @@ import {
|
||||||
ArrowRight,
|
ArrowRight,
|
||||||
Star,
|
Star,
|
||||||
Quote,
|
Quote,
|
||||||
|
|
||||||
Sparkle,
|
Sparkle,
|
||||||
Rocket,
|
Rocket,
|
||||||
|
|
||||||
Globe,
|
Globe,
|
||||||
FileText,
|
FileText,
|
||||||
Building,
|
Building,
|
||||||
ShoppingCart,
|
ShoppingCart,
|
||||||
|
|
||||||
Zap,
|
Zap,
|
||||||
Users,
|
Users,
|
||||||
BarChart3,
|
BarChart3,
|
||||||
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[];
|
||||||
|
|
@ -42,7 +41,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;
|
||||||
|
|
@ -55,7 +56,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[];
|
||||||
|
|
@ -68,203 +71,230 @@ interface FAQ {
|
||||||
}
|
}
|
||||||
|
|
||||||
const BulkGeneration: React.FC = () => {
|
const BulkGeneration: React.FC = () => {
|
||||||
const [activeFeature, setActiveFeature] = useState<string>('bulk-content');
|
const [activeFeature, setActiveFeature] = useState<string>("bulk-content");
|
||||||
const [hoveredCard, setHoveredCard] = useState<string | null>(null);
|
const [hoveredCard, setHoveredCard] = useState<string | null>(null);
|
||||||
|
|
||||||
const features: Feature[] = [
|
const features: Feature[] = [
|
||||||
{
|
{
|
||||||
id: 'bulk-content',
|
id: "bulk-content",
|
||||||
icon: Zap,
|
icon: Zap,
|
||||||
title: 'Bulk Content Generation',
|
title: "Bulk Content Generation",
|
||||||
description: 'Generate hundreds of social media posts, blog articles, or product descriptions in one click. Perfect for content scaling and multi-platform campaigns.',
|
description:
|
||||||
|
"Generate hundreds of social media posts, blog articles, or product descriptions in one click. Perfect for content scaling and multi-platform campaigns.",
|
||||||
highlights: [
|
highlights: [
|
||||||
'Massive Content Scaling: Create 100+ pieces of content simultaneously',
|
"Massive Content Scaling: Create 100+ pieces of content simultaneously",
|
||||||
'Multi-Platform Adaptation: Auto-format for Instagram, Facebook, Twitter, LinkedIn',
|
"Multi-Platform Adaptation: Auto-format for Instagram, Facebook, Twitter, LinkedIn",
|
||||||
'Batch Processing: Upload CSV files or product catalogs for bulk generation',
|
"Batch Processing: Upload CSV files or product catalogs for bulk generation",
|
||||||
'Consistent Brand Voice: Maintain uniform tone across all generated content',
|
"Consistent Brand Voice: Maintain uniform tone across all generated content",
|
||||||
'Template Library: Save and reuse successful content templates'
|
"Template Library: Save and reuse successful content templates",
|
||||||
],
|
],
|
||||||
examples: {
|
examples: {
|
||||||
input: '50 product descriptions for fashion catalog',
|
input: "50 product descriptions for fashion catalog",
|
||||||
output: '50 unique, SEO-optimized product descriptions with consistent brand voice and style'
|
output:
|
||||||
|
"50 unique, SEO-optimized product descriptions with consistent brand voice and style",
|
||||||
},
|
},
|
||||||
gradient: 'from-purple-500 to-pink-500',
|
gradient: "from-purple-500 to-pink-500",
|
||||||
popular: true
|
popular: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'campaign-scaling',
|
id: "campaign-scaling",
|
||||||
icon: TrendingUp,
|
icon: TrendingUp,
|
||||||
title: 'Campaign Scaling Engine',
|
title: "Campaign Scaling Engine",
|
||||||
description: 'Launch complete marketing campaigns across multiple platforms with coordinated messaging and scheduling.',
|
description:
|
||||||
|
"Launch complete marketing campaigns across multiple platforms with coordinated messaging and scheduling.",
|
||||||
highlights: [
|
highlights: [
|
||||||
'Cross-Platform Campaigns: Coordinate messaging across all social channels',
|
"Cross-Platform Campaigns: Coordinate messaging across all social channels",
|
||||||
'Automated Scheduling: Plan and schedule entire campaigns in one workflow',
|
"Automated Scheduling: Plan and schedule entire campaigns in one workflow",
|
||||||
'Performance Optimization: Scale winning content and pause underperformers',
|
"Performance Optimization: Scale winning content and pause underperformers",
|
||||||
'A/B Testing at Scale: Test hundreds of variations simultaneously',
|
"A/B Testing at Scale: Test hundreds of variations simultaneously",
|
||||||
'Campaign Templates: Save and replicate successful campaign structures'
|
"Campaign Templates: Save and replicate successful campaign structures",
|
||||||
],
|
],
|
||||||
examples: {
|
examples: {
|
||||||
metrics: [
|
metrics: [
|
||||||
'5x Faster Campaign Launch',
|
"5x Faster Campaign Launch",
|
||||||
'200+ Content Variations',
|
"200+ Content Variations",
|
||||||
'87% Time Savings',
|
"87% Time Savings",
|
||||||
'3.2x Higher Engagement'
|
"3.2x Higher Engagement",
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
gradient: 'from-blue-500 to-cyan-500'
|
gradient: "from-blue-500 to-cyan-500",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'enterprise-workflows',
|
id: "enterprise-workflows",
|
||||||
icon: Users,
|
icon: Users,
|
||||||
title: 'Enterprise Workflow Management',
|
title: "Enterprise Workflow Management",
|
||||||
description: 'Manage large content teams with approval workflows, collaboration tools, and enterprise-grade security.',
|
description:
|
||||||
|
"Manage large content teams with approval workflows, collaboration tools, and enterprise-grade security.",
|
||||||
highlights: [
|
highlights: [
|
||||||
'Team Collaboration: Multiple users with role-based permissions',
|
"Team Collaboration: Multiple users with role-based permissions",
|
||||||
'Approval Workflows: Custom review and approval processes',
|
"Approval Workflows: Custom review and approval processes",
|
||||||
'Content Calendar Sync: Enterprise calendar management',
|
"Content Calendar Sync: Enterprise calendar management",
|
||||||
'Brand Compliance: Automatic brand guideline enforcement',
|
"Brand Compliance: Automatic brand guideline enforcement",
|
||||||
'Analytics Dashboard: Team performance and content metrics'
|
"Analytics Dashboard: Team performance and content metrics",
|
||||||
],
|
],
|
||||||
examples: {
|
examples: {
|
||||||
metrics: [
|
metrics: [
|
||||||
'75% Faster Team Onboarding',
|
"75% Faster Team Onboarding",
|
||||||
'90% Reduction in Review Cycles',
|
"90% Reduction in Review Cycles",
|
||||||
'Enterprise-Grade Security',
|
"Enterprise-Grade Security",
|
||||||
'Unlimited Team Members'
|
"Unlimited Team Members",
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
gradient: 'from-green-500 to-emerald-500'
|
gradient: "from-green-500 to-emerald-500",
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const problemItems: ProblemItem[] = [
|
const problemItems: ProblemItem[] = [
|
||||||
{
|
{
|
||||||
icon: Clock,
|
icon: Clock,
|
||||||
title: 'Manual Content Bottlenecks',
|
title: "Manual Content Bottlenecks",
|
||||||
description: 'Creating content one piece at a time creates massive bottlenecks. Scaling from 10 to 100 posts means 10x the work, not 10x the results.',
|
description:
|
||||||
stat: '10x workload for 10x output',
|
"Creating content one piece at a time creates massive bottlenecks. Scaling from 10 to 100 posts means 10x the work, not 10x the results.",
|
||||||
color: 'purple'
|
stat: "10x workload for 10x output",
|
||||||
|
color: "purple",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Target,
|
icon: Target,
|
||||||
title: 'Inconsistent Campaign Execution',
|
title: "Inconsistent Campaign Execution",
|
||||||
description: 'Launching coordinated campaigns across multiple platforms manually leads to inconsistent messaging and missed opportunities.',
|
description:
|
||||||
stat: '42% campaign inconsistency',
|
"Launching coordinated campaigns across multiple platforms manually leads to inconsistent messaging and missed opportunities.",
|
||||||
color: 'blue'
|
stat: "42% campaign inconsistency",
|
||||||
|
color: "blue",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: BarChart3,
|
icon: BarChart3,
|
||||||
title: 'Team Coordination Challenges',
|
title: "Team Coordination Challenges",
|
||||||
description: 'Managing large content teams creates coordination overhead, approval bottlenecks, and brand consistency issues.',
|
description:
|
||||||
stat: '67% team efficiency loss',
|
"Managing large content teams creates coordination overhead, approval bottlenecks, and brand consistency issues.",
|
||||||
color: 'orange'
|
stat: "67% team efficiency loss",
|
||||||
|
color: "orange",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: FileText,
|
icon: FileText,
|
||||||
title: 'Scale Limitations',
|
title: "Scale Limitations",
|
||||||
description: 'Traditional content creation methods hit hard limits when trying to scale beyond basic social media management.',
|
description:
|
||||||
stat: 'Limited scaling capacity',
|
"Traditional content creation methods hit hard limits when trying to scale beyond basic social media management.",
|
||||||
color: 'red'
|
stat: "Limited scaling capacity",
|
||||||
}
|
color: "red",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const stats: StatItem[] = [
|
const stats: StatItem[] = [
|
||||||
{ number: '10x', label: 'faster content production' },
|
{ number: "10x", label: "faster content production" },
|
||||||
{ number: '200+', label: 'pieces generated simultaneously' },
|
{ number: "200+", label: "pieces generated simultaneously" },
|
||||||
{ number: '87%', label: 'reduction in team coordination time' }
|
{ number: "87%", label: "reduction in team coordination time" },
|
||||||
];
|
];
|
||||||
|
|
||||||
const industries: Industry[] = [
|
const industries: Industry[] = [
|
||||||
{
|
{
|
||||||
icon: Building,
|
icon: Building,
|
||||||
name: 'Enterprise Marketing',
|
name: "Enterprise Marketing",
|
||||||
description: 'Scale content production across large organizations with multiple teams and strict brand guidelines.',
|
description:
|
||||||
|
"Scale content production across large organizations with multiple teams and strict brand guidelines.",
|
||||||
useCases: [
|
useCases: [
|
||||||
'Global campaign management',
|
"Global campaign management",
|
||||||
'Multi-team collaboration',
|
"Multi-team collaboration",
|
||||||
'Brand compliance at scale',
|
"Brand compliance at scale",
|
||||||
'Enterprise security'
|
"Enterprise security",
|
||||||
],
|
],
|
||||||
results: 'Results: 10x content output, 75% faster campaigns'
|
results: "Results: 10x content output, 75% faster campaigns",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: ShoppingCart,
|
icon: ShoppingCart,
|
||||||
name: 'E-commerce Platforms',
|
name: "E-commerce Platforms",
|
||||||
description: 'Generate thousands of product descriptions, social posts, and email campaigns simultaneously.',
|
description:
|
||||||
|
"Generate thousands of product descriptions, social posts, and email campaigns simultaneously.",
|
||||||
useCases: [
|
useCases: [
|
||||||
'Product catalog scaling',
|
"Product catalog scaling",
|
||||||
'Seasonal campaign launches',
|
"Seasonal campaign launches",
|
||||||
'Multi-platform product launches',
|
"Multi-platform product launches",
|
||||||
'Inventory-based content'
|
"Inventory-based content",
|
||||||
],
|
],
|
||||||
results: 'Results: 200+ products daily, 3.2x conversion rate'
|
results: "Results: 200+ products daily, 3.2x conversion rate",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Users,
|
icon: Users,
|
||||||
name: 'Marketing Agencies',
|
name: "Marketing Agencies",
|
||||||
description: 'Manage multiple client accounts with bulk content generation and team collaboration features.',
|
description:
|
||||||
|
"Manage multiple client accounts with bulk content generation and team collaboration features.",
|
||||||
useCases: [
|
useCases: [
|
||||||
'Client content scaling',
|
"Client content scaling",
|
||||||
'Team workflow management',
|
"Team workflow management",
|
||||||
'Campaign coordination',
|
"Campaign coordination",
|
||||||
'Performance analytics'
|
"Performance analytics",
|
||||||
],
|
],
|
||||||
results: 'Results: 5x client capacity, 87% time savings'
|
results: "Results: 5x client capacity, 87% time savings",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Globe,
|
icon: Globe,
|
||||||
name: 'Global Brands',
|
name: "Global Brands",
|
||||||
description: 'Coordinate international campaigns with localized content across multiple regions and languages.',
|
description:
|
||||||
|
"Coordinate international campaigns with localized content across multiple regions and languages.",
|
||||||
useCases: [
|
useCases: [
|
||||||
'Multi-region campaigns',
|
"Multi-region campaigns",
|
||||||
'Localized content scaling',
|
"Localized content scaling",
|
||||||
'International team coordination',
|
"International team coordination",
|
||||||
'Global brand consistency'
|
"Global brand consistency",
|
||||||
],
|
],
|
||||||
results: 'Results: 15 regions managed, 95% brand consistency'
|
results: "Results: 15 regions managed, 95% brand consistency",
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const faqs: FAQ[] = [
|
const faqs: FAQ[] = [
|
||||||
{
|
{
|
||||||
question: 'How many pieces of content can I generate at once?',
|
question: "How many pieces of content can I generate at once?",
|
||||||
answer: 'Our enterprise plan supports generating up to 1,000 pieces of content simultaneously. You can upload CSV files, product catalogs, or use our template system to create massive content batches in minutes instead of months.'
|
answer:
|
||||||
|
"Our enterprise plan supports generating up to 1,000 pieces of content simultaneously. You can upload CSV files, product catalogs, or use our template system to create massive content batches in minutes instead of months.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
question: 'Can I maintain brand consistency with bulk generation?',
|
question: "Can I maintain brand consistency with bulk generation?",
|
||||||
answer: 'Absolutely. Our AI learns your brand guidelines and applies them consistently across all generated content. You can set up brand voice templates, style guides, and approval workflows to ensure every piece meets your standards.'
|
answer:
|
||||||
|
"Absolutely. Our AI learns your brand guidelines and applies them consistently across all generated content. You can set up brand voice templates, style guides, and approval workflows to ensure every piece meets your standards.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
question: 'How does team collaboration work?',
|
question: "How does team collaboration work?",
|
||||||
answer: 'You can invite unlimited team members with custom permissions. Set up approval workflows, assign content tasks, track progress, and maintain complete visibility across your entire content production pipeline.'
|
answer:
|
||||||
|
"You can invite unlimited team members with custom permissions. Set up approval workflows, assign content tasks, track progress, and maintain complete visibility across your entire content production pipeline.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
question: 'Can I integrate with our existing tools?',
|
question: "Can I integrate with our existing tools?",
|
||||||
answer: 'Yes! We offer API access and integrations with popular CMS platforms, social media schedulers, project management tools, and enterprise systems. Our platform is designed to fit into your existing workflow.'
|
answer:
|
||||||
|
"Yes! We offer API access and integrations with popular CMS platforms, social media schedulers, project management tools, and enterprise systems. Our platform is designed to fit into your existing workflow.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
question: 'What about content quality at scale?',
|
question: "What about content quality at scale?",
|
||||||
answer: 'Our AI maintains consistent quality standards through advanced quality control algorithms. Every piece goes through multiple quality checks, and you can set up custom quality thresholds and review processes.'
|
answer:
|
||||||
|
"Our AI maintains consistent quality standards through advanced quality control algorithms. Every piece goes through multiple quality checks, and you can set up custom quality thresholds and review processes.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
question: 'How quickly can we scale our content production?',
|
question: "How quickly can we scale our content production?",
|
||||||
answer: 'Most teams see 10x scaling within the first week. Our onboarding process helps you set up workflows and templates that enable immediate scaling without sacrificing quality or brand consistency.'
|
answer:
|
||||||
}
|
"Most teams see 10x scaling within the first week. Our onboarding process helps you set up workflows and templates that enable immediate scaling without sacrificing quality or brand consistency.",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const getColorClass = (color: string): string => {
|
const getColorClass = (color: string): string => {
|
||||||
switch (color) {
|
switch (color) {
|
||||||
case 'purple': return 'purple';
|
case "purple":
|
||||||
case 'blue': return 'blue';
|
return "purple";
|
||||||
case 'orange': return 'orange';
|
case "blue":
|
||||||
case 'red': return 'red';
|
return "blue";
|
||||||
default: return 'purple';
|
case "orange":
|
||||||
|
return "orange";
|
||||||
|
case "red":
|
||||||
|
return "red";
|
||||||
|
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">
|
||||||
|
|
@ -287,29 +317,34 @@ const BulkGeneration: React.FC = () => {
|
||||||
</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">
|
||||||
Generate hundreds of social media posts, product descriptions, and marketing content in one click.
|
Generate hundreds of social media posts, product descriptions, and
|
||||||
Scale your content production without scaling your team or workload.
|
marketing content in one click. Scale your content production
|
||||||
|
without scaling your team or workload.
|
||||||
</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/bulk"}>
|
<Link href={"https://dashboard.planpostai.com/bulk"}>
|
||||||
<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">
|
<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>
|
<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" />
|
<Rocket className="w-6 h-6 relative z-10" />
|
||||||
<span className="relative z-10">Start Your Free Trial</span>
|
<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" />
|
<ArrowRight className="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform" />
|
||||||
</button></Link>
|
</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 1,200+ enterprise teams</span>
|
<span className="font-medium">
|
||||||
|
4.9/5 from 1,200+ enterprise teams
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -333,13 +368,25 @@ const BulkGeneration: React.FC = () => {
|
||||||
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>
|
||||||
))}
|
))}
|
||||||
|
|
@ -348,8 +395,13 @@ const BulkGeneration: 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>
|
||||||
))}
|
))}
|
||||||
|
|
@ -358,7 +410,8 @@ const BulkGeneration: 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 generate 100 pieces of content in the time it takes to create one?
|
What if you could generate 100 pieces of content in the time it
|
||||||
|
takes to create one?
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -366,7 +419,12 @@ const BulkGeneration: 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">
|
||||||
|
|
@ -376,8 +434,9 @@ const BulkGeneration: 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's bulk generation engine handles massive content volumes while maintaining quality,
|
PlanPost AI's bulk generation engine handles massive content
|
||||||
brand consistency, and team coordination across your entire organization.
|
volumes while maintaining quality, brand consistency, and team
|
||||||
|
coordination across your entire organization.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -386,9 +445,12 @@ const BulkGeneration: 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">
|
||||||
<Zap className="w-6 h-6 text-[#6a47ed]" />
|
<Zap className="w-6 h-6 text-[#6a47ed]" />
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-xl font-bold text-black mb-4">Massive Scale Capacity</h3>
|
<h3 className="text-xl font-bold text-black mb-4">
|
||||||
|
Massive Scale Capacity
|
||||||
|
</h3>
|
||||||
<p className="text-black/80">
|
<p className="text-black/80">
|
||||||
Generate thousands of content pieces simultaneously. Perfect for product catalogs, campaign launches, and content scaling.
|
Generate thousands of content pieces simultaneously. Perfect for
|
||||||
|
product catalogs, campaign launches, and content scaling.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -396,9 +458,12 @@ const BulkGeneration: 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">
|
||||||
<TrendingUp className="w-6 h-6 text-[#ff4ca5]" />
|
<TrendingUp className="w-6 h-6 text-[#ff4ca5]" />
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-xl font-bold text-black mb-4">Campaign Coordination</h3>
|
<h3 className="text-xl font-bold text-black mb-4">
|
||||||
|
Campaign Coordination
|
||||||
|
</h3>
|
||||||
<p className="text-black/80">
|
<p className="text-black/80">
|
||||||
Launch coordinated campaigns across multiple platforms with consistent messaging and automated scheduling.
|
Launch coordinated campaigns across multiple platforms with
|
||||||
|
consistent messaging and automated scheduling.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -406,19 +471,26 @@ const BulkGeneration: 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">
|
||||||
<Users className="w-6 h-6 text-[#6a47ed]" />
|
<Users className="w-6 h-6 text-[#6a47ed]" />
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-xl font-bold text-black mb-4">Team Workflow Management</h3>
|
<h3 className="text-xl font-bold text-black mb-4">
|
||||||
|
Team Workflow Management
|
||||||
|
</h3>
|
||||||
<p className="text-black/80">
|
<p className="text-black/80">
|
||||||
Coordinate large teams with approval workflows, task assignments, and real-time collaboration tools.
|
Coordinate large teams with approval workflows, task
|
||||||
|
assignments, and real-time collaboration tools.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Comparison Section */}
|
{/* Comparison Section */}
|
||||||
<div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-xl">
|
<div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-xl">
|
||||||
<h3 className="text-2xl font-bold text-black mb-6 text-center">Traditional vs. Bulk Generation Workflow</h3>
|
<h3 className="text-2xl font-bold text-black mb-6 text-center">
|
||||||
|
Traditional vs. Bulk Generation Workflow
|
||||||
|
</h3>
|
||||||
<div className="grid md:grid-cols-2 gap-8">
|
<div className="grid md:grid-cols-2 gap-8">
|
||||||
<div className="bg-red-50 rounded-2xl p-6 border border-red-200">
|
<div className="bg-red-50 rounded-2xl p-6 border border-red-200">
|
||||||
<h4 className="font-bold text-red-800 mb-4 text-center">Manual Content Creation</h4>
|
<h4 className="font-bold text-red-800 mb-4 text-center">
|
||||||
|
Manual Content Creation
|
||||||
|
</h4>
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div className="flex items-center gap-2 text-red-700">
|
<div className="flex items-center gap-2 text-red-700">
|
||||||
<div className="w-2 h-2 bg-red-500 rounded-full"></div>
|
<div className="w-2 h-2 bg-red-500 rounded-full"></div>
|
||||||
|
|
@ -439,7 +511,9 @@ const BulkGeneration: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-green-50 rounded-2xl p-6 border border-green-200">
|
<div className="bg-green-50 rounded-2xl p-6 border border-green-200">
|
||||||
<h4 className="font-bold text-green-800 mb-4 text-center">PlanPost AI Bulk Generation</h4>
|
<h4 className="font-bold text-green-800 mb-4 text-center">
|
||||||
|
PlanPost AI Bulk Generation
|
||||||
|
</h4>
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div className="flex items-center gap-2 text-green-700">
|
<div className="flex items-center gap-2 text-green-700">
|
||||||
<Check className="w-4 h-4" />
|
<Check className="w-4 h-4" />
|
||||||
|
|
@ -466,8 +540,10 @@ const BulkGeneration: React.FC = () => {
|
||||||
<div className="mt-8 bg-gradient-to-r from-[#6a47ed]/10 to-[#ff4ca5]/10 rounded-2xl p-6 border border-[#6a47ed]/20">
|
<div className="mt-8 bg-gradient-to-r from-[#6a47ed]/10 to-[#ff4ca5]/10 rounded-2xl p-6 border border-[#6a47ed]/20">
|
||||||
<Quote className="w-8 h-8 text-[#6a47ed] mb-4" />
|
<Quote className="w-8 h-8 text-[#6a47ed] mb-4" />
|
||||||
<p className="text-black/80 italic mb-4">
|
<p className="text-black/80 italic mb-4">
|
||||||
"We went from struggling to produce 50 social posts per month to generating 500+ high-quality pieces weekly.
|
"We went from struggling to produce 50 social posts per month
|
||||||
The bulk generation feature transformed our content strategy and allowed us to scale without adding team members."
|
to generating 500+ high-quality pieces weekly. The bulk generation
|
||||||
|
feature transformed our content strategy and allowed us to scale
|
||||||
|
without adding team members."
|
||||||
</p>
|
</p>
|
||||||
<div>
|
<div>
|
||||||
<p className="font-semibold text-black">Content Director</p>
|
<p className="font-semibold text-black">Content Director</p>
|
||||||
|
|
@ -499,23 +575,29 @@ const BulkGeneration: 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>
|
||||||
))}
|
))}
|
||||||
|
|
@ -526,54 +608,75 @@ const BulkGeneration: 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>
|
||||||
|
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
{feature.examples?.input && feature.examples.output && (
|
{feature.examples?.input && feature.examples.output && (
|
||||||
<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">E-commerce Example</h4>
|
<h4 className="font-bold text-black mb-4 text-lg">
|
||||||
|
E-commerce Example
|
||||||
|
</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">Output</p>
|
<p className="text-sm font-semibold text-black/70">
|
||||||
|
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>
|
||||||
|
|
@ -586,12 +689,17 @@ const BulkGeneration: React.FC = () => {
|
||||||
Enterprise Performance Metrics
|
Enterprise Performance Metrics
|
||||||
</h4>
|
</h4>
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
{feature.examples.metrics.map((metric: string, index: number) => (
|
{feature.examples.metrics.map(
|
||||||
<div key={index} className="flex items-center gap-3 text-black/80">
|
(metric: string, index: number) => (
|
||||||
<Check className="w-4 h-4 text-green-500" />
|
<div
|
||||||
<span>{metric}</span>
|
key={index}
|
||||||
</div>
|
className="flex items-center gap-3 text-black/80"
|
||||||
))}
|
>
|
||||||
|
<Check className="w-4 h-4 text-green-500" />
|
||||||
|
<span>{metric}</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
@ -603,7 +711,12 @@ const BulkGeneration: 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">
|
||||||
|
|
@ -616,16 +729,26 @@ const BulkGeneration: 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>
|
||||||
|
|
@ -633,7 +756,9 @@ const BulkGeneration: 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>
|
||||||
))}
|
))}
|
||||||
|
|
@ -657,35 +782,43 @@ const BulkGeneration: React.FC = () => {
|
||||||
{[
|
{[
|
||||||
{
|
{
|
||||||
step: 1,
|
step: 1,
|
||||||
title: 'Upload Your Content Needs',
|
title: "Upload Your Content Needs",
|
||||||
description: 'Import product catalogs, campaign briefs, or content calendars via CSV or our template system.',
|
description:
|
||||||
content: '[Content upload interface]'
|
"Import product catalogs, campaign briefs, or content calendars via CSV or our template system.",
|
||||||
|
content: "[Content upload interface]",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
step: 2,
|
step: 2,
|
||||||
title: 'Configure Bulk Settings',
|
title: "Configure Bulk Settings",
|
||||||
description: 'Set brand guidelines, tone preferences, and scaling parameters for your content generation.',
|
description:
|
||||||
content: '[Bulk configuration dashboard]'
|
"Set brand guidelines, tone preferences, and scaling parameters for your content generation.",
|
||||||
|
content: "[Bulk configuration dashboard]",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
step: 3,
|
step: 3,
|
||||||
title: 'Generate & Review',
|
title: "Generate & Review",
|
||||||
description: 'Generate hundreds of content pieces simultaneously and review using our batch editing tools.',
|
description:
|
||||||
content: '[Batch review interface]'
|
"Generate hundreds of content pieces simultaneously and review using our batch editing tools.",
|
||||||
|
content: "[Batch review interface]",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
step: 4,
|
step: 4,
|
||||||
title: 'Deploy at Scale',
|
title: "Deploy at Scale",
|
||||||
description: 'Publish across all platforms, assign to team members, or export for further processing.',
|
description:
|
||||||
content: '[Deployment dashboard]'
|
"Publish across all platforms, assign to team members, or export for further processing.",
|
||||||
}
|
content: "[Deployment dashboard]",
|
||||||
|
},
|
||||||
].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>
|
||||||
|
|
@ -695,17 +828,26 @@ const BulkGeneration: 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/bulk"}>
|
||||||
|
{" "}
|
||||||
|
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 • Setup in 10 minutes • Generate your first batch today
|
No credit card required • Setup in 10 minutes • Generate your
|
||||||
|
first batch today
|
||||||
</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">
|
||||||
|
|
@ -718,8 +860,13 @@ const BulkGeneration: 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>
|
||||||
))}
|
))}
|
||||||
|
|
@ -741,17 +888,32 @@ const BulkGeneration: React.FC = () => {
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<p className="text-xl text-white/90 mb-8">
|
<p className="text-xl text-white/90 mb-8">
|
||||||
Join 1,200+ enterprise teams scaling their content production 10x with bulk generation
|
Join 1,200+ enterprise teams scaling their content production 10x
|
||||||
|
with bulk generation
|
||||||
</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: 'Massive Scale', desc: 'Generate hundreds of content pieces simultaneously' },
|
{
|
||||||
{ title: 'Team Efficiency', desc: 'Coordinate large teams with automated workflows' },
|
title: "Massive Scale",
|
||||||
{ title: 'Enterprise Security', desc: 'Enterprise-grade security and compliance' }
|
desc: "Generate hundreds of content pieces simultaneously",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Team Efficiency",
|
||||||
|
desc: "Coordinate large teams with automated workflows",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Enterprise Security",
|
||||||
|
desc: "Enterprise-grade security and compliance",
|
||||||
|
},
|
||||||
].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>
|
||||||
))}
|
))}
|
||||||
|
|
@ -759,11 +921,11 @@ const BulkGeneration: 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">
|
||||||
{[
|
{[
|
||||||
'Generate 100+ content pieces in minutes',
|
"Generate 100+ content pieces in minutes",
|
||||||
'Coordinate unlimited team members',
|
"Coordinate unlimited team members",
|
||||||
'Maintain brand consistency at scale',
|
"Maintain brand consistency at scale",
|
||||||
'Enterprise-grade security and compliance',
|
"Enterprise-grade security and compliance",
|
||||||
'API access and custom integrations'
|
"API access and custom integrations",
|
||||||
].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" />
|
||||||
|
|
@ -773,11 +935,14 @@ const BulkGeneration: 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/bulk"}>
|
||||||
|
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 • Generate your first batch today • 30-day money-back guarantee
|
No credit card required • Generate your first batch today • 30-day
|
||||||
|
money-back guarantee
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
'use client'
|
"use client";
|
||||||
|
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from "react";
|
||||||
import {
|
import {
|
||||||
Check,
|
Check,
|
||||||
Clock,
|
Clock,
|
||||||
|
|
@ -17,14 +17,16 @@ import {
|
||||||
Building,
|
Building,
|
||||||
ShoppingCart,
|
ShoppingCart,
|
||||||
Heart,
|
Heart,
|
||||||
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 +40,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 +55,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,202 +70,232 @@ interface FAQ {
|
||||||
}
|
}
|
||||||
|
|
||||||
const SEOWriter: React.FC = () => {
|
const SEOWriter: React.FC = () => {
|
||||||
const [activeFeature, setActiveFeature] = useState<string>('seo-optimization');
|
const [activeFeature, setActiveFeature] =
|
||||||
|
useState<string>("seo-optimization");
|
||||||
const [hoveredCard, setHoveredCard] = useState<string | null>(null);
|
const [hoveredCard, setHoveredCard] = useState<string | null>(null);
|
||||||
|
|
||||||
const features: Feature[] = [
|
const features: Feature[] = [
|
||||||
{
|
{
|
||||||
id: 'seo-optimization',
|
id: "seo-optimization",
|
||||||
icon: Search,
|
icon: Search,
|
||||||
title: 'Advanced SEO Optimization Engine',
|
title: "Advanced SEO Optimization Engine",
|
||||||
description: 'Create content that search engines love and readers engage with. Our AI analyzes top-ranking content to understand what works in your niche.',
|
description:
|
||||||
|
"Create content that search engines love and readers engage with. Our AI analyzes top-ranking content to understand what works in your niche.",
|
||||||
highlights: [
|
highlights: [
|
||||||
'Keyword Research & Integration: Automatic identification and placement of primary and secondary keywords',
|
"Keyword Research & Integration: Automatic identification and placement of primary and secondary keywords",
|
||||||
'Competitor Content Analysis: Learn from what's working for competitors in your space',
|
"Competitor Content Analysis: Learn from what's working for competitors in your space",
|
||||||
'Content Structure Optimization: Perfect heading hierarchy, paragraph length, and readability scoring',
|
"Content Structure Optimization: Perfect heading hierarchy, paragraph length, and readability scoring",
|
||||||
'Meta Tag Generation: SEO-optimized titles and descriptions that improve click-through rates',
|
"Meta Tag Generation: SEO-optimized titles and descriptions that improve click-through rates",
|
||||||
'Internal Linking Suggestions: Smart recommendations for interlinking your content'
|
"Internal Linking Suggestions: Smart recommendations for interlinking your content",
|
||||||
],
|
],
|
||||||
examples: {
|
examples: {
|
||||||
metrics: [
|
metrics: [
|
||||||
'Keyword Density: Optimal 1-2% maintained throughout',
|
"Keyword Density: Optimal 1-2% maintained throughout",
|
||||||
'Readability Score: Grade 8-10 for maximum accessibility',
|
"Readability Score: Grade 8-10 for maximum accessibility",
|
||||||
'Content Length: 1500-2500 words based on topic competitiveness',
|
"Content Length: 1500-2500 words based on topic competitiveness",
|
||||||
'Meta Optimization: Click-worthy titles under 60 characters'
|
"Meta Optimization: Click-worthy titles under 60 characters",
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
gradient: 'from-purple-500 to-pink-500',
|
gradient: "from-purple-500 to-pink-500",
|
||||||
popular: true
|
popular: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'geo-targeting',
|
id: "geo-targeting",
|
||||||
icon: Globe,
|
icon: Globe,
|
||||||
title: 'Intelligent GEO Targeting System',
|
title: "Intelligent GEO Targeting System",
|
||||||
description: 'Create locally-relevant content that resonates with specific audiences and locations. Perfect for local businesses, multi-location brands, and geo-specific services.',
|
description:
|
||||||
|
"Create locally-relevant content that resonates with specific audiences and locations. Perfect for local businesses, multi-location brands, and geo-specific services.",
|
||||||
highlights: [
|
highlights: [
|
||||||
'Local Keyword Integration: Automatic inclusion of city, neighborhood, and regional terms',
|
"Local Keyword Integration: Automatic inclusion of city, neighborhood, and regional terms",
|
||||||
'Cultural Context Understanding: Adapt content tone and references for local audiences',
|
"Cultural Context Understanding: Adapt content tone and references for local audiences",
|
||||||
'Multi-Location Content Scaling: Create variations for different locations with one click',
|
"Multi-Location Content Scaling: Create variations for different locations with one click",
|
||||||
'Local Business References: Include relevant local landmarks, events, and context',
|
"Local Business References: Include relevant local landmarks, events, and context",
|
||||||
'Service Area Optimization: Target specific service areas with precision'
|
"Service Area Optimization: Target specific service areas with precision",
|
||||||
],
|
],
|
||||||
examples: {
|
examples: {
|
||||||
input: 'Pizza restaurant menu highlights + Locations: Chicago, New York, Miami',
|
input:
|
||||||
output: 'Three uniquely optimized articles featuring local favorites, neighborhood references, and region-specific menu highlights for each location.'
|
"Pizza restaurant menu highlights + Locations: Chicago, New York, Miami",
|
||||||
|
output:
|
||||||
|
"Three uniquely optimized articles featuring local favorites, neighborhood references, and region-specific menu highlights for each location.",
|
||||||
},
|
},
|
||||||
gradient: 'from-blue-500 to-cyan-500'
|
gradient: "from-blue-500 to-cyan-500",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'performance-predictor',
|
id: "performance-predictor",
|
||||||
icon: TrendingUp,
|
icon: TrendingUp,
|
||||||
title: 'Content Performance Predictor',
|
title: "Content Performance Predictor",
|
||||||
description: 'Know how your content will perform before you publish. Our AI analyzes thousands of data points to predict traffic potential and suggest improvements.',
|
description:
|
||||||
|
"Know how your content will perform before you publish. Our AI analyzes thousands of data points to predict traffic potential and suggest improvements.",
|
||||||
highlights: [
|
highlights: [
|
||||||
'Traffic Potential Scoring: 1-100 rating of estimated search traffic potential',
|
"Traffic Potential Scoring: 1-100 rating of estimated search traffic potential",
|
||||||
'Ranking Difficulty Analysis: Understand competition level for target keywords',
|
"Ranking Difficulty Analysis: Understand competition level for target keywords",
|
||||||
'Engagement Optimization: Suggestions to improve time-on-page and reduce bounce rates',
|
"Engagement Optimization: Suggestions to improve time-on-page and reduce bounce rates",
|
||||||
'Conversion Optimization: Tips to increase lead generation and sales from content',
|
"Conversion Optimization: Tips to increase lead generation and sales from content",
|
||||||
'A/B Testing Generation: Create multiple versions to test what resonates best'
|
"A/B Testing Generation: Create multiple versions to test what resonates best",
|
||||||
],
|
],
|
||||||
examples: {
|
examples: {
|
||||||
metrics: [
|
metrics: [
|
||||||
'+83% Organic Traffic Increase',
|
"+83% Organic Traffic Increase",
|
||||||
'+45% Time on Page',
|
"+45% Time on Page",
|
||||||
'-32% Bounce Rate Reduction'
|
"-32% Bounce Rate Reduction",
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
gradient: 'from-green-500 to-emerald-500'
|
gradient: "from-green-500 to-emerald-500",
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const problemItems: ProblemItem[] = [
|
const problemItems: ProblemItem[] = [
|
||||||
{
|
{
|
||||||
icon: Clock,
|
icon: Clock,
|
||||||
title: 'Time-Consuming Research',
|
title: "Time-Consuming Research",
|
||||||
description: 'Spending hours on keyword research, competitor analysis, and SEO optimization for every article? The average content marketer wastes 6-8 hours weekly just on research and planning.',
|
description:
|
||||||
stat: '6-8 hours weekly wasted',
|
"Spending hours on keyword research, competitor analysis, and SEO optimization for every article? The average content marketer wastes 6-8 hours weekly just on research and planning.",
|
||||||
color: 'purple'
|
stat: "6-8 hours weekly wasted",
|
||||||
|
color: "purple",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Target,
|
icon: Target,
|
||||||
title: 'Ineffective Local Targeting',
|
title: "Ineffective Local Targeting",
|
||||||
description: 'Creating generic content that fails to resonate with local audiences? Missing out on local search traffic because your content isn't geo-optimized for specific markets.',
|
description:
|
||||||
stat: 'Missed local search traffic',
|
"Creating generic content that fails to resonate with local audiences? Missing out on local search traffic because your content isn't geo-optimized for specific markets.",
|
||||||
color: 'blue'
|
stat: "Missed local search traffic",
|
||||||
|
color: "blue",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: TrendingUp,
|
icon: TrendingUp,
|
||||||
title: 'Poor SEO Performance',
|
title: "Poor SEO Performance",
|
||||||
description: 'Publishing articles that never rank or drive meaningful traffic? 65% of content never gets more than 10 monthly visits from organic search.',
|
description:
|
||||||
stat: '65% of content gets minimal traffic',
|
"Publishing articles that never rank or drive meaningful traffic? 65% of content never gets more than 10 monthly visits from organic search.",
|
||||||
color: 'orange'
|
stat: "65% of content gets minimal traffic",
|
||||||
|
color: "orange",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: FileText,
|
icon: FileText,
|
||||||
title: 'Inconsistent Quality',
|
title: "Inconsistent Quality",
|
||||||
description: 'Struggling to maintain consistent quality and brand voice across multiple writers and locations? Inconsistency confuses audiences and damages brand authority.',
|
description:
|
||||||
stat: 'Brand consistency challenges',
|
"Struggling to maintain consistent quality and brand voice across multiple writers and locations? Inconsistency confuses audiences and damages brand authority.",
|
||||||
color: 'red'
|
stat: "Brand consistency challenges",
|
||||||
}
|
color: "red",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const stats: StatItem[] = [
|
const stats: StatItem[] = [
|
||||||
{ number: '65%', label: 'of content gets minimal search traffic' },
|
{ number: "65%", label: "of content gets minimal search traffic" },
|
||||||
{ number: '8.2', label: 'average hours spent per article' },
|
{ number: "8.2", label: "average hours spent per article" },
|
||||||
{ number: '46%', label: 'of marketers struggle with local content' }
|
{ number: "46%", label: "of marketers struggle with local content" },
|
||||||
];
|
];
|
||||||
|
|
||||||
const industries: Industry[] = [
|
const industries: Industry[] = [
|
||||||
{
|
{
|
||||||
icon: Building,
|
icon: Building,
|
||||||
name: 'Agencies & Marketing Teams',
|
name: "Agencies & Marketing Teams",
|
||||||
description: 'Scale content production for multiple clients with consistent quality and localized optimization.',
|
description:
|
||||||
|
"Scale content production for multiple clients with consistent quality and localized optimization.",
|
||||||
useCases: [
|
useCases: [
|
||||||
'Client content scaling',
|
"Client content scaling",
|
||||||
'Local SEO campaigns',
|
"Local SEO campaigns",
|
||||||
'Multi-location content',
|
"Multi-location content",
|
||||||
'Performance reporting'
|
"Performance reporting",
|
||||||
],
|
],
|
||||||
results: 'Results: 5x more content delivered, 75% time savings'
|
results: "Results: 5x more content delivered, 75% time savings",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: ShoppingCart,
|
icon: ShoppingCart,
|
||||||
name: 'E-commerce & Local Retail',
|
name: "E-commerce & Local Retail",
|
||||||
description: 'Create product content, local store pages, and service area articles that drive foot traffic and online sales.',
|
description:
|
||||||
|
"Create product content, local store pages, and service area articles that drive foot traffic and online sales.",
|
||||||
useCases: [
|
useCases: [
|
||||||
'Local store content',
|
"Local store content",
|
||||||
'Product category pages',
|
"Product category pages",
|
||||||
'Service area blogs',
|
"Service area blogs",
|
||||||
'Location-specific offers'
|
"Location-specific offers",
|
||||||
],
|
],
|
||||||
results: 'Results: 3.2x ROAS, 45% more local traffic'
|
results: "Results: 3.2x ROAS, 45% more local traffic",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Heart,
|
icon: Heart,
|
||||||
name: 'Healthcare & Services',
|
name: "Healthcare & Services",
|
||||||
description: 'Generate locally-optimized content for medical practices, service areas, and patient education.',
|
description:
|
||||||
|
"Generate locally-optimized content for medical practices, service areas, and patient education.",
|
||||||
useCases: [
|
useCases: [
|
||||||
'Local practice pages',
|
"Local practice pages",
|
||||||
'Service area content',
|
"Service area content",
|
||||||
'Patient education',
|
"Patient education",
|
||||||
'Provider bios'
|
"Provider bios",
|
||||||
],
|
],
|
||||||
results: 'Results: 68% more appointment requests, 52% local search increase'
|
results:
|
||||||
|
"Results: 68% more appointment requests, 52% local search increase",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Globe,
|
icon: Globe,
|
||||||
name: 'Hospitality & Travel',
|
name: "Hospitality & Travel",
|
||||||
description: 'Create destination content, local attraction guides, and hotel-specific SEO content.',
|
description:
|
||||||
|
"Create destination content, local attraction guides, and hotel-specific SEO content.",
|
||||||
useCases: [
|
useCases: [
|
||||||
'Destination guides',
|
"Destination guides",
|
||||||
'Local attraction content',
|
"Local attraction content",
|
||||||
'Hotel location pages',
|
"Hotel location pages",
|
||||||
'Travel tips by location'
|
"Travel tips by location",
|
||||||
],
|
],
|
||||||
results: 'Results: 4.1x more direct bookings, 87% local traffic growth'
|
results: "Results: 4.1x more direct bookings, 87% local traffic growth",
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const faqs: FAQ[] = [
|
const faqs: FAQ[] = [
|
||||||
{
|
{
|
||||||
question: 'How does the SEO optimization actually work?',
|
question: "How does the SEO optimization actually work?",
|
||||||
answer: 'Our AI analyzes top-ranking content for your target keywords to understand optimal content structure, keyword placement, and topic coverage. It then creates content that matches or exceeds these patterns while maintaining natural readability and engagement.'
|
answer:
|
||||||
|
"Our AI analyzes top-ranking content for your target keywords to understand optimal content structure, keyword placement, and topic coverage. It then creates content that matches or exceeds these patterns while maintaining natural readability and engagement.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
question: 'Can I really create content for multiple locations at once?',
|
question: "Can I really create content for multiple locations at once?",
|
||||||
answer: 'Yes! Our multi-location content scaling allows you to create a master article template, then automatically generate localized variations for different cities, regions, or service areas. Each variation includes location-specific keywords, references, and context while maintaining your core message.'
|
answer:
|
||||||
|
"Yes! Our multi-location content scaling allows you to create a master article template, then automatically generate localized variations for different cities, regions, or service areas. Each variation includes location-specific keywords, references, and context while maintaining your core message.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
question: 'How accurate are the performance predictions?',
|
question: "How accurate are the performance predictions?",
|
||||||
answer: 'Our performance predictor has an 82% accuracy rate for estimating traffic potential. It analyzes factors like keyword difficulty, content quality, competitor strength, and historical performance data to provide reliable predictions and optimization suggestions.'
|
answer:
|
||||||
|
"Our performance predictor has an 82% accuracy rate for estimating traffic potential. It analyzes factors like keyword difficulty, content quality, competitor strength, and historical performance data to provide reliable predictions and optimization suggestions.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
question: 'Can I maintain my brand voice with AI-generated content?',
|
question: "Can I maintain my brand voice with AI-generated content?",
|
||||||
answer: 'Absolutely. You can train our AI on your existing content to learn and replicate your brand voice, tone, and style preferences. We also offer custom brand voice training for enterprise clients to ensure complete consistency across all generated content.'
|
answer:
|
||||||
|
"Absolutely. You can train our AI on your existing content to learn and replicate your brand voice, tone, and style preferences. We also offer custom brand voice training for enterprise clients to ensure complete consistency across all generated content.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
question: 'What about content originality and plagiarism?',
|
question: "What about content originality and plagiarism?",
|
||||||
answer: 'All content generated by PlanPost AI is 100% original and passes plagiarism checks. Our AI creates unique content based on your inputs and research, rather than copying or rewording existing content. We also include built-in plagiarism checking before publication.'
|
answer:
|
||||||
|
"All content generated by PlanPost AI is 100% original and passes plagiarism checks. Our AI creates unique content based on your inputs and research, rather than copying or rewording existing content. We also include built-in plagiarism checking before publication.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
question: 'How quickly will I see SEO results?',
|
question: "How quickly will I see SEO results?",
|
||||||
answer: 'Most clients see noticeable improvements within 4-8 weeks, with full optimization benefits typically realized within 3-6 months. The timeline depends on factors like website authority, competition level, and content publishing frequency. We provide monthly performance reports to track your progress.'
|
answer:
|
||||||
}
|
"Most clients see noticeable improvements within 4-8 weeks, with full optimization benefits typically realized within 3-6 months. The timeline depends on factors like website authority, competition level, and content publishing frequency. We provide monthly performance reports to track your progress.",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const getColorClass = (color: string): string => {
|
const getColorClass = (color: string): string => {
|
||||||
switch (color) {
|
switch (color) {
|
||||||
case 'purple': return 'purple';
|
case "purple":
|
||||||
case 'blue': return 'blue';
|
return "purple";
|
||||||
case 'orange': return 'orange';
|
case "blue":
|
||||||
case 'red': return 'red';
|
return "blue";
|
||||||
default: return 'purple';
|
case "orange":
|
||||||
|
return "orange";
|
||||||
|
case "red":
|
||||||
|
return "red";
|
||||||
|
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">
|
||||||
|
|
@ -282,28 +318,34 @@ const SEOWriter: React.FC = () => {
|
||||||
</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">
|
||||||
Generate SEO-optimized, locally-targeted articles that drive traffic and conversions.
|
Generate SEO-optimized, locally-targeted articles that drive
|
||||||
Save 10+ hours weekly while creating content that outperforms competitors in search results.
|
traffic and conversions. Save 10+ hours weekly while creating
|
||||||
|
content that outperforms competitors in search results.
|
||||||
</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/seo"}><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/seo"}>
|
||||||
<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 2,800+ content teams</span>
|
<span className="font-medium">
|
||||||
|
4.9/5 from 2,800+ content teams
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -327,13 +369,25 @@ const SEOWriter: React.FC = () => {
|
||||||
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>
|
||||||
))}
|
))}
|
||||||
|
|
@ -342,8 +396,13 @@ const SEOWriter: 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>
|
||||||
))}
|
))}
|
||||||
|
|
@ -352,7 +411,8 @@ const SEOWriter: 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 SEO-optimized, locally-targeted content in minutes instead of hours?
|
What if you could create SEO-optimized, locally-targeted content
|
||||||
|
in minutes instead of hours?
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -360,7 +420,12 @@ const SEOWriter: 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">
|
||||||
|
|
@ -370,8 +435,9 @@ const SEOWriter: 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 combines advanced SEO intelligence with local market understanding to create content
|
PlanPost AI combines advanced SEO intelligence with local market
|
||||||
that ranks higher, drives targeted traffic, and converts readers into customers.
|
understanding to create content that ranks higher, drives targeted
|
||||||
|
traffic, and converts readers into customers.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -380,9 +446,12 @@ const SEOWriter: 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">
|
||||||
<Search className="w-6 h-6 text-[#6a47ed]" />
|
<Search className="w-6 h-6 text-[#6a47ed]" />
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-xl font-bold text-black mb-4">SEO Intelligence Built-In</h3>
|
<h3 className="text-xl font-bold text-black mb-4">
|
||||||
|
SEO Intelligence Built-In
|
||||||
|
</h3>
|
||||||
<p className="text-black/80">
|
<p className="text-black/80">
|
||||||
Automatic keyword research, competitor analysis, and SEO optimization in every article. No more guessing what will rank.
|
Automatic keyword research, competitor analysis, and SEO
|
||||||
|
optimization in every article. No more guessing what will rank.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -390,9 +459,13 @@ const SEOWriter: 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">
|
||||||
<Globe className="w-6 h-6 text-[#ff4ca5]" />
|
<Globe className="w-6 h-6 text-[#ff4ca5]" />
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-xl font-bold text-black mb-4">Geo-Targeting Automation</h3>
|
<h3 className="text-xl font-bold text-black mb-4">
|
||||||
|
Geo-Targeting Automation
|
||||||
|
</h3>
|
||||||
<p className="text-black/80">
|
<p className="text-black/80">
|
||||||
Create locally-optimized content for multiple locations simultaneously. Perfect for multi-location businesses and local SEO.
|
Create locally-optimized content for multiple locations
|
||||||
|
simultaneously. Perfect for multi-location businesses and local
|
||||||
|
SEO.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -400,19 +473,26 @@ const SEOWriter: 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">
|
||||||
<TrendingUp className="w-6 h-6 text-[#6a47ed]" />
|
<TrendingUp className="w-6 h-6 text-[#6a47ed]" />
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-xl font-bold text-black mb-4">Performance Predictions</h3>
|
<h3 className="text-xl font-bold text-black mb-4">
|
||||||
|
Performance Predictions
|
||||||
|
</h3>
|
||||||
<p className="text-black/80">
|
<p className="text-black/80">
|
||||||
AI predicts content performance before you publish, suggesting optimizations to maximize traffic and engagement.
|
AI predicts content performance before you publish, suggesting
|
||||||
|
optimizations to maximize traffic and engagement.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Comparison Section */}
|
{/* Comparison Section */}
|
||||||
<div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-xl">
|
<div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-xl">
|
||||||
<h3 className="text-2xl font-bold text-black mb-6 text-center">See the Difference: Generic vs. SEO+GEO Optimized</h3>
|
<h3 className="text-2xl font-bold text-black mb-6 text-center">
|
||||||
|
See the Difference: Generic vs. SEO+GEO Optimized
|
||||||
|
</h3>
|
||||||
<div className="grid md:grid-cols-2 gap-8">
|
<div className="grid md:grid-cols-2 gap-8">
|
||||||
<div className="bg-red-50 rounded-2xl p-6 border border-red-200">
|
<div className="bg-red-50 rounded-2xl p-6 border border-red-200">
|
||||||
<h4 className="font-bold text-red-800 mb-4 text-center">Generic AI Content</h4>
|
<h4 className="font-bold text-red-800 mb-4 text-center">
|
||||||
|
Generic AI Content
|
||||||
|
</h4>
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div className="flex items-center gap-2 text-red-700">
|
<div className="flex items-center gap-2 text-red-700">
|
||||||
<div className="w-2 h-2 bg-red-500 rounded-full"></div>
|
<div className="w-2 h-2 bg-red-500 rounded-full"></div>
|
||||||
|
|
@ -433,7 +513,9 @@ const SEOWriter: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-green-50 rounded-2xl p-6 border border-green-200">
|
<div className="bg-green-50 rounded-2xl p-6 border border-green-200">
|
||||||
<h4 className="font-bold text-green-800 mb-4 text-center">PlanPost AI Content</h4>
|
<h4 className="font-bold text-green-800 mb-4 text-center">
|
||||||
|
PlanPost AI Content
|
||||||
|
</h4>
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div className="flex items-center gap-2 text-green-700">
|
<div className="flex items-center gap-2 text-green-700">
|
||||||
<Check className="w-4 h-4" />
|
<Check className="w-4 h-4" />
|
||||||
|
|
@ -460,12 +542,16 @@ const SEOWriter: React.FC = () => {
|
||||||
<div className="mt-8 bg-gradient-to-r from-[#6a47ed]/10 to-[#ff4ca5]/10 rounded-2xl p-6 border border-[#6a47ed]/20">
|
<div className="mt-8 bg-gradient-to-r from-[#6a47ed]/10 to-[#ff4ca5]/10 rounded-2xl p-6 border border-[#6a47ed]/20">
|
||||||
<Quote className="w-8 h-8 text-[#6a47ed] mb-4" />
|
<Quote className="w-8 h-8 text-[#6a47ed] mb-4" />
|
||||||
<p className="text-black/80 italic mb-4">
|
<p className="text-black/80 italic mb-4">
|
||||||
"We went from spending 20 hours weekly on content creation to 3 hours. Our SEO traffic increased by 187% in the first quarter,
|
"We went from spending 20 hours weekly on content creation to
|
||||||
and we're now ranking for local keywords we never thought possible."
|
3 hours. Our SEO traffic increased by 187% in the first quarter,
|
||||||
|
and we're now ranking for local keywords we never thought
|
||||||
|
possible."
|
||||||
</p>
|
</p>
|
||||||
<div>
|
<div>
|
||||||
<p className="font-semibold text-black">Marketing Director</p>
|
<p className="font-semibold text-black">Marketing Director</p>
|
||||||
<p className="text-black/70 text-sm">Multi-Location Retail Chain</p>
|
<p className="text-black/70 text-sm">
|
||||||
|
Multi-Location Retail Chain
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -493,23 +579,29 @@ const SEOWriter: 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>
|
||||||
))}
|
))}
|
||||||
|
|
@ -520,54 +612,75 @@ const SEOWriter: 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>
|
||||||
|
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
{feature.examples?.input && feature.examples.output && (
|
{feature.examples?.input && feature.examples.output && (
|
||||||
<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">Multi-Location Restaurant Example</h4>
|
<h4 className="font-bold text-black mb-4 text-lg">
|
||||||
|
Multi-Location Restaurant Example
|
||||||
|
</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">Output</p>
|
<p className="text-sm font-semibold text-black/70">
|
||||||
|
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>
|
||||||
|
|
@ -577,15 +690,22 @@ const SEOWriter: React.FC = () => {
|
||||||
{feature.examples?.metrics && (
|
{feature.examples?.metrics && (
|
||||||
<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 === 'performance-predictor' ? 'Typical Performance Improvements' : 'SEO Optimization in Action'}
|
{feature.id === "performance-predictor"
|
||||||
|
? "Typical Performance Improvements"
|
||||||
|
: "SEO Optimization in Action"}
|
||||||
</h4>
|
</h4>
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
{feature.examples.metrics.map((metric: string, index: number) => (
|
{feature.examples.metrics.map(
|
||||||
<div key={index} className="flex items-center gap-3 text-black/80">
|
(metric: string, index: number) => (
|
||||||
<Check className="w-4 h-4 text-green-500" />
|
<div
|
||||||
<span>{metric}</span>
|
key={index}
|
||||||
</div>
|
className="flex items-center gap-3 text-black/80"
|
||||||
))}
|
>
|
||||||
|
<Check className="w-4 h-4 text-green-500" />
|
||||||
|
<span>{metric}</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
@ -597,7 +717,12 @@ const SEOWriter: 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">
|
||||||
|
|
@ -610,16 +735,26 @@ const SEOWriter: 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>
|
||||||
|
|
@ -627,7 +762,9 @@ const SEOWriter: 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>
|
||||||
))}
|
))}
|
||||||
|
|
@ -651,35 +788,43 @@ const SEOWriter: React.FC = () => {
|
||||||
{[
|
{[
|
||||||
{
|
{
|
||||||
step: 1,
|
step: 1,
|
||||||
title: 'Define Your Content Goals',
|
title: "Define Your Content Goals",
|
||||||
description: 'Input your topic, target audience, and locations. Set SEO targets and content objectives.',
|
description:
|
||||||
content: '[Content goal setting interface]'
|
"Input your topic, target audience, and locations. Set SEO targets and content objectives.",
|
||||||
|
content: "[Content goal setting interface]",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
step: 2,
|
step: 2,
|
||||||
title: 'AI Research & Optimization',
|
title: "AI Research & Optimization",
|
||||||
description: 'Our AI analyzes competitors, identifies keyword opportunities, and researches local context.',
|
description:
|
||||||
content: '[AI research dashboard]'
|
"Our AI analyzes competitors, identifies keyword opportunities, and researches local context.",
|
||||||
|
content: "[AI research dashboard]",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
step: 3,
|
step: 3,
|
||||||
title: 'Generate & Customize',
|
title: "Generate & Customize",
|
||||||
description: 'Review the AI-generated content, make edits, and optimize further based on performance predictions.',
|
description:
|
||||||
content: '[Content editor interface]'
|
"Review the AI-generated content, make edits, and optimize further based on performance predictions.",
|
||||||
|
content: "[Content editor interface]",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
step: 4,
|
step: 4,
|
||||||
title: 'Publish & Track Performance',
|
title: "Publish & Track Performance",
|
||||||
description: 'Publish directly to your platforms and monitor real-time performance with our analytics dashboard.',
|
description:
|
||||||
content: '[Publishing and analytics interface]'
|
"Publish directly to your platforms and monitor real-time performance with our analytics dashboard.",
|
||||||
}
|
content: "[Publishing and analytics interface]",
|
||||||
|
},
|
||||||
].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>
|
||||||
|
|
@ -689,17 +834,25 @@ const SEOWriter: 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/seo"}>
|
||||||
|
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 • Setup in 5 minutes • Create your first article today
|
No credit card required • Setup in 5 minutes • Create your first
|
||||||
|
article today
|
||||||
</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">
|
||||||
|
|
@ -712,8 +865,13 @@ const SEOWriter: 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>
|
||||||
))}
|
))}
|
||||||
|
|
@ -735,17 +893,32 @@ const SEOWriter: React.FC = () => {
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<p className="text-xl text-white/90 mb-8">
|
<p className="text-xl text-white/90 mb-8">
|
||||||
Join 2,800+ content teams creating SEO-optimized, locally-targeted articles that actually rank
|
Join 2,800+ content teams creating SEO-optimized, locally-targeted
|
||||||
|
articles that actually rank
|
||||||
</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: 'Proven SEO Results', desc: 'Create content optimized to rank higher and drive more organic traffic' },
|
{
|
||||||
{ title: 'Local Audience Targeting', desc: 'Reach the right customers in specific locations with geo-optimized content' },
|
title: "Proven SEO Results",
|
||||||
{ title: 'Massive Time Savings', desc: 'Reduce content creation time by 80% while improving quality' }
|
desc: "Create content optimized to rank higher and drive more organic traffic",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Local Audience Targeting",
|
||||||
|
desc: "Reach the right customers in specific locations with geo-optimized content",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Massive Time Savings",
|
||||||
|
desc: "Reduce content creation time by 80% while improving quality",
|
||||||
|
},
|
||||||
].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>
|
||||||
))}
|
))}
|
||||||
|
|
@ -753,11 +926,11 @@ const SEOWriter: 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 SEO-optimized articles in minutes',
|
"Create SEO-optimized articles in minutes",
|
||||||
'Target multiple locations simultaneously',
|
"Target multiple locations simultaneously",
|
||||||
'Improve search rankings and organic traffic',
|
"Improve search rankings and organic traffic",
|
||||||
'Scale content production without sacrificing quality',
|
"Scale content production without sacrificing quality",
|
||||||
'Publish directly to your platforms'
|
"Publish directly to your platforms",
|
||||||
].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" />
|
||||||
|
|
@ -767,11 +940,14 @@ const SEOWriter: 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/seo"}>
|
||||||
|
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 article today • 30-day money-back guarantee
|
No credit card required • Create your first article today • 30-day
|
||||||
|
money-back guarantee
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -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,6 +134,7 @@ 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" />
|
||||||
|
|
@ -106,11 +146,13 @@ export default function Header() {
|
||||||
{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>
|
||||||
))}
|
))}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue