@notionhive/contacts 0.1.0

package/templates/components/organisms/Contact06/Contact06.jsx

@@ -0,0 +1,223 @@
+"use client";
+
+import { useState } from "react";
+import SafeImage from "../../atoms/SafeImage";
+import {
+  contact06DefaultProps,
+  contact06PropTypes,
+} from "./Contact06.propTypes";
+
+const underlineInputClass =
+  "w-full bg-transparent text-base text-[#2c2c2c] outline-none transition-colors duration-200 ease-out placeholder:text-transparent focus:placeholder:text-[#2c2c2c]/40";
+
+function ChevronDownIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M5 8l5 5 5-5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ArrowUpRightIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M7 17L17 7M17 7H9M17 7V15"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function UnderlineField({ label, required = false, children }) {
+  return (
+    <div className="flex h-[60px] flex-col justify-center border-b border-[rgba(44,44,44,0.1)] py-5">
+      <label className="text-xs font-medium uppercase tracking-[0.96px] text-[#2c2c2c]/60">
+        {label}
+        {required ? "*" : ""}
+      </label>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Contact06 — Split hero image + underline form panel.
+ * Figma node 26:15636 at 1920px.
+ *
+ * @param {object} props - See Contact06.propTypes.js.
+ */
+export function Contact06({
+  headline = contact06DefaultProps.headline,
+  description = contact06DefaultProps.description,
+  heroImage = contact06DefaultProps.heroImage,
+  heroAlt = contact06DefaultProps.heroAlt,
+  subjectOptions = contact06DefaultProps.subjectOptions,
+  submitText = contact06DefaultProps.submitText,
+  formData: controlledForm,
+  onFieldChange,
+  onSubmit,
+  className = "",
+}) {
+  const [internalForm, setInternalForm] = useState({
+    firstName: "",
+    lastName: "",
+    email: "",
+    phone: "",
+    subject: "",
+    message: "",
+  });
+
+  const form = controlledForm ?? internalForm;
+
+  const setField = (field, value) => {
+    onFieldChange?.(field, value);
+    if (!controlledForm) {
+      setInternalForm((prev) => ({ ...prev, [field]: value }));
+    }
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    onSubmit?.(form);
+  };
+
+  return (
+    <section
+      className={["relative w-full overflow-hidden bg-[#fafafa]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-contact="contact06"
+    >
+      <div className="relative mx-auto flex w-full max-w-[1920px] flex-col lg:min-h-[700px] lg:flex-row xl:min-h-[1043px]">
+        {/* Left — hero image */}
+        <div className="relative h-[50vh] w-full shrink-0 lg:h-auto lg:min-h-[700px] lg:w-1/2 xl:min-h-[1043px]">
+          <SafeImage
+            src={heroImage}
+            alt={heroAlt}
+            fill
+            className="object-cover object-center"
+            sizes="(max-width: 1024px) 100vw, 50vw"
+            priority
+          />
+        </div>
+
+        {/* Right — form panel */}
+        <div className="flex w-full items-center bg-[#fafafa] px-4 py-12 sm:px-6 md:px-10 lg:w-1/2 lg:px-16 lg:py-16 xl:px-[80px] xl:py-20">
+          <form
+            onSubmit={handleSubmit}
+            className="flex w-full max-w-[608px] flex-col gap-10 lg:gap-[60px]"
+          >
+            <div className="flex flex-col gap-5 text-[#2c2c2c]">
+              <h2 className="font-serif text-3xl leading-[1.1] tracking-[-0.96px] sm:text-4xl xl:text-[48px]">
+                {headline}
+              </h2>
+              <p className="font-display text-base leading-[1.4] tracking-[-0.36px] opacity-80 sm:text-lg">
+                {description}
+              </p>
+            </div>
+
+            <div className="flex flex-col gap-5">
+              <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
+                <UnderlineField label="First name" required>
+                  <input
+                    type="text"
+                    value={form.firstName}
+                    onChange={(e) => setField("firstName", e.target.value)}
+                    className={underlineInputClass}
+                    required
+                  />
+                </UnderlineField>
+                <UnderlineField label="Last name" required>
+                  <input
+                    type="text"
+                    value={form.lastName}
+                    onChange={(e) => setField("lastName", e.target.value)}
+                    className={underlineInputClass}
+                    required
+                  />
+                </UnderlineField>
+              </div>
+
+              <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
+                <UnderlineField label="Email address" required>
+                  <input
+                    type="email"
+                    value={form.email}
+                    onChange={(e) => setField("email", e.target.value)}
+                    className={underlineInputClass}
+                    required
+                  />
+                </UnderlineField>
+                <UnderlineField label="Phone number">
+                  <input
+                    type="tel"
+                    value={form.phone}
+                    onChange={(e) => setField("phone", e.target.value)}
+                    className={underlineInputClass}
+                  />
+                </UnderlineField>
+              </div>
+
+              <div className="relative flex h-[60px] items-center border-b border-[rgba(44,44,44,0.1)] py-5">
+                <label className="sr-only">Select subject</label>
+                <select
+                  value={form.subject}
+                  onChange={(e) => setField("subject", e.target.value)}
+                  className={`${underlineInputClass} appearance-none pr-8 text-xs font-medium uppercase tracking-[0.96px] text-[#2c2c2c]/60`}
+                >
+                  <option value="" disabled>
+                    Select subject
+                  </option>
+                  {subjectOptions.map((option) => (
+                    <option key={option} value={option} className="normal-case">
+                      {option}
+                    </option>
+                  ))}
+                </select>
+                <ChevronDownIcon className="pointer-events-none absolute right-0 size-5 text-[#2c2c2c]" />
+              </div>
+
+              <div className="flex min-h-[111px] flex-col border-b border-[rgba(44,44,44,0.1)] py-5">
+                <label className="text-xs font-medium uppercase tracking-[0.96px] text-[#2c2c2c]/60">
+                  Write your message here
+                </label>
+                <textarea
+                  value={form.message}
+                  onChange={(e) => setField("message", e.target.value)}
+                  rows={3}
+                  className={`${underlineInputClass} mt-1 min-h-[60px] resize-none`}
+                />
+              </div>
+            </div>
+
+            <button
+              type="submit"
+              className="flex h-12 w-max max-w-full items-stretch overflow-hidden transition-opacity duration-200 ease-out hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              <span className="flex items-center justify-center bg-[#146d38] px-6 py-3 font-display text-sm font-semibold uppercase tracking-[1.12px] text-white">
+                {submitText}
+              </span>
+              <span className="flex size-12 shrink-0 items-center justify-center bg-[#146d38] text-white">
+                <ArrowUpRightIcon className="size-6" />
+              </span>
+            </button>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Contact06.propTypes = contact06PropTypes;
+
+export default Contact06;

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

@@ -0,0 +1,40 @@
+import PropTypes from "prop-types";
+
+export const contact06PropTypes = {
+  headline: PropTypes.string,
+  description: PropTypes.string,
+  heroImage: PropTypes.string,
+  heroAlt: PropTypes.string,
+  subjectOptions: PropTypes.arrayOf(PropTypes.string),
+  submitText: PropTypes.string,
+  formData: PropTypes.shape({
+    firstName: PropTypes.string,
+    lastName: PropTypes.string,
+    email: PropTypes.string,
+    phone: PropTypes.string,
+    subject: PropTypes.string,
+    message: PropTypes.string,
+  }),
+  onFieldChange: PropTypes.func,
+  onSubmit: PropTypes.func,
+  className: PropTypes.string,
+};
+
+export const contact06DefaultProps = {
+  headline: "Prefer to reach out online",
+  description:
+    "Submit your message and we'll connect you with the right specialist to support your project.",
+  heroImage: "/contact/contact06/hero.jpg",
+  heroAlt: "Luxury spa bathroom with tropical view",
+  subjectOptions: [
+    "General inquiry",
+    "Project consultation",
+    "Partnership",
+    "Support",
+  ],
+  submitText: "submit your inquires",
+  formData: undefined,
+  onFieldChange: undefined,
+  onSubmit: undefined,
+  className: "",
+};

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

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

package/templates/components/organisms/Contact07/Contact07.jsx

@@ -0,0 +1,348 @@
+"use client";
+
+import { useState } from "react";
+import SafeImage from "../../atoms/SafeImage";
+import {
+  contact07DefaultProps,
+  contact07PropTypes,
+} from "./Contact07.propTypes";
+
+const fieldClassName =
+  "h-[52px] w-full bg-white px-5 text-sm tracking-[0.14px] text-[#1b1e2e] outline-none transition-colors duration-200 ease-out placeholder:text-[#7e8088] focus:ring-1 focus:ring-[#020617]/20";
+
+function ChevronDownIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 18 18" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M4.5 7l4.5 4.5L13.5 7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ChevronUpIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 18 18" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M4.5 11l4.5-4.5L13.5 11"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function MailIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 14 14" fill="none" aria-hidden="true" className={className}>
+      <rect x="1" y="2.5" width="12" height="9" rx="1" stroke="currentColor" strokeWidth="1" />
+      <path d="M1 4l6 4 6-4" stroke="currentColor" strokeWidth="1" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function PhoneIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 14 14" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M3.5 1.5h2l1 3-1.5 1a6 6 0 003 3L9 7l3 1v2a1 1 0 01-1 1A9.5 9.5 0 011.5 3.5a1 1 0 011-2z"
+        stroke="currentColor"
+        strokeWidth="1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ClockIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 14 14" fill="none" aria-hidden="true" className={className}>
+      <circle cx="7" cy="7" r="5.5" stroke="currentColor" strokeWidth="1" />
+      <path d="M7 4v3l2 1.5" stroke="currentColor" strokeWidth="1" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function OfficeColumn({ office }) {
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-3">
+      <p className="text-xs font-medium uppercase tracking-[0.96px] text-[#020617]">
+        {office.name}
+      </p>
+      <div className="h-px w-full bg-[#e1e2e3]" />
+      <div className="flex flex-col gap-2.5 text-sm leading-[1.2] tracking-[0.14px] text-[#343744]">
+        {office.email ? (
+          <div className="flex items-center gap-2">
+            <MailIcon className="size-3.5 shrink-0 text-[#343744]" />
+            <a
+              href={`mailto:${office.email}`}
+              className="transition-opacity duration-200 hover:opacity-80"
+            >
+              {office.email}
+            </a>
+          </div>
+        ) : null}
+        {office.phone ? (
+          <div className="flex items-center gap-2">
+            <PhoneIcon className="size-3.5 shrink-0 text-[#343744]" />
+            <a
+              href={`tel:${office.phone.replace(/\s/g, "")}`}
+              className="transition-opacity duration-200 hover:opacity-80"
+            >
+              {office.phone}
+            </a>
+          </div>
+        ) : null}
+        {office.hours ? (
+          <div className="flex items-center gap-2">
+            <ClockIcon className="size-3.5 shrink-0 text-[#343744]" />
+            <span>{office.hours}</span>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Contact07 — Gentle Park split contact with overlaid form and FAQ.
+ * Figma node 26:15698 at 1920px (navbar excluded).
+ *
+ * @param {object} props - See Contact07.propTypes.js.
+ */
+export function Contact07({
+  headline = contact07DefaultProps.headline,
+  description = contact07DefaultProps.description,
+  heroImage = contact07DefaultProps.heroImage,
+  heroAlt = contact07DefaultProps.heroAlt,
+  offices = contact07DefaultProps.offices,
+  topicOptions = contact07DefaultProps.topicOptions,
+  submitText = contact07DefaultProps.submitText,
+  faqTitle = contact07DefaultProps.faqTitle,
+  faqItems = contact07DefaultProps.faqItems,
+  defaultOpenFaq = contact07DefaultProps.defaultOpenFaq,
+  activeFaq: controlledFaq,
+  onFaqChange,
+  formData: controlledForm,
+  onFieldChange,
+  onSubmit,
+  showFaq = contact07DefaultProps.showFaq,
+  className = "",
+}) {
+  const [internalFaq, setInternalFaq] = useState(defaultOpenFaq);
+  const [internalForm, setInternalForm] = useState({
+    fullName: "",
+    email: "",
+    phone: "",
+    orderId: "",
+    topic: "",
+    message: "",
+  });
+
+  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-[#fafafa]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-contact="contact07"
+    >
+      {/* Hero + form */}
+      <div className="relative mx-auto w-full max-w-[1920px]">
+        <div className="relative flex flex-col lg:min-h-[800px] lg:flex-row xl:min-h-[1032px]">
+          {/* Left — copy + offices */}
+          <div className="relative z-10 flex w-full flex-col justify-center gap-8 bg-[#fafafa] px-4 py-12 sm:px-6 md:px-10 lg:w-1/2 lg:gap-[34px] lg:px-10 lg:py-16 xl:px-[160px] xl:py-20">
+            <div className="flex max-w-[633px] flex-col gap-[34px]">
+              <h2 className="text-4xl font-light capitalize leading-none tracking-[-1px] text-[#020617] sm:text-5xl xl:text-[50px]">
+                {headline}
+              </h2>
+              <p className="text-base leading-[1.1] tracking-[0.16px] text-[#343744]">
+                {description}
+              </p>
+            </div>
+
+            <div className="flex max-w-[633px] flex-col gap-[34px]">
+              <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 sm:gap-[34px]">
+                {offices.map((office) => (
+                  <OfficeColumn key={office.name} office={office} />
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Right — hero image + overlaid form */}
+          <div className="relative w-full lg:w-1/2 lg:min-h-[800px] xl:min-h-[1032px]">
+            <div className="relative h-[50vh] w-full lg:absolute lg:inset-0 lg:h-full">
+              <SafeImage
+                src={heroImage}
+                alt={heroAlt}
+                fill
+                className="object-cover object-center"
+                sizes="(max-width: 1024px) 100vw, 50vw"
+                priority
+              />
+            </div>
+
+            {/* Form overlay — flows below image on mobile, absolute on desktop */}
+            <div className="relative z-10 px-4 py-8 sm:px-6 md:px-10 lg:absolute lg:inset-0 lg:flex lg:items-center lg:justify-end lg:px-10 lg:py-0 xl:pr-[68px]">
+              <form
+                onSubmit={handleSubmit}
+                className="flex w-full max-w-[500px] flex-col gap-2.5 bg-[#fafafa]/95 p-4 backdrop-blur-sm lg:bg-transparent lg:p-0 lg:backdrop-blur-none"
+              >
+                <input
+                  type="text"
+                  value={form.fullName}
+                  onChange={(e) => setField("fullName", e.target.value)}
+                  placeholder="Full Name*"
+                  className={fieldClassName}
+                  required
+                />
+                <input
+                  type="email"
+                  value={form.email}
+                  onChange={(e) => setField("email", e.target.value)}
+                  placeholder="Email Address*"
+                  className={fieldClassName}
+                  required
+                />
+                <input
+                  type="tel"
+                  value={form.phone}
+                  onChange={(e) => setField("phone", e.target.value)}
+                  placeholder="Phone Number (Optional)"
+                  className={fieldClassName}
+                />
+                <input
+                  type="text"
+                  value={form.orderId}
+                  onChange={(e) => setField("orderId", e.target.value)}
+                  placeholder="Order ID (Optional)"
+                  className={fieldClassName}
+                />
+                <div className="relative">
+                  <select
+                    value={form.topic}
+                    onChange={(e) => setField("topic", e.target.value)}
+                    className={`${fieldClassName} appearance-none pr-10 text-[#7e8088]`}
+                  >
+                    <option value="" disabled>
+                      Select topic
+                    </option>
+                    {topicOptions.map((option) => (
+                      <option key={option} value={option} className="text-[#1b1e2e]">
+                        {option}
+                      </option>
+                    ))}
+                  </select>
+                  <ChevronDownIcon className="pointer-events-none absolute right-5 top-1/2 size-[18px] -translate-y-1/2 text-[#7e8088]" />
+                </div>
+                <textarea
+                  value={form.message}
+                  onChange={(e) => setField("message", e.target.value)}
+                  placeholder="Your message"
+                  rows={5}
+                  className="min-h-[150px] w-full resize-none bg-white px-5 py-4 text-sm tracking-[0.14px] text-[#1b1e2e] outline-none transition-colors duration-200 ease-out placeholder:text-[#7e8088] focus:ring-1 focus:ring-[#020617]/20"
+                />
+                <button
+                  type="submit"
+                  className="flex h-[52px] w-full items-center justify-center bg-[#1b1e2e] px-10 py-[17px] text-sm font-semibold uppercase tracking-[0.98px] text-white transition-colors duration-200 ease-out hover:bg-[#020617] focus-visible:outline-2 focus-visible:outline-offset-2"
+                >
+                  {submitText}
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* FAQ */}
+      {showFaq && faqItems?.length ? (
+        <div className="px-4 py-16 sm:px-6 md:px-10 lg:px-20 lg:py-24 xl:px-[160px]">
+          <div className="mx-auto flex w-full max-w-[955px] flex-col items-center gap-10 lg:gap-[60px]">
+            <h2 className="w-full text-center text-4xl font-light capitalize leading-none tracking-[-1px] text-[#020617] sm:text-5xl xl:text-[50px]">
+              {faqTitle}
+            </h2>
+
+            <div className="flex w-full flex-col gap-[30px]">
+              {faqItems.map((item, index) => {
+                const isOpen = activeFaq === index;
+                const isLast = index === faqItems.length - 1;
+                return (
+                  <div key={item.question} className="flex flex-col gap-[30px]">
+                    <div className="flex flex-col gap-[30px]">
+                      <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-none text-[#020617] sm:text-2xl">
+                          {item.question}
+                        </span>
+                        <span className="shrink-0 text-[#020617]">
+                          {isOpen ? (
+                            <ChevronUpIcon className="size-[18px]" />
+                          ) : (
+                            <ChevronDownIcon className="size-[18px]" />
+                          )}
+                        </span>
+                      </button>
+                      <div
+                        className={[
+                          "grid motion-reduce:transition-none transition-all duration-300 ease-out",
+                          isOpen && item.answer
+                            ? "grid-rows-[1fr] opacity-100"
+                            : "grid-rows-[0fr] opacity-0",
+                        ].join(" ")}
+                      >
+                        <div className="overflow-hidden">
+                          {item.answer ? (
+                            <p className="text-base leading-[1.1] tracking-[0.16px] text-[#343744]">
+                              {item.answer}
+                            </p>
+                          ) : null}
+                        </div>
+                      </div>
+                    </div>
+                    {!isLast ? <div className="h-px w-full bg-[#e1e2e3]" /> : null}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+Contact07.propTypes = contact07PropTypes;
+
+export default Contact07;