From 29701cc05855a3e64bfed764a0a5e943dbc5cc15 Mon Sep 17 00:00:00 2001
From: Dita Aji Pratama <ditaajipratama@protonmail.com>
Date: Wed, 21 May 2025 15:12:01 +0700
Subject: [PATCH] Fullwidth picture component with 100% Viewport Height option
 on the sample

---
 modules/sample/sbmb.py                             | 10 +++++++++-
 templates/SBModernBiz/html/components/fullpic.html |  8 ++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/modules/sample/sbmb.py b/modules/sample/sbmb.py
index 709f605..78f5a24 100644
--- a/modules/sample/sbmb.py
+++ b/modules/sample/sbmb.py
@@ -25,7 +25,15 @@ class main:
                 active_page = active_page
             ),
             components = {
-                "before" : [],
+                "before" : [
+                    Template(params["mako"]["website"]['fullpic']).render(
+                        title="Hello World",
+                        message="Welcome to CostaPy",
+                        image="https://picsum.photos/1600/900",
+                        height="calc(100vh - 56px)", # navbar height = 56px
+                        navbar=True
+                    )
+                ],
                 "after" : []
             },
             footer    = Template(params["mako"]["website"]['footer']).render(
diff --git a/templates/SBModernBiz/html/components/fullpic.html b/templates/SBModernBiz/html/components/fullpic.html
index b43f6e5..f235478 100644
--- a/templates/SBModernBiz/html/components/fullpic.html
+++ b/templates/SBModernBiz/html/components/fullpic.html
@@ -1,6 +1,6 @@
-<header class="py-5 bg-image-full" style="background-image: url('https://source.unsplash.com/wfh8dDlNFOk/1600x900')">
-  <div class="text-center my-5">
-    <h1 class="text-white fs-3 fw-bolder">Full Width Pics</h1>
-    <p class="text-white-50 mb-0">Landing Page Template</p>
+<header class="py-5 d-flex align-items-center justify-content-center" style="background-image: url('${image}'); height:${height}; margin-top:${'56px' if navbar else '0'}; ">
+  <div class="text-center">
+    <h1 class="text-white h1 fw-bolder">${title}</h1>
+    <p class="text-white-50 mb-0">${message}</p>
   </div>
 </header>