Fix hero image

Replaced image and made text more visible

Author: w3bdesign

components/Index/Hero.component.jsx

@@ -6,20 +6,20 @@ const Hero = () => {
     <>
 
     <section
-      id="hero"
+      id="hero"     
       className="flex w-full pt-12 mx-auto mt-24 bg-right bg-cover md:pt-0 md:items-center"
     >
       <div className="container mx-auto">
         <div className="flex flex-col items-start justify-center w-full px-6 tracking-wide lg:w-1/2">
-          <h1 className="my-4 text-2xl text-black">
-            Stripete Zig Zag Jigsaw Pute Sett
+          <h1 className="p-4 my-4 text-2xl text-white bg-black rounded-lg">
+            Stripete Zig Zag Pute Sett
           </h1>
 
           <a
-            className="inline-block px-6 py-3 text-xl leading-relaxed uppercase border border-gray-600 border-solid hover:underline"
+            className="inline-block px-6 py-3 text-xl leading-relaxed text-white uppercase bg-black rounded-lg hover:underline"
             href="#"
           >
-            Kjøp Nå
+            se utvalget
           </a>
         </div>
       </div>

public/images/hero.jpg

@@ -2,9 +2,10 @@
 @tailwind components;
 
 #hero {
-  background-image: url('https://images.unsplash.com/photo-1422190441165-ec2956dc9ecc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');
-  /*max-width: 1050px;*/
-  height: 24rem;
+  /*background-image: url('https://images.unsplash.com/photo-1422190441165-ec2956dc9ecc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');*/
+  background-image: url("../public/images/hero.jpg");
+  height:385px;
+  /*height: 24rem;*/
 }
 
 #mobile-menu {
@@ -23,10 +24,6 @@
   margin-top: -20px;
 }
 
-#product-container {
-/*  max-width: 1000px;*/
-}
-
 /* Fix for annoying CSS bug with NavBar moving slightly on front page only */
 /*@media only screen and (min-width: 769px) {*/