src/App.tsx

@@ -9,6 +9,7 @@ import NavbarCentered from '@/components/ui/NavbarCentered';
 import PricingLayeredCards from '@/components/sections/pricing/PricingLayeredCards';
 import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
 import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
+import TrustedBy from '@/components/ui/TrustedBy';
 
 export default function App() {
   return (
@@ -55,7 +56,9 @@ export default function App() {
       }}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-sleek-modern-high-tech-marketing-offic-1776690837523-6e0bf547.png"
     />
-    <p className="hero-trust-badge">Trusted by over 2000 agencies</p>
+    <div className="flex justify-center relative z-10" style={{ marginTop: '-4rem' }}>
+      <TrustedBy />
+    </div>
   </div>
 
   <div id="about" data-section="about">

src/components/ui/TrustedBy.tsx

@@ -0,0 +1,25 @@
+const TrustedBy = () => {
+  const avatars = [
+    "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/professional-headshot-of-a-japanese-male-1776690846328-d57aee35.png",
+    "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/professional-headshot-of-a-female-busine-1776690854791-b9f5ea1f.png",
+    "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/professional-headshot-of-a-young-japanes-1776690864881-b5f3321c.png",
+  ];
+
+  return (
+    <div className="glassmorphic-tag">
+      <div className="avatar-stack">
+        {avatars.map((src, index) => (
+          <img
+            key={index}
+            src={src}
+            alt={`Trusted by user ${index + 1}`}
+            className="avatar"
+          />
+        ))}
+      </div>
+      <span>Trusted by over 2000 agencies</span>
+    </div>
+  );
+};
+
+export default TrustedBy;

src/index.css

@@ -16,7 +16,7 @@
   --background-accent: #222222;
 
   /* @layout/border-radius/rounded */
-  --radius: 0.3rem;
+  --radius: 0.5rem;
 
   /* @layout/content-width/medium */
   --width-content-width: clamp(40rem, 80vw, 100rem);
@@ -183,26 +183,46 @@ h6 {
 }
 
 .primary-button:hover {
-  transform: translateY(-3px);
+  animation: button-hover-effect 0.3s ease-out forwards;
   box-shadow:
     color-mix(in srgb, var(--color-background) 15%, transparent) 0px 4px 10px 0px inset,
     color-mix(in srgb, var(--color-background) 15%, transparent) 0px -4px 8px 0px inset,
-    0 8px 15px -3px color-mix(in srgb, var(--primary-cta) 30%, transparent);
+    0 8px 15px -3px color-mix(in srgb, var(--primary-cta) 30%, transparent),
+    0 0 8px var(--primary-cta);
 }
 
 .secondary-button:hover {
-  transform: translateY(-3px);
+  animation: button-hover-effect 0.3s ease-out forwards;
   box-shadow:
     0 1px 2px 0 rgb(0 0 0 / 0.05),
-    0 8px 15px -3px color-mix(in srgb, var(--secondary-cta-text) 30%, transparent);
+    0 8px 15px -3px color-mix(in srgb, var(--secondary-cta-text) 30%, transparent),
+    0 0 8px var(--secondary-cta-text);
 }
 
-.hero-trust-badge {
+.glassmorphic-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 9999px;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
   color: var(--foreground);
   font-size: var(--text-sm);
-  margin-top: -4rem;
-  text-align: center;
-  position: relative;
-  z-index: 10;
-  opacity: 0.8;
+}
+
+.avatar-stack {
+  display: flex;
+  padding-left: 10px;
+}
+
+.avatar {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  border: 2px solid var(--background);
+  object-fit: cover;
+  margin-left: -10px;
 }

src/styles/animations.css

@@ -188,3 +188,15 @@
       0 0 8px var(--secondary-cta-text);
   }
 }
+
+@keyframes button-hover-effect {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-4px);
+  }
+  100% {
+    transform: translateY(-2px);
+  }
+}