Merge pull request #487 from VinayLodhi1712/stats

stats section added on about us page.#476 done

frontend/package.json

@@ -22,13 +22,15 @@
     "leaflet": "^1.9.4",
     "lucide-react": "^0.453.0",
     "react": "^18.3.1",
+    "react-countup": "^6.5.3",
     "react-datepicker": "^7.4.0",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-icons": "^5.3.0",
     "react-leaflet": "^4.2.1",
     "react-responsive": "^10.0.0",
     "react-router-dom": "^6.26.2",
+    "react-visibility-sensor": "^5.1.1",
     "shadcn-ui": "^0.2.3",
     "sitemap": "^8.0.0",
     "socket.io-client": "^4.8.0",

frontend/src/Pages/AboutUs.jsx

@@ -2,6 +2,7 @@ import React from 'react'; // Importing React
 import { useNavigate } from 'react-router-dom'; // Importing navigation function
 import backicon from '../assets/svg/backicon.svg'; // Importing back icon asset
 import TeamSection from '../components/TeamSection';
+import Stats from '../components/Stats';
 // About component
 const AboutUs = () => {
   // UseNavigate hook for navigation
@@ -112,6 +113,10 @@ const AboutUs = () => {
 </div>
 
 
+<div className="bg-white p-4 rounded-lg shadow-md max-w-5xl mx-auto mb-12">
+<h2 className="text-center text-3xl font-bold text-blue-600 mb-4">Our Stats</h2>
+<Stats/>
+</div>
       {/* Meet the Team Section */}
       <section className="text-center mb-12 max-w-5xl mx-auto">
 

frontend/src/components/Stats.css

@@ -0,0 +1,40 @@
+
+
+.stats-section {
+    display: flex; /* Keep items in a single row */
+    justify-content: space-between; /* Space items evenly */
+    padding: 20px;
+}
+
+.stat-item {
+    text-align: center; /* Center content within each item */
+    flex: 1 1 45%; /* Allow items to take 45% of the row space */
+    margin: 10px; /* Add margin for spacing */
+}
+
+.stat-number {
+    font-size: 2rem; /* Default size for numbers */
+    font-weight: 600;
+}
+
+.stat-title {
+    margin-top: 10px;
+    font-size: 1rem; /* Default size for titles */
+    color: #555;
+}
+
+/* Responsive styles */
+@media (max-width: 768px) {
+    .stat-number {
+        font-size: 1rem; /* Reduced size for numbers on smaller screens */
+    }
+
+    .stat-title {
+        font-size: 0.75rem; /* Reduced size for titles on smaller screens */
+    }
+
+    .stats-section {
+        padding: 0px;
+    }
+
+}

frontend/src/components/Stats.jsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import CountUp from 'react-countup';
+import VisibilitySensor from 'react-visibility-sensor';
+import './Stats.css';
+
+const Stats = () => {
+    const [viewed, setViewed] = useState({
+        stationsCovered: false,
+        activeUsers: false,
+        totalBookings: false,
+        feedbackRatings: false,
+    });
+
+    return (
+        <div className='stats-section'>
+            <StatItem title="Stations Covered" end={200} viewed={viewed.stationsCovered} setViewed={() => setViewed(prev => ({ ...prev, stationsCovered: true }))} />
+            <StatItem title="Active Users" end={1500} viewed={viewed.activeUsers} setViewed={() => setViewed(prev => ({ ...prev, activeUsers: true }))} />
+            <StatItem title="Total Bookings" end={5000} viewed={viewed.totalBookings} setViewed={() => setViewed(prev => setViewed(prev => ({ ...prev, totalBookings: true })))} />
+            <StatItem title="Feedback Ratings" end={4.8} viewed={viewed.feedbackRatings} setViewed={() => setViewed(prev => ({ ...prev, feedbackRatings: true }))} />
+        </div>
+    );
+};
+
+const StatItem = ({ title, end, viewed, setViewed }) => (
+    <div className='stat-item'>
+        <VisibilitySensor partialVisibility offset={{ bottom: 200 }} onChange={isVisible => isVisible && setViewed()}>
+            {({ isVisible }) => (
+                <div className='stat-number'>
+                    {viewed || isVisible ? (
+                        // Use CountUp with a formatted decimal display
+                        <CountUp 
+                            start={0} 
+                            end={typeof end === 'number' && end % 1 !== 0 ? end : Math.floor(end)} 
+                            duration={3} 
+                            decimals={typeof end === 'number' && end % 1 !== 0 ? 1 : 0} 
+                            suffix={typeof end === 'number' && end % 1 !== 0 ? "" : "+"} 
+                        />
+                    ) : (
+                        end
+                    )}
+                </div>
+            )}
+        </VisibilitySensor>
+        <div className='stat-title '>{title}</div>
+    </div>
+);
+
+export default Stats;