components/features-section.tsx - main - smaker21/YouTube-transcript-using-supadata

components/features-section.tsx
87 строк3 KB
Ilya Ostapov
new file: .env.example
12 фев 2026, 18:43
12 фев 2026, 18:437016baa
import {
  Zap,
  Shield,
  Clock,
  FileDown,
  Globe,
  Cpu,
} from "lucide-react";

const features = [
  {
    icon: Zap,
    title: "Мгновенный результат",
    description:
      "Получите структурированное саммари за считанные секунды. Никакого ожидания обработки на сервере.",
  },
  {
    icon: Shield,
    title: "Полная приватность",
    description:
      "Все данные обрабатываются в вашем браузере. Никакие видео и тексты не отправляются на сторонние серверы.",
  },
  {
    icon: Clock,
    title: "Тайм-коды",
    description:
      "Каждый ключевой момент привязан к временной метке. Кликните, чтобы перейти к нужному фрагменту.",
  },
  {
    icon: FileDown,
    title: "Экспорт в Markdown",
    description:
      "Скопируйте готовое саммари в формате Markdown для Notion, Obsidian или любого другого приложения.",
  },
  {
    icon: Globe,
    title: "Мультиязычность",
    description:
      "Работает с субтитрами на любом языке. Автоматическое определение языка и адаптация под него.",
  },
  {
    icon: Cpu,
    title: "AI в браузере",
    description:
      "Локальная модель суммаризации прямо в вашем браузере. Никаких API-ключей и подписок.",
  },
];

export function FeaturesSection() {
  return (
    <section id="features" className="px-6 py-20 md:py-28">
      <div className="mx-auto max-w-6xl">
        <div className="mx-auto mb-14 max-w-2xl text-center">
          <p className="mb-3 text-sm font-medium uppercase tracking-widest text-primary">
            Возможности
          </p>
          <h2 className="text-balance text-3xl font-bold tracking-tight text-foreground md:text-4xl">
            Все, что нужно для быстрой работы с видео
          </h2>
          <p className="mt-4 text-pretty text-muted-foreground">
            Инструменты, которые экономят ваше время и помогают извлечь максимум
            из каждого видео.
          </p>
        </div>

        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {features.map((feature) => (
            <div
              key={feature.title}
              className="group rounded-xl border border-border bg-card p-6 transition-all hover:border-primary/30 hover:bg-card/80"
            >
              <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary/20">
                <feature.icon size={20} />
              </div>
              <h3 className="mb-2 text-base font-semibold text-foreground">
                {feature.title}
              </h3>
              <p className="text-sm leading-relaxed text-muted-foreground">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}