Navigation & Footer
Navigation bars and footer variants used across the system.
Navbar
Component: @/components/layout/Navbar
import { Navbar } from "@/components/layout/Navbar";
<Navbar />Live preview: the sticky navbar at the top of this page uses this component and the default mobile toggle animation.
NavbarTwo
Component: @/components/layout/NavbarTwo
import { NavbarTwo } from "@/components/layout/NavbarTwo";
<NavbarTwo />This variant now demos an alternate mobile toggle where the three lines pull together before rotating into the close state.
Footer
Component: @/components/layout/Footer
import { Footer } from "@/components/layout/Footer";
<Footer />Live preview: the footer at the bottom of this page uses this component.
FooterTwo
Component: @/components/layout/FooterTwo
import { FooterTwo } from "@/components/layout/FooterTwo";
<FooterTwo />FooterThree
Component: @/components/layout/FooterThree
import { FooterThree } from "@/components/layout/FooterThree";
<FooterThree />Four columns at the top, an oversized CTA rail in the middle, and a three-part meta row at the bottom. On larger screens it can reveal like a curtain as the page ends, and it falls back to a static footer for reduced-motion users.