OneTeam/NaliiaWebsite
16
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Juan Diego Moreno Upegui
2026-02-02 15:57:55 -05:00
parent de69b1f1e9
commit 438ffa3282
5 changed files with 141 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/components/InitialSection.astro Normal file
View File

@@ -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>

12
src/components/footer/Footer.astro
View File

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

6
src/components/footer/footer.css
View File

@@ -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 {

47
src/pages/index.astro
View File

@@ -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">
<img
src="/src/assets/imgs/mujer-con-tablet.svg"
alt="Fotografia de una mujer sosteniendo una tablet"
class="lady-img"
fetchpriority="high"
/>
<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>
<InitialSection
imgSrc="/src/assets/imgs/mujer-con-tablet.svg"
imgAlt="Fotografia de una mujer sosteniendo una tablet"
logoSrc="/src/assets/imgs/logo-naliia.svg"
logoAlt="Logo de Naliia"
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í"
/>
<section class="offer-section second-sect-container sections">
<div class="title-and-phrase">

76
src/styles/index.css
View File

@@ -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;