footer update, mission and board route updated

devsanantonio · Dec 17, 2024 · 506bda3 · 506bda3
1 parent f9e8fc0
commit 506bda3
Show file tree

Hide file tree

Showing 22 changed files with 475 additions and 236 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -24,18 +24,10 @@ RUN apt-get update -qq && \
 # or for debian/ubuntu-based images
 # RUN apt-get update -y && apt-get install -y ca-certificates fuse3 sqlite3
 
-# COPY --from=flyio/litefs:0.5 /usr/local/bin/litefs /usr/local/bin/litefs
-
-# ENTRYPOINT litefs mount
-
 # Install node modules
 COPY --link package-lock.json package.json ./
 RUN npm ci --include=dev
 
-# Generate Prisma Client
-# COPY --link prisma .
-# RUN npx prisma generate
-
 # Copy application code
 COPY --link . .
 
@@ -51,17 +43,6 @@ FROM base
 # Copy built application
 COPY --from=build /app /app
 
-# Setup sqlite3 on a separate volume
-RUN mkdir -p /litefs
-VOLUME /litefs
-
-# Copy existing database to the correct directory
-#COPY ./dev.db /litefs/dev.db
-
-# Ensure LiteFS configuration
-# COPY litefs.yml /etc/litefs.yml
-
 # Start the server by default, this can be overwritten at runtime
-EXPOSE 3000
-ENV DATABASE_URL="file:/litefs/dev.db"
+EXPOSE 5173
 CMD [ "npm", "run", "start" ]
