From ab7f7cddafa97d7be13e055d348cd53ae94df8d0 Mon Sep 17 00:00:00 2001
From: Ezhil Shanmugham <ezhil930@gmail.com>
Date: Mon, 5 Aug 2024 01:20:28 +0530
Subject: [PATCH] responsive homepage

---
 app/components/Nav.tsx |   2 +-
 app/form/page.tsx      |  18 ++---
 app/page.tsx           | 152 ++++++++++++++++++++++-------------------
 3 files changed, 89 insertions(+), 83 deletions(-)

diff --git a/app/components/Nav.tsx b/app/components/Nav.tsx
index 6aec8f2..76e145d 100644
--- a/app/components/Nav.tsx
+++ b/app/components/Nav.tsx
@@ -15,7 +15,7 @@ const Nav = () => {
       <header className="bg-blue-950 text-white">
         <nav>
           <div className="flex justify-between items-center w-full px-5 md:px-10 py-4">
-            <div>
+            <div className='hidden md:block'>
               <Link href="/">
                 <Image src={Logo} width="50" height="50" alt="logo" />
               </Link>
diff --git a/app/form/page.tsx b/app/form/page.tsx
index e5ab73b..de18727 100644
--- a/app/form/page.tsx
+++ b/app/form/page.tsx
@@ -134,7 +134,7 @@ export default function FormPage() {
 
   useEffect(() => {
     if (acceptApplication && !isFormSubmitted) {
-      setBackgroundHeight("95vh");
+      setBackgroundHeight("max-content");
     } else {
       setBackgroundHeight("86vh");
     }
@@ -316,14 +316,12 @@ export default function FormPage() {
                       name="previousWork1"
                       render={({ field }: any) => (
                         <FormItem>
-                          <FormLabel>
-                            Previous Work(s) (Portfolio, GitHub profile, Google
-                            Drive link, etc.)
-                          </FormLabel>
+                          <FormLabel>Previous Works (if any)</FormLabel>
                           <FormControl>
                             <Input
                               {...field}
-                              placeholder="Previous Work"
+                              placeholder="Portfolio, GitHub profile, Google
+                            Drive link, etc."
                               className="resize-none w-full text-black"
                             />
                           </FormControl>
@@ -388,14 +386,12 @@ export default function FormPage() {
                       name="previousWork2"
                       render={({ field }: any) => (
                         <FormItem>
-                          <FormLabel>
-                            Previous Work(s) (Portfolio, GitHub profile, Google
-                            Drive link, etc.)
-                          </FormLabel>
+                          <FormLabel>Previous Works (if any)</FormLabel>
                           <FormControl>
                             <Input
                               {...field}
-                              placeholder="Previous Work"
+                              placeholder="Portfolio, GitHub profile, Google
+                            Drive link, etc."
                               className="resize-none w-full text-black"
                             />
                           </FormControl>
diff --git a/app/page.tsx b/app/page.tsx
index 8bae7b5..9d4b47c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -32,12 +32,12 @@ export default function Home() {
         />
       </div>
       <div className="mx-auto w-[80%] text-center">
-        <h1 className="text-4xl md:text-5xl font-bold tracking-tight">
+        <h1 className="text-4xl md:text-4xl font-bold tracking-tight">
           CYSCOM
         </h1>
         <h2 className="text-lg md:text-xl mt-1 md:mt-3">VIT Chennai</h2>
-        <h3 className="text-md md:text-lg font-bold mt-1 md:mt-3">
-          RECRUITMENTS 2024-25
+        <h3 className="text-md md:text-xl font-bold mt-1 md:mt-3">
+          Recruitments 2024-25
         </h3>
         <p className=" mt-5 w-[90%] md:w-[45%] mx-auto text-md md:text-lg">
           Started with a few people having cyber safety in mind, the chapter now
@@ -50,29 +50,26 @@ export default function Home() {
       </div>
       <div className="flex justify-center mt-4 mb-24">
         {!session ? (
-          <Button onClick={() => signIn("google")}>
-            <div className="bg-white text-black cursor-pointer mt-10 px-4 py-4 rounded-xl group flex justify-center items-center gap-1 font-semibold hover:bg-gray-200">
-              Sign in with Google
-              <FaGoogle className="ml-1" />
-            </div>
+          <Button
+            className="bg-white text-black cursor-pointer mt-10 px-4 py-4 rounded-xl group flex justify-center items-center gap-1 font-semibold hover:bg-gray-200"
+            onClick={() => signIn("google")}
+          >
+            Sign in with Google
+            <FaGoogle className="ml-1" />
           </Button>
         ) : (
-          <Button>
-            <Link href="/form">
-              <div className="bg-white text-black cursor-pointer mt-10 px-4 py-4 rounded-xl group flex justify-center items-center gap-1 font-semibold hover:bg-gray-200">
-                Apply Now!
-              </div>
-            </Link>
+          <Button className="bg-white text-black cursor-pointer mt-10 px-4 py-4 rounded-xl group flex justify-center items-center gap-1 font-semibold hover:bg-gray-200">
+            <Link href="/form">Apply Now!</Link>
           </Button>
         )}
       </div>
-      <div className="departments w-[85%] space-y-5">
-        <h1 className="text-center text-4xl text-white font-bold mb-5">
-          DEPARTMENRTS
+      <div className="departments w-full md:w-[85%] px-4 md:px-0 space-y-5 mx-auto">
+        <h1 className="text-center text-3xl md:text-4xl text-white font-bold mb-10">
+          Departments
         </h1>
-        <div className="departments-container flex flex-col md:flex-row space-y-3 md:space-y-0 md:space-x-5">
-          <div className="w-1/2 department px-4 py-3 text-white bg-blue-950 rounded-xl border-solid border-2 border-[#3d44a3]">
-            <h2 className="text-3xl text-white font-bold mb-5">
+        <div className="departments-container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-5">
+          <div className="department px-4 py-3 text-white bg-blue-950 rounded-xl border-2 border-[#3d44a3]">
+            <h2 className="text-lg md:text-xl text-white font-semibold mb-5">
               Development (Web-Dev and Open Source Projects)
             </h2>
             <p>
@@ -86,8 +83,8 @@ export default function Home() {
               parties.
             </p>
           </div>
-          <div className="w-1/2 department p-3 text-white bg-blue-950 rounded-xl border-solid border-2 border-[#f53100]">
-            <h2 className="text-3xl text-white font-bold mb-5">
+          <div className="department px-4 py-3 text-white bg-blue-950 rounded-xl border-2 border-[#f53100]">
+            <h2 className="text-lg md:text-xl text-white font-semibold mb-5">
               Technical (CTF and Projects)
             </h2>
             <p>
@@ -103,10 +100,10 @@ export default function Home() {
               everything is well-guarded in our digital landscape.
             </p>
           </div>
-        </div>
-        <div className="departments-container flex flex-col md:flex-row space-y-3 md:space-y-0 md:space-x-5">
-          <div className="w-1/2 department px-4 py-3 text-white bg-blue-950 rounded-xl border-solid border-2 border-[#090]">
-            <h2 className="text-3xl text-white font-bold mb-5">Design</h2>
+          <div className="department px-4 py-3 text-white bg-blue-950 rounded-xl border-2 border-[#090]">
+            <h2 className="text-lg md:text-xl text-white font-semibold mb-5">
+              Design
+            </h2>
             <p>
               Responsibilities encompass the management of the primary chapter
               website, subsidiary event websites, and any additional web
@@ -118,12 +115,12 @@ export default function Home() {
               parties.
             </p>
           </div>
-          <div className="w-1/2 department p-3 text-white bg-blue-950 rounded-xl border-solid border-2 border-[#97004c]">
-            <h2 className="text-3xl text-white font-bold mb-5">
+          <div className="department px-4 py-3 text-white bg-blue-950 rounded-xl border-2 border-[#97004c]">
+            <h2 className="text-lg md:text-xl text-white font-semibold mb-5">
               Event Management
             </h2>
             <p>
-              The Event Management Department at Cyscom, is the driving force
+              The Event Management Department at Cyscom is the driving force
               behind our dynamic and engaging events. With meticulous
               coordination, the department orchestrates a diverse range of
               activities, catering to the interests of cybersecurity
@@ -137,86 +134,99 @@ export default function Home() {
               opportunities.
             </p>
           </div>
-        </div>
-        <div className="departments-container flex flex-col md:flex-row space-y-3 md:space-y-0 md:space-x-5">
-          <div className="w-1/2 department px-4 py-3 text-white bg-blue-950 rounded-xl border-solid border-2 border-[#1a7848]">
-            <h2 className="text-3xl text-white font-bold mb-5">Content</h2>
+          <div className="department px-4 py-3 text-white bg-blue-950 rounded-xl border-2 border-[#1a7848]">
+            <h2 className="text-lg md:text-xl text-white font-semibold mb-5">
+              Content
+            </h2>
             <p>
               The Content Department at Cyscom shapes cybersecurity discourse by
               crafting insightful blogs, news updates, and engaging infographic
-              posts. As writers we delve into trends, developments, and best
+              posts. As writers, we delve into trends, developments, and best
               practices, fostering an informed community.
               <br />
               <br />
               Plays an important role in spreading awareness about
-              Cybersecurity, Teaching Technical Concepts to the public and
+              Cybersecurity, Teaching Technical Concepts to the public, and
               finding creative ways to do the same.
             </p>
           </div>
-          <div className="w-1/2 department p-3 text-white bg-blue-950 rounded-xl border-solid border-2 border-[#a2b825]">
-            <h2 className="text-3xl text-white font-bold mb-5">Social Media</h2>
+          <div className="department px-4 py-3 text-white bg-blue-950 rounded-xl border-2 border-[#a2b825]">
+            <h2 className="text-lg md:text-xl text-white font-semibold mb-5">
+              Social Media
+            </h2>
             <p>
-              Responsible for posting regularly about the latest updates in the
-              field of Cybersecurity on our platforms and boosting our online
-              presence with trendy captions and hashtags to accompany our weekly
-              posts. In short, it is the department which connects the backend
-              of the chapter to the outside world.
+              The Social Media Department is responsible for maintaining a
+              vibrant online presence by regularly posting updates on the latest
+              trends and developments in the field of cybersecurity. This
+              includes crafting engaging captions and using relevant hashtags to
+              enhance visibility and engagement. The team ensures that our
+              chapter's activities and achievements are communicated effectively
+              to the outside world, acting as the bridge between our internal
+              efforts and our external audience.
             </p>
           </div>
         </div>
       </div>
-      <div className="departments w-[85%] space-y-5">
-        <h1 className="text-center text-4xl text-white font-bold mt-10 mb-5">
-          WHY JOIN CYSCOM?
+
+      <div className="departments w-full md:w-[85%] space-y-5">
+        <h1 className="text-center text-4xl text-white font-bold mt-20 mb-10">
+          Why CYSCOM?
         </h1>
-        <div className="departments-container flex flex-col md:flex-row space-y-3 md:space-y-0 md:space-x-5">
-          <div className="text-center w-1/4 department px-4 py-3 text-white bg-blue-950 rounded-xl">
-            <h2 className="text-xl text-white font-bold">
+        <div className="departments-container flex flex-col md:flex-row md:space-x-5 space-y-5 md:space-y-0 items-center">
+          <div className="text-center w-[80%] md:w-1/4 department px-4 py-3 text-white bg-blue-950 rounded-xl">
+            <h2 className="text-base text-white">
               Get to be a part of the biggest cyber security student group in
               VIT Chennai!
             </h2>
           </div>
-          <div className="text-center w-1/4 department px-3 py-3 text-white bg-blue-950 rounded-xl">
-            <h2 className="text-xl text-white font-bold">
-              Work on real time projects, learn effective collaboration and how
+          <div className="text-center w-[80%] md:w-1/4 department px-3 py-3 text-white bg-blue-950 rounded-xl">
+            <h2 className="text-base text-white">
+              Work on real-time projects, learn effective collaboration and how
               to organize events!
             </h2>
           </div>
-          <div className="text-center w-1/4 department px-4 py-3 text-white bg-blue-950 rounded-xl">
-            <h2 className="text-xl text-white font-bold">
-              Learn new and exciting technologies and tech stacks through
-              webinars, online sessions and more!
+          <div className="text-center w-[80%] md:w-1/4 department px-4 py-3 text-white bg-blue-950 rounded-xl">
+            <h2 className="text-base text-white">
+              Learn new tech stacks through webinars, online sessions and much
+              more!
             </h2>
           </div>
-          <div className="text-center w-1/4 department px-4 py-3 text-white bg-blue-950 rounded-xl">
-            <h2 className="text-xl text-white font-bold">
+          <div className="text-center w-[80%] md:w-1/4 department px-4 py-3 text-white bg-blue-950 rounded-xl">
+            <h2 className="text-base text-white">
               Dive into the evolving world of cyber-security and learn about the
               best security practices!
             </h2>
           </div>
         </div>
       </div>
-      <div className="departments w-[85%] space-y-5">
-        <h1 className="text-center text-4xl text-white font-bold mt-10 mb-5">
-          HOW TO APPLY?
+      <div className="departments w-full lg:w-[85%] space-y-5">
+        <h1 className="text-center text-4xl text-white font-bold mt-20 mb-10">
+          How to apply?
         </h1>
         <div className="departments-container flex flex-col md:flex-row space-y-3 md:space-y-0 md:space-x-5">
           <div className="mx-auto w-1/2">
             <ul className="list-decimal text-lg space-y-2">
-              <li className="pl-3">Login using your VIT email.</li>
-              <li className="pl-3">Fill the form with some basic details.</li>
+              <li className="pl-3">Login using your VIT email</li>
+              <li className="pl-3">Click on Apply Now!</li>
+              <li className="pl-3">
+                Choose your preferred departments and add your previous works if
+                any
+              </li>
+              <li className="pl-3">
+                Fill the rest and submit the application form
+              </li>
+              <li className="pl-3">
+                Based on your application, you will be shortlisted for a quick
+                interview
+              </li>
               <li className="pl-3">
-                Choose your preferred interview slot and department. Apply
-                before *date time* for *date* & *date* slots and before *date
-                time* for *date* & *date* slots.
+                Shortlisted candidates and the final results can be checked on
+                the same website
               </li>
               <li className="pl-3">
-                The interview will be conducted on Google Meet. If you are
-                selected, attend the interview in the given time slot. The
-                WhatsApp group link for the selected applicants will be sent to
-                your email or will be displayed on this recruitment portal if
-                you are selected. Google Meet link will be sent in the WhatsApp
-                group.
+                Freshers are welcome to apply for any department. Prior
+                experience is beneficial but not essential. What matters most is
+                a strong desire to learn, grow, and collaborate with the team
               </li>
             </ul>
           </div>