@notionhive/footers 0.1.0

package/templates/components/atoms/SafeImage/SafeImage.jsx

@@ -0,0 +1,101 @@
+import Image from "next/image";
+
+/**
+ * SafeImage — renders local /heroes/ assets reliably.
+ *
+ * Figma exports are often SVG content saved with .png extensions.
+ * Native img avoids next/image SVG restrictions and broken renders in Storybook.
+ *
+ * @param {object} props - Same as next/image (src, alt, fill, className, sizes, priority, width, height).
+ */
+export function SafeImage({
+  src,
+  alt = "",
+  fill,
+  className = "",
+  sizes,
+  priority,
+  width,
+  height,
+  style,
+  ...rest
+}) {
+  if (!src) return null;
+
+  const isLocalAsset =
+    src.startsWith("/heroes/") ||
+    src.startsWith("/menus/") ||
+    src.startsWith("/about/") ||
+    src.startsWith("/services/") ||
+    src.startsWith("/testimonials/") ||
+    src.startsWith("/cta/") ||
+    src.startsWith("/contact/") ||
+    src.startsWith("/footer/");
+  const isSvg = src.endsWith(".svg");
+
+  if (isLocalAsset || isSvg) {
+    if (fill) {
+      return (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={src}
+          alt={alt}
+          className={className}
+          style={{
+            ...style,
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+          }}
+          {...rest}
+        />
+      );
+    }
+
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      <img
+        src={src}
+        alt={alt}
+        className={className}
+        width={width}
+        height={height}
+        style={style}
+        {...rest}
+      />
+    );
+  }
+
+  if (fill) {
+    return (
+      <Image
+        src={src}
+        alt={alt}
+        fill
+        className={className}
+        sizes={sizes}
+        priority={priority}
+        style={style}
+        {...rest}
+      />
+    );
+  }
+
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      className={className}
+      sizes={sizes}
+      priority={priority}
+      style={style}
+      {...rest}
+    />
+  );
+}
+
+export default SafeImage;

package/templates/components/atoms/SafeImage/index.js

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

package/templates/components/organisms/Footer01/Footer01.jsx

