Fix production versions in packages

Dockerfile

@@ -1,20 +1,37 @@
 # Build stage
-FROM node:18-alpine as build
+FROM --platform=linux/amd64 node:18-alpine as build
 ARG NODE_ENV=production
 ENV NODE_ENV=${NODE_ENV}
 WORKDIR /app
+
+# System dependencies with enhanced build tools
+RUN apk add --no-cache python3 make g++ curl git libc6-compat
+
+# Clean and prepare npm
+RUN npm cache clean --force
+RUN npm install -g npm@latest
+
+# Install dependencies with matching versions
 COPY package*.json ./
-RUN npm ci
+RUN npm ci --no-optional --platform=linux --arch=x64 --libc=musl
 RUN npm install -g typescript
-RUN npm install --save-dev @types/react-dom @types/vite @vitejs/plugin-react
+RUN npm install --save-dev @types/react-dom
+RUN npm install @rollup/rollup-linux-x64-musl
+RUN npm install esbuild@0.21.5
+
+# Copy source code and build
 COPY . .
 RUN npm run build
 
-# Production stage
+# Production stage with Nginx
 FROM nginx:alpine
 COPY --from=build /app/dist /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Health check for container monitoring
 HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
   CMD curl -f http://localhost/ || exit 1
+
+# Expose port and start Nginx
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "ROLLUP_SKIP_NODE_RESOLVE=true tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },

src/pages/About.tsx

@@ -4,7 +4,7 @@ import { FaGraduationCap, FaAward, FaHandsHelping } from 'react-icons/fa'
 import SnowPeaks from '../components/SnowPeaks'
 
 const About = () => {
-  const [ref, inView] = useInView({
+  const { ref, inView } = useInView({
     triggerOnce: true,
     threshold: 0.1,
   })
@@ -105,10 +105,13 @@ const About = () => {
 
       {/* Vision Section */}
       <section className="py-20 bg-secondary text-accent-snow">
-        <div className="max-w-7xl mx-auto px-4 text-center">
+        <div 
+          ref={ref}
+          className="max-w-7xl mx-auto px-4 text-center"
+        >
           <motion.div
             initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
+            animate={inView ? { opacity: 1, y: 0 } : {}}
             transition={{ duration: 0.8 }}
           >
             <h2 className="text-3xl font-bold mb-6">Our Vision</h2>
@@ -122,4 +125,4 @@ const About = () => {
   )
 }
 
-export default About
+export default About

src/pages/Contact.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { motion } from 'framer-motion'
-import { FaEnvelope, FaMapMarkerAlt, FaClock } from 'react-icons/fa'
+import { FaEnvelope, FaMapMarkerAlt } from 'react-icons/fa'
 
 const Contact = () => {
   const [formData, setFormData] = useState({

src/pages/Home.tsx

@@ -1,18 +1,12 @@
 import { motion } from 'framer-motion'
 import { useInView } from 'react-intersection-observer'
-import { useNavigate } from 'react-router-dom'
 
 const Home = () => {
-  const navigate = useNavigate()
   const [ref, inView] = useInView({
     triggerOnce: true,
     threshold: 0.1,
   })
 
-  const handleLearnMore = () => {
-    navigate('/services')
-  }
-
   return (
     <div>
       {/* Hero Section */}
@@ -41,7 +35,9 @@ const Home = () => {
             </p>
           </motion.div>
         </div>
-      </section>      {/* Mission Statement Section */}
+      </section>
+
+      {/* Mission Statement Section */}
       <motion.section
         ref={ref}
         initial={{ opacity: 0, y: 50 }}
@@ -62,4 +58,4 @@ const Home = () => {
   )
 }
 
-export default Home
+export default Home

src/pages/Services.tsx

@@ -5,9 +5,25 @@ import { FaFileAlt, FaGlobe, FaUsers, FaChalkboardTeacher, FaTimes, FaMapMarkerA
 
 const geoUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json"
 
-const relationshipPoints = [
+type Coordinates = [number, number]
+
+interface Event {
+  name: string
+  description: string
+  startDate: string
+  endDate: string
+}
+
+interface RelationshipPoint {
+  coordinates: Coordinates
+  city: string
+  state: string
+  events: Event[]
+}
+
+const relationshipPoints: RelationshipPoint[] = [
   {
-    coordinates: [-106.6504, 35.0844],
+    coordinates: [-106.6504, 35.0844] as Coordinates,
     city: "Albuquerque",
     state: "New Mexico",
     events: [{
@@ -18,7 +34,7 @@ const relationshipPoints = [
     }]
   },
   {
-    coordinates: [-80.8431, 35.2271],
+    coordinates: [-80.8431, 35.2271] as Coordinates,
     city: "Charlotte",
     state: "North Carolina",
     events: [{
@@ -29,7 +45,7 @@ const relationshipPoints = [
     }]
   },
   {
-    coordinates: [-104.9903, 39.7392],
+    coordinates: [-104.9903, 39.7392] as Coordinates,
     city: "Denver",
     state: "Colorado",
     events: [
@@ -48,7 +64,7 @@ const relationshipPoints = [
     ]
   },
   {
-    coordinates: [-84.3879, 33.7490],
+    coordinates: [-84.3879, 33.7490] as Coordinates,
     city: "Atlanta",
     state: "Georgia",
     events: [{
@@ -59,7 +75,7 @@ const relationshipPoints = [
     }]
   },
   {
-    coordinates: [-93.2650, 44.9778],
+    coordinates: [-93.2650, 44.9778] as Coordinates,
     city: "Minneapolis",
     state: "Minnesota",
     events: [{
@@ -70,7 +86,7 @@ const relationshipPoints = [
     }]
   },
   {
-    coordinates: [-87.6298, 41.8781],
+    coordinates: [-87.6298, 41.8781] as Coordinates,
     city: "Chicago",
     state: "Illinois",
     events: [{
@@ -81,7 +97,7 @@ const relationshipPoints = [
     }]
   },
   {
-    coordinates: [-98.4936, 29.4241],
+    coordinates: [-98.4936, 29.4241] as Coordinates,
     city: "San Antonio",
     state: "Texas",
     events: [{
@@ -92,7 +108,7 @@ const relationshipPoints = [
     }]
   },
   {
-    coordinates: [-89.4012, 43.0731],
+    coordinates: [-89.4012, 43.0731] as Coordinates,
     city: "Madison",
     state: "Wisconsin",
     events: [{
@@ -103,7 +119,7 @@ const relationshipPoints = [
     }]
   },
   {
-    coordinates: [-94.8191, 38.8814],
+    coordinates: [-94.8191, 38.8814] as Coordinates,
     city: "Olathe",
     state: "Kansas",
     events: [{
@@ -114,7 +130,7 @@ const relationshipPoints = [
     }]
   },
   {
-    coordinates: [-115.1398, 36.1699],
+    coordinates: [-115.1398, 36.1699] as Coordinates,
     city: "Las Vegas",
     state: "Nevada",
     events: [{