Skip to content

Commit 2878f72

Browse files
IsmaestroIsmaestro
committed
feat(core): add real home key features
1 parent f3744e4 commit 2878f72

7 files changed

Lines changed: 148 additions & 76 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ The server is built with NestJS, Prisma, and Postgres, ensuring a robust and mod
4646
- [x] Logical Directory Structure: Easy-to-navigate, organized codebase.
4747
- [x] Best Practices: Adheres to the [Angular Style Guide](https://angular.io/guide/styleguide).
4848
- [x] Responsive Design: Built with CSS Grid and Flexbox for layouts.
49+
- [x] Accessible: Usage of [Shoelace](https://shoelace.style/), a forward-thinking library of web components.
4950
- [x] Optimized Images: Leveraging [NgOptimizedImage](https://angular.io/guide/image-directive) for performance.
5051
- [x] SASS & BEM Styles: Maintainable and scalable styling.
5152
- [x] Animations: Smooth and engaging UI interactions using Angular's powerful animations API.

‎src/app/core/components/card/card.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!-- eslint-disable @angular-eslint/template/no-call-expression -->
22
@if (href()) {
3-
<a class="card__container" [href]="href()">
3+
<a class="card__container" target="_blank" [href]="href()">
44
<ng-container [ngTemplateOutlet]="cardContent" />
55
</a>
66
} @else {

‎src/app/features/home/home.component.html‎

Lines changed: 24 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -42,69 +42,57 @@ <h1 i18n ngProjectAs="heading">
4242
<h2 i18n>Key features</h2>
4343

4444
<div class="cards__grid-container">
45-
<app-card [href]="'https://angular.dev/overview#features-that-power-your-development'">
45+
<app-card [href]="'https://angular.dev/guide/signals'">
4646
<ng-container i18n ngProjectAs="heading">
47-
<h3>
48-
Keep your codebase organized with an opinionated component model and flexible dependency
49-
injection system
50-
</h3>
47+
<h3>Angular Signals</h3>
5148
</ng-container>
5249
<ng-container ngProjectAs="body">
53-
<p i18n>Angular components make it easy to split your code into well-encapsulated parts.</p>
50+
<p i18n>Unlock reactivity with Angular Signals.</p>
5451
<p i18n>
55-
The versatile dependency injection helps you keep your code modular, loosely-coupled, and
56-
testable.
52+
Signals provide a declarative way to manage state and reactivity in your application,
53+
simplifying data flow and improving performance.
5754
</p>
5855
</ng-container>
59-
<ng-container ngProjectAs="link"><span i18n>Get started with Components</span></ng-container>
56+
<ng-container ngProjectAs="link"><span i18n>Learn more about Signals</span></ng-container>
6057
</app-card>
61-
<app-card [href]="'https://angular.dev/overview#features-that-power-your-development'">
58+
<app-card [href]="'https://angular.dev/guide/i18n'">
6259
<ng-container i18n ngProjectAs="heading">
63-
<h3>
64-
Keep your codebase organized with an opinionated component model and flexible dependency
65-
injection system
66-
</h3>
60+
<h3>Internationalization</h3>
6761
</ng-container>
6862
<ng-container ngProjectAs="body">
69-
<p i18n>Angular components make it easy to split your code into well-encapsulated parts.</p>
63+
<p i18n>Build apps for a global audience.</p>
7064
<p i18n>
71-
The versatile dependency injection helps you keep your code modular, loosely-coupled, and
72-
testable.
65+
Angular’s internationalization tools make it seamless to localize your app, handle
66+
translations, and format dates, numbers, and currencies for any locale.
7367
</p>
7468
</ng-container>
75-
<ng-container ngProjectAs="link"><span i18n>Get started with Components</span></ng-container>
69+
<ng-container ngProjectAs="link"><span i18n>Explore Internationalization</span></ng-container>
7670
</app-card>
77-
<app-card [href]="'https://angular.dev/overview#features-that-power-your-development'">
71+
<app-card [href]="'https://angular.dev/guide/forms'">
7872
<ng-container i18n ngProjectAs="heading">
79-
<h3>
80-
Keep your codebase organized with an opinionated component model and flexible dependency
81-
injection system
82-
</h3>
73+
<h3>Reactive Forms</h3>
8374
</ng-container>
8475
<ng-container ngProjectAs="body">
85-
<p i18n>Angular components make it easy to split your code into well-encapsulated parts.</p>
76+
<p i18n>Effortless form handling and validation.</p>
8677
<p i18n>
87-
The versatile dependency injection helps you keep your code modular, loosely-coupled, and
88-
testable.
78+
Reactive Forms empower you to create robust, dynamic forms with a model-driven approach,
79+
making validation, dynamic updates, and testing a breeze.
8980
</p>
9081
</ng-container>
91-
<ng-container ngProjectAs="link"><span i18n>Get started with Components</span></ng-container>
82+
<ng-container ngProjectAs="link"><span i18n>Start with Reactive Forms</span></ng-container>
9283
</app-card>
93-
<app-card [href]="'https://angular.dev/overview#features-that-power-your-development'">
84+
<app-card [href]="'https://angular.dev/guide/animations'">
9485
<ng-container i18n ngProjectAs="heading">
95-
<h3>
96-
Keep your codebase organized with an opinionated component model and flexible dependency
97-
injection system
98-
</h3>
86+
<h3>Animations</h3>
9987
</ng-container>
10088
<ng-container ngProjectAs="body">
101-
<p i18n>Angular components make it easy to split your code into well-encapsulated parts.</p>
89+
<p i18n>Bring your UI to life with Angular Animations.</p>
10290
<p i18n>
103-
The versatile dependency injection helps you keep your code modular, loosely-coupled, and
104-
testable.
91+
Create smooth transitions and engaging effects with Angular’s powerful animation API,
92+
making your application visually appealing and interactive.
10593
</p>
10694
</ng-container>
107-
<ng-container ngProjectAs="link"><span i18n>Get started with Components</span></ng-container>
95+
<ng-container ngProjectAs="link"><span i18n>Discover Angular Animations</span></ng-container>
10896
</app-card>
10997
</div>
11098
<div class="decorative-image__container-1">

‎src/app/features/home/home.component.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ $separator-margin: 0 10px 35px 0;
8383

8484
@media (width >= 1200px) {
8585
position: absolute;
86-
bottom: -400px;
86+
bottom: -300px;
8787
left: 10px;
8888

8989
img {
@@ -107,7 +107,6 @@ $separator-margin: 0 10px 35px 0;
107107
}
108108

109109
@media (width >= 1490px) {
110-
bottom: -400px;
111110
left: 60px;
112111

113112
img {

‎src/locale/messages.es.xlf‎

Lines changed: 69 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -263,7 +263,7 @@
263263
</trans-unit>
264264
<trans-unit id="8515623719828483173" datatype="html">
265265
<source> Angular <x id="LINE_BREAK" ctype="lb" equiv-text="&lt;br /&gt;"/><x id="START_TAG_KBD" ctype="x-kbd" equiv-text="&lt;kbd class=&quot;home__heading-kbd&quot;&gt;"/>Example<x id="CLOSE_TAG_KBD" ctype="x-kbd" equiv-text="&lt;/kbd&gt;"/> App </source>
266-
<target state="new"> Angular <x id="LINE_BREAK" ctype="lb" equiv-text="&lt;br /&gt;"/><x id="START_TAG_KBD" ctype="x-kbd" equiv-text="&lt;kbd class=&quot;home__heading-kbd&quot;&gt;"/>Ejemplo<x id="CLOSE_TAG_KBD" ctype="x-kbd" equiv-text="&lt;/kbd&gt;"/> App </target>
266+
<target state="new"> Angular <x id="LINE_BREAK" ctype="lb" equiv-text="&lt;br /&gt;"/><x id="START_TAG_KBD" ctype="x-kbd" equiv-text="&lt;kbd class=&quot;home__heading-kbd&quot;&gt;"/>Example<x id="CLOSE_TAG_KBD" ctype="x-kbd" equiv-text="&lt;/kbd&gt;"/> App </target>
267267
</trans-unit>
268268
<trans-unit id="5831080362044041624" datatype="html">
269269
<source> This project is a modern, real-world application designed as a foundation for creating new Angular-based projects and also a practical resource for learning. </source>
@@ -285,22 +285,6 @@
285285
<source>Key features</source>
286286
<target state="new">Características clave</target>
287287
</trans-unit>
288-
<trans-unit id="4808423561126464596" datatype="html">
289-
<source><x id="START_HEADING_LEVEL3" ctype="x-h3" equiv-text="&lt;h3&gt;"/> Keep your codebase organized with an opinionated component model and flexible dependency injection system <x id="CLOSE_HEADING_LEVEL3" ctype="x-h3" equiv-text="&lt;/h3&gt;"/></source>
290-
<target state="new"><x id="START_HEADING_LEVEL3" ctype="x-h3" equiv-text="&lt;h3&gt;"/> Mantén tu base de código organizada con un modelo de componentes opinado y un sistema flexible de inyección de dependencias <x id="CLOSE_HEADING_LEVEL3" ctype="x-h3" equiv-text="&lt;/h3&gt;"/></target>
291-
</trans-unit>
292-
<trans-unit id="1478158665020767354" datatype="html">
293-
<source>Angular components make it easy to split your code into well-encapsulated parts.</source>
294-
<target state="new">Los componentes de Angular facilitan dividir tu código en partes bien encapsuladas.</target>
295-
</trans-unit>
296-
<trans-unit id="105922035602561739" datatype="html">
297-
<source> The versatile dependency injection helps you keep your code modular, loosely-coupled, and testable. </source>
298-
<target state="new">La versátil inyección de dependencias te ayuda a mantener tu código modular, débilmente acoplado y testeable.</target>
299-
</trans-unit>
300-
<trans-unit id="7135539332123082582" datatype="html">
301-
<source>Get started with Components</source>
302-
<target state="new">Comienza con los componentes</target>
303-
</trans-unit>
304288
<trans-unit id="8461145943495811496" datatype="html">
305289
<source>My Pokemon</source>
306290
<target state="new">Mis Pokémon</target>
@@ -395,10 +379,6 @@
395379
<source>My pokemon</source>
396380
<target state="new">Mis Pokémon</target>
397381
</trans-unit>
398-
<trans-unit id="3030107611360910923" datatype="html">
399-
<source>Field required. Format: example@domain.com</source>
400-
<target state="new">Campo requerido. Formato: ejemplo@dominio.com</target>
401-
</trans-unit>
402382
<trans-unit id="1543538730036692975" datatype="html">
403383
<source>Passwords do not match.</source>
404384
<target state="new">Las contraseñas no coinciden.</target>
@@ -435,6 +415,74 @@
435415
<source>Pokémon not found. Double-check the name and try again!</source>
436416
<target state="new">Pokémon no encontrado. ¡Verifica el nombre y vuelve a intentarlo!</target>
437417
</trans-unit>
418+
<trans-unit id="3164493940889051124" datatype="html">
419+
<source><x id="START_HEADING_LEVEL3" ctype="x-h3" equiv-text="&lt;h3&gt;"/>Angular Signals<x id="CLOSE_HEADING_LEVEL3" ctype="x-h3" equiv-text="&lt;/h3&gt;"/></source>
420+
<target state="new"><x id="START_HEADING_LEVEL3" ctype="x-h3" equiv-text="&lt;h3&gt;"/>Angular Signals<x id="CLOSE_HEADING_LEVEL3" ctype="x-h3" equiv-text="&lt;/h3&gt;"/></target>
421+
</trans-unit>
422+
<trans-unit id="7680046165638889668" datatype="html">
423+
<source>Unlock reactivity with Angular Signals.</source>
424+
<target state="new">Desbloquea la reactividad con Angular Signals.</target>
425+
</trans-unit>
426+
<trans-unit id="7623666311824205556" datatype="html">
427+
<source> Signals provide a declarative way to manage state and reactivity in your application, simplifying data flow and improving performance. </source>
428+
<target state="new"> Signals ofrecen una forma declarativa de gestionar el estado y la reactividad en tu aplicación, simplificando el flujo de datos y mejorando el rendimiento. </target>
429+
</trans-unit>
430+
<trans-unit id="7755502772624126238" datatype="html">
431+
<source>Learn more about Signals</source>
432+
<target state="new">Aprende más sobre Signals</target>
433+
</trans-unit>
434+
<trans-unit id="3509701308598634542" datatype="html">
435+
<source><x id="START_HEADING_LEVEL3" ctype="x-h3" equiv-text="&lt;h3&gt;"/>Internationalization<x id="CLOSE_HEADING_LEVEL3" ctype="x-h3" equiv-text="&lt;/h3&gt;"/></source>
436+
<target state="new"><x id="START_HEADING_LEVEL3" ctype="x-h3" equiv-text="&lt;h3&gt;"/>Internationalization<x id="CLOSE_HEADING_LEVEL3" ctype="x-h3" equiv-text="&lt;/h3&gt;"/></target>
437+
</trans-unit>
438+
<trans-unit id="5371828026227187692" datatype="html">
439+
<source>Build apps for a global audience.</source>
440+
<target state="new">Crea aplicaciones para una audiencia global.</target>
441+
</trans-unit>
442+
<trans-unit id="4667572349058874775" datatype="html">
443+
<source> Angular’s internationalization tools make it seamless to localize your app, handle translations, and format dates, numbers, and currencies for any locale. </source>
444+
<target state="new"> Las herramientas de internacionalización de Angular facilitan la localización de tu aplicación, el manejo de traducciones y el formato de fechas, números y monedas para cualquier ubicación. </target>
445+
</trans-unit>
446+
<trans-unit id="19928707238720227" datatype="html">
447+
<source>Explore Internationalization</source>
448+
<target state="new">Explora la Internacionalización</target>
449+
</trans-unit>
450+
<trans-unit id="1621780816147444852" datatype="html">
451+
<source><x id="START_HEADING_LEVEL3" ctype="x-h3" equiv-text="&lt;h3&gt;"/>Reactive Forms<x id="CLOSE_HEADING_LEVEL3" ctype="x-h3" equiv-text="&lt;/h3&gt;"/></source>
452+
<target state="new"><x id="START_HEADING_LEVEL3" ctype="x-h3" equiv-text="&lt;h3&gt;"/>Reactive Forms<x id="CLOSE_HEADING_LEVEL3" ctype="x-h3" equiv-text="&lt;/h3&gt;"/></target>
453+
</trans-unit>
454+
<trans-unit id="5028423997546001256" datatype="html">
455+
<source>Effortless form handling and validation.</source>
456+
<target state="new">Gestión y validación de formularios sin esfuerzo.</target>
457+
</trans-unit>
458+
<trans-unit id="8266707669188290771" datatype="html">
459+
<source> Reactive Forms empower you to create robust, dynamic forms with a model-driven approach, making validation, dynamic updates, and testing a breeze. </source>
460+
<target state="new"> Reactive Forms te permiten crear formularios robustos y dinámicos con un enfoque basado en modelos, facilitando la validación, las actualizaciones dinámicas y las pruebas. </target>
461+
</trans-unit>
462+
<trans-unit id="4869980192320162230" datatype="html">
463+
<source>Start with Reactive Forms</source>
464+
<target state="new">Comienza con Reactive Forms</target>
465+
</trans-unit>
466+
<trans-unit id="2657017183893383482" datatype="html">
467+
<source><x id="START_HEADING_LEVEL3" ctype="x-h3" equiv-text="&lt;h3&gt;"/>Animations<x id="CLOSE_HEADING_LEVEL3" ctype="x-h3" equiv-text="&lt;/h3&gt;"/></source>
468+
<target state="new"><x id="START_HEADING_LEVEL3" ctype="x-h3" equiv-text="&lt;h3&gt;"/>Animations<x id="CLOSE_HEADING_LEVEL3" ctype="x-h3" equiv-text="&lt;/h3&gt;"/></target>
469+
</trans-unit>
470+
<trans-unit id="998113163585598828" datatype="html">
471+
<source>Bring your UI to life with Angular Animations.</source>
472+
<target state="new">Da vida a tu interfaz de usuario con Angular Animations.</target>
473+
</trans-unit>
474+
<trans-unit id="2976285442101094791" datatype="html">
475+
<source> Create smooth transitions and engaging effects with Angular’s powerful animation API, making your application visually appealing and interactive. </source>
476+
<target state="new"> Crea transiciones suaves y efectos atractivos con la potente API de animación de Angular, haciendo que tu aplicación sea visualmente atractiva e interactiva. </target>
477+
</trans-unit>
478+
<trans-unit id="4932058897590347667" datatype="html">
479+
<source>Discover Angular Animations</source>
480+
<target state="new">Descubre Angular Animations</target>
481+
</trans-unit>
482+
<trans-unit id="381575201384767307" datatype="html">
483+
<source>No real email validation. Field required. Format: example@domain.com</source>
484+
<target state="new">Sin validación real de correo electrónico. Campo requerido. Formato: ejemplo@dominio.com</target>
485+
</trans-unit>
438486
</body>
439487
</file>
440488
</xliff>

0 commit comments

Comments
 (0)