@notionhive/contacts 0.1.0

package/templates/components/organisms/Contact04/Contact04.jsx

@@ -0,0 +1,239 @@
+"use client";
+
+import { useState } from "react";
+import {
+  contact04DefaultProps,
+  contact04PropTypes,
+} from "./Contact04.propTypes";
+
+const inputClassName =
+  "w-full bg-transparent py-2 text-lg text-[rgba(0,0,0,0.9)] outline-none transition-colors duration-200 ease-out placeholder:text-[rgba(0,0,0,0.4)] focus:border-[#007cff]";
+
+function EastArrowIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M5 12h14M13 6l6 6-6 6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+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 UnderlineField({ label, required = false, children }) {
+  return (
+    <div className="flex w-full flex-col">
+      <label className="text-base leading-6 text-[#010623]">
+        {label}
+        {required ? "*" : ""}
+      </label>
+      <div className="border-b border-[rgba(0,0,0,0.15)]">{children}</div>
+    </div>
+  );
+}
+
+/**
+ * Contact04 — Brace PL split contact info + form.
+ * Figma node 26:15849 at 1920px.
+ *
+ * @param {object} props - See Contact04.propTypes.js.
+ */
+export function Contact04({
+  label = contact04DefaultProps.label,
+  headline = contact04DefaultProps.headline,
+  phoneLabel = contact04DefaultProps.phoneLabel,
+  phone = contact04DefaultProps.phone,
+  emailLabel = contact04DefaultProps.emailLabel,
+  email = contact04DefaultProps.email,
+  socialLinks = contact04DefaultProps.socialLinks,
+  formTitle = contact04DefaultProps.formTitle,
+  accountTypeOptions = contact04DefaultProps.accountTypeOptions,
+  submitText = contact04DefaultProps.submitText,
+  formData: controlledForm,
+  onFieldChange,
+  onSubmit,
+  className = "",
+}) {
+  const [internalForm, setInternalForm] = useState({
+    fullName: "",
+    email: "",
+    phone: "",
+    accountType: "",
+    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-[#f7f8fa]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-contact="contact04"
+    >
+      <div className="relative mx-auto w-full max-w-[1920px] px-4 py-16 sm:px-6 md:px-10 lg:px-20 lg:py-24 xl:px-[160px] xl:py-28">
+        <div className="mx-auto flex w-full max-w-[1260px] flex-col gap-12 lg:flex-row lg:items-center lg:justify-between lg:gap-16 xl:gap-20">
+          {/* Left — contact info */}
+          <div className="flex w-full max-w-[490px] flex-col gap-12 lg:gap-[86px]">
+            <div className="flex flex-col gap-4">
+              <p className="text-lg font-bold leading-[22px] text-[#007cff]">{label}</p>
+              <h2 className="whitespace-pre-wrap font-serif text-4xl font-extralight leading-tight tracking-[-0.02em] text-[#010623] sm:text-5xl md:text-6xl lg:text-7xl xl:text-[104px] xl:leading-[108px] xl:tracking-[-2.08px]">
+                {headline}
+              </h2>
+            </div>
+
+            <div className="flex flex-col gap-12 lg:gap-[88px]">
+              <div className="flex flex-col gap-8 lg:gap-10">
+                <div className="flex flex-col gap-2">
+                  <p className="text-sm font-bold leading-[18px] text-[#414c5e]">{phoneLabel}</p>
+                  <a
+                    href={`tel:${phone.replace(/\s/g, "")}`}
+                    className="font-serif text-2xl leading-10 text-[#010623] transition-opacity duration-200 hover:opacity-80 sm:text-3xl lg:text-[32px]"
+                  >
+                    {phone}
+                  </a>
+                </div>
+                <div className="flex flex-col gap-2">
+                  <p className="text-sm font-bold leading-[18px] text-[#414c5e]">{emailLabel}</p>
+                  <a
+                    href={`mailto:${email}`}
+                    className="font-serif text-2xl leading-10 text-[#010623] transition-opacity duration-200 hover:opacity-80 sm:text-3xl lg:text-[32px]"
+                  >
+                    {email}
+                  </a>
+                </div>
+              </div>
+
+              {socialLinks?.length ? (
+                <div className="flex max-w-[220px] flex-col gap-6 lg:gap-8">
+                  {socialLinks.map((link) => (
+                    <a
+                      key={link.label}
+                      href={link.href ?? "#"}
+                      className="flex items-center justify-between gap-4 font-serif text-2xl leading-10 text-[#010623] transition-opacity duration-200 hover:opacity-80 sm:text-3xl lg:text-[32px]"
+                    >
+                      <span>{link.label}</span>
+                      <EastArrowIcon className="size-6 shrink-0" />
+                    </a>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+          </div>
+
+          {/* Right — form card */}
+          <form
+            onSubmit={handleSubmit}
+            className="flex w-full max-w-[666px] flex-col gap-8 bg-white/90 p-6 backdrop-blur-[22px] sm:p-8 lg:gap-10 lg:p-10"
+          >
+            <h3 className="font-serif text-2xl font-light leading-tight tracking-[-0.01em] text-[#007cff] sm:text-3xl lg:text-[48px] lg:leading-[54px] lg:tracking-[-0.48px]">
+              {formTitle}
+            </h3>
+
+            <div className="flex flex-col gap-6 lg:gap-8">
+              <UnderlineField label="Full Name " required>
+                <input
+                  type="text"
+                  value={form.fullName}
+                  onChange={(e) => setField("fullName", e.target.value)}
+                  className={inputClassName}
+                  required
+                />
+              </UnderlineField>
+
+              <UnderlineField label="Email " required>
+                <input
+                  type="email"
+                  value={form.email}
+                  onChange={(e) => setField("email", e.target.value)}
+                  className={inputClassName}
+                  required
+                />
+              </UnderlineField>
+
+              <UnderlineField label="Phone" required>
+                <input
+                  type="tel"
+                  value={form.phone}
+                  onChange={(e) => setField("phone", e.target.value)}
+                  className={inputClassName}
+                  required
+                />
+              </UnderlineField>
+
+              <UnderlineField label="Account type ">
+                <div className="relative">
+                  <select
+                    value={form.accountType}
+                    onChange={(e) => setField("accountType", e.target.value)}
+                    className={`${inputClassName} appearance-none pr-8`}
+                  >
+                    <option value="" disabled>
+                      Select account type
+                    </option>
+                    {accountTypeOptions.map((option) => (
+                      <option key={option} value={option}>
+                        {option}
+                      </option>
+                    ))}
+                  </select>
+                  <ChevronDownIcon className="pointer-events-none absolute right-0 top-1/2 size-5 -translate-y-1/2 text-[#010623]" />
+                </div>
+              </UnderlineField>
+
+              <UnderlineField label="Message " required>
+                <textarea
+                  value={form.message}
+                  onChange={(e) => setField("message", e.target.value)}
+                  rows={4}
+                  className={`${inputClassName} min-h-[80px] resize-none pt-2 lg:min-h-[100px]`}
+                  required
+                />
+              </UnderlineField>
+
+              <button
+                type="submit"
+                className="w-max max-w-full rounded-sm bg-[#0058b5] px-8 py-6 text-lg text-white transition-colors duration-200 ease-out hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                {submitText}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Contact04.propTypes = contact04PropTypes;
+
+export default Contact04;

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

@@ -0,0 +1,50 @@
+import PropTypes from "prop-types";
+
+const socialLinkShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+});
+
+export const contact04PropTypes = {
+  label: PropTypes.string,
+  headline: PropTypes.string,
+  phoneLabel: PropTypes.string,
+  phone: PropTypes.string,
+  emailLabel: PropTypes.string,
+  email: PropTypes.string,
+  socialLinks: PropTypes.arrayOf(socialLinkShape),
+  formTitle: PropTypes.string,
+  accountTypeOptions: PropTypes.arrayOf(PropTypes.string),
+  submitText: PropTypes.string,
+  formData: PropTypes.shape({
+    fullName: PropTypes.string,
+    email: PropTypes.string,
+    phone: PropTypes.string,
+    accountType: PropTypes.string,
+    message: PropTypes.string,
+  }),
+  onFieldChange: PropTypes.func,
+  onSubmit: PropTypes.func,
+  className: PropTypes.string,
+};
+
+export const contact04DefaultProps = {
+  label: "Contact Us",
+  headline: "Get in touch with  us",
+  phoneLabel: "Phone Number",
+  phone: "+88 02-9514-729-30",
+  emailLabel: "Email Address",
+  email: "info@bracepl.com",
+  socialLinks: [
+    { label: "Facebook", href: "#" },
+    { label: "Youtube", href: "#" },
+  ],
+  formTitle: "Fill out this brief from, and we'll get in touch with you shortly.",
+  accountTypeOptions: [
+    "Individual",
+    "Business",
+    "Enterprise",
+    "Partner",
+  ],
+  submitText: "Submit",
+};

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

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

package/templates/components/organisms/Contact05/Contact05.jsx

@@ -0,0 +1,272 @@
+"use client";
+
+import { useState } from "react";
+import SafeImage from "../../atoms/SafeImage";
+import {
+  contact05DefaultProps,
+  contact05PropTypes,
+} from "./Contact05.propTypes";
+
+const fieldClassName =
+  "h-[52px] w-full rounded-lg border border-white/30 bg-white/10 px-4 text-base text-white outline-none transition-colors duration-200 ease-out placeholder:text-white/60 focus:border-white focus:bg-white/15";
+
+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 ArrowRightIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M5 12h14M13 6l6 6-6 6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function PhoneIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M6.5 3.5h3l1.5 4-2 1.5a11 11 0 005 5l1.5-2 4 1.5v3a1.5 1.5 0 01-1.5 1.5A14 14 0 013.5 5a1.5 1.5 0 011-1.5z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function FieldLabel({ children, required = false }) {
+  return (
+    <label className="text-sm font-medium tracking-[0.28px] text-white/90">
+      {children}
+      {required ? <span className="text-white"> *</span> : null}
+    </label>
+  );
+}
+
+/**
+ * Contact05 — Red freight quote split with hero image and patterned form panel.
+ * Figma node 26:17380 at 1920px.
+ *
+ * @param {object} props - See Contact05.propTypes.js.
+ */
+export function Contact05({
+  headline = contact05DefaultProps.headline,
+  description = contact05DefaultProps.description,
+  heroImage = contact05DefaultProps.heroImage,
+  heroAlt = contact05DefaultProps.heroAlt,
+  patternImage = contact05DefaultProps.patternImage,
+  serviceOptions = contact05DefaultProps.serviceOptions,
+  submitText = contact05DefaultProps.submitText,
+  callLabel = contact05DefaultProps.callLabel,
+  phoneNumber = contact05DefaultProps.phoneNumber,
+  phoneHref = contact05DefaultProps.phoneHref,
+  formData: controlledForm,
+  onFieldChange,
+  onSubmit,
+  className = "",
+}) {
+  const [internalForm, setInternalForm] = useState({
+    serviceType: "",
+    organizationName: "",
+    fullName: "",
+    phone: "",
+    email: "",
+    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-white", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-contact="contact05"
+    >
+      <div className="relative mx-auto flex w-full max-w-[1920px] flex-col lg:min-h-[700px] lg:flex-row xl:min-h-[900px]">
+        {/* 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-[900px]">
+          <SafeImage
+            src={heroImage}
+            alt={heroAlt}
+            fill
+            className="object-cover object-center"
+            sizes="(max-width: 1024px) 100vw, 50vw"
+            priority
+          />
+        </div>
+
+        {/* Right — red form panel */}
+        <div className="relative flex w-full items-center bg-[#e6232d] lg:w-1/2 lg:min-h-[700px] xl:min-h-[900px]">
+          {patternImage ? (
+            <div className="pointer-events-none absolute inset-0 opacity-20" aria-hidden="true">
+              <SafeImage
+                src={patternImage}
+                alt=""
+                fill
+                className="object-cover object-center"
+                sizes="50vw"
+              />
+            </div>
+          ) : null}
+
+          <form
+            onSubmit={handleSubmit}
+            className="relative z-10 flex w-full flex-col gap-8 px-4 py-12 sm:px-6 md:px-10 lg:px-16 lg:py-16 xl:px-[80px] xl:py-20"
+          >
+            <div className="flex flex-col gap-4 text-white">
+              <h2 className="text-3xl font-bold leading-[1.1] tracking-[-0.02em] sm:text-4xl xl:text-[48px]">
+                {headline}
+              </h2>
+              <p className="text-base leading-[1.4] text-white/85 sm:text-lg">
+                {description}
+              </p>
+            </div>
+
+            <div className="flex flex-col gap-5">
+              <div className="flex flex-col gap-2">
+                <FieldLabel required>Service Type</FieldLabel>
+                <div className="relative">
+                  <select
+                    value={form.serviceType}
+                    onChange={(e) => setField("serviceType", e.target.value)}
+                    className={`${fieldClassName} appearance-none pr-12`}
+                    required
+                  >
+                    <option value="" disabled className="text-[#1b1e2e]">
+                      Select service
+                    </option>
+                    {serviceOptions.map((option) => (
+                      <option key={option} value={option} className="text-[#1b1e2e]">
+                        {option}
+                      </option>
+                    ))}
+                  </select>
+                  <ChevronDownIcon className="pointer-events-none absolute right-4 top-1/2 size-5 -translate-y-1/2 text-white" />
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <FieldLabel required>Organization Name</FieldLabel>
+                <input
+                  type="text"
+                  value={form.organizationName}
+                  onChange={(e) => setField("organizationName", e.target.value)}
+                  className={fieldClassName}
+                  required
+                />
+              </div>
+
+              <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
+                <div className="flex flex-col gap-2">
+                  <FieldLabel required>Full Name</FieldLabel>
+                  <input
+                    type="text"
+                    value={form.fullName}
+                    onChange={(e) => setField("fullName", e.target.value)}
+                    className={fieldClassName}
+                    required
+                  />
+                </div>
+                <div className="flex flex-col gap-2">
+                  <FieldLabel required>Phone</FieldLabel>
+                  <input
+                    type="tel"
+                    value={form.phone}
+                    onChange={(e) => setField("phone", e.target.value)}
+                    className={fieldClassName}
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <FieldLabel required>Email</FieldLabel>
+                <input
+                  type="email"
+                  value={form.email}
+                  onChange={(e) => setField("email", e.target.value)}
+                  className={fieldClassName}
+                  required
+                />
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <FieldLabel>Message</FieldLabel>
+                <textarea
+                  value={form.message}
+                  onChange={(e) => setField("message", e.target.value)}
+                  rows={4}
+                  className="min-h-[120px] w-full resize-none rounded-lg border border-white/30 bg-white/10 px-4 py-3 text-base text-white outline-none transition-colors duration-200 ease-out placeholder:text-white/60 focus:border-white focus:bg-white/15"
+                />
+              </div>
+            </div>
+
+            <button
+              type="submit"
+              className="flex h-14 w-full items-center justify-center gap-2 rounded-lg bg-white text-base font-semibold tracking-[0.32px] text-[#e6232d] transition-colors duration-200 ease-out hover:bg-white/90 focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              {submitText}
+              <ArrowRightIcon className="size-5" />
+            </button>
+
+            <div className="flex items-center gap-4">
+              <div className="h-px flex-1 bg-white/40" />
+              <span className="text-sm font-medium uppercase tracking-[0.96px] text-white/80">
+                OR
+              </span>
+              <div className="h-px flex-1 bg-white/40" />
+            </div>
+
+            <a
+              href={phoneHref}
+              className="flex items-center justify-center gap-3 text-white transition-opacity duration-200 ease-out hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              <PhoneIcon className="size-6 shrink-0" />
+              <span className="flex flex-col items-start sm:flex-row sm:items-center sm:gap-2">
+                <span className="text-sm font-semibold uppercase tracking-[0.96px]">
+                  {callLabel}
+                </span>
+                <span className="text-lg font-bold sm:text-xl">{phoneNumber}</span>
+              </span>
+            </a>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Contact05.propTypes = contact05PropTypes;
+
+export default Contact05;

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

@@ -0,0 +1,49 @@
+import PropTypes from "prop-types";
+
+export const contact05PropTypes = {
+  headline: PropTypes.string,
+  description: PropTypes.string,
+  heroImage: PropTypes.string,
+  heroAlt: PropTypes.string,
+  patternImage: PropTypes.string,
+  serviceOptions: PropTypes.arrayOf(PropTypes.string),
+  submitText: PropTypes.string,
+  callLabel: PropTypes.string,
+  phoneNumber: PropTypes.string,
+  phoneHref: PropTypes.string,
+  formData: PropTypes.shape({
+    serviceType: PropTypes.string,
+    organizationName: PropTypes.string,
+    fullName: PropTypes.string,
+    phone: PropTypes.string,
+    email: PropTypes.string,
+    message: PropTypes.string,
+  }),
+  onFieldChange: PropTypes.func,
+  onSubmit: PropTypes.func,
+  className: PropTypes.string,
+};
+
+export const contact05DefaultProps = {
+  headline: "Request an Expedited Freight Quote Now",
+  description:
+    "Tell us about your shipment and our logistics team will respond with a tailored quote within one business day.",
+  heroImage: "/contact/contact05/hero.jpg",
+  heroAlt: "Freight truck on highway at sunset",
+  patternImage: "/contact/contact05/pattern.png",
+  serviceOptions: [
+    "Full truckload (FTL)",
+    "Less than truckload (LTL)",
+    "Intermodal",
+    "Expedited freight",
+    "International shipping",
+  ],
+  submitText: "Send Message",
+  callLabel: "CALL US",
+  phoneNumber: "+ (880) 2-2222-94745",
+  phoneHref: "tel:+8802222294745",
+  formData: undefined,
+  onFieldChange: undefined,
+  onSubmit: undefined,
+  className: "",
+};

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

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