From 9abfd4305167ccc7a0d843389d15920fc9f46891 Mon Sep 17 00:00:00 2001
From: rishitkamboj <rishit242@gmail.com>
Date: Wed, 26 Jun 2024 09:07:53 +0530
Subject: [PATCH 1/3] Incorporated Rudra's changes a bit and made the UI better
 and responsive

---
 apps/web/src/app/page.tsx                     | 60 ++++++++++---------
 apps/web/src/components/navbar.tsx            |  2 +-
 apps/web/src/components/pre-register-form.tsx | 28 ++++++---
 packages/ui/package.json                      |  1 +
 4 files changed, 54 insertions(+), 37 deletions(-)

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 2d690f5..4d9d6f7 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -54,36 +54,38 @@ export default function Page(): JSX.Element {
   ]
   return (
     <div className="bg-white relative flex flex-col items-center justify-center mt-6">
-      <section className="w-full p-8 flex flex-col justify-center items-center dark:bg-gray-800">
-        <video width="1250" height="240" controls preload="none" className="rounded-2xl bg-black p-1 mt-[1rem] m-4 drop-shadow-xl" autoPlay muted>
-          <source src="test.mp4" type="video/mp4" />
-          <track
-            src={`https://appx-wsb-gcp.akamai.net.in/teachcode/admin/COURSE/cover/1699610005757WhatsApp-Image-2023-11-10-at-3.16.18-PM.jpeg`}
-            kind="subtitles"
-            srcLang="en"
-            label="English"
-          />
-          Your browser does not support the video tag.
-        </video>
-        <h2 className="w-fit bg-transparent cursor-pointer scroll-m-20 pb-2 text-3xl font-semibold tracking-tight first:mt-0 mt-4 border-2 border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] px-4 py-2 hover:shadow transition duration-200 bg-white flex-shrink-0">
-          The Most Awaited Cohort!
-        </h2>
-      </section>
+<section className="w-full p-8 flex flex-col justify-center items-center dark:bg-gray-800">
+  <video width="1250" height="240" controls preload="none" className="rounded-2xl bg-black p-1 mt-[1rem] m-4 drop-shadow-xl" autoPlay muted>
+    <source src="test.mp4" type="video/mp4" />
+    <track
+      src={`https://appx-wsb-gcp.akamai.net.in/teachcode/admin/COURSE/cover/1699610005757WhatsApp-Image-2023-11-10-at-3.16.18-PM.jpeg`}
+      kind="subtitles"
+      srcLang="en"
+      label="English"
+    />
+    Your browser does not support the video tag.
+  </video>
+  <h2 className="w-fit bg-transparent cursor-pointer scroll-m-20 pb-2 text-3xl font-semibold tracking-tight first:mt-0 mt-4 border-2 border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] px-4 py-2 hover:shadow transition duration-200 bg-white flex-shrink-0">
+    The Most Awaited Cohort!
+  </h2>
+</section>
+
+<section className="m-2 w-full p-8 flex flex-col justify-center items-center bg-gray-100 dark:bg-gray-900">
+  <div className="grid grid-cols-1 w-full mt-[3rem]">
+    <h1 className="text-[3rem] text-black font-bold dark:text-white col-span-2 text-center">Upcoming Cohorts</h1>
+    <div className="w-full flex flex-col lg:flex-row justify-evenly py-8 gap-2">
+      {courses.map(course => course.status === "Upcoming" ? (<CourseCard course={course} key={course.id} />) : null)}
+    </div>
+  </div>
+</section>
+
+<section className="h-full w-full p-8 flex flex-col justify-center items-center dark:bg-gray-800 pr-2 pl-2">
+  <h1 className="text-[3rem] text-black font-bold dark:text-white col-span-2 text-center">Available Cohorts</h1>
+  <div className="w-full flex flex-col lg:flex-row justify-evenly py-8 gap-2">
+    {courses.map(course => course.status !== "Upcoming" ? (<CourseCard course={course} key={course.id} />) : null)}
+  </div>
+</section>
 
-      <section className="w-full p-8 flex flex-col justify-center items-center bg-gray-100 dark:bg-gray-900">
-        <div className="grid grid-cols-2 w-screen mt-[3rem]">
-          <h1 className="text-[3rem] text-black font-bold dark:text-white col-span-2 text-center">Upcoming Cohorts</h1>
-          <div className="flex w-screen justify-evenly py-8">
-            {courses.map(course => course.status === "Upcoming" ? (<CourseCard course={course} />) : null)}
-          </div>
-        </div>
-      </section>
-      <section className="w-full p-8 flex flex-col justify-center items-center dark:bg-gray-800">
-        <h1 className="text-[3rem] text-black font-bold dark:text-white col-span-2 text-center">Available Cohorts</h1>
-        <div className="flex w-screen justify-evenly py-8">
-          {courses.map(course => course.status !== "Upcoming" ? (<CourseCard course={course} />) : null)}
-        </div>
-      </section>
     </div>
   );
 }
