# Zola Tailwind Template

A modern static site template built with [Zola](https://www.getzola.org/) static site generator and [Tailwind CSS](https://tailwindcss.com/).

## Features

- Fast and lightweight static site generation with Zola
- Modern responsive design with Tailwind CSS
- Reusable components via Zola shortcodes
- Dark mode support
- Blog section with Markdown content
- Team member profiles

## Prerequisites

Before you begin, ensure you have the following installed:

- [Zola](https://www.getzola.org/documentation/getting-started/installation/) (v0.15.0 or later)
- [Node.js](https://nodejs.org/) (v14.0.0 or later)
- npm (usually comes with Node.js)

### Installing Zola

Follow the instructions on the [Zola installation page](https://www.getzola.org/documentation/getting-started/installation/) for your operating system.

### Installing Node.js and npm

Download and install from the [Node.js website](https://nodejs.org/).

## Running Locally

To run the site locally for development:

1. Clone this repository or download and extract the ZIP file
2. Navigate to the project directory in your terminal
3. Run the start script:

```bash
# On Linux/macOS
./start.sh

# On Windows
# Either use Git Bash to run ./start.sh
# Or run these commands manually:
npm install
npx tailwindcss -i ./static/css/main.css -o ./static/css/output.css --watch & zola serve
```

The start script will:
- Install Tailwind CSS and dependencies if not already installed
- Start the Tailwind CSS watcher to compile CSS changes
- Start the Zola development server

Once running, you can access the site at [http://127.0.0.1:1111](http://127.0.0.1:1111)

## Building for Production

To build the site for production:

```bash
# On Linux/macOS
./build.sh

# On Windows
# Either use Git Bash to run ./build.sh
# Or run these commands manually:
npm install
npx tailwindcss -i ./static/css/main.css -o ./static/css/output.css --minify
zola build
```

The build script will:
- Install Tailwind CSS and dependencies if not already installed
- Build and minify the Tailwind CSS
- Build the Zola site for production

The built site will be in the `public` directory, which you can deploy to any static hosting service.

## Using Shortcodes

Shortcodes are reusable components that can be included in your Markdown content. This template includes several pre-built shortcodes:

### Hero Section

```markdown
{{ hero(title="Welcome", subtitle="A modern website built with Zola and Tailwind CSS", button_text="Learn More", button_link="/about") }}
```

### Alternative Hero Styles

```markdown
{{ hero2(title="Welcome", subtitle="A modern website", button_text="Learn More", button_link="/about") }}

{{ hero3(title="Welcome", subtitle="A modern website", button_text="Learn More", button_link="/about") }}
```

### Feature Card

```markdown
{{ feature_card(title="Fast and Lightweight", description="Zola generates static HTML files that load quickly", icon="⚡") }}
```

### Call-to-Action (CTA)

```markdown
{{ 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") }}
```

For more detailed documentation on available shortcodes and their parameters, see the [shortcodes.md](content/shortcodes.md) file.

## Creating Custom Shortcodes

To create a new shortcode:

1. Create a new HTML file in the `templates/shortcodes/` directory, e.g., `templates/shortcodes/my_shortcode.html`
2. Write your shortcode template using Zola's template syntax (based on Tera templates)

Here's an example of a simple shortcode template:

```html
{% set title = title | default(value="Default Title") %}
{% set description = description | default(value="") %}

<div class="bg-white p-6 rounded-lg shadow-md">
  <h3 class="text-xl font-bold">{{ title }}</h3>
  {% if description %}
    <p class="mt-2 text-gray-600">{{ description }}</p>
  {% endif %}
  {% if caller %}
    <div class="mt-4">{{ caller() }}</div>
  {% endif %}
</div>
```

### Parameters

Define parameters at the top of your shortcode file using the `{% set parameter = parameter | default(value="default_value") %}` syntax.

### Nested Content

To allow nested content inside your shortcode, include the `{% if caller %}{{ caller() }}{% endif %}` block.

### Using Your New Shortcode

In your Markdown content:

```markdown
{{ my_shortcode(title="Custom Component", description="This is my custom shortcode") }}
```

With nested content:

```markdown
{% call my_shortcode(title="With Nested Content") %}
  This content will appear inside the shortcode.
  
  You can include **Markdown** here.
{% endcall %}
```

## Customization

### Site Configuration

Edit the `config.toml` file to change site-wide settings:

```toml
base_url = "https://your-domain.com"
title = "Your Site Title"
description = "Your site description"
```

### Styling

- Main CSS file: `static/css/main.css`
- Tailwind configuration: `tailwind.config.js`
- SASS files (if used): `sass/` directory

## Deployment

After building the site, deploy the contents of the `public` directory to any static hosting service like:

- [Netlify](https://www.netlify.com/)
- [Vercel](https://vercel.com/)
- [GitHub Pages](https://pages.github.com/)
- [Cloudflare Pages](https://pages.cloudflare.com/)

Most of these services can be configured to automatically run your build script when you push to your repository.