orohi
96 lines
3.0 KiB
TypeScript
96 lines
3.0 KiB
TypeScript
import {
|
||
Zap,
|
||
Link2,
|
||
Shield,
|
||
Globe,
|
||
HardDrive,
|
||
Sparkles,
|
||
} from "lucide-react";
|
||
|
||
const features = [
|
||
{
|
||
icon: Zap,
|
||
title: "Мгновенная загрузка",
|
||
description:
|
||
"Drag & drop или выбор файла — прямая ссылка готова за секунду.",
|
||
color: "text-amber-400",
|
||
bg: "bg-amber-400/10",
|
||
},
|
||
{
|
||
icon: Link2,
|
||
title: "Прямые ссылки",
|
||
description:
|
||
"Получайте прямую ссылку на изображение для форумов, чатов и сайтов.",
|
||
color: "text-indigo-400",
|
||
bg: "bg-indigo-400/10",
|
||
},
|
||
{
|
||
icon: Shield,
|
||
title: "Безопасность",
|
||
description:
|
||
"Файлы хранятся на защищённом сервере с контролем типов и размера.",
|
||
color: "text-emerald-400",
|
||
bg: "bg-emerald-400/10",
|
||
},
|
||
{
|
||
icon: Globe,
|
||
title: "Доступ отовсюду",
|
||
description:
|
||
"Загружайте с любого устройства — работает на всех платформах.",
|
||
color: "text-sky-400",
|
||
bg: "bg-sky-400/10",
|
||
},
|
||
{
|
||
icon: HardDrive,
|
||
title: "Надёжное хранение",
|
||
description:
|
||
"PostgreSQL + Docker — ваши фото в безопасности и всегда доступны.",
|
||
color: "text-violet-400",
|
||
bg: "bg-violet-400/10",
|
||
},
|
||
{
|
||
icon: Sparkles,
|
||
title: "Без регистрации",
|
||
description:
|
||
"Не нужен аккаунт — просто загрузите и поделитесь ссылкой.",
|
||
color: "text-pink-400",
|
||
bg: "bg-pink-400/10",
|
||
},
|
||
];
|
||
|
||
export function Features() {
|
||
return (
|
||
<section id="features" className="px-6 py-20">
|
||
<div className="mx-auto max-w-7xl">
|
||
<div className="mb-14 text-center">
|
||
<h2 className="text-3xl font-bold md:text-4xl">
|
||
Почему <span className="gradient-text">PhotoHost</span>?
|
||
</h2>
|
||
<p className="mt-3 text-muted">
|
||
Всё, что нужно для быстрого обмена фотографиями
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||
{features.map((feature) => (
|
||
<div
|
||
key={feature.title}
|
||
className="glass group rounded-2xl p-6 transition-all duration-300 hover:border-indigo-500/30 hover:bg-surface-hover"
|
||
>
|
||
<div
|
||
className={`mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl ${feature.bg} transition-transform group-hover:scale-110`}
|
||
>
|
||
<feature.icon className={`h-6 w-6 ${feature.color}`} />
|
||
</div>
|
||
<h3 className="mb-2 text-lg font-semibold">{feature.title}</h3>
|
||
<p className="text-sm leading-relaxed text-muted">
|
||
{feature.description}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|