index and mission route updated

Dockerfile

@@ -1,48 +1,32 @@
-# syntax = docker/dockerfile:1
+# Use the official Node.js image as the base image
+FROM node:18-alpine AS base
 
-# Adjust NODE_VERSION as desired
-ARG NODE_VERSION=20.10.0
-FROM node:${NODE_VERSION}-slim as base
-
-LABEL fly_launch_runtime="Remix"
-
-# Remix app lives here
+# Set the working directory
 WORKDIR /app
 
-# Set production environment
-ENV NODE_ENV="production"
-
-# Throw-away build stage to reduce size of final image
-FROM base as build
-
-# Install packages needed to build node modules
-RUN apt-get update -qq && \
-    apt-get install --no-install-recommends -y build-essential node-gyp pkg-config python-is-python3
+# Copy package.json and package-lock.json
+COPY package.json package-lock.json ./
 
-# for alpine-based images
-# RUN apk add ca-certificates fuse3 sqlite
-# or for debian/ubuntu-based images
-# RUN apt-get update -y && apt-get install -y ca-certificates fuse3 sqlite3
+# Install dependencies
+RUN npm install
 
-# Install node modules
-COPY --link package-lock.json package.json ./
-RUN npm ci --include=dev
+# Copy the rest of the application code
+COPY . .
 
-# Copy application code
-COPY --link . .
-
-# Build application
+# Build the application
 RUN npm run build
 
-# Remove development dependencies
-RUN npm prune --omit=dev
+# Use a smaller base image for the final stage
+FROM node:18-alpine AS final
+
+# Set the working directory
+WORKDIR /app
 
-# Final stage for app image
-FROM base
+# Copy the built application from the previous stage
+COPY --from=base /app /app
 
-# Copy built application
-COPY --from=build /app /app
+# Expose the port the app runs on
+EXPOSE 3000
 
-# Start the server by default, this can be overwritten at runtime
-EXPOSE 5173
-CMD [ "npm", "run", "start" ]
+# Start the application
+CMD ["npm", "start"]

app/components/CTA/Hero.tsx

@@ -0,0 +1,41 @@
+import { Container } from '../ui/Container';
+import { AltButton } from '../ui/AltButton';
+import { SocialLinks } from '../ui/socialLinks';
+import { FadeIn } from '../ui/FadeIn';
+
+export function Hero() {
+   return (
+      <div className="overflow-hidden 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-5xl">
+                  <h1 className="font-display text-balance text-6xl/[0.9] font-medium tracking-tight text-neutral-950 sm:text-8xl/[0.8] md:text-9xl/[0.8]">
+                     Learning Networking Community
+                  </h1>
+                  <p className="mt-8 max-w-2xl text-xl/7 font-medium text-neutral-950/75 sm:text-2xl/8">
+                     Discover a welcoming community of passionate tech enthusiasts in San Antonio
+                  </p>
+                  <div className="mt-8 flex flex-col gap-x-6 gap-y-4 sm:flex-row">
+                  <AltButton
+                        variant="primary"
+                        href="/mission"
+                     >
+                        Our Mission
+                     </AltButton>
+                     <AltButton
+                        href="https://donate.stripe.com/00g3cq2yM2XsbGU144"
+                        variant="secondary"
+                     >
+                        Tax-Deductible Donation{' '}
+                        <span className="arrow">→</span>
+                     </AltButton>
+                  </div>
+                  <div className="mt-8 flex items-center justify-center gap-8 py-3 md:hidden">
+                        <SocialLinks />
+                  </div>
+               </div>
+            </FadeIn>
+         </Container>
+      </div>
+   );
+}

app/components/CTA/scroll.tsx

@@ -0,0 +1,72 @@
+import { motion, useScroll, useTransform } from 'motion/react';
+import { useRef } from 'react';
+import { FadeIn } from '../ui/FadeIn';
+import { Container } from '../ui/Container';
+
+const words = [
+  "Community Focused on Learning and Networking!",
+  "Passionate Tech Enthusiasts",
+  "A Coworking Space",
+  "Focused on Engagement, Not Sales",
+  "The Techie Community",
+  "More than a Discord Community",
+  "Platform that promotes collaboration",
+  "Connection to the local tech community"
+];
+
+const WordList = ({ scrollYProgress }: { scrollYProgress: any }) => {
+  return (
+    <ul
+      aria-hidden="true"
+      className="list-none p-0 m-0 font-semibold"
+      style={{ '--count': words.length } as React.CSSProperties}
+    >
+      {words.map((item, index) => {
+        const opacity = useTransform(
+          scrollYProgress,
+          [index / words.length, (index + 1) / words.length],
+          [0, 1]
+        );
+        const color = useTransform(
+          scrollYProgress,
+          [index / words.length, (index + 1) / words.length],
+          ['#000', '#f00'] // Change colors as needed
+        );
+        return (
+          <motion.li
+            key={index}
+            className="scroll-snap-align-center text-4xl md:text-6xl font-semibold"
+            style={{ '--i': index, opacity, color } as React.CSSProperties}
+          >
+            {item}
+          </motion.li>
+        );
+      })}
+    </ul>
+  );
+};
+
+export function Scroll() {
+  const ref = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ["start end", "end start"]
+  });
+
+  return (
+    <>
+      <Container className="">
+        <FadeIn>
+            <div ref={ref} className="flex flex-col items-center justify-center px-8 md:px-20">
+            <h1 className="font-display text-center text-balance text-6xl/[0.9] font-medium tracking-tight text-centroYellow sm:text-8xl/[0.8] md:text-9xl/[0.8]">
+            <strong className='sticky'>WTF is DEVSA?</strong>
+                <span className="block text-2xl md:text-4xl font-normal">
+                  <WordList scrollYProgress={scrollYProgress} />
+                </span>
+              </h1>
+            </div>
+        </FadeIn>
+      </Container>
+    </>
+  );
+}