design updates for sleek look

Author: nchshri

src/components/MLPurdueAbout.astro

@@ -6,12 +6,12 @@ import TeamMember from "./team/member.astro";
 
 <br />
 
-<div class="px-5">
+<div>
   <ContentSection id="mlpurdue" title="ABOUT">
     <div
-      class="flex w-screen items-center justify-center border-y-2 border-purple-500 py-10"
+      class="flex w-screen border-y-[1px] border-purple-500 -mt-6 py-6"
     >
-      <p class="max-w-[75%] text-center text-sm md:text-base">
+      <p class="max-w-[75%] pl-8 text-sm">
         ML@Purdue is the central club for AI/ML career growth for Purdue
         students. We support careers in industry, research, and entrepreneurial
         ventures through projects and various events. The club also connects
@@ -21,63 +21,61 @@ import TeamMember from "./team/member.astro";
   </ContentSection>
 </div>
 
-<Spacer y={100} />
+<Spacer y={150} />
 <ContentSection id="Executive" title="EXECUTIVE BRANCH">
   <div
-    class="grid w-screen gap-y-16 gap-x-14 border-y-2 border-purple-500 px-10 py-20 md:grid-cols-2"
+    class="grid w-screen gap-y-10 gap-x-6 border-y-[1px] -mt-6 border-purple-500 pl-4 pr-10 py-10 sm:grid-cols-2 lg:grid-cols-3"
   >
     <TeamMember
       title="Co-President"
       url="https://www.linkedin.com/in/arnav-gr0ver/"
-      fullname="Arnav Grover"
+      fullname="arnav grover"
       major="CS"
       year="Junior"
     />
     <TeamMember
       title="Co-President"
       url="https://www.linkedin.com/in/lavangiyadava/"
-      fullname="Lavangi Yadava"
+      fullname="lavangi yadava"
       major="CS"
       year="Junior"
     />
     <TeamMember
       title="Vice Co-President of Marketing"
       url="https://www.linkedin.com/in/bisti-potdar-0a0aa8244/"
-      fullname="Bisti Potdar"
+      fullname="bisti potdar"
       major="CS"
       year="Sophomore"
     />
     <TeamMember
       title="Vice Co-President of Marketing"
       url="https://www.linkedin.com/in/nshriya/"
-      fullname="Shriya Nichenametla"
+      fullname="shriya nichenametla"
       major="CS & Web-Design"
       year="Sophomore"
     />
     <TeamMember
       title="Head Project Advisor"
       url="https://www.linkedin.com/in/alexandre-sauquet/"
-      fullname="Alexandre Sauquet"
+      fullname="alexandre sauquet"
       major="CS & AI"
       year="Junior"
     />
     <TeamMember
       title="Vice President of Operations"
       url="https://www.linkedin.com/in/shrung-patel/"
-      fullname="Shrung Patel"
+      fullname="shrung patel"
       major="CS & AI"
       year="Junior"
     />
     <TeamMember
       title="Vice President of Finance"
       url="https://www.linkedin.com/in/aadipatel5/"
-      fullname="Aadi Patel"
+      fullname="aadi patel"
       major="Finance"
       year="Senior"
     />
   </div>
 </ContentSection>
 
-<Spacer y={96} />
-
-<Spacer y={50} />
+<Spacer y={60} />

src/components/content-section.astro

