Fractal demo

Hero: Default 

<section class="bg-pink-200">
    <div class="grid md:grid-cols-2 items-center">

        <img src="../../pictures/bubbles.jpg" alt="" loading="lazy" class="image w-full h-64 md:h-full md:w-auto object-cover" />

        <div class="py-6 sm:py-10 md:py-12 lg:py-20 xl:py-24">
            <div class="container md:max-w-xl md:px-10 lg:px-12">
                <h1 class="text-4xl tracking-tight leading-10 font-extrabold sm:leading-none lg:text-5xl xl:text-6xl">
                    A tool to <span class="text-pink-600">empower your components</span> library.
                </h1>

                <p class="mt-3 text-lg sm:text-xl md:mt-5 md:max-w-3xl text-pink-500">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. In, qui, possimus natus autem a minus quaerat voluptate laboriosam, aut harum esse deserunt.
                </p>

                <div class="mt-6 flex flex-wrap gap-y-4 gap-x-6">

                    <div class="flex-1 whitespace-nowrap">
                        <a href="#" class="inline-block
    px-8 py-3 font-medium text-center rounded-lg shadow hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 transition-ease-outblock w-full text-white bg-pink-600 hover:bg-pink-500">
                            Get started
                        </a>

                    </div>

                    <div class="flex-1 whitespace-nowrap">
                        <a href="#" class="inline-block
    px-8 py-3 font-medium text-center rounded-lg shadow hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 transition-ease-outblock w-full text-pink-600 hover:text-pink-500 bg-white">
                            Learn more
                        </a>

                    </div>

                </div>

            </div>
        </div>
    </div>
</section>
 
<section class="{% if class %}{{ class }}{% endif %}">
    <div class="grid md:grid-cols-2 items-center">
        {% if component %}
            {% render '@' + component.handle, component.context|default({}), true %}
        {% endif %}

        <div class="py-6 sm:py-10 md:py-12 lg:py-20 xl:py-24">
            <div class="container md:max-w-xl md:px-10 lg:px-12">
                <h1 class="text-4xl tracking-tight leading-10 font-extrabold sm:leading-none lg:text-5xl xl:text-6xl">
                    {{ title | safe }}
                </h1>
                {% if body %}
                    <p class="mt-3 text-lg sm:text-xl md:mt-5 md:max-w-3xl{% if bodyClass %} {{ bodyClass }}{% endif %}">
                        {{ body }}
                    </p>
                {% endif %}
                {% if buttons.primary or buttons.secondary %}
                    <div class="mt-6 flex flex-wrap gap-y-4 gap-x-6">
                        {% if buttons.primary %}
                            <div class="flex-1 whitespace-nowrap">
                                {% render '@button', buttons.primary, true %}
                            </div>
                        {% endif %}
                        {% if buttons.secondary %}
                            <div class="flex-1 whitespace-nowrap">
                                {% render '@button--secondary', buttons.secondary, true %}
                            </div>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>
 
{
  "class": "bg-pink-200",
  "bodyClass": "text-pink-500",
  "title": "A tool to <span class=\"text-pink-600\">empower your components</span> library.",
  "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. In, qui, possimus natus autem a minus quaerat voluptate laboriosam, aut harum esse deserunt.",
  "buttons": {
    "primary": {
      "href": "#",
      "label": "Get started",
      "class": "block w-full"
    },
    "secondary": {
      "href": "#",
      "label": "Learn more",
      "class": "block w-full"
    }
  },
  "component": {
    "handle": "image",
    "context": {
      "src": "/pictures/bubbles.jpg",
      "class": "w-full h-64 md:h-full md:w-auto object-cover"
    }
  }
}

No notes defined.