fix: Remove ProfileModal, fix UI/UX issues, React key warnings

src/app/confirmation/page.tsx

@@ -93,7 +93,7 @@ export default function Confirmation() {
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setLoadingState(true);
-    
+
     try {
       if (isTeamLead === false) {
         const updatableData = {
@@ -393,28 +393,31 @@ export default function Confirmation() {
                       ")"
                     }
                     getOptionDisabled={(o) => !o.isPaid || o.isTeamMember == -1}
-                    renderOption={(props, option: Attendee) => (
-                      <li {...props}>
-                        <div className="flex gap-4">
-                          <img
-                            src={option.image}
-                            className="size-12 rounded-full object-cover"
-                          />
-                          <div>
-                            <p>
-                              {option.label} {option.lastName}
-                            </p>
-                            <p className="text-sm opacity-70">
-                              {option.profession}
-                            </p>
+                    renderOption={(props, option: Attendee) => {
+                      const { key, ...otherProps } = props as any;
+                      return (
+                        <li key={key || option.userId} {...otherProps}>
+                          <div className="flex gap-4">
+                            <img
+                              src={option.image}
+                              className="size-12 rounded-full object-cover"
+                            />
+                            <div>
+                              <p>
+                                {option.label} {option.lastName}
+                              </p>
+                              <p className="text-sm opacity-70">
+                                {option.profession}
+                              </p>
+                            </div>
+                            {!option.isPaid && <Chip label="Payment Pending" />}
+                            {option.isTeamMember == -1 && option.isPaid && (
+                              <Chip label="Application Incomplete" />
+                            )}
                           </div>
-                          {!option.isPaid && <Chip label="Payment Pending" />}
-                          {option.isTeamMember == -1 && option.isPaid && (
-                            <Chip label="Application Incomplete" />
-                          )}
-                        </div>
-                      </li>
-                    )}
+                        </li>
+                      );
+                    }}
                     filterOptions={(options: Attendee[], state) => {
                       return options.filter(
                         (e) =>
@@ -447,7 +450,7 @@ export default function Confirmation() {
                         }}
                         className="dark:text-white dark:border-gray-600"
                         label="Add team members"
-                        
+
                       />
                     )}
                   />

src/app/globals.css

@@ -38,6 +38,11 @@ body {
     color: var(--foreground);
     background: var(--background);
     font-family: 'Google Sans', 'Roboto', sans-serif;
+    overflow-x: hidden;
+}
+
+html {
+    overflow-x: hidden;
 }
 
 /* Ensure Google Sans applies to ALL elements */
@@ -337,6 +342,7 @@ label {
     object-position: center;
     width: 100%;
     height: 100%;
+    min-height: 150px;
 }
 
 .grid_item:first-child {

src/app/page.tsx

@@ -49,7 +49,7 @@ export default function Home() {
             <Partners />
             {/* <Streams /> */}
             <img
-                src="/highlights/9.jpg"
+                src="https://res.cloudinary.com/dlhw4q5rh/image/upload/f_auto,q_auto,w_1200/v1767012101/9_nrcnyw.jpg"
                 className="w-full h-[400px] md:h-[700px] object-cover"
                 alt="GDG on Campus GITAM event"
             />

src/app/profile/page.tsx

@@ -20,7 +20,7 @@ export default function Profile() {
     });
   }, [user]);
   return (
-    <div className="w-full flex flex-col items-center h-full">
+    <div className="w-full flex flex-col items-center h-full min-h-screen bg-(--background)">
       {user !== null && user.photoURL !== null && userData != undefined && (
         <>
           <img
@@ -44,9 +44,9 @@ export default function Profile() {
           onClick={() => {
             setTabIndex(0);
           }}
-          className={`cursor-pointer pt-2 pb-8 sm:py-8 text-xl font-light inline-flex ${tabIndex == 0
-              ? "text-blue-500 font-medium underline underline-offset-[12px]"
-              : ""
+          className={`cursor-pointer pt-2 pb-8 sm:py-8 text-xl font-light inline-flex dark:text-gray-400 ${tabIndex == 0
+            ? "text-blue-500 dark:text-blue-500 font-medium underline underline-offset-[12px]"
+            : ""
             }`}
         >
           Your QR Code
@@ -66,17 +66,33 @@ export default function Profile() {
         </p> */}
       </div>
       {tabIndex == 0 && (
-        <div className="flex felx-col justify-center">
-          <QRCode
-            size={300}
-            style={{ height: "auto", maxWidth: "70%", width: "70%" }}
-            value={user?.uid ?? ""}
-            className="m-10 sm:mb-24 "
-            viewBox={`0 0 128 128`}
-          />
+        <div className="flex flex-col justify-center items-center">
+          <div className="bg-white p-4 rounded-xl">
+            <QRCode
+              size={300}
+              style={{ height: "auto", maxWidth: "100%", width: "100%" }}
+              value={user?.uid ?? ""}
+              viewBox={`0 0 128 128`}
+            />
+          </div>
         </div>
       )}
       {tabIndex == 1 && <div></div>}
+
+      {/* Team Action Buttons - Same style as Signout */}
+      <div className="flex flex-col sm:flex-row gap-3 mt-6 mb-4 w-full max-w-[320px] sm:max-w-[400px] px-4">
+        <Link href="/view-team" className="flex-1">
+          <div className="border-[2px] border-blue-300 rounded-[20px] text-blue-500 px-4 py-2 text-[17px] sm:text-[19px] font-medium text-center">
+            View My Team
+          </div>
+        </Link>
+        <Link href="/edit-team" className="flex-1">
+          <div className="border-[2px] border-green-300 rounded-[20px] text-green-500 px-4 py-2 text-[17px] sm:text-[19px] font-medium text-center">
+            Edit Team
+          </div>
+        </Link>
+      </div>
+
       <Link href="?signout">
         <div className="border-[2px] border-red-300 rounded-[20px] text-red-500 px-4 py-2 text-[19px] font-medium">
           Signout

src/components/Gallery.tsx

@@ -1,79 +1,74 @@
 export default function Gallery() {
+  // Cloudinary base with auto-format, auto-quality, and responsive sizing
+  const cloudinaryBase = "https://res.cloudinary.com/dlhw4q5rh/image/upload/f_auto,q_auto,w_800";
+
   return (
     <div className="photos_grid">
       <img
         crossOrigin="anonymous"
         className="grid_item object-top"
-        data-src="/highlights/1.JPG"
-        src="/highlights/1.JPG"
+        src={`${cloudinaryBase}/v1767012101/1_gt8bkr.jpg`}
         alt="Web Study Jams at GITAM University"
+        loading="lazy"
       />
       <img
         crossOrigin="anonymous"
         className="grid_item"
-        data-src="/highlights/2.jpg"
-        src="/highlights/2.jpg"
+        src={`${cloudinaryBase}/v1767012097/2_vl0eyx.jpg`}
         alt="Hacktober Fest at GVP"
+        loading="lazy"
       />
       <img
         crossOrigin="anonymous"
         className="grid_item"
-        data-src="/highlights/3.jpg"
-        src="/highlights/3.jpg"
+        src={`${cloudinaryBase}/v1767012099/3_xogicy.jpg`}
+        alt="GDGoC GITAM Event"
+        loading="lazy"
       />
-      {/* <img
-        crossOrigin="anonymous"
-        className="grid_item object-right"
-        data-src="/highlights/gdsc_iwd_2.png"
-        src="/highlights/gdsc_iwd_2.png"
-      /> */}
       <img
         crossOrigin="anonymous"
         className="grid_item"
-        data-src="/highlights/4.jpg"
-        src="/highlights/4.jpg"
+        src={`${cloudinaryBase}/v1767012098/4_ofokmf.jpg`}
+        alt="GDGoC GITAM Workshop"
+        loading="lazy"
       />
       <img
         crossOrigin="anonymous"
         className="grid_item"
-        data-src="/highlights/5.jpg"
-        src="/highlights/5.jpg"
+        src={`${cloudinaryBase}/v1767012099/5_ozbxvl.jpg`}
+        alt="GDGoC GITAM Session"
+        loading="lazy"
       />
       <img
         crossOrigin="anonymous"
         className="grid_item"
-        data-src="/highlights/7.jpg"
-        src="/highlights/7.jpg"
+        src={`${cloudinaryBase}/v1767012101/7_m9dqxk.jpg`}
+        alt="GDGoC GITAM Hackathon"
+        loading="lazy"
       />
       <img
         crossOrigin="anonymous"
         className="grid_item"
-        data-src="/highlights/6.jpg"
-        src="/highlights/6.jpg"
+        src={`${cloudinaryBase}/v1767012098/6_vrpc7j.jpg`}
+        alt="GDGoC GITAM Community"
+        loading="lazy"
       />
       <img
         crossOrigin="anonymous"
         className="grid_item"
-        data-src="/highlights/8.jpg"
-        src="/highlights/8.jpg"
+        src={`${cloudinaryBase}/v1767012100/8_zxs8dz.jpg`}
         alt="Cloud Study Jams participants wearing their swags at MVGR"
+        loading="lazy"
       />
-      <div className="gallery_info p-8!">
+      <div className="gallery_info p-4 md:p-8!">
         <div>
-          <h2 className="text-4xl! text-white!">GDGoC GITAM's<br />highlights</h2>
+          <h2 className="text-2xl md:text-4xl! text-white!">GDGoC GITAM's<br />highlights</h2>
 
-          <p className="text-white/70! w-[28ch] mt-4">
+          <p className="text-white/70! text-sm md:text-base mt-2 md:mt-4">
             Past year's built lots of excitement. Check out photos from featured
             talks, hands-on learning sessions, and after-hours fun.
           </p>
         </div>
-        {/* <a
-          href="https://photos.app.goo.gl/9HPAL3Tkv3vKmYrh7"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          See all photos
-        </a> */}
       </div>
     </div>
   );

src/components/Hero.tsx

@@ -1,17 +1,14 @@
 "use client";
 
 import { useState, useEffect } from 'react';
-import { auth, db } from '@/lib/firebase';
+import { auth } from '@/lib/firebase';
 import { GoogleAuthProvider, signInWithPopup, onAuthStateChanged, User } from 'firebase/auth';
-import { doc, getDoc } from 'firebase/firestore';
 import { useRouter } from 'next/navigation';
-import ProfileModal from './ProfileModal';
 import GetUserProgress from '@/utils/getUserProgress';
 import Progress from '@/utils/progress';
 
 export default function Hero() {
     const [user, setUser] = useState<User | null>(null);
-    const [showProfileModal, setShowProfileModal] = useState(false);
     const [userProgress, setUserProgress] = useState<Progress | null>(null);
     const [loading, setLoading] = useState(true);
     const router = useRouter();
@@ -40,18 +37,8 @@ export default function Hero() {
 
         const provider = new GoogleAuthProvider();
         try {
-            const result = await signInWithPopup(auth, provider);
-            const signedInUser = result.user;
-
-            // Check if profile exists
-            const docRef = doc(db, "users", signedInUser.uid);
-            const docSnap = await getDoc(docRef);
-
-            if (!docSnap.exists()) {
-                setShowProfileModal(true);
-            } else {
-                router.push('/dashboard');
-            }
+            await signInWithPopup(auth, provider);
+            router.push('/dashboard');
         } catch (error) {
             console.error("Error signing in", error);
         }
@@ -60,7 +47,7 @@ export default function Hero() {
     const getButtonText = () => {
         if (!user) return "Register Now";
         if (loading) return "Loading...";
-        
+
         switch (userProgress) {
             case Progress.noApplication:
                 return "Register Now";
@@ -77,15 +64,15 @@ export default function Hero() {
     };
 
     const getButtonStyle = () => {
-        if (userProgress === Progress.completeRegistration || 
+        if (userProgress === Progress.completeRegistration ||
             userProgress === Progress.completeRegistrationTeamLead) {
             return "w-full sm:w-auto px-6 md:px-8 py-3 md:py-4 bg-green-500 text-white rounded-full text-base md:text-lg font-medium cursor-default";
         }
         return "w-full sm:w-auto px-6 md:px-8 py-3 md:py-4 bg-[#2563eb] text-white rounded-full text-base md:text-lg font-medium hover:shadow-xl hover:scale-105 transition-all duration-300 cursor-pointer";
     };
 
-    const isRegistered = userProgress === Progress.completeRegistration || 
-                        userProgress === Progress.completeRegistrationTeamLead;
+    const isRegistered = userProgress === Progress.completeRegistration ||
+        userProgress === Progress.completeRegistrationTeamLead;
 
     return (
         <section className="relative min-h-[calc(100vh-80px)] pb-[36px] flex items-center justify-center overflow-hidden px-4">
@@ -108,8 +95,8 @@ export default function Hero() {
                 </p>
 
                 <div className="flex flex-col sm:flex-row gap-3 md:gap-4 justify-center items-center px-4">
-                    <button 
-                        onClick={isRegistered ? undefined : handleRegister} 
+                    <button
+                        onClick={isRegistered ? undefined : handleRegister}
                         className={getButtonStyle()}
                         disabled={isRegistered}
                     >
@@ -128,15 +115,6 @@ export default function Hero() {
             <img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/images/PXL_20210518_000223011.max-1200x676.format-webp.webp" className="hidden md:block absolute bottom-42 right-72 blur-lg w-28 h-18 object-cover rounded-xl" />
             <img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/images/210518_1004_3S1A4903_B_1_1.width-1300.jpg" className="absolute top-24 left-56 blur-sm w-36 h-24 object-cover rounded-xl" />
             <img src="https://www.hindustantimes.com/ht-img/img/2024/05/15/1600x900/Google-AI-Showcase-18_1715737614992_1715737643291.jpg" className="-scale-x-100 absolute bottom-10 left-12 w-72 h-48 object-cover rounded-xl" />
-
-            {user && (
-                <ProfileModal
-                    user={user}
-                    isOpen={showProfileModal}
-                    onClose={() => setShowProfileModal(false)}
-                    onComplete={() => setShowProfileModal(false)}
-                />
-            )}
         </section>
     );
 }