feat: [#92] game teaser section

Author: cd-bash

src/content/home/index.ts

@@ -25,5 +25,27 @@ export const homePageContent: HomePageContentStructure = {
         ],
 
         alignment: 'left'
+    },
+
+    teaser: {
+        sectionBG: PHILOSOPHY_BG,
+
+        introTitle: "The First Experience is Taking Shape",
+        header: "Project <span class='highlight'>Aqua</span>",
+
+        paragraphs: [
+            "Inspired by the frustrations of everyday bad design, Aqua places you in a sleek testing facility. Your mission: master a series of deceptively simple shower prototypes.",
+            "In this fast-paced puzzler, can you solve one of design's most infuriating problems—the shower interface—and calibrate each prototype?",
+            "<b>A sharp puzzle and a fresh perspective distilled into a single, focused game.</b"
+        ],
+
+        buttons: [
+            { text: "Whishlist on Steam", path: "#", styleType: "primary" },
+            { text: "Follow Development", path: "#", styleType: "secondary" }
+        ],
+
+        alignment: 'right'
     }
+
+
 }

src/views/home/contentSection.ts

@@ -4,6 +4,7 @@ import {createWrapper, writeParagraph, writeTitle} from "../utils";
 
 export type SectionContent = {
     readonly sectionBG: string;
+    readonly introTitle?: string;  
     readonly header: string;
     readonly paragraphs: string[];
     readonly buttons: MainButtonOptions[];
@@ -18,10 +19,14 @@ export function createContentSection(content: SectionContent) {
     const wrapper = createWrapper();
     const article = document.createElement('article');
 
-    section.className = 'content-section';
+    section.className = `content-section ${content.alignment}`;
     section.style.backgroundImage = `url('${content.sectionBG}')`;
     section.appendChild(pixelGrid(content.alignment));
 
+    if (content.introTitle) {
+        article.appendChild(introTitle(content.introTitle));
+    }
+
     article.appendChild(writeTitle("h2", content.header));
     article.appendChild(sectionParagraphs(content.paragraphs));
     article.appendChild(sectionButtons(content.buttons));
@@ -62,4 +67,11 @@ function sectionButtons(contentButtons: MainButtonOptions[]) {
         buttonsContainer.appendChild(button);
     });
     return buttonsContainer;
+}
+
+function introTitle(text: string) {
+    const intro = document.createElement('h3');
+    intro.className = 'intro-title';
+    intro.innerHTML = text;
+    return intro;
 }

src/views/home/index.ts

@@ -10,6 +10,7 @@ export type HomePageContentStructure = {
     readonly hookVideoWebm: string;
     readonly hookVideoMp4: string;
     readonly philosophy: SectionContent;
+    readonly teaser: SectionContent;
 }
 
 // --------------------------------------------------------------------------------
@@ -20,6 +21,7 @@ export function homeView() {
 
   page.appendChild(hookSection());
   page.appendChild(createContentSection(homePageContent.philosophy));
+  page.appendChild(createContentSection(homePageContent.teaser));
 
   return page;
 }

src/views/home/styles.css

@@ -66,14 +66,19 @@
             position: relative;
             z-index: 2; /* Above the pixel grid */
             display: flex;
-            width: 45%;
+            width: 40%;
             flex-direction: column;
             justify-content: center;
             align-items: flex-start;
             height: 100vh;
             margin-left: 5%; /* Add some margin to position the content */
         }
 
+        &.right article {
+            margin-left: auto;
+            margin-right: 5%; /* Mirror the left margin */
+        }
+
         p {
             max-width: 60%;
             margin-bottom: 30px;

src/views/utils/styles.css

@@ -13,10 +13,10 @@ h1, h2 {
 }
 
 h3 {
-    font-family: "Handjet", serif;
-    font-size: 2.8em;
-    font-weight: 600;
-    color: #828282;
+    font-family: "Inter", sans-serif;
+    font-size: 2em;
+    font-weight: 700;
+    color: #ffffff;
 }
 
 h5 {