datacyber
/
www-ajsystem
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Listo productos en celulares, y componente, inicio de portatiles

This commit is contained in:
Jhonathan David Guevara Ramirez 2025-06-21 18:43:27 -05:00
parent 238c04a6d3
commit 0d4d5b0026
Signed by: jhonathan_guevara
GPG Key ID: 6879A4FE8271FCAE
41 changed files with 1894 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/app-routing.module.ts
View File

@ -5,8 +5,12 @@ import { ProductsComponent } from './products/products.component';
import { CybersecurityComponent } from './cybersecurity/cybersecurity.component';
import { UPSComponent } from './ups/ups.component';
import { BlogComponent } from './blog/blog.component';
import { CelularesComponent } from './products/celulares/celulares.component';
import { PortatilesComponent } from './products/portatiles/portatiles.component';
const routes: Routes = [
{ path: 'products/portatiles', component: PortatilesComponent },
{ path: 'products/celulares', component: CelularesComponent },
{ path: 'blog', component: BlogComponent },
{ path: 'ups', component: UPSComponent },
{ path: 'cybersecurity', component: CybersecurityComponent },
@ -18,7 +22,12 @@ const routes: Routes = [
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
imports: [
RouterModule.forRoot(routes, {
scrollPositionRestoration: 'enabled', // 👈 importante
anchorScrolling: 'enabled', // opcional: si usas #anclas
})
],
exports: [RouterModule]
})
export class AppRoutingModule { }

6
src/app/app.module.ts
View File

