@notionhive/menus 0.1.0

package/templates/components/organisms/Menu05/Menu05.jsx

@@ -0,0 +1,318 @@
+"use client";
+
+import { useState } from "react";
+import SafeImage from "../../atoms/SafeImage";
+import { MobileNavDrawer } from "../../molecules/MobileNavDrawer";
+import { menu05DefaultProps, menu05PropTypes } from "./Menu05.propTypes";
+
+function ChevronDownIcon({ className = "" }) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        d="M5 7.5L10 12.5L15 7.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ChevronRightIcon({ className = "" }) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        d="M7.5 5L12.5 10L7.5 15"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function PhoneIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+      <path
+        d="M12.5 9.8V11.3C12.5 11.74 12.16 12.1 11.73 12.1C6.55 12.1 2.4 7.95 2.4 2.77C2.4 2.34 2.76 2 3.2 2H4.7C5.05 2 5.35 2.24 5.42 2.58L5.78 4.48C5.84 4.78 5.74 5.09 5.52 5.29L4.62 6.19C5.48 7.78 6.72 9.02 8.31 9.88L9.21 8.98C9.41 8.76 9.72 8.66 10.02 8.72L11.92 9.08C12.26 9.15 12.5 9.45 12.5 9.8Z"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function HamburgerIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path d="M4 7H20M4 12H20M4 17H20" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+/**
+ * Menu05 — Oxford College header with utility bar, hero section,
+ * and About Oxford dropdown panel.
+ *
+ * @param {object} props - See Menu05.propTypes.js
+ */
+export function Menu05({
+  utilityLinks = menu05DefaultProps.utilityLinks,
+  phone = menu05DefaultProps.phone,
+  logoSrc = menu05DefaultProps.logoSrc,
+  logoAlt = menu05DefaultProps.logoAlt,
+  navItems = menu05DefaultProps.navItems,
+  ctaText = menu05DefaultProps.ctaText,
+  onCtaClick,
+  defaultDropdownOpen = menu05DefaultProps.defaultDropdownOpen,
+  dropdownLinks = menu05DefaultProps.dropdownLinks,
+  heroImage = menu05DefaultProps.heroImage,
+  heroImageAlt = menu05DefaultProps.heroImageAlt,
+  headline = menu05DefaultProps.headline,
+  description = menu05DefaultProps.description,
+  primaryCtaText = menu05DefaultProps.primaryCtaText,
+  secondaryCtaText = menu05DefaultProps.secondaryCtaText,
+  onPrimaryCtaClick,
+  onSecondaryCtaClick,
+  onMenuClick,
+  className = "",
+}) {
+  const [dropdownOpen, setDropdownOpen] = useState(defaultDropdownOpen);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const drawerItems = [
+    ...navItems.map((item) => ({ label: item.label, href: item.href, onClick: item.onClick })),
+    ...dropdownLinks.map((item) => ({ label: item.label, href: item.href, onClick: item.onClick })),
+  ];
+
+  return (
+    <section
+      className={["relative w-full overflow-hidden bg-[#f7f7f7]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-menu="menu05"
+    >
+      {/* Utility bar */}
+      <div className="relative z-30 bg-[#0f1e40] px-4 py-3 sm:px-6 md:px-10 lg:px-[120px]">
+        <div className="ml-auto flex max-w-full flex-wrap items-center justify-end gap-2 text-sm text-white sm:gap-2.5">
+          {utilityLinks.map((link, index) => (
+            <span key={link.label} className="flex items-center gap-2.5">
+              {index > 0 ? (
+                <span className="text-white/40" aria-hidden="true">
+                  |
+                </span>
+              ) : null}
+              {link.href ? (
+                <a
+                  href={link.href}
+                  className="whitespace-nowrap transition-opacity duration-200 ease-out hover:opacity-80"
+                >
+                  {link.label}
+                </a>
+              ) : (
+                <button
+                  type="button"
+                  onClick={link.onClick}
+                  className="whitespace-nowrap transition-opacity duration-200 ease-out hover:opacity-80"
+                >
+                  {link.label}
+                </button>
+              )}
+            </span>
+          ))}
+          <span className="hidden text-white/40 sm:inline" aria-hidden="true">
+            |
+          </span>
+          <a
+            href={`tel:${phone.replace(/[^0-9+]/g, "")}`}
+            className="inline-flex items-center gap-1 transition-opacity duration-200 ease-out hover:opacity-80"
+          >
+            <PhoneIcon />
+            <span className="whitespace-nowrap">{phone}</span>
+          </a>
+        </div>
+      </div>
+
+      {/* Main header */}
+      <header className="relative z-30 bg-white px-4 py-3 sm:px-6 md:px-10 lg:px-[120px] lg:py-2.5">
+        <div className="mx-auto flex w-full max-w-[1680px] items-center justify-between gap-4">
+          <div className="relative h-10 w-[200px] shrink-0 sm:h-[53px] sm:w-[280px] lg:w-[337px]">
+            <SafeImage
+              src={logoSrc}
+              alt={logoAlt}
+              fill
+              className="object-contain object-left"
+              sizes="337px"
+              priority
+            />
+          </div>
+
+          <div className="hidden items-center gap-6 lg:flex">
+            <nav className="flex items-center gap-[34px]">
+              {navItems.map((item) => {
+                const isAbout = item.label === "About Oxford";
+
+                return (
+                  <div key={item.label} className="relative">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        if (isAbout) setDropdownOpen((open) => !open);
+                        item.onClick?.();
+                      }}
+                      className={[
+                        "inline-flex items-center gap-1 text-lg font-medium text-[#0f1e40] transition-colors duration-200 ease-out hover:text-[#0f1e40]/70",
+                        isAbout && dropdownOpen ? "text-[#0f1e40]" : "",
+                      ].join(" ")}
+                      aria-expanded={isAbout ? dropdownOpen : undefined}
+                    >
+                      {item.label}
+                      {item.hasDropdown ? <ChevronDownIcon /> : null}
+                    </button>
+
+                    {isAbout && dropdownOpen ? (
+                      <div className="absolute left-0 top-full z-40 mt-3 w-[min(395px,calc(100vw-2rem))] border-t-[3px] border-[#eaaf51] bg-white p-5 shadow-lg animate-fade-in">
+                        <ul className="flex flex-col gap-5">
+                          {dropdownLinks.map((link, index) => (
+                            <li key={link.label}>
+                              {index > 0 ? (
+                                <div className="mb-5 h-px bg-neutral-200" aria-hidden="true" />
+                              ) : null}
+                              <div className="flex items-center justify-between gap-3">
+                                {link.href ? (
+                                  <a
+                                    href={link.href}
+                                    className="text-sm text-[#0f1e40] transition-colors duration-200 ease-out hover:text-[#0f1e40]/70"
+                                  >
+                                    {link.label}
+                                  </a>
+                                ) : (
+                                  <button
+                                    type="button"
+                                    onClick={link.onClick}
+                                    className="text-left text-sm text-[#0f1e40] transition-colors duration-200 ease-out hover:text-[#0f1e40]/70"
+                                  >
+                                    {link.label}
+                                  </button>
+                                )}
+                                <ChevronRightIcon className="shrink-0 text-neutral-400" />
+                              </div>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    ) : null}
+                  </div>
+                );
+              })}
+            </nav>
+
+            <button
+              type="button"
+              onClick={onCtaClick}
+              className="shrink-0 rounded-[99px] bg-[#eaaf51] px-8 py-[18px] text-lg font-medium tracking-[-0.02em] text-[#0f1e40] transition-colors duration-200 ease-out hover:bg-[#e0a647] focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              {ctaText}
+            </button>
+          </div>
+
+          <div className="flex items-center gap-3 lg:hidden">
+            <button
+              type="button"
+              onClick={onCtaClick}
+              className="rounded-[99px] bg-[#eaaf51] px-4 py-2.5 text-sm font-medium text-[#0f1e40] transition-colors duration-200 ease-out hover:bg-[#e0a647]"
+            >
+              {ctaText}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setMenuOpen(true);
+                onMenuClick?.();
+              }}
+              aria-label="Open menu"
+              className="rounded-lg p-2 text-[#0f1e40] transition-colors duration-200 ease-out hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              <HamburgerIcon />
+            </button>
+          </div>
+        </div>
+      </header>
+
+      <MobileNavDrawer
+        isOpen={menuOpen}
+        onClose={() => setMenuOpen(false)}
+        navItems={drawerItems}
+        accentColor="#eaaf51"
+      />
+
+      {/* Hero */}
+      <div className="relative min-h-[60vh] w-full overflow-hidden md:min-h-[70vh] lg:min-h-[870px]">
+        <SafeImage
+          src={heroImage}
+          alt={heroImageAlt}
+          fill
+          className="object-cover object-center"
+          sizes="100vw"
+          priority
+        />
+        <div
+          className="absolute inset-0"
+          style={{
+            backgroundImage:
+              "linear-gradient(-74.6deg, rgb(15, 30, 64) 24.45%, rgba(15, 30, 64, 0) 98.7%)",
+          }}
+          aria-hidden="true"
+        />
+
+        <div className="relative z-10 mx-auto flex max-w-[711px] flex-col gap-6 px-4 py-16 sm:px-6 sm:py-20 md:px-10 lg:px-[120px] lg:py-24">
+          <h1 className="text-3xl leading-tight tracking-[-0.04em] text-white sm:text-4xl md:text-5xl lg:text-[56px] lg:tracking-[-2.24px]">
+            {headline}
+          </h1>
+          <p className="max-w-xl text-base leading-relaxed tracking-[0.01em] text-white/80 sm:text-lg">
+            {description}
+          </p>
+          <div className="flex flex-col gap-3 sm:flex-row sm:gap-2">
+            <button
+              type="button"
+              onClick={onPrimaryCtaClick}
+              className="rounded-full bg-[#eaaf51] px-8 py-[18px] text-lg font-medium tracking-[-0.02em] text-[#0f1e40] transition-colors duration-200 ease-out hover:bg-[#e0a647] focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              {primaryCtaText}
+            </button>
+            <button
+              type="button"
+              onClick={onSecondaryCtaClick}
+              className="rounded-full bg-white px-8 py-[18px] text-lg font-medium tracking-[-0.02em] text-[#0f1e40] transition-colors duration-200 ease-out hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              {secondaryCtaText}
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Menu05.propTypes = menu05PropTypes;
+
+export default Menu05;

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

@@ -0,0 +1,79 @@
+import PropTypes from "prop-types";
+
+export const menu05PropTypes = {
+  utilityLinks: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      href: PropTypes.string,
+      onClick: PropTypes.func,
+    }),
+  ),
+  phone: PropTypes.string,
+  logoSrc: PropTypes.string,
+  logoAlt: PropTypes.string,
+  navItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      href: PropTypes.string,
+      onClick: PropTypes.func,
+      hasDropdown: PropTypes.bool,
+    }),
+  ),
+  ctaText: PropTypes.string,
+  onCtaClick: PropTypes.func,
+  /** Whether the About Oxford dropdown starts open. */
+  defaultDropdownOpen: PropTypes.bool,
+  dropdownLinks: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      href: PropTypes.string,
+      onClick: PropTypes.func,
+    }),
+  ),
+  heroImage: PropTypes.string,
+  heroImageAlt: PropTypes.string,
+  headline: PropTypes.string,
+  description: PropTypes.string,
+  primaryCtaText: PropTypes.string,
+  secondaryCtaText: PropTypes.string,
+  onPrimaryCtaClick: PropTypes.func,
+  onSecondaryCtaClick: PropTypes.func,
+  onMenuClick: PropTypes.func,
+  className: PropTypes.string,
+};
+
+export const menu05DefaultProps = {
+  utilityLinks: [
+    { label: "Take career quiz", href: "#" },
+    { label: "Student login", href: "#" },
+  ],
+  phone: "1-866-918-0657",
+  logoSrc: "/menus/menu05/logo.png",
+  logoAlt: "Oxford College of Arts, Business and Technology",
+  navItems: [
+    { label: "Programs", href: "#", hasDropdown: true },
+    { label: "Admissions", href: "#", hasDropdown: true },
+    { label: "About Oxford", href: "#", hasDropdown: true },
+    { label: "Student Experience", href: "#", hasDropdown: true },
+    { label: "Financial Aid", href: "#", hasDropdown: true },
+  ],
+  ctaText: "Request Info",
+  defaultDropdownOpen: false,
+  dropdownLinks: [
+    { label: "About Oxford", href: "#" },
+    { label: "Mission, Vision, Values", href: "#" },
+    { label: "President's Message", href: "#" },
+    { label: "Accreditations and Affiliations", href: "#" },
+    { label: "Join Our Team", href: "#" },
+    { label: "Agent", href: "#" },
+    { label: "Land Acknowledgement", href: "#" },
+    { label: "Policies", href: "#" },
+  ],
+  heroImage: "/menus/menu05/hero-bg.jpg",
+  heroImageAlt: "Students sitting together on campus",
+  headline: "Graduate job-ready. Start your career sooner.",
+  description:
+    "Hands-on diploma programs, expert instructors, financial aid options, and career-focused training across 6 campuses.",
+  primaryCtaText: "Explore Programs",
+  secondaryCtaText: "Speak to Admissions",
+};

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

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

