@notionhive/menus 0.1.0

package/templates/components/molecules/SiteHeader/SiteHeader.jsx

@@ -0,0 +1,177 @@
+"use client";
+
+import SafeImage from "../../atoms/SafeImage";
+import { siteHeaderPropTypes } from "./SiteHeader.propTypes";
+
+function SearchIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+      <circle cx="9" cy="9" r="6" stroke="#212121" strokeWidth="1.5" />
+      <path d="M14 14L17.5 17.5" stroke="#212121" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function LocationIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path
+        d="M8 1.5C5.51472 1.5 3.5 3.51472 3.5 6C3.5 9.5 8 14.5 8 14.5C8 14.5 12.5 9.5 12.5 6C12.5 3.51472 10.4853 1.5 8 1.5Z"
+        stroke="#212121"
+        strokeWidth="1.2"
+      />
+      <circle cx="8" cy="6" r="1.5" fill="#212121" />
+    </svg>
+  );
+}
+
+function ChevronDownIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path
+        d="M4 6L8 10L12 6"
+        stroke="#212121"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function MenuIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path d="M4 7H20M4 12H20M4 17H14" stroke="#212121" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function Divider() {
+  return <span className="mx-1 hidden h-3 w-px bg-neutral-100 md:block" aria-hidden="true" />;
+}
+
+/**
+ * SiteHeader — logo, primary navigation, search, and store selector.
+ *
+ * @param {object} props
+ * @param {string} props.logoSrc - Logo image URL.
+ * @param {string} [props.logoAlt="Site logo"] - Logo alt text.
+ * @param {{ label: string, href?: string, active?: boolean, onClick?: () => void }[]} [props.navItems=[]] - Nav links.
+ * @param {string} [props.myDealerLabel="MyDealer"] - MyDealer link label.
+ * @param {string} [props.storeLabel="Choose a Store"] - Store selector label.
+ * @param {() => void} [props.onStoreClick] - Store selector click handler.
+ * @param {() => void} [props.onSearchClick] - Search icon click handler.
+ * @param {() => void} [props.onMenuClick] - Mobile menu handler.
+ * @param {string} [props.className=""] - Extra classes on the root element.
+ */
+export function SiteHeader({
+  logoSrc,
+  logoAlt = "Site logo",
+  navItems = [],
+  myDealerLabel = "MyDealer",
+  storeLabel = "Choose a Store",
+  onStoreClick,
+  onSearchClick,
+  onMenuClick,
+  className = "",
+}) {
+  return (
+    <header
+      className={[
+        "flex h-14 w-full shrink-0 items-center justify-between border-b border-neutral-100 bg-white px-4 sm:h-[61px] sm:px-6 md:px-8",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <div className="relative h-8 w-40 shrink-0 sm:h-10 sm:w-52 md:h-[50px] md:w-[317px]">
+        <SafeImage
+          src={logoSrc}
+          alt={logoAlt}
+          fill
+          className="object-contain object-left"
+          sizes="(max-width: 768px) 160px, 317px"
+          priority
+        />
+      </div>
+
+      <div className="flex items-center justify-end gap-2 sm:gap-4 md:gap-[18px]">
+        <nav className="hidden items-center gap-2 lg:flex lg:gap-4" aria-label="Primary">
+          <ul className="flex items-start gap-2 xl:gap-3">
+            {navItems.map((item) => (
+              <li key={item.label}>
+                {item.href ? (
+                  <a
+                    href={item.href}
+                    className={[
+                      "inline-flex items-center justify-center px-1.5 py-3 text-sm font-medium leading-6 transition-colors duration-200 ease-out xl:px-2 xl:py-4 xl:text-base",
+                      item.active
+                        ? "border-b-2 border-brand-500 text-brand-500"
+                        : "text-neutral-800 hover:text-brand-500",
+                    ].join(" ")}
+                  >
+                    {item.label}
+                  </a>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={item.onClick}
+                    className={[
+                      "inline-flex items-center justify-center px-1.5 py-3 text-sm font-medium leading-6 transition-colors duration-200 ease-out xl:px-2 xl:py-4 xl:text-base",
+                      item.active
+                        ? "border-b-2 border-brand-500 text-brand-500"
+                        : "text-neutral-800 hover:text-brand-500",
+                    ].join(" ")}
+                  >
+                    {item.label}
+                  </button>
+                )}
+              </li>
+            ))}
+          </ul>
+
+          <Divider />
+
+          <button
+            type="button"
+            onClick={onSearchClick}
+            aria-label="Search"
+            className="flex size-10 items-center justify-center transition-opacity duration-200 ease-out hover:opacity-70"
+          >
+            <SearchIcon />
+          </button>
+
+          <Divider />
+
+          <span className="hidden text-sm font-medium leading-6 text-neutral-800 xl:inline xl:text-base">
+            {myDealerLabel}
+          </span>
+        </nav>
+
+        <button
+          type="button"
+          onClick={onStoreClick}
+          className="hidden items-center gap-1 rounded-pill border border-neutral-100 px-3 py-1.5 text-xs leading-5 text-neutral-800 transition-colors duration-200 ease-out hover:bg-neutral-50 sm:inline-flex sm:px-4 sm:py-2 sm:text-sm"
+        >
+          <LocationIcon />
+          <span className="max-w-[100px] truncate sm:max-w-none">{storeLabel}</span>
+          <ChevronDownIcon />
+        </button>
+
+        <button
+          type="button"
+          onClick={onMenuClick}
+          aria-label="Open menu"
+          className="flex size-10 items-center justify-center transition-opacity duration-200 ease-out hover:opacity-70 lg:hidden"
+        >
+          <MenuIcon />
+        </button>
+      </div>
+    </header>
+  );
+}
+
+SiteHeader.propTypes = siteHeaderPropTypes;
+
+export default SiteHeader;

package/templates/components/molecules/SiteHeader/SiteHeader.propTypes.js

@@ -0,0 +1,20 @@
+import PropTypes from "prop-types";
+
+const navItemShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  active: PropTypes.bool,
+  onClick: PropTypes.func,
+});
+
+export const siteHeaderPropTypes = {
+  logoSrc: PropTypes.string.isRequired,
+  logoAlt: PropTypes.string,
+  navItems: PropTypes.arrayOf(navItemShape),
+  myDealerLabel: PropTypes.string,
+  storeLabel: PropTypes.string,
+  onStoreClick: PropTypes.func,
+  onSearchClick: PropTypes.func,
+  onMenuClick: PropTypes.func,
+  className: PropTypes.string,
+};

