Bob AI: fix build error in src/components/ui/FloatingNav.tsx

Merge version_8_1776693468912 into main

src/App.tsx

@@ -5,7 +5,7 @@ import FeaturesLabeledList from '@/components/sections/features/FeaturesLabeledL
 import FooterSimpleCard from '@/components/sections/footer/FooterSimpleCard';
 import HeroBrand from '@/components/sections/hero/HeroBrand';
 import MetricsMinimalCards from '@/components/sections/metrics/MetricsMinimalCards';
-import FloatingNav from '@/components/ui/FloatingNav';
+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';
@@ -14,32 +14,33 @@ import HeroTrustedBy from '@/components/ui/HeroTrustedBy';
 export default function App() {
   return (
     <>
-      <FloatingNav
-        logo="TOKYO-MARKETING"
-        navItems={[
-          {
-            name: 'About',
-            href: '#about',
-          },
-          {
-            name: 'Services',
-            href: '#services',
-          },
-          {
-            name: 'Pricing',
-            href: '#pricing',
-          },
-          {
-            name: 'Contact',
-            href: '#contact',
-          },
-        ]}
-        ctaButton={{
-          text: 'Get Started',
-          href: '#contact',
-        }}
-      />
-
+  <div id="nav" data-section="nav">
+      <NavbarCentered
+      logo="TOKYO-MARKETING"
+      navItems={[
+        {
+          name: "About",
+          href: "#about",
+        },
+        {
+          name: "Services",
+          href: "#services",
+        },
+        {
+          name: "Pricing",
+          href: "#pricing",
+        },
+        {
+          name: "Contact",
+          href: "#contact",
+        },
+      ]}
+      ctaButton={{
+        text: "Get Started",
+        href: "#contact",
+      }}
+    />
+  </div>
 
   <div id="hero" data-section="hero">
       <HeroBrand

src/components/ui/FloatingNav.tsx

@@ -1,6 +1,8 @@
+"use client";
+
 import { useState, useEffect } from 'react';
 import { useButtonClick } from '@/hooks/useButtonClick';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion, AnimatePresence } from "framer-motion";
 
 type NavItem = {
   name: string;

src/components/ui/HeroTrustedBy.tsx

@@ -1,27 +1,18 @@
-const avatarUrls = [
-  "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",
-  "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/professional-headshot-of-a-japanese-fema-1776690873867-edc6ebaa.png",
-  "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/professional-headshot-of-a-middle-aged-m-1776690883590-fe8d0a50.png",
-];
-
 const HeroTrustedBy = () => {
+  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="hero-trusted-by">
+    <div className="glassmorphic-tag">
       <div className="avatar-stack">
-        {avatarUrls.map((url, index) => (
-          <img
-            key={index}
-            src={url}
-            alt={`Trusted by user ${index + 1}`}
-            className="avatar"
-          />
+        {avatars.map((src, index) => (
+          <img key={index} src={src} alt={`avatar ${index + 1}`} className="avatar" />
         ))}
       </div>
-      <span className="text-sm">
-        Trusted by over 2000 agencies
-      </span>
+      <span>Trusted by over 2000 agencies</span>
     </div>
   );
 };

src/index.css

@@ -16,7 +16,7 @@
   --background-accent: #222222;
 
   /* @layout/border-radius/rounded */
-  --radius: 0.2rem;
+  --radius: 0.5rem;
 
   /* @layout/content-width/medium */
   --width-content-width: clamp(40rem, 80vw, 100rem);
@@ -141,6 +141,22 @@ body {
   min-height: 100vh;
   overscroll-behavior: none;
   overscroll-behavior-y: none;
+  padding-top: 6rem;
+}
+
+#nav {
+  position: fixed;
+  top: 1rem;
+  left: 1rem;
+  right: 1rem;
+  z-index: 1000;
+  background-color: rgba(18, 18, 18, 0.75);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-radius: var(--radius);
+  border: 1px solid var(--accent);
+  margin: 0 auto;
+  max-width: 1200px;
 }
 
 h1,
@@ -179,8 +195,6 @@ h6 {
 
 .primary-button,
 .secondary-button {
-  position: relative;
-  overflow: hidden;
   transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
 }
 
@@ -189,28 +203,16 @@ h6 {
   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 0 8px var(--primary-cta);
+    0 0 25px -3px var(--primary-cta),
+    0 0 10px var(--primary-cta);
 }
 
 .secondary-button:hover {
   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 0 8px var(--secondary-cta-text);
-}
-
-.hero-trusted-by {
-  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);
+    0 0 25px -3px var(--secondary-cta-text),
+    0 0 10px var(--secondary-cta-text);
 }
 
 .glassmorphic-tag {

src/styles/animations.css

@@ -194,37 +194,9 @@
     transform: translateY(0) scale(1);
   }
   50% {
-    transform: translateY(-4px) scale(1.05);
+    transform: translateY(-8px) scale(1.1);
   }
   100% {
-    transform: translateY(-2px) scale(1.02);
+    transform: translateY(-4px) scale(1.05);
   }
 }
-
-@keyframes shimmer-effect {
-  from {
-    transform: translateX(-100%) skewX(-25deg);
-  }
-  to {
-    transform: translateX(200%) skewX(-25deg);
-  }
-}
-
-.btn-hover-shimmer::after,
-.primary-button::after,
-.secondary-button::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 50%;
-  height: 100%;
-  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
-  transform: translateX(-100%);
-}
-
-.btn-hover-shimmer:hover::after,
-.primary-button:hover::after,
-.secondary-button:hover::after {
-  animation: shimmer-effect 0.8s ease-in-out;
-}