Added Dark Mode Toggle

Signed-off-by: Hemashree M S <[email protected]>

package.json

@@ -10,12 +10,14 @@
  "preview": "vite preview"
  },
  "dependencies": {
+ "antd": "^5.17.3",
  "axios": "^1.6.8",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-icons": "^5.2.1",
  "react-lazy-load": "^4.0.1",
  "react-router-dom": "^6.22.3",
+ "react-switch": "^7.0.0",
  "styled-components": "^6.1.11"
  },
  "devDependencies": {

src/Pages/BlogPage.jsx

@@ -86,7 +86,7 @@ const BlogPage = () => {
  return <Link to={`/blog/${blog.id}/`}>
  <div class="bg-white shadow-md rounded-lg overflow-hidden">
  <img className="w-full h-52 object-cover" src="https://imgs.search.brave.com/q3MJLK_ILOJjNNpDQfAoodURIpLLbhskPAuceu6vI6c/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5nZXR0eWltYWdl/cy5jb20vaWQvMTM0/OTE4MzAxMy9waG90/by9hZnJpY2FuLW1h/bGUtam91cm5hbGlz/dC1wcmVwYXJpbmct/cXVlc3Rpb25zLWZv/ci1wcmVzcy1jb25m/ZXJlbmNlLmpwZz9z/PTYxMng2MTImdz0w/Jms9MjAmYz1xaWRi/U3pfNmhwa2tyNmpS/QjUtMWhTTUsxSjZL/RUM2YXZJVkJsYXht/WmdvPQ" alt="Blog Image" />
- <div class="p-4 flex flex-col gap-1">
+ <div class="p-4 flex flex-col gap-1 blog-text">
  <h2 class="font-bold text-xl mb-2">{blog.title}</h2>
  <p class="text-gray-700">{blog.content}</p>
  <div class="mt-4 flex items-center">

src/Pages/Blogs.jsx

@@ -90,7 +90,7 @@ const Blogs = () => {
  }
 
  return (
- <div className="w-full px-8 pt-10 pb-32 bg-white shadow-lg rounded-lg">
+ <div className="w-full px-8 pt-10 pb-32 bg-white shadow-lg rounded-lg blog">
  <div className="mb-8">
  <h2 className="text-3xl font-semibold mb-2">{blog.title}</h2>
  <p className="text-gray-600 text-sm">{`By ${blog.author} on ${blog.publication_date}`}</p>

src/Pages/ContactPage.jsx

@@ -10,12 +10,12 @@ function ContactPage() {
  </div>
  </div>
  <div>
- <form className="bg-white">
+ <form className="bg-white contact">
  <div className="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
  <h2 className="mb-4 text-4xl font-extrabold text-center text-green-500">
  Contact Us
  </h2>
- <p className="mb-8 lg:mb-16 font-light text-center text-gray-500">
+ <p className="mb-8 lg:mb-16 font-light text-center text-gray-500 contact-para">
  Got a technical issue? Want to send feedback about a beta feature?
  Need details about our Business plan? Let us know.
  </p>

src/Pages/LandingPage.jsx

@@ -132,7 +132,7 @@ function LandingPage() {
  <h2 className="font-bold text-center ml-auto mr-auto smd:ml-0 text-5xl my-4 smd:text-left max-w-[20ch]">
  We value for health, healthcare workers and the nation
  </h2>
- <p className="w-full text-center smd:text-left max-w-[65ch] my-2 text-zinc-600">
+ <p className="w-full text-center smd:text-left max-w-[65ch] my-2 text-zinc-600 privacy">
  We believe in valuing every aspect of health, from individual
  wellness to the tireless dedication of those who nurture it.
  Nurses in India are migrating to different nation to find
@@ -141,7 +141,7 @@ function LandingPage() {
  a freelancing solution and connect the patients with certified
  nurses.
  </p>
- <p className="w-full text-center smd:text-left max-w-[65ch] my-2 text-zinc-600">
+ <p className="w-full text-center smd:text-left max-w-[65ch] my-2 text-zinc-600 privacy">
  For the care seekers, We provide them personalized healthcare
  care plans and health insurances which will protect them in
  case of emergency. Covering both the aspects of care seekers
@@ -161,10 +161,10 @@ function LandingPage() {
  />
  </div>
  <div className="max-w-[70ch] mb-3">
- <h2 className="text-zinc-700 font-bold text-xl">
+ <h2 className="text-zinc-700 font-bold text-xl contact-para">
  Certified Professional Healthcare workers
  </h2>
- <p className="max-w-[38ch] text-zinc-500 font-medium text-xm">
+ <p className="max-w-[38ch] text-zinc-500 font-medium text-xm privacy">
  We ensure quality care by connecting you with certified
  healthcare professionals you can trust. Your well-being is
  our priority.
@@ -176,10 +176,10 @@ function LandingPage() {
  <img src="\assets\debt.png" height={100} width={100} alt="" />
  </div>
  <div className="max-w-[70ch] mb-3">
- <h2 className="text-zinc-700 font-bold text-xl">
+ <h2 className="text-zinc-700 font-bold text-xl contact-para">
  No Hidden Charges
  </h2>
- <p className="max-w-[38ch] text-zinc-500 font-medium text-xm">
+ <p className="max-w-[38ch] text-zinc-500 font-medium text-xm privacy">
  Enjoy peace of mind with our no hidden charges policy. We
  believe in transparent and honest pricing and what you see
  will be the last amount that you'd ever pay.
@@ -191,10 +191,10 @@ function LandingPage() {
  <img src="\assets\india.png" height={100} width={100} />
  </div>
  <div className="max-w-[70ch] mb-3">
- <h2 className="text-zinc-700 font-bold text-xl">
+ <h2 className="text-zinc-700 font-bold text-xl contact-para">
  Get Care, Anywhere
  </h2>
- <p className="max-w-[38ch] text-zinc-500 font-medium text-xm">
+ <p className="max-w-[38ch] text-zinc-500 font-medium text-xm privacy">
  We are constantly expanding our service across cities in
  India
  </p>

src/Pages/Licensing.jsx

@@ -10,7 +10,7 @@ const Licensing = () => {
  <div className="py-8 mb-5 w-[50vw] justify-start ml-auto mr-auto mt-10">
  <div>
  <BackBtn Page={"Licensing"} />
- <LicenseWrapper>
+ <LicenseWrapper className='privacy'>
  <section>
  <p>Last updated: May 17, 2024</p>
  <p>

src/Pages/LoginPage.jsx

@@ -6,14 +6,14 @@ function LoginPage() {
  const [passVis, setPassVis] = useState(false);
  return (
  <>
- <section class="bg-zinc-50 py-8 h-screen">
+ <section class="bg-zinc-50 py-8 h-screen login">
  <div class="flex flex-col items-center max-w-[28rem] justify-center px-6 py-8 mx-auto mt-7 lg:py-8">
  <a
  href="#"
  class="flex items-center mb-6 text-2xl font-semibold text-gray-900"
  >
  <img class="w-8 h-8 mr-2" src="\assets\icon.png" alt="logo" />
- Nacto Care
+ <div className="login">Nacto Care</div>
  </a>
  <div class="w-full bg-white rounded-lg shadow">
  <div class="p-6 space-y-4 md:space-y-6 sm:p-8">

src/Pages/PrivacyPolicy.jsx

@@ -9,7 +9,7 @@ const PrivacyPolicy = () => {
  <div className="py-8 mb-5 w-[50vw] justify-start ml-auto mr-auto mt-10">
  <div>
  <BackBtn Page={"Privacy Policy"} />
- <PolicyWrapper>
+ <PolicyWrapper className='privacy'>
  <section>
  <p>Last updated: May 17, 2024</p>
  <p>Welcome to NactoCare. We are committed to protecting your personal information and your right to privacy. If you have any questions or concerns about our policy or our practices with regards to your personal information, please contact us at [email protected].</p>

src/Pages/SignupPage.jsx

@@ -7,14 +7,14 @@ function SignupPage() {
  const [conVis, setConVis] = useState(false);
  return (
  <>
- <section class="bg-zinc-50 py-8 h-screen">
+ <section class="bg-zinc-50 py-8 h-screen signup">
  <div class="flex flex-col items-center max-w-[28rem] justify-center px-6 py-8 mx-auto mt-7 lg:py-8">
  <a
  href="#"
  class="flex items-center mb-6 text-2xl font-semibold text-gray-900"
  >
  <img class="w-8 h-8 mr-2" src="/assets/icon.png" alt="logo" />
- Nacto Care
+ <div className="signup">Nacto Care</div>
  </a>
  <div class="w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0">
  <div class="p-6 space-y-4 md:space-y-6 sm:p-8">

src/Pages/TermsAndConditions.jsx

@@ -9,7 +9,7 @@ const TermsAndConditions = () => {
  <div className="py-8 mb-5 w-[50vw] justify-start ml-auto mr-auto mt-10">
  <div>
  <BackBtn Page={"Terms And Conditions"} />
- <TermsWrapper>
+ <TermsWrapper className='privacy'>
  <section>
  <p>Last updated: May 17, 2024</p>
  <p>Welcome to NactoCare. These terms and conditions outline the rules and regulations for the use of NactoCare's website and services. By accessing this website, we assume you accept these terms and conditions. Do not continue to use NactoCare if you do not agree to all of the terms and conditions stated on this page.</p>

src/components/Footer/Footer.jsx

@@ -4,12 +4,12 @@ function Footer() {
  return (
  <>
  <div>
- <footer className="bg-zinc-100 ">
+ <footer className="bg-zinc-100 footer">
  <div className="mx-auto w-full max-w-screen-xl">
  <h1 className="font-bold py-5 px-4 text-3xl">Nacto Care</h1>
  <div className="grid grid-cols-2 gap-8 px-4 py-6 lg:py-8 md:grid-cols-4">
  <div>
- <h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase ">
+ <h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase footer-heading">
  Company
  </h2>
  <ul className="text-gray-500 font-medium">
@@ -36,7 +36,7 @@ function Footer() {
  </ul>
  </div>
  <div>
- <h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase ">
+ <h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase footer-heading">
  Help center
  </h2>
  <ul className="text-gray-500 font-medium">
@@ -58,7 +58,7 @@ function Footer() {
  </ul>
  </div>
  <div>
- <h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase ">
+ <h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase footer-heading">
  Legal
  </h2>
  <ul className="text-gray-500 font-medium">

src/components/Header/Header.jsx

@@ -1,7 +1,11 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { Link, NavLink } from "react-router-dom";
 import MenuOverlay from "./MenuOverlay";
 import { FaXmark } from "react-icons/fa6";
+import '../../index.css'
+import { ThemeContext } from "../../main";
+import {Switch} from "antd";
+
 const navLinks = [
  {
  title: "Home",
@@ -27,6 +31,13 @@ const navLinks = [
 
 function Header() {
  const [isNavBarOpen, setIsNavBarOpen] = useState(false);
+ const { theme, toggleTheme } = useContext(ThemeContext); 
+ const [themes, setThemes] = useState("light");
+
+ const handleThemeChange = () => {
+ toggleTheme(); 
+ setThemes((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
+ };
 
  return (
  <div className="app-header">
@@ -36,13 +47,18 @@ function Header() {
  <img width={70} src="\assets\icon.png" alt="Logo" />
  </Link>
  </div>
+ <div className="switch">
+ <Switch style={{ backgroundColor: themes === "dark" ? "#000000" : ""}} onChange={handleThemeChange} checked={themes === "dark"} checkedChildren="Dark Mode" unCheckedChildren="Light Mode" />
+ </div>
  <div>
  <ul className="hidden md:flex gap-8 font-medium">
  <li className="hover:scale-110 duration-100 ease-in-out">
  <NavLink
  to="/"
  className={({ isActive }) =>
- `cursor-pointer text-gray-800 ${
+ `cursor-pointer ${
+ theme === "dark" ? "text-white" : "text-gray-800"
+ } ${
  isActive
  ? "text-black underline decoration-green-500 underline-offset-[0.5rem] decoration-2"
  : "text-gray-500"
@@ -54,25 +70,29 @@ function Header() {
  </li>
 
  <li className="hover:scale-110 duration-100 ease-in-out">
- <NavLink
- to="/careers"
- className={({ isActive }) =>
- `cursor-pointer text-gray-800 ${
- isActive
- ? "text-black underline decoration-green-500 underline-offset-[0.5rem] decoration-2"
- : "text-gray-500"
- } transition-all hover:text-green-500`
- }
- >
- Careers
- </NavLink>
- </li>
+ <NavLink
+ to="/careers"
+ className={({ isActive }) =>
+ `cursor-pointer transition-all ${
+ theme === "dark" ? "text-white" : "text-gray-800"
+ } ${
+ isActive
+ ? `${theme === "dark" ? "text-white" : "text-black"} nav-link-active`
+ : "text-gray-500"
+ } hover:text-green-500`
+ }
+ >
+ Careers
+ </NavLink>
+ </li>
 
  <li className="hover:scale-110 duration-100 ease-in-out">
  <NavLink
  to="/blog"
  className={({ isActive }) =>
- `cursor-pointer text-gray-800 ${
+ `cursor-pointer ${
+ theme === "dark" ? "text-white" : "text-gray-800"
+ } ${
  isActive
  ? "text-black underline decoration-green-500 underline-offset-[0.5rem] decoration-2"
  : "text-gray-500"
@@ -87,7 +107,9 @@ function Header() {
  <NavLink
  to="/contact"
  className={({ isActive }) =>
- `cursor-pointer text-gray-800 ${
+ `cursor-pointer ${
+ theme === "dark" ? "text-white" : "text-gray-800"
+ } ${
  isActive
  ? "text-black underline decoration-green-500 underline-offset-[0.5rem] decoration-2"
  : "text-gray-500"
@@ -102,7 +124,9 @@ function Header() {
  <NavLink
  to="/about"
  className={({ isActive }) =>
- `cursor-pointer text-gray-800 ${
+ `cursor-pointer ${
+ theme === "dark" ? "text-white" : "text-gray-800"
+ } ${
  isActive
  ? "text-black underline decoration-green-500 underline-offset-[0.5rem] decoration-2"
  : "text-gray-500"

src/index.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -21,3 +21,58 @@
 .app-header {
  background-color: #c6dcff;
 }
+
+body.light {
+ background-color: white;
+}
+
+body.dark {
+ background-color: #121212;
+ color: white;
+}
+
+body.dark .app-header {
+ background-color: #333333;
+ color: white;
+}
+
+body.dark .footer {
+ background-color: #333333;
+ color: white;
+}
+
+body.dark .footer-heading {
+ color: white
+}
+
+body.dark .blog {
+ background-color: black;
+ color: white
+}
+
+body.dark .contact {
+ background-color: black;
+ color: white
+}
+
+body.dark .blog-text {
+ background-color: rgb(192, 192, 192);
+ color: white
+}
+
+body.dark .login , .signup {
+ background-color: #121212;
+ color: white
+}
+
+body.dark .contact-para {
+ color: white;
+}
+
+body.dark .privacy {
+ color: rgb(211, 211, 211);
+}
+
+.nav-link-active {
+ @apply underline decoration-green-500 underline-offset-2 decoration-2;
+}