From fde1b767c41871afac451aa0eb57812682562f65 Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Mon, 24 Mar 2025 23:27:45 +0200
Subject: [PATCH] update readme

---
 README.md | 188 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 188 insertions(+)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..2aa4c53
--- /dev/null
+++ b/README.md
@@ -0,0 +1,188 @@
+# 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.