36 lines
2.0 KiB
Vue
36 lines
2.0 KiB
Vue
<template>
|
|
|
|
<!-- How It Works Section -->
|
|
<section id="how-it-works" class=" py-20 bg-muted/50 rounded-lg my-10">
|
|
<div class="mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center">
|
|
<h2 class="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">How It Works</h2>
|
|
<p class="max-w-[85%] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
|
|
Our prediction platform is easy to use and delivers accurate results in just a few steps.
|
|
</p>
|
|
</div>
|
|
<div class="mx-auto grid max-w-5xl grid-cols-1 gap-8 md:grid-cols-3 md:gap-12 mt-16">
|
|
<div class="flex flex-col items-center space-y-4 text-center">
|
|
<div
|
|
class="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-3xl font-bold text-primary-foreground">
|
|
1</div>
|
|
<h3 class="text-xl font-bold">Input Your Data</h3>
|
|
<p class="text-muted-foreground">Upload your historical data or connect to your data sources.</p>
|
|
</div>
|
|
<div class="flex flex-col items-center space-y-4 text-center">
|
|
<div
|
|
class="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-3xl font-bold text-primary-foreground">
|
|
2</div>
|
|
<h3 class="text-xl font-bold">Select AI Model</h3>
|
|
<p class="text-muted-foreground">Choose the prediction model that best fits your needs.</p>
|
|
</div>
|
|
<div class="flex flex-col items-center space-y-4 text-center">
|
|
<div
|
|
class="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-3xl font-bold text-primary-foreground">
|
|
3</div>
|
|
<h3 class="text-xl font-bold">Get Predictions</h3>
|
|
<p class="text-muted-foreground">Receive accurate predictions and actionable insights.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</template> |