home básico

src/constants/Videos.ts

@@ -0,0 +1,6 @@
+/** Lista de videos (CC) */
+const VIDEOS: string[] = [
+  "https://www.pexels.com/es-es/download/video/13831212/?fps=60.0&h=720&w=1280"
+];
+
+export default VIDEOS;

src/helpers/Video.ts

@@ -0,0 +1,15 @@
+import VIDEOS from "../constants/Videos";
+
+/**
+ * Clase helper para gestionar los vídeos de fondo
+ * encontrados en views/Home
+ */
+export default class Video {
+  /**
+   * Elige un vídeo aleatoriamente de la lista
+   * @returns Vídeo aleatorio
+   */
+  static random(): string {
+    return VIDEOS[Math.floor(Math.random()*VIDEOS.length)];
+  }
+}

src/partials/Navbar.tsx

@@ -0,0 +1,29 @@
+import { A } from "@solidjs/router"
+
+/**
+ * Navegador horizontal, usado en todas las views
+ */
+function Navbar() {
+  return (
+    <nav class="navbar" role="navigation" aria-label="main navigation">
+      <div class="navbar-brand">
+        <A class="navbar-item" href="/">CyberBokeron</A>
+
+        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </a>
+      </div>
+
+      <div class="navbar-menu">
+        <div class="navbar-start">
+          {/* TODO: Agregar enlaces */}
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export default Navbar

src/views/Home.tsx

@@ -1,6 +1,43 @@
+import { FaSolidGlassWaterDroplet } from "solid-icons/fa"
+import Navbar from "../partials/Navbar"
+
 function Home() {
   return (
-    <p>Hi</p>
+    <>
+      <Navbar />
+      <section class="hero is-fullheight-with-navbar">
+        <div class="hero-body">
+          <div class="container has-text-centered">
+            <div class="columns is-centered">
+              <div class="column is-half">
+                <div class="box">
+                  <div class="columns is-centered is-vcentered is-mobile">
+                    <div class="column is-4">
+                      <figure class="image is-128x128">
+                        <img src="https://bulma.io/assets/images/placeholders/128x128.png" />
+                      </figure>
+                    </div>
+                    <div class="column is-8">
+                      <p class="title">
+                        <span class="icon-text">
+                          <span class="icon">
+                            <FaSolidGlassWaterDroplet />
+                          </span>
+                          <span>Malackathon</span>
+                        </span>
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section class="section">
+        <video src="https://www.pexels.com/es-es/download/video/13831212/?fps=60.0&h=720&w=1280"></video>
+      </section>
+    </>
   )
 }