2mrw v1.0 has been released! Find out more →
ComponentsHeader

Header Component

Header Component Preview

page.tsx
import Header from "@/components/marketing/Header";
page.tsx
<Header
    navItems={[
        { href: "#features", label: "Features" },
        { href: "#pricing", label: "Pricing" },
        { href: "#testimonials", label: "Testimonials" },
        { href: "#faq", label: "FAQ" },
        { href: "https://docs.2mrw.dev", label: "Documentation", isExternal: true },
    ]}
    logoSrc="https://framerusercontent.com/images/XmxX3Fws7IH91jzhxBjAhC9CrPM.svg"
    loginOnClick={() => router.push("/auth/sign-in")}
/>

Tips

  • Navigation Items: Keep your main navigation focused and minimal
// ❌ Bad Example - Too many options
navItems={[
    { href: "#features", label: "Features" },
    { href: "#benefits", label: "Benefits" },
    { href: "#pricing", label: "Pricing" },
    { href: "#testimonials", label: "Testimonials" },
    { href: "#case-studies", label: "Case Studies" },
    { href: "#about", label: "About" },
    { href: "#contact", label: "Contact" },
    { href: "#blog", label: "Blog" },
]}
 
// ✅ Good Example - Clear hierarchy
navItems={[
    { href: "#features", label: "Features" },
    { href: "#pricing", label: "Pricing" },
    { href: "#testimonials", label: "Testimonials" },
    { href: "https://docs.example.com", label: "Docs", isExternal: true },
]}
Promo BannerHero