Skip to content

Commit 9348dca

Browse files
WanderleeDevWanderleeDev
committed
feat: implement home view and update routing to support landing page navigation
1 parent 6314a1d commit 9348dca

6 files changed

Lines changed: 168 additions & 33 deletions

File tree

‎projects/demo-ngx-theme-stack/public/_redirects‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
1-
/ /toggle 200
1+
# Consolidar todo el tráfico en el dominio principal (SEO)
2+
https://demo-ngx-theme-stack.pages.dev/* https://demo-ngx-theme-stack.wanderlee.site/:splat 301
3+
4+
# El soporte de SPA se maneja automáticamente mediante index.html y 404.html en el despliegue

‎projects/demo-ngx-theme-stack/src/app/app.routes.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ export const routes: Routes = [
66
path: '',
77
component: ThemeSceneComponent,
88
children: [
9+
{
10+
path: '',
11+
title: 'NgxThemeStack - The Core of Your Themes',
12+
loadComponent: () => import('./views/home-view/home-view'),
13+
},
914
{
1015
path: 'toggle',
1116
title: 'NgxThemeStack - Toggle Demo',
@@ -21,7 +26,6 @@ export const routes: Routes = [
2126
title: 'NgxThemeStack - Select Demo',
2227
loadComponent: () => import('./views/select-view/select-view'),
2328
},
24-
{ path: '', redirectTo: 'toggle', pathMatch: 'full' },
2529
],
2630
},
2731
{ path: '**', redirectTo: '' },

‎projects/demo-ngx-theme-stack/src/app/layouts/theme-scene/theme-scene.html‎

Lines changed: 47 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,34 @@
1-
<main class="relative min-h-screen w-full flex items-center justify-center overflow-hidden transition-all duration-1000 bg-scene-gradient">
2-
1+
<main
2+
class="relative min-h-screen w-full flex items-center justify-center overflow-hidden transition-all duration-1000 bg-scene-gradient"
3+
>
34
<!-- Animated Background Elements -->
45
<div class="absolute inset-0 pointer-events-none">
5-
66
<!-- Sun -->
7-
<div class="absolute top-20 left-20 w-32 h-32 rounded-full bg-yellow-400 shadow-[0_0_80px_rgba(250,204,21,0.6)]
8-
transition-all duration-1000 ease-in-out"
9-
[style.transform]="'var(--sun-transform)'"
10-
[style.opacity]="'var(--sun-opacity)'">
11-
<div class="absolute inset-0 rounded-full animate-pulse bg-yellow-300 opacity-50 blur-xl"></div>
7+
<div
8+
class="absolute top-20 left-20 w-32 h-32 rounded-full bg-yellow-400 shadow-[0_0_80px_rgba(250,204,21,0.6)] transition-all duration-1000 ease-in-out"
9+
[style.transform]="'var(--sun-transform)'"
10+
[style.opacity]="'var(--sun-opacity)'"
11+
>
12+
<div
13+
class="absolute inset-0 rounded-full animate-pulse bg-yellow-300 opacity-50 blur-xl"
14+
></div>
1215
</div>
1316

1417
<!-- Moon -->
15-
<div class="absolute top-20 right-20 w-28 h-28 rounded-full bg-slate-200 shadow-[0_0_50px_rgba(226,232,240,0.4)]
16-
transition-all duration-1000 ease-in-out"
17-
[style.transform]="'var(--moon-transform)'"
18-
[style.opacity]="'var(--moon-opacity)'">
18+
<div
19+
class="absolute top-20 right-20 w-28 h-28 rounded-full bg-slate-200 shadow-[0_0_50px_rgba(226,232,240,0.4)] transition-all duration-1000 ease-in-out"
20+
[style.transform]="'var(--moon-transform)'"
21+
[style.opacity]="'var(--moon-opacity)'"
22+
>
1923
<div class="absolute top-4 left-6 w-8 h-8 rounded-full bg-slate-300 opacity-40"></div>
2024
<div class="absolute top-12 left-12 w-6 h-6 rounded-full bg-slate-300 opacity-40"></div>
2125
</div>
2226

2327
<!-- Deep Night Stars -->
24-
<div class="absolute inset-0 transition-opacity duration-1000 ease-in pointer-events-none"
25-
[style.opacity]="'var(--stars-opacity)'">
28+
<div
29+
class="absolute inset-0 transition-opacity duration-1000 ease-in pointer-events-none"
30+
[style.opacity]="'var(--stars-opacity)'"
31+
>
2632
@for (star of stars; track $index) {
2733
<div
2834
class="absolute bg-white rounded-full shadow-[0_0_8px_rgba(255,255,255,0.8)]"
@@ -37,11 +43,15 @@
3743
</div>
3844

3945
<!-- Soft Morning Clouds -->
40-
<div class="absolute inset-0 transition-opacity duration-500"
41-
[style.opacity]="'var(--clouds-opacity)'">
46+
<div
47+
class="absolute inset-0 transition-opacity duration-500"
48+
[style.opacity]="'var(--clouds-opacity)'"
49+
>
4250
@for (cloud of clouds; track $index) {
4351
<div
44-
[class]="'absolute w-28 h-10 bg-white/70 rounded-full blur-xs shadow-sm ' + cloud.animation"
52+
[class]="
53+
'absolute w-28 h-10 bg-white/70 rounded-full blur-xs shadow-sm ' + cloud.animation
54+
"
4555
[style.top]="cloud.top"
4656
[style.left]="cloud.left"
4757
[style.animation-delay]="cloud.delay"
@@ -54,29 +64,37 @@
5464
</div>
5565

5666
<!-- Main Vertical Flow Container -->
57-
<div class="relative z-50 min-h-screen flex flex-col items-center justify-between py-12 px-4 gap-12 overflow-x-hidden">
58-
59-
<!-- Top Header (Switcher) -->
60-
<header class="w-full flex justify-center">
61-
<div class="scale-90 md:scale-100">
62-
<app-theme-switcher />
63-
</div>
64-
</header>
67+
<div
68+
class="relative z-50 min-h-screen flex flex-col items-center justify-between py-12 px-4 gap-12 overflow-x-hidden"
69+
>
70+
@if (!isHome()) {
71+
<header class="w-full flex justify-center">
72+
<div class="scale-90 md:scale-100">
73+
<app-theme-switcher />
74+
</div>
75+
</header>
76+
}
6577

6678
<!-- Center Content (Cards) -->
6779
<section class="flex-1 w-full flex items-center justify-center">
68-
<router-outlet />
80+
<router-outlet />
6981
</section>
7082

7183
<!-- Bottom Footer -->
72-
<footer class="w-full py-4 text-center text-text-muted tracking-tight flex flex-col md:flex-row items-center justify-center gap-1 md:gap-4 text-[10px] md:text-xs">
84+
<footer
85+
class="w-full py-4 text-center text-text-muted tracking-tight flex flex-col md:flex-row items-center justify-center gap-1 md:gap-4 text-[10px] md:text-xs"
86+
>
7387
<span>Built by <strong class="font-bold">WanderleeDev</strong></span>
7488
<div class="flex items-center gap-3">
7589
<a href="#" class="hover:text-text-main transition-colors underline underline-offset-4 decoration-dotted">Docs</a>
7690
<span class="opacity-30 hidden md:inline">·</span>
77-
<a href="#" class="hover:text-text-main transition-colors underline underline-offset-4 decoration-dotted">GitHub</a>
91+
<a href="https://github.com/WanderleeDev/ngx-theme-stack"
92+
target="_blank"
93+
class="hover:text-text-main transition-colors underline underline-offset-4 decoration-dotted">GitHub</a>
7894
<span class="opacity-30 hidden md:inline">·</span>
79-
<a href="#" class="hover:text-text-main transition-colors underline underline-offset-4 decoration-dotted">NPM</a>
95+
<a href="https://www.npmjs.com/package/ngx-theme-stack"
96+
target="_blank"
97+
class="hover:text-text-main transition-colors underline underline-offset-4 decoration-dotted">NPM</a>
8098
</div>
8199
</footer>
82100
</div>

‎projects/demo-ngx-theme-stack/src/app/layouts/theme-scene/theme-scene.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
1-
import { Component } from '@angular/core';
2-
import { RouterOutlet } from '@angular/router';
1+
import { Component, computed, inject } from '@angular/core';
2+
import { Router, RouterOutlet } from '@angular/router';
33
import { ThemeSwitcherComponent } from '../../components/theme-switcher/theme-switcher';
44
import { ThemeBrandingComponent } from '../../components/theme-branding/theme-branding';
55
import { CLOUDS, STARS } from './theme-scene.data';
6+
import { toSignal } from '@angular/core/rxjs-interop';
67

78
@Component({
89
selector: 'app-theme-scene',
910
imports: [RouterOutlet, ThemeSwitcherComponent, ThemeBrandingComponent],
1011
templateUrl: './theme-scene.html',
1112
})
1213
export class ThemeSceneComponent {
14+
private router = inject(Router);
15+
private url = toSignal(this.router.events);
16+
protected isHome = computed(() => this.router.url === '/' || this.router.url === '/?');
17+
1318
protected readonly stars = STARS;
1419
protected readonly clouds = CLOUDS;
1520
}

‎projects/demo-ngx-theme-stack/src/app/views/home-view/home-view.ts‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import { Component } from '@angular/core';
2+
import { RouterLink } from '@angular/router';
3+
4+
@Component({
5+
selector: 'app-home-view',
6+
standalone: true,
7+
imports: [RouterLink],
8+
template: `
9+
<div
10+
class="max-w-6xl mx-auto flex flex-col items-center justify-center min-h-[70vh] px-6 text-center animate-in fade-in duration-1000"
11+
>
12+
<!-- Theme-Reactive Title -->
13+
<h1
14+
class="text-5xl md:text-8xl font-black tracking-tighter title-reactive-gradient drop-shadow-sm font-outfit mb-10 select-none "
15+
>
16+
<span class="uppercase">ngx</span>-theme-stack
17+
</h1>
18+
19+
<p
20+
class="text-xl md:text-2xl text-fg/60 leading-relaxed font-medium font-inter max-w-2xl mx-auto mb-16"
21+
>
22+
Experience the power of a streamlined theme management workflow through our specialized
23+
suite of services.
24+
</p>
25+
26+
<!-- Minimalist Section Header -->
27+
<div class="w-full max-w-4xl mb-6 text-left">
28+
<h2
29+
class="text-[10px] uppercase tracking-[0.4em] text-primary/60 font-black font-outfit border-b border-primary/10 pb-2 inline-block"
30+
>
31+
Interactive Utility Services Demo
32+
</h2>
33+
</div>
34+
35+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-4xl">
36+
@for (service of services; track service.id) {
37+
<a
38+
[routerLink]="service.path"
39+
class="group/card p-6 md:p-8 rounded-[2rem] bg-card-bg border border-white/5 shadow-xl transition-all hover:border-primary/50 hover:-translate-y-1 cursor-pointer block text-left"
40+
>
41+
<div
42+
class="w-12 h-12 rounded-xl flex items-center justify-center mb-6 transition-colors"
43+
[style.background-color]="service.color + '1a'"
44+
>
45+
<span
46+
class="material-icons text-3xl transform transition-transform group-hover/card:scale-110"
47+
[style.color]="service.color"
48+
>
49+
{{ service.icon }}
50+
</span>
51+
</div>
52+
<h3 class="text-xl font-black mb-2 font-outfit capitalize tracking-tight">
53+
{{ service.label }}
54+
</h3>
55+
<p class="text-xs opacity-50 font-inter leading-relaxed">{{ service.description }}</p>
56+
</a>
57+
}
58+
</div>
59+
</div>
60+
`,
61+
styles: `
62+
.title-reactive-gradient {
63+
background: linear-gradient(
64+
to right,
65+
var(--primary, oklch(0.7 0.2 250)),
66+
var(--accent, oklch(0.6 0.25 320))
67+
);
68+
-webkit-background-clip: text;
69+
-webkit-text-fill-color: transparent;
70+
transition: all 1s ease-in-out;
71+
}
72+
`,
73+
})
74+
export default class HomeView {
75+
protected readonly services = [
76+
{
77+
id: 'toggle',
78+
path: '/toggle',
79+
label: 'Toggle',
80+
icon: 'toggle_on',
81+
color: 'var(--primary)',
82+
description: 'Simple binary switching.',
83+
},
84+
{
85+
id: 'cycle',
86+
path: '/cycle',
87+
label: 'Cycle',
88+
icon: 'sync',
89+
color: 'var(--accent)',
90+
description: 'Sequential theme stepping.',
91+
},
92+
{
93+
id: 'select',
94+
path: '/select',
95+
label: 'Select',
96+
icon: 'checklist',
97+
color: 'var(--info)',
98+
description: 'Direct selection from list.',
99+
},
100+
];
101+
}

‎projects/demo-ngx-theme-stack/src/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@
2323
<title>ngx-theme-stack — Powerful Angular Theme Management</title>
2424
<base href="/" />
2525
<link rel="canonical" href="https://demo-ngx-theme-stack.wanderlee.site/" />
26+
<link rel="preconnect" href="https://fonts.googleapis.com">
27+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
28+
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700;900&family=Inter:wght@400;600&display=swap" rel="stylesheet">
29+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
2630
<meta name="viewport" content="width=device-width, initial-scale=1" />
2731

2832
<!-- SEO & Open Graph -->

0 commit comments

Comments
 (0)