added bulk-content
This commit is contained in:
Adspillar
parent
481de597e5
commit
9b5f470509
2 changed files with 916 additions and 158 deletions
791
src/app/(features-landing)/bulk-content/page.tsx
Normal file
791
src/app/(features-landing)/bulk-content/page.tsx
Normal file
|
|
@ -0,0 +1,791 @@
|
|||
'use client'
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Check,
|
||||
Play,
|
||||
Clock,
|
||||
TrendingUp,
|
||||
Target,
|
||||
ArrowRight,
|
||||
Star,
|
||||
Quote,
|
||||
Video,
|
||||
Sparkle,
|
||||
Rocket,
|
||||
Search,
|
||||
Globe,
|
||||
FileText,
|
||||
Building,
|
||||
ShoppingCart,
|
||||
Heart,
|
||||
Zap,
|
||||
Users,
|
||||
BarChart3,
|
||||
LucideProps
|
||||
} from 'lucide-react';
|
||||
|
||||
// TypeScript Interfaces
|
||||
interface Feature {
|
||||
id: string;
|
||||
icon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
|
||||
title: string;
|
||||
description: string;
|
||||
highlights: string[];
|
||||
examples?: {
|
||||
input?: string;
|
||||
output?: string;
|
||||
metrics?: string[];
|
||||
};
|
||||
gradient: string;
|
||||
popular?: boolean;
|
||||
}
|
||||
|
||||
interface ProblemItem {
|
||||
icon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
|
||||
title: string;
|
||||
description: string;
|
||||
stat: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface StatItem {
|
||||
number: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface Industry {
|
||||
icon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
|
||||
name: string;
|
||||
description: string;
|
||||
useCases: string[];
|
||||
results: string;
|
||||
}
|
||||
|
||||
interface FAQ {
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
const BulkGeneration: React.FC = () => {
|
||||
const [activeFeature, setActiveFeature] = useState<string>('bulk-content');
|
||||
const [hoveredCard, setHoveredCard] = useState<string | null>(null);
|
||||
|
||||
const features: Feature[] = [
|
||||
{
|
||||
id: 'bulk-content',
|
||||
icon: Zap,
|
||||
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.',
|
||||
highlights: [
|
||||
'Massive Content Scaling: Create 100+ pieces of content simultaneously',
|
||||
'Multi-Platform Adaptation: Auto-format for Instagram, Facebook, Twitter, LinkedIn',
|
||||
'Batch Processing: Upload CSV files or product catalogs for bulk generation',
|
||||
'Consistent Brand Voice: Maintain uniform tone across all generated content',
|
||||
'Template Library: Save and reuse successful content templates'
|
||||
],
|
||||
examples: {
|
||||
input: '50 product descriptions for fashion catalog',
|
||||
output: '50 unique, SEO-optimized product descriptions with consistent brand voice and style'
|
||||
},
|
||||
gradient: 'from-purple-500 to-pink-500',
|
||||
popular: true
|
||||
},
|
||||
{
|
||||
id: 'campaign-scaling',
|
||||
icon: TrendingUp,
|
||||
title: 'Campaign Scaling Engine',
|
||||
description: 'Launch complete marketing campaigns across multiple platforms with coordinated messaging and scheduling.',
|
||||
highlights: [
|
||||
'Cross-Platform Campaigns: Coordinate messaging across all social channels',
|
||||
'Automated Scheduling: Plan and schedule entire campaigns in one workflow',
|
||||
'Performance Optimization: Scale winning content and pause underperformers',
|
||||
'A/B Testing at Scale: Test hundreds of variations simultaneously',
|
||||
'Campaign Templates: Save and replicate successful campaign structures'
|
||||
],
|
||||
examples: {
|
||||
metrics: [
|
||||
'5x Faster Campaign Launch',
|
||||
'200+ Content Variations',
|
||||
'87% Time Savings',
|
||||
'3.2x Higher Engagement'
|
||||
]
|
||||
},
|
||||
gradient: 'from-blue-500 to-cyan-500'
|
||||
},
|
||||
{
|
||||
id: 'enterprise-workflows',
|
||||
icon: Users,
|
||||
title: 'Enterprise Workflow Management',
|
||||
description: 'Manage large content teams with approval workflows, collaboration tools, and enterprise-grade security.',
|
||||
highlights: [
|
||||
'Team Collaboration: Multiple users with role-based permissions',
|
||||
'Approval Workflows: Custom review and approval processes',
|
||||
'Content Calendar Sync: Enterprise calendar management',
|
||||
'Brand Compliance: Automatic brand guideline enforcement',
|
||||
'Analytics Dashboard: Team performance and content metrics'
|
||||
],
|
||||
examples: {
|
||||
metrics: [
|
||||
'75% Faster Team Onboarding',
|
||||
'90% Reduction in Review Cycles',
|
||||
'Enterprise-Grade Security',
|
||||
'Unlimited Team Members'
|
||||
]
|
||||
},
|
||||
gradient: 'from-green-500 to-emerald-500'
|
||||
}
|
||||
];
|
||||
|
||||
const problemItems: ProblemItem[] = [
|
||||
{
|
||||
icon: Clock,
|
||||
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.',
|
||||
stat: '10x workload for 10x output',
|
||||
color: 'purple'
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
title: 'Inconsistent Campaign Execution',
|
||||
description: 'Launching coordinated campaigns across multiple platforms manually leads to inconsistent messaging and missed opportunities.',
|
||||
stat: '42% campaign inconsistency',
|
||||
color: 'blue'
|
||||
},
|
||||
{
|
||||
icon: BarChart3,
|
||||
title: 'Team Coordination Challenges',
|
||||
description: 'Managing large content teams creates coordination overhead, approval bottlenecks, and brand consistency issues.',
|
||||
stat: '67% team efficiency loss',
|
||||
color: 'orange'
|
||||
},
|
||||
{
|
||||
icon: FileText,
|
||||
title: 'Scale Limitations',
|
||||
description: 'Traditional content creation methods hit hard limits when trying to scale beyond basic social media management.',
|
||||
stat: 'Limited scaling capacity',
|
||||
color: 'red'
|
||||
}
|
||||
];
|
||||
|
||||
const stats: StatItem[] = [
|
||||
{ number: '10x', label: 'faster content production' },
|
||||
{ number: '200+', label: 'pieces generated simultaneously' },
|
||||
{ number: '87%', label: 'reduction in team coordination time' }
|
||||
];
|
||||
|
||||
const industries: Industry[] = [
|
||||
{
|
||||
icon: Building,
|
||||
name: 'Enterprise Marketing',
|
||||
description: 'Scale content production across large organizations with multiple teams and strict brand guidelines.',
|
||||
useCases: [
|
||||
'Global campaign management',
|
||||
'Multi-team collaboration',
|
||||
'Brand compliance at scale',
|
||||
'Enterprise security'
|
||||
],
|
||||
results: 'Results: 10x content output, 75% faster campaigns'
|
||||
},
|
||||
{
|
||||
icon: ShoppingCart,
|
||||
name: 'E-commerce Platforms',
|
||||
description: 'Generate thousands of product descriptions, social posts, and email campaigns simultaneously.',
|
||||
useCases: [
|
||||
'Product catalog scaling',
|
||||
'Seasonal campaign launches',
|
||||
'Multi-platform product launches',
|
||||
'Inventory-based content'
|
||||
],
|
||||
results: 'Results: 200+ products daily, 3.2x conversion rate'
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
name: 'Marketing Agencies',
|
||||
description: 'Manage multiple client accounts with bulk content generation and team collaboration features.',
|
||||
useCases: [
|
||||
'Client content scaling',
|
||||
'Team workflow management',
|
||||
'Campaign coordination',
|
||||
'Performance analytics'
|
||||
],
|
||||
results: 'Results: 5x client capacity, 87% time savings'
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
name: 'Global Brands',
|
||||
description: 'Coordinate international campaigns with localized content across multiple regions and languages.',
|
||||
useCases: [
|
||||
'Multi-region campaigns',
|
||||
'Localized content scaling',
|
||||
'International team coordination',
|
||||
'Global brand consistency'
|
||||
],
|
||||
results: 'Results: 15 regions managed, 95% brand consistency'
|
||||
}
|
||||
];
|
||||
|
||||
const faqs: FAQ[] = [
|
||||
{
|
||||
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.'
|
||||
},
|
||||
{
|
||||
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.'
|
||||
},
|
||||
{
|
||||
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.'
|
||||
},
|
||||
{
|
||||
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.'
|
||||
},
|
||||
{
|
||||
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.'
|
||||
},
|
||||
{
|
||||
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.'
|
||||
}
|
||||
];
|
||||
|
||||
const getColorClass = (color: string): string => {
|
||||
switch (color) {
|
||||
case 'purple': return 'purple';
|
||||
case 'blue': return 'blue';
|
||||
case 'orange': return 'orange';
|
||||
case 'red': return 'red';
|
||||
default: return 'purple';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen" style={{ background: 'linear-gradient(135deg, #c8bcf3a8 0%, #e5c5fdd0 100%)' }}>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden">
|
||||
<div className="absolute inset-0">
|
||||
<div className="absolute top-10 left-10 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
|
||||
<div className="absolute top-40 right-10 w-96 h-96 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse delay-75"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
||||
<div className="text-center">
|
||||
<div className="inline-flex items-center space-x-2 bg-white/80 text-[#6a47ed] px-6 py-3 rounded-full text-sm font-semibold mb-8 backdrop-blur-sm border border-white/40 shadow-lg">
|
||||
<Sparkle className="w-4 h-4" />
|
||||
<span>AI Bulk Content Generation</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-bold text-black mb-6 leading-tight">
|
||||
Bulk Content Generation:
|
||||
<span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
|
||||
Scale Your Content 10x Faster
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<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.
|
||||
Scale your content production without scaling your team or workload.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
|
||||
<button className="group relative bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-10 py-5 rounded-2xl font-semibold text-lg hover:shadow-2xl transition-all duration-300 shadow-xl hover:scale-105 flex items-center space-x-3 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
|
||||
<Rocket className="w-6 h-6 relative z-10" />
|
||||
<span className="relative z-10">Start Your Free Trial</span>
|
||||
<ArrowRight className="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
|
||||
<button className="group border-2 border-black/30 text-black px-10 py-5 rounded-2xl font-semibold text-lg hover:bg-white/50 transition-all duration-300 backdrop-blur-sm hover:border-[#6a47ed]/50 flex items-center space-x-3">
|
||||
<Video className="w-6 h-6" />
|
||||
<span>Watch Demo</span>
|
||||
<Play className="w-4 h-4 fill-current" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center space-x-4 text-black/80 mb-8">
|
||||
<div className="flex items-center space-x-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
|
||||
))}
|
||||
</div>
|
||||
<span className="font-medium">4.9/5 from 1,200+ enterprise teams</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Problem Section */}
|
||||
<section className="py-20 bg-white/30 backdrop-blur-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
|
||||
The Scaling Struggle is
|
||||
<span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
|
||||
Real for Growing Teams
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
|
||||
{problemItems.map((item: ProblemItem, index: number) => (
|
||||
<div
|
||||
key={index}
|
||||
className="group bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-105"
|
||||
>
|
||||
<div className={`w-14 h-14 bg-${getColorClass(item.color)}-100 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
|
||||
<item.icon className={`w-7 h-7 text-${getColorClass(item.color)}-600`} />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-black mb-4">{item.title}</h3>
|
||||
<p className="text-black/80 mb-4 leading-relaxed">{item.description}</p>
|
||||
<div className="bg-black/5 rounded-xl p-3 border border-black/10">
|
||||
<p className="text-sm font-semibold text-black/70">{item.stat}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid md:grid-cols-3 gap-8 text-center mb-12">
|
||||
{stats.map((stat: StatItem, index: number) => (
|
||||
<div key={index} className="bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-purple-100">
|
||||
<div className="text-3xl font-bold text-purple-600 mb-2">{stat.number}</div>
|
||||
<div className="text-gray-600 text-sm">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="bg-gradient-to-r from-[#6a47ed]/10 to-[#ff4ca5]/10 rounded-3xl p-8 border border-[#6a47ed]/20 max-w-2xl mx-auto backdrop-blur-sm">
|
||||
<h3 className="text-2xl md:text-3xl font-bold text-black mb-4">
|
||||
What if you could generate 100 pieces of content in the time it takes to create one?
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* AI Solution Section */}
|
||||
<section className="py-20" style={{ background: 'linear-gradient(135deg, #f9f1ff 0%, #e8ddff 100%)' }}>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
|
||||
Enterprise-Grade Bulk Generation
|
||||
<span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
|
||||
Built for Scale
|
||||
</span>
|
||||
</h2>
|
||||
<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,
|
||||
brand consistency, and team coordination across your entire organization.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-8 mb-12">
|
||||
<div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg">
|
||||
<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]" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-black mb-4">Massive Scale Capacity</h3>
|
||||
<p className="text-black/80">
|
||||
Generate thousands of content pieces simultaneously. Perfect for product catalogs, campaign launches, and content scaling.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg">
|
||||
<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]" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-black mb-4">Campaign Coordination</h3>
|
||||
<p className="text-black/80">
|
||||
Launch coordinated campaigns across multiple platforms with consistent messaging and automated scheduling.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg">
|
||||
<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]" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-black mb-4">Team Workflow Management</h3>
|
||||
<p className="text-black/80">
|
||||
Coordinate large teams with approval workflows, task assignments, and real-time collaboration tools.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Comparison Section */}
|
||||
<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>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<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>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2 text-red-700">
|
||||
<div className="w-2 h-2 bg-red-500 rounded-full"></div>
|
||||
<span>1 piece at a time</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-red-700">
|
||||
<div className="w-2 h-2 bg-red-500 rounded-full"></div>
|
||||
<span>Manual team coordination</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-red-700">
|
||||
<div className="w-2 h-2 bg-red-500 rounded-full"></div>
|
||||
<span>Inconsistent quality</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-red-700">
|
||||
<div className="w-2 h-2 bg-red-500 rounded-full"></div>
|
||||
<span>Limited scaling capacity</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2 text-green-700">
|
||||
<Check className="w-4 h-4" />
|
||||
<span>100+ pieces simultaneously</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-green-700">
|
||||
<Check className="w-4 h-4" />
|
||||
<span>Automated workflows</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-green-700">
|
||||
<Check className="w-4 h-4" />
|
||||
<span>Consistent brand quality</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-green-700">
|
||||
<Check className="w-4 h-4" />
|
||||
<span>Unlimited scaling</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Testimonial */}
|
||||
<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" />
|
||||
<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.
|
||||
The bulk generation feature transformed our content strategy and allowed us to scale without adding team members."
|
||||
</p>
|
||||
<div>
|
||||
<p className="font-semibold text-black">Content Director</p>
|
||||
<p className="text-black/70 text-sm">Global E-commerce Brand</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="py-20 bg-white/30 backdrop-blur-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
|
||||
Everything You Need for
|
||||
<span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
|
||||
Massive Content Scaling
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Feature Navigation */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-12">
|
||||
{features.map((feature: Feature) => (
|
||||
<button
|
||||
key={feature.id}
|
||||
onClick={() => setActiveFeature(feature.id)}
|
||||
onMouseEnter={() => setHoveredCard(feature.id)}
|
||||
onMouseLeave={() => setHoveredCard(null)}
|
||||
className={`p-6 rounded-2xl text-left transition-all duration-300 backdrop-blur-sm border-2 ${
|
||||
activeFeature === feature.id
|
||||
? 'bg-white shadow-xl border-[#6a47ed] transform scale-105'
|
||||
: hoveredCard === feature.id
|
||||
? 'bg-white/80 shadow-lg border-white/40 transform scale-102'
|
||||
: 'bg-white/50 border-white/20'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className={`w-12 h-12 rounded-xl flex items-center justify-center bg-gradient-to-r ${feature.gradient}`}>
|
||||
<feature.icon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
{feature.popular && (
|
||||
<span className="bg-[#ff4ca5] text-white text-xs px-2 py-1 rounded-full">Most Popular</span>
|
||||
)}
|
||||
</div>
|
||||
<h3 className="font-bold text-black mb-2 text-left">{feature.title}</h3>
|
||||
<p className="text-black/70 text-sm text-left leading-relaxed">
|
||||
{feature.description.split('.').slice(0, 2).join('.')}.
|
||||
</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Active Feature Detail */}
|
||||
{features.map((feature: Feature) => (
|
||||
<div
|
||||
key={feature.id}
|
||||
className={`bg-white/80 backdrop-blur-sm rounded-3xl shadow-2xl border border-white/20 p-8 transition-all duration-500 ${
|
||||
activeFeature === feature.id ? 'block animate-fadeIn' : 'hidden'
|
||||
}`}
|
||||
>
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-12">
|
||||
<div>
|
||||
<div className="flex items-center space-x-4 mb-6">
|
||||
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center bg-gradient-to-r ${feature.gradient}`}>
|
||||
<feature.icon className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-3xl font-bold text-black">{feature.title}</h3>
|
||||
<p className="text-black/70">{feature.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{feature.highlights.map((highlight: string, index: number) => (
|
||||
<div key={index} className="flex items-start space-x-4 p-4 bg-white/50 rounded-xl border border-white/30">
|
||||
<div className="w-6 h-6 bg-[#6a47ed]/10 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
|
||||
<Check className="w-4 h-4 text-[#6a47ed]" />
|
||||
</div>
|
||||
<span className="text-black/80 leading-relaxed">{highlight}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{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">
|
||||
<h4 className="font-bold text-black mb-4 text-lg">E-commerce Example</h4>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="flex items-center space-x-2 mb-2">
|
||||
<div className="w-3 h-3 bg-[#6a47ed] rounded-full"></div>
|
||||
<p className="text-sm font-semibold text-black/70">Input</p>
|
||||
</div>
|
||||
<div className="bg-white/60 rounded-xl p-4 border border-white/30">
|
||||
<p className="text-black/80 font-medium">{feature.examples.input}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center space-x-2 mb-2">
|
||||
<div className="w-3 h-3 bg-[#ff4ca5] rounded-full"></div>
|
||||
<p className="text-sm font-semibold text-black/70">Output</p>
|
||||
</div>
|
||||
<div className="bg-white/60 rounded-xl p-4 border border-white/30">
|
||||
<p className="text-black/80 font-medium">{feature.examples.output}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{feature.examples?.metrics && (
|
||||
<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">
|
||||
Enterprise Performance Metrics
|
||||
</h4>
|
||||
<div className="space-y-3">
|
||||
{feature.examples.metrics.map((metric: string, index: number) => (
|
||||
<div key={index} 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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Industries Section */}
|
||||
<section className="py-20" style={{ background: 'linear-gradient(135deg, #f9f1ff 0%, #e8ddff 100%)' }}>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
|
||||
Trusted by Enterprise Teams
|
||||
<span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
|
||||
Across Industries
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{industries.map((industry: Industry, index: number) => (
|
||||
<div key={index} className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg hover:shadow-2xl transition-all duration-300">
|
||||
<div className="w-14 h-14 bg-purple-100 rounded-2xl flex items-center justify-center mb-6">
|
||||
<industry.icon className="w-7 h-7 text-purple-600" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-black mb-4">{industry.name}</h3>
|
||||
<p className="text-black/80 mb-6 leading-relaxed">{industry.description}</p>
|
||||
|
||||
<div className="space-y-2 mb-6">
|
||||
{industry.useCases.map((useCase: string, idx: number) => (
|
||||
<div key={idx} className="flex items-center gap-2 text-sm text-black/70">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
{useCase}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="bg-purple-50 p-4 rounded-2xl border border-purple-200">
|
||||
<p className="text-purple-700 text-sm font-semibold">{industry.results}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Setup Process */}
|
||||
<section className="py-20 bg-white/30 backdrop-blur-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
|
||||
From Zero to Scale in Hours,
|
||||
<span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
|
||||
Not Months
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 max-w-6xl mx-auto">
|
||||
{[
|
||||
{
|
||||
step: 1,
|
||||
title: 'Upload Your Content Needs',
|
||||
description: 'Import product catalogs, campaign briefs, or content calendars via CSV or our template system.',
|
||||
content: '[Content upload interface]'
|
||||
},
|
||||
{
|
||||
step: 2,
|
||||
title: 'Configure Bulk Settings',
|
||||
description: 'Set brand guidelines, tone preferences, and scaling parameters for your content generation.',
|
||||
content: '[Bulk configuration dashboard]'
|
||||
},
|
||||
{
|
||||
step: 3,
|
||||
title: 'Generate & Review',
|
||||
description: 'Generate hundreds of content pieces simultaneously and review using our batch editing tools.',
|
||||
content: '[Batch review interface]'
|
||||
},
|
||||
{
|
||||
step: 4,
|
||||
title: 'Deploy at Scale',
|
||||
description: 'Publish across all platforms, assign to team members, or export for further processing.',
|
||||
content: '[Deployment dashboard]'
|
||||
}
|
||||
].map((item, index) => (
|
||||
<div key={index} className="text-center">
|
||||
<div className="w-20 h-20 bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] rounded-2xl flex items-center justify-center mx-auto mb-4 text-white font-bold text-xl">
|
||||
{item.step}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-black mb-4">{item.title}</h3>
|
||||
<p className="text-black/80 mb-4 leading-relaxed">{item.description}</p>
|
||||
<div className="bg-white/60 rounded-xl h-32 flex items-center justify-center border border-white/30">
|
||||
<span className="text-black/50 text-sm">{item.content}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-12">
|
||||
<button className="bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-12 py-5 rounded-2xl font-semibold text-lg hover:shadow-2xl transition-all duration-300 shadow-xl hover:scale-105">
|
||||
Start Your Free Trial →
|
||||
</button>
|
||||
<p className="text-black/70 text-sm mt-4">
|
||||
No credit card required • Setup in 10 minutes • Generate your first batch today
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="py-20" style={{ background: 'linear-gradient(135deg, #f9f1ff 0%, #e8ddff 100%)' }}>
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-black mb-6">
|
||||
Frequently Asked
|
||||
<span className="block bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] bg-clip-text text-transparent">
|
||||
Questions
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{faqs.map((faq: FAQ, index: number) => (
|
||||
<div key={index} className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 border border-white/20 shadow-lg">
|
||||
<h3 className="text-lg font-bold text-black mb-3">{faq.question}</h3>
|
||||
<p className="text-black/80 leading-relaxed">{faq.answer}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="py-20 bg-gradient-to-br from-[#6a47ed] to-[#ff4ca5] relative overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute top-0 left-0 w-32 h-32 bg-white rounded-full"></div>
|
||||
<div className="absolute top-0 right-0 w-48 h-48 bg-white rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||
Stop Creating Content One Piece
|
||||
<span className="block">at a Time</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-xl text-white/90 mb-8">
|
||||
Join 1,200+ enterprise teams scaling their content production 10x with bulk generation
|
||||
</p>
|
||||
|
||||
<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: 'Enterprise Security', desc: 'Enterprise-grade security and compliance' }
|
||||
].map((item, index) => (
|
||||
<div key={index} className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
|
||||
<h3 className="text-lg font-bold text-white mb-2">{item.title}</h3>
|
||||
<p className="text-white/80 text-sm">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<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',
|
||||
'Coordinate unlimited team members',
|
||||
'Maintain brand consistency at scale',
|
||||
'Enterprise-grade security and compliance',
|
||||
'API access and custom integrations'
|
||||
].map((benefit: string, index: number) => (
|
||||
<div key={index} className="flex items-center gap-3 text-white">
|
||||
<Check className="w-5 h-5 text-green-300" />
|
||||
<span>{benefit}</span>
|
||||
</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">
|
||||
Start Your 14-Day Free Trial →
|
||||
</button>
|
||||
|
||||
<p className="text-white/80 text-sm">
|
||||
No credit card required • Generate your first batch today • 30-day money-back guarantee
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BulkGeneration;
|
||||
|
|
@ -1,108 +1,68 @@
|
|||
"use client";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { Menu, ChevronDown, ChevronUp, ArrowRight } from "lucide-react";
|
||||
import { Menu, ChevronDown, ChevronUp, ArrowRight, Sparkles, Zap, Palette, TrendingUp, FileText, Video, Megaphone, Calendar, BarChart } from "lucide-react";
|
||||
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "./ui/sheet";
|
||||
import { useState } from "react";
|
||||
import { StickyNote } from 'lucide-react';
|
||||
|
||||
|
||||
const megaMenuData = {
|
||||
features: [
|
||||
{
|
||||
category: "AI Design",
|
||||
items: [
|
||||
{
|
||||
icon: StickyNote,
|
||||
title: "AI Social Media Content Generator",
|
||||
description: "Create stunning slides in minutes with our AI tool",
|
||||
route: "/ai-content-generator"
|
||||
},
|
||||
{
|
||||
icon: StickyNote,
|
||||
title: "AI Thumbnail Maker",
|
||||
description: "Craft eye-catching thumbnails fast",
|
||||
route: "/ai-image-generator"
|
||||
},
|
||||
{
|
||||
icon: StickyNote,
|
||||
title: "AI-Powered Meta Ads Optimization",
|
||||
description: "Create high-converting ads in seconds",
|
||||
route: "/ai-meta-ads-optimization"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "seo-geo-article-writer",
|
||||
items: [
|
||||
{
|
||||
icon: StickyNote,
|
||||
title: "seo-geo-article-writer",
|
||||
description: "Turn words into captivating videos",
|
||||
route: "/seo-geo-article-writer"
|
||||
},
|
||||
{
|
||||
icon:StickyNote,
|
||||
title: "ai-video-generator",
|
||||
description: "Repurpose content from YouTube, TikTok",
|
||||
route: "/ai-video-generator"
|
||||
},
|
||||
{
|
||||
icon:StickyNote,
|
||||
title: "AI Text to Speech",
|
||||
description: "Convert text to life-like speech",
|
||||
route: "/aivideo-generation"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "AI Writer",
|
||||
items: [
|
||||
{
|
||||
icon: StickyNote,
|
||||
title: "AI Blog Writer",
|
||||
description: "Turn ideas into SEO-optimized posts",
|
||||
route: "/ai-writer"
|
||||
},
|
||||
{
|
||||
icon: StickyNote,
|
||||
title: "AI Essay Writer",
|
||||
description: "Get top grades with smart AI help",
|
||||
route: "/ai-writer"
|
||||
},
|
||||
{
|
||||
icon: StickyNote,
|
||||
title: "AI Article Writer",
|
||||
description: "Transform ideas into engaging stories",
|
||||
route: "/ai-writer"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "Social Media AI",
|
||||
items: [
|
||||
{
|
||||
icon: StickyNote,
|
||||
title: "Social Media Scheduler",
|
||||
description: "Plan your success ahead of time",
|
||||
route: "/social-media"
|
||||
},
|
||||
{
|
||||
icon: StickyNote,
|
||||
title: "Social Media Post Generator",
|
||||
description: "Craft captivating posts in seconds",
|
||||
route: "/social-media"
|
||||
},
|
||||
{
|
||||
icon: StickyNote,
|
||||
title: "Social Media Analytics",
|
||||
description: "Unlock actionable insights",
|
||||
route: "/social-media"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
const megaMenuData = [
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "AI Social Media Content Generator",
|
||||
description: "Create stunning social media posts in minutes",
|
||||
route: "/ai-content-generator",
|
||||
badge: "Popular"
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
title: "AI Image Generator",
|
||||
description: "Craft eye-catching thumbnails instantly",
|
||||
route: "/ai-image-generator",
|
||||
badge: "New"
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
title: "AI-Powered Meta Ads Optimization",
|
||||
description: "Create high-converting ads in seconds",
|
||||
route: "/ai-meta-ads-optimization"
|
||||
},
|
||||
{
|
||||
icon: FileText,
|
||||
title: "SEO Geo Article Writer",
|
||||
description: "Location-optimized content that ranks",
|
||||
route: "/seo-geo-article-writer"
|
||||
},
|
||||
{
|
||||
icon: Video,
|
||||
title: "AI Video Generator",
|
||||
description: "Turn text into engaging videos automatically",
|
||||
route: "/ai-video-generator"
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "AI Bulk Content",
|
||||
description: "SEO-optimized articles that drive traffic",
|
||||
route: "/bulk-content"
|
||||
},
|
||||
{
|
||||
icon: Calendar,
|
||||
title: "Social Media Scheduler",
|
||||
description: "Plan and automate your content calendar",
|
||||
route: "/social-media"
|
||||
},
|
||||
{
|
||||
icon: Megaphone,
|
||||
title: "Social Media Post Generator",
|
||||
description: "Captivate your audience with AI-powered posts",
|
||||
route: "/social-media"
|
||||
},
|
||||
{
|
||||
icon: BarChart,
|
||||
title: "Social Media Analytics",
|
||||
description: "Data-driven insights to grow your presence",
|
||||
route: "/social-media"
|
||||
}
|
||||
];
|
||||
|
||||
export default function Header() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
|
@ -125,7 +85,7 @@ export default function Header() {
|
|||
|
||||
{/* Desktop Menu */}
|
||||
<div className="hidden md:flex items-center space-x-16 px-8 pt-5 pb-4 rounded-b-3xl text-gray-800 font-medium bg-white shadow-sm">
|
||||
<Link href="/" className="hover:text-purple-600">
|
||||
<Link href="/" className="hover:text-purple-600 transition-colors duration-200">
|
||||
Home
|
||||
</Link>
|
||||
|
||||
|
|
@ -134,8 +94,8 @@ export default function Header() {
|
|||
onMouseEnter={() => setActiveMenu('features')}
|
||||
onMouseLeave={() => setActiveMenu(null)}
|
||||
>
|
||||
<button className="flex items-center gap-1 hover:text-purple-600">
|
||||
Feature
|
||||
<button className="flex items-center gap-1 hover:text-purple-600 transition-colors duration-200 font-semibold">
|
||||
Features
|
||||
{activeMenu === 'features' ? (
|
||||
<ChevronUp className="w-4 h-4" />
|
||||
) : (
|
||||
|
|
@ -144,51 +104,57 @@ export default function Header() {
|
|||
</button>
|
||||
|
||||
{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="grid grid-cols-4 gap-10">
|
||||
{megaMenuData.features.map((category, idx) => (
|
||||
<div key={idx}>
|
||||
<h3 className="text-sm font-bold text-purple-600 mb-4 pb-2 border-b-2 border-purple-200">
|
||||
{category.category}
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{category.items.map((item, itemIdx) => (
|
||||
<Link
|
||||
key={itemIdx}
|
||||
href={item.route}
|
||||
className="group/item block p-3 rounded-xl hover:bg-gradient-to-r hover:from-purple-50 hover:to-pink-50 transition-all duration-200"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<item.icon className="w-5 h-5 text-blue-500" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1">
|
||||
<h4 className="font-semibold text-sm text-gray-900 group-hover/item:text-purple-600 transition-colors">
|
||||
{item.title}
|
||||
</h4>
|
||||
<ArrowRight className="w-3 h-3 text-purple-600 opacity-0 group-hover/item:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-1 leading-tight">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
{megaMenuData.map((item, idx) => (
|
||||
<Link
|
||||
key={idx}
|
||||
href={item.route}
|
||||
className="group/item flex items-start gap-4 p-4 rounded-xl hover:bg-gradient-to-r hover:from-purple-50 hover:to-blue-50 transition-all duration-200 border border-transparent hover:border-purple-100"
|
||||
>
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-purple-500 to-blue-500 rounded-lg flex items-center justify-center">
|
||||
<item.icon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h4 className="font-semibold text-gray-900 group-hover/item:text-purple-600 transition-colors text-sm leading-tight">
|
||||
{item.title}
|
||||
</h4>
|
||||
{item.badge && (
|
||||
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
|
||||
item.badge === "Popular"
|
||||
? "bg-orange-100 text-orange-700"
|
||||
: "bg-green-100 text-green-700"
|
||||
}`}>
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-600 leading-relaxed mb-2">
|
||||
{item.description}
|
||||
</p>
|
||||
<div className="flex items-center gap-1 text-purple-600 opacity-0 group-hover/item:opacity-100 transition-opacity">
|
||||
<span className="text-xs font-medium">Learn more</span>
|
||||
<ArrowRight className="w-3 h-3" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Link href="/#pricingSection" className="hover:text-purple-600">
|
||||
<Link href="/#pricingSection" className="hover:text-purple-600 transition-colors duration-200">
|
||||
Pricing
|
||||
</Link>
|
||||
|
||||
<Link href="/contact" className="hover:text-purple-600">
|
||||
<Link href="/contact" className="hover:text-purple-600 transition-colors duration-200">
|
||||
Contact
|
||||
</Link>
|
||||
</div>
|
||||
|
|
@ -196,12 +162,12 @@ export default function Header() {
|
|||
{/* Login & Sign Up Buttons */}
|
||||
<div className="hidden md:flex space-x-4">
|
||||
<Link href="https://dashboard.planpostai.com/">
|
||||
<button className="font-bold px-5 py-2 border-[1px] border-[#6A47ED] text-[#6A47ED] rounded-xl hover:bg-purple-100">
|
||||
<button className="font-bold px-5 py-2 border-[1px] border-[#6A47ED] text-[#6A47ED] rounded-xl hover:bg-purple-100 transition-colors duration-200">
|
||||
Log in
|
||||
</button>
|
||||
</Link>
|
||||
<Link href="https://dashboard.planpostai.com/">
|
||||
<button className="font-bold px-5 py-2 bg-[#6A47ED] text-white rounded-xl hover:bg-purple-700">
|
||||
<button className="font-bold px-5 py-2 bg-[#6A47ED] text-white rounded-xl hover:bg-purple-700 transition-colors duration-200">
|
||||
Sign Up
|
||||
</button>
|
||||
</Link>
|
||||
|
|
@ -235,36 +201,37 @@ export default function Header() {
|
|||
<li>
|
||||
<Link
|
||||
href="/"
|
||||
className="hover:text-purple-600 text-lg"
|
||||
className="hover:text-purple-600 text-lg transition-colors"
|
||||
onClick={handleClose}
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<div className="space-y-3 ">
|
||||
<div className="space-y-4">
|
||||
<p className="text-lg font-semibold text-purple-600">Features</p>
|
||||
{megaMenuData.features.map((category, idx) => (
|
||||
<div key={idx} className="ml-4 space-y-2">
|
||||
<p className="text-sm font-bold text-gray-700">{category.category}</p>
|
||||
{category.items.map((item, itemIdx) => (
|
||||
<Link
|
||||
key={itemIdx}
|
||||
href={item.route}
|
||||
className="block text-sm text-gray-600 hover:text-purple-600 ml-2"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<item.icon className="w-5 h-5 text-blue-500" />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
<div className="grid gap-3 ml-2">
|
||||
{megaMenuData.map((item, idx) => (
|
||||
<Link
|
||||
key={idx}
|
||||
href={item.route}
|
||||
className="flex items-center gap-3 p-3 rounded-lg hover:bg-purple-50 transition-colors"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<item.icon className="w-5 h-5 text-purple-600 flex-shrink-0" />
|
||||
<div>
|
||||
<p className="font-medium text-sm text-gray-900">{item.title}</p>
|
||||
<p className="text-xs text-gray-600">{item.description}</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/#pricingSection"
|
||||
className="hover:text-purple-600 text-lg"
|
||||
className="hover:text-purple-600 text-lg transition-colors"
|
||||
onClick={handleClose}
|
||||
>
|
||||
Pricing
|
||||
|
|
@ -273,7 +240,7 @@ export default function Header() {
|
|||
<li>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="hover:text-purple-600 text-lg"
|
||||
className="hover:text-purple-600 text-lg transition-colors"
|
||||
onClick={handleClose}
|
||||
>
|
||||
Contact
|
||||
|
|
@ -289,7 +256,7 @@ export default function Header() {
|
|||
className="w-full"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<button className="w-full font-bold px-5 py-3 border-[1px] border-[#6A47ED] text-[#6A47ED] rounded-xl hover:bg-purple-100">
|
||||
<button className="w-full font-bold px-5 py-3 border-[1px] border-[#6A47ED] text-[#6A47ED] rounded-xl hover:bg-purple-100 transition-colors">
|
||||
Log in
|
||||
</button>
|
||||
</Link>
|
||||
|
|
@ -298,7 +265,7 @@ export default function Header() {
|
|||
className="w-full"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<button className="w-full font-bold px-5 py-3 bg-[#6A47ED] text-white rounded-xl hover:bg-purple-700">
|
||||
<button className="w-full font-bold px-5 py-3 bg-[#6A47ED] text-white rounded-xl hover:bg-purple-700 transition-colors">
|
||||
Sign Up
|
||||
</button>
|
||||
</Link>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue