Untitled
LilBro
plain_text
a month ago
3.0 kB
5
Indexable
// FeatureSection.jsx import React from 'react'; import { CircleArrowUp } from 'lucide-react'; import Image from 'next/image'; const FeatureCard = ({ title, subtitle, icon }) => { return ( <div className="bg-white rounded-3xl shadow-md overflow-hidden max-w-xs mx-auto transition-transform duration-300 hover:transform hover:scale-105"> <div className="p-6 flex flex-col items-center text-center"> <div className="mb-6"> {icon} </div> <h3 className="text-2xl font-bold text-gray-900 mb-3">{title}</h3> <p className="text-gray-600 mb-6">{subtitle}</p> <button className="w-full py-4 px-6 bg-primary text-white rounded-full flex items-end justify-items-end justify-center gap-2 text-lg font-semibold hover:bg-primary/80 transition-colors duration-300"> <span>Explore Now</span> <CircleArrowUp className='rotate-45'/> </button> </div> </div> ); }; const FeatureSection = () => { const features = [ { title: "Electronic Health Records (EHR)", subtitle: "Your Medical History, Anytime, Anywhere", icon: ( <div className="relative w-64 h-64"> <div className="absolute inset-0 z-20"> <Image src="/assets/ehr.svg" width={800} height={800} alt="Hero Pills" className='scale-125'/> </div> </div> ) }, { title: "Smart OPD Booking System", subtitle: "Book Appointments And OPD On Your Fingertips", icon: ( <div className="relative w-64 h-64"> <div className="absolute inset-0 z-20"> <Image src="/assets/booking.svg" width={600} height={600} alt="Hero Pills"/> </div> </div> ) }, { title: "Emergency Care Approval", subtitle: "Authorized emergency access for critical care.", icon: ( <div className="relative w-64 h-64"> <div className="absolute inset-0 z-20"> <Image src="/assets/emergency.svg" width={600} height={600} alt="Hero Pills"/> </div> </div> ) } ]; return ( <section className="py-16 bg-gray-50"> <div className="container mx-auto px-4"> <div className="text-center mb-12"> <h2 className="text-3xl font-bold text-gray-900 mb-4">Healthcare at Your Fingertips</h2> <p className="text-gray-600 max-w-2xl mx-auto"> Modern tools to manage your health conveniently and securely. </p> </div> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2"> {features.map((feature, index) => ( <FeatureCard key={index} title={feature.title} subtitle={feature.subtitle} icon={feature.icon} /> ))} </div> </div> </section> ); }; export default FeatureSection;
Editor is loading...
Leave a Comment