src/App.tsx

@@ -4,7 +4,7 @@ import FeaturesLabeledList from '@/components/sections/features/FeaturesLabeledL
 import FooterBasic from '@/components/sections/footer/FooterBasic';
 import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
 import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
-import NavbarCentered from '@/components/ui/NavbarCentered';
+import Navbar from '@/components/Navbar';
 import ProductVariantCards from '@/components/sections/product/ProductVariantCards';
 import TestimonialSplitCards from '@/components/sections/testimonial/TestimonialSplitCards';
 
@@ -12,7 +12,7 @@ export default function App() {
   return (
     <>
   <div id="nav" data-section="nav">
-      <NavbarCentered
+      <Navbar
       logo="TechNova"
       navItems={[
         {
@@ -39,6 +39,7 @@ export default function App() {
     />
   </div>
 
+<main className="pt-24">
   <div id="hero" data-section="hero">
       <HeroSplitTestimonial
       tag="Next-Gen IT Solutions"
@@ -379,6 +380,7 @@ export default function App() {
       rightText="All rights reserved."
     />
   </div>
+</main>
     </>
   );
-}
+}

src/components/Navbar.tsx

@@ -0,0 +1,77 @@
+import { useButtonClick } from "@/hooks/useButtonClick";
+
+type NavItem = {
+  name: string;
+  href: string;
+};
+
+type CtaButton = {
+  text: string;
+  href: string;
+};
+
+type NavbarProps = {
+  logo: string;
+  navItems: NavItem[];
+  ctaButton: CtaButton;
+};
+
+const NavLink = ({ href, children }: { href: string; children: React.ReactNode }) => {
+  const handleClick = useButtonClick(href);
+  return (
+    <a
+      href={href}
+      onClick={(e) => {
+        e.preventDefault();
+        handleClick();
+      }}
+      className="text-sm text-foreground hover:text-primary-cta transition-colors"
+    >
+      {children}
+    </a>
+  );
+};
+
+export default function Navbar({ logo, navItems, ctaButton }: NavbarProps) {
+  const handleLogoClick = useButtonClick("/");
+  const handleCtaClick = useButtonClick(ctaButton.href);
+
+  return (
+    <header className="fixed top-4 left-1/2 -translate-x-1/2 z-50">
+      <nav className="flex items-center gap-8 rounded-full shadow-lg px-8 py-3 backdrop-blur-xl bg-white/70 border border-white/40">
+        {/* Logo */}
+        <a
+          href="/"
+          onClick={(e) => {
+            e.preventDefault();
+            handleLogoClick();
+          }}
+          className="text-lg font-bold text-foreground mr-auto"
+        >
+          {logo}
+        </a>
+
+        {/* Nav Links */}
+        <div className="hidden md:flex items-center gap-8">
+          {navItems.map((item) => (
+            <NavLink key={item.name} href={item.href}>
+              {item.name}
+            </NavLink>
+          ))}
+        </div>
+
+        {/* CTA Button */}
+        <a
+          href={ctaButton.href}
+          onClick={(e) => {
+            e.preventDefault();
+            handleCtaClick();
+          }}
+          className="primary-button text-primary-cta-text px-4 py-2 text-sm rounded-full ml-auto whitespace-nowrap"
+        >
+          {ctaButton.text}
+        </a>
+      </nav>
+    </header>
+  );
+}

src/index.css

@@ -16,7 +16,7 @@
   --background-accent: #106EFB;
 
   /* @layout/border-radius/rounded */
-  --radius: 0rem;
+  --radius: 0px;
 
   /* @layout/content-width/medium */
   --width-content-width: clamp(40rem, 80vw, 100rem);
@@ -155,9 +155,9 @@ h6 {
 /* WEBILD_CARD_STYLE */
 /* @cards/glass-elevated */
 .card {
-  backdrop-filter: blur(8px);
+  backdrop-filter: none;
   background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-card) 80%, transparent), color-mix(in srgb, var(--color-card) 40%, transparent));
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  box-shadow: none;
   border: 1px solid var(--color-card);
 }
 
@@ -165,7 +165,7 @@ h6 {
 /* @primaryButtons/primary-glow */
 .primary-button {
   background: var(--color-primary-cta);
-  box-shadow: color-mix(in srgb, var(--color-background) 20%, transparent) 0px 3px 1px 0px inset, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 0.839802px 0.503881px -0.3125px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 1.99048px 1.19429px -0.625px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 3.63084px 2.1785px -0.9375px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 6.03627px 3.62176px -1.25px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 9.74808px 5.84885px -1.5625px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 15.9566px 9.57398px -1.875px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 27.4762px 16.4857px -2.1875px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 50px 30px -2.5px;
+  box-shadow: none;
 }
 
 /* WEBILD_SECONDARY_BUTTON */
@@ -178,7 +178,6 @@ h6 {
     linear-gradient(color-mix(in srgb, var(--color-accent) 5%, transparent) 0%, transparent 59.26%),
     linear-gradient(color-mix(in srgb, var(--color-secondary-cta) 60%, transparent), color-mix(in srgb, var(--color-secondary-cta) 60%, transparent)),
     var(--color-secondary-cta);
-  box-shadow:
-    2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 10%, transparent);
+  box-shadow: none;
   border: 1px solid var(--color-secondary-cta);
 }