begin projects page. basic layout and mapping is set up. just needs s…

…tyling magic

src/data.ts

@@ -4,9 +4,9 @@ const HOME_LINK: LinkType = { name: 'Home', href: '/' }
 
 const mainNavLinks: LinkType[] = [
   HOME_LINK,
-  { name: "About", href: "/about" },
+  { name: 'About', href: '/about' },
   // { name: "Projects", href: "#" },
-  { name: "Contact", href: "/links" },
+  { name: 'Contact', href: '/links' },
 ]
 
 const instagramURL = 'https://www.instagram.com/comet_robotics_utd/'
@@ -98,4 +98,42 @@ const linksPageLinks: LinkType[] = [
   },
 ]
 
-export { mainNavLinks, HOME_LINK, footerLinks, socialLinks, clubEmail, sponsorLinks, discordInvite, makerspaceMap, websiteRepo, linksPageLinks, instagramURL }
+const competitiveTeams = [
+  {
+    name: 'ChessBots',
+    href: '#',
+  },
+  {
+    name: 'Solis Rover Project',
+    href: '#',
+  },
+  {
+    name: 'VexU',
+    href: '#',
+  },
+  {
+    name: 'SumoBots',
+    href: '#',
+  },
+]
+
+const combatTeams = [
+  {
+    name: 'Blender',
+    href: '#',
+  },
+  {
+    name: '3lb Impulse',
+    href: '#',
+  },
+  {
+    name: 'Blended Donut',
+    href: '#',
+  },
+  {
+    name: 'Proxima Centauri',
+    href: '#',
+  },
+]
+
+export { mainNavLinks, HOME_LINK, footerLinks, socialLinks, clubEmail, sponsorLinks, discordInvite, makerspaceMap, websiteRepo, linksPageLinks, instagramURL, competitiveTeams, combatTeams }

src/pages/projects.astro

@@ -0,0 +1,66 @@
+---
+import '../styles/reset.css'
+import '../styles/index.css'
+import '../styles/App.css'
+import BaseLayout from '../layouts/base.astro'
+import Join from '../components/join.astro'
+import { competitiveTeams, combatTeams } from '../data'
+---
+
+<BaseLayout title="Projects">
+  <div
+    class="main-container"
+    style="padding-top: 200px; display: flex; background: linear-gradient(#230508 70%, var(--text-dark));"
+  >
+    <div
+      class="projects-container"
+      style="margin: auto; max-width: 50em; width: 100%; display: flex; flex-direction: column; gap: 2em; padding: 0 2em;"
+    >
+      <div class="projects-header" style="margin: auto; justify-content:center">
+        <h1>Projects</h1>
+        <h2>Subtitle here</h2>
+      </div>
+      <div class="comp-robotics">
+        <h2>Competitive Robotics</h2>
+        <div
+          class="grid-container"
+          style="display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 20px;"
+        >
+          {
+            competitiveTeams.map((team) => (
+              <div
+                class="project-card"
+                style="background-image: url('image-url-1'); background-size: cover; background-position: center;"
+              >
+                <p>{team.name}</p>
+                <a href={team.href}>Click me!</a>
+              </div>
+            ))
+          }
+        </div>
+      </div>
+
+      <div class="comb-robotics">
+        <h2>Combat Robotics</h2>
+        <div
+          class="grid-container"
+          style="display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 20px;"
+        >
+          {
+            combatTeams.map((team) => (
+              <div
+                class="project-card"
+                style="background-image: url('image-url-1'); background-size: cover; background-position: center;"
+              >
+                <p>{team.name}</p>
+                <a href={team.href}>Click me!</a>
+              </div>
+            ))
+          }
+        </div>
+      </div>
+    </div>
+    <div></div>
+  </div>
+  <Join theme="light" />
+</BaseLayout>