@notionhive/menus 0.1.0

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

@@ -0,0 +1,113 @@
+import PropTypes from "prop-types";
+
+const navItemShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+  hasDropdown: PropTypes.bool,
+  active: PropTypes.bool,
+});
+
+const utilityLinkShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+  highlighted: PropTypes.bool,
+  hasDropdown: PropTypes.bool,
+});
+
+const aboutLinkShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+  variant: PropTypes.oneOf(["primary", "secondary"]),
+});
+
+export const menu03PropTypes = {
+  logoSrc: PropTypes.string,
+  logoAlt: PropTypes.string,
+  utilityLinks: PropTypes.arrayOf(utilityLinkShape),
+  navItems: PropTypes.arrayOf(navItemShape),
+  onSearchClick: PropTypes.func,
+  onMenuClick: PropTypes.func,
+  aboutMenuOpen: PropTypes.bool,
+  defaultAboutMenuOpen: PropTypes.bool,
+  onAboutMenuChange: PropTypes.func,
+  aboutPrimaryLinks: PropTypes.arrayOf(aboutLinkShape),
+  aboutSecondaryHeading: PropTypes.string,
+  aboutSecondaryLinks: PropTypes.arrayOf(aboutLinkShape),
+  slides: PropTypes.arrayOf(
+    PropTypes.shape({
+      backgroundImage: PropTypes.string,
+      backgroundAlt: PropTypes.string,
+      headline: PropTypes.string,
+    })
+  ),
+  slideCount: PropTypes.number,
+  activeSlide: PropTypes.number,
+  defaultPlaying: PropTypes.bool,
+  onPlayPauseClick: PropTypes.func,
+  onSlideChange: PropTypes.func,
+  className: PropTypes.string,
+};
+
+export const menu03DefaultProps = {
+  logoSrc: "/menus/menu03/logo.png",
+  logoAlt: "BRAC University",
+  utilityLinks: [
+    { label: "Apply Now", href: "#" },
+    { label: "Make a Donation", href: "#" },
+    { label: "Academic Dates", href: "#" },
+    { label: "Faculty and Staff", href: "#" },
+    { label: "Alumni", href: "#", highlighted: true, hasDropdown: true },
+    { label: "Students", href: "#" },
+  ],
+  navItems: [
+    { label: "About", hasDropdown: true, active: true },
+    { label: "Academics", href: "#", hasDropdown: true },
+    { label: "Admission", href: "#", hasDropdown: true },
+    { label: "Research", href: "#" },
+    { label: "Campus Life", href: "#", hasDropdown: true },
+    { label: "News", href: "#" },
+    { label: "Events", href: "#" },
+    { label: "More", href: "#", hasDropdown: true },
+  ],
+  defaultAboutMenuOpen: false,
+  aboutPrimaryLinks: [
+    { label: "About BRAC University", href: "#", variant: "primary" },
+    { label: "Mission and Vision", href: "#", variant: "primary" },
+    { label: "Affiliations", href: "#", variant: "primary" },
+    { label: "HR & Administrative Policies", href: "#", variant: "primary" },
+  ],
+  aboutSecondaryHeading: "Leadership and Management",
+  aboutSecondaryLinks: [
+    { label: "The Vice Chancellor", href: "#", variant: "secondary" },
+    { label: "Board of Trustees", href: "#", variant: "secondary" },
+    { label: "Syndicate", href: "#", variant: "secondary" },
+    { label: "Academic Council", href: "#", variant: "secondary" },
+    { label: "Administration", href: "#", variant: "secondary" },
+    { label: "Senior Management and Advisors", href: "#", variant: "secondary" },
+    { label: "Faculty", href: "#", variant: "secondary" },
+    { label: "Staffs", href: "#", variant: "secondary" },
+  ],
+  slides: [
+    {
+      backgroundImage: "/heroes/hero14/background.jpg",
+      backgroundAlt: "Aerial view of BRAC University campus",
+      headline: "From Bangladesh to the World",
+    },
+    {
+      backgroundImage: "/heroes/hero14/background.jpg",
+      backgroundAlt: "BRAC University campus",
+      headline: "Inspiring Excellence",
+    },
+    {
+      backgroundImage: "/heroes/hero14/background.jpg",
+      backgroundAlt: "BRAC University students",
+      headline: "Leading Through Innovation",
+    },
+  ],
+  slideCount: 3,
+  activeSlide: 0,
+  defaultPlaying: true,
+};

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

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

package/templates/components/organisms/Menu04/Menu04.jsx

