<div class="flex mb-12 items-center justify-center">
<div class="lg:inline-flex max-lg:w-full flex-col xl:flex-row mx-auto p-6 rounded-[16px] border-grey-200 border gap-4 xl:items-center bg-white">
<div class="flex lg:items-center gap-6 flex-col max-lg:w-full 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>
<div class="flex mb-12 items-center justify-center">
<div class="lg:inline-flex max-lg:w-full flex-col xl:flex-row mx-auto p-6 rounded-[16px] border-grey-200 border gap-4 xl:items-center bg-white">
<div class="flex lg:items-center gap-6 flex-col max-lg:w-full lg:flex-row">
{% for item in features %}
<div class="flex gap-3 items-center">
<div class="{% if item.icon %}w-8{% else %}w-5{% endif %} flex-shrink-0">
{% if item.icon %}
{% render "@icon", { name: item.icon, modifier: "fill-current w-8 h-8 text-bravo", ariaHidden: true } %}
{% else %}
{% render "@icon", { name: 'icon-tick', modifier: "fill-current w-5 h-5 text-bravo", ariaHidden: true } %}
{% endif %}
</div>
<div class="text-lg font-bold text-bravo">
{{ item.name }}
</div>
</div>
{% endfor %}
</div>
</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.