Creacion UPS y Blog

src/app/app-routing.module.ts

@@ -2,8 +2,14 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { ProductsComponent } from './products/products.component';
+import { CybersecurityComponent } from './cybersecurity/cybersecurity.component';
+import { UPSComponent } from './ups/ups.component';
+import { BlogComponent } from './blog/blog.component';
 
 const routes: Routes = [
+  { path: 'blog', component: BlogComponent },
+  { path: 'ups', component: UPSComponent },
+  { path: 'cybersecurity', component: CybersecurityComponent },
   { path: 'products', component: ProductsComponent },
   { path: 'home', component: HomeComponent },
   // puedes tener otras rutas aquí

src/app/app.component.html

@@ -17,7 +17,7 @@
         </li>
 
         <li class="nav-item">
-          <a href="#about" class="navbar-link" data-nav-link>Nosotros</a>
+          <a class="navbar-link" routerLink="/cybersecurity" routerLinkActive="active-link">Ciberseguridad</a>
         </li>
 
         <li class="nav-item">
@@ -25,7 +25,11 @@
         </li>
 
         <li class="nav-item">
-          <a href="#blog" class="navbar-link" data-nav-link>Testimonios </a>
+          <a class="navbar-link" routerLink="/ups" routerLinkActive="active-link">UPS</a>
+        </li>
+
+        <li class="nav-item">
+          <a class="navbar-link" routerLink="/blog" routerLinkActive="active-link">Blog </a>
         </li>
 
         <li class="nav-item">

src/app/app.module.ts

@@ -6,12 +6,18 @@ import { AppComponent } from './app.component';
 import { IonicModule } from '@ionic/angular';
 import { ProductsComponent } from './products/products.component';
 import { HomeComponent } from './home/home.component';
+import { CybersecurityComponent } from './cybersecurity/cybersecurity.component';
+import { UPSComponent } from './ups/ups.component';
+import { BlogComponent } from './blog/blog.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     ProductsComponent,
-    HomeComponent
+    HomeComponent,
+    CybersecurityComponent,
+    UPSComponent,
+    BlogComponent
   ],
   imports: [
     BrowserModule,

src/app/blog/blog.component.html

@@ -0,0 +1,155 @@
+
+
+<!-- Plantilla de noticias como cartas ----------->
+<section class="section section-divider white blog" id="blog">
+    <div class="container">
+
+      <p class="section-subtitle">Blog</p>
+
+      <h2 class="h2 section-title">
+        ¿Quieres conocer más sobre <span class="span">Tecnologia?</span>
+      </h2>
+
+      <p class="section-text">
+        Aquí te dejamos algunos hechos, noticias e información importante sobre seguridad informática.
+      </p>
+
+      <ul class="blog-list">
+
+        <li>
+          <div class="blog-card">
+
+            <div class="card-banner">
+              <img src="assets/images/Switzerland-joins-EU-PESCO-proje-1.webp" width="600" height="390" loading="lazy"
+                alt="La importancia de la ciberseguridad en la era digital" class="w-100" style="height: 100%; object-fit: cover;">
+
+              <div class="badge">Seguridad</div>
+            </div>
+
+            <div class="card-content">
+
+              <div class="card-meta-wrapper">
+
+                <a href="https://militarnyi.com/en/news/switzerland-receives-eu-approval-to-join-multinational-cybersecurity-project/#google_vignette" class="card-meta-link">
+                  <ion-icon name="calendar-outline"></ion-icon>
+
+                  <time class="meta-info" datetime="2023-05-12">25 Mayo 2025</time>
+                </a>
+
+                <a href="https://militarnyi.com/en/news/switzerland-receives-eu-approval-to-join-multinational-cybersecurity-project/#google_vignette" class="card-meta-link">
+                  <ion-icon name="person-outline"></ion-icon>
+
+                  <p class="meta-info">MILITARNYI</p>
+                </a>
+
+              </div>
+
+              <h3 class="h3">
+                <a href="https://militarnyi.com/en/news/switzerland-receives-eu-approval-to-join-multinational-cybersecurity-project/#google_vignette" class="card-title">Switzerland Receives EU Approval to Join Multinational Cybersecurity Project</a>
+              </h3>
+
+              <p class="card-text">
+                The European Union has officially approved Switzerland’s participation in a multinational European cybersecurity initiative, Defense News reported. 
+
+              <a href="https://militarnyi.com/en/news/switzerland-receives-eu-approval-to-join-multinational-cybersecurity-project/#google_vignette" class="btn-link">
+                <span>Leer más</span>
+
+                <ion-icon name="arrow-forward" aria-hidden="true"></ion-icon>
+              </a>
+
+            </div>
+
+          </div>
+        </li>
+
+<li>
+          <div class="blog-card">
+
+            <div class="card-banner">
+              <img src="assets/images/5f0c2b26-ddd3-4051-bf8f-eac85231d6ac.webp" width="600" height="390" loading="lazy"
+                alt="La importancia de la ciberseguridad en la era digital" class="w-100">
+
+              <div class="badge">Seguridad</div>
+            </div>
+
+            <div class="card-content">
+
+              <div class="card-meta-wrapper">
+
+                <a href="https://www.xataka.com.co/aplicaciones/alerta-colombia-whatsapp-spoofing-modalidad-ciberataque-para-tomar-control-tu-cuenta" class="card-meta-link">
+                  <ion-icon name="calendar-outline"></ion-icon>
+
+                  <time class="meta-info" datetime="2023-05-12">16 Septiembre 2024</time>
+                </a>
+
+                <a href="https://www.xataka.com.co/aplicaciones/alerta-colombia-whatsapp-spoofing-modalidad-ciberataque-para-tomar-control-tu-cuenta" class="card-meta-link">
+                  <ion-icon name="person-outline"></ion-icon>
+
+                  <p class="meta-info">Jimmy Pepinosa</p>
+                </a>
+
+              </div>
+
+              <h3 class="h3">
+                <a href="https://www.xataka.com.co/aplicaciones/alerta-colombia-whatsapp-spoofing-modalidad-ciberataque-para-tomar-control-tu-cuenta" class="card-title">WhatsApp Spoofing: La nueva amenaza cibernética en Colombia</a>
+              </h3>
+
+              <p class="card-text">
+                Ciberdelincuentes están tomando el control de cuentas y suplantando identidades a través de esta peligrosa técnica. Descubre cómo puedes protegerte de esta amenaza creciente.
+
+              <a href="https://www.xataka.com.co/aplicaciones/alerta-colombia-whatsapp-spoofing-modalidad-ciberataque-para-tomar-control-tu-cuenta" class="btn-link">
+                <span>Leer más</span>
+
+                <ion-icon name="arrow-forward" aria-hidden="true"></ion-icon>
+              </a>
+
+            </div>
+
+          </div>
+        </li>
+      <li>
+          <div class="blog-card">
+
+            <div class="card-banner">
+              <img src="/assets/images/323c9c20-87e1-4266-bf33-2b7fbc58cf35.webp" width="600" height="390" loading="lazy"
+                alt="Del papel moneda a la Distributed Leger Technology." class="w-100" style="height: 100%; object-fit: cover;">
+
+              <div class="badge">Interceptaciones</div>
+            </div>
+
+            <div class="card-content">
+
+              <div class="card-meta-wrapper">
+
+                <a href="#" class="card-meta-link">
+                  <ion-icon name="calendar-outline"></ion-icon>
+
+                  <time class="meta-info" datetime="2024-06-25">25 Junio 2024</time>
+                </a>
+
+                <a href="#" class="card-meta-link">
+                  <ion-icon name="person-outline"></ion-icon>
+
+                  <p class="meta-info">Jhoan Pardo</p>
+                </a>
+
+              </div>
+
+              <h3 class="h3">
+                <a href="https://www.infobae.com/colombia/2024/06/25/la-jep-tambien-solicito-a-la-fiscalia-investigar-presuntas-chuzadas-a-sus-magistrados-habrian-intentado-interceptar-sus-correos/" class="card-title">La JEP también solicitó a la Fiscalía investigar presuntas “chuzadas” a sus magistrados: habrían intentado interceptar sus correos</a>
+              </h3>
+
+              <p class="card-text">
+                La petición se da después de la denuncia que recibió la Dirección de Asuntos Jurídicos de esa justicia por parte de una magistrada, quien aseguró que intentaron interceptar sus mensajes electrónicos hace cuatro meses
+              </p>
+
+              <a href="https://www.infobae.com/colombia/2024/06/25/la-jep-tambien-solicito-a-la-fiscalia-investigar-presuntas-chuzadas-a-sus-magistrados-habrian-intentado-interceptar-sus-correos/" class="btn-link">
+                <span>Leer más</span>
+
+                <ion-icon name="arrow-forward" aria-hidden="true"></ion-icon>
+              </a>
+
+            </div>
+
+          </div>
+        </li>

src/app/blog/blog.component.spec.ts

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

src/app/blog/blog.component.ts

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

src/app/cybersecurity/cybersecurity.component.html

@@ -0,0 +1 @@
+<p>cybersecurity works!</p>

src/app/cybersecurity/cybersecurity.component.spec.ts

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

src/app/cybersecurity/cybersecurity.component.ts

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

src/app/products/products.component.html

@@ -362,8 +362,150 @@
             </div>
           </li>
 
-        </ul>
 
+          <li>
+            <div class="food-menu-card">
 
+              <div class="card-banner">
+
+                <svg id="item-06-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 300 300" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <title>Licencias</title>
+                  <defs>
+                    <clipPath id="rotated-squircle">
+                      <path d="m280 240c-19.938 28.8-69.515 46.852-103.98 53.118-34.463 6.266-87.222 6.82-116.02-13.118-28.8-19.938-46.852-69.515-53.118-103.98-6.266-34.463-6.82-87.222 13.118-116.02 19.938-28.8 69.515-46.852 103.98-53.118 34.463-6.266 87.222-6.82 116.02 13.118 28.8 19.938 46.852 69.515 53.118 103.98 6.266 34.463 6.82 87.222-13.118 116.02z" fill="#ccc" />
+                    </clipPath>
+                  </defs>
+                  <image width="300" height="300" clip-path="url(#rotated-squircle)" preserveAspectRatio="none" xlink:href="assets/images/75fbd65d-2b18-445c-ace3-b1c6f34b8373.webp"/>
+                </svg>
+
+                <div class="badge">-3%</div>
+
+                <button class="btn food-menu-btn">Comprar</button>
+              </div>
+
+              <div class="wrapper">
+                <p class="category">Licencias</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">LICENCIA KASPERSKY</h3>
+              <h5 class="section-subtitle-2">STANDAR 1 USUARIO (12 MESES)</h5>
+
+              <div class="price-wrapper">
+
+                <p class="price-text">Valor:</p>
+
+                <data class="price" value="xxxxxxx">$xxxxxxxxx</data>
+
+                <del class="del">$xxxxxxxx</del>
+
+              </div>
+
+            </div>
+          </li>
+        
+          <li>
+            <div class="food-menu-card">
+
+              <div class="card-banner">
+
+                <svg id="item-06-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 300 300" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <title>Licencias</title>
+                  <defs>
+                    <clipPath id="rotated-squircle">
+                      <path d="m280 240c-19.938 28.8-69.515 46.852-103.98 53.118-34.463 6.266-87.222 6.82-116.02-13.118-28.8-19.938-46.852-69.515-53.118-103.98-6.266-34.463-6.82-87.222 13.118-116.02 19.938-28.8 69.515-46.852 103.98-53.118 34.463-6.266 87.222-6.82 116.02 13.118 28.8 19.938 46.852 69.515 53.118 103.98 6.266 34.463 6.82 87.222-13.118 116.02z" fill="#ccc" />
+                    </clipPath>
+                  </defs>
+                  <image width="300" height="300" clip-path="url(#rotated-squircle)" preserveAspectRatio="none" xlink:href="assets/images/75fbd65d-2b18-445c-ace3-b1c6f34b8373.webp"/>
+                </svg>
+
+                <div class="badge">-3%</div>
+
+                <button class="btn food-menu-btn">Comprar</button>
+              </div>
+
+              <div class="wrapper">
+                <p class="category">Licencias</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">LICENCIA KASPERSKY</h3>
+              <h5 class="section-subtitle-2">STANDAR 1 USUARIO (12 MESES)</h5>
+
+              <div class="price-wrapper">
+
+                <p class="price-text">Valor:</p>
+
+                <data class="price" value="xxxxxxx">$xxxxxxxxx</data>
+
+                <del class="del">$xxxxxxxx</del>
+
+              </div>
+
+            </div>
+          </li>
+          
+          <li>
+            <div class="food-menu-card">
+
+              <div class="card-banner">
+
+                <svg id="item-06-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 300 300" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <title>Licencias</title>
+                  <defs>
+                    <clipPath id="rotated-squircle">
+                      <path d="m280 240c-19.938 28.8-69.515 46.852-103.98 53.118-34.463 6.266-87.222 6.82-116.02-13.118-28.8-19.938-46.852-69.515-53.118-103.98-6.266-34.463-6.82-87.222 13.118-116.02 19.938-28.8 69.515-46.852 103.98-53.118 34.463-6.266 87.222-6.82 116.02 13.118 28.8 19.938 46.852 69.515 53.118 103.98 6.266 34.463 6.82 87.222-13.118 116.02z" fill="#ccc" />
+                    </clipPath>
+                  </defs>
+                  <image width="300" height="300" clip-path="url(#rotated-squircle)" preserveAspectRatio="none" xlink:href="assets/images/75fbd65d-2b18-445c-ace3-b1c6f34b8373.webp"/>
+                </svg>
+
+                <div class="badge">-3%</div>
+
+                <button class="btn food-menu-btn">Comprar</button>
+              </div>
+
+              <div class="wrapper">
+                <p class="category">Licencias</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">LICENCIA KASPERSKY</h3>
+              <h5 class="section-subtitle-2">STANDAR 1 USUARIO (12 MESES)</h5>
+
+              <div class="price-wrapper">
+
+                <p class="price-text">Valor:</p>
+
+                <data class="price" value="xxxxxxx">$xxxxxxxxx</data>
+
+                <del class="del">$xxxxxxxx</del>
+
+              </div>
+
+            </div>
+          </li>
+          </ul>
       </div>
     </section>

src/app/ups/ups.component.html

@@ -0,0 +1,175 @@
+    <!--
+      - #PRODUCTS & SERVICES
+    -->
+
+    <section class="section food-menu" id="food-menu">
+      <div class="container">
+
+        <p class="section-subtitle">Para ser invisible en el mundo...</p>
+
+        <h2 class="h2 section-title">
+          UPS AJ<span class="cybersec">System</span>
+        </h2>
+
+        <p class="section-text">
+          Mira los productos que tenemos para ti!
+        </p>
+
+        <ul class="fiter-list">
+
+          <li>
+            <button class="filter-btn  active">Todos</button>
+          </li>
+
+
+          <li>
+            <button class="filter-btn">Equipos corporativos</button>
+          </li>
+
+        </ul>
+
+        <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 300 300" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <title>Celulares</title>
+                  <defs>
+                    <clipPath id="rotated-squircle">
+                      <path d="m280 240c-19.938 28.8-69.515 46.852-103.98 53.118-34.463 6.266-87.222 6.82-116.02-13.118-28.8-19.938-46.852-69.515-53.118-103.98-6.266-34.463-6.82-87.222 13.118-116.02 19.938-28.8 69.515-46.852 103.98-53.118 34.463-6.266 87.222-6.82 116.02 13.118 28.8 19.938 46.852 69.515 53.118 103.98 6.266 34.463 6.82 87.222-13.118 116.02z" fill="#ccc" />
+                    </clipPath>
+                  </defs>
+                  <image width="300" height="300" clip-path="url(#rotated-squircle)" preserveAspectRatio="none" xlink:href="assets/images/5c5c9bf6-19f8-4e5e-8725-100ba731125b.webp"/>
+                </svg>
+
+                <div class="badge">-45%</div>
+
+                <button class="btn food-menu-btn">Comprar</button>
+              </div>
+
+              <div class="wrapper">
+                <p class="category">celulares</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">XIAOMI REDMI PAD SE - PANTALLA 8,7"</h3>
+              <h5 class="section-subtitle-2">-OCTA CORE (2,4GHZ / 1,9GHZ) - 128GB - MEMORIA 4GB - CUATRO CAMARAS - ANDROID 11 - DUAL SIM - 4G LTE - BLUE"</h5>
+
+              <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-02-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 300 300" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <title>Televisores</title>
+                  <defs>
+                    <clipPath id="rotated-squircle">
+                      <path d="m280 240c-19.938 28.8-69.515 46.852-103.98 53.118-34.463 6.266-87.222 6.82-116.02-13.118-28.8-19.938-46.852-69.515-53.118-103.98-6.266-34.463-6.82-87.222 13.118-116.02 19.938-28.8 69.515-46.852 103.98-53.118 34.463-6.266 87.222-6.82 116.02 13.118 28.8 19.938 46.852 69.515 53.118 103.98 6.266 34.463 6.82 87.222-13.118 116.02z" fill="#ccc" />
+                    </clipPath>
+                  </defs>
+                  <image width="300" height="300" clip-path="url(#rotated-squircle)" preserveAspectRatio="none" xlink:href="assets/images/bfc10264-ac60-4578-813f-1eff9cb7e0fa.webp"/>
+                </svg>
+
+                <div class="badge">-55%</div>
+
+                <button class="btn food-menu-btn">Comprar</button>
+              </div>
+
+              <div class="wrapper">
+                <p class="category">Televisores</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-outline"></ion-icon>
+                </div>
+              </div>
+
+              <h3 class="h3 card-title">TELEVISOR LED HISENSE 32"</h3>
+              <h5 class="section-subtitle-2">32A4N - HD - SMART TV - TDT - SISTEMA OPERATIVO VIDA A U7</h5>
+
+              <div class="price-wrapper">
+
+                <p class="price-text">Valor:</p>
+
+                <data class="price" value="xxxxxxxx">$xxxxxxxx</data>
+
+                <del class="del">$xxxxxxxx</del>
+
+              </div>
+
+            </div>
+          </li>
+
+          <li>
+            <div class="food-menu-card">
+
+              <div class="card-banner">
+
+                <svg id="item-03-round-squircle-svg" class="w-100" version="1.1" width="300" viewBox="0 0 300 300" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <title>Smart Watch y Audifonos</title>
+                  <defs>
+                    <clipPath id="rotated-squircle">
+                      <path d="m280 240c-19.938 28.8-69.515 46.852-103.98 53.118-34.463 6.266-87.222 6.82-116.02-13.118-28.8-19.938-46.852-69.515-53.118-103.98-6.266-34.463-6.82-87.222 13.118-116.02 19.938-28.8 69.515-46.852 103.98-53.118 34.463-6.266 87.222-6.82 116.02 13.118 28.8 19.938 46.852 69.515 53.118 103.98 6.266 34.463 6.82 87.222-13.118 116.02z" fill="#ccc" />
+                    </clipPath>
+                  </defs>
+                  <image width="300" height="300" clip-path="url(#rotated-squircle)" preserveAspectRatio="none" xlink:href="assets/images/eb5a6af1-c459-44ea-ad05-df52ccb37cea.webp"/>
+                </svg>
+
+                <div class="badge">-47%</div>
+
+                <button class="btn food-menu-btn">Comprar</button>
+              </div>
+
+              <div class="wrapper">
+                <p class="category">Smart Watch y Audifonos</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"> HUAWEI  BAND 7 - PANT 1,47" - BT 5,0</h3>
+              <h5 class="section-subtitle-2">RESISTE AL AGUA - NOTIFICACIONES - CONTROL ACTIVIDAD - OXIMETRO - 96 MODOS DE ENTRENAMIENTO - NEGRO</h5>
+
+              <div class="price-wrapper">
+
+                <p class="price-text">Valor:</p>
+
+                <data class="price" value="xxxxxxx">$xxxxxxxxx</data>
+
+                <del class="del">$xxxxxxxxx</del>
+
+              </div>
+
+            </div>
+          </li>

src/app/ups/ups.component.spec.ts

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

src/app/ups/ups.component.ts

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