prueba de enace promo qr

package.json

@@ -18,14 +18,17 @@
     "@angular/platform-browser": "~12.2.0",
     "@angular/platform-browser-dynamic": "~12.2.0",
     "@angular/router": "~12.2.0",
+    "countdown": "^2.6.0",
     "rxjs": "~6.6.0",
+    "timer": "^1.0.1",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~12.2.13",
     "@angular/cli": "~12.2.13",
     "@angular/compiler-cli": "~12.2.0",
+    "@types/countdown": "^0.0.8",
     "@types/jasmine": "~3.8.0",
     "@types/node": "^12.11.1",
     "jasmine-core": "~3.8.0",

src/app/standart/pages/cocteles/cocteles.component.html

@@ -1,6 +1,8 @@
 <div class="pageContainer">
     <img src="https://res.cloudinary.com/dgq2ycemj/image/upload/v1647488504/CARTATRAGOSFRENTE_con_precios_xqhfgv.png" alt="">
-    <img src="https://res.cloudinary.com/dgq2ycemj/image/upload/v1647488512/CARTATRAGOSTRASERA_precios_riih7y.png" alt="">
+    <img src="https://res.cloudinary.com/dgq2ycemj/image/upload/v1647488512/CARTATRAGOSTRASERA_precios_riih7y.png" alt="">    
+</div>
+<div class="pageContainer">    
     <img src="https://res.cloudinary.com/dgq2ycemj/image/upload/v1647652518/CARTA_CERVEZA_nlwlsx.png" alt="">
     <img src="https://res.cloudinary.com/dgq2ycemj/image/upload/v1647652518/carta_champagne_actualizada_18.3_apnqco.png" alt="">
-  </div>
+</div>

src/app/standart/pages/promo/promo.component.css

@@ -0,0 +1,113 @@
+* {
+    background-color: transparent;
+}
+.promoContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    height: 100vh;
+    background: rgb(131,58,180);
+    background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
+}
+
+.promoItem {
+    text-align: center;
+    padding: 2% 2%;
+    width: 90%;
+    height: 50%;
+    border-radius: 5px;
+    border: 5px solid white;
+    background-color: transparent;
+    color: white
+}
+
+
+.buttonCompartir {
+    background-color: transparent;
+    color: white;
+    outline:none;
+    border-radius: 5px;
+    padding: 2% 2%;
+    border:  1px solid white;
+    -webkit-box-shadow: -1px 7px 30px 0px rgba(0,0,0,0.75);
+    -moz-box-shadow: -1px 7px 30px 0px rgba(0,0,0,0.75);
+    box-shadow: -1px 7px 30px 0px rgba(0,0,0,0.75);
+}
+
+.tragoGratis {
+    font-size: 30px;
+    background: -webkit-linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.buttonCompartir:hover {
+    background: -webkit-linear-gradient(#eee, #333);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+p {
+    background-color: transparent;
+}
+
+section {
+    background-color: transparent;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+ul {
+    display: flex;
+    justify-content: center;
+    background-color: transparent;
+}
+
+.coming-soon {
+    width: 100%;
+}
+
+.time-countdown ul {
+    margin: 36px auto;
+}
+
+.time-countdown ul li.count-bg-one {
+    background: #468dbc;
+}
+
+.time-countdown ul li.count-bg-two {
+    background: #ef9024;
+}
+
+.time-countdown ul li.count-bg-three {
+    background: #ee337f;
+}
+
+.time-countdown ul li.count-bg-four {
+    background: #1fb1f4;
+    margin-right: 0;
+}
+
+.time-countdown ul li {
+    width: 33%;
+    margin-right: 2%;
+    text-align: center;
+    display: inline-block;
+    padding: 24px 20px;
+    color: #fff;
+}
+
+.radius {
+    border-radius: 5px;
+}
+
+.time-countdown ul li span {
+    color: #FFF;
+    font-family: 'Poppins', sans-serif;
+    font-size: 50px;
+    line-height: 60px;
+    font-weight: 700;
+    display: block;
+}

src/app/standart/pages/promo/promo.component.html

@@ -0,0 +1,23 @@
+<div class="promoContainer">
+    <div class="promoItem">
+        <div class="divDesc">
+            <p class="tragoGratis">1 PINTA GRATIS</p>
+            <p>COMPARTIENDO EN TU HISTORIA DE INSTAGRAM NUESTRA PUBLICACIÓN Y EXHIBIENDO ESTE CUPÓN.</p>
+        </div>
+        <br>
+
+        <div  class="divDesc">LA PROMO FINALIZA EN: </div>
+        <section>
+            <div class="coming-soon">
+                <div class="time-countdown">
+                    <ul>
+                        <li class="count-bg-two radius"><span id="hours">{{hours}}</span>Horas</li>
+                        <li class="count-bg-three radius"><span id="minutes">{{minutes}}</span>Minutos</li>
+                        <li class="count-bg-four radius"><span id="seconds">{{seconds}}</span>Segundos</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+        <button (click)="navigate()" class="buttonCompartir">COMPARTIR AHORA!</button>
+    </div>
+</div>

src/app/standart/pages/promo/promo.component.spec.ts

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

src/app/standart/pages/promo/promo.component.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { timer } from 'rxjs';
+
+@Component({
+  selector: 'app-promo',
+  templateUrl: './promo.component.html',
+  styleUrls: ['./promo.component.css']
+})
+export class PromoComponent implements OnInit {
+  _second = 1000;
+  _minute = this._second * 60;
+  _hour = this._minute * 60;
+  _day = this._hour * 24;
+  end: any;
+  now: any;
+  day: any;
+  hours: any;
+  minutes: any;
+  seconds: any;
+  source = timer(0, 1000);
+  clock: any;
+  constructor(private router: Router){}
+  ngOnInit(){
+
+    this.clock = this.source.subscribe(t => {
+      this.now = new Date();
+      this.end = new Date('03/19/' + (this.now.getFullYear()) +' 22:59');
+      this.showDate();
+    });
+
+  }
+  showDate(){
+    let distance = this.end - this.now;
+    this.day = Math.floor(distance / this._day);
+    this.hours = Math.floor((distance % this._day) / this._hour);
+    this.minutes = Math.floor((distance % this._hour) / this._minute);
+    this.seconds = Math.floor((distance % this._minute) / this._second);
+  }
+
+  navigate() {
+    this.router.navigateByUrl("https://www.instagram.com/p/CbSkyparXzV/?utm_medium=copy_link")
+  }
+
+
+}

src/app/standart/standart-routing.module.ts

@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './pages/home/home.component';
 import { MenuComponent } from './pages/menu/menu.component';
 import { CoctelesComponent } from './pages/cocteles/cocteles.component';
+import { PromoComponent } from './pages/promo/promo.component';
 
 const routes: Routes = [
   {
@@ -22,6 +23,11 @@ const routes: Routes = [
         path: 'tragos',
         component: CoctelesComponent,
 
+      },
+      {
+        path: 'promo',
+        component: PromoComponent,
+
       },
       {
         path: '**',

src/app/standart/standart.module.ts

@@ -5,13 +5,15 @@ import { StandartRoutingModule } from './standart-routing.module';
 import { HomeComponent } from './pages/home/home.component';
 import { MenuComponent } from './pages/menu/menu.component';
 import { CoctelesComponent } from './pages/cocteles/cocteles.component';
+import { PromoComponent } from './pages/promo/promo.component';
 
 
 @NgModule({
   declarations: [
     HomeComponent,
     MenuComponent,
-    CoctelesComponent
+    CoctelesComponent,
+    PromoComponent
   ],
   imports: [
     CommonModule,