From 98d95d27133a28f111b798ff524708d0140ccd97 Mon Sep 17 00:00:00 2001
From: Aditya Shah <adityashah2414@gmail.com>
Date: Mon, 15 Dec 2025 11:04:22 +0530
Subject: [PATCH] creates home page for the quicklab

---
 client/package-lock.json                      |   8 +-
 client/package.json                           |   2 +-
 .../src/components/quicklab/DesktopFooter.jsx |  86 +++++++++++++++
 .../src/components/quicklab/DesktopNavbar.jsx |   2 +-
 .../quicklab/HomePage/AnimatedSection.jsx     |  21 ++++
 .../quicklab/HomePage/EcosystemSection.jsx    | 102 ++++++++++++++++++
 .../quicklab/HomePage/FeaturesSection.jsx     |  88 +++++++++++++++
 .../quicklab/HomePage/HeroSection.jsx         |  57 ++++++++++
 .../components/quicklab/HomePage/Icons.jsx    |  85 +++++++++++++++
 .../quicklab/HomePage/InsuranceSection.jsx    |  30 ++++++
 .../quicklab/HomePage/PromiseSection.jsx      |  54 ++++++++++
 client/src/components/quicklab/Navbar.jsx     |   1 -
 client/src/pages/quicklab/Homepage.jsx        |  45 ++++++++
 client/src/routes/QuickLabRoutes.jsx          |   3 +-
 14 files changed, 576 insertions(+), 8 deletions(-)
 create mode 100644 client/src/components/quicklab/DesktopFooter.jsx
 create mode 100644 client/src/components/quicklab/HomePage/AnimatedSection.jsx
 create mode 100644 client/src/components/quicklab/HomePage/EcosystemSection.jsx
 create mode 100644 client/src/components/quicklab/HomePage/FeaturesSection.jsx
 create mode 100644 client/src/components/quicklab/HomePage/HeroSection.jsx
 create mode 100644 client/src/components/quicklab/HomePage/Icons.jsx
 create mode 100644 client/src/components/quicklab/HomePage/InsuranceSection.jsx
 create mode 100644 client/src/components/quicklab/HomePage/PromiseSection.jsx
 create mode 100644 client/src/pages/quicklab/Homepage.jsx

diff --git a/client/package-lock.json b/client/package-lock.json
index 954eed8..03b5e02 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -12,7 +12,7 @@
         "@heroicons/react": "^2.2.0",
         "axios": "^1.10.0",
         "date-fns": "^4.1.0",
-        "framer-motion": "^12.23.24",
+        "framer-motion": "^12.23.26",
         "jspdf": "^3.0.1",
         "lucide-react": "^0.525.0",
         "react": "^19.1.0",
