nextworks 0.0.1 → 0.1.0-alpha.0

package/dist/kits/blocks/components/sections/CTA.tsx

@@ -0,0 +1,258 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+/**
+ * Props for the CTA section component.
+ *
+ * @remarks
+ * Uses a slot-style API for Tailwind className overrides. Each slot's
+ * className is merged with component defaults via cn().
+ *
+ * Prefer customizing spacing via headingText.className and other slot
+ * classNames rather than legacy spacing props.
+ *
+ * @public
+ */
+interface CTAProps {
+  /**
+   * Optional id for the section.
+   * @defaultValue "cta"
+   */
+  id?: string;
+  /** Optional top-level class to override the section root */
+  className?: string;
+
+  /** Styling configuration objects (slot-style pattern like Navbar) */
+  section?: { className?: string };
+  container?: { className?: string };
+  contentWrapper?: { className?: string };
+  headingText?: {
+    text?: string;
+    className?: string;
+  };
+  subheadingText?: {
+    text?: string;
+    className?: string;
+  };
+  descriptionText?: {
+    text?: string;
+    className?: string;
+  };
+  actionsWrapper?: { className?: string };
+
+  /**
+   * Primary CTA config or null to hide it (mirrors Navbar ctaButton pattern)
+   * Example: { label: "Get Started", href: "#contact" }
+   */
+  ctaButton?: { label: string; href: string } | null;
+  /** Primary CTA button styles */
+  ctaButtonStyle?: {
+    unstyled?: boolean;
+    style?: React.CSSProperties;
+    variant?:
+      | "default"
+      | "destructive"
+      | "outline"
+      | "secondary"
+      | "ghost"
+      | "link";
+    size?: "default" | "sm" | "lg" | "icon";
+    className?: string;
+  };
+  /** Optional wrapper slot for the primary CTA */
+  ctaButtonWrapper?: { className?: string };
+
+  /** Optional secondary action */
+  secondaryButton?: { label: string; href: string } | null;
+  /** Secondary CTA button styles */
+  secondaryButtonStyle?: {
+    unstyled?: boolean;
+    style?: React.CSSProperties;
+    variant?:
+      | "default"
+      | "destructive"
+      | "outline"
+      | "secondary"
+      | "ghost"
+      | "link";
+    size?: "default" | "sm" | "lg" | "icon";
+    className?: string;
+  };
+  /** Optional wrapper slot for the secondary CTA */
+  secondaryButtonWrapper?: { className?: string };
+
+  /**
+   * Legacy spacing hook applied to the heading.
+   * @deprecated Prefer margin utilities via headingText.className
+   */
+  spacing?: { topMargin?: string };
+
+  /** Accessibility */
+  ariaLabel?: string;
+  role?: string;
+}
+
+/**
+ * Call-to-Action section with a heading, optional subheading/description,
+ * and up to two actions (primary and secondary).
+ *
+ * @remarks
+ * - Styling: exposes slot-style className overrides (section, container,
+ *   contentWrapper, headingText, subheadingText, descriptionText, actionsWrapper,
+ *   ctaButtonStyle, secondaryButtonStyle). Consumer classes are merged after
+ *   defaults via cn().
+ * - Accessibility: rendered as a semantic <section> with aria-label. The role
+ *   defaults to "region" but can be customized with the role prop.
+ * - Motion: subtle hover lift effects on buttons are included by default.
+ *
+ * @example
+ * <CTA
+ *   headingText={{ text: "Join The Launch Today!" }}
+ *   descriptionText={{ text: "Start your free trial in minutes." }}
+ *   ctaButton={{ label: "Sign Up", href: "#contact" }}
+ *   secondaryButton={{ label: "Learn More", href: "#features" }}
+ * />
+ */
+export function CTA({
+  id = "cta",
+  className,
+
+  section = {
+    className: "bg-background text-foreground",
+  },
+  container = {
+    className:
+      "mx-auto flex min-h-[42vh] w-full max-w-6xl flex-col items-center justify-center overflow-hidden px-4 pb-7",
+  },
+  contentWrapper = {
+    className: "flex w-full flex-col items-center text-center",
+  },
+  headingText = {
+    text: "Join The Launch Today!",
+    className:
+      "text-3xl font-bold leading-[1.1] text-primary sm:text-4xl md:text-5xl text-[var(--heading-fg)]",
+  },
+  subheadingText = {
+    text: "",
+    className:
+      "mt-2 text-lg font-medium text-muted-foreground sm:text-xl text-[var(--subheading-fg)]",
+  },
+  descriptionText = {
+    text: "",
+    className:
+      "mt-3 max-w-2xl text-base text-foreground/80 sm:text-lg text-[var(--description-fg)]",
+  },
+  actionsWrapper = {
+    className: "mt-6 flex flex-col items-center gap-3 sm:flex-row",
+  },
+
+  ctaButton = { label: "Sign Up Now", href: "#contact" },
+  ctaButtonStyle = {
+    variant: "default",
+    size: "default",
+    className:
+      "shadow-lg transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]",
+  },
+  ctaButtonWrapper = { className: "" },
+
+  secondaryButton = null,
+  secondaryButtonStyle = {
+    variant: "outline",
+    size: "default",
+    className:
+      "transition-transform duration-200 hover:-translate-y-0.5 border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]",
+  },
+  secondaryButtonWrapper = { className: "" },
+
+  spacing = { topMargin: "mt-0 sm:mt-12" },
+  // spacing = { topMargin: "mt-[17vh]" },
+
+  ariaLabel = "Call to action section",
+  role = "region",
+}: CTAProps) {
+  // default class for actions wrapper (keeps a gap and responsive row layout)
+  const actionsWrapperDefault =
+    "mt-6 flex flex-col items-center gap-3 sm:flex-row";
+
+  return (
+    <section
+      id={id}
+      role={role}
+      aria-label={ariaLabel}
+      className={cn("w-full", section.className, className)}
+    >
+      <div className={cn(container.className)}>
+        <div className={cn(contentWrapper.className)}>
+          {headingText?.text ? (
+            <h2
+              className={cn(
+                "text-center",
+                spacing?.topMargin,
+                headingText.className,
+              )}
+            >
+              {headingText.text}
+            </h2>
+          ) : null}
+
+          {subheadingText?.text ? (
+            <p className={cn(subheadingText.className)}>
+              {subheadingText.text}
+            </p>
+          ) : null}
+
+          {descriptionText?.text ? (
+            <p className={cn(descriptionText.className)}>
+              {descriptionText.text}
+            </p>
+          ) : null}
+
+          <div className={cn(actionsWrapperDefault, actionsWrapper.className)}>
+            {ctaButton && (
+              <Button
+                asChild
+                unstyled={ctaButtonStyle.unstyled}
+                variant={ctaButtonStyle.variant}
+                size={ctaButtonStyle.size}
+                className={cn(
+                  ctaButtonWrapper.className,
+                  ctaButtonStyle.className,
+                )}
+                style={ctaButtonStyle.style}
+              >
+                <Link href={ctaButton.href} aria-label={ctaButton.label}>
+                  {ctaButton.label}
+                </Link>
+              </Button>
+            )}
+
+            {secondaryButton && (
+              <Button
+                asChild
+                unstyled={secondaryButtonStyle.unstyled}
+                variant={secondaryButtonStyle.variant}
+                size={secondaryButtonStyle.size}
+                className={cn(
+                  secondaryButtonWrapper.className,
+                  secondaryButtonStyle.className,
+                )}
+                style={secondaryButtonStyle.style}
+              >
+                <Link
+                  href={secondaryButton.href}
+                  aria-label={secondaryButton.label}
+                >
+                  {secondaryButton.label}
+                </Link>
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/dist/kits/blocks/components/sections/Contact.tsx

@@ -0,0 +1,267 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+
+// Supported field types
+type FieldType = "text" | "email" | "tel" | "textarea";
+
+/**
+ * Configuration for a single form field in the Contact section.
+ * @public
+ */
+export interface ContactField {
+  /** Unique id/name for the field. Used for htmlFor and form submission. */
+  id: string;
+  /** Visible label text for the field */
+  label: string;
+  /** Placeholder text rendered inside the input */
+  placeholder?: string;
+  /** Whether the field is required for form submission */
+  required?: boolean;
+  /** Type of field to render (text, email, tel, textarea). */
+  type?: FieldType;
+}
+
+/**
+ * Props for the Contact section component.
+ *
+ * @remarks
+ * - Styling: exposes slot-style className overrides (section, container,
+ *   headerWrapper, headerText, subheaderText, form, fieldsWrapper, field,
+ *   label, input, textarea, submitButtonWrapper, submitButtonStyle). Consumer
+ *   classes are merged after defaults via cn().
+ * - Behavior: onSubmit is called with the form event after default
+ *   prevention. Provide your own handler to integrate with APIs.
+ * - Motion: controlled by enableMotion; when false, removes button hover lift.
+ * - Accessibility: rendered as a semantic <section> with aria-label.
+ */
+export interface ContactProps {
+  /** Array of fields to render in the form. @defaultValue defaultFormData */
+  fields?: ContactField[];
+  /** Heading text above the form. @defaultValue "Ready to Grow Your Business?" */
+  contactHeaderText?: string;
+  /** Subheading under the header. @defaultValue "Schedule a free consultation with our experts." */
+  contactSubHeaderText?: string;
+
+  /** Optional id to attach to the root section element. @defaultValue "contact" */
+  id?: string;
+  /** Optional top-level class to override the section root */
+  className?: string;
+
+  /** Styling configuration objects (slots) */
+  section?: { className?: string };
+  container?: { className?: string };
+  headerWrapper?: { className?: string };
+  headerText?: { className?: string };
+  subheaderText?: { className?: string };
+  form?: { className?: string };
+  fieldsWrapper?: { className?: string };
+  field?: { className?: string };
+  label?: { className?: string };
+  input?: { className?: string };
+  textarea?: { className?: string };
+  submitButtonWrapper?: { className?: string };
+  submitButtonStyle?: {
+    unstyled?: boolean;
+    style?: React.CSSProperties;
+    variant?:
+      | "default"
+      | "destructive"
+      | "outline"
+      | "secondary"
+      | "ghost"
+      | "link";
+    size?: "default" | "sm" | "lg" | "icon";
+    className?: string;
+  };
+
+  /** Text for the submit button. @defaultValue "Schedule Free Consultation" */
+  submitButtonText?: string;
+  /** Callback fired on submit; default prevented. */
+  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+  /** ARIA label for the section. @defaultValue "Contact section" */
+  ariaLabel?: string;
+
+  /** When false, removes hover lift/transition on the submit button */
+  enableMotion?: boolean;
+}
+
+const defaultFormData: ContactField[] = [
+  {
+    id: "name",
+    label: "Your Full Name",
+    placeholder: "John Doe",
+    required: true,
+    type: "text",
+  },
+  {
+    id: "email",
+    label: "Email Address",
+    placeholder: "you@example.com",
+    required: true,
+    type: "email",
+  },
+  {
+    id: "phone",
+    label: "Phone Number",
+    placeholder: "Enter your phone number",
+    required: false,
+    type: "tel",
+  },
+  {
+    id: "company",
+    label: "Company",
+    placeholder: "Enter your company name",
+    required: false,
+    type: "text",
+  },
+  {
+    id: "message",
+    label: "Message",
+    placeholder: "Tell us about your project...",
+    required: true,
+    type: "textarea",
+  },
+];
+
+/**
+ * Contact section with a configurable form and submit action.
+ *
+ * @remarks
+ * - Styling: slot-style className overrides are merged via cn().
+ * - Behavior: onSubmit is invoked with the form event after calling
+ *   preventDefault().
+ * - Motion: enableMotion toggles the button hover lift/transition.
+ * - Accessibility: Uses a semantic <section> with aria-label.
+ *
+ * @example
+ * <Contact onSubmit={(e) => { // send to your API }} />
+ */
+export function Contact({
+  fields = defaultFormData,
+  contactHeaderText = "Ready to Grow Your Business?",
+  contactSubHeaderText = "Schedule a free consultation with our experts.",
+  id = "contact",
+  className,
+  section = { className: "py-16 px-4 bg-primary" },
+  container = { className: "mx-auto max-w-4xl" },
+  headerWrapper = { className: "mb-8 text-center" },
+  headerText = {
+    className: "text-2xl font-bold font-poppins text-primary-foreground",
+  },
+  subheaderText = {
+    className: "mt-2 text-lg font-inter text-primary-foreground px-4 md:px-14",
+  },
+  form = {
+    className:
+      "bg-card p-8 rounded-lg shadow-md border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]",
+  },
+  fieldsWrapper = { className: "space-y-4" },
+  field = { className: "space-y-2" },
+  label = {
+    className:
+      "text-card-foreground text-sm font-medium font-poppins block text-[var(--label-fg)]",
+  },
+  input = {
+    className:
+      "w-full p-3 border border-input rounded-md bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent font-inter border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-[var(--input-focus-ring)] focus-visible:ring-offset-[var(--input-ring-offset)]",
+  },
+  textarea = {
+    className:
+      "w-full p-3 border border-input rounded-md bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent resize-vertical min-h-[120px] font-inter border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-[var(--input-focus-ring)] focus-visible:ring-offset-[var(--input-ring-offset)]",
+  },
+  submitButtonWrapper = { className: "pt-2" },
+  submitButtonStyle = {
+    variant: "default",
+    size: "lg",
+    className:
+      "w-full shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]",
+  },
+  submitButtonText = "Schedule Free Consultation",
+  onSubmit,
+  ariaLabel = "Contact section",
+  enableMotion = true,
+}: ContactProps) {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onSubmit?.(e);
+  };
+
+  return (
+    <section
+      id={id}
+      className={cn("w-full", section.className, className)}
+      aria-label={ariaLabel}
+    >
+      <div className={cn(container.className)}>
+        <div className={cn(headerWrapper.className)}>
+          {contactHeaderText && (
+            <h2 className={cn(headerText.className)}>{contactHeaderText}</h2>
+          )}
+          {contactSubHeaderText && (
+            <p className={cn(subheaderText.className)}>
+              {contactSubHeaderText}
+            </p>
+          )}
+        </div>
+        <form onSubmit={handleSubmit} className={cn(form.className)}>
+          <div className={cn(fieldsWrapper.className)}>
+            {fields.map((f) => {
+              const isTextarea = f.type === "textarea";
+              return (
+                <div key={f.id} className={cn(field.className)}>
+                  <Label htmlFor={f.id} className={cn(label.className)}>
+                    {f.label}
+                    {f.required && (
+                      <span className="text-destructive ml-1">*</span>
+                    )}
+                  </Label>
+                  {isTextarea ? (
+                    <Textarea
+                      id={f.id}
+                      name={f.id}
+                      placeholder={f.placeholder}
+                      required={f.required}
+                      rows={4}
+                      className={cn(textarea.className)}
+                    />
+                  ) : (
+                    <Input
+                      type={f.type ?? "text"}
+                      id={f.id}
+                      name={f.id}
+                      placeholder={f.placeholder}
+                      required={f.required}
+                      className={cn(input.className)}
+                    />
+                  )}
+                </div>
+              );
+            })}
+            <div className={cn(submitButtonWrapper.className)}>
+              <Button
+                type="submit"
+                unstyled={submitButtonStyle.unstyled}
+                variant={submitButtonStyle.variant}
+                size={submitButtonStyle.size}
+                className={cn(
+                  submitButtonStyle.className,
+                  !enableMotion &&
+                    "transition-none hover:!translate-y-0 hover:shadow-none",
+                )}
+                style={submitButtonStyle.style}
+              >
+                {submitButtonText}
+              </Button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </section>
+  );
+}