From 3ee5b096fe00ff4bb997c70743c60921c2231bee Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Mon, 11 Aug 2025 21:35:05 +0000 Subject: [PATCH 1/2] Add animations, toasts, and UI improvements to registration pages Co-authored-by: alexadevsrm --- src/app/(flagship)/alexaverse-v2/layout.tsx | 2 + src/app/(flagship)/alexaverse-v2/page.tsx | 60 +- .../alexaverse-v2/RegisterDebug.tsx | 699 ++++++++++-------- .../alexaverse-v2/RegisterHangman.tsx | 528 +++++++++---- .../alexaverse-v2/RegisterVlogit.tsx | 439 +++++++---- .../alexaverse-v2/RegisterWorkshop.tsx | 467 ++++++++---- 6 files changed, 1471 insertions(+), 724 deletions(-) diff --git a/src/app/(flagship)/alexaverse-v2/layout.tsx b/src/app/(flagship)/alexaverse-v2/layout.tsx index a0b6eb2..b5130f3 100644 --- a/src/app/(flagship)/alexaverse-v2/layout.tsx +++ b/src/app/(flagship)/alexaverse-v2/layout.tsx @@ -9,6 +9,7 @@ import { Inter, Montserrat } from "next/font/google"; +import { Toaster } from "@/components/ui/toaster"; const nunito = Nunito({ subsets: ["latin"], @@ -83,6 +84,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) {children} + ); diff --git a/src/app/(flagship)/alexaverse-v2/page.tsx b/src/app/(flagship)/alexaverse-v2/page.tsx index b7d92cc..beef735 100644 --- a/src/app/(flagship)/alexaverse-v2/page.tsx +++ b/src/app/(flagship)/alexaverse-v2/page.tsx @@ -1,5 +1,6 @@ "use client"; +import { motion } from "framer-motion"; import HeroSection from "@/components/alexaverse-v2/HeroSection"; import OurEvents from "@/components/alexaverse-v2/OurEvents"; // import Sponsers from "@/components/alexaverse-v2/Sponsers" @@ -7,13 +8,64 @@ import ContactUs from "@/components/alexaverse-v2/ContactUs" export default function AlexaVersePage() { return ( -
+ + {/* Animated background gradient */} + + + {/* Floating particles effect */} +
+ {[...Array(20)].map((_, i) => ( + + ))} +
+ -
+ + {/* */} -
-
+ + ); } diff --git a/src/components/alexaverse-v2/RegisterDebug.tsx b/src/components/alexaverse-v2/RegisterDebug.tsx index d5a2a75..15adb33 100644 --- a/src/components/alexaverse-v2/RegisterDebug.tsx +++ b/src/components/alexaverse-v2/RegisterDebug.tsx @@ -2,7 +2,9 @@ import React, { useEffect, useState } from "react"; import { HiMenu, HiX } from "react-icons/hi"; -import { registerForDebug, TeamRegistration, TeamMember, ApiResponse } from "@/lib/api"; +import { motion, AnimatePresence } from "framer-motion"; +import { useToast } from "@/components/ui/use-toast"; +import { registerForDebug, IndividualRegistration, ApiResponse } from "@/lib/api"; const RegisterDebug: React.FC = () => { const [mounted, setMounted] = useState(false); @@ -10,52 +12,31 @@ const RegisterDebug: React.FC = () => { const [isSubmitting, setIsSubmitting] = useState(false); const [submitMessage, setSubmitMessage] = useState(""); const [submitSuccess, setSubmitSuccess] = useState(null); - const [formData, setFormData] = useState({ - teamName: "", - teamMembers: [ - { name: "", registrationNumber: "", srmMailId: "", phoneNumber: "" }, - { name: "", registrationNumber: "", srmMailId: "", phoneNumber: "" }, - { name: "", registrationNumber: "", srmMailId: "", phoneNumber: "" }, - { name: "", registrationNumber: "", srmMailId: "", phoneNumber: "" }, - { name: "", registrationNumber: "", srmMailId: "", phoneNumber: "" } - ] + const [formData, setFormData] = useState({ + name: "", + registrationNumber: "", + srmMailId: "", + phoneNumber: "" }); const [errors, setErrors] = useState>({}); + const { toast } = useToast(); useEffect(() => { setMounted(true); }, []); - const handleTeamNameChange = (e: React.ChangeEvent) => { - const { value } = e.target; + const handleInputChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; setFormData(prev => ({ ...prev, - teamName: value + [name]: value })); // Clear error when user starts typing - if (errors.teamName) { + if (errors[name]) { setErrors(prev => ({ ...prev, - teamName: "" - })); - } - }; - - const handleMemberChange = (memberIndex: number, field: keyof TeamMember, value: string) => { - setFormData(prev => ({ - ...prev, - teamMembers: prev.teamMembers.map((member, index) => - index === memberIndex ? { ...member, [field]: value } : member - ) - })); - - // Clear error when user starts typing - const errorKey = `teamMembers.${memberIndex}.${field}`; - if (errors[errorKey]) { - setErrors(prev => ({ - ...prev, - [errorKey]: "" + [name]: "" })); } }; @@ -67,50 +48,38 @@ const RegisterDebug: React.FC = () => { setSubmitSuccess(null); setErrors({}); - // Filter out empty team members (only include members with at least a name) - const validMembers = formData.teamMembers.filter(member => member.name.trim() !== ""); - - // Validate team size (3-5 members for Debug) - if (validMembers.length < 3) { - setSubmitSuccess(false); - setSubmitMessage("Team must have at least 3 members."); - setIsSubmitting(false); - return; - } - - if (validMembers.length > 5) { - setSubmitSuccess(false); - setSubmitMessage("Team can have maximum 5 members."); - setIsSubmitting(false); - return; - } - - const submissionData: TeamRegistration = { - teamName: formData.teamName, - teamMembers: validMembers - }; - try { - const response: ApiResponse = await registerForDebug(submissionData); + const response: ApiResponse = await registerForDebug(formData); if (response.success) { setSubmitSuccess(true); setSubmitMessage(response.message || 'Registration successful!'); + + // Show success toast + toast({ + title: "πŸŽ‰ Registration Successful!", + description: "You have been successfully registered for Debug!", + variant: "default", + }); + // Reset form on success setFormData({ - teamName: "", - teamMembers: [ - { name: "", registrationNumber: "", srmMailId: "", phoneNumber: "" }, - { name: "", registrationNumber: "", srmMailId: "", phoneNumber: "" }, - { name: "", registrationNumber: "", srmMailId: "", phoneNumber: "" }, - { name: "", registrationNumber: "", srmMailId: "", phoneNumber: "" }, - { name: "", registrationNumber: "", srmMailId: "", phoneNumber: "" } - ] + name: "", + registrationNumber: "", + srmMailId: "", + phoneNumber: "" }); } else { setSubmitSuccess(false); setSubmitMessage(response.message || 'Registration failed'); + // Show error toast + toast({ + title: "❌ Registration Failed", + description: response.message || "Something went wrong. Please try again.", + variant: "destructive", + }); + // Handle field-specific errors if (response.errors) { const fieldErrors: Record = {}; @@ -123,128 +92,182 @@ const RegisterDebug: React.FC = () => { } catch (error) { setSubmitSuccess(false); setSubmitMessage("An unexpected error occurred. Please try again."); + + // Show error toast + toast({ + title: "❌ Network Error", + description: "Please check your connection and try again.", + variant: "destructive", + }); } finally { setIsSubmitting(false); } }; if (!mounted) return null; - + return ( <> - {/* Navigation remains the same */} - + - {isMobileMenuOpen && ( - - )} +
+ {[ + { href: "/alexaverse-v2", text: "HOME" }, + { href: "/alexaverse-v2#events", text: "OUR EVENTS" }, + { href: "#contact", text: "CONTACT US" } + ].map((link, index) => ( + setMobileMenuOpen(false)} + className="text-white font-audiowide text-4xl transition-colors" + > + {link.text} + + ))} +
+ + + Designed and Developed by{" "} + + Alexa Developers SRM. + + + + )} + -
- {/* Event display section remains the same */} -
-
+ + -
+
VENUE TIME DATE +
MINI HALL 2 +
8:00 AM - 5:00 PM
-
05-09-2025
+
03-09-2025 - 05-09-2025
+
-
-
+ { >

EVENT

-

DEBUG THE CAMPUS

+

DEBUG

-
-

-

Discover and Decrypt:

- Classic treasure hunt with a modern flavor! +
+

+ Find the Bug, Fix the Code: Debug Your Way to Victory!

-
- + -
{ className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[6.24vw] h-[1.92vw] object-contain" />
-
-
+
-
-
+

- Find the numerous QR codes hidden around and debug the puzzles with your teammates. Be quick because the time is ticking! + Put your problem-solving skills to the test! Find and fix bugs in code snippets to prove you're the ultimate debug master!

-
-
+ + -

+ {/* Heading */} + Registration Form -

+ {/* Success/Error Message */} - {submitMessage && ( -
- {submitMessage} -
- )} + + {submitMessage && ( + + {submitMessage} + + )} + -
- {/* Team Name Field */} -
-

- Team Information -

-
+ +
+ + - - {errors.teamName &&

{errors.teamName}

} -
-
- - {/* Team Members */} - {[1, 2, 3, 4, 5].map((studentNum) => ( -
-

- Student {studentNum} {studentNum <= 3 ? * : "(Optional)"} -

-
-
- - handleMemberChange(studentNum - 1, 'name', e.target.value)} - required={studentNum <= 3} - pattern="^[a-zA-Z\s]+$" - title="Only letters and spaces allowed" - placeholder="Name" - className={`w-full px-4 py-4 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500 font-inter placeholder-gray-500 text-black bg-white ${ - errors[`teamMembers.${studentNum - 1}.name`] ? 'border-red-500' : 'border-gray-400' - }`} - /> - {errors[`teamMembers.${studentNum - 1}.name`] && -

{errors[`teamMembers.${studentNum - 1}.name`]}

} -
+ {errors.name} + + )} + + -
- - handleMemberChange(studentNum - 1, 'registrationNumber', e.target.value)} - required={studentNum <= 3} - pattern="^(?i)RA\d{13}$" - placeholder="RAXXXXXXXXXXXXX" - title="Must start with RA followed by 13 digits" - className={`w-full px-4 py-4 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500 font-inter placeholder-gray-500 text-black bg-white ${ - errors[`teamMembers.${studentNum - 1}.registrationNumber`] ? 'border-red-500' : 'border-gray-400' - }`} - /> - {errors[`teamMembers.${studentNum - 1}.registrationNumber`] && -

{errors[`teamMembers.${studentNum - 1}.registrationNumber`]}

} -
+ {errors.registrationNumber} + + )} + + -
- -
- - +91  - - handleMemberChange(studentNum - 1, 'phoneNumber', e.target.value)} - required={studentNum <= 3} - pattern="^[0-9]{10}$" - placeholder="012 345 6789" - title="Enter a valid 10-digit phone number" - className="flex-1 px-3 py-4 text-black placeholder-gray-500 bg-white focus:outline-none font-inter" - /> -
- {errors[`teamMembers.${studentNum - 1}.phoneNumber`] && -

{errors[`teamMembers.${studentNum - 1}.phoneNumber`]}

} -
+ {errors.phoneNumber} + + )} + + -
- - handleMemberChange(studentNum - 1, 'srmMailId', e.target.value)} - required={studentNum <= 3} - pattern="^[a-zA-Z0-9._%+-]+@srmist\\.edu\\.in$" - placeholder="xyz@srmist.edu.in" - title="Email must be an SRMIST ID ending with @srmist.edu.in" - className={`w-full px-4 py-4 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500 font-inter placeholder-gray-500 text-black bg-white ${ - errors[`teamMembers.${studentNum - 1}.srmMailId`] ? 'border-red-500' : 'border-gray-400' - }`} - /> - {errors[`teamMembers.${studentNum - 1}.srmMailId`] && -

{errors[`teamMembers.${studentNum - 1}.srmMailId`]}

} -
-
-
- ))} - -
-

