initial site

site/src/components/HeroActions.tsx

@@ -0,0 +1,80 @@
+import { ArrowUpRight, Bot, Dices, Flame, Gamepad2, Sparkles } from "lucide-react";
+import { cn } from "../utils/cn";
+import { boardGames, hookahMixes, tobaccoFlavors } from "../data/catalog";
+
+type Chip = {
+  href: string;
+  icon: typeof Dices;
+  label: string;
+  tone: "violet" | "cyan";
+};
+
+/* Подсветка постоянная (не только hover): на тач-устройствах hover нет,
+   иначе чипы там выглядят «не подсвеченными». Тона чередуем. */
+const toneStyles = {
+  violet:
+    "border-neon-violet/50 bg-neon-violet/10 text-white shadow-[0_0_16px_-4px_rgba(176,38,255,0.55)] hover:border-neon-violet hover:bg-neon-violet/20 hover:shadow-[0_0_28px_-2px_rgba(176,38,255,0.8)]",
+  cyan: "border-neon-cyan/40 bg-neon-cyan/8 text-white shadow-[0_0_16px_-4px_rgba(0,240,255,0.5)] hover:border-neon-cyan hover:bg-neon-cyan/15 hover:shadow-[0_0_28px_-2px_rgba(0,240,255,0.75)]",
+} as const;
+
+const toneIcon = {
+  violet: { icon: "text-fuchsia-300", arrow: "text-fuchsia-200/70" },
+  cyan: { icon: "text-neon-cyan", arrow: "text-cyan-200/70" },
+} as const;
+
+/* 51 микс / 52 микса / 55 миксов — русское множественное для счётчика */
+const mixPlural = (n: number): string => {
+  const mod10 = n % 10;
+  const mod100 = n % 100;
+  if (mod10 === 1 && mod100 !== 11) return `${n} микс`;
+  if (mod10 >= 2 && mod10 <= 4 && (mod100 < 12 || mod100 > 14)) return `${n} микса`;
+  return `${n} миксов`;
+};
+
+const chips: Chip[] = [
+  { href: "#/mixes", icon: Sparkles, label: mixPlural(hookahMixes.length), tone: "violet" },
+  { href: "#/flavors", icon: Flame, label: `${tobaccoFlavors.length}+ вкусов табака`, tone: "cyan" },
+  { href: "#/games", icon: Gamepad2, label: "PlayStation 5", tone: "violet" },
+  { href: "#/board-games", icon: Dices, label: `${boardGames.length} настолок`, tone: "cyan" },
+];
+
+export default function HeroActions() {
+  return (
+    <div className="mt-10 flex flex-wrap gap-3">
+      <a
+        href="#/ai-mix"
+        className="group inline-flex min-h-11 max-w-full items-center gap-2.5 rounded-full border border-neon-cyan/60 bg-gradient-to-r from-neon-violet/25 via-neon-cyan/20 to-neon-violet/15 px-4.5 py-2.5 text-sm font-bold text-white backdrop-blur-lg shadow-[0_0_24px_rgba(0,240,255,0.35)] transition-all duration-300 hover:border-neon-cyan hover:shadow-[0_0_38px_rgba(0,240,255,0.65)] hover:-translate-y-0.5 active:scale-[0.97] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-neon-cyan"
+      >
+        <Bot size={16} className="shrink-0 text-neon-cyan" aria-hidden="true" />
+        <span>Автоподбор микса</span>
+        <ArrowUpRight
+          size={14}
+          className="shrink-0 text-cyan-200 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5"
+          aria-hidden="true"
+        />
+      </a>
+
+      {chips.map((chip) => (
+        <a
+          key={chip.href}
+          href={chip.href}
+          className={cn(
+            "group inline-flex min-h-11 max-w-full items-center gap-2.5 rounded-full border px-4 py-2.5 text-sm font-semibold text-white backdrop-blur-lg transition-all duration-300 hover:-translate-y-0.5 active:scale-[0.97] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-neon-cyan",
+            toneStyles[chip.tone]
+          )}
+        >
+          <chip.icon size={15} className={cn("shrink-0", toneIcon[chip.tone].icon)} aria-hidden="true" />
+          <span>{chip.label}</span>
+          <ArrowUpRight
+            size={14}
+            className={cn(
+              "shrink-0 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5",
+              toneIcon[chip.tone].arrow
+            )}
+            aria-hidden="true"
+          />
+        </a>
+      ))}
+    </div>
+  );
+}