UIComponentes | Features 1

Why us?
Everything you need to build amazing products

Powerful features to help you manage, optimize, and scale your projects with ease.
Lightning Fast

Optimized for speed and performance
Experience blazing-fast load times and smooth interactions with our optimized infrastructure.
Enterprise Security

Bank-grade security protocols
Advanced encryption and security measures to keep your data safe and protected.
Advanced Analytics

Deep insights and metrics
Comprehensive analytics and reporting tools to track your project's performance.
AI Powered

Smart automation & insights
Leverage artificial intelligence to automate tasks and get intelligent recommendations.
---
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Divider } from "@/components/ui/divider";
import {
    Card,
    CardHeader,
    CardTitle,
    CardDescription,
    CardContent,
    CardFooter,
} from "@/components/ui/card";
---

<section class="w-full min-h-screen py-24 bg-neutral-950">
    <div class="container mx-auto px-4">
        <header class="text-center mb-12">
            <Badge
                variant="outline"
                class="mb-4 text-xs font-semibold tracking-wide uppercase bg-gray-700 text-white border-0"
            >
                Why us?
            </Badge>
            <h2 class="text-4xl font-bold text-white mb-4">Everything you need to build amazing products</h2>
            <p class="text-neutral-400 max-w-2xl mx-auto">Powerful features to help you manage, optimize, and scale your projects with ease.</p>
        </header>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-7xl mx-auto px-2">
            <!-- Performance -->
            <span class="bg-gradient-to-br from-zinc-900 via-gray-700 to-zinc-900 p-0.5 rounded-2xl">
                <Card class="border-neutral-800 bg-neutral-900 text-white shadow-xl rounded-[16.5px] h-full">
                    <CardHeader>
                        <div class="w-12 h-12 mb-4 rounded-lg bg-indigo-500/20 flex items-center justify-center text-indigo-400">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                        </div>
                        <CardTitle class="text-xl font-bold">Lightning Fast</CardTitle>
                        <CardDescription class="text-neutral-400">Optimized for speed and performance</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <p class="text-sm text-neutral-300">Experience blazing-fast load times and smooth interactions with our optimized infrastructure.</p>
                    </CardContent>
                </Card>
            </span>

            <!-- Security -->
            <span class="bg-gradient-to-br from-zinc-900 via-gray-700 to-zinc-900 p-0.5 rounded-2xl">
                <Card class="border-neutral-800 bg-neutral-900 text-white shadow-xl rounded-[16.5px] h-full">
                    <CardHeader>
                        <div class="w-12 h-12 mb-4 rounded-lg bg-purple-500/20 flex items-center justify-center text-purple-400">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                            </svg>
                        </div>
                        <CardTitle class="text-xl font-bold">Enterprise Security</CardTitle>
                        <CardDescription class="text-neutral-400">Bank-grade security protocols</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <p class="text-sm text-neutral-300">Advanced encryption and security measures to keep your data safe and protected.</p>
                    </CardContent>
                </Card>
            </span>

            <!-- Analytics -->
            <span class="bg-gradient-to-br from-zinc-900 via-gray-700 to-zinc-900 p-0.5 rounded-2xl">
                <Card class="border-neutral-800 bg-neutral-900 text-white shadow-xl rounded-[16.5px] h-full">
                    <CardHeader>
                        <div class="w-12 h-12 mb-4 rounded-lg bg-pink-500/20 flex items-center justify-center text-pink-400">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                            </svg>
                        </div>
                        <CardTitle class="text-xl font-bold">Advanced Analytics</CardTitle>
                        <CardDescription class="text-neutral-400">Deep insights and metrics</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <p class="text-sm text-neutral-300">Comprehensive analytics and reporting tools to track your project's performance.</p>
                    </CardContent>
                </Card>
            </span>

            <!-- AI Integration -->
            <span class="bg-gradient-to-br from-zinc-900 via-gray-700 to-zinc-900 p-0.5 rounded-2xl">
                <Card class="border-neutral-800 bg-neutral-900 text-white shadow-xl rounded-[16.5px] h-full">
                    <CardHeader>
                        <div class="w-12 h-12 mb-4 rounded-lg bg-indigo-500/20 flex items-center justify-center text-indigo-400">
                        <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=""><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6z" /></svg>
                        </div>
                        <CardTitle class="text-xl font-bold">AI Powered</CardTitle>
                        <CardDescription class="text-neutral-400">Smart automation & insights</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <p class="text-sm text-neutral-300">Leverage artificial intelligence to automate tasks and get intelligent recommendations.</p>
                    </CardContent>
                </Card>
            </span>
        </div>
        <div class="flex justify-center mt-5">
            <Button class="bg-indigo-500/50 hover:bg-indigo-600/50 border border-indigo-500 hover:border-indigo-600 transition-all duration-300 text-white">
                Explore all features →
            </Button>
        </div>

    </div>
</section>
Features-1.astro