From 6b06a3b9b421c44e51baeacac4f6674fb89c0841 Mon Sep 17 00:00:00 2001 From: shiven Date: Tue, 29 Oct 2024 20:18:11 +0530 Subject: [PATCH] Added Testimonials page --- client/src/App.js | 29 +++- client/src/pages/Testimonials.jsx | 78 ++++++++++ client/src/pages/newelcome.jsx | 242 ++++++++++++++++++++++++++++++ 3 files changed, 344 insertions(+), 5 deletions(-) create mode 100644 client/src/pages/Testimonials.jsx create mode 100644 client/src/pages/newelcome.jsx diff --git a/client/src/App.js b/client/src/App.js index 753782b..734c3c2 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,10 +1,11 @@ -import { - BrowserRouter as Router, -} from 'react-router-dom'; +import React from 'react'; +import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'; import { UserProvider } from './store/userContext'; import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import Layout from './components/Layout'; +import NewWelcome from './pages/newelcome'; +import Testimonials from './pages/Testimonials'; import { useState, useEffect } from 'react'; import Preloader from './components/PreLoader'; @@ -28,7 +29,25 @@ function App() { <> - + + + + + + + + + + @@ -38,4 +57,4 @@ function App() { ); } -export default App; +export default App; \ No newline at end of file diff --git a/client/src/pages/Testimonials.jsx b/client/src/pages/Testimonials.jsx new file mode 100644 index 0000000..b6cb3b8 --- /dev/null +++ b/client/src/pages/Testimonials.jsx @@ -0,0 +1,78 @@ +import React from 'react'; + +const Testimonials = () => { + return ( +
+
+

Testimonials & Reviews

+

Enhancing Healthcare Delivery with Medi-Connect

+
+
+
+
+
50+
+
Hospitals Onboarded
+
+
+
100k+
+
Patients Served
+
+
+
4.8
+
User Rating
+
+
+ +

What Our Users Are Saying

+
+
+
+ + + +
+

Dr. Suresh Sharma

+
★★★★★
+

+ "Medi-Connect has revolutionized the way we manage our OPD operations. The queue management system has significantly reduced patient wait times and improved overall efficiency." +

+
+
+
+ + + +
+

Nurse Anjali Kapoor

+
★★★★☆
+

+ "The bed availability tracking and emergency allocation features have been a game-changer for us. We can now respond to critical situations much more efficiently." +

+
+
+
+ + + +
+

Patient Reena Gupta

+
★★★★★
+

+ "As a patient, I've found Medi-Connect to be incredibly user-friendly. The online appointment booking and real-time queue updates have made my hospital visits much more convenient." +

+
+
+ +
+

Experience the Difference with Medi-Connect

+

Streamline your hospital operations and improve patient care today.

+ + Learn More ➡ + +
+
+
+ ); +}; + +export default Testimonials; \ No newline at end of file diff --git a/client/src/pages/newelcome.jsx b/client/src/pages/newelcome.jsx new file mode 100644 index 0000000..d9a11d3 --- /dev/null +++ b/client/src/pages/newelcome.jsx @@ -0,0 +1,242 @@ +import React, { useEffect, useState } from 'react'; + +const newelcome = () => { + const [registrationCount, setRegistrationCount] = useState(0); + const [userCount, setUserCount] = useState(0); + + useEffect(() => { + const counterInterval = setInterval(incrementCounters, 50); + + return () => clearInterval(counterInterval); // Cleanup interval on component unmount + }, []); + + const incrementCounters = () => { + setRegistrationCount(prevCount => { + if (prevCount < 500) { + const newCount = prevCount + Math.floor(Math.random() * 10 + 1); + return newCount > 500 ? 500 : newCount; + } + return prevCount; + }); + + setUserCount(prevCount => { + if (prevCount < 500) { + const newCount = prevCount + Math.floor(Math.random() * 15 + 1); + return newCount > 500 ? 500 : newCount; + } + return prevCount; + }); + }; + + useEffect(() => { + const particleCount = 100; + for (let i = 0; i < particleCount; i++) { + const particle = document.createElement('div'); + particle.classList.add('particle'); + const size = Math.random() * 10 + 5; // Random size between 5 and 15px + particle.style.width = `${size}px`; + particle.style.height = `${size}px`; + particle.style.backgroundColor = `rgba(255, 255, 255, ${Math.random()})`; // Random opacity + particle.style.top = `${Math.random() * 100}vh`; + particle.style.left = `${Math.random() * 100}vw`; + particle.style.animationDelay = `${Math.random() * 2}s`; // Random animation delay + document.body.appendChild(particle); + } + + // Cursor tail effect + const coords = { x: 0, y: 0 }; + const circles = document.querySelectorAll(".circle"); + const colors = ["#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d", "#e36e5c", "#df685c", "#d5585c"]; + + circles.forEach((circle, index) => { + circle.x = 0; + circle.y = 0; + circle.style.backgroundColor = colors[index % colors.length]; + }); + + window.addEventListener("mousemove", (e) => { + coords.x = e.clientX; + coords.y = e.clientY; + }); + + const animateCircles = () => { + let x = coords.x; + let y = coords.y; + + circles.forEach((circle, index) => { + circle.style.left = x - 12 + "px"; + circle.style.top = y - 12 + "px"; + circle.style.transform = `scale(${(circles.length - index) / circles.length})`; + + circle.x = x; + circle.y = y; + + const nextCircle = circles[index + 1] || circles[0]; + x += (nextCircle.x - x) * 0.3; + y += (nextCircle.y - y) * 0.3; + }); + + requestAnimationFrame(animateCircles); + }; + + animateCircles(); + }, []); + + return ( +
+ + +
+
+

Welcome to Medi-Connect

+

Revolutionizing Healthcare Management

+ + Explore Medi-Connect + +
+
+
+
+{registrationCount}
+

Hospitals Onboarded

+
+
+
+{hospitalCount}
+

Patients Served

+
+
+
+ ); +}; + + +export default newelcome;