blocks-dusted 0.1.0

package/templates/blocks/DD-Contact/Component.tsx

@@ -0,0 +1,439 @@
+"use client";
+import React, { type FormEvent, useMemo, useState } from "react";
+import * as LucideIcons from "lucide-react";
+import { Check, Loader2, Send } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { getClientSideURL } from "@/utilities/getURL";
+
+type Status = "idle" | "submitting" | "success" | "error";
+export type DDContactProps = {
+  eyebrow?: string | null;
+  headlineMain?: string | null;
+  headlineAccent?: string | null;
+  description?: string | null;
+  infoItems?: Array<{
+    iconName?: string | null;
+    title: string;
+    description: string;
+  }> | null;
+  availabilityActive?: boolean | null;
+  availabilityLabel?: string | null;
+  availabilitySubtext?: string | null;
+  form?: string | number | { id?: string | number } | null;
+  serviceOptions?: Array<{ label: string }> | null;
+  budgetOptions?: Array<{ label: string }> | null;
+  timelineOptions?: Array<{ label: string }> | null;
+  sectionId?: string | null;
+  customCSS?: string | null;
+};
+function DynamicIcon({
+  name,
+  size = 16,
+  ...props
+}: { name?: string | null } & Omit<LucideIcons.LucideProps, "name">) {
+  if (!name) return null;
+  const Icon = (
+    LucideIcons as unknown as Record<string, React.FC<LucideIcons.LucideProps>>
+  )[name];
+  if (!Icon) return null;
+  return <Icon size={size} {...props} />;
+}
+
+export const DDContact: React.FC<DDContactProps> = ({
+  eyebrow,
+  headlineMain,
+  headlineAccent,
+  description,
+  infoItems,
+  availabilityActive,
+  availabilityLabel,
+  availabilitySubtext,
+  form,
+  serviceOptions,
+  budgetOptions,
+  timelineOptions,
+  sectionId,
+  customCSS,
+}) => {
+  const [status, setStatus] = useState<Status>("idle");
+  const [charCount, setCharCount] = useState(0);
+
+  const formID = typeof form === "object" && form !== null ? form.id : form;
+
+  const formIdentifier = useMemo(() => {
+    const safeSection = (sectionId || "contact")
+      .toLowerCase()
+      .replace(/[^a-z0-9-_]/g, "-");
+
+    return `studio-contact-${String(formID || "unknown")}-${safeSection}`;
+  }, [formID, sectionId]);
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formElement = e.currentTarget;
+    const data = new FormData(formElement);
+
+    const message = data.get("message") as string;
+    if (message && message.length > 500) return;
+
+    setStatus("submitting");
+
+    const submissionData = [
+      { field: "name", value: data.get("name") },
+      { field: "email", value: data.get("email") },
+      { field: "company", value: data.get("company") },
+      { field: "service", value: data.get("service") },
+      { field: "budget", value: data.get("budget") },
+      { field: "timeline", value: data.get("timeline") },
+      { field: "message", value: data.get("message") },
+    ];
+
+    if (!formID) {
+      setStatus("success");
+      formElement.reset();
+      setCharCount(0);
+      return;
+    }
+
+    try {
+      const res = await fetch(`${getClientSideURL()}/api/form-submissions`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          form: formID,
+          submissionData,
+        }),
+      });
+
+      if (res.ok) {
+        setStatus("success");
+        formElement.reset();
+        setCharCount(0);
+      } else {
+        setStatus("error");
+      }
+    } catch {
+      setStatus("error");
+    }
+  };
+
+  return (
+    <>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div id={sectionId ?? "contact"} className="py-24">
+        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
+            <div>
+              {eyebrow && (
+                <p className="text-[11.5px] font-semibold text-stone-400 tracking-widest uppercase mb-3 top-caption">
+                  {eyebrow}
+                </p>
+              )}
+
+              <h2 className="text-4xl md:text-5xl font-semibold text-stone-900 dark:text-stone-50 leading-tight mb-6">
+                {headlineMain}
+                <br />
+                <span className="text-stone-400">{headlineAccent}</span>
+              </h2>
+
+              {description && (
+                <p className="text-stone-700 dark:text-stone-300 text-base leading-relaxed mb-10">
+                  {description}
+                </p>
+              )}
+
+              {infoItems && infoItems.length > 0 && (
+                <div className="space-y-4 mb-10">
+                  {infoItems.map((item, i) => (
+                    <div key={i} className="flex gap-4">
+                      <div className="w-9 h-9 flex items-center justify-center rounded-lg lime-glass border border-indigo-400 bg-stone-100/50 dark:bg-stone-900/80 shrink-0 mt-0.5">
+                        <DynamicIcon
+                          className="text-indigo-500 dark:text-lime-500"
+                          name={item.iconName}
+                          size={15}
+                        />
+                      </div>
+                      <div>
+                        <div className="text-sm font-semibold text-stone-800 dark:text-stone-50 mb-0.5">
+                          {item.title}
+                        </div>
+                        <div className="text-xs text-stone-600 dark:text-stone-300">
+                          {item.description}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {availabilityActive && (
+                <div
+                  className="flex items-center gap-3 p-4 bg-indigo-900 border border-indigo-500 shadow-xl backdrop-blur-sm rounded-2xl pressable relative z-10 h-full w-full text-[32px] font-medium tracking-[.001em] transition-all duration-300"
+                  style={{ cornerShape: "squircle" } as React.CSSProperties}
+                >
+                  <div className="w-3.5 h-3.5 rounded-full bg-lime-700 border-2 border-lime-500 animate-pulse shrink-0 shadow-2xl" />
+                  <div>
+                    {availabilityLabel && (
+                      <div className="text-md font-semibold text-lime-500 dark:text-stone-50">
+                        {availabilityLabel}
+                      </div>
+                    )}
+
+                    {availabilitySubtext && (
+                      <div className="text-xs font-normal! text-stone-300 pt-1">
+                        {availabilitySubtext}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div className="rounded-2xl bg-stone-100 dark:bg-stone-950 border border-stone-100 dark:border-stone-800 dark:hover:border-indigo-800 px-3 md:px-8 py-8 shadow-sm hover:shadow-2xl transition-all duration-300">
+              {status === "success" ? (
+                <div className="flex flex-col items-center justify-center text-center py-12">
+                  <div className="w-16 h-16 flex items-center justify-center rounded-full bg-lime-400/10 border border-emerald-400/30 mb-5">
+                    <Check size={28} className="text-lime-400" />
+                  </div>
+
+                  <h3 className="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-2">
+                    Message sent!
+                  </h3>
+
+                  <p className="text-sm text-stone-400 max-w-xs">
+                    Thanks for reaching out. We'll review your project details
+                    and get back to you within one business day.
+                  </p>
+
+                  <button
+                    onClick={() => setStatus("idle")}
+                    className="mt-6 px-5 py-2.5 rounded-lgbg-stone-700 text-stone-200 text-sm font-medium hover:bg-stone-600 transition-colors cursor-pointer"
+                  >
+                    Send another message
+                  </button>
+                </div>
+              ) : (
+                <form
+                  id={formIdentifier}
+                  name={formIdentifier}
+                  data-form-id={String(formID || "")}
+                  onSubmit={handleSubmit}
+                  className="space-y-5"
+                >
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <div>
+                      <label
+                        htmlFor={`${formIdentifier}-name`}
+                        className="block text-xs font-medium text-stone-400 mb-1.5"
+                      >
+                        Your Name *
+                      </label>
+
+                      <Input
+                        id={`${formIdentifier}-name`}
+                        type="text"
+                        name="name"
+                        autoComplete="name"
+                        required
+                        placeholder="Marcus Holt"
+                        className="glass-input squircle relative flex w-full items-center overflow-hidden rounded-sm border border-stone-300 dark:border-stone-700 bg-white dark:bg-black/80 px-3 py-2 text-sm text-stone-800 dark:text-stone-50 placeholder:text-stone-400 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-lime-500 focus:ring-2 focus:ring-offset-2 focus:ring-stone-300/50 dark:focus:ring-lime-500/10"
+                      />
+                    </div>
+
+                    <div>
+                      <label
+                        htmlFor={`${formIdentifier}-email`}
+                        className="block text-xs font-medium text-stone-400 mb-1.5"
+                      >
+                        Email Address *
+                      </label>
+
+                      <Input
+                        id={`${formIdentifier}-email`}
+                        type="email"
+                        name="email"
+                        autoComplete="email"
+                        required
+                        placeholder="you@company.com"
+                        className="glass-input squircle relative flex w-full items-center overflow-hidden rounded-sm border border-stone-300 dark:border-stone-700 bg-white dark:bg-black/80 px-3 py-2 text-sm text-stone-800 dark:text-stone-50 placeholder:text-stone-400 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-lime-500 focus:ring-2 focus:ring-offset-2 focus:ring-stone-300/50 dark:focus:ring-lime-500/10"
+                      />
+                    </div>
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor={`${formIdentifier}-company`}
+                      className="block text-xs font-medium text-stone-400 mb-1.5"
+                    >
+                      Company / Project Name
+                    </label>
+
+                    <Input
+                      id={`${formIdentifier}-company`}
+                      type="text"
+                      name="company"
+                      autoComplete="organization"
+                      placeholder="Acme Inc."
+                      className="glass-input squircle relative flex w-full items-center overflow-hidden rounded-sm border border-stone-300 dark:border-stone-700 bg-white dark:bg-black/80 px-3 py-2 text-sm text-stone-800 dark:text-stone-50 placeholder:text-stone-400 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-lime-500 focus:ring-2 focus:ring-offset-2 focus:ring-stone-300/50 dark:focus:ring-lime-500/10"
+                    />
+                  </div>
+
+                  {serviceOptions && serviceOptions.length > 0 && (
+                    <div>
+                      <label
+                        htmlFor={`${formIdentifier}-service`}
+                        className="block text-xs font-medium text-stone-400 mb-1.5"
+                      >
+                        Service Needed *
+                      </label>
+
+                      <select
+                        id={`${formIdentifier}-service`}
+                        name="service"
+                        autoComplete="off"
+                        required
+                        defaultValue=""
+                        className="glass-input squircle relative flex w-full items-center overflow-hidden rounded-sm border border-stone-300 dark:border-stone-700 bg-white dark:bg-black/80 px-3 py-2 text-sm text-stone-800 dark:text-stone-50 placeholder:text-stone-400 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-lime-500 focus:ring-2 focus:ring-offset-2 focus:ring-stone-300/50 dark:focus:ring-lime-500/10"
+                      >
+                        <option value="" disabled>
+                          Select a service...
+                        </option>
+
+                        {serviceOptions.map((s, i) => (
+                          <option key={i} value={s.label}>
+                            {s.label}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                  )}
+
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    {budgetOptions && budgetOptions.length > 0 && (
+                      <div>
+                        <label
+                          htmlFor={`${formIdentifier}-budget`}
+                          className="block text-xs font-medium text-stone-400 mb-1.5"
+                        >
+                          Budget Range *
+                        </label>
+
+                        <select
+                          id={`${formIdentifier}-budget`}
+                          name="budget"
+                          autoComplete="off"
+                          required
+                          defaultValue=""
+                          className="glass-input squircle relative flex w-full items-center overflow-hidden rounded-sm border border-stone-300 dark:border-stone-700 bg-white dark:bg-black/80 px-3 py-2 text-sm text-stone-800 dark:text-stone-50 placeholder:text-stone-400 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-lime-500 focus:ring-2 focus:ring-offset-2 focus:ring-stone-300/50 dark:focus:ring-lime-500/10"
+                        >
+                          <option value="" disabled>
+                            Select budget...
+                          </option>
+
+                          {budgetOptions.map((b, i) => (
+                            <option key={i} value={b.label}>
+                              {b.label}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                    )}
+
+                    {timelineOptions && timelineOptions.length > 0 && (
+                      <div>
+                        <label
+                          htmlFor={`${formIdentifier}-timeline`}
+                          className="block text-xs font-medium text-stone-400 mb-1.5"
+                        >
+                          Timeline
+                        </label>
+
+                        <select
+                          id={`${formIdentifier}-timeline`}
+                          name="timeline"
+                          autoComplete="off"
+                          defaultValue=""
+                          className="glass-input squircle relative flex w-full items-center overflow-hidden rounded-sm border border-stone-300 dark:border-stone-700 bg-white dark:bg-black/80 px-3 py-2 text-sm text-stone-800 dark:text-stone-50 placeholder:text-stone-400 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-lime-500 focus:ring-2 focus:ring-offset-2 focus:ring-stone-300/50 dark:focus:ring-lime-500/10"
+                        >
+                          <option value="" disabled>
+                            Select timeline...
+                          </option>
+
+                          {timelineOptions.map((t, i) => (
+                            <option key={i} value={t.label}>
+                              {t.label}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                    )}
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor={`${formIdentifier}-message`}
+                      className="block text-xs font-medium text-stone-400 mb-1.5"
+                    >
+                      Project Description *
+                      <span
+                        className={`ml-2 font-normal ${charCount > 500 ? "text-red-400" : "text-stone-400"}`}
+                      >
+                        {charCount}/500
+                      </span>
+                    </label>
+
+                    <textarea
+                      id={`${formIdentifier}-message`}
+                      name="message"
+                      autoComplete="off"
+                      required
+                      rows={4}
+                      maxLength={500}
+                      placeholder="Tell us about your project — what you're building, what problem it solves, and any technical constraints..."
+                      onChange={(e) => setCharCount(e.target.value.length)}
+                      className="glass-input squircle relative flex w-full items-center overflow-hidden rounded-sm border border-stone-300 dark:border-stone-700 bg-white dark:bg-black/80 px-3 py-2 text-sm text-stone-800 dark:text-stone-50 placeholder:text-stone-400 outline-none backdrop-blur-[22px] transition-all duration-300 focus:border-stone-400 dark:focus:border-lime-500 focus:ring-2 focus:ring-offset-2 focus:ring-stone-300/50 dark:focus:ring-lime-500/10"
+                    />
+                  </div>
+
+                  {status === "error" && (
+                    <p className="text-xs text-red-400">
+                      Something went wrong. Please try again.
+                    </p>
+                  )}
+
+                  <button
+                    type="submit"
+                    disabled={status === "submitting" || charCount > 500}
+                    className="glass-button-white group relative isolate flex w-full cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-4xl! border border-white/30 dark:border-white bg- px-6 py-3 text-sm font-semibold text-stone-100 dark:text-stone-900 bg-stone-950/90 dark:bg-stone-100/80 outline-offset-0 dark:hover:bg-stone-100 hover:shadow-2xl hover:-translate-y-0.5 hover:outline-4 hover:outline-indigo-500 hover:-outline-offset-1 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-300"
+                    style={{ cornerShape: "squircle" } as React.CSSProperties}
+                  >
+                    <span className="relative z-2 flex items-center gap-2">
+                      {status === "submitting" ? (
+                        <>
+                          <Loader2 size={15} className="animate-spin" />
+                          Sending...
+                        </>
+                      ) : (
+                        <>
+                          <Send size={15} />
+                          Send Project Brief
+                        </>
+                      )}
+                    </span>
+                  </button>
+
+                  <p className="text-xs  text-stone-700 dark:text-stone-400 text-center">
+                    We'll respond within 1 business day. No spam, ever.
+                  </p>
+                </form>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

package/templates/blocks/DD-Contact/config.ts

@@ -0,0 +1,217 @@
+import type { Block } from 'payload'
+
+export const DDContact: Block = {
+  slug: 'DD-Contact',
+  interfaceName: 'DDContact',
+  labels: {
+    singular: 'Studio Contact',
+    plural: 'Studio Contact Sections'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Info',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              label: 'Eyebrow Label',
+              defaultValue: 'Start a Project'
+            },
+            {
+              name: 'headlineMain',
+              type: 'text',
+              label: 'Headline (Main)',
+              required: true,
+              defaultValue: "Let's build"
+            },
+            {
+              name: 'headlineAccent',
+              type: 'text',
+              label: 'Headline (Accent)',
+              defaultValue: 'something great'
+            },
+            {
+              name: 'description',
+              type: 'textarea',
+              label: 'Description',
+              defaultValue:
+                "Tell us about your project and we'll get back to you within one business day. We take on 3–4 projects per quarter, so spots are limited."
+            },
+            {
+              name: 'infoItems',
+              type: 'array',
+              label: 'Info Items',
+              admin: {
+                description: 'Bullet points shown on the left column'
+              },
+              fields: [
+                {
+                  name: 'iconName',
+                  type: 'text',
+                  label: 'Lucide Icon Name',
+                  admin: {
+                    description: 'e.g. Clock, DollarSign, FileText, Lock'
+                  }
+                },
+                {
+                  name: 'title',
+                  type: 'text',
+                  label: 'Title',
+                  required: true
+                },
+                {
+                  name: 'description',
+                  type: 'text',
+                  label: 'Description',
+                  required: true
+                }
+              ],
+              defaultValue: [
+                {
+                  iconName: 'Clock',
+                  title: 'Response within 24 hours',
+                  description: "We reply to every inquiry, even if we're not the right fit."
+                },
+                {
+                  iconName: 'DollarSign',
+                  title: 'Free discovery call',
+                  description: '30-minute call to understand your project before any commitment.'
+                },
+                {
+                  iconName: 'FileText',
+                  title: 'Detailed proposal',
+                  description: 'Fixed-price proposal with scope, timeline, and deliverables.'
+                },
+                {
+                  iconName: 'Lock',
+                  title: 'NDA available',
+                  description: 'Happy to sign an NDA before discussing sensitive details.'
+                }
+              ]
+            },
+            {
+              name: 'availabilityActive',
+              type: 'checkbox',
+              label: 'Show Availability Badge',
+              defaultValue: true
+            },
+            {
+              name: 'availabilityLabel',
+              type: 'text',
+              label: 'Availability Label',
+              defaultValue: 'Currently accepting projects',
+              admin: {
+                condition: (_, s) => s?.availabilityActive
+              }
+            },
+            {
+              name: 'availabilitySubtext',
+              type: 'text',
+              label: 'Availability Sub-text',
+              defaultValue: '2 spots remaining for Q2 2026',
+              admin: {
+                condition: (_, s) => s?.availabilityActive
+              }
+            }
+          ]
+        },
+        {
+          label: 'Form',
+          fields: [
+            // Reconnect option for projects using Payload Form Builder or a compatible forms collection:
+            // {
+            //   name: 'form',
+            //   type: 'relationship',
+            //   relationTo: 'forms',
+            //   label: 'Payload Form',
+            //   admin: {
+            //     description: 'Select the form used to store Studio Contact submissions.'
+            //   }
+            // },
+            {
+              name: 'serviceOptions',
+              type: 'array',
+              label: 'Service Options',
+              fields: [
+                {
+                  name: 'label',
+                  type: 'text',
+                  label: 'Option Label',
+                  required: true
+                }
+              ],
+              defaultValue: [
+                { label: 'UX/UI Design' },
+                { label: 'Web Application Development' },
+                { label: 'CMS Architecture' },
+                { label: 'Digital Product Consulting' },
+                { label: 'Performance & Optimization' },
+                { label: 'Legacy Modernization' }
+              ]
+            },
+            {
+              name: 'budgetOptions',
+              type: 'array',
+              label: 'Budget Options',
+              fields: [
+                {
+                  name: 'label',
+                  type: 'text',
+                  label: 'Option Label',
+                  required: true
+                }
+              ],
+              defaultValue: [
+                { label: 'Under $5k' },
+                { label: '$5k – $15k' },
+                { label: '$15k – $30k' },
+                { label: '$30k – $60k' },
+                { label: '$60k+' }
+              ]
+            },
+            {
+              name: 'timelineOptions',
+              type: 'array',
+              label: 'Timeline Options',
+              fields: [
+                {
+                  name: 'label',
+                  type: 'text',
+                  label: 'Option Label',
+                  required: true
+                }
+              ],
+              defaultValue: [
+                { label: 'ASAP' },
+                { label: '1–2 months' },
+                { label: '2–4 months' },
+                { label: '4–6 months' },
+                { label: 'Flexible' }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              defaultValue: 'contact'
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: { language: 'css' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}