Loading...
Back

#Milestone Cards

statistic

Presents significant company achievements or milestones in visually impactful cards with large stats and descriptions.

Milestones

Key Milestones We've Reached

Celebrating our key achievements and the significant progress we've made on our journey.

1M+

Active Users Served

Across all our platforms globally, fostering a vibrant community.

20+

Countries Reached

Expanding our global footprint and connecting with diverse markets.

50M

Interactions Processed

Securely and efficiently handling millions of user interactions every year.

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16 text-center">
    <div class="mb-10 lg:mb-16">
        <div class="inline-block mx-auto mb-2 lg:mb-4 rounded-full bg-blue-600 px-4 py-2 text-sm font-bold uppercase text-white">
            Milestones
        </div>
        <h2 class="text-3xl lg:text-5xl font-bold mb-3 lg:mb-4">
            Key Milestones We've Reached
        </h2>
        <p class="text-lg lg:text-xl text-neutral-700 max-w-xl mx-auto">
            Celebrating our key achievements and the significant progress we've made on our journey.
        </p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-12">
        <!-- Stat 1 -->
        <div class="bg-white p-8 rounded-xl shadow-lg hover:scale-105 transition-transform duration-300">
            <p class="text-6xl lg:text-7xl font-extrabold text-blue-600 mb-3">1M+</p>
            <h3 class="text-xl lg:text-2xl font-semibold text-neutral-800 mb-1">Active Users Served</h3>
            <p class="text-neutral-600">Across all our platforms globally, fostering a vibrant community.</p>
        </div>
        <!-- Stat 2 -->
        <div class="bg-white p-8 rounded-xl shadow-lg hover:scale-105 transition-transform duration-300">
            <p class="text-6xl lg:text-7xl font-extrabold text-blue-600 mb-3">20+</p>
            <h3 class="text-xl lg:text-2xl font-semibold text-neutral-800 mb-1">Countries Reached</h3>
            <p class="text-neutral-600">Expanding our global footprint and connecting with diverse markets.</p>
        </div>
        <!-- Stat 3 -->
        <div class="bg-white p-8 rounded-xl shadow-lg hover:scale-105 transition-transform duration-300">
            <p class="text-6xl lg:text-7xl font-extrabold text-blue-600 mb-3">50M</p>
            <h3 class="text-xl lg:text-2xl font-semibold text-neutral-800 mb-1">Interactions Processed</h3>
            <p class="text-neutral-600">Securely and efficiently handling millions of user interactions every year.</p>
        </div>
    </div>
</section>
Milestones

Key Milestones We've Reached

Celebrating our key achievements and the significant progress we've made on our journey.

1M+

Active Users Served

Across all our platforms globally, fostering a vibrant community.

20+

Countries Reached

Expanding our global footprint and connecting with diverse markets.

50M

Interactions Processed

Securely and efficiently handling millions of user interactions every year.

<section layout="container" space="m-x:auto m-y:large p-x:medium-3x tw-lg:m-y:big-3x tw-lg:p-x:big-3x" visual="text:center">
    <div space="m-b:large-3x tw-lg:m-b:big-3x">
        <div layout="inline" space="m-x:auto m-b:small tw-lg:m-b:medium p-x:medium p-y:small" visual="rounded:round bg:blue-600 text-size:small font:tw-bold uppercase text:white">
            Milestones
        </div>
        <h2 space="m-b:small-3x tw-lg:m-b:medium" visual="text-size:grand tw-lg:text-size:mount font:tw-bold">
            Key Milestones We've Reached
        </h2>
        <p space="max-w:[xl] m-x:auto" visual="text-size:large tw-lg:text-size:big text:neutral-700">
            Celebrating our key achievements and the significant progress we've made on our journey.
        </p>
    </div>
    <div layout="grid grid-cols:1 tw-md:grid-cols:3" space="g:large tw-lg:g:big">
        <!-- Stat 1 -->
        <div space="p:large" visual="bg:white rounded:medium shadow:big transition:transform duration:slow" class="hover:scale-105">
            <p space="m-b:small-3x" visual="text-size:mega tw-lg:text-size:giga font:tw-extrabold text:blue-600">1M+</p>
            <h3 space="m-b:tiny" visual="text-size:big tw-lg:text-size:huge font:tw-semibold text:neutral-800">Active Users Served</h3>
            <p visual="text:neutral-600">Across all our platforms globally, fostering a vibrant community.</p>
        </div>
        <!-- Stat 2 -->
        <div space="p:large" visual="bg:white rounded:medium shadow:big transition:transform duration:slow" class="hover:scale-105">
            <p space="m-b:small-3x" visual="text-size:mega tw-lg:text-size:giga font:tw-extrabold text:blue-600">20+</p>
            <h3 space="m-b:tiny" visual="text-size:big tw-lg:text-size:huge font:tw-semibold text:neutral-800">Countries Reached</h3>
            <p visual="text:neutral-600">Expanding our global footprint and connecting with diverse markets.</p>
        </div>
        <!-- Stat 3 -->
        <div space="p:large" visual="bg:white rounded:medium shadow:big transition:transform duration:slow" class="hover:scale-105">
            <p space="m-b:small-3x" visual="text-size:mega tw-lg:text-size:giga font:tw-extrabold text:blue-600">50M</p>
            <h3 space="m-b:tiny" visual="text-size:big tw-lg:text-size:huge font:tw-semibold text:neutral-800">Interactions Processed</h3>
            <p visual="text:neutral-600">Securely and efficiently handling millions of user interactions every year.</p>
        </div>
    </div>
</section>