@notionhive/footers 0.1.0

package/templates/components/organisms/Footer10/Footer10.jsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { useState } from "react";
+import { SafeImage } from "../../atoms/SafeImage";
+import {
+  footer10DefaultProps,
+  footer10PropTypes,
+} from "./Footer10.propTypes";
+
+function ArrowUpRightIcon({ className = "", dark = false }) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M5 15L15 5M15 5H7M15 5V13"
+        stroke={dark ? "#1f1f1f" : "currentColor"}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Footer10 — Verona dark contact footer with masked brand wordmark.
+ * Figma node 32:20616 at 1920px.
+ */
+export function Footer10({
+  email = footer10DefaultProps.email,
+  addressLines = footer10DefaultProps.addressLines,
+  phone = footer10DefaultProps.phone,
+  socialLinks = footer10DefaultProps.socialLinks,
+  formData: controlledForm,
+  onFieldChange,
+  onSubmit,
+  submitLabel = footer10DefaultProps.submitLabel,
+  brandName = footer10DefaultProps.brandName,
+  className = "",
+}) {
+  const [internalForm, setInternalForm] = useState({
+    name: "",
+    email: "",
+    message: "",
+  });
+  const form = controlledForm ?? internalForm;
+
+  const setField = (field, value) => {
+    onFieldChange?.(field, value);
+    if (!controlledForm) {
+      setInternalForm((prev) => ({ ...prev, [field]: value }));
+    }
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    onSubmit?.(form);
+  };
+
+  return (
+    <footer
+      className={["relative w-full overflow-hidden bg-[#1f1f1f]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer10"
+    >
+      <div className="pointer-events-none absolute inset-y-0 left-10 hidden w-px bg-white/10 xl:block" aria-hidden="true" />
+      <div className="pointer-events-none absolute inset-y-0 left-[615px] hidden w-px bg-white/10 xl:block" aria-hidden="true" />
+      <div className="pointer-events-none absolute inset-y-0 right-10 hidden w-px bg-white/10 xl:block" aria-hidden="true" />
+
+      <div className="relative mx-auto w-full max-w-[1920px] px-4 py-12 sm:px-6 md:px-10 lg:px-[60px] lg:py-16 xl:min-h-[1080px] xl:pb-0 xl:pt-40">
+        <div className="grid grid-cols-1 gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,913px)] lg:gap-x-16 xl:gap-x-[32px]">
+          <div className="flex flex-col gap-10 xl:max-w-[535px]">
+            <a
+              href={`mailto:${email}`}
+              className="font-serif text-4xl font-light leading-none tracking-[-0.03em] text-white transition-opacity duration-200 ease-out hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 sm:text-5xl xl:text-[72px] xl:tracking-[-2.16px]"
+            >
+              {email}
+            </a>
+
+            <div className="flex flex-col gap-6 text-base leading-[1.4] text-white">
+              <div className="opacity-80">
+                {addressLines.map((line) => (
+                  <p key={line}>{line}</p>
+                ))}
+              </div>
+              <a
+                href={`tel:${phone.replace(/[^\d+]/g, "")}`}
+                className="opacity-80 transition-colors duration-200 ease-out hover:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                {phone}
+              </a>
+            </div>
+
+            <div className="flex flex-wrap gap-0">
+              {socialLinks.map((social) => (
+                <a
+                  key={social.label}
+                  href={social.href ?? "#"}
+                  className="inline-flex h-11 items-center gap-2.5 rounded-full bg-white/[0.04] px-6 py-3.5 text-sm leading-none text-white transition-colors duration-200 ease-out hover:bg-white/[0.08] focus-visible:outline-2 focus-visible:outline-offset-2"
+                >
+                  {social.label}
+                  <ArrowUpRightIcon className="size-3" />
+                </a>
+              ))}
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit} className="flex flex-col gap-10 xl:pt-[35px]">
+            <div className="flex flex-col gap-[60px]">
+              {[
+                { field: "name", label: "Name" },
+                { field: "email", label: "Email", type: "email" },
+                { field: "message", label: "Message" },
+              ].map(({ field, label, type = "text" }) => (
+                <label key={field} className="flex flex-col border-b border-white/10 pb-[30px]">
+                  <span className="text-xl leading-[1.4] text-white/60">{label}</span>
+                  <input
+                    type={type}
+                    value={form[field]}
+                    onChange={(e) => setField(field, e.target.value)}
+                    className="mt-2 bg-transparent text-base text-white outline-none placeholder:text-white/40"
+                  />
+                </label>
+              ))}
+            </div>
+
+            <button
+              type="submit"
+              className="inline-flex h-14 w-max items-center gap-2.5 rounded-full bg-white px-8 py-4 text-xl font-medium leading-none text-[#1f1f1f] transition-opacity duration-200 ease-out hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              {submitLabel}
+              <ArrowUpRightIcon className="size-5" dark />
+            </button>
+          </form>
+        </div>
+
+        <div className="relative mt-16 overflow-hidden sm:mt-24 xl:mt-[55px]">
+          <div
+            className="relative mx-auto flex min-h-[120px] w-full max-w-[1691px] items-end justify-center sm:min-h-[200px] xl:min-h-[429px]"
+            style={{
+              WebkitMaskImage: "url(/footer/footer10/hero-mask.svg)",
+              maskImage: "url(/footer/footer10/hero-mask.svg)",
+              WebkitMaskSize: "100% auto",
+              maskSize: "100% auto",
+              WebkitMaskRepeat: "no-repeat",
+              maskRepeat: "no-repeat",
+              WebkitMaskPosition: "center bottom",
+              maskPosition: "center bottom",
+            }}
+          >
+            <SafeImage
+              src="/footer/footer10/hero-image.png"
+              alt=""
+              fill
+              className="object-cover object-center"
+            />
+            <p
+              className="pointer-events-none absolute inset-0 flex items-end justify-center pb-0 font-serif text-[clamp(4rem,31vw,600px)] font-light leading-none tracking-[-0.03em] text-white/20"
+              aria-hidden="true"
+            >
+              {brandName}
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer10.propTypes = footer10PropTypes;
+
+export default Footer10;

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

@@ -0,0 +1,38 @@
+import PropTypes from "prop-types";
+
+const socialShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+});
+
+export const footer10PropTypes = {
+  email: PropTypes.string,
+  addressLines: PropTypes.arrayOf(PropTypes.string),
+  phone: PropTypes.string,
+  socialLinks: PropTypes.arrayOf(socialShape),
+  formData: PropTypes.shape({
+    name: PropTypes.string,
+    email: PropTypes.string,
+    message: PropTypes.string,
+  }),
+  onFieldChange: PropTypes.func,
+  onSubmit: PropTypes.func,
+  submitLabel: PropTypes.string,
+  brandName: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export const footer10DefaultProps = {
+  email: "hello@verona.com",
+  addressLines: ["De Meente 20, 2A", "8121 EV Olst"],
+  phone: "+31 (0)6 51897629",
+  socialLinks: [
+    { label: "Linkdin", href: "#" },
+    { label: "Instagram", href: "#" },
+    { label: "Dribbble", href: "#" },
+  ],
+  formData: undefined,
+  submitLabel: "Send Message",
+  brandName: "Verona",
+  className: "",
+};

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

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

package/templates/components/organisms/Footer11/Footer11.jsx

@@ -0,0 +1,107 @@
+"use client";
+
+import {
+  footer11DefaultProps,
+  footer11PropTypes,
+} from "./Footer11.propTypes";
+
+function LinkColumn({ column }) {
+  return (
+    <div className="flex min-w-0 flex-col gap-[30px]">
+      <p className="font-serif text-lg font-semibold leading-[1.1] text-black/90">
+        {column.title}
+      </p>
+      <ul className="flex flex-col gap-1.5">
+        {column.links.map((link) => (
+          <li key={link.label}>
+            <a
+              href={link.href ?? "#"}
+              className="text-lg leading-[1.2] text-black/80 transition-colors duration-200 ease-out hover:text-[#3919b8] focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * Footer11 — CIIRC light footer with brand + link columns.
+ * Figma node 32:20857 at 1920px.
+ */
+export function Footer11({
+  brandName = footer11DefaultProps.brandName,
+  tagline = footer11DefaultProps.tagline,
+  copyright = footer11DefaultProps.copyright,
+  linkColumns = footer11DefaultProps.linkColumns,
+  siteByLabel = footer11DefaultProps.siteByLabel,
+  siteByHref = footer11DefaultProps.siteByHref,
+  privacyHref = footer11DefaultProps.privacyHref,
+  termsHref = footer11DefaultProps.termsHref,
+  className = "",
+}) {
+  return (
+    <footer
+      className={["relative w-full overflow-hidden bg-[#e7f0f0]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer11"
+    >
+      <div className="mx-auto w-full max-w-[1920px] px-4 py-12 sm:px-6 md:px-10 lg:px-20 xl:px-[140px] xl:py-[120px]">
+        <div className="flex flex-col gap-12 lg:flex-row lg:items-start lg:justify-between">
+          <div className="flex max-w-[345px] flex-col">
+            <p className="text-5xl font-black leading-none text-[#3919b8] sm:text-7xl xl:text-[100px]">
+              {brandName}
+            </p>
+            <div className="mt-[39px] flex flex-col gap-5">
+              <p className="text-lg leading-[1.2] text-black/80">{tagline}</p>
+              <p className="font-serif text-2xl font-semibold leading-[1.1] text-black/90 sm:text-[28px]">
+                {copyright}
+              </p>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 gap-10 sm:grid-cols-3 sm:gap-[60px]">
+            {linkColumns.map((column) => (
+              <LinkColumn key={column.title} column={column} />
+            ))}
+          </div>
+        </div>
+
+        <div className="mt-[72px] border-t border-[#3919b8]/30 pt-[30px]">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <p className="text-lg leading-[1.2] text-black/80">
+              Site by{" "}
+              <a
+                href={siteByHref ?? "#"}
+                className="text-[#3919b8] underline transition-colors duration-200 ease-out hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                {siteByLabel}
+              </a>
+            </p>
+            <div className="flex flex-wrap gap-[30px] text-lg leading-[1.2] text-black/80">
+              <a
+                href={privacyHref ?? "#"}
+                className="transition-colors duration-200 ease-out hover:text-[#3919b8] focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                Privacy Policy
+              </a>
+              <a
+                href={termsHref ?? "#"}
+                className="transition-colors duration-200 ease-out hover:text-[#3919b8] focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                Terms & Conditions
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer11.propTypes = footer11PropTypes;
+
+export default Footer11;

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

@@ -0,0 +1,64 @@
+import PropTypes from "prop-types";
+
+const linkShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+});
+
+const columnShape = PropTypes.shape({
+  title: PropTypes.string.isRequired,
+  links: PropTypes.arrayOf(linkShape),
+});
+
+export const footer11PropTypes = {
+  brandName: PropTypes.string,
+  tagline: PropTypes.string,
+  copyright: PropTypes.string,
+  linkColumns: PropTypes.arrayOf(columnShape),
+  siteByLabel: PropTypes.string,
+  siteByHref: PropTypes.string,
+  privacyHref: PropTypes.string,
+  termsHref: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export const footer11DefaultProps = {
+  brandName: "CIIRC",
+  tagline: "Working together for systems change",
+  copyright: "© 2026 CIIRC",
+  linkColumns: [
+    {
+      title: "Explore",
+      links: [
+        { label: "About CIIRC", href: "#" },
+        { label: "How CIIRC Works", href: "#" },
+        { label: "Focus Areas", href: "#" },
+        { label: "Impact & Learning", href: "#" },
+        { label: "News & Insights", href: "#" },
+        { label: "Resources", href: "#" },
+      ],
+    },
+    {
+      title: "Network",
+      links: [
+        { label: "Partners & Members", href: "#" },
+        { label: "Get Involved", href: "#" },
+      ],
+    },
+    {
+      title: "Socials",
+      links: [
+        { label: "X (Twitter)", href: "#" },
+        { label: "LinkedIn", href: "#" },
+        { label: "Facebook", href: "#" },
+        { label: "Instagram", href: "#" },
+        { label: "YouTube", href: "#" },
+      ],
+    },
+  ],
+  siteByLabel: "Notionhive",
+  siteByHref: "#",
+  privacyHref: "#",
+  termsHref: "#",
+  className: "",
+};

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

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

package/templates/components/organisms/Footer12/Footer12.jsx

@@ -0,0 +1,122 @@
+"use client";
+
+import SafeImage from "../../atoms/SafeImage";
+import {
+  footer12DefaultProps,
+  footer12PropTypes,
+} from "./Footer12.propTypes";
+
+function LinkColumn({ column }) {
+  return (
+    <div className="flex min-w-0 flex-col gap-5">
+      <p className="text-base leading-[26px] text-white tracking-[0.08px]">{column.title}</p>
+      <ul className="flex flex-col gap-3 opacity-80">
+        {column.links.map((link) => (
+          <li key={link.label}>
+            <a
+              href={link.href ?? "#"}
+              className="font-mono text-sm uppercase leading-[34px] tracking-[-0.14px] text-white transition-colors duration-200 ease-out hover:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * Footer12 — Connectors Program dark multi-column footer with donate CTA.
+ * Figma node 32:20890 at 1920px.
+ */
+export function Footer12({
+  logoIconSrc = footer12DefaultProps.logoIconSrc,
+  brandName = footer12DefaultProps.brandName,
+  ctaText = footer12DefaultProps.ctaText,
+  donateLabel = footer12DefaultProps.donateLabel,
+  donateHref = footer12DefaultProps.donateHref,
+  onDonateClick,
+  linkColumns = footer12DefaultProps.linkColumns,
+  copyright = footer12DefaultProps.copyright,
+  legalLinks = footer12DefaultProps.legalLinks,
+  partnerLogoSrc = footer12DefaultProps.partnerLogoSrc,
+  partnerLogoAlt = footer12DefaultProps.partnerLogoAlt,
+  className = "",
+}) {
+  return (
+    <footer
+      className={["relative w-full overflow-hidden bg-[#0d0a08]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer12"
+    >
+      <div className="mx-auto flex w-full max-w-[1920px] flex-col gap-8 px-4 pt-12 sm:px-6 md:px-10 lg:gap-10 lg:px-20 lg:pt-20 xl:px-[240px]">
+        <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex items-center gap-1">
+            <SafeImage
+              src={logoIconSrc}
+              alt=""
+              width={44}
+              height={44}
+              className="size-9 shrink-0 sm:size-11"
+            />
+            <span className="max-w-[130px] text-lg leading-[19px] tracking-[-0.42px] text-white sm:text-[21px]">
+              {brandName}
+            </span>
+          </div>
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+            <p className="text-base leading-[34px] tracking-[0.08px] text-white">{ctaText}</p>
+            <a
+              href={donateHref ?? "#"}
+              onClick={onDonateClick}
+              className="inline-flex items-center justify-center bg-[#2b63fc] px-6 py-4 text-center font-mono text-sm uppercase tracking-[0.16px] text-white transition-colors duration-200 ease-out hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 sm:px-[34px] sm:py-[22px] sm:text-base"
+            >
+              {donateLabel}
+            </a>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-10">
+          <div className="h-px w-full bg-white/20" />
+          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 lg:justify-between lg:gap-6 xl:gap-0">
+            {linkColumns.map((column) => (
+              <LinkColumn key={column.title} column={column} />
+            ))}
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <div className="h-px w-full bg-white/10" />
+          <div className="flex flex-col gap-4 border-t border-white/20 py-6 sm:flex-row sm:items-center sm:justify-between">
+            <p className="text-sm leading-[22px] text-white">{copyright}</p>
+            <div className="flex flex-wrap items-center gap-6 sm:gap-12">
+              {legalLinks.map((link) => (
+                <a
+                  key={link.label}
+                  href={link.href ?? "#"}
+                  className="font-mono text-sm uppercase tracking-[-0.14px] text-white transition-colors duration-200 ease-out hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2"
+                >
+                  {link.label}
+                </a>
+              ))}
+              {partnerLogoSrc ? (
+                <SafeImage
+                  src={partnerLogoSrc}
+                  alt={partnerLogoAlt}
+                  width={126}
+                  height={32}
+                  className="h-6 w-auto max-w-[126px] sm:h-8"
+                />
+              ) : null}
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer12.propTypes = footer12PropTypes;
+
+export default Footer12;

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

@@ -0,0 +1,94 @@
+import PropTypes from "prop-types";
+
+const linkShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+});
+
+const columnShape = PropTypes.shape({
+  title: PropTypes.string.isRequired,
+  links: PropTypes.arrayOf(linkShape),
+});
+
+const legalLinkShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+});
+
+export const footer12PropTypes = {
+  logoIconSrc: PropTypes.string,
+  brandName: PropTypes.string,
+  ctaText: PropTypes.string,
+  donateLabel: PropTypes.string,
+  donateHref: PropTypes.string,
+  onDonateClick: PropTypes.func,
+  linkColumns: PropTypes.arrayOf(columnShape),
+  copyright: PropTypes.string,
+  legalLinks: PropTypes.arrayOf(legalLinkShape),
+  partnerLogoSrc: PropTypes.string,
+  partnerLogoAlt: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export const footer12DefaultProps = {
+  logoIconSrc: "/footer/footer12/logo-icon.svg",
+  brandName: "Connectors Program",
+  ctaText: "You Can Help—Contribute Today!",
+  donateLabel: "Donate Now",
+  donateHref: "#",
+  linkColumns: [
+    {
+      title: "About Us",
+      links: [
+        { label: "Who We Are", href: "#" },
+        { label: "Our Leadership", href: "#" },
+        { label: "Our History", href: "#" },
+      ],
+    },
+    {
+      title: "Our Work",
+      links: [
+        { label: "Thematic Areas", href: "#" },
+        { label: "Projects & Programs", href: "#" },
+        { label: "Donors and Partners", href: "#" },
+      ],
+    },
+    {
+      title: "Global Presence",
+      links: [
+        { label: "Switzerland (HQ)", href: "#" },
+        { label: "Bangladesh", href: "#" },
+        { label: "India", href: "#" },
+        { label: "Kenya", href: "#" },
+      ],
+    },
+    {
+      title: "Our Impact",
+      links: [
+        { label: "Reports & Publications", href: "#" },
+        { label: "Impact Stories", href: "#" },
+        { label: "Blogs & Articles | Media", href: "#" },
+        { label: "Photo Gallery", href: "#" },
+        { label: "Video Gallery", href: "#" },
+      ],
+    },
+    {
+      title: "Get Involved",
+      links: [
+        { label: "Our Culture", href: "#" },
+        { label: "Career", href: "#" },
+        { label: "EOI & Tender", href: "#" },
+        { label: "FAQ", href: "#" },
+        { label: "Contact Us", href: "#" },
+      ],
+    },
+  ],
+  copyright: "© 2026 Connectors Program",
+  legalLinks: [
+    { label: "Privacy Notice", href: "#" },
+    { label: "Terms of Use", href: "#" },
+  ],
+  partnerLogoSrc: "/footer/footer12/refugee-logo.png",
+  partnerLogoAlt: "Refugee 613",
+  className: "",
+};

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

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