Initial commit

src/components/form/ContactForm.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+
+import TextAnimation from "@/components/text/TextAnimation";
+import EmailSignupForm from "@/components/form/EmailSignupForm";
+import Tag from "@/components/shared/Tag";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { AnimationType } from "@/components/text/types";
+import type { ButtonAnimationType } from "@/types/button";
+import { LucideIcon } from "lucide-react";
+
+interface ContactFormProps {
+    title: string;
+    description: string;
+    tag: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    useInvertedBackground: boolean;
+    inputPlaceholder?: string;
+    buttonText?: string;
+    termsText?: string;
+    onSubmit?: (email: string) => void;
+    centered?: boolean;
+    className?: string;
+    tagClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    formWrapperClassName?: string;
+    formClassName?: string;
+    inputClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    termsClassName?: string;
+}
+
+const ContactForm = ({
+    title,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "none",
+    useInvertedBackground,
+    inputPlaceholder = "Enter your email",
+    buttonText = "Sign Up",
+    termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
+    onSubmit,
+    centered = false,
+    className = "",
+    tagClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    formWrapperClassName = "",
+    formClassName = "",
+    inputClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    termsClassName = "",
+}: ContactFormProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+    const { containerRef: tagContainerRef } = useButtonAnimation({ animationType: tagAnimation });
+
+    return (
+        <div className={cls("relative z-1 flex flex-col gap-4", centered && "items-center text-center", className)}>
+            <div className={cls("w-full flex flex-col gap-1", centered && "items-center")}>
+                <div ref={tagContainerRef}>
+                    <Tag text={tag} icon={tagIcon} useInvertedBackground={useInvertedBackground} className={tagClassName} />
+                </div>
+
+                <TextAnimation
+                    type={theme.defaultTextAnimation as AnimationType}
+                    text={title}
+                    variant="trigger"
+                    className={cls("text-4xl md:text-5xl font-medium leading-[1.175] text-balance", shouldUseLightText ? "text-background" : "text-foreground", centered && "w-full md:w-8/10", titleClassName)}
+                />
+
+                <TextAnimation
+                    type={theme.defaultTextAnimation as AnimationType}
+                    text={description}
+                    variant="words-trigger"
+                    className={cls("text-base leading-[1.15] mb-1 text-balance", shouldUseLightText ? "text-background" : "text-foreground", centered && "w-full md:w-8/10", descriptionClassName)}
+                />
+            </div>
+
+            <div className={cls("w-full flex flex-col gap-1", formWrapperClassName)}>
+                <EmailSignupForm
+                    inputPlaceholder={inputPlaceholder}
+                    buttonText={buttonText}
+                    onSubmit={onSubmit}
+                    className={formClassName}
+                    inputClassName={inputClassName}
+                    buttonClassName={buttonClassName}
+                    buttonTextClassName={buttonTextClassName}
+                />
+
+                <p className={cls("text-xs", shouldUseLightText ? "text-background/75" : "text-foreground/75", termsClassName)}>
+                    {termsText}
+                </p>
+            </div>
+        </div>
+    );
+};
+
+
+export default ContactForm;

