feat: Update registration form fields and placeholders

client/global.css

@@ -109,6 +109,26 @@
 
   body {
     @apply bg-background text-foreground;
+    position: fixed;
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+  }
+
+  #root {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  input,
+  select,
+  textarea {
+    font-size: 16px;
+    -webkit-appearance: none;
+    appearance: none;
   }
 
   :where(p, span, li, h1, h2, h3, h4, h5, h6, a, button, label, td, th) {

client/pages/CodesmitersArenaForm.tsx

@@ -1,11 +1,11 @@
 import Layout from "@/components/Layout";
 import { ArrowLeft, ArrowRight } from "lucide-react";
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 
-const GOOGLE_FORM_ID = "1FAIpQLSe8UNU5n8ok9tCuF7wRHdyaR3lI6hHvV-0Gw78OeD7c9GMxzQ";
+const GOOGLE_FORM_ID = "1FAIpQLSfMtWEdU0ZUx0gP0RkkPIiA20M12710F321l3_1qCZ2movcgQ";
 
-const sections = ["A", "B", "C", "D", "E", "F"];
+const sections = ["1", "2", "3"];
 const departments = [
   "Electronics and Communication Engineering",
   "Computer Science and Engineering",
@@ -44,29 +44,26 @@ export default function CodesmitersArenaForm() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState("");
 
-  const handleInputChange = (
-    memberNum: "member1" | "member2",
-    field: keyof Member,
-    value: string
-  ) => {
-    setFormData((prev) => ({
-      ...prev,
-      [memberNum]: {
-        ...prev[memberNum],
-        [field]: value,
-      },
-    }));
-    setError("");
-  };
+  const handleInputChange = useCallback(
+    (
+      memberNum: "member1" | "member2",
+      field: keyof Member,
+      value: string
+    ) => {
+      setFormData((prev) => ({
+        ...prev,
+        [memberNum]: {
+          ...prev[memberNum],
+          [field]: value,
+        },
+      }));
+      setError("");
+    },
+    []
+  );
 
   const formatName = (name: string): string => {
-    const trimmed = name.trim();
-    if (trimmed.length === 0) return "";
-    const parts = trimmed.split(" ");
-    const lastName = parts[parts.length - 1];
-    const firstLetter = lastName.charAt(0).toUpperCase();
-    const restOfName = parts.slice(0, -1).join(" ").toUpperCase();
-    return `${restOfName} ${firstLetter}`.trim();
+    return name.trim().toUpperCase();
   };
 
   const validateMember = (member: Member, memberNum: number): boolean => {
@@ -110,17 +107,16 @@ export default function CodesmitersArenaForm() {
       const formattedMember2Name = formatName(formData.member2.name);
 
       const submitData = new FormData();
-      submitData.append("entry.1", formattedMember1Name); // Member 1 Name
-      submitData.append("entry.2", formData.member1.email); // Member 1 Email
-      submitData.append("entry.3", formData.member1.regNo); // Member 1 Reg No
-      submitData.append("entry.4", formData.member1.department); // Member 1 Department
-      submitData.append("entry.5", formData.member1.section); // Member 1 Section
-      submitData.append("entry.6", formattedMember2Name); // Member 2 Name
-      submitData.append("entry.7", formData.member2.email); // Member 2 Email
-      submitData.append("entry.8", formData.member2.regNo); // Member 2 Reg No
-      submitData.append("entry.9", formData.member2.department); // Member 2 Department
-      submitData.append("entry.10", formData.member2.section); // Member 2 Section
-      submitData.append("entry.11", "Codesmith's Arena"); // Event Name
+      submitData.append("entry.1884265043", formattedMember1Name); // Member 1 Name
+      submitData.append("entry.551813573", formData.member1.email); // Member 1 Email
+      submitData.append("entry.513669972", formData.member1.regNo); // Member 1 Reg No
+      submitData.append("entry.85602000", formData.member1.department); // Member 1 Department
+      submitData.append("entry.1212348438", formData.member1.section); // Member 1 Section
+      submitData.append("entry.994293442", formattedMember2Name); // Member 2 Name
+      submitData.append("entry.258782101", formData.member2.email); // Member 2 Email
+      submitData.append("entry.1696388815", formData.member2.regNo); // Member 2 Reg No
+      submitData.append("entry.318312040", formData.member2.department); // Member 2 Department
+      submitData.append("entry.1521586158", formData.member2.section); // Member 2 Section
 
       await fetch(
         `https://docs.google.com/forms/d/e/${GOOGLE_FORM_ID}/formResponse`,
@@ -152,17 +148,17 @@ export default function CodesmitersArenaForm() {
     const memberKey = memberNum === 1 ? "member1" : "member2";
 
     return (
-      <div className="p-6 rounded-lg border border-primary/20 bg-primary/5">
-        <h3 className="text-lg font-bold mb-6 text-primary">Member {memberNum}</h3>
+      <div className="p-4 sm:p-6 rounded-lg border border-primary/20 bg-primary/5">
+        <h3 className="text-base sm:text-lg font-bold mb-4 sm:mb-6 text-primary">Member {memberNum}</h3>
 
-        <div className="space-y-4">
+        <div className="space-y-3 sm:space-y-4">
           <div>
-            <label className="block text-sm font-semibold mb-2">
+            <label className="block text-xs sm:text-sm font-semibold mb-1 sm:mb-2">
               Full Name <span className="text-red-500">*</span>
             </label>
-            <p className="text-xs text-muted-foreground mb-3">
+            <p className="text-xs text-muted-foreground mb-2 sm:mb-3">
               Format: Your Name will be converted to CAPITAL FORMAT WITH INITIAL AT LAST
-              (e.g., "John Doe" becomes "JOHN D")
+              (e.g., "Navin Kumar K" becomes "NAVIN KUMAR K")
             </p>
             <input
               type="text"
@@ -171,13 +167,16 @@ export default function CodesmitersArenaForm() {
                 handleInputChange(memberKey as "member1" | "member2", "name", e.target.value)
               }
               placeholder="Enter full name"
-              className="w-full px-4 py-2 rounded-lg border border-border bg-background hover:border-primary/50 focus:border-primary focus:outline-none transition-colors"
+              autoComplete="name"
+              spellCheck="false"
+              inputMode="text"
+              className="w-full px-4 py-2 rounded-lg border border-border bg-background hover:border-primary/50 focus:border-primary focus:outline-none transition-colors text-base [-webkit-appearance:none]"
               required
             />
           </div>
 
           <div>
-            <label className="block text-sm font-semibold mb-2">
+            <label className="block text-xs sm:text-sm font-semibold mb-1 sm:mb-2">
               Email <span className="text-red-500">*</span>
             </label>
             <input
@@ -187,13 +186,15 @@ export default function CodesmitersArenaForm() {
                 handleInputChange(memberKey as "member1" | "member2", "email", e.target.value)
               }
               placeholder="email@example.com"
-              className="w-full px-4 py-2 rounded-lg border border-border bg-background hover:border-primary/50 focus:border-primary focus:outline-none transition-colors"
+              autoComplete="email"
+              inputMode="email"
+              className="w-full px-4 py-2 rounded-lg border border-border bg-background hover:border-primary/50 focus:border-primary focus:outline-none transition-colors text-base [-webkit-appearance:none]"
               required
             />
           </div>
 
           <div>
-            <label className="block text-sm font-semibold mb-2">
+            <label className="block text-xs sm:text-sm font-semibold mb-1 sm:mb-2">
               Registration Number <span className="text-red-500">*</span>
             </label>
             <input
@@ -202,17 +203,20 @@ export default function CodesmitersArenaForm() {
               onChange={(e) =>
                 handleInputChange(memberKey as "member1" | "member2", "regNo", e.target.value)
               }
-              placeholder="e.g., RA2301001010010"
-              className="w-full px-4 py-2 rounded-lg border border-border bg-background hover:border-primary/50 focus:border-primary focus:outline-none transition-colors"
+              placeholder="e.g., 14222510XXXX"
+              autoComplete="off"
+              inputMode="numeric"
+              className="w-full px-4 py-2 rounded-lg border border-border bg-background hover:border-primary/50 focus:border-primary focus:outline-none transition-colors text-base [-webkit-appearance:none]"
               required
             />
           </div>
 
           <div>
-            <label className="block text-sm font-semibold mb-2">
+            <label className="block text-xs sm:text-sm font-semibold mb-1 sm:mb-2">
               Department <span className="text-red-500">*</span>
             </label>
-            <select
+            <input
+              type="text"
               value={data.department}
               onChange={(e) =>
                 handleInputChange(
@@ -221,28 +225,24 @@ export default function CodesmitersArenaForm() {
                   e.target.value
                 )
               }
-              className="w-full px-4 py-2 rounded-lg border border-border bg-background hover:border-primary/50 focus:border-primary focus:outline-none transition-colors"
+              placeholder="Enter department"
+              autoComplete="off"
+              inputMode="text"
+              className="w-full px-4 py-2 rounded-lg border border-border bg-background hover:border-primary/50 focus:border-primary focus:outline-none transition-colors text-base [-webkit-appearance:none]"
               required
-            >
-              <option value="">Select Department</option>
-              {departments.map((dept) => (
-                <option key={dept} value={dept}>
-                  {dept}
-                </option>
-              ))}
-            </select>
+            />
           </div>
 
           <div>
-            <label className="block text-sm font-semibold mb-2">
+            <label className="block text-xs sm:text-sm font-semibold mb-1 sm:mb-2">
               Section <span className="text-red-500">*</span>
             </label>
             <select
               value={data.section}
               onChange={(e) =>
                 handleInputChange(memberKey as "member1" | "member2", "section", e.target.value)
               }
-              className="w-full px-4 py-2 rounded-lg border border-border bg-background hover:border-primary/50 focus:border-primary focus:outline-none transition-colors"
+              className="w-full px-4 py-2 rounded-lg border border-border bg-background hover:border-primary/50 focus:border-primary focus:outline-none transition-colors text-base appearance-none cursor-pointer [-webkit-appearance:none]"
               required
             >
               <option value="">Select Section</option>
@@ -260,33 +260,30 @@ export default function CodesmitersArenaForm() {
 
   return (
     <Layout>
-      <section className="min-h-[calc(100vh-80px)] pt-20 pb-10 px-4">
-        <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-background to-secondary/10 -z-10" />
-        <div className="absolute top-20 right-10 w-72 h-72 bg-primary/20 rounded-full blur-3xl -z-10" />
-        <div className="absolute bottom-0 left-10 w-72 h-72 bg-secondary/20 rounded-full blur-3xl -z-10" />
+      <section className="w-full relative pt-6 sm:pt-10 md:pt-20 pb-10 px-3 sm:px-4 bg-gradient-to-br from-primary/10 via-background to-secondary/10 overflow-x-hidden" style={{minHeight: 'auto'}}>
 
-        <div className="container max-w-2xl">
+        <div className="w-full max-w-2xl mx-auto relative z-20">
           <button
             onClick={() => navigate("/register")}
-            className="inline-flex items-center gap-2 text-primary hover:text-primary/80 transition-colors mb-8"
+            className="inline-flex items-center gap-1 sm:gap-2 text-primary hover:text-primary/80 transition-colors mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base"
           >
-            <ArrowLeft className="w-5 h-5" />
+            <ArrowLeft className="w-4 h-4 sm:w-5 sm:h-5" />
             Back to Events
           </button>
 
-          <div className="mb-12 animate-fade-in-up">
-            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent">
+          <div className="mb-6 sm:mb-10 md:mb-12">
+            <h1 className="text-2xl sm:text-3xl md:text-5xl font-bold mb-2 sm:mb-4 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent">
               Codesmith's Arena
             </h1>
-            <p className="text-sm sm:text-base md:text-lg text-muted-foreground">
+            <p className="text-xs sm:text-sm md:text-lg text-muted-foreground">
               AI-Assisted Coding Challenge Registration - Team of 2
             </p>
           </div>
 
-          <div className="bg-card rounded-xl border border-primary/20 p-8 animate-fade-in-up">
-            <form onSubmit={handleSubmit} className="space-y-8">
+          <div className="bg-card rounded-lg sm:rounded-xl border border-primary/20 p-4 sm:p-6 md:p-8">
+            <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-6 md:space-y-8">
               {error && (
-                <div className="p-4 rounded-lg bg-red-500/10 border border-red-500/30 text-red-600">
+                <div className="p-3 sm:p-4 rounded-lg bg-red-500/10 border border-red-500/30 text-red-600 text-sm sm:text-base">
                   {error}
                 </div>
               )}
@@ -297,21 +294,13 @@ export default function CodesmitersArenaForm() {
               <button
                 type="submit"
                 disabled={isSubmitting}
-                className="w-full px-8 py-3 rounded-lg bg-gradient-to-r from-primary to-secondary text-primary-foreground font-semibold hover:opacity-90 transition-all duration-300 transform hover:scale-105 hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                className="w-full px-4 sm:px-8 py-2.5 sm:py-3 rounded-lg bg-gradient-to-r from-primary to-secondary text-primary-foreground font-semibold hover:opacity-90 transition-all duration-300 transform hover:scale-105 hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 text-sm sm:text-base"
               >
                 {isSubmitting ? "Submitting..." : "Submit Team Registration"}
-                {!isSubmitting && <ArrowRight className="w-5 h-5" />}
+                {!isSubmitting && <ArrowRight className="w-4 sm:w-5 h-4 sm:h-5" />}
               </button>
             </form>
           </div>
-
-          <div className="mt-8 p-6 rounded-lg bg-primary/5 border border-primary/20">
-            <p className="text-sm text-muted-foreground">
-              <span className="font-semibold text-foreground">Note:</span> Both
-              team members' information is required. You'll receive confirmation
-              emails for both members.
-            </p>
-          </div>
         </div>
       </section>
     </Layout>