@notionhive/footers 0.1.0

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

@@ -0,0 +1,58 @@
+import PropTypes from "prop-types";
+
+const navItemShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  expandable: PropTypes.bool,
+});
+
+const socialShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  icon: PropTypes.oneOf(["linkedin", "youtube", "instagram"]),
+});
+
+const legalLinkShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+});
+
+export const footer15PropTypes = {
+  tagline: PropTypes.string,
+  ctaLabel: PropTypes.string,
+  ctaHref: PropTypes.string,
+  onCtaClick: PropTypes.func,
+  navItems: PropTypes.arrayOf(navItemShape),
+  socialLinks: PropTypes.arrayOf(socialShape),
+  logoSrc: PropTypes.string,
+  logoAlt: PropTypes.string,
+  copyright: PropTypes.string,
+  legalLinks: PropTypes.arrayOf(legalLinkShape),
+  className: PropTypes.string,
+};
+
+export const footer15DefaultProps = {
+  tagline: "Logistics made simple, scalable, and efficient powered by Shipora.",
+  ctaLabel: "Get a Free Quote",
+  ctaHref: "#",
+  navItems: [
+    { label: "Services", href: "#", expandable: true },
+    { label: "Track Shipment", href: "#" },
+    { label: "About", href: "#" },
+    { label: "Resources", href: "#" },
+    { label: "Contact Us", href: "#" },
+  ],
+  socialLinks: [
+    { label: "LinkedIn", href: "#", icon: "linkedin" },
+    { label: "YouTube", href: "#", icon: "youtube" },
+    { label: "Instagram", href: "#", icon: "instagram" },
+  ],
+  logoSrc: "/footer/footer15/logo.svg",
+  logoAlt: "Shipora",
+  copyright: "© 2026 All rights reserved.",
+  legalLinks: [
+    { label: "Terms & Condition", href: "#" },
+    { label: "Privacy Policy", href: "#" },
+  ],
+  className: "",
+};

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

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

package/templates/components/organisms/Footer16/Footer16.jsx

