img background fix

package.json

@@ -2,6 +2,7 @@
   "name": "beer-insiders",
   "version": "0.1.0",
   "private": true,
+  "homepage": "https://wcodersv.github.io/BeerInsiders-React-JS/",
   "dependencies": {
     "-": "^0.0.1",
     "@testing-library/jest-dom": "^5.17.0",
@@ -21,7 +22,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "deploy": "gh-pages -d build",
+    "predeploy": "npm run build"
   },
   "eslintConfig": {
     "extends": [

src/layout/Header/Header.jsx

@@ -12,8 +12,9 @@ export const Header = () => {
                     <p className={styles.hero_description}>Владелец бара планирует закупки на сезон. Проверяет статистику продаж и спрашивает себя: как быстро выбрать напитки, которые будут продаваться?</p>
                     <p className={styles.hero_description}>На обновление барной карты хочется тратить пару дней вместо недель. В Beer Insiders мы проанализировали рынок и вот что выяснили.</p>
                 </div>
+                <div className={styles.shadow}></div>
             </header>
-            <div className={styles.shadow}></div>
+
         </>
     )
-}
+}

src/layout/Header/Header.module.scss

@@ -48,7 +48,7 @@
 
 .shadow {
     width: 100%;
-    height: 100dvh;
+    height: 100%;
     background: linear-gradient(180deg, rgba(40, 40, 40, 0) 26%, rgba(40, 40, 40, 0.92) 70%, #282828 90%);
     position: absolute;
     top: 0;