@@ -0,0 +1,232 @@
+"use client";
+
+import { useState } from "react";
+import SafeImage from "../../atoms/SafeImage";
+import { FullScreenNavOverlay } from "../../molecules/FullScreenNavOverlay";
+import { menu04DefaultProps, menu04PropTypes } from "./Menu04.propTypes";
+
+function CloseIcon() {
+  return (
+    <span className="relative flex h-5 w-8 items-center justify-center" aria-hidden="true">
+      <span className="absolute h-0.5 w-9 rotate-[30deg] bg-white" />
+      <span className="absolute h-0.5 w-9 -rotate-[30deg] bg-white" />
+    </span>
+  );
+}
+
+function ExternalLinkIcon() {
+  return (
+    <svg
+      width="11"
+      height="11"
+      viewBox="0 0 11 11"
+      fill="none"
+      aria-hidden="true"
+      className="shrink-0"
+    >
+      <path
+        d="M2 9L9 2M9 2H4M9 2V7"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Menu04 — Verona full-screen dark navigation overlay with featured image,
+ * serif nav links, contact info, and social pills.
+ *
+ * @param {object} props - See Menu04.propTypes.js
+ */
+export function Menu04({
+  defaultOpen = menu04DefaultProps.defaultOpen,
+  logoSrc = menu04DefaultProps.logoSrc,
+  logoAlt = menu04DefaultProps.logoAlt,
+  featuredImage = menu04DefaultProps.featuredImage,
+  featuredImageAlt = menu04DefaultProps.featuredImageAlt,
+  navItems = menu04DefaultProps.navItems,
+  email = menu04DefaultProps.email,
+  phone = menu04DefaultProps.phone,
+  socialLinks = menu04DefaultProps.socialLinks,
+  closeLabel = menu04DefaultProps.closeLabel,
+  onClose,
+  className = "",
+}) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  const handleClose = () => {
+    setIsOpen(false);
+    onClose?.();
+  };
+
+  return (
+    <section
+      className={["relative min-h-[600px] w-full bg-[#1f1f1f] md:min-h-[700px]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-menu="menu04"
+    >
+      {!isOpen ? (
+        <div className="flex min-h-[600px] items-center justify-center px-4 md:min-h-[700px]">
+          <button
+            type="button"
+            onClick={() => setIsOpen(true)}
+            className="rounded-xl border border-white/20 px-8 py-4 font-medium text-white transition-colors duration-200 ease-out hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-offset-2"
+          >
+            Open Menu
+          </button>
+        </div>
+      ) : null}
+
+      <FullScreenNavOverlay
+        isOpen={isOpen}
+        onClose={handleClose}
+        slideFrom="right"
+        ariaLabel="Verona navigation"
+        panelClassName="bg-[#1f1f1f]"
+      >
+        <div className="relative flex min-h-full w-full flex-col overflow-y-auto">
+          {/* Vertical grid lines */}
+          <div
+            className="pointer-events-none absolute inset-0 hidden lg:block"
+            aria-hidden="true"
+          >
+            <div className="absolute bottom-0 left-[4%] top-0 w-px bg-white/10" />
+            <div className="absolute bottom-0 left-1/3 top-0 w-px bg-white/10" />
+            <div className="absolute bottom-0 left-2/3 top-0 w-px bg-white/10" />
+            <div className="absolute bottom-0 right-[4%] top-0 w-px bg-white/10" />
+          </div>
+
+          {/* Header */}
+          <div className="relative z-10 flex items-start justify-between px-4 pt-6 sm:px-6 md:px-10 lg:px-[60px] lg:pt-8">
+            <div className="relative h-8 w-[100px] sm:h-10 sm:w-[130px]">
+              <SafeImage
+                src={logoSrc}
+                alt={logoAlt}
+                fill
+                className="object-contain object-left"
+                sizes="130px"
+              />
+            </div>
+
+            <button
+              type="button"
+              onClick={handleClose}
+              className="flex items-center gap-3 rounded-xl px-4 py-3 text-white transition-opacity duration-200 ease-out hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 sm:gap-[18px] sm:px-[30px] sm:py-3"
+            >
+              <span className="text-base tracking-wide sm:text-[21px]">{closeLabel}</span>
+              <CloseIcon />
+            </button>
+          </div>
+
+          {/* Three-column content */}
+          <div className="relative z-10 mx-auto flex w-full max-w-[1800px] flex-1 flex-col gap-12 px-4 pb-12 pt-10 sm:px-6 md:px-10 lg:grid lg:grid-cols-3 lg:gap-0 lg:px-[60px] lg:pb-16 lg:pt-16">
+            {/* Featured image */}
+            <div className="relative aspect-[535/768] w-full overflow-hidden lg:aspect-auto lg:min-h-[500px] lg:max-w-[535px]">
+              <SafeImage
+                src={featuredImage}
+                alt={featuredImageAlt}
+                fill
+                className="object-cover object-center"
+                sizes="(max-width: 1024px) 100vw, 535px"
+                priority
+              />
+            </div>
+
+            {/* Nav links */}
+            <nav className="flex flex-col gap-6 sm:gap-8 lg:items-start lg:justify-center lg:px-8 xl:px-12">
+              {navItems.map((item) => {
+                const linkClass = [
+                  "font-serif text-4xl leading-none tracking-[-0.03em] transition-opacity duration-200 ease-out sm:text-5xl md:text-6xl lg:text-[72px] lg:tracking-[-2.16px]",
+                  item.isActive ? "text-white" : "text-white/60 hover:text-white/80",
+                ].join(" ");
+
+                if (item.href) {
+                  return (
+                    <a
+                      key={item.label}
+                      href={item.href}
+                      className={linkClass}
+                      aria-current={item.isActive ? "page" : undefined}
+                    >
+                      {item.label}
+                    </a>
+                  );
+                }
+
+                return (
+                  <button
+                    key={item.label}
+                    type="button"
+                    onClick={item.onClick}
+                    className={`${linkClass} text-left focus-visible:outline-2 focus-visible:outline-offset-2`}
+                    aria-current={item.isActive ? "page" : undefined}
+                  >
+                    {item.label}
+                  </button>
+                );
+              })}
+            </nav>
+
+            {/* Contact + social */}
+            <div className="flex flex-col justify-end gap-10 lg:gap-12 lg:pb-4 lg:pl-8 xl:pl-12">
+              <div className="flex flex-col gap-4 sm:gap-6">
+                {email ? (
+                  <a
+                    href={`mailto:${email}`}
+                    className="font-serif text-3xl leading-tight tracking-[-0.03em] text-white transition-opacity duration-200 ease-out hover:opacity-80 sm:text-4xl md:text-5xl lg:text-[56px] lg:tracking-[-1.68px]"
+                  >
+                    {email}
+                  </a>
+                ) : null}
+                {phone ? (
+                  <a
+                    href={`tel:${phone.replace(/\s/g, "")}`}
+                    className="text-base text-white/80 transition-opacity duration-200 ease-out hover:opacity-100"
+                  >
+                    {phone}
+                  </a>
+                ) : null}
+              </div>
+
+              <div className="flex flex-wrap gap-2">
+                {socialLinks.map((link) => {
+                  const pillClass =
+                    "inline-flex h-11 items-center gap-2.5 rounded-[88px] bg-white/[0.04] px-6 text-sm text-white transition-colors duration-200 ease-out hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-offset-2";
+
+                  if (link.href) {
+                    return (
+                      <a key={link.label} href={link.href} className={pillClass}>
+                        {link.label}
+                        <ExternalLinkIcon />
+                      </a>
+                    );
+                  }
+
+                  return (
+                    <button
+                      key={link.label}
+                      type="button"
+                      onClick={link.onClick}
+                      className={pillClass}
+                    >
+                      {link.label}
+                      <ExternalLinkIcon />
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </FullScreenNavOverlay>
+    </section>
+  );
+}
+
+Menu04.propTypes = menu04PropTypes;
+
+export default Menu04;

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

@@ -0,0 +1,53 @@
+import PropTypes from "prop-types";
+
+export const menu04PropTypes = {
+  /** Whether the overlay starts open (uncontrolled). */
+  defaultOpen: PropTypes.bool,
+  logoSrc: PropTypes.string,
+  logoAlt: PropTypes.string,
+  featuredImage: PropTypes.string,
+  featuredImageAlt: PropTypes.string,
+  navItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      href: PropTypes.string,
+      onClick: PropTypes.func,
+      isActive: PropTypes.bool,
+    }),
+  ),
+  email: PropTypes.string,
+  phone: PropTypes.string,
+  socialLinks: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      href: PropTypes.string,
+      onClick: PropTypes.func,
+    }),
+  ),
+  closeLabel: PropTypes.string,
+  onClose: PropTypes.func,
+  className: PropTypes.string,
+};
+
+export const menu04DefaultProps = {
+  defaultOpen: false,
+  logoSrc: "/menus/menu04/logo.png",
+  logoAlt: "Verona",
+  featuredImage: "/menus/menu04/featured.jpg",
+  featuredImageAlt: "Modern red architecture against a blue sky",
+  navItems: [
+    { label: "Home", href: "#", isActive: true },
+    { label: "Properties", href: "#" },
+    { label: "Projects", href: "#" },
+    { label: "About Us", href: "#" },
+    { label: "Contact Us", href: "#" },
+  ],
+  email: "hello@verona.com",
+  phone: "+31 (0)6 51897629",
+  socialLinks: [
+    { label: "Linkedin", href: "#" },
+    { label: "Instagram", href: "#" },
+    { label: "Dribbble", href: "#" },
+  ],
+  closeLabel: "CLOSE",
+};

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

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