@notionhive/contacts 0.1.0

package/templates/components/organisms/Contact01/Contact01.jsx

@@ -0,0 +1,363 @@
+"use client";
+
+import { useId, useState } from "react";
+import SafeImage from "../../atoms/SafeImage";
+import {
+  contact01DefaultProps,
+  contact01PropTypes,
+} from "./Contact01.propTypes";
+
+const inputClassName =
+  "h-[52px] w-full rounded-full border border-[#ededee] bg-[#f9f9fa] px-5 text-base text-[#1b1e2e] outline-none transition-colors duration-200 ease-out focus:border-[#020617]";
+
+function ChevronDownIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M8 10l4 4 4-4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function PlusIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className={className}>
+      <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function MinusIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className={className}>
+      <path d="M5 12h14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function FieldLabel({ children, required = false }) {
+  return (
+    <label className="px-5 text-base font-medium tracking-[0.32px] text-[#7e8088]">
+      {children}
+      {required ? <span className="text-[#ff373c]"> *</span> : null}
+    </label>
+  );
+}
+
+/**
+ * Contact01 — Platform One contact hero with form, partner logos, and FAQ.
+ * Figma node 26:15508 at 1920px.
+ *
+ * @param {object} props - See Contact01.propTypes.js.
+ */
+export function Contact01({
+  headline = contact01DefaultProps.headline,
+  description = contact01DefaultProps.description,
+  officeTitle = contact01DefaultProps.officeTitle,
+  office = contact01DefaultProps.office,
+  purposeOptions = contact01DefaultProps.purposeOptions,
+  privacyHref = contact01DefaultProps.privacyHref,
+  submitText = contact01DefaultProps.submitText,
+  partnersTitle = contact01DefaultProps.partnersTitle,
+  partnerLogos = contact01DefaultProps.partnerLogos,
+  faqTitle = contact01DefaultProps.faqTitle,
+  faqItems = contact01DefaultProps.faqItems,
+  defaultOpenFaq = contact01DefaultProps.defaultOpenFaq,
+  activeFaq: controlledFaq,
+  onFaqChange,
+  formData: controlledForm,
+  onFieldChange,
+  onSubmit,
+  showPartners = contact01DefaultProps.showPartners,
+  showFaq = contact01DefaultProps.showFaq,
+  className = "",
+}) {
+  const [internalFaq, setInternalFaq] = useState(defaultOpenFaq);
+  const [internalForm, setInternalForm] = useState({
+    firstName: "",
+    lastName: "",
+    email: "",
+    company: "",
+    purpose: "",
+    bio: "",
+    agreed: false,
+  });
+
+  const marqueeName = `contact01-marquee-${useId().replace(/[^a-zA-Z0-9]/g, "")}`;
+
+  const activeFaq = controlledFaq ?? internalFaq;
+  const form = controlledForm ?? internalForm;
+
+  const setField = (field, value) => {
+    onFieldChange?.(field, value);
+    if (!controlledForm) {
+      setInternalForm((prev) => ({ ...prev, [field]: value }));
+    }
+  };
+
+  const toggleFaq = (index) => {
+    const next = activeFaq === index ? -1 : index;
+    onFaqChange?.(next);
+    if (controlledFaq === undefined) setInternalFaq(next);
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    onSubmit?.(form);
+  };
+
+  return (
+    <section
+      className={["relative w-full overflow-hidden bg-white", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-contact="contact01"
+    >
+      {/* Hero — form + copy */}
+      <div className="relative mx-auto w-full max-w-[1920px] overflow-hidden px-4 py-12 sm:px-6 md:px-10 lg:px-20 lg:py-20 xl:px-[160px] xl:py-[84px]">
+        <div
+          className="pointer-events-none absolute left-0 top-1/2 size-[min(90vw,493px)] -translate-y-1/2 lg:left-[55px] lg:top-[447px] lg:size-[493px] lg:translate-y-0 xl:left-[55px]"
+          aria-hidden="true"
+        >
+          <div className="absolute inset-[-171.2%]">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src="/contact/contact01/ellipse.svg"
+              alt=""
+              className="block size-full max-w-none"
+            />
+          </div>
+        </div>
+
+        <div className="relative z-10 mx-auto flex w-full max-w-[1330px] flex-col gap-12 lg:flex-row lg:items-start lg:justify-between lg:gap-16 xl:gap-[83px]">
+          {/* Form card */}
+          <form
+            onSubmit={handleSubmit}
+            className="w-full max-w-[600px] shrink-0 rounded-2xl bg-white px-4 py-5 shadow-sm lg:px-4 lg:py-5"
+          >
+            <div className="flex flex-col gap-5">
+              <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
+                <div className="flex flex-col gap-2.5">
+                  <FieldLabel required>First Name</FieldLabel>
+                  <input
+                    type="text"
+                    value={form.firstName}
+                    onChange={(e) => setField("firstName", e.target.value)}
+                    className={inputClassName}
+                    required
+                  />
+                </div>
+                <div className="flex flex-col gap-2.5">
+                  <FieldLabel required>Last Name</FieldLabel>
+                  <input
+                    type="text"
+                    value={form.lastName}
+                    onChange={(e) => setField("lastName", e.target.value)}
+                    className={inputClassName}
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-2.5">
+                <FieldLabel required>Work Email</FieldLabel>
+                <input
+                  type="email"
+                  value={form.email}
+                  onChange={(e) => setField("email", e.target.value)}
+                  className={inputClassName}
+                  required
+                />
+              </div>
+
+              <div className="flex flex-col gap-2.5">
+                <FieldLabel required>Company Name</FieldLabel>
+                <input
+                  type="text"
+                  value={form.company}
+                  onChange={(e) => setField("company", e.target.value)}
+                  className={inputClassName}
+                  required
+                />
+              </div>
+
+              <div className="flex flex-col gap-2.5">
+                <FieldLabel required>Contact Purpose</FieldLabel>
+                <div className="relative">
+                  <select
+                    value={form.purpose}
+                    onChange={(e) => setField("purpose", e.target.value)}
+                    className={`${inputClassName} appearance-none pr-12`}
+                    required
+                  >
+                    <option value="" disabled>
+                      Select purpose
+                    </option>
+                    {purposeOptions.map((option) => (
+                      <option key={option} value={option}>
+                        {option}
+                      </option>
+                    ))}
+                  </select>
+                  <ChevronDownIcon className="pointer-events-none absolute right-5 top-1/2 size-6 -translate-y-1/2 text-[#1b1e2e]" />
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-2.5">
+                <FieldLabel>Short Bio (Optional)</FieldLabel>
+                <textarea
+                  value={form.bio}
+                  onChange={(e) => setField("bio", e.target.value)}
+                  rows={5}
+                  className="min-h-[140px] w-full resize-none rounded-2xl border border-[#ededee] bg-[#f9f9fa] px-5 py-3.5 text-base text-[#1b1e2e] outline-none transition-colors duration-200 ease-out focus:border-[#020617]"
+                />
+              </div>
+
+              <label className="flex cursor-pointer items-center gap-1.5 text-sm tracking-[0.28px] text-[#1b1e2e]">
+                <input
+                  type="checkbox"
+                  checked={form.agreed}
+                  onChange={(e) => setField("agreed", e.target.checked)}
+                  className="size-4 rounded border-[#ededee] accent-[#020617]"
+                />
+                <span>
+                  You agree with our{" "}
+                  <a
+                    href={privacyHref}
+                    className="underline transition-opacity duration-200 hover:opacity-80"
+                  >
+                    Privacy Policy.
+                  </a>
+                </span>
+              </label>
+
+              <button
+                type="submit"
+                className="h-14 w-full rounded-full bg-[#020617] text-base font-medium tracking-[0.32px] text-white transition-colors duration-200 ease-out hover:bg-[#1b1e2e] focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                {submitText}
+              </button>
+            </div>
+          </form>
+
+          {/* Copy + office info */}
+          <div className="flex w-full max-w-[657px] flex-col gap-10 lg:gap-[70px]">
+            <div className="flex flex-col gap-6 lg:gap-10">
+              <h2 className="text-4xl font-normal leading-[1.1] tracking-[-0.02em] text-[#020617] sm:text-5xl lg:text-[70px] lg:tracking-[-1.4px]">
+                {headline}
+              </h2>
+              <p className="text-base leading-[1.2] text-[#1b1e2e] sm:text-lg">
+                {description}
+              </p>
+            </div>
+
+            <div className="flex flex-col gap-5">
+              <h3 className="text-xl font-medium tracking-[-0.48px] text-[#020617] sm:text-2xl">
+                {officeTitle}
+              </h3>
+              <div className="flex flex-col gap-2 text-base leading-[1.2] text-[#1b1e2e] sm:text-lg">
+                {office?.label ? <p>{office.label}</p> : null}
+                {office?.address ? <p>{office.address}</p> : null}
+                {office?.phone ? <p>{office.phone}</p> : null}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Partner logos */}
+      {showPartners && partnerLogos?.length ? (
+        <div className="border-t border-[#ededee] bg-white py-8 lg:py-9">
+          <p className="mb-2.5 text-center text-lg leading-[1.3] text-[#020617] sm:text-xl">
+            {partnersTitle}
+          </p>
+          <div className="relative overflow-hidden">
+            <style>{`
+              @keyframes ${marqueeName} {
+                from { transform: translateX(0); }
+                to { transform: translateX(-50%); }
+              }
+            `}</style>
+            <div
+              className="flex w-max gap-0 motion-reduce:transform-none"
+              style={{ animation: `${marqueeName} 30s linear infinite` }}
+            >
+              {[...partnerLogos, ...partnerLogos].map((logo, index) => (
+                <div
+                  key={`${logo.src}-${index}`}
+                  className="flex h-[110px] w-[200px] shrink-0 items-center justify-center px-6"
+                >
+                  <SafeImage
+                    src={logo.src}
+                    alt={logo.alt ?? ""}
+                    width={120}
+                    height={60}
+                    className="h-auto max-h-[60px] w-auto max-w-[120px] object-contain"
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      {/* FAQ */}
+      {showFaq && faqItems?.length ? (
+        <div className="bg-white px-4 py-16 sm:px-6 md:px-10 lg:px-20 lg:py-24 xl:px-[295px]">
+          <div className="mx-auto flex w-full max-w-[1330px] flex-col gap-10 lg:flex-row lg:gap-4">
+            <h2 className="w-full max-w-[522px] shrink-0 text-3xl leading-[1.1] text-[#020617] sm:text-4xl lg:text-[48px]">
+              {faqTitle}
+            </h2>
+
+            <div className="flex min-w-0 flex-1 flex-col gap-4">
+              {faqItems.map((item, index) => {
+                const isOpen = activeFaq === index;
+                return (
+                  <div
+                    key={item.question}
+                    className={[
+                      "rounded-2xl border border-[#ededee] p-6 transition-colors duration-200",
+                      isOpen ? "bg-[#f9f9fa]" : "bg-white",
+                    ].join(" ")}
+                  >
+                    <button
+                      type="button"
+                      onClick={() => toggleFaq(index)}
+                      className="flex w-full items-center justify-between gap-4 text-left"
+                      aria-expanded={isOpen}
+                    >
+                      <span className="text-lg font-medium leading-[1.2] tracking-[-0.48px] text-[#020617] sm:text-2xl">
+                        {item.question}
+                      </span>
+                      <span className="shrink-0 text-[#020617]">
+                        {isOpen ? (
+                          <MinusIcon className="size-6" />
+                        ) : (
+                          <PlusIcon className="size-6" />
+                        )}
+                      </span>
+                    </button>
+                    {isOpen && item.answer ? (
+                      <p className="mt-[30px] text-base leading-[1.2] text-[#343744] sm:text-lg">
+                        {item.answer}
+                      </p>
+                    ) : null}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+Contact01.propTypes = contact01PropTypes;
+
+export default Contact01;

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

@@ -0,0 +1,105 @@
+import PropTypes from "prop-types";
+
+const officeShape = PropTypes.shape({
+  label: PropTypes.string,
+  address: PropTypes.string,
+  phone: PropTypes.string,
+});
+
+const faqItemShape = PropTypes.shape({
+  question: PropTypes.string.isRequired,
+  answer: PropTypes.string,
+});
+
+const logoShape = PropTypes.shape({
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+});
+
+export const contact01PropTypes = {
+  headline: PropTypes.string,
+  description: PropTypes.string,
+  officeTitle: PropTypes.string,
+  office: officeShape,
+  purposeOptions: PropTypes.arrayOf(PropTypes.string),
+  privacyHref: PropTypes.string,
+  submitText: PropTypes.string,
+  partnersTitle: PropTypes.string,
+  partnerLogos: PropTypes.arrayOf(logoShape),
+  faqTitle: PropTypes.string,
+  faqItems: PropTypes.arrayOf(faqItemShape),
+  defaultOpenFaq: PropTypes.number,
+  activeFaq: PropTypes.number,
+  onFaqChange: PropTypes.func,
+  formData: PropTypes.shape({
+    firstName: PropTypes.string,
+    lastName: PropTypes.string,
+    email: PropTypes.string,
+    company: PropTypes.string,
+    purpose: PropTypes.string,
+    bio: PropTypes.string,
+    agreed: PropTypes.bool,
+  }),
+  onFieldChange: PropTypes.func,
+  onSubmit: PropTypes.func,
+  showPartners: PropTypes.bool,
+  showFaq: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+export const contact01DefaultProps = {
+  headline: "Discuss Your Business Goals with Us",
+  description:
+    "We’d love to hear from you. Whether you’re exploring your first CX program, scaling globally, or looking for strategic guidance, our team is here to help.",
+  officeTitle: "Office Info",
+  office: {
+    label: "Australia – HQ",
+    address: "Level 9, 100 Walker Street, North Sydney, NSW 2060",
+    phone: "+61 2 9900 9999",
+  },
+  purposeOptions: [
+    "General inquiry",
+    "Partnership",
+    "Product demo",
+    "Support",
+  ],
+  privacyHref: "#",
+  submitText: "Lets Connect Together",
+  partnersTitle: "Trusted By Global Partenrs",
+  partnerLogos: [
+    { src: "/contact/contact01/logo-nissan.svg", alt: "Nissan" },
+    { src: "/contact/contact01/logo-amart.svg", alt: "Amart" },
+    { src: "/contact/contact01/logo-toyota.svg", alt: "Toyota" },
+    { src: "/contact/contact01/logo-great-eastern.png", alt: "Great Eastern" },
+    { src: "/contact/contact01/logo-brand5.png", alt: "Partner" },
+    { src: "/contact/contact01/logo-kenwood.png", alt: "Kenwood" },
+    { src: "/contact/contact01/logo-brand7.png", alt: "Partner" },
+    { src: "/contact/contact01/logo-ticketmaster.png", alt: "Ticketmaster" },
+    { src: "/contact/contact01/logo-brand9.svg", alt: "Partner" },
+    { src: "/contact/contact01/logo-suncorp.png", alt: "Suncorp" },
+    { src: "/contact/contact01/logo-accenture.svg", alt: "Accenture" },
+    { src: "/contact/contact01/logo-brand12.png", alt: "Partner" },
+  ],
+  faqTitle: "Frequently Asked Questions",
+  faqItems: [
+    {
+      question: "1. What is Platform One?",
+      answer:
+        "Platform One is an experience intelligence platform that unifies customer, employee, product, and brand feedback into a single, actionable view. We combine AI-powered analytics with human expertise to help organizations make smarter, faster, and more human-centered decisions.",
+    },
+    { question: "2. Who is Platform One for?", answer: "" },
+    {
+      question: "3. How is Platform One different from other CX tools?",
+      answer: "",
+    },
+    {
+      question: "4. Can Platform One integrate with my existing systems?",
+      answer: "",
+    },
+    { question: "5. How secure is my data?", answer: "" },
+    { question: "6. Do you work internationally?", answer: "" },
+  ],
+  defaultOpenFaq: 0,
+  showPartners: true,
+  showFaq: true,
+};

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

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