Feature/cra 15

src/components/Navbar/navbar.module.scss

@@ -151,6 +151,7 @@
     backdrop-filter: blur(8px);
     display: flex;
     height: 120px;
+    z-index: 1;
 
     &__logo {
       margin: 10px 20px;

src/components/Section/Section.jsx

@@ -0,0 +1,10 @@
+import PropTypes from "prop-types";
+import styles from "./section.module.scss";
+
+export const Section = ({ children }) => {
+  return <div className={styles.wrapper}>{children}</div>;
+};
+
+Section.propTypes = {
+  children: PropTypes.node.isRequired,
+};

src/components/Section/section.module.scss

@@ -0,0 +1,11 @@
+.wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+@media (max-width: 768px) {
+  .wrapper {
+    align-items: center;
+    justify-content: center;
+  }
+}

src/components/index.js

@@ -8,3 +8,4 @@ export { Logo } from "./Logo/Logo";
 export { Navbar } from "./Navbar/Navbar";
 export { SearchForm } from "./SearchForm/SearchForm";
 export { Select } from "./Select/Select";
+export { Section } from "./Section/Section";

src/modules/main/components/EncourageSection/EncourageSection.jsx

@@ -0,0 +1,21 @@
+import styles from "./encourage_section.module.scss";
+import dog from "../../../../assets/image/encourages/dog.png";
+import { Section } from "../../../../components";
+
+export const EncourageSection = () => {
+  return (
+    <Section>
+      <div className={styles.section__description}>
+        <h3 className={styles.description__title}>
+          W trosce o potrzeby Twojego zwierzaka
+        </h3>
+        <p className={styles.description__text}>
+          Kompleksowa wyszukiwarka usług dla zwierząt, która powstała z myślą o
+          czworonogach i ich właścicielach, ułatwiając im dostęp do szerokiego
+          grona specjalistów.
+        </p>
+      </div>
+      <img className={styles.section__image} src={dog} alt="" />
+    </Section>
+  );
+};

src/modules/main/components/EncourageSection/encourage_section.module.scss

@@ -0,0 +1,60 @@
+.section__description {
+  display: flex;
+  height: 600px;
+  flex-direction: column;
+  margin-left: 90px;
+}
+
+.description__title {
+  margin-top: 150px;
+  font-size: 36px;
+  color: #243b70;
+}
+
+.description__text {
+  margin-top: 0;
+  font-size: 25px;
+  color: #385cb0;
+  width: 650px;
+}
+
+.section__image {
+  width: 55%;
+  height: 650px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: -1;
+}
+
+@media (max-width: 786px) {
+  .section__description {
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+    margin: 0;
+    padding: 0 10px;
+    height: 500px;
+  }
+
+  .description__text {
+    width: 100%;
+    text-align: end;
+    text-shadow: 1px 3px 1px #000;
+    color: #fff;
+    margin-top: 20px;
+  }
+
+  .description__title {
+    text-shadow: 1px 2px 1px #000;
+    text-align: center;
+    margin: 25px 0;
+    color: #fff;
+    font-size: 30px;
+  }
+
+  .section__image {
+    width: 195%;
+    height: 75%;
+  }
+}

src/modules/main/pages/Main.jsx

@@ -1,20 +1,13 @@
-import { Section } from "../components/EncourageSection/Section";
-import dog from "../../../assets/image/encourages/dog.png";
-import { SearchForm } from "../../../components/SearchForm/SearchForm";
+import { EncourageSection } from "../components/EncourageSection/EncourageSection";
 import { DividerSection } from "../../../components/DividerSection/DividerSection";
-import { OpinionsSection } from "../../../components/OpinionsSection/OpinionsSection";
 import { ServicesList } from "../../../components/ServicesList/ServicesList";
+import { OpinionsSection, SearchForm } from "../../../components";
 
 export const Main = () => {
   return (
     <div>
+      <EncourageSection />
       <SearchForm />
-      <Section
-        imageSrc={dog}
-        title="W trosce o potrzeby Twojego zwierzaka"
-        description="Kompleksowa wyszukiwarka usług dla zwięrząt, która powstała z myślą 
-        o czworonogach i ich właścicielach ułatwiając im dostęp do szerokiego pasma specjalistów."
-      />
       <ServicesList />
       <OpinionsSection />
       <DividerSection />