feat: implement store layout and home page components with routing

This commit is contained in:
2026-06-26 13:42:23 -03:00
parent 236a3772a4
commit 23e8da345a
12 changed files with 715 additions and 0 deletions

View File

@@ -0,0 +1,21 @@
<section class="store-home">
<div class="store-home__inner">
<div class="store-home__hero">
<span class="store-home__eyebrow">Store Layout</span>
<h1>Tienda en construccion</h1>
<p class="store-home__lead">
Esta pagina placeholder deja visible el shell del store mientras se conectan categorias,
catalogo y acciones reales.
</p>
</div>
<div class="store-home__highlights">
@for (highlight of highlights; track highlight) {
<article class="store-home__card">
<span class="store-home__card-index" aria-hidden="true">0{{ $index + 1 }}</span>
<p>{{ highlight }}</p>
</article>
}
</div>
</div>
</section>

View File

@@ -0,0 +1,96 @@
:host {
display: block;
}
.store-home {
padding: 3rem 0 4rem;
}
.store-home__inner {
width: min(100% - 3rem, 75rem);
margin: 0 auto;
display: grid;
gap: 1.5rem;
}
.store-home__hero {
padding: clamp(2rem, 4vw, 3rem);
border: 1px solid #e4e4e4;
border-radius: 1.5rem;
background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
box-shadow: 0 1.2rem 2.2rem rgba(17, 17, 17, 0.06);
}
.store-home__eyebrow {
display: inline-block;
margin-bottom: 0.75rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #666666;
}
h1 {
margin-bottom: 0.75rem;
font-size: clamp(2rem, 4vw, 3.25rem);
font-weight: 700;
letter-spacing: -0.05em;
}
.store-home__lead {
max-width: 42rem;
margin: 0;
font-size: 1rem;
line-height: 1.6;
color: #4a4a4a;
}
.store-home__highlights {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.store-home__card {
display: grid;
gap: 0.9rem;
padding: 1.5rem;
border: 1px solid #e4e4e4;
border-radius: 1.25rem;
background-color: #ffffff;
box-shadow: 0 0.75rem 1.5rem rgba(17, 17, 17, 0.04);
}
.store-home__card-index {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.08em;
color: #707070;
}
.store-home__card p {
margin: 0;
line-height: 1.6;
color: #333333;
}
@media (max-width: 991.98px) {
.store-home__highlights {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767.98px) {
.store-home {
padding: 2rem 0 3rem;
}
.store-home__inner {
width: min(100% - 1.5rem, 75rem);
}
.store-home__highlights {
grid-template-columns: minmax(0, 1fr);
}
}

View File

@@ -0,0 +1,14 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-store-home-page',
templateUrl: './store-home-page.component.html',
styleUrl: './store-home-page.component.scss'
})
export class StoreHomePageComponent {
protected readonly highlights = [
'Header y footer listos para conectar con datos reales.',
'Barra de categorias reservada para sumar dropdown despues.',
'Placeholder inicial para validar layout, espaciados y responsive.'
];
}

View File

@@ -0,0 +1,17 @@
import { Routes } from '@angular/router';
import { StoreLayoutComponent } from '../../core/layout/store-layout/store-layout.component';
import { StoreHomePageComponent } from './pages/store-home-page/store-home-page.component';
export const routes: Routes = [
{
path: '',
component: StoreLayoutComponent,
children: [
{
path: '',
component: StoreHomePageComponent
}
]
}
];