@devvistatech/devvista-kit 0.0.9 → 0.0.10

package/components/addOns/functional/ClassPopup.tsx

@@ -1,399 +1,399 @@
-'use client';
-
-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';
-
-interface ClassDetails {
-  id: string;
-  title: string;
-  time: string;
-  day: string;
-  ageGroup: string;
-}
-
-interface ClassPopupProps {
-  isOpen: boolean;
-  onClose: () => void;
-  classDetails: ClassDetails | null;
-}
-
-interface FormData {
-  name: string;
-  phone: string;
-  email: string;
-  information: string;
-  date: string;
-}
-
-const 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((val) => val.replace(/[-.\s()]/g, '').replace(/^1/, '')),
-  information: z.string().optional(),
-  date: z.string().optional(),
-});
-
-export const ClassPopup: React.FC<ClassPopupProps> = ({ isOpen, onClose, classDetails }) => {
-  const [currentStep, setCurrentStep] = useState(0);
-  const { toast } = useToast();
-
-  const {
-    register,
-    handleSubmit,
-    setValue,
-    watch,
-    reset,
-    trigger,
-    clearErrors,
-    formState: { errors, isSubmitting, dirtyFields },
-  } = useForm<FormData>({
-    resolver: zodResolver(formSchema),
-    mode: 'onBlur',
-    defaultValues: {
-      information: '',
-      name: '',
-      phone: '',
-      email: '',
-      date: '',
-    },
-  });
-
-  const formValues = watch();
-
-  useEffect(() => {
-    const event = new CustomEvent('modalStateChange', {
-      detail: { isOpen },
-    });
-    window.dispatchEvent(event);
-  }, [isOpen]);
-
-  const formatClassDetails = (details: ClassDetails): string => {
-    return `${details.title} on ${details.day} at ${details.time} for ${details.ageGroup}`;
-  };
-
-  useEffect(() => {
-    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(() => {
-    clearErrors();
-  }, [currentStep, clearErrors]);
-
-  const validateStep = async () => {
-    const stepFields = steps[currentStep].fields;
-    const isValid = await trigger(stepFields as any, { shouldFocus: true });
-    if (!isValid && stepFields.some((field) => dirtyFields[field as keyof FormData])) {
-      toast({
-        title: 'Validation Error',
-        description: 'Please complete all required fields correctly.',
-        duration: 3000,
-        variant: 'destructive',
-      });
-    }
-    return isValid;
-  };
-
-  const nextStep = async () => {
-    const isValid = await validateStep();
-    if (isValid || currentStep === 0) {
-      setCurrentStep(currentStep + 1);
-      clearErrors();
-    }
-  };
-
-  const previousStep = () => {
-    setCurrentStep(currentStep - 1);
-    clearErrors();
-  };
-
-  const onFormSubmit = async (data: FormData) => {
-    try {
-      const response = await fetch('/api/trial-request', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(data),
-      });
-
-      const result = await response.json();
-
-      if (!response.ok) {
-        const errorMessage =
-          result.error?.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();
-    } catch (error: any) {
-      console.error('Trial form submission error:', error);
-      toast({
-        title: 'Error',
-        description: error.message || 'Unable to submit request at this time',
-        duration: 3000,
-        variant: 'destructive',
-      });
-    }
-  };
-  
-  const 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={(e) => setValue('name', e.target.value)}
-                onBlur={() => 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 ${
-                  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={(e) => setValue('phone', e.target.value)}
-                onBlur={() => 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 ${
-                  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={(e) => setValue('email', e.target.value)}
-                onBlur={() => 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 ${
-                  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((_, index) => (
-                    <div
-                      key={index}
-                      className={`w-3 h-3 rounded-full ${
-                        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>
-  );
+'use client';
+
+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';
+
+interface ClassDetails {
+  id: string;
+  title: string;
+  time: string;
+  day: string;
+  ageGroup: string;
+}
+
+interface ClassPopupProps {
+  isOpen: boolean;
+  onClose: () => void;
+  classDetails: ClassDetails | null;
+}
+
+interface FormData {
+  name: string;
+  phone: string;
+  email: string;
+  information: string;
+  date: string;
+}
+
+const 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((val) => val.replace(/[-.\s()]/g, '').replace(/^1/, '')),
+  information: z.string().optional(),
+  date: z.string().optional(),
+});
+
+export const ClassPopup: React.FC<ClassPopupProps> = ({ isOpen, onClose, classDetails }) => {
+  const [currentStep, setCurrentStep] = useState(0);
+  const { toast } = useToast();
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    reset,
+    trigger,
+    clearErrors,
+    formState: { errors, isSubmitting, dirtyFields },
+  } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    mode: 'onBlur',
+    defaultValues: {
+      information: '',
+      name: '',
+      phone: '',
+      email: '',
+      date: '',
+    },
+  });
+
+  const formValues = watch();
+
+  useEffect(() => {
+    const event = new CustomEvent('modalStateChange', {
+      detail: { isOpen },
+    });
+    window.dispatchEvent(event);
+  }, [isOpen]);
+
+  const formatClassDetails = (details: ClassDetails): string => {
+    return `${details.title} on ${details.day} at ${details.time} for ${details.ageGroup}`;
+  };
+
+  useEffect(() => {
+    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(() => {
+    clearErrors();
+  }, [currentStep, clearErrors]);
+
+  const validateStep = async () => {
+    const stepFields = steps[currentStep].fields;
+    const isValid = await trigger(stepFields as any, { shouldFocus: true });
+    if (!isValid && stepFields.some((field) => dirtyFields[field as keyof FormData])) {
+      toast({
+        title: 'Validation Error',
+        description: 'Please complete all required fields correctly.',
+        duration: 3000,
+        variant: 'destructive',
+      });
+    }
+    return isValid;
+  };
+
+  const nextStep = async () => {
+    const isValid = await validateStep();
+    if (isValid || currentStep === 0) {
+      setCurrentStep(currentStep + 1);
+      clearErrors();
+    }
+  };
+
+  const previousStep = () => {
+    setCurrentStep(currentStep - 1);
+    clearErrors();
+  };
+
+  const onFormSubmit = async (data: FormData) => {
+    try {
+      const response = await fetch('/api/trial-request', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+
+      const result = await response.json();
+
+      if (!response.ok) {
+        const errorMessage =
+          result.error?.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();
+    } catch (error: any) {
+      console.error('Trial form submission error:', error);
+      toast({
+        title: 'Error',
+        description: error.message || 'Unable to submit request at this time',
+        duration: 3000,
+        variant: 'destructive',
+      });
+    }
+  };
+  
+  const 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={(e) => setValue('name', e.target.value)}
+                onBlur={() => 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 ${
+                  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={(e) => setValue('phone', e.target.value)}
+                onBlur={() => 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 ${
+                  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={(e) => setValue('email', e.target.value)}
+                onBlur={() => 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 ${
+                  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((_, index) => (
+                    <div
+                      key={index}
+                      className={`w-3 h-3 rounded-full ${
+                        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>
+  );
 };