feat: implement store layout and home page components with routing
This commit is contained in:
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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.'
|
||||
];
|
||||
}
|
||||
17
src/app/features/store/store.routes.ts
Normal file
17
src/app/features/store/store.routes.ts
Normal 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
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
Reference in New Issue
Block a user