Merge version_2 into main #2
@@ -1,59 +1,41 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Halant } from "next/font/google";
|
||||
import { Inter } from "next/font/google";
|
||||
import { Lato } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
|
||||
const halant = Halant({
|
||||
variable: "--font-halant", subsets: ["latin"],
|
||||
weight: ["300", "400", "500", "600", "700"],
|
||||
});
|
||||
import "./styles/variables.css";
|
||||
import "./styles/base.css";
|
||||
import { ServiceWrapper } from "@/providers/serviceWrapper/ServiceWrapper";
|
||||
import { Tag } from "@/components/tag/Tag";
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter", subsets: ["latin"],
|
||||
});
|
||||
|
||||
const lato = Lato({
|
||||
variable: "--font-lato", subsets: ["latin"],
|
||||
weight: ["100", "300", "400", "700", "900"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "AI UGC Ads - Scale Your Advertising with AI Creators", description: "Create high-performing AI-generated UGC ads instantly. Scale your advertising with realistic AI creators producing authentic user-generated content for TikTok, Instagram, and Meta.", keywords: "AI UGC ads, UGC advertising, AI generated content, social media ads, TikTok ads, Instagram ads, user-generated content, performance marketing", metadataBase: new URL("https://aiugcads.com"),
|
||||
alternates: {
|
||||
canonical: "https://aiugcads.com"},
|
||||
openGraph: {
|
||||
title: "AI UGC Ads - Scale Your Advertising with AI Creators", description: "Create high-performing AI-generated UGC ads instantly. Scale your advertising with realistic AI creators.", url: "https://aiugcads.com", siteName: "AI UGC Ads", type: "website", images: [
|
||||
{
|
||||
url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/abstract-futuristic-background-with-dark-1772974079108-4402dc8b.png", alt: "AI UGC Ads Platform"},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image", title: "AI UGC Ads - Scale Your Advertising with AI Creators", description: "Create high-performing AI-generated UGC ads instantly.", images: [
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/abstract-futuristic-background-with-dark-1772974079108-4402dc8b.png"],
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
};
|
||||
title: "AI UGC Ads - High-Converting UGC Content Generated by AI", description: "Scale your advertising with realistic AI creators producing high-performing UGC content. 500+ ads created, 2.5x better CTR, 80% cost savings."};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${halant.variable} ${inter.variable} ${lato.variable} antialiased`}
|
||||
>
|
||||
<body className={`${inter.variable}`}>
|
||||
<ServiceWrapper>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
</ServiceWrapper>
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@@ -1421,7 +1403,6 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
268
src/app/page.tsx
268
src/app/page.tsx
@@ -10,7 +10,9 @@ import TestimonialCardSixteen from "@/components/sections/testimonial/Testimonia
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { Sparkles } from "lucide-react";
|
||||
import { Sparkles, MessageCircle, Play } from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import gsap from "gsap";
|
||||
|
||||
export default function LandingPage() {
|
||||
const navItems = [
|
||||
@@ -135,13 +137,66 @@ export default function LandingPage() {
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "WhatsApp", href: "https://wa.me/91XXXXXXXXXX?text=Hi%20I%20want%20AI%20UGC%20ads%20for%20my%20brand" },
|
||||
{
|
||||
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"
|
||||
@@ -159,20 +214,159 @@ export default function LandingPage() {
|
||||
<NavbarStyleApple brandName="AI UGC Ads" navItems={navItems} />
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="AI UGC Ads That Convert"
|
||||
description="Scale your advertising with realistic AI creators producing high-performing UGC content"
|
||||
buttons={[
|
||||
{
|
||||
text: "Chat on WhatsApp", href: "https://wa.me/91XXXXXXXXXX?text=Hi%20I%20want%20AI%20UGC%20ads%20for%20my%20brand"},
|
||||
{ text: "View Our Ads", href: "#featured-ads" },
|
||||
]}
|
||||
videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYxNz4Ejn7MjZoq3UCNYDHC1kP/abstract-futuristic-background-with-dark-1772974079108-4402dc8b.png"
|
||||
imageAlt="AI UGC Ads Hero Background"
|
||||
showDimOverlay={true}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
<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">
|
||||
@@ -274,6 +468,48 @@ export default function LandingPage() {
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user