Added Responsive For Mobile

sayeedajmal · Jun 8, 2024 · dba7333 · dba7333
1 parent 1592c45
commit dba7333
Show file tree

Hide file tree

Showing 14 changed files with 12,172 additions and 6,991 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "react-icons": "^5.2.0",
     "react-router-dom": "^6.23.0",
     "react-scripts": "^5.0.1",
+    "react-toggle-dark-mode": "^1.1.1",
     "sass": "^1.76.0",
     "web-vitals": "^2.1.4"
   },

diff --git a/src/components/Navbar/DarkMode.jsx b/src/components/Navbar/DarkMode.jsx
@@ -1,31 +1,17 @@
 import React from "react";
 import { useTheme } from "../ThemeContext";
+import { DarkModeSwitch } from "react-toggle-dark-mode";
 
 const Navbar = () => {
   const { isDarkMode, toggleTheme } = useTheme();
 
   return (
-    <nav className="flex justify-between items-center p-4">
-      <label className="themeSwitcherTwo relative flex cursor-pointer select-none items-end">
-        <input
-          type="checkbox"
-          checked={isDarkMode}
-          onChange={toggleTheme}
-          className="sr-only"
-        />
-        <span
-          className={`slider mx-4 flex h-8 w-[60px] items-center rounded-full p-1 duration-200 ${
-            isDarkMode ? "bg-[#212b36]" : "bg-[#e6eff8]"
-          }`}
-        >
-          <span
-            className={`dot h-6 w-6 rounded-full bg-slate-300 duration-200 ${
-              isDarkMode ? "translate-x-[28px]" : ""
-            }`}
-          ></span>
-        </span>
-      </label>
-    </nav>
+    <DarkModeSwitch
+      className="w-10 m-2"
+      checked={isDarkMode}
+      onChange={toggleTheme}
+      size={120}
+    />
   );
 };
 

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -25,7 +25,7 @@ const Navbar = () => {
       </div>
 
       {/* Links */}
-      <ul className="app__navbar-links">
+      <ul className="app__navbar-links font-black">
         {NavLinks.map((item) => (
           <li className="app__flex p-text" key={`link-${item}`}>
             <a href={`#${item}`}>{item.toUpperCase()}</a>

diff --git a/src/components/Navbar/Navbar.scss b/src/components/Navbar/Navbar.scss
@@ -1,11 +1,12 @@
 .app__navbar {
   width: 100%;
+  height: 3rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0.3rem 1rem;
   background: rgba(255, 255, 255, 0.25);
-  box-shadow: -8px 5px 8px 0 rgba(31, 38, 135, 0.37);
+  box-shadow: -8px 5px 8px 0 rgba(201, 4, 14, 0.575);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   border: 1px solid rgba(255, 255, 255, 0.18);
@@ -127,6 +128,7 @@
       height: 100%;
       width: 100%;
       display: flex;
+      color: black;
       justify-content: flex-start;
       align-items: flex-start;
       flex-direction: column;
@@ -135,7 +137,6 @@
         margin: 1rem;
 
         a {
-          color: var(--gray-color);
           text-decoration: none;
           font-size: 1rem;
           text-transform: uppercase;

diff --git a/src/containers/Campaign/Campaign.jsx b/src/containers/Campaign/Campaign.jsx
@@ -30,21 +30,21 @@ const Campaign = () => {
       variants={containerVariants}
     >
       <motion.h2
-        className="text-6xl text-gray-900 uppercase "
+        className="text-3xl md:text-6xl font-bold text-gray-900 uppercase "
         variants={textVariants}
         transition={{ duration: 0.5 }}
       >
         Donate
       </motion.h2>
       <motion.h1
-        className="text-8xl text-red-600 uppercase font-bold"
+        className="text-3xl md:text-8xl text-red-600 uppercase font-bold"
         variants={textVariants}
         transition={{ duration: 0.5, delay: 0.3 }}
       >
         Your Blood
       </motion.h1>
       <motion.h3
-        className="text-5xl text-gray-800 uppercase m-3"
+        className="text-3xl md:text-5xl text-gray-800 uppercase m-3"
         variants={textVariants}
         transition={{ duration: 0.5, delay: 0.6 }}
       >

diff --git a/src/containers/Campaign/Campaign.scss b/src/containers/Campaign/Campaign.scss
@@ -3,9 +3,11 @@
   background-color: rgba(4, 102, 97, 0.541);
   background-image: url("../../assets/ladywithHeart.svg");
   background-size: cover;
-  background-position: center left;
+  background-position: bottom left;
   background-repeat: no-repeat;
-  background-size: 30%;
+  background-size: 50vmin;
+  border-radius: 5px;
+  scroll-behavior: smooth;
 
   .app__wrapper {
     padding: 0;

diff --git a/src/containers/Contact/Contact.jsx b/src/containers/Contact/Contact.jsx
@@ -9,132 +9,124 @@ import "./Contact.scss";
 
 const Contact = () => {
   return (
-    <motion.div
-      className="w-3/6 flex items-center justify-center rounded-3xl shadow-md"
-      initial={{ opacity: 0, scale: 0.8 }}
-      whileInView={{ opacity: 1, scale: 1 }}
-      transition={{ duration: 0.5 }}
-      viewport={{ once: false }}
-    >
-      <div className="rounded-lg shadow-lg p-8 w-full">
-        <div className="flex flex-col md:flex-row">
-          <motion.div
-            initial={{ x: -100, opacity: 0 }}
-            whileInView={{ x: 0, opacity: 1 }}
-            transition={{ duration: 0.5 }}
-            viewport={{ once: false }}
-          >
-            <h2 className="text-lg font-bold uppercase mb-4">Connect US</h2>
-            <form>
-              <div className="mb-4">
-                <label className="block text-sm font-medium ">Name</label>
-                <input
-                  type="text"
-                  className="mt-1 text-black block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
-                />
-              </div>
-              <div className="mb-4">
-                <label className="block text-sm font-medium ">Email</label>
-                <input
-                  type="email"
-                  className="mt-1 text-black block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
-                />
-              </div>
-              <div className="mb-4">
-                <label className="block text-sm font-medium ">Subject</label>
-                <input
-                  type="text"
-                  className="mt-1 text-black block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
-                />
-              </div>
-              <div className="mb-4">
-                <label className="block text-sm font-medium ">Message</label>
-                <textarea className="mt-1 text-black block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"></textarea>
-              </div>
-              <motion.button
-                type="submit"
-                className="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-2 px-4 rounded-md"
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.95 }}
-              >
-                Send Message
-              </motion.button>
-            </form>
-          </motion.div>
-          <motion.div
-            className="border-l-primary-color border-red-500 w-5/6 bg-cyan-950 ml-4 rounded-full self-center"
-            initial={{ x: 100, opacity: 0 }}
-            whileInView={{ x: 0, opacity: 1 }}
-            transition={{ duration: 0.5 }}
-            viewport={{ once: false }}
-          >
-            <img src={images.bloodPressure} alt="Map" />
-          </motion.div>
-        </div>
-        <div className="flex flex-row text-s overflow-hidden text-center p-2">
-          <motion.div
-            className="flex flex-col items-center justify-center w-2/3"
-            whileHover={{ scale: 1.1 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            initial={{ opacity: 0, y: 50 }}
-            transition={{ duration: 0.5 }}
-            viewport={{ once: false }}
-          >
-            <FaLocationPin />
-            <p className="m-5" target="blank">
-              Show On Map
-            </p>
-          </motion.div>
-          <motion.div
-            className="flex flex-col items-center justify-center w-2/3"
-            whileHover={{ scale: 1.1 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            initial={{ opacity: 0, y: 50 }}
-            transition={{ duration: 0.5 }}
-            viewport={{ once: false }}
-          >
-            <MdPhoneAndroid />
-            <a href="tel:+919964716450" className="m-5" target="blank">
-              Contact Phone
-            </a>
-          </motion.div>
-          <motion.div
-            className="flex flex-col items-center justify-center w-2/3"
-            whileHover={{ scale: 1.1 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            initial={{ opacity: 0, y: 50 }}
-            transition={{ duration: 0.5 }}
-            viewport={{ once: false }}
-          >
-            <MdEmail />
-            <a
-              href="mailto:sayeedajmala06@gmail.com"
-              className="m-5"
-              target="blank"
+    <div className="w-[90vw] md:w-[60vw] rounded-lg shadow-lg p-8 bg-slate-600">
+      <div className="flex flex-col md:flex-row">
+        <motion.div
+          initial={{ x: -100, opacity: 0 }}
+          whileInView={{ x: 0, opacity: 1 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: false }}
+        >
+          <h2 className="text-lg font-bold uppercase mb-4">Connect US</h2>
+          <form>
+            <div className="mb-4">
+              <label className="block text-sm font-medium ">Name</label>
+              <input
+                type="text"
+                className="mt-1 text-black block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+              />
+            </div>
+            <div className="mb-4">
+              <label className="block text-sm font-medium ">Email</label>
+              <input
+                type="email"
+                className="mt-1 text-black block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+              />
+            </div>
+            <div className="mb-4">
+              <label className="block text-sm font-medium ">Topic</label>
+              <input
+                type="text"
+                className="mt-1 text-black block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+              />
+            </div>
+            <div className="mb-4">
+              <label className="block text-sm font-medium ">Message</label>
+              <textarea className="mt-1 text-black block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"></textarea>
+            </div>
+            <motion.button
+              type="submit"
+              className="w-full  bg-orange-500 hover:bg-orange-600 text-white font-semibold py-2 px-4 rounded-md"
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
             >
-              Send Email
-            </a>
-          </motion.div>
-          <motion.div
-            className="flex flex-col items-center justify-center w-2/3"
-            whileHover={{ scale: 1.1 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            initial={{ opacity: 0, y: 50 }}
-            transition={{ duration: 0.5 }}
-            viewport={{ once: false }}
+              Send Message
+            </motion.button>
+          </form>
+        </motion.div>
+        <motion.div
+          className="hidden md:flex w-4/6 bg-cyan-950 ml-4 rounded-full self-center"
+          initial={{ x: 100, opacity: 0 }}
+          whileInView={{ x: 0, opacity: 1 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: false }}
+        >
+          <img
+            className="md:animate-pulse"
+            src={images.bloodPressure}
+            alt="Map"
+          />
+        </motion.div>
+      </div>
+      <div className="hidden  md:flex flex-row text-s overflow-hidden text-center p-2">
+        <motion.div
+          className="flex flex-col items-center justify-center w-2/3"
+          whileHover={{ scale: 1.1 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          initial={{ opacity: 0, y: 50 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: false }}
+        >
+          <FaLocationPin />
+          <p className="m-5" target="blank">
+            Show On Map
+          </p>
+        </motion.div>
+        <motion.div
+          className="flex flex-col items-center justify-center w-2/3"
+          whileHover={{ scale: 1.1 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          initial={{ opacity: 0, y: 50 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: false }}
+        >
+          <MdPhoneAndroid />
+          <a href="tel:+919964716450" className="m-5" target="blank">
+            Contact Phone
+          </a>
+        </motion.div>
+        <motion.div
+          className="flex flex-col items-center justify-center w-2/3"
+          whileHover={{ scale: 1.1 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          initial={{ opacity: 0, y: 50 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: false }}
+        >
+          <MdEmail />
+          <a
+            href="mailto:sayeedajmala06@gmail.com"
+            className="m-5"
+            target="blank"
           >
-            <BiGlobe />
-            <a
-              href="https://sayeedthedev.web.app"
-              className="m-5"
-              target="blank"
-            >
-              Visit Portfolio
-            </a>
-          </motion.div>
-        </div>
+            Send Email
+          </a>
+        </motion.div>
+        <motion.div
+          className="flex flex-col items-center justify-center w-2/3"
+          whileHover={{ scale: 1.1 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          initial={{ opacity: 0, y: 50 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: false }}
+        >
+          <BiGlobe />
+          <a href="https://sayeedthedev.web.app" className="m-5" target="blank">
+            Visit Portfolio
+          </a>
+        </motion.div>
       </div>
-    </motion.div>
+    </div>
   );
 };
 

diff --git a/src/containers/Contact/Contact.scss b/src/containers/Contact/Contact.scss
@@ -6,7 +6,9 @@
   background-position: center left;
   background-repeat: no-repeat;
   transition: 0.2s ease-in;
-  background-size: 30%;
+  background-size: 100vmin;
+  border-radius: 10px;
+  scroll-behavior: smooth;
 
   .app__wrapper {
     padding: 0;