ok

content/header/_index.md

@@ -7,6 +7,7 @@ extra:
   logoPath: "./images/zdfz.svg"
   imgPath: ""
 ---
+- [About]("#about")
 - [Features]("#features")
 - [Benefits]("#benefits")
 - [Services]("#services")

templates/partials/about.html

@@ -1,4 +1,4 @@
-<div class="relative isolate overflow-hidden bg-white lg:py-24 py-16">
+<div id="features" class="relative isolate overflow-hidden bg-white lg:py-24 py-16">
   <div class="mx-auto max-w-7xl px-6 bg-white">
     <div class="mx-auto max-w-2xl lg:mx-0">
       <h2 class="text-base font-semibold leading-8 text-blue-600">FEATURES</h2>

templates/partials/about1.html

@@ -1,4 +1,4 @@
-<div class="relative isolate overflow-hidden py-12 bg-blue-100 mx-auto">
+<div id="about" class="relative isolate overflow-hidden py-12 bg-blue-100 mx-auto">
   <div class="flex flex-col justify-center items-center max-w-2xl mx-auto py-16 px-4 lg:px-0 text-center h-full">
     <div class="text-center">
          <h1 class="mt-4 text-3xl lg:text-4xl font-bold leading-8 tracking-tight text-black mb-4">🏛️ About ZDFZ</h1>

templates/partials/benefits.html

@@ -1,5 +1,5 @@
 <!-- Hero Section -->
-<div class="relative bg-white">
+<div id="services" class="relative bg-white" style="scroll-margin-top: 5rem; scroll-behavior: smooth;">
   <div class="mx-auto max-w-7xl px-4 grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-8 items-start py-12">
     <!-- Left Column (Image Section) -->
     <div class="relative overflow-hidden lg:h-full">

templates/partials/faq.html

@@ -1,5 +1,5 @@
 
-<div class="bg-blue-50">
+<div id="faq" class="bg-blue-50" style="scroll-margin-top: 5rem; scroll-behavior: smooth;">
     <div class="mx-auto max-w-7xl px-6 py-12 lg:py-24  lg:px-8">
         <h2 class="text-3xl font-semibold tracking-tight text-gray-900 lg:text-4xl">🔎 Frequently Asked Questions</h2>
 

templates/partials/feature.html

@@ -1,4 +1,4 @@
-<div class="bg-white pb-24 pt-12 relative">
+<div id="benefits" class="bg-white pb-24 pt-12 relative" style="scroll-margin-top: 5rem; scroll-padding-top: 2rem;">
   <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
       <div class="text-center">
         <h2 class="text-base font-semibold leading-7 text-blue-600">BENEFITS</h2>
@@ -53,4 +53,3 @@
       </div>
     </div>
 </div>
-  

templates/partials/footer.html

@@ -3,7 +3,7 @@
 
 <div class="border-t border-gray-200"></div>
 <footer>
-  <div class="max-w-screen-2xl mx-auto lg:py-4 py-4 sm:px-6 lg:px-8">
+  <div class="max-w-screen-2xl mx-auto lg:py-5 py-2 sm:px-6 lg:px-8">
     <div class="flex flex-col xl:flex-row xl:gap-4 items-center">
       <div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 mb-4 xl:col-span-1 text-center xl:text-left">
         <a href="/">

templates/partials/header_custom.html

@@ -9,11 +9,40 @@
 <header id="header-container">
     <div class="z-10 bg-white fixed w-screen">
         <div class="relative z-50 shadow">
-        <div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-5 sm:px-8 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
+        <div class="mx-auto grid grid-cols-3 items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-5 sm:px-8 md:px-12 py-2 lg:px-20">
             <div>
                 <a href="/" class="flex">
                     <img class="w-48 h-auto sm:w-15" src="{{section.extra.logoPath}}" alt="ODFZ Logo" />
                 </a>
+            </div>
+            <div class="hidden lg:flex lg:items-center lg:justify-center lg:space-x-12">
+            <nav class="flex space-x-10">
+
+{% for header_item in header_items %}
+{% if not loop.first %}
+    {% set header_arr = header_item | split(pat="</li>") %}
+    {% set header_label = header_arr[0] %}
+    {% if '<a' in header_label %}
+        {% set link_label = header_label | striptags %}
+        {% set link_path = header_label | split(pat="%22") | safe%}
+        <a href="{{link_path[1]}}" class="text-base leading-5 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+            {{link_label}}
+        </a>
+    {% else %}
+        <div class="relative">
+            {% set button_id = header_label ~ "-menu-btn" | slugify %}
+        <button  id="{{button_id}}" class="nav_btn font-medium text-gray-900 group inline-flex items-center space-x-2 text-base leading-5 hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
+            <span>{{ header_label }}</span>
+            <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
+        </button>
+        </div>
+
+    {% endif %}  
+{% endif %}
+{% endfor %}
+</nav>
+
+
             </div>
             <div class="-mr-2 -my-2 lg:hidden">
                 <button id="hamburger-btn" class="menu-mobile inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
