@notionhive/contacts 0.1.0

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

@@ -0,0 +1,92 @@
+import PropTypes from "prop-types";
+
+const officeShape = PropTypes.shape({
+  name: PropTypes.string.isRequired,
+  email: PropTypes.string,
+  phone: PropTypes.string,
+  hours: PropTypes.string,
+});
+
+const faqItemShape = PropTypes.shape({
+  question: PropTypes.string.isRequired,
+  answer: PropTypes.string,
+});
+
+export const contact07PropTypes = {
+  headline: PropTypes.string,
+  description: PropTypes.string,
+  heroImage: PropTypes.string,
+  heroAlt: PropTypes.string,
+  offices: PropTypes.arrayOf(officeShape),
+  topicOptions: PropTypes.arrayOf(PropTypes.string),
+  submitText: PropTypes.string,
+  faqTitle: PropTypes.string,
+  faqItems: PropTypes.arrayOf(faqItemShape),
+  defaultOpenFaq: PropTypes.number,
+  activeFaq: PropTypes.number,
+  onFaqChange: PropTypes.func,
+  formData: PropTypes.shape({
+    fullName: PropTypes.string,
+    email: PropTypes.string,
+    phone: PropTypes.string,
+    orderId: PropTypes.string,
+    topic: PropTypes.string,
+    message: PropTypes.string,
+  }),
+  onFieldChange: PropTypes.func,
+  onSubmit: PropTypes.func,
+  showFaq: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+export const contact07DefaultProps = {
+  headline: "Get in Touch",
+  description:
+    "Whether you have a question, need support, or simply want to share your feedback, the Gentle Park team is just a message away. Reach out to us through any of the channels below — we're committed to ensuring you have the best experience with Gentle Park.",
+  heroImage: "/contact/contact07/hero.jpg",
+  heroAlt: "Woman in flowing dress on sand dunes",
+  offices: [
+    {
+      name: "Bangladesh",
+      email: "support.bd@gentlepark.com",
+      phone: "+880 16 891 31186",
+      hours: "Sat–Thu, 9 AM – 8 PM (BST)",
+    },
+    {
+      name: "Dubai",
+      email: "support.uae@gentlepark.com",
+      phone: "+966 12 206 7346",
+      hours: "Sun–Thu, 10 AM – 9 PM (GST)",
+    },
+  ],
+  topicOptions: [
+    "Order inquiry",
+    "Returns & exchanges",
+    "Product question",
+    "General feedback",
+  ],
+  submitText: "Send Message",
+  faqTitle: "FAQs",
+  faqItems: [
+    {
+      question: "How to place an order in an online store?",
+      answer:
+        "To place an order in our online store, simply browse our products and add your desired items to the cart. Once you're ready, go to your cart, review your selections, and proceed to checkout. Enter your shipping details, choose a payment method, and confirm your order. After completing the payment, you'll receive a confirmation email with your order details.",
+    },
+    { question: "How much does the delivery cost?", answer: "" },
+    { question: "What are the delivery methods?", answer: "" },
+    {
+      question: "How do I find out the availability of goods in the store?",
+      answer: "",
+    },
+    { question: "How to exchange or return the goods?", answer: "" },
+  ],
+  defaultOpenFaq: 0,
+  showFaq: true,
+  formData: undefined,
+  onFieldChange: undefined,
+  onSubmit: undefined,
+  onFaqChange: undefined,
+  activeFaq: undefined,
+  className: "",
+};

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

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

package/templates/components/organisms/Contact08/Contact08.jsx

@@ -0,0 +1,178 @@
+"use client";
+
+import { useState } from "react";
+import {
+  contact08DefaultProps,
+  contact08PropTypes,
+} from "./Contact08.propTypes";
+
+const inputClassName =
+  "h-[52px] w-full rounded-xl border border-[#e1e2e3] bg-white px-5 text-base text-[#1b1e2e] outline-none transition-colors duration-200 ease-out placeholder:text-[#7e8088] focus:border-[#283aff] focus:ring-1 focus:ring-[#283aff]/20";
+
+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 FieldLabel({ children, required = false }) {
+  return (
+    <label className="text-sm font-medium tracking-[0.28px] text-[#343744]">
+      {children}
+      {required ? <span className="text-[#ff373c]"> *</span> : null}
+    </label>
+  );
+}
+
+/**
+ * Contact08 — Immigration inquiry form with headline copy and bordered inputs.
+ * Figma node 26:17291 (form section only) at 1920px.
+ *
+ * @param {object} props - See Contact08.propTypes.js.
+ */
+export function Contact08({
+  headline = contact08DefaultProps.headline,
+  description = contact08DefaultProps.description,
+  immigrationGoalOptions = contact08DefaultProps.immigrationGoalOptions,
+  submitText = contact08DefaultProps.submitText,
+  formData: controlledForm,
+  onFieldChange,
+  onSubmit,
+  className = "",
+}) {
+  const [internalForm, setInternalForm] = useState({
+    fullName: "",
+    phone: "",
+    email: "",
+    immigrationGoal: "",
+    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="contact08"
+    >
+      <div className="relative mx-auto w-full max-w-[1920px] px-4 py-12 sm:px-6 md:px-10 lg:px-20 lg:py-20 xl:px-[160px] xl:py-24">
+        <div className="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-24">
+          {/* Left — copy */}
+          <div className="flex w-full max-w-[520px] flex-col gap-6 lg:sticky lg:top-8">
+            <h2 className="text-3xl font-semibold leading-[1.1] tracking-[-0.02em] text-[#020617] sm:text-4xl xl:text-[48px]">
+              {headline}
+            </h2>
+            <p className="text-base leading-[1.5] text-[#343744] sm:text-lg">
+              {description}
+            </p>
+          </div>
+
+          {/* Right — form */}
+          <form
+            onSubmit={handleSubmit}
+            className="flex w-full max-w-[600px] flex-col gap-5"
+          >
+            <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={inputClassName}
+                required
+              />
+            </div>
+
+            <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
+              <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={inputClassName}
+                  required
+                />
+              </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={inputClassName}
+                  required
+                />
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <FieldLabel required>Immigration Goal</FieldLabel>
+              <div className="relative">
+                <select
+                  value={form.immigrationGoal}
+                  onChange={(e) => setField("immigrationGoal", e.target.value)}
+                  className={`${inputClassName} appearance-none pr-12`}
+                  required
+                >
+                  <option value="" disabled>
+                    Select your goal
+                  </option>
+                  {immigrationGoalOptions.map((option) => (
+                    <option key={option} value={option}>
+                      {option}
+                    </option>
+                  ))}
+                </select>
+                <ChevronDownIcon className="pointer-events-none absolute right-5 top-1/2 size-5 -translate-y-1/2 text-[#7e8088]" />
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <FieldLabel>Message</FieldLabel>
+              <textarea
+                value={form.message}
+                onChange={(e) => setField("message", e.target.value)}
+                rows={5}
+                className="min-h-[140px] w-full resize-none rounded-xl border border-[#e1e2e3] bg-white px-5 py-3.5 text-base text-[#1b1e2e] outline-none transition-colors duration-200 ease-out placeholder:text-[#7e8088] focus:border-[#283aff] focus:ring-1 focus:ring-[#283aff]/20"
+              />
+            </div>
+
+            <button
+              type="submit"
+              className="mt-2 flex h-14 w-full items-center justify-center rounded-xl bg-[#283aff] text-base font-semibold tracking-[0.32px] text-white transition-colors duration-200 ease-out hover:bg-[#1f2ecc] focus-visible:outline-2 focus-visible:outline-offset-2 sm:w-max sm:min-w-[200px] sm:px-10"
+            >
+              {submitText}
+            </button>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Contact08.propTypes = contact08PropTypes;
+
+export default Contact08;

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

@@ -0,0 +1,36 @@
+import PropTypes from "prop-types";
+
+export const contact08PropTypes = {
+  headline: PropTypes.string,
+  description: PropTypes.string,
+  immigrationGoalOptions: PropTypes.arrayOf(PropTypes.string),
+  submitText: PropTypes.string,
+  formData: PropTypes.shape({
+    fullName: PropTypes.string,
+    phone: PropTypes.string,
+    email: PropTypes.string,
+    immigrationGoal: PropTypes.string,
+    message: PropTypes.string,
+  }),
+  onFieldChange: PropTypes.func,
+  onSubmit: PropTypes.func,
+  className: PropTypes.string,
+};
+
+export const contact08DefaultProps = {
+  headline: "Start Your Immigration Journey",
+  description:
+    "Our licensed consultants are ready to guide you through every step — from initial assessment to final approval. Share your details and we'll be in touch within 24 hours.",
+  immigrationGoalOptions: [
+    "Work visa",
+    "Student visa",
+    "Permanent residency",
+    "Family sponsorship",
+    "Citizenship application",
+  ],
+  submitText: "Submit Inquiry",
+  formData: undefined,
+  onFieldChange: undefined,
+  onSubmit: undefined,
+  className: "",
+};

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

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

package/templates/components/organisms/Contact09/Contact09.jsx

@@ -0,0 +1,345 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import SafeImage from "../../atoms/SafeImage";
+import { useCarousel } from "../../hooks/useCarousel";
+import {
+  contact09DefaultProps,
+  contact09PropTypes,
+} from "./Contact09.propTypes";
+
+const underlineInputClass =
+  "w-full bg-transparent text-base text-white outline-none transition-colors duration-200 ease-out placeholder:text-white/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 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 QuoteIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 56 40" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M0 40V23C0 14 2.667 7 8 2.5 13.333-2 20-2 28 2L24 11C20 8.667 16.667 8.667 13.333 11 10 13.333 9 17 9 22V40H0zm28 0V23c0-9 2.667-16 8-20.5C41.333-2 48-2 56 2L52 11C48 8.667 44.667 8.667 41.333 11 38 13.333 37 17 37 22V40H28z"
+        fill="#e6232d"
+      />
+    </svg>
+  );
+}
+
+function ChevronLeftIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M15 6l-6 6 6 6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ChevronRightIcon({ className = "" }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M9 6l6 6-6 6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function UnderlineField({ label, required = false, children }) {
+  return (
+    <div className="flex flex-col gap-1 border-b border-white/20 py-4">
+      <label className="text-xs font-medium uppercase tracking-[0.96px] text-white/60">
+        {label}
+        {required ? "*" : ""}
+      </label>
+      {children}
+    </div>
+  );
+}
+
+function formatSlideCounter(index, total) {
+  const current = String(index + 1).padStart(2, "0");
+  const max = String(total).padStart(2, "0");
+  return `${current}/${max}`;
+}
+
+/**
+ * Contact09 — Suvastu dark contact form with testimonial carousel card.
+ * Figma node 26:17334 at 1920px.
+ *
+ * @param {object} props - See Contact09.propTypes.js.
+ */
+export function Contact09({
+  headline = contact09DefaultProps.headline,
+  description = contact09DefaultProps.description,
+  serviceOptions = contact09DefaultProps.serviceOptions,
+  submitText = contact09DefaultProps.submitText,
+  testimonials = contact09DefaultProps.testimonials,
+  activeSlide: activeSlideProp = contact09DefaultProps.activeSlide,
+  onSlideChange,
+  formData: controlledForm,
+  onFieldChange,
+  onSubmit,
+  className = "",
+}) {
+  const [internalForm, setInternalForm] = useState({
+    fullName: "",
+    email: "",
+    phone: "",
+    serviceType: "",
+    message: "",
+  });
+
+  const isControlledSlide = typeof activeSlideProp === "number";
+  const { activeSlide, goTo, next, prev } = useCarousel({
+    count: testimonials.length,
+    initialIndex: activeSlideProp,
+    onChange: onSlideChange,
+  });
+  const currentSlide = isControlledSlide ? activeSlideProp : activeSlide;
+  const activeTestimonial = testimonials[currentSlide] ?? testimonials[0];
+
+  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);
+  };
+
+  const handlePrev = () => {
+    if (isControlledSlide) {
+      const nextIndex = Math.max(0, activeSlideProp - 1);
+      onSlideChange?.(nextIndex);
+    } else {
+      prev();
+    }
+  };
+
+  const handleNext = () => {
+    if (isControlledSlide) {
+      const nextIndex = Math.min(testimonials.length - 1, activeSlideProp + 1);
+      onSlideChange?.(nextIndex);
+    } else {
+      next();
+    }
+  };
+
+  useEffect(() => {
+    if (!isControlledSlide) {
+      goTo(activeSlideProp);
+    }
+  }, [activeSlideProp, goTo, isControlledSlide]);
+
+  return (
+    <section
+      className={["relative w-full overflow-hidden bg-[#111a47]", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-contact="contact09"
+    >
+      <div className="relative mx-auto w-full max-w-[1920px] px-4 py-12 sm:px-6 md:px-10 lg:px-20 lg:py-20 xl:px-[160px] xl:py-24">
+        <div className="mx-auto flex w-full max-w-[1330px] flex-col gap-12 lg:flex-row lg:items-stretch lg:gap-16 xl:gap-20">
+          {/* Left — form */}
+          <form
+            onSubmit={handleSubmit}
+            className="flex w-full flex-col gap-8 lg:w-1/2 lg:max-w-[600px]"
+          >
+            <div className="flex flex-col gap-4 text-white">
+              <h2 className="text-3xl font-semibold leading-[1.1] tracking-[-0.02em] sm:text-4xl xl:text-[48px]">
+                {headline}
+              </h2>
+              <p className="text-base leading-[1.5] text-white/75 sm:text-lg">
+                {description}
+              </p>
+            </div>
+
+            <div className="flex flex-col">
+              <UnderlineField label="Full Name" required>
+                <input
+                  type="text"
+                  value={form.fullName}
+                  onChange={(e) => setField("fullName", e.target.value)}
+                  className={underlineInputClass}
+                  required
+                />
+              </UnderlineField>
+
+              <UnderlineField label="Email" required>
+                <input
+                  type="email"
+                  value={form.email}
+                  onChange={(e) => setField("email", e.target.value)}
+                  className={underlineInputClass}
+                  required
+                />
+              </UnderlineField>
+
+              <UnderlineField label="Phone">
+                <input
+                  type="tel"
+                  value={form.phone}
+                  onChange={(e) => setField("phone", e.target.value)}
+                  className={underlineInputClass}
+                />
+              </UnderlineField>
+
+              <div className="relative flex flex-col gap-1 border-b border-white/20 py-4">
+                <label className="text-xs font-medium uppercase tracking-[0.96px] text-white/60">
+                  Service Type
+                </label>
+                <select
+                  value={form.serviceType}
+                  onChange={(e) => setField("serviceType", e.target.value)}
+                  className={`${underlineInputClass} appearance-none pr-8`}
+                >
+                  <option value="" disabled className="text-[#111a47]">
+                    Select service
+                  </option>
+                  {serviceOptions.map((option) => (
+                    <option key={option} value={option} className="text-[#111a47]">
+                      {option}
+                    </option>
+                  ))}
+                </select>
+                <ChevronDownIcon className="pointer-events-none absolute bottom-5 right-0 size-5 text-white/60" />
+              </div>
+
+              <div className="flex flex-col gap-1 border-b border-white/20 py-4">
+                <label className="text-xs font-medium uppercase tracking-[0.96px] text-white/60">
+                  Message
+                </label>
+                <textarea
+                  value={form.message}
+                  onChange={(e) => setField("message", e.target.value)}
+                  rows={3}
+                  className={`${underlineInputClass} min-h-[60px] resize-none`}
+                />
+              </div>
+            </div>
+
+            <button
+              type="submit"
+              className="flex h-14 w-max max-w-full items-center gap-3 rounded-full bg-white px-8 text-base font-semibold tracking-[0.32px] text-[#111a47] 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>
+          </form>
+
+          {/* Right — testimonial card */}
+          <div className="flex w-full lg:w-1/2 lg:items-center">
+            <article className="flex w-full flex-col gap-8 rounded-2xl bg-white p-6 sm:p-8 lg:p-10">
+              <QuoteIcon className="size-10 shrink-0" />
+
+              <div className="overflow-hidden">
+                <div
+                  className="flex motion-reduce:transition-none transition-transform duration-500 ease-out"
+                  style={{ transform: `translateX(-${currentSlide * 100}%)` }}
+                >
+                  {testimonials.map((item) => (
+                    <blockquote
+                      key={item.id ?? item.authorName}
+                      className="w-full shrink-0 text-lg leading-[1.5] text-[#1b1e2e] sm:text-xl lg:text-2xl"
+                    >
+                      {item.quote}
+                    </blockquote>
+                  ))}
+                </div>
+              </div>
+
+              <div className="flex items-center gap-4">
+                <div className="relative size-14 shrink-0 overflow-hidden rounded-full">
+                  <SafeImage
+                    src={activeTestimonial?.avatarSrc ?? "/contact/contact09/avatar.jpg"}
+                    alt={activeTestimonial?.avatarAlt ?? activeTestimonial?.authorName ?? ""}
+                    fill
+                    className="object-cover object-center"
+                    sizes="56px"
+                  />
+                </div>
+                <div className="flex min-w-0 flex-col gap-0.5">
+                  <p className="text-base font-semibold text-[#020617] sm:text-lg">
+                    {activeTestimonial?.authorName}
+                  </p>
+                  {activeTestimonial?.authorTitle ? (
+                    <p className="text-sm text-[#7e8088]">{activeTestimonial.authorTitle}</p>
+                  ) : null}
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between gap-4 border-t border-[#e1e2e3] pt-6">
+                <span className="text-sm font-medium tracking-[0.28px] text-[#7e8088]">
+                  {formatSlideCounter(currentSlide, testimonials.length)}
+                </span>
+                <div className="flex items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={handlePrev}
+                    disabled={currentSlide === 0}
+                    aria-label="Previous testimonial"
+                    className="flex size-10 items-center justify-center rounded-full border border-[#e1e2e3] text-[#020617] transition-colors duration-200 ease-out hover:bg-[#f9f9fa] focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-40"
+                  >
+                    <ChevronLeftIcon className="size-5" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleNext}
+                    disabled={currentSlide >= testimonials.length - 1}
+                    aria-label="Next testimonial"
+                    className="flex size-10 items-center justify-center rounded-full border border-[#e1e2e3] text-[#020617] transition-colors duration-200 ease-out hover:bg-[#f9f9fa] focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-40"
+                  >
+                    <ChevronRightIcon className="size-5" />
+                  </button>
+                </div>
+              </div>
+            </article>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Contact09.propTypes = contact09PropTypes;
+
+export default Contact09;