src/App.tsx

@@ -9,7 +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';
+import HeroTrustedBy from '@/components/ui/HeroTrustedBy';
 
 export default function App() {
   return (
@@ -57,7 +57,7 @@ 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"
     />
     <div className="flex justify-center relative z-10" style={{ marginTop: '-4rem' }}>
-      <TrustedBy />
+      <HeroTrustedBy />
     </div>
   </div>
 

src/components/ui/HeroTrustedBy.tsx

@@ -0,0 +1,25 @@
+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",
+];
+
+const HeroTrustedBy = () => {
+  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 HeroTrustedBy;

src/index.css

@@ -16,7 +16,7 @@
   --background-accent: #222222;
 
   /* @layout/border-radius/rounded */
-  --radius: 0.5rem;
+  --radius: 0.25rem;
 
   /* @layout/content-width/medium */
   --width-content-width: clamp(40rem, 80vw, 100rem);
@@ -141,6 +141,15 @@ body {
   min-height: 100vh;
   overscroll-behavior: none;
   overscroll-behavior-y: none;
+  padding-top: 5rem;
+}
+
+#nav {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+  background-color: var(--background);
 }
 
 h1,

src/styles/animations.css

@@ -191,12 +191,12 @@
 
 @keyframes button-hover-effect {
   0% {
-    transform: translateY(0);
+    transform: translateY(0) scale(1);
   }
   50% {
-    transform: translateY(-4px);
+    transform: translateY(-4px) scale(1.05);
   }
   100% {
-    transform: translateY(-2px);
+    transform: translateY(-2px) scale(1.02);
   }
 }