Refacture: Created InitialSection component so it can be used in every page just giving props

src/styles/index.css

@@ -13,82 +13,6 @@
     padding: 0px 350px;
 }
 
-.section-1 {
-    position: relative;
-    background-color: transparent;
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4xl-96px);
-    padding: 80px 300px 0px 300px;
-}
-
-.main-title {
-    font-size: 80px;
-}
-
-.lady-img {
-    position: absolute;
-    top: 20px;
-    right: 0px;
-
-    width: 680px;
-    height: auto;
-
-    transform: translateX(-25%);
-    z-index: -1;
-    pointer-events: none;
-}
-
-.landing-content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4xl-96px);
-}
-
-.logo-container {
-    display: flex;
-    align-items: center;
-    justify-content: start;
-}
-.logo-naliia-full {
-    height: 81px;
-    width: auto;
-}
-
-.text-and-button-container {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3xl-64px);
-    max-width: 780px;
-}
-
-.text-content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-md-16px);
-}
-.subtitle {
-    max-width: 630px;
-}
-
-.call-to-action-button {
-    height: 56px;
-    width: auto;
-    padding: var(--space-sm-8px) var(--space-lg-24px);
-    border: none;
-    border-radius: 16px;
-    background-color: #e54c75;
-    font-size: var(--font-desktop-h5);
-    font-weight: bold;
-    font-family: var(--font-family-primary);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    cursor: pointer;
-}
-
 /* ----- Offer section styles ----- */
 .offer-section {
     background-color: transparent;