Fractal demo

Section: Left 

<section class="section py-6 md:py-8 lg:py-10 xl:py-20">
    <div class="container">

        <div class="flex flex-col md:flex-row gap-y-6 md:gap-y-0 md:gap-x-8 lg:gap-x-12 items-center">

            <div class="flex-shrink-0 md:w-2/5 lg:w-1/2 md:order-2">
                <img src="../../illustrations/scrum-board.svg" alt="" loading="lazy" class="image w-full" width="822" height="580" />

            </div>

            <div class="md:max-w-md mx-auto">
                <h2 class="text-2xl sm:text-3xl lg:text-4xl leading-9 font-bold mb-3 lg:mb-6">Roadmap</h2>
                <p class="lg:text-lg text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta optio placeat quisquam minus rem omnis, aliquam consequatur at deleniti, laudantium fugiat ratione? Minima voluptatem, aliquam quod dolorem necessitatibus, blanditiis, itaque deleniti.</p>

                <div class="mt-4 lg:mt-6">
                    <a href="#" class="inline-block
    text-pink-600 hover:text-pink-500 focus:text-pink-500 font-bold uppercase tracking-wide transition-all duration-200 ease-out group">
                        Read more<svg class="inline-block align-middle -mt-1 stroke-current w-4 h-4 ml-2 transition-all duration-200 ease-out transform group-hover:translate-x-1" aria-hidden="true" focusable="false" role="img">
                            <use xlink:href="../../icons.svg#chevron-right" />
                        </svg>

                    </a>

                </div>

            </div>
        </div>

    </div>
</section>
 
{% extends "@section-wrapper" %}

{% block content %}
    <div class="flex flex-col md:flex-row gap-y-6 md:gap-y-0 md:gap-x-8 lg:gap-x-12 items-center">
        {% if component %}
            <div class="flex-shrink-0 md:w-2/5 lg:w-1/2{% if componentClass %} {{ componentClass }}{% endif %}">
                {% render '@' + component.handle, component.context|default({}), true %}
            </div>
        {% endif %}

        <div class="md:max-w-md mx-auto">
            <h2 class="text-2xl sm:text-3xl lg:text-4xl leading-9 font-bold mb-3 lg:mb-6">{{ title }}</h2>
            <p class="lg:text-lg text-gray-600">{{ body }}</p>

            {% if button %}
                <div class="mt-4 lg:mt-6">
                    {% render '@button--link', button, true %}
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}
 
{
  "title": "Roadmap",
  "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta optio placeat quisquam minus rem omnis, aliquam consequatur at deleniti, laudantium fugiat ratione? Minima voluptatem, aliquam quod dolorem necessitatibus, blanditiis, itaque deleniti.",
  "component": {
    "handle": "image--full",
    "context": {
      "src": "/illustrations/scrum-board.svg",
      "width": 822,
      "height": 580
    }
  },
  "button": {
    "label": "Read more"
  },
  "componentClass": "md:order-2"
}

No notes defined.