@notionhive/footers 0.1.0

package/templates/components/organisms/Footer22/Footer22.jsx

@@ -0,0 +1,136 @@
+"use client";
+
+import SafeImage from "../../atoms/SafeImage";
+import {
+  footer22DefaultProps,
+  footer22PropTypes,
+} from "./Footer22.propTypes";
+
+function LinkColumn({ column, linkClassName }) {
+  return (
+    <div className="flex min-w-0 flex-col gap-4">
+      <p className="text-base font-semibold leading-[30px] text-[#0a0057] sm:text-lg xl:text-xl">
+        {column.title}
+      </p>
+      <ul className="flex flex-col gap-2">
+        {column.links.map((link) => (
+          <li key={link.label}>
+            <a
+              href={link.href ?? "#"}
+              className={[
+                "text-sm leading-[22px] tracking-[-0.7px] text-[#546677] transition-colors duration-200 ease-out hover:text-[#0a0057] focus-visible:outline-2 focus-visible:outline-offset-2",
+                linkClassName,
+              ]
+                .filter(Boolean)
+                .join(" ")}
+            >
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * Footer22 — Cerebral Edge white footer with contact and link columns.
+ * Figma node 32:19983 at 1920px.
+ */
+export function Footer22({
+  logoIconSrc = footer22DefaultProps.logoIconSrc,
+  logoNameSrc = footer22DefaultProps.logoNameSrc,
+  logoTaglineSrc = footer22DefaultProps.logoTaglineSrc,
+  email = footer22DefaultProps.email,
+  emailHref = footer22DefaultProps.emailHref,
+  phone = footer22DefaultProps.phone,
+  linkColumns = footer22DefaultProps.linkColumns,
+  copyright = footer22DefaultProps.copyright,
+  privacyLabel = footer22DefaultProps.privacyLabel,
+  privacyHref = footer22DefaultProps.privacyHref,
+  className = "",
+}) {
+  return (
+    <footer
+      className={["relative w-full overflow-hidden bg-white", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer22"
+    >
+      <div className="mx-auto flex w-full max-w-[1920px] flex-col gap-10 px-4 py-10 sm:px-6 md:gap-12 md:px-10 lg:px-20 lg:py-[75px] xl:px-[131px]">
+        <div className="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4 lg:gap-8 xl:gap-12">
+          <div className="flex flex-col gap-6 sm:col-span-2 lg:col-span-1">
+            <div className="relative h-auto w-full max-w-[200px]">
+              <SafeImage
+                src={logoIconSrc}
+                alt=""
+                width={94}
+                height={94}
+                className="mb-2 h-auto w-[94px] max-w-full"
+              />
+              <SafeImage
+                src={logoNameSrc}
+                alt="CerebralEdge"
+                width={200}
+                height={28}
+                className="mb-1 h-auto w-full max-w-[200px]"
+              />
+              <SafeImage
+                src={logoTaglineSrc}
+                alt="Deep Insights, Powerful Results"
+                width={200}
+                height={14}
+                className="h-auto w-full max-w-[200px]"
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-2">
+              <p className="text-base font-semibold leading-[30px] text-[#0a0057] sm:text-lg xl:text-xl">
+                Email Us —
+              </p>
+              <a
+                href={emailHref ?? `mailto:${email}`}
+                className="text-sm leading-[22px] tracking-[-0.7px] text-[#546677] underline transition-colors duration-200 ease-out hover:text-[#0a0057] focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                {email}
+              </a>
+            </div>
+            <div className="flex flex-col gap-2">
+              <p className="text-base font-semibold leading-[30px] text-[#0a0057] sm:text-lg xl:text-xl">
+                Call Us —
+              </p>
+              <a
+                href={`tel:${phone.replace(/\s/g, "")}`}
+                className="text-sm leading-[22px] tracking-[-0.7px] text-[#546677] transition-colors duration-200 ease-out hover:text-[#0a0057] focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                {phone}
+              </a>
+            </div>
+          </div>
+
+          {linkColumns.map((column) => (
+            <LinkColumn key={column.title} column={column} />
+          ))}
+        </div>
+
+        <div className="flex flex-col items-center justify-between gap-4 border-t border-transparent pt-4 sm:flex-row">
+          <p className="text-center text-sm leading-[22px] tracking-[-0.7px] text-[#546677] sm:text-left">
+            {copyright}
+          </p>
+          <a
+            href={privacyHref ?? "#"}
+            className="text-sm leading-[22px] tracking-[-0.7px] text-[#546677] transition-colors duration-200 ease-out hover:text-[#0a0057] focus-visible:outline-2 focus-visible:outline-offset-2"
+          >
+            {privacyLabel}
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer22.propTypes = footer22PropTypes;
+
+export default Footer22;

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

@@ -0,0 +1,58 @@
+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 footer22PropTypes = {
+  logoIconSrc: PropTypes.string,
+  logoNameSrc: PropTypes.string,
+  logoTaglineSrc: PropTypes.string,
+  email: PropTypes.string,
+  emailHref: PropTypes.string,
+  phone: PropTypes.string,
+  linkColumns: PropTypes.arrayOf(columnShape),
+  copyright: PropTypes.string,
+  privacyLabel: PropTypes.string,
+  privacyHref: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export const footer22DefaultProps = {
+  logoIconSrc: "/footer/footer22/logo-icon.svg",
+  logoNameSrc: "/footer/footer22/logo-name.svg",
+  logoTaglineSrc: "/footer/footer22/logo-tagline.svg",
+  email: "solutions@cerebraledge.com",
+  emailHref: "mailto:solutions@cerebraledge.com",
+  phone: "469 223 9013",
+  linkColumns: [
+    {
+      title: "Useful Links",
+      links: [
+        { label: "Serivces", href: "#" },
+        { label: "Case Studies", href: "#" },
+        { label: "Blog", href: "#" },
+        { label: "Contact Us", href: "#" },
+      ],
+    },
+    {
+      title: "Useful Link",
+      links: [
+        { label: "Design Break Podcast", href: "#" },
+        { label: "Press & Media", href: "#" },
+        { label: "Work in Progress", href: "#" },
+        { label: "Resources", href: "#" },
+      ],
+    },
+  ],
+  copyright: "Copyright © 2021 Cerebral Edge. All rights reserved",
+  privacyLabel: "Privacy Policy",
+  privacyHref: "#",
+  className: "",
+};

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

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

package/templates/components/organisms/Footer23/Footer23.jsx

@@ -0,0 +1,177 @@
+"use client";
+
+import SafeImage from "../../atoms/SafeImage";
+import {
+  footer23DefaultProps,
+  footer23PropTypes,
+} from "./Footer23.propTypes";
+
+function FacebookIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M12 2C6.48 2 2 6.48 2 12c0 5.01 3.66 9.15 8.44 9.9v-7H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.78-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.78l-.44 2.9h-2.34v7C18.34 21.15 22 17.01 22 12c0-5.52-4.48-10-10-10z" />
+    </svg>
+  );
+}
+
+function LinkedinIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M20 3H4a1 1 0 00-1 1v16a1 1 0 001 1h16a1 1 0 001-1V4a1 1 0 00-1-1zM8 18H5v-9h3v9zM6.5 7.5a1.75 1.75 0 110-3.5 1.75 1.75 0 010 3.5zM19 18h-3v-4.6c0-1.1-.02-2.5-1.52-2.5-1.52 0-1.75 1.19-1.75 2.42V18h-3v-9h2.88v1.23h.04c.4-.76 1.38-1.56 2.84-1.56 3.04 0 3.6 2 3.6 4.6V18z" />
+    </svg>
+  );
+}
+
+function InstagramIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M12 2.2c2.67 0 2.99.01 4.04.06 1.01.05 1.56.23 1.93.38.48.19.83.41 1.19.77.36.36.58.71.77 1.19.15.37.33.92.38 1.93.05 1.05.06 1.37.06 4.04s-.01 2.99-.06 4.04c-.05 1.01-.23 1.56-.38 1.93-.19.48-.41.83-.77 1.19-.36.36-.71.58-1.19.77-.37.15-.92.33-1.93.38-1.05.05-1.37.06-4.04.06s-2.99-.01-4.04-.06c-1.01-.05-1.56-.23-1.93-.38a3.2 3.2 0 01-1.19-.77 3.2 3.2 0 01-.77-1.19c-.15-.37-.33-.92-.38-1.93C2.21 14.99 2.2 14.67 2.2 12s.01-2.99.06-4.04c.05-1.01.23-1.56.38-1.93.19-.48.41-.83.77-1.19.36-.36.71-.58 1.19-.77.37-.15.92-.33 1.93-.38C9.01 2.21 9.33 2.2 12 2.2zm0 1.8c-2.63 0-2.94.01-3.97.06-.96.04-1.48.2-1.83.34-.46.18-.79.4-1.14.75-.35.35-.57.68-.75 1.14-.14.35-.3.87-.34 1.83-.05 1.03-.06 1.34-.06 3.97s.01 2.94.06 3.97c.04.96.2 1.48.34 1.83.18.46.4.79.75 1.14.35.35.68.57 1.14.75.35.14.87.3 1.83.34 1.03.05 1.34.06 3.97.06s2.94-.01 3.97-.06c.96-.04 1.48-.2 1.83-.34.46-.18.79-.4 1.14-.75.35-.35.57-.68.75-1.14.14-.35.3-.87.34-1.83.05-1.03.06-1.34.06-3.97s-.01-2.94-.06-3.97c-.04-.96-.2-1.48-.34-1.83a3.1 3.1 0 00-.75-1.14 3.1 3.1 0 00-1.14-.75c-.35-.14-.87-.3-1.83-.34-1.03-.05-1.34-.06-3.97-.06zM12 7a5 5 0 100 10 5 5 0 000-10zm0 8.2a3.2 3.2 0 110-6.4 3.2 3.2 0 010 6.4zm5.25-9.85a1.17 1.17 0 11-2.34 0 1.17 1.17 0 012.34 0z" />
+    </svg>
+  );
+}
+
+function YoutubeIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M21.6 7.2a2.5 2.5 0 00-1.76-1.77C18 5 12 5 12 5s-6 0-7.84.43A2.5 2.5 0 002.4 7.2 26.3 26.3 0 002 12a26.3 26.3 0 00.4 4.8 2.5 2.5 0 001.76 1.77C6 19 12 19 12 19s6 0 7.84-.43a2.5 2.5 0 001.76-1.77A26.3 26.3 0 0022 12a26.3 26.3 0 00-.4-4.8zM10 15.5V8.5l5.25 3.5L10 15.5z" />
+    </svg>
+  );
+}
+
+const SOCIAL_ICONS = {
+  facebook: FacebookIcon,
+  instagram: InstagramIcon,
+  linkedin: LinkedinIcon,
+  youtube: YoutubeIcon,
+};
+
+function LinkColumn({ column }) {
+  return (
+    <div className="flex min-w-0 flex-col gap-4">
+      <p className="text-base font-semibold leading-6 text-[#18191a]">{column.title}</p>
+      <ul className="flex flex-col gap-3">
+        {column.links.map((link) => (
+          <li key={link.label}>
+            <a
+              href={link.href ?? "#"}
+              className="text-sm leading-5 text-[#484a4d] transition-colors duration-200 ease-out hover:text-[#18191a] focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * Footer23 — Japan Experiences & Tours multi-column footer.
+ * Figma node 32:19984 at 1920px.
+ */
+export function Footer23({
+  logoIconSrc = footer23DefaultProps.logoIconSrc,
+  logoNameSrc = footer23DefaultProps.logoNameSrc,
+  logoTaglineSrc = footer23DefaultProps.logoTaglineSrc,
+  description = footer23DefaultProps.description,
+  socialButtons = footer23DefaultProps.socialButtons,
+  linkColumns = footer23DefaultProps.linkColumns,
+  copyright = footer23DefaultProps.copyright,
+  legalLinks = footer23DefaultProps.legalLinks,
+  className = "",
+}) {
+  return (
+    <footer
+      className={["relative w-full overflow-hidden bg-[#fdf9f6]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer23"
+    >
+      <div className="mx-auto w-full max-w-[1920px] border-t border-[#eee] bg-white">
+        <div className="flex flex-col gap-12 px-4 py-12 sm:px-6 md:px-10 lg:gap-16 lg:px-10 lg:pt-20 xl:px-10">
+          <div className="flex flex-col gap-12 lg:flex-row lg:items-start lg:justify-between">
+            <div className="flex max-w-sm flex-col gap-6">
+              <div className="flex items-center gap-2">
+                <SafeImage
+                  src={logoIconSrc}
+                  alt=""
+                  width={58}
+                  height={58}
+                  className="size-12 shrink-0 sm:size-14"
+                />
+                <div className="flex min-w-0 flex-col gap-0.5">
+                  <SafeImage
+                    src={logoNameSrc}
+                    alt="Japan Experiences & Tours"
+                    width={124}
+                    height={14}
+                    className="h-auto w-[124px] max-w-full"
+                  />
+                  <SafeImage
+                    src={logoTaglineSrc}
+                    alt=""
+                    width={84}
+                    height={10}
+                    className="h-auto w-[84px] max-w-full"
+                  />
+                </div>
+              </div>
+              <p className="text-sm leading-5 text-[#484a4d]">{description}</p>
+              <div className="flex flex-wrap items-center gap-6">
+                {socialButtons.map((social) => {
+                  const Icon = SOCIAL_ICONS[social.icon] ?? FacebookIcon;
+                  return (
+                    <a
+                      key={social.label}
+                      href={social.href ?? "#"}
+                      aria-label={social.label}
+                      className="text-[#484a4d] transition-colors duration-200 ease-out hover:text-[#e31d4a] focus-visible:outline-2 focus-visible:outline-offset-2"
+                    >
+                      <Icon className="size-6" />
+                    </a>
+                  );
+                })}
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 xl:gap-10">
+              {linkColumns.map((column) => (
+                <LinkColumn key={column.title} column={column} />
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-[#fafafa] px-4 pb-8 pt-5 sm:px-6 md:px-10 lg:px-10">
+          <div className="mb-5 h-px w-full bg-[#eee]" />
+          <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
+            <p className="text-center text-base leading-6 text-[#484a4d] sm:text-left">
+              {copyright}
+            </p>
+            <div className="flex flex-wrap items-center justify-center gap-2">
+              {legalLinks.map((link, index) => (
+                <span key={link.label} className="flex items-center gap-2">
+                  {index > 0 ? (
+                    <span className="text-[#484a4d]" aria-hidden="true">
+                      |
+                    </span>
+                  ) : null}
+                  <a
+                    href={link.href ?? "#"}
+                    className="text-base leading-6 text-[#484a4d] transition-colors duration-200 ease-out hover:text-[#18191a] focus-visible:outline-2 focus-visible:outline-offset-2"
+                  >
+                    {link.label}
+                  </a>
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer23.propTypes = footer23PropTypes;
+
+export default Footer23;

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

@@ -0,0 +1,97 @@
+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", "instagram", "linkedin", "youtube"]),
+});
+
+export const footer23PropTypes = {
+  logoIconSrc: PropTypes.string,
+  logoNameSrc: PropTypes.string,
+  logoTaglineSrc: PropTypes.string,
+  description: PropTypes.string,
+  socialButtons: PropTypes.arrayOf(socialShape),
+  linkColumns: PropTypes.arrayOf(columnShape),
+  copyright: PropTypes.string,
+  legalLinks: PropTypes.arrayOf(linkShape),
+  className: PropTypes.string,
+};
+
+export const footer23DefaultProps = {
+  logoIconSrc: "/footer/footer23/logo-icon.svg",
+  logoNameSrc: "/footer/footer23/logo-name.svg",
+  logoTaglineSrc: "/footer/footer23/logo-tagline.svg",
+  description:
+    "Connecting travelers with local experts for authentic Japanese experiences. Discover Japan beyond the tourist trail with our passionate guides.",
+  socialButtons: [
+    { label: "Facebook", href: "#", icon: "facebook" },
+    { label: "LinkedIn", href: "#", icon: "linkedin" },
+    { label: "Instagram", href: "#", icon: "instagram" },
+    { label: "YouTube", href: "#", icon: "youtube" },
+  ],
+  linkColumns: [
+    {
+      title: "About Japan Tour",
+      links: [
+        { label: "About Us", href: "#" },
+        { label: "Our Story", href: "#" },
+        { label: "Blog", href: "#" },
+        { label: "Log in", href: "#" },
+        { label: "Register", href: "#" },
+      ],
+    },
+    {
+      title: "Download Our App",
+      links: [
+        { label: "App Store", href: "#" },
+        { label: "Google Play Store", href: "#" },
+      ],
+    },
+    {
+      title: "Popular Tours Category",
+      links: [
+        { label: "16 days group tour", href: "#" },
+        { label: "11 days group tour", href: "#" },
+        { label: "Private 11 days tour", href: "#" },
+      ],
+    },
+    {
+      title: "Help & Support",
+      links: [{ label: "Contact us", href: "#" }],
+    },
+    {
+      title: "For Tour Guide",
+      links: [
+        { label: "Become a Guide", href: "#" },
+        { label: "Support", href: "#" },
+        { label: "Terms & Conditions", href: "#" },
+        { label: "Cancelation Policy", href: "#" },
+      ],
+    },
+    {
+      title: "For Travellers",
+      links: [
+        { label: "Support", href: "#" },
+        { label: "Terms & Conditions", href: "#" },
+        { label: "Cancelation Policy", href: "#" },
+      ],
+    },
+  ],
+  copyright: "© 2025 Japan Experience & Tour Company. All Rights Reserved.",
+  legalLinks: [
+    { label: "Privacy", href: "#" },
+    { label: "Terms & Conditions", href: "#" },
+  ],
+  className: "",
+};

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

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

package/templates/components/organisms/Footer24/Footer24.jsx

@@ -0,0 +1,192 @@
+"use client";
+
+import SafeImage from "../../atoms/SafeImage";
+import {
+  footer24DefaultProps,
+  footer24PropTypes,
+} from "./Footer24.propTypes";
+
+function FacebookIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M18.5 3h-3.5A5 5 0 0010 8v3.5H6.5V16H10v13h5.5V16h3.7l.7-4.5H15.5V8.8c0-1.3.4-2.3 2.3-2.3H20V3h-1.5z" />
+    </svg>
+  );
+}
+
+function TwitterIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M21.6 7h3.2l-7 8 8.2 10h-6.4l-5-6.6-5.7 6.6H5.5l7.5-8.6L5 7h6.6l4.5 6 5.5-6z" />
+    </svg>
+  );
+}
+
+function YoutubeIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M28.8 10.2a3 3 0 00-2.1-2.1C24 7.5 16 7.5 16 7.5s-8 0-10.7.6A3 3 0 003.2 10.2 31.5 31.5 0 002.5 16a31.5 31.5 0 00.7 5.8 3 3 0 002.1 2.1c2.7.6 10.7.6 10.7.6s8 0 10.7-.6a3 3 0 002.1-2.1A31.5 31.5 0 0029.5 16a31.5 31.5 0 00-.7-5.8zM13.3 20.7V11.3L20 16l-6.7 4.7z" />
+    </svg>
+  );
+}
+
+function LinkedinIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M8 12H4v16h4V12zm2-6a2.3 2.3 0 110 4.6 2.3 2.3 0 010-4.6zM28 19.5c0-5.2-2.8-7.6-6.5-7.6-3 0-4.3 1.6-5.1 2.8v-.2H12V28h4.5v-7.5c0-2 .4-3.9 2.8-3.9 2.4 0 2.4 2.2 2.4 3.9V28H28v-8.5z" />
+    </svg>
+  );
+}
+
+function InstagramIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M16 4.5c3.6 0 4 .01 5.4.08 1.3.06 2 .28 2.5.46.6.24 1.1.53 1.6.98.45.45.74.95.98 1.6.18.5.4 1.2.46 2.5.07 1.4.08 1.8.08 5.4s-.01 4-.08 5.4c-.06 1.3-.28 2-.46 2.5a4.2 4.2 0 01-.98 1.6 4.2 4.2 0 01-1.6.98c-.5.18-1.2.4-2.5.46-1.4.07-1.8.08-5.4.08s-4-.01-5.4-.08c-1.3-.06-2-.28-2.5-.46a4.2 4.2 0 01-1.6-.98 4.2 4.2 0 01-.98-1.6c-.18-.5-.4-1.2-.46-2.5-.07-1.4-.08-1.8-.08-5.4s.01-4 .08-5.4c.06-1.3.28-2 .46-2.5.24-.65.53-1.15.98-1.6.45-.45.95-.74 1.6-.98.5-.18 1.2-.4 2.5-.46 1.4-.07 1.8-.08 5.4-.08zM16 8.8a7.2 7.2 0 100 14.4 7.2 7.2 0 000-14.4zm0 11.9a4.7 4.7 0 110-9.4 4.7 4.7 0 010 9.4zm7.5-12.2a1.7 1.7 0 11-3.4 0 1.7 1.7 0 013.4 0z" />
+    </svg>
+  );
+}
+
+function FlickrIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" className={className}>
+      <circle cx="10" cy="16" r="5" />
+      <circle cx="22" cy="16" r="5" />
+    </svg>
+  );
+}
+
+const SOCIAL_ICONS = {
+  facebook: FacebookIcon,
+  twitter: TwitterIcon,
+  youtube: YoutubeIcon,
+  linkedin: LinkedinIcon,
+  instagram: InstagramIcon,
+  flickr: FlickrIcon,
+};
+
+function LinkColumn({ column }) {
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-4">
+      <p className="text-xl font-semibold leading-[30px] text-[#0e274e]">{column.title}</p>
+      <div className="h-px w-full bg-[#e3e6ef]" />
+      <ul className="flex flex-col gap-2">
+        {column.links.map((link) => (
+          <li key={link.label}>
+            <a
+              href={link.href ?? "#"}
+              className="text-base leading-[26px] text-[#0e274e] transition-colors duration-200 ease-out hover:opacity-70 focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * Footer24 — BRAC University academic footer with contact map.
+ * Figma node 32:20238 at 1920px.
+ */
+export function Footer24({
+  contactTitle = footer24DefaultProps.contactTitle,
+  contactLines = footer24DefaultProps.contactLines,
+  mapSrc = footer24DefaultProps.mapSrc,
+  mapAlt = footer24DefaultProps.mapAlt,
+  linkColumns = footer24DefaultProps.linkColumns,
+  copyright = footer24DefaultProps.copyright,
+  privacyLabel = footer24DefaultProps.privacyLabel,
+  privacyHref = footer24DefaultProps.privacyHref,
+  logoSrc = footer24DefaultProps.logoSrc,
+  logoAlt = footer24DefaultProps.logoAlt,
+  socialButtons = footer24DefaultProps.socialButtons,
+  className = "",
+}) {
+  return (
+    <footer
+      className={["relative w-full overflow-hidden bg-[#f5f6f9]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer24"
+    >
+      <div className="h-0.5 w-full bg-[#2a5caa]" />
+      <div className="mx-auto flex w-full max-w-[1920px] flex-col gap-10 px-4 py-10 sm:px-6 md:px-8 lg:gap-12 lg:px-8 lg:py-20 xl:px-8">
+        <div className="flex flex-col gap-10 xl:flex-row xl:gap-8">
+          <div className="flex w-full max-w-[282px] flex-col gap-6">
+            <p className="text-xl font-semibold leading-[30px] text-[#0e274e]">
+              {contactTitle}
+            </p>
+            <div className="flex flex-col gap-1 text-base leading-[26px] text-[#0e274e]">
+              {contactLines.map((line) => (
+                <p key={line.label}>
+                  <span className="font-semibold">{line.label}</span>
+                  {line.value}
+                </p>
+              ))}
+            </div>
+            <div className="relative aspect-[282/181] w-full max-w-[282px] overflow-hidden">
+              <SafeImage
+                src={mapSrc}
+                alt={mapAlt}
+                fill
+                className="object-cover object-center"
+              />
+            </div>
+          </div>
+
+          <div className="grid flex-1 grid-cols-1 gap-8 sm:grid-cols-2 xl:grid-cols-4 xl:gap-8">
+            {linkColumns.map((column) => (
+              <LinkColumn key={column.title} column={column} />
+            ))}
+          </div>
+        </div>
+
+        <div className="h-px w-full bg-[#e3e6ef]" />
+
+        <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+            <SafeImage
+              src={logoSrc}
+              alt={logoAlt}
+              width={94}
+              height={86}
+              className="h-auto w-[94px] shrink-0"
+            />
+            <div className="flex flex-wrap items-center gap-2 text-sm leading-[22px] text-[#0e274e]">
+              <span>{copyright}</span>
+              <span className="text-[#0e274e]/40" aria-hidden="true">
+                |
+              </span>
+              <a
+                href={privacyHref ?? "#"}
+                className="transition-colors duration-200 ease-out hover:opacity-70 focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                {privacyLabel}
+              </a>
+            </div>
+          </div>
+          <div className="flex flex-wrap items-center gap-1">
+            {socialButtons.map((social) => {
+              const Icon = SOCIAL_ICONS[social.icon] ?? FacebookIcon;
+              return (
+                <a
+                  key={social.label}
+                  href={social.href ?? "#"}
+                  aria-label={social.label}
+                  className="p-2 text-[#0e274e] transition-colors duration-200 ease-out hover:opacity-70 focus-visible:outline-2 focus-visible:outline-offset-2"
+                >
+                  <Icon className="size-8" />
+                </a>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer24.propTypes = footer24PropTypes;
+
+export default Footer24;