Skip to content

Commit 7d3c193

Browse files
aditya241104aditya241104
authored
Merge pull request #109 from genzz-dev/feature/quicklab-homepage
creates home page for the quicklab
2 parents d7a02f5 + 98d95d2 commit 7d3c193

14 files changed

Lines changed: 576 additions & 8 deletions

‎client/package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"@heroicons/react": "^2.2.0",
1313
"axios": "^1.10.0",
1414
"date-fns": "^4.1.0",
15-
"framer-motion": "^12.23.24",
15+
"framer-motion": "^12.23.26",
1616
"jspdf": "^3.0.1",
1717
"lucide-react": "^0.525.0",
1818
"react": "^19.1.0",

‎client/src/components/quicklab/DesktopFooter.jsx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
export default function DesktopFooter() {
2+
return (
3+
<footer className="bg-lab-black-900 dark:bg-black text-lab-black-100 py-12">
4+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
5+
<div className="grid md:grid-cols-4 gap-8 mb-8">
6+
<div>
7+
<h3 className="text-2xl font-bold mb-4">
8+
<span className="text-white">Quick</span>
9+
<span className="text-lab-yellow-400">Lab</span>
10+
</h3>
11+
<p className="text-lab-black-400">Your trusted healthcare companion</p>
12+
</div>
13+
14+
<div>
15+
<h4 className="font-semibold mb-4 text-white">Quick Ecosystem</h4>
16+
<ul className="space-y-2 text-lab-black-400">
17+
<li>
18+
<a href="#" className="hover:text-lab-yellow-400 transition-colors">
19+
QuickClinic
20+
</a>
21+
</li>
22+
<li>
23+
<a href="#" className="hover:text-lab-yellow-400 transition-colors">
24+
QuickMed
25+
</a>
26+
</li>
27+
<li>
28+
<a href="#" className="hover:text-lab-yellow-400 transition-colors">
29+
QuickLab
30+
</a>
31+
</li>
32+
<li>
33+
<a href="#" className="hover:text-lab-yellow-400 transition-colors">
34+
QuickInsure
35+
</a>
36+
</li>
37+
</ul>
38+
</div>
39+
40+
<div>
41+
<h4 className="font-semibold mb-4 text-white">Resources</h4>
42+
<ul className="space-y-2 text-lab-black-400">
43+
<li>
44+
<a href="#" className="hover:text-lab-yellow-400 transition-colors">
45+
About Us
46+
</a>
47+
</li>
48+
<li>
49+
<a href="#" className="hover:text-lab-yellow-400 transition-colors">
50+
Privacy Policy
51+
</a>
52+
</li>
53+
<li>
54+
<a href="#" className="hover:text-lab-yellow-400 transition-colors">
55+
Terms of Service
56+
</a>
57+
</li>
58+
<li>
59+
<a href="#" className="hover:text-lab-yellow-400 transition-colors">
60+
Contact
61+
</a>
62+
</li>
63+
</ul>
64+
</div>
65+
66+
<div>
67+
<h4 className="font-semibold mb-4 text-white">Stay Connected</h4>
68+
<p className="text-lab-black-400 mb-4">Subscribe for health tips and updates</p>
69+
<div className="flex gap-2">
70+
<input
71+
type="email"
72+
placeholder="Your email"
73+
className="flex-1 px-4 py-2 rounded bg-lab-black-800 text-white border border-lab-black-700 focus:border-lab-yellow-400 focus:outline-none"
74+
/>
75+
<button className="btn-quicklab-primary">Join</button>
76+
</div>
77+
</div>
78+
</div>
79+
80+
<div className="border-t border-lab-black-800 pt-8 text-center text-lab-black-400">
81+
<p>&copy; 2025 Quick Healthcare Ecosystem. All rights reserved.</p>
82+
</div>
83+
</div>
84+
</footer>
85+
);
86+
}

