diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3636c57..0874c67 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -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>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5ab5c53..9dee469 100644
--- a/src/app/page.tsx
+++ b/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>
   );
 }