src/components/form/EmailSignupForm.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { useState } from "react";
+import Button from "@/components/button/Button";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+
+interface EmailSignupFormProps {
+    inputPlaceholder?: string;
+    buttonText?: string;
+    onSubmit?: (email: string) => void;
+    className?: string;
+    inputClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+const EmailSignupForm = ({
+    inputPlaceholder = "Enter your email",
+    buttonText = "Sign Up",
+    onSubmit,
+    className = "",
+    inputClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: EmailSignupFormProps) => {
+    const theme = useTheme();
+    const [email, setEmail] = useState("");
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (onSubmit) {
+            onSubmit(email);
+            setEmail("");
+        }
+    };
+
+    const getButtonConfigProps = () => {
+        if (theme.defaultButtonVariant === "hover-bubble") {
+            return { bgClassName: "w-full md:w-auto" };
+        }
+        if (theme.defaultButtonVariant === "icon-arrow") {
+            return { className: "justify-between md:justify-center" };
+        }
+        return {};
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className={cls("relative z-1 flex flex-col md:flex-row gap-3 md:gap-1 w-full card rounded-theme-capped md:rounded-theme p-1", className)}>
+            <input
+                type="email"
+                placeholder={inputPlaceholder}
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                className={cls(
+                    "flex-1 px-4 text-base text-center md:text-left text-foreground placeholder:text-foreground/75 focus:outline-none focus:border-none truncate",
+                    inputClassName
+                )}
+                aria-label="Email address"
+            />
+            <Button
+                {...getButtonProps(
+                    { text: buttonText, props: getButtonConfigProps() },
+                    0,
+                    theme.defaultButtonVariant,
+                    cls("w-full md:w-auto", buttonClassName),
+                    buttonTextClassName
+                )}
+                type="submit"
+            />
+        </form>
+    );
+};
+
+export default EmailSignupForm;

src/components/form/Input.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+
+import { cls } from "@/lib/utils";
+
+interface InputProps {
+    type?: string;
+    placeholder?: string;
+    value: string;
+    onChange: (value: string) => void;
+    required?: boolean;
+    disabled?: boolean;
+    ariaLabel?: string;
+    className?: string;
+    error?: string;
+    id?: string;
+}
+
+const Input = ({
+    type = "text",
+    placeholder = "",
+    value,
+    onChange,
+    required = false,
+    disabled = false,
+    ariaLabel,
+    className = "",
+    error,
+    id,
+}: InputProps) => {
+    return (
+        <div className="w-full">
+            <input
+                id={id}
+                type={type}
+                placeholder={placeholder}
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                required={required}
+                disabled={disabled}
+                aria-label={ariaLabel || placeholder}
+                aria-invalid={!!error}
+                aria-describedby={error && id ? `${id}-error` : undefined}
+                className={cls(
+                    "w-full relative z-1 px-4 py-3 secondary-button rounded-theme text-base text-secondary-cta-text placeholder:text-secondary-cta-text/75 focus:outline-none",
+                    disabled && "opacity-50 cursor-not-allowed",
+                    error && "ring-1 ring-red-500/50",
+                    className
+                )}
+            />
+            {error && (
+                <p
+                    id={id ? `${id}-error` : undefined}
+                    className="text-red-500 text-xs mt-1"
+                    role="alert"
+                >
+                    {error}
+                </p>
+            )}
+        </div>
+    );
+};
+
+
+export default Input;

src/components/form/MultiSelect.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { ChevronDown } from "lucide-react";
+import { cls } from "@/lib/utils";
+
+interface MultiSelectProps {
+    label: string;
+    options: string[];
+    selectedOptions: string[];
+    onToggle: (option: string) => void;
+    ariaLabel?: string;
+    className?: string;
+}
+
+const MultiSelect = ({
+    label,
+    options,
+    selectedOptions,
+    onToggle,
+    ariaLabel,
+    className = "",
+}: MultiSelectProps) => {
+    return (
+        <div className={cls("relative secondary-button rounded-theme", className)}>
+            <select
+                value={selectedOptions[selectedOptions.length - 1] || ""}
+                onChange={(e) => onToggle(e.target.value)}
+                aria-label={ariaLabel || label}
+                className={cls(
+                    "relative z-1 w-full px-4 py-3 text-base bg-transparent focus:outline-none appearance-none cursor-pointer",
+                    selectedOptions.length > 0 ? "text-secondary-cta-text" : "text-secondary-cta-text/75"
+                )}
+            >
+                <option value="" disabled>
+                    {selectedOptions.length > 0 ? selectedOptions.join(", ") : label}
+                </option>
+                {options.map((opt) => (
+                    <option key={opt} value={opt}>
+                        {selectedOptions.includes(opt) ? `✓ ${opt}` : opt}
+                    </option>
+                ))}
+            </select>
+            <ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 h-(--text-base) w-auto text-secondary-cta-text/75 pointer-events-none" />
+        </div>
+    );
+};
+
+export default MultiSelect;

src/components/form/Textarea.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+
+import { cls } from "@/lib/utils";
+
+interface TextareaProps {
+    placeholder?: string;
+    value: string;
+    onChange: (value: string) => void;
+    rows?: number;
+    required?: boolean;
+    disabled?: boolean;
+    ariaLabel?: string;
+    className?: string;
+    error?: string;
+    id?: string;
+}
+
+const Textarea = ({
+    placeholder = "",
+    value,
+    onChange,
+    rows = 5,
+    required = false,
+    disabled = false,
+    ariaLabel,
+    className = "",
+    error,
+    id,
+}: TextareaProps) => {
+    return (
+        <div className="w-full">
+            <textarea
+                id={id}
+                placeholder={placeholder}
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                rows={rows}
+                required={required}
+                disabled={disabled}
+                aria-label={ariaLabel || placeholder}
+                aria-invalid={!!error}
+                aria-describedby={error && id ? `${id}-error` : undefined}
+                className={cls(
+                    "w-full relative z-1 px-4 py-3 secondary-button rounded-theme-capped text-base text-secondary-cta-text placeholder:text-secondary-cta-text/75 focus:outline-none resize-none",
+                    disabled && "opacity-50 cursor-not-allowed",
+                    error && "ring-1 ring-red-500/50",
+                    className
+                )}
+            />
+            {error && (
+                <p
+                    id={id ? `${id}-error` : undefined}
+                    className="text-red-500 text-xs mt-1"
+                    role="alert"
+                >
+                    {error}
+                </p>
+            )}
+        </div>
+    );
+};
+
+
+export default Textarea;

src/components/form/WaitlistForm.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import React, { useState } from "react";
+import Input from "@/components/form/Input";
+import Button from "@/components/button/Button";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+
+interface FormField {
+    name: string;
+    type?: string;
+    placeholder?: string;
+    ariaLabel?: string;
+    required?: boolean;
+}
+
+interface WaitlistFormProps {
+    fields?: FormField[];
+    buttonText?: string;
+    onSubmit?: (data: Record<string, string>) => void;
+    className?: string;
+    inputsContainerClassName?: string;
+    inputClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+const WaitlistForm = ({
+    fields = [
+        { name: "email", type: "email", placeholder: "Your email", ariaLabel: "Email address", required: true },
+        { name: "username", type: "text", placeholder: "Telegram username", ariaLabel: "Username", required: true }
+    ],
+    buttonText = "Join waitlist",
+    onSubmit,
+    className = "",
+    inputsContainerClassName = "",
+    inputClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: WaitlistFormProps) => {
+    const theme = useTheme();
+    const [formData, setFormData] = useState<Record<string, string>>(
+        fields.reduce((acc, field) => ({ ...acc, [field.name]: "" }), {})
+    );
+
+    const handleInputChange = (name: string, value: string) => {
+        setFormData(prev => ({ ...prev, [name]: value }));
+    };
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (onSubmit) {
+            onSubmit(formData);
+        }
+    };
+
+    const getButtonConfigProps = () => {
+        if (theme.defaultButtonVariant === "hover-bubble") {
+            return { bgClassName: "w-full" };
+        }
+        if (theme.defaultButtonVariant === "icon-arrow") {
+            return { className: "justify-between" };
+        }
+        return {};
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className={cls("relative z-1 flex flex-col gap-3 w-full", className)}>
+            <div className={cls("flex flex-col md:flex-row gap-3", inputsContainerClassName)}>
+                {fields.map((field) => (
+                    <Input
+                        key={field.name}
+                        type={field.type || "text"}
+                        placeholder={field.placeholder || ""}
+                        value={formData[field.name] || ""}
+                        onChange={(value) => handleInputChange(field.name, value)}
+                        required={field.required !== false}
+                        ariaLabel={field.ariaLabel || field.placeholder}
+                        className={cls("w-full", inputClassName)}
+                    />
+                ))}
+            </div>
+            <Button
+                {...getButtonProps(
+                    { text: buttonText, props: getButtonConfigProps() },
+                    0,
+                    theme.defaultButtonVariant,
+                    cls("w-full", buttonClassName),
+                    buttonTextClassName
+                )}
+            />
+        </form>
+    );
+};
+
+
+export default WaitlistForm;