@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/dist/components/addOns/functional/ClassPopup.jsx

@@ -1,300 +0,0 @@
-'use client';
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import React, { useState, useEffect } from 'react';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import * as z from 'zod';
-import { CancelButton, NextButton, SubmitButton } from '@/components/other/button';
-import { Input } from '@/components/other/input';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/other/dialog';
-import { Label } from '@/components/other/label';
-import { motion, AnimatePresence } from 'framer-motion';
-import { useToast } from '@/hooks/use-toast';
-import { User, Mail, Phone, Loader2 } from 'lucide-react';
-var formSchema = z.object({
-    name: z
-        .string()
-        .min(2, 'Name must be at least 2 characters')
-        .max(50, 'Name cannot exceed 50 characters')
-        .regex(/^[a-zA-Z\s-]+$/, 'Name can only contain letters, spaces, or hyphens'),
-    email: z
-        .string()
-        .email('Invalid email address')
-        .max(100, 'Email cannot exceed 100 characters'),
-    phone: z
-        .string()
-        .regex(/^(\+?1\s?)?(\(?\d{3}\)?)[-.\s]?\d{3}[-.\s]?\d{4}$/, 'Please enter a valid phone number (e.g., 123-456-7890)')
-        .max(14, 'Phone number cannot exceed 14 characters')
-        .transform(function (val) { return val.replace(/[-.\s()]/g, '').replace(/^1/, ''); }),
-    information: z.string().optional(),
-    date: z.string().optional(),
-});
-export var ClassPopup = function (_a) {
-    var isOpen = _a.isOpen, onClose = _a.onClose, classDetails = _a.classDetails;
-    var _b = useState(0), currentStep = _b[0], setCurrentStep = _b[1];
-    var toast = useToast().toast;
-    var _c = useForm({
-        resolver: zodResolver(formSchema),
-        mode: 'onBlur',
-        defaultValues: {
-            information: '',
-            name: '',
-            phone: '',
-            email: '',
-            date: '',
-        },
-    }), register = _c.register, handleSubmit = _c.handleSubmit, setValue = _c.setValue, watch = _c.watch, reset = _c.reset, trigger = _c.trigger, clearErrors = _c.clearErrors, _d = _c.formState, errors = _d.errors, isSubmitting = _d.isSubmitting, dirtyFields = _d.dirtyFields;
-    var formValues = watch();
-    useEffect(function () {
-        var event = new CustomEvent('modalStateChange', {
-            detail: { isOpen: isOpen },
-        });
-        window.dispatchEvent(event);
-    }, [isOpen]);
-    var formatClassDetails = function (details) {
-        return "".concat(details.title, " on ").concat(details.day, " at ").concat(details.time, " for ").concat(details.ageGroup);
-    };
-    useEffect(function () {
-        if (classDetails) {
-            setValue('information', formatClassDetails(classDetails), { shouldValidate: false });
-            setValue('date', new Date().toISOString(), { shouldValidate: false });
-        }
-        else {
-            setValue('information', '', {});
-            setValue('date', '', {});
-        }
-        clearErrors();
-    }, [classDetails, setValue, clearErrors]);
-    useEffect(function () {
-        clearErrors();
-    }, [currentStep, clearErrors]);
-    var validateStep = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var stepFields, isValid;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    stepFields = steps[currentStep].fields;
-                    return [4 /*yield*/, trigger(stepFields, { shouldFocus: true })];
-                case 1:
-                    isValid = _a.sent();
-                    if (!isValid && stepFields.some(function (field) { return dirtyFields[field]; })) {
-                        toast({
-                            title: 'Validation Error',
-                            description: 'Please complete all required fields correctly.',
-                            duration: 3000,
-                            variant: 'destructive',
-                        });
-                    }
-                    return [2 /*return*/, isValid];
-            }
-        });
-    }); };
-    var nextStep = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var isValid;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, validateStep()];
-                case 1:
-                    isValid = _a.sent();
-                    if (isValid || currentStep === 0) {
-                        setCurrentStep(currentStep + 1);
-                        clearErrors();
-                    }
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var previousStep = function () {
-        setCurrentStep(currentStep - 1);
-        clearErrors();
-    };
-    var onFormSubmit = function (data) { return __awaiter(void 0, void 0, void 0, function () {
-        var response, result, errorMessage, error_1;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    _b.trys.push([0, 3, , 4]);
-                    return [4 /*yield*/, fetch('/api/trial-request', {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify(data),
-                        })];
-                case 1:
-                    response = _b.sent();
-                    return [4 /*yield*/, response.json()];
-                case 2:
-                    result = _b.sent();
-                    if (!response.ok) {
-                        errorMessage = ((_a = result.error) === null || _a === void 0 ? void 0 : _a.message) || result.error || 'Unable to submit request at this time';
-                        throw new Error(errorMessage);
-                    }
-                    toast({
-                        title: 'Success',
-                        description: 'Trial request submitted successfully!',
-                        duration: 3000,
-                        variant: 'success',
-                    });
-                    reset();
-                    setCurrentStep(0);
-                    onClose();
-                    return [3 /*break*/, 4];
-                case 3:
-                    error_1 = _b.sent();
-                    console.error('Trial form submission error:', error_1);
-                    toast({
-                        title: 'Error',
-                        description: error_1.message || 'Unable to submit request at this time',
-                        duration: 3000,
-                        variant: 'destructive',
-                    });
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); };
-    var steps = [
-        {
-            title: 'Class Details',
-            fields: ['information'],
-            content: (<div className="space-y-6">
-          {classDetails && (<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.2, duration: 0.3 }} className="mb-4 bg-gray-700/30 rounded-xl p-3 sm:p-4">
-              <h3 className="text-base sm:text-lg font-semibold text-white mb-2">
-                Would you like to try this class?
-              </h3>
-              <div className="text-xs sm:text-sm text-gray-300 space-y-0.5 sm:space-y-1">
-                <p className="flex items-center">
-                  <span className="material-icons text-blue-400 mr-1.5 sm:mr-2 text-base sm:text-lg">Class: </span>
-                  <span className="font-medium">{classDetails.title || 'Untitled'}</span>
-                </p>
-                <p className="flex items-center">
-                  <span className="material-icons text-blue-400 mr-1.5 sm:mr-2 text-base sm:text-lg">Day: </span>
-                  <span className="font-medium">{classDetails.day || 'TBD'}</span>
-                </p>
-                <p className="flex items-center">
-                  <span className="material-icons text-blue-400 mr-1.5 sm:mr-2 text-base sm:text-lg">Time: </span>
-                  <span className="font-medium">{classDetails.time || 'TBD'}</span>
-                </p>
-                <p className="flex items-center">
-                  <span className="material-icons text-blue-400 mr-1.5 sm:mr-2 text-base sm:text-lg">Age Group: </span>
-                  <span className="font-medium">{classDetails.ageGroup || 'All Ages'}</span>
-                </p>
-              </div>
-            </motion.div>)}
-        </div>),
-        },
-        {
-            title: 'Personal Information',
-            fields: ['name', 'phone', 'email'],
-            content: (<div className="space-y-6">
-          <div>
-            <Label htmlFor="name" className="text-xs sm:text-sm font-medium text-gray-200 block mb-2">
-              Name
-            </Label>
-            <div className="relative">
-              <User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" aria-hidden="true"/>
-              <Input {...register('name')} value={formValues.name} onChange={function (e) { return setValue('name', e.target.value); }} onBlur={function () { return trigger('name'); }} placeholder="Enter your full name" maxLength={50} className={"pl-12 bg-gray-700/50 border-gray-600/50 text-white placeholder-gray-400 text-base h-10 sm:h-11 focus:ring-2 focus:ring-blue-600 rounded-lg ".concat(errors.name && dirtyFields.name ? 'border-red-500 focus:ring-red-300' : '')} aria-invalid={!!errors.name && !!dirtyFields.name} aria-describedby={errors.name && dirtyFields.name ? 'name-error' : undefined}/>
-            </div>
-            {errors.name && dirtyFields.name && (<p id="name-error" className="text-[10px] sm:text-xs text-red-400 mt-1">
-                {errors.name.message}
-              </p>)}
-          </div>
-          <div>
-            <Label htmlFor="phone" className="text-xs sm:text-sm font-medium text-gray-200 block mb-2">
-              Phone Number
-            </Label>
-            <div className="relative">
-              <Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" aria-hidden="true"/>
-              <Input {...register('phone')} type="tel" value={formValues.phone} onChange={function (e) { return setValue('phone', e.target.value); }} onBlur={function () { return trigger('phone'); }} placeholder="+1 (123) 456-7890" maxLength={14} className={"pl-12 bg-gray-700/50 border-gray-600/50 text-white placeholder-gray-400 text-base h-10 sm:h-11 focus:ring-2 focus:ring-blue-600 rounded-lg ".concat(errors.phone && dirtyFields.phone ? 'border-red-500 focus:ring-red-300' : '')} aria-invalid={!!errors.phone && !!dirtyFields.phone} aria-describedby={errors.phone && dirtyFields.phone ? 'phone-error' : undefined}/>
-            </div>
-            {errors.phone && dirtyFields.phone && (<p id="phone-error" className="text-[10px] sm:text-xs text-red-400 mt-1">
-                {errors.phone.message}
-              </p>)}
-          </div>
-          <div>
-            <Label htmlFor="email" className="text-xs sm:text-sm font-medium text-gray-200 block mb-2">
-              Email
-            </Label>
-            <div className="relative">
-              <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" aria-hidden="true"/>
-              <Input {...register('email')} type="email" value={formValues.email} onChange={function (e) { return setValue('email', e.target.value); }} onBlur={function () { return trigger('email'); }} placeholder="you@example.com" maxLength={100} className={"pl-12 bg-gray-700/50 border-gray-600/50 text-white placeholder-gray-400 text-base h-10 sm:h-11 focus:ring-2 focus:ring-blue-600 rounded-lg ".concat(errors.email && dirtyFields.email ? 'border-red-500 focus:ring-red-300' : '')} aria-invalid={!!errors.email && !!dirtyFields.email} aria-describedby={errors.email && dirtyFields.email ? 'email-error' : undefined}/>
-            </div>
-            {errors.email && dirtyFields.email && (<p id="email-error" className="text-[10px] sm:text-xs text-red-400 mt-1">
-                {errors.email.message}
-              </p>)}
-          </div>
-        </div>),
-        },
-    ];
-    return (<Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="w-[90vw] max-w-[400px] sm:max-w-[450px] bg-gradient-to-b from-gray-800 to-gray-900 text-white rounded-2xl shadow-2xl border border-gray-700/50 p-0 overflow-hidden max-h-[90vh] flex flex-col" aria-describedby="class-registration-dialog">
-        <AnimatePresence>
-          {isOpen && (<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 20 }} transition={{ duration: 0.3, ease: 'easeOut' }} className="flex flex-col flex-grow overflow-y-auto">
-              <DialogHeader className="p-4 sm:p-5 border-b border-gray-700/50">
-                <DialogTitle className="text-lg sm:text-xl font-bold text-white tracking-tight pb-4">
-                  Get More Info and Try The Class
-                </DialogTitle>
-                <div className="flex justify-center space-x-2 mt-2">
-                  {steps.map(function (_, index) { return (<div key={index} className={"w-3 h-3 rounded-full ".concat(index === currentStep
-                    ? 'bg-blue-600'
-                    : index < currentStep
-                        ? 'bg-green-500'
-                        : 'bg-gray-600')} aria-current={index === currentStep ? 'step' : undefined}/>); })}
-                </div>
-              </DialogHeader>
-              <form id="class-registration-form" onSubmit={handleSubmit(onFormSubmit)} className="p-4 sm:p-5 flex-grow overflow-y-auto">
-                {steps[currentStep].content}
-                <DialogFooter className="pt-4 sm:pt-5 border-t border-gray-700/50 flex justify-between gap-2 sm:gap-3 sticky bottom-0 bg-gray-900/90 pb-4 sm:pb-5">
-                  <CancelButton type="button" size="sm" onClick={currentStep === 0 ? onClose : previousStep} disabled={isSubmitting} aria-label={currentStep === 0 ? 'Cancel' : 'Previous step'}>
-                    {currentStep === 0 ? 'Cancel' : 'Previous'}
-                  </CancelButton>
-                  {currentStep === steps.length - 1 ? (<SubmitButton type="submit" size="sm" disabled={isSubmitting} aria-label="Submit form">
-                      {isSubmitting ? (<>
-                          <Loader2 className="mr-2 h-5 w-5 animate-spin"/>
-                          Submitting...
-                        </>) : ('Submit')}
-                    </SubmitButton>) : (<NextButton type="button" size="sm" onClick={nextStep} disabled={isSubmitting} aria-label="Next step">
-                      Next
-                    </NextButton>)}
-                </DialogFooter>
-              </form>
-            </motion.div>)}
-        </AnimatePresence>
-      </DialogContent>
-    </Dialog>);
-};

