From 5ed0662665be9ddae0895819b328d1f688046c12 Mon Sep 17 00:00:00 2001
From: TheMaddax <chris@sigd.net>
Date: Fri, 29 Nov 2024 23:30:50 -0600
Subject: [PATCH] - Relocate Vision section below SnowPeaks - Add DeafGain
 slogan with proper styling and spacing - Optimize spacing between mountain
 line and footer - Remove unused useInView import

---
 src/pages/About.tsx | 51 +++++++++++++++++----------------------------
 1 file changed, 19 insertions(+), 32 deletions(-)

diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index 2236c74..1078f9b 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -1,14 +1,8 @@
 import { motion } from 'framer-motion'
-import { useInView } from 'react-intersection-observer'
 import { FaGraduationCap, FaAward, FaHandsHelping } from 'react-icons/fa'
 import SnowPeaks from '../components/SnowPeaks'
 
 const About = () => {
-  const { ref, inView } = useInView({
-    triggerOnce: true,
-    threshold: 0.1,
-  })
-
   const elizaAchievements = [
     {
       icon: <FaGraduationCap />,
@@ -29,7 +23,6 @@ const About = () => {
 
   return (
     <div className="min-h-screen">
-      {/* Hero Section */}
       <section className="relative py-20 bg-primary text-accent-snow">
         <div className="max-w-7xl mx-auto px-4">
           <motion.div
@@ -45,13 +38,27 @@ const About = () => {
         </div>
       </section>
 
-      {/* Dynamic Snow Peaks */}
       <SnowPeaks />
 
-      {/* Team Members Section */}
-      <section className="py-20 bg-accent-snow">
+      <section className="py-8 bg-accent-snow">
         <div className="max-w-7xl mx-auto px-4">
-          {/* Eliza's Section */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="text-center mb-20"
+          >
+            <h2 className="text-3xl font-bold text-secondary mb-6">Our Vision</h2>
+            <p className="text-xl text-accent-mountain max-w-4xl mx-auto mb-12">
+              Creating a Deaf-designed nationwide hub promoting understanding, empowerment, and inclusivity. 
+              From coast to coast, we're building a nationwide ecosystem of accessibility and empowerment 
+              through strategic partnerships and innovative solutions.
+            </p>
+            <h3 className="text-xl font-semibold text-secondary">
+              "Advocacy nudges the status quo, and we are here to shift paradigms."
+            </h3>
+          </motion.div>
+
           <div>
             <div className="grid md:grid-cols-2 gap-12 items-start">
               <div>
@@ -79,8 +86,7 @@ const About = () => {
             </div>
           </div>
 
-          {/* Mountain Peaks Separator */}
-          <div className="max-w-4xl mx-auto mb-20 py-12">
+          <div className="max-w-4xl mx-auto mb-4 py-2">
             <div className="relative h-32">
               <svg viewBox="0 0 1440 120" className="w-full">
                 <defs>
@@ -102,25 +108,6 @@ const About = () => {
           </div>
         </div>
       </section>
-
-      {/* Vision Section */}
-      <section className="py-20 bg-secondary text-accent-snow">
-        <div 
-          ref={ref}
-          className="max-w-7xl mx-auto px-4 text-center"
-        >
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={inView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-          >
-            <h2 className="text-3xl font-bold mb-6">Our Vision</h2>
-            <p className="text-xl max-w-3xl mx-auto">
-              Creating a Deaf-designed nationwide hub promoting understanding, empowerment, and inclusivity. From coast to coast, we're building a nationwide ecosystem of accessibility and empowerment through strategic partnerships and innovative solutions.
-            </p>
-          </motion.div>
-        </div>
-      </section>
     </div>
   )
 }