Merge pull request #167 from shibasarkar/develop

feat:#110 Added a Service page

client/src/App.js

@@ -14,7 +14,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import Footer from '../src/modules/common/Footer'; // Import Footer
 import Navbar from './modules/common/Navbar';
 import AnimatedCursor from 'react-animated-cursor';
-
+import ServicePage from './modules/common/Service';
 function App() {
   return (
     <div className="App">
@@ -46,6 +46,7 @@ function App() {
               <Route path="/hospitals" element={<HospitalsList />} />
               <Route path="/panal" element={<HospitalAppointments />} />
               <Route path="/profile" element={<ProfilePage />} />
+              <Route path="/services" element={<ServicePage />} />
             </Routes>
           </div>
           {/* Footer added here */}

client/src/data/index.js

@@ -0,0 +1,33 @@
+import { Heart, Stethoscope,PhoneCall, Ambulance,Clipboard,Hospital} from 'lucide-react';
+export const services = [
+    {
+        icon: Clipboard,
+        title: "Easy Registration",
+        details: "Quickly and easily register for your OPD appointment with just a few simple steps. Save time by avoiding long waits and secure your preferred time slot hassle-free."
+      },
+      {
+        icon: Hospital,
+        title: "Medical Resource Data Sharing",
+        details: "Stay updated on the latest data regarding hospital equipment to ensure you have access to the most current information."
+      },
+      {
+        icon: PhoneCall,
+        title: "24/7 Support",
+        details: "We are here to assist you at any time of the day, ensuring you receive the support you need whenever it's convenient for you."
+      },
+    {
+      icon: Heart,
+      title: "Cardiology",
+      details: "fact that a reader will be distracted by the readable page when looking at its layout."
+    },
+    {
+      icon: Stethoscope,
+      title: "Diagnosis",
+      details: "fact that a reader will be distracted by the readable page when looking at its layout."
+    },
+    {
+      icon: Ambulance,
+      title: "Surgery",
+      details: "fact that a reader will be distracted by the readable page when looking at its layout."
+    }
+  ];

client/src/modules/OPD/Home.jsx

@@ -11,19 +11,26 @@ import FloatingIcons from '../common/FloatingIcons';
 import '../../styles/Home.css'
 
 const ServiceCard = ({ icon: Icon, title, details }) => (
+  <>
   <motion.div
-    className="bg-white rounded-lg shadow-lg p-6 flex flex-col items-center text-center hover:shadow-xl transition-transform transform-gpu"
+    className="bg-white rounded-lg shadow-lg p-6 flex flex-col items-end justify-between hover:shadow-xl transition-transform transform-gpu"
     whileHover={{ scale: 1.05 }}
     whileTap={{ scale: 0.95 }}
     initial={{ opacity: 0, y: 50 }}
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: true }}
-    transition={{ type: "spring", stiffness: 500 }}
+    transition={{ type: 'spring', stiffness: 500 }}
   >
-    <Icon size={48} className="text-blue-500 mb-4" />
-    <h3 className="text-xl font-semibold mb-2">{title}</h3>
-    <p className="text-blue-600">{details}</p>
+    <div className='flex flex-col items-center text-center'>
+      <Icon size={48} className="text-blue-500 mb-4" />
+      <h3 className="text-xl font-semibold mb-2">{title}</h3>
+      <p className="text-gray-600 mb-8">{details}</p>
+    </div>
+    <diV className="flex items-end">
+      <Link>Read more</Link>
+    </diV>
   </motion.div>
+</>
 );
 
 const Button = ({ children, primary, to }) => (
@@ -65,7 +72,10 @@ function Home() {
   ];
 
   return (
-    <div className="bg-gradient-to-b from-blue-50 via-[#e1f3f7] to-blue-50 min-h-screen">
+
+
+    <>
+    <div className="min-h-screen bg-gradient-to-b from-blue-100 to-blue-50">
       <Navbar />
 
       <header className="relative text-black py-16 sm:py-24 md:py-32 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-100 to-white overflow-hidden">
@@ -121,7 +131,7 @@ function Home() {
             Our Services
           </motion.h2>
           <motion.div
-            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"
             initial="hidden"
             whileInView="visible"
             viewport={{ once: false }}
@@ -131,6 +141,11 @@ function Home() {
               <ServiceCard key={index} {...service} />
             ))}
           </motion.div>
+          <motion.div
+          className='flex justify-center items-center'
+          >
+            <Button to="/services">View All</Button>
+          </motion.div>
         </section>
 
         <section className="mb-20 relative">
@@ -206,6 +221,7 @@ function Home() {
         <Review/>
       </main>
     </div>
+    </>
   );
 }
 

client/src/modules/common/Service.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import FloatingIcons from '../common/FloatingIcons';
+import { services } from '../../data';
+import { Link } from 'react-router-dom';
+const ServiceCard = ({ icon: Icon, title, details }) => (
+  <>
+    <motion.div
+      className="bg-white rounded-lg shadow-lg p-6 flex flex-col items-end justify-between hover:shadow-xl transition-transform transform-gpu"
+      whileHover={{ scale: 1.05 }}
+      whileTap={{ scale: 0.95 }}
+      initial={{ opacity: 0, y: 50 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ type: 'spring', stiffness: 500 }}
+    >
+      <div className='flex flex-col items-center text-center'>
+        <Icon size={48} className="text-blue-500 mb-4" />
+        <h3 className="text-xl font-semibold mb-2">{title}</h3>
+        <p className="text-gray-600 mb-8">{details}</p>
+      </div>
+      <diV className="flex items-end">
+        <Link>Read more</Link>
+      </diV>
+    </motion.div>
+  </>
+);
+export default function ServicePage() {
+  return (
+    <>
+      <header className="relative text-black py-16 sm:py-24 md:py-32 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-100 to-white overflow-hidden">
+        <div className="absolute inset-0">
+          <svg
+            className="absolute bottom-0 left-0 right-0"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 1440 320"
+          >
+            <path
+              fill="#e1f3f7"
+              fillOpacity="1"
+              d="M0,64L48,80C96,96,192,128,288,128C384,128,480,96,576,90.7C672,85,768,107,864,128C960,149,1056,171,1152,165.3C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
+            ></path>
+          </svg>
+        </div>
+
+        <div className="max-w-7xl mx-auto relative z-10">
+          <div class="department_container">
+            <div class="container ">
+              <div class="heading_container heading_center">
+                <motion.h2
+                  className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold mb-6 leading-tight"
+                  initial={{ opacity: 0, y: -50 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 1, type: 'spring' }}
+                >
+                  <span>Our Servives</span>
+                </motion.h2>
+                <motion.p className="flex flex-col items-center text-center mb-12">
+                  <span> A better life starts with a beautiful smile</span>
+                </motion.p>
+              </div>
+              <motion.div
+                className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+                initial="hidden"
+                whileInView="visible"
+                viewport={{ once: false }}
+                transition={{ staggerChildren: 0.2 }}
+              >
+                {services.map((service, index) => (
+                  <ServiceCard key={index} {...service} />
+                ))}
+              </motion.div>
+            </div>
+          </div>
+        </div>
+        <FloatingIcons />
+      </header>
+    </>
+  );
+}

client/src/styles/Home.css

@@ -54,22 +54,18 @@ body {
   text-align: center;
   color: black;
   justify-items: center;
-  height: 80vh;
-  /* background-color: aquamarine; */
-  background: linear-gradient(90deg, #fbd8e5, #fff);
+  height:80vh;
+  background-color: aquamarine;
 }
 
 .hero-content h1 {
   font-size: 3rem;
   margin-bottom: 20px;
-  font-weight: 800;
-  color: rgb(161, 114, 222);
 }
 
 .hero-content p {
   font-size: 1.5rem;
   margin-bottom: 40px;
-  color: rgb(220, 51, 147);
 }
 
 .hero-button {