mirror of
https://github.com/cheveguerra/bot-whatsapp.git
synced 2026-04-17 19:26:23 +00:00
92 lines
4.2 KiB
TypeScript
92 lines
4.2 KiB
TypeScript
import { component$ } from '@builder.io/qwik'
|
|
import { IconStar } from '~/components/icons/IconStar'
|
|
|
|
export default component$(() => {
|
|
const items = [
|
|
[
|
|
{
|
|
title: 'Qwik + Tailwind CSS Integration',
|
|
description:
|
|
'A seamless integration between two great frameworks that offer high productivity, performance and versatility.',
|
|
icon: 'tabler:brand-tailwind',
|
|
},
|
|
{
|
|
title: 'Ready-to-use Components',
|
|
description:
|
|
'Widgets made with Tailwind CSS ready to be used in Marketing Websites, SaaS, Blogs, Personal Profiles, Small Business...',
|
|
icon: 'tabler:components',
|
|
},
|
|
{
|
|
title: 'Best Practices',
|
|
description:
|
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
|
icon: 'tabler:list-check',
|
|
},
|
|
],
|
|
[
|
|
{
|
|
title: 'Excellent Page Speed',
|
|
description:
|
|
'Having a good page speed impacts organic search ranking, improves user experience (UI/UX) and increase conversion rates.',
|
|
icon: 'tabler:rocket',
|
|
},
|
|
{
|
|
title: 'Search Engine Optimization (SEO)',
|
|
description:
|
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
|
icon: 'tabler:arrows-right-left',
|
|
},
|
|
{
|
|
title: 'Open to new ideas and contributions',
|
|
description:
|
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
|
icon: 'tabler:bulb',
|
|
},
|
|
],
|
|
]
|
|
|
|
return (
|
|
<section class="scroll-mt-16" id="features">
|
|
<div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20">
|
|
<div class="mb-10 md:mx-auto sm:text-center md:mb-12 max-w-3xl">
|
|
<p class="text-base text-primary-600 dark:text-purple-200 font-semibold tracking-wide uppercase">
|
|
Features
|
|
</p>
|
|
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
|
What you get with{' '}
|
|
<span class="whitespace-nowrap">Qwind</span>
|
|
</h2>
|
|
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400">
|
|
Sed ut perspiciatis unde omnis iste natus error sit
|
|
voluptatem accusantium doloremque rem aperiam, eaque
|
|
ipsa quae.
|
|
</p>
|
|
</div>
|
|
<div class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
|
|
{items.map((subitems) => (
|
|
<div class="space-y-8 sm:px-8">
|
|
{subitems.map(({ title, description }) => (
|
|
<div class="flex flex-row max-w-md">
|
|
<div class="mb-4 mr-4">
|
|
<div class="text-white flex items-center justify-center w-12 h-12 rounded-full bg-secondary-500 dark:bg-secondary-700">
|
|
<IconStar />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="mb-3 text-xl font-bold">
|
|
{title}
|
|
</h3>
|
|
<p class="text-gray-600 dark:text-slate-400">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
})
|