Fractal demo

Home 

<header class="relative py-3 md:py-6 bg-white">
    <div class="container">
        <nav class="relative flex items-center justify-between">
            <a href="#" class="flex items-center hover:opacity-75 transition duration-150 ease-in-out">
                <img class="h-8 sm:h-10 w-auto mr-4" src="../../fractal.svg" alt="">
                <span class="text-xl md:text-2xl font-bold">Fractal</span>
            </a>

            <div class="-mr-2 flex items-center sm:hidden">
                <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" aria-label="Main menu">
                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </button>
            </div>

            <div class="hidden sm:flex sm:space-x-10">

                <a href="" class="font-bold text-lg text-gray-700 hover:text-gray-900 transition duration-150 ease-in-out">About</a>

                <a href="" class="font-bold text-lg text-gray-700 hover:text-gray-900 transition duration-150 ease-in-out">GitHub</a>

                <a href="" class="font-bold text-lg text-gray-700 hover:text-gray-900 transition duration-150 ease-in-out">Chat</a>

            </div>
        </nav>
    </div>
</header>

<main>

    <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="section py-6 md:py-8 lg:py-10 xl:py-20">
        <div class="container">

            <header class="max-w-3xl mx-auto sm:text-center">
                <h2 class="text-2xl sm:text-3xl lg:text-4xl leading-9 font-bold mb-3">Key features</h2>
                <p class="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>
            </header>

            <div class="mt-6 md:mt-8 lg:mt-10">
                <div class="space-y-8 sm:space-y-0 sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:gap-8 md:gap-10 lg:gap-12">
                    <div class="feature">
                        <svg class="inline-block align-middle -mt-1 stroke-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
                            <use xlink:href="../../icons.svg#globe" />
                        </svg>

                        <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Competitive</h4>
                        <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quisquam suscipit culpa sit vero eius voluptate? Repellendus fugit beatae eveniet!</p>
                    </div>
                    <div class="feature">
                        <svg class="inline-block align-middle -mt-1 stroke-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
                            <use xlink:href="../../icons.svg#key" />
                        </svg>

                        <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Accessible</h4>
                        <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus doloribus reprehenderit fuga. Eligendi provident ipsa dolor, consequatur soluta obcaecati? Error!</p>
                    </div>
                    <div class="feature">
                        <svg class="inline-block align-middle -mt-1 stroke-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
                            <use xlink:href="../../icons.svg#user" />
                        </svg>

                        <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Personnal</h4>
                        <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita sequi cumque odio perspiciatis soluta iste voluptatem eveniet magni assumenda distinctio.</p>
                    </div>
                    <div class="feature">
                        <svg class="inline-block align-middle -mt-1 stroke-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
                            <use xlink:href="../../icons.svg#gift" />
                        </svg>

                        <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Approachable</h4>
                        <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quisquam suscipit culpa sit vero eius voluptate? Repellendus fugit beatae eveniet!</p>
                    </div>
                    <div class="feature">
                        <svg class="inline-block align-middle -mt-1 stroke-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
                            <use xlink:href="../../icons.svg#bulb" />
                        </svg>

                        <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Original</h4>
                        <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus doloribus reprehenderit fuga. Eligendi provident ipsa dolor, consequatur soluta obcaecati? Error!</p>
                    </div>
                    <div class="feature">
                        <svg class="inline-block align-middle -mt-1 stroke-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
                            <use xlink:href="../../icons.svg#lightning" />
                        </svg>

                        <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Fast</h4>
                        <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita sequi cumque odio perspiciatis soluta iste voluptatem eveniet magni assumenda distinctio.</p>
                    </div>
                </div>

            </div>

            <div class="mt-6 md:mt-8 lg:mt-10 sm:text-center">
                <button type="button" 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-outw-full sm:w-auto text-white bg-pink-600 hover:bg-pink-500">
                    Take the tour
                </button>

            </div>

        </div>
    </section>

    <section class="section py-6 md:py-8 lg:py-10 xl:py-20 bg-white">
        <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>

    <section class="section py-6 md:py-8 lg:py-10 xl:py-20 bg-white border-t border-gray-200">
        <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">
                    <img src="../../illustrations/work.svg" alt="" loading="lazy" class="image w-full" width="741" height="474" />

                </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">Tailored for your project</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>

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

            <div class="grid grid-cols-2 sm:grid-cols-4 gap-8">

                <div class="flex justify-center">
                    <a href="https://clearleft.com/" target="_blank" rel="noopener" class="opacity-50 transition-opacity duration-200 ease-out hover:opacity-100">
                        <img class="h-8 lg:h-10 xl:h-12" src="/logos/clearleft.svg" alt="Clearleft"></a>
                    </a>
                </div>

                <div class="flex justify-center">
                    <a href="https://madebykind.com/" target="_blank" rel="noopener" class="opacity-50 transition-opacity duration-200 ease-out hover:opacity-100">
                        <img class="h-8 lg:h-10 xl:h-12" src="/logos/kind.svg" alt="Kind"></a>
                    </a>
                </div>

                <div class="flex justify-center">
                    <a href="https://www.liip.ch/" target="_blank" rel="noopener" class="opacity-50 transition-opacity duration-200 ease-out hover:opacity-100">
                        <img class="h-8 lg:h-10 xl:h-12" src="/logos/liip.svg" alt="Liip"></a>
                    </a>
                </div>

                <div class="flex justify-center">
                    <a href="https://slab.com/" target="_blank" rel="noopener" class="opacity-50 transition-opacity duration-200 ease-out hover:opacity-100">
                        <img class="h-8 lg:h-10 xl:h-12" src="/logos/slab.svg" alt="Slab"></a>
                    </a>
                </div>

            </div>

        </div>
    </section>

</main>

<footer class="bg-gray-800 py-8">
    <div class="container">
        <div class="md:flex md:items-center md:justify-between lg:px-8">
            <div class="flex justify-center space-x-6 md:order-2">

                <a href="https://twitter.com/frctl" target="_blank" rel="noopener" class="text-gray-400 hover:text-white focus:text-gray-500 transition-colors duration-200 ease-out" aria-label="Twitter" title="Twitter">
                    <svg class="inline-block align-middle -mt-1 fill-current w-6 h-6" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#twitter" />
                    </svg>

                </a>

                <a href="https://github.com/frctl" target="_blank" rel="noopener" class="text-gray-400 hover:text-white focus:text-gray-500 transition-colors duration-200 ease-out" aria-label="GitHub" title="GitHub">
                    <svg class="inline-block align-middle -mt-1 fill-current w-6 h-6" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#github" />
                    </svg>

                </a>

                <a href="https://discord.gg/vuRz4Yx" target="_blank" rel="noopener" class="text-gray-400 hover:text-white focus:text-gray-500 transition-colors duration-200 ease-out" aria-label="Discord" title="Discord">
                    <svg class="inline-block align-middle -mt-1 fill-current w-6 h-6" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#discord" />
                    </svg>

                </a>

            </div>
            <div class="mt-8 md:mt-0 md:order-1">
                <p class="text-center text-base leading-6 text-gray-400">
                    &copy; 2020 · MIT License
                </p>
            </div>
        </div>
    </div>
</footer>
 
{% extends '@page-layout' %}

{% block content %}
    {% render '@hero' %}
    {% render '@section' %}
    {% render '@section--left', { class: 'bg-white' }, true %}
    {% render '@section--right', { class: 'bg-white border-t border-gray-200' }, true %}
{% endblock content %}
 
/* No context defined. */

No notes defined.