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

src/components/InitialSection.astro

@@ -0,0 +1,122 @@
+---
+export interface SectionProps {
+    imgSrc: string;
+    imgAlt: string;
+    logoSrc: string;
+    logoAlt: string;
+    mainTitle: string;
+    subtitle: string;
+    buttonText?: string;
+}
+
+const { imgSrc, imgAlt, logoSrc, logoAlt, mainTitle, subtitle, buttonText } =
+    Astro.props as SectionProps;
+---
+
+<section class="section-1 first-sect-container">
+    <img src={imgSrc} alt={imgAlt} class="main-img" fetchpriority="high" />
+
+    <div class="landing-content">
+        <div class="logo-container">
+            <img src={logoSrc} alt={logoAlt} class="logo-naliia-full" />
+        </div>
+
+        <div class="text-and-button-container">
+            <div class="text-content">
+                <h1 class="main-title">
+                    {mainTitle}
+                </h1>
+                <h5 class="subtitle">
+                    {subtitle}
+                </h5>
+            </div>
+
+            {
+                buttonText && (
+                    <div class="button-container">
+                        <button class="button call-to-action-button">
+                            {buttonText}
+                        </button>
+                    </div>
+                )
+            }
+        </div>
+    </div>
+</section>
+
+<style>
+    .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-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);
+    }
+    .main-title {
+        font-size: 80px;
+    }
+    .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;
+    }
+</style>