Merge version_3_1777171001055 into main

Merge version_3_1777171001055 into main

src/App.tsx

@@ -1,13 +1,71 @@
+import { useState, useEffect } from 'react';
 import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
+const images = [
+  "https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80",
+  "https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&q=80",
+  "https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&q=80"
+];
+
+function HeroCarousel() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % images.length);
+    }, 5000);
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <div className="relative w-full h-screen overflow-hidden bg-background">
+      {images.map((src, index) => (
+        <div
+          key={src}
+          className={`absolute inset-0 w-full h-full transition-opacity duration-1000 ease-in-out ${
+            index === currentIndex ? 'opacity-100' : 'opacity-0'
+          }`}
+        >
+          <img src={src} alt={`Slide ${index}`} className="object-cover w-full h-full" />
+        </div>
+      ))}
+      <div className="absolute inset-0 bg-black/60" />
+      <div className="absolute inset-0 flex flex-col items-center justify-center text-center px-6 z-10">
+        <span className="px-3 py-1 text-sm bg-white/10 text-white backdrop-blur-md rounded-full mb-6 border border-white/20">
+          New Features Live
+        </span>
+        <h1 className="text-5xl md:text-7xl font-bold text-white mb-6 max-w-4xl text-balance">
+          Build Your Next Great Idea
+        </h1>
+        <p className="text-lg md:text-xl text-white/80 mb-8 max-w-2xl text-balance">
+          Transform your vision into reality with our powerful platform. Fast, secure, and designed for modern teams.
+        </p>
+        <div className="flex flex-wrap justify-center gap-4">
+          <a href="#start" className="px-8 py-3 bg-white text-black font-medium rounded-full hover:bg-gray-100 transition-colors">
+            Get Started
+          </a>
+          <a href="#demo" className="px-8 py-3 bg-white/10 text-white backdrop-blur-md border border-white/20 font-medium rounded-full hover:bg-white/20 transition-colors">
+            Book a Demo
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
-        <Route path="/" element={<HomePage />} />
+        <Route path="/" element={
+          <>
+            <HeroCarousel />
+            <HomePage />
+          </>
+        } />
       </Route>
     </Routes>
   );
-}
+}