package/templates/components/organisms/Menu06/Menu06.jsx

@@ -0,0 +1,241 @@
+"use client";
+
+import { useState } from "react";
+import SafeImage from "../../atoms/SafeImage";
+import { FullScreenNavOverlay } from "../../molecules/FullScreenNavOverlay";
+import { menu06DefaultProps, menu06PropTypes } from "./Menu06.propTypes";
+
+function CloseIcon() {
+  return (
+    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" aria-hidden="true">
+      <path
+        d="M11 11L25 25M25 11L11 25"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function MenuDashIcon() {
+  return (
+    <span className="inline-block h-[9px] w-3.5 rounded-sm bg-white" aria-hidden="true" />
+  );
+}
+
+/**
+ * Menu06 — Sandbay resort split-panel menu overlay with pool image
+ * and burgundy navigation panel sliding in from the right.
+ *
+ * @param {object} props - See Menu06.propTypes.js
+ */
+export function Menu06({
+  defaultOpen = menu06DefaultProps.defaultOpen,
+  showHeroPeek = menu06DefaultProps.showHeroPeek,
+  brandName = menu06DefaultProps.brandName,
+  peekHeadline = menu06DefaultProps.peekHeadline,
+  panelImage = menu06DefaultProps.panelImage,
+  panelImageAlt = menu06DefaultProps.panelImageAlt,
+  navItems = menu06DefaultProps.navItems,
+  email = menu06DefaultProps.email,
+  phone = menu06DefaultProps.phone,
+  socialLinks = menu06DefaultProps.socialLinks,
+  menuLabel = menu06DefaultProps.menuLabel,
+  onClose,
+  className = "",
+}) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  const handleClose = () => {
+    setIsOpen(false);
+    onClose?.();
+  };
+
+  return (
+    <section
+      className={["relative min-h-[600px] w-full overflow-hidden bg-[#fff8f3] md:min-h-[700px]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-menu="menu06"
+    >
+      {showHeroPeek ? (
+        <div
+          className="relative flex min-h-[600px] flex-col px-4 pb-10 pt-6 sm:px-6 md:min-h-[700px] md:px-10 lg:px-[60px] lg:pt-9"
+          aria-hidden={isOpen}
+        >
+          <div className="mx-auto flex w-full max-w-[1800px] items-center justify-between">
+            <p className="font-serif text-3xl leading-none tracking-[-0.04em] text-[#680015] sm:text-4xl md:text-[48px]">
+              {brandName}
+            </p>
+            {!isOpen ? (
+              <button
+                type="button"
+                onClick={() => setIsOpen(true)}
+                className="rounded-[120px] border border-[#680015]/20 px-6 py-3 text-base text-[#641002] transition-colors duration-200 ease-out hover:bg-white focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                Open Menu
+              </button>
+            ) : null}
+          </div>
+
+          <h1 className="mx-auto mt-10 max-w-[1282px] text-center font-serif text-[clamp(2rem,8vw,8rem)] leading-[0.75] tracking-[-0.04em] text-[#410000] sm:mt-16 lg:mt-[115px]">
+            {peekHeadline}
+          </h1>
+        </div>
+      ) : null}
+
+      {!showHeroPeek && !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-[120px] bg-[#680015] px-8 py-4 text-white transition-colors duration-200 ease-out hover:bg-[#5a0012] focus-visible:outline-2 focus-visible:outline-offset-2"
+          >
+            Open Menu
+          </button>
+        </div>
+      ) : null}
+
+      <FullScreenNavOverlay
+        isOpen={isOpen}
+        onClose={handleClose}
+        slideFrom="right"
+        showBackdrop={showHeroPeek}
+        backdropClassName="bg-black/30"
+        ariaLabel="Sandbay navigation"
+        panelClassName="shadow-2xl"
+      >
+        <div className="flex min-h-full w-full flex-col md:flex-row">
+          {/* Left image panel — 40% */}
+          <div className="relative h-56 w-full shrink-0 sm:h-72 md:h-auto md:min-h-full md:w-[40%]">
+            <SafeImage
+              src={panelImage}
+              alt={panelImageAlt}
+              fill
+              className="object-cover object-center"
+              sizes="(max-width: 768px) 100vw, 40vw"
+              priority
+            />
+          </div>
+
+          {/* Right burgundy panel — 60% */}
+          <div className="flex min-h-0 flex-1 flex-col bg-[#680015] px-6 py-8 sm:px-10 sm:py-10 md:w-[60%] md:px-[60px] md:py-[60px] lg:px-[100px]">
+            <div className="flex flex-1 flex-col gap-12 md:gap-[60px] lg:gap-[140px]">
+              <div className="flex flex-col gap-10 md:gap-[60px]">
+                <div className="flex items-center justify-between gap-4">
+                  <div className="flex items-center gap-1.5 uppercase tracking-wide text-white">
+                    <MenuDashIcon />
+                    <span className="text-base">{menuLabel}</span>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={handleClose}
+                    aria-label="Close menu"
+                    className="rounded-[3px] border border-white/20 p-1 text-white transition-colors duration-200 ease-out hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-offset-2"
+                  >
+                    <CloseIcon />
+                  </button>
+                </div>
+
+                <nav className="flex flex-col gap-6 md:gap-8">
+                  {navItems.map((item, index) => {
+                    const linkClass = [
+                      "text-left font-normal leading-[0.75] tracking-[-0.04em] transition-opacity duration-200 ease-out",
+                      "text-3xl sm:text-4xl md:text-[48px]",
+                      item.isActive
+                        ? "text-white"
+                        : "text-white/80 hover:text-white",
+                    ].join(" ");
+
+                    const content = item.href ? (
+                      <a
+                        href={item.href}
+                        className={linkClass}
+                        aria-current={item.isActive ? "page" : undefined}
+                      >
+                        {item.label}
+                      </a>
+                    ) : (
+                      <button
+                        type="button"
+                        onClick={item.onClick}
+                        className={`${linkClass} focus-visible:outline-2 focus-visible:outline-offset-2`}
+                        aria-current={item.isActive ? "page" : undefined}
+                      >
+                        {item.label}
+                      </button>
+                    );
+
+                    return (
+                      <div key={item.label} className="flex flex-col gap-6 md:gap-8">
+                        {content}
+                        {index < navItems.length - 1 ? (
+                          <div className="h-px w-full bg-white/20" aria-hidden="true" />
+                        ) : null}
+                      </div>
+                    );
+                  })}
+                </nav>
+              </div>
+
+              <div className="mt-auto flex flex-col gap-10 md:gap-[60px]">
+                <div className="flex flex-col gap-6">
+                  <p className="text-base uppercase text-white">Let&apos;s Talk</p>
+                  <div className="flex flex-col gap-4">
+                    {email ? (
+                      <a
+                        href={`mailto:${email}`}
+                        className="text-2xl leading-tight tracking-[-0.02em] text-white/80 transition-opacity duration-200 ease-out hover:text-white sm:text-3xl md:text-[48px]"
+                      >
+                        {email}
+                      </a>
+                    ) : null}
+                    {phone ? (
+                      <a
+                        href={`tel:${phone.replace(/\s/g, "")}`}
+                        className="text-lg tracking-[-0.02em] text-white/70 transition-opacity duration-200 ease-out hover:text-white md:text-2xl"
+                      >
+                        {phone}
+                      </a>
+                    ) : null}
+                  </div>
+                </div>
+
+                <div className="flex flex-col gap-4">
+                  <p className="text-base uppercase text-white">Social</p>
+                  <div className="flex flex-wrap gap-6 text-lg tracking-[-0.02em] text-white/70 md:gap-8 md:text-2xl">
+                    {socialLinks.map((link) =>
+                      link.href ? (
+                        <a
+                          key={link.label}
+                          href={link.href}
+                          className="transition-opacity duration-200 ease-out hover:text-white"
+                        >
+                          {link.label}
+                        </a>
+                      ) : (
+                        <button
+                          key={link.label}
+                          type="button"
+                          onClick={link.onClick}
+                          className="transition-opacity duration-200 ease-out hover:text-white"
+                        >
+                          {link.label}
+                        </button>
+                      ),
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </FullScreenNavOverlay>
+    </section>
+  );
+}
+
+Menu06.propTypes = menu06PropTypes;
+
+export default Menu06;