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>

src/components/footer/Footer.astro

@@ -20,8 +20,8 @@ import "./footer.css";
             <a href="#" class="social-media-link">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    width="36"
+                    width="34"
-                    height="36"
+                    height="34"
                     viewBox="0 0 24 24"
                     ><path
                         fill="#ffffff"
@@ -33,8 +33,8 @@ import "./footer.css";
             <a href="" class="social-media-link">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    width="32"
+                    width="28"
-                    height="32"
+                    height="28"
                     viewBox="0 0 24 24"
                     ><path
                         fill="#ffffff"
@@ -46,8 +46,8 @@ import "./footer.css";
             <a href="#" class="social-media-link">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    width="32"
+                    width="28"
-                    height="32"
+                    height="28"
                     viewBox="0 0 24 24"
                     ><path
                         fill="#ffffff"

src/components/footer/footer.css

@@ -1,5 +1,5 @@
 .footer-container {
-    height: 150px;
+    height: 100px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -22,7 +22,7 @@
 }
 
 .logo-naliia-footer {
-    height: 50px;
+    height: 44px;
     width: auto;
 }
 
@@ -34,7 +34,7 @@
 
 .icons-social-media {
     display: flex;
-    gap: var(--space-xl-32px);
+    gap: var(--space-lg-24px);
 }
 
 .social-media-link {

src/pages/index.astro

@@ -1,47 +1,20 @@
 ---
 import Layout from "../layouts/Layout.astro";
+import InitialSection from "../components/InitialSection.astro";
 import "../styles/index.css";
 ---
 
 <Layout pageTitle="Home page">
     <section class="homepage">
-        <section class="section-1 first-sect-container">
+        <InitialSection
-            <img
+            imgSrc="/src/assets/imgs/mujer-con-tablet.svg"
-                src="/src/assets/imgs/mujer-con-tablet.svg"
+            imgAlt="Fotografia de una mujer sosteniendo una tablet"
-                alt="Fotografia de una mujer sosteniendo una tablet"
+            logoSrc="/src/assets/imgs/logo-naliia.svg"
-                class="lady-img"
+            logoAlt="Logo de Naliia"
-                fetchpriority="high"
+            mainTitle="Transformamos el caos en claridad"
-            />
+            subtitle="Convertimos la complejidad de salones, spas y barberías en un ecosistema que respira orden, precisión y belleza."
-
+            buttonText="Comienza tu experiencia aquí"
-            <div class="landing-content">
+        />
-                <div class="logo-container">
-                    <img
-                        src="/src/assets/imgs/logo-naliia.svg"
-                        alt="Logo de Naliia"
-                        class="logo-naliia-full"
-                    />
-                </div>
-
-                <div class="text-and-button-container">
-                    <div class="text-content">
-                        <h1 class="main-title">
-                            Transformamos <br />el caos en claridad
-                        </h1>
-                        <h5 class="subtitle">
-                            Convertimos la complejidad de salones, spas y
-                            barberías en un ecosistema que respira orden,
-                            precisión y belleza.
-                        </h5>
-                    </div>
-
-                    <div class="button-container">
-                        <button class="button call-to-action-button"
-                            >Comienza tu experiencia aquí</button
-                        >
-                    </div>
-                </div>
-            </div>
-        </section>
 
         <section class="offer-section second-sect-container sections">
             <div class="title-and-phrase">

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;