@@ -7,12 +7,12 @@ export interface Props {
 const { title, id } = Astro.props;
 ---
 
-<section id={id} class="flex scroll-mt-24 flex-col items-center gap-4">
-  <div class="flex flex-col items-center gap-4">
+<section id={id} class="flex scroll-mt-24 flex-col items-start gap-4">
+  <div class="flex flex-col gap-4">
     <slot name="eyebrow" />
     <h2
       style="line-height: normal"
-      class="orbitron mb-0 text-center tracking-tight text-white text-6xl"
+      class="orbitron mb-0 ml-7 tracking-tight leading-tight text-white text-7xl"
     >
       {title}
     </h2>

src/components/header.astro

@@ -109,26 +109,26 @@ const { fixed } = Astro.props;
               <Icon pack="mdi" name="close" class="h-8" />
             </button>
           </header>
-          <div class="flex justify-center items-center w-screen border-b-2 border-purple-500 pb-5">
+          <div class="flex items-center justify-center -ml-3 w-screen pb-2">
             <a class="hover:!text-default" href="/">
-              <img src={mlPurdueLogo.src} alt="Logo" class="h-[7rem]" />
+              <img src={mlPurdueLogo.src} alt="Logo" class="h-[5rem]" />
             </a>
-            <div class="mb-2 flex items-center justify-center lg:mb-0">
-              <h1 class="orbitron text-center font-bold text-white text-6xl">ML</h1>
+            <div class="flex items-center justify-center lg:mb-0">
+              <h1 class="orbitron text-center font-bold text-white text-8xl">ML</h1>
               <h2
-                class="orbitron -ml-4 mb-4 text-center text-white text-xl md:-ml-10 md:text-5xl"
+                class="orbitron -ml-6 mb-4 text-center text-white text-3xl md:-ml-10 md:text-5xl"
               >
                 @
               </h2>
               <h1
-                class="orbitron ml-3 text-center font-semibold text-white text-4xl sm:ml-5"
+                class="orbitron ml-3 text-center font-semibold text-white text-6xl sm:ml-5"
               >
                 PURDUE
               </h1>
             </div>
           </div>
           <nav>
-            <ul class="flex flex-col">
+            <ul class="flex flex-col -mt-2 sm:mt-0">
               {
                 navItems.map(({ title, url, sublinks }) => (
                   <li>
@@ -144,8 +144,8 @@ const { fixed } = Astro.props;
                         </div>
                       </div>
                     ) : (
-                      <a class="block font-semibold text-lg" href={url}>
-                        <div class="flex w-screen items-center justify-center pb-3 border-b-2 mb-3 border-purple-500">
+                      <a class="flex text-base items-center justify-center" href={url}>
+                        <div class="flex orbitron w-[90vw] hover:text-purple-500 lowercase glass py-4 mb-3">
                           {title}
                         </div>
                       </a>

src/components/intro.astro

@@ -1,20 +1,16 @@
 ---
 import ContentSection from "~/components/content-section.astro";
-import Logo from "./logo.astro";
 ---
 
-<div class="glass py-10 sm:py-20">
+<div class="glass py-10 sm:py-20 flex items-center justify-center">
   <ContentSection id="eventscalendar" title="EVENTS CALENDAR">
-    <iframe
-      id="events"
-      style="width:75vw; height:65vh;filter:invert(0.9) saturate(2) hue-rotate(232deg)"
-      src="https://calendar.google.com/calendar/u/0/embed?src=3951dbb2399906412eb63e032ca35716de8ccd8a871bfbfb89008309123454e0@group.calendar.google.com&ctz=America/Indiana/Indianapolis"
-    ></iframe>
+    <div class="flex justify-center items-center w-full">
+      <iframe
+        id="events"
+        class="w-[75vw] h-[65vh]"
+        style="filter: invert(0.9) saturate(2) hue-rotate(232deg);"
+        src="https://calendar.google.com/calendar/u/0/embed?src=3951dbb2399906412eb63e032ca35716de8ccd8a871bfbfb89008309123454e0@group.calendar.google.com&ctz=America/Indiana/Indianapolis"
+      ></iframe>
+    </div>
   </ContentSection>
 </div>
-
-<style>
-  div[data-achievements] section :not(h1) {
-    @apply ml-2 sm:ml-0;
-  }
-</style>

src/components/team/member.astro

@@ -14,8 +14,8 @@ const sp = { [n]: title };
 ---
 
 <div {...sp}>
-  <div class="flex w-full flex-col text-center">
-    <h2 class="font-semibold tracking-tight text-white text-2xl">
+  <div class="leading-tight flex glass flex-col w-full m:w-[45vw] lg:w-[29vw] px-5 xl:px-0 py-5 text-center">
+    <h2 class="orbitron tracking-tight text-white text-xl">
       <span>{fullname}</span>
     </h2>
     <span class="capitalize text-lg">
@@ -24,7 +24,7 @@ const sp = { [n]: title };
           <a
             href={url}
             target="_blank"
-            class="m-2 inline-block rounded-full bg-purple-900 py-2 px-5 font-semibold capitalize text-sm hover:bg-purple-200"
+            class="m-2 inline-block rounded-md bg-purple-900 my-2 py-1 px-5 capitalize text-sm hover:bg-purple-100"
           >
             {title}
           </a>
@@ -35,14 +35,9 @@ const sp = { [n]: title };
         )
       }
     </span>
-    <div class="flex items-center justify-center gap-2">
-      <span class="text-md capitalize">
-        Major: {major}
-      </span>
-      <div class="h-5 border-l-2 border-dotted border-purple-400"></div>
-      <span class="text-md capitalize">
-        Grade: {year}
-      </span>
+    <div class="flex flex-col w-full text-sm capitalize px-16">
+      <span class="self-start">Major: {major}</span>
+      <span class="self-end">Grade: {year}</span>
     </div>
   </div>
   <p class="max-w-xl text-center font-extrabold text-2xl">

src/pages/about.astro

@@ -30,11 +30,11 @@ const description = "ML@Purdue Website";
     class="h-full overflow-x-hidden bg-default text-default text-base selection:bg-secondary selection:text-white"
   >
     <Header fixed />
-    <article class="mx-auto mt-20 w-[90vw] max-w-[80ch]">
+    <article class="mt-20 w-[90vw] max-w-[80ch]">
       <MLPurdueAbout />
     </article>
     <div
-      class="mx-10 flex flex-col items-center justify-center gap-[5px] md:flex-row md:items-start md:gap-12"
+      class="flex flex-col items-center justify-center gap-[5px] md:flex-row md:items-start md:gap-12"
     >
       <div
         class="mt-20 -mb-20 flex flex-col items-center text-left md:mb-0 md:items-start"

src/pages/sponsor.astro

@@ -38,12 +38,12 @@ const description = "ML@Purdue Sponsorship";
   >
     <Header fixed />
     <br />
-    <article class="mx-auto py-10 px-5 mt-11 w-[90vw] max-w-[80ch]">
+    <article class="pt-10 mt-11 w-[90vw] max-w-[80ch]">
       <ContentSection id="sponsors-title" title="SPONSORS">
         <div
-          class="flex w-screen items-center justify-center border-y-2 border-purple-500 py-10"
+          class="flex w-screen border-y-[1px] -mt-6 border-purple-500 pl-8 py-6"
         >
-          <p class="max-w-[75%] text-center text-sm md:text-base">
+          <p class="max-w-[75%] text-start text-sm">
             We thank all of our sponsors for supporting us and helping us achieve
             our mission! To learn more about who we are, our mission, and our
             sponsorship tiers, please view our <u
@@ -53,49 +53,49 @@ const description = "ML@Purdue Sponsorship";
           </p>
         </div>
 
-        <div class="flex w-screen border-b-2 border-purple-500 h-[32vh]">
-          <div class="flex flex-col justify-between items-end border-r-2 h-[34vh] w-[26vw] -mt-4 text-right border-purple-500 p-4">
+        <div class="flex w-screen border-b-[1px] border-purple-500 h-[32vh]">
+          <div class="flex flex-col justify-between items-end border-r-[1px] h-[34vh] w-[26vw] -mt-4 text-right border-purple-500 p-4">
             <h1 class="sponsor-t4 orbitron text-xl">
               TIER <span class="font-bold text-4xl">4</span>
             </h1>
-            <h2 class="sponsor-t4 font-semibold leading-tight mb-2">ML@P Maestro</h2>
+            <h2 class="sponsor-t4 text-sm font-semibold leading-tight mb-2">ML@P Maestro</h2>
           </div>
           <img 
             src={dagshub.src} 
             alt="DagsHub" 
-            class="max-w-[35vw] pl-10 rounded-md object-contain" 
+            class="max-w-[35vw] pl-4 md:pl-10 rounded-md object-contain" 
           />
           <img
             src={uniformsierra.src}
             alt="Uniform Sierra"
-            class="max-w-[35vw] -mr-13 rounded-md object-contain"
+            class="max-w-[35vw] -mr-11 rounded-md object-contain"
           />
         </div>
 
-        <div class="flex w-screen border-b-2 border-purple-500 h-[32vh]">
-          <div class="flex flex-col justify-between items-end border-r-2 h-[34vh] w-[26vw] -mt-4 text-right border-purple-500 p-4">
+        <div class="flex w-screen border-b-[1px] border-purple-500 h-[32vh]">
+          <div class="flex flex-col justify-between items-end border-r-[1px] h-[34vh] w-[26vw] -mt-4 text-right border-purple-500 p-4">
             <h1 class="sponsor-t3 orbitron text-xl">
               TIER <span class="font-bold text-4xl">3</span>
             </h1>
-            <h2 class="sponsor-t3 font-semibold leading-tight mb-2">Neural Network Ninja</h2>
+            <h2 class="sponsor-t3 text-sm  font-semibold leading-tight mb-2">Neural Network Ninja</h2>
           </div>
         </div>
 
-        <div class="flex w-screen border-b-2 border-purple-500 h-[32vh]">
-          <div class="flex flex-col justify-between items-end border-r-2 h-[34vh] w-[26vw] -mt-4 text-right border-purple-500 p-4">
+        <div class="flex w-screen border-b-[1px] border-purple-500 h-[32vh]">
+          <div class="flex flex-col justify-between items-end border-r-[1px] h-[34vh] w-[26vw] -mt-4 text-right border-purple-500 p-4">
             <h1 class="sponsor-t2 orbitron text-xl">
               TIER <span class="font-bold text-4xl">2</span>
             </h1>
-            <h2 class="sponsor-t2 font-semibold leading-tight mb-2">SVM Sorcerer</h2>
+            <h2 class="sponsor-t2 text-sm font-semibold leading-tight mb-2">SVM Sorcerer</h2>
           </div>
         </div>
 
-        <div class="flex w-screen border-b-2 border-purple-500 h-[32vh]">
-          <div class="flex flex-col justify-between items-end border-r-2 h-[34vh] w-[26vw] -mt-4 text-right border-purple-500 p-4">
+        <div class="flex w-screen border-b-[1px] border-purple-500 h-[32vh]">
+          <div class="flex flex-col justify-between items-end border-r-[1px] h-[34vh] w-[26vw] -mt-4 text-right border-purple-500 p-4">
             <h1 class="sponsor-t1 orbitron text-xl">
               TIER <span class="font-bold text-4xl">1</span>
             </h1>
-            <h2 class="sponsor-t1 font-semibold leading-tight mb-2">Perceptron Pro</h2>
+            <h2 class="sponsor-t1 text-sm font-semibold leading-tight mb-2">Perceptron Pro</h2>
           </div>
           <img
             src={janestreet.src}