@devvistatech/devvista-kit 0.0.9 → 0.0.10

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

@@ -0,0 +1,300 @@
+'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

@@ -0,0 +1,219 @@
+'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>);
+}