package/dist/components/addOns/functional/ContactForm.jsx

@@ -1,219 +0,0 @@
-'use client';
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import React, { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import * as z from 'zod';
-import { ContactSubmitButton } from '@/components/other/button'; // Updated import
-import { Input } from '@/components/other/input';
-import { Textarea } from '@/components/other/textarea';
-import { Mail, Loader2, User, MessageSquare, FileText, Phone } from 'lucide-react';
-var formSchema = z.object({
-    name: z
-        .string()
-        .min(2, 'First name must be at least 2 characters')
-        .max(50, 'First name cannot exceed 50 characters')
-        .regex(/^[a-zA-Z\s-]+$/, 'First name can only contain letters, spaces, or hyphens'),
-    lastName: z
-        .string()
-        .min(2, 'Last name must be at least 2 characters')
-        .max(50, 'Last name cannot exceed 50 characters')
-        .regex(/^[a-zA-Z\s-]+$/, 'Last name can only contain letters, spaces, or hyphens'),
-    email: z
-        .string()
-        .email('Invalid email address')
-        .max(100, 'Email cannot exceed 100 characters'),
-    phone: z
-        .string()
-        .regex(/^(\+?1\s?)?(\(?\d{3}\)?)[-.\s]?\d{3}[-.\s]?\d{4}$/, 'Please enter a valid phone number (e.g., 123-456-7890)')
-        .max(14, 'Phone number cannot exceed 14 characters')
-        .transform(function (val) { return val.replace(/[-.\s()]/g, '').replace(/^1/, ''); }),
-    subject: z
-        .string()
-        .min(5, 'Subject must be at least 5 characters')
-        .max(100, 'Subject cannot exceed 100 characters'),
-    message: z
-        .string()
-        .max(500, 'Message cannot exceed 500 characters')
-        .optional(),
-});
-export default function ContactForm() {
-    var _this = this;
-    var _a = useState(null), toastMessage = _a[0], setToastMessage = _a[1];
-    var _b = useForm({
-        resolver: zodResolver(formSchema),
-        mode: 'onBlur',
-        defaultValues: {
-            name: '',
-            lastName: '',
-            email: '',
-            phone: '',
-            subject: '',
-            message: '',
-        },
-    }), register = _b.register, handleSubmit = _b.handleSubmit, reset = _b.reset, _c = _b.formState, errors = _c.errors, isSubmitting = _c.isSubmitting, dirtyFields = _c.dirtyFields;
-    var onSubmit = function (data) { return __awaiter(_this, void 0, void 0, function () {
-        var response, contentType, result, errorMessage, error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    _a.trys.push([0, 3, , 4]);
-                    return [4 /*yield*/, fetch('/api/contact', {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify(data),
-                        })];
-                case 1:
-                    response = _a.sent();
-                    contentType = response.headers.get('content-type');
-                    if (!contentType || !contentType.includes('application/json')) {
-                        throw new Error('Server returned an unexpected response. Please try again.');
-                    }
-                    return [4 /*yield*/, response.json()];
-                case 2:
-                    result = _a.sent();
-                    if (!response.ok) {
-                        errorMessage = result.error || 'Unable to submit request at this time';
-                        throw new Error(errorMessage);
-                    }
-                    setToastMessage({
-                        type: 'success',
-                        title: 'Success',
-                        description: 'Your message has been sent successfully!',
-                    });
-                    reset();
-                    setTimeout(function () { return setToastMessage(null); }, 3000);
-                    return [3 /*break*/, 4];
-                case 3:
-                    error_1 = _a.sent();
-                    console.error('Contact form submission error:', error_1);
-                    setToastMessage({
-                        type: 'error',
-                        title: 'Error',
-                        description: error_1.message || 'Unable to submit request at this time',
-                    });
-                    setTimeout(function () { return setToastMessage(null); }, 3000);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); };
-    return (<div className="relative w-full max-w-4xl mx-auto p-10 bg-white/80 backdrop-blur-lg rounded-3xl shadow-xl border border-black-100/90">
-      {toastMessage && (<div className="fixed top-8 right-8 z-50 animate-in fade-in slide-in-from-top-2">
-          <div className={"p-6 rounded-2xl shadow-lg border transition-all duration-300 ".concat(toastMessage.type === 'success'
-                ? 'bg-green-50/80 border-green-200/50 text-green-900'
-                : 'bg-red-50/80 border-red-200/50 text-red-900', " backdrop-blur-sm")}>
-            <h3 className="font-semibold text-lg">{toastMessage.title}</h3>
-            <p className="text-base mt-2">{toastMessage.description}</p>
-          </div>
-        </div>)}
-      <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
-        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
-          <div className="space-y-2">
-            <div className="relative group">
-              <User className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600"/>
-              <Input {...register('name')} placeholder="First Name" className={"pl-14 h-14 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base transition-all duration-300 ".concat(errors.name && dirtyFields.name ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200')} maxLength={50} aria-invalid={!!errors.name && !!dirtyFields.name} aria-describedby={errors.name && dirtyFields.name ? 'name-error' : undefined}/>
-            </div>
-            {errors.name && dirtyFields.name && (<p id="name-error" className="text-base text-red-500">
-                {errors.name.message}
-              </p>)}
-          </div>
-
-          <div className="space-y-2">
-            <div className="relative group">
-              <User className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600"/>
-              <Input {...register('lastName')} placeholder="Last Name" className={"pl-14 h-14 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base transition-all duration-300 ".concat(errors.lastName && dirtyFields.lastName ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200')} maxLength={50} aria-invalid={!!errors.lastName && !!dirtyFields.lastName} aria-describedby={errors.lastName && dirtyFields.lastName ? 'lastName-error' : undefined}/>
-            </div>
-            {errors.lastName && dirtyFields.lastName && (<p id="lastName-error" className="text-base text-red-500">
-                {errors.lastName.message}
-              </p>)}
-          </div>
-        </div>
-
-        <div className="space-y-2">
-          <div className="relative group">
-            <Mail className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600"/>
-            <Input {...register('email')} type="email" placeholder="Email Address" className={"pl-14 h-14 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base transition-all duration-300 ".concat(errors.email && dirtyFields.email ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200')} maxLength={100} aria-invalid={!!errors.email && !!dirtyFields.email} aria-describedby={errors.email && dirtyFields.email ? 'email-error' : undefined}/>
-          </div>
-          {errors.email && dirtyFields.email && (<p id="email-error" className="text-base text-red-500">
-              {errors.email.message}
-            </p>)}
-        </div>
-
-        <div className="space-y-2">
-          <div className="relative group">
-            <Phone className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600"/>
-            <Input {...register('phone')} type="tel" placeholder="Phone Number" className={"pl-14 h-14 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base transition-all duration-300 ".concat(errors.phone && dirtyFields.phone ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200')} maxLength={14} aria-invalid={!!errors.phone && !!dirtyFields.phone} aria-describedby={errors.phone && dirtyFields.phone ? 'phone-error' : undefined}/>
-          </div>
-          {errors.phone && dirtyFields.phone && (<p id="phone-error" className="text-base text-red-500">
-              {errors.phone.message}
-            </p>)}
-        </div>
-
-        <div className="space-y-2">
-          <div className="relative group">
-            <FileText className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600"/>
-            <Input {...register('subject')} placeholder="Subject" className={"pl-14 h-14 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base transition-all duration-300 ".concat(errors.subject && dirtyFields.subject ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200')} maxLength={100} aria-invalid={!!errors.subject && !!dirtyFields.subject} aria-describedby={errors.subject && dirtyFields.subject ? 'subject-error' : undefined}/>
-          </div>
-          {errors.subject && dirtyFields.subject && (<p id="subject-error" className="text-base text-red-500">
-              {errors.subject.message}
-            </p>)}
-        </div>
-
-        <div className="space-y-2">
-          <div className="relative group">
-            <MessageSquare className="absolute left-4 top-5 text-gray-400 h-6 w-6 transition-colors group-focus-within:text-gray-600"/>
-            <Textarea {...register('message')} placeholder="Your Message" className={"pl-14 pt-5 text-lg font-medium border-0 bg-gray-100/80 rounded-2xl focus:ring-2 focus:ring-gray-300 focus:bg-white text-gray-900 placeholder-gray-400 placeholder:font-normal placeholder:text-base min-h-[180px] resize-y transition-all duration-300 ".concat(errors.message && dirtyFields.message ? 'ring-2 ring-red-300 bg-red-50/80' : 'ring-gray-200')} maxLength={500} rows={8} aria-invalid={!!errors.message && !!dirtyFields.message} aria-describedby={errors.message && dirtyFields.message ? 'message-error' : undefined}/>
-          </div>
-          {errors.message && dirtyFields.message && (<p id="message-error" className="text-base text-red-500">
-              {errors.message.message}
-            </p>)}
-        </div>
-
-        <ContactSubmitButton type="submit" disabled={isSubmitting}>
-          {isSubmitting ? (<>
-              <Loader2 className="mr-3 h-6 w-6 animate-spin"/>
-              Sending...
-            </>) : (<>
-              <Mail className="mr-3 h-6 w-6"/>
-              Send Message
-            </>)}
-        </ContactSubmitButton>
-      </form>
-    </div>);
-}