Gigaclear Pattern Library

Features 

<div class="flex flex-col xl:flex-row w-full mx-auto max-w-[1076px] p-6 rounded-[16px] cta-gradient-border gap-4 mt-20 xl:items-center bg-white">
    <div class="text-grey-600 uppercase flex-shrink-0 font-[600]">
        All Deals include
    </div>
    <div class="flex lg:items-center gap-6 flex-col lg:flex-row">

        <div class="flex gap-3 items-center">
            <div class="w-8 flex-shrink-0">
                <svg class="fill-current w-8 h-8 text-bravo" aria-hidden="true">
                    <use href="/front-end/sprite.svg?v=1.2#icon-router"></use>
                </svg>
            </div>
            <div class="text-lg font-bold text-bravo">
                Eero WIFI 7 Routers
            </div>
        </div>

        <div class="flex gap-3 items-center">
            <div class="w-8 flex-shrink-0">
                <svg class="fill-current w-8 h-8 text-bravo" aria-hidden="true">
                    <use href="/front-end/sprite.svg?v=1.2#icon-star"></use>
                </svg>
            </div>
            <div class="text-lg font-bold text-bravo">
                Free expert set-up
            </div>
        </div>

        <div class="flex gap-3 items-center">
            <div class="w-8 flex-shrink-0">
                <svg class="fill-current w-8 h-8 text-bravo" aria-hidden="true">
                    <use href="/front-end/sprite.svg?v=1.2#icon-wifi"></use>
                </svg>
            </div>
            <div class="text-lg font-bold text-bravo">
                WIFI Guarantee
            </div>
        </div>

        <div class="flex gap-3 items-center">
            <div class="w-8 flex-shrink-0">
                <svg class="fill-current w-8 h-8 text-bravo" aria-hidden="true">
                    <use href="/front-end/sprite.svg?v=1.2#icon-shield"></use>
                </svg>
            </div>
            <div class="text-lg font-bold text-bravo">
                Free Eero Secure
            </div>
        </div>

    </div>
</div>
 
<div class="flex flex-col xl:flex-row w-full mx-auto max-w-[1076px] p-6 rounded-[16px] cta-gradient-border gap-4 mt-20 xl:items-center bg-white">
    <div class="text-grey-600 uppercase flex-shrink-0 font-[600]">
        All Deals include
    </div>
    <div class="flex lg:items-center gap-6 flex-col lg:flex-row">
        {% for item in features %}
            <div class="flex gap-3 items-center">
                <div class="w-8 flex-shrink-0">
                    {% render "@icon", { name: item.icon, modifier: "fill-current w-8 h-8 text-bravo", ariaHidden: true } %}
                </div>
                <div class="text-lg font-bold text-bravo">
                    {{ item.name }}
                </div>
            </div>
        {% endfor %}
    </div>
</div>
 
{
  "siteName": "Gigaclear Pattern Library",
  "features": [
    {
      "name": "Eero WIFI 7 Routers",
      "icon": "icon-router"
    },
    {
      "name": "Free expert set-up",
      "icon": "icon-star"
    },
    {
      "name": "WIFI Guarantee",
      "icon": "icon-wifi"
    },
    {
      "name": "Free Eero Secure",
      "icon": "icon-shield"
    }
  ]
}

No notes defined.