diff --git a/app/components/CTA/DiscordCommunity.tsx b/app/components/CTA/DiscordCommunity.tsx
@@ -4,8 +4,8 @@ import { Link } from '@remix-run/react';
 
 export function DiscordCommunity() {
    return (
-      <div className="mt-24 sm:mt-32 lg:mt-40">
-         <Container className="mt-16">
+      <div className="pb-24 pt-16 sm:pb-32 sm:pt-24 md:pb-48 md:pt-32">
+         <Container className="">
             <FadeIn>
                <h2 className="font-display mx-auto mt-6 block max-w-5xl text-balance text-4xl font-medium tracking-tight text-neutral-950 md:text-5xl lg:text-center lg:text-7xl">
                   Find Your Local Tech Community on Discord

diff --git a/app/components/CTA/ExpandableEventCards.tsx b/app/components/CTA/ExpandableEventCards.tsx
@@ -33,7 +33,7 @@ export function ExpandableEventCards() {
    return (
       <>
          <SectionIntro
-            className="mt-24 sm:mt-40 md:mt-32"
+            className=""
             title="Dive into the Archives"
          >
             <p>

diff --git a/app/components/CTA/Geekdom.tsx b/app/components/CTA/Geekdom.tsx
@@ -1,10 +1,11 @@
 import { Container } from '~/components/ui/Container';
 import { AltButton } from '~/components/ui/AltButton';
 import { FadeIn } from '~/components/ui/FadeIn';
+import { Link } from '@remix-run/react';
 
 export function Geekdom() {
    return (
-      <div className="mt-24 sm:mt-32 lg:mt-40">
+      <div className="pb-24 pt-16 sm:pb-32 sm:pt-24 md:pb-48 md:pt-32">
          <Container className="">
             <FadeIn>
                <div className="mx-auto max-w-3xl">
@@ -17,13 +18,13 @@ export function Geekdom() {
                   </div>
                   <p className="mt-8 text-lg text-neutral-600 sm:text-balance sm:text-center sm:text-xl">
                      Professional, student, or simply passionate about
-                     technology, you'll find a supportive community here
+                     technology, you'll find a supportive community here.{' '}
+                     <strong className="bg-clip-text bg-no-repeat text-transparent bg-gradient-to-r py-4 from-purple-500 via-violet-500 to-pink-500 [text-shadow:0_0_rgba(0,0,0,0.1)]">
+                        <Link to="/coworking-space">
+                           Learn more <span aria-hidden="true">→</span>
+                        </Link>
+                     </strong>
                   </p>
-                  <div className="mt-8 lg:flex lg:items-center lg:justify-center">
-                     <AltButton variant="primary" href="/coworking-space">
-                        Learn More
-                     </AltButton>
-                  </div>
                </div>
             </FadeIn>
          </Container>

diff --git a/app/components/CTA/Shop.jsx b/app/components/CTA/Shop.jsx
@@ -18,17 +18,16 @@ export function ShopSection() {
 
    return (
       <div className="cta mt-24 rounded-3xl px-6 py-4 pb-16 pt-16 sm:mt-32 lg:mt-40">
-         <SectionIntro title="Gear Up and Give Back!" invert>
+         <SectionIntro title="Gear Up and Give Back!" invert={true}>
             <p>
                Show your DEVSA pride and support the local developer community
-               with our exclusive swag! Thanks to the{' '}
+               with our exclusive swag! Thanks to the 
                <strong>Python Software Foundation</strong> for allowing us to
                feature Python merch in our store
             </p>
             <Button
                className="mt-8"
-               invert={true}
-               href="https://devsanantonio.printify.me/products"
+               to="https://devsanantonio.printify.me/products"
             >
                Shop Now
             </Button>

diff --git a/app/components/CTA/SlideShow.tsx b/app/components/CTA/SlideShow.tsx
@@ -21,7 +21,8 @@ export function SlideShow() {
 
    return (
       <>
-         <div className="relative mt-24 h-screen w-full sm:mt-32 lg:mt-40">
+      <div className='pb-24 pt-16 sm:pb-32 sm:pt-24 md:pb-48 md:pt-32'>
+         <div className="relative h-screen w-full">
             <ImagesSlider
                images={images}
                overlayClassName="absolute inset-0 bg-neutral-900 bg-opacity-60 z-10"
@@ -75,6 +76,7 @@ export function SlideShow() {
                </motion.div>
             </ImagesSlider>
          </div>
+      </div>
       </>
    );
 }

diff --git a/app/components/CTA/TheMission.jsx b/app/components/CTA/TheMission.jsx
@@ -1,24 +1,15 @@
 import { Container } from '../ui/Container';
 import { FadeIn } from '../ui/FadeIn';
-import { SectionIntro } from '../ui/SectionIntro';
 import { GrayscaleTransitionImage } from '../ui/GrayscaleTransitionImage';
 
 export function MissionSection() {
    return (
-      <div className="mt-0 sm:mt-24">
-         <SectionIntro title="From Frustration to Community!" invert={false}>
-            <p>
-               While San Antonio celebrates its growing reputation as a
-               cybersecurity hub and strengthens ties with Monterrey and the
-               South Texas triangle, we refuse to let the headlines overshadow
-               the needs of San Antonio's tech community
-            </p>
-         </SectionIntro>
-         <div className="mt-24 space-y-24 [counter-reset:section] sm:mt-32 sm:space-y-32">
-            <Tech />
-            <Community />
-         </div>
+      <>
+      <div className="pb-24 pt-16 sm:pb-32 sm:pt-24 md:pb-48 md:pt-32 space-y-24 [counter-reset:section] sm:space-y-32">
+         <Tech />
+         <Community />
       </div>
+      </>
    );
 }
 
@@ -37,7 +28,7 @@ function Section({ title, image, children }) {
             </div>
             <div className="mt-12 lg:mt-0 lg:w-[37rem] lg:flex-none lg:group-even/section:order-first">
                <FadeIn>
-                  <h2 className="font-display mt-2 text-3xl font-medium tracking-tight text-neutral-950 sm:text-4xl">
+                  <h2 className="font-display mx-auto mt-6 block max-w-5xl text-balance text-4xl font-medium tracking-tight text-neutral-950 md:text-5xl lg:text-7xl">
                      {title}
                   </h2>
                   <div className="mt-6">{children}</div>
@@ -56,18 +47,11 @@ function Tech() {
             src: 'https://res.cloudinary.com/jessebubble/image/upload/v1718831915/tv-quest-10-mirror_pwnngy.png',
          }}
       >
-         <div className="space-y-6 text-base text-neutral-600">
-            <p>
-               <strong>Building a Thriving Hub!</strong> San Antonio has a
-               growing ecosystem of community organizations hosting in-person
-               and virtual tech events
-            </p>
+         <div className="space-y-6">
             <p>
                <strong>Collaboration is at the Heart of DEVSA:</strong> By
                working hand-in-hand with existing organizations in the city,
-               we've fostered a network of knowledge sharing and support. Our
-               non-profit status allows us to secure affordable venues, ensuring
-               inclusivity and accessibility for everyone
+               we've fostered a network of knowledge sharing and support
             </p>
             <p>
                <strong>Building a Strong Foundation Together:</strong> From the
@@ -89,13 +73,7 @@ function Community() {
             src: 'https://res.cloudinary.com/jessebubble/image/upload/v1714599154/devsa_u7xs6b.jpg',
          }}
       >
-         <div className="space-y-6 text-base text-neutral-600">
-            <p>
-               <strong>Built by Developers, For the Tech Community:</strong> We
-               understand your needs because we share them. We're a community of
-               passionate techies who believe a strong community thrives on
-               providing real value to its members
-            </p>
+         <div className="space-y-6">
             <p>
                <strong>Focus on Engagement, Not Sales:</strong> We believe in
                empowering the tech community through meaningful connections,

diff --git a/app/components/images/Logo.jsx → app/components/images/Logo.tsx b/app/components/images/Logo.jsx → app/components/images/Logo.tsx
@@ -1,15 +1,58 @@
-// Site Logo
-export function Logo({ ...props }) {
+import { clsx } from 'clsx';
+import { motion } from 'motion/react';
+
+export function Logo({ className }: { className?: string }) {
+   let transition = {
+      duration: 0.5,
+      ease: 'easeInOut',
+   };
+
    return (
-      <svg viewBox="0 0 775.8 581.84" {...props}>
-         <defs>
-            <style>{'.cls-1{fill:#eee;stroke-width:0}'}</style>
-         </defs>
-         <path
-            d="M0 113.14h775.8v436.38c0 17.77-14.55 32.32-32.32 32.32H32.32C14.55 581.84 0 567.29 0 549.52V113.14z"
+      <motion.svg
+         variants={{ idle: {}, active: {} }}
+         initial="idle"
+         whileHover="active"
+         width={127}
+         height={34}
+         viewBox="0 0 775.8 581.84"
+         className={clsx(className, 'overflow-visible')}
+      >
+         <motion.g
+            variants={{
+               idle: { scale: 1, opacity: 1 },
+               active: {
+                  scale: [1, 1.15, 1],
+                  opacity: [1, 0.75, 1],
+                  transition: {
+                     ...transition,
+                     delay: 0,
+                  },
+               },
+            }}
+         >
+            <defs>
+               <style>{'.cls-1{fill:#eee;stroke-width:0}'}</style>
+            </defs>
+            <motion.path
+               d="M0 113.14h775.8v436.38c0 17.77-14.55 32.32-32.32 32.32H32.32C14.55 581.84 0 567.29 0 549.52V113.14z"
+               strokeWidth={0}
+            />
+         </motion.g>
+
+         <motion.g 
             strokeWidth={0}
-         />
-         <g strokeWidth={0}>
+            variants={{
+               idle: { scale: 1, opacity: 1 },
+               active: {
+                  scale: [1, 1.1, 1],
+                  opacity: [1, 0.75, 1],
+                  transition: {
+                     ...transition,
+                     delay: 0.15,
+                  },
+               },
+            }}
+         >
             <path
                fill="#ef436f"
                d="M263.92 0H511.70000000000005V96.96H263.92z"
@@ -22,11 +65,11 @@ export function Logo({ ...props }) {
                d="M743.47 0h-215.6v96.96h247.92V32.32C775.79 14.55 761.24 0 743.47 0z"
                fill="#f58220"
             />
-         </g>
+         </motion.g>
          <path
             className="cls-1"
             d="M371.74 484.88c0 9.7 6.48 16.18 16.18 16.18h258.6c9.7 0 16.18-6.48 16.18-16.18v-48.5c0-9.7-6.48-16.18-16.18-16.18H387.89c-9.7 0-16.18 6.48-16.18 16.18v48.5h.03zM203.66 337.79L103.44 438.01c-8.07 8.07-8.07 19.4 0 25.85l29.1 29.1c8.07 8.07 19.4 8.07 25.85 0l142.24-142.24c7.13-5.94 8.13-16.53 2.19-23.66-.65-.8-1.39-1.54-2.19-2.19L158.39 182.63c-6.48-6.48-19.4-6.48-25.85 0l-29.1 29.1c-8.07 6.48-8.07 17.77 0 25.85L203.66 337.8zM390.51 379.22c-11.9-9-18.17-21.95-18.8-38.83l51.91 1.19c.53 8.96 4.38 13.52 11.57 13.69 2.64.06 4.89-.51 6.75-1.72 1.86-1.2 2.82-3.13 2.88-5.77.08-3.66-1.83-6.68-5.73-9.04-3.91-2.36-10.01-5.11-18.3-8.23-9.89-3.75-18.06-7.38-24.51-10.91-6.45-3.52-11.94-8.56-16.49-15.12-4.55-6.56-6.63-14.9-6.25-25.01.23-10.12 3.03-18.67 8.4-25.66 5.37-6.99 12.6-12.22 21.71-15.68 9.1-3.46 19.3-5.06 30.59-4.8 19.06.44 34.1 5.19 45.11 14.24 11.02 9.06 16.63 21.58 16.85 37.58l-52.57-1.21c-.05-4.4-1.07-7.58-3.08-9.53-2.01-1.95-4.48-2.96-7.41-3.03-2.06-.05-3.76.61-5.11 1.97-1.35 1.36-2.06 3.29-2.11 5.78-.08 3.52 1.79 6.46 5.63 8.82 3.83 2.36 9.96 5.26 18.4 8.68 9.74 3.89 17.76 7.6 24.06 11.12 6.3 3.52 11.73 8.34 16.28 14.46 4.55 6.12 6.73 13.73 6.52 22.82-.22 9.53-2.76 18.02-7.63 25.46-4.87 7.45-11.82 13.19-20.86 17.24-9.04 4.05-19.72 5.93-32.04 5.64-18.62-.43-33.88-5.14-45.78-14.15zM604.53 367.23l-51.14-.29-7.72 23.14-50.49-.29 57.01-153.1 55.48.32 55.03 153.75-50.71-.29-7.45-23.23zM592 335.31l-14.37-42.53-13.37 42.85 27.74-.32z"
          />
-      </svg>
+      </motion.svg>
    );
 }
diff --git a/app/components/ui/Button.jsx b/app/components/ui/Button.jsx
diff --git a/app/components/ui/Button.tsx b/app/components/ui/Button.tsx
@@ -0,0 +1,46 @@
+import * as Headless from '@headlessui/react'
+import { clsx } from 'clsx'
+import { Link } from '@remix-run/react'
+
+const variants = {
+  primary: clsx(
+    'inline-flex items-center justify-center px-4 py-[calc(theme(spacing.2)-1px)]',
+    'rounded-full border border-transparent bg-gray-950 shadow-md',
+    'whitespace-nowrap text-base font-medium text-white',
+    'data-[disabled]:bg-gray-950 data-[hover]:bg-gray-800 data-[disabled]:opacity-40',
+  ),
+  secondary: clsx(
+    'relative inline-flex items-center justify-center px-4 py-[calc(theme(spacing.2)-1px)]',
+    'rounded-full border border-transparent bg-white/15 shadow-md ring-1 ring-[#D15052]/15',
+    'after:absolute after:inset-0 after:rounded-full after:shadow-[inset_0_0_2px_1px_#ffffff4d]',
+    'whitespace-nowrap text-base font-medium text-gray-950',
+    'data-[disabled]:bg-white/15 data-[hover]:bg-white/20 data-[disabled]:opacity-40',
+  ),
+  outline: clsx(
+    'inline-flex items-center justify-center px-2 py-[calc(theme(spacing.[1.5])-1px)]',
+    'rounded-lg border border-transparent shadow ring-1 ring-black/10',
+    'whitespace-nowrap text-sm font-medium text-gray-950',
+    'data-[disabled]:bg-transparent data-[hover]:bg-gray-50 data-[disabled]:opacity-40',
+  ),
+}
+
+type ButtonProps = {
+  variant?: keyof typeof variants
+} & (
+  | React.ComponentPropsWithoutRef<typeof Link>
+  | (Headless.ButtonProps & { to?: undefined })
+)
+
+export function Button({
+  variant = 'primary',
+  className,
+  ...props
+}: ButtonProps) {
+  className = clsx(className, variants[variant])
+
+  if (typeof props.to === 'undefined') {
+    return <Headless.Button {...props} className={className} />
+  }
+
+  return <Link {...props} className={className} />
+}