src/App.tsx

@@ -1,13 +1,13 @@
 import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
-import HomePage from './pages/HomePage';
+import HeroWithMarquee from './components/sections/hero/HeroWithMarquee';
 
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
-        <Route path="/" element={<HomePage />} />
+        <Route path="/" element={<HeroWithMarquee />} />
       </Route>
     </Routes>
   );
-}
+}

src/components/sections/hero/HeroWithMarquee.tsx

@@ -0,0 +1,23 @@
+import LogoMarquee from "@/components/ui/LogoMarquee";
+
+export default function HeroWithMarquee() {
+  return (
+    <section className="relative w-full pt-32 pb-16 bg-background flex flex-col items-center">
+      <div className="w-[var(--width-content-width)] mx-auto flex flex-col items-center text-center gap-6 mb-20 px-6">
+        <span className="px-3 py-1 text-sm card rounded">Trusted Partner</span>
+        <h1 className="text-5xl md:text-7xl font-bold text-balance text-foreground">
+          Build faster with Webild
+        </h1>
+        <p className="text-lg md:text-xl text-foreground/70 max-w-2xl">
+          The ultimate website builder for modern teams.
+        </p>
+        <div className="flex gap-4 mt-4">
+          <a href="#" className="primary-button px-6 py-3 rounded font-medium hover-lift">Get Started</a>
+          <a href="#" className="secondary-button px-6 py-3 rounded font-medium hover-lift">Learn More</a>
+        </div>
+      </div>
+      
+      <LogoMarquee />
+    </section>
+  );
+}

src/components/ui/LogoMarquee.tsx

@@ -0,0 +1,22 @@
+export default function LogoMarquee() {
+  const logos = [
+    "https://upload.wikimedia.org/wikipedia/commons/a/a9/Amazon_logo.svg",
+    "https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg",
+    "https://upload.wikimedia.org/wikipedia/commons/4/44/Microsoft_logo.svg",
+    "https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg",
+    "https://upload.wikimedia.org/wikipedia/commons/0/08/Cisco_logo_blue_2016.svg"
+  ];
+
+  return (
+    <div className="w-full overflow-hidden py-10 border-y border-foreground/10">
+      <p className="text-center text-sm text-foreground/60 mb-8 font-medium uppercase tracking-wider">Trusted by innovative companies</p>
+      <div className="flex w-full overflow-hidden relative">
+        <div className="flex animate-marquee whitespace-nowrap items-center gap-24 px-12">
+          {[...logos, ...logos, ...logos, ...logos].map((logo, i) => (
+            <img key={i} src={logo} alt="Company Logo" className="h-8 w-auto object-contain grayscale opacity-50 hover:opacity-100 transition-opacity" />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/index.css

@@ -196,4 +196,12 @@ h6 {
   .rotate-y-180 {
     transform: rotateY(180deg);
   }
+  .animate-marquee {
+    animation: marquee 30s linear infinite;
+  }
+}
+
+@keyframes marquee {
+  from { transform: translateX(0%); }
+  to { transform: translateX(-50%); }
 }