made some changes in styling

src/components/Nav.svelte

@@ -47,48 +47,29 @@
       </a>
 
       <ul class="hidden md:flex md:flex-row" id="mobileMenu">
-        <li class="m-5 p-5" on:click={handleHamClick}>
+        <li class="m-5 px-5" on:click={handleHamClick}>
           <a aria-current={segment === undefined ? "page" : undefined} href="."
             >Home</a
           >
         </li>
-        <li class="m-5 p-5" on:click={handleHamClick}>
+        <li class="m-5 px-5" on:click={handleHamClick}>
           <a
             aria-current={segment === "events" ? "page" : undefined}
             href="events">Events</a
           >
         </li>
-        <li class="m-5 p-5" on:click={handleHamClick}>
+        <li class="m-5 px-5" on:click={handleHamClick}>
           <a
             aria-current={segment === "scrapbook" ? "page" : undefined}
             href="scrapbook">Scrapbook</a
           >
         </li>
-        <li class="m-5 p-5" on:click={handleHamClick}>
+        <li class="m-5 px-5" on:click={handleHamClick}>
           <a
             aria-current={segment === "newsletter" ? "page" : undefined}
             href="newsletter">Newsletter</a
           >
         </li>
-        <svg
-          class="m-10"
-          id="mode-switcher"
-          viewBox="0 0 32 32"
-          width={24}
-          height={24}
-          fill="currentcolor"
-          on:click={handleColorSwitch}
-        >
-          <circle
-            cx={16}
-            cy={16}
-            r={14}
-            fill="none"
-            stroke="currentcolor"
-            strokeWidth={4}
-          />
-          <path d="M 16 0 A 16 16 0 0 0 16 32 z" />
-        </svg>
       </ul>
     </nav>
   </div>

src/routes/_layout.svelte

@@ -7,7 +7,7 @@
 
 <Nav {segment} />
 
-<main class="bg-dark font-main">
+<main class="relative bg-darker font-main">
   <slot />
 </main>
 

src/routes/index.svelte

@@ -1,4 +1,11 @@
 <script>
+  import Header from "../components/Header.svelte";
+
+  export let title =
+    "Hack Club is a nonprofit network of makers around the world.";
+  export let description =
+    "Learning to code is uniquely like  gaining a superpower—turning you from a consumer of technology into a creator. So it shouldn’t be taught like a class, it should be a creative, inclusive space. To foster this environment, every Hack Club is student-led & members make self-directed projects.";
+
   function handleAnchorClick(event) {
     event.preventDefault();
     const link = event.currentTarget;
@@ -17,7 +24,7 @@
 
 <!-- Side Navigation -->
 
-<ul class="fixed top-96 left-0 m-0 p-0 z-1 font-main font-bold">
+<ul class="fixed top-96 left-0 m-0 p-0 z-2 font-main font-bold">
   <li>
     <a on:click={handleAnchorClick} class="anchor" href="#joinus">Join Us</a>
   </li>
@@ -36,72 +43,72 @@
 
 <!-- Content -->
 
-<div id="main" class="font-xl">
-  <div id="joinus" class="container text-center">
-    <h1 class="text-6xl">Hack Club is a nonprofit network of makers around the world.</h1>
-    Through Hack Club RIT we aim <br />
-      - to explore, learn and teach technology that is out of reach in the college
-      curriculum to the students. <br />
-      - to create a platform for anyone who wishes to learn tech <br />
-      - to create a community of like-minded people who collaborate and help each
-      other and grow together<br>
+<div id="main" class="text-sm md:text-lg">
+  <div id="joinus" class="text-center bg-dark pt-10 px-10">
+    <Header {title} {description} />
     <button class="btn">Join Us</button>
   </div>
   <svg
-    class="fill-current text-darker"
+    class="fill-current text-dark"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 1440 320"
   >
     <path
       fill-opacity="1"
-      d="M0,0L60,26.7C120,53,240,107,360,144C480,181,600,203,720,197.3C840,192,960,160,1080,170.7C1200,181,1320,235,1380,261.3L1440,288L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"
+      d="M0,0L60,26.7C120,53,240,107,360,144C480,181,600,203,720,197.3C840,192,960,160,1080,170.7C1200,181,1320,235,1380,261.3L1440,288L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"
     />
   </svg>
 
-  <div id="aboutus" class="h-96 bg-darker">
-    <div class="container">
-      <h2 class="text-2xl">ABOUT US</h2>
-      Learning to code is uniquely like gaining a superpower—
-      <br />turning you from a consumer of technology into a creator. <br />So
-      it shouldn’t be taught like a class—it should be a creative, inclusive
-      space.<br />
-      To foster this environment, every Hack Club is student-led & <br />members
-      make self-directed projects.
-      <br /><br />
-      Through Hack Club RIT we aim <br />
-      - to explore, learn and teach technology that is out of reach in the college
-      curriculum to the students. <br />
-      - to create a platform for anyone who wishes to learn tech <br />
-      - to create a community of like-minded people who collaborate and help each
-      other and grow together
+  <div id="aboutus" class="container">
+    <h2 class="text-2xl">ABOUT US</h2>
+    <div class="md:flex justify-between">
+      <img class="md:w-1/3 mx-4 my-6 p-4" src="meetings.png" alt="meeting" />
+      <div>
+        <div class="text-xl font-bold text-cyan">We are Hack Club RIT.</div>
+        For starters, we do not break into bank accounts xD.<br /> It's all
+        about
+        <span class="highlight"
+          >being creative and making something awesome with code.</span
+        ><br />
+        <br />
+        Hack Club is an initiative for students by students. Hack Club is a place
+        that lets you tinker, break, and rebuild. After all, you can't make an omelet
+        without breaking a few eggs. 🍳
+        <br /><br />
+        Through Hack Club RIT we aim <br />
+        - to <span class="font-bold">explore, learn and teach</span> technology
+        that is out of reach in the college curriculum to the students. <br />
+        - to create a <span class="font-bold">platform for anyone</span> who
+        wishes to learn tech. <br />
+        - to create a
+        <span class="font-bold">community of like-minded people </span> who collaborate
+        and help each other and grow together.
+      </div>
     </div>
   </div>
 
-  <div id="events" class="h-96 bg-darker">
-    <div class="container">
-      <h2 class="text-2xl">EVENTS</h2>
-
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus neque atque
-      consequuntur ullam repellat! Dolore, quae est quod, adipisci nam
-      consequuntur quisquam iure, cum iusto ratione ex ut non omnis.
+  <div id="events" class="container">
+    <h2 class="text-2xl">EVENTS</h2>
+    <div class="md:flex justify-between">
+      <div class="card h-96 w-96" />
+      <div class="card h-96 w-96" />
+      <div class="card h-96 w-96" />
     </div>
   </div>
 
-  <div id="contactus" class="h-96 bg-darker">
+  <div id="contactus" class="h-96">
     <div class="container">
       <h2 class="text-2xl">CONTACT US</h2>
-
     </div>
   </div>
-
   <svg
-    class="fill-current text-darker"
+    class="fill-current text-dark"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 1440 320"
   >
     <path
       fill-opacity="1"
-      d="M0,0L60,26.7C120,53,240,107,360,144C480,181,600,203,720,197.3C840,192,960,160,1080,170.7C1200,181,1320,235,1380,261.3L1440,288L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"
+      d="M0,0L60,26.7C120,53,240,107,360,144C480,181,600,203,720,197.3C840,192,960,160,1080,170.7C1200,181,1320,235,1380,261.3L1440,288L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"
     />
   </svg>
 </div>