diff --git a/src/components/InitialSection.astro b/src/components/InitialSection.astro new file mode 100644 index 0000000..104bf68 --- /dev/null +++ b/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; +--- + + + + + + + + + + + + + {mainTitle} + + + {subtitle} + + + + { + buttonText && ( + + + {buttonText} + + + ) + } + + + + + diff --git a/src/components/footer/Footer.astro b/src/components/footer/Footer.astro index 5620bc6..ffd6a17 100644 --- a/src/components/footer/Footer.astro +++ b/src/components/footer/Footer.astro @@ -20,8 +20,8 @@ import "./footer.css"; - - - - - - - - - - - - Transformamos el caos en claridad - - - Convertimos la complejidad de salones, spas y - barberías en un ecosistema que respira orden, - precisión y belleza. - - - - - Comienza tu experiencia aquí - - - - + diff --git a/src/styles/index.css b/src/styles/index.css index 99508e8..089c605 100644 --- a/src/styles/index.css +++ b/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;