fix alignment

config.toml

@@ -2,7 +2,7 @@
 base_url = "http://template.com"
 
 # Site title and description
-title = "Zola with Tailwind CSS"
+title = "Zola template"
 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

@@ -7,7 +7,7 @@ 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.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",
@@ -16,14 +16,27 @@ template = "index.html"
     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") }}
+{{ 
+    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="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="🎨") }}
 
@@ -43,11 +56,12 @@ To add new content, create Markdown files in the `content` directory. Zola will
 
 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") }}
+{{ 
+    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 %}

templates/index.html

@@ -1,18 +1,18 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class="bg-white shadow overflow-hidden sm:rounded-lg">
-    <div class="px-4 py-5 sm:px-6">
+<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 text-sm text-gray-500">
+        <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 class="border-t border-gray-200">
+    </div> -->
+    <div class="flex items-center justify-center">
         <div class="px-4 py-5 sm:p-6">
-            <div class="prose prose-indigo lg:prose-xl">
+            <div class="">
                 {% if section.content %}
                     {{ section.content | safe }}
                 {% else %}

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,6 +1,6 @@
-<div class="fade-in">
+<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-2xl py-32 sm:py-48 lg:py-56">
+      <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 }} 
@@ -12,7 +12,7 @@
           <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-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>
+            <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>