@ -9,6 +9,8 @@ import { HomeComponent } from './home/home.component';
import { CybersecurityComponent } from './cybersecurity/cybersecurity.component';
import { UPSComponent } from './ups/ups.component';
import { BlogComponent } from './blog/blog.component';
import { CelularesComponent } from './products/celulares/celulares.component';
import { PortatilesComponent } from './products/portatiles/portatiles.component';
@NgModule({
declarations: [
@ -17,7 +19,9 @@ import { BlogComponent } from './blog/blog.component';
HomeComponent,
CybersecurityComponent,
UPSComponent,
BlogComponent
BlogComponent,
CelularesComponent,
PortatilesComponent
],
imports: [
BrowserModule,

26
src/app/products/celulares/celulares.component.css Normal file
View File

@ -0,0 +1,26 @@
.pagination {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.pagination button {
padding: 8px 16px;
border: none;
background-color: #eee;
color: #1a1a1a;
font-weight: bold;
cursor: pointer;
border-radius: 6px;
transition: background-color 0.3s ease;
}
.pagination button:hover {
background-color: #d0eaff;
}
.pagination button.active {
background-color: var(--AJsystem-blue);
color: white;
}

73
src/app/products/celulares/celulares.component.html Normal file
View File

@ -0,0 +1,73 @@
<section class="section food-menu" id="food-menu">
<div class="container">
<p class="section-subtitle">.</p>
<h2 class="h2 section-title">
Todo en celulares AJ<span class="cybersec">System</span>
</h2>
<p class="section-text">
Ven y conoce todo el mundo en tecnología de celulares.
</p>
<ul class="food-menu-list">
<li *ngFor="let producto of paginatedProducts">
<div class="food-menu-card">
<!-- Imagen con clipPath SVG -->
<div class="card-banner">
<svg class="w-100" width="300" viewBox="0 0 300 400"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>{{ producto.nombre }} - {{ producto.descripcion }}</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="300" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image
width="300"
height="400"
[attr.xlink:href]="producto.imagen"
clip-path="url(#rounded-rect)"
preserveAspectRatio="xMidYMid slice" />
</svg>
<button class="btn food-menu-btn">Comprar</button>
</div>
<!-- Categoría y estrellas -->
<div class="wrapper">
<p class="category">Celulares</p>
<div class="rating-wrapper">
<ion-icon name="star" *ngFor="let star of [1,2,3,4,5]"></ion-icon>
</div>
</div>
<!-- Título -->
<h3 class="h3 card-title">{{ producto.nombre }} - {{ producto.descripcion }}</h3>
<!-- Precio -->
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price">{{ producto.precio | currency:'COP' }}</data>
<del class="del">{{ (producto.precio * 1.25) | currency:'COP' }}</del>
</div>
</div>
</li>
</ul>
<!-- Paginación -->
<div class="pagination">
<button
*ngFor="let page of [].constructor(totalPages); let i = index"
[ngClass]="{'active': currentPage === (i + 1)}"
(click)="setPage(i + 1)">
{{ i + 1 }}
</button>
</div>
</div>
</section>

21
src/app/products/celulares/celulares.component.spec.ts Normal file
View File

@ -0,0 +1,21 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CelularesComponent } from './celulares.component';
describe('CelularesComponent', () => {
let component: CelularesComponent;
let fixture: ComponentFixture<CelularesComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [CelularesComponent]
});
fixture = TestBed.createComponent(CelularesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

218
src/app/products/celulares/celulares.component.ts Normal file
View File

@ -0,0 +1,218 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-celulares',
templateUrl: './celulares.component.html',
styleUrls: ['./celulares.component.css']
})
export class CelularesComponent {
// Tu lista completa de productos (puedes cargarla desde un servicio o API si lo deseas)
productos = [
{
codigo: '7CO05',
nombre: 'OPPO A20',
descripcion: 'PANTALLA 6,67" - OCTA CORE 2,2GHZ / 1,8GHZ - 128GB - MEM 4GB (+4GB EXPANDIBLE) - DOBLE CAM - ANDROID 14 - DUAL SIM - 4G LTE - OCEAN BLUE',
precio: 419000,
imagen: 'assets/images/celulares/OPPOA20-OCEAN BLUE.webp'
},
{
codigo: '7CO06',
nombre: 'OPPO A20',
descripcion: 'PANTALLA 6,67" - OCTA CORE 2,2GHZ / 1,8GHZ - 128GB - MEM 4GB (+4GB EXPANDIBLE) - DOBLE CAM - ANDROID 14 - DUAL SIM - 4G LTE - CAFE',
precio: 419000,
imagen: 'assets/images/celulares/OPPOA20CAFE.webp'
},
{
codigo: '7CS205',
nombre: 'SAMSUNG A05',
descripcion: 'PANTALLA 6,6" - OCTA CORE 2,0GHZ / 1,8GHZ - 128GB - MEM 4GB - DOBLE CAMARA - ANDROID 13 - DUAL SIM - 4G LTE - NEGRO',
precio: 380000,
imagen: 'assets/images/celulares/SAMSUNGA05NEGRO.jpg'
},
{
codigo: '7CS222',
nombre: 'SAMSUNG A06',
descripcion: 'PANTALLA 6,7" - OCTA CORE 2,0GHZ / 1,8GHZ - 128GB - MEM 4GB - DOBLE CAMARA - ANDROID 14 - DUAL SIM - 4G LTE - VERDE',
precio: 390000,
imagen: 'assets/images/celulares/Samsung-A06-verde.webp'
},
{
codigo: '7CS224',
nombre: 'SAMSUNG A06',
descripcion: 'PANTALLA 6,7" - OCTA CORE 2,0GHZ / 1,8GHZ - 128GB - MEM 4GB - DOBLE CAMARA - ANDROID 14 - DUAL SIM - 4G LTE - AZUL',
precio: 390000,
imagen: 'assets/images/celulares/CelularSAMSUNGA06AZUL.webp'
},
{
codigo: '7CS221',
nombre: 'SAMSUNG A05S',
descripcion: 'PANTALLA 6,6" - OCTA CORE 2,4GHZ / 1,9GHZ - 128GB - MEM 6GB - TRIPLE CAMARA - ANDROID 13 - DUAL SIM - 4G LTE - NEGRO',
precio: 463000,
imagen: 'assets/images/celulares/SAMSUNGA05SNEGRO.jpg'
},
{
codigo: '7CS223',
nombre: 'SAMSUNG A05S',
descripcion: 'PANTALLA 6,6" - OCTA CORE 2,4GHZ / 1,9GHZ - 128GB - MEM 6GB - TRIPLE CAMARA - ANDROID 13 - DUAL SIM - 4G LTE - GRIS',
precio: 463000,
imagen: 'assets/images/celulares/SAMSUNGA05SGRIS.jpg'
},
{
codigo: '7CS225',
nombre: 'SAMSUNG A16',
descripcion: 'PANTALLA 6,7" - OCTA CORE 2,4GHZ / 2,0GHZ - 256GB - MEM 8GB - TRIPLE CAMARA - ANDROID 14 - DUAL SIM - 4G LTE - LIGHT GRAY',
precio: 710000,
imagen: 'assets/images/celulares/SAMSUNG A16 LIGHT GRAY.webp'
},
{
codigo: '7CS226',
nombre: 'SAMSUNG A16',
descripcion: 'PANTALLA 6,7" - OCTA CORE 2,4GHZ / 2,0GHZ - 256GB - MEM 8GB - TRIPLE CAMARA - ANDROID 14 - DUAL SIM - 4G LTE - BLUE BLACK',
precio: 710000,
imagen: 'assets/images/celulares/SAMSUNGA16BLUEBLACK.jpg'
},
{
codigo: '7CS227',
nombre: 'SAMSUNG A16',
descripcion: 'PANTALLA 6,7" - OCTA CORE 2,4GHZ / 2,0GHZ - 256GB - MEM 8GB - TRIPLE CAMARA - ANDROID 14 - DUAL SIM - 4G LTE - LIGHT GREEN',
precio: 710000,
imagen: 'assets/images/celulares/SAMSUNGA16LIGHT GREEN.jpg'
},
{
codigo: '7CX123',
nombre: 'XIAOMI REDMI A3X',
descripcion: 'PANTALLA 6,71" - OCTA CORE (1,8GHZ / 1,2GHZ)- 64GB - MEMORIA 3GB - DOBLE CAMARA - ANDROID 14 - DUAL SIM - 4G LTE - MIDNIGHT BLACK',
precio: 270000,
imagen: 'assets/images/celulares/XIAOMIREDMIA3XMIDNIGHT BLACK.webp'
},
{
codigo: '7CX124',
nombre: 'XIAOMI REDMI A3X',
descripcion: 'PANTALLA 6,71" - OCTA CORE (1,8GHZ / 1,2GHZ)- 64GB - MEMORIA 3GB - DOBLE CAMARA - ANDROID 14 - DUAL SIM - 4G LTE - AURORA GREEN',
precio: 270000,
imagen: 'assets/images/celulares/XIAOMIREDMIA3XAURORA GREEN.webp'
},
{
codigo: '7CX125',
nombre: 'XIAOMI REDMI A5',
descripcion: 'PANTALLA 6,88" - OCTA CORE (1,8GHZ / 1,6GHZ)- 128GB - MEMORIA 4GB - DOBLE CAMARA - ANDROID 15 - DUAL SIM - 4G LTE - MIDNIGHT BLACK',
precio: 335000,
imagen: 'assets/images/celulares/XIAOMIREDMIA5BLACK.webp'
},
{
codigo: '7CX111',
nombre: 'XIAOMI REDMI 14C',
descripcion: 'PANTALLA 6,8" - OCTA CORE (2,0GHZ / 1,8GHZ) - 128GB - MEMORIA 4GB - DOBLE CAMARA - XIAOMI HYPER OS - DUAL SIM - 4G LTE -STARRY BLUE',
precio: 400000,
imagen: 'assets/images/celulares/XIAOMIREDMI14CstarryBLUE.webp'
},
{
codigo: '7CX112',
nombre: 'XIAOMI REDMI 14C',
descripcion: 'PANTALLA 6,8" - OCTA CORE (2,0GHZ / 1,8GHZ) - 128GB - MEMORIA 4GB - DOBLE CAMARA - XIAOMI HYPER OS - DUAL SIM - 4G LTE -SEA GREEN',
precio: 400000,
imagen: 'assets/images/celulares/XIAOMIREDMI14CSEAGREEN.webp'
},
{
codigo: '7CX113',
nombre: 'XIAOMI REDMI 14C',
descripcion: 'PANTALLA 6,8" - OCTA CORE (2,0GHZ / 1,8GHZ) - 128GB - MEMORIA 4GB - DOBLE CAMARA - XIAOMI HYPER OS - DUAL SIM - 4G LTE - MIDN BLACK',
precio: 400000,
imagen: 'assets/images/celulares/XIAOMIREDMI14CMIDNBLACK.webp'
},
{
codigo: '7CX51',
nombre: 'XIAOMI REDMI NOTE 11',
descripcion: 'PANTALLA 6,4" -OCTA CORE (2,4GHZ / 1,9GHZ) - 128GB - MEMORIA 4GB - CUATRO CAMARAS - ANDROID 11 - DUAL SIM - 4G LTE - BLUE',
precio: 499000,
imagen: 'assets/images/celulares/XIAOMI REDMI NOTE 11.webp'
},
{
codigo: '7CX114',
nombre: 'XIAOMI REDMI 14C',
descripcion: 'PANTALLA 6,8" - OCTA CORE (2,0GHZ / 1,8GHZ) - 256GB - MEMORIA 8GB - DOBLE CAMARA - XIAOMI HYPER OS - DUAL SIM - 4G LTE -SEA GREEN',
precio: 499000,
imagen: 'assets/images/celulares/XIAOMIREDMI14CSEAGREEN.webp'
},
{
codigo: '7CX115',
nombre: 'XIAOMI REDMI 14C',
descripcion: 'PANTALLA 6,8" - OCTA CORE (2,0GHZ / 1,8GHZ) - 256GB - MEMORIA 8GB -DOBLE CAMARA - XIAOMI HYPER OS - DUAL SIM - 4G LTE - STARRY BLUE',
precio: 499000,
imagen: 'assets/images/celulares/XIAOMIREDMI14CSTARRY BLUE.webp'
},
{
codigo: '7CX116',
nombre: 'XIAOMI REDMI 14C',
descripcion: 'PANTALLA 6,8" - OCTA CORE (2,0GHZ / 1,8GHZ) - 256GB - MEMORIA 8GB -DOBLE CAMARA - XIAOMI HYPER OS - DUAL SIM - 4G LTE - MIDN BLACK',
precio: 499000,
imagen: 'assets/images/celulares/XIAOMIREDMIA3XMIDNIGHT BLACK.webp'
},
{
codigo: '7CX120',
nombre: 'XIAOMI REDMI NOTE 14',
descripcion: 'PANTALLA 6,67" - OCTA CORE (2,2GHZ / 2,0GHZ) - 256GB - MEMORIA 8GB - TRIPLE CAM -ANDROID 14 - DUAL SIM - 4G LTE - MIDNIGHT BLACK',
precio: 710000,
imagen: 'assets/images/celulares/XIAOMI REDMI NOTE 14 minghblack.webp'
},
{
codigo: '7CX121',
nombre: 'XIAOMI REDMI NOTE 14',
descripcion: 'PANTALLA 6,67" - OCTA CORE (2,2GHZ / 2,0GHZ) - 256GB - MEMORIA 8GB - TRIPLE CAM -ANDROID 14 - DUAL SIM - 4G LTE - OCEAN BLUE',
precio: 710000,
imagen: 'assets/images/celulares/XIAOMI REDMI NOTE 14 OCEAN BLUE$.webp'
},
{
codigo: '7CX122',
nombre: 'XIAOMI REDMI NOTE 14',
descripcion: 'PANTALLA 6,67" - OCTA CORE (2,2GHZ / 2,0GHZ) - 256GB - MEMORIA 8GB - TRIPLE CAM -ANDROID 14 - DUAL SIM - 4G LTE - LIME GREEN',
precio: 710000,
imagen: 'assets/images/celulares/Celular XIAOMI REDMI NOTE 14 LIME GREEN.webp'
},
{
codigo: '7CX117',
nombre: 'XIAOMI REDMI NOTE 14 PRO',
descripcion: 'PANTALLA 6,67" - OCTA CORE (2,2GHZ / 2,0GHZ) - 256GB - MEMORIA 8GB - TRIPLE CAM - ANDROID 14 - DUAL SIM - 4G LTE - OCEAN BLUE',
precio: 999000,
imagen: 'assets/images/celulares/XIAOMI REDMI NOTE 14 PROOCEAN BLUE$.webp'
},
{
codigo: '7CX118',
nombre: 'XIAOMI REDMI NOTE 14 PRO',
descripcion: 'PANTALLA 6,67" - OCTA CORE (2,2GHZ / 2,0GHZ) - 256GB - MEMORIA 8GB - TRIPLE CAM - ANDROID 14 - DUAL SIM - 4G LTE - AURORA P',
precio: 999000,
imagen: 'assets/images/celulares/XIAOMI REDMI NOTE 14 PRO AURORA P.jpg'
},
{
codigo: '7CX119',
nombre: 'XIAOMI REDMI NOTE 14 PRO',
descripcion: 'PANTALLA 6,67" - OCTA CORE (2,2GHZ / 2,0GHZ) - 256GB - MEMORIA 8GB - TRIPLE CAM - ANDROID 14 - DUAL SIM - 4G LTE - MID BLACK',
precio: 999000,
imagen: 'assets/images/celulares/XIAOMI REDMI NOTE 14 PROminghblack.webp'
}
/* Aquí va tu arreglo con todos los productos. Por ejemplo:
{ nombre: 'Celular A', precio: 123, imagen: '...' },
{ nombre: 'Celular B', precio: 456, imagen: '...' },
... hasta todos los que tengas
*/
];
currentPage = 1;
itemsPerPage = 15;
get paginatedProducts() {
const start = (this.currentPage - 1) * this.itemsPerPage;
return this.productos.slice(start, start + this.itemsPerPage);
}
get totalPages() {
return Math.ceil(this.productos.length / this.itemsPerPage);
}
setPage(page: number) {
this.currentPage = page;
window.scrollTo({ top: 0, behavior: 'smooth' }); // Opcional: subir al principio
}
}

0
src/app/products/k → src/app/products/portatiles/portatiles.component.css
View File

768
src/app/products/portatiles/portatiles.component.html Normal file
View File

@ -0,0 +1,768 @@
<section class="section food-menu" id="food-menu">
<div class="container">
<p class="section-subtitle">.</p>
<h2 class="h2 section-title">
Todo en celulares AJ<span class="cybersec">System</span>
</h2>
<p class="section-text">
Ven y conoce todo el mundo en tecnologia de portatiles.
</p>
<ul class="food-menu-list">
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ACER A314-36P-323F - INTEL CORE I3 N305 - 8GB LPDDR5 - 512GB SSD - PANTALLA 14" FHD - NO DVD - HDMI - WINDOWS 11 - PURE SILVER</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ACER A314-36P-323FPURE SILVER.webp"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ACER A314-36P-323F - INTEL CORE I3 N305 - 8GB LPDDR5 - 512GB SSD - PANTALLA 14" FHD - NO DVD - HDMI - WINDOWS 11 - PURE SILVER</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ACER A315-24P-R7JS - AMD RYZEN 5 7520U - 16GB LPDDR5 - 512GB SSD - PANTALLA 15,6" - NO DVD - HDMI - FREEDOS - SILVER</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ACER A315-24P-R7JSSILVER.webp"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ACER A315-24P-R7JS - AMD RYZEN 5 7520U - 16GB LPDDR5 - 512GB SSD - PANTALLA 15,6" - NO DVD - HDMI - FREEDOS - SILVER</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ACER A315-57-58LL - INTEL CORE I5 12450H - 8GB DDR4 - 512GB SSD - PANTALLA 15.6" FHD - NO DVD - HDMI - FREEDOS - GLACIER BLUE</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ACER A315-57-58LL GLACIER BLUE.jpg"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title"> ACER A315-57-58LL - INTEL CORE I5 12450H - 8GB DDR4 - 512GB SSD - PANTALLA 15.6" FHD - NO DVD - HDMI - FREEDOS - GLACIER BLUE</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ACER A315-59-57WM - INTEL CORE I5 1235U - 16GB DDR4 - 512GB SSD - PANTALLA 15,6" FHD - NO DVD - HDMI - FREEDOS - PURE SILVER</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ACER A315-59-57WMPURE SILVER.jpg"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ACER A315-59-57WM - INTEL CORE I5 1235U - 16GB DDR4 - 512GB SSD - PANTALLA 15,6" FHD - NO DVD - HDMI - FREEDOS - PURE SILVER</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ACER TRAVELMATE TMP214-55-586G - INTEL CORE I5 1335U - 16GB DDR4 - 512GB SSD - PANTALLA 14" WUXGA - NO DVD - HDMI - WINDOWS 11 PROFES - GRAY</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ACER TRAVELMATE TMP214-55GRAY.jpg"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ACER TRAVELMATE TMP214-55-586G - INTEL CORE I5 1335U - 16GB DDR4 - 512GB SSD - PANTALLA 14" WUXGA - NO DVD - HDMI - WINDOWS 11 PROFES - GRAY</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS EXPERTBOOK B1402CVA-NK2506 - INTEL CORE I5 1335U - 8GB DDR4 - 512GB SSD - PANTALLA 14" FHD - NO DVD - HDMI - ENDLESS - STAR BLACK</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ASUS EXPERTBOOK B1402CVA-NK2506 STAR BLACK.webp"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS EXPERTBOOK B1402CVA-NK2506 - INTEL CORE I5 1335U - 8GB DDR4 - 512GB SSD - PANTALLA 14" FHD - NO DVD - HDMI - ENDLESS - STAR BLACK</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS E1504FA-NJ1555 - AMD RYZEN 5 7520U - LPDDR5 16GB - 512GB SSD - PANTALLA 15,6" FHD - NO DVD - HDMI - FREEDOS - MIXED BLACK</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ASUS E1504FA-NJ1555 - AMDMIXED BLACK.jpg"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS E1504FA-NJ1555 - AMD RYZEN 5 7520U - LPDDR5 16GB - 512GB SSD - PANTALLA 15,6" FHD - NO DVD - HDMI - FREEDOS - MIXED BLACK</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS X1502ZA-EJ2443 - INTEL CORE I5 12500H -8GB DDR4 - 512GB SSD - PANTALLA 15,6" FHD - NO DVD - HDMI - FREEDOS - QUIET BLUE</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ASUS X1502ZA-EJ2443 - INTEL CORE I5QUIET BLUE.webp"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS X1502ZA-EJ2443 - INTEL CORE I5 12500H -8GB DDR4 - 512GB SSD - PANTALLA 15,6" FHD - NO DVD - HDMI - FREEDOS - QUIET BLUE</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS EXPERTBOOK B1402CVA-NK2506 - INTEL CORE I5 1335U - 16GB DDR4 ( EXPANDIDO ) 512GB SSD - PANTALLA 14" FHD - NO DVD - HDMI - ENDLESS - BLACK </title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ASUS EXPERTBOOK B1402CVA-NK2506 - INTEL CORE I5 - ENDLESS - BLACK.jpg"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS EXPERTBOOK B1402CVA-NK2506 - INTEL CORE I5 1335U - 16GB DDR4 ( EXPANDIDO ) 512GB SSD - PANTALLA 14" FHD - NO DVD - HDMI - ENDLESS - BLACK </h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS E1504FA-L1745 - AMD RYZEN 5 7520U - 16GB LPDDR5 - 512GB SSD - PANTALLA 15,6" OLED - NO DVD - HDMI - FREEDOS - MIXED BLACK</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ASUS E1504FA-L1745 - AMD RYZEN 5 7520UMIXED BLACK.png"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles </p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS E1504FA-L1745 - AMD RYZEN 5 7520U - 16GB LPDDR5 - 512GB SSD - PANTALLA 15,6" OLED - NO DVD - HDMI - FREEDOS - MIXED BLACK</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS X1605ZA-MB997 - INTEL CORE I5 12500H - 16GB DDR4 - 512GB SSD - PANTALLA 16" WUXGA - NO DVD - HDMI - FREDOOS - INDIE BLACK</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ASUS X1605ZA-MB997 - INTEL CORE I5 - INDIE BLACK.jpg"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS X1605ZA-MB997 - INTEL CORE I5 12500H - 16GB DDR4 - 512GB SSD - PANTALLA 16" WUXGA - NO DVD - HDMI - FREDOOS - INDIE BLACK</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS X1605VA-MB1235 - INTEL CORE I7 13620H - 16GB DDR4 - 512GBB SSD - PANTALLA 16" WUXGA - NO DVD - HDMI - FREEDOS - INDIE BLACK</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ASUS X1605VA-MB1235 - INTEL CORE I7 FREEDOS - INDIE BLACK.png"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS X1605VA-MB1235 - INTEL CORE I7 13620H - 16GB DDR4 - 512GBB SSD - PANTALLA 16" WUXGA - NO DVD - HDMI - FREEDOS - INDIE BLACK</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS X1605VA-MB1027 - INTEL CORE I7 13700H - 16GB DDR4 - 512GBB SSD - PANTALLA 16" WUXGA - NO DVD - HDMI - FREEDOS - INDIE BLACK</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ASUS X1605VA-MB1027INDIE BLACK.webp"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS X1605VA-MB1027 - INTEL CORE I7 13700H - 16GB DDR4 - 512GBB SSD - PANTALLA 16" WUXGA - NO DVD - HDMI - FREEDOS - INDIE BLACK</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS X1605VA-MB929 - INTEL CORE I9 13900H - 24GB DDR4 - 1 TERA SSD - PANTALLA 16,0" WUXGA - NO DVD - FREEDOS - INDIE BLACK + ( LIC KASPERSKY )</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ASUS X1605VA-MB929 - INTEL CORE I9 FREEDOS - INDIE BLACKLIC KASPERSKY.webp"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles </p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS X1605VA-MB929 - INTEL CORE I9 13900H - 24GB DDR4 - 1 TERA SSD - PANTALLA 16,0" WUXGA - NO DVD - FREEDOS - INDIE BLACK + ( LIC KASPERSKY )</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS ZENBOOK UM3406HA-QD166 - AMD RYZEN 7 8840HS - 16GB LPDDR5X - 1 TERA SSD - PANTALLA 14" OLED WUXGA - NO DVD - HDMI - FREEDOS - JADE BLACK</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/Portatil ASUS ZENBOOK UM3406HA-QD166 JADE BLACK.png"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS ZENBOOK UM3406HA-QD166 - AMD RYZEN 7 8840HS - 16GB LPDDR5X - 1 TERA SSD - PANTALLA 14" OLED WUXGA - NO DVD - HDMI - FREEDOS - JADE BLACK</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS ZENBOOK UM3406HA-QD124 - AMD RYZEN 7 8840HS - 16GB LPDDR5X - 1 TERA SSD - PANTALLA 14" OLED WUXGA - NO DVD - FREEDOS - JADE BLACK</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/Portatil ASUS ZENBOOK UM3406HA-QD166 JADE BLACK.png"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS ZENBOOK UM3406HA-QD124 - AMD RYZEN 7 8840HS - 16GB LPDDR5X - 1 TERA SSD - PANTALLA 14" OLED WUXGA - NO DVD - FREEDOS - JADE BLACK</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
</ul>
</div>
</section>

21
src/app/products/portatiles/portatiles.component.spec.ts Normal file
View File

@ -0,0 +1,21 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PortatilesComponent } from './portatiles.component';
describe('PortatilesComponent', () => {
let component: PortatilesComponent;
let fixture: ComponentFixture<PortatilesComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [PortatilesComponent]
});
fixture = TestBed.createComponent(PortatilesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

10
src/app/products/portatiles/portatiles.component.ts Normal file
View File

@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-portatiles',
templateUrl: './portatiles.component.html',
styleUrls: ['./portatiles.component.css']
})
export class PortatilesComponent {
}

24
src/app/products/products.component.css
View File

@ -80,3 +80,27 @@
font-family: var(--ff-calibri);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.ver-todo-container {
display: flex;
justify-content: center;
margin-top: 20px;
margin-block-end: 30px;
}
.btn-ver-todo {
background-color: var(--AJsystem-blue);
color: white;
padding: 12px 28px;
border: none;
border-radius: 8px;
font-size: 2.2rem;
font-family: var(--ff-calibri);
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
text-transform: uppercase;
}
.btn-ver-todo:hover {
background-color: var(--AJsystem-glow); /* Azul más claro ya definido */
}

721
src/app/products/products.component.html
View File

@ -124,10 +124,717 @@
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ACER A315-24P-R7JS - AMD RYZEN 5 7520U - 16GB LPDDR5 - 512GB SSD - PANTALLA 15,6" - NO DVD - HDMI - FREEDOS - SILVER</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ACER A315-24P-R7JSSILVER.webp"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ACER A315-24P-R7JS - AMD RYZEN 5 7520U - 16GB LPDDR5 - 512GB SSD - PANTALLA 15,6" - NO DVD - HDMI - FREEDOS - SILVER</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ACER A315-57-58LL - INTEL CORE I5 12450H - 8GB DDR4 - 512GB SSD - PANTALLA 15.6" FHD - NO DVD - HDMI - FREEDOS - GLACIER BLUE</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ACER A315-57-58LL GLACIER BLUE.jpg"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title"> ACER A315-57-58LL - INTEL CORE I5 12450H - 8GB DDR4 - 512GB SSD - PANTALLA 15.6" FHD - NO DVD - HDMI - FREEDOS - GLACIER BLUE</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ACER A315-59-57WM - INTEL CORE I5 1235U - 16GB DDR4 - 512GB SSD - PANTALLA 15,6" FHD - NO DVD - HDMI - FREEDOS - PURE SILVER</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ACER A315-59-57WMPURE SILVER.jpg"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ACER A315-59-57WM - INTEL CORE I5 1235U - 16GB DDR4 - 512GB SSD - PANTALLA 15,6" FHD - NO DVD - HDMI - FREEDOS - PURE SILVER</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ACER TRAVELMATE TMP214-55-586G - INTEL CORE I5 1335U - 16GB DDR4 - 512GB SSD - PANTALLA 14" WUXGA - NO DVD - HDMI - WINDOWS 11 PROFES - GRAY</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ACER TRAVELMATE TMP214-55GRAY.jpg"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ACER TRAVELMATE TMP214-55-586G - INTEL CORE I5 1335U - 16GB DDR4 - 512GB SSD - PANTALLA 14" WUXGA - NO DVD - HDMI - WINDOWS 11 PROFES - GRAY</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS EXPERTBOOK B1402CVA-NK2506 - INTEL CORE I5 1335U - 8GB DDR4 - 512GB SSD - PANTALLA 14" FHD - NO DVD - HDMI - ENDLESS - STAR BLACK</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ASUS EXPERTBOOK B1402CVA-NK2506 STAR BLACK.webp"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS EXPERTBOOK B1402CVA-NK2506 - INTEL CORE I5 1335U - 8GB DDR4 - 512GB SSD - PANTALLA 14" FHD - NO DVD - HDMI - ENDLESS - STAR BLACK</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS E1504FA-NJ1555 - AMD RYZEN 5 7520U - LPDDR5 16GB - 512GB SSD - PANTALLA 15,6" FHD - NO DVD - HDMI - FREEDOS - MIXED BLACK</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ASUS E1504FA-NJ1555 - AMDMIXED BLACK.jpg"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS E1504FA-NJ1555 - AMD RYZEN 5 7520U - LPDDR5 16GB - 512GB SSD - PANTALLA 15,6" FHD - NO DVD - HDMI - FREEDOS - MIXED BLACK</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS X1502ZA-EJ2443 - INTEL CORE I5 12500H -8GB DDR4 - 512GB SSD - PANTALLA 15,6" FHD - NO DVD - HDMI - FREEDOS - QUIET BLUE</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ASUS X1502ZA-EJ2443 - INTEL CORE I5QUIET BLUE.webp"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS X1502ZA-EJ2443 - INTEL CORE I5 12500H -8GB DDR4 - 512GB SSD - PANTALLA 15,6" FHD - NO DVD - HDMI - FREEDOS - QUIET BLUE</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS EXPERTBOOK B1402CVA-NK2506 - INTEL CORE I5 1335U - 16GB DDR4 ( EXPANDIDO ) 512GB SSD - PANTALLA 14" FHD - NO DVD - HDMI - ENDLESS - BLACK </title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ASUS EXPERTBOOK B1402CVA-NK2506 - INTEL CORE I5 - ENDLESS - BLACK.jpg"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS EXPERTBOOK B1402CVA-NK2506 - INTEL CORE I5 1335U - 16GB DDR4 ( EXPANDIDO ) 512GB SSD - PANTALLA 14" FHD - NO DVD - HDMI - ENDLESS - BLACK </h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS E1504FA-L1745 - AMD RYZEN 5 7520U - 16GB LPDDR5 - 512GB SSD - PANTALLA 15,6" OLED - NO DVD - HDMI - FREEDOS - MIXED BLACK</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ASUS E1504FA-L1745 - AMD RYZEN 5 7520UMIXED BLACK.png"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles </p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS E1504FA-L1745 - AMD RYZEN 5 7520U - 16GB LPDDR5 - 512GB SSD - PANTALLA 15,6" OLED - NO DVD - HDMI - FREEDOS - MIXED BLACK</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS X1605ZA-MB997 - INTEL CORE I5 12500H - 16GB DDR4 - 512GB SSD - PANTALLA 16" WUXGA - NO DVD - HDMI - FREDOOS - INDIE BLACK</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ASUS X1605ZA-MB997 - INTEL CORE I5 - INDIE BLACK.jpg"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS X1605ZA-MB997 - INTEL CORE I5 12500H - 16GB DDR4 - 512GB SSD - PANTALLA 16" WUXGA - NO DVD - HDMI - FREDOOS - INDIE BLACK</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS X1605VA-MB1235 - INTEL CORE I7 13620H - 16GB DDR4 - 512GBB SSD - PANTALLA 16" WUXGA - NO DVD - HDMI - FREEDOS - INDIE BLACK</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ASUS X1605VA-MB1235 - INTEL CORE I7 FREEDOS - INDIE BLACK.png"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS X1605VA-MB1235 - INTEL CORE I7 13620H - 16GB DDR4 - 512GBB SSD - PANTALLA 16" WUXGA - NO DVD - HDMI - FREEDOS - INDIE BLACK</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS X1605VA-MB1027 - INTEL CORE I7 13700H - 16GB DDR4 - 512GBB SSD - PANTALLA 16" WUXGA - NO DVD - HDMI - FREEDOS - INDIE BLACK</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ASUS X1605VA-MB1027INDIE BLACK.webp"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS X1605VA-MB1027 - INTEL CORE I7 13700H - 16GB DDR4 - 512GBB SSD - PANTALLA 16" WUXGA - NO DVD - HDMI - FREEDOS - INDIE BLACK</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS X1605VA-MB929 - INTEL CORE I9 13900H - 24GB DDR4 - 1 TERA SSD - PANTALLA 16,0" WUXGA - NO DVD - FREEDOS - INDIE BLACK + ( LIC KASPERSKY )</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/ASUS X1605VA-MB929 - INTEL CORE I9 FREEDOS - INDIE BLACKLIC KASPERSKY.webp"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles </p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS X1605VA-MB929 - INTEL CORE I9 13900H - 24GB DDR4 - 1 TERA SSD - PANTALLA 16,0" WUXGA - NO DVD - FREEDOS - INDIE BLACK + ( LIC KASPERSKY )</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS ZENBOOK UM3406HA-QD166 - AMD RYZEN 7 8840HS - 16GB LPDDR5X - 1 TERA SSD - PANTALLA 14" OLED WUXGA - NO DVD - HDMI - FREEDOS - JADE BLACK</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/Portatil ASUS ZENBOOK UM3406HA-QD166 JADE BLACK.png"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS ZENBOOK UM3406HA-QD166 - AMD RYZEN 7 8840HS - 16GB LPDDR5X - 1 TERA SSD - PANTALLA 14" OLED WUXGA - NO DVD - HDMI - FREEDOS - JADE BLACK</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
<li>
<div class="food-menu-card">
<div class="card-banner">
<svg id="item-01-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 400 400" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Portatil ASUS ZENBOOK UM3406HA-QD124 - AMD RYZEN 7 8840HS - 16GB LPDDR5X - 1 TERA SSD - PANTALLA 14" OLED WUXGA - NO DVD - FREEDOS - JADE BLACK</title>
<defs>
<clipPath id="rounded-rect">
<rect x="0" y="0" width="400" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/portatiles/Portatil ASUS ZENBOOK UM3406HA-QD166 JADE BLACK.png"/>
</svg>
<div class="badge">-45%</div>
<button class="btn food-menu-btn">Comprar</button>
</div>
<div class="wrapper">
<p class="category">Portatiles</p>
<div class="rating-wrapper">
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="cloud"></ion-icon>
</div>
</div>
<h3 class="h3 card-title">ASUS ZENBOOK UM3406HA-QD124 - AMD RYZEN 7 8840HS - 16GB LPDDR5X - 1 TERA SSD - PANTALLA 14" OLED WUXGA - NO DVD - FREEDOS - JADE BLACK</h3>
<div class="price-wrapper">
<p class="price-text">Valor:</p>
<data class="price" value="xxxxxx">$xxxxxx</data>
<del class="del">$xxxxxxx</del>
</div>
</div>
</li>
</ul>
</div>
<button class="scroll-btn right" (click)="scrollRightPortatiles()">›</button>
</div>
<div class="ver-todo-container"><button class="btn-ver-todo" routerLink="/products/portatiles" routerLinkActive="active-link">Mira todo en Portatiles</button></div>
<div class="category-label">Celulares</div>
<div class="scroll-controls">
<button class="scroll-btn left" (click)="scrollLeftCelulares()">‹</button>
@ -335,7 +1042,7 @@
<rect x="0" y="0" width="300" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="300" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/OPPOA20-OCEAN BLUE.webp"/>
<image width="300" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/celulares/CelularSAMSUNGA06AZUL.webp"/>
</svg>
<div class="badge">-47%</div>
@ -382,7 +1089,7 @@
<rect x="0" y="0" width="300" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="300" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/celulares/SAMSUNGA05SNEGRO.webp"/>
<image width="300" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/celulares/SAMSUNGA05SNEGRO.jpg"/>
</svg>
<div class="badge">-47%</div>
@ -429,7 +1136,7 @@
<rect x="0" y="0" width="300" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image width="300" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/celulares/SAMSUNGA05SGRIS.webp"/>
<image width="300" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/celulares/SAMSUNGA05SGRIS.jpg"/>
</svg>
<div class="badge">-47%</div>
@ -476,7 +1183,7 @@
<rect x="0" y="0" width="300" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image transform="translate(-50, 0)" width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/celulares/SAMSUNGA16BLUEBLACK.webp"/>
<image width="300" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/celulares/SAMSUNGA16BLUEBLACK.jpg"/>
</svg>
<div class="badge">-47%</div>
@ -523,7 +1230,7 @@
<rect x="0" y="0" width="300" height="400" rx="20" ry="20" />
</clipPath>
</defs>
<image transform="translate(-50, 0)" width="400" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/celulares/SAMSUNGA16LIGHT GREEN.webp"/>
<image width="300" height="400" clip-path="url(#rounded-rect)" preserveAspectRatio="none" xlink:href="assets/images/celulares/SAMSUNGA16LIGHT GREEN.jpg"/>
</svg>
<div class="badge">-47%</div>
@ -1319,5 +2026,7 @@
</div>
<button class="scroll-btn right" (click)="scrollRightCelulares()">›</button>
</div>
<div class="ver-todo-container"><button class="btn-ver-todo" routerLink="/products/celulares" routerLinkActive="active-link">Mira todo en celulares</button></div>
</div>
</section>
</section>
<router-outlet></router-outlet>

