@notionhive/footers 0.1.0

package/templates/components/organisms/Footer08/Footer08.jsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { SafeImage } from "../../atoms/SafeImage";
+import {
+  footer08DefaultProps,
+  footer08PropTypes,
+} from "./Footer08.propTypes";
+
+function FacebookIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 34 34" fill="none" aria-hidden="true" className={className}>
+      <circle cx="17" cy="17" r="17" fill="white" />
+      <path d="M18.5 10h-2a2 2 0 00-2 2v2h-2v3h2v7h3v-7h2.5l.5-3h-3v-2c0-.55.45-1 1-1h2V10z" fill="#0054a6" />
+    </svg>
+  );
+}
+
+function YoutubeIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 34 34" fill="none" aria-hidden="true" className={className}>
+      <circle cx="17" cy="17" r="17" fill="white" />
+      <path
+        d="M24 12.5a2 2 0 00-1.4-1.4C21 11 17 11 17 11s-4 0-5.6.1A2 2 0 0010 12.5 21 21 0 009 17a21 21 0 00.9 4.5 2 2 0 001.4 1.4C13 23 17 23 17 23s4 0 5.6-.1a2 2 0 001.4-1.4A21 21 0 0025 17a21 21 0 00-1-4.5zM14.5 19.5v-5L19 17l-4.5 2.5z"
+        fill="#0054a6"
+      />
+    </svg>
+  );
+}
+
+function InstagramIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 34 34" fill="none" aria-hidden="true" className={className}>
+      <circle cx="17" cy="17" r="17" fill="white" />
+      <rect x="11" y="11" width="12" height="12" rx="3" stroke="#0054a6" strokeWidth="1.2" />
+      <circle cx="17" cy="17" r="3" stroke="#0054a6" strokeWidth="1.2" />
+      <circle cx="20.5" cy="13.5" r="0.8" fill="#0054a6" />
+    </svg>
+  );
+}
+
+function LinkedinIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 34 34" fill="none" aria-hidden="true" className={className}>
+      <circle cx="17" cy="17" r="17" fill="white" />
+      <rect x="10" y="14" width="3" height="10" fill="#0054a6" />
+      <circle cx="11.5" cy="11" r="1.5" fill="#0054a6" />
+      <path
+        d="M15 14h2.8v1.2c.5-.9 1.5-1.4 2.6-1.4 2.8 0 3.1 1.8 3.1 4.1V24H20v-4.8c0-1 0-2.3-1.4-2.3-1.4 0-1.6 1.1-1.6 2.2V24h-2.8V14z"
+        fill="#0054a6"
+      />
+    </svg>
+  );
+}
+
+const SOCIAL_ICONS = {
+  facebook: FacebookIcon,
+  youtube: YoutubeIcon,
+  instagram: InstagramIcon,
+  linkedin: LinkedinIcon,
+};
+
+function LinkColumn({ column }) {
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-6">
+      <p className="text-lg font-medium leading-[1.2] text-white">{column.title}</p>
+      <div className="h-px w-full bg-white/20" />
+      <ul className="flex flex-col gap-2">
+        {column.links.map((link) => (
+          <li key={link.label}>
+            <a
+              href={link.href ?? "#"}
+              className="text-sm leading-[1.6] tracking-[0.14px] 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>
+  );
+}
+
+/**
+ * Footer08 — Daffodil Group blue multi-column footer.
+ * Figma node 32:20519 at 1920px.
+ */
+export function Footer08({
+  linkColumns = footer08DefaultProps.linkColumns,
+  phone = footer08DefaultProps.phone,
+  email = footer08DefaultProps.email,
+  address = footer08DefaultProps.address,
+  socialLinks = footer08DefaultProps.socialLinks,
+  privacyHref = footer08DefaultProps.privacyHref,
+  termsHref = footer08DefaultProps.termsHref,
+  copyright = footer08DefaultProps.copyright,
+  className = "",
+}) {
+  return (
+    <footer
+      className={["relative w-full overflow-hidden bg-[#0054a6]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer08"
+    >
+      <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:px-20 xl:gap-10 xl:px-[80px] xl:pb-10 xl:pt-[100px]">
+        <div className="flex flex-col gap-10 xl:flex-row xl:gap-14">
+          {linkColumns.map((column) => (
+            <LinkColumn key={column.title} column={column} />
+          ))}
+        </div>
+
+        <div className="h-px w-full bg-white/20" />
+
+        <div className="flex flex-col gap-8 lg:flex-row lg:items-start lg:justify-between">
+          <SafeImage
+            src="/footer/footer08/logo.svg"
+            alt="Daffodil Group"
+            width={373}
+            height={94}
+            className="h-14 w-auto shrink-0 sm:h-16 xl:h-[94px] xl:w-[373px]"
+          />
+
+          <div className="flex w-full max-w-[1160px] flex-col gap-5 lg:flex-1">
+            <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
+              <div className="flex flex-col gap-2 text-sm leading-[1.6] tracking-[0.14px] text-white/80 sm:flex-row sm:gap-[33px]">
+                <div className="flex flex-col gap-2">
+                  <a
+                    href={`tel:${phone.replace(/\s/g, "")}`}
+                    className="transition-colors duration-200 ease-out hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2"
+                  >
+                    {phone}
+                  </a>
+                  <a
+                    href={`mailto:${email}`}
+                    className="transition-colors duration-200 ease-out hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2"
+                  >
+                    {email}
+                  </a>
+                </div>
+                <p className="max-w-[294px]">{address}</p>
+              </div>
+              <div className="flex items-center gap-1.5">
+                {socialLinks.map((social) => {
+                  const Icon = SOCIAL_ICONS[social.icon] ?? FacebookIcon;
+                  return (
+                    <a
+                      key={social.label}
+                      href={social.href ?? "#"}
+                      aria-label={social.label}
+                      className="transition-opacity duration-200 ease-out hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2"
+                    >
+                      <Icon className="size-[34px]" />
+                    </a>
+                  );
+                })}
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-4 text-sm leading-[1.6] tracking-[0.14px] text-white/80 sm:flex-row sm:items-center sm:justify-between">
+              <a
+                href={privacyHref ?? "#"}
+                className="transition-colors duration-200 ease-out hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                Privacy Policy
+              </a>
+              <a
+                href={termsHref ?? "#"}
+                className="transition-colors duration-200 ease-out hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                Terms & Condition
+              </a>
+              <p className="sm:text-right">{copyright}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer08.propTypes = footer08PropTypes;
+
+export default Footer08;

package/templates/components/organisms/Footer08/Footer08.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 socialShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  icon: PropTypes.oneOf(["facebook", "youtube", "instagram", "linkedin"]),
+});
+
+export const footer08PropTypes = {
+  linkColumns: PropTypes.arrayOf(columnShape),
+  phone: PropTypes.string,
+  email: PropTypes.string,
+  address: PropTypes.string,
+  socialLinks: PropTypes.arrayOf(socialShape),
+  privacyHref: PropTypes.string,
+  termsHref: PropTypes.string,
+  copyright: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export const footer08DefaultProps = {
+  linkColumns: [
+    {
+      title: "About Us",
+      links: [
+        { label: "Who we are", href: "#" },
+        { label: "History and Heritage", href: "#" },
+        { label: "Awards & Recognitions", href: "#" },
+        { label: "Our Leadership", href: "#" },
+        { label: "Global Presence", href: "#" },
+      ],
+    },
+    {
+      title: "Business Ventures",
+      links: [
+        { label: "Education Ventures", href: "#" },
+        { label: "ICT & Digital Solutions", href: "#" },
+        { label: "Business & Investment", href: "#" },
+        { label: "Healthcare & Wellness", href: "#" },
+      ],
+    },
+    {
+      title: "Quick Links",
+      links: [
+        { label: "Awards & Recognitions", href: "#" },
+        { label: "Career", href: "#" },
+        { label: "Download Resources", href: "#" },
+        { label: "Contact us", href: "#" },
+      ],
+    },
+    {
+      title: "CSR Initiatives",
+      links: [
+        { label: "Daffodil Foundation", href: "#" },
+        { label: "Daffodil Institute of Social Sciences (DISS)", href: "#" },
+      ],
+    },
+    {
+      title: "Media Room",
+      links: [
+        { label: "Newsletter", href: "#" },
+        { label: "Forum", href: "#" },
+        { label: "News & Media", href: "#" },
+        { label: "Blog", href: "#" },
+        { label: "Gallery", href: "#" },
+      ],
+    },
+  ],
+  phone: "+88 01811458851",
+  email: "info@daffodil.group",
+  address: "102/1, Shukrabad, Mirpur Road, Dhanmondi, Dhaka-1207.",
+  socialLinks: [
+    { label: "Facebook", href: "#", icon: "facebook" },
+    { label: "YouTube", href: "#", icon: "youtube" },
+    { label: "Instagram", href: "#", icon: "instagram" },
+    { label: "LinkedIn", href: "#", icon: "linkedin" },
+  ],
+  privacyHref: "#",
+  termsHref: "#",
+  copyright: "© 2026 Daffodil Group.",
+  className: "",
+};

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

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

package/templates/components/organisms/Footer09/Footer09.jsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { useState } from "react";
+import { SafeImage } from "../../atoms/SafeImage";
+import {
+  footer09DefaultProps,
+  footer09PropTypes,
+} from "./Footer09.propTypes";
+
+function ArrowUpRightIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M5 15L15 5M15 5H7M15 5V13"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function SocialIcon({ icon, className = "" }) {
+  const paths = {
+    facebook: "M10 6h-1.5A1.5 1.5 0 007 7.5V9H5v2h2v5h3v-5h2.5l.5-2H10V7.5c0-.28.22-.5.5-.5H13V6H10z",
+    youtube:
+      "M19.5 6.2a1.5 1.5 0 00-1.05-1.05C16.4 5 12 5 12 5s-4.4 0-5.95.15A1.5 1.5 0 005.05 6.2 15.7 15.7 0 004.5 12a15.7 15.7 0 00.55 5.8 1.5 1.5 0 001.05 1.05C7.6 19 12 19 12 19s4.4 0 5.95-.15a1.5 1.5 0 001.05-1.05A15.7 15.7 0 0019.5 12a15.7 15.7 0 00-.55-5.8zM9.5 14.5v-5L14 12l-4.5 2.5z",
+    instagram:
+      "M7 2h6a5 5 0 015 5v6a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5zm0 2a3 3 0 00-3 3v6a3 3 0 003 3h6a3 3 0 003-3V7a3 3 0 00-3-3H7zm3 2.5A2.5 2.5 0 1112.5 12 2.5 2.5 0 0110 8.5zm4.75-2.65a.75.75 0 11-.75.75.75.75 0 01.75-.75z",
+    linkedin:
+      "M5 9H2v11h3V9zm1.5-4.5A1.75 1.75 0 104.75 6 1.75 1.75 0 006.5 4.5zM9 9h3v1.5c.5-.9 1.5-1.5 2.6-1.5 2.8 0 3.4 1.8 3.4 4.2V20h-3v-5.2c0-1.2 0-2.9-1.8-2.9-1.8 0-2.1 1.4-2.1 2.8V20H9V9z",
+    x: "M4 4l6.5 8.5L4.3 20h2.2l4.9-5.7L15.5 20H20l-6.8-9L19.4 4h-2.2l-4.5 5.2L8.4 4H4z",
+  };
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className={className}>
+      <path d={paths[icon] ?? paths.facebook} />
+    </svg>
+  );
+}
+
+function LinkColumn({ column }) {
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-6">
+      <p className="text-xl font-medium tracking-tight text-[#1f1f1f] sm:text-2xl">{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 text-[#1f1f1f]/80 transition-colors duration-200 ease-out hover:text-[#1f1f1f] focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * Footer09 — Suvastu Properties white footer with newsletter.
+ * Figma node 32:20520 at 1920px.
+ */
+export function Footer09({
+  address = footer09DefaultProps.address,
+  phone = footer09DefaultProps.phone,
+  email: contactEmail = footer09DefaultProps.email,
+  linkColumns = footer09DefaultProps.linkColumns,
+  socialLinks = footer09DefaultProps.socialLinks,
+  newsletterTitle = footer09DefaultProps.newsletterTitle,
+  emailPlaceholder = footer09DefaultProps.emailPlaceholder,
+  submitLabel = footer09DefaultProps.submitLabel,
+  newsletterEmail: controlledEmail,
+  onEmailChange,
+  onNewsletterSubmit,
+  copyright = footer09DefaultProps.copyright,
+  privacyHref = footer09DefaultProps.privacyHref,
+  termsHref = footer09DefaultProps.termsHref,
+  className = "",
+}) {
+  const [internalEmail, setInternalEmail] = useState("");
+  const newsletterEmail = controlledEmail ?? internalEmail;
+
+  const handleEmailChange = (event) => {
+    onEmailChange?.(event.target.value);
+    if (controlledEmail === undefined) setInternalEmail(event.target.value);
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    onNewsletterSubmit?.(newsletterEmail);
+  };
+
+  return (
+    <footer
+      className={["relative w-full overflow-hidden bg-white", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer09"
+    >
+      <div className="mx-auto w-full max-w-[1920px] border-t border-[#1f1f1f]/10 px-4 py-12 sm:px-6 md:px-10 lg:px-20 xl:px-[200px] xl:pb-16 xl:pt-[140px]">
+        <div className="flex flex-col gap-12 lg:flex-row lg:items-start lg:gap-16 xl:gap-[150px]">
+          <div className="flex max-w-sm flex-col gap-8 pl-0 lg:pl-[30px]">
+            <SafeImage
+              src="/footer/footer09/logo.svg"
+              alt="Suvastu"
+              width={303}
+              height={64}
+              className="h-10 w-auto sm:h-12 md:h-16 md:w-[303px]"
+            />
+            <div className="flex flex-col gap-3 text-sm text-[#1f1f1f]/80">
+              <p>{address}</p>
+              <a
+                href={`tel:${phone.replace(/\s/g, "")}`}
+                className="transition-colors duration-200 ease-out hover:text-[#1f1f1f] focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                {phone}
+              </a>
+              <a
+                href={`mailto:${contactEmail}`}
+                className="transition-colors duration-200 ease-out hover:text-[#1f1f1f] focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                {contactEmail}
+              </a>
+            </div>
+          </div>
+
+          <div className="grid flex-1 grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
+            {linkColumns.map((column) => (
+              <LinkColumn key={column.title} column={column} />
+            ))}
+
+            <div className="flex flex-col gap-8">
+              <div className="flex flex-col gap-6">
+                <p className="text-xl font-medium tracking-tight text-[#1f1f1f] sm:text-2xl">
+                  Follow Us
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  {socialLinks.map((social) => (
+                    <a
+                      key={social.label}
+                      href={social.href ?? "#"}
+                      aria-label={social.label}
+                      className="text-[#1f1f1f] transition-opacity duration-200 ease-out hover:opacity-70 focus-visible:outline-2 focus-visible:outline-offset-2"
+                    >
+                      <SocialIcon icon={social.icon} className="size-6" />
+                    </a>
+                  ))}
+                </div>
+              </div>
+
+              <form onSubmit={handleSubmit} className="flex flex-col gap-3">
+                <p className="text-lg font-medium text-[#1f1f1f]">{newsletterTitle}</p>
+                <input
+                  type="email"
+                  value={newsletterEmail}
+                  onChange={handleEmailChange}
+                  placeholder={emailPlaceholder}
+                  className="w-full border-b border-[#1f1f1f]/10 bg-[#1f1f1f]/10 px-4 py-3 text-sm text-[#1f1f1f]/80 outline-none transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-[#1f1f1f]/20"
+                />
+                <button
+                  type="submit"
+                  className="inline-flex h-12 w-max items-center justify-center gap-2.5 rounded-full bg-[#1f1f1f] px-6 text-base font-bold text-white transition-opacity duration-200 ease-out hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2"
+                >
+                  {submitLabel}
+                  <ArrowUpRightIcon className="size-5" />
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-12 flex flex-col gap-4 border-t border-[#1f1f1f]/10 pt-6 sm:flex-row sm:items-center sm:justify-between sm:pl-[30px] xl:mt-20 xl:pl-[230px] xl:pr-[200px]">
+          <p className="text-sm text-[#1f1f1f]/80">{copyright}</p>
+          <div className="flex flex-wrap gap-8 text-sm text-[#1f1f1f]/80">
+            <a
+              href={privacyHref ?? "#"}
+              className="transition-colors duration-200 ease-out hover:text-[#1f1f1f] focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              Privacy Policy
+            </a>
+            <a
+              href={termsHref ?? "#"}
+              className="transition-colors duration-200 ease-out hover:text-[#1f1f1f] focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              Terms & Condition
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer09.propTypes = footer09PropTypes;
+
+export default Footer09;

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

@@ -0,0 +1,76 @@
+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", "youtube", "instagram", "linkedin", "x"]),
+});
+
+export const footer09PropTypes = {
+  address: PropTypes.string,
+  phone: PropTypes.string,
+  email: PropTypes.string,
+  linkColumns: PropTypes.arrayOf(columnShape),
+  socialLinks: PropTypes.arrayOf(socialShape),
+  newsletterTitle: PropTypes.string,
+  emailPlaceholder: PropTypes.string,
+  submitLabel: PropTypes.string,
+  newsletterEmail: PropTypes.string,
+  onEmailChange: PropTypes.func,
+  onNewsletterSubmit: PropTypes.func,
+  copyright: PropTypes.string,
+  privacyHref: PropTypes.string,
+  termsHref: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export const footer09DefaultProps = {
+  address: "Suvastu Imam Square, 5th Floor, 65 Gulshan Ave, Gulshan-1, Dhaka 1212",
+  phone: "+880 9639 500 400",
+  email: "marketing@suvastu.com",
+  linkColumns: [
+    {
+      title: "Quick Links",
+      links: [
+        { label: "About us", href: "#" },
+        { label: "Land Owner", href: "#" },
+        { label: "Career", href: "#" },
+        { label: "Blog", href: "#" },
+        { label: "Contact us", href: "#" },
+      ],
+    },
+    {
+      title: "Projects",
+      links: [
+        { label: "Ongoing Project", href: "#" },
+        { label: "Upcoming Project", href: "#" },
+        { label: "Complete Project", href: "#" },
+      ],
+    },
+  ],
+  socialLinks: [
+    { label: "Facebook", href: "#", icon: "facebook" },
+    { label: "YouTube", href: "#", icon: "youtube" },
+    { label: "Instagram", href: "#", icon: "instagram" },
+    { label: "LinkedIn", href: "#", icon: "linkedin" },
+    { label: "X", href: "#", icon: "x" },
+  ],
+  newsletterTitle: "Subscribe to our newsletter",
+  emailPlaceholder: "Your email",
+  submitLabel: "Submit",
+  newsletterEmail: "",
+  copyright: "© 2026 Suvastu Properties. All rights reserved",
+  privacyHref: "#",
+  termsHref: "#",
+  className: "",
+};

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

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