put latest posts on landing page

lobstahbots · Dec 24, 2023 · 4edf9d3 · 4edf9d3
1 parent e2c1614
commit 4edf9d3
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 32 deletions.
diff --git a/app/global.css b/app/global.css
@@ -143,7 +143,9 @@ h1 {
 }
 
 .button {
-  display: inline-block;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
   border: 1px;
   border-radius: 0.75em;
   background-color: var(--color-brand);

diff --git a/app/newsletter/page.tsx b/app/newsletter/page.tsx
diff --git a/app/newsletter/styles.module.css b/app/newsletter/styles.module.css
diff --git a/app/page.module.css b/app/page.module.css
@@ -1,9 +1,25 @@
+.buttonRow {
+  display: flex;
+  justify-content: space-between;
+}
+
+.buttons {
+  height: min-content;
+  align-self: baseline;
+}
+
+.follow {
+  font-size: 1.5rem;
+  font-weight: 300;
+}
+
 .leftButtonRow,
 .rightButtonRow {
   display: flex;
   flex-flow: wrap;
   margin-top: 2rem;
   gap: 0.75em;
+  align-items: center;
 }
 
 .rightButtonRow {
@@ -44,16 +60,32 @@
   height: auto;
 }
 
+.posts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  justify-content: center;
+}
+
+.postCard {
+  width: fit-content;
+}
+
 .textBlock {
   align-self: center;
 }
 
 .eventLinks {
   font-weight: 500;
   display: grid;
-  align-self: center;
+  align-items: center;
   gap: 1rem;
   grid-template-columns: repeat(2, 1fr);
+  height: 80%;
+}
+
+.event {
+  height: 100%;
 }
 
 @media (min-width: 1024px) {

diff --git a/app/page.tsx b/app/page.tsx
@@ -12,8 +12,13 @@ import { Instagram } from "react-feather";
 import { Youtube } from "react-feather";
 import { ArrowRight } from "react-feather";
 import SponsorsSection from "../components/sponsors-section";
+import { getAllPosts, getPostSlugs, getPostBySlug } from "../lib/api";
+import PostPreview from "../components/postPreview";
 
 export default function Page () {
+  const data = getAllPosts(["title", "date", "excerpt", "coverImage", "slug"]);
+  const posts = data.slice(0, 3);
+
   return (
     <main>
       <header>
@@ -46,6 +51,7 @@ export default function Page () {
           <div>
             <Image src={eventPhoto} alt="2023 Event Photo" className="responsive-image brand-border" />
           </div>
+          <div className = {styles.event}>
           <div className={styles.eventLinks}>
             <div className={styles.link}>
               <h3>Event 1:</h3>
@@ -64,23 +70,42 @@ export default function Page () {
               <Link href="https://www.thebluealliance.com/event/2023necmp2" className="link">2023 New England FIRST District Championships - Wilson Division</Link>
             </div>
           </div>
+          <div className = {styles.buttons}>
+          <div className={styles.leftButtonRow}>
+          <Link href="/history" className="button">Past Events <ArrowRight /></Link>
+          < Link href = "/awards" className = "button"> Check Out Our Awards< ArrowRight /> </Link>
         </div>
-        <div className={styles.leftButtonRow}>
-          <Link href="/history" className={`${styles.seeMore} border-button`}>Past Events <ArrowRight /></Link>
-          < Link href = "/awards" className = {`${styles.seeMore} border-button`}> Check Out Our Awards< ArrowRight /> </Link>
         </div>
+          </div>
+        </div>
+
       </section>
       <section className="bg-gray">
         <div className="container section">
           <h1>See The Latest</h1>
-          <h4>Follow Us!</h4>
+          <div className = { styles.posts } >
+            {
+              posts.map((post) => (
+                <div className = {styles.postCard}>
+                <PostPreview post= { post } />
+                </div>
+              ))
+            }
+          </div>
+
+          <div className = {styles.buttonRow}>
+          <div className = {styles.leftButtonRow}>
+           <div className = {styles.follow}>Follow Us:</div>
           <div className={styles.mediaIcons}>
             <Link href="https://twitter.com/" target="_blank"><Twitter className={styles.mediaIcon} /></Link>
             <Link href="https://www.instagram.com/burobotics246/?hl=en" target="_blank"><Instagram className={styles.mediaIcon} /></Link>
             <Link href="https://www.youtube.com/@burobotics/" target="_blank"><Youtube className={styles.mediaIcon} /></Link>
           </div>
-          <div className={styles.leftButtonRow}>
-            {/* <Link href="/gallery" className={styles.seeMore}>Gallery <ArrowRight /></Link> */}
+          </div>
+          <div className={styles.rightButtonRow}>
+            <Link href="/blog" className="button"> More Posts <ArrowRight /></Link> 
+            <Link href = "/gallery" className = "button" > Team Gallery <ArrowRight /></Link> 
+          </div>
           </div>
         </div>
       </section>
@@ -91,7 +116,7 @@ export default function Page () {
             <p>What would a team be without its dedicated members? From freshman to senior year, high school students from all over the Greater Boston area collaborate, innovate, and cultivate a variety of practical real-world skills on Team 246.</p>
           </div>
           <div className={styles.leftButtonRow}>
-            <Link href="/team" className="button">Meet The Team</Link>
+            <Link href="/team" className="button">Meet The Team <ArrowRight /></Link>
           </div>
         </div>
         <div>

diff --git a/components/footer.module.css b/components/footer.module.css
@@ -30,8 +30,12 @@
   list-style: none;
 }
 
+.footerLink:hover {
+  text-decoration: underline;
+}
+
 .copyrightSection {
-  background-color: var(--color-neutral-90);
+  background-color: var(--color-neutral-100);
   margin-top: 2rem;
   padding: 2rem 0;
 }
diff --git a/components/footer.tsx b/components/footer.tsx
@@ -15,17 +15,24 @@ export default function Footer () {
                 Boston, MA 02215</p>
             <p><a href="mailto:lobstahbots@gmail.com">lobstahbots@gmail.com</a></p>
           </div>
-          <nav>
+          <nav className = "cols1_1">
+            <div>
             <ul className={styles.footerLinks}>
-              <li><Link href="/history">Past Seasons</Link></li>
-              <li><Link href="/awards" > Awards </Link></li >
-              <li><Link href="/team">Our Team</Link></li>
-              {/* <li><Link href="/newsletter">Newsletter</Link></li> */}
-              <li><Link href="/sponsors">Sponsors</Link></li>
-              <li><Link href="/gallery">Gallery</Link></li>
-              <li><Link href="/contact">Contact</Link></li>
-              <li><Link href="/support" > Support Us </Link></li >
+              <li className = {styles.footerLink}><Link href="/blog" > Posts </Link></li> 
+              <li className = {styles.footerLink}><Link href="/history">Past Seasons</Link></li>
+              <li className = {styles.footerLink}><Link href="/awards" > Awards </Link></li >
+              <li className = {styles.footerLink}><Link href="/team">Our Team</Link></li>
             </ul>
+            </div>
+            <div>
+              <ul className={styles.footerLinks}>
+              <li className = {styles.footerLink}><Link href="/sponsors">Sponsors</Link></li>
+              <li className = {styles.footerLink}><Link href="/gallery">Gallery</Link></li>
+              <li className = {styles.footerLink}><Link href="/contact">Contact</Link></li>
+              <li className = {styles.footerLink}><Link href="/support" > Support Us </Link></li >
+            </ul>
+            </div>
+
           </nav>
         </div>
       </div>