diff --git a/src/app/(features-landing)/ai-content-generator/page.tsx b/src/app/(features-landing)/ai-content-generator/page.tsx index d83071e..ce14f52 100644 --- a/src/app/(features-landing)/ai-content-generator/page.tsx +++ b/src/app/(features-landing)/ai-content-generator/page.tsx @@ -1,15 +1,15 @@ -'use client' +"use client"; -import React, { useState } from 'react'; -import { - Check, - Clock, - Zap, - Calendar, - Image, - MessageSquare, - Hash, - TrendingUp, +import React, { useState } from "react"; +import { + Check, + Clock, + Zap, + Calendar, + Image, + MessageSquare, + Hash, + TrendingUp, Brain, Star, ArrowRight, @@ -17,181 +17,212 @@ import { Target, Sparkles, Quote, - Video -} from 'lucide-react'; -import Link from 'next/link'; +} from "lucide-react"; +import Link from "next/link"; const SocialMediaPost = () => { - const [activeFeature, setActiveFeature] = useState('ideation'); + const [activeFeature, setActiveFeature] = useState("ideation"); const features = [ { - id: 'ideation', + id: "ideation", icon: Brain, - title: 'AI Content Ideation Engine', - description: 'Never face a blank content calendar again. Our AI analyzes trending topics in your niche, seasonal events, and your past high-performing content to generate endless post ideas that resonate with your audience.', + title: "AI Content Ideation Engine", + description: + "Never face a blank content calendar again. Our AI analyzes trending topics in your niche, seasonal events, and your past high-performing content to generate endless post ideas that resonate with your audience.", highlights: [ - 'Topic Cluster Generation: Get 50+ related post ideas from a single keyword', - 'Seasonal Content Calendar: Automatically generated holiday and event-specific content', - 'Competitor Content Analysis: See what's working for similar brands in your space', - 'Evergreen Content Suggestions: Identify topics with long-term relevance' + "Topic Cluster Generation: Get 50+ related post ideas from a single keyword", + "Seasonal Content Calendar: Automatically generated holiday and event-specific content", + "Competitor Content Analysis: See what's working for similar brands in your space", + "Evergreen Content Suggestions: Identify topics with long-term relevance", ], example: { - input: 'vegan meal prep', - output: '25 post ideas including "5 Quick Vegan Lunches Under 400 Calories," "Meal Prep Mistakes Every Vegan Should Avoid," "Seasonal Vegan Grocery Shopping Guide," and engagement questions like "What's your favorite vegan protein source?"' + input: "vegan meal prep", + output: + '25 post ideas including "5 Quick Vegan Lunches Under 400 Calories," "Meal Prep Mistakes Every Vegan Should Avoid," "Seasonal Vegan Grocery Shopping Guide," and engagement questions like "What's your favorite vegan protein source?"', }, - popular: true + popular: true, }, { - id: 'caption', + id: "caption", icon: MessageSquare, - title: 'AI Caption Generator with Brand Voice Matching', - description: 'Captions that sound like you wrote them—because the AI learned your voice. Train our AI on your existing content, and it will generate captions that maintain your unique tone, style, and personality.', + title: "AI Caption Generator with Brand Voice Matching", + description: + "Captions that sound like you wrote them—because the AI learned your voice. Train our AI on your existing content, and it will generate captions that maintain your unique tone, style, and personality.", highlights: [ - 'Multi-Tone Capability: Switch between professional, casual, witty, or inspirational tones', - 'Platform-Optimized Length: Perfect character counts for each platform's algorithm', - 'Call-to-Action Integration: Automatically include engaging CTAs that drive action', - 'Emoji Optimization: Strategic emoji placement that increases engagement by 24%' + "Multi-Tone Capability: Switch between professional, casual, witty, or inspirational tones", + "Platform-Optimized Length: Perfect character counts for each platform's algorithm", + "Call-to-Action Integration: Automatically include engaging CTAs that drive action", + "Emoji Optimization: Strategic emoji placement that increases engagement by 24%", ], example: { before: '"Check out our new product"', - after: '"Guess what just landed! ✨ Our team has been working tirelessly to bring you something truly special. The wait is over - our [Product Name] is here to revolutionize your [benefit]. Ready to be one of the first to experience it? 👇 Click the link in our bio!"' - } - }, - { - id: 'hashtag', - icon: Hash, - title: 'Intelligent Hashtag Strategy Engine', - description: 'Stop guessing which hashtags will work. Our AI analyzes real-time performance data to recommend high-reach, low-competition hashtags specific to your content and audience.', - highlights: [ - 'Hashtag Performance Prediction: Know which tags will perform before you post', - 'Niche-Specific Recommendations: Discover hidden gem hashtags in your industry', - 'Banished Shadowban Triggers: Avoid flagged and overused hashtags automatically', - 'Optimal Hashtag Quantity: Platform-specific recommendations (5-10 for Instagram, 1-2 for Twitter, etc.)' - ], - example: { - input: 'yoga instructor posting about morning routines', - output: 'Broad Reach: #mindfulness #wellness | Niche Specific: #yogaeveryday #morningyoga | Micro Community: #yogateacherssofinstagram #6amyogacrew' - } - }, - { - id: 'image', - icon: Image, - title: 'AI Image & Visual Content Generator', - description: 'Stunning visuals that match your brand—no design skills required. Integrated DALL-E technology creates custom images, graphics, and aesthetic compositions that align with your brand guidelines.', - highlights: [ - 'Brand Style Memory: Save your colors, fonts, and logo for consistent visuals', - 'Platform-Specific Dimensions: Perfectly sized for Instagram posts, stories, Pinterest pins, etc.', - 'Template Library: 500+ customizable templates for different content types', - 'Visual Trend Analysis: AI suggests styles and compositions currently performing well in your niche' - ], - example: { - input: 'minimalist coffee shop aesthetic, warm tones, morning light, quote about coffee', - output: '5 unique social media images with your brand colors and logo placement, optimized for Instagram feed and stories' + after: + '"Guess what just landed! ✨ Our team has been working tirelessly to bring you something truly special. The wait is over - our [Product Name] is here to revolutionize your [benefit]. Ready to be one of the first to experience it? 👇 Click the link in our bio!"', }, - new: true - } + }, + { + id: "hashtag", + icon: Hash, + title: "Intelligent Hashtag Strategy Engine", + description: + "Stop guessing which hashtags will work. Our AI analyzes real-time performance data to recommend high-reach, low-competition hashtags specific to your content and audience.", + highlights: [ + "Hashtag Performance Prediction: Know which tags will perform before you post", + "Niche-Specific Recommendations: Discover hidden gem hashtags in your industry", + "Banished Shadowban Triggers: Avoid flagged and overused hashtags automatically", + "Optimal Hashtag Quantity: Platform-specific recommendations (5-10 for Instagram, 1-2 for Twitter, etc.)", + ], + example: { + input: "yoga instructor posting about morning routines", + output: + "Broad Reach: #mindfulness #wellness | Niche Specific: #yogaeveryday #morningyoga | Micro Community: #yogateacherssofinstagram #6amyogacrew", + }, + }, + { + id: "image", + icon: Image, + title: "AI Image & Visual Content Generator", + description: + "Stunning visuals that match your brand—no design skills required. Integrated DALL-E technology creates custom images, graphics, and aesthetic compositions that align with your brand guidelines.", + highlights: [ + "Brand Style Memory: Save your colors, fonts, and logo for consistent visuals", + "Platform-Specific Dimensions: Perfectly sized for Instagram posts, stories, Pinterest pins, etc.", + "Template Library: 500+ customizable templates for different content types", + "Visual Trend Analysis: AI suggests styles and compositions currently performing well in your niche", + ], + example: { + input: + "minimalist coffee shop aesthetic, warm tones, morning light, quote about coffee", + output: + "5 unique social media images with your brand colors and logo placement, optimized for Instagram feed and stories", + }, + new: true, + }, ]; const testimonials = [ { - name: 'Maria Rodriguez', - role: 'Founder of Bloom Boutique', - content: '"I went from spending 8 hours weekly on social media to 30 minutes. PlanPost AI not only saved me time but increased our engagement by 240% in the first month."', - icon: Heart + name: "Maria Rodriguez", + role: "Founder of Bloom Boutique", + content: + '"I went from spending 8 hours weekly on social media to 30 minutes. PlanPost AI not only saved me time but increased our engagement by 240% in the first month."', + icon: Heart, }, { - name: 'David Chen', - role: 'E-commerce Founder', - content: '"I didn't realize how much mental energy social media was consuming until I started using PlanPost AI. That constant background anxiety about content is completely gone."', - icon: Brain + name: "David Chen", + role: "E-commerce Founder", + content: + '"I didn't realize how much mental energy social media was consuming until I started using PlanPost AI. That constant background anxiety about content is completely gone."', + icon: Brain, }, { - name: 'Sarah Johnson', - role: 'Nutrition Coach', - content: '"For the first time, I feel completely confident in every post I publish. I know it's optimized, timed perfectly, and likely to perform well. That confidence is priceless."', - icon: Target + name: "Sarah Johnson", + role: "Nutrition Coach", + content: + '"For the first time, I feel completely confident in every post I publish. I know it's optimized, timed perfectly, and likely to perform well. That confidence is priceless."', + icon: Target, }, { - name: 'Miguel Santos', - role: 'Photographer', - content: '"I was so burned out on social media I considered quitting. PlanPost AI removed the grind and let me rediscover why I started creating content in the first place."', - icon: Sparkles + name: "Miguel Santos", + role: "Photographer", + content: + '"I was so burned out on social media I considered quitting. PlanPost AI removed the grind and let me rediscover why I started creating content in the first place."', + icon: Sparkles, }, { - name: 'Rachel Brown', - role: 'Freelance Designer', - content: '"I got 12 hours of my week back. I'm using that time for client work that actually pays my bills, and my social media has never looked better. It's a win-win."', - icon: Clock + name: "Rachel Brown", + role: "Freelance Designer", + content: + '"I got 12 hours of my week back. I'm using that time for client work that actually pays my bills, and my social media has never looked better. It's a win-win."', + icon: Clock, }, { - name: 'Jessica Williams', - role: 'CEO of Bloom & Grow Digital', - content: '"PlanPost AI transformed our agency. We went from struggling to keep up with client content to delivering exceptional results with a fraction of the effort."', - icon: TrendingUp - } + name: "Jessica Williams", + role: "CEO of Bloom & Grow Digital", + content: + '"PlanPost AI transformed our agency. We went from struggling to keep up with client content to delivering exceptional results with a fraction of the effort."', + icon: TrendingUp, + }, ]; const caseStudies = [ { - company: 'Bloom & Grow Digital Agency', - metric: '+240%', - metricLabel: 'Engagement', - challenge: 'Managing social media for 12+ clients with limited team resources. Spending 4-6 hours per client weekly on content creation, leading to burnout and inconsistent results across accounts.', - solution: 'Implemented AI content generation for all client accounts, using brand voice matching for each client's unique tone and audience.', + company: "Bloom & Grow Digital Agency", + metric: "+240%", + metricLabel: "Engagement", + challenge: + "Managing social media for 12+ clients with limited team resources. Spending 4-6 hours per client weekly on content creation, leading to burnout and inconsistent results across accounts.", + solution: + "Implemented AI content generation for all client accounts, using brand voice matching for each client's unique tone and audience.", results: [ - '78% Reduction in content creation time', - '240% Average engagement increase', - '15 Hours saved weekly', - '5 new clients onboarded without adding staff' - ] + "78% Reduction in content creation time", + "240% Average engagement increase", + "15 Hours saved weekly", + "5 new clients onboarded without adding staff", + ], }, { - company: 'Mountain Top Fitness', - metric: '+315%', - metricLabel: 'Followers', - challenge: 'Local gym struggling to attract new members through social media. Inconsistent posting, generic content, and no clear strategy led to stagnant growth despite having a great facility.', - solution: 'Used AI to develop a comprehensive content strategy focused on local SEO, community building, and value-driven content that addressed specific fitness concerns of their target demographic.', + company: "Mountain Top Fitness", + metric: "+315%", + metricLabel: "Followers", + challenge: + "Local gym struggling to attract new members through social media. Inconsistent posting, generic content, and no clear strategy led to stagnant growth despite having a great facility.", + solution: + "Used AI to develop a comprehensive content strategy focused on local SEO, community building, and value-driven content that addressed specific fitness concerns of their target demographic.", results: [ - '315% Follower growth', - '42 New members from social media', - '$18,900 Additional annual revenue', - 'Consistent posting schedule achieved' - ] - } + "315% Follower growth", + "42 New members from social media", + "$18,900 Additional annual revenue", + "Consistent posting schedule achieved", + ], + }, ]; const faqs = [ { - question: 'How does AI content generation work?', - answer: 'PlanPost's generator relies on state-of-the-art machine learning and natural language processing. For example, models like GPT-4 analyze vast amounts of text to learn language patterns. When you give a prompt, the AI predicts the best words and sentences to fit your request, producing coherent, relevant content instantly. Over time it adapts: the AI learns from your edits and past campaigns to make future content even better.' + question: "How does AI content generation work?", + answer: + "PlanPost's generator relies on state-of-the-art machine learning and natural language processing. For example, models like GPT-4 analyze vast amounts of text to learn language patterns. When you give a prompt, the AI predicts the best words and sentences to fit your request, producing coherent, relevant content instantly. Over time it adapts: the AI learns from your edits and past campaigns to make future content even better.", }, { - question: 'How is PlanPost AI different from other tools?', - answer: 'Many AI tools focus on a single task. For instance, Jasper promotes enterprise-level content acceleration, and Ocoya specializes in social media posting and design. PlanPost AI stands out by combining these into one platform. It not only writes copy like Jasper, but also includes Canva-style design tools and one-click scheduling like Ocoya. Simplified AI is also all-in-one, but PlanPost specifically targets U.S. marketers with easy workflows and U.S.-based support.' + question: "How is PlanPost AI different from other tools?", + answer: + "Many AI tools focus on a single task. For instance, Jasper promotes enterprise-level content acceleration, and Ocoya specializes in social media posting and design. PlanPost AI stands out by combining these into one platform. It not only writes copy like Jasper, but also includes Canva-style design tools and one-click scheduling like Ocoya. Simplified AI is also all-in-one, but PlanPost specifically targets U.S. marketers with easy workflows and U.S.-based support.", }, { - question: 'How secure and unique is the content?', - answer: 'PlanPost's AI creates original content in real time, based on your prompts and brand data. The output isn't copied from anywhere – it's generated anew each time. Of course, it's best practice to review and fine-tune any AI draft to ensure accuracy and the right tone. For businesses concerned about SEO and uniqueness, PlanPost includes tools to check for duplicate content and to insert keywords. Many users find that AI-generated content is a great first draft that they can polish, giving them both speed and originality.' + question: "How secure and unique is the content?", + answer: + "PlanPost's AI creates original content in real time, based on your prompts and brand data. The output isn't copied from anywhere – it's generated anew each time. Of course, it's best practice to review and fine-tune any AI draft to ensure accuracy and the right tone. For businesses concerned about SEO and uniqueness, PlanPost includes tools to check for duplicate content and to insert keywords. Many users find that AI-generated content is a great first draft that they can polish, giving them both speed and originality.", }, { - question: 'How does the AI learn my brand voice?', - answer: 'You can either complete our brand voice questionnaire (takes 5 minutes) or connect your existing social media accounts. Our AI analyzes your past content to understand your tone, style, frequently used words, and audience engagement patterns to generate content that sounds authentically you.' + question: "How does the AI learn my brand voice?", + answer: + "You can either complete our brand voice questionnaire (takes 5 minutes) or connect your existing social media accounts. Our AI analyzes your past content to understand your tone, style, frequently used words, and audience engagement patterns to generate content that sounds authentically you.", }, { - question: 'Can I edit the AI-generated content?', - answer: 'Absolutely! Every piece of AI-generated content is fully customizable. Our platform makes it easy to tweak captions, regenerate images with different styles, rearrange your content calendar, and add your personal touch. The AI provides the foundation—you add the final magic.' + question: "Can I edit the AI-generated content?", + answer: + "Absolutely! Every piece of AI-generated content is fully customizable. Our platform makes it easy to tweak captions, regenerate images with different styles, rearrange your content calendar, and add your personal touch. The AI provides the foundation—you add the final magic.", }, { - question: 'What social media platforms do you support?', - answer: 'We currently support Instagram, Facebook, Twitter, LinkedIn, Pinterest, and TikTok. Each platform gets content optimized for its specific algorithm, ideal post length, image dimensions, and engagement patterns.' - } + question: "What social media platforms do you support?", + answer: + "We currently support Instagram, Facebook, Twitter, LinkedIn, Pinterest, and TikTok. Each platform gets content optimized for its specific algorithm, ideal post length, image dimensions, and engagement patterns.", + }, ]; - const activeFeatureData = features.find(feature => feature.id === activeFeature); + const activeFeatureData = features.find( + (feature) => feature.id === activeFeature + ); return ( -
+
{/* Hero Section */}
@@ -200,29 +231,39 @@ const SocialMediaPost = () => { AI-Powered Social Media Content Generation
- +

Generate a Month of - Social Media
Content
+ + {" "} + Social Media
Content{" "} +
in One Click

- +

- Struggling with social media content? PlanPost AI's content generator creates engaging captions, ideas, and images in seconds. Save 10+ hours weekly, grow your audience, and post consistently. Start Your Free Trial! + Struggling with social media content? PlanPost AI's content + generator creates engaging captions, ideas, and images in seconds. + Save 10+ hours weekly, grow your audience, and post consistently. + Start Your Free Trial!

- - + + +
{[...Array(5)].map((_, i) => ( - + ))}
4.9/5 from 2,500+ creators @@ -233,22 +274,34 @@ const SocialMediaPost = () => {
-

Save 10+ Hours Weekly

-

Automate your content creation process

+

+ Save 10+ Hours Weekly +

+

+ Automate your content creation process +

-

Grow Your Audience

-

Algorithm-optimized content that performs

+

+ Grow Your Audience +

+

+ Algorithm-optimized content that performs +

-

Post Consistently

-

Never miss a posting day again

+

+ Post Consistently +

+

+ Never miss a posting day again +

@@ -260,7 +313,8 @@ const SocialMediaPost = () => {

- Does This Sound Familiar? The Social Media Content Struggle is Real + Does This Sound Familiar? The Social Media Content Struggle is + Real

@@ -269,13 +323,18 @@ const SocialMediaPost = () => {
-

The Time Sink

+

+ The Time Sink +

- You spend 2-3 hours brainstorming, writing, and designing a single week's worth of content. That's 10-15 hours monthly that could be spent on revenue-generating activities. + You spend 2-3 hours brainstorming, writing, and designing a + single week's worth of content. That's 10-15 hours + monthly that could be spent on revenue-generating activities.

- The average small business owner wastes 28 hours per month on social media content creation that delivers mediocre results. + The average small business owner wastes 28 hours per month on + social media content creation that delivers mediocre results.

@@ -284,13 +343,18 @@ const SocialMediaPost = () => {
-

The Creative Burnout

+

+ The Creative Burnout +

- Staring at a blank screen every Monday morning, wondering "what should I post today?" The pressure to be consistently creative leads to mental fatigue. + Staring at a blank screen every Monday morning, wondering + "what should I post today?" The pressure to be + consistently creative leads to mental fatigue.

- 42% of marketers cite content creation as their biggest challenge + 42% of marketers cite content creation as their biggest + challenge

@@ -299,9 +363,13 @@ const SocialMediaPost = () => {
-

The Inconsistency Problem

+

+ The Inconsistency Problem +

- Your posting schedule looks like a heartbeat monitor—sporadic bursts of activity followed by weeks of silence. This inconsistency confuses algorithms and frustrates followers. + Your posting schedule looks like a heartbeat monitor—sporadic + bursts of activity followed by weeks of silence. This + inconsistency confuses algorithms and frustrates followers.

@@ -314,9 +382,13 @@ const SocialMediaPost = () => {

-

The Relevance Challenge

+

+ The Relevance Challenge +

- You're using last month's trending hashtags, missing current conversations, and posting at times when your audience isn't even active. + You're using last month's trending hashtags, missing + current conversations, and posting at times when your audience + isn't even active.

@@ -329,10 +401,15 @@ const SocialMediaPost = () => {

- What if you could eliminate these struggles and create better content in 80% less time? + What if you could eliminate these struggles and create better + content in 80% less time?

@@ -340,14 +417,23 @@ const SocialMediaPost = () => { {/* AI Partner Section */} -
+

- Meet Your New AI Content Partner: Create, Schedule, and Grow—Automatically + Meet Your New AI Content Partner: Create, Schedule, and + Grow—Automatically

- PlanPost AI isn't just another social media tool—it's your AI-powered content co-pilot that understands your brand voice, knows what your audience engages with, and generates platform-optimized content that actually performs. + PlanPost AI isn't just another social media tool—it's + your AI-powered content co-pilot that understands your brand + voice, knows what your audience engages with, and generates + platform-optimized content that actually performs.

@@ -356,9 +442,14 @@ const SocialMediaPost = () => {
-

From Zero to 30 Posts in 5 Minutes

+

+ From Zero to 30 Posts in 5 Minutes +

- What used to take days now happens during your coffee break. Our AI analyzes your industry, audience, and goals to generate a complete monthly content calendar with engaging captions and stunning visuals. + What used to take days now happens during your coffee break. Our + AI analyzes your industry, audience, and goals to generate a + complete monthly content calendar with engaging captions and + stunning visuals.

@@ -366,9 +457,13 @@ const SocialMediaPost = () => {
-

Content That Actually Looks Professional

+

+ Content That Actually Looks Professional +

- No more struggling with Canva templates or expensive designers. Our integrated AI image generator creates on-brand visuals that match your aesthetic and capture attention in crowded feeds. + No more struggling with Canva templates or expensive designers. + Our integrated AI image generator creates on-brand visuals that + match your aesthetic and capture attention in crowded feeds.

@@ -376,9 +471,14 @@ const SocialMediaPost = () => {
-

Algorithm-Approved Posting Strategy

+

+ Algorithm-Approved Posting Strategy +

- We don't just create content—we create content that platforms love. Optimal posting times, trending hashtags, and engagement-boosting formats are built into every piece of content we generate. + We don't just create content—we create content that + platforms love. Optimal posting times, trending hashtags, and + engagement-boosting formats are built into every piece of + content we generate.

@@ -386,23 +486,30 @@ const SocialMediaPost = () => {
-

See the Magic in Action

+

+ See the Magic in Action +

- Watch how Sarah, a boutique owner, generates 30 days of Instagram content in under 4 minutes + Watch how Sarah, a boutique owner, generates 30 days of + Instagram content in under 4 minutes

- + */}

- "I went from spending 8 hours weekly on social media to 30 minutes. PlanPost AI not only saved me time but increased our engagement by 240% in the first month." + "I went from spending 8 hours weekly on social media to + 30 minutes. PlanPost AI not only saved me time but increased + our engagement by 240% in the first month."

Maria Rodriguez

-

Founder of Bloom Boutique

+

+ Founder of Bloom Boutique +

@@ -418,7 +525,8 @@ const SocialMediaPost = () => { The Complete AI Content Generation Toolkit

- Every feature designed to eliminate a specific content creation pain point and replace it with automated, intelligent solutions. + Every feature designed to eliminate a specific content creation + pain point and replace it with automated, intelligent solutions.

@@ -429,27 +537,43 @@ const SocialMediaPost = () => { onClick={() => setActiveFeature(feature.id)} className={`p-6 rounded-2xl text-left transition-all duration-200 backdrop-blur-sm ${ activeFeature === feature.id - ? 'bg-white shadow-lg border border-[#6a47ed]/20' - : 'bg-white/50 hover:bg-white/80 border border-white/20' + ? "bg-white shadow-lg border border-[#6a47ed]/20" + : "bg-white/50 hover:bg-white/80 border border-white/20" }`} >
-
- +
+
{feature.popular && ( - Most Popular + + Most Popular + )} {feature.new && ( - New + + New + )}
-

{feature.title}

-

{feature.description.split('.').slice(0, 2).join('.')}.

+

+ {feature.title} +

+

+ {feature.description.split(".").slice(0, 2).join(".")}. +

))}
@@ -458,9 +582,13 @@ const SocialMediaPost = () => {
-

{activeFeatureData.title}

-

{activeFeatureData.description}

- +

+ {activeFeatureData.title} +

+

+ {activeFeatureData.description} +

+
{activeFeatureData.highlights.map((highlight, index) => (
@@ -474,18 +602,28 @@ const SocialMediaPost = () => {
-

Real-World Example

+

+ Real-World Example +

-

Input:

+

+ Input: +

-

{activeFeatureData.example.input}

+

+ {activeFeatureData.example.input} +

-

Output:

+

+ Output: +

-

{activeFeatureData.example.output}

+

+ {activeFeatureData.example.output} +

@@ -497,7 +635,12 @@ const SocialMediaPost = () => { {/* How It Works */} -
+

@@ -510,9 +653,14 @@ const SocialMediaPost = () => {
1
-

Give us a Prompt

+

+ Give us a Prompt +

- Describe your product or service in your way. Share your industry, target audience, brand personality, and content goals. The AI learns your style from existing content or your preferences. + Describe your product or service in your way. Share your + industry, target audience, brand personality, and content goals. + The AI learns your style from existing content or your + preferences.

@@ -520,9 +668,13 @@ const SocialMediaPost = () => {
2
-

Generate Your Content Calendar

+

+ Generate Your Content Calendar +

- Input your key topics or let our AI suggest them. With one click, generate 30 days of post ideas, complete with captions, hashtag sets, and visual concepts tailored to each platform. + Input your key topics or let our AI suggest them. With one + click, generate 30 days of post ideas, complete with captions, + hashtag sets, and visual concepts tailored to each platform.

@@ -530,9 +682,14 @@ const SocialMediaPost = () => {
3
-

Review & Customize

+

+ Review & Customize +

- Our dashboard shows your complete content calendar. Edit any caption, regenerate images, rearrange posts, or add your personal touch. The performance predictor helps you optimize before publishing. + Our dashboard shows your complete content calendar. Edit any + caption, regenerate images, rearrange posts, or add your + personal touch. The performance predictor helps you optimize + before publishing.

@@ -540,22 +697,34 @@ const SocialMediaPost = () => {
4
-

Schedule & Publish Automatically

+

+ Schedule & Publish Automatically +

- With one click, schedule your entire month of content. Our AI determines optimal posting times for each platform and automatically publishes your content, freeing you to focus on engagement. + With one click, schedule your entire month of content. Our AI + determines optimal posting times for each platform and + automatically publishes your content, freeing you to focus on + engagement.

-

Ready to Transform Your Content Workflow?

+

+ Ready to Transform Your Content Workflow? +

-

No credit card required • 14-day free trial • Setup in 5 minutes

+

+ No credit card required • 14-day free trial • Setup in 5 + minutes +

@@ -577,13 +746,18 @@ const SocialMediaPost = () => {
-

Mental Space Reclaimed

+

+ Mental Space Reclaimed +

- The end of content anxiety. Stop the constant mental chatter about "what should I post tomorrow?" Free up cognitive load for strategic thinking and business growth. + The end of content anxiety. Stop the constant mental chatter + about "what should I post tomorrow?" Free up cognitive + load for strategic thinking and business growth.

- Our users report 72% reduction in stress related to social media management + Our users report 72% reduction in stress related to social + media management

@@ -592,13 +766,17 @@ const SocialMediaPost = () => {
-

Confidence in Your Content

+

+ Confidence in Your Content +

- Post with certainty, not hope. The performance predictor and data-driven approach means every post is optimized for success. + Post with certainty, not hope. The performance predictor and + data-driven approach means every post is optimized for success.

- No more guessing, no more hoping something will "go viral"—just consistent, reliable engagement growth + No more guessing, no more hoping something will "go + viral"—just consistent, reliable engagement growth

@@ -607,13 +785,18 @@ const SocialMediaPost = () => {
-

Creative Energy Restored

+

+ Creative Energy Restored +

- Rediscover your love for creation. By handling the repetitive, time-consuming tasks, PlanPost AI frees you to focus on big-picture strategy. + Rediscover your love for creation. By handling the repetitive, + time-consuming tasks, PlanPost AI frees you to focus on + big-picture strategy.

- The burnout disappears, and your authentic creative voice emerges stronger + The burnout disappears, and your authentic creative voice + emerges stronger

@@ -622,13 +805,17 @@ const SocialMediaPost = () => {
-

The Gift of Time

+

+ The Gift of Time +

- What will you do with your extra 10 hours each week? That's 40 hours monthly—a full work week—returned to you. + What will you do with your extra 10 hours each week? That's + 40 hours monthly—a full work week—returned to you.

- Spend it with family, focus on product development, or enjoy better work-life balance + Spend it with family, focus on product development, or enjoy + better work-life balance

@@ -636,11 +823,16 @@ const SocialMediaPost = () => {
{testimonials.slice(0, 3).map((testimonial, index) => ( -
+
-

{testimonial.content}

+

+ {testimonial.content} +

{testimonial.name}

{testimonial.role}

@@ -652,7 +844,12 @@ const SocialMediaPost = () => { {/* Case Studies */} -
+

@@ -662,28 +859,43 @@ const SocialMediaPost = () => {
{caseStudies.map((study, index) => ( -
+
-

{study.company}

+

+ {study.company} +

-
{study.metric}
-
{study.metricLabel}
+
+ {study.metric} +
+
+ {study.metricLabel} +
- +
-

The Challenge:

+

+ The Challenge: +

{study.challenge}

- +
-

The Solution:

+

+ The Solution: +

{study.solution}

- +
-

The Results:

+

+ The Results: +

    {study.results.map((result, i) => (
  • @@ -699,7 +911,9 @@ const SocialMediaPost = () => {
-

Average Results Across Our User Base

+

+ Average Results Across Our User Base +

10.5h
@@ -733,8 +947,13 @@ const SocialMediaPost = () => {
{faqs.map((faq, index) => ( -
-

{faq.question}

+
+

+ {faq.question} +

{faq.answer}

))} @@ -748,32 +967,43 @@ const SocialMediaPost = () => {

Ready to Reclaim Your Time and Transform Your Social Media?

- +
-

Create 30 days of content in 5 minutes

+

+ Create 30 days of content in 5 minutes +

-

Save 10+ hours every week

+

+ Save 10+ hours every week +

-

Increase engagement by 187% on average

+

+ Increase engagement by 187% on average +

-

Join 12,000+ creators and businesses

+

+ Join 12,000+ creators and businesses +

- +

- No credit card required • Setup in 5 minutes • 30-day money-back guarantee + No credit card required • Setup in 5 minutes • 30-day money-back + guarantee

@@ -781,4 +1011,4 @@ const SocialMediaPost = () => { ); }; -export default SocialMediaPost; \ No newline at end of file +export default SocialMediaPost; diff --git a/src/app/(features-landing)/ai-image-generator/page.tsx b/src/app/(features-landing)/ai-image-generator/page.tsx index 6b67ec2..f5d1d28 100644 --- a/src/app/(features-landing)/ai-image-generator/page.tsx +++ b/src/app/(features-landing)/ai-image-generator/page.tsx @@ -1,17 +1,16 @@ -'use client' +"use client"; -import React, { useState } from 'react'; -import { - Check, - Play, - Clock, - Image, - Sparkles, - RefreshCw, - Camera, - ShoppingCart, - Users, - TrendingUp, +import React, { useState } from "react"; +import { + Check, + Clock, + Image, + Sparkles, + RefreshCw, + Camera, + ShoppingCart, + Users, + TrendingUp, ArrowRight, Star, Quote, @@ -26,14 +25,16 @@ import { BarChart3, Crown, Edit3, - LucideProps -} from 'lucide-react'; -import Link from 'next/link'; + LucideProps, +} from "lucide-react"; +import Link from "next/link"; // TypeScript Interfaces interface Feature { id: string; - icon: React.ForwardRefExoticComponent & React.RefAttributes>; + icon: React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; title: string; description: string; input: string; @@ -45,7 +46,9 @@ interface Feature { } interface ProblemItem { - icon: React.ForwardRefExoticComponent & React.RefAttributes>; + icon: React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; title: string; description: string; stat: string; @@ -58,7 +61,9 @@ interface StatItem { } interface Industry { - icon: React.ForwardRefExoticComponent & React.RefAttributes>; + icon: React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; name: string; description: string; useCases: string[]; @@ -66,7 +71,9 @@ interface Industry { } interface TransformationType { - icon: React.ForwardRefExoticComponent & React.RefAttributes>; + icon: React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; title: string; description: string; } @@ -78,195 +85,229 @@ interface BackgroundStyle { } const AIImageGenerator: React.FC = () => { - const [, setActiveFeature] = useState('text-to-image'); + const [, setActiveFeature] = useState("text-to-image"); const [, setHoveredCard] = useState(null); - console.log(setActiveFeature,setHoveredCard) + console.log(setActiveFeature, setHoveredCard); const features: Feature[] = [ { - id: 'text-to-image', + id: "text-to-image", icon: Sparkles, - title: 'Text-to-Image Generation', - description: 'Transform your ideas into stunning visuals with a simple text description.', - input: 'Minimalist laptop on wooden desk with morning coffee, sunlight, productive atmosphere', - output: 'Professional lifestyle product photo', + title: "Text-to-Image Generation", + description: + "Transform your ideas into stunning visuals with a simple text description.", + input: + "Minimalist laptop on wooden desk with morning coffee, sunlight, productive atmosphere", + output: "Professional lifestyle product photo", capabilities: [ - 'Generate from any text description', - 'Multiple style options', - 'Brand color matching', - 'Platform-optimized dimensions' + "Generate from any text description", + "Multiple style options", + "Brand color matching", + "Platform-optimized dimensions", ], - gradient: 'from-purple-500 to-pink-500', - popular: true + gradient: "from-purple-500 to-pink-500", + popular: true, }, { - id: 'image-transformation', + id: "image-transformation", icon: RefreshCw, - title: 'Image-to-Image Transformation', - description: 'Take existing images and transform them into new styles or enhance them with AI.', - input: 'Basic product photo', - output: 'Professional styled product shot', + title: "Image-to-Image Transformation", + description: + "Take existing images and transform them into new styles or enhance them with AI.", + input: "Basic product photo", + output: "Professional styled product shot", capabilities: [ - 'Style transfer', - 'Quality enhancement', - 'Background replacement', - 'Object addition/removal' + "Style transfer", + "Quality enhancement", + "Background replacement", + "Object addition/removal", ], - gradient: 'from-blue-500 to-cyan-500' + gradient: "from-blue-500 to-cyan-500", }, { - id: 'product-background', + id: "product-background", icon: Camera, - title: 'Product Background Generation', - description: 'Create professional product photos without expensive studios or photoshoots.', - input: 'Product on cluttered background', - output: 'Product on clean professional background', + title: "Product Background Generation", + description: + "Create professional product photos without expensive studios or photoshoots.", + input: "Product on cluttered background", + output: "Product on clean professional background", capabilities: [ - 'Automatic background removal', - 'Professional background generation', - 'Consistent styling across products', - 'E-commerce optimized' + "Automatic background removal", + "Professional background generation", + "Consistent styling across products", + "E-commerce optimized", ], - gradient: 'from-green-500 to-emerald-500', - new: true - } + gradient: "from-green-500 to-emerald-500", + new: true, + }, ]; const problemItems: ProblemItem[] = [ { icon: Palette, - title: 'Design Skills Required', - description: 'Creating professional visuals means learning complex tools like Photoshop or hiring expensive designers. The average business spends $2,000-$5,000 monthly on design resources for basic social media and marketing visuals.', - stat: '$2,000-$5,000 monthly design costs', - color: 'purple' + title: "Design Skills Required", + description: + "Creating professional visuals means learning complex tools like Photoshop or hiring expensive designers. The average business spends $2,000-$5,000 monthly on design resources for basic social media and marketing visuals.", + stat: "$2,000-$5,000 monthly design costs", + color: "purple", }, { icon: Camera, - title: 'Costly Product Photography', - description: 'Professional product photoshoots cost $500-$2,000 per session, and you're locked into those images until your next expensive shoot. E-commerce businesses need fresh visuals constantly to stay competitive.', - stat: '$500-$2,000 per photoshoot', - color: 'blue' + title: "Costly Product Photography", + description: + "Professional product photoshoots cost $500-$2,000 per session, and you're locked into those images until your next expensive shoot. E-commerce businesses need fresh visuals constantly to stay competitive.", + stat: "$500-$2,000 per photoshoot", + color: "blue", }, { icon: Clock, - title: 'Time-Consuming Creation Process', - description: 'What should take minutes often takes hours—searching for stock photos, editing backgrounds, adjusting lighting. Marketers spend 6-8 hours weekly just creating basic social media visuals.', - stat: '6-8 hours weekly per marketer', - color: 'orange' + title: "Time-Consuming Creation Process", + description: + "What should take minutes often takes hours—searching for stock photos, editing backgrounds, adjusting lighting. Marketers spend 6-8 hours weekly just creating basic social media visuals.", + stat: "6-8 hours weekly per marketer", + color: "orange", }, { icon: Target, - title: 'Inconsistent Brand Visuals', - description: 'Different designers, varying stock photos, and changing styles create a messy brand identity that confuses customers and weakens your brand recognition across platforms.', - stat: 'Brand inconsistency across platforms', - color: 'red' - } + title: "Inconsistent Brand Visuals", + description: + "Different designers, varying stock photos, and changing styles create a messy brand identity that confuses customers and weakens your brand recognition across platforms.", + stat: "Brand inconsistency across platforms", + color: "red", + }, ]; const stats: StatItem[] = [ - { number: '68%', label: 'of marketers say visual asset creation is their biggest bottleneck' }, - { number: '$3,200', label: 'average monthly spend on design resources for SMBs' }, - { number: '7.5', label: 'hours spent weekly per marketer on visual content' } + { + number: "68%", + label: + "of marketers say visual asset creation is their biggest bottleneck", + }, + { + number: "$3,200", + label: "average monthly spend on design resources for SMBs", + }, + { + number: "7.5", + label: "hours spent weekly per marketer on visual content", + }, ]; const industries: Industry[] = [ { icon: ShoppingCart, - name: 'E-commerce & Retail', - description: 'Create consistent product catalogs, generate lifestyle shots, and refresh existing product images without new photoshoots.', + name: "E-commerce & Retail", + description: + "Create consistent product catalogs, generate lifestyle shots, and refresh existing product images without new photoshoots.", useCases: [ - 'Product listing images', - 'Social media product features', - 'Email marketing visuals', - 'Ad creatives' + "Product listing images", + "Social media product features", + "Email marketing visuals", + "Ad creatives", ], - stat: '89% of e-commerce users save over $1,000 monthly on photography' + stat: "89% of e-commerce users save over $1,000 monthly on photography", }, { icon: Users, - name: 'Social Media & Marketing', - description: 'Generate endless unique visuals for social media posts, ads, stories, and campaigns that stand out from stock photo content.', + name: "Social Media & Marketing", + description: + "Generate endless unique visuals for social media posts, ads, stories, and campaigns that stand out from stock photo content.", useCases: [ - 'Social media posts', - 'Ad campaign creatives', - 'Blog post featured images', - 'Email newsletter graphics' + "Social media posts", + "Ad campaign creatives", + "Blog post featured images", + "Email newsletter graphics", ], - stat: '73% higher engagement on AI-generated vs stock images' + stat: "73% higher engagement on AI-generated vs stock images", }, { icon: Rocket, - name: 'Startups & Small Business', - description: 'Create professional-looking visual content that competes with big brands on a startup budget.', + name: "Startups & Small Business", + description: + "Create professional-looking visual content that competes with big brands on a startup budget.", useCases: [ - 'Website visuals', - 'Pitch deck graphics', - 'Product mockups', - 'Brand identity elements' + "Website visuals", + "Pitch deck graphics", + "Product mockups", + "Brand identity elements", ], - stat: '94% of startups achieve professional brand visuals within first month' - } + stat: "94% of startups achieve professional brand visuals within first month", + }, ]; const transformationTypes: TransformationType[] = [ { icon: Palette, - title: 'Style Transfer', - description: 'Apply different artistic styles to your images—make photos look like paintings, change color schemes, or match your brand aesthetic.' + title: "Style Transfer", + description: + "Apply different artistic styles to your images—make photos look like paintings, change color schemes, or match your brand aesthetic.", }, { icon: Wand2, - title: 'Quality Enhancement', - description: 'Upscale low-resolution images, improve lighting and colors, remove noise, and make old photos look professionally retouched.' + title: "Quality Enhancement", + description: + "Upscale low-resolution images, improve lighting and colors, remove noise, and make old photos look professionally retouched.", }, { icon: Settings, - title: 'Background Replacement', - description: 'Instantly remove and replace backgrounds while perfectly preserving subject edges—no green screen needed.' + title: "Background Replacement", + description: + "Instantly remove and replace backgrounds while perfectly preserving subject edges—no green screen needed.", }, { icon: Edit3, - title: 'Object Manipulation', - description: 'Add, remove, or replace objects within your images while maintaining realistic lighting and perspectives.' - } + title: "Object Manipulation", + description: + "Add, remove, or replace objects within your images while maintaining realistic lighting and perspectives.", + }, ]; const backgroundStyles: BackgroundStyle[] = [ { - name: 'E-commerce White', - description: 'Perfect for Amazon, Shopify, and marketplace listings', - type: 'Clean white background' + name: "E-commerce White", + description: "Perfect for Amazon, Shopify, and marketplace listings", + type: "Clean white background", }, { - name: 'Modern Gradients', - description: 'Brand-colored gradients for social media and ads', - type: 'Gradient background' + name: "Modern Gradients", + description: "Brand-colored gradients for social media and ads", + type: "Gradient background", }, { - name: 'Lifestyle Context', - description: 'Products in realistic usage environments', - type: 'Lifestyle setting' + name: "Lifestyle Context", + description: "Products in realistic usage environments", + type: "Lifestyle setting", }, { - name: 'Creative Abstracts', - description: 'Artistic backgrounds for premium branding', - type: 'Creative abstract' - } + name: "Creative Abstracts", + description: "Artistic backgrounds for premium branding", + type: "Creative abstract", + }, ]; 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'; + case "purple": + return "purple"; + case "blue": + return "blue"; + case "orange": + return "orange"; + case "red": + return "red"; + default: + return "purple"; } }; return ( -
- +
{/* Hero Section */}
@@ -280,35 +321,38 @@ const AIImageGenerator: React.FC = () => { AI-Powered Image Generation
- +

Create Stunning Images with AI— No Design Skills Needed

- +

- Transform text into visuals, enhance existing photos, and create professional product backgrounds in seconds. - Save 90% on design costs and create branded visuals 10x faster. + Transform text into visuals, enhance existing photos, and create + professional product backgrounds in seconds. Save 90% on design + costs and create branded visuals 10x faster.

- - - - + + +
{[...Array(5)].map((_, i) => ( - + ))}
4.9/5 from 15,000+ businesses @@ -331,17 +375,29 @@ const AIImageGenerator: React.FC = () => {
{problemItems.map((item: ProblemItem, index: number) => ( -
-
- +
+
-

{item.title}

-

{item.description}

+

+ {item.title} +

+

+ {item.description} +

-

{item.stat}

+

+ {item.stat} +

))} @@ -350,8 +406,13 @@ const AIImageGenerator: React.FC = () => { {/* Stats */}
{stats.map((stat: StatItem, index: number) => ( -
-
{stat.number}
+
+
+ {stat.number} +
{stat.label}
))} @@ -360,7 +421,8 @@ const AIImageGenerator: React.FC = () => {

- What if you could create studio-quality visuals in seconds, for a fraction of the cost? + What if you could create studio-quality visuals in seconds, for + a fraction of the cost?

@@ -368,7 +430,12 @@ const AIImageGenerator: React.FC = () => {
{/* Features Section */} -
+

@@ -381,23 +448,36 @@ const AIImageGenerator: React.FC = () => {
{features.map((feature: Feature, index: number) => ( -
+
-
+
{feature.popular && ( - Popular + + Popular + )} {feature.new && ( - New + + New + )}
-

{feature.title}

-

{feature.description}

- +

+ {feature.title} +

+

+ {feature.description} +

+
@@ -411,29 +491,40 @@ const AIImageGenerator: React.FC = () => { Output:
-
{feature.output}
+
+ {feature.output} +
- {feature.capabilities.map((capability: string, idx: number) => ( -
- - {capability} -
- ))} + {feature.capabilities.map( + (capability: string, idx: number) => ( +
+ + {capability} +
+ ) + )}
))}
-

See All Three Features in Action

-

Watch how we create 10 marketing images in under minutes:

- + */}

@@ -450,8 +541,9 @@ const AIImageGenerator: React.FC = () => {

- Describe what you want to see, and watch our AI bring it to life in seconds. - Perfect for social media content, blog illustrations, ad creatives, and more. + Describe what you want to see, and watch our AI bring it to life + in seconds. Perfect for social media content, blog + illustrations, ad creatives, and more.

@@ -461,7 +553,8 @@ const AIImageGenerator: React.FC = () => { Input Prompt:
- "A cozy bookstore with warm lighting, shelves filled with books, and a cat sleeping on a chair" + "A cozy bookstore with warm lighting, shelves filled + with books, and a cat sleeping on a chair"
@@ -481,11 +574,13 @@ const AIImageGenerator: React.FC = () => { Real-World Success: Social Media Agency Saves 20 Hours Weekly

- Challenge: Social media agency needed 50+ unique images weekly for client content calendars. - Was spending $3,500 monthly on stock photos and designer time. + Challenge: Social media agency needed 50+ unique images weekly + for client content calendars. Was spending $3,500 monthly on + stock photos and designer time.

- Solution: Implemented PlanPost AI text-to-image generation for all client visual content. + Solution: Implemented PlanPost AI text-to-image generation for + all client visual content.

@@ -508,27 +603,51 @@ const AIImageGenerator: React.FC = () => {
{/* Advanced Capabilities */}
-

Advanced Generation Capabilities

+

+ Advanced Generation Capabilities +

{[ - { icon: Palette, title: 'Style Control', desc: 'Choose from photorealistic, illustration, minimalist, vintage, or custom styles' }, - { icon: BarChart3, title: 'Platform Optimization', desc: 'Generate images perfectly sized for Instagram, Facebook, Pinterest, and more' }, - { icon: Target, title: 'Brand Consistency', desc: 'Save your brand colors, fonts, and style preferences' }, - { icon: RefreshCw, title: 'Multiple Variations', desc: 'Generate 4-8 variations of each prompt and choose your favorite' } + { + icon: Palette, + title: "Style Control", + desc: "Choose from photorealistic, illustration, minimalist, vintage, or custom styles", + }, + { + icon: BarChart3, + title: "Platform Optimization", + desc: "Generate images perfectly sized for Instagram, Facebook, Pinterest, and more", + }, + { + icon: Target, + title: "Brand Consistency", + desc: "Save your brand colors, fonts, and style preferences", + }, + { + icon: RefreshCw, + title: "Multiple Variations", + desc: "Generate 4-8 variations of each prompt and choose your favorite", + }, ].map((item, index) => (
-

{item.title}

+

+ {item.title} +

{item.desc}

))} @@ -538,7 +657,12 @@ const AIImageGenerator: React.FC = () => {
{/* Image Transformation Section */} -
+

@@ -548,8 +672,9 @@ const AIImageGenerator: React.FC = () => {

- Take any existing image and transform it with AI magic. Change styles, enhance quality, - replace elements, or completely reimagine your visuals while maintaining the original composition. + Take any existing image and transform it with AI magic. Change + styles, enhance quality, replace elements, or completely reimagine + your visuals while maintaining the original composition.

@@ -569,24 +694,37 @@ const AIImageGenerator: React.FC = () => {
- [Basic product photo with poor lighting] + + [Basic product photo with poor lighting] +
- [Professional product photo] + + [Professional product photo] +
- {transformationTypes.map((type: TransformationType, index: number) => ( -
-
- + {transformationTypes.map( + (type: TransformationType, index: number) => ( +
+
+ +
+

+ {type.title} +

+

+ {type.description} +

-

{type.title}

-

{type.description}

-
- ))} + ) + )}
@@ -595,47 +733,58 @@ const AIImageGenerator: React.FC = () => { Professional-Grade Results - +
4K Resolution - Maximum Output Quality + + Maximum Output Quality +
100+ Styles - Transformation Options + + Transformation Options +
30 seconds - Average Processing Time + + Average Processing Time +
Batch Process - Multiple Images Simultaneously + + Multiple Images Simultaneously +

- "We had a catalog of 500+ product images that looked dated and inconsistent. - With PlanPost AI's image transformation, we refreshed our entire product line - visuals in two days instead of two months. The quality is indistinguishable - from professional photography." + "We had a catalog of 500+ product images that looked + dated and inconsistent. With PlanPost AI's image + transformation, we refreshed our entire product line visuals + in two days instead of two months. The quality is + indistinguishable from professional photography." +

+

+ - Michael Chen, E-commerce Director at StyleHub

-

- Michael Chen, E-commerce Director at StyleHub

@@ -653,27 +802,47 @@ const AIImageGenerator: React.FC = () => {

- Transform basic product shots into professional e-commerce ready images. Remove backgrounds - automatically and generate perfect settings that make your products shine and convert. + Transform basic product shots into professional e-commerce ready + images. Remove backgrounds automatically and generate perfect + settings that make your products shine and convert.

-

The 3-Step Professional Product Photo Process

- +

+ The 3-Step Professional Product Photo Process +

+
{[ - { step: 1, title: 'Upload Your Product', desc: 'Take a quick photo of your product—any background works. Our AI handles the rest.', content: '[Product on cluttered background]' }, - { step: 2, title: 'AI Background Removal', desc: 'Automatic, precise background removal with perfect edge detection.', content: '[Product with transparent background]' }, - { step: 3, title: 'Generate Perfect Background', desc: 'Choose from professional settings or generate custom backgrounds.', content: '[Product on professional background]' } + { + step: 1, + title: "Upload Your Product", + desc: "Take a quick photo of your product—any background works. Our AI handles the rest.", + content: "[Product on cluttered background]", + }, + { + step: 2, + title: "AI Background Removal", + desc: "Automatic, precise background removal with perfect edge detection.", + content: "[Product with transparent background]", + }, + { + step: 3, + title: "Generate Perfect Background", + desc: "Choose from professional settings or generate custom backgrounds.", + content: "[Product on professional background]", + }, ].map((item, index) => (
{item.step}
-

{item.title}

+

+ {item.title} +

{item.desc}

{item.content} @@ -685,36 +854,57 @@ const AIImageGenerator: React.FC = () => {
-

Professional Background Styles

- +

+ Professional Background Styles +

+
- {backgroundStyles.map((style: BackgroundStyle, index: number) => ( -
-
- [{style.type}] + {backgroundStyles.map( + (style: BackgroundStyle, index: number) => ( +
+
+ + [{style.type}] + +
+

+ {style.name} +

+

+ {style.description} +

-

{style.name}

-

{style.description}

-
- ))} + ) + )}
- Platform Optimized for all marketplaces + + Platform Optimized for all marketplaces +
- Bulk Processing for hundreds of images + + Bulk Processing for hundreds of images +
- Brand Consistency across entire catalog + + Brand Consistency across entire catalog +
- Smart Shadow Generation for realism + + Smart Shadow Generation for realism +
@@ -723,7 +913,12 @@ const AIImageGenerator: React.FC = () => { {/* Industries Section */} -
+

@@ -736,16 +931,26 @@ const AIImageGenerator: React.FC = () => {
{industries.map((industry: Industry, index: number) => ( -
+
-

{industry.name}

-

{industry.description}

- +

+ {industry.name} +

+

+ {industry.description} +

+
{industry.useCases.map((useCase: string, idx: number) => ( -
+
{useCase}
@@ -753,7 +958,9 @@ const AIImageGenerator: React.FC = () => {
-

{industry.stat}

+

+ {industry.stat} +

))} @@ -773,19 +980,33 @@ const AIImageGenerator: React.FC = () => { Stop Settling for Stock Photos and Expensive Designers

- +

Join 15,000+ businesses creating stunning visuals with AI

{[ - { title: 'For the Price of One Photoshoot', desc: 'Get unlimited custom images for months instead of a single day of photography' }, - { title: 'At the Speed of Thought', desc: 'Go from idea to finished visual in seconds, not days' }, - { title: 'With Your Brand in Mind', desc: 'Create visuals that actually look like your brand, not generic stock photos' } + { + title: "For the Price of One Photoshoot", + desc: "Get unlimited custom images for months instead of a single day of photography", + }, + { + title: "At the Speed of Thought", + desc: "Go from idea to finished visual in seconds, not days", + }, + { + title: "With Your Brand in Mind", + desc: "Create visuals that actually look like your brand, not generic stock photos", + }, ].map((item, index) => ( -
-

{item.title}

+
+

+ {item.title} +

{item.desc}

))} @@ -793,11 +1014,11 @@ const AIImageGenerator: React.FC = () => {
{[ - 'Create custom images from text descriptions', - 'Transform existing photos into professional visuals', - 'Generate perfect product backgrounds automatically', - 'Save 80% on design and photography costs', - 'Scale your visual content production 10x' + "Create custom images from text descriptions", + "Transform existing photos into professional visuals", + "Generate perfect product backgrounds automatically", + "Save 80% on design and photography costs", + "Scale your visual content production 10x", ].map((benefit: string, index: number) => (
@@ -807,11 +1028,14 @@ const AIImageGenerator: React.FC = () => {
- +

- No credit card required • Setup in 2 minutes • 30-day money-back guarantee + No credit card required • Setup in 2 minutes • 30-day money-back + guarantee

@@ -819,4 +1043,4 @@ const AIImageGenerator: React.FC = () => { ); }; -export default AIImageGenerator; \ No newline at end of file +export default AIImageGenerator; diff --git a/src/app/(features-landing)/ai-meta-ads-optimization/page.tsx b/src/app/(features-landing)/ai-meta-ads-optimization/page.tsx index 2e1d11f..b5baadf 100644 --- a/src/app/(features-landing)/ai-meta-ads-optimization/page.tsx +++ b/src/app/(features-landing)/ai-meta-ads-optimization/page.tsx @@ -1,13 +1,13 @@ -'use client' +"use client"; -import React, { useState } from 'react'; -import { - Check, - Clock, - Zap, - TrendingUp, - Target, - Users, +import React, { useState } from "react"; +import { + Check, + Clock, + Zap, + TrendingUp, + Target, + Users, BarChart3, ArrowRight, Star, @@ -19,14 +19,16 @@ import { Smartphone, Brain, PieChart, - LucideProps -} from 'lucide-react'; -import Link from 'next/link'; + LucideProps, +} from "lucide-react"; +import Link from "next/link"; // TypeScript Interfaces interface Feature { id: string; - icon: React.ForwardRefExoticComponent & React.RefAttributes>; + icon: React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; title: string; description: string; highlights: string[]; @@ -43,7 +45,9 @@ interface Feature { } interface ProblemItem { - icon: React.ForwardRefExoticComponent & React.RefAttributes>; + icon: React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; title: string; description: string; stat: string; @@ -53,11 +57,15 @@ interface ProblemItem { interface StatItem { number: string; label: string; - icon: React.ForwardRefExoticComponent & React.RefAttributes>; + icon: React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; } interface Industry { - icon: React.ForwardRefExoticComponent & React.RefAttributes>; + icon: React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; name: string; description: string; results: string[]; @@ -70,203 +78,234 @@ interface FAQ { } const MetaAdsOptimization: React.FC = () => { - const [activeFeature, setActiveFeature] = useState('ai-creation'); + const [activeFeature, setActiveFeature] = useState("ai-creation"); const [hoveredCard, setHoveredCard] = useState(null); const features: Feature[] = [ { - id: 'ai-creation', + id: "ai-creation", icon: Brain, - title: 'AI Ad Creation & Optimization', - description: 'Generate high-converting ad copy and creatives that resonate with your target audiences. Our AI understands market nuances and consumer preferences to create ads that convert.', + title: "AI Ad Creation & Optimization", + description: + "Generate high-converting ad copy and creatives that resonate with your target audiences. Our AI understands market nuances and consumer preferences to create ads that convert.", highlights: [ - 'Audience Adaptation: Automatically adjust messaging for different demographics and markets', - 'Seasonal Optimization: Create campaigns for holidays, events, and seasonal trends', - 'Creative Intelligence: Generate images and videos that reflect current trends and preferences', - 'A/B Testing Automation: Test multiple variations and scale winners automatically' + "Audience Adaptation: Automatically adjust messaging for different demographics and markets", + "Seasonal Optimization: Create campaigns for holidays, events, and seasonal trends", + "Creative Intelligence: Generate images and videos that reflect current trends and preferences", + "A/B Testing Automation: Test multiple variations and scale winners automatically", ], example: { - input: 'Premium skincare, summer collection, target women 25-45', - output: 'Multiple ad variations with compelling copy, seasonal messaging, and creatives optimized for summer skincare trends.' + input: "Premium skincare, summer collection, target women 25-45", + output: + "Multiple ad variations with compelling copy, seasonal messaging, and creatives optimized for summer skincare trends.", }, - gradient: 'from-purple-500 to-pink-500', - popular: true + gradient: "from-purple-500 to-pink-500", + popular: true, }, { - id: 'bid-optimization', + id: "bid-optimization", icon: Zap, - title: 'Real-Time Bid & Budget Optimization', - description: 'Stop manual bidding and let AI optimize your campaigns 24/7. Our algorithms continuously adjust bids based on performance data and market conditions.', + title: "Real-Time Bid & Budget Optimization", + description: + "Stop manual bidding and let AI optimize your campaigns 24/7. Our algorithms continuously adjust bids based on performance data and market conditions.", highlights: [ - 'Time-of-Day Optimization: Adjust bids based on when your audiences are most active', - 'Competitor Response: Automatically counter competitor ad spending patterns', - 'Performance-Based Budgeting: Allocate more budget to high-performing campaigns automatically', - 'Cross-Platform Intelligence: Optimize Facebook vs Instagram spend based on performance' + "Time-of-Day Optimization: Adjust bids based on when your audiences are most active", + "Competitor Response: Automatically counter competitor ad spending patterns", + "Performance-Based Budgeting: Allocate more budget to high-performing campaigns automatically", + "Cross-Platform Intelligence: Optimize Facebook vs Instagram spend based on performance", ], results: [ - { metric: 'Cost Per Purchase', value: '-38%' }, - { metric: 'Conversion Rate', value: '+63%' }, - { metric: 'Optimization', value: '24/7' } + { metric: "Cost Per Purchase", value: "-38%" }, + { metric: "Conversion Rate", value: "+63%" }, + { metric: "Optimization", value: "24/7" }, ], - gradient: 'from-blue-500 to-cyan-500' + gradient: "from-blue-500 to-cyan-500", }, { - id: 'roas-engine', + id: "roas-engine", icon: TrendingUp, - title: 'ROAS Maximization Engine', - description: 'Transform your Meta Ads from cost center to profit center. Our AI prioritizes campaigns and audiences that deliver the highest return on ad spend.', + title: "ROAS Maximization Engine", + description: + "Transform your Meta Ads from cost center to profit center. Our AI prioritizes campaigns and audiences that deliver the highest return on ad spend.", highlights: [ - 'Lifetime Value Optimization: Target customers with highest long-term value', - 'Budget Reallocation: Automatically shift spend from underperforming to high-ROAS campaigns', - 'Seasonal ROAS Forecasting: Predict and capitalize on high-ROAS periods', - 'Creative ROAS Analysis: Identify which ad creatives drive highest returns' + "Lifetime Value Optimization: Target customers with highest long-term value", + "Budget Reallocation: Automatically shift spend from underperforming to high-ROAS campaigns", + "Seasonal ROAS Forecasting: Predict and capitalize on high-ROAS periods", + "Creative ROAS Analysis: Identify which ad creatives drive highest returns", ], - gradient: 'from-green-500 to-emerald-500' + gradient: "from-green-500 to-emerald-500", }, { - id: 'analytics', + id: "analytics", icon: BarChart3, - title: 'Advanced Performance Intelligence Dashboard', - description: 'Actionable insights to outperform competitors and maximize results. Understand what works in your market and beat competitors.', + title: "Advanced Performance Intelligence Dashboard", + description: + "Actionable insights to outperform competitors and maximize results. Understand what works in your market and beat competitors.", highlights: [ - 'Market Benchmarking: Compare your performance against industry averages', - 'Audience Performance Insights: Understand which demographics convert best', - 'Competitor Ad Intelligence: See what's working for competitors in your market', - 'Trend Analysis: Leverage seasonal patterns and market trends' + "Market Benchmarking: Compare your performance against industry averages", + "Audience Performance Insights: Understand which demographics convert best", + "Competitor Ad Intelligence: See what's working for competitors in your market", + "Trend Analysis: Leverage seasonal patterns and market trends", ], - gradient: 'from-orange-500 to-red-500' - } + gradient: "from-orange-500 to-red-500", + }, ]; const problemItems: ProblemItem[] = [ { icon: PieChart, - title: 'Wasted Ad Spend', - description: 'Businesses waste an average of 35% of their Meta Ads budget on underperforming campaigns. With rising CPMs across all markets, every misallocated dollar hurts your bottom line.', - stat: '35% average budget waste', - color: 'red' + title: "Wasted Ad Spend", + description: + "Businesses waste an average of 35% of their Meta Ads budget on underperforming campaigns. With rising CPMs across all markets, every misallocated dollar hurts your bottom line.", + stat: "35% average budget waste", + color: "red", }, { icon: Target, - title: 'Complex Audience Targeting', - description: 'Modern consumer behavior makes targeting incredibly complex. Are you reaching the right demographics, interests, and behaviors? Or missing your ideal customer segments?', - stat: 'Complex targeting challenges', - color: 'blue' + title: "Complex Audience Targeting", + description: + "Modern consumer behavior makes targeting incredibly complex. Are you reaching the right demographics, interests, and behaviors? Or missing your ideal customer segments?", + stat: "Complex targeting challenges", + color: "blue", }, { icon: Clock, - title: 'Time-Consuming Management', - description: 'Spending 15-20 hours weekly monitoring campaigns, adjusting bids, and analyzing data? That's 60-80 hours monthly that could be spent on business growth instead of manual optimization.', - stat: '15-20 hours weekly', - color: 'orange' + title: "Time-Consuming Management", + description: + "Spending 15-20 hours weekly monitoring campaigns, adjusting bids, and analyzing data? That's 60-80 hours monthly that could be spent on business growth instead of manual optimization.", + stat: "15-20 hours weekly", + color: "orange", }, { icon: TrendingUp, - title: 'ROAS Uncertainty', - description: 'Never knowing if your next campaign will deliver 3x ROAS or drain your budget. The unpredictable nature of Meta Ads in competitive markets keeps business owners awake at night.', - stat: 'Unpredictable ROAS', - color: 'purple' - } + title: "ROAS Uncertainty", + description: + "Never knowing if your next campaign will deliver 3x ROAS or drain your budget. The unpredictable nature of Meta Ads in competitive markets keeps business owners awake at night.", + stat: "Unpredictable ROAS", + color: "purple", + }, ]; const stats: StatItem[] = [ - { number: '+147%', label: 'Average ROAS Improvement', icon: TrendingUp }, - { number: '-52%', label: 'Average CPA Reduction', icon: Zap }, - { number: '12+', label: 'Hours Weekly Time Saved', icon: Clock }, - { number: '4.9/5', label: 'from 1,200+ marketers', icon: Star } + { number: "+147%", label: "Average ROAS Improvement", icon: TrendingUp }, + { number: "-52%", label: "Average CPA Reduction", icon: Zap }, + { number: "12+", label: "Hours Weekly Time Saved", icon: Clock }, + { number: "4.9/5", label: "from 1,200+ marketers", icon: Star }, ]; const industries: Industry[] = [ { icon: ShoppingCart, - name: 'E-commerce & Retail', - description: 'Optimize for online shopping behaviors, conversion tracking, and product catalog ads.', + name: "E-commerce & Retail", + description: + "Optimize for online shopping behaviors, conversion tracking, and product catalog ads.", results: [ - 'Fashion and apparel brands', - 'Electronics retailers', - 'Home and living stores', - 'Beauty and cosmetics' + "Fashion and apparel brands", + "Electronics retailers", + "Home and living stores", + "Beauty and cosmetics", ], - average: 'Average Results: 3.2x ROAS, -45% CPA, +28% conversion rate' + average: "Average Results: 3.2x ROAS, -45% CPA, +28% conversion rate", }, { icon: Building, - name: 'Hospitality & Travel', - description: 'Target travelers and local experiences with optimized booking campaigns.', + name: "Hospitality & Travel", + description: + "Target travelers and local experiences with optimized booking campaigns.", results: [ - 'Hotels and resorts', - 'Tourism experiences', - 'Travel agencies', - 'Vacation rentals' + "Hotels and resorts", + "Tourism experiences", + "Travel agencies", + "Vacation rentals", ], - average: 'Average Results: 5.1x ROAS, -38% cost per booking, +65% direct bookings' + average: + "Average Results: 5.1x ROAS, -38% cost per booking, +65% direct bookings", }, { icon: Smartphone, - name: 'SaaS & B2B', - description: 'Generate qualified leads and demo requests with targeted B2B campaigns.', + name: "SaaS & B2B", + description: + "Generate qualified leads and demo requests with targeted B2B campaigns.", results: [ - 'Software companies', - 'Marketing agencies', - 'Professional services', - 'Enterprise solutions' + "Software companies", + "Marketing agencies", + "Professional services", + "Enterprise solutions", ], - average: 'Average Results: 8.3x ROAS, -52% cost per lead, +41% lead quality' + average: + "Average Results: 8.3x ROAS, -52% cost per lead, +41% lead quality", }, { icon: Users, - name: 'Agencies & Marketing Teams', - description: 'Manage multiple client accounts with advanced optimization and reporting.', + name: "Agencies & Marketing Teams", + description: + "Manage multiple client accounts with advanced optimization and reporting.", results: [ - 'Digital marketing agencies', - 'In-house marketing teams', - 'Brand managers', - 'Multi-location businesses' + "Digital marketing agencies", + "In-house marketing teams", + "Brand managers", + "Multi-location businesses", ], - average: 'Average Results: 40% faster campaign setup, 75% less management time' - } + average: + "Average Results: 40% faster campaign setup, 75% less management time", + }, ]; const faqs: FAQ[] = [ { - question: 'How does PlanPost AI handle different markets and audiences?', - answer: 'Our AI is trained on global consumer behavior data and adapts to different markets automatically. The system analyzes successful campaigns across various industries and demographics to optimize your ads for specific audiences. It continuously learns from your campaign performance to improve targeting and messaging.' + question: "How does PlanPost AI handle different markets and audiences?", + answer: + "Our AI is trained on global consumer behavior data and adapts to different markets automatically. The system analyzes successful campaigns across various industries and demographics to optimize your ads for specific audiences. It continuously learns from your campaign performance to improve targeting and messaging.", }, { - question: 'What results can I expect in the first 30 days?', - answer: 'Most businesses see noticeable improvement within 7-14 days, with full optimization typically achieved within 30 days. Average results include 40-80% ROAS improvement in the first month, with continued gains as the AI learns your specific audience patterns. We provide weekly performance reports so you can track progress.' + question: "What results can I expect in the first 30 days?", + answer: + "Most businesses see noticeable improvement within 7-14 days, with full optimization typically achieved within 30 days. Average results include 40-80% ROAS improvement in the first month, with continued gains as the AI learns your specific audience patterns. We provide weekly performance reports so you can track progress.", }, { - question: 'How does the AI handle seasonal campaigns and trends?', - answer: 'We have specialized algorithms for seasonal patterns and market trends. The AI automatically adjusts bidding strategies, budget allocation, and creates appropriate creatives for holidays, seasonal changes, and trending topics. It also optimizes for pre-holiday consideration phases and post-holiday sales periods.' + question: "How does the AI handle seasonal campaigns and trends?", + answer: + "We have specialized algorithms for seasonal patterns and market trends. The AI automatically adjusts bidding strategies, budget allocation, and creates appropriate creatives for holidays, seasonal changes, and trending topics. It also optimizes for pre-holiday consideration phases and post-holiday sales periods.", }, { - question: 'Can I use PlanPost AI for multiple countries and languages?', - answer: 'Absolutely. Our platform is designed for global campaigns. You can manage campaigns across different countries with country-specific optimization, budget allocation, and performance tracking. The AI understands market differences and can optimize for multiple languages and cultural contexts.' + question: "Can I use PlanPost AI for multiple countries and languages?", + answer: + "Absolutely. Our platform is designed for global campaigns. You can manage campaigns across different countries with country-specific optimization, budget allocation, and performance tracking. The AI understands market differences and can optimize for multiple languages and cultural contexts.", }, { - question: 'What makes your optimization different from other AI tools?', - answer: 'While many AI tools use generic data patterns, PlanPost AI combines machine learning with expert marketing knowledge. We focus specifically on ROAS optimization rather than just engagement metrics. Our system continuously tests and learns from thousands of campaign variables to find the optimal combination for your specific goals.' + question: "What makes your optimization different from other AI tools?", + answer: + "While many AI tools use generic data patterns, PlanPost AI combines machine learning with expert marketing knowledge. We focus specifically on ROAS optimization rather than just engagement metrics. Our system continuously tests and learns from thousands of campaign variables to find the optimal combination for your specific goals.", }, { - question: 'How much time will I save with automated optimization?', - answer: 'Most businesses save 10-20 hours weekly on Meta Ads management. The AI handles bid adjustments, audience optimization, creative testing, and performance monitoring 24/7. You'll only need to review high-level performance and make strategic decisions rather than manual optimizations.' - } + question: "How much time will I save with automated optimization?", + answer: + "Most businesses save 10-20 hours weekly on Meta Ads management. The AI handles bid adjustments, audience optimization, creative testing, and performance monitoring 24/7. You'll only need to review high-level performance and make strategic decisions rather than manual optimizations.", + }, ]; const getColorClass = (color: string): string => { switch (color) { - case 'red': return 'red'; - case 'blue': return 'blue'; - case 'orange': return 'orange'; - case 'purple': return 'purple'; - default: return 'purple'; + case "red": + return "red"; + case "blue": + return "blue"; + case "orange": + return "orange"; + case "purple": + return "purple"; + default: + return "purple"; } }; return ( -
- +
{/* Hero Section */}
@@ -280,37 +319,42 @@ const MetaAdsOptimization: React.FC = () => { AI-Powered Meta Ads Optimization
- +

AI-Powered Meta Ads: Maximize ROAS, Minimize Work

- +

- Automate your Facebook & Instagram ads with AI. Increase ROAS by 40-200% while saving 10+ hours weekly on manual optimization. + Automate your Facebook & Instagram ads with AI. Increase ROAS by + 40-200% while saving 10+ hours weekly on manual optimization. Perfect for UAE, KSA, and Middle East markets.

- - - + +
{/* Stats Grid */}
{stats.map((stat: StatItem, index: number) => ( -
+
-
{stat.number}
+
+ {stat.number} +
{stat.label}
))} @@ -333,17 +377,29 @@ const MetaAdsOptimization: React.FC = () => {
{problemItems.map((item: ProblemItem, index: number) => ( -
-
- +
+
-

{item.title}

-

{item.description}

+

+ {item.title} +

+

+ {item.description} +

-

{item.stat}

+

+ {item.stat} +

))} @@ -353,22 +409,29 @@ const MetaAdsOptimization: React.FC = () => {
42%
-
of businesses struggle with Meta Ads ROAS
+
+ of businesses struggle with Meta Ads ROAS +
$45
-
Average CPM in competitive markets
+
+ Average CPM in competitive markets +
68%
-
Higher customer acquisition cost vs 3 years ago
+
+ Higher customer acquisition cost vs 3 years ago +

- What if you could automate your Meta Ads while increasing ROAS and reducing your workload? + What if you could automate your Meta Ads while increasing ROAS + and reducing your workload?

@@ -376,7 +439,12 @@ const MetaAdsOptimization: React.FC = () => {
{/* AI Solution Section */} -
+

@@ -386,8 +454,9 @@ const MetaAdsOptimization: React.FC = () => {

- PlanPost AI's advanced algorithms understand consumer behavior, market patterns, and conversion signals - to optimize your Meta Ads for maximum ROAS across all markets. + PlanPost AI's advanced algorithms understand consumer + behavior, market patterns, and conversion signals to optimize your + Meta Ads for maximum ROAS across all markets.

@@ -396,9 +465,12 @@ const MetaAdsOptimization: React.FC = () => {
-

Advanced Audience Intelligence

+

+ Advanced Audience Intelligence +

- Our AI analyzes consumer behavior across markets to target the right audiences with relevant messaging that converts. + Our AI analyzes consumer behavior across markets to target the + right audiences with relevant messaging that converts.

@@ -406,9 +478,12 @@ const MetaAdsOptimization: React.FC = () => {
-

Automated Bid Optimization

+

+ Automated Bid Optimization +

- Real-time bidding adjustments based on time of day, device type, and user behavior patterns specific to your target audiences. + Real-time bidding adjustments based on time of day, device type, + and user behavior patterns specific to your target audiences.

@@ -416,9 +491,12 @@ const MetaAdsOptimization: React.FC = () => {
-

ROAS-First Campaign Management

+

+ ROAS-First Campaign Management +

- Every optimization decision prioritizes your return on ad spend, automatically scaling winners and cutting losers. + Every optimization decision prioritizes your return on ad spend, + automatically scaling winners and cutting losers.

@@ -427,24 +505,50 @@ const MetaAdsOptimization: React.FC = () => {
-

See How We Transformed an E-commerce Business

+

+ See How We Transformed an E-commerce Business +

-

Before PlanPost AI

+

+ Before PlanPost AI +

-
ROAS: 1.8x
-
CPA: $45
-
Weekly Management: 18 hours
-
Monthly Ad Spend: $15,000
+
+ ROAS: 1.8x +
+
+ CPA: $45 +
+
+ Weekly Management:{" "} + 18 hours +
+
+ Monthly Ad Spend:{" "} + $15,000 +
-

After PlanPost AI

+

+ After PlanPost AI +

-
ROAS: 4.2x
-
CPA: $22
-
Weekly Management: 2 hours
-
Monthly Ad Spend: $25,000
+
+ ROAS: 4.2x +
+
+ CPA: $22 +
+
+ Weekly Management:{" "} + 2 hours +
+
+ Monthly Ad Spend:{" "} + $25,000 +
@@ -452,8 +556,10 @@ const MetaAdsOptimization: React.FC = () => {

- "We were burning through our Meta Ads budget with mediocre results. PlanPost AI transformed our campaigns. - We went from 1.5x to 4.8x ROAS while cutting our management time by 80%." + "We were burning through our Meta Ads budget with + mediocre results. PlanPost AI transformed our campaigns. We + went from 1.5x to 4.8x ROAS while cutting our management time + by 80%."

Sarah Johnson

@@ -487,23 +593,29 @@ const MetaAdsOptimization: React.FC = () => { onMouseLeave={() => setHoveredCard(null)} className={`p-6 rounded-2xl text-left transition-all duration-300 backdrop-blur-sm border-2 ${ activeFeature === feature.id - ? 'bg-white shadow-xl border-[#6a47ed] transform scale-105' + ? "bg-white shadow-xl border-[#6a47ed] transform scale-105" : hoveredCard === feature.id - ? 'bg-white/80 shadow-lg border-white/40 transform scale-102' - : 'bg-white/50 border-white/20' + ? "bg-white/80 shadow-lg border-white/40 transform scale-102" + : "bg-white/50 border-white/20" }`} >
-
+
{feature.popular && ( - Popular + + Popular + )}
-

{feature.title}

+

+ {feature.title} +

- {feature.description.split('.').slice(0, 2).join('.')}. + {feature.description.split(".").slice(0, 2).join(".")}.

))} @@ -514,38 +626,56 @@ const MetaAdsOptimization: React.FC = () => {
-
+
-

{feature.title}

+

+ {feature.title} +

{feature.description}

- +
- {feature.highlights.map((highlight: string, index: number) => ( -
-
- + {feature.highlights.map( + (highlight: string, index: number) => ( +
+
+ +
+ + {highlight} +
- {highlight} -
- ))} + ) + )}
{feature.results && (
{feature.results.map((result, index) => ( -
-
{result.value}
-
{result.metric}
+
+
+ {result.value} +
+
+ {result.metric} +
))}
@@ -555,35 +685,48 @@ const MetaAdsOptimization: React.FC = () => {
{feature.example && (
-

E-commerce Example

+

+ E-commerce Example +

-

Input

+

+ Input +

-

{feature.example.input}

+

+ {feature.example.input} +

-

AI Output

+

+ AI Output +

-

{feature.example.output}

+

+ {feature.example.output} +

)} - {feature.id === 'roas-engine' && ( + {feature.id === "roas-engine" && (
-

Retail Success Story

+

+ Retail Success Story +

- Challenge: Fashion retailer struggling with 1.2x ROAS despite $50,000 monthly ad spend. + Challenge: Fashion retailer struggling with 1.2x ROAS + despite $50,000 monthly ad spend.

Solution: Implemented PlanPost AI ROAS optimization @@ -612,7 +755,12 @@ const MetaAdsOptimization: React.FC = () => { {/* Industries Section */} -

+

@@ -625,16 +773,26 @@ const MetaAdsOptimization: React.FC = () => {
{industries.map((industry: Industry, index: number) => ( -
+
-

{industry.name}

-

{industry.description}

- +

+ {industry.name} +

+

+ {industry.description} +

+
{industry.results.map((result: string, idx: number) => ( -
+
{result}
@@ -642,7 +800,9 @@ const MetaAdsOptimization: React.FC = () => {
-

{industry.average}

+

+ {industry.average} +

))} @@ -666,35 +826,43 @@ const MetaAdsOptimization: React.FC = () => { {[ { step: 1, - title: 'Connect Your Meta Accounts', - description: 'Secure integration with your Meta Business Manager. We support multiple accounts for agencies and multi-brand businesses.', - content: '[Meta Business Manager integration]' + title: "Connect Your Meta Accounts", + description: + "Secure integration with your Meta Business Manager. We support multiple accounts for agencies and multi-brand businesses.", + content: "[Meta Business Manager integration]", }, { step: 2, - title: 'Set Your ROAS Targets', - description: 'Define your target ROAS, budget, and campaign objectives. Our AI handles the complex optimization work.', - content: '[ROAS target setting interface]' + title: "Set Your ROAS Targets", + description: + "Define your target ROAS, budget, and campaign objectives. Our AI handles the complex optimization work.", + content: "[ROAS target setting interface]", }, { step: 3, - title: 'AI Takes Over Optimization', - description: 'Our algorithms analyze market patterns and begin optimizing your campaigns 24/7 for maximum ROAS.', - content: '[AI optimization dashboard]' + title: "AI Takes Over Optimization", + description: + "Our algorithms analyze market patterns and begin optimizing your campaigns 24/7 for maximum ROAS.", + content: "[AI optimization dashboard]", }, { step: 4, - title: 'Monitor & Scale Profitably', - description: 'Watch your ROAS improve while spending 80% less time on management. Scale your budgets with confidence.', - content: '[ROAS growth chart]' - } + title: "Monitor & Scale Profitably", + description: + "Watch your ROAS improve while spending 80% less time on management. Scale your budgets with confidence.", + content: "[ROAS growth chart]", + }, ].map((item, index) => (
{item.step}
-

{item.title}

-

{item.description}

+

+ {item.title} +

+

+ {item.description} +

{item.content}
@@ -704,17 +872,25 @@ const MetaAdsOptimization: React.FC = () => {

- No credit card required • Setup in 15 minutes • Global support available + No credit card required • Setup in 15 minutes • Global support + available

{/* FAQ Section */} -
+

@@ -727,8 +903,13 @@ const MetaAdsOptimization: React.FC = () => {
{faqs.map((faq: FAQ, index: number) => ( -
-

{faq.question}

+
+

+ {faq.question} +

{faq.answer}

))} @@ -748,19 +929,25 @@ const MetaAdsOptimization: React.FC = () => { Join 5,000+ Businesses Already Maximizing Their Meta Ads ROAS

- +
{[ - 'Proven Global Results', - 'Significant ROAS Improvement', - 'Time & Cost Savings' + "Proven Global Results", + "Significant ROAS Improvement", + "Time & Cost Savings", ].map((benefit: string, index: number) => ( -
+

{benefit}

- {index === 0 && 'Optimized for businesses across all markets and industries'} - {index === 1 && 'Average 147% ROAS increase across our client base'} - {index === 2 && 'Save 10-20 hours weekly while reducing your customer acquisition cost'} + {index === 0 && + "Optimized for businesses across all markets and industries"} + {index === 1 && + "Average 147% ROAS increase across our client base"} + {index === 2 && + "Save 10-20 hours weekly while reducing your customer acquisition cost"}

))} @@ -768,11 +955,11 @@ const MetaAdsOptimization: React.FC = () => {
{[ - 'Increase ROAS by 40-200%', - 'Reduce CPA by 30-60%', - 'Save 10+ hours weekly on ad management', - 'Scale your budgets with confidence', - 'Advanced audience and market optimization' + "Increase ROAS by 40-200%", + "Reduce CPA by 30-60%", + "Save 10+ hours weekly on ad management", + "Scale your budgets with confidence", + "Advanced audience and market optimization", ].map((benefit: string, index: number) => (
@@ -782,11 +969,14 @@ const MetaAdsOptimization: React.FC = () => {
- +

- No credit card required • Setup in 15 minutes • Global support • 30-day money-back guarantee + No credit card required • Setup in 15 minutes • Global support • + 30-day money-back guarantee

@@ -794,4 +984,4 @@ const MetaAdsOptimization: React.FC = () => { ); }; -export default MetaAdsOptimization; \ No newline at end of file +export default MetaAdsOptimization; diff --git a/src/app/(features-landing)/ai-video-generator/page.tsx b/src/app/(features-landing)/ai-video-generator/page.tsx index 8e75c4e..1c26b95 100644 --- a/src/app/(features-landing)/ai-video-generator/page.tsx +++ b/src/app/(features-landing)/ai-video-generator/page.tsx @@ -1,13 +1,13 @@ -'use client' +"use client"; -import React, { useState } from 'react'; -import { - Check, - Clock, - Zap, - Video, - Image, +import React, { useState } from "react"; +import { + Check, + Clock, + Zap, + Image, ArrowRight, + Video, Star, Sparkle, Rocket, @@ -16,16 +16,17 @@ import { Building, GraduationCap, FileText, - Palette, - LucideProps -} from 'lucide-react'; -import Link from 'next/link'; + LucideProps, +} from "lucide-react"; +import Link from "next/link"; // TypeScript Interfaces interface Feature { id: string; - icon: React.ForwardRefExoticComponent & React.RefAttributes>; + icon: React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; title: string; description: string; highlights: string[]; @@ -38,7 +39,9 @@ interface Feature { } interface ProblemItem { - icon: React.ForwardRefExoticComponent & React.RefAttributes>; + icon: React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; title: string; description: string; stat: string; @@ -51,7 +54,9 @@ interface StatItem { } interface Industry { - icon: React.ForwardRefExoticComponent & React.RefAttributes>; + icon: React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; name: string; description: string; useCases: string[]; @@ -64,181 +69,214 @@ interface FAQ { } const AIVideoGenerator: React.FC = () => { - const [activeFeature, setActiveFeature] = useState('text-to-video'); + const [activeFeature, setActiveFeature] = useState("text-to-video"); const [hoveredCard, setHoveredCard] = useState(null); const features: Feature[] = [ { - id: 'text-to-video', + id: "text-to-video", icon: FileText, - title: 'Text-to-Video Generation', - description: 'Transform any text description into a complete, professional video. Our AI understands context, emotion, and storytelling to create videos that engage and convert.', + title: "Text-to-Video Generation", + description: + "Transform any text description into a complete, professional video. Our AI understands context, emotion, and storytelling to create videos that engage and convert.", highlights: [ - 'Natural Language Understanding: The AI interprets your text and creates relevant visuals, motion, and pacing', - 'Automatic Scene Generation: Creates multiple scenes with smooth transitions based on your text structure', - 'Voiceover & Music Integration: Adds professional voiceovers and background music that matches your content tone', - 'Style Adaptation: Choose from cinematic, corporate, social media, educational, or custom styles', - 'Multiple Output Options: Generate 3-5 video variations and choose your favorite' + "Natural Language Understanding: The AI interprets your text and creates relevant visuals, motion, and pacing", + "Automatic Scene Generation: Creates multiple scenes with smooth transitions based on your text structure", + "Voiceover & Music Integration: Adds professional voiceovers and background music that matches your content tone", + "Style Adaptation: Choose from cinematic, corporate, social media, educational, or custom styles", + "Multiple Output Options: Generate 3-5 video variations and choose your favorite", ], examples: { - input: 'Create a 60-second promotional video for our new coffee shop, showing morning customers enjoying artisanal coffee in a cozy atmosphere with warm lighting', - output: 'Professional 60-second video with multiple scenes: coffee brewing, customers chatting, close-ups of coffee art, and text overlays about the coffee shop experience' + input: + "Create a 60-second promotional video for our new coffee shop, showing morning customers enjoying artisanal coffee in a cozy atmosphere with warm lighting", + output: + "Professional 60-second video with multiple scenes: coffee brewing, customers chatting, close-ups of coffee art, and text overlays about the coffee shop experience", }, - gradient: 'from-purple-500 to-pink-500', - popular: true + gradient: "from-purple-500 to-pink-500", + popular: true, }, { - id: 'image-to-video', + id: "image-to-video", icon: Image, - title: 'Image-to-Video Transformation', - description: 'Bring your images to life with AI-powered animation and motion. Transform static photos into engaging video content that captures attention.', + title: "Image-to-Video Transformation", + description: + "Bring your images to life with AI-powered animation and motion. Transform static photos into engaging video content that captures attention.", highlights: [ - 'Smart Image Analysis: AI detects subjects, backgrounds, and focal points to create natural motion', - 'Multiple Animation Styles: Choose from ken burns effects, parallax scrolling, object animation, or custom motions', - 'Batch Processing: Transform multiple images into a cohesive video story automatically', - 'Background Enhancement: AI can replace or enhance backgrounds while keeping subjects sharp', - 'Slide Show to Video: Convert image collections into professional video presentations' + "Smart Image Analysis: AI detects subjects, backgrounds, and focal points to create natural motion", + "Multiple Animation Styles: Choose from ken burns effects, parallax scrolling, object animation, or custom motions", + "Batch Processing: Transform multiple images into a cohesive video story automatically", + "Background Enhancement: AI can replace or enhance backgrounds while keeping subjects sharp", + "Slide Show to Video: Convert image collections into professional video presentations", ], examples: { - input: 'Real estate property photos: living room, kitchen, bedroom, backyard', - output: 'Smooth 45-second property tour video with panning effects, transitions between rooms, and text overlays highlighting features' + input: + "Real estate property photos: living room, kitchen, bedroom, backyard", + output: + "Smooth 45-second property tour video with panning effects, transitions between rooms, and text overlays highlighting features", }, - gradient: 'from-blue-500 to-cyan-500' - } + gradient: "from-blue-500 to-cyan-500", + }, ]; const problemItems: ProblemItem[] = [ { icon: Zap, - title: 'Prohibitively Expensive', - description: 'Professional video production costs $1,000-$5,000 per minute. Most businesses can\'t afford consistent video content at these rates, missing out on video\'s 80% higher conversion rates.', - stat: '$1,000-$5,000 per minute', - color: 'red' + title: "Prohibitively Expensive", + description: + "Professional video production costs $1,000-$5,000 per minute. Most businesses can't afford consistent video content at these rates, missing out on video's 80% higher conversion rates.", + stat: "$1,000-$5,000 per minute", + color: "red", }, { icon: Clock, - title: 'Time-Consuming Production', - description: 'From scripting to filming to editing, creating one video can take 10-40 hours. The average marketer spends 15+ hours weekly trying to create basic video content.', - stat: '10-40 hours per video', - color: 'orange' + title: "Time-Consuming Production", + description: + "From scripting to filming to editing, creating one video can take 10-40 hours. The average marketer spends 15+ hours weekly trying to create basic video content.", + stat: "10-40 hours per video", + color: "orange", }, { icon: Video, - title: 'Technical Skills Required', - description: 'Learning complex editing software like Premiere Pro or After Effects takes months. Most businesses lack the in-house expertise to create professional-quality videos.', - stat: 'Months of learning required', - color: 'purple' + title: "Technical Skills Required", + description: + "Learning complex editing software like Premiere Pro or After Effects takes months. Most businesses lack the in-house expertise to create professional-quality videos.", + stat: "Months of learning required", + color: "purple", }, { icon: Palette, - title: 'Inconsistent Quality', - description: 'Amateur videos damage brand perception, while inconsistent quality across platforms confuses audiences and weakens your brand authority.', - stat: 'Brand perception at risk', - color: 'blue' - } + title: "Inconsistent Quality", + description: + "Amateur videos damage brand perception, while inconsistent quality across platforms confuses audiences and weakens your brand authority.", + stat: "Brand perception at risk", + color: "blue", + }, ]; const stats: StatItem[] = [ - { number: '87%', label: 'of marketers say video is their most effective content' }, - { number: '$2,500', label: 'average cost per professional video' }, - { number: '12+', label: 'hours spent per video without AI' } + { + number: "87%", + label: "of marketers say video is their most effective content", + }, + { number: "$2,500", label: "average cost per professional video" }, + { number: "12+", label: "hours spent per video without AI" }, ]; const industries: Industry[] = [ { icon: Users, - name: 'Social Media & Marketing', - description: 'Create engaging content for all social platforms with platform-optimized videos that drive engagement and conversions.', + name: "Social Media & Marketing", + description: + "Create engaging content for all social platforms with platform-optimized videos that drive engagement and conversions.", useCases: [ - 'Instagram Reels & Stories', - 'TikTok viral content', - 'Facebook ads and posts', - 'YouTube shorts and content' + "Instagram Reels & Stories", + "TikTok viral content", + "Facebook ads and posts", + "YouTube shorts and content", ], - results: 'Results: 300% engagement increase, 5x more content' + results: "Results: 300% engagement increase, 5x more content", }, { icon: ShoppingCart, - name: 'E-commerce & Retail', - description: 'Generate product videos, demos, and promotional content that showcases products and drives sales.', + name: "E-commerce & Retail", + description: + "Generate product videos, demos, and promotional content that showcases products and drives sales.", useCases: [ - 'Product demonstration videos', - 'Customer testimonial videos', - 'Promotional campaign videos', - 'Social commerce content' + "Product demonstration videos", + "Customer testimonial videos", + "Promotional campaign videos", + "Social commerce content", ], - results: 'Results: 85% higher conversion, 3.2x ROAS' + results: "Results: 85% higher conversion, 3.2x ROAS", }, { icon: Building, - name: 'Corporate & Training', - description: 'Create professional training materials, internal communications, and corporate presentations efficiently.', + name: "Corporate & Training", + description: + "Create professional training materials, internal communications, and corporate presentations efficiently.", useCases: [ - 'Employee training videos', - 'Internal communication', - 'Corporate announcements', - 'Process documentation' + "Employee training videos", + "Internal communication", + "Corporate announcements", + "Process documentation", ], - results: 'Results: 70% time savings, consistent quality' + results: "Results: 70% time savings, consistent quality", }, { icon: GraduationCap, - name: 'Education & Courses', - description: 'Develop engaging educational content, course materials, and tutorial videos that improve learning outcomes.', + name: "Education & Courses", + description: + "Develop engaging educational content, course materials, and tutorial videos that improve learning outcomes.", useCases: [ - 'Online course content', - 'Educational explainers', - 'Student engagement videos', - 'Tutorial and how-to content' + "Online course content", + "Educational explainers", + "Student engagement videos", + "Tutorial and how-to content", ], - results: 'Results: 45% better retention, scalable content' - } + results: "Results: 45% better retention, scalable content", + }, ]; const faqs: FAQ[] = [ { - question: 'How long does it take to generate a video?', - answer: 'Most videos are generated in 1-3 minutes, depending on length and complexity. Our AI processes your request and creates multiple scenes, adds motion graphics, applies transitions, and integrates sound automatically. You\'ll have a complete, professional video ready in under 5 minutes.' + question: "How long does it take to generate a video?", + answer: + "Most videos are generated in 1-3 minutes, depending on length and complexity. Our AI processes your request and creates multiple scenes, adds motion graphics, applies transitions, and integrates sound automatically. You'll have a complete, professional video ready in under 5 minutes.", }, { - question: 'What video quality can I expect?', - answer: 'We deliver broadcast-quality videos up to 4K resolution. All videos include professional color grading, smooth transitions, and cinematic pacing. The quality rivals agency-produced videos but at a fraction of the cost and time. Higher-tier plans include 4K and HDR quality options.' + question: "What video quality can I expect?", + answer: + "We deliver broadcast-quality videos up to 4K resolution. All videos include professional color grading, smooth transitions, and cinematic pacing. The quality rivals agency-produced videos but at a fraction of the cost and time. Higher-tier plans include 4K and HDR quality options.", }, { - question: 'Can I customize the AI-generated videos?', - answer: 'Yes! All videos are fully customizable. You can edit text, swap images, adjust timing, change music, and modify colors. Our intuitive editor makes it easy to make quick changes without any technical skills. You can also regenerate specific scenes or the entire video with different styles.' + question: "Can I customize the AI-generated videos?", + answer: + "Yes! All videos are fully customizable. You can edit text, swap images, adjust timing, change music, and modify colors. Our intuitive editor makes it easy to make quick changes without any technical skills. You can also regenerate specific scenes or the entire video with different styles.", }, { - question: 'Do you provide commercial rights for the videos?', - answer: 'Yes, all videos generated with PlanPost AI include full commercial rights. You can use them for marketing, advertising, social media, websites, and any other business purposes. We also provide royalty-free music and stock footage where applicable.' + question: "Do you provide commercial rights for the videos?", + answer: + "Yes, all videos generated with PlanPost AI include full commercial rights. You can use them for marketing, advertising, social media, websites, and any other business purposes. We also provide royalty-free music and stock footage where applicable.", }, { - question: 'How does the text-to-video AI understand my content?', - answer: 'Our AI uses advanced natural language processing to understand context, emotion, and storytelling elements in your text. It analyzes your description to determine appropriate visuals, pacing, music, and style. The more detailed your description, the better the AI can match your vision.' + question: "How does the text-to-video AI understand my content?", + answer: + "Our AI uses advanced natural language processing to understand context, emotion, and storytelling elements in your text. It analyzes your description to determine appropriate visuals, pacing, music, and style. The more detailed your description, the better the AI can match your vision.", }, { - question: 'What video formats and lengths are supported?', - answer: 'We support all major video formats (MP4, MOV, AVI) and lengths from 15 seconds to 10 minutes. The AI automatically optimizes video length based on your target platform and content type. You can also specify exact duration preferences in your video description.' + question: "What video formats and lengths are supported?", + answer: + "We support all major video formats (MP4, MOV, AVI) and lengths from 15 seconds to 10 minutes. The AI automatically optimizes video length based on your target platform and content type. You can also specify exact duration preferences in your video description.", }, { - question: 'Can I use my own brand elements in the videos?', - answer: 'Absolutely. You can upload your logo, brand colors, fonts, and other brand assets. The AI will incorporate these elements consistently across all generated videos. Enterprise plans include custom brand style training for complete brand consistency.' - } + question: "Can I use my own brand elements in the videos?", + answer: + "Absolutely. You can upload your logo, brand colors, fonts, and other brand assets. The AI will incorporate these elements consistently across all generated videos. Enterprise plans include custom brand style training for complete brand consistency.", + }, ]; const getColorClass = (color: string): string => { switch (color) { - case 'red': return 'red'; - case 'orange': return 'orange'; - case 'purple': return 'purple'; - case 'blue': return 'blue'; - default: return 'purple'; + case "red": + return "red"; + case "orange": + return "orange"; + case "purple": + return "purple"; + case "blue": + return "blue"; + default: + return "purple"; } }; return ( -
- +
{/* Hero Section */}
@@ -252,37 +290,43 @@ const AIVideoGenerator: React.FC = () => { AI Video Generator
- +

AI Video Generator: Create Professional Videos from Text & Images

- +

- Transform text and images into engaging, professional-quality videos in minutes. - Save 80% on video production costs and create video content 10x faster with AI. + Transform text and images into engaging, professional-quality + videos in minutes. Save 80% on video production costs and create + video content 10x faster with AI.

- - - + + +
{[...Array(5)].map((_, i) => ( - + ))}
- 4.9/5 from 3,500+ video creators + + 4.9/5 from 3,500+ video creators +
@@ -302,17 +346,29 @@ const AIVideoGenerator: React.FC = () => {
{problemItems.map((item: ProblemItem, index: number) => ( -
-
- +
+
-

{item.title}

-

{item.description}

+

+ {item.title} +

+

+ {item.description} +

-

{item.stat}

+

+ {item.stat} +

))} @@ -321,8 +377,13 @@ const AIVideoGenerator: React.FC = () => { {/* Stats */}
{stats.map((stat: StatItem, index: number) => ( -
-
{stat.number}
+
+
+ {stat.number} +
{stat.label}
))} @@ -331,7 +392,8 @@ const AIVideoGenerator: React.FC = () => {

- 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?

@@ -339,7 +401,12 @@ const AIVideoGenerator: React.FC = () => {
{/* AI Solution Section */} -
+

@@ -349,8 +416,9 @@ const AIVideoGenerator: React.FC = () => {

- PlanPost AI transforms how businesses create video content. From simple text descriptions or existing images, - generate professional videos that engage audiences and drive results. + PlanPost AI transforms how businesses create video content. From + simple text descriptions or existing images, generate professional + videos that engage audiences and drive results.

@@ -359,9 +427,12 @@ const AIVideoGenerator: React.FC = () => {
-

Instant Video Generation

+

+ Instant Video Generation +

- 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.

@@ -369,9 +440,12 @@ const AIVideoGenerator: React.FC = () => {
-

Studio-Quality Results

+

+ Studio-Quality Results +

- 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.

@@ -379,9 +453,12 @@ const AIVideoGenerator: React.FC = () => {
-

Platform-Optimized

+

+ Platform-Optimized +

- 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.

@@ -410,23 +487,29 @@ const AIVideoGenerator: React.FC = () => { onMouseLeave={() => setHoveredCard(null)} className={`p-6 rounded-2xl text-left transition-all duration-300 backdrop-blur-sm border-2 ${ activeFeature === feature.id - ? 'bg-white shadow-xl border-[#6a47ed] transform scale-105' + ? "bg-white shadow-xl border-[#6a47ed] transform scale-105" : hoveredCard === feature.id - ? 'bg-white/80 shadow-lg border-white/40 transform scale-102' - : 'bg-white/50 border-white/20' + ? "bg-white/80 shadow-lg border-white/40 transform scale-102" + : "bg-white/50 border-white/20" }`} >
-
+
{feature.popular && ( - Most Popular + + Most Popular + )}
-

{feature.title}

+

+ {feature.title} +

- {feature.description.split('.').slice(0, 2).join('.')}. + {feature.description.split(".").slice(0, 2).join(".")}.

))} @@ -437,30 +520,41 @@ const AIVideoGenerator: React.FC = () => {
-
+
-

{feature.title}

+

+ {feature.title} +

{feature.description}

- +
- {feature.highlights.map((highlight: string, index: number) => ( -
-
- + {feature.highlights.map( + (highlight: string, index: number) => ( +
+
+ +
+ + {highlight} +
- {highlight} -
- ))} + ) + )}
@@ -468,25 +562,35 @@ const AIVideoGenerator: React.FC = () => { {feature.examples && (

- {feature.id === 'text-to-video' ? 'Text-to-Video Example' : 'Real Estate Example'} + {feature.id === "text-to-video" + ? "Text-to-Video Example" + : "Real Estate Example"}

-

Input

+

+ Input +

-

{feature.examples.input}

+

+ {feature.examples.input} +

-

AI Output

+

+ AI Output +

-

{feature.examples.output}

+

+ {feature.examples.output} +

@@ -494,23 +598,41 @@ const AIVideoGenerator: React.FC = () => { )}
-

Video Specifications

+

+ Video Specifications +

-
4K
-
Maximum Resolution
+
+ 4K +
+
+ Maximum Resolution +
-
1-3 min
-
Generation Time
+
+ 1-3 min +
+
+ Generation Time +
-
15s-10m
-
Video Length
+
+ 15s-10m +
+
+ Video Length +
-
5
-
Style Options
+
+ 5 +
+
+ Style Options +
@@ -522,7 +644,12 @@ const AIVideoGenerator: React.FC = () => { {/* Industries Section */} -
+

@@ -535,16 +662,26 @@ const AIVideoGenerator: React.FC = () => {
{industries.map((industry: Industry, index: number) => ( -
+
-

{industry.name}

-

{industry.description}

- +

+ {industry.name} +

+

+ {industry.description} +

+
{industry.useCases.map((useCase: string, idx: number) => ( -
+
{useCase}
@@ -552,7 +689,9 @@ const AIVideoGenerator: React.FC = () => {
-

{industry.results}

+

+ {industry.results} +

))} @@ -576,29 +715,36 @@ const AIVideoGenerator: React.FC = () => { {[ { step: 1, - title: 'Describe Your Video', - description: 'Enter your text prompt or upload images. Specify style, duration, and platform preferences.', - content: '[Text input interface with style options]' + title: "Describe Your Video", + description: + "Enter your text prompt or upload images. Specify style, duration, and platform preferences.", + content: "[Text input interface with style options]", }, { step: 2, - title: 'AI Generates Your Video', - description: 'Our AI creates multiple video versions with professional editing, motion graphics, and sound.', - content: '[AI generation progress indicator]' + title: "AI Generates Your Video", + description: + "Our AI creates multiple video versions with professional editing, motion graphics, and sound.", + content: "[AI generation progress indicator]", }, { step: 3, - title: 'Customize & Publish', - description: 'Review, make quick edits if needed, and publish directly to your platforms or download.', - content: '[Video editor with publishing options]' - } + title: "Customize & Publish", + description: + "Review, make quick edits if needed, and publish directly to your platforms or download.", + content: "[Video editor with publishing options]", + }, ].map((item, index) => (
{item.step}
-

{item.title}

-

{item.description}

+

+ {item.title} +

+

+ {item.description} +

{item.content}
@@ -608,17 +754,25 @@ const AIVideoGenerator: React.FC = () => {

- 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

{/* FAQ Section */} -
+

@@ -631,8 +785,13 @@ const AIVideoGenerator: React.FC = () => {
{faqs.map((faq: FAQ, index: number) => ( -
-

{faq.question}

+
+

+ {faq.question} +

{faq.answer}

))} @@ -652,19 +811,33 @@ const AIVideoGenerator: React.FC = () => { Start Creating Professional Videos in Minutes, Not Days

- +

Join 3,500+ businesses creating stunning video content with AI

{[ - { title: '80% Cost Savings', desc: 'Create videos for a fraction of traditional production costs' }, - { title: '10x Faster Creation', desc: 'Generate professional videos in minutes instead of days' }, - { title: 'No Skills Required', desc: 'Create studio-quality videos without any technical expertise' } + { + title: "80% Cost Savings", + desc: "Create videos for a fraction of traditional production costs", + }, + { + title: "10x Faster Creation", + desc: "Generate professional videos in minutes instead of days", + }, + { + title: "No Skills Required", + desc: "Create studio-quality videos without any technical expertise", + }, ].map((item, index) => ( -
-

{item.title}

+
+

+ {item.title} +

{item.desc}

))} @@ -672,11 +845,11 @@ const AIVideoGenerator: React.FC = () => {
{[ - 'Create videos from text descriptions', - 'Transform images into engaging videos', - '4K broadcast-quality output', - 'Platform-optimized for all social media', - 'Full commercial rights included' + "Create videos from text descriptions", + "Transform images into engaging videos", + "4K broadcast-quality output", + "Platform-optimized for all social media", + "Full commercial rights included", ].map((benefit: string, index: number) => (
@@ -686,11 +859,14 @@ const AIVideoGenerator: React.FC = () => {
- +

- 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

@@ -698,4 +874,4 @@ const AIVideoGenerator: React.FC = () => { ); }; -export default AIVideoGenerator; \ No newline at end of file +export default AIVideoGenerator; diff --git a/src/app/(features-landing)/bulk-content/page.tsx b/src/app/(features-landing)/bulk-content/page.tsx index f31eecf..0ef26c0 100644 --- a/src/app/(features-landing)/bulk-content/page.tsx +++ b/src/app/(features-landing)/bulk-content/page.tsx @@ -1,34 +1,33 @@ -'use client' +"use client"; -import React, { useState } from 'react'; -import { - Check, - Clock, - TrendingUp, - Target, +import React, { useState } from "react"; +import { + Check, + Clock, + TrendingUp, + Target, ArrowRight, Star, Quote, - Sparkle, Rocket, - Globe, FileText, Building, ShoppingCart, - Zap, Users, BarChart3, - LucideProps -} from 'lucide-react'; -import Link from 'next/link'; + LucideProps, +} from "lucide-react"; +import Link from "next/link"; // TypeScript Interfaces interface Feature { id: string; - icon: React.ForwardRefExoticComponent & React.RefAttributes>; + icon: React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; title: string; description: string; highlights: string[]; @@ -42,7 +41,9 @@ interface Feature { } interface ProblemItem { - icon: React.ForwardRefExoticComponent & React.RefAttributes>; + icon: React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; title: string; description: string; stat: string; @@ -55,7 +56,9 @@ interface StatItem { } interface Industry { - icon: React.ForwardRefExoticComponent & React.RefAttributes>; + icon: React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; name: string; description: string; useCases: string[]; @@ -68,203 +71,230 @@ interface FAQ { } const BulkGeneration: React.FC = () => { - const [activeFeature, setActiveFeature] = useState('bulk-content'); + const [activeFeature, setActiveFeature] = useState("bulk-content"); const [hoveredCard, setHoveredCard] = useState(null); const features: Feature[] = [ { - id: 'bulk-content', + 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.', + 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' + "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' + 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 + gradient: "from-purple-500 to-pink-500", + popular: true, }, { - id: 'campaign-scaling', + id: "campaign-scaling", icon: TrendingUp, - title: 'Campaign Scaling Engine', - description: 'Launch complete marketing campaigns across multiple platforms with coordinated messaging and scheduling.', + 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' + "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' - ] + "5x Faster Campaign Launch", + "200+ Content Variations", + "87% Time Savings", + "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, - title: 'Enterprise Workflow Management', - description: 'Manage large content teams with approval workflows, collaboration tools, and enterprise-grade security.', + 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' + "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' - ] + "75% Faster Team Onboarding", + "90% Reduction in Review Cycles", + "Enterprise-Grade Security", + "Unlimited Team Members", + ], }, - gradient: 'from-green-500 to-emerald-500' - } + 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' + 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' + 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' + 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' - } + 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' } + { 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.', + 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' + "Global campaign management", + "Multi-team collaboration", + "Brand compliance at scale", + "Enterprise security", ], - results: 'Results: 10x content output, 75% faster campaigns' + 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.', + 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' + "Product catalog scaling", + "Seasonal campaign launches", + "Multi-platform product launches", + "Inventory-based content", ], - results: 'Results: 200+ products daily, 3.2x conversion rate' + 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.', + 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' + "Client content scaling", + "Team workflow management", + "Campaign coordination", + "Performance analytics", ], - results: 'Results: 5x client capacity, 87% time savings' + 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.', + 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' + "Multi-region campaigns", + "Localized content scaling", + "International team coordination", + "Global brand consistency", ], - results: 'Results: 15 regions managed, 95% 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: "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: "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: "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: "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: "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.' - } + 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'; + case "purple": + return "purple"; + case "blue": + return "blue"; + case "orange": + return "orange"; + case "red": + return "red"; + default: + return "purple"; } }; return ( -
- +
{/* Hero Section */}
@@ -278,38 +308,43 @@ const BulkGeneration: React.FC = () => { AI Bulk Content Generation
- +

Bulk Content Generation: Scale Your Content 10x Faster

- +

- Generate hundreds of social media posts, product descriptions, and marketing content in one click. - Scale your content production without scaling your team or workload. + Generate hundreds of social media posts, product descriptions, and + marketing content in one click. Scale your content production + without scaling your team or workload.

- - - + +
{[...Array(5)].map((_, i) => ( - + ))}
- 4.9/5 from 1,200+ enterprise teams + + 4.9/5 from 1,200+ enterprise teams +
@@ -329,17 +364,29 @@ const BulkGeneration: React.FC = () => {
{problemItems.map((item: ProblemItem, index: number) => ( -
-
- +
+
-

{item.title}

-

{item.description}

+

+ {item.title} +

+

+ {item.description} +

-

{item.stat}

+

+ {item.stat} +

))} @@ -348,8 +395,13 @@ const BulkGeneration: React.FC = () => { {/* Stats */}
{stats.map((stat: StatItem, index: number) => ( -
-
{stat.number}
+
+
+ {stat.number} +
{stat.label}
))} @@ -358,7 +410,8 @@ const BulkGeneration: React.FC = () => {

- 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?

@@ -366,7 +419,12 @@ const BulkGeneration: React.FC = () => {
{/* AI Solution Section */} -
+

@@ -376,8 +434,9 @@ const BulkGeneration: React.FC = () => {

- PlanPost AI's bulk generation engine handles massive content volumes while maintaining quality, - brand consistency, and team coordination across your entire organization. + PlanPost AI's bulk generation engine handles massive content + volumes while maintaining quality, brand consistency, and team + coordination across your entire organization.

@@ -386,9 +445,12 @@ const BulkGeneration: React.FC = () => {
-

Massive Scale Capacity

+

+ Massive Scale Capacity +

- 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.

@@ -396,9 +458,12 @@ const BulkGeneration: React.FC = () => {
-

Campaign Coordination

+

+ Campaign Coordination +

- Launch coordinated campaigns across multiple platforms with consistent messaging and automated scheduling. + Launch coordinated campaigns across multiple platforms with + consistent messaging and automated scheduling.

@@ -406,19 +471,26 @@ const BulkGeneration: React.FC = () => {
-

Team Workflow Management

+

+ Team Workflow Management +

- 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.

{/* Comparison Section */}
-

Traditional vs. Bulk Generation Workflow

+

+ Traditional vs. Bulk Generation Workflow +

-

Manual Content Creation

+

+ Manual Content Creation +

@@ -439,7 +511,9 @@ const BulkGeneration: React.FC = () => {
-

PlanPost AI Bulk Generation

+

+ PlanPost AI Bulk Generation +

@@ -466,8 +540,10 @@ const BulkGeneration: React.FC = () => {

- "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." + "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."

Content Director

@@ -499,23 +575,29 @@ const BulkGeneration: React.FC = () => { onMouseLeave={() => setHoveredCard(null)} className={`p-6 rounded-2xl text-left transition-all duration-300 backdrop-blur-sm border-2 ${ activeFeature === feature.id - ? 'bg-white shadow-xl border-[#6a47ed] transform scale-105' + ? "bg-white shadow-xl border-[#6a47ed] transform scale-105" : hoveredCard === feature.id - ? 'bg-white/80 shadow-lg border-white/40 transform scale-102' - : 'bg-white/50 border-white/20' + ? "bg-white/80 shadow-lg border-white/40 transform scale-102" + : "bg-white/50 border-white/20" }`} >
-
+
{feature.popular && ( - Most Popular + + Most Popular + )}
-

{feature.title}

+

+ {feature.title} +

- {feature.description.split('.').slice(0, 2).join('.')}. + {feature.description.split(".").slice(0, 2).join(".")}.

))} @@ -526,54 +608,75 @@ const BulkGeneration: React.FC = () => {
-
+
-

{feature.title}

+

+ {feature.title} +

{feature.description}

- +
- {feature.highlights.map((highlight: string, index: number) => ( -
-
- + {feature.highlights.map( + (highlight: string, index: number) => ( +
+
+ +
+ + {highlight} +
- {highlight} -
- ))} + ) + )}
{feature.examples?.input && feature.examples.output && (
-

E-commerce Example

+

+ E-commerce Example +

-

Input

+

+ Input +

-

{feature.examples.input}

+

+ {feature.examples.input} +

-

Output

+

+ Output +

-

{feature.examples.output}

+

+ {feature.examples.output} +

@@ -586,12 +689,17 @@ const BulkGeneration: React.FC = () => { Enterprise Performance Metrics
- {feature.examples.metrics.map((metric: string, index: number) => ( -
- - {metric} -
- ))} + {feature.examples.metrics.map( + (metric: string, index: number) => ( +
+ + {metric} +
+ ) + )}
)} @@ -603,7 +711,12 @@ const BulkGeneration: React.FC = () => { {/* Industries Section */} -
+

@@ -616,16 +729,26 @@ const BulkGeneration: React.FC = () => {
{industries.map((industry: Industry, index: number) => ( -
+
-

{industry.name}

-

{industry.description}

- +

+ {industry.name} +

+

+ {industry.description} +

+
{industry.useCases.map((useCase: string, idx: number) => ( -
+
{useCase}
@@ -633,7 +756,9 @@ const BulkGeneration: React.FC = () => {
-

{industry.results}

+

+ {industry.results} +

))} @@ -657,35 +782,43 @@ const BulkGeneration: React.FC = () => { {[ { 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]' + 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]' + 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]' + 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]' - } + title: "Deploy at Scale", + description: + "Publish across all platforms, assign to team members, or export for further processing.", + content: "[Deployment dashboard]", + }, ].map((item, index) => (
{item.step}
-

{item.title}

-

{item.description}

+

+ {item.title} +

+

+ {item.description} +

{item.content}
@@ -695,17 +828,26 @@ const BulkGeneration: React.FC = () => {

- 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

{/* FAQ Section */} -
+

@@ -718,8 +860,13 @@ const BulkGeneration: React.FC = () => {
{faqs.map((faq: FAQ, index: number) => ( -
-

{faq.question}

+
+

+ {faq.question} +

{faq.answer}

))} @@ -739,19 +886,34 @@ const BulkGeneration: React.FC = () => { Stop Creating Content One Piece at a Time

- +

- 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

{[ - { 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' } + { + 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) => ( -
-

{item.title}

+
+

+ {item.title} +

{item.desc}

))} @@ -759,11 +921,11 @@ const BulkGeneration: React.FC = () => {
{[ - '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' + "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) => (
@@ -773,11 +935,14 @@ const BulkGeneration: React.FC = () => {
- +

- 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

@@ -785,4 +950,4 @@ const BulkGeneration: React.FC = () => { ); }; -export default BulkGeneration; \ No newline at end of file +export default BulkGeneration; diff --git a/src/app/(features-landing)/seo-geo-article-writer/page.tsx b/src/app/(features-landing)/seo-geo-article-writer/page.tsx index cd51780..b90f4f3 100644 --- a/src/app/(features-landing)/seo-geo-article-writer/page.tsx +++ b/src/app/(features-landing)/seo-geo-article-writer/page.tsx @@ -1,11 +1,11 @@ -'use client' +"use client"; -import React, { useState } from 'react'; -import { - Check, - Clock, - TrendingUp, - Target, +import React, { useState } from "react"; +import { + Check, + Clock, + TrendingUp, + Target, ArrowRight, Star, Quote, @@ -17,14 +17,16 @@ import { Building, ShoppingCart, Heart, - LucideProps -} from 'lucide-react'; -import Link from 'next/link'; + LucideProps, +} from "lucide-react"; +import Link from "next/link"; // TypeScript Interfaces interface Feature { id: string; - icon: React.ForwardRefExoticComponent & React.RefAttributes>; + icon: React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; title: string; description: string; highlights: string[]; @@ -38,7 +40,9 @@ interface Feature { } interface ProblemItem { - icon: React.ForwardRefExoticComponent & React.RefAttributes>; + icon: React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; title: string; description: string; stat: string; @@ -51,7 +55,9 @@ interface StatItem { } interface Industry { - icon: React.ForwardRefExoticComponent & React.RefAttributes>; + icon: React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; name: string; description: string; useCases: string[]; @@ -64,202 +70,232 @@ interface FAQ { } const SEOWriter: React.FC = () => { - const [activeFeature, setActiveFeature] = useState('seo-optimization'); + const [activeFeature, setActiveFeature] = + useState("seo-optimization"); const [hoveredCard, setHoveredCard] = useState(null); const features: Feature[] = [ { - id: 'seo-optimization', + id: "seo-optimization", icon: Search, - 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.', + 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.", highlights: [ - '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', - 'Content Structure Optimization: Perfect heading hierarchy, paragraph length, and readability scoring', - 'Meta Tag Generation: SEO-optimized titles and descriptions that improve click-through rates', - 'Internal Linking Suggestions: Smart recommendations for interlinking your content' + "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", + "Content Structure Optimization: Perfect heading hierarchy, paragraph length, and readability scoring", + "Meta Tag Generation: SEO-optimized titles and descriptions that improve click-through rates", + "Internal Linking Suggestions: Smart recommendations for interlinking your content", ], examples: { metrics: [ - 'Keyword Density: Optimal 1-2% maintained throughout', - 'Readability Score: Grade 8-10 for maximum accessibility', - 'Content Length: 1500-2500 words based on topic competitiveness', - 'Meta Optimization: Click-worthy titles under 60 characters' - ] + "Keyword Density: Optimal 1-2% maintained throughout", + "Readability Score: Grade 8-10 for maximum accessibility", + "Content Length: 1500-2500 words based on topic competitiveness", + "Meta Optimization: Click-worthy titles under 60 characters", + ], }, - gradient: 'from-purple-500 to-pink-500', - popular: true + gradient: "from-purple-500 to-pink-500", + popular: true, }, { - id: 'geo-targeting', + id: "geo-targeting", icon: Globe, - 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.', + 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.", highlights: [ - 'Local Keyword Integration: Automatic inclusion of city, neighborhood, and regional terms', - 'Cultural Context Understanding: Adapt content tone and references for local audiences', - 'Multi-Location Content Scaling: Create variations for different locations with one click', - 'Local Business References: Include relevant local landmarks, events, and context', - 'Service Area Optimization: Target specific service areas with precision' + "Local Keyword Integration: Automatic inclusion of city, neighborhood, and regional terms", + "Cultural Context Understanding: Adapt content tone and references for local audiences", + "Multi-Location Content Scaling: Create variations for different locations with one click", + "Local Business References: Include relevant local landmarks, events, and context", + "Service Area Optimization: Target specific service areas with precision", ], examples: { - input: '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.' + input: + "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, - 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.', + 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.", highlights: [ - 'Traffic Potential Scoring: 1-100 rating of estimated search traffic potential', - 'Ranking Difficulty Analysis: Understand competition level for target keywords', - 'Engagement Optimization: Suggestions to improve time-on-page and reduce bounce rates', - 'Conversion Optimization: Tips to increase lead generation and sales from content', - 'A/B Testing Generation: Create multiple versions to test what resonates best' + "Traffic Potential Scoring: 1-100 rating of estimated search traffic potential", + "Ranking Difficulty Analysis: Understand competition level for target keywords", + "Engagement Optimization: Suggestions to improve time-on-page and reduce bounce rates", + "Conversion Optimization: Tips to increase lead generation and sales from content", + "A/B Testing Generation: Create multiple versions to test what resonates best", ], examples: { metrics: [ - '+83% Organic Traffic Increase', - '+45% Time on Page', - '-32% Bounce Rate Reduction' - ] + "+83% Organic Traffic Increase", + "+45% Time on Page", + "-32% Bounce Rate Reduction", + ], }, - gradient: 'from-green-500 to-emerald-500' - } + gradient: "from-green-500 to-emerald-500", + }, ]; const problemItems: ProblemItem[] = [ { icon: Clock, - 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.', - stat: '6-8 hours weekly wasted', - color: 'purple' + 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.", + stat: "6-8 hours weekly wasted", + color: "purple", }, { icon: Target, - 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.', - stat: 'Missed local search traffic', - color: 'blue' + 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.", + stat: "Missed local search traffic", + color: "blue", }, { icon: TrendingUp, - 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.', - stat: '65% of content gets minimal traffic', - color: 'orange' + 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.", + stat: "65% of content gets minimal traffic", + color: "orange", }, { icon: FileText, - title: 'Inconsistent Quality', - description: 'Struggling to maintain consistent quality and brand voice across multiple writers and locations? Inconsistency confuses audiences and damages brand authority.', - stat: 'Brand consistency challenges', - color: 'red' - } + title: "Inconsistent Quality", + description: + "Struggling to maintain consistent quality and brand voice across multiple writers and locations? Inconsistency confuses audiences and damages brand authority.", + stat: "Brand consistency challenges", + color: "red", + }, ]; const stats: StatItem[] = [ - { number: '65%', label: 'of content gets minimal search traffic' }, - { number: '8.2', label: 'average hours spent per article' }, - { number: '46%', label: 'of marketers struggle with local content' } + { number: "65%", label: "of content gets minimal search traffic" }, + { number: "8.2", label: "average hours spent per article" }, + { number: "46%", label: "of marketers struggle with local content" }, ]; const industries: Industry[] = [ { icon: Building, - name: 'Agencies & Marketing Teams', - description: 'Scale content production for multiple clients with consistent quality and localized optimization.', + name: "Agencies & Marketing Teams", + description: + "Scale content production for multiple clients with consistent quality and localized optimization.", useCases: [ - 'Client content scaling', - 'Local SEO campaigns', - 'Multi-location content', - 'Performance reporting' + "Client content scaling", + "Local SEO campaigns", + "Multi-location content", + "Performance reporting", ], - results: 'Results: 5x more content delivered, 75% time savings' + results: "Results: 5x more content delivered, 75% time savings", }, { icon: ShoppingCart, - name: 'E-commerce & Local Retail', - description: 'Create product content, local store pages, and service area articles that drive foot traffic and online sales.', + name: "E-commerce & Local Retail", + description: + "Create product content, local store pages, and service area articles that drive foot traffic and online sales.", useCases: [ - 'Local store content', - 'Product category pages', - 'Service area blogs', - 'Location-specific offers' + "Local store content", + "Product category pages", + "Service area blogs", + "Location-specific offers", ], - results: 'Results: 3.2x ROAS, 45% more local traffic' + results: "Results: 3.2x ROAS, 45% more local traffic", }, { icon: Heart, - name: 'Healthcare & Services', - description: 'Generate locally-optimized content for medical practices, service areas, and patient education.', + name: "Healthcare & Services", + description: + "Generate locally-optimized content for medical practices, service areas, and patient education.", useCases: [ - 'Local practice pages', - 'Service area content', - 'Patient education', - 'Provider bios' + "Local practice pages", + "Service area content", + "Patient education", + "Provider bios", ], - results: 'Results: 68% more appointment requests, 52% local search increase' + results: + "Results: 68% more appointment requests, 52% local search increase", }, { icon: Globe, - name: 'Hospitality & Travel', - description: 'Create destination content, local attraction guides, and hotel-specific SEO content.', + name: "Hospitality & Travel", + description: + "Create destination content, local attraction guides, and hotel-specific SEO content.", useCases: [ - 'Destination guides', - 'Local attraction content', - 'Hotel location pages', - 'Travel tips by location' + "Destination guides", + "Local attraction content", + "Hotel location pages", + "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[] = [ { - 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.' + 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.", }, { - 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.' + 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.", }, { - 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.' + 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.", }, { - 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.' + 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.", }, { - 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.' + 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.", }, { - 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.' - } + 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.", + }, ]; 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'; + case "purple": + return "purple"; + case "blue": + return "blue"; + case "orange": + return "orange"; + case "red": + return "red"; + default: + return "purple"; } }; return ( -
- +
{/* Hero Section */}
@@ -273,37 +309,43 @@ const SEOWriter: React.FC = () => { AI SEO Content Writer
- +

AI SEO Content Writer: Create Optimized Articles That Rank Higher

- +

- Generate SEO-optimized, locally-targeted articles that drive traffic and conversions. - Save 10+ hours weekly while creating content that outperforms competitors in search results. + Generate SEO-optimized, locally-targeted articles that drive + traffic and conversions. Save 10+ hours weekly while creating + content that outperforms competitors in search results.

- - - + + +
{[...Array(5)].map((_, i) => ( - + ))}
- 4.9/5 from 2,800+ content teams + + 4.9/5 from 2,800+ content teams +
@@ -323,17 +365,29 @@ const SEOWriter: React.FC = () => {
{problemItems.map((item: ProblemItem, index: number) => ( -
-
- +
+
-

{item.title}

-

{item.description}

+

+ {item.title} +

+

+ {item.description} +

-

{item.stat}

+

+ {item.stat} +

))} @@ -342,8 +396,13 @@ const SEOWriter: React.FC = () => { {/* Stats */}
{stats.map((stat: StatItem, index: number) => ( -
-
{stat.number}
+
+
+ {stat.number} +
{stat.label}
))} @@ -352,7 +411,8 @@ const SEOWriter: React.FC = () => {

- 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?

@@ -360,7 +420,12 @@ const SEOWriter: React.FC = () => {
{/* AI Solution Section */} -
+

@@ -370,8 +435,9 @@ const SEOWriter: React.FC = () => {

- PlanPost AI combines advanced SEO intelligence with local market understanding to create content - that ranks higher, drives targeted traffic, and converts readers into customers. + PlanPost AI combines advanced SEO intelligence with local market + understanding to create content that ranks higher, drives targeted + traffic, and converts readers into customers.

@@ -380,9 +446,12 @@ const SEOWriter: React.FC = () => {
-

SEO Intelligence Built-In

+

+ SEO Intelligence Built-In +

- 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.

@@ -390,9 +459,13 @@ const SEOWriter: React.FC = () => {
-

Geo-Targeting Automation

+

+ Geo-Targeting Automation +

- 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.

@@ -400,19 +473,26 @@ const SEOWriter: React.FC = () => {
-

Performance Predictions

+

+ Performance Predictions +

- 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.

{/* Comparison Section */}
-

See the Difference: Generic vs. SEO+GEO Optimized

+

+ See the Difference: Generic vs. SEO+GEO Optimized +

-

Generic AI Content

+

+ Generic AI Content +

@@ -433,7 +513,9 @@ const SEOWriter: React.FC = () => {
-

PlanPost AI Content

+

+ PlanPost AI Content +

@@ -460,12 +542,16 @@ const SEOWriter: React.FC = () => {

- "We went from spending 20 hours weekly on content creation to 3 hours. Our SEO traffic increased by 187% in the first quarter, - and we're now ranking for local keywords we never thought possible." + "We went from spending 20 hours weekly on content creation to + 3 hours. Our SEO traffic increased by 187% in the first quarter, + and we're now ranking for local keywords we never thought + possible."

Marketing Director

-

Multi-Location Retail Chain

+

+ Multi-Location Retail Chain +

@@ -493,23 +579,29 @@ const SEOWriter: React.FC = () => { onMouseLeave={() => setHoveredCard(null)} className={`p-6 rounded-2xl text-left transition-all duration-300 backdrop-blur-sm border-2 ${ activeFeature === feature.id - ? 'bg-white shadow-xl border-[#6a47ed] transform scale-105' + ? "bg-white shadow-xl border-[#6a47ed] transform scale-105" : hoveredCard === feature.id - ? 'bg-white/80 shadow-lg border-white/40 transform scale-102' - : 'bg-white/50 border-white/20' + ? "bg-white/80 shadow-lg border-white/40 transform scale-102" + : "bg-white/50 border-white/20" }`} >
-
+
{feature.popular && ( - Most Popular + + Most Popular + )}
-

{feature.title}

+

+ {feature.title} +

- {feature.description.split('.').slice(0, 2).join('.')}. + {feature.description.split(".").slice(0, 2).join(".")}.

))} @@ -520,54 +612,75 @@ const SEOWriter: React.FC = () => {
-
+
-

{feature.title}

+

+ {feature.title} +

{feature.description}

- +
- {feature.highlights.map((highlight: string, index: number) => ( -
-
- + {feature.highlights.map( + (highlight: string, index: number) => ( +
+
+ +
+ + {highlight} +
- {highlight} -
- ))} + ) + )}
{feature.examples?.input && feature.examples.output && (
-

Multi-Location Restaurant Example

+

+ Multi-Location Restaurant Example +

-

Input

+

+ Input +

-

{feature.examples.input}

+

+ {feature.examples.input} +

-

Output

+

+ Output +

-

{feature.examples.output}

+

+ {feature.examples.output} +

@@ -577,15 +690,22 @@ const SEOWriter: React.FC = () => { {feature.examples?.metrics && (

- {feature.id === 'performance-predictor' ? 'Typical Performance Improvements' : 'SEO Optimization in Action'} + {feature.id === "performance-predictor" + ? "Typical Performance Improvements" + : "SEO Optimization in Action"}

- {feature.examples.metrics.map((metric: string, index: number) => ( -
- - {metric} -
- ))} + {feature.examples.metrics.map( + (metric: string, index: number) => ( +
+ + {metric} +
+ ) + )}
)} @@ -597,7 +717,12 @@ const SEOWriter: React.FC = () => { {/* Industries Section */} -
+

@@ -610,16 +735,26 @@ const SEOWriter: React.FC = () => {
{industries.map((industry: Industry, index: number) => ( -
+
-

{industry.name}

-

{industry.description}

- +

+ {industry.name} +

+

+ {industry.description} +

+
{industry.useCases.map((useCase: string, idx: number) => ( -
+
{useCase}
@@ -627,7 +762,9 @@ const SEOWriter: React.FC = () => {
-

{industry.results}

+

+ {industry.results} +

))} @@ -651,35 +788,43 @@ const SEOWriter: React.FC = () => { {[ { step: 1, - title: 'Define Your Content Goals', - description: 'Input your topic, target audience, and locations. Set SEO targets and content objectives.', - content: '[Content goal setting interface]' + title: "Define Your Content Goals", + description: + "Input your topic, target audience, and locations. Set SEO targets and content objectives.", + content: "[Content goal setting interface]", }, { step: 2, - title: 'AI Research & Optimization', - description: 'Our AI analyzes competitors, identifies keyword opportunities, and researches local context.', - content: '[AI research dashboard]' + title: "AI Research & Optimization", + description: + "Our AI analyzes competitors, identifies keyword opportunities, and researches local context.", + content: "[AI research dashboard]", }, { step: 3, - title: 'Generate & Customize', - description: 'Review the AI-generated content, make edits, and optimize further based on performance predictions.', - content: '[Content editor interface]' + title: "Generate & Customize", + description: + "Review the AI-generated content, make edits, and optimize further based on performance predictions.", + content: "[Content editor interface]", }, { step: 4, - title: 'Publish & Track Performance', - description: 'Publish directly to your platforms and monitor real-time performance with our analytics dashboard.', - content: '[Publishing and analytics interface]' - } + title: "Publish & Track Performance", + description: + "Publish directly to your platforms and monitor real-time performance with our analytics dashboard.", + content: "[Publishing and analytics interface]", + }, ].map((item, index) => (
{item.step}
-

{item.title}

-

{item.description}

+

+ {item.title} +

+

+ {item.description} +

{item.content}
@@ -689,17 +834,25 @@ const SEOWriter: React.FC = () => {

- 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

{/* FAQ Section */} -
+

@@ -712,8 +865,13 @@ const SEOWriter: React.FC = () => {
{faqs.map((faq: FAQ, index: number) => ( -
-

{faq.question}

+
+

+ {faq.question} +

{faq.answer}

))} @@ -733,19 +891,34 @@ const SEOWriter: React.FC = () => { Stop Creating Content That Gets Lost in Search Results

- +

- 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

{[ - { 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: 'Massive Time Savings', desc: 'Reduce content creation time by 80% while improving quality' } + { + 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: "Massive Time Savings", + desc: "Reduce content creation time by 80% while improving quality", + }, ].map((item, index) => ( -
-

{item.title}

+
+

+ {item.title} +

{item.desc}

))} @@ -753,11 +926,11 @@ const SEOWriter: React.FC = () => {
{[ - 'Create SEO-optimized articles in minutes', - 'Target multiple locations simultaneously', - 'Improve search rankings and organic traffic', - 'Scale content production without sacrificing quality', - 'Publish directly to your platforms' + "Create SEO-optimized articles in minutes", + "Target multiple locations simultaneously", + "Improve search rankings and organic traffic", + "Scale content production without sacrificing quality", + "Publish directly to your platforms", ].map((benefit: string, index: number) => (
@@ -767,11 +940,14 @@ const SEOWriter: React.FC = () => {
- +

- 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

@@ -779,4 +955,4 @@ const SEOWriter: React.FC = () => { ); }; -export default SEOWriter; \ No newline at end of file +export default SEOWriter; diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 0800415..4460f94 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,9 +1,20 @@ "use client"; import Link from "next/link"; import Image from "next/image"; -import { Menu, ChevronDown, ChevronUp, ArrowRight, Sparkles, Zap, Palette, TrendingUp, FileText, Video} from "lucide-react"; +import { + Menu, + ChevronDown, + ChevronUp, + ArrowRight, + Sparkles, + Zap, + Palette, + TrendingUp, + FileText, + Video, +} from "lucide-react"; import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "./ui/sheet"; -import { useState } from "react"; +import { useState, useRef, useEffect } from "react"; const megaMenuData = [ { @@ -11,50 +22,69 @@ const megaMenuData = [ title: "AI Social Media Content Generator", description: "Create stunning social media posts in minutes", route: "/ai-content-generator", - badge: "Popular" + badge: "Popular", }, { icon: Palette, title: "AI Image Generator", description: "Craft eye-catching thumbnails instantly", route: "/ai-image-generator", - badge: "New" + badge: "New", }, { icon: TrendingUp, title: "AI-Powered Meta Ads Optimization", description: "Create high-converting ads in seconds", - route: "/ai-meta-ads-optimization" + route: "/ai-meta-ads-optimization", }, { icon: FileText, title: "SEO Geo Article Writer", description: "Location-optimized content that ranks", - route: "/seo-geo-article-writer" + route: "/seo-geo-article-writer", }, { icon: Video, title: "AI Video Generator", description: "Turn text into engaging videos automatically", - route: "/ai-video-generator" + route: "/ai-video-generator", }, { icon: Zap, title: "AI Bulk Content", description: "SEO-optimized articles that drive traffic", - route: "/bulk-content" - } - + route: "/bulk-content", + }, ]; export default function Header() { const [isOpen, setIsOpen] = useState(false); const [activeMenu, setActiveMenu] = useState(null); + const menuRef = useRef(null); const handleClose = () => { setIsOpen(false); }; + // Close menu when clicking outside + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (menuRef.current && !menuRef.current.contains(event.target as Node)) { + setActiveMenu(null); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + + // Close menu when a link is clicked + const handleMenuLinkClick = () => { + setActiveMenu(null); + }; + return ( ); -} \ No newline at end of file +}