bishalde · SwanandD121 · May 12, 2024 · May 12, 2024 · May 12, 2024
diff --git a/index.css b/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/index.html b/index.html
@@ -3,10 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="public/logos/SymbolLogo-removebg-preview.png" />
+    <link rel="stylesheet" href="index.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>QR Builder</title>
   </head>
-  <body>
+  <body className="">
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,16 +12,20 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
     "react-router-dom": "^6.14.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@vitejs/plugin-react": "^4.0.1",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.44.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.1",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
     "vite": "^4.4.0"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -4,12 +4,15 @@ import HomePage from './components/HomePage'
 import PricingPage from './components/PricingPage'
 
 import { Route, Routes } from "react-router-dom"
+import { ThemeProvider } from './ThemeContext'
 function App() {
   return (
-    <Routes>
-      <Route path="" element={<HomePage />} />
-      <Route path="/pricing" element={<PricingPage />} />
-    </Routes>
+    <div className='dark:bg-gradient-to-r from-slate-900 to-[#000000] h-full'>
+      <Routes>
+        <Route path="" element={<HomePage />} />
+        <Route path="/pricing" element={<PricingPage />} />
+      </Routes>
+    </div>
   )
 }
 

diff --git a/src/assets/logofordark.png b/src/assets/logofordark.png
diff --git a/src/assets/logoforlight.png b/src/assets/logoforlight.png
diff --git a/src/components/Contentbox/Contentbox.css b/src/components/Contentbox/Contentbox.css
@@ -6,7 +6,7 @@
 .contentbox .mainbox {
   position: relative;
   width: 100%;
-  background-color: #ecf7ff;
+  /* background-color: #ecf7ff; */
   border-radius: 50px;
   height: -moz-fit-content;
   height: fit-content;

diff --git a/src/components/Contentbox/Contentbox.jsx b/src/components/Contentbox/Contentbox.jsx
@@ -38,7 +38,7 @@ const Contentbox = () => {
   return (
     <>
       <section className="contentbox">
-        <div className="mainbox">
+        <div className="mainbox bg-[#ecf7ff] dark:bg-neutral-950 from-neutral-950 to-[#0F172A]">
           <div className="sliderbox">
             <img
               width="48"
@@ -91,15 +91,15 @@ const Contentbox = () => {
           <div className="textbox">
 
             <textarea id='userInput' type="text" placeholder="Enter Text Here" onChange={(e)=>{setTeextValue(e.target.value)}} value={textval} />
-            <h1>Your QR Code will be generated automatically </h1>
+            <h1 className="dark:text-white">Your QR Code will be generated automatically </h1>
           </div>
 
           <div className="displaybox">
             <div className="qrbox">
               <img src={qrData} className="qrimg" alt="QR" />
             </div>
 
-            <div className="qrsettings">
+            <div className="qrsettings ">
               <div className="dimension">
                 <h1> Height X width</h1>
               <input type="number" name="size" id="size" placeholder="Enter dimension" value={qrSize} onChange={(e)=>{setQrSize(e.target.value)}}/>

diff --git a/src/components/Homebox/Homebox.jsx b/src/components/Homebox/Homebox.jsx
@@ -5,7 +5,7 @@ function Homebox() {
   return (
     <>
     <section className="homebox">
-        <h1>Generate and Publish <br /> 
+        <h1 className='dark:text-white'>Generate and Publish <br /> 
         <span> Dynamic  
           <div className="smallbx bx-1"></div>
           <div className="smallbx bx-2"></div>
@@ -14,15 +14,15 @@ function Homebox() {
         </span> QR Codes</h1>
 
 
-        <h3>QRBuilder is a dynamic QR code Generator. It allows user to easily create <br /> customized QR codes for sharing or embedding on their websites.
+        <h3 className='dark:text-gray-400'>QRBuilder is a dynamic QR code Generator. It allows user to easily create <br /> customized QR codes for sharing or embedding on their websites.
         </h3>
 
-        <div className="homebox-btns">
+        <div className="homebox-btns flex">
         <img src="/images/arrow.png" />
           <a href="#userInput">
           <button className='btn-secondary'>Get Started</button>
           </a>
-          <button className='btn'>Watch Demo</button>
+          <button className='btn dark:bg-transparent dark:hover:bg-blue-100'>Watch Demo</button>
         </div>
 
     </section>

diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css
@@ -75,6 +75,7 @@ nav .nav-buttons {
   gap: 10px;
 }
 
+
 @media screen and (max-width: 950px) {
   nav {
     padding: 5px 5px;

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -1,6 +1,10 @@
 import React, { useState, useEffect } from "react";
 import { NavLink, useLocation } from "react-router-dom";
 import "./Navbar.css";
+import logofordark from '../../assets/logofordark.png'
+import logoforlight from '../../assets/logoforlight.png'
+import { MdLightMode } from "react-icons/md";
+import { MdDarkMode } from "react-icons/md";
 
 const Navbar = () => {
   const [navlinksvalue, setnavlinks] = useState("nav-links");
@@ -22,12 +26,38 @@ const Navbar = () => {
     }
   };
 
+  // FOR DARK MODE
+  const [theme, setTheme] = useState(null);
+
+  useEffect(() => {
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      setTheme('light'); // Set to 'light' if preferred color scheme is dark
+    } else {
+      setTheme('dark'); // Set to 'dark' if preferred color scheme is light or not specified
+    }
+
+  }, [])
+
+  useEffect(() =>{
+    if (theme === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+
+  }, [theme])
+
+  const handleThemeSwitch = () => {
+    setTheme(theme === "dark"? "light" : "dark");
+  };
+  // FOR DARK MODE
+
   return (
     <>
-      <nav>
+      <nav className="dark:bg-gradient-to-r to-slate-900 from-[#000000]/95 from-40% dark:shadow-lg dark:shadow-blue-500/30 ">
         <div className="logo">
           <NavLink to="/">
-            <img src="/logos/bigLogo_-_Crop-removebg-preview.png" />
+          <img src={theme === "dark" ? logofordark : logoforlight} alt="" /> 
           </NavLink>
         </div>
 
@@ -41,34 +71,37 @@ const Navbar = () => {
           {/* activepage */}
           <NavLink
             className={({ isActive, isPending }) =>
-              isPending ? "active " : isActive ? "activepage" : ""
+              isPending ? "active " : isActive ? "activepage dark:text-white" : "dark:text-white"
             }
             to="/"
             current="activepage"
           >
             Product
           </NavLink>
           <NavLink className={({ isActive, isPending }) =>
-              isPending ? "active " : isActive ? "activepage" : ""
+              isPending ? "active dark:text-white" : isActive ? "activepage dark:text-white" : "dark:text-white"
             } to="/pricing">
             Pricing
           </NavLink>
           <NavLink className={({ isActive, isPending }) =>
-              isPending ? "active " : isActive ? "activepage" : ""
+              isPending ? "active" : isActive ? "activepage " : ""
             } to="/">
             Solution
           </NavLink>
           <a
-            className="active"
+            className="active dark:text-white"
             href="https://github.com/bishalde/Qr-Code-Generator"
           >
             Github
           </a>
         </div>
 
         <div className={navbuttonsvlue}>
-          <button className="btn">Sign In</button>
+
+          <div  onClick={handleThemeSwitch} className="text-3xl border rounded-full border-lg border-black dark:border dark:border-lg dark:rounded-full dark:border-yellow-500 p-1 cursor-pointer hover:scale-110 transition-all dark:text-yellow-400 text-center self-center">{theme === "dark" ? <MdLightMode /> : <MdDarkMode />}</div>
+          <button className="btn dark:bg-transparent transition-none dark:text-white">Sign In</button>
           <button className="btn btn-secondary">Sign Up</button>
+
         </div>
       </nav>
     </>

diff --git a/src/components/Pricing/Pricing.css b/src/components/Pricing/Pricing.css
@@ -21,7 +21,7 @@
   outline: 0px;
   border-radius: 30px;
   box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
-  padding: 70px 60px;
+  padding: 60px 50px;
 }
 .pricingbox .priceplans h3 {
   font-size: 2rem;

diff --git a/src/components/Pricing/Pricing.jsx b/src/components/Pricing/Pricing.jsx
@@ -4,48 +4,50 @@ import './Pricing.css'
 const Pricing = () => {
   return (
     <>
-    <h1 className='pricingbox__title'>Our Plans</h1>
-    <section className="pricingbox">
-        <div className="priceplans">
-            <h3>Basic</h3>
-            <h5>Unlimited usage and <br /> advanced features</h5>
-            <p>$10 <span>/month</span></p>
-            <button className="btn">subscribe</button>
-            <ul>
-                <li>Unlimited Static Codes</li>
-                <li>Save QR Codes</li>
-                <li>Unlimited Dynamic Codes</li>
-                <li>Download Codes in JPEG</li>
-            </ul>
-        </div>
+    <div className='dark:text-white dark:bg-gradient-to-r from-slate-900 to-[#000000] h-[100vh]'>
+        <h1 className='pricingbox__title dark:text-white'>Our Plans</h1>
+        <section className="pricingbox pt-0">
+            <div className="priceplans">
+                <h3>Basic</h3>
+                <h5>Unlimited usage and <br /> advanced features</h5>
+                <p>$10 <span>/month</span></p>
+                <button className="btn">subscribe</button>
+                <ul>
+                    <li>Unlimited Static Codes</li>
+                    <li>Save QR Codes</li>
+                    <li>Unlimited Dynamic Codes</li>
+                    <li>Download Codes in JPEG</li>
+                </ul>
+            </div>
 
 
-        <div className="priceplans">
-            <h3>Starters</h3>
-            <h5>Unlimited usage and <br /> advanced features</h5>
-            <p>$15 <span>/month</span></p>
-            <button className="btn btn-secondary">subscribe</button>
-            <ul>
-                <li>10 Dynamic Codes</li>
-                <li>Advanced Code Types</li>
-                <li>Scan Analysis</li>
-                <li>High Quality Downloads</li>
-            </ul>
-        </div>
+            <div className="priceplans">
+                <h3>Starters</h3>
+                <h5>Unlimited usage and <br /> advanced features</h5>
+                <p>$15 <span>/month</span></p>
+                <button className="btn btn-secondary">subscribe</button>
+                <ul>
+                    <li>10 Dynamic Codes</li>
+                    <li>Advanced Code Types</li>
+                    <li>Scan Analysis</li>
+                    <li>High Quality Downloads</li>
+                </ul>
+            </div>
 
-        <div className="priceplans">
-            <h3>Professionals</h3>
-            <h5>Unlimited usage and <br /> advanced features</h5>
-            <p>$85 <span>/month</span></p>
-            <button className="btn ">subscribe</button>
-            <ul>
-                <li>Unlimited Dynamic Codes</li>
-                <li>Account Management</li>
-                <li>Create folders</li>
-                <li>Generates Lables</li>
-            </ul>
-        </div>
-    </section>
+            <div className="priceplans">
+                <h3>Professionals</h3>
+                <h5>Unlimited usage and <br /> advanced features</h5>
+                <p>$85 <span>/month</span></p>
+                <button className="btn ">subscribe</button>
+                <ul>
+                    <li>Unlimited Dynamic Codes</li>
+                    <li>Account Management</li>
+                    <li>Create folders</li>
+                    <li>Generates Lables</li>
+                </ul>
+            </div>
+        </section>
+    </div>
     </>
   )
 }

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+  darkMode: "class",
+}
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -75,6 +75,7 @@ nav .nav-buttons { @@
       gap: 10px;
     }
     @media screen and (max-width: 950px) {
       nav {
         padding: 5px 5px;
@@ Expand Down @@