3
src/app/ups/ups.component.html
View File

@ -173,3 +173,6 @@
</div>
</li>
</ul>
</div>
</section>

BIN
src/assets/images/celulares/CelularSAMSUNGA06AZUL.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/images/celulares/SAMSUNG A16 LIGHT GRAY.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/images/celulares/SAMSUNGA05SGRIS.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
src/assets/images/celulares/SAMSUNGA05SGRIS.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 45 KiB

BIN
src/assets/images/celulares/SAMSUNGA05SNEGRO.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 187 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/images/celulares/SAMSUNGA05SNEGRO.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

BIN
src/assets/images/celulares/SAMSUNGA16BLUEBLACK.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/assets/images/celulares/SAMSUNGA16BLUEBLACK.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 100 KiB

BIN
src/assets/images/celulares/SAMSUNGA16BLUEBLACK.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.4 KiB

BIN
src/assets/images/celulares/SAMSUNGA16LIGHT GREEN.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/assets/images/celulares/SAMSUNGA16LIGHT GREEN.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.8 KiB

BIN
src/assets/images/celulares/Samsung-A06-verde.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/assets/images/portatiles/ACER A314-36P-323FPURE SILVER.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 36 KiB

BIN
src/assets/images/portatiles/ACER A314-36P-323FPURE SILVER.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 64 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/assets/images/portatiles/ACER A315-24P-R7JSSILVER.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/images/portatiles/ACER A315-57-58LL GLACIER BLUE.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

