feat: mejoras en componentes y correcciones ortográficas

- Corrección ortográfica en index.astro (sábados)
- Implementación de prop autoHeight en InitialSection para ajuste dinámico de altura
- Creación del componente PricingCard con diseño responsive
- Creación de PlanDetailsTable con características detalladas de cada plan
- Agregados emojis ✅ a características incluidas en planes
- Actualización de estilos para página de pricing
- Ajustes en el slot extraContent de InitialSection
- Mejoras visuales y estructurales en pricing.astro

src/components/InitialSection.astro

@@ -2,19 +2,40 @@
 export interface SectionProps {
     imgSrc: string;
     imgAlt: string;
+    imgWidth?: number;
+    imgHeight?: number;
+    customXPosition?: string;
     logoSrc: string;
     logoAlt: string;
     mainTitle: string;
     subtitle: string;
     buttonText?: string;
+    autoHeight?: boolean;
 }
 
-const { imgSrc, imgAlt, logoSrc, logoAlt, mainTitle, subtitle, buttonText } =
-    Astro.props as SectionProps;
+const {
+    imgSrc,
+    imgAlt,
+    imgWidth,
+    imgHeight,
+    logoSrc,
+    logoAlt,
+    mainTitle,
+    subtitle,
+    buttonText,
+    customXPosition,
+    autoHeight = false,
+} = Astro.props as SectionProps;
 ---
 
-<section class="section-1 first-sect-container">
-    <img src={imgSrc} alt={imgAlt} class="main-img" fetchpriority="high" />
+<section class="section-1 first-sect-container" data-auto-height={autoHeight}>
+    <img
+        src={imgSrc}
+        alt={imgAlt}
+        class="main-img"
+        fetchpriority="high"
+        style={`width: ${imgWidth ? imgWidth : "auto"}px; height: ${imgHeight ? imgHeight : "auto"}px; ${customXPosition ? `transform: translateX(${customXPosition});` : ""}`}
+    />
 
     <div class="landing-content">
         <div class="logo-container">
@@ -41,7 +62,6 @@ const { imgSrc, imgAlt, logoSrc, logoAlt, mainTitle, subtitle, buttonText } =
                 )
             }
         </div>
-
         <slot name="extraContent" />
     </div>
 </section>
@@ -57,6 +77,12 @@ const { imgSrc, imgAlt, logoSrc, logoAlt, mainTitle, subtitle, buttonText } =
         padding: 80px 300px 0px 300px;
     }
 
+    .section-1[data-auto-height="true"] {
+        height: auto;
+        min-height: 100vh;
+        padding-bottom: 80px;
+    }
+
     .main-img {
         position: absolute;
         top: 20px;
@@ -65,7 +91,7 @@ const { imgSrc, imgAlt, logoSrc, logoAlt, mainTitle, subtitle, buttonText } =
         width: 680px;
         height: auto;
 
-        transform: translateX(-25%);
+        transform: translateX(-32%);
         z-index: -1;
         pointer-events: none;
     }