516 lines
26 KiB
TypeScript
516 lines
26 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
import HeroLogo from "@/components/sections/hero/HeroLogo";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
|
|
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
|
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
|
import ContactText from "@/components/sections/contact/ContactText";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
|
import { Sparkles, MessageCircle, Play } from "lucide-react";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import gsap from "gsap";
|
|
|
|
export default function LandingPage() {
|
|
const navItems = [
|
|
{ name: "Featured Ads", id: "featured-ads" },
|
|
{ name: "How It Works", id: "how-it-works" },
|
|
{ name: "Portfolio", id: "portfolio" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" },
|
|
];
|
|
|
|
const featuredAdProducts = [
|
|
{
|
|
id: "1", name: "Authentic Product Showcase", price: "High Engagement", variant: "TikTok & Instagram Format", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/professional-ai-generated-ugc-ad-video-t-1772974080166-d52dcc27.png", imageAlt: "AI-generated authentic product showcase"},
|
|
{
|
|
id: "2", name: "Lifestyle Integration", price: "5M+ Views Average", variant: "Reels & Shorts Format", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/ai-generated-ugc-ad-showing-diverse-crea-1772974079700-36e64b32.png", imageAlt: "AI-created lifestyle product integration"},
|
|
{
|
|
id: "3", name: "Community Moment", price: "Strong Conversions", variant: "Multi-Platform Ready", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/ai-created-ugc-advertisement-featuring-l-1772974080835-82c4bd7c.png", imageAlt: "AI UGC with multiple creators"},
|
|
{
|
|
id: "4", name: "Unboxing Experience", price: "High CTR", variant: "Premium Quality", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/professional-ai-generated-ugc-ad-with-cl-1772974079576-8dcd684f.png", imageAlt: "AI-generated unboxing UGC"},
|
|
{
|
|
id: "5", name: "Transformation Story", price: "Maximum Impact", variant: "Emotional Connection", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/ai-generated-diverse-creator-ugc-ad-with-1772974084249-3d32653d.png", imageAlt: "AI UGC transformation showcase"},
|
|
{
|
|
id: "6", name: "Casual Testimonial", price: "Authentic Feel", variant: "Highly Shareable", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/ai-created-ugc-ad-showing-creator-in-rel-1772974084370-2c2edc08.png", imageAlt: "AI-created casual testimonial"},
|
|
];
|
|
|
|
const howItWorksFeatures = [
|
|
{
|
|
id: "step-1", title: "Send Brief", description: "Upload your product details, brand guidelines, and creative direction. We handle the rest.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/icon-or-illustration-representing-briefi-1772974079002-f4d6c99c.png", imageAlt: "Step 1: Send product brief"},
|
|
{
|
|
id: "step-2", title: "AI Generates", description: "Our AI creators generate multiple realistic UGC variations that match your brand perfectly.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/icon-representing-ai-generation-creation-1772974079356-a8e5bd0d.png", imageAlt: "Step 2: AI generation process"},
|
|
{
|
|
id: "step-3", title: "Deploy & Scale", description: "Ads ready for TikTok, Instagram, Meta, and YouTube. Start converting immediately.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/icon-representing-ready-to-use-ads-deplo-1772974079587-8ff43e0c.png", imageAlt: "Step 3: Deploy on platforms"},
|
|
];
|
|
|
|
const benefitsFeatures = [
|
|
{
|
|
id: "benefit-1", title: "No Influencers Needed", description: "Skip the lengthy influencer outreach. Create unlimited authentic-looking ads instantly.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/icon-representing-no-influencers-needed--1772974078757-8edda014.png", imageAlt: "No influencers required icon"},
|
|
{
|
|
id: "benefit-2", title: "Unlimited Creators", description: "Generate infinite variations with different creators, styles, and angles. Scale without limits.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/icon-representing-unlimited-creators-sca-1772974079487-d8447cee.png", imageAlt: "Unlimited creators icon"},
|
|
{
|
|
id: "benefit-3", title: "Lightning Fast", description: "Get 10+ ad variations in hours, not weeks. Production speed that kills traditional UGC timelines.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/icon-representing-fast-production-speed--1772974079173-01c87343.png", imageAlt: "Fast production icon"},
|
|
{
|
|
id: "benefit-4", title: "Lower Costs", description: "90% cheaper than traditional influencer campaigns. Premium results without the premium price tag.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/icon-representing-lower-cost-savings-bud-1772974079608-d3f84f7c.png", imageAlt: "Lower cost savings icon"},
|
|
];
|
|
|
|
const portfolioMetrics = [
|
|
{
|
|
id: "1", value: "500+", title: "Ads Created", description: "High-performing UGC content delivered across industries", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/modern-dashboard-interface-showing-ai-ug-1772974081356-255e7990.png", imageAlt: "Portfolio showcase metrics"},
|
|
{
|
|
id: "2", value: "2.5x", title: "Better CTR", description: "AI UGC outperforms traditional ads consistently", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/ai-content-creation-workflow-interface-m-1772974082275-3f5d3021.png", imageAlt: "Performance comparison data"},
|
|
{
|
|
id: "3", value: "80%", title: "Cost Savings", description: "Reduce ad production costs dramatically vs influencer rates", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/campaign-management-platform-showing-mul-1772974080140-f3bffb49.png", imageAlt: "Cost analysis dashboard"},
|
|
];
|
|
|
|
const testimonials = [
|
|
{
|
|
id: "1", name: "Sarah Johnson", role: "Marketing Director", company: "Fashion & Co", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/professional-headshot-portrait-of-satisf-1772974079220-ff0d72ba.png", imageAlt: "Sarah Johnson testimonial"},
|
|
{
|
|
id: "2", name: "Michael Chen", role: "E-commerce Manager", company: "TechGear", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/portrait-of-young-entrepreneur-founder-a-1772974079202-666b7eb3.png", imageAlt: "Michael Chen testimonial"},
|
|
{
|
|
id: "3", name: "Emma Rodriguez", role: "CEO", company: "BeautyFlow", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/business-professional-testimonial-portra-1772974081451-8c2dd68d.png", imageAlt: "Emma Rodriguez testimonial"},
|
|
{
|
|
id: "4", name: "David Kumar", role: "Performance Lead", company: "FitLife", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/marketing-professional-portrait-enthusia-1772974080072-e0504d9e.png", imageAlt: "David Kumar testimonial"},
|
|
{
|
|
id: "5", name: "Lisa Zhang", role: "Founder", company: "SnapSeek", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/senior-business-executive-testimonial-po-1772974079555-4f52b658.png", imageAlt: "Lisa Zhang testimonial"},
|
|
{
|
|
id: "6", name: "James Wilson", role: "Growth Manager", company: "NutraMax", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/brand-owner-entrepreneur-testimonial-por-1772974080640-c2df12ab.png", imageAlt: "James Wilson testimonial"},
|
|
];
|
|
|
|
const kpiItems = [
|
|
{ value: "98%", label: "Client Satisfaction" },
|
|
{ value: "3x", label: "Avg Revenue Increase" },
|
|
{ value: "14 days", label: "Avg Time to Results" },
|
|
] as const;
|
|
|
|
const socialProofLogos = [
|
|
{
|
|
src: "http://img.b2bpic.net/free-vector/modern-dark-cyber-monday-design-flat-style_23-2147714722.jpg", alt: "Fashion & Co"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-vector/natural-business-minimal-logo-set_23-2148377364.jpg", alt: "TechGear"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-vector/flat-design-computer-logo-template_23-2149184092.jpg", alt: "BeautyFlow"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-psd/beauty-template-design_23-2151957759.jpg", alt: "FitLife"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-vector/set-vintage-crossfit-stickers_23-2147621010.jpg", alt: "SnapSeek"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-vector/supermarket-logo-theme_23-2148471783.jpg", alt: "NutraMax"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-vector/gradient-abstract-logo-collection_23-2148163498.jpg", alt: "PayFlow"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-vector/gradient-code-logo-template_23-2148820808.jpg", alt: "SubHub"},
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Featured Ads", href: "#featured-ads" },
|
|
{ label: "How It Works", href: "#how-it-works" },
|
|
{ label: "Portfolio", href: "#portfolio" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#" },
|
|
{ label: "Case Studies", href: "#portfolio" },
|
|
{ label: "Contact", href: "#contact" },
|
|
],
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "FAQ", href: "#" },
|
|
{ label: "Documentation", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{
|
|
label: "WhatsApp", href: "https://wa.me/91XXXXXXXXXX?text=Hi%20I%20want%20AI%20UGC%20ads%20for%20my%20brand"},
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
],
|
|
},
|
|
];
|
|
|
|
// State for carousel
|
|
const [scrollIndex, setScrollIndex] = useState(0);
|
|
const carouselRef = useRef<HTMLDivElement>(null);
|
|
const videoCardsRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Auto-scroll carousel
|
|
useEffect(() => {
|
|
if (!carouselRef.current) return;
|
|
|
|
const scrollInterval = setInterval(() => {
|
|
const carousel = carouselRef.current;
|
|
if (carousel) {
|
|
const scrollAmount = carousel.offsetWidth / 2;
|
|
carousel.scrollBy({ left: scrollAmount, behavior: "smooth" });
|
|
|
|
setScrollIndex((prev) => (prev + 1) % featuredAdProducts.length);
|
|
}
|
|
}, 5000);
|
|
|
|
return () => clearInterval(scrollInterval);
|
|
}, []);
|
|
|
|
// Parallax and rotation effects for video cards
|
|
useEffect(() => {
|
|
if (!videoCardsRef.current) return;
|
|
|
|
const handleMouseMove = (e: MouseEvent) => {
|
|
const cards = videoCardsRef.current?.querySelectorAll(".video-card");
|
|
if (!cards) return;
|
|
|
|
cards.forEach((card) => {
|
|
const rect = card.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
const rotateX = (y - rect.height / 2) / 10;
|
|
const rotateY = (rect.width / 2 - x) / 10;
|
|
|
|
gsap.to(card, {
|
|
rotationX: rotateX,
|
|
rotationY: rotateY,
|
|
transformPerspective: 1000,
|
|
duration: 0.5,
|
|
ease: "power2.out"});
|
|
});
|
|
};
|
|
|
|
window.addEventListener("mousemove", handleMouseMove);
|
|
|
|
return () => window.removeEventListener("mousemove", handleMouseMove);
|
|
}, []);
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="blurBottom"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple brandName="AI UGC Ads" navItems={navItems} />
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero" className="relative min-h-screen overflow-hidden">
|
|
{/* Dark futuristic gradient background */}
|
|
<div className="absolute inset-0 bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950">
|
|
{/* Moving light beams */}
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
<div className="absolute w-96 h-96 bg-blue-500/20 rounded-full blur-3xl animate-pulse" style={{
|
|
top: "10%", left: "-10%", animation: "float 8s ease-in-out infinite"}} />
|
|
<div className="absolute w-96 h-96 bg-purple-500/20 rounded-full blur-3xl animate-pulse" style={{
|
|
bottom: "10%", right: "-10%", animation: "float 10s ease-in-out infinite 2s"}} />
|
|
<div className="absolute w-80 h-80 bg-cyan-500/15 rounded-full blur-3xl" style={{
|
|
top: "50%", left: "50%", transform: "translate(-50%, -50%)", animation: "glow 6s ease-in-out infinite"}} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Split layout container */}
|
|
<div className="relative z-10 h-full flex items-center">
|
|
<div className="container mx-auto px-4 py-20 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
{/* Left side - Animated text reveal */}
|
|
<div className="space-y-6">
|
|
<div className="space-y-4">
|
|
<h1 className="text-5xl lg:text-7xl font-bold text-white leading-tight" style={{
|
|
animation: "slideInLeft 0.8s ease-out"}}>
|
|
AI UGC Ads That Convert
|
|
</h1>
|
|
<p className="text-xl text-gray-300 leading-relaxed" style={{
|
|
animation: "slideInLeft 0.8s ease-out 0.2s backwards"}}>
|
|
Scale your advertising with realistic AI creators producing high-performing UGC content
|
|
</p>
|
|
</div>
|
|
|
|
{/* Buttons with glow animation */}
|
|
<div className="flex flex-col sm:flex-row gap-4 pt-4" style={{
|
|
animation: "slideInLeft 0.8s ease-out 0.4s backwards"}}>
|
|
<a
|
|
href="https://wa.me/91XXXXXXXXXX?text=Hi%20I%20want%20AI%20UGC%20ads%20for%20my%20brand"
|
|
className="px-8 py-4 bg-green-500 hover:bg-green-600 text-white font-semibold rounded-lg flex items-center gap-2 transition-all duration-300 hover:shadow-lg hover:shadow-green-500/50"
|
|
style={{
|
|
boxShadow: "0 0 20px rgba(34, 197, 94, 0.3)", animation: "glow 2s ease-in-out infinite"}}
|
|
>
|
|
<MessageCircle size={20} />
|
|
Chat on WhatsApp
|
|
</a>
|
|
<a
|
|
href="#featured-ads"
|
|
className="px-8 py-4 bg-slate-700 hover:bg-slate-600 text-white font-semibold rounded-lg flex items-center gap-2 transition-all duration-300"
|
|
>
|
|
<Play size={20} />
|
|
View Our Ads
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right side - Floating video cards */}
|
|
<div
|
|
ref={videoCardsRef}
|
|
className="relative h-96 lg:h-full min-h-96 perspective"
|
|
style={{
|
|
perspective: "1000px"}}
|
|
>
|
|
{/* Video card 1 */}
|
|
<div
|
|
className="video-card absolute w-56 h-72 bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl overflow-hidden shadow-2xl border border-slate-700/50 hover:border-cyan-500/50 transition-all"
|
|
style={{
|
|
top: "0%", left: "0%", animation: "float 6s ease-in-out infinite", transformStyle: "preserve-3d"}}
|
|
>
|
|
<img
|
|
src={featuredAdProducts[0]?.imageSrc}
|
|
alt="TikTok Ad Preview 1"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-transparent" />
|
|
<div className="absolute bottom-4 left-4 right-4 text-white">
|
|
<p className="font-semibold text-sm">{featuredAdProducts[0]?.name}</p>
|
|
<p className="text-xs text-gray-300">{featuredAdProducts[0]?.variant}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Video card 2 */}
|
|
<div
|
|
className="video-card absolute w-56 h-72 bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl overflow-hidden shadow-2xl border border-slate-700/50 hover:border-purple-500/50 transition-all"
|
|
style={{
|
|
top: "10%", right: "0%", animation: "float 7s ease-in-out infinite 1s", transformStyle: "preserve-3d"}}
|
|
>
|
|
<img
|
|
src={featuredAdProducts[1]?.imageSrc}
|
|
alt="TikTok Ad Preview 2"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-transparent" />
|
|
<div className="absolute bottom-4 left-4 right-4 text-white">
|
|
<p className="font-semibold text-sm">{featuredAdProducts[1]?.name}</p>
|
|
<p className="text-xs text-gray-300">{featuredAdProducts[1]?.variant}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Video card 3 */}
|
|
<div
|
|
className="video-card absolute w-56 h-72 bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl overflow-hidden shadow-2xl border border-slate-700/50 hover:border-green-500/50 transition-all"
|
|
style={{
|
|
bottom: "5%", left: "10%", animation: "float 8s ease-in-out infinite 2s", transformStyle: "preserve-3d"}}
|
|
>
|
|
<img
|
|
src={featuredAdProducts[2]?.imageSrc}
|
|
alt="TikTok Ad Preview 3"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-transparent" />
|
|
<div className="absolute bottom-4 left-4 right-4 text-white">
|
|
<p className="font-semibold text-sm">{featuredAdProducts[2]?.name}</p>
|
|
<p className="text-xs text-gray-300">{featuredAdProducts[2]?.variant}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Auto-scrolling carousel below hero */}
|
|
<div className="relative bg-gradient-to-b from-slate-900 to-slate-950 py-16 overflow-hidden">
|
|
<div className="container mx-auto px-4 mb-8">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-white mb-2">Featured AI UGC Examples</h2>
|
|
<p className="text-gray-400">Scroll through our best-performing ad variations</p>
|
|
</div>
|
|
<div
|
|
ref={carouselRef}
|
|
className="flex gap-6 overflow-x-auto pb-4 px-4 scroll-smooth"
|
|
style={{
|
|
scrollBehavior: "smooth"}}
|
|
>
|
|
{featuredAdProducts.map((product, index) => (
|
|
<div
|
|
key={product.id}
|
|
className="flex-shrink-0 w-64 bg-slate-800 rounded-lg overflow-hidden shadow-lg border border-slate-700/50 hover:border-cyan-500/50 transition-all group"
|
|
style={{
|
|
animation: `slideIn 0.6s ease-out ${index * 0.1}s backwards`,
|
|
}}
|
|
>
|
|
<div className="relative w-full h-48 overflow-hidden bg-slate-900">
|
|
<img
|
|
src={product.imageSrc}
|
|
alt={product.name}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-slate-950/60 via-transparent to-transparent" />
|
|
</div>
|
|
<div className="p-4 space-y-2">
|
|
<h3 className="font-semibold text-white text-sm line-clamp-1">{product.name}</h3>
|
|
<p className="text-xs text-gray-400 line-clamp-1">{product.variant}</p>
|
|
<p className="text-sm font-medium text-cyan-400">{product.price}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="featured-ads" data-section="featured-ads">
|
|
<ProductCardFour
|
|
products={featuredAdProducts}
|
|
title="Featured AI UGC Ads"
|
|
description="Watch our best-performing AI-generated UGC content that's converting brands across industries"
|
|
tag="Portfolio"
|
|
tagIcon={Sparkles}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="how-it-works" data-section="how-it-works">
|
|
<FeatureCardTwentySeven
|
|
features={howItWorksFeatures}
|
|
title="How It Works"
|
|
description="Three simple steps to get your AI UGC ads ready for scaling"
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="benefits" data-section="benefits">
|
|
<FeatureCardTwentySeven
|
|
features={benefitsFeatures}
|
|
title="Why Choose AI UGC"
|
|
description="The advantages that make AI UGC the future of performance marketing"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<MetricCardEleven
|
|
metrics={portfolioMetrics}
|
|
title="Our Portfolio Impact"
|
|
description="Real results from brands using AI UGC at scale"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
testimonials={testimonials}
|
|
kpiItems={[kpiItems[0], kpiItems[1], kpiItems[2]]}
|
|
title="What Our Clients Say"
|
|
description="Hear from brands scaling with AI UGC ads"
|
|
tag="Success Stories"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted by Leading Brands"
|
|
description="Join innovative companies transforming their advertising with AI UGC"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
logos={socialProofLogos.map((logo) => logo.src)}
|
|
speed={40}
|
|
showCard={true}
|
|
names={[
|
|
"Fashion & Co", "TechGear", "BeautyFlow", "FitLife", "SnapSeek", "NutraMax", "PayFlow", "SubHub"]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to scale your ads with AI creators? Let's talk about your brand's potential."
|
|
animationType="entrance-slide"
|
|
buttons={[
|
|
{
|
|
text: "Chat on WhatsApp", href: "https://wa.me/91XXXXXXXXXX?text=Hi%20I%20want%20AI%20UGC%20ads%20for%20my%20brand"},
|
|
{
|
|
text: "Request a Demo", href: "https://wa.me/91XXXXXXXXXX?text=I%20would%20like%20a%20demo%20of%20your%20AI%20UGC%20platform"},
|
|
]}
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="AI UGC Ads"
|
|
columns={footerColumns}
|
|
copyrightText="© 2025 AI UGC Ads. All rights reserved."
|
|
/>
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
@keyframes slideInLeft {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-50px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0px);
|
|
}
|
|
50% {
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
|
|
@keyframes glow {
|
|
0%, 100% {
|
|
box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 40px rgba(34, 197, 94, 0.6);
|
|
}
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
`}</style>
|
|
</ThemeProvider>
|
|
);
|
|
}
|