BIN
src/assets/images/portatiles/ACER A315-59-57WMPURE SILVER.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 137 KiB

BIN
src/assets/images/portatiles/ACER TRAVELMATE TMP214-55GRAY.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
src/assets/images/portatiles/ASUS E1504FA-L1745 - AMD RYZEN 5 7520UMIXED BLACK.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

BIN
src/assets/images/portatiles/ASUS E1504FA-NJ1555 - AMDMIXED BLACK.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
src/assets/images/portatiles/ASUS EXPERTBOOK B1402CVA-NK2506 - INTEL CORE I5 - ENDLESS - BLACK.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
src/assets/images/portatiles/ASUS EXPERTBOOK B1402CVA-NK2506 STAR BLACK.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
src/assets/images/portatiles/ASUS X1502ZA-EJ2443 - INTEL CORE I5QUIET BLUE.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
src/assets/images/portatiles/ASUS X1605VA-MB1027INDIE BLACK.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
src/assets/images/portatiles/ASUS X1605VA-MB1235 - INTEL CORE I7 FREEDOS - INDIE BLACK.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
src/assets/images/portatiles/ASUS X1605VA-MB929 - INTEL CORE I9 FREEDOS - INDIE BLACKLIC KASPERSKY.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/images/portatiles/ASUS X1605ZA-MB997 - INTEL CORE I5 - INDIE BLACK.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
src/assets/images/portatiles/Portatil ASUS ZENBOOK UM3406HA-QD166 JADE BLACK.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 KiB