@notionhive/contacts 0.1.0

package/templates/components/organisms/Contact02/Contact02.jsx

@@ -0,0 +1,288 @@
+"use client";
+
+import { useState } from "react";
+import SafeImage from "../../atoms/SafeImage";
+import {
+  contact02DefaultProps,
+  contact02PropTypes,
+} from "./Contact02.propTypes";
+
+function SearchPinIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 18 18" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M9 1.5a5.25 5.25 0 00-5.25 5.25c0 3.938 5.25 9.75 5.25 9.75s5.25-5.812 5.25-9.75A5.25 5.25 0 009 1.5z"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinejoin="round"
+      />
+      <circle cx="9" cy="6.75" r="1.75" fill="currentColor" />
+    </svg>
+  );
+}
+
+function LocationPinIcon({ active = false, index, className = "" }) {
+  return (
+    <div className={`relative size-7 shrink-0 ${className}`} aria-hidden="true">
+      <svg viewBox="0 0 24 24" fill="none" className="size-6">
+        <path
+          d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"
+          fill={active ? "#367c2b" : "#525252"}
+        />
+        <circle cx="12" cy="9" r="2.5" fill="white" />
+      </svg>
+      {index != null ? (
+        <span className="absolute left-1/2 top-[9px] -translate-x-1/2 text-[10px] font-bold leading-none text-white">
+          {index}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+function PhoneIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 18 18" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M4.5 2.25h2.25l.75 2.25-1.69 1.13a7.5 7.5 0 003.38 3.38L10.5 7.5l2.25.75V10.5a1.13 1.13 0 01-1.13 1.13A9.38 9.38 0 012.25 4.5a1.13 1.13 0 011.13-1.13z"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ComputerIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 18 18" fill="none" aria-hidden="true" className={className}>
+      <rect x="2" y="3" width="14" height="9" rx="1" stroke="currentColor" strokeWidth="1.2" />
+      <path d="M6 15h6M9 12v3" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function ExternalLinkIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M11 3h6v6M17 3L9 11M7 5H4a1 1 0 00-1 1v10a1 1 0 001 1h10a1 1 0 001-1v-3"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function DirectionsIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 18 18" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M3 15l4-12 4 4 4-4v12H3z"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function CollapseIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className={className}>
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1.2" />
+      <path d="M14 8l-4 4 4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+/**
+ * Contact02 — Dealer locator split with search, location list, and map.
+ * Figma node 26:15671 at 1920px.
+ *
+ * @param {object} props - See Contact02.propTypes.js.
+ */
+export function Contact02({
+  searchPlaceholder = contact02DefaultProps.searchPlaceholder,
+  findButtonText = contact02DefaultProps.findButtonText,
+  locationsTitle = contact02DefaultProps.locationsTitle,
+  locations = contact02DefaultProps.locations,
+  mapImage = contact02DefaultProps.mapImage,
+  mapAlt = contact02DefaultProps.mapAlt,
+  defaultActiveLocation = contact02DefaultProps.defaultActiveLocation,
+  activeLocation: controlledActive,
+  onLocationSelect,
+  onUseMyLocation,
+  onFindLocation,
+  className = "",
+}) {
+  const [internalActive, setInternalActive] = useState(defaultActiveLocation);
+
+  const activeLocation = controlledActive ?? internalActive;
+
+  const selectLocation = (index) => {
+    onLocationSelect?.(index);
+    if (controlledActive === undefined) setInternalActive(index);
+  };
+
+  return (
+    <section
+      className={["relative w-full overflow-hidden bg-white", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-contact="contact02"
+    >
+      <div className="relative mx-auto flex w-full max-w-[1920px] flex-col lg:min-h-[720px] lg:flex-row">
+        {/* Left — search + location list */}
+        <div className="flex w-full shrink-0 flex-col border border-[#e5e5e5] lg:w-[38.4%] lg:max-w-[738px] lg:min-h-[720px]">
+          {/* Search bar */}
+          <div className="border-b border-[#e5e5e5] bg-white px-4 py-5 sm:px-6 md:px-8 lg:px-8">
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
+              <button
+                type="button"
+                onClick={onUseMyLocation}
+                className="flex min-h-[52px] flex-1 items-center gap-2.5 rounded-full border border-[#848484] bg-white px-4 py-3.5 text-left text-base text-[#848484] transition-colors duration-200 ease-out hover:border-[#525252] focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                <SearchPinIcon className="size-[18px] shrink-0 text-[#848484]" />
+                <span>{searchPlaceholder}</span>
+              </button>
+              <div className="flex items-center gap-3">
+                <button
+                  type="button"
+                  onClick={onFindLocation}
+                  className="shrink-0 rounded-full bg-[#367c2b] px-6 py-4 text-base font-bold text-white transition-colors duration-200 ease-out hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 sm:px-8"
+                >
+                  {findButtonText}
+                </button>
+                <button
+                  type="button"
+                  className="hidden shrink-0 text-[#525252] transition-opacity duration-200 hover:opacity-80 lg:block"
+                  aria-label="Collapse panel"
+                >
+                  <CollapseIcon className="size-6" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Location list */}
+          <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-4 py-4 sm:px-4 lg:max-h-[601px]">
+            <p className="text-lg font-bold leading-5 text-[#212121]">{locationsTitle}</p>
+
+            {locations.map((location, index) => {
+              const isActive = activeLocation === index;
+              return (
+                <div
+                  key={location.id ?? index}
+                  className={[
+                    "flex flex-col gap-4 rounded px-4 pb-4 pt-4 transition-colors duration-200",
+                    isActive ? "bg-[#f5f8f5]" : "bg-white",
+                  ].join(" ")}
+                >
+                  <button
+                    type="button"
+                    onClick={() => selectLocation(index)}
+                    className="flex w-full items-center justify-between gap-3 text-left"
+                  >
+                    <LocationPinIcon active={isActive} index={index + 1} />
+                    <span
+                      className={[
+                        "min-w-0 flex-1 text-lg font-bold leading-5",
+                        isActive ? "text-[#367c2b]" : "text-[#525252]",
+                      ].join(" ")}
+                    >
+                      {location.name}
+                    </span>
+                    {location.distance ? (
+                      <span
+                        className={[
+                          "shrink-0 text-lg font-bold leading-5",
+                          isActive ? "text-[#212121]" : "text-[#525252]",
+                        ].join(" ")}
+                      >
+                        {location.distance}
+                      </span>
+                    ) : null}
+                  </button>
+
+                  <div className="flex items-end justify-between gap-3">
+                    <div className="flex min-w-0 flex-1 flex-col gap-2">
+                      {location.address ? (
+                        <p className="text-base leading-6 text-[#525252]">{location.address}</p>
+                      ) : null}
+                      {location.phone ? (
+                        <div className="flex items-center gap-2 text-sm leading-5 text-[#525252]">
+                          <PhoneIcon className="size-[18px] shrink-0" />
+                          <span>{location.phone}</span>
+                        </div>
+                      ) : null}
+                      {location.website ? (
+                        <div className="flex items-center gap-2 text-sm leading-5 text-[#525252]">
+                          <ComputerIcon className="size-[18px] shrink-0" />
+                          <a
+                            href={
+                              location.website.startsWith("http")
+                                ? location.website
+                                : `https://${location.website}`
+                            }
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="truncate transition-opacity duration-200 hover:opacity-80"
+                          >
+                            {location.website}
+                          </a>
+                        </div>
+                      ) : null}
+                      {location.detailsHref ? (
+                        <a
+                          href={location.detailsHref}
+                          className="inline-flex items-center gap-1 text-base leading-6 text-[#525252] transition-opacity duration-200 hover:opacity-80"
+                        >
+                          View Details
+                          <ExternalLinkIcon className="size-5 -rotate-90" />
+                        </a>
+                      ) : null}
+                    </div>
+                    {location.directionsHref ? (
+                      <a
+                        href={location.directionsHref}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        aria-label={`Directions to ${location.name}`}
+                        className="flex size-[42px] shrink-0 items-center justify-center rounded-full border border-[#525252] text-[#525252] transition-colors duration-200 ease-out hover:bg-[#f5f8f5] focus-visible:outline-2 focus-visible:outline-offset-2"
+                      >
+                        <DirectionsIcon className="size-[18px]" />
+                      </a>
+                    ) : null}
+                  </div>
+
+                  {index < locations.length - 1 ? (
+                    <div className="h-px w-full bg-[#e5e5e5]" aria-hidden="true" />
+                  ) : null}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Right — map */}
+        <div className="relative h-[50vh] w-full lg:h-auto lg:min-h-[720px] lg:flex-1">
+          <SafeImage
+            src={mapImage}
+            alt={mapAlt}
+            fill
+            className="object-cover object-center"
+            sizes="(max-width: 1024px) 100vw, 62vw"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Contact02.propTypes = contact02PropTypes;
+
+export default Contact02;

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

@@ -0,0 +1,78 @@
+import PropTypes from "prop-types";
+
+const locationShape = PropTypes.shape({
+  id: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  distance: PropTypes.string,
+  address: PropTypes.string,
+  phone: PropTypes.string,
+  website: PropTypes.string,
+  detailsHref: PropTypes.string,
+  directionsHref: PropTypes.string,
+});
+
+export const contact02PropTypes = {
+  searchPlaceholder: PropTypes.string,
+  findButtonText: PropTypes.string,
+  locationsTitle: PropTypes.string,
+  locations: PropTypes.arrayOf(locationShape),
+  mapImage: PropTypes.string,
+  mapAlt: PropTypes.string,
+  defaultActiveLocation: PropTypes.number,
+  activeLocation: PropTypes.number,
+  onLocationSelect: PropTypes.func,
+  onUseMyLocation: PropTypes.func,
+  onFindLocation: PropTypes.func,
+  className: PropTypes.string,
+};
+
+export const contact02DefaultProps = {
+  searchPlaceholder: "Use My Location",
+  findButtonText: "Find Location",
+  locationsTitle: "Nearest locations (15)",
+  mapImage: "/contact/contact02/map.jpg",
+  mapAlt: "Dealer locator map",
+  defaultActiveLocation: 0,
+  locations: [
+    {
+      id: "1",
+      name: "Koenig Equipment",
+      distance: "65.1 mi",
+      address: "1929 East Main Street Greenfield, IN, United States",
+      phone: "3178490810",
+      website: "www.koenigfarmequipment.com",
+      detailsHref: "#",
+      directionsHref: "#",
+    },
+    {
+      id: "2",
+      name: "Koenig Equipment",
+      distance: "65.1 mi",
+      address: "1929 East Main Street Greenfield, IN, United States",
+      phone: "3178490810",
+      website: "www.koenigfarmequipment.com",
+      detailsHref: "#",
+      directionsHref: "#",
+    },
+    {
+      id: "3",
+      name: "Koenig Equipment",
+      distance: "65.1 mi",
+      address: "1929 East Main Street Greenfield, IN, United States",
+      phone: "3178490810",
+      website: "www.koenigfarmequipment.com",
+      detailsHref: "#",
+      directionsHref: "#",
+    },
+    {
+      id: "4",
+      name: "Koenig Equipment",
+      distance: "65.1 mi",
+      address: "1929 East Main Street Greenfield, IN, United States",
+      phone: "3178490810",
+      website: "www.koenigfarmequipment.com",
+      detailsHref: "#",
+      directionsHref: "#",
+    },
+  ],
+};

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

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

package/templates/components/organisms/Contact03/Contact03.jsx

@@ -0,0 +1,94 @@
+"use client";
+
+import SafeImage from "../../atoms/SafeImage";
+import {
+  contact03DefaultProps,
+  contact03PropTypes,
+} from "./Contact03.propTypes";
+
+function ArrowIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 64 64" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M16 32h32M40 20l12 12-12 12"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Contact03 — Editorial contact card on full-bleed background.
+ * Figma node 26:15837 at 1920px.
+ *
+ * @param {object} props - See Contact03.propTypes.js.
+ */
+export function Contact03({
+  headline = contact03DefaultProps.headline,
+  description = contact03DefaultProps.description,
+  cardPhoto = contact03DefaultProps.cardPhoto,
+  cardPhotoAlt = contact03DefaultProps.cardPhotoAlt,
+  backgroundImage = contact03DefaultProps.backgroundImage,
+  backgroundAlt = contact03DefaultProps.backgroundAlt,
+  href = contact03DefaultProps.href,
+  ctaAriaLabel = contact03DefaultProps.ctaAriaLabel,
+  className = "",
+}) {
+  return (
+    <section
+      className={["relative w-full overflow-hidden", className].filter(Boolean).join(" ")}
+      data-contact="contact03"
+    >
+      <div className="relative mx-auto w-full max-w-[1920px] min-h-[70vh] md:min-h-[80vh] lg:min-h-[900px]">
+        <SafeImage
+          src={backgroundImage}
+          alt={backgroundAlt}
+          fill
+          className="object-cover object-center"
+          sizes="100vw"
+          priority
+        />
+
+        <div className="relative z-10 flex min-h-[70vh] items-center justify-center px-4 py-16 sm:px-6 md:min-h-[80vh] md:px-10 lg:min-h-[900px] lg:px-20 xl:px-[160px]">
+          <div className="w-max max-w-[calc(100%-2rem)] bg-[#fffbf5] p-6 sm:p-8 md:p-10 lg:p-10">
+            <div className="flex flex-col items-end gap-8 md:gap-10 lg:gap-12">
+              <h2 className="w-full min-w-full text-4xl font-normal leading-none tracking-[-0.02em] text-[#141313] sm:text-5xl md:text-6xl lg:text-7xl xl:text-[96px] xl:leading-[96px] xl:tracking-[-1.92px]">
+                {headline}
+              </h2>
+
+              <div className="relative h-[200px] w-[150px] shrink-0 self-end sm:h-[240px] sm:w-[180px] md:h-[300px] md:w-[225px]">
+                <SafeImage
+                  src={cardPhoto}
+                  alt={cardPhotoAlt}
+                  fill
+                  className="object-cover object-center"
+                  sizes="(max-width: 768px) 150px, 225px"
+                />
+              </div>
+
+              <div className="flex w-full flex-col items-start gap-6 sm:flex-row sm:items-center sm:justify-between sm:gap-10 lg:gap-20">
+                <p className="max-w-md text-base leading-7 text-[rgba(20,19,19,0.7)] sm:text-lg md:text-xl md:leading-7">
+                  {description}
+                </p>
+                <a
+                  href={href}
+                  aria-label={ctaAriaLabel}
+                  className="flex size-12 shrink-0 items-center justify-center text-[#141313] transition-opacity duration-200 ease-out hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 sm:size-14 md:size-16"
+                >
+                  <ArrowIcon className="-rotate-90 size-full" />
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Contact03.propTypes = contact03PropTypes;
+
+export default Contact03;

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

@@ -0,0 +1,25 @@
+import PropTypes from "prop-types";
+
+export const contact03PropTypes = {
+  headline: PropTypes.string,
+  description: PropTypes.string,
+  cardPhoto: PropTypes.string,
+  cardPhotoAlt: PropTypes.string,
+  backgroundImage: PropTypes.string,
+  backgroundAlt: PropTypes.string,
+  href: PropTypes.string,
+  ctaAriaLabel: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export const contact03DefaultProps = {
+  headline: "Contact",
+  description:
+    "Reach out to our team for information about our products, business operations, or partnership opportunities.",
+  cardPhoto: "/contact/contact03/card-photo.jpg",
+  cardPhotoAlt: "Team member working on a laptop",
+  backgroundImage: "/contact/contact03/bg.jpg",
+  backgroundAlt: "Industrial manufacturing background",
+  href: "#",
+  ctaAriaLabel: "Contact us",
+};

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

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