<section class="bg-darkPink-900 py-32">
<div class="container mx-auto px-4">
<h1 class="font-heading text-white text-4xl md:text-5xl mb-16 font-bold">How it works</h1>
<div class="flex flex-wrap -m-4">
<div class="w-full lg:w-1/3 p-4">
<div class="flex items-center gap-10 mb-4">
<div class="rounded-full w-14 h-14 flex items-center justify-center border border-pink-500">
<div class="w-11 h-11 bg-pinkSecondary-900 flex items-center justify-center rounded-full border border-white border-opacity-10">
<img class="h-6" src="vista-assets/images/how-it-works/calculator.svg" alt="">
</div>
</div>
<div class="border-b border-dashed border-white border-opacity-20 h-px flex-1"></div>
</div>
<p class="text-white text-xl font-semibold mb-1">Input Transactions</p>
<p class="text-white text-opacity-70 max-w-xs">Record your financial transactions such as receipts, and other relevant documents.</p>
</div>
<div class="w-full lg:w-1/3 p-4">
<div class="flex items-center gap-10 mb-4">
<div class="rounded-full w-14 h-14 flex items-center justify-center border border-pink-500">
<div class="w-11 h-11 bg-pinkSecondary-900 flex items-center justify-center rounded-full border border-white border-opacity-10">
<img class="h-6" src="vista-assets/images/how-it-works/tag.svg" alt="">
</div>
</div>
<div class="border-b border-dashed border-white border-opacity-20 h-px flex-1"></div>
</div>
<p class="text-white text-xl font-semibold mb-1">Categorization</p>
<p class="text-white text-opacity-70 max-w-sm">Automatically categorizes the recorded transactions, such as income and expenses.</p>
</div>
<div class="w-full lg:w-1/3 p-4">
<div class="rounded-full w-14 h-14 flex items-center justify-center border border-pink-500 mb-4">
<div class="w-11 h-11 bg-pinkSecondary-900 flex items-center justify-center rounded-full border border-white border-opacity-10">
<img class="h-6" src="vista-assets/images/how-it-works/document.svg" alt="">
</div>
</div>
<p class="text-white text-xl font-semibold mb-1">Generate Reports</p>
<p class="text-white text-opacity-70 max-w-xs">Generate financial reports, such as income statements, balance sheets, and cash flow.</p>
</div>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