‎client/src/components/quicklab/DesktopNavbar.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// DesktopNavbar.jsx
22
import { Search } from 'lucide-react';
33
import DarkModeToggle from '../ui/DarkModeToggle';
4-
4+
import DesktopFooter from './DesktopFooter';
55
export default function DesktopNavbar({ searchQuery, setSearchQuery }) {
66
return (
77
<nav className="hidden lg:block fixed top-0 left-0 right-0 z-50 bg-white dark:bg-black border-b border-slate-200 dark:border-slate-800 shadow-sm">

‎client/src/components/quicklab/HomePage/AnimatedSection.jsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import { motion, useInView } from 'framer-motion';
3+
4+
const AnimatedSection = ({ children, className = '' }) => {
5+
const ref = React.useRef(null);
6+
const isInView = useInView(ref, { once: true, margin: '-100px' });
7+
8+
return (
9+
<motion.div
10+
ref={ref}
11+
initial={{ opacity: 0, y: 50 }}
12+
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
13+
transition={{ duration: 0.6, ease: 'easeOut' }}
14+
className={className}
15+
>
16+
{children}
17+
</motion.div>
18+
);
19+
};
20+
21+
export default AnimatedSection;

‎client/src/components/quicklab/HomePage/EcosystemSection.jsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import React from 'react';
2+
import { motion } from 'framer-motion';
3+
import AnimatedSection from './AnimatedSection';
4+
5+
const EcosystemSection = () => {
6+
const products = [
7+
{
8+
name: 'QuickClinic',
9+
color: 'blue',
10+
colorClass: 'from-blue-500 to-blue-600',
11+
darkColorClass: 'from-blue-600 to-blue-700',
12+
description: 'Online doctor booking and video consultations',
13+
available: true,
14+
},
15+
{
16+
name: 'QuickMed',
17+
color: 'green',
18+
colorClass: 'from-green-500 to-green-600',
19+
darkColorClass: 'from-green-600 to-green-700',
20+
description: 'Free access to complete medicine information',
21+
available: true,
22+
},
23+
{
24+
name: 'QuickLab',
25+
color: 'yellow',
26+
colorClass: 'from-yellow-500 to-yellow-600',
27+
darkColorClass: 'from-yellow-500 to-yellow-600',
28+
description: 'Book and compare labs across your city',
29+
available: true,
30+
current: true,
31+
},
32+
{
33+
name: 'QuickInsure',
34+
color: 'purple',
35+
colorClass: 'from-purple-500 to-purple-600',
36+
darkColorClass: 'from-purple-600 to-purple-700',
37+
description: 'Buy and claim health insurance seamlessly',
38+
available: false,
39+
},
40+
];
41+
42+
return (
43+
<section id="ecosystem" className="py-20 bg-lab-black-50 dark:bg-lab-black-800">
44+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
45+
<AnimatedSection>
46+
<div className="text-center mb-16">
47+
<h2 className="text-3xl sm:text-4xl font-bold mb-6">
48+
Building a Complete{' '}
49+
<span className="text-lab-yellow-600 dark:text-lab-yellow-400">
50+
Healthcare Ecosystem
51+
</span>
52+
</h2>
53+
<p className="text-lg text-lab-black-700 dark:text-lab-black-300 max-w-3xl mx-auto leading-relaxed">
54+
From appointment booking, we are moving toward building a complete digital healthcare
55+
ecosystem for your convenience—so you only need one platform for all health-related
56+
queries and services. Your health, simplified.
57+
</p>
58+
</div>
59+
</AnimatedSection>
60+
61+
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
62+
{products.map((product, index) => (
63+
<AnimatedSection key={index}>
64+
<motion.div
65+
whileHover={{ y: -8 }}
66+
className="card-quicklab relative overflow-hidden group"
67+
>
68+
{product.current && (
69+
<div className="absolute top-4 right-4">
70+
<span className="badge-quicklab text-xs">You are here</span>
71+
</div>
72+
)}
73+
{!product.available && (
74+
<div className="absolute top-4 right-4">
75+
<span className="bg-lab-black-200 dark:bg-lab-black-700 text-lab-black-700 dark:text-lab-black-300 px-3 py-1 rounded-full text-xs font-semibold">
76+
Coming Soon
77+
</span>
78+
</div>
79+
)}
80+
81+
<div
82+
className={`w-full h-2 bg-gradient-to-r ${product.colorClass} dark:${product.darkColorClass} rounded-t-lg mb-4 -mx-6 -mt-6`}
83+
></div>
84+
85+
<h3 className="text-2xl font-bold mb-2">
86+
<span className="text-lab-black-900 dark:text-lab-black-50">Quick</span>
87+
<span className={`text-${product.color}-600 dark:text-${product.color}-400`}>
88+
{product.name.replace('Quick', '')}
89+
</span>
90+
</h3>
91+
92+
<p className="text-lab-black-600 dark:text-lab-black-400">{product.description}</p>
93+
</motion.div>
94+
</AnimatedSection>
95+
))}
96+
</div>
97+
</div>
98+
</section>
99+
);
100+
};
101+
102+
export default EcosystemSection;

‎client/src/components/quicklab/HomePage/FeaturesSection.jsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import React from 'react';
2+
import { motion } from 'framer-motion';
3+
import AnimatedSection from './AnimatedSection';
4+
import Icons from './Icons';
5+
6+
const FeaturesSection = () => {
7+
const features = [
8+
{
9+
icon: <Icons.Calendar />,
10+
title: 'Online Lab Test Booking',
11+
description:
12+
'Book lab appointments online with ease. Choose home sample collection or visit the lab at your convenience.',
13+
},
14+
{
15+
icon: <Icons.Doctor />,
16+
title: 'Doctor-Linked Reports',
17+
description:
18+
'Reports from labs suggested by your QuickClinic doctor are sent directly to them with personalized remarks—no extra fees for normal results.',
19+
badge: 'Key Feature',
20+
},
21+
{
22+
icon: <Icons.Home />,
23+
title: 'Home Sample Collection',
24+
description:
25+
'Get samples collected from the comfort of your home. Professional staff, timely service, safe handling.',
26+
},
27+
{
28+
icon: <Icons.Star />,
29+
title: 'Honest Lab Reviews',
30+
description:
31+
'Compare labs based on genuine user reviews, ratings, and test availability to make informed decisions.',
32+
},
33+
{
34+
icon: <Icons.Flask />,
35+
title: 'Search by Test Name',
36+
description:
37+
'Find labs offering specific tests across your city. Filter by distance, ratings, and availability.',
38+
},
39+
{
40+
icon: <Icons.Shield />,
41+
title: 'No Hidden Costs',
42+
description:
43+
'Transparent pricing, no consultation fee when results are normal—saving you time and money.',
44+
},
45+
];
46+
47+
return (
48+
<section id="features" className="py-20 bg-white dark:bg-lab-black-900">
49+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
50+
<AnimatedSection>
51+
<div className="text-center mb-16">
52+
<h2 className="text-3xl sm:text-4xl font-bold mb-4">
53+
Why Choose{' '}
54+
<span className="text-lab-yellow-600 dark:text-lab-yellow-400">QuickLab</span>?
55+
</h2>
56+
<p className="text-lg text-lab-black-600 dark:text-lab-black-300 max-w-2xl mx-auto">
57+
Experience seamless lab test booking with features designed for your convenience
58+
</p>
59+
</div>
60+
</AnimatedSection>
61+
62+
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
63+
{features.map((feature, index) => (
64+
<AnimatedSection key={index}>
65+
<motion.div
66+
whileHover={{ y: -8, boxShadow: '0 20px 25px -5px rgba(234, 179, 8, 0.1)' }}
67+
className="card-quicklab h-full relative"
68+
>
69+
{feature.badge && (
70+
<div className="absolute -top-3 -right-3">
71+
<span className="badge-quicklab text-xs">{feature.badge}</span>
72+
</div>
73+
)}
74+
<div className="text-lab-yellow-600 dark:text-lab-yellow-400 mb-4">
75+
{feature.icon}
76+
</div>
77+
<h3 className="text-xl font-semibold mb-3">{feature.title}</h3>
78+
<p className="text-lab-black-600 dark:text-lab-black-400">{feature.description}</p>
79+
</motion.div>
80+
</AnimatedSection>
81+
))}
82+
</div>
83+
</div>
84+
</section>
85+
);
86+
};
87+
88+
export default FeaturesSection;

‎client/src/components/quicklab/HomePage/HeroSection.jsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from 'react';
2+
import { motion } from 'framer-motion';
3+
4+
const HeroSection = () => {
5+
return (
6+
<section className="relative overflow-hidden bg-gradient-to-br from-lab-yellow-50 via-white to-lab-blue-50 dark:from-lab-black-900 dark:via-lab-black-800 dark:to-lab-black-900">
7+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-28">
8+
<div className="text-center">
9+
<motion.div
10+
initial={{ opacity: 0, y: 30 }}
11+
animate={{ opacity: 1, y: 0 }}
12+
transition={{ duration: 0.8 }}
13+
>
14+
<div className="inline-block mb-4">
15+
<span className="badge-quicklab">Smart Healthcare Booking</span>
16+
</div>
17+
18+
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
19+
Book Lab Tests Online,
20+
<br />
21+
<span className="text-lab-yellow-600 dark:text-lab-yellow-400">
22+
Get Doctor Remarks Instantly
23+
</span>
24+
</h1>
25+
26+
<p className="text-xl text-lab-black-600 dark:text-lab-black-300 mb-10 max-w-3xl mx-auto">
27+
Save time and money with doctor-linked lab reports. No consultation fees for normal
28+
results. Book tests, compare labs, and get home sample collection—all in one platform.
29+
</p>
30+
31+
<div className="flex flex-col sm:flex-row gap-4 justify-center">
32+
<motion.button
33+
whileHover={{ scale: 1.05 }}
34+
whileTap={{ scale: 0.95 }}
35+
className="btn-quicklab-primary text-lg px-8 py-4"
36+
>
37+
Book Lab Test Now
38+
</motion.button>
39+
<motion.button
40+
whileHover={{ scale: 1.05 }}
41+
whileTap={{ scale: 0.95 }}
42+
className="btn-quicklab-secondary text-lg px-8 py-4"
43+
>
44+
Find Labs Near You
45+
</motion.button>
46+
</div>
47+
</motion.div>
48+
</div>
49+
</div>
50+
51+
<div className="absolute top-20 right-10 w-72 h-72 bg-lab-yellow-200 dark:bg-lab-yellow-900 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-3xl opacity-20 animate-blob"></div>
52+
<div className="absolute bottom-20 left-10 w-72 h-72 bg-lab-blue-200 dark:bg-lab-blue-900 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
53+
</section>
54+
);
55+
};
56+
57+
export default HeroSection;

0 commit comments

Comments
 (0)