Created basic structure of home page
This commit is contained in:
@@ -1,5 +1,205 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import "../styles/index.css";
|
||||
---
|
||||
|
||||
<Layout pageTitle="Home page"> Sitio web de Naliia </Layout>
|
||||
<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>
|
||||
|
||||
<section class="offer-section second-sect-container sections">
|
||||
<div class="title-and-phrase">
|
||||
<h4>¿Qué ofrecemos?</h4>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
Sint, saepe quisquam deleniti mollitia tempore, laborum
|
||||
neque commodi ipsam nobis placeat.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="cards-container">
|
||||
<div class="offer-card">
|
||||
<div class="card-content">
|
||||
<h5>Título tarjeta</h5>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing
|
||||
elit. Provident ut quisquam corrupti minus, in ab
|
||||
labore ratione aperiam ducimus cumque.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="offer-card">
|
||||
<div class="card-content">
|
||||
<h5>Título tarjeta</h5>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing
|
||||
elit. Provident necessitatibus et non quia
|
||||
voluptates aperiam eligendi ut in error vero.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="offer-card">
|
||||
<div class="card-content">
|
||||
<h5>Título tarjeta</h5>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing
|
||||
elit. Provident necessitatibus et non quia
|
||||
voluptates aperiam eligendi ut in error vero.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="offer-card">
|
||||
<div class="card-content">
|
||||
<h5>Título tarjeta</h5>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing
|
||||
elit. Provident necessitatibus et non quia
|
||||
voluptates aperiam eligendi ut in error vero.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pricing pricing-container">
|
||||
<div class="title-and-phrase">
|
||||
<h4>Elige tu plan</h4>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
Nobis labore consequatur reiciendis ullam veritatis
|
||||
inventore. Molestiae minima ab ut fugiat.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="pricing-cards-container">
|
||||
<div class="pricing-card">
|
||||
<p class="plan-type">Tipo de plan</p>
|
||||
|
||||
<div class="price-and-description">
|
||||
<h4>$100.000</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing
|
||||
elit. Repudiandae sapiente optio, quisquam ea
|
||||
placeat architecto dicta, suscipit quasi
|
||||
necessitatibus neque.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="features-container">
|
||||
<h6>Características</h6>
|
||||
<ul>
|
||||
<li>Característica #1 del plan</li>
|
||||
<li>Característica #2 del plan</li>
|
||||
<li>Característica #3 del plan</li>
|
||||
<li>Característica #4 del plan</li>
|
||||
<li>Característica #5 del plan</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button class="button select-plan-button"
|
||||
>Contáctanos</button
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="pricing-card best-plan-card">
|
||||
<p class="plan-type">Tipo de plan</p>
|
||||
|
||||
<div class="price-and-description">
|
||||
<h4>$500.000</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing
|
||||
elit. Repudiandae sapiente optio, quisquam ea
|
||||
placeat architecto dicta, suscipit quasi
|
||||
necessitatibus neque.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="features-container">
|
||||
<h6>Características</h6>
|
||||
<ul>
|
||||
<li>Característica #1 del plan</li>
|
||||
<li>Característica #2 del plan</li>
|
||||
<li>Característica #3 del plan</li>
|
||||
<li>Característica #4 del plan</li>
|
||||
<li>Característica #5 del plan</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button class="button select-plan-button"
|
||||
>Contáctanos</button
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="pricing-card">
|
||||
<p class="plan-type">Tipo de plan</p>
|
||||
|
||||
<div class="price-and-description">
|
||||
<h4>$300.000</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing
|
||||
elit. Repudiandae sapiente optio, quisquam ea
|
||||
placeat architecto dicta, suscipit quasi
|
||||
necessitatibus neque.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="features-container">
|
||||
<h6>Características</h6>
|
||||
<ul>
|
||||
<li>Característica #1 del plan</li>
|
||||
<li>Característica #2 del plan</li>
|
||||
<li>Característica #3 del plan</li>
|
||||
<li>Característica #4 del plan</li>
|
||||
<li>Característica #5 del plan</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button class="button select-plan-button"
|
||||
>Contáctanos</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
Reference in New Issue
Block a user