MIF_E31221407_FE/components/landing/introduction/features-sct.vue

113 lines
6.4 KiB
Vue

<template>
<!-- Features Section -->
<section id="features" class="container py-20">
<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">Powerful Prediction Features
</h2>
<p class="max-w-[85%] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
Our AI-powered platform offers a range of features to help you make accurate predictions.
</p>
</div>
<div class="mx-auto grid justify-center gap-4 sm:grid-cols-2 md:max-w-[64rem] md:grid-cols-3 mt-16">
<div class="relative overflow-hidden rounded-lg border bg-background p-6">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-primary">
<path d="M3 3v18h18"></path>
<path d="m19 9-5 5-4-4-3 3"></path>
</svg>
</div>
<div class="mt-4 space-y-2">
<h3 class="font-bold">Data Analysis</h3>
<p class="text-sm text-muted-foreground">
Analyze historical data to identify patterns and trends.
</p>
</div>
</div>
<div class="relative overflow-hidden rounded-lg border bg-background p-6">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-primary">
<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
<path d="M21 3v5h-5"></path>
</svg>
</div>
<div class="mt-4 space-y-2">
<h3 class="font-bold">Real-time Predictions</h3>
<p class="text-sm text-muted-foreground">
Get instant predictions based on the latest data inputs.
</p>
</div>
</div>
<div class="relative overflow-hidden rounded-lg border bg-background p-6">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-primary">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"></path>
</svg>
</div>
<div class="mt-4 space-y-2">
<h3 class="font-bold">Secure & Private</h3>
<p class="text-sm text-muted-foreground">
Your data is encrypted and protected at all times.
</p>
</div>
</div>
<div class="relative overflow-hidden rounded-lg border bg-background p-6">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-primary">
<path d="M2 3h20"></path>
<path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"></path>
<path d="m7 21 5-5 5 5"></path>
</svg>
</div>
<div class="mt-4 space-y-2">
<h3 class="font-bold">Custom Reports</h3>
<p class="text-sm text-muted-foreground">
Generate detailed reports with visualizations and insights.
</p>
</div>
</div>
<div class="relative overflow-hidden rounded-lg border bg-background p-6">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-primary">
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
</svg>
</div>
<div class="mt-4 space-y-2">
<h3 class="font-bold">AI Models</h3>
<p class="text-sm text-muted-foreground">
Choose from various AI models optimized for different prediction tasks.
</p>
</div>
</div>
<div class="relative overflow-hidden rounded-lg border bg-background p-6">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-primary">
<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
<path d="m2 12 5-5"></path>
<path d="M2 12h10"></path>
<path d="m12 12 5 5"></path>
</svg>
</div>
<div class="mt-4 space-y-2">
<h3 class="font-bold">API Integration</h3>
<p class="text-sm text-muted-foreground">
Easily integrate our prediction API into your existing systems.
</p>
</div>
</div>
</div>
</section>
</template>