@notionhive/footers 0.1.0

package/templates/components/organisms/Footer06/Footer06.jsx

@@ -0,0 +1,170 @@
+"use client";
+
+import {
+  footer06DefaultProps,
+  footer06PropTypes,
+} from "./Footer06.propTypes";
+
+function LinkedinIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className={className}>
+      <rect x="3" y="9" width="4" height="12" fill="currentColor" />
+      <circle cx="5" cy="5" r="2" fill="currentColor" />
+      <path
+        d="M11 9h3.8v1.6c.7-1.1 2-1.8 3.5-1.8 3.4 0 4 2.2 4 5.1V21H18v-5.2c0-1.2 0-2.8-1.7-2.8-1.7 0-2 1.3-2 2.6V21h-3.2V9z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function FacebookIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M14 8.5h2.5V5h-2.5C11.5 5 10 6.8 10 9v2.5H7.5V15H10v6h4v-6h3l.5-3.5H14V9.5c0-.8.2-1 1-1z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function XIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M4 4l7.2 9.6L4.3 20h2.4l5.4-6.2 4.4 6.2H20l-7.5-10L19.4 4h-2.4l-5 5.7L8.4 4H4z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function InstagramIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className={className}>
+      <rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="1.5" />
+      <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.5" />
+      <circle cx="17.5" cy="6.5" r="1" fill="currentColor" />
+    </svg>
+  );
+}
+
+function YoutubeIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M21.6 7.2a2.5 2.5 0 00-1.8-1.8C17.9 5 12 5 12 5s-5.9 0-7.8.4A2.5 2.5 0 002.4 7.2 26 26 0 002 12a26 26 0 00.4 4.8 2.5 2.5 0 001.8 1.8C6.1 19 12 19 12 19s5.9 0 7.8-.4a2.5 2.5 0 001.8-1.8A26 26 0 0022 12a26 26 0 00-.4-4.8zM10 15.5v-7l6 3.5-6 3.5z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+const SOCIAL_ICONS = {
+  linkedin: LinkedinIcon,
+  facebook: FacebookIcon,
+  x: XIcon,
+  instagram: InstagramIcon,
+  youtube: YoutubeIcon,
+};
+
+function Dot() {
+  return <span className="text-[#c6cad0]" aria-hidden="true">•</span>;
+}
+
+function LinkRow({ links, className = "" }) {
+  return (
+    <nav
+      className={[
+        "flex flex-wrap items-center justify-center gap-x-3 gap-y-2 text-center sm:gap-x-4",
+        className,
+      ].join(" ")}
+    >
+      {links.map((link, index) => (
+        <span key={`${link.label}-${index}`} className="inline-flex items-center gap-3 sm:gap-4">
+          {index > 0 ? <Dot /> : null}
+          <a
+            href={link.href ?? "#"}
+            className="transition-colors duration-200 ease-out hover:text-[#010623] focus-visible:outline-2 focus-visible:outline-offset-2"
+          >
+            {link.label}
+          </a>
+        </span>
+      ))}
+    </nav>
+  );
+}
+
+/**
+ * Footer06 — Brac EPL centered link rows footer.
+ * Figma node 32:20237 at 1920px.
+ */
+export function Footer06({
+  primaryLinks = footer06DefaultProps.primaryLinks,
+  secondaryLinks = footer06DefaultProps.secondaryLinks,
+  socialLinks = footer06DefaultProps.socialLinks,
+  copyright = footer06DefaultProps.copyright,
+  siteByLabel = footer06DefaultProps.siteByLabel,
+  siteByHref = footer06DefaultProps.siteByHref,
+  className = "",
+}) {
+  return (
+    <footer
+      className={["relative w-full overflow-hidden border-t border-[#edeef0] bg-white", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer06"
+    >
+      <div className="mx-auto flex w-full max-w-[1920px] flex-col items-center gap-8 px-4 py-12 sm:px-6 md:gap-10 md:px-10 lg:px-20 lg:py-16 xl:gap-12 xl:px-[240px] xl:py-20">
+        <div className="flex flex-wrap items-center justify-center gap-3 sm:gap-4">
+          {socialLinks.map((social, index) => {
+            const Icon = SOCIAL_ICONS[social.icon] ?? LinkedinIcon;
+            return (
+              <span key={social.label} className="inline-flex items-center gap-3 sm:gap-4">
+                {index > 0 ? <Dot /> : null}
+                <a
+                  href={social.href ?? "#"}
+                  aria-label={social.label}
+                  className="text-[#272e39] transition-colors duration-200 ease-out hover:text-[#010623] focus-visible:outline-2 focus-visible:outline-offset-2"
+                >
+                  <Icon className="size-6" />
+                </a>
+              </span>
+            );
+          })}
+        </div>
+
+        <div className="h-px w-full bg-[#edeef0]" />
+
+        <LinkRow
+          links={primaryLinks}
+          className="font-serif text-lg text-[#010623] sm:text-xl lg:text-[22px]"
+        />
+
+        <div className="h-px w-full bg-[#edeef0]" />
+
+        <LinkRow
+          links={secondaryLinks}
+          className="text-sm text-[#272e39]/60 sm:text-base"
+        />
+
+        <div className="h-px w-full bg-[#edeef0]" />
+
+        <p className="text-center text-sm text-[#272e39]/60 sm:text-base">
+          {copyright} Site by{" "}
+          <a
+            href={siteByHref ?? "#"}
+            className="underline transition-colors duration-200 ease-out hover:text-[#272e39] focus-visible:outline-2 focus-visible:outline-offset-2"
+          >
+            {siteByLabel}
+          </a>
+        </p>
+      </div>
+    </footer>
+  );
+}
+
+Footer06.propTypes = footer06PropTypes;
+
+export default Footer06;

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

@@ -0,0 +1,53 @@
+import PropTypes from "prop-types";
+
+const linkShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+});
+
+const socialShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  icon: PropTypes.oneOf(["linkedin", "facebook", "x", "instagram", "youtube"]),
+});
+
+export const footer06PropTypes = {
+  primaryLinks: PropTypes.arrayOf(linkShape),
+  secondaryLinks: PropTypes.arrayOf(linkShape),
+  socialLinks: PropTypes.arrayOf(socialShape),
+  copyright: PropTypes.string,
+  siteByLabel: PropTypes.string,
+  siteByHref: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export const footer06DefaultProps = {
+  primaryLinks: [
+    { label: "Products & Services", href: "#" },
+    { label: "Offshore Invest", href: "#" },
+    { label: "BESL Research", href: "#" },
+    { label: "About Us", href: "#" },
+    { label: "Information Hub", href: "#" },
+    { label: "Contact us", href: "#" },
+  ],
+  secondaryLinks: [
+    { label: "Set up a BO account", href: "#" },
+    { label: "Management Team", href: "#" },
+    { label: "Market News", href: "#" },
+    { label: "Set up a BO account", href: "#" },
+    { label: "Careers", href: "#" },
+    { label: "Terms & Conditions", href: "#" },
+    { label: "Privacy Policies", href: "#" },
+  ],
+  socialLinks: [
+    { label: "LinkedIn", href: "#", icon: "linkedin" },
+    { label: "Facebook", href: "#", icon: "facebook" },
+    { label: "X", href: "#", icon: "x" },
+    { label: "Instagram", href: "#", icon: "instagram" },
+    { label: "YouTube", href: "#", icon: "youtube" },
+  ],
+  copyright: "© 2025 Brac EPL. All rights reserved.",
+  siteByLabel: "Notionhive.",
+  siteByHref: "#",
+  className: "",
+};

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

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

package/templates/components/organisms/Footer07/Footer07.jsx

@@ -0,0 +1,253 @@
+"use client";
+
+import { useState } from "react";
+import { SafeImage } from "../../atoms/SafeImage";
+import {
+  footer07DefaultProps,
+  footer07PropTypes,
+} from "./Footer07.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 FacebookIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 34 34" fill="none" aria-hidden="true" className={className}>
+      <circle cx="17" cy="17" r="17" fill="currentColor" />
+      <path
+        d="M18.5 10h-2a2 2 0 00-2 2v2h-2v3h2v7h3v-7h2.5l.5-3h-3v-2c0-.55.45-1 1-1h2V10z"
+        fill="white"
+      />
+    </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="currentColor" />
+      <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="white"
+      />
+    </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="currentColor" />
+      <rect x="11" y="11" width="12" height="12" rx="3" stroke="white" strokeWidth="1.2" />
+      <circle cx="17" cy="17" r="3" stroke="white" strokeWidth="1.2" />
+      <circle cx="20.5" cy="13.5" r="0.8" fill="white" />
+    </svg>
+  );
+}
+
+const SOCIAL_ICONS = {
+  facebook: FacebookIcon,
+  youtube: YoutubeIcon,
+  instagram: InstagramIcon,
+};
+
+function LinkColumn({ column, twoColumn = false, policyLinks = [] }) {
+  if (twoColumn) {
+    return (
+      <div className="flex min-w-0 flex-col gap-14">
+        <p className="text-xl leading-[1.2] text-[#5a5a5a]">{column.title}</p>
+        <div className="flex flex-col gap-8 sm:flex-row sm:gap-0">
+          <ul className="flex w-full flex-col gap-4 sm:w-[232px]">
+            {column.links.map((link) => (
+              <li key={link.label}>
+                <a
+                  href={link.href ?? "#"}
+                  className="text-base font-light text-[#5a5a5a] transition-colors duration-200 ease-out hover:text-black focus-visible:outline-2 focus-visible:outline-offset-2"
+                >
+                  {link.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+          <ul className="flex w-full flex-col gap-4 sm:w-[232px]">
+            {policyLinks.map((link) => (
+              <li key={link.label}>
+                <a
+                  href={link.href ?? "#"}
+                  className="text-base font-light text-[#5a5a5a] transition-colors duration-200 ease-out hover:text-black focus-visible:outline-2 focus-visible:outline-offset-2"
+                >
+                  {link.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-14">
+      <p className="text-xl leading-[1.2] text-[#5a5a5a]">{column.title}</p>
+      <ul className="flex flex-col gap-4">
+        {column.links.map((link) => (
+          <li key={link.label}>
+            <a
+              href={link.href ?? "#"}
+              className="text-base font-light text-[#5a5a5a] transition-colors duration-200 ease-out hover:text-black focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * Footer07 — ZEIT luxury watch footer with hero image + newsletter.
+ * Figma node 32:20239 at 1920px.
+ */
+export function Footer07({
+  newsletterTitle = footer07DefaultProps.newsletterTitle,
+  emailPlaceholder = footer07DefaultProps.emailPlaceholder,
+  email: controlledEmail,
+  onEmailChange,
+  onNewsletterSubmit,
+  linkColumns = footer07DefaultProps.linkColumns,
+  policyLinks = footer07DefaultProps.policyLinks,
+  copyright = footer07DefaultProps.copyright,
+  socialLinks = footer07DefaultProps.socialLinks,
+  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);
+  };
+
+  const mainColumns = linkColumns.filter((col) => col.title !== "Quick Links");
+  const quickLinksColumn = linkColumns.find((col) => col.title === "Quick Links");
+
+  return (
+    <footer
+      className={["relative w-full overflow-hidden bg-white", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-footer="footer07"
+    >
+      <div className="relative mx-auto w-full max-w-[1920px]">
+        <div className="relative flex flex-col items-center pt-12 sm:pt-16 xl:pt-[100px]">
+          <div className="relative mb-[-80px] w-full sm:mb-[-120px] xl:mb-[-200px]">
+            <div className="relative aspect-[1920/528] w-full overflow-hidden">
+              <SafeImage
+                src="/footer/footer07/watch-hero.png"
+                alt=""
+                fill
+                className="object-cover object-center"
+              />
+              <SafeImage
+                src="/footer/footer07/watch-overlay.png"
+                alt=""
+                fill
+                className="object-cover object-center"
+              />
+            </div>
+            <div className="absolute inset-x-0 bottom-0 flex justify-center">
+              <SafeImage
+                src="/footer/footer07/logo.png"
+                alt="ZEIT"
+                width={665}
+                height={200}
+                className="h-16 w-auto sm:h-24 md:h-32 xl:h-[200px] xl:w-[665px]"
+              />
+            </div>
+          </div>
+
+          <div className="relative z-10 flex w-full flex-col gap-[140px] bg-white px-4 sm:px-6 md:px-10 lg:px-20 xl:px-[80px] xl:pt-[140px]">
+            <div className="flex flex-col gap-12 xl:flex-row xl:items-start xl:justify-between">
+              <form onSubmit={handleSubmit} className="w-full max-w-[466px]">
+                <p className="mb-14 text-xl leading-[1.2] text-[#5a5a5a]">
+                  Sign up to our
+                  <br />
+                  Newsletter
+                </p>
+                <div className="flex items-center gap-2.5 border-b border-black pb-4">
+                  <input
+                    type="email"
+                    value={email}
+                    onChange={handleEmailChange}
+                    placeholder={emailPlaceholder}
+                    className="min-w-0 flex-1 bg-transparent text-base font-light leading-none text-[#5a5a5a] outline-none placeholder:text-[#5a5a5a]/60"
+                  />
+                  <button
+                    type="submit"
+                    aria-label="Subscribe"
+                    className="shrink-0 text-[#5a5a5a] transition-opacity duration-200 ease-out hover:opacity-70 focus-visible:outline-2 focus-visible:outline-offset-2"
+                  >
+                    <ArrowUpRightIcon className="size-5" />
+                  </button>
+                </div>
+              </form>
+
+              <div className="flex w-full max-w-[1090px] flex-col gap-10 sm:flex-row sm:flex-wrap sm:gap-12 xl:gap-12">
+                {mainColumns.map((column) => (
+                  <LinkColumn key={column.title} column={column} />
+                ))}
+                {quickLinksColumn ? (
+                  <LinkColumn
+                    column={quickLinksColumn}
+                    twoColumn
+                    policyLinks={policyLinks}
+                  />
+                ) : null}
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-6 border-t border-[#101214]/10 px-0 py-6 sm:flex-row sm:items-center sm:justify-between xl:py-6">
+              <p className="text-base font-light leading-none text-[#5a5a5a]">{copyright}</p>
+              <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="text-black 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>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer07.propTypes = footer07PropTypes;
+
+export default Footer07;

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

@@ -0,0 +1,83 @@
+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"]),
+});
+
+export const footer07PropTypes = {
+  newsletterTitle: PropTypes.string,
+  emailPlaceholder: PropTypes.string,
+  email: PropTypes.string,
+  onEmailChange: PropTypes.func,
+  onNewsletterSubmit: PropTypes.func,
+  linkColumns: PropTypes.arrayOf(columnShape),
+  policyLinks: PropTypes.arrayOf(linkShape),
+  copyright: PropTypes.string,
+  socialLinks: PropTypes.arrayOf(socialShape),
+  className: PropTypes.string,
+};
+
+export const footer07DefaultProps = {
+  newsletterTitle: "Sign up to our Newsletter",
+  emailPlaceholder: "Email Address",
+  email: "",
+  linkColumns: [
+    {
+      title: "Catalog",
+      links: [
+        { label: "Men's", href: "#" },
+        { label: "Women's", href: "#" },
+        { label: "Youtube", href: "#" },
+      ],
+    },
+    {
+      title: "Series",
+      links: [
+        { label: "Prime Series", href: "#" },
+        { label: "Chrono", href: "#" },
+      ],
+    },
+    {
+      title: "Accessories",
+      links: [
+        { label: "Battery", href: "#" },
+        { label: "Watch Gift Box", href: "#" },
+        { label: "Watch Straps", href: "#" },
+      ],
+    },
+    {
+      title: "Quick Links",
+      links: [
+        { label: "About Us", href: "#" },
+        { label: "Contact Us", href: "#" },
+        { label: "Service Center", href: "#" },
+        { label: "Shop", href: "#" },
+      ],
+    },
+  ],
+  policyLinks: [
+    { label: "Return & Refund Policy", href: "#" },
+    { label: "Terms & Conditions", href: "#" },
+    { label: "Privacy Policy", href: "#" },
+    { label: "FAQs", href: "#" },
+  ],
+  copyright: "©2026 ZEIT. All rights reserved.",
+  socialLinks: [
+    { label: "Facebook", href: "#", icon: "facebook" },
+    { label: "YouTube", href: "#", icon: "youtube" },
+    { label: "Instagram", href: "#", icon: "instagram" },
+  ],
+  className: "",
+};

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

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