File size: 4,179 Bytes
88c4c60 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | "use client";
const FEATURES = [
{
icon: "link",
title: "Unified Endpoint",
desc: "Access all providers via a single standard API URL.",
colors: {
border: "hover:border-blue-500/50",
bg: "hover:bg-blue-500/5",
iconBg: "bg-blue-500/10",
iconText: "text-blue-500",
titleHover: "group-hover:text-blue-400"
}
},
{
icon: "bolt",
title: "Easy Setup",
desc: "Get up and running in minutes with npx command.",
colors: {
border: "hover:border-orange-500/50",
bg: "hover:bg-orange-500/5",
iconBg: "bg-orange-500/10",
iconText: "text-orange-500",
titleHover: "group-hover:text-orange-400"
}
},
{
icon: "shield_with_heart",
title: "Model Fallback",
desc: "Automatically switch providers on failure or high latency.",
colors: {
border: "hover:border-rose-500/50",
bg: "hover:bg-rose-500/5",
iconBg: "bg-rose-500/10",
iconText: "text-rose-500",
titleHover: "group-hover:text-rose-400"
}
},
{
icon: "monitoring",
title: "Usage Tracking",
desc: "Detailed analytics and cost monitoring across all models.",
colors: {
border: "hover:border-purple-500/50",
bg: "hover:bg-purple-500/5",
iconBg: "bg-purple-500/10",
iconText: "text-purple-500",
titleHover: "group-hover:text-purple-400"
}
},
{
icon: "key",
title: "OAuth & API Keys",
desc: "Securely manage credentials in one vault.",
colors: {
border: "hover:border-amber-500/50",
bg: "hover:bg-amber-500/5",
iconBg: "bg-amber-500/10",
iconText: "text-amber-500",
titleHover: "group-hover:text-amber-400"
}
},
{
icon: "cloud_sync",
title: "Cloud Sync",
desc: "Sync your configurations across devices instantly.",
colors: {
border: "hover:border-sky-500/50",
bg: "hover:bg-sky-500/5",
iconBg: "bg-sky-500/10",
iconText: "text-sky-500",
titleHover: "group-hover:text-sky-400"
}
},
{
icon: "terminal",
title: "CLI Support",
desc: "Works with Claude Code, Codex, Cline, Cursor, and more.",
colors: {
border: "hover:border-emerald-500/50",
bg: "hover:bg-emerald-500/5",
iconBg: "bg-emerald-500/10",
iconText: "text-emerald-500",
titleHover: "group-hover:text-emerald-400"
}
},
{
icon: "dashboard",
title: "Dashboard",
desc: "Visual dashboard for real-time traffic analysis.",
colors: {
border: "hover:border-fuchsia-500/50",
bg: "hover:bg-fuchsia-500/5",
iconBg: "bg-fuchsia-500/10",
iconText: "text-fuchsia-500",
titleHover: "group-hover:text-fuchsia-400"
}
},
];
export default function Features() {
return (
<section className="py-24 px-6" id="features">
<div className="max-w-7xl mx-auto">
<div className="mb-16">
<h2 className="text-3xl md:text-4xl font-bold mb-4">Powerful Features</h2>
<p className="text-gray-400 max-w-xl text-lg">
Everything you need to manage your AI infrastructure in one place, built for scale.
</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{FEATURES.map((feature) => (
<div
key={feature.title}
className={`p-6 rounded-xl bg-[#23180f] border border-[#3a2f27] ${feature.colors.border} ${feature.colors.bg} transition-all duration-300 group`}
>
<div className={`w-10 h-10 rounded-lg ${feature.colors.iconBg} flex items-center justify-center mb-4 ${feature.colors.iconText} group-hover:scale-110 transition-transform duration-300`}>
<span className="material-symbols-outlined">{feature.icon}</span>
</div>
<h3 className={`text-lg font-bold mb-2 ${feature.colors.titleHover} transition-colors`}>
{feature.title}
</h3>
<p className="text-sm text-gray-400 leading-relaxed">{feature.desc}</p>
</div>
))}
</div>
</div>
</section>
);
}
|