105 lines
4.3 KiB
TypeScript
105 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { motion } from "framer-motion";
|
|
import { Shield, EyeOff } from "lucide-react";
|
|
import { Dictionary } from "@/lib/IDict";
|
|
import { CyberButton } from "../ui/cyber-button";
|
|
import { NetrunnerMatrix } from "../graphics/NetrunnerMatrix";
|
|
|
|
export function Hero({
|
|
dict,
|
|
lang,
|
|
}: {
|
|
dict: Dictionary["hero"];
|
|
lang: string;
|
|
}) {
|
|
const [isVpnOn, setIsVpnOn] = useState(false);
|
|
|
|
return (
|
|
<section className="relative pt-32 pb-20 md:pt-48 md:pb-32 flex flex-col items-center text-center px-4 min-h-[95vh] justify-center overflow-hidden select-none">
|
|
{/* Фон всегда активен для кликов */}
|
|
<div className="absolute inset-0 -z-10 bg-background pointer-events-auto">
|
|
<NetrunnerMatrix isSecure={isVpnOn} key={lang} />
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_transparent_20%,_var(--background)_120%)] opacity-80 pointer-events-none" />
|
|
<div className="absolute inset-x-0 top-0 h-64 bg-gradient-to-b from-background via-transparent to-transparent opacity-90 pointer-events-none" />
|
|
</div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
// Пропускаем клики сквозь контейнер текста на фон!
|
|
className="relative z-10 w-full max-w-4xl mx-auto pt-40 md:pt-48 pb-20 pointer-events-none"
|
|
>
|
|
<div className="flex flex-col items-center">
|
|
{/* Интерактивные элементы перехватывают клик обратно (pointer-events-auto) */}
|
|
<motion.div
|
|
layout
|
|
className={`inline-flex items-center gap-2 px-4 py-1.5 rounded-full border text-sm font-bold transition-colors duration-500 shadow-sm cursor-default pointer-events-auto ${
|
|
isVpnOn
|
|
? "bg-primary/10 border-primary/50 text-primary"
|
|
: "bg-secondary/10 border-secondary/50 text-secondary"
|
|
}`}
|
|
>
|
|
{isVpnOn ? (
|
|
<Shield className="w-4 h-4" />
|
|
) : (
|
|
<EyeOff className="w-4 h-4" />
|
|
)}
|
|
<span>{isVpnOn ? dict.badgeSecure : dict.badge}</span>
|
|
</motion.div>
|
|
|
|
{/* Якорь для глаз */}
|
|
<div id="eye-anchor" className="h-28 md:h-40 w-full flex-none mt-6 mb-4" />
|
|
|
|
<h1 className="text-4xl md:text-6xl font-extrabold tracking-tight text-foreground mb-6 font-mono cursor-default">
|
|
{dict.titleStart}{" "}
|
|
<span
|
|
className={`transition-all duration-500 ${
|
|
isVpnOn
|
|
? "text-primary drop-shadow-[0_0_15px_rgba(139,61,255,0.4)]"
|
|
: "text-secondary drop-shadow-[0_0_15px_rgba(0,229,242,0.4)]"
|
|
}`}
|
|
>
|
|
{dict.titleHighlight}
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-muted-foreground font-medium text-lg md:text-xl max-w-2xl mx-auto mb-12 cursor-default">
|
|
{dict.subtitle}
|
|
</p>
|
|
|
|
<div className="flex flex-col items-center gap-8 mb-12">
|
|
<div className="flex items-center gap-4 bg-card/80 backdrop-blur-xl border border-border p-4 rounded-3xl shadow-md transition-colors duration-300 pointer-events-auto">
|
|
<Switch
|
|
checked={isVpnOn}
|
|
onCheckedChange={setIsVpnOn}
|
|
className="data-[state=checked]:bg-primary data-[state=unchecked]:bg-secondary"
|
|
/>
|
|
<span
|
|
className={`text-base font-bold font-mono transition-colors ${isVpnOn ? "text-primary" : "text-foreground"}`}
|
|
>
|
|
Netrunner VPN
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-6 justify-center w-full sm:w-auto font-mono pointer-events-auto">
|
|
<CyberButton
|
|
href={`/${lang}/download`}
|
|
variant={isVpnOn ? "primary" : "secondary"}
|
|
>
|
|
{dict.ctaPrimary}
|
|
</CyberButton>
|
|
<CyberButton href={`/${lang}/nodes`} variant="secondary">
|
|
{dict.ctaSecondary}
|
|
</CyberButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
);
|
|
}
|