diff --git a/apps/web/src/components/navbar.tsx b/apps/web/src/components/navbar.tsx
index 0f656d1..48ae64f 100644
--- a/apps/web/src/components/navbar.tsx
+++ b/apps/web/src/components/navbar.tsx
@@ -6,7 +6,7 @@ export default function Navbar() {
   return (
     < nav className="fixed top-0 z-50 flex h-12 w-full items-center gap-2 border-b shadow-sm bg-white dark:bg-gray-900" >
       < div className="mx-auto flex w-full items-center justify-between md:max-w-screen-2xl" >
-        <h2 className='font-bold text-xl'>100xDevs</h2>
+        <h2 className='font-bold text-xl ml-2'><Link   href={'/'}>100xDevs</Link></h2>
         <div className="flex items-center justify-between scale-50 gap-4">
           <Button className="hover:bg-transparent dark:border-white w-fit h-fit cursor-pointer scroll-m-20 pb-2 text-3xl font-semibold tracking-tight border-2 border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] dark:shadow-[5px_5px_0px_0px_rgba(255,255,255)] px-4 py-2 hover:shadow transition duration-200 bg-transparent flex-shrink-0">
             <Link
diff --git a/apps/web/src/components/pre-register-form.tsx b/apps/web/src/components/pre-register-form.tsx
index b0cebd3..a7876d5 100644
--- a/apps/web/src/components/pre-register-form.tsx
+++ b/apps/web/src/components/pre-register-form.tsx
@@ -2,6 +2,7 @@
 import React, { useState } from "react";
 import { Label } from "@repo/ui/label";
 import { Input } from "@repo/ui/input";
+
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@repo/ui/components/ui/dialog";
 import { Button } from "@repo/ui/components/ui/button";
 
@@ -12,16 +13,28 @@ export function PreRegForm() {
     email: ""
   })
   const [isOpen, setIsOpen] = useState(false)
-  const handleSubmit = async () => {
+  const [warning, setWarning] = useState("");
+  const [button,setButton]=useState("Register");
+
+ const handleSubmit = async () => {
+    if (!formData.email.endsWith("@gmail.com")) {
+      setWarning("Email must end with @gmail.com");//adjust it later as per requirements
+      return;
+    }
+    setWarning(""); 
+    setButton("Registering...");
     await fetch("/api", {
-      method: "POST", body: JSON.stringify(formData)
-    })
-    setIsOpen(false)
+      method: "POST",
+      body: JSON.stringify(formData)
+    });
+    setIsOpen(false);
+    setButton("Register");
   };
+
   return (
     <Dialog open={isOpen} onOpenChange={() => setIsOpen(prev => !prev)}>
       <DialogTrigger asChild>
-        <Button className="scale-75 text-[2rem] text-black dark:text-white hover:bg-transparent dark:border-white w-fit h-fit cursor-pointer scroll-m-20 pb-2 font-semibold tracking-tight border-2 border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] dark:shadow-[5px_5px_0px_0px_rgba(255,255,255)] px-4 py-2 hover:shadow transition duration-200 bg-transparent flex-shrink-0">Pre Register</Button>
+        <Button className="scale-75 text-[2rem] text-black dark:text-white hover:bg-transparent dark:border-white w-fit h-fit cursor-pointer scroll-m-20 pb-2 font-semibold tracking-tight border-2 border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] dark:shadow-[5px_5px_0px_0px_rgba(255,255,255)] px-4 py-2 hover:shadow transition duration-200 bg-transparent flex-shrink-0">Pre-Register</Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
@@ -63,10 +76,11 @@ export function PreRegForm() {
             }
           })
         }} />
