update zola template

2025-03-24 21:46:08 +02:00 · 2025-03-24 21:46:08 +02:00 · b55e4929ab
commit b55e4929ab
40 changed files with 109109 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,11 @@
+
+.cache
+.DS_Store
+src/.temp
+node_modules
+yarn.lock
+package-lock.json
+dist
+.temp
+public/
+tailwindcss
--- a/build.sh
+++ b/build.sh
@ -0,0 +1,15 @@
+#!/bin/bash
+
+echo "🔍 Checking for Tailwind CSS..."
+if ! [ -d "node_modules" ]; then
+  echo "📦 Installing Tailwind CSS and dependencies..."
+  npm install
+fi
+
+echo "🚀 Building Tailwind CSS..."
+npx tailwindcss -i ./static/css/main.css -o ./static/css/output.css --minify
+
+echo "🔨 Building Zola site..."
+zola build
+
+echo "✅ Build complete!"
--- a/config.toml
+++ b/config.toml
@ -0,0 +1,20 @@
+# The URL the site will be built for
+base_url = "http://template.com"
+
+# Site title and description
+title = "THREEFOLD"
+description = "A modern static site built with Zola and Tailwind CSS"
+
+# Whether to automatically compile all Sass files in the sass directory
+compile_sass = true
+
+# Whether to build a search index to be used later on by a JavaScript library
+build_search_index = true
+
+[markdown]
+# Whether to do syntax highlighting
+# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
+highlight_code = true
+
+[extra]
+# Put all your custom variables here
--- a/content/_index.md
+++ b/content/_index.md
@ -0,0 +1,71 @@
+++
+title = "Home"
+sort_by = "date"
+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 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") 
+}}
+
+
--- a/content/blog/_index.md
+++ b/content/blog/_index.md
@ -0,0 +1,8 @@
+++
+title = "Blog"
+sort_by = "date"
+template = "section.html"
+page_template = "page.html"
+++
+
+Welcome to the blog section. Here you'll find all the latest articles and updates.
--- a/content/blog/first-post.md
+++ b/content/blog/first-post.md
@ -0,0 +1,31 @@
+++
+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"
+++
+
+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.
+
+<br>
+
+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.
+
+<br>
+
+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. 
+
+<br>
+
+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.
+
+<br>
+
+More information: 
+
+<br>
+
+- **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)
--- a/content/blog/second-post.md
+++ b/content/blog/second-post.md
@ -0,0 +1,26 @@
+++
+title = "Empowering Tanzania's Digital Future: The Dunia Yetu Initiative"
+date = 2025-03-17
+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"
+++
+
+## Vision of Collective Empowerment 
+
+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.
+
+<br>
+
+## Empowering Tanzania's Youth and Future
+
+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. 
+
+<br>
+
+## Looking Ahead to 2024:
+
+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. 
+
+**Together, through Dunia Yetu, Tanzanians are building a brighter, more inclusive future—one where the digital world truly belongs to us all.**
--- a/content/shortcodes.md
+++ b/content/shortcodes.md
@ -0,0 +1,144 @@
+++
+title = "Shortcodes"
+template = "page.html"
+date = 2025-03-18
+++
+
+# Zola Shortcodes
+
+This page documents the custom shortcodes available in this Zola site. Shortcodes are reusable components that can be included in your Markdown content.
+
+## Hero Shortcode
+
+The hero shortcode creates a prominent banner section at the top of a page.
+
+### Usage
+
+```
+{{ hero(title="Your Title", subtitle="Your subtitle text", button_text="Button Text", button_link="/link", bg_color="bg-indigo-600", text_color="text-white") }}
+```
+
+### Parameters
+
+- `title` (required): The main heading text
+- `subtitle` (optional): Secondary text displayed below the title
+- `button_text` (optional): Text for the call-to-action button
+- `button_link` (optional): URL the button links to
+- `bg_color` (optional): Background color class (default: "bg-indigo-600")
+- `text_color` (optional): Text color class (default: "text-white")
+
+### Example
+
+```html
+{{ hero(title="Welcome to My Site", subtitle="A modern website built with Zola and Tailwind CSS", button_text="Learn More", button_link="/about", bg_color="bg-gradient-to-r from-purple-600 to-indigo-600") }}
+```
+
+## Hero2 Shortcode
+
+The hero2 shortcode creates a centered hero section with a patterned background.
+
+### Usage
+
+```
+{{ hero2(title="Your Title", subtitle="Your subtitle text", button_text="Button Text", button_link="/link", bg_color="bg-blue-700", text_color="text-white", image="/path/to/image.jpg") }}
+```
+
+### Parameters
+
+- `title` (required): The main heading text
+- `subtitle` (optional): Secondary text displayed below the title
+- `button_text` (optional): Text for the call-to-action button
+- `button_link` (optional): URL the button links to
+- `bg_color` (optional): Background color class (default: "bg-blue-700")
+- `text_color` (optional): Text color class (default: "text-white")
+- `image` (optional): Path to an optional image to display below the text
+
+### Example
+
+```html
+{{ hero2(title="Welcome to My Site", subtitle="A modern website built with Zola and Tailwind CSS", button_text="Learn More", button_link="/about", bg_color="bg-blue-700") }}
+```
+
+## Feature Card Shortcode
+
+The feature card shortcode creates a card to highlight a feature or service.
+
+### Usage
+
+```
+{{ feature_card(title="Feature Name", description="Feature description", icon="🚀", bg_color="bg-white", hover_color="hover:bg-gray-50") }}
+```
+
+### Parameters
+
+- `title` (required): The feature name
+- `description` (optional): Description of the feature
+- `icon` (optional): An emoji or icon to display
+- `bg_color` (optional): Background color class (default: "bg-white")
+- `hover_color` (optional): Hover effect color class (default: "hover:bg-gray-50")
+
+### Example
+
+```html
+{{ feature_card(title="Fast and Lightweight", description="Zola generates static HTML files that load quickly", icon="⚡") }}
+```
+
+## Call-to-Action (CTA) Shortcode
+
+The CTA shortcode creates an attention-grabbing section with a button.
+
+### Usage
+
+```
+{{ cta(title="Call to Action", description="Description text", button_text="Button Text", button_link="/link", bg_color="bg-indigo-100", text_color="text-indigo-800", button_color="bg-indigo-600", button_text_color="text-white") }}
+```
+
+### Parameters
+
+- `title` (required): The main heading text
+- `description` (optional): Description text
+- `button_text` (optional): Text for the call-to-action button
+- `button_link` (optional): URL the button links to
+- `bg_color` (optional): Background color class (default: "bg-indigo-100")
+- `text_color` (optional): Text color class (default: "text-indigo-800")
+- `button_color` (optional): Button background color class (default: "bg-indigo-600")
+- `button_text_color` (optional): Button text color class (default: "text-white")
+
+### Example
+
+```html
+{{ 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") }}
+```
+
+## Using Multiple Shortcodes Together
+
+You can combine multiple shortcodes on a single page. For example, you might use a hero at the top, followed by feature cards in a grid, and a CTA at the bottom:
+
+```markdown
+++
+title = "Home"
+++
+
+{{ hero(title="Welcome", subtitle="A modern website") }}
+
+## Features
+
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-12">
+{{ feature_card(title="Feature 1", description="Description 1", icon="🚀") }}
+{{ feature_card(title="Feature 2", description="Description 2", icon="⚡") }}
+{{ feature_card(title="Feature 3", description="Description 3", icon="🔍") }}
+</div>
+
+{{ cta(title="Ready?", description="Get started today", button_text="Sign Up", button_link="/signup") }}
+```
+
+## Advanced Usage: Nested Content
+
+Some shortcodes support nested content using the block syntax. This allows you to include more complex content inside the shortcode.
+
+```
+{% call hero(title="Welcome") %}
+  <div class="custom-content">
+    <p>This is custom content inside the hero.</p>
+  </div>
+{% endcall %}
--- a/content/team/_index.md
+++ b/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.
--- a/content/team/adnan_fatayerji.md
+++ b/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.
--- a/content/team/jan_de_landtsheer.md
+++ b/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.
--- a/content/team/kristof_de_spiegeleer.md
+++ b/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>
--- a/content/why.md
+++ b/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"
+    ) 
+}}
--- a/package.json
+++ b/package.json
@ -0,0 +1,25 @@
+{
+  "name": "zola-tailwind-site",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build:css": "tailwindcss build ./sass/main.scss -o ./static/css/main.css",
+    "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": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.16",
+    "autoprefixer": "^10.4.21",
+    "concurrently": "^9.1.2",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.0.14"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+
--- a/sass/main.scss
+++ b/sass/main.scss
@ -0,0 +1,6 @@
+/* Import Tailwind CSS */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom styles can be added below */
--- a/start.sh
+++ b/start.sh
@ -0,0 +1,13 @@
+#!/bin/bash
+
+echo "🔍 Checking for Tailwind CSS..."
+if ! [ -d "node_modules" ]; then
+  echo "📦 Installing Tailwind CSS and dependencies..."
+  npm install
+fi
+
+echo "Starting Tailwind CSS watcher & Zola live server..."
+
+npx tailwindcss -i ./static/css/main.css -o ./static/css/output.css --watch & zola serve
+
+echo "🚀 Development server running!"
--- a/static/css/dark-mode.css
+++ b/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;
+}
--- a/static/css/dropdown.css
+++ b/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;
+}
--- a/static/css/main.css
+++ b/static/css/main.css
--- a/static/css/output.css
+++ b/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);
+}
--- a/static/images/blog/africa_future_summit1.png
+++ b/static/images/blog/africa_future_summit1.png
--- a/static/images/blog/dunia_yetu1.png
+++ b/static/images/blog/dunia_yetu1.png
--- a/static/images/blog/tailwind-theme.jpg
+++ b/static/images/blog/tailwind-theme.jpg
--- a/static/images/blog/zola-tailwind.jpg
+++ b/static/images/blog/zola-tailwind.jpg
--- a/static/images/team/adnan_fatayerji.jpg
+++ b/static/images/team/adnan_fatayerji.jpg
--- a/static/images/team/jan_de_landtsheer.jpeg
+++ b/static/images/team/jan_de_landtsheer.jpeg
--- a/static/images/team/kristof_de_spiegeleer.jpeg
+++ b/static/images/team/kristof_de_spiegeleer.jpeg
--- a/static/js/main.js
+++ b/static/js/main.js
@ -0,0 +1,139 @@
+// 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');
+  
+  if (menuButton && mobileMenu) {
+    menuButton.addEventListener('click', function() {
+      const expanded = menuButton.getAttribute('aria-expanded') === 'true';
+      
+      // Toggle aria-expanded
+      menuButton.setAttribute('aria-expanded', !expanded);
+      
+      // Toggle menu visibility
+      mobileMenu.classList.toggle('hidden');
+      
+      // Toggle icons
+      menuIcons.forEach(icon => {
+        icon.classList.toggle('hidden');
+      });
+    });
+  }
+  
+  // 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);
+  }
+});
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,19 @@
+module.exports = {
+  future: {
+    // removeDeprecatedGapUtilities: true,
+    // purgeLayersByDefault: true,
+  },
+  purge: [
+    './templates/**/*.html',
+    './content/**/*.md',
+    './themes/**/*.html',
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {},
+  },
+  variants: {},
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
+}
--- a/templates/base.html
+++ b/templates/base.html
@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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">
+    <header>
+        {% include "partials/navigation.html" %}
+    </header>
+    <main>
+        <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="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>
+        </div>
+    </footer>
+</body>
+</html>
--- a/templates/index.html
+++ b/templates/index.html
@ -0,0 +1,46 @@
+{% extends "base.html" %}
+
+{% block content %}
+<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="">
+                {% 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>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</div>
+
+{% 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 %}
+        <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 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>
+                </div>
+            </div>
+        </a>
+    {% endfor %}
+</div> -->
+{% endif %}
+{% endblock %}
--- a/templates/page.html
+++ b/templates/page.html
@ -0,0 +1,43 @@
+{% extends "base.html" %}
+
+{% block title %}{{ page.title }} | {{ config.title }}{% endblock %}
+
+{% block content %}
+<article class="bg-white shadow overflow-hidden sm:rounded-lg">
+    <div class="px-4 py-5 sm:px-6">
+        <h1 class="text-3xl font-bold text-gray-900">
+            {{ page.title }}
+        </h1>
+        {% if page.date %}
+        <div class="mt-2 flex items-center text-sm text-gray-500">
+            <time datetime="{{ page.date }}">{{ page.date | date(format="%B %e, %Y") }}</time>
+        </div>
+        {% endif %}
+    </div>
+    <div class="border-t border-gray-200">
+        <div class="px-4 py-5 sm:p-6">
+            <div class="prose prose-indigo lg:prose-xl max-w-none">
+                {{ page.content | safe }}
+            </div>
+        </div>
+    </div>
+</article>
+
+<div class="mt-8 flex justify-between">
+    {% if page.earlier %}
+    <a href="{{ page.earlier.permalink }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+        &larr; {{ page.earlier.title }}
+    </a>
+    {% else %}
+    <div></div>
+    {% endif %}
+
+    {% if page.later %}
+    <a href="{{ page.later.permalink }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+        {{ page.later.title }} &rarr;
+    </a>
+    {% else %}
+    <div></div>
+    {% endif %}
+</div>
+{% endblock %}
--- a/templates/partials/navigation.html
+++ b/templates/partials/navigation.html
@ -0,0 +1,104 @@
+<nav class="bg-gray-800">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="flex items-center justify-between h-16">
+      <div class="flex items-center">
+        <div class="flex-shrink-0">
+          <a href="{{ config.base_url }}" class="text-white font-bold text-xl">{{ config.title }}</a>
+        </div>
+        <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>
+      <div class="hidden md:block">
+        <div class="ml-4 flex items-center md:ml-6">
+          <a href="https://github.com/getzola/zola" 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">
+            Zola Docs
+          </a>
+          <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">
+        <!-- Mobile menu button -->
+        <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
+          <span class="sr-only">Open main menu</span>
+          <!-- Icon when menu is closed -->
+          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+          <!-- Icon when menu is open -->
+          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Mobile menu, show/hide based on menu state. -->
+  <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>
+      <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>
--- a/templates/section.html
+++ b/templates/section.html
@ -0,0 +1,65 @@
+{% extends "base.html" %}
+
+{% block title %}{{ section.title }} | {{ config.title }}{% endblock %}
+
+{% block content %}
+<div class="bg-white shadow overflow-hidden sm:rounded-lg">
+    <div class="px-4 py-5 sm:px-6">
+        <h1 class="text-3xl font-bold text-gray-900">
+            {{ section.title }}
+        </h1>
+        {% if section.description %}
+        <p class="mt-1 max-w-2xl text-sm text-gray-500">
+            {{ section.description }}
+        </p>
+        {% endif %}
+    </div>
+    <div class="border-t border-gray-200">
+        <div class="px-4 py-5 sm:p-6">
+            <div class="prose prose-indigo lg:prose-xl">
+                {% if section.content %}
+                    {{ section.content | safe }}
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</div>
+
+<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">
+                    {% if page.date %}
+                        <span>{{ page.date | date(format="%B %e, %Y") }}</span>
+                    {% endif %}
+                </div>
+            </div>
+        </a>
+    {% endfor %}
+
+    {% for subsection in section.subsections %}
+        {% set subsection_data = get_section(path=subsection) %}
+        <a href="{{ subsection_data.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 font-medium text-gray-900 truncate">{{ subsection_data.title }}</h3>
+                {% if subsection_data.description %}
+                    <p class="mt-1 text-sm text-gray-500">{{ subsection_data.description }}</p>
+                {% endif %}
+                <div class="mt-4 flex items-center text-sm text-gray-500">
+                    <span>{{ subsection_data.pages | length }} pages</span>
+                </div>
+            </div>
+        </a>
+    {% endfor %}
+</div>
+{% endblock %}
--- a/templates/shortcodes/cta.html
+++ b/templates/shortcodes/cta.html
@ -0,0 +1,31 @@
+{% set title = title | default(value="Call to Action") %}
+{% set description = description | default(value="") %}
+{% set button_text = button_text | default(value="Learn More") %}
+{% set button_link = button_link | default(value="#") %}
+{% set bg_color = bg_color | default(value="bg-indigo-100") %}
+{% set text_color = text_color | default(value="text-indigo-800") %}
+{% set button_color = button_color | default(value="bg-indigo-600") %}
+{% set button_text_color = button_text_color | default(value="text-white") %}
+
+<div class="relative {{ bg_color }} {{ text_color }} rounded-lg shadow-md overflow-hidden my-8">
+  <div class="px-6 py-8 md:p-10 md:flex md:items-center md:justify-between">
+    <div class="md:flex-1">
+      <h3 class="text-2xl font-bold">{{ title }}</h3>
+      {% if description %}
+      <p class="mt-2 text-base">{{ description }}</p>
+      {% endif %}
+      {% if caller %}
+        <div class="mt-4">
+          {{ caller() }}
+        </div>
+      {% endif %}
+    </div>
+    {% if button_text and button_link %}
+    <div class="mt-6 md:mt-0 md:ml-10 md:flex-shrink-0">
+      <a href="{{ button_link }}" class="block w-full md:w-auto rounded-md px-5 py-3 {{ button_color }} {{ button_text_color }} text-base font-medium text-center shadow hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+        {{ button_text }}
+      </a>
+    </div>
+    {% endif %}
+  </div>
+</div>
--- a/templates/shortcodes/feature_card.html
+++ b/templates/shortcodes/feature_card.html
@ -0,0 +1,22 @@
+{% set title = title | default(value="Feature") %}
+{% set description = description | default(value="") %}
+{% set icon = icon | default(value="") %}
+{% set bg_color = bg_color | default(value="bg-white") %}
+{% set hover_color = hover_color | default(value="hover:bg-gray-50") %}
+
+<div class="relative {{ bg_color }} {{ hover_color }} shadow rounded-lg p-6 transition-all duration-300">
+  {% if icon %}
+  <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
+    <span class="text-xl">{{ icon | safe }}</span>
+  </div>
+  {% endif %}
+  <h3 class="text-lg font-medium text-gray-900">{{ title }}</h3>
+  {% if description %}
+  <p class="mt-2 text-base text-gray-500">{{ description }}</p>
+  {% endif %}
+  {% if caller %}
+    <div class="mt-4">
+      {{ caller() }}
+    </div>
+  {% endif %}
+</div>
--- a/templates/shortcodes/hero.html
+++ b/templates/shortcodes/hero.html
@ -0,0 +1,35 @@
+{% set title = title | default(value="Welcome") %}
+{% set subtitle = subtitle | default(value="") %}
+{% set button_text = button_text | default(value="") %}
+{% set button_link = button_link | default(value="") %}
+{% set bg_color = bg_color | default(value="bg-indigo-600") %}
+{% set text_color = text_color | default(value="text-white") %}
+
+<div class="relative {{ bg_color }} {{ text_color }} overflow-hidden">
+  <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 lg:py-20">
+    <div class="lg:grid lg:grid-cols-12 lg:gap-8">
+      <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
+        <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl xl:text-6xl">
+          {{ title }}
+        </h1>
+        {% if subtitle %}
+        <p class="mt-3 text-base sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
+          {{ subtitle }}
+        </p>
+        {% endif %}
+        {% if button_text and button_link %}
+        <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
+          <a href="{{ button_link }}" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-indigo-600 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+            {{ button_text }}
+          </a>
+        </div>
+        {% endif %}
+      </div>
+      <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
+        {% if caller %}
+          {{ caller() }}
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</div>
--- a/templates/shortcodes/hero2.html
+++ b/templates/shortcodes/hero2.html
@ -0,0 +1,46 @@
+{% set title = title | default(value="Welcome") %}
+{% set subtitle = subtitle | default(value="") %}
+{% set button_text = button_text | default(value="") %}
+{% set button_link = button_link | default(value="") %}
+{% set bg_color = bg_color | default(value="bg-blue-700") %}
+{% set text_color = text_color | default(value="text-white") %}
+{% set image = image | default(value="") %}
+
+<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">
+      <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl">
+        {{ title }}
+      </h1>
+      {% if subtitle %}
+      <p class="mt-6 max-w-2xl mx-auto text-xl">
+        {{ subtitle }}
+      </p>
+      {% endif %}
+      {% if button_text and button_link %}
+      <div class="mt-10">
+        <a href="{{ button_link }}" class="inline-block px-8 py-3 border border-transparent text-base font-medium rounded-md shadow-sm bg-white text-blue-700 hover:bg-blue-50 sm:px-10">
+          {{ button_text }}
+        </a>
+      </div>
+      {% endif %}
+    </div>
+    {% if image %}
+    <div class="mt-10 max-w-xl mx-auto">
+      <img src="{{ image }}" alt="Hero image" class="rounded-lg shadow-xl">
+    </div>
+    {% endif %}
+    {% if caller %}
+      <div class="mt-8">
+        {{ caller() }}
+      </div>
+    {% endif %}
+  </div>
+  
+  <style>
+    .bg-pattern {
+      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+    }
+  </style>
+</div>
--- a/templates/shortcodes/hero3.html
+++ b/templates/shortcodes/hero3.html
@ -0,0 +1,21 @@
+<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>