Merge pull request #16 from Elizabethhub/dmytro-prymache-header-start…

…-page фікс бекграунда + бутилочки на велком
Elizabethhub · Mar 14, 2024 · 1567592 · 1567592
2 parents b26e6a9 + 8d3fd72
commit 1567592
Show file tree

Hide file tree

Showing 7 changed files with 279 additions and 15 deletions.
diff --git a/src/components/Welcome/Welcom.jsx b/src/components/Welcome/Welcom.jsx
@@ -1,15 +1,21 @@
+import DesctopWoter from '../../images/backgroundImg/backgraundSvg/DesctopWoter';
+import TabletWoter from '../../images/backgroundImg/backgraundSvg/TabletWoter';
 import SvgHabit from '../../images/svg/svgWelcome/SvgHabit';
 import SvgPersonal from '../../images/svg/svgWelcome/SvgPersonal';
 import SvgView from '../../images/svg/svgWelcome/SvgView';
 
 import {
+  DesctopWoterDivImg,
   DivImgContainerWelcome,
+  TabletWoterDivImg,
   WelcomeDivCantainer,
   WelcomeLi,
   WelcomeNavLink,
   WelcomeUl,
   WelcomeWhyDrinkDivCantainer,
+  WelcomeWhyDrinkH3,
   WelcomeWhyDrinkLi,
+  WelcomeWhyDrinkUl,
   Welcomeh1,
   Welcomeh2,
   Welcomeh3,
@@ -19,6 +25,12 @@ const Welcom = () => {
   return (
     <>
       <DivImgContainerWelcome />
+      <TabletWoterDivImg>
+        <TabletWoter />
+      </TabletWoterDivImg>
+      <DesctopWoterDivImg>
+        <DesctopWoter />
+      </DesctopWoterDivImg>
 
       <WelcomeDivCantainer>
         <div>
@@ -38,14 +50,15 @@ const Welcom = () => {
               <SvgPersonal />
               <span>Personal rate setting</span>
             </WelcomeLi>
-            <WelcomeNavLink to="/signin" style={{ textDecoration: 'none' }}>
-              Try tracker
-            </WelcomeNavLink>
           </WelcomeUl>
+
+          <WelcomeNavLink to="/signin" style={{ textDecoration: 'none' }}>
+            Try tracker
+          </WelcomeNavLink>
         </div>
         <WelcomeWhyDrinkDivCantainer>
-          <h3>Why drink water</h3>
-          <ul>
+          <WelcomeWhyDrinkH3>Why drink water</WelcomeWhyDrinkH3>
+          <WelcomeWhyDrinkUl>
             <WelcomeWhyDrinkLi>
               Supply of nutrients to all organs
             </WelcomeWhyDrinkLi>
@@ -65,7 +78,7 @@ const Welcom = () => {
             <WelcomeWhyDrinkLi>
               Maintaining an immune system capable of resisting disease
             </WelcomeWhyDrinkLi>
-          </ul>
+          </WelcomeWhyDrinkUl>
         </WelcomeWhyDrinkDivCantainer>
       </WelcomeDivCantainer>
     </>

diff --git a/src/components/Welcome/WelcomStyled.js b/src/components/Welcome/WelcomStyled.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import welcomebackgroundImageMobail from '../../images/backgroundWelcome/MobileWelkome.jpg';
-import welcomebackgroundImageTablet from '../../images/backgroundWelcome/TabletTrackerofwaterMainpage.jpg';
-import welcomebackgroundImageDesctop from '../../images/backgroundWelcome/DesktopTrackerofwaterMainpage.jpg';
+import welcomebackgroundImageMobail from '../../images/backgroundWelcome/MobileBacgraund.jpg';
+import welcomebackgroundImageTablet from '../../images/backgroundWelcome/TabletMainpage.jpg';
+import welcomebackgroundImageDesctop from '../../images/backgroundWelcome/DesktopMainpage.jpg';
 import { NavLink } from 'react-router-dom';
 
 export const DivImgContainerWelcome = styled.div`
@@ -29,31 +29,57 @@ export const DivImgContainerWelcome = styled.div`
 
 export const WelcomeDivCantainer = styled.div`
   display: flex;
+  flex-direction: column;
+  gap: 165px;
+  @media only screen and (min-width: 768px) {
+    gap: 60px;
+  }
+  @media only screen and (min-width: 1440px) {
+    flex-direction: row;
+    gap: 81px;
+    justify-content: center;
+    align-items: flex-end;
+    padding-top: 80px;
+  }
 `;
 export const Welcomeh1 = styled.h1`
   width: 246px;
   font-weight: 700;
   font-size: 28px;
   padding-top: 24px;
   padding-bottom: 16px;
+  @media only screen and (min-width: 768px) {
+    width: 100%;
+  }
 `;
 export const Welcomeh2 = styled.h2`
   width: 220px;
   font-weight: 400;
   font-size: 24px;
 
   padding-bottom: 24px;
+  @media only screen and (min-width: 768px) {
+    width: 100%;
+  }
 `;
 export const Welcomeh3 = styled.h3`
   font-weight: 500;
   font-size: 18px;
   padding-bottom: 12px;
+  @media only screen and (min-width: 768px) {
+    width: 100%;
+  }
 `;
 
 export const WelcomeUl = styled.ul`
   display: flex;
   gap: 16px;
   flex-direction: column;
+  padding-bottom: 24px;
+  @media only screen and (min-width: 768px) {
+    flex-direction: row;
+    width: 100%;
+  }
 `;
 
 export const WelcomeLi = styled.li`
@@ -97,22 +123,29 @@ export const WelcomeWhyDrinkLi = styled.li`
 `;
 
 export const WelcomeWhyDrinkDivCantainer = styled.div`
-  display: none;
   border-radius: 10px;
   padding: 32px 24px;
-  width: 494px;
-  height: 300px;
+
   box-shadow: 0 4px 14px 0 rgba(64, 123, 255, 0.3);
   background: #ecf2ff;
+  max-width: 380px;
+  margin-bottom: 20px;
   @media only screen and (min-width: 768px) {
-    display: block;
+    max-width: 494px;
+  }
+  @media only screen and (min-width: 1440px) {
+    margin-bottom: 0px;
   }
 `;
 export const WelcomeNavLink = styled(NavLink)`
+  max-width: 280px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   border-radius: 10px;
-  padding: 8px 30px;
+  padding: 9px;
   width: 100%;
-  height: 36px;
+
   box-shadow: 0 4px 8px 0 rgba(64, 123, 255, 0.34);
   background: #407bff;
 
@@ -122,4 +155,52 @@ export const WelcomeNavLink = styled(NavLink)`
   text-align: center;
   color: #fff;
   border: none;
+  @media only screen and (min-width: 768px) {
+    max-width: 336px;
+    padding: 13px;
+  }
+`;
+
+export const TryTrackerDivContainer = styled.div`
+  @media only screen and (min-width: 768px) {
+  }
+`;
+
+export const WelcomeWhyDrinkH3 = styled.h3`
+  padding-bottom: 12px;
+
+  font-weight: 500;
+  font-size: 18px;
+
+  @media only screen and (min-width: 768px) {
+  }
+`;
+export const WelcomeWhyDrinkUl = styled.ul`
+  padding-left: 20px;
+  @media only screen and (min-width: 768px) {
+  }
+`;
+export const TabletWoterDivImg = styled.div`
+  @media only screen and (max-width: 767px) {
+    display: none;
+  }
+
+  position: absolute;
+  left: 50%;
+  top: 36%;
+  z-index: -1;
+  @media only screen and (min-width: 1440px) {
+    display: none;
+  }
+`;
+
+export const DesctopWoterDivImg = styled.div`
+  @media only screen and (max-width: 1439px) {
+    display: none;
+  }
+
+  position: absolute;
+  left: 71%;
+  top: 39%;
+  z-index: -1;
 `;
diff --git a/src/images/backgroundImg/backgraundSvg/DesctopWoter.jsx b/src/images/backgroundImg/backgraundSvg/DesctopWoter.jsx
@@ -0,0 +1,90 @@
+const DesctopWoter = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={374}
+    height={278}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#F5F5F5"
+      d="M186.998 278.001c80.098 0 145.03-3.781 145.03-8.446 0-4.664-64.932-8.446-145.03-8.446-80.097 0-145.03 3.782-145.03 8.446 0 4.665 64.933 8.446 145.03 8.446Z"
+    />
+    <path
+      fill="#407BFF"
+      d="M102.699 210.592a2.65 2.65 0 0 1 .963-1.71 2.661 2.661 0 0 1 1.879-.581c6.403-.097 12.395 4.417 17.952 9.259 1.235 1.067 2.573 2.172 3.957 1.052.428-.353.741-.826.898-1.357a5.013 5.013 0 0 0 0-2.657 5.803 5.803 0 0 0-1.01-1.977c-2.416-3.171-5.356-4.693-7.742-7.968a28.9 28.9 0 0 1-3.298-6.043c-.748-1.88-2.244-4.917-1.646-7.461.666-3.044 2.947-2.783 4.331-2.365 4.376 1.305 8.46 4.417 12.17 8.289 3.957 4.118 7.54 9.08 11.108 14.011 1.346 1.873 2.767 3.798 4.488 4.477 1.72.679 3.897-.418 4.622-3.119.726-2.701-.127-5.804-.306-8.49a39.137 39.137 0 0 1 .463-9.595c.243-1.674.81-3.286 1.668-4.745 1.93-2.82 4.788-1.828 6.658.306a19.586 19.586 0 0 1 3.261 5.969 68.49 68.49 0 0 1 3.74 18.54c.284 3.917.883 7.998 2.498 11.035 2.611 4.909 7.48 4.521 11.258 1.947 6.575-4.477 11.646-14.594 13-25.904.441-3.686.553-7.67 1.9-10.759 1.174-2.671 4.189-4.477 5.662-1.597.594 1.44.76 3.02.479 4.552a32.248 32.248 0 0 1-1.115 4.476c-.748 2.537-1.496 7.289.524 8.774a2.42 2.42 0 0 0 2.027.224c6.612-1.373 12.761-7.58 16.8-16.242a51.127 51.127 0 0 0 3.336-10.155c.486-2.134.688-4.424 1.227-6.543a11.924 11.924 0 0 1 2.049-4.618c2.574-3.074 8.513-1.627 8.849 4.961.202 3.813-.815 7.543-1.189 11.274-.232 2.327 1.212 2.313 2.289 2.238 5.161-.522 9.724-5.715 13.771-11.117 4.809-6.424 10.135-14.765 16.702-15.011 1.496-.052 3.987.142 4.885 2.447a7.657 7.657 0 0 1 0 4.327c-1.332 5.507-5.236 8.349-8.228 11.072a139.352 139.352 0 0 0-22.089 26.516c-.95 1.493-1.929 3.955-1.024 5.417a1.636 1.636 0 0 0 1.683.746c3.089-.239 5.984-2.686 8.804-4.715 2.82-2.03 6.021-3.805 8.976-2.276a8.033 8.033 0 0 1 3.672 4.969c.528 1.804.613 3.708.247 5.551-1.085 5.066-5.774 7.342-8.355 9.841a86.222 86.222 0 0 0-9.724 11.109c-2.693 3.678-5.236 7.707-7.929 11.318-9.724 12.93-23.188 14.848-35.156 16.347-13.023 1.627-26.075.746-39.023-.962-9.417-1.254-18.7-3.925-27.893-7.096-3.157-1.141-6.291-2.387-9.387-3.864-3.329-1.582-8.228-2.559-9.507-8.789-.27-1.343.044-2.433.935-2.932 2.76-1.567 6.694.529 9.29 1.91 3.583 1.91 6.979 4.633 10.659 6.103a4.89 4.89 0 0 0 3.829.201 2.837 2.837 0 0 0 1.414-1.291 3.43 3.43 0 0 0 .269-2.454 2.92 2.92 0 0 0-.748-1.172 71.201 71.201 0 0 0-23.277-15.832c-2.805-1.201-5.67-2.186-8.37-3.887a18.799 18.799 0 0 1-5.536-5.222c-1.256-2.007-3.276-5.551-2.64-8.752ZM245.768 155.746a3.323 3.323 0 0 1-3.94.623 3.312 3.312 0 0 1-1.448-1.523 3.295 3.295 0 0 1-.237-2.084c2.581-12.497 8.191-21.585 14.863-16.869 4.982 3.514-2.828 13.205-9.238 19.853Z"
+      opacity={0.1}
+    />
+    <path
+      fill="#407BFF"
+      d="M227.67 161.58a14.068 14.068 0 0 0 7.249-11.191l5.056-61.44a22.68 22.68 0 0 0-1.183-9.33 22.713 22.713 0 0 0-4.868-8.054L218.343 54.92a9.06 9.06 0 0 1-2.401-6.894l.748-8.998-40.325-3.305-.748 8.998a9.029 9.029 0 0 1-3.493 6.409l-18.102 13.899a22.77 22.77 0 0 0-6.117 7.156 22.716 22.716 0 0 0-2.694 9.012l-5.064 61.44a14.043 14.043 0 0 0 1.122 6.77 14.083 14.083 0 0 0 4.196 5.436 14.078 14.078 0 0 0-5.033 4.686 14.026 14.026 0 0 0-2.207 6.505l-6.456 78.34a14.079 14.079 0 0 0 3.31 10.266 14.15 14.15 0 0 0 9.616 4.932l66.572 5.453a14.147 14.147 0 0 0 10.294-3.294 14.081 14.081 0 0 0 4.943-9.59l6.455-78.34a14.048 14.048 0 0 0-1.105-6.773 14.087 14.087 0 0 0-4.184-5.448Z"
+      opacity={0.3}
+    />
+    <path
+      fill="#407BFF"
+      d="m176.377 35.736-.572 6.938 40.316 3.306.571-6.938-40.315-3.306Z"
+      opacity={0.3}
+    />
+    <path
+      fill="#fff"
+      d="m233.551 73.168-15.581-16.66s-10.046.432-2.244 12.72c6.65 10.394 18.236 8.775 17.825 3.94Z"
+      opacity={0.3}
+    />
+    <path
+      fill="#407BFF"
+      d="M131.777 244.344a14.074 14.074 0 0 0 3.31 10.266 14.15 14.15 0 0 0 9.616 4.932l66.572 5.453a14.142 14.142 0 0 0 10.294-3.294 14.081 14.081 0 0 0 4.942-9.59l-94.734-7.767Z"
+      opacity={0.2}
+    />
+    <path
+      fill="#407BFF"
+      d="M230.639 74.609a18.265 18.265 0 0 1 4.862 13.96l-5.056 61.447a9.605 9.605 0 0 1-1.517 4.432 9.634 9.634 0 0 1-3.435 3.193l-5.887 3.253 5.273 4.171a9.59 9.59 0 0 1 3.636 8.326l-6.455 78.339a9.609 9.609 0 0 1-3.363 6.542 9.656 9.656 0 0 1-7.012 2.262l-66.572-5.454a9.673 9.673 0 0 1-6.584-3.35 9.626 9.626 0 0 1-2.28-7.013l6.455-78.339a9.623 9.623 0 0 1 4.944-7.633l5.887-3.253-5.236-4.17a9.582 9.582 0 0 1-3.635-8.327l5.064-61.44c.21-2.537.948-5.001 2.168-7.237a18.307 18.307 0 0 1 4.915-5.745c5.984-3.857 21.692 5.745 40.086 7.252 18.393 1.507 29.897-3.149 33.742-1.216Z"
+      opacity={0.3}
+    />
+    <path
+      fill="#407BFF"
+      d="M196.858 75.833c-18.385-1.492-34.108-11.117-40.092-7.26 10.472 5.745 22.44 9.304 39.801 10.729 17.361 1.425 34.071-4.693 34.071-4.693-3.845-1.932-15.394 2.738-33.78 1.224ZM140.153 142.637a14.05 14.05 0 0 0 1.122 6.769 14.089 14.089 0 0 0 4.197 5.437l82.197 6.715a14.106 14.106 0 0 0 5.036-4.687 14.051 14.051 0 0 0 2.212-6.505l-94.764-7.729Z"
+      opacity={0.2}
+    />
+    <path
+      fill="#407BFF"
+      d="m217.533 28.038-40.203-3.307a3.055 3.055 0 0 0-3.299 2.79l-.801 9.757a3.056 3.056 0 0 0 2.799 3.292l40.203 3.307a3.055 3.055 0 0 0 3.299-2.79l.801-9.757a3.056 3.056 0 0 0-2.799-3.292Z"
+    />
+    <path
+      fill="#fff"
+      d="M178.068 39.064a.377.377 0 0 1-.327-.258.376.376 0 0 1-.017-.145l.942-11.803a.374.374 0 0 1 .404-.343.374.374 0 0 1 .344.403l-.972 11.795a.376.376 0 0 1-.374.351ZM185.361 39.662a.375.375 0 0 1-.344-.403l.972-11.796a.38.38 0 0 1 .544-.303.358.358 0 0 1 .183.218c.014.047.019.096.014.145l-.995 11.796a.379.379 0 0 1-.374.343ZM192.646 40.288a.375.375 0 0 1-.344-.403l.972-11.795a.392.392 0 0 1 .404-.343.366.366 0 0 1 .256.13.373.373 0 0 1 .088.272l-.972 11.796a.373.373 0 0 1-.404.343ZM199.943 40.855a.377.377 0 0 1-.327-.258.376.376 0 0 1-.017-.145l.972-11.795a.38.38 0 0 1 .544-.304.36.36 0 0 1 .183.219.372.372 0 0 1 .014.144l-.973 11.796a.344.344 0 0 1-.037.14.355.355 0 0 1-.215.186.363.363 0 0 1-.144.017ZM207.197 41.452a.375.375 0 0 1-.344-.403l.972-11.796a.398.398 0 0 1 .404-.343.377.377 0 0 1 .328.258c.015.047.02.096.016.145l-.972 11.796a.37.37 0 0 1-.257.329.371.371 0 0 1-.147.014ZM214.521 42.048a.375.375 0 0 1-.344-.403l.943-11.803a.38.38 0 0 1 .403-.343.374.374 0 0 1 .337.403l-.965 11.803a.379.379 0 0 1-.374.343Z"
+      opacity={0.2}
+    />
+    <path
+      fill="#407BFF"
+      d="M152.593 122.113c-1.137-6.275-10.3-5.827-10.824.522l-1.645 20.002a14.04 14.04 0 0 0 1.121 6.77 14.078 14.078 0 0 0 4.197 5.436 14.045 14.045 0 0 0-7.241 11.192l-6.455 78.339a14.077 14.077 0 0 0 3.31 10.267 14.15 14.15 0 0 0 9.615 4.931l17.204 1.41a12.43 12.43 0 0 0 10.202-4.018 12.359 12.359 0 0 0 3.023-10.516l-22.507-124.335Z"
+      opacity={0.2}
+    />
+    <path
+      fill="#407BFF"
+      d="M218.79 224.69a7.284 7.284 0 0 1-1.562 3.939 7.316 7.316 0 0 1-3.493 2.41 7.318 7.318 0 0 1-7.814-2.227 7.283 7.283 0 0 1-.929-8.054 7.303 7.303 0 0 1 2.952-3.044 7.339 7.339 0 0 1 4.151-.895 7.333 7.333 0 0 1 4.98 2.554 7.294 7.294 0 0 1 1.715 5.317ZM195.534 196.437a5.153 5.153 0 0 1-1.103 2.788 5.188 5.188 0 0 1-5.476 1.756 5.169 5.169 0 0 1-3.722-4.375 5.15 5.15 0 0 1 .538-2.949 5.174 5.174 0 0 1 5.029-2.786 5.19 5.19 0 0 1 3.52 1.807 5.162 5.162 0 0 1 1.214 3.759ZM173.897 133.549a5.176 5.176 0 0 1-4.924-2.959 5.15 5.15 0 0 1 .853-5.671 5.185 5.185 0 0 1 7.99.399 5.156 5.156 0 0 1-1.956 7.745 5.197 5.197 0 0 1-1.963.486ZM188.012 102.684a3.674 3.674 0 0 1-3.496-2.088 3.649 3.649 0 0 1 .6-4.021 3.668 3.668 0 0 1 3.955-.982 3.66 3.66 0 0 1 2.42 3.271 3.664 3.664 0 0 1-3.479 3.82ZM210.72 174.121a2.13 2.13 0 0 1-1.479 1.853 2.142 2.142 0 0 1-2.778-1.788 2.133 2.133 0 0 1 2.298-2.37 2.137 2.137 0 0 1 1.959 2.305Z"
+      opacity={0.3}
+    />
+    <path
+      fill="#fff"
+      d="M171.975 232.495h-.359a4.35 4.35 0 0 1-2.992-1.492 4.264 4.264 0 0 1-1.01-3.149 4.327 4.327 0 0 1 2.909-3.727 4.341 4.341 0 0 1 4.591 1.157 4.316 4.316 0 0 1 .784 4.659 4.336 4.336 0 0 1-3.961 2.589l.038-.037Zm0-8.088a3.752 3.752 0 0 0-2.336.832 3.724 3.724 0 0 0 .785 6.285 3.748 3.748 0 0 0 4.542-1.122 3.73 3.73 0 0 0-.112-4.667 3.75 3.75 0 0 0-2.565-1.313l-.314-.015ZM218.237 145.189h-.261a3.155 3.155 0 0 1-2.141-1.097 3.137 3.137 0 0 1-.739-2.283 3.137 3.137 0 0 1 1.102-2.138 3.152 3.152 0 0 1 4.434.362c.54.633.806 1.454.74 2.283a3.173 3.173 0 0 1-1.1 2.141 3.144 3.144 0 0 1-2.035.732Zm-2.58-3.35a2.583 2.583 0 0 0 2.883 2.752 2.597 2.597 0 0 0 2.002-1.386 2.566 2.566 0 0 0 .162-1.97 2.594 2.594 0 0 0-.492-.881 2.551 2.551 0 0 0-1.795-.836 2.6 2.6 0 0 0-1.886.601 2.56 2.56 0 0 0-.904 1.757l.03-.037ZM169.907 79.04h-.112a1.497 1.497 0 0 1-1.347-1.582 1.494 1.494 0 0 1 1.843-1.354 1.498 1.498 0 0 1 1.124 1.193 1.495 1.495 0 0 1-1.471 1.75l-.037-.008Zm-.905-1.538a.903.903 0 0 0 1.487.76.896.896 0 0 0 .278-.963.906.906 0 0 0-1.139-.588.896.896 0 0 0-.626.791ZM202.984 117.68h-.314a3.75 3.75 0 0 1-2.561-1.308 3.72 3.72 0 0 1 1.65-5.939 3.747 3.747 0 0 1 3.957 1.007 3.722 3.722 0 0 1-.7 5.642 3.746 3.746 0 0 1-2.039.613l.007-.015Zm0-6.938a3.166 3.166 0 0 0-2.057.746 3.192 3.192 0 0 0-1.122 2.163 3.182 3.182 0 0 0 1.199 2.752 3.192 3.192 0 0 0 2.96.538 3.183 3.183 0 0 0 2.095-2.153 3.186 3.186 0 0 0-.629-2.935 3.153 3.153 0 0 0-2.176-1.111h-.27Z"
+      opacity={0.7}
+    />
+    <path
+      fill="#fff"
+      d="m233.669 150.299 4.832-58.59a2.852 2.852 0 0 0-1.549-2.777 2.87 2.87 0 0 0-1.076-.305 2.864 2.864 0 0 0-2.784 1.54 2.854 2.854 0 0 0-.305 1.072l-4.833 58.59a11.788 11.788 0 0 1-1.86 5.467 11.834 11.834 0 0 1-4.236 3.934l-2.939 1.634 2.64 2.081a11.857 11.857 0 0 1 3.537 4.571 11.817 11.817 0 0 1 .951 5.695l-6.455 78.34c-.389 4.7-3.351 6.991-7.518 8.818a1.313 1.313 0 0 0-.618.576 1.299 1.299 0 0 0 .264 1.574c.213.196.485.317.773.342 3.14.256 6.254-.742 8.656-2.775a11.845 11.845 0 0 0 4.158-8.065l6.455-78.34a11.81 11.81 0 0 0-4.488-10.266l-2.641-2.089 2.94-1.626a11.848 11.848 0 0 0 4.233-3.936 11.807 11.807 0 0 0 1.863-5.465Z"
+      opacity={0.3}
+    />
+    <path
+      fill="#407BFF"
+      d="M311.31 241.352c-.808-3.656-10.891-1.492-12.978-1.156a61.072 61.072 0 0 0-11.848 3.409c-4.211 1.649-9.103 4.074-13.464 1.567-2.521-1.447 6.231-4.305 7.024-4.596a64.003 64.003 0 0 0 10.726-4.909c1.384-.821 4.062-2.783 2.91-4.775-.958-1.649-4.391-1.492-6.478-1.239a77.264 77.264 0 0 0-18.468 4.619 182.874 182.874 0 0 0-16.95 7.737 21.875 21.875 0 0 1-6.874 2.469c-2.633.373-5.857-.186-6.896-1.641-1.04-1.455.299-3.156.606-4.618a7.835 7.835 0 0 0-.517-5.223 5.515 5.515 0 0 0-2.431-2.552c-2.849-1.492-7.158-.94-10.023.239a16.464 16.464 0 0 0-5.004 3.298 20.127 20.127 0 0 0-5.894 10.109 9.393 9.393 0 0 1-3.965 6.021c-4.009 2.694-11.354 2.537-16.972 1.186-9.806-2.32-17.286-7.744-19.089-13.869-.875-2.918-1.301-5.969-5.236-7.111-2.543-.746-7.869-.223-6.732 2.985a9.976 9.976 0 0 0 1.601 2.417c1.04 1.365 2.147 3.939-.942 4.768a9.611 9.611 0 0 1-3.045.149c-9.933-.664-19.074-3.969-24.998-8.625a20.099 20.099 0 0 1-4.832-5.469c-.703-1.156-.957-2.402-1.728-3.544a6.865 6.865 0 0 0-2.992-2.484c-3.815-1.634-12.776-.784-13.404 2.798-.337 1.94.875 4.043 1.496 5.886.111.233.138.497.075.746-.18.47-.89.605-1.496.642-8.011.53-15.783-2.574-22.508-5.812-7.12-3.432-14.96-7.901-24.856-7.953a19.233 19.233 0 0 0-6.066.694c-.5.132-.964.372-1.361.701a1.737 1.737 0 0 0-.33 1.925 4.475 4.475 0 0 0 1.392 1.656c2.992 2.432 7.18 3.417 11.003 4.671a188.172 188.172 0 0 1 32.747 14.138c1.055.589 2.925 1.955 1.444 2.984-1.481 1.03-4.488.366-6.26.075-3.217-.522-6.306-1.358-9.44-2.141-4.144-1.045-8.976-1.992-13.464-1.127-2.372.455-4.488 1.425-5.603 2.738a2.58 2.58 0 0 0-.479 2.985c1.541 2.738 8.565 3.917 12.402 5.222a125.348 125.348 0 0 1 14.384 5.917c3.987 1.969 7.69 4.126 11.729 6.058 14.429 6.901 34.58 7.789 52.599 8.461 19.56.746 39.21.112 58.718-.97 14.212-.791 28.162-2.351 42.09-4.186 4.002-.522 7.981-1.164 11.968-1.708a75.099 75.099 0 0 0 11.968-2.366 10.115 10.115 0 0 0 3.852-1.924c1.07-.993 1.407-2.291-.508-2.664-4.01-.798-8.138.112-12.058.821a233.36 233.36 0 0 0-13.075 2.783c-1.969.523-3.967.93-5.984 1.216a15.069 15.069 0 0 1-6.066-.388c-.644-.202-1.347-.56-1.384-1.127-.038-.567.501-.925 1.055-1.141 8.07-3.194 16.643-5.223 25.274-7.088 5.857-1.269 11.819-2.044 17.721-3.037 5.378-.903 11.048-1.111 15.708-4.514a5.366 5.366 0 0 0 2.064-2.484 2.974 2.974 0 0 0 .142-1.649ZM79.847 211.143c-2.191-6.215-10-17.22-11.646-10.722-.883 3.649 11.646 10.722 11.646 10.722ZM275.961 223.378c4.174-3.797 9.38-6.057 10.053-2.715.628 3.163-10.053 2.715-10.053 2.715ZM104.718 193.177c-2.857-1.493-5.086-3.887-3.411-4.887 1.676-1 3.411 4.887 3.411 4.887Z"
+      opacity={0.3}
+    />
+
+    <defs>
+      <clipPath id="a">
+        <path fill="#fff" d="M0 0h374v278H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default DesctopWoter;