wip: hook section

Author: cd-bash

src/components/logo/assets/cd-labs-logo.png

@@ -0,0 +1,20 @@
+import './styles.css';
+import LOGO from './assets/cd-labs-logo.png';
+
+export function buildMainLogo() {
+    const logoContainer = document.createElement('div');
+    const logoImg = document.createElement('img');
+    const logoText = document.createElement('p');
+
+    logoContainer.className = 'main-logo';
+
+    logoImg.src = LOGO;
+    logoImg.alt = "CD-Labs Logo";
+
+    logoText.textContent = "CD-Labs";
+
+    logoContainer.appendChild(logoImg);
+    logoContainer.appendChild(logoText);
+    
+    return logoContainer;
+}

src/components/logo/index.ts

@@ -0,0 +1,20 @@
+
+.main-logo {
+    position: fixed;
+    top: 40px;
+    left: 55px;
+
+    img {
+        width: 95px;
+        height: 95px;
+        image-rendering: pixelated;
+    }
+
+    p {
+        text-align: center;
+        text-transform: uppercase;
+        font-family: "Handjet", sans-serif;
+        font-size: 2em;
+        font-weight: 900;
+    }
+}

src/components/logo/styles.css

@@ -5,5 +5,5 @@
     
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Handjet:[email protected]&display=swap&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Handjet:[email protected]&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
 `

src/heads/default.ts

@@ -1,3 +1,4 @@
+import { buildMainLogo } from "./components/logo";
 import { router } from "./core/router";
 import {homeView, buildViewBase, renderView} from "./views";
 
@@ -13,8 +14,11 @@ routes.forEach(route => router.registerRoute(route.path, route.handler));
 function init() {
     const body = document.getElementsByTagName("body")[0];
     const contentPage = buildViewBase();
+    const mainLogo = buildMainLogo();
 
+    body.appendChild(mainLogo);
     body.appendChild(contentPage);
+    
 
     router.handleRoute(window.location.pathname);
 }

src/index.ts

@@ -1,4 +1,4 @@
-import {createWrapper, writeParagraph, writeTitle} from "./utils";
+import {arrowButton, createVideoBackground, createWrapper, writeParagraph, writeTitle} from "./utils";
 
 export type HomePageContent = {
     readonly title: string;
@@ -12,6 +12,7 @@ export function homeView() {
   page.id = 'home-page';
 
   page.appendChild(hookSection());
+  page.appendChild(philosophySection());
 
 
 
@@ -22,11 +23,12 @@ export function homeView() {
 
 function hookSection() {
   const hook = document.createElement('section');
+  const videoBg = createVideoBackground();
   const wrapper = createWrapper();
   const article = document.createElement('article');
   const hookTitle = writeTitle("h1", "When was the last time you finished a game?");
   const hookText = writeParagraph("CD-Labs’ initiative is to design complete gaming experiences for busy lives.");
-  const arrowDownBtn = document.createElement('button');
+  const arrowDownBtn = arrowButton();
 
   hook.className = 'hook';
   hookTitle.className = "hook-title";
@@ -36,10 +38,30 @@ function hookSection() {
   article.appendChild(hookText);
   article.appendChild(arrowDownBtn);
   wrapper.appendChild(article);
+  hook.appendChild(videoBg);
   hook.appendChild(wrapper);
 
   return hook;
 }
 
+function philosophySection() {
+  const section = document.createElement('section');
+  const wrapper = createWrapper();
+  const article = document.createElement('article');
+  const title = writeTitle("h2", "Games that respect your time.");
+  const text_a = writeParagraph("I believe gaming should be an escape, not a second job. But as games have gotten bigger and more demanding, it's become harder to find the time to even finish one.");
+  const text_b = writeParagraph("That's why I started cd-labs. My goal is to deliver compact, complete gaming experiences that honor your schedule. Each game is a focused, handcrafted quest meant to be enjoyed in a single sitting or over a few evenings.");
+
+  section.className = 'philosophy';
+
+  article.appendChild(title);
+  article.appendChild(text_a);
+  article.appendChild(text_b);
+  wrapper.appendChild(article);
+  section.appendChild(wrapper);
+
+  return section;
+}
+
 
 

src/views/home.ts

@@ -1,58 +1,4 @@
-body {
-    background-color: black;
-    margin: 0;
-}
-
-h1, h2 {
-    margin: 0;
-    font-family: "Inter", sans-serif;
-    font-size: 6em;
-    line-height: 100%;
-    color: white;
-}
-
-h3 {
-    font-family: "Handjet", serif;
-    font-size: 2.8em;
-    font-weight: 600;
-    color: #828282;
-}
-
-h5 {
-    font-family: "Handjet", serif;
-    font-size: 1.5em;
-    font-weight: 600;
-    text-transform: lowercase;
-    color: #828282;
-}
-
-h6 {
-    margin: 0 0 20px 0;
-    font-family: "Handjet", serif;
-    font-size: 2em;
-    font-weight: 600;
-    text-transform: lowercase;
-    color: #3BFFC5;
-}
-
-p {
-    font-size: 1.5em;
-    font-weight: normal;
-    color: white;
-    line-height: 110%;
-    margin: 0;
-}
-
-p.intro-text {
-    margin-bottom: 50px;
-}
-
-p.description {
-    font-family: "Cabin", sans-serif;
-    color: #A1A1A1;
-    font-size: 0.9em;
-}
-
+
 #view {
     height: 100%;
     font-family: 'Inter', sans-serif;
@@ -65,7 +11,7 @@ p.description {
     #home-page {
 
         section {
-            width: 100vw;
+            width: 100%;
             min-height: 100vh;
             height: 100vh;
             margin: 0;
@@ -74,6 +20,9 @@ p.description {
         }
 
         .hook {
+            h1, p {
+                text-shadow: 0 4px 55px rgba(0, 0, 0, 0.65);
+            }
 
             article {
                 margin: 0 15%;
@@ -91,8 +40,6 @@ p.description {
                 }
             }
         }
-
-
     }
 }