From de973f9baa3c25f3b2538a7dcdaf79fd365fa4bb Mon Sep 17 00:00:00 2001 From: Vinay Anand Lodhi Date: Sat, 2 Nov 2024 16:54:17 +0530 Subject: [PATCH] stats section added --- frontend/package-lock.json | 33 +++++++++++++++++++++ frontend/package.json | 2 ++ frontend/src/Pages/AboutUs.jsx | 5 ++++ frontend/src/components/Stats.css | 40 ++++++++++++++++++++++++++ frontend/src/components/Stats.jsx | 48 +++++++++++++++++++++++++++++++ 5 files changed, 128 insertions(+) create mode 100644 frontend/src/components/Stats.css create mode 100644 frontend/src/components/Stats.jsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 3e66b78..4a16453 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -19,12 +19,14 @@ "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-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", "socket.io-client": "^4.8.0", "station-saarthi": "file:", @@ -3364,6 +3366,12 @@ } } }, + "node_modules/countup.js": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.8.0.tgz", + "integrity": "sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ==", + "license": "MIT" + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -6667,6 +6675,18 @@ "node": ">=0.10.0" } }, + "node_modules/react-countup": { + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/react-countup/-/react-countup-6.5.3.tgz", + "integrity": "sha512-udnqVQitxC7QWADSPDOxVWULkLvKUWrDapn5i53HE4DPRVgs+Y5rr4bo25qEl8jSh+0l2cToJgGMx+clxPM3+w==", + "license": "MIT", + "dependencies": { + "countup.js": "^2.8.0" + }, + "peerDependencies": { + "react": ">= 16.3.0" + } + }, "node_modules/react-datepicker": { "version": "7.5.0", "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-7.5.0.tgz", @@ -6813,6 +6833,19 @@ "react-dom": ">=16.8" } }, + "node_modules/react-visibility-sensor": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/react-visibility-sensor/-/react-visibility-sensor-5.1.1.tgz", + "integrity": "sha512-cTUHqIK+zDYpeK19rzW6zF9YfT4486TIgizZW53wEZ+/GPBbK7cNS0EHyJVyHYacwFEvvHLEKfgJndbemWhB/w==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": ">=16.0.0", + "react-dom": ">=16.0.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 9855490..8e27d84 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -22,12 +22,14 @@ "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-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", "socket.io-client": "^4.8.0", "station-saarthi": "file:", diff --git a/frontend/src/Pages/AboutUs.jsx b/frontend/src/Pages/AboutUs.jsx index 521f558..ff8d56a 100644 --- a/frontend/src/Pages/AboutUs.jsx +++ b/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 = () => { +
+

Our Stats

+ +
{/* Meet the Team Section */}
diff --git a/frontend/src/components/Stats.css b/frontend/src/components/Stats.css new file mode 100644 index 0000000..7ddecf0 --- /dev/null +++ b/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; + } + +} \ No newline at end of file diff --git a/frontend/src/components/Stats.jsx b/frontend/src/components/Stats.jsx new file mode 100644 index 0000000..8ccd15d --- /dev/null +++ b/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 ( +
+ setViewed(prev => ({ ...prev, stationsCovered: true }))} /> + setViewed(prev => ({ ...prev, activeUsers: true }))} /> + setViewed(prev => setViewed(prev => ({ ...prev, totalBookings: true })))} /> + setViewed(prev => ({ ...prev, feedbackRatings: true }))} /> +
+ ); +}; + +const StatItem = ({ title, end, viewed, setViewed }) => ( +
+ isVisible && setViewed()}> + {({ isVisible }) => ( +
+ {viewed || isVisible ? ( + // Use CountUp with a formatted decimal display + + ) : ( + end + )} +
+ )} + +
{title}
+
+); + +export default Stats;