Fullwidth picture component with 100% Viewport Height option on the sample

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(

templates/SBModernBiz/html/components/fullpic.html

@@ -0,0 +1,6 @@
+<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>

templates/SBModernBiz/main.py

@@ -15,6 +15,7 @@ def main(dir, page):
         "index"		: html_template		[ "index.html"		],
         "navbar"	: html_template		[ "navbar.html"		],
         "footer"	: html_template		[ "footer.html"		],
+        "fullpic"	: html_components	[ "fullpic.html"	],
         "header"	: html_components	[ "header.html"		],
         "features"	: html_components	[ "features.html"	],
         "testimonial"	: html_components	[ "testimonial.html"	],