+          {warning && <p className="text-red-500" key={warning}>{warning}</p>}
         <DialogFooter>
-          <Button type="submit" onClick={handleSubmit}>Register</Button>
+          <Button type="submit" onClick={handleSubmit}>{button}</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
   );
-}
+}
\ No newline at end of file
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 3f28866..86bbe65 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -17,6 +17,7 @@
     "./input": "./src/components/ui/input.tsx",
     "./label": "./src/components/ui/label.tsx",
     "./dialog": "./src/components/ui/dialog.tsx"
+   
   },
   "license": "MIT",
   "scripts": {

From 453f6d5282f5f171965b78b1fb0f4887e45ac928 Mon Sep 17 00:00:00 2001
From: rishitkamboj <rishit242@gmail.com>
Date: Wed, 26 Jun 2024 09:21:20 +0530
Subject: [PATCH 2/3] more changes

---
 apps/web/src/components/pre-register-form.tsx | 21 +++++--------------
 1 file changed, 5 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/components/pre-register-form.tsx b/apps/web/src/components/pre-register-form.tsx
index a7876d5..936721b 100644
--- a/apps/web/src/components/pre-register-form.tsx
+++ b/apps/web/src/components/pre-register-form.tsx
@@ -2,7 +2,6 @@
 import React, { useState } from "react";
 import { Label } from "@repo/ui/label";
 import { Input } from "@repo/ui/input";
-
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@repo/ui/components/ui/dialog";
 import { Button } from "@repo/ui/components/ui/button";
 
@@ -13,24 +12,15 @@ export function PreRegForm() {
     email: ""
   })
   const [isOpen, setIsOpen] = useState(false)
-  const [warning, setWarning] = useState("");
   const [button,setButton]=useState("Register");
-
- const handleSubmit = async () => {
-    if (!formData.email.endsWith("@gmail.com")) {
-      setWarning("Email must end with @gmail.com");//adjust it later as per requirements
-      return;
-    }
-    setWarning(""); 
+  const handleSubmit = async () => {
     setButton("Registering...");
     await fetch("/api", {
-      method: "POST",
-      body: JSON.stringify(formData)
-    });
-    setIsOpen(false);
+      method: "POST", body: JSON.stringify(formData)
+    })
     setButton("Register");
+    setIsOpen(false)
   };
-
   return (
     <Dialog open={isOpen} onOpenChange={() => setIsOpen(prev => !prev)}>
       <DialogTrigger asChild>
@@ -76,11 +66,10 @@ export function PreRegForm() {
             }
           })
         }} />
-          {warning && <p className="text-red-500" key={warning}>{warning}</p>}
         <DialogFooter>
           <Button type="submit" onClick={handleSubmit}>{button}</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
   );
-}
\ No newline at end of file
+}

From c044ea0c5e62a10c39fad84c83cf499815e82604 Mon Sep 17 00:00:00 2001
From: rishitkamboj <rishit242@gmail.com>
Date: Wed, 26 Jun 2024 09:27:08 +0530
Subject: [PATCH 3/3] added warning

---
 apps/web/src/components/pre-register-form.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/web/src/components/pre-register-form.tsx b/apps/web/src/components/pre-register-form.tsx
index 936721b..9862350 100644
--- a/apps/web/src/components/pre-register-form.tsx
+++ b/apps/web/src/components/pre-register-form.tsx
@@ -14,6 +14,10 @@ export function PreRegForm() {
   const [isOpen, setIsOpen] = useState(false)
   const [button,setButton]=useState("Register");
   const handleSubmit = async () => {
+    if (!formData.firstName || !formData.lastName || !formData.email) {
+   alert("Fields cannot be empty");
+      return;
+    }
     setButton("Registering...");
     await fetch("/api", {
       method: "POST", body: JSON.stringify(formData)