@@ -0,0 +1,142 @@
+"use client";
+
+import {
+  footer01DefaultProps,
+  footer01PropTypes,
+} from "./Footer01.propTypes";
+
+function FacebookIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 14 14" fill="none" 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"
+        fill="currentColor"
+      />
+    </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" />
+      <circle cx="10" cy="4" r="0.75" fill="currentColor" />
+    </svg>
+  );
+}
+
+function LinkedinIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 14 14" fill="none" aria-hidden="true" className={className}>
+      <rect x="2" y="5" width="2.5" height="7" fill="currentColor" />
+      <circle cx="3.25" cy="3.25" r="1.25" fill="currentColor" />
+      <path
+        d="M7 5h2.4v1c.4-.7 1.2-1.1 2.1-1.1 2.2 0 2.5 1.4 2.5 3.3V12H9.6V8.6c0-.8 0-1.8-1.1-1.8-1.1 0-1.3.9-1.3 1.7V12H7V5z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function YoutubeIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 14 14" fill="none" 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"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+const SOCIAL_ICONS = {
+  facebook: FacebookIcon,
+  instagram: InstagramIcon,
+  linkedin: LinkedinIcon,
+  youtube: YoutubeIcon,
+};
+
+function LinkColumn({ column }) {
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-4">
+      <p className="text-base font-semibold leading-6 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="flex items-center gap-2 text-sm leading-5 text-[#b5b5b5] transition-colors duration-200 ease-out hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              {link.icon && SOCIAL_ICONS[link.icon] ? (
+                (() => {
+                  const Icon = SOCIAL_ICONS[link.icon];
+                  return <Icon className="size-3.5 shrink-0" />;
+                })()
+              ) : null}
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * Footer01 — Koenig Equipment multi-column dark footer.
+ * Figma node 32:19075 at 1920px.
+ *
+ * @param {object} props - See Footer01.propTypes.js.
+ */
+export function Footer01({
+  linkColumns = footer01DefaultProps.linkColumns,
+  copyright = footer01DefaultProps.copyright,
+  socialButtons = footer01DefaultProps.socialButtons,
+  className = "",
+}) {
+  return (
+    <footer
+      className={["relative w-full overflow-hidden bg-[#0b1909]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer01"
+    >
+      <div className="mx-auto flex w-full max-w-[1920px] flex-col gap-11 px-4 py-11 sm:px-6 md:px-8 lg:gap-[44px] lg:px-8 lg:py-11 xl:px-8">
+        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 xl:gap-0 xl:justify-between">
+          {linkColumns.map((column) => (
+            <LinkColumn key={column.title} column={column} />
+          ))}
+        </div>
+
+        <div className="flex flex-col gap-6">
+          <div className="h-px w-full bg-[#525252]/60" />
+          <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
+            <p className="text-center text-sm leading-5 text-[#b5b5b5] sm:text-left">
+              {copyright}
+            </p>
+            <div className="flex flex-wrap items-center justify-center gap-2.5">
+              {socialButtons.map((social) => {
+                const Icon = SOCIAL_ICONS[social.icon] ?? FacebookIcon;
+                return (
+                  <a
+                    key={social.label}
+                    href={social.href ?? "#"}
+                    aria-label={social.label}
+                    className="flex size-10 items-center justify-center rounded-full border border-[#525252] p-3 text-[#b5b5b5] transition-colors duration-200 ease-out hover:border-white hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2"
+                  >
+                    <Icon className="size-3.5" />
+                  </a>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer01.propTypes = footer01PropTypes;
+
+export default Footer01;

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

@@ -0,0 +1,110 @@
+import PropTypes from "prop-types";
+
+const linkShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  icon: PropTypes.oneOf(["facebook", "instagram", "linkedin", "youtube"]),
+});
+
+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 footer01PropTypes = {
+  linkColumns: PropTypes.arrayOf(columnShape),
+  copyright: PropTypes.string,
+  socialButtons: PropTypes.arrayOf(socialShape),
+  className: PropTypes.string,
+};
+
+export const footer01DefaultProps = {
+  linkColumns: [
+    {
+      title: "New Equipment",
+      links: [
+        { label: "Agriculture", href: "#" },
+        { label: "Compact Construction Equipment", href: "#" },
+        { label: "Lawn & Grounds Care", href: "#" },
+        { label: "Build Your Own", href: "#" },
+        { label: "Promotions", href: "#" },
+      ],
+    },
+    {
+      title: "Used Equipment",
+      links: [
+        { label: "Ag Tractors", href: "#" },
+        { label: "Harvesting", href: "#" },
+        { label: "Spraying and Application", href: "#" },
+        { label: "Planting & Seeding", href: "#" },
+        { label: "Hay, Forage & Livestock", href: "#" },
+        { label: "Tillage", href: "#" },
+        { label: "Precision", href: "#" },
+        { label: "Lawn & Grounds Care", href: "#" },
+        { label: "Compact Construction", href: "#" },
+        { label: "Just Arrived", href: "#" },
+        { label: "Hot Deals", href: "#" },
+        { label: "Be the first to know", href: "#" },
+      ],
+    },
+    {
+      title: "Parts & Services",
+      links: [
+        { label: "Order Parts", href: "#" },
+        { label: "Parts Drop Boxes", href: "#" },
+        { label: "Schedule Service", href: "#" },
+        { label: "Programs & Promotions", href: "#" },
+        { label: "MyDealer", href: "#" },
+        { label: "Precision Ag Solutions", href: "#" },
+        { label: "Customer Service Advisor", href: "#" },
+      ],
+    },
+    {
+      title: "Contact Us",
+      links: [
+        { label: "Find Nearest Location", href: "#" },
+        { label: "Locations", href: "#" },
+        { label: "Email Us", href: "#" },
+        { label: "Careers", href: "#" },
+        { label: "Equipment Transfer Request", href: "#" },
+        { label: "eStatement Signup", href: "#" },
+      ],
+    },
+    {
+      title: "Resources",
+      links: [
+        { label: "Blog", href: "#" },
+        { label: "FAQ", href: "#" },
+        { label: "How to Videos", href: "#" },
+        { label: "MyDealer", href: "#" },
+        { label: "About Us", href: "#" },
+        { label: "Precision Ag Solutions", href: "#" },
+        { label: "Privacy Policy", href: "#" },
+        { label: "Employee Login", href: "#" },
+      ],
+    },
+    {
+      title: "Follow Us",
+      links: [
+        { label: "Facebook", href: "#", icon: "facebook" },
+        { label: "Instagram", href: "#", icon: "instagram" },
+        { label: "Linkedin", href: "#", icon: "linkedin" },
+        { label: "YouTube", href: "#", icon: "youtube" },
+      ],
+    },
+  ],
+  copyright: "Copyright © 2023 Koenig Equipment, Inc. All Rights Reserved.",
+  socialButtons: [
+    { label: "Facebook", href: "#", icon: "facebook" },
+    { label: "Instagram", href: "#", icon: "instagram" },
+    { label: "LinkedIn", href: "#", icon: "linkedin" },
+    { label: "YouTube", href: "#", icon: "youtube" },
+  ],
+  className: "",
+};

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

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

package/templates/components/organisms/Footer02/Footer02.jsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { SafeImage } from "../../atoms/SafeImage";
+import {
+  footer02DefaultProps,
+  footer02PropTypes,
+} from "./Footer02.propTypes";
+
+function LinkColumn({ column }) {
+  return (
+    <div className="flex min-w-0 flex-col gap-8 px-3 py-6 sm:gap-10 sm:px-5 sm:py-10">
+      <p className="text-xs font-medium uppercase tracking-[0.96px] text-[#97989f]">
+        {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-[#020617] transition-colors duration-200 ease-out hover:text-[#97989f] focus-visible:outline-2 focus-visible:outline-offset-2",
+                link.underline ? "underline" : "",
+              ].join(" ")}
+            >
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function RegionColumn({ region }) {
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-8 px-3 py-6 sm:gap-10 sm:px-5 sm:py-10">
+      <p className="text-xs font-medium uppercase tracking-[0.96px] text-[#97989f]">
+        {region.title}
+      </p>
+      <div className="flex flex-col gap-2 text-sm text-[#020617]">
+        {region.address ? <p>{region.address}</p> : null}
+        {region.email ? (
+          <a
+            href={`mailto:${region.email}`}
+            className="w-max underline transition-colors duration-200 ease-out hover:text-[#97989f] focus-visible:outline-2 focus-visible:outline-offset-2"
+          >
+            {region.email}
+          </a>
+        ) : null}
+        {region.phone ? (
+          <a
+            href={`tel:${region.phone.replace(/\s/g, "")}`}
+            className="w-max underline transition-colors duration-200 ease-out hover:text-[#97989f] focus-visible:outline-2 focus-visible:outline-offset-2"
+          >
+            {region.phone}
+          </a>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Footer02 — Gentle Park white multi-column footer with payment logos.
+ * Figma node 32:19378 at 1920px.
+ */
+export function Footer02({
+  linkColumns = footer02DefaultProps.linkColumns,
+  regions = footer02DefaultProps.regions,
+  paymentBadges = footer02DefaultProps.paymentBadges,
+  copyright = footer02DefaultProps.copyright,
+  siteByLabel = footer02DefaultProps.siteByLabel,
+  siteByHref = footer02DefaultProps.siteByHref,
+  className = "",
+}) {
+  return (
+    <footer
+      className={["relative w-full overflow-hidden bg-white", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer02"
+    >
+      <div className="mx-auto w-full max-w-[1920px]">
+        <div className="flex flex-col gap-0 lg:flex-row lg:items-start lg:justify-between">
+          <div className="grid grid-cols-2 gap-0 sm:grid-cols-3 lg:flex lg:flex-wrap">
+            {linkColumns.map((column) => (
+              <LinkColumn key={column.title} column={column} />
+            ))}
+          </div>
+          <div className="grid grid-cols-1 gap-0 sm:grid-cols-2 lg:flex lg:max-w-[794px]">
+            {regions.map((region) => (
+              <RegionColumn key={region.title} region={region} />
+            ))}
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-3 border-t border-[#ededee] px-4 py-5 sm:px-5">
+          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+            <p className="text-center text-sm text-[#020617] lg:text-left">
+              {copyright}{" "}
+              <span className="text-[#97989f]">( Site by </span>
+              <a
+                href={siteByHref ?? "#"}
+                className="underline transition-colors duration-200 ease-out hover:text-[#020617] focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                {siteByLabel}
+              </a>
+              <span className="text-[#97989f]"> )</span>
+            </p>
+
+            <div className="flex flex-wrap items-center justify-center gap-1 lg:justify-end">
+              {paymentBadges.map((badge, index) => (
+                <div
+                  key={`${badge.src}-${index}`}
+                  className="flex size-[34px] items-center justify-center overflow-hidden rounded border border-[#ededee] bg-white p-1"
+                >
+                  <SafeImage
+                    src={badge.src}
+                    alt={badge.alt ?? ""}
+                    width={28}
+                    height={28}
+                    className="h-auto max-h-full w-auto max-w-full object-contain"
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer02.propTypes = footer02PropTypes;
+
+export default Footer02;

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

@@ -0,0 +1,112 @@
+import PropTypes from "prop-types";
+
+const linkShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  underline: PropTypes.bool,
+});
+
+const columnShape = PropTypes.shape({
+  title: PropTypes.string.isRequired,
+  links: PropTypes.arrayOf(linkShape),
+});
+
+const regionShape = PropTypes.shape({
+  title: PropTypes.string.isRequired,
+  address: PropTypes.string,
+  email: PropTypes.string,
+  phone: PropTypes.string,
+});
+
+const paymentShape = PropTypes.shape({
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+});
+
+export const footer02PropTypes = {
+  linkColumns: PropTypes.arrayOf(columnShape),
+  regions: PropTypes.arrayOf(regionShape),
+  paymentBadges: PropTypes.arrayOf(paymentShape),
+  copyright: PropTypes.string,
+  siteByLabel: PropTypes.string,
+  siteByHref: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export const footer02DefaultProps = {
+  linkColumns: [
+    {
+      title: "Navigate",
+      links: [
+        { label: "Shop", href: "#" },
+        { label: "About", href: "#" },
+        { label: "Contact", href: "#" },
+        { label: "Store Locator", href: "#" },
+        { label: "Blog", href: "#" },
+      ],
+    },
+    {
+      title: "Get Help",
+      links: [
+        { label: "Faq", href: "#" },
+        { label: "Delivery", href: "#" },
+        { label: "Order Process", href: "#" },
+        { label: "Returns", href: "#" },
+      ],
+    },
+    {
+      title: "Social",
+      links: [
+        { label: "Instagram", href: "#" },
+        { label: "Facebook", href: "#" },
+        { label: "Tiktok", href: "#" },
+      ],
+    },
+    {
+      title: "My Account",
+      links: [
+        { label: "Sign In / Register", href: "#" },
+        { label: "My Orders", href: "#" },
+        { label: "Wishlist", href: "#" },
+      ],
+    },
+    {
+      title: "Legal",
+      links: [
+        { label: "Terms & Conditions", href: "#" },
+        { label: "Privacy Policy", href: "#" },
+        { label: "Refund Policy", href: "#" },
+      ],
+    },
+  ],
+  regions: [
+    {
+      title: "United Arab Emirates",
+      address:
+        "89GR+4WX - Al Wahda St, Industrial Area - Al Majaz 2, Sharjah, United Arab Emirates",
+      email: "ecommerceuae@gentlepark.com",
+      phone: "+971 6 574 7803",
+    },
+    {
+      title: "Bangladesh",
+      address:
+        "Ahmed Tower (9th Floor), 28 & 30, Kamal Ataturk Avenue, Banani C/A, Dhaka-1213",
+      email: "ecommercebd@gentlepark.com",
+      phone: "+8802 2222 74913-4",
+    },
+  ],
+  paymentBadges: [
+    ...Array.from({ length: 8 }, (_, i) => ({
+      src: `/footer/footer02/payment-${String(i + 1).padStart(2, "0")}.png`,
+      alt: `Payment method ${i + 1}`,
+    })),
+    ...Array.from({ length: 7 }, (_, i) => ({
+      src: `/footer/footer02/payment-${String(i + 9).padStart(2, "0")}.svg`,
+      alt: `Payment method ${i + 9}`,
+    })),
+  ],
+  copyright: "© 2025 Gentle Park. All rights Reserved",
+  siteByLabel: "Notionhive",
+  siteByHref: "#",
+  className: "",
+};

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

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