first commit

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-06 14:59:02 +03:00
commit 8bb436ea4f
26 changed files with 1075 additions and 0 deletions
@@ -0,0 +1,95 @@
+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>
+  );
+}