Team Size: 3-5 members

-

First 3 members are required, members 4-5 are optional

+ {errors.srmMailId} + + )} + +
- - -
+ {isSubmitting ? ( + <> + + Registering... + + ) : ( + <> + Register + + + )} + + + ); }; diff --git a/src/components/alexaverse-v2/RegisterHangman.tsx b/src/components/alexaverse-v2/RegisterHangman.tsx index 0a3c6f8..63bc913 100644 --- a/src/components/alexaverse-v2/RegisterHangman.tsx +++ b/src/components/alexaverse-v2/RegisterHangman.tsx @@ -2,6 +2,8 @@ import React, { useEffect, useState } from "react"; import { HiMenu, HiX } from "react-icons/hi"; +import { motion, AnimatePresence } from "framer-motion"; +import { useToast } from "@/components/ui/use-toast"; import { registerForHangman, TeamRegistration, TeamMember, ApiResponse } from "@/lib/api"; const RegisterHangman: React.FC = () => { @@ -20,6 +22,7 @@ const RegisterHangman: React.FC = () => { ] }); const [errors, setErrors] = useState>({}); + const { toast } = useToast(); useEffect(() => { setMounted(true); @@ -73,6 +76,14 @@ const RegisterHangman: React.FC = () => { if (validMembers.length < 3) { setSubmitSuccess(false); setSubmitMessage("Team must have at least 3 members."); + + // Show error toast + toast({ + title: "❌ Team Size Error", + description: "Team must have at least 3 members.", + variant: "destructive", + }); + setIsSubmitting(false); return; } @@ -80,6 +91,14 @@ const RegisterHangman: React.FC = () => { if (validMembers.length > 4) { setSubmitSuccess(false); setSubmitMessage("Team can have maximum 4 members."); + + // Show error toast + toast({ + title: "❌ Team Size Error", + description: "Team can have maximum 4 members.", + variant: "destructive", + }); + setIsSubmitting(false); return; } @@ -95,6 +114,14 @@ const RegisterHangman: React.FC = () => { if (response.success) { setSubmitSuccess(true); setSubmitMessage(response.message || 'Registration successful!'); + + // Show success toast + toast({ + title: "πŸŽ‰ Registration Successful!", + description: "Your team has been successfully registered for Hangman!", + variant: "default", + }); + // Reset form on success setFormData({ teamName: "", @@ -109,6 +136,13 @@ const RegisterHangman: React.FC = () => { setSubmitSuccess(false); setSubmitMessage(response.message || 'Registration failed'); + // Show error toast + toast({ + title: "❌ Registration Failed", + description: response.message || "Something went wrong. Please try again.", + variant: "destructive", + }); + // Handle field-specific errors if (response.errors) { const fieldErrors: Record = {}; @@ -121,118 +155,164 @@ const RegisterHangman: React.FC = () => { } catch (error) { setSubmitSuccess(false); setSubmitMessage("An unexpected error occurred. Please try again."); + + // Show error toast + toast({ + title: "❌ Network Error", + description: "Please check your connection and try again.", + variant: "destructive", + }); } finally { setIsSubmitting(false); } }; if (!mounted) return null; - + return ( <> - {/* Navigation remains the same */} - + - {isMobileMenuOpen && ( - - )} +
+ {[ + { href: "/alexaverse-v2", text: "HOME" }, + { href: "/alexaverse-v2#events", text: "OUR EVENTS" }, + { href: "#contact", text: "CONTACT US" } + ].map((link, index) => ( + setMobileMenuOpen(false)} + className="text-white font-audiowide text-4xl transition-colors" + > + {link.text} + + ))} +
-
+ Designed and Developed by{" "} + + Alexa Developers SRM. + + + + )} + + + - {/* Event display section remains the same */} -
+ {/* Event display section */} + -
-
+
VENUE TIME DATE @@ -244,11 +324,13 @@ const RegisterHangman: React.FC = () => {
8:00 AM - 5:00 PM
-
05-09-2025
+
03-09-2025 - 05-09-2025
-
-
+ {

- Create or Cremate? Your life is on the line… + Guess the Word, Save the Man: Voice-Powered Word Challenge!

-
- + -
{ className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[6.24vw] h-[1.92vw] object-contain" />
- -
+
-
-
+

- Unleash your brilliance across 3 creative challenges along with your team. Do you have it in you to make it till the end? We hope so. + Test your vocabulary and quick thinking in this classic word-guessing game with a modern voice-controlled twist!

-
- + + -

- Registration Form -

+ {/* Heading */} + + Team Registration Form + {/* Success/Error Message */} - {submitMessage && ( -
- {submitMessage} -
- )} + + {submitMessage && ( + + {submitMessage} + + )} + -
+ {/* Team Name Field */} -
+

Team Information

- { pattern="^[a-zA-Z0-9\s]+$" title="Only letters, numbers, and spaces allowed (minimum 3 characters)" placeholder="Enter team name" - className={`w-full px-4 py-4 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500 font-inter placeholder-gray-500 text-black bg-white ${ - errors.teamName ? 'border-red-500' : 'border-gray-400' + className={`w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 ${ + errors.teamName ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-purple-300' }`} /> - {errors.teamName &&

{errors.teamName}

} + + {errors.teamName && ( + + {errors.teamName} + + )} +
-
+ {/* Team Members */} {[1, 2, 3, 4].map((studentNum) => ( -
+

Student {studentNum} {studentNum <= 3 ? * : "(Optional)"}

-
+ - { required={studentNum <= 3} pattern="^[a-zA-Z\s]+$" title="Only letters and spaces allowed" - placeholder="Name" - className={`w-full px-4 py-4 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500 font-inter placeholder-gray-500 text-black bg-white ${ - errors[`teamMembers.${studentNum - 1}.name`] ? 'border-red-500' : 'border-gray-400' + placeholder="Enter full name" + className={`w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 ${ + errors[`teamMembers.${studentNum - 1}.name`] ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-purple-300' }`} /> - {errors[`teamMembers.${studentNum - 1}.name`] && -

{errors[`teamMembers.${studentNum - 1}.name`]}

} -
+ + {errors[`teamMembers.${studentNum - 1}.name`] && ( + + {errors[`teamMembers.${studentNum - 1}.name`]} + + )} + + -
+ - { pattern="^(?i)RA\d{13}$" placeholder="RAXXXXXXXXXXXXX" title="Must start with RA followed by 13 digits" - className={`w-full px-4 py-4 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500 font-inter placeholder-gray-500 text-black bg-white ${ - errors[`teamMembers.${studentNum - 1}.registrationNumber`] ? 'border-red-500' : 'border-gray-400' + className={`w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 ${ + errors[`teamMembers.${studentNum - 1}.registrationNumber`] ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-purple-300' }`} /> - {errors[`teamMembers.${studentNum - 1}.registrationNumber`] && -

{errors[`teamMembers.${studentNum - 1}.registrationNumber`]}

} -
+ + {errors[`teamMembers.${studentNum - 1}.registrationNumber`] && ( + + {errors[`teamMembers.${studentNum - 1}.registrationNumber`]} + + )} + + -
+ -
- + + +91  { pattern="^[0-9]{10}$" placeholder="012 345 6789" title="Enter a valid 10-digit phone number" - className="flex-1 px-3 py-4 text-black placeholder-gray-500 bg-white focus:outline-none font-inter" + className="flex-1 px-3 py-4 text-black placeholder-gray-500 bg-transparent focus:outline-none font-inter" /> -
- {errors[`teamMembers.${studentNum - 1}.phoneNumber`] && -

{errors[`teamMembers.${studentNum - 1}.phoneNumber`]}

} -
+ + + {errors[`teamMembers.${studentNum - 1}.phoneNumber`] && ( + + {errors[`teamMembers.${studentNum - 1}.phoneNumber`]} + + )} + + -
+ - { pattern="^[a-zA-Z0-9._%+-]+@srmist\\.edu\\.in$" placeholder="xyz@srmist.edu.in" title="Email must be an SRMIST ID ending with @srmist.edu.in" - className={`w-full px-4 py-4 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500 font-inter placeholder-gray-500 text-black bg-white ${ - errors[`teamMembers.${studentNum - 1}.srmMailId`] ? 'border-red-500' : 'border-gray-400' + className={`w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 ${ + errors[`teamMembers.${studentNum - 1}.srmMailId`] ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-purple-300' }`} /> - {errors[`teamMembers.${studentNum - 1}.srmMailId`] && -

{errors[`teamMembers.${studentNum - 1}.srmMailId`]}

} -
+ + {errors[`teamMembers.${studentNum - 1}.srmMailId`] && ( + + {errors[`teamMembers.${studentNum - 1}.srmMailId`]} + + )} + +
-
+ ))} -
+

Team Size: 3-4 members

First 3 members are required, 4th member is optional

-
+ - - -
+ {isSubmitting ? ( + <> + + Registering Team... + + ) : ( + <> + Register Team + + + )} + + + ); }; diff --git a/src/components/alexaverse-v2/RegisterVlogit.tsx b/src/components/alexaverse-v2/RegisterVlogit.tsx index 252746a..713a176 100644 --- a/src/components/alexaverse-v2/RegisterVlogit.tsx +++ b/src/components/alexaverse-v2/RegisterVlogit.tsx @@ -2,6 +2,8 @@ import React, { useEffect, useState } from "react"; import { HiMenu, HiX } from "react-icons/hi"; +import { motion, AnimatePresence } from "framer-motion"; +import { useToast } from "@/components/ui/use-toast"; import { registerForVlogit, IndividualRegistration, ApiResponse } from "@/lib/api"; const RegisterVlogit: React.FC = () => { @@ -17,6 +19,7 @@ const RegisterVlogit: React.FC = () => { phoneNumber: "" }); const [errors, setErrors] = useState>({}); + const { toast } = useToast(); useEffect(() => { setMounted(true); @@ -51,6 +54,14 @@ const RegisterVlogit: React.FC = () => { if (response.success) { setSubmitSuccess(true); setSubmitMessage(response.message || 'Registration successful!'); + + // Show success toast + toast({ + title: "πŸŽ‰ Registration Successful!", + description: "You have been successfully registered for VLOG IT!", + variant: "default", + }); + // Reset form on success setFormData({ name: "", @@ -62,6 +73,13 @@ const RegisterVlogit: React.FC = () => { setSubmitSuccess(false); setSubmitMessage(response.message || 'Registration failed'); + // Show error toast + toast({ + title: "❌ Registration Failed", + description: response.message || "Something went wrong. Please try again.", + variant: "destructive", + }); + // Handle field-specific errors if (response.errors) { const fieldErrors: Record = {}; @@ -74,6 +92,13 @@ const RegisterVlogit: React.FC = () => { } catch (error) { setSubmitSuccess(false); setSubmitMessage("An unexpected error occurred. Please try again."); + + // Show error toast + toast({ + title: "❌ Network Error", + description: "Please check your connection and try again.", + variant: "destructive", + }); } finally { setIsSubmitting(false); } @@ -83,102 +108,142 @@ const RegisterVlogit: React.FC = () => { return ( <> - {/* Navigation remains the same */} - + - {isMobileMenuOpen && ( - - )} +
+ {[ + { href: "/alexaverse-v2", text: "HOME" }, + { href: "/alexaverse-v2#events", text: "OUR EVENTS" }, + { href: "#contact", text: "CONTACT US" } + ].map((link, index) => ( + setMobileMenuOpen(false)} + className="text-white font-audiowide text-4xl transition-colors" + > + {link.text} + + ))} +
-
+ Designed and Developed by{" "} + + Alexa Developers SRM. + + + + )} + + + - {/* Event display section remains the same */} -
+ {/* Event display section */} + -
{
03-09-2025 - 05-09-2025
-
-
+ { Record and Roll: Capture the Essence of Alexaverse!

- - + -
{ className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[6.24vw] h-[1.92vw] object-contain" />
- -
+ { transform: 'translate(-50%, -50%)' }} >
- -
+ {

Eager to flex your filmmaking skills? Capture the chaos, edit it clean, and deliver a masterpiece that makes us say 'Absolute Cinema' to win big!

-
- + + - {/* πŸ”– Heading */} -

+ {/* Heading */} + Registration Form -

+ {/* Success/Error Message */} - {submitMessage && ( -
- {submitMessage} -
- )} + + {submitMessage && ( + + {submitMessage} + + )} + -
+
-
+ - { required pattern="^[a-zA-Z\s]+$" title="Only letters and spaces allowed" - placeholder="Name" - className={`w-full px-4 py-4 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500 font-inter placeholder-gray-500 text-black bg-white ${ - errors.name ? 'border-red-500' : 'border-gray-400' + placeholder="Enter your full name" + className={`w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 ${ + errors.name ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-purple-300' }`} /> - {errors.name &&

{errors.name}

} -
+ + {errors.name && ( + + {errors.name} + + )} + + -
+ - { pattern="^(?i)RA\d{13}$" placeholder="RAXXXXXXXXXXXXX" title="Must start with RA followed by 13 digits" - className={`w-full px-4 py-4 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500 font-inter placeholder-gray-500 text-black bg-white ${ - errors.registrationNumber ? 'border-red-500' : 'border-gray-400' + className={`w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 ${ + errors.registrationNumber ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-purple-300' }`} /> - {errors.registrationNumber &&

{errors.registrationNumber}

} -
+ + {errors.registrationNumber && ( + + {errors.registrationNumber} + + )} + + -
+ -
- + + +91  { pattern="^[0-9]{10}$" placeholder="012 345 6789" title="Enter a valid 10-digit phone number" - className="flex-1 px-3 py-4 text-black placeholder-gray-500 bg-white focus:outline-none font-inter" + className="flex-1 px-3 py-4 text-black placeholder-gray-500 bg-transparent focus:outline-none font-inter" /> -
- {errors.phoneNumber &&

{errors.phoneNumber}

} -
+ + + {errors.phoneNumber && ( + + {errors.phoneNumber} + + )} + + -
+ - { pattern="^[a-zA-Z0-9._%+-]+@srmist\\.edu\\.in$" placeholder="xyz@srmist.edu.in" title="Email must be an SRMIST ID ending with @srmist.edu.in" - className={`w-full px-4 py-4 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500 font-inter placeholder-gray-500 text-black bg-white ${ - errors.srmMailId ? 'border-red-500' : 'border-gray-400' + className={`w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 ${ + errors.srmMailId ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-purple-300' }`} /> - {errors.srmMailId &&

{errors.srmMailId}

} -
+ + {errors.srmMailId && ( + + {errors.srmMailId} + + )} + +
- - -
+ {isSubmitting ? ( + <> + + Registering... + + ) : ( + <> + Register + + + )} + + + ); }; diff --git a/src/components/alexaverse-v2/RegisterWorkshop.tsx b/src/components/alexaverse-v2/RegisterWorkshop.tsx index 9162c7b..6a86767 100644 --- a/src/components/alexaverse-v2/RegisterWorkshop.tsx +++ b/src/components/alexaverse-v2/RegisterWorkshop.tsx @@ -2,6 +2,8 @@ import React, { useEffect, useState } from "react"; import { HiMenu, HiX } from "react-icons/hi"; +import { motion, AnimatePresence } from "framer-motion"; +import { useToast } from "@/components/ui/use-toast"; import { registerForWorkshop, IndividualRegistration, ApiResponse } from "@/lib/api"; const RegisterWorkshop: React.FC = () => { @@ -17,13 +19,12 @@ const RegisterWorkshop: React.FC = () => { phoneNumber: "" }); const [errors, setErrors] = useState>({}); + const { toast } = useToast(); useEffect(() => { setMounted(true); }, []); - - const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setFormData(prev => ({ @@ -53,6 +54,14 @@ const RegisterWorkshop: React.FC = () => { if (response.success) { setSubmitSuccess(true); setSubmitMessage(response.message || 'Registration successful!'); + + // Show success toast + toast({ + title: "πŸŽ‰ Registration Successful!", + description: "You have been successfully registered for the Workshop!", + variant: "default", + }); + // Reset form on success setFormData({ name: "", @@ -64,6 +73,13 @@ const RegisterWorkshop: React.FC = () => { setSubmitSuccess(false); setSubmitMessage(response.message || 'Registration failed'); + // Show error toast + toast({ + title: "❌ Registration Failed", + description: response.message || "Something went wrong. Please try again.", + variant: "destructive", + }); + // Handle field-specific errors if (response.errors) { const fieldErrors: Record = {}; @@ -76,6 +92,13 @@ const RegisterWorkshop: React.FC = () => { } catch (error) { setSubmitSuccess(false); setSubmitMessage("An unexpected error occurred. Please try again."); + + // Show error toast + toast({ + title: "❌ Network Error", + description: "Please check your connection and try again.", + variant: "destructive", + }); } finally { setIsSubmitting(false); } @@ -85,107 +108,148 @@ const RegisterWorkshop: React.FC = () => { return ( <> - + - {isMobileMenuOpen && ( - - )} +
+ {[ + { href: "/alexaverse-v2", text: "HOME" }, + { href: "/alexaverse-v2#events", text: "OUR EVENTS" }, + { href: "#contact", text: "CONTACT US" } + ].map((link, index) => ( + setMobileMenuOpen(false)} + className="text-white font-audiowide text-4xl transition-colors" + > + {link.text} + + ))} +
+ + + Designed and Developed by{" "} + + Alexa Developers SRM. + + + + )} + -
-
+ {/* Event display section */} + -
-
+
VENUE TIME DATE @@ -197,11 +261,13 @@ const RegisterWorkshop: React.FC = () => {
8:00 AM - 5:00 PM
-
04-09-2025
+
03-09-2025 - 05-09-2025
-
-
+ {

- Wisdom and Wonder: Tune in to learn from the best! + Learn, Build, and Innovate with Alexa Skills!

-
- + e.preventDefault()} - draggable={false} + className="absolute top-[4.8vw] left-[-14.4vw] w-[76.8vw] h-[19.8vw] object-contain rounded-[2.1vw]" /> -
Rewind Button e.preventDefault()} - draggable={false} + className="absolute left-[0.96vw] top-1/2 -translate-y-1/2 w-[1.92vw] h-[2.52vw] object-contain invert" /> Fast Forward Button e.preventDefault()} - draggable={false} + className="absolute left-[15.96vw] top-1/2 -translate-y-1/2 w-[1.92vw] h-[2.52vw] object-contain invert" />
{ Play Button e.preventDefault()} - draggable={false} + className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[6.24vw] h-[1.92vw] object-contain" />
-
-
+
-
-
+

- An immersive journey led by two distinct speakers, delivering the most valuable insights from the ever-evolving realm of Generative AI. + Ready to dive into the world of Alexa development? Join our hands-on workshop and learn to build amazing voice experiences!

-
- + + -

+ {/* Heading */} + Registration Form -

+ {/* Success/Error Message */} - {submitMessage && ( -
- {submitMessage} -
- )} + + {submitMessage && ( + + {submitMessage} + + )} + -
+
-
+ - { required pattern="^[a-zA-Z\s]+$" title="Only letters and spaces allowed" - placeholder="Name" - className={`w-full px-4 py-4 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500 font-inter placeholder-gray-500 text-black bg-white ${ - errors.name ? 'border-red-500' : 'border-gray-400' + placeholder="Enter your full name" + className={`w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 ${ + errors.name ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-purple-300' }`} /> - {errors.name &&

{errors.name}

} -
+ + {errors.name && ( + + {errors.name} + + )} + + -
+ - { pattern="^(?i)RA\d{13}$" placeholder="RAXXXXXXXXXXXXX" title="Must start with RA followed by 13 digits" - className={`w-full px-4 py-4 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500 font-inter placeholder-gray-500 text-black bg-white ${ - errors.registrationNumber ? 'border-red-500' : 'border-gray-400' + className={`w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 ${ + errors.registrationNumber ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-purple-300' }`} /> - {errors.registrationNumber &&

{errors.registrationNumber}

} -
+ + {errors.registrationNumber && ( + + {errors.registrationNumber} + + )} + + -
+ -
- + + +91  { pattern="^[0-9]{10}$" placeholder="012 345 6789" title="Enter a valid 10-digit phone number" - className="flex-1 px-3 py-4 text-black placeholder-gray-500 bg-white focus:outline-none font-inter" + className="flex-1 px-3 py-4 text-black placeholder-gray-500 bg-transparent focus:outline-none font-inter" /> -
- {errors.phoneNumber &&

{errors.phoneNumber}

} -
+ + + {errors.phoneNumber && ( + + {errors.phoneNumber} + + )} + + -
+ - { pattern="^[a-zA-Z0-9._%+-]+@srmist\\.edu\\.in$" placeholder="xyz@srmist.edu.in" title="Email must be an SRMIST ID ending with @srmist.edu.in" - className={`w-full px-4 py-4 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500 font-inter placeholder-gray-500 text-black bg-white ${ - errors.srmMailId ? 'border-red-500' : 'border-gray-400' + className={`w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 ${ + errors.srmMailId ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-purple-300' }`} /> - {errors.srmMailId &&

{errors.srmMailId}

} -
+ + {errors.srmMailId && ( + + {errors.srmMailId} + + )} + +
- - -
+ {isSubmitting ? ( + <> + + Registering... + + ) : ( + <> + Register + + + )} + + + ); }; From add4d231f8f70e56af7496fd8e12052c90ee7fb0 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Mon, 11 Aug 2025 21:47:07 +0000 Subject: [PATCH 2/2] Refactor registration components with enhanced UI and team registration Co-authored-by: alexadevsrm --- .../alexaverse-v2/RegisterDebug.tsx | 644 ++++++++++++------ .../alexaverse-v2/RegisterHangman.tsx | 636 +++++++++-------- .../alexaverse-v2/RegisterVlogit.tsx | 306 +++++++-- .../alexaverse-v2/RegisterWorkshop.tsx | 331 +++++++-- 4 files changed, 1307 insertions(+), 610 deletions(-) diff --git a/src/components/alexaverse-v2/RegisterDebug.tsx b/src/components/alexaverse-v2/RegisterDebug.tsx index 15adb33..543fa3e 100644 --- a/src/components/alexaverse-v2/RegisterDebug.tsx +++ b/src/components/alexaverse-v2/RegisterDebug.tsx @@ -4,7 +4,7 @@ import React, { useEffect, useState } from "react"; import { HiMenu, HiX } from "react-icons/hi"; import { motion, AnimatePresence } from "framer-motion"; import { useToast } from "@/components/ui/use-toast"; -import { registerForDebug, IndividualRegistration, ApiResponse } from "@/lib/api"; +import { registerForDebug, TeamRegistration, TeamMember, ApiResponse } from "@/lib/api"; const RegisterDebug: React.FC = () => { const [mounted, setMounted] = useState(false); @@ -12,11 +12,15 @@ const RegisterDebug: React.FC = () => { const [isSubmitting, setIsSubmitting] = useState(false); const [submitMessage, setSubmitMessage] = useState(""); const [submitSuccess, setSubmitSuccess] = useState(null); - const [formData, setFormData] = useState({ - name: "", - registrationNumber: "", - srmMailId: "", - phoneNumber: "" + const [formData, setFormData] = useState({ + teamName: "", + teamMembers: [ + { name: "", registrationNumber: "", srmMailId: "", phoneNumber: "" }, + { name: "", registrationNumber: "", srmMailId: "", phoneNumber: "" }, + { name: "", registrationNumber: "", srmMailId: "", phoneNumber: "" }, + { name: "", registrationNumber: "", srmMailId: "", phoneNumber: "" }, + { name: "", registrationNumber: "", srmMailId: "", phoneNumber: "" } + ] }); const [errors, setErrors] = useState>({}); const { toast } = useToast(); @@ -25,18 +29,33 @@ const RegisterDebug: React.FC = () => { setMounted(true); }, []); - const handleInputChange = (e: React.ChangeEvent) => { - const { name, value } = e.target; + const handleTeamNameChange = (e: React.ChangeEvent) => { setFormData(prev => ({ ...prev, - [name]: value + teamName: e.target.value })); - // Clear error when user starts typing - if (errors[name]) { + if (errors.teamName) { setErrors(prev => ({ ...prev, - [name]: "" + teamName: "" + })); + } + }; + + const handleMemberChange = (index: number, field: keyof TeamMember, value: string) => { + setFormData(prev => ({ + ...prev, + teamMembers: prev.teamMembers.map((member, i) => + i === index ? { ...member, [field]: value } : member + ) + })); + + const errorKey = `member${index}${field.charAt(0).toUpperCase() + field.slice(1)}`; + if (errors[errorKey]) { + setErrors(prev => ({ + ...prev, + [errorKey]: "" })); } }; @@ -48,26 +67,61 @@ const RegisterDebug: React.FC = () => { setSubmitSuccess(null); setErrors({}); + // Client-side validation + const filledMembers = formData.teamMembers.filter(member => + member.name && member.registrationNumber && member.srmMailId && member.phoneNumber + ); + + if (filledMembers.length < 3) { + toast({ + title: "❌ Team Size Error", + description: "You need at least 3 team members to register.", + variant: "destructive", + }); + setIsSubmitting(false); + return; + } + + if (filledMembers.length > 5) { + toast({ + title: "❌ Team Size Error", + description: "You can have maximum 5 team members.", + variant: "destructive", + }); + setIsSubmitting(false); + return; + } + + // Create submission data with only filled members + const submissionData: TeamRegistration = { + teamName: formData.teamName, + teamMembers: filledMembers + }; + try { - const response: ApiResponse = await registerForDebug(formData); + const response: ApiResponse = await registerForDebug(submissionData); if (response.success) { setSubmitSuccess(true); - setSubmitMessage(response.message || 'Registration successful!'); + setSubmitMessage(response.message || 'Team registration successful!'); // Show success toast toast({ - title: "πŸŽ‰ Registration Successful!", - description: "You have been successfully registered for Debug!", + title: "πŸŽ‰ Team Registration Successful!", + description: "Your team has been successfully registered for DEBUG!", variant: "default", }); // Reset form on success setFormData({ - name: "", - registrationNumber: "", - srmMailId: "", - phoneNumber: "" + teamName: "", + teamMembers: [ + { name: "", registrationNumber: "", srmMailId: "", phoneNumber: "" }, + { name: "", registrationNumber: "", srmMailId: "", phoneNumber: "" }, + { name: "", registrationNumber: "", srmMailId: "", phoneNumber: "" }, + { name: "", registrationNumber: "", srmMailId: "", phoneNumber: "" }, + { name: "", registrationNumber: "", srmMailId: "", phoneNumber: "" } + ] }); } else { setSubmitSuccess(false); @@ -105,55 +159,127 @@ const RegisterDebug: React.FC = () => { }; if (!mounted) return null; - + return ( <> + {/* Animated Background Particles */} +
+ {[...Array(50)].map((_, i) => ( + + ))} +
+ + {/* Floating Geometric Shapes */} +
+ {[...Array(8)].map((_, i) => ( + +
+ + ))} +
+ + {/* Navigation */}
- Home + Home + - Events + Events + - Contact Us + Contact Us +
setMobileMenuOpen(true)} @@ -177,7 +303,7 @@ const RegisterDebug: React.FC = () => { animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0 }} transition={{ delay: 0.1 }} - whileHover={{ scale: 1.1 }} + whileHover={{ scale: 1.1, rotate: 90 }} whileTap={{ scale: 0.9 }} className="absolute top-6 right-6 text-white text-4xl" onClick={() => setMobileMenuOpen(false)} @@ -198,7 +324,7 @@ const RegisterDebug: React.FC = () => { animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ delay: index * 0.1 }} - whileHover={{ scale: 1.05, color: "#a855f7" }} + whileHover={{ scale: 1.05, color: "#f97316" }} href={link.href} onClick={() => setMobileMenuOpen(false)} className="text-white font-audiowide text-4xl transition-colors" @@ -229,21 +355,37 @@ const RegisterDebug: React.FC = () => { animate={{ opacity: 1 }} transition={{ duration: 0.8 }} id="register-debug" - className="w-full min-h-screen text-white flex flex-col items-center justify-center px-4 py-16" + className="relative w-full min-h-screen text-white flex flex-col items-center justify-center px-4 py-16 z-10" > + {/* Animated Background Gradient */} + + {/* Event display section */} {
{

- Find the Bug, Fix the Code: Debug Your Way to Victory! + Find the Bug: Master the Art of Problem Solving!

@@ -289,12 +431,12 @@ const RegisterDebug: React.FC = () => { transition={{ type: "spring", stiffness: 300 }} src="/alexaverse2.0/debug-img.svg" alt="Debug Image" - className="absolute top-[4.8vw] left-[-14.4vw] w-[76.8vw] h-[19.8vw] object-contain rounded-[2.1vw]" + className="absolute top-[4.8vw] left-[-14.4vw] w-[76.8vw] h-[19.8vw] object-contain rounded-[2.1vw] drop-shadow-2xl" /> { className="absolute left-[15.96vw] top-1/2 -translate-y-1/2 w-[1.92vw] h-[2.52vw] object-contain invert" />
{
{

- Put your problem-solving skills to the test! Find and fix bugs in code snippets to prove you're the ultimate debug master! + Ready to test your debugging skills? Form a team of 3-5 members and compete in this challenging problem-solving event where you'll find and fix bugs in real-world scenarios!

- {/* Heading */} - - Registration Form - + + Team Registration Form + + + {/* Success/Error Message */} @@ -364,7 +537,7 @@ const RegisterDebug: React.FC = () => { animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, y: -20, scale: 0.95 }} transition={{ duration: 0.3 }} - className={`mb-6 p-4 rounded-lg text-center max-w-2xl backdrop-blur-sm border ${ + className={`mb-6 p-4 rounded-lg text-center max-w-2xl backdrop-blur-sm border shadow-lg ${ submitSuccess ? 'bg-green-500/20 border-green-400 text-green-300' : 'bg-red-500/20 border-red-400 text-red-300' @@ -380,217 +553,262 @@ const RegisterDebug: React.FC = () => { animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.6 }} onSubmit={handleSubmit} - className="w-full max-w-6xl space-y-8 font-moul" + className="relative w-full max-w-6xl space-y-8 font-moul" > -
- - - - - - {errors.name && ( - - {errors.name} - - )} - - + {/* Form background glow */} + + {/* Team Information */} + + + Team Information + + - {errors.registrationNumber && ( + {errors.teamName && ( - {errors.registrationNumber} - - )} - - - - - - - - +91  - - - - - {errors.phoneNumber && ( - - {errors.phoneNumber} + {errors.teamName} )} + - + - - - - {errors.srmMailId && ( - + +
+ {formData.teamMembers.map((member, index) => ( + + + + - {errors.srmMailId} - - )} - - -
+ Student {index + 1} + + +
+
+ + handleMemberChange(index, 'name', e.target.value)} + required + pattern="^[a-zA-Z\s]+$" + placeholder="Enter full name" + className="w-full px-3 py-3 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 shadow-md" + /> +
+ +
+ + handleMemberChange(index, 'registrationNumber', e.target.value)} + required + pattern="^(?i)RA\d{13}$" + placeholder="RAXXXXXXXXXXXXX" + className="w-full px-3 py-3 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 shadow-md" + /> +
+ +
+ + handleMemberChange(index, 'srmMailId', e.target.value)} + required + pattern="^[a-zA-Z0-9._%+-]+@srmist\\.edu\\.in$" + placeholder="xyz@srmist.edu.in" + className="w-full px-3 py-3 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 shadow-md" + /> +
+ +
+ + + + +91  + + handleMemberChange(index, 'phoneNumber', e.target.value)} + required + pattern="^[0-9]{10}$" + placeholder="012 345 6789" + className="flex-1 px-3 py-3 text-black placeholder-gray-500 bg-transparent focus:outline-none font-inter" + /> + +
+
+ + ))} +
+ + {/* Button glow effect */} + {isSubmitting ? ( <> - Registering... + Registering Team... ) : ( <> - Register + Register Team )} diff --git a/src/components/alexaverse-v2/RegisterHangman.tsx b/src/components/alexaverse-v2/RegisterHangman.tsx index 63bc913..78ef5e8 100644 --- a/src/components/alexaverse-v2/RegisterHangman.tsx +++ b/src/components/alexaverse-v2/RegisterHangman.tsx @@ -29,13 +29,11 @@ const RegisterHangman: React.FC = () => { }, []); const handleTeamNameChange = (e: React.ChangeEvent) => { - const { value } = e.target; setFormData(prev => ({ ...prev, - teamName: value + teamName: e.target.value })); - // Clear error when user starts typing if (errors.teamName) { setErrors(prev => ({ ...prev, @@ -44,16 +42,15 @@ const RegisterHangman: React.FC = () => { } }; - const handleMemberChange = (memberIndex: number, field: keyof TeamMember, value: string) => { + const handleMemberChange = (index: number, field: keyof TeamMember, value: string) => { setFormData(prev => ({ ...prev, - teamMembers: prev.teamMembers.map((member, index) => - index === memberIndex ? { ...member, [field]: value } : member + teamMembers: prev.teamMembers.map((member, i) => + i === index ? { ...member, [field]: value } : member ) })); - // Clear error when user starts typing - const errorKey = `teamMembers.${memberIndex}.${field}`; + const errorKey = `member${index}${field.charAt(0).toUpperCase() + field.slice(1)}`; if (errors[errorKey]) { setErrors(prev => ({ ...prev, @@ -69,43 +66,35 @@ const RegisterHangman: React.FC = () => { setSubmitSuccess(null); setErrors({}); - // Filter out empty team members (only include members with at least a name) - const validMembers = formData.teamMembers.filter(member => member.name.trim() !== ""); - - // Validate team size (3-4 members for Hangman) - if (validMembers.length < 3) { - setSubmitSuccess(false); - setSubmitMessage("Team must have at least 3 members."); - - // Show error toast + // Client-side validation + const filledMembers = formData.teamMembers.filter(member => + member.name && member.registrationNumber && member.srmMailId && member.phoneNumber + ); + + if (filledMembers.length < 3) { toast({ title: "❌ Team Size Error", - description: "Team must have at least 3 members.", + description: "You need at least 3 team members to register.", variant: "destructive", }); - setIsSubmitting(false); return; } - - if (validMembers.length > 4) { - setSubmitSuccess(false); - setSubmitMessage("Team can have maximum 4 members."); - - // Show error toast + + if (filledMembers.length > 4) { toast({ title: "❌ Team Size Error", - description: "Team can have maximum 4 members.", + description: "You can have maximum 4 team members.", variant: "destructive", }); - setIsSubmitting(false); return; } + // Create submission data with only filled members const submissionData: TeamRegistration = { teamName: formData.teamName, - teamMembers: validMembers + teamMembers: filledMembers }; try { @@ -113,12 +102,12 @@ const RegisterHangman: React.FC = () => { if (response.success) { setSubmitSuccess(true); - setSubmitMessage(response.message || 'Registration successful!'); + setSubmitMessage(response.message || 'Team registration successful!'); // Show success toast toast({ - title: "πŸŽ‰ Registration Successful!", - description: "Your team has been successfully registered for Hangman!", + title: "πŸŽ‰ Team Registration Successful!", + description: "Your team has been successfully registered for HANGMAN!", variant: "default", }); @@ -168,55 +157,127 @@ const RegisterHangman: React.FC = () => { }; if (!mounted) return null; - + return ( <> + {/* Animated Background Particles */} +
+ {[...Array(50)].map((_, i) => ( + + ))} +
+ + {/* Floating Geometric Shapes */} +
+ {[...Array(8)].map((_, i) => ( + +
+ + ))} +
+ + {/* Navigation */}
- Home + Home + - Events + Events + - Contact Us + Contact Us +
setMobileMenuOpen(true)} @@ -240,7 +301,7 @@ const RegisterHangman: React.FC = () => { animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0 }} transition={{ delay: 0.1 }} - whileHover={{ scale: 1.1 }} + whileHover={{ scale: 1.1, rotate: 90 }} whileTap={{ scale: 0.9 }} className="absolute top-6 right-6 text-white text-4xl" onClick={() => setMobileMenuOpen(false)} @@ -261,7 +322,7 @@ const RegisterHangman: React.FC = () => { animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ delay: index * 0.1 }} - whileHover={{ scale: 1.05, color: "#a855f7" }} + whileHover={{ scale: 1.05, color: "#10b981" }} href={link.href} onClick={() => setMobileMenuOpen(false)} className="text-white font-audiowide text-4xl transition-colors" @@ -292,21 +353,37 @@ const RegisterHangman: React.FC = () => { animate={{ opacity: 1 }} transition={{ duration: 0.8 }} id="register-hangman" - className="w-full min-h-screen text-white flex flex-col items-center justify-center px-4 py-16" + className="relative w-full min-h-screen text-white flex flex-col items-center justify-center px-4 py-16 z-10" > + {/* Animated Background Gradient */} + + {/* Event display section */} {
{

- Guess the Word, Save the Man: Voice-Powered Word Challenge! + Guess the Word: Test Your Vocabulary and Logic Skills!

@@ -352,12 +429,12 @@ const RegisterHangman: React.FC = () => { transition={{ type: "spring", stiffness: 300 }} src="/alexaverse2.0/hangman-img.svg" alt="Hangman Image" - className="absolute top-[4.8vw] left-[-14.4vw] w-[76.8vw] h-[19.8vw] object-contain rounded-[2.1vw]" + className="absolute top-[4.8vw] left-[-14.4vw] w-[76.8vw] h-[19.8vw] object-contain rounded-[2.1vw] drop-shadow-2xl" /> { className="absolute left-[15.96vw] top-1/2 -translate-y-1/2 w-[1.92vw] h-[2.52vw] object-contain invert" />
{
{

- Test your vocabulary and quick thinking in this classic word-guessing game with a modern voice-controlled twist! + Ready to put your word skills to the test? Form a team of 3-4 members and compete in this classic word-guessing game with a modern twist!

- {/* Heading */} - - Team Registration Form - + + Team Registration Form + + + {/* Success/Error Message */} @@ -427,7 +535,7 @@ const RegisterHangman: React.FC = () => { animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, y: -20, scale: 0.95 }} transition={{ duration: 0.3 }} - className={`mb-6 p-4 rounded-lg text-center max-w-2xl backdrop-blur-sm border ${ + className={`mb-6 p-4 rounded-lg text-center max-w-2xl backdrop-blur-sm border shadow-lg ${ submitSuccess ? 'bg-green-500/20 border-green-400 text-green-300' : 'bg-red-500/20 border-red-400 text-red-300' @@ -443,27 +551,59 @@ const RegisterHangman: React.FC = () => { animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.6 }} onSubmit={handleSubmit} - className="w-full max-w-6xl space-y-8 font-moul" + className="relative w-full max-w-6xl space-y-8 font-moul" > - {/* Team Name Field */} + {/* Form background glow */} + + + {/* Team Information */} -

+ Team Information -

-
+ + + { value={formData.teamName} onChange={handleTeamNameChange} required - pattern="^[a-zA-Z0-9\s]+$" - title="Only letters, numbers, and spaces allowed (minimum 3 characters)" - placeholder="Enter team name" - className={`w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 ${ - errors.teamName ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-purple-300' + placeholder="Enter your team name" + className={`relative z-10 w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 shadow-lg ${ + errors.teamName ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-green-300' }`} /> @@ -484,243 +622,191 @@ const RegisterHangman: React.FC = () => { initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} - className="text-red-400 text-sm mt-1 font-inter" + className="text-red-400 text-sm mt-1 font-inter relative z-10" > {errors.teamName} )} -
+ {/* Team Members */} - {[1, 2, 3, 4].map((studentNum) => ( - + -

- Student {studentNum} {studentNum <= 3 ? * : "(Optional)"} -

-
- - - handleMemberChange(studentNum - 1, 'name', e.target.value)} - required={studentNum <= 3} - pattern="^[a-zA-Z\s]+$" - title="Only letters and spaces allowed" - placeholder="Enter full name" - className={`w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 ${ - errors[`teamMembers.${studentNum - 1}.name`] ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-purple-300' - }`} - /> - - {errors[`teamMembers.${studentNum - 1}.name`] && ( - - {errors[`teamMembers.${studentNum - 1}.name`]} - - )} - - - - - - handleMemberChange(studentNum - 1, 'registrationNumber', e.target.value)} - required={studentNum <= 3} - pattern="^(?i)RA\d{13}$" - placeholder="RAXXXXXXXXXXXXX" - title="Must start with RA followed by 13 digits" - className={`w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 ${ - errors[`teamMembers.${studentNum - 1}.registrationNumber`] ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-purple-300' - }`} - /> - - {errors[`teamMembers.${studentNum - 1}.registrationNumber`] && ( - - {errors[`teamMembers.${studentNum - 1}.registrationNumber`]} - - )} - - - + Team Members (3-4 members required) + + +
+ {formData.teamMembers.map((member, index) => ( - - - +91  - - handleMemberChange(studentNum - 1, 'phoneNumber', e.target.value)} - required={studentNum <= 3} - pattern="^[0-9]{10}$" - placeholder="012 345 6789" - title="Enter a valid 10-digit phone number" - className="flex-1 px-3 py-4 text-black placeholder-gray-500 bg-transparent focus:outline-none font-inter" - /> - - - {errors[`teamMembers.${studentNum - 1}.phoneNumber`] && ( - - {errors[`teamMembers.${studentNum - 1}.phoneNumber`]} - - )} - - - - - - handleMemberChange(studentNum - 1, 'srmMailId', e.target.value)} - required={studentNum <= 3} - pattern="^[a-zA-Z0-9._%+-]+@srmist\\.edu\\.in$" - placeholder="xyz@srmist.edu.in" - title="Email must be an SRMIST ID ending with @srmist.edu.in" - className={`w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 ${ - errors[`teamMembers.${studentNum - 1}.srmMailId`] ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-purple-300' - }`} + className="absolute inset-0 bg-gradient-to-r from-green-500/10 to-blue-500/10 rounded-lg blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300" + animate={{ + scale: [1, 1.02, 1], + }} + transition={{ + duration: 3, + repeat: Infinity, + ease: "easeInOut", + delay: index * 0.5, + }} /> - - {errors[`teamMembers.${studentNum - 1}.srmMailId`] && ( - + Student {index + 1} + + +
+
+ + handleMemberChange(index, 'name', e.target.value)} + required + pattern="^[a-zA-Z\s]+$" + placeholder="Enter full name" + className="w-full px-3 py-3 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 shadow-md" + /> +
+ +
+ + handleMemberChange(index, 'registrationNumber', e.target.value)} + required + pattern="^(?i)RA\d{13}$" + placeholder="RAXXXXXXXXXXXXX" + className="w-full px-3 py-3 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 shadow-md" + /> +
+ +
+ + handleMemberChange(index, 'srmMailId', e.target.value)} + required + pattern="^[a-zA-Z0-9._%+-]+@srmist\\.edu\\.in$" + placeholder="xyz@srmist.edu.in" + className="w-full px-3 py-3 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 shadow-md" + /> +
+ +
+ + - {errors[`teamMembers.${studentNum - 1}.srmMailId`]} - - )} - + + +91  + + handleMemberChange(index, 'phoneNumber', e.target.value)} + required + pattern="^[0-9]{10}$" + placeholder="012 345 6789" + className="flex-1 px-3 py-3 text-black placeholder-gray-500 bg-transparent focus:outline-none font-inter" + /> + +
+
-
- - ))} - - -

Team Size: 3-4 members

-

First 3 members are required, 4th member is optional

+ ))} +
+ {/* Button glow effect */} + {isSubmitting ? ( <> - Registering Team... + Registering Team... ) : ( <> - Register Team + Register Team )} diff --git a/src/components/alexaverse-v2/RegisterVlogit.tsx b/src/components/alexaverse-v2/RegisterVlogit.tsx index 713a176..ca930bd 100644 --- a/src/components/alexaverse-v2/RegisterVlogit.tsx +++ b/src/components/alexaverse-v2/RegisterVlogit.tsx @@ -108,6 +108,59 @@ const RegisterVlogit: React.FC = () => { return ( <> + {/* Animated Background Particles */} +
+ {[...Array(50)].map((_, i) => ( + + ))} +
+ + {/* Floating Geometric Shapes */} +
+ {[...Array(8)].map((_, i) => ( + +
+ + ))} +
+ {/* Navigation */} {
@@ -131,30 +184,48 @@ const RegisterVlogit: React.FC = () => { whileHover={{ scale: 1.05, color: "#a855f7" }} transition={{ type: "spring", stiffness: 300 }} href="/alexaverse-v2" - className="text-white font-audiowide text-[32px] transition-colors" + className="text-white font-audiowide text-[32px] transition-colors relative group" > - Home + Home + - Events + Events + - Contact Us + Contact Us +
setMobileMenuOpen(true)} @@ -178,7 +249,7 @@ const RegisterVlogit: React.FC = () => { animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0 }} transition={{ delay: 0.1 }} - whileHover={{ scale: 1.1 }} + whileHover={{ scale: 1.1, rotate: 90 }} whileTap={{ scale: 0.9 }} className="absolute top-6 right-6 text-white text-4xl" onClick={() => setMobileMenuOpen(false)} @@ -230,21 +301,37 @@ const RegisterVlogit: React.FC = () => { animate={{ opacity: 1 }} transition={{ duration: 0.8 }} id="register-vlogit" - className="w-full min-h-screen text-white flex flex-col items-center justify-center px-4 py-16" + className="relative w-full min-h-screen text-white flex flex-col items-center justify-center px-4 py-16 z-10" > + {/* Animated Background Gradient */} + + {/* Event display section */} {
{ transition={{ type: "spring", stiffness: 300 }} src="/alexaverse2.0/vlogit-img.svg" alt="Vlogit Image" - className="absolute top-[4.8vw] left-[-14.4vw] w-[76.8vw] h-[19.8vw] object-contain rounded-[2.1vw]" + className="absolute top-[4.8vw] left-[-14.4vw] w-[76.8vw] h-[19.8vw] object-contain rounded-[2.1vw] drop-shadow-2xl" /> { className="absolute left-[15.96vw] top-1/2 -translate-y-1/2 w-[1.92vw] h-[2.52vw] object-contain invert" />
{
{ { - {/* Heading */} - - Registration Form - + + Registration Form + + + {/* Success/Error Message */} @@ -365,7 +483,7 @@ const RegisterVlogit: React.FC = () => { animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, y: -20, scale: 0.95 }} transition={{ duration: 0.3 }} - className={`mb-6 p-4 rounded-lg text-center max-w-2xl backdrop-blur-sm border ${ + className={`mb-6 p-4 rounded-lg text-center max-w-2xl backdrop-blur-sm border shadow-lg ${ submitSuccess ? 'bg-green-500/20 border-green-400 text-green-300' : 'bg-red-500/20 border-red-400 text-red-300' @@ -381,23 +499,49 @@ const RegisterVlogit: React.FC = () => { animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.6 }} onSubmit={handleSubmit} - className="w-full max-w-6xl space-y-8 font-moul" + className="relative w-full max-w-6xl space-y-8 font-moul" > -
+ {/* Form background glow */} + + +
+ { pattern="^[a-zA-Z\s]+$" title="Only letters and spaces allowed" placeholder="Enter your full name" - className={`w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 ${ + className={`relative z-10 w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 shadow-lg ${ errors.name ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-purple-300' }`} /> @@ -418,7 +562,7 @@ const RegisterVlogit: React.FC = () => { initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} - className="text-red-400 text-sm mt-1 font-inter" + className="text-red-400 text-sm mt-1 font-inter relative z-10" > {errors.name} @@ -430,15 +574,28 @@ const RegisterVlogit: React.FC = () => { initial={{ opacity: 0, x: 30 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.6, delay: 0.9 }} + className="relative group" > + { pattern="^(?i)RA\d{13}$" placeholder="RAXXXXXXXXXXXXX" title="Must start with RA followed by 13 digits" - className={`w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 ${ + className={`relative z-10 w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 shadow-lg ${ errors.registrationNumber ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-purple-300' }`} /> @@ -459,7 +616,7 @@ const RegisterVlogit: React.FC = () => { initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} - className="text-red-400 text-sm mt-1 font-inter" + className="text-red-400 text-sm mt-1 font-inter relative z-10" > {errors.registrationNumber} @@ -471,17 +628,30 @@ const RegisterVlogit: React.FC = () => { initial={{ opacity: 0, x: -30 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.6, delay: 1.0 }} + className="relative group" > + @@ -507,7 +677,7 @@ const RegisterVlogit: React.FC = () => { initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} - className="text-red-400 text-sm mt-1 font-inter" + className="text-red-400 text-sm mt-1 font-inter relative z-10" > {errors.phoneNumber} @@ -519,15 +689,28 @@ const RegisterVlogit: React.FC = () => { initial={{ opacity: 0, x: 30 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.6, delay: 1.1 }} + className="relative group" > + { pattern="^[a-zA-Z0-9._%+-]+@srmist\\.edu\\.in$" placeholder="xyz@srmist.edu.in" title="Email must be an SRMIST ID ending with @srmist.edu.in" - className={`w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 ${ + className={`relative z-10 w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 shadow-lg ${ errors.srmMailId ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-purple-300' }`} /> @@ -548,7 +731,7 @@ const RegisterVlogit: React.FC = () => { initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} - className="text-red-400 text-sm mt-1 font-inter" + className="text-red-400 text-sm mt-1 font-inter relative z-10" > {errors.srmMailId} @@ -563,35 +746,48 @@ const RegisterVlogit: React.FC = () => { transition={{ duration: 0.6, delay: 1.2 }} whileHover={{ scale: 1.05, - boxShadow: "0 20px 40px rgba(139, 92, 246, 0.3)" + boxShadow: "0 20px 40px rgba(139, 92, 246, 0.4)" }} whileTap={{ scale: 0.95 }} type="submit" disabled={isSubmitting} - className={`mx-auto mt-16 px-20 py-6 bg-gradient-to-r from-purple-600 via-pink-600 to-red-600 border-2 border-white rounded-[50px] text-white font-monsterrat text-2xl flex items-center justify-center gap-4 transition-all duration-300 backdrop-blur-sm ${ + className={`relative z-10 mx-auto mt-16 px-20 py-6 bg-gradient-to-r from-purple-600 via-pink-600 to-red-600 border-2 border-white rounded-[50px] text-white font-monsterrat text-2xl flex items-center justify-center gap-4 transition-all duration-300 backdrop-blur-sm shadow-2xl ${ isSubmitting ? 'opacity-50 cursor-not-allowed' : 'hover:shadow-2xl hover:shadow-purple-500/25' }`} > + {/* Button glow effect */} + {isSubmitting ? ( <> - Registering... + Registering... ) : ( <> - Register + Register )} diff --git a/src/components/alexaverse-v2/RegisterWorkshop.tsx b/src/components/alexaverse-v2/RegisterWorkshop.tsx index 6a86767..8d910e6 100644 --- a/src/components/alexaverse-v2/RegisterWorkshop.tsx +++ b/src/components/alexaverse-v2/RegisterWorkshop.tsx @@ -105,55 +105,127 @@ const RegisterWorkshop: React.FC = () => { }; if (!mounted) return null; - + return ( <> + {/* Animated Background Particles */} +
+ {[...Array(50)].map((_, i) => ( + + ))} +
+ + {/* Floating Geometric Shapes */} +
+ {[...Array(8)].map((_, i) => ( + +
+ + ))} +
+ + {/* Navigation */}
- Home + Home + - Events + Events + - Contact Us + Contact Us +
setMobileMenuOpen(true)} @@ -177,7 +249,7 @@ const RegisterWorkshop: React.FC = () => { animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0 }} transition={{ delay: 0.1 }} - whileHover={{ scale: 1.1 }} + whileHover={{ scale: 1.1, rotate: 90 }} whileTap={{ scale: 0.9 }} className="absolute top-6 right-6 text-white text-4xl" onClick={() => setMobileMenuOpen(false)} @@ -198,7 +270,7 @@ const RegisterWorkshop: React.FC = () => { animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ delay: index * 0.1 }} - whileHover={{ scale: 1.05, color: "#a855f7" }} + whileHover={{ scale: 1.05, color: "#3b82f6" }} href={link.href} onClick={() => setMobileMenuOpen(false)} className="text-white font-audiowide text-4xl transition-colors" @@ -229,21 +301,37 @@ const RegisterWorkshop: React.FC = () => { animate={{ opacity: 1 }} transition={{ duration: 0.8 }} id="register-workshop" - className="w-full min-h-screen text-white flex flex-col items-center justify-center px-4 py-16" + className="relative w-full min-h-screen text-white flex flex-col items-center justify-center px-4 py-16 z-10" > + {/* Animated Background Gradient */} + + {/* Event display section */} {
{

- Learn, Build, and Innovate with Alexa Skills! + Learn, Build, and Innovate: Master the Art of Development!

@@ -289,12 +377,12 @@ const RegisterWorkshop: React.FC = () => { transition={{ type: "spring", stiffness: 300 }} src="/alexaverse2.0/workshop-img.svg" alt="Workshop Image" - className="absolute top-[4.8vw] left-[-14.4vw] w-[76.8vw] h-[19.8vw] object-contain rounded-[2.1vw]" + className="absolute top-[4.8vw] left-[-14.4vw] w-[76.8vw] h-[19.8vw] object-contain rounded-[2.1vw] drop-shadow-2xl" /> { className="absolute left-[15.96vw] top-1/2 -translate-y-1/2 w-[1.92vw] h-[2.52vw] object-contain invert" />
{
{

- Ready to dive into the world of Alexa development? Join our hands-on workshop and learn to build amazing voice experiences! + Ready to dive deep into the world of development? Join our intensive workshop where you'll learn cutting-edge technologies, build real projects, and network with industry experts!

- {/* Heading */} - - Registration Form - + + Registration Form + + + {/* Success/Error Message */} @@ -364,7 +483,7 @@ const RegisterWorkshop: React.FC = () => { animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, y: -20, scale: 0.95 }} transition={{ duration: 0.3 }} - className={`mb-6 p-4 rounded-lg text-center max-w-2xl backdrop-blur-sm border ${ + className={`mb-6 p-4 rounded-lg text-center max-w-2xl backdrop-blur-sm border shadow-lg ${ submitSuccess ? 'bg-green-500/20 border-green-400 text-green-300' : 'bg-red-500/20 border-red-400 text-red-300' @@ -380,23 +499,49 @@ const RegisterWorkshop: React.FC = () => { animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.6 }} onSubmit={handleSubmit} - className="w-full max-w-6xl space-y-8 font-moul" + className="relative w-full max-w-6xl space-y-8 font-moul" > -
+ {/* Form background glow */} + + +
+ { pattern="^[a-zA-Z\s]+$" title="Only letters and spaces allowed" placeholder="Enter your full name" - className={`w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 ${ - errors.name ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-purple-300' + className={`relative z-10 w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 shadow-lg ${ + errors.name ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-blue-300' }`} /> @@ -417,7 +562,7 @@ const RegisterWorkshop: React.FC = () => { initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} - className="text-red-400 text-sm mt-1 font-inter" + className="text-red-400 text-sm mt-1 font-inter relative z-10" > {errors.name} @@ -429,15 +574,28 @@ const RegisterWorkshop: React.FC = () => { initial={{ opacity: 0, x: 30 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.6, delay: 0.9 }} + className="relative group" > + { pattern="^(?i)RA\d{13}$" placeholder="RAXXXXXXXXXXXXX" title="Must start with RA followed by 13 digits" - className={`w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 ${ - errors.registrationNumber ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-purple-300' + className={`relative z-10 w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 shadow-lg ${ + errors.registrationNumber ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-blue-300' }`} /> @@ -458,7 +616,7 @@ const RegisterWorkshop: React.FC = () => { initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} - className="text-red-400 text-sm mt-1 font-inter" + className="text-red-400 text-sm mt-1 font-inter relative z-10" > {errors.registrationNumber} @@ -470,18 +628,31 @@ const RegisterWorkshop: React.FC = () => { initial={{ opacity: 0, x: -30 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.6, delay: 1.0 }} + className="relative group" > + @@ -506,7 +677,7 @@ const RegisterWorkshop: React.FC = () => { initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} - className="text-red-400 text-sm mt-1 font-inter" + className="text-red-400 text-sm mt-1 font-inter relative z-10" > {errors.phoneNumber} @@ -518,15 +689,28 @@ const RegisterWorkshop: React.FC = () => { initial={{ opacity: 0, x: 30 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.6, delay: 1.1 }} + className="relative group" > + { pattern="^[a-zA-Z0-9._%+-]+@srmist\\.edu\\.in$" placeholder="xyz@srmist.edu.in" title="Email must be an SRMIST ID ending with @srmist.edu.in" - className={`w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 ${ - errors.srmMailId ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-purple-300' + className={`relative z-10 w-full px-4 py-4 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent font-inter placeholder-gray-500 text-black bg-white/95 backdrop-blur-sm transition-all duration-300 shadow-lg ${ + errors.srmMailId ? 'border-red-500 shadow-lg shadow-red-500/25' : 'border-gray-400 hover:border-blue-300' }`} /> @@ -547,7 +731,7 @@ const RegisterWorkshop: React.FC = () => { initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} - className="text-red-400 text-sm mt-1 font-inter" + className="text-red-400 text-sm mt-1 font-inter relative z-10" > {errors.srmMailId} @@ -562,35 +746,48 @@ const RegisterWorkshop: React.FC = () => { transition={{ duration: 0.6, delay: 1.2 }} whileHover={{ scale: 1.05, - boxShadow: "0 20px 40px rgba(59, 130, 246, 0.3)" + boxShadow: "0 20px 40px rgba(59, 130, 246, 0.4)" }} whileTap={{ scale: 0.95 }} type="submit" disabled={isSubmitting} - className={`mx-auto mt-16 px-20 py-6 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 border-2 border-white rounded-[50px] text-white font-monsterrat text-2xl flex items-center justify-center gap-4 transition-all duration-300 backdrop-blur-sm ${ + className={`relative z-10 mx-auto mt-16 px-20 py-6 bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 border-2 border-white rounded-[50px] text-white font-monsterrat text-2xl flex items-center justify-center gap-4 transition-all duration-300 backdrop-blur-sm shadow-2xl ${ isSubmitting ? 'opacity-50 cursor-not-allowed' : 'hover:shadow-2xl hover:shadow-blue-500/25' }`} > + {/* Button glow effect */} + {isSubmitting ? ( <> - Registering... + Registering... ) : ( <> - Register + Register )}