update team page

.gitignore

@@ -3,13 +3,9 @@
 .DS_Store
 src/.temp
 node_modules
-
 yarn.lock
-
 package-lock.json
 dist
 .temp
-
-public
-static/css
+public/
 tailwindcss

config.toml

@@ -2,7 +2,7 @@
 base_url = "http://template.com"
 
 # Site title and description
-title = "Zola with Tailwind CSS"
+title = "THREEFOLD"
 description = "A modern static site built with Zola and Tailwind CSS"
 
 # Whether to automatically compile all Sass files in the sass directory

content/_index.md

@@ -5,12 +5,67 @@ template = "index.html"
 +++
 
 {{ hero3(
+    announcement='<a href="#" class="font-semibold text-gray-300 hover:text-white">Read more &rarr;</a>',
     subheader="SUBHEADER",
-    title="This is Hero3.html",
+    title="This is Hero1.htmll",
     subtitle="This is smaller title h2",
     description="Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.",
     button1_text="Get started",
     button1_link="#",
     button2_text="Learn more",
     button2_link="#"
-) }}
+) }}
+
+{{ 
+    hero2(
+        title="Welcome to Your Zola Site",
+        subtitle="A modern, responsive website built with Zola and styled with Tailwind CSS", 
+        button_text="Learn More", 
+        button_link="/blog", bg_color="bg-blue-700"
+) }}
+
+
+
+## About This Site
+
+This is a modern, responsive website built with [Zola](https://www.getzola.org/) and styled with [Tailwind CSS](https://tailwindcss.com/). It demonstrates the use of shortcodes and markdown together to create beautiful, reusable components.
+
+
+
+
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-12">
+{{ 
+    feature_card(
+        title="Fast and Lightweight", 
+        description="Zola generates static HTML files that load quickly", 
+        icon="⚡"
+        ) 
+}}
+
+{{ feature_card(title="Modern Design", description="Tailwind CSS provides utility classes for rapid UI development", icon="🎨") }}
+
+{{ feature_card(title="Responsive Layout", description="Looks great on all devices, from mobile to desktop", icon="📱") }}
+
+{{ feature_card(title="Markdown Content", description="Write your content in Markdown for easy formatting", icon="📝") }}
+
+{{ feature_card(title="Syntax Highlighting", description="Code blocks are automatically highlighted", icon="💻") }}
+
+{{ feature_card(title="Search Functionality", description="Built-in search for your content", icon="🔍") }}
+
+</div>
+
+### Getting Started
+
+To add new content, create Markdown files in the `content` directory. Zola will automatically generate pages for each file.
+
+For more information, check out the [Zola documentation](https://www.getzola.org/documentation/getting-started/overview/) and [Tailwind CSS documentation](https://tailwindcss.com/docs).
+
+{{ 
+    cta(
+        title="Ready to Get Started?", 
+        description="Create your own beautiful website with Zola and Tailwind CSS today.", 
+        button_text="View Blog", 
+        button_link="/blog") 
+}}
+
+

content/blog/first-post.md

@@ -1,59 +1,31 @@
 +++
-title = "Getting Started with Zola and Tailwind CSS"
-date = 2025-03-18
-description = "Learn how to set up a static site using Zola and Tailwind CSS"
+title = "Reflecting on Africa Regenerative Futures Summits"
+date = 2023-11-21
+description = "Reflecting on Africa Regenerative Futures Summits : Shaping a better digital future in Africa"
+[extra]
+image = "/images/blog/africa_future_summit1.png"
 +++
 
-# Getting Started with Zola and Tailwind CSS
+In 2023, we had the pleasure of hosting two summits in Zanzibar – one in July and another in [November](https://www.threefold.io/newsroom/africa-regen-ii/), named the Africa Regenerative Future Summit. These events brought together leading innovators and investors committed to advancing human flourishing, with a specific emphasis on science and technology shaping the trajectory of Africa's future.
 
-Zola is a fast static site generator written in Rust, and Tailwind CSS is a utility-first CSS framework. Together, they make a powerful combination for building modern websites.
+<br>
 
-## Why Zola?
+During the inaugural summit in July, Zanzibar's President, Dr. Hussein Mwinyi, honored us with his presence. In a formal declaration, he publicly expressed the government's dedication to establishing a digital free zone, a locally-owned Internet infrastructure, and an incubator to support young local innovators – all in collaboration with ThreeFold – and their commitment to the ICT sector as a whole.
 
-Zola offers several advantages:
+<br>
 
-- **Speed**: Built in Rust, Zola is incredibly fast
-- **Simplicity**: Everything is included out of the box
-- **Flexibility**: Customize your site with Tera templates
-- **Live Reload**: See changes instantly during development
+The second summit saw the birth of Dunia Yetu (meaning "Our World" in Swahili), a collaborative movement forged in partnership with a cohort of tech developers and innovators from Dar Es Salaam. This initiative is driven by a shared commitment to reshape the digital landscape in Tanzania and Africa. Its goals include empowering coders, fostering economic development, and constructing a sovereign, autonomous digital ecosystem for a more promising digital future. 
 
-## Why Tailwind CSS?
+<br>
 
-Tailwind CSS provides:
+Looking ahead to 2024, our vision includes a continued series of gatherings focused on OurWorld, ThreeFold, and other projects and individuals prioritizing a planet-first, people-first approach to support Tanzania and the broader African continent.
 
-- **Utility-First**: Build custom designs without leaving your HTML
-- **Responsive**: Easily create responsive designs with responsive utility variants
-- **Component-Friendly**: Extract reusable components with @apply
-- **Customizable**: Tailor the framework to your design needs
+<br>
 
-## Code Example
+More information: 
 
-Here's a simple example of a Zola template using Tailwind CSS:
+<br>
 
-```html
-<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
-  <div class="md:flex">
-    <div class="md:flex-shrink-0">
-      <img class="h-48 w-full object-cover md:w-48" src="/img/example.jpg" alt="Example image">
-    </div>
-    <div class="p-8">
-      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
-      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding the perfect balance</a>
-      <p class="mt-2 text-gray-500">Getting the right mix of technology for your project can be challenging.</p>
-    </div>
-  </div>
-</div>
-```
-
-## Getting Started
-
-To create your own Zola site with Tailwind CSS:
-
-1. Install Zola and Node.js
-2. Create a new Zola site: `zola init my-site`
-3. Set up Tailwind CSS: `npm init -y && npm install -D tailwindcss postcss autoprefixer`
-4. Initialize Tailwind: `npx tailwindcss init -p`
-5. Configure your templates and styles
-6. Build and deploy your site
-
-Happy coding!
+- **Summit I:** Read [Zanzibar Seeks to Become a Digital FreeZone](https://www.thecitizen.co.tz/tanzania/zanzibar/zanzibar-seeks-to-become-digital-freezone--4316150) (via The Citizen) and [Mwinyi Commits to Improvement of Digital Spaces](https://dailynews.co.tz/mwinyi-commits-to-improvement-of-digital-spaces/) (via Daily News Tanzania) for further details.
+- **Summit II:** Learn more about [Dunia Yetu](https://www.threefold.io/newsroom/duniayetulaunchdar/) 
+- **Dunia Yetu:** Read [Sovereign Internet - A game changer for Tanzania](https://www.thecitizen.co.tz/tanzania/news/national/sovereign-internet-a-game-changer-to-tanzania-startups-ecosystem-growth-449806) (via The Citizen)

content/blog/second-post.md

@@ -1,118 +1,26 @@
 +++
-title = "Customizing Your Tailwind CSS Theme"
+title = "Empowering Tanzania's Digital Future: The Dunia Yetu Initiative"
 date = 2025-03-17
-description = "Learn how to customize Tailwind CSS to match your brand"
+description = "Dunia Yetu (Our World) is a collaborative and co-owned movement to redefine the digital landscape in Tanzania and East Africa, empower coders spur economic development, and build a self-reliant autonomous digital ecosystem for a better digital future."
+[extra]
+image = "/images/blog/dunia_yetu1.png"
 +++
 
-# Customizing Your Tailwind CSS Theme
+## Vision of Collective Empowerment 
 
-One of the greatest strengths of Tailwind CSS is its customizability. In this post, we'll explore how to tailor Tailwind to match your brand's design system.
+In the heart of Tanzania, a transformative movement is underway, known as Dunia Yetu, Swahili for "Our World.". More than just a name; it embodies a vision of collective empowerment and digital self-reliance. Dunia Yetu is a beacon of unity, encouraging Tanzanians to take control of their digital destiny. It seeks to redefine the nation's digital landscape, fostering a future where citizens are not just users but architects of their online world.
 
-## The tailwind.config.js File
+<br>
 
-The `tailwind.config.js` file is where all your customizations live. Here's a basic example of customizing colors and fonts:
+## Empowering Tanzania's Youth and Future
 
-```js
-module.exports = {
-  theme: {
-    colors: {
-      primary: '#3490dc',
-      secondary: '#ffed4a',
-      danger: '#e3342f',
-      // ...
-    },
-    fontFamily: {
-      sans: ['Graphik', 'sans-serif'],
-      serif: ['Merriweather', 'serif'],
-    },
-    extend: {
-      spacing: {
-        '128': '32rem',
-        '144': '36rem',
-      },
-      borderRadius: {
-        '4xl': '2rem',
-      }
-    }
-  },
-  variants: {
-    extend: {
-      borderColor: ['focus-visible'],
-      opacity: ['disabled'],
-    }
-  }
-}
-```
+At its core, Dunia Yetu is about empowering Tanzanians to reclaim ownership of their digital infrastructure. It envisions a future where the benefits of the Internet are harnessed by the people, for the people. For millions of Tanzanians, Dunia Yetu could represent more than just connectivity; it's a gateway to education, opportunity, and economic empowerment. By democratizing access to the Internet, Dunia Yetu will open doors for entrepreneurship, innovation, and collaboration, especially for the youth. 
+With this project, Tanzania's youth are empowered to shape their digital future, harnessing technology to overcome challenges and seize opportunities. It's not just about connectivity; it's about unlocking the full potential of Tanzania's next generation. 
 
-## Extending vs. Overriding
+<br>
 
-When customizing Tailwind, you have two options:
+## Looking Ahead to 2024:
 
-1. **Extending** - Add new values while keeping the defaults
-2. **Overriding** - Replace the defaults entirely
+As Dunia Yetu gains momentum, stay tuned for exciting updates and milestones. In 2024, this transformative project will see the light, ushering in a new era of digital empowerment for Tanzania. 
 
-For most projects, extending is the safer option as it preserves Tailwind's useful defaults.
-
-## Custom Plugins
-
-You can also create custom plugins to add more complex functionality:
-
-```js
-// tailwind.config.js
-const plugin = require('tailwindcss/plugin')
-
-module.exports = {
-  plugins: [
-    plugin(function({ addUtilities, theme }) {
-      const newUtilities = {
-        '.text-shadow-sm': {
-          textShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
-        },
-        '.text-shadow': {
-          textShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
-        },
-        '.text-shadow-lg': {
-          textShadow: '0 15px 30px rgba(0, 0, 0, 0.11), 0 5px 15px rgba(0, 0, 0, 0.08)',
-        },
-      }
-      
-      addUtilities(newUtilities)
-    })
-  ]
-}
-```
-
-## Responsive Design
-
-Tailwind makes it easy to create responsive designs with breakpoint prefixes:
-
-```html
-<div class="text-center sm:text-left md:text-right lg:text-justify">
-  This text will be centered on mobile, left-aligned on small screens,
-  right-aligned on medium screens, and justified on large screens.
-</div>
-```
-
-## Dark Mode
-
-Tailwind v2.0 and later includes built-in dark mode support:
-
-```js
-// tailwind.config.js
-module.exports = {
-  darkMode: 'media', // or 'class'
-  // ...
-}
-```
-
-Then in your HTML:
-
-```html
-<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
-  This will be light mode by default and dark mode when the user's
-  system preferences are set to dark mode (or when the 'dark' class
-  is applied to an ancestor if you're using 'class' mode).
-</div>
-```
-
-By customizing Tailwind CSS, you can create a unique design system that perfectly matches your brand while still leveraging the productivity benefits of a utility-first CSS framework.
+**Together, through Dunia Yetu, Tanzanians are building a brighter, more inclusive future—one where the digital world truly belongs to us all.**

content/team/_index.md

@@ -0,0 +1,8 @@
++++
+title = "Team"
+sort_by = "weight"
+template = "section.html"
+page_template = "page.html"
++++
+
+Welcome to our team section. Meet the people behind our organization.

content/team/adnan_fatayerji.md

@@ -0,0 +1,9 @@
++++
+title = "Adnan Fatayerj"
+description = "Co-Founder"
+weight = 2
+[extra]
+image = "/images/team/adnan_fatayerji.jpg"
++++
+
+Honored to be part of a team that has the potential to make the world a better place by connecting billions of people to a new, accessible, data sovereign and environmentally conscious internet. A social entrepreneur, plant based warrior and a sovereign digital economy advocate with a passion for music creation and collaboration. Adnan has been based in the United Arab Emirates for the past 20 years, during which he has built successful grass-root businesses and invested startups in various sectors. At ThreeFold Adnan is responsible for driving the ThreeFold Foundation Ecosystem. Adnan is also the CEO of the @Mazraa Cooperative which is a founding farm and P2P Cloud Capacity provider on the ThreeFold Network.

content/team/jan_de_landtsheer.md

@@ -0,0 +1,9 @@
++++
+title = "Jan De Landtsheer"
+description = "Co-Founder & CTO"
+weight = 3
+[extra]
+image = "/images/team/jan_de_landtsheer.jpeg"
++++
+
+Wandering the Net since it's inception (www wasn't even a thing back then... and yes, I'm that old), I have experienced the (r)evolution of the Internet in steps going backward in terms of accessibility, bias and width. It seems to me, by the effect of personalized search, directed ads, filtered and hidden information, that the Internet has become so much smaller, narrowing and enforcing biased views. That needs to be addressed. The Net needs to become that vast resource of unbiased knowledge, so that people can start thinking for themselves again. That's why I'm here, to be part of a group of guardians who's purpose is to equalize all views so that people can really understand viewpoints instead of being just judgemental. Techie at heart, having lived professionally in the tech basements of the Internet, I can help and I will help. Education for all is the only path to a better world. Count me in.

content/team/kristof_de_spiegeleer.md

@@ -0,0 +1,9 @@
++++
+title = "Kristof de Spiegeleer"
+description = "Co-Founder & CEO"
+weight = 1
+[extra]
+image = "/images/team/kristof_de_spiegeleer.jpeg"
++++
+
+Humanist & motivated entrepreneur, passionate to help make the world a better place. Kristof strongly believes there is need for a neutral internet owned by millions. We dream about a world where everyone can be happy, with respect for each other and the world’s resources. A world where we dare to love ourselves and we don’t have to be scared about our future. A world where we don’t need to be a product and we have learned to collaborate with openness and trust. <BR> More info on <a href="https://library.threefold.me/info/threefold#/kristof">library.threefold.me</a>

content/why.md

@@ -0,0 +1,109 @@
++++
+title = "Why Choose Us"
+template = "index.html"
+date = 2025-03-22
++++
+
+{{ hero(
+    title="Why Choose Our Solution",
+    subtitle="Discover the benefits and advantages that set us apart",
+    button_text="Get Started",
+    button_link="/blog",
+    bg_color="bg-gradient-to-r from-purple-600 to-indigo-600"
+) }}
+
+## Our Advantages
+
+We believe in creating solutions that not only meet your needs but exceed your expectations. Here's why our approach stands out from the rest.
+
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-12">
+{{ 
+    feature_card(
+        title="Innovative Technology", 
+        description="We leverage cutting-edge technologies to deliver modern, efficient solutions", 
+        icon="💡"
+    ) 
+}}
+
+{{ 
+    feature_card(
+        title="User-Centered Design", 
+        description="Our products are designed with the user experience as the top priority", 
+        icon="👤"
+    ) 
+}}
+
+{{ 
+    feature_card(
+        title="Scalable Architecture", 
+        description="Built to grow with your needs, from startup to enterprise", 
+        icon="📈"
+    ) 
+}}
+
+{{ 
+    feature_card(
+        title="Reliable Support", 
+        description="Our dedicated team is always ready to help you succeed", 
+        icon="🛠️"
+    ) 
+}}
+
+{{ 
+    feature_card(
+        title="Continuous Improvement", 
+        description="We constantly refine our solutions based on feedback and new technologies", 
+        icon="🔄"
+    ) 
+}}
+
+{{ 
+    feature_card(
+        title="Cost Effective", 
+        description="Maximum value without compromising on quality or features", 
+        icon="💰"
+    ) 
+}}
+</div>
+
+## Our Approach
+
+We follow a systematic approach to ensure that every solution we deliver meets the highest standards of quality and performance.
+
+1. **Discovery** - We start by understanding your unique challenges and goals
+2. **Planning** - Develop a comprehensive strategy tailored to your specific needs
+3. **Implementation** - Execute the plan with precision and attention to detail
+4. **Testing** - Rigorous quality assurance to ensure everything works perfectly
+5. **Deployment** - Smooth transition to production with minimal disruption
+6. **Support** - Ongoing assistance to ensure long-term success
+
+{{ 
+    cta(
+        title="Ready to Experience the Difference?", 
+        description="Join the many satisfied clients who have transformed their operations with our solutions.", 
+        button_text="Contact Us", 
+        button_link="#",
+        bg_color="bg-indigo-100",
+        text_color="text-indigo-800"
+    ) 
+}}
+
+## Testimonials
+
+> "Implementing this solution has revolutionized how we operate. The efficiency gains alone have paid for the investment multiple times over."
+> 
+> **— Sarah Johnson, CEO at TechInnovate**
+
+> "The team's attention to detail and commitment to our success made all the difference. I can't recommend them highly enough."
+> 
+> **— Michael Chen, CTO at DataFlow Systems**
+
+{{ 
+    hero2(
+        title="See Our Solution in Action",
+        subtitle="Schedule a personalized demo to discover how we can address your specific challenges", 
+        button_text="Request Demo", 
+        button_link="#", 
+        bg_color="bg-blue-700"
+    ) 
+}}

package.json

@@ -5,9 +5,11 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build:css": "tailwindcss build ./sass/main.scss -o ./static/css/main.css",
-    "watch:css": "tailwindcss build ./sass/main.scss -o ./static/css/output.css --watch",
-    "build": "npm run build:css && zola build",
-    "dev": "concurrently \"npm run watch:css\" \"zola serve\""
+    "build:output": "tailwindcss build ./sass/main.scss -o ./static/css/output.css",
+    "watch:css": "tailwindcss build ./sass/main.scss -o ./static/css/main.css --watch",
+    "watch:output": "tailwindcss build ./sass/main.scss -o ./static/css/output.css --watch",
+    "build": "npm run build:css && npm run build:output && zola build",
+    "dev": "concurrently \"npm run watch:css\" \"npm run watch:output\" \"zola serve\""
   },
   "keywords": [],
   "author": "",

public/js/main.js

@@ -1,5 +1,7 @@
 // Mobile menu toggle
 document.addEventListener('DOMContentLoaded', function() {
+  console.log("DOM loaded - initializing dark mode");
+  
   const menuButton = document.querySelector('[aria-controls="mobile-menu"]');
   const mobileMenu = document.getElementById('mobile-menu');
   const menuIcons = menuButton.querySelectorAll('svg');
@@ -20,4 +22,77 @@ document.addEventListener('DOMContentLoaded', function() {
       });
     });
   }
+
+  // Theme toggle functionality
+  const themeToggleBtn = document.getElementById('theme-toggle');
+  const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+  const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+  const mobileThemeToggleBtn = document.getElementById('mobile-theme-toggle');
+
+  // Check if dark mode is already enabled
+  const isDarkMode = localStorage.getItem('color-theme') === 'dark' || 
+    (!localStorage.getItem('color-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
+  
+  console.log("Initial dark mode state:", isDarkMode);
+
+  // Set initial theme
+  if (isDarkMode) {
+    document.documentElement.classList.add('dark');
+    if (themeToggleLightIcon && themeToggleDarkIcon) {
+      themeToggleLightIcon.classList.remove('hidden');
+      themeToggleDarkIcon.classList.add('hidden');
+    }
+  } else {
+    document.documentElement.classList.remove('dark');
+    if (themeToggleLightIcon && themeToggleDarkIcon) {
+      themeToggleLightIcon.classList.add('hidden');
+      themeToggleDarkIcon.classList.remove('hidden');
+    }
+  }
+
+  // Toggle theme function
+  function toggleTheme() {
+    console.log("Toggle theme clicked");
+    
+    // Add transition class
+    document.documentElement.classList.add('transition');
+    
+    // Toggle theme
+    const isDark = document.documentElement.classList.contains('dark');
+    console.log("Current dark mode:", isDark);
+    
+    if (isDark) {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('color-theme', 'light');
+      if (themeToggleLightIcon && themeToggleDarkIcon) {
+        themeToggleLightIcon.classList.add('hidden');
+        themeToggleDarkIcon.classList.remove('hidden');
+      }
+      console.log("Switched to light mode");
+    } else {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('color-theme', 'dark');
+      if (themeToggleLightIcon && themeToggleDarkIcon) {
+        themeToggleLightIcon.classList.remove('hidden');
+        themeToggleDarkIcon.classList.add('hidden');
+      }
+      console.log("Switched to dark mode");
+    }
+    
+    // Remove transition class after transition completes
+    setTimeout(() => {
+      document.documentElement.classList.remove('transition');
+    }, 300);
+  }
+
+  // Add event listeners to toggle buttons
+  if (themeToggleBtn) {
+    console.log("Adding event listener to theme toggle button");
+    themeToggleBtn.addEventListener('click', toggleTheme);
+  }
+  
+  if (mobileThemeToggleBtn) {
+    console.log("Adding event listener to mobile theme toggle button");
+    mobileThemeToggleBtn.addEventListener('click', toggleTheme);
+  }
 });

public/main.css

@@ -1 +1 @@
-@tailwind base;@tailwind components;@tailwind utilities;
+@tailwind base;@tailwind components;@tailwind utilities

static/css/dark-mode.css

@@ -0,0 +1,52 @@
+/* Dark mode styles */
+.dark .prose {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.dark .prose h1,
+.dark .prose h2,
+.dark .prose h3,
+.dark .prose h4,
+.dark .prose h5,
+.dark .prose h6 {
+  color: white;
+}
+
+.dark .prose a {
+  color: #3b82f6;
+}
+
+.dark .prose strong {
+  color: white;
+}
+
+.dark .prose code {
+  color: white;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.dark .prose blockquote {
+  color: rgba(255, 255, 255, 0.8);
+  border-left-color: rgba(255, 255, 255, 0.2);
+}
+
+.dark .prose hr {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.dark .prose table th {
+  color: white;
+}
+
+.dark .prose table td {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* Transition effects for theme switching */
+html.transition,
+html.transition *,
+html.transition *:before,
+html.transition *:after {
+  transition: all 0.3s ease-in-out !important;
+  transition-delay: 0 !important;
+}

static/css/dropdown.css

@@ -0,0 +1,43 @@
+/* Dropdown menu styles */
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+  border-radius: 0.375rem;
+}
+
+.dropdown-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+.dropdown-content a:hover {
+  background-color: #f1f1f1;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+/* Dark mode styles */
+html.dark .dropdown-content {
+  background-color: #374151;
+}
+
+html.dark .dropdown-content a {
+  color: #f9fafb;
+}
+
+html.dark .dropdown-content a:hover {
+  background-color: #4b5563;
+}

static/css/output.css

@@ -0,0 +1,57 @@
+/* Tailwind CSS output file */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom styles */
+.container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+/* Transition effects */
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+/* Additional utility classes */
+.text-shadow {
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.hover-grow {
+  transition: transform 0.3s ease;
+}
+
+.hover-grow:hover {
+  transform: scale(1.05);
+}

static/js/main.js

@@ -1,5 +1,7 @@
 // Mobile menu toggle
 document.addEventListener('DOMContentLoaded', function() {
+  console.log("DOM loaded - initializing dark mode");
+  
   const menuButton = document.querySelector('[aria-controls="mobile-menu"]');
   const mobileMenu = document.getElementById('mobile-menu');
   const menuIcons = menuButton.querySelectorAll('svg');
@@ -20,4 +22,118 @@ document.addEventListener('DOMContentLoaded', function() {
       });
     });
   }
+  
+  // Desktop dropdown menu
+  const whyMenuButton = document.getElementById('why-menu-button');
+  const desktopWhyMenu = document.getElementById('desktop-why-menu');
+  
+  if (whyMenuButton && desktopWhyMenu) {
+    // Toggle on click
+    whyMenuButton.addEventListener('click', function() {
+      desktopWhyMenu.classList.toggle('hidden');
+    });
+    
+    // Close when clicking outside
+    document.addEventListener('click', function(event) {
+      if (!whyMenuButton.contains(event.target) && !desktopWhyMenu.contains(event.target)) {
+        desktopWhyMenu.classList.add('hidden');
+      }
+    });
+    
+    // Show on hover
+    whyMenuButton.addEventListener('mouseenter', function() {
+      desktopWhyMenu.classList.remove('hidden');
+    });
+    
+    // Container for both button and menu for hover functionality
+    const dropdownContainer = whyMenuButton.parentElement;
+    
+    // Hide on mouse leave from container
+    dropdownContainer.addEventListener('mouseleave', function() {
+      desktopWhyMenu.classList.add('hidden');
+    });
+  }
+  
+  // Mobile dropdown menu
+  const mobileWhyMenuButton = document.querySelector('[x-data="{ open: false }"] button');
+  const mobileWhyMenu = document.getElementById('mobile-why-menu');
+  
+  if (mobileWhyMenuButton && mobileWhyMenu) {
+    mobileWhyMenuButton.addEventListener('click', function() {
+      mobileWhyMenu.classList.toggle('hidden');
+    });
+  }
+
+  // Theme toggle functionality
+  const themeToggleBtn = document.getElementById('theme-toggle');
+  const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+  const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+  const mobileThemeToggleBtn = document.getElementById('mobile-theme-toggle');
+
+  // Check if dark mode is already enabled
+  const isDarkMode = localStorage.getItem('color-theme') === 'dark' || 
+    (!localStorage.getItem('color-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
+  
+  console.log("Initial dark mode state:", isDarkMode);
+
+  // Set initial theme
+  if (isDarkMode) {
+    document.documentElement.classList.add('dark');
+    if (themeToggleLightIcon && themeToggleDarkIcon) {
+      themeToggleLightIcon.classList.remove('hidden');
+      themeToggleDarkIcon.classList.add('hidden');
+    }
+  } else {
+    document.documentElement.classList.remove('dark');
+    if (themeToggleLightIcon && themeToggleDarkIcon) {
+      themeToggleLightIcon.classList.add('hidden');
+      themeToggleDarkIcon.classList.remove('hidden');
+    }
+  }
+
+  // Toggle theme function
+  function toggleTheme() {
+    console.log("Toggle theme clicked");
+    
+    // Add transition class
+    document.documentElement.classList.add('transition');
+    
+    // Toggle theme
+    const isDark = document.documentElement.classList.contains('dark');
+    console.log("Current dark mode:", isDark);
+    
+    if (isDark) {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('color-theme', 'light');
+      if (themeToggleLightIcon && themeToggleDarkIcon) {
+        themeToggleLightIcon.classList.add('hidden');
+        themeToggleDarkIcon.classList.remove('hidden');
+      }
+      console.log("Switched to light mode");
+    } else {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('color-theme', 'dark');
+      if (themeToggleLightIcon && themeToggleDarkIcon) {
+        themeToggleLightIcon.classList.remove('hidden');
+        themeToggleDarkIcon.classList.add('hidden');
+      }
+      console.log("Switched to dark mode");
+    }
+    
+    // Remove transition class after transition completes
+    setTimeout(() => {
+      document.documentElement.classList.remove('transition');
+    }, 300);
+  }
+
+  // Add event listeners to toggle buttons
+  if (themeToggleBtn) {
+    console.log("Adding event listener to theme toggle button");
+    themeToggleBtn.addEventListener('click', toggleTheme);
+  }
+  
+  if (mobileThemeToggleBtn) {
+    console.log("Adding event listener to mobile theme toggle button");
+    mobileThemeToggleBtn.addEventListener('click', toggleTheme);
+  }
 });

tailwind.config.js

@@ -8,6 +8,7 @@ module.exports = {
     './content/**/*.md',
     './themes/**/*.html',
   ],
+  darkMode: 'class',
   theme: {
     extend: {},
   },

templates/base.html

@@ -3,24 +3,26 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% block title %}TF Zola Template{% endblock %}</title>
-    <link rel="stylesheet" href="{{ get_url(path='css/output.css') }}">
+    <title>{% block title %}Zola with Tailwind CSS{% endblock %}</title>
+    <link rel="stylesheet" href="{{ get_url(path='css/main.css') }}">
+    <link rel="stylesheet" href="{{ get_url(path='css/dropdown.css') }}">
+
     <script src="{{ get_url(path='js/main.js') }}" defer></script>
     {% block head %}{% endblock %}
 </head>
-<body class="bg-gray-100 min-h-screen flex flex-col" role="banner">
+<body class="bg-gray-100 min-h-screen flex flex-col">
     <header>
         {% include "partials/navigation.html" %}
     </header>
     <main>
-        <div class="w-full flex-grow px-6 lg:px-8">
+        <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
             <div class="px-4 py-6 sm:px-0">
                 {% block content %}{% endblock %}
             </div>
         </div>
     </main>
     <footer class="bg-white shadow mt-auto">
-        <div class="w-full mx-auto py-4 px-4 sm:px-6 lg:px-8">
+        <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
             <p class="text-center text-gray-500">
                 &copy; {{ now() | date(format="%Y") }} {{ config.title }}
             </p>

templates/index.html

@@ -1,13 +1,22 @@
 {% extends "base.html" %}
 
 {% block content %}
- <!-- Content section (where Markdown content from _index.md appears) -->
-<div class="bg-white w-full shadow overflow-hidden">
-    <div class="border-t border-gray-200">
+<div class="overflow-hidden">
+    <!-- <div class="px-4 py-5 sm:px-6 text-center">
+        <h2 class="text-2xl font-bold text-gray-900">
+            Welcome to {{ config.title }}
+        </h2>
+        <p class="mt-1 max-w-2xl mx-auto text-sm text-gray-500">
+            A beautiful site built with Zola and Tailwind CSS.
+        </p>
+    </div> -->
+    <div>
         <div class="px-4 py-5 sm:p-6">
-            <div class="prose prose-indigo lg:prose-xl w-full">
-                {% if section.content %}
+            <div class="">
+                {% if section is defined and section.content is defined %}
                     {{ section.content | safe }}
+                {% elif page is defined and page.content is defined %}
+                    {{ page.content | safe }}
                 {% else %}
                     <p>This is a starter template for your Zola site with Tailwind CSS.</p>
                     <p>Edit the content in <code>content/_index.md</code> to customize this page.</p>
@@ -17,13 +26,12 @@
     </div>
 </div>
 
-<!-- Blog Section / List of Pages -->
-<div class="mt-8 grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+{% if section is defined and section.pages is defined %}
+<!-- <div class="mt-8 grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
     {% for page in section.pages %}
-    <!-- Individual blog post card -->
-        <a href="{{ page.permalink }}" class="bg-white overflow-hidden shadow rounded-lg hover:shadow-xl transition-shadow duration-300">
+        <a href="{{ page.permalink }}" class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition-shadow duration-300">
             <div class="px-4 py-5 sm:p-6">
-                <h3 class="text-lg lg:text-xl font-medium text-gray-900 truncate">{{ page.title }}</h3>
+                <h3 class="text-lg font-medium text-gray-900 truncate">{{ page.title }}</h3>
                 {% if page.description %}
                     <p class="mt-1 text-sm text-gray-500">{{ page.description }}</p>
                 {% endif %}
@@ -33,5 +41,6 @@
             </div>
         </a>
     {% endfor %}
-</div>
+</div> -->
+{% endif %}
 {% endblock %}

templates/partials/navigation.html

@@ -8,7 +8,26 @@
         <div class="hidden md:block">
           <div class="ml-10 flex items-baseline space-x-4">
             <a href="{{ config.base_url }}" class="{% if current_path == '/' %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Home</a>
+            <a href="{{ get_url(path='why') }}" class="{% if current_path is starting_with('/why') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Why</a>
+            
+            <!-- Dropdown menu -->
+            <!-- <div class="dropdown">
+              <button class="{% if current_path is starting_with('/why') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium inline-flex items-center" id="why-menu-button">
+                Why Us
+                <svg class="ml-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                  <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                </svg>
+              </button>
+              <div class="dropdown-content">
+                <a href="{{ get_url(path='why') }}">Overview</a>
+                <a href="#">Our Approach</a>
+                <a href="#">Testimonials</a>
+                <a href="#">Case Studies</a>
+              </div>
+            </div> -->
+            
             <a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Blog</a>
+            <a href="{{ get_url(path='team') }}" class="{% if current_path is starting_with('/team') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Team</a>
           </div>
         </div>
       </div>
@@ -20,6 +39,16 @@
           <a href="https://tailwindcss.com/docs" target="_blank" rel="noopener" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
             Tailwind Docs
           </a>
+          <button id="theme-toggle" type="button" class="text-gray-300 hover:bg-gray-700 hover:text-white p-2 rounded-md ml-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
+            <!-- Sun icon (light mode) -->
+            <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
+            </svg>
+            <!-- Moon icon (dark mode) -->
+            <svg id="theme-toggle-dark-icon" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+            </svg>
+          </button>
         </div>
       </div>
       <div class="-mr-2 flex md:hidden">
@@ -43,9 +72,33 @@
   <div class="md:hidden hidden" id="mobile-menu">
     <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
       <a href="{{ config.base_url }}" class="{% if current_path == '/' %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Home</a>
+      <a href="{{ get_url(path='why') }}" class="{% if current_path is starting_with('/why') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Why</a>
+      
+      <!-- Mobile dropdown menu -->
+      <!-- <div class="relative" x-data="{ open: false }">
+        <button @click="open = !open" class="{% if current_path is starting_with('/why') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} w-full text-left flex justify-between items-center px-3 py-2 rounded-md text-base font-medium">
+          Why Us
+          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+          </svg>
+        </button>
+        <div id="mobile-why-menu" class="hidden pl-4 py-2 space-y-1">
+          <a href="{{ get_url(path='why') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Overview</a>
+          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Our Approach</a>
+          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Testimonials</a>
+          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Case Studies</a>
+        </div>
+      </div> -->
+      
       <a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Blog</a>
+      <a href="{{ get_url(path='team') }}" class="{% if current_path is starting_with('/team') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Team</a>
       <a href="https://github.com/getzola/zola" target="_blank" rel="noopener" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Zola Docs</a>
-      <a href="https://tailwindcss.com/docs" target="_blank" rel="noopener" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Tailwind Docs</a>
+      <button id="mobile-theme-toggle" type="button" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium w-full text-left flex items-center">
+        <span>Toggle Dark Mode</span>
+        <svg id="mobile-theme-toggle-icon" class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+        </svg>
+      </button>
     </div>
   </div>
 </nav>

templates/section.html

@@ -25,16 +25,23 @@
     </div>
 </div>
 
-<div class="mt-8 grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+<div class="container mx-auto mt-8 grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
     {% for page in section.pages %}
         <a href="{{ page.permalink }}" class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition-shadow duration-300">
+            {% if page.extra.image %}
+                <div class="h-64 w-full overflow-hidden">
+                    <img src="{{ page.extra.image }}" alt="{{ page.title }}" class="w-full h-full object-cover">
+                </div>
+            {% endif %}
             <div class="px-4 py-5 sm:p-6">
                 <h3 class="text-lg font-medium text-gray-900 truncate">{{ page.title }}</h3>
                 {% if page.description %}
                     <p class="mt-1 text-sm text-gray-500">{{ page.description }}</p>
                 {% endif %}
                 <div class="mt-4 flex items-center text-sm text-gray-500">
-                    <span>{{ page.date | date(format="%B %e, %Y") }}</span>
+                    {% if page.date %}
+                        <span>{{ page.date | date(format="%B %e, %Y") }}</span>
+                    {% endif %}
                 </div>
             </div>
         </a>

templates/shortcodes/hero2.html

@@ -6,7 +6,7 @@
 {% set text_color = text_color | default(value="text-white") %}
 {% set image = image | default(value="") %}
 
-<div class="relative {{ bg_color }} {{ text_color }} overflow-hidden">
+<div class="relative {{ bg_color }} {{ text_color }} overflow-hidden my-12 lg:my-24">
   <div class="absolute inset-0 z-0 opacity-20 bg-pattern"></div>
   <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 relative z-10">
     <div class="text-center">

templates/shortcodes/hero3.html

@@ -1,29 +1,21 @@
-<div class="flex items-center justify-center w-full bg-white">
-  <div class="relative isolate px-4 px-6 lg:px-8 w-full lg:max-w-7xl mx-auto">
-    <div class="mx-auto w-full py-24 lg:py-32">
-      <!-- Subheader -->
-      <p class="text-base/7 font-light text-center text-gray-500 tracking-wide">
-        {{ subheader }}
-      </p>
-      <!-- Title -->
-      <h1 class="lg:text-6xl text-4xl text-center font-semibold tracking-tight text-balance text-gray-900">
-        {{ title }}
-      </h1>
-       <!-- Subtitle -->
-      <h2 class="text-balance lg:text-5xl text-center text-4xl font-normal tracking-tight text-gray-700 mt-2">
-        {{ subtitle }}
-      </h2>
-      <!-- Description -->
-      <p class="mt-6 lg:text-lg text-sm font-light text-center text-gray-600 max-w-2xl mx-auto">
-        {{ description }}
-      </p>
-       <!-- CTA Buttons -->
-      <div class="mt-8 flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6">
-        <a href="{{ button1_link }}" class="inline-block rounded-lg bg-gray-900 px-5 py-3 text-sm font-semibold text-white shadow-md hover:bg-gray-700 focus-visible:outline focus-visible:ring-2 focus-visible:ring-gray-700 focus-visible:ring-offset-2">
-          {{ button1_text }}
-        </a>
-        <a href="{{ button2_link }}" class="text-sm font-semibold text-gray-900 hover:text-gray-600">{{ button2_text }} <span aria-hidden="true">→</span></a>
+<div class="fade-in flex items-center justify-center ">
+    <div class="relative isolate px-6 pt-14 lg:px-8">
+      <div class="mx-auto max-w-7xl py-12">
+        <div class="hidden sm:mb-8 sm:flex sm:justify-center">
+          <div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-300 ring-1 ring-gray-700 hover:ring-gray-500">
+            {{ announcement | safe }} 
+          </div>
+        </div>
+        <div class="text-center">
+          <p class="text-base/7 font-light tracking-wide">{{ subheader }}</p>
+          <h1 class="lg:text-6xl text-4xl font-semibold tracking-tight text-balance">{{ title }}</h1>
+          <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight">{{ subtitle }}</h2>
+          <p class="mt-8 lg:text-lg font-light text-gray-50 sm:text-xl/8">{{ description }}</p>
+          <div class="mt-10 flex items-center justify-center gap-x-6">
+            <a href="{{ button1_link }}" class="rounded-2xl bg-gray-300 px-4 py-2 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">{{ button1_text }}</a>
+            <a href="{{ button2_link }}" class="text-sm/6 font-semibold hover:text-gray-300">{{ button2_text }} <span aria-hidden="true">→</span></a>
+          </div>
+        </div>
       </div>
     </div>
   </div>
-</div>