@@ -0,0 +1,87 @@
+"use client";
+
+import SafeImage from "../../atoms/SafeImage";
+import {
+  footer16DefaultProps,
+  footer16PropTypes,
+} from "./Footer16.propTypes";
+
+function LinkColumn({ column }) {
+  return (
+    <div className="flex min-w-0 flex-col gap-4">
+      <p className="text-xl font-semibold leading-5 text-white">{column.title}</p>
+      <ul className="flex flex-col gap-3">
+        {column.links.map((link) => (
+          <li key={link.label}>
+            <a
+              href={link.href ?? "#"}
+              className="text-base text-white/70 transition-colors duration-200 ease-out hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * Footer16 — Axentec dark multi-column footer (1440px reference).
+ * Figma node 32:19076.
+ */
+export function Footer16({
+  logoSrc = footer16DefaultProps.logoSrc,
+  logoAlt = footer16DefaultProps.logoAlt,
+  linkColumns = footer16DefaultProps.linkColumns,
+  copyright = footer16DefaultProps.copyright,
+  legalLinks = footer16DefaultProps.legalLinks,
+  className = "",
+}) {
+  return (
+    <footer
+      className={["relative w-full overflow-hidden bg-[#221e1f]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer16"
+    >
+      <div className="mx-auto flex w-full max-w-[1920px] flex-col gap-8 px-4 py-12 sm:px-6 md:px-10 lg:gap-12 lg:px-[70px] lg:pb-8 lg:pt-[70px] xl:px-[70px]">
+        <div className="flex flex-col gap-10 lg:flex-row lg:items-start lg:justify-between">
+          <SafeImage
+            src={logoSrc}
+            alt={logoAlt}
+            width={144}
+            height={45}
+            className="h-9 w-auto max-w-[144px] sm:h-11"
+          />
+          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4 lg:gap-12 xl:gap-16">
+            {linkColumns.map((column) => (
+              <LinkColumn key={column.title} column={column} />
+            ))}
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-6 border-t border-white/10 pt-6 lg:gap-8 lg:pt-8">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <p className="text-sm font-medium text-[#fffeff]/70">{copyright}</p>
+            <div className="flex flex-wrap gap-4">
+              {legalLinks.map((link) => (
+                <a
+                  key={link.label}
+                  href={link.href ?? "#"}
+                  className="text-sm font-medium text-[#fffeff]/70 transition-colors duration-200 ease-out hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2"
+                >
+                  {link.label}
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer16.propTypes = footer16PropTypes;
+
+export default Footer16;

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

@@ -0,0 +1,73 @@
+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 footer16PropTypes = {
+  logoSrc: PropTypes.string,
+  logoAlt: PropTypes.string,
+  linkColumns: PropTypes.arrayOf(columnShape),
+  copyright: PropTypes.string,
+  legalLinks: PropTypes.arrayOf(legalLinkShape),
+  className: PropTypes.string,
+};
+
+export const footer16DefaultProps = {
+  logoSrc: "/footer/footer16/logo.svg",
+  logoAlt: "axentec",
+  linkColumns: [
+    {
+      title: "About",
+      links: [
+        { label: "About axentec PLC", href: "#" },
+        { label: "Career", href: "#" },
+        { label: "Latest Insights", href: "#" },
+      ],
+    },
+    {
+      title: "Our Solutions",
+      links: [
+        { label: "ICT Solutions", href: "#" },
+        { label: "Cyber Security", href: "#" },
+        { label: "AdTech & MarTech", href: "#" },
+        { label: "Msft, Google, HRIS", href: "#" },
+        { label: "Cloud & Colo", href: "#" },
+      ],
+    },
+    {
+      title: "Useful Links",
+      links: [
+        { label: "Contact Us", href: "#" },
+        { label: "Customer Service", href: "#" },
+      ],
+    },
+    {
+      title: "Social",
+      links: [
+        { label: "LinkedIn", href: "#" },
+        { label: "Youtube", href: "#" },
+        { label: "Facebook", href: "#" },
+        { label: "X", href: "#" },
+      ],
+    },
+  ],
+  copyright: "© 2024 axentec PLC",
+  legalLinks: [
+    { label: "Privacy", href: "#" },
+    { label: "Sitemap", href: "#" },
+    { label: "Terms of Use", href: "#" },
+  ],
+  className: "",
+};

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

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

package/templates/components/organisms/Footer17/Footer17.jsx

@@ -0,0 +1,176 @@
+"use client";
+
+import SafeImage from "../../atoms/SafeImage";
+import {
+  footer17DefaultProps,
+  footer17PropTypes,
+} from "./Footer17.propTypes";
+
+function ChevronRightIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" className={className}>
+      <path d="M8 5l5 5-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function FacebookIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 18 18" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M18 9a9 9 0 10-10.4 8.9v-6.3H5.5V9h2.1V7.1c0-2.1 1.2-3.2 3.1-3.2.9 0 1.8.2 1.8.2v2h-1c-1 0-1.3.6-1.3 1.3V9h2.3l-.4 2.6h-1.9v6.3A9 9 0 0018 9z" />
+    </svg>
+  );
+}
+
+function LinkedinIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 18 18" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M4 2a2 2 0 100 4 2 2 0 000-4zM2 7h4v11H2V7zm6 0h3.8v1.5c.6-1 1.8-1.7 3.2-1.7 3.4 0 4 2.2 4 5.1V18h-4v-5.6c0-1.3 0-2.9-1.8-2.9-1.8 0-2.1 1.4-2.1 2.8V18H8V7z" />
+    </svg>
+  );
+}
+
+function YoutubeIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 18 18" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M17.6 4.8a2.3 2.3 0 00-1.6-1.6C14.4 3 9 3 9 3s-5.4 0-7 .2A2.3 2.3 0 00.4 4.8 24 24 0 000 9a24 24 0 00.4 4.2 2.3 2.3 0 001.6 1.6c1.6.2 7 .2 7 .2s5.4 0 7-.2a2.3 2.3 0 001.6-1.6A24 24 0 0018 9a24 24 0 00-.4-4.2zM7.2 11.7V6.3L12 9l-4.8 2.7z" />
+    </svg>
+  );
+}
+
+const SOCIAL_ICONS = {
+  facebook: FacebookIcon,
+  linkedin: LinkedinIcon,
+  youtube: YoutubeIcon,
+};
+
+function LinkColumn({ column }) {
+  return (
+    <div className="flex min-w-0 flex-col gap-6 sm:gap-[30px]">
+      <p className="text-base font-semibold leading-normal tracking-[0.48px] text-[#1c1917]">
+        {column.title}
+      </p>
+      <ul className="flex flex-col gap-4">
+        {column.links.map((link) => (
+          <li key={link.label}>
+            <a
+              href={link.href ?? "#"}
+              className="text-sm leading-[22px] text-[#2e2926] transition-colors duration-200 ease-out hover:text-[#1c1917] focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * Footer17 — SAF cream footer with donate CTA and link columns.
+ * Figma node 32:19450 at 1440px.
+ */
+export function Footer17({
+  logoLeftSrc = footer17DefaultProps.logoLeftSrc,
+  logoRightSrc = footer17DefaultProps.logoRightSrc,
+  logoAlt = footer17DefaultProps.logoAlt,
+  ctaText = footer17DefaultProps.ctaText,
+  donateLabel = footer17DefaultProps.donateLabel,
+  donateHref = footer17DefaultProps.donateHref,
+  onDonateClick,
+  linkColumns = footer17DefaultProps.linkColumns,
+  followLabel = footer17DefaultProps.followLabel,
+  socialLinks = footer17DefaultProps.socialLinks,
+  copyright = footer17DefaultProps.copyright,
+  legalLinks = footer17DefaultProps.legalLinks,
+  className = "",
+}) {
+  return (
+    <footer
+      className={["relative w-full overflow-hidden bg-[#faf9f5] pb-24 lg:pb-28", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer17"
+    >
+      <div className="mx-auto flex w-full max-w-[1920px] flex-col px-4 pt-10 sm:px-6 md:px-10 lg:px-[75px] lg:pt-[41px]">
+        <div className="flex flex-col gap-8 lg:flex-row lg:items-start lg:justify-between">
+          <div className="relative h-12 w-full max-w-[265px] sm:h-14">
+            <SafeImage
+              src={logoLeftSrc}
+              alt=""
+              width={120}
+              height={58}
+              className="absolute bottom-0 left-0 h-full w-auto max-w-[45%] object-contain object-left"
+            />
+            <SafeImage
+              src={logoRightSrc}
+              alt={logoAlt}
+              width={160}
+              height={58}
+              className="absolute bottom-0 right-0 h-full w-auto max-w-[55%] object-contain object-right"
+            />
+          </div>
+          <div className="flex flex-col items-start gap-2.5 lg:items-end">
+            <p className="text-base font-medium tracking-[0.48px] text-[#1c1917]">{ctaText}</p>
+            <a
+              href={donateHref ?? "#"}
+              onClick={onDonateClick}
+              className="inline-flex h-14 items-center gap-2 rounded-full bg-[#971512] px-6 text-base font-semibold text-white transition-colors duration-200 ease-out hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              {donateLabel}
+              <ChevronRightIcon className="size-5" />
+            </a>
+          </div>
+        </div>
+
+        <div className="mt-10 flex flex-col gap-10">
+          <div className="h-px w-full bg-[#efecdf]" />
+          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 lg:justify-between">
+            {linkColumns.map((column) => (
+              <LinkColumn key={column.title} column={column} />
+            ))}
+          </div>
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-end">
+            <span className="text-sm tracking-[0.42px] text-[#2e2926]">{followLabel}</span>
+            <div className="flex items-center">
+              {socialLinks.map((social) => {
+                const Icon = SOCIAL_ICONS[social.icon] ?? FacebookIcon;
+                return (
+                  <a
+                    key={social.label}
+                    href={social.href ?? "#"}
+                    aria-label={social.label}
+                    className="rounded-full p-2.5 text-[#2e2926] transition-opacity duration-200 ease-out hover:opacity-70 focus-visible:outline-2 focus-visible:outline-offset-2"
+                  >
+                    <Icon className="size-[18px]" />
+                  </a>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="absolute bottom-0 left-0 right-0 border-t border-[#efecdf] bg-[#faf9f5] px-4 py-6 sm:px-6 md:px-10 lg:px-[75px]">
+        <div className="mx-auto flex w-full max-w-[1920px] flex-col gap-4 text-sm leading-[22px] text-[#5b5755] sm:flex-row sm:items-center sm:justify-between">
+          <p>{copyright}</p>
+          <div className="flex flex-wrap gap-6">
+            {legalLinks.map((link) => (
+              <a
+                key={link.label}
+                href={link.href ?? "#"}
+                className="transition-colors duration-200 ease-out hover:text-[#1c1917] focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                {link.label}
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer17.propTypes = footer17PropTypes;
+
+export default Footer17;

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

@@ -0,0 +1,117 @@
+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 socialShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  icon: PropTypes.oneOf(["facebook", "linkedin", "youtube"]),
+});
+
+const legalLinkShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+});
+
+export const footer17PropTypes = {
+  logoLeftSrc: PropTypes.string,
+  logoRightSrc: PropTypes.string,
+  logoAlt: PropTypes.string,
+  ctaText: PropTypes.string,
+  donateLabel: PropTypes.string,
+  donateHref: PropTypes.string,
+  onDonateClick: PropTypes.func,
+  linkColumns: PropTypes.arrayOf(columnShape),
+  followLabel: PropTypes.string,
+  socialLinks: PropTypes.arrayOf(socialShape),
+  copyright: PropTypes.string,
+  legalLinks: PropTypes.arrayOf(legalLinkShape),
+  className: PropTypes.string,
+};
+
+export const footer17DefaultProps = {
+  logoLeftSrc: "/footer/footer17/logo-left.svg",
+  logoRightSrc: "/footer/footer17/logo-right.svg",
+  logoAlt: "SAF Sustainable Agriculture Foundation",
+  ctaText: "You Can Help—Contribute Today!",
+  donateLabel: "Donate Now",
+  donateHref: "#",
+  linkColumns: [
+    {
+      title: "About us",
+      links: [
+        { label: "Organization", href: "#" },
+        { label: "Legacy", href: "#" },
+        { label: "Vision", href: "#" },
+        { label: "Mission", href: "#" },
+        { label: "Values", href: "#" },
+        { label: "Strategy", href: "#" },
+        { label: "Leadership", href: "#" },
+      ],
+    },
+    {
+      title: "Our Work",
+      links: [
+        { label: "Map", href: "#" },
+        { label: "Global Program", href: "#" },
+        { label: "Toc", href: "#" },
+        { label: "Impacts", href: "#" },
+        { label: "Partners", href: "#" },
+        { label: "Donors", href: "#" },
+      ],
+    },
+    {
+      title: "Global Presence",
+      links: [
+        { label: "Bangladesh", href: "#" },
+        { label: "Kenya", href: "#" },
+        { label: "India", href: "#" },
+      ],
+    },
+    {
+      title: "Our Impact",
+      links: [
+        { label: "Reports & Publications", href: "#" },
+        { label: "Impacts stories", href: "#" },
+        { label: "Blogs & Articles", href: "#" },
+        { label: "Media & News", href: "#" },
+        { label: "Gallery", href: "#" },
+      ],
+    },
+    {
+      title: "Get Involved",
+      links: [
+        { label: "Careers", href: "#" },
+        { label: "Consultancy", href: "#" },
+        { label: "EOI", href: "#" },
+      ],
+    },
+    {
+      title: "Contact Us",
+      links: [
+        { label: "Global", href: "#" },
+        { label: "Countries", href: "#" },
+      ],
+    },
+  ],
+  followLabel: "Follow us",
+  socialLinks: [
+    { label: "Facebook", href: "#", icon: "facebook" },
+    { label: "LinkedIn", href: "#", icon: "linkedin" },
+    { label: "YouTube", href: "#", icon: "youtube" },
+  ],
+  copyright: "© 2024 Sustainable Agriculture Foundation.",
+  legalLinks: [
+    { label: "Privacy Notice", href: "#" },
+    { label: "Terms of Use", href: "#" },
+  ],
+  className: "",
+};

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

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