update fatures landing page

This commit is contained in:
Adspillar 2025-10-25 16:05:53 +06:00
parent 0cf3007a76
commit 1462d35121
13 changed files with 141 additions and 65 deletions

View file

@ -0,0 +1,19 @@
import React from "react";
export const metadata = {
title: "AI Social Media Post Generator Captions, Hashtags & Graphics in 20 Seconds",
description: "Create social media posts instantly with AI. Generate captions, hashtags, images, and graphics in under 20 seconds. Try the free AI social media post generator today.",
};
export default function AIContentLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<section >
{children}
</section>
);
}

View file

@ -19,6 +19,7 @@ import {
Quote, Quote,
Video Video
} from 'lucide-react'; } from 'lucide-react';
import Link from 'next/link';
const SocialMediaPost = () => { const SocialMediaPost = () => {
const [activeFeature, setActiveFeature] = useState('ideation'); const [activeFeature, setActiveFeature] = useState('ideation');
@ -211,14 +212,11 @@ const SocialMediaPost = () => {
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12"> <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
<button className="bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-8 py-4 rounded-xl font-semibold text-lg hover:shadow-2xl transition-all duration-200 shadow-lg flex items-center space-x-2"> <Link href="https://dashboard.planpostai.com/generate"><button className="bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-8 py-4 rounded-xl font-semibold text-lg hover:shadow-2xl transition-all duration-200 shadow-lg flex items-center space-x-2">
<span>Start Your Free Trial</span> <span>Start Your Free Trial</span>
<ArrowRight className="w-5 h-5" /> <ArrowRight className="w-5 h-5" />
</button> </button></Link>
<button className="border border-black/20 text-black px-8 py-4 rounded-xl font-semibold text-lg hover:bg-white/50 transition-all duration-200 flex items-center space-x-2 backdrop-blur-sm">
<Video className="w-5 h-5" />
<span>Watch Demo</span>
</button>
</div> </div>
<div className="flex items-center justify-center space-x-4 text-black/80 mb-8"> <div className="flex items-center justify-center space-x-4 text-black/80 mb-8">

View file

@ -0,0 +1,19 @@
import React from "react";
export const metadata = {
title: "AI Image Generator: Create, Transform, Perfect - PlanPost AI",
description: "Create stunning images from text, transform existing photos, and generate professional product backgrounds with AI. Generate social media graphics and product photos without design skills. Start Free Trial!",
};
export default function ImageLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<section >
{children}
</section>
);
}

View file

@ -15,7 +15,6 @@ import {
ArrowRight, ArrowRight,
Star, Star,
Quote, Quote,
Video,
Palette, Palette,
Wand2, Wand2,
Settings, Settings,
@ -29,6 +28,7 @@ import {
Edit3, Edit3,
LucideProps LucideProps
} from 'lucide-react'; } from 'lucide-react';
import Link from 'next/link';
// TypeScript Interfaces // TypeScript Interfaces
interface Feature { interface Feature {
@ -294,18 +294,15 @@ const AIImageGenerator: React.FC = () => {
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12"> <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
<Link href={'https://dashboard.planpostai.com/image-generation'}>
<button className="group relative bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-10 py-5 rounded-2xl font-semibold text-lg hover:shadow-2xl transition-all duration-300 shadow-xl hover:scale-105 flex items-center space-x-3 overflow-hidden"> <button className="group relative bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-10 py-5 rounded-2xl font-semibold text-lg hover:shadow-2xl transition-all duration-300 shadow-xl hover:scale-105 flex items-center space-x-3 overflow-hidden">
<div className="absolute inset-0 bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div> <div className="absolute inset-0 bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
<Rocket className="w-6 h-6 relative z-10" /> <Rocket className="w-6 h-6 relative z-10" />
<span className="relative z-10">Start Your Free Trial</span> <span className="relative z-10">Start Your Free Trial</span>
<ArrowRight className="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform" /> <ArrowRight className="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform" />
</button> </button></Link>
<button className="group border-2 border-black/30 text-black px-10 py-5 rounded-2xl font-semibold text-lg hover:bg-white/50 transition-all duration-300 backdrop-blur-sm hover:border-[#6a47ed]/50 flex items-center space-x-3">
<Video className="w-6 h-6" />
<span>Watch Demo</span>
<Play className="w-4 h-4 fill-current" />
</button>
</div> </div>
<div className="flex items-center justify-center space-x-4 text-black/80 mb-8"> <div className="flex items-center justify-center space-x-4 text-black/80 mb-8">

View file

@ -0,0 +1,19 @@
import React from "react";
export const metadata = {
title: "AI-Powered Meta Ads Optimization | Maximize FB ROAS & Reduce CPA - PlanPost AI",
description: "Automate Facebook & Instagram ads with AI. Increase ROAS by 40-200%, reduce CPA by 30-60%, and save 10+ hours weekly. Perfect for e-commerce, agencies, and local businesses. Start Free Trial!",
};
export default function AdsLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<section >
{children}
</section>
);
}

View file

@ -3,7 +3,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { import {
Check, Check,
Play,
Clock, Clock,
Zap, Zap,
TrendingUp, TrendingUp,
@ -13,7 +12,6 @@ import {
ArrowRight, ArrowRight,
Star, Star,
Quote, Quote,
Video,
Sparkle, Sparkle,
Rocket, Rocket,
ShoppingCart, ShoppingCart,
@ -23,6 +21,7 @@ import {
PieChart, PieChart,
LucideProps LucideProps
} from 'lucide-react'; } from 'lucide-react';
import Link from 'next/link';
// TypeScript Interfaces // TypeScript Interfaces
interface Feature { interface Feature {
@ -295,18 +294,15 @@ const MetaAdsOptimization: React.FC = () => {
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12"> <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
<Link href={"https://dashboard.planpostai.com/ads"}>
<button className="group relative bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-10 py-5 rounded-2xl font-semibold text-lg hover:shadow-2xl transition-all duration-300 shadow-xl hover:scale-105 flex items-center space-x-3 overflow-hidden"> <button className="group relative bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-10 py-5 rounded-2xl font-semibold text-lg hover:shadow-2xl transition-all duration-300 shadow-xl hover:scale-105 flex items-center space-x-3 overflow-hidden">
<div className="absolute inset-0 bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div> <div className="absolute inset-0 bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
<Rocket className="w-6 h-6 relative z-10" /> <Rocket className="w-6 h-6 relative z-10" />
<span className="relative z-10">Start Your Free Trial</span> <span className="relative z-10">Start Your Free Trial</span>
<ArrowRight className="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform" /> <ArrowRight className="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform" />
</button> </button></Link>
<button className="group border-2 border-black/30 text-black px-10 py-5 rounded-2xl font-semibold text-lg hover:bg-white/50 transition-all duration-300 backdrop-blur-sm hover:border-[#6a47ed]/50 flex items-center space-x-3">
<Video className="w-6 h-6" />
<span>Watch Demo</span>
<Play className="w-4 h-4 fill-current" />
</button>
</div> </div>
{/* Stats Grid */} {/* Stats Grid */}

View file

@ -0,0 +1,19 @@
import React from "react";
export const metadata = {
title: "AI Video Generator: Create Professional Videos from Text & Images - PlanPost AI",
description: "Generate stunning videos from text and images with AI. Create marketing videos, social media content, and product demos in minutes. No editing skills needed. Start free trial.",
};
export default function VideoLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<section >
{children}
</section>
);
}

View file

@ -3,7 +3,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { import {
Check, Check,
Play,
Clock, Clock,
Zap, Zap,
Video, Video,
@ -21,6 +20,7 @@ import {
Palette, Palette,
LucideProps LucideProps
} from 'lucide-react'; } from 'lucide-react';
import Link from 'next/link';
// TypeScript Interfaces // TypeScript Interfaces
interface Feature { interface Feature {
@ -266,18 +266,14 @@ const AIVideoGenerator: React.FC = () => {
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12"> <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
<button className="group relative bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-10 py-5 rounded-2xl font-semibold text-lg hover:shadow-2xl transition-all duration-300 shadow-xl hover:scale-105 flex items-center space-x-3 overflow-hidden"> <Link href={"https://dashboard.planpostai.com/video-generation"}><button className="group relative bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-10 py-5 rounded-2xl font-semibold text-lg hover:shadow-2xl transition-all duration-300 shadow-xl hover:scale-105 flex items-center space-x-3 overflow-hidden">
<div className="absolute inset-0 bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div> <div className="absolute inset-0 bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
<Rocket className="w-6 h-6 relative z-10" /> <Rocket className="w-6 h-6 relative z-10" />
<span className="relative z-10">Start Your Free Trial</span> <span className="relative z-10">Start Your Free Trial</span>
<ArrowRight className="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform" /> <ArrowRight className="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform" />
</button> </button></Link>
<button className="group border-2 border-black/30 text-black px-10 py-5 rounded-2xl font-semibold text-lg hover:bg-white/50 transition-all duration-300 backdrop-blur-sm hover:border-[#6a47ed]/50 flex items-center space-x-3">
<Video className="w-6 h-6" />
<span>Watch Demo</span>
<Play className="w-4 h-4 fill-current" />
</button>
</div> </div>
<div className="flex items-center justify-center space-x-4 text-black/80 mb-8"> <div className="flex items-center justify-center space-x-4 text-black/80 mb-8">

View file

@ -0,0 +1,19 @@
import React from "react";
export const metadata = {
title: "AI Social Media Content Generator | Create Posts Fast - PlanPost AI",
description: "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!",
};
export default function BulkLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<section >
{children}
</section>
);
}

View file

@ -3,14 +3,13 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { import {
Check, Check,
Play,
Clock, Clock,
TrendingUp, TrendingUp,
Target, Target,
ArrowRight, ArrowRight,
Star, Star,
Quote, Quote,
Video,
Sparkle, Sparkle,
Rocket, Rocket,
@ -24,6 +23,7 @@ import {
BarChart3, BarChart3,
LucideProps LucideProps
} from 'lucide-react'; } from 'lucide-react';
import Link from 'next/link';
// TypeScript Interfaces // TypeScript Interfaces
interface Feature { interface Feature {
@ -292,18 +292,15 @@ const BulkGeneration: React.FC = () => {
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12"> <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
<Link href={"https://dashboard.planpostai.com/bulk"}>
<button className="group relative bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-10 py-5 rounded-2xl font-semibold text-lg hover:shadow-2xl transition-all duration-300 shadow-xl hover:scale-105 flex items-center space-x-3 overflow-hidden"> <button className="group relative bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-10 py-5 rounded-2xl font-semibold text-lg hover:shadow-2xl transition-all duration-300 shadow-xl hover:scale-105 flex items-center space-x-3 overflow-hidden">
<div className="absolute inset-0 bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div> <div className="absolute inset-0 bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
<Rocket className="w-6 h-6 relative z-10" /> <Rocket className="w-6 h-6 relative z-10" />
<span className="relative z-10">Start Your Free Trial</span> <span className="relative z-10">Start Your Free Trial</span>
<ArrowRight className="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform" /> <ArrowRight className="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform" />
</button> </button></Link>
<button className="group border-2 border-black/30 text-black px-10 py-5 rounded-2xl font-semibold text-lg hover:bg-white/50 transition-all duration-300 backdrop-blur-sm hover:border-[#6a47ed]/50 flex items-center space-x-3">
<Video className="w-6 h-6" />
<span>Watch Demo</span>
<Play className="w-4 h-4 fill-current" />
</button>
</div> </div>
<div className="flex items-center justify-center space-x-4 text-black/80 mb-8"> <div className="flex items-center justify-center space-x-4 text-black/80 mb-8">

View file

@ -0,0 +1,19 @@
import React from "react";
export const metadata = {
title: "Create Optimized Articles That Rank Higher - PlanPost AI",
description: "Generate SEO & GEO optimized articles with AI. Create content that ranks higher, targets local audiences, and saves 10+ hours weekly. Perfect for agencies, local businesses, and content teams.",
};
export default function SeoLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<section >
{children}
</section>
);
}

View file

@ -3,14 +3,12 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { import {
Check, Check,
Play,
Clock, Clock,
TrendingUp, TrendingUp,
Target, Target,
ArrowRight, ArrowRight,
Star, Star,
Quote, Quote,
Video,
Sparkle, Sparkle,
Rocket, Rocket,
Search, Search,
@ -21,6 +19,7 @@ import {
Heart, Heart,
LucideProps LucideProps
} from 'lucide-react'; } from 'lucide-react';
import Link from 'next/link';
// TypeScript Interfaces // TypeScript Interfaces
interface Feature { interface Feature {
@ -288,18 +287,14 @@ const SEOWriter: React.FC = () => {
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12"> <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
<button className="group relative bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-10 py-5 rounded-2xl font-semibold text-lg hover:shadow-2xl transition-all duration-300 shadow-xl hover:scale-105 flex items-center space-x-3 overflow-hidden"> <Link href={"https://dashboard.planpostai.com/seo"}><button className="group relative bg-gradient-to-r from-[#6a47ed] to-[#ff4ca5] text-white px-10 py-5 rounded-2xl font-semibold text-lg hover:shadow-2xl transition-all duration-300 shadow-xl hover:scale-105 flex items-center space-x-3 overflow-hidden">
<div className="absolute inset-0 bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div> <div className="absolute inset-0 bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
<Rocket className="w-6 h-6 relative z-10" /> <Rocket className="w-6 h-6 relative z-10" />
<span className="relative z-10">Start Your Free Trial</span> <span className="relative z-10">Start Your Free Trial</span>
<ArrowRight className="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform" /> <ArrowRight className="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform" />
</button> </button></Link>
<button className="group border-2 border-black/30 text-black px-10 py-5 rounded-2xl font-semibold text-lg hover:bg-white/50 transition-all duration-300 backdrop-blur-sm hover:border-[#6a47ed]/50 flex items-center space-x-3">
<Video className="w-6 h-6" />
<span>Watch Demo</span>
<Play className="w-4 h-4 fill-current" />
</button>
</div> </div>
<div className="flex items-center justify-center space-x-4 text-black/80 mb-8"> <div className="flex items-center justify-center space-x-4 text-black/80 mb-8">

View file

@ -1,7 +1,7 @@
"use client"; "use client";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import { Menu, ChevronDown, ChevronUp, ArrowRight, Sparkles, Zap, Palette, TrendingUp, FileText, Video, Megaphone, Calendar, BarChart } from "lucide-react"; import { Menu, ChevronDown, ChevronUp, ArrowRight, Sparkles, Zap, Palette, TrendingUp, FileText, Video} from "lucide-react";
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "./ui/sheet"; import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "./ui/sheet";
import { useState } from "react"; import { useState } from "react";
@ -43,25 +43,8 @@ const megaMenuData = [
title: "AI Bulk Content", title: "AI Bulk Content",
description: "SEO-optimized articles that drive traffic", description: "SEO-optimized articles that drive traffic",
route: "/bulk-content" route: "/bulk-content"
},
{
icon: Calendar,
title: "Social Media Scheduler",
description: "Plan and automate your content calendar",
route: "/social-media"
},
{
icon: Megaphone,
title: "Social Media Post Generator",
description: "Captivate your audience with AI-powered posts",
route: "/social-media"
},
{
icon: BarChart,
title: "Social Media Analytics",
description: "Data-driven insights to grow your presence",
route: "/social-media"
} }
]; ];
export default function Header() { export default function Header() {