food component and marquee added to coworking-space route

app/RootLayout.tsx

@@ -61,8 +61,8 @@ function NavBar({
                <Logo className="h-10 w-auto" />
             </Link>
             <div className="flex items-center gap-x-6">
-               <Button href="/community" invert={invert} className="">
-                  Community Events
+               <Button href="/coworking-space" invert={invert} className="">
+                  Free Coworking Space
                </Button>
                <button
                   ref={toggleRef}
@@ -124,13 +124,13 @@ function Navigation() {
       <nav className="font-display mt-px text-5xl font-medium tracking-tight text-white">
          <NavigationRow>
             <NavigationItem href="/mission">Our Mission</NavigationItem>
-            <NavigationItem href="/coworking-space">
-               Coworking Space
-            </NavigationItem>
+            <NavigationItem href="/Community">Community Events</NavigationItem>
          </NavigationRow>
          <NavigationRow>
             <NavigationItem href="/techday">SA Tech Day 2024</NavigationItem>
-            <NavigationItem href="/Community">Tech Community</NavigationItem>
+            <NavigationItem href="/coworking-space">
+               Coworking Space
+            </NavigationItem>
          </NavigationRow>
          <style>
             {`

app/components/CTA/CommunityMarquee.jsx

@@ -14,7 +14,7 @@ export function MarqueeSection() {
 
    return (
       <>
-         <Container className="py-24 sm:py-40 md:py-32">
+         <Container className="py-24 sm:py-32">
             <FadeIn>
                <div className="marquee -my-4 flex justify-center gap-5 py-4 sm:gap-8">
                   {imageArray.map((image, index) => (

app/components/CTA/Hero.jsx

@@ -1,5 +1,5 @@
 import { Container } from '~/components/ui/Container';
-import { Button } from '~/components/ui/Button';
+import { AltButton } from '~/components/ui/AltButton';
 import { SocialMedia } from '~/components/ui/SocialMedia';
 import { FadeIn } from '~/components/ui/FadeIn';
 import { useEffect, useState } from 'react';
@@ -30,17 +30,17 @@ export function Hero() {
                         education, connection, and opportunity
                      </p>
                      <div className="flex items-center">
-                        <Button invert={false} className="mt-8" href="/mission">
+                        <AltButton variant="primary" className="mt-8" href="/mission">
                            Our Mission
-                        </Button>
-                        <Button
+                        </AltButton>
+                        <AltButton
                            className="ml-4 mt-8"
                            href="https://donate.stripe.com/00g3cq2yM2XsbGU144"
-                           invert={true}
+                           variant='secondary'
                         >
                            Tax-Deductible Donation{' '}
                            <span className="arrow">→</span>
-                        </Button>
+                        </AltButton>
                      </div>
                   </div>
                   <div className="relative mt-10 sm:mt-20 lg:col-span-5 lg:row-span-2 lg:mt-0 xl:col-span-6">

app/routes/community/route.tsx

@@ -2,7 +2,6 @@ import { PageIntro } from '~/components/ui/PageIntro';
 import { Button } from '~/components/ui/Button';
 import { CalendarSection } from '~/components/CTA/Calendar';
 import { Sponsors } from '~/components/CTA/Sponsors';
-import { MarqueeSection } from '~/components/CTA/CommunityMarquee';
 import { ExpandableEventCards } from '~/components/CTA/ExpandableEventCards';
 import { MetaFunction } from '@remix-run/node';
 
@@ -56,7 +55,6 @@ export default function Index() {
                Subscribe Now
             </Button>
          </PageIntro>
-         <MarqueeSection />
          <CalendarSection />
          <ExpandableEventCards />
          <Sponsors />

app/routes/coworking-space/access.jsx

@@ -4,7 +4,7 @@ import { Button } from '~/components/ui/Button';
 
 export function Access() {
    return (
-      <div className="py-24 sm:py-32">
+      <div className="py-24 sm:py-32 sm:mt-32">
          <Container className="">
             <FadeIn>
                <div className="grid grid-cols-1 gap-10 lg:grid-cols-2 lg:place-items-center">

app/routes/coworking-space/features.jsx

@@ -7,10 +7,10 @@ export function Features() {
       <div className="mt-16 sm:mt-32">
          <SectionIntro title="Your Free Downtown Space for Learning and Networking">
             <p>
-               <strong>Introducing the DEVSA Co-Working Space</strong>, powered
+               <strong>Introducing the DEVSA Coworking Space</strong>, powered
                by Geekdom!{' '}
-               <span className="mt-2 hidden md:mt-0 md:block">
-                  This free, co-working space is designed to bring together tech
+               <span className="hidden md:mt-0 md:block">
+                  This free, coworking space is designed to bring together tech
                   enthusiasts and provide a central location for learning,
                   networking, and collaboration
                </span>
@@ -19,16 +19,16 @@ export function Features() {
          <Container className="mt-16">
             <GridList>
                <GridListItem title="No Geekdom membership required">
-                  Access our 6th-floor space in the heart of downtown San
-                  Antonio free of charge.
+                  Access our 6th-floor coworking space, <strong>#608</strong>, free of charge.
+                  Open Monday through Friday, 9am to 7pm
                </GridListItem>
                <GridListItem title="Inclusive Environment">
                   Enjoy flexible working hours that fit your schedule, and an
                   inclusive environment where everyone feels welcome
                </GridListItem>
                <GridListItem title="Community-Focused">
                   Professional, student, or simply passionate about technology,
-                  you'll find a supportive community here.
+                  you'll find a supportive community here
                </GridListItem>
             </GridList>
          </Container>

app/routes/coworking-space/food.tsx

@@ -0,0 +1,60 @@
+import { Container } from '~/components/ui/Container'
+import { FadeIn, FadeInStagger } from '~/components/ui/FadeIn'
+import { SectionIntro } from '~/components/ui/SectionIntro'
+import clsx from 'clsx'
+
+export function Food({
+    className,
+  }: React.ComponentPropsWithoutRef<'div'>) {
+    return (
+        <>
+        <div className="py-24 sm:py-32">
+            <SectionIntro title="Fuel Up and Recharge">
+            <p>
+                Take a break from work and explore the <strong>Downtown San Antonio food scene</strong>, just steps away from the DEVSA Coworking Space.
+                Here are some local community faves:
+            </p>
+        </SectionIntro>
+        <div
+            className={clsx(
+            className,
+            'flex justify-between max-sm:mx-auto max-sm:max-w-md max-sm:flex-wrap max-sm:justify-evenly max-sm:gap-x-4 max-sm:gap-y-4',
+            )}
+        >
+            <Container className='mt-16'>
+            <FadeInStagger faster>
+                <ul role="list" className="mt-4 grid grid-cols-3 place-items-center gap-0.5 overflow-hidden sm:mx-0 md:grid-cols-5 md:place-items-start">
+                {foodOptions.faves.map(({ name, image, alt }) => (
+                    <li key={name} className="p-8 sm:p-10">
+                    <FadeIn>
+                        <img 
+                        src={image} 
+                        alt={alt} 
+                        className="max-sm:mx-auto h-auto w-full object-contain"
+                        />
+                    </FadeIn>
+                    </li>
+                ))}
+                </ul>
+            </FadeInStagger>
+            </Container>
+        </div>
+        </div>
+        </>
+    );
+  }
+
+  const foodOptions = {
+
+    faves: [
+      { name: "Leo's Hideout", image: 'https://images.squarespace-cdn.com/content/v1/66313d0e4c96af2f3b98e021/d06b451c-ee44-4a06-aa53-c25587d7a358/LH.MascotLogo.png', alt: "Leo's Hideout" },
+      { name: 'Commonwealth', image: 'https://media.licdn.com/dms/image/v2/C4D1BAQGxUIeX7dDa1w/company-background_10000/company-background_10000/0/1583525978521/commonwealth_coffeehouse__bakery_cover?e=1730862000&v=beta&t=gxT15rjgA4YWOL3s7ardAqlXJs1qLqk2pnPasQVUZ4E', alt: 'Commonwealth' },
+      { name: 'Chick-Fil-A', image: 'https://res.cloudinary.com/jessebubble/image/upload/v1730255696/flyers-21-square_2_hkwbdi.png', alt: 'Chick-Fil-A' },
+      { name: 'Royal Blue', image: 'https://static.wixstatic.com/media/4a9319_9b161096f5d84ab78d7da5a41e07706d~mv2.png/v1/fill/w_480,h_206,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Untitled.png', alt: 'Royal Blue' },
+      { name: 'Sojourn Trading co', image: 'https://static.spotapps.co/website_images/ab_websites/111424_website/logo_new_1.png', alt: 'Sojouirn Trading co' },
+      { name: 'Pinkertons BBQ', image: 'https://res.cloudinary.com/jessebubble/image/upload/v1730256037/flyers-21-square_3_zgk5vf.png', alt: 'Pinkertons BBQ' },
+      { name: 'Poblanos', image: 'https://poblanosonmain.com/assets/images/poblanoslogo2020site-lightyellow-232x89.png', alt: 'Poblanos' },
+      { name: 'La Panaderia', image: 'https://res.cloudinary.com/jessebubble/image/upload/v1730255384/flyers-21-square_bojzmp.png', alt: 'La Panaderia' },
+      { name: 'The Indian Night', image: 'https://res.cloudinary.com/jessebubble/image/upload/v1730255384/flyers-21-square_1_php8xi.png', alt: 'The Indian Night' },
+    ],
+  };

app/routes/coworking-space/parking.jsx

@@ -5,7 +5,7 @@ import { SectionIntro } from '~/components/ui/SectionIntro';
 export function Parking() {
    return (
       <>
-         <div className="mt-24 sm:mt-32 lg:mt-40">
+         <div className="py-24 sm:py-32">
             <SectionIntro title="Let's talk about Downtown Parking in San Antonio!">
                <p>
                   We know parking is a top concern when it comes to Downtown San

app/routes/coworking-space/route.tsx

@@ -1,12 +1,14 @@
 import { FadeIn } from '~/components/ui/FadeIn';
 import { Container } from '~/components/ui/Container';
 import { AltButton } from '~/components/ui/AltButton';
+import { MarqueeSection } from '~/components/CTA/CommunityMarquee';
 import { MetaFunction } from '@remix-run/react';
 import { Features } from './features';
 import { Access } from './access';
 import { Parking } from './parking';
 import { useState } from 'react';
 import { Modal } from './modal';
+import { Food } from './food';
 
 export const meta: MetaFunction = () => {
    return [
@@ -111,8 +113,10 @@ export default function Index() {
             </Container>
          </div>
          <Features />
-         <Parking />
          <Access />
+         <Food />
+         <Parking />
+         <MarqueeSection />
       </>
    );
 }