@notionhive/footers 0.1.0

package/templates/components/organisms/Footer18/Footer18.jsx

@@ -0,0 +1,236 @@
+"use client";
+
+import SafeImage from "../../atoms/SafeImage";
+import {
+  footer18DefaultProps,
+  footer18PropTypes,
+} from "./Footer18.propTypes";
+
+function LocationIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M8 1.5a4.25 4.25 0 00-4.25 4.25c0 3.188 4.25 7.875 4.25 7.875s4.25-4.687 4.25-7.875A4.25 4.25 0 008 1.5z"
+        stroke="currentColor"
+        strokeWidth="1.2"
+      />
+      <circle cx="8" cy="5.75" r="1.25" fill="currentColor" />
+    </svg>
+  );
+}
+
+function MailIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" className={className}>
+      <rect x="1.5" y="3.5" width="13" height="9" rx="1" stroke="currentColor" strokeWidth="1.2" />
+      <path d="M2 4.5l6 4 6-4" stroke="currentColor" strokeWidth="1.2" />
+    </svg>
+  );
+}
+
+function PhoneIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M4 2h2l.75 2.25-1.69 1.13a5.5 5.5 0 002.48 2.48L8.5 6.5l2.25.75V9.5a1 1 0 01-1 1A7.5 7.5 0 012 4a1 1 0 011-1h1z"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function FacebookIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" className={className}>
+      <circle cx="16" cy="16" r="16" />
+      <path
+        d="M17.5 8h-2.2c-2.1 0-3.5 1.4-3.5 3.6V14H9.5v2.8h2.3V24h2.9v-7.2h2.5l.4-2.8h-2.9v-1.8c0-.8.2-1.2 1.3-1.2H17.5V8z"
+        fill="#f0f7ff"
+      />
+    </svg>
+  );
+}
+
+function LinkedinIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" className={className}>
+      <circle cx="16" cy="16" r="16" />
+      <path
+        d="M10 12h2.8v10H10V12zm1.4-4.5a1.6 1.6 0 110 3.2 1.6 1.6 0 010-3.2zM14.5 12H17v1.4c.5-.9 1.6-1.6 2.8-1.6 3 0 3.6 2 3.6 4.6V22h-2.9v-5.1c0-1.2 0-2.7-1.7-2.7-1.7 0-2 1.4-2 2.6V22h-2.8V12z"
+        fill="#f0f7ff"
+      />
+    </svg>
+  );
+}
+
+function YoutubeIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" className={className}>
+      <circle cx="16" cy="16" r="16" />
+      <path d="M24.5 11.5a2.5 2.5 0 00-1.8-1.8C20.5 9 16 9 16 9s-4.5 0-6.7.7a2.5 2.5 0 00-1.8 1.8A26 26 0 006 16a26 26 0 00.5 4.5 2.5 2.5 0 001.8 1.8c2.2.7 6.7.7 6.7.7s4.5 0 6.7-.7a2.5 2.5 0 001.8-1.8A26 26 0 0026 16a26 26 0 00-.5-4.5zM14 19.5v-7l5.2 3.5L14 19.5z" fill="#f0f7ff" />
+    </svg>
+  );
+}
+
+function EmailSocialIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" className={className}>
+      <circle cx="16" cy="16" r="16" />
+      <path d="M8 11.5h16v9H8v-9zm2 1.5l6 4 6-4" stroke="#f0f7ff" strokeWidth="1.2" fill="none" />
+    </svg>
+  );
+}
+
+const CONTACT_ICONS = {
+  address: LocationIcon,
+  email: MailIcon,
+  phone: PhoneIcon,
+};
+
+const SOCIAL_ICONS = {
+  facebook: FacebookIcon,
+  linkedin: LinkedinIcon,
+  youtube: YoutubeIcon,
+  email: EmailSocialIcon,
+};
+
+function ContactRow({ item }) {
+  const Icon = CONTACT_ICONS[item.type] ?? LocationIcon;
+  const content = item.href ? (
+    <a
+      href={item.href}
+      className="text-base leading-[26px] text-[rgba(22,35,64,0.8)] transition-colors duration-200 ease-out hover:text-[#162340] focus-visible:outline-2 focus-visible:outline-offset-2"
+    >
+      {item.value}
+    </a>
+  ) : (
+    <p className="text-base leading-[26px] text-[rgba(22,35,64,0.8)]">{item.value}</p>
+  );
+
+  return (
+    <div className="flex gap-2">
+      <span className="flex shrink-0 rounded-full border border-[rgba(22,35,64,0.1)] p-2 text-[#162340]">
+        <Icon className="size-4" />
+      </span>
+      <div className="min-w-0 flex-1 pt-0.5">{content}</div>
+    </div>
+  );
+}
+
+function LinkColumn({ column, children }) {
+  return (
+    <div className="flex min-w-0 flex-col gap-4">
+      <p className="text-xl font-medium leading-[30px] text-[#162340]">{column.title}</p>
+      <ul className="flex flex-col gap-2.5">
+        {column.links.map((link) => (
+          <li key={link.label}>
+            <a
+              href={link.href ?? "#"}
+              className="text-base leading-[26px] text-[rgba(22,35,64,0.8)] transition-colors duration-200 ease-out hover:text-[#162340] focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Footer18 — AKS Khan Pharmaceuticals light blue contact footer.
+ * Figma node 32:19559 at 1440px.
+ */
+export function Footer18({
+  logoSrc = footer18DefaultProps.logoSrc,
+  logoAlt = footer18DefaultProps.logoAlt,
+  contactItems = footer18DefaultProps.contactItems,
+  linkColumns = footer18DefaultProps.linkColumns,
+  socialTitle = footer18DefaultProps.socialTitle,
+  socialLinks = footer18DefaultProps.socialLinks,
+  copyright = footer18DefaultProps.copyright,
+  legalLinks = footer18DefaultProps.legalLinks,
+  className = "",
+}) {
+  const [companyColumn, ...otherColumns] = linkColumns;
+
+  return (
+    <footer
+      className={["relative w-full overflow-hidden bg-[#f0f7ff]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer18"
+    >
+      <div className="mx-auto flex w-full max-w-[1920px] flex-col gap-10 px-4 py-12 sm:px-6 md:px-10 lg:gap-12 lg:px-[75px] lg:pt-[60px]">
+        <div className="flex flex-col gap-10 lg:flex-row lg:items-start lg:justify-center lg:gap-[90px]">
+          <div className="flex min-w-0 flex-1 flex-col gap-8">
+            <SafeImage
+              src={logoSrc}
+              alt={logoAlt}
+              width={182}
+              height={60}
+              className="h-12 w-auto max-w-[182px] sm:h-[60px]"
+            />
+            <div className="flex flex-col gap-4">
+              {contactItems.map((item) => (
+                <ContactRow key={item.value} item={item} />
+              ))}
+            </div>
+          </div>
+
+          <div className="grid min-w-0 flex-1 grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3 lg:gap-[60px]">
+            {companyColumn ? (
+              <LinkColumn column={companyColumn}>
+                <div className="mt-6 flex flex-col gap-4">
+                  <p className="text-xl font-medium leading-[30px] text-[#162340]">{socialTitle}</p>
+                  <div className="flex flex-wrap gap-4">
+                    {socialLinks.map((social) => {
+                      const Icon = SOCIAL_ICONS[social.icon] ?? FacebookIcon;
+                      return (
+                        <a
+                          key={social.label}
+                          href={social.href ?? "#"}
+                          aria-label={social.label}
+                          className="transition-transform duration-300 ease-out hover:scale-105 motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2"
+                        >
+                          <Icon className="size-8 text-[#2e8168]" />
+                        </a>
+                      );
+                    })}
+                  </div>
+                </div>
+              </LinkColumn>
+            ) : null}
+            {otherColumns.map((column) => (
+              <LinkColumn key={column.title} column={column} />
+            ))}
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-5 border-t border-[#ededed] pt-5">
+          <div className="flex flex-col gap-4 text-sm leading-[22px] text-[rgba(22,35,64,0.8)] sm:flex-row sm:items-center sm:justify-between">
+            <p>{copyright}</p>
+            <div className="flex gap-5">
+              {legalLinks.map((link) => (
+                <a
+                  key={link.label}
+                  href={link.href ?? "#"}
+                  className="transition-colors duration-200 ease-out hover:text-[#162340] focus-visible:outline-2 focus-visible:outline-offset-2"
+                >
+                  {link.label}
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer18.propTypes = footer18PropTypes;
+
+export default Footer18;

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

@@ -0,0 +1,92 @@
+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 contactItemShape = PropTypes.shape({
+  type: PropTypes.oneOf(["address", "email", "phone"]).isRequired,
+  value: PropTypes.string.isRequired,
+  href: PropTypes.string,
+});
+
+const socialShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  icon: PropTypes.oneOf(["facebook", "linkedin", "youtube", "email"]),
+});
+
+const legalLinkShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+});
+
+export const footer18PropTypes = {
+  logoSrc: PropTypes.string,
+  logoAlt: PropTypes.string,
+  contactItems: PropTypes.arrayOf(contactItemShape),
+  linkColumns: PropTypes.arrayOf(columnShape),
+  socialTitle: PropTypes.string,
+  socialLinks: PropTypes.arrayOf(socialShape),
+  copyright: PropTypes.string,
+  legalLinks: PropTypes.arrayOf(legalLinkShape),
+  className: PropTypes.string,
+};
+
+export const footer18DefaultProps = {
+  logoSrc: "/footer/footer18/logo.svg",
+  logoAlt: "AKS Khan Pharmaceuticals",
+  contactItems: [
+    {
+      type: "address",
+      value: "Rupayan Prime, Plot 02, Road 07, Dhanmondi, Dhaka – 1205",
+    },
+    { type: "email", value: "info@akskhanpharma.com", href: "mailto:info@akskhanpharma.com" },
+    { type: "phone", value: "Tel:- +8801847360360", href: "tel:+8801847360360" },
+  ],
+  linkColumns: [
+    {
+      title: "The Company",
+      links: [
+        { label: "About Us", href: "#" },
+        { label: "Board of Directors", href: "#" },
+        { label: "Management Team", href: "#" },
+      ],
+    },
+    {
+      title: "Quick Links",
+      links: [
+        { label: "Careers", href: "#" },
+        { label: "Impacts", href: "#" },
+        { label: "News", href: "#" },
+        { label: "Contact Us", href: "#" },
+      ],
+    },
+    {
+      title: "Services",
+      links: [
+        { label: "AKS Khan Pharmacy", href: "#" },
+        { label: "AKS Khan Diagnostics", href: "#" },
+      ],
+    },
+  ],
+  socialTitle: "Follow us on",
+  socialLinks: [
+    { label: "Facebook", href: "#", icon: "facebook" },
+    { label: "LinkedIn", href: "#", icon: "linkedin" },
+    { label: "YouTube", href: "#", icon: "youtube" },
+    { label: "Email", href: "#", icon: "email" },
+  ],
+  copyright: "© 2024 AKS Khan Pharmaceuticals Ltd. All Rights Reserved.",
+  legalLinks: [
+    { label: "Privacy", href: "#" },
+    { label: "Terms of Use", href: "#" },
+  ],
+  className: "",
+};

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

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

package/templates/components/organisms/Footer19/Footer19.jsx

@@ -0,0 +1,287 @@
+"use client";
+
+import { useState } from "react";
+import SafeImage from "../../atoms/SafeImage";
+import {
+  footer19DefaultProps,
+  footer19PropTypes,
+} from "./Footer19.propTypes";
+
+function LocationIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 18 18" fill="none" aria-hidden="true" className={className}>
+      <path d="M9 1.5a5.25 5.25 0 00-5.25 5.25c0 3.938 5.25 9.75 5.25 9.75s5.25-5.812 5.25-9.75A5.25 5.25 0 009 1.5z" stroke="currentColor" strokeWidth="1.2" />
+      <circle cx="9" cy="6.75" r="1.5" fill="currentColor" />
+    </svg>
+  );
+}
+
+function MailIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 18 18" fill="none" aria-hidden="true" className={className}>
+      <rect x="2" y="4" width="14" height="10" rx="1" stroke="currentColor" strokeWidth="1.2" />
+      <path d="M2 5.5l7 4.5 7-4.5" stroke="currentColor" strokeWidth="1.2" />
+    </svg>
+  );
+}
+
+function PhoneIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 18 18" fill="none" aria-hidden="true" className={className}>
+      <path d="M4.5 2.25h2.25l.75 2.25-1.69 1.13a7.5 7.5 0 003.38 3.38L10.5 7.5l2.25.75V10.5a1.13 1.13 0 01-1.13 1.13A9.38 9.38 0 012.25 4.5a1.13 1.13 0 011.13-1.13z" stroke="currentColor" strokeWidth="1.2" />
+    </svg>
+  );
+}
+
+function FacebookIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 30 30" fill="currentColor" aria-hidden="true" className={className}>
+      <circle cx="15" cy="15" r="15" />
+      <path d="M16.5 8h-2c-2 0-3.2 1.3-3.2 3.4V14H9v2.5h2.3V24h3V16.5h2.6l.4-2.5h-3v-1.6c0-.8.2-1.3 1.2-1.3H16.5V8z" fill="white" />
+    </svg>
+  );
+}
+
+function LinkedinIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 30 30" fill="currentColor" aria-hidden="true" className={className}>
+      <circle cx="15" cy="15" r="15" />
+      <path d="M10 11h2.8v11H10V11zm1.4-4.5a1.6 1.6 0 110 3.2 1.6 1.6 0 010-3.2zM14.5 11H17v1.5c.5-.9 1.6-1.6 2.8-1.6 3 0 3.6 2 3.6 4.6V22h-2.9v-5.1c0-1.2 0-2.7-1.7-2.7-1.7 0-2 1.4-2 2.6V22h-2.8V11z" fill="white" />
+    </svg>
+  );
+}
+
+function InstagramIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 30 30" fill="currentColor" aria-hidden="true" className={className}>
+      <circle cx="15" cy="15" r="15" />
+      <rect x="9" y="9" width="12" height="12" rx="3" stroke="white" strokeWidth="1.2" fill="none" />
+      <circle cx="15" cy="15" r="2.5" stroke="white" strokeWidth="1.2" fill="none" />
+    </svg>
+  );
+}
+
+function YoutubeIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 30 30" fill="currentColor" aria-hidden="true" className={className}>
+      <circle cx="15" cy="15" r="15" />
+      <path d="M22.5 10.5a2.5 2.5 0 00-1.8-1.8C18.5 8 15 8 15 8s-3.5 0-5.7.7a2.5 2.5 0 00-1.8 1.8A26 26 0 007.5 15a26 26 0 00.5 4.5 2.5 2.5 0 001.8 1.8c2.2.7 5.7.7 5.7.7s3.5 0 5.7-.7a2.5 2.5 0 001.8-1.8A26 26 0 0022.5 15a26 26 0 00-.5-4.5zM13 18.5v-7l5.2 3.5L13 18.5z" fill="white" />
+    </svg>
+  );
+}
+
+function ChevronUpIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 14 14" fill="none" aria-hidden="true" className={className}>
+      <path d="M3 9l4-4 4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+const CONTACT_ICONS = { address: LocationIcon, email: MailIcon, phone: PhoneIcon };
+const SOCIAL_ICONS = {
+  facebook: FacebookIcon,
+  linkedin: LinkedinIcon,
+  instagram: InstagramIcon,
+  youtube: YoutubeIcon,
+};
+
+function LinkList({ links }) {
+  return (
+    <ul className="flex flex-col gap-2">
+      {links.map((link) => (
+        <li key={link.label}>
+          <a
+            href={link.href ?? "#"}
+            className="text-sm leading-[22px] text-white transition-colors duration-200 ease-out hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2"
+          >
+            {link.label}
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+/**
+ * Footer19 — Grameen Danone blue footer with newsletter and payment badges.
+ * Figma node 32:19560 at 1366px.
+ */
+export function Footer19({
+  logoSrc = footer19DefaultProps.logoSrc,
+  brandTitle = footer19DefaultProps.brandTitle,
+  brandSubtitle = footer19DefaultProps.brandSubtitle,
+  contactItems = footer19DefaultProps.contactItems,
+  quickLinksTitle = footer19DefaultProps.quickLinksTitle,
+  quickLinks = footer19DefaultProps.quickLinks,
+  aboutTitle = footer19DefaultProps.aboutTitle,
+  aboutLinks = footer19DefaultProps.aboutLinks,
+  accountTitle = footer19DefaultProps.accountTitle,
+  accountLinks = footer19DefaultProps.accountLinks,
+  newsletterTitle = footer19DefaultProps.newsletterTitle,
+  newsletterDescription = footer19DefaultProps.newsletterDescription,
+  email: controlledEmail,
+  onEmailChange,
+  onNewsletterSubmit,
+  socialLinks = footer19DefaultProps.socialLinks,
+  paymentBadges = footer19DefaultProps.paymentBadges,
+  copyright = footer19DefaultProps.copyright,
+  onBackToTop,
+  className = "",
+}) {
+  const [internalEmail, setInternalEmail] = useState("");
+  const email = controlledEmail ?? internalEmail;
+
+  const handleEmailChange = (event) => {
+    if (onEmailChange) onEmailChange(event.target.value);
+    else setInternalEmail(event.target.value);
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    onNewsletterSubmit?.(email);
+  };
+
+  return (
+    <footer
+      className={["relative w-full overflow-hidden bg-[#005d9f]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer19"
+    >
+      <div className="mx-auto w-full max-w-[1920px] px-4 py-12 sm:px-6 md:px-10 lg:px-[60px] lg:py-16">
+        <div className="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-4 lg:gap-8">
+          <div className="flex flex-col gap-6">
+            <div className="flex items-center gap-3">
+              <SafeImage
+                src={logoSrc}
+                alt=""
+                width={87}
+                height={80}
+                className="h-16 w-auto max-w-[87px] sm:h-20"
+              />
+              <div>
+                <p className="text-base font-semibold leading-6 text-white">{brandTitle}</p>
+                <p className="text-sm text-white/90">{brandSubtitle}</p>
+              </div>
+            </div>
+            <div className="flex flex-col gap-4">
+              {contactItems.map((item) => {
+                const Icon = CONTACT_ICONS[item.type] ?? LocationIcon;
+                return (
+                  <div key={item.value} className="flex gap-2">
+                    <span className="flex shrink-0 rounded-full bg-white/10 p-1.5 text-white">
+                      <Icon className="size-[18px]" />
+                    </span>
+                    <div className="text-sm leading-[22px] text-white">
+                      {item.label ? <span>{item.label} </span> : null}
+                      {item.href ? (
+                        <a href={item.href} className="hover:underline focus-visible:outline-2 focus-visible:outline-offset-2">
+                          {item.value}
+                        </a>
+                      ) : (
+                        item.value
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          <div>
+            <p className="mb-4 font-serif text-lg font-bold leading-7 text-white">{quickLinksTitle}</p>
+            <LinkList links={quickLinks} />
+          </div>
+
+          <div className="flex flex-col gap-8">
+            <div>
+              <p className="mb-4 font-serif text-lg font-bold leading-7 text-white">{aboutTitle}</p>
+              <LinkList links={aboutLinks} />
+            </div>
+            <div>
+              <p className="mb-4 font-serif text-lg font-bold leading-7 text-white">{accountTitle}</p>
+              <LinkList links={accountLinks} />
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-6">
+            <div>
+              <p className="mb-2 font-serif text-lg font-bold leading-7 text-white">{newsletterTitle}</p>
+              <p className="mb-4 text-sm leading-[22px] text-white">{newsletterDescription}</p>
+              <form onSubmit={handleSubmit} className="flex flex-col gap-2 sm:flex-row">
+                <label className="sr-only" htmlFor="footer19-email">
+                  Email address
+                </label>
+                <input
+                  id="footer19-email"
+                  type="email"
+                  value={email}
+                  onChange={handleEmailChange}
+                  placeholder="Enter your email address"
+                  className="h-[50px] flex-1 rounded-[5px] border border-[#e1eaef] bg-[rgba(7,4,38,0.1)] px-5 text-sm text-white placeholder:text-white/60 focus-visible:outline-2 focus-visible:outline-offset-2"
+                />
+                <button
+                  type="submit"
+                  className="h-[50px] shrink-0 rounded-[5px] bg-white px-6 text-sm font-semibold uppercase text-[#0d2835] transition-colors duration-200 ease-out hover:bg-white/90 focus-visible:outline-2 focus-visible:outline-offset-2"
+                >
+                  Subscribe
+                </button>
+              </form>
+            </div>
+            <div className="flex flex-wrap gap-4">
+              {socialLinks.map((social) => {
+                const Icon = SOCIAL_ICONS[social.icon] ?? FacebookIcon;
+                return (
+                  <a
+                    key={social.label}
+                    href={social.href ?? "#"}
+                    aria-label={social.label}
+                    className="transition-transform duration-300 ease-out hover:scale-105 motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2"
+                  >
+                    <Icon className="size-[30px] text-[#1877f2]" />
+                  </a>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          onClick={onBackToTop ?? (() => window.scrollTo({ top: 0, behavior: "smooth" }))}
+          className="mx-auto mt-10 flex size-[42px] items-center justify-center rounded-full bg-white text-[#005d9f] transition-transform duration-200 ease-out hover:scale-105 motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2"
+          aria-label="Back to top"
+        >
+          <ChevronUpIcon className="size-3.5" />
+        </button>
+
+        <div className="mt-6 border-t border-white/20 pt-6">
+          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+            <p className="text-sm leading-[22px] text-white/80">{copyright}</p>
+            <div className="flex flex-wrap gap-2">
+              {paymentBadges.map((badge) => (
+                <div
+                  key={badge.label}
+                  className="flex h-[30px] w-[45px] items-center justify-center rounded-[5px] bg-[#e1eaef] p-1"
+                >
+                  <SafeImage
+                    src={badge.src}
+                    alt={badge.label}
+                    width={40}
+                    height={20}
+                    className="h-auto max-h-4 w-auto max-w-full object-contain"
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer19.propTypes = footer19PropTypes;
+
+export default Footer19;