@notionhive/footers 0.1.0

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

@@ -0,0 +1,116 @@
+import PropTypes from "prop-types";
+
+const linkShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+});
+
+const contactItemShape = PropTypes.shape({
+  type: PropTypes.oneOf(["address", "email", "phone"]).isRequired,
+  label: PropTypes.string,
+  value: PropTypes.string.isRequired,
+  href: PropTypes.string,
+});
+
+const socialShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  icon: PropTypes.oneOf(["facebook", "linkedin", "instagram", "youtube"]),
+});
+
+const paymentBadgeShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  src: PropTypes.string.isRequired,
+});
+
+export const footer19PropTypes = {
+  logoSrc: PropTypes.string,
+  brandTitle: PropTypes.string,
+  brandSubtitle: PropTypes.string,
+  contactItems: PropTypes.arrayOf(contactItemShape),
+  quickLinksTitle: PropTypes.string,
+  quickLinks: PropTypes.arrayOf(linkShape),
+  aboutTitle: PropTypes.string,
+  aboutLinks: PropTypes.arrayOf(linkShape),
+  accountTitle: PropTypes.string,
+  accountLinks: PropTypes.arrayOf(linkShape),
+  newsletterTitle: PropTypes.string,
+  newsletterDescription: PropTypes.string,
+  email: PropTypes.string,
+  onEmailChange: PropTypes.func,
+  onNewsletterSubmit: PropTypes.func,
+  socialLinks: PropTypes.arrayOf(socialShape),
+  paymentBadges: PropTypes.arrayOf(paymentBadgeShape),
+  copyright: PropTypes.string,
+  onBackToTop: PropTypes.func,
+  className: PropTypes.string,
+};
+
+export const footer19DefaultProps = {
+  logoSrc: "/footer/footer19/logo.png",
+  brandTitle: "Grameen Danone Foods Limited",
+  brandSubtitle: "A Social Business Company",
+  contactItems: [
+    {
+      type: "address",
+      value: "Grameen Telecom Bhaban, Level-9, Mirpur Zoo Road, Dhaka-1216, Bangladesh",
+    },
+    {
+      type: "email",
+      label: "For Career:",
+      value: "info@grameendanone.net",
+      href: "mailto:info@grameendanone.net",
+    },
+    {
+      type: "email",
+      label: "For Contact:",
+      value: "contact@grameendanone.net",
+      href: "mailto:contact@grameendanone.net",
+    },
+    {
+      type: "phone",
+      value: "+880 1708-418508",
+      href: "tel:+8801708418508",
+    },
+  ],
+  quickLinksTitle: "Quick Links",
+  quickLinks: [
+    { label: "Home", href: "#" },
+    { label: "Products", href: "#" },
+    { label: "B2B Collaboration", href: "#" },
+    { label: "Donate", href: "#" },
+    { label: "Inspiring Stories", href: "#" },
+    { label: "Blog", href: "#" },
+    { label: "Career", href: "#" },
+  ],
+  aboutTitle: "About Us",
+  aboutLinks: [
+    { label: "Who we are", href: "#" },
+    { label: "Our awards & certifications", href: "#" },
+  ],
+  accountTitle: "Account",
+  accountLinks: [
+    { label: "Registration", href: "#" },
+    { label: "Log in", href: "#" },
+  ],
+  newsletterTitle: "Subscribe Newsletter",
+  newsletterDescription: "Subscribe newsletter to get updates and offers!",
+  email: "",
+  socialLinks: [
+    { label: "Facebook", href: "#", icon: "facebook" },
+    { label: "LinkedIn", href: "#", icon: "linkedin" },
+    { label: "Instagram", href: "#", icon: "instagram" },
+    { label: "YouTube", href: "#", icon: "youtube" },
+  ],
+  paymentBadges: [
+    { label: "Visa", src: "/footer/footer19/payment-visa.svg" },
+    { label: "Mastercard", src: "/footer/footer19/payment-mastercard.svg" },
+    { label: "bKash", src: "/footer/footer19/payment-bkash.png" },
+    { label: "Nagad", src: "/footer/footer19/payment-nagad.png" },
+    { label: "Upay", src: "/footer/footer19/payment-upay.png" },
+    { label: "Nexus Pay", src: "/footer/footer19/payment-nexus.png" },
+    { label: "Rocket", src: "/footer/footer19/payment-rocket.png" },
+  ],
+  copyright: "@grameen.danonebd 2022",
+  className: "",
+};

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

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

