feat: [#93] founder section

Author: cd-bash

src/content/home/index.ts

@@ -6,11 +6,14 @@ import HOOK_VIDEO_MP4 from './assets/cd-labs-home-page-hook-animation.mp4';
 import PHILOSOPHY_BG from './assets/philosophy-background-temp.png';
 
 export const homePageContent: HomePageContentStructure = {
-    hookHeading: "When was the last time you <span class='highlight'>finished</span> a game?",
-    hookBody: "CD-Labs’ initiative is to design <b>complete</b> gaming experiences for <b>busy lives</b>.",
-    hookVideoWebm: HOOK_VIDEO_WEBM,
-    hookVideoMp4: HOOK_VIDEO_MP4,
+    hook: {
+        header: "When was the last time you <span class='highlight'>finished</span> a game?",
+        body: "CD-Labs’ initiative is to design <b>complete</b> gaming experiences for <b>busy lives</b>.",
+        videoWebem: HOOK_VIDEO_WEBM,
+        videoMp4: HOOK_VIDEO_MP4,
+    },
 
+    // ------------------------------------------------------------------------
     philosophy: {
         sectionBG: PHILOSOPHY_BG,
         header: "Games that respect <span class='highlight'>your time.</span>",
@@ -27,6 +30,7 @@ export const homePageContent: HomePageContentStructure = {
         alignment: 'left'
     },
 
+    // ------------------------------------------------------------------------
     teaser: {
         sectionBG: PHILOSOPHY_BG,
 
@@ -45,7 +49,23 @@ export const homePageContent: HomePageContentStructure = {
         ],
 
         alignment: 'right'
-    }
+    },
+
+    // ------------------------------------------------------------------------
+    founder: {
+        sectionBG: PHILOSOPHY_BG,
+        header: "Who is <span class='highlight'>CD</span>?",
+
+        paragraphs: [
+            "Hi, I'm CD. After more than a decade as a professional designer and developer in marketing, web, and the AAA games industry, I decided to take a different path. I left the world of blockbuster recipes behind to focus on what I love most: crafting truly unique gameplay ideas.",
+            "My goal with cd-labs is simple: to bring back that classic feeling of seeing a story through to its conclusion. I design my games to leave you feeling satisfied and inspired, not drained by an endless time commitment.",
+        ],
 
+        buttons: [
+            { text: "Let's connect", path: "#", styleType: "primary" },
+            { text: "Read my story", path: "#", styleType: "secondary" },
+        ],
 
+        alignment: 'left'
+    }
 }

src/views/home/index.ts

@@ -3,14 +3,18 @@ import {arrowButton, createVideoBackground, createWrapper, writeParagraph, write
 import {SectionContent, createContentSection} from "./contentSection";
 import {homePageContent} from "../../content/home";
 
-
 export type HomePageContentStructure = {
-    readonly hookHeading: string;
-    readonly hookBody: string;
-    readonly hookVideoWebm: string;
-    readonly hookVideoMp4: string;
+    readonly hook: HookContent;
     readonly philosophy: SectionContent;
     readonly teaser: SectionContent;
+    readonly founder: SectionContent;
+}
+
+type HookContent = {
+    readonly header: string;
+    readonly body: string;
+    readonly videoWebem: string;
+    readonly videoMp4: string;
 }
 
 // --------------------------------------------------------------------------------
@@ -19,31 +23,27 @@ export function homeView() {
   const page = document.createElement('div');
   page.id = 'home-page';
 
-  page.appendChild(hookSection());
+  page.appendChild(hookSection(homePageContent.hook));
   page.appendChild(createContentSection(homePageContent.philosophy));
   page.appendChild(createContentSection(homePageContent.teaser));
+  page.appendChild(createContentSection(homePageContent.founder));
 
   return page;
 }
 
 // --------------------------------------------------------------------------------
 
-function hookSection() {
+function hookSection(content: HookContent) {
   const hook = document.createElement('section');
-  const videoBg = createVideoBackground(homePageContent.hookVideoWebm, homePageContent.hookVideoMp4);
+  const videoBg = createVideoBackground(content.videoWebem, content.videoMp4);
   const wrapper = createWrapper();
   const article = document.createElement('article');
-  const hookTitle = writeTitle("h1", homePageContent.hookHeading);
-  const hookText = writeParagraph(homePageContent.hookBody);
-  const arrowDownBtn = arrowButton();
 
   hook.className = 'hook';
-  hookTitle.className = "hook-title";
-  hookText.className = "hook-text";
 
-  article.appendChild(hookTitle);
-  article.appendChild(hookText);
-  article.appendChild(arrowDownBtn);
+  article.appendChild(writeTitle("h1", content.header));
+  article.appendChild(writeParagraph(content.body));
+  article.appendChild(arrowButton());
   wrapper.appendChild(article);
   hook.appendChild(videoBg);
   hook.appendChild(wrapper);

src/views/home/styles.css

@@ -40,7 +40,7 @@
             align-items: center;
             height: 100vh;
 
-            .hook-text {
+            p {
                 font-size: 1.5em;
                 margin-top: 75px;
                 margin-bottom: 20px;