Merge branch 'main' into main

Author: MarvelMathesh

src/About.jsx

@@ -1,22 +1,22 @@
-import React, { useEffect } from 'react';
-import Speakers from './components/Speakers';
+import React, { useEffect } from 'react'
+import Speakers from './components/Speakers'
 
 const About = () => {
   useEffect(() => {
-    const hasReloaded = localStorage.getItem('hasReloaded');
+    const hasReloaded = localStorage.getItem('hasReloaded')
     if (!hasReloaded) {
-      localStorage.setItem('hasReloaded', 'true');
+      localStorage.setItem('hasReloaded', 'true')
       setTimeout(() => {
-        window.location.reload();
-      }, 1000);
+        window.location.reload()
+      }, 1000)
     }
-  }, []);
+  }, [])
 
   return (
     <div className="">
       <Speakers />
     </div>
-  );
-};
+  )
+}
 
-export default About;
+export default About

src/App.jsx

@@ -13,7 +13,7 @@ import ChallengePage from './ChallengePage'
 import Rules from './components/Rules'
 import CTFs from './questions/page'
 import PowerPage from './powerups/Page'
-import TeamPage from './components/teamPage'
+import TeamPage from './components/team/TeamPage'
 
 // import ErtdfgcvbBGprivacy from "./components/ertdfgcvbprivacy";
 
@@ -63,7 +63,6 @@ function App() {
             <Route path="/powerups" element={<PowerPage />} />
             <Route path="/team" element={<TeamPage />} />
 
-
             {/* <Route path="/privacy" element={<ErtdfgcvbBGprivacy />} /> */}
             <Route path="*" element={<PageNotFound />} />
           </Routes>

src/components/TeamPage.jsx

@@ -0,0 +1,50 @@
+import React, { useState, FormEvent } from 'react'
+import AnimatedText from '../text'
+
+const TeamCreation = () => {
+  const [teamName, setTeamName] = useState('')
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    // Handle form submission here
+    if (teamName.trim()) {
+      console.log('Team name submitted:', teamName)
+      // Add your team creation logic here
+    }
+  }
+
+  return (
+    <div className="flex h-screen flex-col items-center justify-center">
+      <AnimatedText
+        text={'CREATE A TEAM'}
+        time={1}
+        className="mb-8 font-neuebit text-7xl"
+      />
+
+      <form
+        onSubmit={handleSubmit}
+        className="flex w-full max-w-md flex-col items-center gap-4"
+      >
+        <input
+          type="text"
+          name="team_name"
+          id="tname"
+          value={teamName}
+          onChange={(e) => setTeamName(e.target.value)}
+          placeholder="Enter team name"
+          className="w-full border border-white bg-transparent p-4 text-white transition-colors focus:border-blue-500 focus:outline-none"
+          required
+        />
+
+        <button
+          type="submit"
+          className="mt-4 bg-white px-8 py-3 font-semibold text-black transition-colors hover:bg-gray-200"
+        >
+          Create Team
+        </button>
+      </form>
+    </div>
+  )
+}
+
+export default TeamCreation

src/components/team/TeamCreation.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import Header from '../Header'
+import TeamCreation from './TeamCreation'
+
+const TEAM_NAME = 'TEAM NAME'
+const Rank = '5'
+const TeamMembers = [
+  'Anaanananananana',
+  'Anaanananananana2',
+  'Anaanananananana3'
+]
+const points = 9000
+
+const TeamPage = () => {
+  return (
+    <div className="flex h-screen flex-col">
+      <Header
+        links={[
+          { text: 'Leaderboard', path: '/leaderboard' },
+          { text: 'Challenges', path: '/challenge' },
+          { text: 'Team', path: '#' }
+        ]}
+      />
+      <TeamCreation />
+      {/* <div className="flex w-screen flex-grow justify-center font-neuebit px-16 text-8xl">
+        <div className="flex h-full w-full flex-col gap-10">
+          <div className="text-[1.25ch] md:text-[clamp(2ch,0.5vw,3ch)] text-left text-enigma-green leading-none">
+            {TEAM_NAME}<sup className='text-white text-[clamp(2ch,0.5ch,3ch)]'>#{Rank}</sup>
+          </div>
+          <div className="flex h-full w-full flex-col-reverse justify-center gap-5 md:gap-10 md:flex-row py-5">
+            <div className="flex w-full md:w-5/6 flex-col-reverse gap-5 md:gap-1 text-left md:flex-col">
+              {TeamMembers.map((member, index) => (
+                <div key={index} className="border border-white p-2 px-5 text-[1.25ch] md:text-[clamp(2ch,0.5vw,3ch)] leading-none overflow-hidden whitespace-nowrap overflow-ellipsis">
+                  {member}
+                </div>
+              ))}
+              <div className="text-[1.25ch] md:text-[clamp(2ch,0.5vw,3ch)] leading-none text-left">
+                TOTAL POINTS:{' '}
+                <span className="text-enigma-green">{points}</span>
+              </div>
+            </div>
+            <div className="h-[clamp(22rem,0.1rem,25rem)] w-auto border border-white p-2 md:w-1/2"></div>
+          </div>
+        </div>
+      </div> */}
+    </div>
+  )
+}
+
+export default TeamPage