From 4d168cffc33bd94dda12c4fd71b90c9955cb2a77 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Sun, 26 Apr 2026 15:43:11 +0000
Subject: [PATCH] Bob AI: add a trusted by carousel to the hero section with
 logos of

---
 src/App.tsx                                   |  6 ++---
 .../sections/hero/HeroWithMarquee.tsx         | 23 +++++++++++++++++++
 src/components/ui/LogoMarquee.tsx             | 22 ++++++++++++++++++
 src/index.css                                 |  8 +++++++
 4 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 src/components/sections/hero/HeroWithMarquee.tsx
 create mode 100644 src/components/ui/LogoMarquee.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 33d15f9..c05b11d 100644
--- a/src/App.tsx
+++ b/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>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/sections/hero/HeroWithMarquee.tsx b/src/components/sections/hero/HeroWithMarquee.tsx
new file mode 100644
index 0000000..87c8d72
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
diff --git a/src/components/ui/LogoMarquee.tsx b/src/components/ui/LogoMarquee.tsx
new file mode 100644
index 0000000..05a16af
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 7b2e9d5..7188970 100644
--- a/src/index.css
+++ b/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%); }
 }
\ No newline at end of file
-- 
2.49.1