build.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
 echo "Building Tailwind CSS..."
-npx tailwindcss -i ./static/css/main.css -o ./static/css/output.css --minify
+npx tailwindcss -i ./static/css/main.css -o ./static/css/main.css --minify
 
 echo "Building Zola site..."
 zola build

content/_index.md

@@ -5,8 +5,9 @@ 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.html",
     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",
@@ -14,3 +15,39 @@ template = "index.html"
     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") }}
+
+{% raw %}
+```html
+<!-- Example of using the hero2 shortcode -->
+{{ hero2(title="Welcome", subtitle="A subtitle here", button_text="Click Me", button_link="/some-page", bg_color="bg-blue-700", image="/path/to/image.jpg") }}
+```
+{% endraw %}

package.json

@@ -5,7 +5,7 @@
   "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",
+    "watch:css": "tailwindcss build ./sass/main.scss -o ./static/css/main.css --watch",
     "build": "npm run build:css && zola build",
     "dev": "concurrently \"npm run watch:css\" \"zola serve\""
   },

public/main.css

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

start.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
 echo "Starting Tailwind CSS watcher & Zola live server..."
 
-npx tailwindcss -i ./static/css/main.css -o ./static/css/output.css --watch & zola serve
+npx tailwindcss -i ./static/css/main.css -o ./static/css/main.css --watch & zola serve
 
 echo "🚀 Development server running!"

templates/base.html

@@ -4,7 +4,7 @@
     <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') }}">
+    <link rel="stylesheet" href="{{ get_url(path='css/main.css') }}">
     <script src="{{ get_url(path='js/main.js') }}" defer></script>
     {% block head %}{% endblock %}
 </head>

templates/index.html

@@ -1,11 +1,10 @@
 {% 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="px-4 py-5 sm:p-6">
-            <div class="prose prose-indigo lg:prose-xl w-full">
+            <div class="prose prose-indigo lg:prose-xl">
                 {% if section.content %}
                     {{ section.content | safe }}
                 {% else %}
@@ -17,13 +16,11 @@
     </div>
 </div>
 
-<!-- Blog Section / List of Pages -->
+<div class="mt-8 grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-<div class="mt-8 grid gap-8 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-lg transition-shadow duration-300">
-        <a href="{{ page.permalink }}" class="bg-white overflow-hidden shadow rounded-lg hover:shadow-xl 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 %}

templates/shortcodes/hero3.html

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