@@ -29,36 +58,6 @@
                 </svg>
                 </button>
             </div>
-            <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
-            <nav class="flex space-x-10">
-
-{% for header_item in header_items %}
-{% if not loop.first %}
-    {% set header_arr = header_item | split(pat="</li>") %}
-    {% set header_label = header_arr[0] %}
-    {% if '<a' in header_label %}
-        {% set link_label = header_label | striptags %}
-        {% set link_path = header_label | split(pat="%22") | safe%}
-        <a href="{{link_path[1]}}" class="text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
-            {{link_label}}
-        </a>
-    {% else %}
-        <div class="relative">
-            {% set button_id = header_label ~ "-menu-btn" | slugify %}
-        <button  id="{{button_id}}" class="nav_btn font-medium text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
-            <span>{{ header_label }}</span>
-            <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
-        </button>
-        </div>
-
-    {% endif %}  
-{% endif %}
-{% endfor %}
-</nav>
-
-
-            </div>
-        </div>
         </div>
 {% for header_item in header_items %}
 {% if not loop.first %}
@@ -103,12 +102,12 @@
                             {% if '<a' in header_label %}
                                 {% set link_label = header_label | striptags %}
                                 {% set link_path = header_label | split(pat="%22") | safe%}
-                                <a href="{{link_path[1]}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                <a href="{{link_path[1]}}" class="text-base px-8 py-3 leading-5 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
                                     {{link_label}}
                                 </a>
                             {% else %}
                                 {% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
-                                    <button type="button" id="{{button_id}}" class="menu-mobile my-0 px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                    <button type="button" id="{{button_id}}" class="menu-mobile my-0 px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-base leading-5 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
                                         <span>{{ header_label }}</span>
                                         <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
                                     </button>
@@ -140,4 +139,4 @@
     </div>
 
 
-</header>
+</header>

templates/partials/hero.html

@@ -1,5 +1,5 @@
 <div class="relative isolate overflow-hidden h-screen bg-white">
-  <div class="flex flex-col justify-center items-center mx-auto max-w-2xl py-32 lg:py-48 text-center h-full">
+  <div class="flex flex-col justify-center items-center mx-auto max-w-2xl py-32 text-center h-full">
     <div class="text-center">
       <img src="./images/logo.svg"
      alt="Hero Image"
@@ -11,7 +11,7 @@
         <div class="max-w-4xl">
          <h1 class="mt-4 text-3xl lg:text-5xl font-bold leading-8 tracking-tight text-black mb-4">Zanzibar Digital Free Zone</h1>
         </div>
-      <p class="mt-6 text-lg sm:text-xl leading-7 sm:leading-8 text-gray-600 font-light mx-4 sm:mx-0">ZDFZ Zanzibar Digital Free Zone is a collaboration between the Government of Zanzibar and OurWorld Venture Creator. We are the world's first 100% digital free zone, accessible and affordable for all. Removing complexity from doing business.</p>
+      <p class="mt-6 text-lg sm:text-xl leading-7 sm:leading-8 text-gray-600 font-light mx-4 sm:mx-0">Zanzibar Digital Free Zone is a collaboration between the Government of Zanzibar and OurWorld Venture Creator. We are the world's first 100% digital free zone, accessible and affordable for all. Removing complexity from doing business.</p>
       <div class="mt-10 flex items-center justify-center gap-x-6">
         <a href="/about" class="rounded-xl bg-blue-700 px-4 py-2.5 font-semibold text-white shadow-sm hover:bg-blue-800 hover:text-blue-200 transition-colors duration-300">
             Get Started

templates/partials/presale.html

@@ -1,5 +1,5 @@
 <!-- Hero Section -->
-<div class="relative bg-white">
+<div id="contact" class="relative bg-white">
     <div class="mx-auto max-w-7xl px-4 grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-8 items-start pt-24 mt-12 pb-12">
           <!-- Right Column (Text Section) -->
           <div class="relative sm:py-24 lg:py-12 lg:px-8 px-4">