@@ -2650,9 +2650,9 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "12.23.24",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
-      "integrity": "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==",
+      "version": "12.23.26",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.26.tgz",
+      "integrity": "sha512-cPcIhgR42xBn1Uj+PzOyheMtZ73H927+uWPDVhUMqxy8UHt6Okavb6xIz9J/phFUHUj0OncR6UvMfJTXoc/LKA==",
       "license": "MIT",
       "dependencies": {
         "motion-dom": "^12.23.23",
diff --git a/client/package.json b/client/package.json
index 6e6d007..44ff0c3 100644
--- a/client/package.json
+++ b/client/package.json
@@ -12,7 +12,7 @@
     "@heroicons/react": "^2.2.0",
     "axios": "^1.10.0",
     "date-fns": "^4.1.0",
-    "framer-motion": "^12.23.24",
+    "framer-motion": "^12.23.26",
     "jspdf": "^3.0.1",
     "lucide-react": "^0.525.0",
     "react": "^19.1.0",
diff --git a/client/src/components/quicklab/DesktopFooter.jsx b/client/src/components/quicklab/DesktopFooter.jsx
new file mode 100644
index 0000000..62a0f5e
--- /dev/null
+++ b/client/src/components/quicklab/DesktopFooter.jsx
@@ -0,0 +1,86 @@
+export default function DesktopFooter() {
+  return (
+    <footer className="bg-lab-black-900 dark:bg-black text-lab-black-100 py-12">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid md:grid-cols-4 gap-8 mb-8">
+          <div>
+            <h3 className="text-2xl font-bold mb-4">
+              <span className="text-white">Quick</span>
+              <span className="text-lab-yellow-400">Lab</span>
+            </h3>
+            <p className="text-lab-black-400">Your trusted healthcare companion</p>
+          </div>
+
+          <div>
+            <h4 className="font-semibold mb-4 text-white">Quick Ecosystem</h4>
+            <ul className="space-y-2 text-lab-black-400">
+              <li>
+                <a href="#" className="hover:text-lab-yellow-400 transition-colors">
+                  QuickClinic
+                </a>
+              </li>
+              <li>
+                <a href="#" className="hover:text-lab-yellow-400 transition-colors">
+                  QuickMed
+                </a>
+              </li>
+              <li>
+                <a href="#" className="hover:text-lab-yellow-400 transition-colors">
+                  QuickLab
+                </a>
+              </li>
+              <li>
+                <a href="#" className="hover:text-lab-yellow-400 transition-colors">
+                  QuickInsure
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h4 className="font-semibold mb-4 text-white">Resources</h4>
+            <ul className="space-y-2 text-lab-black-400">
+              <li>
+                <a href="#" className="hover:text-lab-yellow-400 transition-colors">
+                  About Us
+                </a>
+              </li>
+              <li>
+                <a href="#" className="hover:text-lab-yellow-400 transition-colors">
+                  Privacy Policy
+                </a>
+              </li>
+              <li>
+                <a href="#" className="hover:text-lab-yellow-400 transition-colors">
+                  Terms of Service
+                </a>
+              </li>
+              <li>
+                <a href="#" className="hover:text-lab-yellow-400 transition-colors">
+                  Contact
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h4 className="font-semibold mb-4 text-white">Stay Connected</h4>
+            <p className="text-lab-black-400 mb-4">Subscribe for health tips and updates</p>
+            <div className="flex gap-2">
+              <input
+                type="email"
+                placeholder="Your email"
+                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"
+              />
+              <button className="btn-quicklab-primary">Join</button>
+            </div>
+          </div>
+        </div>
+
+        <div className="border-t border-lab-black-800 pt-8 text-center text-lab-black-400">
+          <p>&copy; 2025 Quick Healthcare Ecosystem. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/client/src/components/quicklab/DesktopNavbar.jsx b/client/src/components/quicklab/DesktopNavbar.jsx
index 09907e7..e6438dc 100644
--- a/client/src/components/quicklab/DesktopNavbar.jsx
+++ b/client/src/components/quicklab/DesktopNavbar.jsx
@@ -1,7 +1,7 @@
 // DesktopNavbar.jsx
 import { Search } from 'lucide-react';
 import DarkModeToggle from '../ui/DarkModeToggle';
-
+import DesktopFooter from './DesktopFooter';
 export default function DesktopNavbar({ searchQuery, setSearchQuery }) {
   return (
     <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">
diff --git a/client/src/components/quicklab/HomePage/AnimatedSection.jsx b/client/src/components/quicklab/HomePage/AnimatedSection.jsx
new file mode 100644
index 0000000..b5b0564
--- /dev/null
+++ b/client/src/components/quicklab/HomePage/AnimatedSection.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { motion, useInView } from 'framer-motion';
+
+const AnimatedSection = ({ children, className = '' }) => {
+  const ref = React.useRef(null);
+  const isInView = useInView(ref, { once: true, margin: '-100px' });
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={{ opacity: 0, y: 50 }}
+      animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
+      transition={{ duration: 0.6, ease: 'easeOut' }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export default AnimatedSection;
diff --git a/client/src/components/quicklab/HomePage/EcosystemSection.jsx b/client/src/components/quicklab/HomePage/EcosystemSection.jsx
new file mode 100644
index 0000000..425188f
--- /dev/null
+++ b/client/src/components/quicklab/HomePage/EcosystemSection.jsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import AnimatedSection from './AnimatedSection';
+
+const EcosystemSection = () => {
+  const products = [
+    {
+      name: 'QuickClinic',
+      color: 'blue',
+      colorClass: 'from-blue-500 to-blue-600',
+      darkColorClass: 'from-blue-600 to-blue-700',
+      description: 'Online doctor booking and video consultations',
+      available: true,
+    },
+    {
+      name: 'QuickMed',
+      color: 'green',
+      colorClass: 'from-green-500 to-green-600',
+      darkColorClass: 'from-green-600 to-green-700',
+      description: 'Free access to complete medicine information',
+      available: true,
+    },
+    {
+      name: 'QuickLab',
+      color: 'yellow',
+      colorClass: 'from-yellow-500 to-yellow-600',
+      darkColorClass: 'from-yellow-500 to-yellow-600',
+      description: 'Book and compare labs across your city',
+      available: true,
+      current: true,
+    },
+    {
+      name: 'QuickInsure',
+      color: 'purple',
+      colorClass: 'from-purple-500 to-purple-600',
+      darkColorClass: 'from-purple-600 to-purple-700',
+      description: 'Buy and claim health insurance seamlessly',
+      available: false,
+    },
+  ];
+
+  return (
+    <section id="ecosystem" className="py-20 bg-lab-black-50 dark:bg-lab-black-800">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <AnimatedSection>
+          <div className="text-center mb-16">
+            <h2 className="text-3xl sm:text-4xl font-bold mb-6">
+              Building a Complete{' '}
+              <span className="text-lab-yellow-600 dark:text-lab-yellow-400">
+                Healthcare Ecosystem
+              </span>
+            </h2>
+            <p className="text-lg text-lab-black-700 dark:text-lab-black-300 max-w-3xl mx-auto leading-relaxed">
+              From appointment booking, we are moving toward building a complete digital healthcare
+              ecosystem for your convenience—so you only need one platform for all health-related
+              queries and services. Your health, simplified.
+            </p>
+          </div>
+        </AnimatedSection>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {products.map((product, index) => (
+            <AnimatedSection key={index}>
+              <motion.div
+                whileHover={{ y: -8 }}
+                className="card-quicklab relative overflow-hidden group"
+              >
+                {product.current && (
+                  <div className="absolute top-4 right-4">
+                    <span className="badge-quicklab text-xs">You are here</span>
+                  </div>
+                )}
+                {!product.available && (
+                  <div className="absolute top-4 right-4">
+                    <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">
+                      Coming Soon
+                    </span>
+                  </div>
+                )}
+
+                <div
+                  className={`w-full h-2 bg-gradient-to-r ${product.colorClass} dark:${product.darkColorClass} rounded-t-lg mb-4 -mx-6 -mt-6`}
+                ></div>
+
+                <h3 className="text-2xl font-bold mb-2">
+                  <span className="text-lab-black-900 dark:text-lab-black-50">Quick</span>
+                  <span className={`text-${product.color}-600 dark:text-${product.color}-400`}>
+                    {product.name.replace('Quick', '')}
+                  </span>
+                </h3>
+
+                <p className="text-lab-black-600 dark:text-lab-black-400">{product.description}</p>
+              </motion.div>
+            </AnimatedSection>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default EcosystemSection;
diff --git a/client/src/components/quicklab/HomePage/FeaturesSection.jsx b/client/src/components/quicklab/HomePage/FeaturesSection.jsx
new file mode 100644
index 0000000..548121a
--- /dev/null
+++ b/client/src/components/quicklab/HomePage/FeaturesSection.jsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import AnimatedSection from './AnimatedSection';
+import Icons from './Icons';
+
+const FeaturesSection = () => {
+  const features = [
+    {
+      icon: <Icons.Calendar />,
+      title: 'Online Lab Test Booking',
+      description:
+        'Book lab appointments online with ease. Choose home sample collection or visit the lab at your convenience.',
+    },
+    {
+      icon: <Icons.Doctor />,
+      title: 'Doctor-Linked Reports',
+      description:
+        'Reports from labs suggested by your QuickClinic doctor are sent directly to them with personalized remarks—no extra fees for normal results.',
+      badge: 'Key Feature',
+    },
+    {
+      icon: <Icons.Home />,
+      title: 'Home Sample Collection',
+      description:
+        'Get samples collected from the comfort of your home. Professional staff, timely service, safe handling.',
+    },
+    {
+      icon: <Icons.Star />,
+      title: 'Honest Lab Reviews',
+      description:
+        'Compare labs based on genuine user reviews, ratings, and test availability to make informed decisions.',
+    },
+    {
+      icon: <Icons.Flask />,
+      title: 'Search by Test Name',
+      description:
+        'Find labs offering specific tests across your city. Filter by distance, ratings, and availability.',
+    },
+    {
+      icon: <Icons.Shield />,
+      title: 'No Hidden Costs',
+      description:
+        'Transparent pricing, no consultation fee when results are normal—saving you time and money.',
+    },
+  ];
+
+  return (
+    <section id="features" className="py-20 bg-white dark:bg-lab-black-900">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <AnimatedSection>
+          <div className="text-center mb-16">
+            <h2 className="text-3xl sm:text-4xl font-bold mb-4">
+              Why Choose{' '}
+              <span className="text-lab-yellow-600 dark:text-lab-yellow-400">QuickLab</span>?
+            </h2>
+            <p className="text-lg text-lab-black-600 dark:text-lab-black-300 max-w-2xl mx-auto">
+              Experience seamless lab test booking with features designed for your convenience
+            </p>
+          </div>
+        </AnimatedSection>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {features.map((feature, index) => (
+            <AnimatedSection key={index}>
+              <motion.div
+                whileHover={{ y: -8, boxShadow: '0 20px 25px -5px rgba(234, 179, 8, 0.1)' }}
+                className="card-quicklab h-full relative"
+              >
+                {feature.badge && (
+                  <div className="absolute -top-3 -right-3">
+                    <span className="badge-quicklab text-xs">{feature.badge}</span>
+                  </div>
+                )}
+                <div className="text-lab-yellow-600 dark:text-lab-yellow-400 mb-4">
+                  {feature.icon}
+                </div>
+                <h3 className="text-xl font-semibold mb-3">{feature.title}</h3>
+                <p className="text-lab-black-600 dark:text-lab-black-400">{feature.description}</p>
+              </motion.div>
+            </AnimatedSection>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default FeaturesSection;
diff --git a/client/src/components/quicklab/HomePage/HeroSection.jsx b/client/src/components/quicklab/HomePage/HeroSection.jsx
new file mode 100644
index 0000000..0ca3eef
--- /dev/null
+++ b/client/src/components/quicklab/HomePage/HeroSection.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const HeroSection = () => {
+  return (
+    <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">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-28">
+        <div className="text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+          >
+            <div className="inline-block mb-4">
+              <span className="badge-quicklab">Smart Healthcare Booking</span>
+            </div>
+
+            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
+              Book Lab Tests Online,
+              <br />
+              <span className="text-lab-yellow-600 dark:text-lab-yellow-400">
+                Get Doctor Remarks Instantly
+              </span>
+            </h1>
+
+            <p className="text-xl text-lab-black-600 dark:text-lab-black-300 mb-10 max-w-3xl mx-auto">
+              Save time and money with doctor-linked lab reports. No consultation fees for normal
+              results. Book tests, compare labs, and get home sample collection—all in one platform.
+            </p>
+
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <motion.button
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                className="btn-quicklab-primary text-lg px-8 py-4"
+              >
+                Book Lab Test Now
+              </motion.button>
+              <motion.button
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                className="btn-quicklab-secondary text-lg px-8 py-4"
+              >
+                Find Labs Near You
+              </motion.button>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+
+      <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>
+      <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>
+    </section>
+  );
+};
+
+export default HeroSection;
diff --git a/client/src/components/quicklab/HomePage/Icons.jsx b/client/src/components/quicklab/HomePage/Icons.jsx
new file mode 100644
index 0000000..0e396d2
--- /dev/null
+++ b/client/src/components/quicklab/HomePage/Icons.jsx
@@ -0,0 +1,85 @@
+import React from 'react';
+
+const Icons = {
+  Moon: () => (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+    </svg>
+  ),
+  Sun: () => (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path
+        fillRule="evenodd"
+        d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+  Calendar: () => (
+    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+      />
+    </svg>
+  ),
+  Home: () => (
+    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+      />
+    </svg>
+  ),
+  Doctor: () => (
+    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+      />
+    </svg>
+  ),
+  Flask: () => (
+    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
+      />
+    </svg>
+  ),
+  Star: () => (
+    <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+    </svg>
+  ),
+  Shield: () => (
+    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+      />
+    </svg>
+  ),
+  Pill: () => (
+    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+      />
+    </svg>
+  ),
+};
+
+export default Icons;
diff --git a/client/src/components/quicklab/HomePage/InsuranceSection.jsx b/client/src/components/quicklab/HomePage/InsuranceSection.jsx
new file mode 100644
index 0000000..04cbe2d
--- /dev/null
+++ b/client/src/components/quicklab/HomePage/InsuranceSection.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import AnimatedSection from './AnimatedSection';
+import Icons from './Icons';
+
+const InsuranceSection = () => {
+  return (
+    <section className="py-20 bg-white dark:bg-lab-black-900">
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <AnimatedSection>
+          <div className="card-quicklab text-center">
+            <div className="inline-block p-4 bg-purple-100 dark:bg-purple-900/30 rounded-full mb-6">
+              <Icons.Shield />
+            </div>
+            <h2 className="text-3xl font-bold mb-4">
+              Insurance Made <span className="text-purple-600 dark:text-purple-400">Simple</span>
+            </h2>
+            <p className="text-lg text-lab-black-700 dark:text-lab-black-300 leading-relaxed">
+              We're partnering with leading insurance companies to bring you seamless health
+              insurance solutions. Soon, you'll be able to buy and claim insurance directly from our
+              platform—eliminating paperwork and making the entire process effortless. Your health
+              protection, simplified.
+            </p>
+          </div>
+        </AnimatedSection>
+      </div>
+    </section>
+  );
+};
+
+export default InsuranceSection;
diff --git a/client/src/components/quicklab/HomePage/PromiseSection.jsx b/client/src/components/quicklab/HomePage/PromiseSection.jsx
new file mode 100644
index 0000000..4b08c43
--- /dev/null
+++ b/client/src/components/quicklab/HomePage/PromiseSection.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import AnimatedSection from './AnimatedSection';
+
+const PromiseSection = () => {
+  return (
+    <section
+      id="about"
+      className="py-20 bg-gradient-to-br from-lab-yellow-50 via-lab-blue-50 to-white dark:from-lab-black-800 dark:via-lab-black-900 dark:to-lab-black-900"
+    >
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        <AnimatedSection>
+          <div className="mb-8">
+            <h2 className="text-4xl sm:text-5xl font-bold mb-6">
+              Our <span className="text-lab-yellow-600 dark:text-lab-yellow-400">Promise</span>
+            </h2>
+          </div>
+
+          <div className="card-quicklab">
+            <p className="text-xl leading-relaxed text-lab-black-700 dark:text-lab-black-300 mb-6">
+              Our prime motto at{' '}
+              <span className="font-semibold text-lab-black-900 dark:text-lab-black-50">Quick</span>{' '}
+              is simple—
+              <span className="font-semibold text-lab-yellow-600 dark:text-lab-yellow-400">
+                {' '}
+                no paperwork, no unnecessary stress
+              </span>
+              . We are working tirelessly to make your healthcare experience seamless.
+            </p>
+            <p className="text-2xl font-semibold text-lab-black-900 dark:text-lab-black-50">
+              The only thing you should worry about is your health or your loved ones' health.
+              <span className="text-lab-yellow-600 dark:text-lab-yellow-400">
+                {' '}
+                The rest is on us.
+              </span>
+            </p>
+          </div>
+
+          <div className="mt-12">
+            <motion.button
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              className="btn-quicklab-primary text-lg px-10 py-4"
+            >
+              Get Started Today
+            </motion.button>
+          </div>
+        </AnimatedSection>
+      </div>
+    </section>
+  );
+};
+
+export default PromiseSection;
diff --git a/client/src/components/quicklab/Navbar.jsx b/client/src/components/quicklab/Navbar.jsx
index c31687e..bf99f26 100644
--- a/client/src/components/quicklab/Navbar.jsx
+++ b/client/src/components/quicklab/Navbar.jsx
@@ -2,7 +2,6 @@
 import { useState } from 'react';
 import DesktopNavbar from './DesktopNavbar';
 import MobileNavbar from './MobileNavbar';
-
 export default function Navbar() {
   const [searchQuery, setSearchQuery] = useState('');
 
diff --git a/client/src/pages/quicklab/Homepage.jsx b/client/src/pages/quicklab/Homepage.jsx
new file mode 100644
index 0000000..da7d7f6
--- /dev/null
+++ b/client/src/pages/quicklab/Homepage.jsx
@@ -0,0 +1,45 @@
+// QuickLabHomepage.jsx
+import React from 'react';
+import '../../quicklab.css';
+import HeroSection from '../../components/quicklab/HomePage/HeroSection';
+import FeaturesSection from '../../components/quicklab/HomePage/FeaturesSection';
+import EcosystemSection from '../../components/quicklab/HomePage/EcosystemSection';
+import InsuranceSection from '../../components/quicklab/HomePage/InsuranceSection';
+import PromiseSection from '../../components/quicklab/HomePage/PromiseSection';
+import DesktopFooter from '../../components/quicklab/DesktopFooter';
+
+const QuickLabHomepage = () => {
+  return (
+    <div className="min-h-screen bg-white dark:bg-lab-black-900 text-lab-black-900 dark:text-lab-black-50 transition-colors duration-300">
+      <HeroSection />
+      <FeaturesSection />
+      <EcosystemSection />
+      <InsuranceSection />
+      <PromiseSection />
+      <DesktopFooter />
+
+      <style jsx>{`
+        @keyframes blob {
+          0%,
+          100% {
+            transform: translate(0, 0) scale(1);
+          }
+          33% {
+            transform: translate(30px, -50px) scale(1.1);
+          }
+          66% {
+            transform: translate(-20px, 20px) scale(0.9);
+          }
+        }
+        .animate-blob {
+          animation: blob 7s infinite;
+        }
+        .animation-delay-2000 {
+          animation-delay: 2s;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default QuickLabHomepage;
diff --git a/client/src/routes/QuickLabRoutes.jsx b/client/src/routes/QuickLabRoutes.jsx
index 8a53883..b01c1dc 100644
--- a/client/src/routes/QuickLabRoutes.jsx
+++ b/client/src/routes/QuickLabRoutes.jsx
@@ -1,12 +1,13 @@
 import { Routes, Route } from 'react-router-dom';
 import NotFoundPage from '../components/ui/NotFoundPage';
 import Navbar from '../components/quicklab/Navbar';
+import QuickLabHomepage from '../pages/quicklab/Homepage';
 export default function QuickLabRoutes() {
   return (
     <>
       <Navbar />
       <Routes>
-        <Route path="*" element={<NotFoundPage />} />
+        <Route path="*" element={<QuickLabHomepage />} />
       </Routes>
     </>
   );