@notionhive/menus 0.1.0

package/templates/components/organisms/Menu02/Menu02.jsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useCarousel } from "../../hooks/useCarousel";
+import { CorporateHeader } from "../../molecules/CorporateHeader";
+import { SlideIndicators } from "../../molecules/SlideIndicators";
+import { MobileNavDrawer } from "../../molecules/MobileNavDrawer";
+import { menu02DefaultProps, menu02PropTypes } from "./Menu02.propTypes";
+
+function ServiceCard({ card }) {
+  const className =
+    "flex min-w-[280px] shrink-0 flex-col gap-2 rounded-sm border border-white/10 bg-white/5 px-5 py-4 backdrop-blur-sm transition-colors duration-200 ease-out hover:bg-white/10 sm:min-w-[320px] sm:px-6 sm:py-5 xl:min-w-0";
+
+  const content = (
+    <>
+      <p className="text-base font-bold leading-snug text-white sm:text-lg">{card.title}</p>
+      <p className="text-sm leading-relaxed text-[#f7f8fa]/90 sm:text-base">{card.description}</p>
+    </>
+  );
+
+  if (card.href) {
+    return (
+      <a href={card.href} className={className}>
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button type="button" onClick={card.onClick} className={`text-left ${className}`}>
+      {content}
+    </button>
+  );
+}
+
+/**
+ * Menu02 — Brac EPL investment hero with horizontal scrolling service cards.
+ *
+ * @param {object} props - See Menu02.propTypes.js for full prop list.
+ */
+export function Menu02({
+  logoSrc = menu02DefaultProps.logoSrc,
+  logoAlt = menu02DefaultProps.logoAlt,
+  navItems = menu02DefaultProps.navItems,
+  secondaryCtaText = menu02DefaultProps.secondaryCtaText,
+  primaryCtaText = menu02DefaultProps.primaryCtaText,
+  onSecondaryClick,
+  onPrimaryClick,
+  onMenuClick,
+  headline = menu02DefaultProps.headline,
+  serviceCards = menu02DefaultProps.serviceCards,
+  slideCount = menu02DefaultProps.slideCount,
+  activeSlide: activeSlideProp = menu02DefaultProps.activeSlide,
+  onSlideChange,
+  className = "",
+}) {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const { activeSlide, goTo, pause, resume } = useCarousel({
+    count: slideCount,
+    initialIndex: activeSlideProp,
+    autoPlayMs: 5000,
+    loop: true,
+    onChange: onSlideChange,
+  });
+
+  useEffect(() => {
+    goTo(activeSlideProp);
+  }, [activeSlideProp, goTo]);
+
+  return (
+    <section
+      className={["relative flex w-full flex-col", className].filter(Boolean).join(" ")}
+      data-menu="menu02"
+    >
+      <CorporateHeader
+        logoSrc={logoSrc}
+        logoAlt={logoAlt}
+        navItems={navItems}
+        secondaryCtaText={secondaryCtaText}
+        primaryCtaText={primaryCtaText}
+        onSecondaryClick={onSecondaryClick}
+        onPrimaryClick={onPrimaryClick}
+        onMenuClick={() => {
+          setMenuOpen(true);
+          onMenuClick?.();
+        }}
+      />
+
+      <MobileNavDrawer
+        isOpen={menuOpen}
+        onClose={() => setMenuOpen(false)}
+        navItems={navItems}
+        accentColor="#0058b5"
+      />
+
+      <div
+        className="relative min-h-[60vh] w-full overflow-hidden bg-[#0a1628] md:min-h-[700px] lg:min-h-[906px]"
+        onMouseEnter={pause}
+        onMouseLeave={resume}
+      >
+        <div className="absolute inset-0 bg-gradient-to-b from-[#010623]/20 via-[#010623]/60 to-[#010623]" />
+
+        <div className="absolute inset-x-0 bottom-0 top-[28%] flex flex-col justify-end gap-6 px-4 pb-8 sm:gap-8 sm:px-6 sm:pb-10 md:px-10 lg:gap-10 lg:px-14 lg:pb-12">
+          <h1 className="max-w-[1123px] font-serif text-3xl font-extralight leading-tight tracking-tight text-[#fbfbfb] sm:text-4xl md:text-5xl lg:text-[72px] lg:leading-[1.05] xl:text-[104px] xl:leading-[108px] xl:tracking-[-2.08px]">
+            {headline}
+          </h1>
+
+          <div className="flex w-full flex-col gap-5 sm:gap-6">
+            <div className="-mx-4 overflow-x-auto px-4 pb-2 sm:-mx-6 sm:px-6 md:-mx-10 md:px-10 lg:mx-0 lg:overflow-visible lg:px-0">
+              <div className="flex gap-4 xl:grid xl:grid-cols-4 xl:gap-4">
+                {serviceCards.map((card) => (
+                  <ServiceCard key={card.title} card={card} />
+                ))}
+              </div>
+            </div>
+
+            <SlideIndicators
+              count={slideCount}
+              activeIndex={activeSlide}
+              onSelect={goTo}
+              variant="pill"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Menu02.propTypes = menu02PropTypes;
+
+export default Menu02;

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

@@ -0,0 +1,71 @@
+import PropTypes from "prop-types";
+
+const navItemShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+  hasDropdown: PropTypes.bool,
+});
+
+const serviceCardShape = PropTypes.shape({
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+});
+
+export const menu02PropTypes = {
+  logoSrc: PropTypes.string,
+  logoAlt: PropTypes.string,
+  navItems: PropTypes.arrayOf(navItemShape),
+  secondaryCtaText: PropTypes.string,
+  primaryCtaText: PropTypes.string,
+  onSecondaryClick: PropTypes.func,
+  onPrimaryClick: PropTypes.func,
+  onMenuClick: PropTypes.func,
+  headline: PropTypes.string,
+  serviceCards: PropTypes.arrayOf(serviceCardShape),
+  slideCount: PropTypes.number,
+  activeSlide: PropTypes.number,
+  onSlideChange: PropTypes.func,
+  className: PropTypes.string,
+};
+
+export const menu02DefaultProps = {
+  logoSrc: "/heroes/hero04/logo.png",
+  logoAlt: "BRAC EPL Stock Brokerage",
+  navItems: [
+    { label: "About us", href: "#", hasDropdown: true },
+    { label: "Services", href: "#", hasDropdown: true },
+    { label: "Research", href: "#", hasDropdown: true },
+    { label: "Foreign Invest", href: "#", hasDropdown: true },
+    { label: "Knowledge Center", href: "#", hasDropdown: true },
+  ],
+  secondaryCtaText: "BRAC EPL Trade",
+  primaryCtaText: "Let's Get Started",
+  headline: "Your gateway to smart investments in Bangladesh.",
+  serviceCards: [
+    {
+      title: "Brac EPL Trade",
+      description: "Trade easily and grow your investments.",
+      href: "#",
+    },
+    {
+      title: "Open An Account",
+      description: "Start your investment journey today.",
+      href: "#",
+    },
+    {
+      title: "Equity Trading",
+      description: "Maximizing returns with strategic investments.",
+      href: "#",
+    },
+    {
+      title: "Full DP Service",
+      description: "Reliable depository services for protected investments.",
+      href: "#",
+    },
+  ],
+  slideCount: 3,
+  activeSlide: 0,
+};

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

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

package/templates/components/organisms/Menu03/Menu03.jsx

@@ -0,0 +1,411 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import SafeImage from "../../atoms/SafeImage";
+import { useCarousel } from "../../hooks/useCarousel";
+import { SlideIndicators } from "../../molecules/SlideIndicators";
+import { MobileNavDrawer } from "../../molecules/MobileNavDrawer";
+import { menu03DefaultProps, menu03PropTypes } from "./Menu03.propTypes";
+
+function ChevronDownIcon({ className = "text-[#0e274e]" }) {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M3.5 5.25L7 8.75L10.5 5.25"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function SearchIcon() {
+  return (
+    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" aria-hidden="true">
+      <circle cx="18" cy="18" r="10" stroke="#0E274E" strokeWidth="1.5" />
+      <path d="M25 25L33 33" stroke="#0E274E" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function MenuIcon() {
+  return (
+    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true">
+      <path d="M4 7H24M4 14H24M4 21H16" stroke="#0E274E" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function PauseIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <rect x="6" y="5" width="4" height="14" rx="1" fill="white" />
+      <rect x="14" y="5" width="4" height="14" rx="1" fill="white" />
+    </svg>
+  );
+}
+
+function PlayIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path d="M8 5L19 12L8 19V5Z" fill="white" />
+    </svg>
+  );
+}
+
+function UtilityLink({ link }) {
+  const className = [
+    "text-sm font-semibold leading-[22px] transition-opacity duration-200 ease-out hover:opacity-80",
+    link.highlighted ? "text-[#2a5caa]" : "text-[#1a2942]/80",
+  ].join(" ");
+
+  const content = (
+    <>
+      {link.label}
+      {link.hasDropdown ? (
+        <ChevronDownIcon className={link.highlighted ? "text-[#2a5caa]" : "text-[#1a2942]/80"} />
+      ) : null}
+    </>
+  );
+
+  if (link.href) {
+    return (
+      <a href={link.href} className={`inline-flex items-center gap-1 ${className}`}>
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button type="button" onClick={link.onClick} className={`inline-flex items-center gap-1 ${className}`}>
+      {content}
+    </button>
+  );
+}
+
+function AboutMenuLink({ link }) {
+  const isPrimary = link.variant !== "secondary";
+  const className = isPrimary
+    ? "block w-full text-left text-base font-semibold leading-[26px] text-[#0e274e] transition-opacity duration-200 ease-out hover:opacity-80"
+    : "block w-full text-left text-sm leading-[22px] text-[#0e274e] transition-opacity duration-200 ease-out hover:opacity-80";
+
+  if (link.href) {
+    return (
+      <a href={link.href} className={className}>
+        {link.label}
+      </a>
+    );
+  }
+
+  return (
+    <button type="button" onClick={link.onClick} className={className}>
+      {link.label}
+    </button>
+  );
+}
+
+function AboutMegaMenu({
+  isOpen,
+  onClose,
+  primaryLinks,
+  secondaryHeading,
+  secondaryLinks,
+}) {
+  useEffect(() => {
+    if (!isOpen) return undefined;
+    const handler = (event) => {
+      if (event.key === "Escape") onClose?.();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label="Close About menu"
+        onClick={onClose}
+        className="fixed inset-0 z-30 hidden bg-black/10 lg:block"
+      />
+
+      <div
+        className="absolute left-1/2 top-full z-40 hidden w-max max-w-[calc(100%-2rem)] -translate-x-1/2 rounded-b-lg border-t-2 border-[#2a5caa] bg-white px-8 py-8 shadow-[0_8px_30px_rgba(14,39,78,0.06)] sm:px-12 sm:py-10 lg:flex lg:gap-5"
+        role="dialog"
+        aria-modal="true"
+        aria-label="About menu"
+      >
+        <div className="flex w-[240px] flex-col gap-4 sm:w-[296px] sm:gap-4">
+          {primaryLinks.map((link) => (
+            <AboutMenuLink key={link.label} link={link} />
+          ))}
+        </div>
+
+        <div className="flex w-[240px] flex-col gap-3 sm:w-[296px] sm:gap-5">
+          <p className="text-base font-semibold leading-[26px] text-[#0e274e]">{secondaryHeading}</p>
+          <div className="flex flex-col gap-3">
+            {secondaryLinks.map((link) => (
+              <AboutMenuLink key={link.label} link={link} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+/**
+ * Menu03 — BRAC University header, hero slider, and About mega menu dropdown.
+ *
+ * @param {object} props - See Menu03.propTypes.js for full prop list.
+ */
+export function Menu03({
+  logoSrc = menu03DefaultProps.logoSrc,
+  logoAlt = menu03DefaultProps.logoAlt,
+  utilityLinks = menu03DefaultProps.utilityLinks,
+  navItems = menu03DefaultProps.navItems,
+  onSearchClick,
+  onMenuClick,
+  aboutMenuOpen: aboutMenuOpenProp,
+  defaultAboutMenuOpen = menu03DefaultProps.defaultAboutMenuOpen,
+  onAboutMenuChange,
+  aboutPrimaryLinks = menu03DefaultProps.aboutPrimaryLinks,
+  aboutSecondaryHeading = menu03DefaultProps.aboutSecondaryHeading,
+  aboutSecondaryLinks = menu03DefaultProps.aboutSecondaryLinks,
+  slides = menu03DefaultProps.slides,
+  slideCount = menu03DefaultProps.slideCount,
+  activeSlide: activeSlideProp = menu03DefaultProps.activeSlide,
+  defaultPlaying = menu03DefaultProps.defaultPlaying,
+  onPlayPauseClick,
+  onSlideChange,
+  className = "",
+}) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [internalAboutOpen, setInternalAboutOpen] = useState(defaultAboutMenuOpen);
+  const [isPlaying, setIsPlaying] = useState(defaultPlaying);
+
+  const isAboutControlled = aboutMenuOpenProp !== undefined;
+  const aboutMenuOpen = isAboutControlled ? aboutMenuOpenProp : internalAboutOpen;
+
+  const setAboutMenuOpen = useCallback(
+    (next) => {
+      const value = typeof next === "function" ? next(aboutMenuOpen) : next;
+      if (!isAboutControlled) setInternalAboutOpen(value);
+      onAboutMenuChange?.(value);
+    },
+    [aboutMenuOpen, isAboutControlled, onAboutMenuChange]
+  );
+
+  const toggleAboutMenu = useCallback(() => {
+    setAboutMenuOpen((open) => !open);
+  }, [setAboutMenuOpen]);
+
+  const headerNavItems = useMemo(
+    () =>
+      navItems.map((item) => {
+        if (item.label === "About") {
+          return {
+            ...item,
+            active: aboutMenuOpen,
+            onClick: () => {
+              item.onClick?.();
+              toggleAboutMenu();
+            },
+          };
+        }
+        return item;
+      }),
+    [navItems, aboutMenuOpen, toggleAboutMenu]
+  );
+
+  const drawerNavItems = useMemo(
+    () => [
+      ...aboutPrimaryLinks.map((link) => ({ label: link.label, href: link.href, onClick: link.onClick })),
+      { label: aboutSecondaryHeading, href: "#" },
+      ...aboutSecondaryLinks.map((link) => ({ label: link.label, href: link.href, onClick: link.onClick })),
+      ...navItems.filter((item) => item.label !== "About"),
+    ],
+    [aboutPrimaryLinks, aboutSecondaryHeading, aboutSecondaryLinks, navItems]
+  );
+
+  const { activeSlide, goTo, pause, resume } = useCarousel({
+    count: slideCount,
+    initialIndex: activeSlideProp,
+    autoPlayMs: isPlaying ? 6000 : 0,
+    loop: true,
+    onChange: onSlideChange,
+  });
+
+  useEffect(() => {
+    goTo(activeSlideProp);
+  }, [activeSlideProp, goTo]);
+
+  const currentSlide = slides[activeSlide] || slides[0];
+
+  const handlePlayPause = () => {
+    setIsPlaying((playing) => !playing);
+    onPlayPauseClick?.();
+  };
+
+  return (
+    <section
+      className={["relative flex w-full flex-col", className].filter(Boolean).join(" ")}
+      data-menu="menu03"
+      onMouseEnter={pause}
+      onMouseLeave={resume}
+    >
+      <header className="relative z-20 w-full shrink-0 bg-white px-4 py-4 sm:px-6 md:px-8 lg:h-[106px] lg:px-8 lg:py-0">
+        <div className="flex flex-wrap items-center justify-end gap-2 sm:gap-4 lg:absolute lg:right-8 lg:top-[18px]">
+          {utilityLinks.map((link, index) => (
+            <span key={link.label} className="flex items-center gap-2 sm:gap-4">
+              {index > 0 ? (
+                <span className="hidden h-2 w-px bg-[#f2f2f2] sm:block" aria-hidden="true" />
+              ) : null}
+              <UtilityLink link={link} />
+            </span>
+          ))}
+        </div>
+
+        <div className="mt-4 flex items-center justify-between gap-4 lg:absolute lg:bottom-[7px] lg:right-8 lg:mt-0 lg:justify-end lg:gap-7">
+          <nav aria-label="Primary" className="hidden overflow-x-auto lg:block">
+            <ul className="flex items-center gap-4 xl:gap-7">
+              {headerNavItems.map((item) => {
+                const itemClass = [
+                  "inline-flex items-center gap-1 text-base font-semibold leading-[26px] transition-opacity duration-200 ease-out hover:opacity-80",
+                  item.active ? "text-[#2a5caa]" : "text-[#0e274e]",
+                ].join(" ");
+
+                return (
+                  <li key={item.label} className="shrink-0">
+                    {item.href && !item.onClick ? (
+                      <a href={item.href} className={itemClass}>
+                        {item.label}
+                        {item.hasDropdown ? (
+                          <ChevronDownIcon className={item.active ? "text-[#2a5caa]" : "text-[#0e274e]"} />
+                        ) : null}
+                      </a>
+                    ) : (
+                      <button type="button" onClick={item.onClick} className={itemClass}>
+                        {item.label}
+                        {item.hasDropdown ? (
+                          <ChevronDownIcon className={item.active ? "text-[#2a5caa]" : "text-[#0e274e]"} />
+                        ) : null}
+                      </button>
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+          </nav>
+
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={onSearchClick}
+              aria-label="Search"
+              className="transition-opacity duration-200 ease-out hover:opacity-70 focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              <SearchIcon />
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setMobileMenuOpen(true);
+                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>
+        </div>
+
+        <AboutMegaMenu
+          isOpen={aboutMenuOpen}
+          onClose={() => setAboutMenuOpen(false)}
+          primaryLinks={aboutPrimaryLinks}
+          secondaryHeading={aboutSecondaryHeading}
+          secondaryLinks={aboutSecondaryLinks}
+        />
+
+        <div className="absolute left-8 right-8 top-1/2 hidden h-px -translate-y-px bg-[#f2f2f2] lg:block lg:left-[176px]" />
+
+        <div className="relative h-16 w-20 sm:h-[90px] sm:w-[98px] lg:absolute lg:left-8 lg:top-2">
+          <SafeImage
+            src={logoSrc}
+            alt={logoAlt}
+            fill
+            className="object-contain object-left"
+            sizes="98px"
+            priority
+          />
+        </div>
+      </header>
+
+      <MobileNavDrawer
+        isOpen={mobileMenuOpen}
+        onClose={() => setMobileMenuOpen(false)}
+        navItems={drawerNavItems}
+        accentColor="#2a5caa"
+      />
+
+      <div className="relative min-h-[60vh] w-full overflow-hidden md:min-h-[700px] lg:min-h-[594px]">
+        <div className="overflow-hidden">
+          <div
+            className="flex transition-transform duration-500 ease-out motion-reduce:transition-none"
+            style={{ transform: `translateX(-${activeSlide * 100}%)` }}
+          >
+            {slides.map((slide, index) => (
+              <div key={slide.headline || index} className="relative min-h-[60vh] w-full shrink-0 md:min-h-[700px] lg:min-h-[594px]">
+                <SafeImage
+                  src={slide.backgroundImage}
+                  alt={slide.backgroundAlt || logoAlt}
+                  fill
+                  className="object-cover object-center"
+                  sizes="100vw"
+                  priority={index === 0}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-[rgba(11,22,41,0.3)] from-[75%] to-[#0e274e]" />
+        <div className="pointer-events-none absolute left-4 top-1/4 h-32 w-48 bg-[#0e274e] blur-[300px] sm:left-[67px] sm:h-[200px] sm:w-[633px]" />
+
+        <div className="absolute inset-x-0 top-1/2 flex -translate-y-1/2 flex-col gap-6 px-4 sm:gap-8 sm:px-6 md:px-10 lg:left-[75px] lg:w-[649px] lg:px-0">
+          <div className="h-px w-24 bg-white sm:w-[132px]" aria-hidden="true" />
+          <h1 className="text-2xl font-semibold leading-tight text-white sm:text-3xl md:text-4xl lg:text-[44px] lg:leading-[56px]">
+            {currentSlide?.headline}
+          </h1>
+        </div>
+
+        <SlideIndicators
+          count={slideCount}
+          activeIndex={activeSlide}
+          onSelect={goTo}
+          variant="bar"
+          className="absolute bottom-5 left-4 sm:bottom-5 sm:left-6 md:left-[75px]"
+        />
+
+        <button
+          type="button"
+          onClick={handlePlayPause}
+          aria-label={isPlaying ? "Pause slideshow" : "Play slideshow"}
+          className="absolute bottom-5 right-4 flex size-12 items-center justify-center rounded-full bg-white/20 p-4 backdrop-blur-[6px] transition-colors duration-200 ease-out hover:bg-white/30 focus-visible:outline-2 focus-visible:outline-offset-2 sm:right-6 sm:size-[64px] sm:p-5 lg:right-10"
+        >
+          {isPlaying ? <PauseIcon /> : <PlayIcon />}
+        </button>
+      </div>
+    </section>
+  );
+}
+
+Menu03.propTypes = menu03PropTypes;
+
+export default Menu03;