@notionhive/footers 0.1.0

package/templates/components/organisms/Footer13/Footer13.jsx

@@ -0,0 +1,156 @@
+"use client";
+
+import SafeImage from "../../atoms/SafeImage";
+import {
+  footer13DefaultProps,
+  footer13PropTypes,
+} from "./Footer13.propTypes";
+
+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 TwitterIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 18 18" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M14.2 2h2.5l-5.4 6.2L17.5 16h-4.9l-3.8-5-4.4 5H2.3l5.8-6.6L2 2h5l3.4 4.5L14.2 2zm-.9 12.6h1.4L5.1 3.3H3.6l9.7 11.3z" />
+    </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,
+  twitter: TwitterIcon,
+  youtube: YoutubeIcon,
+};
+
+function LinkColumn({ column }) {
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-8 px-4 py-8 lg:px-8 lg:py-12">
+      <p className="text-xl font-semibold leading-8 text-[#0a142f] lg:text-2xl">{column.title}</p>
+      <ul className="flex flex-col gap-4">
+        {column.links.map((link) => (
+          <li key={link.label}>
+            <a
+              href={link.href ?? "#"}
+              className="text-base font-medium leading-8 text-[rgba(10,20,47,0.8)] transition-colors duration-200 ease-out hover:text-[#0a142f] focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * Footer13 — ASBE light footer with contact, link columns, and social row.
+ * Figma node 32:20962 at 1920px.
+ */
+export function Footer13({
+  logoSrc = footer13DefaultProps.logoSrc,
+  logoAlt = footer13DefaultProps.logoAlt,
+  followLabel = footer13DefaultProps.followLabel,
+  socialLinks = footer13DefaultProps.socialLinks,
+  contact = footer13DefaultProps.contact,
+  linkColumns = footer13DefaultProps.linkColumns,
+  copyright = footer13DefaultProps.copyright,
+  className = "",
+}) {
+  return (
+    <footer
+      className={["relative w-full overflow-hidden border-t border-[rgba(10,20,47,0.1)] bg-[#fafafa]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer13"
+    >
+      <div className="mx-auto flex w-full max-w-[1920px] flex-col gap-5 px-4 pb-5 pt-12 sm:px-6 md:px-10 lg:px-20 xl:px-[120px] xl:pt-20">
+        <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
+          <SafeImage
+            src={logoSrc}
+            alt={logoAlt}
+            width={195}
+            height={70}
+            className="h-12 w-auto max-w-[195px] sm:h-14 md:h-[70px]"
+          />
+          <div className="flex items-center gap-1">
+            <span className="text-sm tracking-[0.42px] text-[rgba(10,20,47,0.8)]">{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-[#0a142f] transition-colors 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 className="flex flex-col border-y border-[rgba(10,20,47,0.1)] lg:flex-row lg:items-stretch">
+          <div className="flex flex-col gap-10 px-4 py-10 lg:w-[541px] lg:shrink-0 lg:px-8 lg:py-12">
+            <p className="whitespace-pre-line text-lg font-medium leading-8 text-[rgba(10,20,47,0.8)]">
+              {contact.address}
+            </p>
+            <div className="flex flex-col gap-4">
+              <a
+                href={`tel:${contact.phone?.replace(/\s/g, "")}`}
+                className="text-2xl font-semibold leading-[42px] text-[#087cb9] transition-opacity duration-200 ease-out hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 sm:text-[32px]"
+              >
+                {contact.phone}
+              </a>
+              <a
+                href={`mailto:${contact.email}`}
+                className="text-lg font-medium leading-8 text-[rgba(10,20,47,0.8)] transition-colors duration-200 ease-out hover:text-[#0a142f] focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                {contact.email}
+              </a>
+            </div>
+          </div>
+          {linkColumns.map((column, index) => (
+            <div key={column.title} className="flex min-w-0 flex-1 lg:flex-row">
+              {index > 0 ? (
+                <div className="hidden w-px shrink-0 bg-[rgba(10,20,47,0.1)] lg:block" aria-hidden="true" />
+              ) : null}
+              <LinkColumn column={column} />
+            </div>
+          ))}
+        </div>
+
+        <p className="py-4 text-center text-base leading-6 text-[rgba(10,20,47,0.8)]">{copyright}</p>
+      </div>
+    </footer>
+  );
+}
+
+Footer13.propTypes = footer13PropTypes;
+
+export default Footer13;

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

@@ -0,0 +1,80 @@
+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", "twitter", "youtube"]),
+});
+
+const contactShape = PropTypes.shape({
+  address: PropTypes.string,
+  phone: PropTypes.string,
+  email: PropTypes.string,
+});
+
+export const footer13PropTypes = {
+  logoSrc: PropTypes.string,
+  logoAlt: PropTypes.string,
+  followLabel: PropTypes.string,
+  socialLinks: PropTypes.arrayOf(socialShape),
+  contact: PropTypes.shape(contactShape),
+  linkColumns: PropTypes.arrayOf(columnShape),
+  copyright: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export const footer13DefaultProps = {
+  logoSrc: "/footer/footer13/logo.png",
+  logoAlt: "ASBE",
+  followLabel: "Follow us",
+  socialLinks: [
+    { label: "Facebook", href: "#", icon: "facebook" },
+    { label: "LinkedIn", href: "#", icon: "linkedin" },
+    { label: "Twitter", href: "#", icon: "twitter" },
+    { label: "YouTube", href: "#", icon: "youtube" },
+  ],
+  contact: {
+    address: "339 Meadowlands Drive East, Ottawa,\nOntario K2E 7B4, Canada",
+    phone: "+48 690 610 479",
+    email: "info@asbe.com",
+  },
+  linkColumns: [
+    {
+      title: "Quick Links",
+      links: [
+        { label: "About Us", href: "#" },
+        { label: "Services", href: "#" },
+        { label: "Products", href: "#" },
+        { label: "Contact Us", href: "#" },
+      ],
+    },
+    {
+      title: "Services",
+      links: [
+        { label: "Installation", href: "#" },
+        { label: "Maintenance", href: "#" },
+        { label: "Consultation", href: "#" },
+      ],
+    },
+    {
+      title: "Legal Regulations",
+      links: [
+        { label: "Privacy Policy", href: "#" },
+        { label: "Cookie Policy", href: "#" },
+        { label: "Terms of Service", href: "#" },
+      ],
+    },
+  ],
+  copyright: "Ⓒ 2025 ASBE. All rights reserved.",
+  className: "",
+};

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

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

package/templates/components/organisms/Footer14/Footer14.jsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { SafeImage } from "../../atoms/SafeImage";
+import {
+  footer14DefaultProps,
+  footer14PropTypes,
+} from "./Footer14.propTypes";
+
+function FacebookIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M20 10a10 10 0 10-11.6 9.9v-7H6.1V10h2.3V7.9c0-2.3 1.4-3.6 3.5-3.6 1 0 2 .2 2 .2v2.2h-1.1c-1.1 0-1.5.7-1.5 1.4V10h2.6l-.4 2.9h-2.2v7A10 10 0 0020 10z" />
+    </svg>
+  );
+}
+
+function TwitterIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M15.8 2h2.8l-6 6.9L19.4 18h-5.4l-4.2-5.6-4.9 5.6H2.6l6.4-7.3L2.2 2h5.6l3.8 5L15.8 2zm-1 14.1h1.5L5.7 3.7H4.1l10.7 12.4z" />
+    </svg>
+  );
+}
+
+function LinkedinIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M4.5 2.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zM2.5 8.5h4v11h-4v-11zm6 0h3.8v1.5c.7-1.1 2-1.9 3.5-1.9 3.8 0 4.5 2.5 4.5 5.7V19.5h-4.5v-6.2c0-1.5 0-3.3-2-3.3s-2.3 1.6-2.3 3.1v6.4H8.5V8.5z" />
+    </svg>
+  );
+}
+
+function YoutubeIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M19.6 5.3a2.5 2.5 0 00-1.8-1.8C16 3.3 10 3.3 10 3.3s-6 0-7.8.2A2.5 2.5 0 001.4 5.3 27 27 0 000 10a27 27 0 00.4 4.7 2.5 2.5 0 001.8 1.8c1.8.2 7.8.2 7.8.2s6 0 7.8-.2a2.5 2.5 0 001.8-1.8A27 27 0 0020 10a27 27 0 00-.4-4.7zM8 12.9V7.1L13.2 10 8 12.9z" />
+    </svg>
+  );
+}
+
+const SOCIAL_ICONS = {
+  facebook: FacebookIcon,
+  twitter: TwitterIcon,
+  linkedin: LinkedinIcon,
+  youtube: YoutubeIcon,
+};
+
+/**
+ * Footer14 — NHCS dark school footer with contact and quick links.
+ * Figma node 32:20963 at 1366px (scaled to 1920).
+ */
+export function Footer14({
+  logoSrc = footer14DefaultProps.logoSrc,
+  logoAlt = footer14DefaultProps.logoAlt,
+  description = footer14DefaultProps.description,
+  socialLinks = footer14DefaultProps.socialLinks,
+  addressTitle = footer14DefaultProps.addressTitle,
+  address = footer14DefaultProps.address,
+  callTitle = footer14DefaultProps.callTitle,
+  phoneLines = footer14DefaultProps.phoneLines,
+  quickLinksTitle = footer14DefaultProps.quickLinksTitle,
+  quickLinks = footer14DefaultProps.quickLinks,
+  secondaryLinks = footer14DefaultProps.secondaryLinks,
+  copyright = footer14DefaultProps.copyright,
+  className = "",
+}) {
+  return (
+    <footer
+      className={["relative w-full overflow-hidden bg-[#001028]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer14"
+    >
+      <div className="mx-auto w-full max-w-[1920px] px-4 py-12 sm:px-6 md:px-10 lg:px-16 xl:px-[112px] xl:py-[72px]">
+        <div className="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-[minmax(0,283px)_minmax(0,255px)_minmax(0,168px)_minmax(0,168px)] lg:gap-10 xl:gap-[40px]">
+          <div className="flex flex-col gap-10">
+            <SafeImage
+              src={logoSrc}
+              alt={logoAlt}
+              width={85}
+              height={111}
+              className="h-[111px] w-auto max-w-[85px]"
+            />
+            <p className="max-w-[283px] text-lg leading-7 text-white/80">{description}</p>
+            <div className="flex flex-wrap gap-5">
+              {socialLinks.map((social) => {
+                const Icon = SOCIAL_ICONS[social.icon] ?? FacebookIcon;
+                return (
+                  <a
+                    key={social.label}
+                    href={social.href ?? "#"}
+                    aria-label={social.label}
+                    className="flex size-9 items-center justify-center rounded-full border border-white/30 text-white transition-colors duration-200 ease-out hover:border-white hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-offset-2"
+                  >
+                    <Icon className="size-5" />
+                  </a>
+                );
+              })}
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-10">
+            <div className="flex flex-col gap-2.5">
+              <p className="font-serif text-2xl leading-9 text-white">{addressTitle}</p>
+              <p className="max-w-[255px] text-lg leading-7 text-white/80">{address}</p>
+            </div>
+            <div className="flex flex-col gap-2.5">
+              <p className="font-serif text-2xl leading-9 text-white">{callTitle}</p>
+              <div className="text-lg leading-7 text-white/80">
+                {phoneLines.map((line) => (
+                  <p key={line}>{line}</p>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-2.5">
+            <p className="font-serif text-2xl leading-9 text-white">{quickLinksTitle}</p>
+            <ul className="flex flex-col gap-[15px]">
+              {quickLinks.map((link) => (
+                <li key={link.label}>
+                  <a
+                    href={link.href ?? "#"}
+                    className="text-lg leading-7 text-white/80 transition-colors duration-200 ease-out hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2"
+                  >
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <ul className="flex flex-col gap-[15px] pt-0 lg:pt-[46px]">
+            {secondaryLinks.map((link) => (
+              <li key={link.label}>
+                <a
+                  href={link.href ?? "#"}
+                  className="text-lg leading-7 text-white/80 transition-colors duration-200 ease-out hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2"
+                >
+                  {link.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="mt-12 border-t border-white/10 pt-8 xl:mt-16">
+          <p className="text-center text-base leading-7 text-white/80">{copyright}</p>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer14.propTypes = footer14PropTypes;
+
+export default Footer14;

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

@@ -0,0 +1,60 @@
+import PropTypes from "prop-types";
+
+const linkShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+});
+
+const socialShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  icon: PropTypes.oneOf(["facebook", "twitter", "linkedin", "youtube"]),
+});
+
+export const footer14PropTypes = {
+  logoSrc: PropTypes.string,
+  logoAlt: PropTypes.string,
+  description: PropTypes.string,
+  socialLinks: PropTypes.arrayOf(socialShape),
+  addressTitle: PropTypes.string,
+  address: PropTypes.string,
+  callTitle: PropTypes.string,
+  phoneLines: PropTypes.arrayOf(PropTypes.string),
+  quickLinksTitle: PropTypes.string,
+  quickLinks: PropTypes.arrayOf(linkShape),
+  secondaryLinks: PropTypes.arrayOf(linkShape),
+  copyright: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export const footer14DefaultProps = {
+  logoSrc: "/footer/footer14/logo.png",
+  logoAlt: "NHCS",
+  description:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan bibendum bibendum diam et.",
+  socialLinks: [
+    { label: "Facebook", href: "#", icon: "facebook" },
+    { label: "Twitter", href: "#", icon: "twitter" },
+    { label: "LinkedIn", href: "#", icon: "linkedin" },
+    { label: "YouTube", href: "#", icon: "youtube" },
+  ],
+  addressTitle: "Address –",
+  address: "33- A, South Kunipara, Middle Dhaka, 1208",
+  callTitle: "Call us –",
+  phoneLines: ["Cell: 01710-000089", "Office: 780-449-1421"],
+  quickLinksTitle: "Quick link –",
+  quickLinks: [
+    { label: "About NHCS", href: "#" },
+    { label: "Admissions", href: "#" },
+    { label: "Academics", href: "#" },
+    { label: "Life at NHCS", href: "#" },
+    { label: "Explore", href: "#" },
+  ],
+  secondaryLinks: [
+    { label: "Contact us", href: "#" },
+    { label: "Terms of Use", href: "#" },
+    { label: "Privacy Policy", href: "#" },
+  ],
+  copyright: "Copyright © 2022, New Horizon Canadian School. All rights reserved.",
+  className: "",
+};

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

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

package/templates/components/organisms/Footer15/Footer15.jsx

@@ -0,0 +1,184 @@
+"use client";
+
+import { useState } from "react";
+import SafeImage from "../../atoms/SafeImage";
+import {
+  footer15DefaultProps,
+  footer15PropTypes,
+} from "./Footer15.propTypes";
+
+function ArrowUpRightIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M5 15L15 5M15 5H7M15 5v8"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ChevronDownIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" className={className}>
+      <path d="M5 8l5 5 5-5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function LinkedinIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M4.98 3.5C3.34 3.5 2 4.84 2 6.48s1.34 2.98 2.98 2.98 2.98-1.34 2.98-2.98S6.62 3.5 4.98 3.5zM2.4 9h5.16v14H2.4V9zm7.92 0h4.94v1.92c.7-1.2 2.4-2.1 4.94-2.1 5.28 0 6.26 3.48 6.26 8v6.18h-5.16v-5.48c0-1.3 0-3-1.84-3-2 0-2.3 1.56-2.3 3.18v5.3H10.32V9z" />
+    </svg>
+  );
+}
+
+function YoutubeIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M23.5 6.2a3 3 0 00-2.1-2.1C19.6 3.5 12 3.5 12 3.5s-7.6 0-9.4.6A3 3 0 00.5 6.2 31.3 31.3 0 000 12a31.3 31.3 0 00.5 5.8 3 3 0 002.1 2.1c1.8.6 9.4.6 9.4.6s7.6 0 9.4-.6a3 3 0 002.1-2.1A31.3 31.3 0 0024 12a31.3 31.3 0 00-.5-5.8zM9.6 15.5v-7L15.8 12 9.6 15.5z" />
+    </svg>
+  );
+}
+
+function InstagramIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M7 2h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5zm5 5a5 5 0 100 10 5 5 0 000-10zm6.5-.9a1.1 1.1 0 100 2.2 1.1 1.1 0 000-2.2z" />
+    </svg>
+  );
+}
+
+const SOCIAL_ICONS = {
+  linkedin: LinkedinIcon,
+  youtube: YoutubeIcon,
+  instagram: InstagramIcon,
+};
+
+/**
+ * Footer15 — Shipora dark accordion-style nav footer with CTA.
+ * Figma node 32:21015 at 1920px.
+ */
+export function Footer15({
+  tagline = footer15DefaultProps.tagline,
+  ctaLabel = footer15DefaultProps.ctaLabel,
+  ctaHref = footer15DefaultProps.ctaHref,
+  onCtaClick,
+  navItems = footer15DefaultProps.navItems,
+  socialLinks = footer15DefaultProps.socialLinks,
+  logoSrc = footer15DefaultProps.logoSrc,
+  logoAlt = footer15DefaultProps.logoAlt,
+  copyright = footer15DefaultProps.copyright,
+  legalLinks = footer15DefaultProps.legalLinks,
+  className = "",
+}) {
+  const [expandedIndex, setExpandedIndex] = useState(null);
+
+  return (
+    <footer
+      className={["relative w-full overflow-hidden bg-[#13191f]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer15"
+    >
+      <div className="mx-auto flex w-full max-w-[1920px] flex-col gap-10 px-4 py-16 sm:px-6 md:px-10 lg:gap-12 lg:px-20 lg:py-[140px] xl:px-[80px]">
+        <div className="flex flex-col gap-12 lg:flex-row lg:items-start lg:justify-between">
+          <div className="flex max-w-xl flex-col gap-10 lg:gap-[60px]">
+            <p className="font-mono text-xl font-semibold leading-relaxed text-white sm:text-2xl">
+              {tagline}
+            </p>
+            <a
+              href={ctaHref ?? "#"}
+              onClick={onCtaClick}
+              className="group flex h-16 w-full max-w-xs flex-col justify-between bg-[#ffd32d] px-4 pb-5 pt-2.5 text-[#13191f] transition-opacity duration-200 ease-out hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              <span className="flex justify-end">
+                <ArrowUpRightIcon className="size-5 transition-transform duration-300 ease-out group-hover:-translate-y-0.5 group-hover:translate-x-0.5 motion-reduce:transition-none" />
+              </span>
+              <span className="font-mono text-lg tracking-[-0.72px]">{ctaLabel}</span>
+            </a>
+          </div>
+
+          <nav className="w-full max-w-2xl" aria-label="Footer navigation">
+            {navItems.map((item, index) => (
+              <div
+                key={item.label}
+                className="border-b border-white/10 py-5 first:py-5 lg:py-8"
+              >
+                {item.expandable ? (
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setExpandedIndex(expandedIndex === index ? null : index)
+                    }
+                    className="flex w-full items-center justify-between text-left font-mono text-lg tracking-[-0.72px] text-white transition-colors duration-200 ease-out hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2"
+                    aria-expanded={expandedIndex === index}
+                  >
+                    {item.label}
+                    <ChevronDownIcon
+                      className={`size-5 transition-transform duration-300 ease-out motion-reduce:transition-none ${
+                        expandedIndex === index ? "rotate-180" : ""
+                      }`}
+                    />
+                  </button>
+                ) : (
+                  <a
+                    href={item.href ?? "#"}
+                    className="block font-mono text-lg tracking-[-0.72px] text-white transition-colors duration-200 ease-out hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2"
+                  >
+                    {item.label}
+                  </a>
+                )}
+              </div>
+            ))}
+            <div className="flex justify-end gap-3 pt-8">
+              {socialLinks.map((social) => {
+                const Icon = SOCIAL_ICONS[social.icon] ?? LinkedinIcon;
+                return (
+                  <a
+                    key={social.label}
+                    href={social.href ?? "#"}
+                    aria-label={social.label}
+                    className="flex size-[34px] items-center justify-center rounded-full text-white transition-opacity duration-200 ease-out hover:opacity-70 focus-visible:outline-2 focus-visible:outline-offset-2"
+                  >
+                    <Icon className="size-[34px]" />
+                  </a>
+                );
+              })}
+            </div>
+          </nav>
+        </div>
+
+        <div className="flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between">
+          <SafeImage
+            src={logoSrc}
+            alt={logoAlt}
+            width={518}
+            height={168}
+            className="h-16 w-auto max-w-[320px] sm:h-24 lg:h-[168px] lg:max-w-[518px]"
+          />
+          <div className="flex flex-col gap-4 text-sm leading-relaxed text-white/60 sm:flex-row sm:flex-wrap sm:items-center sm:gap-8">
+            <p>{copyright}</p>
+            {legalLinks.map((link) => (
+              <a
+                key={link.label}
+                href={link.href ?? "#"}
+                className="whitespace-nowrap transition-colors duration-200 ease-out hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                {link.label}
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer15.propTypes = footer15PropTypes;
+
+export default Footer15;