feat: update copy on kickoff page

src/components/join.astro

@@ -16,7 +16,13 @@ if (theme === 'dark') {
   txtColor = 'white'
 }
 
-const options: {title: string, description: string, url: string}[] = [
+const options: {title: string, description: string, url: string, emphasis?: boolean}[] = [
+  {
+    title: 'Attend the Fall Kickoff',
+    description: 'Kickoff is our official start to the year. This event is a great way to learn about all the projects and how to get involved!',
+    url: '/events/kickoff',
+    emphasis: true
+  },
   {
     title: 'Join the Discord',
     description: 'Our Discord is the primary communication method for the club - join for updates on meeting times, projects, and more.',
@@ -58,20 +64,20 @@ const options: {title: string, description: string, url: string}[] = [
       > at the <strong>UTDesign Makerspace.</strong>
     </p>
     <div class="join-content" style={{ display: 'flex', gap: '2rem' }}>
-      {options.map(({url, title, description}) => (
+      {options.map(({url, title, description, emphasis}) => (
        <a
         class="no-decoration"
         href={url}
         target="_blank"
         rel="noreferrer"
         style={{
-          backgroundColor: '#1e1e1e',
+          backgroundColor: emphasis ? 'var(--primary)' : '#1e1e1e',
           color: 'white',
           padding: '1.5rem',
           borderStyle: 'solid',
           borderRadius: '1.33rem',
           borderColor: txtColor,
-          boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.25)'
+          boxShadow: '0px 8px 8px 0px rgba(0, 0, 0, 0.25)'
         }}
       >
         <h3 class="font-unbounded">{title} &rarr;</h3>

src/pages/events/kickoff.astro

@@ -11,7 +11,7 @@ interface Stat {
 
 let projectTitle: string = 'Fall Kickoff'
 let shortDescription: string =
-  'Comet Robotics invites all students to learn about Comet Robotics, the leading robotics club at UTD!'
+  'Calling all UT Dallas students: come learn about opportunities for you to get involved in Comet Robotics!'
 let headerImage: string = '/events/24FKickoff/combatshow.JPG'
 let images: string[] = [
   '/events/24FKickoff/vexchat.JPG',
@@ -30,6 +30,8 @@ let stats: Stat[] = [
     icon: '/statsGraphics/location.svg',
   },
 ]
+
+const url = "#"
 ---
 
 <BaseLayout title={projectTitle} description={shortDescription}>
@@ -52,30 +54,68 @@ let stats: Stat[] = [
             ))
           }
         </div>
+        <a
+          style={{
+            backgroundColor: 'white',
+            color: 'var(--primary)',
+            padding: '0.5rem 1rem',
+            borderRadius: '999px',
+            fontFamily: '\'Mashine\', sans-serif',
+            textDecoration: 'none',
+            fontSize: '1.25rem'
+          }}
+          href={url}
+          target="_blank"
+        >
+          RSVP
+        </a>
       </div>
       <div class="image-container">
         <img
           src={headerImage}
-          alt="Students viewing comabat robot"
+          alt="Students viewing combat robot"
           class="main-image"
         />
       </div>
     </div>
     <div class="history-section">
-      <h1 class="history-title">Kickoff Details</h1>
+      <h1 class="history-title">What's Kickoff?</h1>
+      <p class="history-text">
+        Kickoff marks our official start to the school year, and is the best place to be if you're interested in being a part of Comet Robotics. From writing software and building mechanisms for robots, to creating content for socials and helping with club logistics, there's a place for you here! 
+      </p>
+      <h2 class="history-title">Why should I come?</h1>
       <p class="history-text">
-        Kickoff will be hosted at the Sciences Building, where students will
-        find our Outdoor Activites, Combat Robotics Fight, Project Displays, and
-        our Kickoff Presentation
+        During Kickoff, you'll...
+        <ul>
+          <li>learn about the club's projects and how you can get involved
+          <li>meet current club members and leadership</li>
+          <li>watch some awesome robots in action</li>
+          <li>get free stuff, thanks to our partners at Red Bull! (You must be an active UTD student to receive items.)</li>
+        </ul>
       </p>
+      <h2 class="history-title">Wait, Free Stuff?</h1>
       <p class="history-text">
-        At Kickoff, you'll be able to get Food, Redbull, T-Shirts, Merch, and
-        more all for free! You must be an active UTD student to receive items.
+        Of course! You'll be able to get free Red Bull at Kickoff, and more to be announced at the event :) Register below to let us know you'll be there, and help us make sure we have enough product to give out!
       </p>
+      <br>
+      <a
+        style={{
+          backgroundColor: 'var(--primary)',
+          padding: '0.5rem 1rem',
+          borderRadius: '999px',
+          fontFamily: '\'Mashine\', sans-serif',
+          textDecoration: 'none',
+          fontSize: '1.25rem',
+          color: '#d9d9d9'
+        }}
+        href={url}
+        target="_blank"
+      >
+        RSVP
+      </a>
       <div class="image-grid">
         {images.map((img) => <img src={img} class="history-image" />)}
       </div>
-      <p class="history-text">Blah blah blah we need more here!</p>
     </div>
   </div>
   <Join theme="dark" />

src/styles/project.css

@@ -30,11 +30,14 @@
 }
 
 .stats {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(2, 1fr);
+  display: flex;
+  flex-wrap: 1;
   gap: 20px;
-  margin: 20px;
+  margin: 20px 0px;
+}
+
+.stats div {
+  width: 50%;
 }
 
 .stats img {
@@ -73,12 +76,16 @@
   border-radius: 20px;
   padding: 20px;
   max-width: 1600px;
+  /* display: flex;
+  flex-direction: column;
+  gap: 0.75rem; */
 }
 
 .history-title {
   font-family: 'Mashine';
   font-weight: bold;
   color: #bf1e2e;
+  padding-top: 20px;
 }
 
 .history-text {
@@ -87,6 +94,7 @@
 }
 
 .image-grid {
+  padding-top: 20px;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   justify-items: center;
@@ -117,12 +125,6 @@
     margin-bottom: 20px;
   }
 
-  .stats {
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: repeat(2, 1fr);
-    width: 100%;
-  }
-
   .image-grid {
     grid-template-columns: 1fr 1fr;
     width: 100%;
@@ -158,10 +160,8 @@
   .history-text {
     font-size: 1.1em;
   }
-
-  .stats {
-    grid-template-columns: 1fr;
-    grid-template-rows: repeat(3, 1fr);
+
+  .stats div {
     width: 100%;
   }
 
@@ -189,10 +189,8 @@
   .history-text {
     font-size: 1em;
   }
-
-  .stats {
-    grid-template-columns: 1fr;
-    grid-template-rows: repeat(3, 1fr);
+
+  .stats div {
     width: 100%;
   }