package/templates/components/organisms/Footer20/Footer20.jsx

@@ -0,0 +1,201 @@
+"use client";
+
+import { useState } from "react";
+import SafeImage from "../../atoms/SafeImage";
+import {
+  footer20DefaultProps,
+  footer20PropTypes,
+} from "./Footer20.propTypes";
+
+function TwitterIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 14 14" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M11.1 1.5h2l-4.2 4.8L13.7 12.5h-3.8l-3-4-3.4 4H1.8l4.5-5.2L1.5 1.5h3.9l2.7 3.5L11.1 1.5zm-.7 10.1h1.1L4.4 2.6H3.2l7.2 9z" />
+    </svg>
+  );
+}
+
+function InstagramIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 14 14" fill="none" aria-hidden="true" className={className}>
+      <rect x="2" y="2" width="10" height="10" rx="2.5" stroke="currentColor" strokeWidth="1" />
+      <circle cx="7" cy="7" r="2" stroke="currentColor" strokeWidth="1" />
+    </svg>
+  );
+}
+
+function FacebookIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 14 14" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M8.5 2.5h-1.5A1.5 1.5 0 005.5 4v1.5H4v2h1.5V12h2.5V7.5H10l.5-2H8.5V4c0-.28.22-.5.5-.5H10V2.5H8.5z" />
+    </svg>
+  );
+}
+
+function YoutubeIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 14 14" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M12.5 4.2a1.5 1.5 0 00-1.05-1.05C10.4 3 7 3 7 3s-3.4 0-4.45.15A1.5 1.5 0 001.5 4.2 15.7 15.7 0 001.35 7a15.7 15.7 0 00.15 2.8 1.5 1.5 0 001.05 1.05C3.6 11 7 11 7 11s3.4 0 4.45-.15a1.5 1.5 0 001.05-1.05A15.7 15.7 0 0012.65 7a15.7 15.7 0 00-.15-2.8zM5.75 8.75V5.25L9 7l-3.25 1.75z" />
+    </svg>
+  );
+}
+
+function DiscordIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 14 14" fill="currentColor" aria-hidden="true" className={className}>
+      <path d="M11.7 2.5A9.4 9.4 0 009 2a6.6 6.6 0 00-.3.6A8.7 8.7 0 005.5 2 9.4 9.4 0 003 2.5 12.5 12.5 0 001 8.5a9.4 9.4 0 002.9 1.5c.2-.3.4-.7.6-1a6.2 6.2 0 01-1-.5l.2-.2c1.9.9 4 1 4 1s2.1-.1 4-1l.2.2a6.2 6.2 0 01-1 .5c.2.3.4.7.6 1a9.4 9.4 0 002.9-1.5 12.5 12.5 0 00-2-6 9.4 9.4 0 00-2.7-.5zM5.5 7.5a1 1 0 110-2 1 1 0 010 2zm3 0a1 1 0 110-2 1 1 0 010 2z" />
+    </svg>
+  );
+}
+
+function MailIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" className={className}>
+      <rect x="2" y="4" width="16" height="12" rx="1" stroke="currentColor" strokeWidth="1.2" />
+      <path d="M2 6l8 5 8-5" stroke="currentColor" strokeWidth="1.2" />
+    </svg>
+  );
+}
+
+const SOCIAL_ICONS = {
+  twitter: TwitterIcon,
+  instagram: InstagramIcon,
+  facebook: FacebookIcon,
+  youtube: YoutubeIcon,
+  discord: DiscordIcon,
+};
+
+/**
+ * Footer20 — OpenCoins dark gradient footer with newsletter.
+ * Figma node 32:19561 (footer section 32:19907).
+ */
+export function Footer20({
+  logoSrc = footer20DefaultProps.logoSrc,
+  logoAlt = footer20DefaultProps.logoAlt,
+  bgSrc = footer20DefaultProps.bgSrc,
+  linkColumns = footer20DefaultProps.linkColumns,
+  newsletterDescription = footer20DefaultProps.newsletterDescription,
+  email: controlledEmail,
+  onEmailChange,
+  onNewsletterSubmit,
+  socialLinks = footer20DefaultProps.socialLinks,
+  copyright = footer20DefaultProps.copyright,
+  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 min-h-[340px] w-full overflow-hidden", className].filter(Boolean).join(" ")}
+      data-footer="footer20"
+    >
+      {bgSrc ? (
+        <SafeImage
+          src={bgSrc}
+          alt=""
+          fill
+          className="object-cover object-center"
+          aria-hidden="true"
+        />
+      ) : null}
+      <div className="absolute inset-0 bg-[#0e111e]/85" aria-hidden="true" />
+
+      <div className="relative mx-auto w-full max-w-[1920px] px-4 py-12 sm:px-6 md:px-10 lg:px-10 lg:py-14 xl:px-10">
+        <div className="grid grid-cols-1 gap-10 lg:grid-cols-12 lg:gap-8">
+          <div className="flex flex-col gap-4 lg:col-span-3">
+            <SafeImage
+              src={logoSrc}
+              alt={logoAlt}
+              width={160}
+              height={30}
+              className="h-7 w-auto max-w-[160px] sm:h-8"
+            />
+            <div className="flex flex-wrap gap-2.5">
+              {socialLinks.map((social) => {
+                const Icon = SOCIAL_ICONS[social.icon] ?? TwitterIcon;
+                return (
+                  <a
+                    key={social.label}
+                    href={social.href ?? "#"}
+                    aria-label={social.label}
+                    className="rounded-full border border-white/10 p-3 text-white transition-colors duration-200 ease-out hover:border-white/30 hover:bg-white/5 focus-visible:outline-2 focus-visible:outline-offset-2"
+                  >
+                    <Icon className="size-3.5" />
+                  </a>
+                );
+              })}
+            </div>
+          </div>
+
+          {linkColumns.map((column, index) => (
+            <div key={index} className="flex flex-col gap-4 lg:col-span-2">
+              <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-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="flex flex-col gap-4 lg:col-span-3 lg:items-end">
+            <p className="max-w-[338px] text-sm leading-[22px] text-white/80 lg:text-right">
+              {newsletterDescription}
+            </p>
+            <form onSubmit={handleSubmit} className="flex w-full max-w-[338px] flex-col gap-2 sm:flex-row">
+              <label className="sr-only" htmlFor="footer20-email">
+                Email address
+              </label>
+              <div className="flex flex-1 items-center gap-1 rounded-lg border border-white/10 px-3 py-2">
+                <MailIcon className="size-5 shrink-0 text-pink-400 opacity-80" />
+                <input
+                  id="footer20-email"
+                  type="email"
+                  value={email}
+                  onChange={handleEmailChange}
+                  placeholder="Enter your email"
+                  className="min-w-0 flex-1 bg-transparent text-base text-white/60 placeholder:text-white/60 focus-visible:outline-none"
+                />
+              </div>
+              <button
+                type="submit"
+                className="shrink-0 rounded-lg px-4 py-2 text-base font-semibold text-white transition-opacity duration-200 ease-out hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2"
+                style={{
+                  backgroundImage:
+                    "linear-gradient(146deg, rgb(249, 206, 52) 31%, rgb(238, 42, 123) 56%, rgb(98, 40, 215) 140%)",
+                }}
+              >
+                Subscribe
+              </button>
+            </form>
+          </div>
+        </div>
+
+        <div className="mt-12 border-t border-white/10 pt-8">
+          <p className="text-center text-sm leading-[22px] text-white/60">{copyright}</p>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer20.propTypes = footer20PropTypes;
+
+export default Footer20;

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

@@ -0,0 +1,70 @@
+import PropTypes from "prop-types";
+
+const linkShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+});
+
+const columnShape = PropTypes.shape({
+  links: PropTypes.arrayOf(linkShape),
+});
+
+const socialShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  icon: PropTypes.oneOf(["twitter", "instagram", "facebook", "youtube", "discord"]),
+});
+
+export const footer20PropTypes = {
+  logoSrc: PropTypes.string,
+  logoAlt: PropTypes.string,
+  bgSrc: PropTypes.string,
+  linkColumns: PropTypes.arrayOf(columnShape),
+  newsletterDescription: PropTypes.string,
+  email: PropTypes.string,
+  onEmailChange: PropTypes.func,
+  onNewsletterSubmit: PropTypes.func,
+  socialLinks: PropTypes.arrayOf(socialShape),
+  copyright: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export const footer20DefaultProps = {
+  logoSrc: "/footer/footer20/logo.png",
+  logoAlt: "OpenCoins",
+  bgSrc: "/footer/footer20/bg.png",
+  linkColumns: [
+    {
+      links: [
+        { label: "Latest Coins", href: "#" },
+        { label: "About Us", href: "#" },
+        { label: "Blog", href: "#" },
+      ],
+    },
+    {
+      links: [
+        { label: "Quick Guide", href: "#" },
+        { label: "Customer care", href: "#" },
+        { label: "FAQs", href: "#" },
+      ],
+    },
+    {
+      links: [
+        { label: "Join OpenCoins", href: "#" },
+        { label: "Terms & Condition", href: "#" },
+      ],
+    },
+  ],
+  newsletterDescription:
+    "Whether you're new to rare coins, or just new to OpenCoins, we're glad you are here. Stay informed of our special offers.",
+  email: "",
+  socialLinks: [
+    { label: "Twitter", href: "#", icon: "twitter" },
+    { label: "Instagram", href: "#", icon: "instagram" },
+    { label: "Facebook", href: "#", icon: "facebook" },
+    { label: "YouTube", href: "#", icon: "youtube" },
+    { label: "Discord", href: "#", icon: "discord" },
+  ],
+  copyright: "© 2023 OpenCoins Inc.",
+  className: "",
+};

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

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

package/templates/components/organisms/Footer21/Footer21.jsx

@@ -0,0 +1,134 @@
+"use client";
+
+import SafeImage from "../../atoms/SafeImage";
+import {
+  footer21DefaultProps,
+  footer21PropTypes,
+} from "./Footer21.propTypes";
+
+function ExternalLinkIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 14 14" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M9 2h3v3M12 2L6 8M5 3H3a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V9"
+        stroke="#E42400"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function FooterLink({ link }) {
+  return (
+    <a
+      href={link.href ?? "#"}
+      target={link.external ? "_blank" : undefined}
+      rel={link.external ? "noopener noreferrer" : undefined}
+      className="flex items-center gap-1.5 text-base leading-6 text-white/80 transition-colors duration-200 ease-out hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2"
+    >
+      <span>{link.label}</span>
+      {link.external ? <ExternalLinkIcon className="size-3.5 shrink-0" /> : null}
+    </a>
+  );
+}
+
+function SectionBlock({ section }) {
+  return (
+    <div className="flex min-w-0 flex-col gap-4">
+      <p className="text-base font-bold leading-6 text-white">{section.title}</p>
+      <ul className="flex flex-col gap-4">
+        {section.links.map((link) => (
+          <li key={`${section.title}-${link.label}`}>
+            <FooterLink link={link} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * Footer21 — Progressive insurance dark multi-section footer.
+ * Figma node 32:19982 at 1440px.
+ */
+export function Footer21({
+  logoSrc = footer21DefaultProps.logoSrc,
+  logoAlt = footer21DefaultProps.logoAlt,
+  sections = footer21DefaultProps.sections,
+  externalLinks = footer21DefaultProps.externalLinks,
+  legalLinks = footer21DefaultProps.legalLinks,
+  copyright = footer21DefaultProps.copyright,
+  className = "",
+}) {
+  const columnGroups = [
+    [sections[0], sections[1]],
+    [sections[2], sections[3]],
+    [sections[4], sections[5]],
+    [sections[6]],
+  ].filter((group) => group.some(Boolean));
+
+  return (
+    <footer
+      className={["relative w-full overflow-hidden bg-[#02182f]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer21"
+    >
+      <div className="mx-auto w-full max-w-[1920px] px-4 py-12 sm:px-6 md:px-10 lg:px-[75px] lg:py-[60px]">
+        <div className="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-5 lg:gap-8">
+          {columnGroups.map((group, groupIndex) => (
+            <div key={groupIndex} className="flex flex-col gap-10">
+              {group.map((section) =>
+                section ? <SectionBlock key={section.title} section={section} /> : null,
+              )}
+            </div>
+          ))}
+          <div className="flex flex-col gap-4 pt-0 lg:pt-10">
+            <ul className="flex flex-col gap-4">
+              {externalLinks.map((link, index) => (
+                <li key={`${link.label}-${index}`}>
+                  <FooterLink link={link} />
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        <div className="mt-12 flex flex-col gap-4 border-t border-white/20 pt-6">
+          <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
+            <SafeImage
+              src={logoSrc}
+              alt={logoAlt}
+              width={210}
+              height={42}
+              className="h-8 w-auto max-w-[210px] sm:h-10"
+            />
+            <div className="flex flex-col gap-4 text-sm leading-[22px] text-white/60 sm:flex-row sm:flex-wrap sm:items-center">
+              {legalLinks.map((link, index) => (
+                <span key={link.label} className="flex items-center gap-5">
+                  {index > 0 ? (
+                    <span className="hidden h-3 w-px bg-white/20 sm:block" aria-hidden="true" />
+                  ) : null}
+                  <a
+                    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>
+                </span>
+              ))}
+              <span className="hidden h-3 w-px bg-white/20 sm:block" aria-hidden="true" />
+              <span className="whitespace-nowrap">{copyright}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer21.propTypes = footer21PropTypes;
+
+export default Footer21;

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

@@ -0,0 +1,122 @@
+import PropTypes from "prop-types";
+
+const linkShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  external: PropTypes.bool,
+});
+
+const sectionShape = PropTypes.shape({
+  title: PropTypes.string.isRequired,
+  links: PropTypes.arrayOf(linkShape),
+});
+
+const legalLinkShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+});
+
+export const footer21PropTypes = {
+  logoSrc: PropTypes.string,
+  logoAlt: PropTypes.string,
+  sections: PropTypes.arrayOf(sectionShape),
+  externalLinks: PropTypes.arrayOf(linkShape),
+  legalLinks: PropTypes.arrayOf(legalLinkShape),
+  copyright: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export const footer21DefaultProps = {
+  logoSrc: "/footer/footer21/logo.png",
+  logoAlt: "Progressive",
+  sections: [
+    {
+      title: "Our Products",
+      links: [
+        { label: "Micro Insurance", href: "#" },
+        { label: "Single Insurance", href: "#" },
+        { label: "Group Insurance", href: "#" },
+        { label: "Special Exclusive Insurance", href: "#" },
+        { label: "Macro Insurance", href: "#" },
+      ],
+    },
+    {
+      title: "Claims",
+      links: [
+        { label: "Claims information", href: "#" },
+        { label: "Claims procedure", href: "#" },
+        { label: "Download claims form", href: "#" },
+        { label: "Outstanding Claim", href: "#" },
+        { label: "Claims gallery", href: "#" },
+      ],
+    },
+    {
+      title: "About Us",
+      links: [
+        { label: "Who we are", href: "#" },
+        { label: "Corporate Information", href: "#" },
+        { label: "Company Profile", href: "#" },
+      ],
+    },
+    {
+      title: "Insurance Support",
+      links: [
+        { label: "Support", href: "#" },
+        { label: "Insurance Guidelines", href: "#" },
+        { label: "Bank Assurance", href: "#" },
+        { label: "Digital Platforms", href: "#" },
+        { label: "Others", href: "#" },
+        { label: "Investments", href: "#" },
+      ],
+    },
+    {
+      title: "Board",
+      links: [
+        { label: "Board of directors", href: "#" },
+        { label: "Sponsor Share Holders", href: "#" },
+        { label: "Share Holding Position", href: "#" },
+        { label: "Executive Committee", href: "#" },
+        { label: "Audit Committee", href: "#" },
+        { label: "NRC Committee", href: "#" },
+      ],
+    },
+    {
+      title: "Management Board",
+      links: [
+        { label: "Corporate Management", href: "#" },
+        { label: "Executives", href: "#" },
+        { label: "Marketing", href: "#" },
+      ],
+    },
+    {
+      title: "Quick Link",
+      links: [
+        { label: "Branches", href: "#" },
+        { label: "Financial information", href: "#" },
+        { label: "Investor information", href: "#" },
+        { label: "Reports", href: "#" },
+        { label: "Mujib Corner", href: "#" },
+        { label: "News & events", href: "#" },
+        { label: "Media", href: "#" },
+        { label: "Career", href: "#" },
+      ],
+    },
+  ],
+  externalLinks: [
+    { label: "IDRA", href: "#", external: true },
+    { label: "BSEC", href: "#", external: true },
+    { label: "DSE", href: "#", external: true },
+    { label: "CSE", href: "#", external: true },
+    { label: "CDBL", href: "#", external: true },
+    { label: "CDBL", href: "#", external: true },
+    { label: "Bangladesh Bank", href: "#", external: true },
+    { label: "BIA", href: "#", external: true },
+  ],
+  legalLinks: [
+    { label: "Return & Refund Policy", href: "#" },
+    { label: "Terms & Conditions", href: "#" },
+    { label: "Privacy Policies", href: "#" },
+  ],
+  copyright: "2024 © All Rights Reserved.",
+  className: "",
+};

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

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