Updated about.jsx

Open-Code-Crafters · Nov 4, 2024 · 1a5be72 · 1a5be72
1 parent 2db9ef6
commit 1a5be72
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/src/views/About.jsx b/src/views/About.jsx
@@ -9,10 +9,11 @@ import "../styles/about.css";
 import styled from 'styled-components';
 import CountUp from 'react-countup';
 import VisibilitySensor from 'react-visibility-sensor';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import TeamMembers from '../components/TeamCarousel';
 import { width } from '@mui/system';
+import AOS from 'aos';
 const About = ({ mode, textcolor }) => {
   const [viewed, setViewed] = useState({
     users: false,
@@ -21,6 +22,11 @@ const About = ({ mode, textcolor }) => {
     hospitals: false,
   });
 
+  useEffect(() => {
+    AOS.init({ duration: 2000 });
+    AOS.refresh();
+  }, [mode]);
+
   const navigate = useNavigate();
   const sloganStyle = {
     color: mode === 'dark' ? '#FFFFFF' : textcolor, // Use white for dark mode, otherwise use textcolor
@@ -32,7 +38,7 @@ const About = ({ mode, textcolor }) => {
 
 
       {/* Hero Section */}
-      <div className="slogan" data-aos="zoom-in" data-aos-duration="2000" style={{marginTop:'3.5rem'}>
+      <div className="slogan" data-aos="zoom-in" data-aos-duration="2000" style={{marginTop:'3.5rem'}}>
         <h2>"Your Fitness, Your Future!"</h2>
         <h3 style={{ backgroundColor: mode === 'dark' ? '#111118' : '#ffffff', color: textcolor }}>- FitFlex Motto</h3>
         <p style={{ backgroundColor: mode === 'dark' ? '#111118' : '#ffffff', color: textcolor }}>
@@ -47,6 +53,7 @@ const About = ({ mode, textcolor }) => {
           sx={{
             background: mode === 'dark' ? 'linear-gradient(135deg, #000000, #444444)' : '#fff',
             color: mode === 'dark' ? '#fff' : '#000',
+            ml: 2
           }}
           data-aos="fade-right"
           data-aos-delay="200"
@@ -66,6 +73,7 @@ const About = ({ mode, textcolor }) => {
           sx={{
             background: mode === 'dark' ? 'linear-gradient(135deg, #000000, #444444)' : '#fff',
             color: mode === 'dark' ? '#fff' : '#000',
+            ml: 2
           }}
           data-aos="fade-left"
           data-aos-delay="200"