@notionhive/footers 0.1.0

package/templates/components/organisms/Footer03/Footer03.jsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { useState } from "react";
+import { SafeImage } from "../../atoms/SafeImage";
+import {
+  footer03DefaultProps,
+  footer03PropTypes,
+} from "./Footer03.propTypes";
+
+function ArrowIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M5 12h14M13 6l6 6-6 6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function LinkColumn({ column }) {
+  return (
+    <div className="flex min-w-0 flex-col gap-6">
+      <p className="text-sm font-medium uppercase tracking-wide text-white">{column.title}</p>
+      <ul className="flex flex-col gap-2 sm:gap-3">
+        {column.links.map((link) => (
+          <li key={link.label}>
+            <a
+              href={link.href ?? "#"}
+              className="text-sm 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>
+  );
+}
+
+/**
+ * Footer03 — Mir Ceramic dark green footer with newsletter.
+ * Figma node 32:19379 at 1920px.
+ */
+export function Footer03({
+  phone = footer03DefaultProps.phone,
+  email: controlledEmail,
+  address = footer03DefaultProps.address,
+  linkColumns = footer03DefaultProps.linkColumns,
+  newsletterPlaceholder = footer03DefaultProps.newsletterPlaceholder,
+  newsletterCaption = footer03DefaultProps.newsletterCaption,
+  onEmailChange,
+  onNewsletterSubmit,
+  copyright = footer03DefaultProps.copyright,
+  privacyHref = footer03DefaultProps.privacyHref,
+  termsHref = footer03DefaultProps.termsHref,
+  className = "",
+}) {
+  const [internalEmail, setInternalEmail] = useState("");
+  const email = controlledEmail ?? internalEmail;
+
+  const handleEmailChange = (event) => {
+    onEmailChange?.(event.target.value);
+    if (controlledEmail === undefined) setInternalEmail(event.target.value);
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    onNewsletterSubmit?.(email);
+  };
+
+  return (
+    <footer
+      className={["relative w-full overflow-hidden bg-[#0d1912]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer03"
+    >
+      <div className="mx-auto flex w-full max-w-[1920px] flex-col gap-10 px-4 py-12 sm:px-6 md:gap-12 md:px-10 lg:px-20 xl:gap-[60px] xl:px-[80px] xl:pt-[140px]">
+        <div className="flex flex-col gap-10 lg:flex-row lg:items-start lg:justify-between xl:gap-16">
+          <div className="flex max-w-md flex-col gap-8 xl:max-w-[470px] xl:gap-[60px]">
+            <SafeImage
+              src="/footer/footer03/logo.png"
+              alt="Mir Ceramic"
+              width={120}
+              height={80}
+              className="h-12 w-auto sm:h-16 sm:w-[120px]"
+            />
+            <div className="flex flex-col gap-4 text-sm text-white/80 sm:gap-5 sm:text-base">
+              <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:sales.info@mirceramic.com"
+                className="transition-colors duration-200 ease-out hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                sales.info@mirceramic.com
+              </a>
+              <p>{address}</p>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4 lg:gap-10 xl:gap-12">
+            {linkColumns.map((column) => (
+              <LinkColumn key={column.title} column={column} />
+            ))}
+            <div className="flex flex-col gap-6 sm:gap-8">
+              <p className="text-sm font-medium uppercase tracking-wide text-white">newsletter</p>
+              <form onSubmit={handleSubmit} className="flex flex-col gap-2">
+                <div className="flex items-center gap-4 border-b border-white/20 py-4">
+                  <input
+                    type="email"
+                    value={email}
+                    onChange={handleEmailChange}
+                    placeholder={newsletterPlaceholder}
+                    className="min-w-0 flex-1 bg-transparent text-xs font-medium uppercase tracking-widest text-white/70 outline-none placeholder:text-white/60"
+                  />
+                  <button
+                    type="submit"
+                    aria-label="Subscribe"
+                    className="shrink-0 text-white transition-opacity duration-200 ease-out hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2"
+                  >
+                    <ArrowIcon className="size-6" />
+                  </button>
+                </div>
+                <p className="text-sm text-white/70">{newsletterCaption}</p>
+              </form>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-5 border-t border-white/20 pt-5 sm:flex-row sm:items-center sm:justify-between">
+          <p className="text-sm text-white/60">{copyright}</p>
+          <div className="flex flex-wrap gap-6 text-sm text-white/60 sm:gap-10">
+            <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>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer03.propTypes = footer03PropTypes;
+
+export default Footer03;

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

@@ -0,0 +1,73 @@
+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 footer03PropTypes = {
+  phone: PropTypes.string,
+  email: PropTypes.string,
+  address: PropTypes.string,
+  linkColumns: PropTypes.arrayOf(columnShape),
+  newsletterPlaceholder: PropTypes.string,
+  newsletterCaption: PropTypes.string,
+  onEmailChange: PropTypes.func,
+  onNewsletterSubmit: PropTypes.func,
+  copyright: PropTypes.string,
+  privacyHref: PropTypes.string,
+  termsHref: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export const footer03DefaultProps = {
+  phone: "+8801713-296300",
+  email: "",
+  address:
+    "Red Crescent Borak Tower (Level-7) 37/3/A, Eskaton Garden Road, Dhaka-1000, Bangladesh.",
+  linkColumns: [
+    {
+      title: "Products",
+      links: [
+        { label: "Floor Tiles", href: "#" },
+        { label: "Wall Tiles", href: "#" },
+        { label: "Stair Tiles", href: "#" },
+        { label: "Parking & Rooftop Tiles", href: "#" },
+        { label: "Outdoor Tiles", href: "#" },
+        { label: "Commercial", href: "#" },
+      ],
+    },
+    {
+      title: "Quick Links",
+      links: [
+        { label: "Catalogue", href: "#" },
+        { label: "Store Locator", href: "#" },
+        { label: "About Us", href: "#" },
+        { label: "Career", href: "#" },
+        { label: "Blog", href: "#" },
+        { label: "Contact us", href: "#" },
+      ],
+    },
+    {
+      title: "Follow us",
+      links: [
+        { label: "Linkedin", href: "#" },
+        { label: "Instagram", href: "#" },
+        { label: "Whatsapp", href: "#" },
+      ],
+    },
+  ],
+  newsletterPlaceholder: "Email",
+  newsletterCaption: "Get our weekly newsletter",
+  onEmailChange: undefined,
+  onNewsletterSubmit: undefined,
+  copyright: "© 2026 Mir Ceramic. All rights reserved",
+  privacyHref: "#",
+  termsHref: "#",
+  className: "",
+};

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

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

package/templates/components/organisms/Footer04/Footer04.jsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useState } from "react";
+import { SafeImage } from "../../atoms/SafeImage";
+import {
+  footer04DefaultProps,
+  footer04PropTypes,
+} from "./Footer04.propTypes";
+
+function LinkColumn({ column }) {
+  return (
+    <div className="flex min-w-0 flex-col gap-8 sm:gap-10 xl:gap-[50px]">
+      <p className="text-base text-white">{column.title}</p>
+      <ul className="flex flex-col gap-2">
+        {column.links.map((link) => (
+          <li key={link.label}>
+            <a
+              href={link.href ?? "#"}
+              className="text-base text-[#97989f] transition-colors duration-200 ease-out hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * Footer04 — Platform One dark newsletter + multi-column footer.
+ * Figma node 32:19446 at 1920px.
+ */
+export function Footer04({
+  description = footer04DefaultProps.description,
+  emailPlaceholder = footer04DefaultProps.emailPlaceholder,
+  submitLabel = footer04DefaultProps.submitLabel,
+  newsletterCaption = footer04DefaultProps.newsletterCaption,
+  email: controlledEmail,
+  onEmailChange,
+  onNewsletterSubmit,
+  linkColumns = footer04DefaultProps.linkColumns,
+  copyright = footer04DefaultProps.copyright,
+  siteByLabel = footer04DefaultProps.siteByLabel,
+  siteByHref = footer04DefaultProps.siteByHref,
+  className = "",
+}) {
+  const [internalEmail, setInternalEmail] = useState("");
+  const email = controlledEmail ?? internalEmail;
+
+  const handleEmailChange = (event) => {
+    onEmailChange?.(event.target.value);
+    if (controlledEmail === undefined) setInternalEmail(event.target.value);
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    onNewsletterSubmit?.(email);
+  };
+
+  return (
+    <footer
+      className={["relative w-full overflow-hidden bg-[#020617]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer04"
+    >
+      <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-14 lg:px-20 lg:py-20 xl:gap-[60px] xl:px-[160px] xl:pt-[100px]">
+        <div className="flex flex-col gap-10 lg:flex-row lg:items-start lg:justify-between lg:gap-16">
+          <div className="flex max-w-lg flex-col gap-5">
+            <SafeImage
+              src="/footer/footer04/logo.svg"
+              alt="Platform One"
+              width={388}
+              height={64}
+              className="h-10 w-auto sm:h-12 md:h-16 md:max-w-[388px]"
+            />
+            <p className="text-base tracking-wide text-[#c8c9cd]">{description}</p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="flex w-full max-w-lg flex-col gap-2.5">
+            <input
+              type="email"
+              value={email}
+              onChange={handleEmailChange}
+              placeholder={emailPlaceholder}
+              className="w-full rounded-full bg-[#343744] px-5 py-3.5 text-base text-[#97989f] outline-none transition-colors duration-200 ease-out placeholder:text-[#97989f] focus-visible:ring-2 focus-visible:ring-white/30"
+            />
+            <button
+              type="submit"
+              className="w-full rounded-full bg-white px-8 py-5 text-base font-medium text-black transition-opacity duration-200 ease-out hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              {submitLabel}
+            </button>
+            <p className="text-base text-[#c8c9cd]">{newsletterCaption}</p>
+          </form>
+        </div>
+
+        <div className="h-px w-full bg-[#343744]/60" />
+
+        <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-6 lg:gap-6 xl:justify-between">
+          {linkColumns.map((column) => (
+            <LinkColumn key={column.title} column={column} />
+          ))}
+        </div>
+
+        <div className="h-px w-full bg-[#343744]/60" />
+
+        <div className="flex flex-col gap-3 text-sm text-[#97989f] sm:flex-row sm:items-center sm:justify-between sm:text-base">
+          <p>{copyright}</p>
+          <p>
+            Site by{" "}
+            <a
+              href={siteByHref ?? "#"}
+              className="text-[#e1e2e3] underline transition-colors duration-200 ease-out hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              {siteByLabel}
+            </a>
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer04.propTypes = footer04PropTypes;
+
+export default Footer04;

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

@@ -0,0 +1,93 @@
+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 footer04PropTypes = {
+  description: PropTypes.string,
+  emailPlaceholder: PropTypes.string,
+  submitLabel: PropTypes.string,
+  newsletterCaption: PropTypes.string,
+  email: PropTypes.string,
+  onEmailChange: PropTypes.func,
+  onNewsletterSubmit: PropTypes.func,
+  linkColumns: PropTypes.arrayOf(columnShape),
+  copyright: PropTypes.string,
+  siteByLabel: PropTypes.string,
+  siteByHref: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export const footer04DefaultProps = {
+  description:
+    "Experience Intelligence that drives meaningful change. Trusted by global brands to deliver human-centered insights that scale.",
+  emailPlaceholder: "E-mail Address",
+  submitLabel: "Unlock Exclusive CX Trends",
+  newsletterCaption:
+    "Join CX leaders and industry innovators. Get the latest insights, trends, and best practices delivered straight to your inbox.",
+  email: "",
+  linkColumns: [
+    {
+      title: "Services",
+      links: [
+        { label: "Customer Experience", href: "#" },
+        { label: "Insight Communities", href: "#" },
+        { label: "Market Insights", href: "#" },
+        { label: "Syndicated Research", href: "#" },
+        { label: "Behavioural Tracking", href: "#" },
+      ],
+    },
+    {
+      title: "Resources",
+      links: [
+        { label: "Insights", href: "#" },
+        { label: "Webinars", href: "#" },
+        { label: "Press Releases", href: "#" },
+        { label: "Podcasts", href: "#" },
+      ],
+    },
+    {
+      title: "Company",
+      links: [
+        { label: "About Platform One", href: "#" },
+        { label: "Life at Platform One", href: "#" },
+        { label: "Careers", href: "#" },
+      ],
+    },
+    {
+      title: "Legal",
+      links: [
+        { label: "Privacy Policy", href: "#" },
+        { label: "Terms & Conditions", href: "#" },
+        { label: "Sitemap", href: "#" },
+      ],
+    },
+    {
+      title: "Connect",
+      links: [
+        { label: "Book a Demo", href: "#" },
+        { label: "Partner With Us", href: "#" },
+      ],
+    },
+    {
+      title: "Socials",
+      links: [
+        { label: "X (Twitter)", href: "#" },
+        { label: "LinkedIn", href: "#" },
+        { label: "Facebook", href: "#" },
+        { label: "Instagram", href: "#" },
+      ],
+    },
+  ],
+  copyright: "© 2025 Platform One. All rights reserved.",
+  siteByLabel: "Notionhive",
+  siteByHref: "#",
+  className: "",
+};

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

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

package/templates/components/organisms/Footer05/Footer05.jsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { SafeImage } from "../../atoms/SafeImage";
+import {
+  footer05DefaultProps,
+  footer05PropTypes,
+} from "./Footer05.propTypes";
+
+/**
+ * Footer05 — M&U Group minimal nav footer with brand watermark.
+ * Figma node 32:20210 at 1920px.
+ */
+export function Footer05({
+  navLinks = footer05DefaultProps.navLinks,
+  contactLabel = footer05DefaultProps.contactLabel,
+  contactHref = footer05DefaultProps.contactHref,
+  copyright = footer05DefaultProps.copyright,
+  socialLinks = footer05DefaultProps.socialLinks,
+  privacyHref = footer05DefaultProps.privacyHref,
+  className = "",
+}) {
+  return (
+    <footer
+      className={["relative w-full min-h-[580px] overflow-hidden bg-[#fffbf5]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer05"
+    >
+      <div
+        className="pointer-events-none absolute inset-x-0 bottom-0 h-[581px] bg-gradient-to-b from-[rgba(95,204,29,0)] via-[rgba(95,204,29,0.45)] to-[#5fcc1d] opacity-100 blur-[26px]"
+        aria-hidden="true"
+      />
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-[#5fcc1d]" aria-hidden="true" />
+      <div className="pointer-events-none absolute bottom-[64px] left-1/2 h-[min(723px,55vh)] w-[min(1914px,100%)] -translate-x-1/2 opacity-20">
+        <SafeImage
+          src="/footer/footer05/brand-watermark.png"
+          alt=""
+          fill
+          className="object-contain object-bottom"
+        />
+      </div>
+
+      <div className="relative mx-auto w-full max-w-[1920px] px-4 pb-20 pt-16 sm:px-6 md:px-10 lg:px-20 xl:px-[80px] xl:pb-24 xl:pt-[180px]">
+        <div className="mx-auto w-full max-w-[1760px]">
+          <div className="flex flex-col gap-0 border-t border-[#141313]/10 py-8 sm:flex-row sm:items-center sm:justify-between xl:py-8">
+            <nav className="flex flex-wrap items-center gap-6 text-xl text-[#141313]">
+              {navLinks.map((link) => (
+                <a
+                  key={link.label}
+                  href={link.href ?? "#"}
+                  className={[
+                    "transition-colors duration-200 ease-out hover:text-[#141313] focus-visible:outline-2 focus-visible:outline-offset-2",
+                    link.active ? "text-[#141313]" : "text-[#141313]/50",
+                  ].join(" ")}
+                >
+                  {link.label}
+                </a>
+              ))}
+            </nav>
+            <a
+              href={contactHref ?? "#"}
+              className="mt-4 flex w-max flex-col items-end sm:mt-0"
+            >
+              <span className="text-xl text-[#141313] transition-colors duration-200 ease-out hover:opacity-70">
+                {contactLabel}
+              </span>
+              <span className="mt-0.5 block h-0.5 w-full bg-[#141313]" />
+            </a>
+          </div>
+
+          <div className="relative flex min-h-[92px] flex-col items-center justify-center gap-6 border-t border-[#141313]/10 py-6 lg:block lg:py-0">
+            <p className="text-center text-xl leading-7 text-[#141313]/70 lg:absolute lg:left-0 lg:top-[31px] lg:text-left">
+              {copyright}
+            </p>
+            <nav className="flex flex-wrap justify-center gap-6 text-xl text-[#141313]/50 lg:absolute lg:left-1/2 lg:top-[33px] lg:-translate-x-1/2">
+              {socialLinks.map((link) => (
+                <a
+                  key={link.label}
+                  href={link.href ?? "#"}
+                  className="transition-colors duration-200 ease-out hover:text-[#141313] focus-visible:outline-2 focus-visible:outline-offset-2"
+                >
+                  {link.label}
+                </a>
+              ))}
+            </nav>
+            <a
+              href={privacyHref ?? "#"}
+              className="text-center text-xl leading-7 text-[#141313]/70 underline transition-colors duration-200 ease-out hover:text-[#141313] focus-visible:outline-2 focus-visible:outline-offset-2 lg:absolute lg:right-0 lg:top-[31px]"
+            >
+              Privacy Policy
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer05.propTypes = footer05PropTypes;
+
+export default Footer05;

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

@@ -0,0 +1,42 @@
+import PropTypes from "prop-types";
+
+const linkShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  active: PropTypes.bool,
+});
+
+const socialShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+});
+
+export const footer05PropTypes = {
+  navLinks: PropTypes.arrayOf(linkShape),
+  contactLabel: PropTypes.string,
+  contactHref: PropTypes.string,
+  copyright: PropTypes.string,
+  socialLinks: PropTypes.arrayOf(socialShape),
+  privacyHref: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export const footer05DefaultProps = {
+  navLinks: [
+    { label: "Home", href: "#", active: true },
+    { label: "About", href: "#" },
+    { label: "Compliance", href: "#" },
+    { label: "Sustainability", href: "#" },
+  ],
+  contactLabel: "Contact",
+  contactHref: "#",
+  copyright: "© 2026 M&U Group. All Rights Reserved.",
+  socialLinks: [
+    { label: "Facebook", href: "#" },
+    { label: "LinkedIn", href: "#" },
+    { label: "Instagram", href: "#" },
+    { label: "Twitter (X)", href: "#" },
+  ],
+  privacyHref: "#",
+  className: "",
+};

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

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