package/templates/components/molecules/SiteHeader/index.js

@@ -0,0 +1 @@
+export { SiteHeader, default } from "./SiteHeader";

package/templates/components/molecules/SlideIndicators/SlideIndicators.jsx

@@ -0,0 +1,75 @@
+import { slideIndicatorsPropTypes } from "./SlideIndicators.propTypes";
+
+/**
+ * SlideIndicators — animated dot/tab indicators for carousels.
+ *
+ * @param {object} props
+ * @param {number} props.count - Total slides.
+ * @param {number} props.activeIndex - Current active slide (0-based).
+ * @param {(index: number) => void} [props.onSelect] - Click handler per dot.
+ * @param {string} [props.className=""] - Extra classes on the root.
+ */
+export function SlideIndicators({
+  count,
+  activeIndex,
+  onSelect,
+  orientation = "horizontal",
+  variant = "dot",
+  className = "",
+}) {
+  const isVertical = orientation === "vertical";
+
+  return (
+    <div
+      className={[
+        "flex items-center",
+        isVertical ? "flex-col gap-2" : "gap-1.5",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      role="tablist"
+      aria-label="Slides"
+      aria-orientation={isVertical ? "vertical" : "horizontal"}
+    >
+      {Array.from({ length: count }).map((_, index) => {
+        const isActive = index === activeIndex;
+        const Tag = onSelect ? "button" : "span";
+
+        let sizeClass = "size-1 bg-white/30 hover:bg-white/50";
+        if (variant === "dot") {
+          sizeClass = isActive ? "h-1.5 w-4 bg-white" : "size-1 bg-white/30 hover:bg-white/50";
+        } else if (variant === "bar") {
+          sizeClass = isActive
+            ? isVertical
+              ? "h-[30px] w-1 bg-white/80"
+              : "h-1 w-8 bg-white/80"
+            : isVertical
+              ? "h-[30px] w-1 bg-white/40"
+              : "h-1 w-4 bg-white/40";
+        } else if (variant === "pill") {
+          sizeClass = isActive ? "size-2 bg-white" : "size-2 bg-white/40";
+        }
+
+        return (
+          <Tag
+            key={index}
+            type={onSelect ? "button" : undefined}
+            role="tab"
+            aria-selected={isActive}
+            aria-label={onSelect ? `Go to slide ${index + 1}` : undefined}
+            onClick={onSelect ? () => onSelect(index) : undefined}
+            className={[
+              "rounded-full transition-all duration-300 ease-out motion-reduce:transition-none",
+              sizeClass,
+            ].join(" ")}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+SlideIndicators.propTypes = slideIndicatorsPropTypes;
+
+export default SlideIndicators;

package/templates/components/molecules/SlideIndicators/SlideIndicators.propTypes.js

@@ -0,0 +1,10 @@
+import PropTypes from "prop-types";
+
+export const slideIndicatorsPropTypes = {
+  count: PropTypes.number.isRequired,
+  activeIndex: PropTypes.number.isRequired,
+  onSelect: PropTypes.func,
+  orientation: PropTypes.oneOf(["horizontal", "vertical"]),
+  variant: PropTypes.oneOf(["dot", "bar", "pill"]),
+  className: PropTypes.string,
+};

package/templates/components/molecules/SlideIndicators/index.js

@@ -0,0 +1 @@
+export { SlideIndicators } from "./SlideIndicators";

package/templates/components/organisms/Menu01/Menu01.jsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import SafeImage from "../../atoms/SafeImage";
+import { useCarousel } from "../../hooks/useCarousel";
+import { SiteHeader } from "../../molecules/SiteHeader";
+import { EquipmentMegaMenu } from "../../molecules/EquipmentMegaMenu";
+import { SlideIndicators } from "../../molecules/SlideIndicators";
+import { MobileNavDrawer } from "../../molecules/MobileNavDrawer";
+import { menu01DefaultProps, menu01PropTypes } from "./Menu01.propTypes";
+
+/**
+ * Menu01 — Koenig Equipment mega menu open state with hero banner behind.
+ *
+ * @param {object} props - See Menu01.propTypes.js for full prop list.
+ */
+export function Menu01({
+  logoSrc = menu01DefaultProps.logoSrc,
+  logoAlt = menu01DefaultProps.logoAlt,
+  navItems = menu01DefaultProps.navItems,
+  myDealerLabel = menu01DefaultProps.myDealerLabel,
+  storeLabel = menu01DefaultProps.storeLabel,
+  onMenuClick,
+  megaMenuOpen: megaMenuOpenProp,
+  defaultMegaMenuOpen = menu01DefaultProps.defaultMegaMenuOpen,
+  onMegaMenuChange,
+  bannerImage = menu01DefaultProps.bannerImage,
+  bannerAlt = menu01DefaultProps.bannerAlt,
+  headline = menu01DefaultProps.headline,
+  subheadline = menu01DefaultProps.subheadline,
+  description = menu01DefaultProps.description,
+  ctaText = menu01DefaultProps.ctaText,
+  onCtaClick,
+  categories = menu01DefaultProps.categories,
+  slideCount = menu01DefaultProps.slideCount,
+  activeSlide: activeSlideProp = menu01DefaultProps.activeSlide,
+  onSlideChange,
+  className = "",
+}) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [internalMegaOpen, setInternalMegaOpen] = useState(defaultMegaMenuOpen);
+
+  const isMegaControlled = megaMenuOpenProp !== undefined;
+  const megaMenuOpen = isMegaControlled ? megaMenuOpenProp : internalMegaOpen;
+
+  const setMegaMenuOpen = useCallback(
+    (next) => {
+      const value = typeof next === "function" ? next(megaMenuOpen) : next;
+      if (!isMegaControlled) setInternalMegaOpen(value);
+      onMegaMenuChange?.(value);
+    },
+    [isMegaControlled, megaMenuOpen, onMegaMenuChange]
+  );
+
+  const toggleMegaMenu = useCallback(() => {
+    setMegaMenuOpen((open) => !open);
+  }, [setMegaMenuOpen]);
+
+  const headerNavItems = useMemo(
+    () =>
+      navItems.map((item) => {
+        if (item.label === "New Equipment") {
+          return {
+            ...item,
+            active: megaMenuOpen,
+            onClick: () => {
+              item.onClick?.();
+              toggleMegaMenu();
+            },
+          };
+        }
+        return item;
+      }),
+    [navItems, megaMenuOpen, toggleMegaMenu]
+  );
+
+  const drawerNavItems = useMemo(
+    () =>
+      navItems.map((item) =>
+        item.label === "New Equipment"
+          ? { ...item, onClick: toggleMegaMenu }
+          : item
+      ),
+    [navItems, toggleMegaMenu]
+  );
+
+  const { activeSlide, goTo, pause, resume } = useCarousel({
+    count: slideCount,
+    initialIndex: activeSlideProp,
+    autoPlayMs: 6000,
+    loop: true,
+    onChange: onSlideChange,
+  });
+
+  useEffect(() => {
+    goTo(activeSlideProp);
+  }, [activeSlideProp, goTo]);
+
+  const subheadlineLines = subheadline.split("\n");
+
+  return (
+    <section
+      className={["relative flex w-full flex-col", className].filter(Boolean).join(" ")}
+      data-menu="menu01"
+      onMouseEnter={pause}
+      onMouseLeave={resume}
+    >
+      <div className="relative z-20 w-full shrink-0 bg-white">
+        <SiteHeader
+          logoSrc={logoSrc}
+          logoAlt={logoAlt}
+          navItems={headerNavItems}
+          myDealerLabel={myDealerLabel}
+          storeLabel={storeLabel}
+          onMenuClick={() => {
+            setMobileMenuOpen(true);
+            onMenuClick?.();
+          }}
+        />
+        <EquipmentMegaMenu
+          isOpen={megaMenuOpen}
+          onClose={() => setMegaMenuOpen(false)}
+        />
+      </div>
+
+      <MobileNavDrawer
+        isOpen={mobileMenuOpen}
+        onClose={() => setMobileMenuOpen(false)}
+        navItems={drawerNavItems}
+        accentColor="#367c2b"
+      />
+
+      <div className="relative min-h-[60vh] w-full overflow-hidden md:min-h-[700px] lg:min-h-[896px]">
+        <SafeImage
+          src={bannerImage}
+          alt={bannerAlt}
+          fill
+          className="object-cover object-center transition-opacity duration-700 ease-out"
+          sizes="100vw"
+          priority
+        />
+
+        <SlideIndicators
+          count={slideCount}
+          activeIndex={activeSlide}
+          onSelect={goTo}
+          orientation="vertical"
+          variant="bar"
+          className="absolute right-4 top-1/2 hidden -translate-y-1/2 sm:flex md:right-8 lg:right-12"
+        />
+
+        <div className="absolute left-1/2 top-[calc(50%+57px)] flex w-max max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 animate-fade-in flex-col items-start justify-center gap-4 px-4 sm:gap-5 sm:px-0 md:gap-[22px]">
+          <p className="text-left text-4xl font-bold leading-none text-white/80 sm:text-6xl md:text-8xl lg:text-[120px] xl:text-[150px] xl:leading-[74px]">
+            {headline}
+          </p>
+          <div className="flex flex-col items-start gap-2 text-left sm:gap-3">
+            <p className="text-xl font-bold leading-snug text-white/80 sm:text-2xl md:text-3xl lg:text-[42px] lg:leading-9">
+              {subheadlineLines.map((line, i) => (
+                <span key={line}>
+                  {line}
+                  {i < subheadlineLines.length - 1 ? <br /> : null}
+                </span>
+              ))}
+            </p>
+            <p className="text-base font-medium leading-relaxed text-white sm:text-lg md:text-xl lg:text-2xl lg:leading-[54px]">
+              {description}
+            </p>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          onClick={onCtaClick}
+          className="absolute bottom-32 left-1/2 -translate-x-1/2 rounded-pill bg-accent-yellow px-5 py-2.5 text-base font-semibold leading-6 text-neutral-800 transition-colors duration-200 ease-out hover:bg-accent-yellow-hover sm:bottom-36 sm:px-6 sm:py-3 sm:text-lg md:bottom-[190px]"
+        >
+          {ctaText}
+        </button>
+
+        <div className="absolute bottom-0 left-0 flex min-h-[120px] w-full flex-col items-center justify-end bg-gradient-to-b from-transparent via-black/80 via-[77.604%] to-black/80 sm:min-h-[160px] lg:h-[195px]">
+          <div className="grid w-full max-w-[1410px] grid-cols-2 gap-0 sm:flex sm:flex-1 sm:items-end lg:grid-cols-none lg:flex">
+            {categories.map((category, index) => (
+              <div key={category} className="flex flex-1 items-end">
+                {index > 0 ? (
+                  <span
+                    className="hidden h-full w-px shrink-0 self-stretch bg-white/20 sm:block"
+                    aria-hidden="true"
+                  />
+                ) : null}
+                <button
+                  type="button"
+                  className="flex min-h-[48px] flex-1 flex-col items-center justify-end px-2 pb-6 text-center text-sm font-bold leading-snug text-white/80 transition-colors duration-200 ease-out hover:text-white sm:min-h-[60px] sm:px-4 sm:pb-10 sm:text-base md:text-lg lg:pb-[50px] lg:text-xl lg:leading-7"
+                >
+                  {category.split("\n").map((line, lineIndex) => (
+                    <span key={lineIndex}>
+                      {line}
+                      {lineIndex < category.split("\n").length - 1 ? <br /> : null}
+                    </span>
+                  ))}
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Menu01.propTypes = menu01PropTypes;
+
+export default Menu01;

package/templates/components/organisms/Menu01/Menu01.propTypes.js

@@ -0,0 +1,63 @@
+import PropTypes from "prop-types";
+
+const navItemShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  active: PropTypes.bool,
+  onClick: PropTypes.func,
+});
+
+export const menu01PropTypes = {
+  logoSrc: PropTypes.string,
+  logoAlt: PropTypes.string,
+  navItems: PropTypes.arrayOf(navItemShape),
+  myDealerLabel: PropTypes.string,
+  storeLabel: PropTypes.string,
+  onMenuClick: PropTypes.func,
+  megaMenuOpen: PropTypes.bool,
+  defaultMegaMenuOpen: PropTypes.bool,
+  onMegaMenuChange: PropTypes.func,
+  bannerImage: PropTypes.string,
+  bannerAlt: PropTypes.string,
+  headline: PropTypes.string,
+  subheadline: PropTypes.string,
+  description: PropTypes.string,
+  ctaText: PropTypes.string,
+  onCtaClick: PropTypes.func,
+  categories: PropTypes.arrayOf(PropTypes.string),
+  slideCount: PropTypes.number,
+  activeSlide: PropTypes.number,
+  onSlideChange: PropTypes.func,
+  className: PropTypes.string,
+};
+
+export const menu01DefaultProps = {
+  logoSrc: "/menus/menu01/logo.png",
+  logoAlt: "John Deere and Koenig Equipment",
+  navItems: [
+    { label: "New Equipment", active: true },
+    { label: "Used Equipment", href: "#" },
+    { label: "Parts & Services", href: "#" },
+    { label: "Contact Us", href: "#" },
+    { label: "Resources", href: "#" },
+  ],
+  myDealerLabel: "MyDealer",
+  storeLabel: "Choose a Store",
+  defaultMegaMenuOpen: false,
+  bannerImage: "/menus/menu01/banner.jpg",
+  bannerAlt: "John Deere compact tractor in a field",
+  headline: "0%",
+  subheadline: "FOR 84 MONTHS\nOR save up to $3,400",
+  description: "ON SELECT COMPACT TRACTORS",
+  ctaText: "Learn More",
+  categories: [
+    "Large Property\nOwner",
+    "Hay & Forage",
+    "Production Ag",
+    "Homeowner",
+    "Professional\nLandscaper",
+    "Construction\n& Contractor",
+  ],
+  slideCount: 6,
+  activeSlide: 0,
+};

package/templates/components/organisms/Menu01/index.js

@@ -0,0 +1 @@
+export { Menu01, default } from "./Menu01";