Changing slide color

shilpa2024 · Apr 9, 2024 · 3d16091 · 3d16091
1 parent 51484e6
commit 3d16091
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git a/src/Components/HomeComponent/Navbar/Navbar.jsx b/src/Components/HomeComponent/Navbar/Navbar.jsx
@@ -47,27 +47,27 @@ function Navbar() {
 
   return (
     <div>
-      <nav className="flex justify-between w-full bg-cyan-200 pl-10 p-2 pr-10 align-middle ">
+      <nav className="flex justify-between w-full bg-nav-background pl-10 p-2 pr-10 align-middle ">
         <section className="logo">
           <img src={companyLogo} alt="Logo_image" className='w-44 cursor-pointer' onClick={toHome}/>
         </section>
         <section className="pt-6">
           <ul>
             <li className='flex justify-center gap-6 font-bold font-Rubik '>
               <NavLink to="/" className={({ isActive }) => `
-                  text-lg duration-150  ${isActive ? "text-red-600 border-b-2 border-red-600 -mt-1" : "text-gray-800"}
+                  text-lg duration-150  ${isActive ? "text-red-600 border-b-2 border-red-600 -mt-1" : "text-white"}
               `}>Home</NavLink>
               <NavLink to="/about-us" className={({ isActive }) => `
-                  text-lg duration-150  ${isActive ? "text-red-600 border-b-2 border-red-600 -mt-1" : "text-gray-800"}
+                  text-lg duration-150  ${isActive ? "text-red-600 border-b-2 border-red-600 -mt-1" : "text-white"}
               `}>About Us</NavLink>
               <NavLink to="/shop" className={({ isActive }) => `
-                  text-lg duration-150  ${isActive ? "text-red-600 border-b-2 border-red-600 -mt-1" : "text-gray-800"}
+                  text-lg duration-150  ${isActive ? "text-red-600 border-b-2 border-red-600 -mt-1" : "text-white"}
               `}>Shop</NavLink>
               <NavLink to="/sell" className={({ isActive }) => `
-                  text-lg duration-150  ${isActive ? "text-red-600 border-b-2 border-red-600 -mt-1" : "text-gray-800"}
+                  text-lg duration-150  ${isActive ? "text-red-600 border-b-2 border-red-600 -mt-1" : "text-white"}
               `}>Sell</NavLink>
               <NavLink to="/contact-us" className={({ isActive }) => `
-                  text-lg duration-150  ${isActive ? "text-red-600 border-b-2 border-red-600 -mt-1" : "text-gray-800"}
+                  text-lg duration-150  ${isActive ? "text-red-600 border-b-2 border-red-600 -mt-1" : "text-white"}
               `}>Contact Us</NavLink>
             </li>
           </ul>

diff --git a/src/Components/HomeComponent/ServicesCard/ServicesCard.jsx b/src/Components/HomeComponent/ServicesCard/ServicesCard.jsx
@@ -24,14 +24,14 @@ function ServicesCard() {
             <Slider {...settings}>
               {
                 data.map((item, index) => (
-                  <div key={index} className='duration-300 bg-white h-[450px] text-green-950 rounded-2xl border-4 border-white  hover:border-4 hover:border-green-500 box-border outline-none font-Rubik text-center'>
+                  <div key={index} className='duration-300 bg-white h-[400px] text-green-950 rounded-2xl border-4 border-white  hover:border-4 hover:border-cyan-500 box-border outline-none font-Rubik text-center'>
                     <div className='h-32 rounded-t-xl bg-transparent flex justify-center items-center'>
                       <img src={item.img} alt="Organic farming" className='h-20 w-20' />
                     </div>
                     <div className='flex flex-col justify-center items-center gap-4 p-4'>
                       <p className='text-3xl font-semibold'>{item.heading}</p>
                       <p className='text-lg'>{item.description}</p>
-                      <button className='bg-green-400 text-white text-lg px-6 py-1 rounded-xl hover:border-2 hover:bg-cyan-50 hover:text-black'>{item.button}</button>
+                      <button className='bg-cyan-400 text-white text-md px-6 py-1 mt-5 rounded-xl hover:border-2 hover:bg-cyan-50 hover:text-black'>{item.button}</button>
                     </div>
                   </div>
                 ))

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,7 +7,8 @@ export default {
   theme: {
     extend: {
       backgroundImage: {
-        'slider-background-image': "linear-gradient(#1c607f, #44baef), url('../src/assets/GreenBackground.jpg')",
+        'slider-background-image': "linear-gradient(#1c607f, #44baef)",
+        'nav-background': "linear-gradient(#1c607f, #44baef)",
         'about-us-topsection-bg-img': "linear-gradient(#15183f, #145b7b), url('../src/assets/Vegitable_background.jpg')"
       }
     },