feat: ⚡ new portal web for qr scan

packages/portal/src/routes/index.css

@@ -0,0 +1,23 @@
+.page {
+    display: grid;
+    padding: 1rem;
+    gap: 2rem;
+}
+
+.page .qr-section.links {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.page .btn-link {
+    background: white;
+    box-shadow: rgb(0 0 0 / 16%) 0px 10px 36px 0px,
+        rgb(0 0 0 / 6%) 0px 0px 0px 1px;
+    padding: 10px;
+    border-radius: 5px;
+    font-weight: 600;
+    text-decoration: none;
+    color: #1a1a1a;
+    border: solid 1px #afafaf;
+}

packages/portal/src/routes/index.tsx

@@ -0,0 +1,61 @@
+import { component$, useStylesScoped$ } from '@builder.io/qwik'
+import type { DocumentHead } from '@builder.io/qwik-city'
+import { QR } from '~/components/qr/qr'
+
+import style from './index.css?inline'
+
+export default component$(() => {
+    useStylesScoped$(style)
+
+    return (
+        <div class={'page'}>
+            <div class={'qr-section'}>
+                <QR />
+            </div>
+            <div class={'qr-section intructions'}>
+                <h1>Whatsapp QR</h1>
+                <p>
+                    Con esta libreria, puedes configurar respuestas
+                    automatizadas para preguntas frecuentes, recibir y responder
+                    mensajes de manera automatizada, y hacer un seguimiento de
+                    las interacciones con los clientes. <br /> Además, nuestro
+                    Chatbot se integra fácilmente con otros sistemas y
+                    herramientas que ya esté utilizando en su negocio.
+                </p>
+                <div class={'qr-section links'}>
+                    <a
+                        class={'btn-link '}
+                        target="_blank"
+                        href="https://bot-whatsapp.netlify.app/"
+                    >
+                        Ver documentación
+                    </a>
+                    <a
+                        class={'btn-link '}
+                        target="_blank"
+                        href="https://www.youtube.com/watch?v=1u0TTbjK5bo&list=PL_WGMLcL4jzViIlmyDZPnhAdkc8RXGkFh"
+                    >
+                        Ver videos
+                    </a>
+                    <a
+                        class={'btn-link '}
+                        target="_blank"
+                        href="https://opencollective.com/bot-whatsapp"
+                    >
+                        Comprar café
+                    </a>
+                </div>
+            </div>
+        </div>
+    )
+})
+
+export const head: DocumentHead = {
+    title: '🤖 Crear chatbot WhatsApp en minutos',
+    meta: [
+        {
+            name: 'description',
+            content: '🤖 Crear chatbot WhatsApp en minutos',
+        },
+    ],
+}

packages/portal/src/routes/layout.tsx

@@ -0,0 +1,20 @@
+import { component$, Slot } from '@builder.io/qwik'
+import Header from '../components/header/header'
+
+export default component$(() => {
+    return (
+        <>
+            <main>
+                <Header />
+                <section>
+                    <Slot />
+                </section>
+            </main>
+            <footer>
+                <a href="https://qwik.builder.io/" target="_blank">
+                    Made with <strong>Qwik</strong>
+                </a>
+            </footer>
+        </>
+    )
+})

packages/portal/src/routes/service-worker.ts

@@ -0,0 +1,18 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * The service-worker.ts file is used to have state of the art prefetching.
+ * https://qwik.builder.io/qwikcity/prefetching/overview/
+ *
+ * Qwik uses a service worker to speed up your site and reduce latency, ie, not used in the traditional way of offline.
+ * You can also use this file to add more functionality that runs in the service worker.
+ */
+import { setupServiceWorker } from '@builder.io/qwik-city/service-worker'
+
+setupServiceWorker()
+
+addEventListener('install', () => self.skipWaiting())
+
+addEventListener('activate', () => self.clients.claim())
+
+declare const self: ServiceWorkerGlobalScope