Gekon Dev
80f98282e7
Refresh visual design across hero, map, features, FAQ, and performance sections with tighter spacing, richer animations, updated branding assets, and localization/content tweaks.
55 lines
2.7 KiB
TypeScript
55 lines
2.7 KiB
TypeScript
import { Gamepad2, Tv, Briefcase, Download, Globe } from "lucide-react";
|
|
import { useScrollAnimation } from "@/hooks/useScrollAnimation";
|
|
import { useI18n } from "@/i18n/context";
|
|
import type { TranslationKeys } from "@/i18n/translations";
|
|
|
|
const cases: { icon: typeof Gamepad2; titleKey: TranslationKeys; descKey: TranslationKeys }[] = [
|
|
{ icon: Gamepad2, titleKey: "case_gaming", descKey: "case_gaming_desc" },
|
|
{ icon: Tv, titleKey: "case_streaming", descKey: "case_streaming_desc" },
|
|
{ icon: Briefcase, titleKey: "case_work", descKey: "case_work_desc" },
|
|
{ icon: Download, titleKey: "case_downloads", descKey: "case_downloads_desc" },
|
|
{ icon: Globe, titleKey: "case_browsing", descKey: "case_browsing_desc" },
|
|
];
|
|
|
|
export function UseCasesSection() {
|
|
const { ref, isVisible } = useScrollAnimation();
|
|
const { t } = useI18n();
|
|
|
|
return (
|
|
<section className="relative px-4 pb-0 pt-5 sm:pb-0 sm:pt-5">
|
|
<div className="mx-auto max-w-5xl" ref={ref}>
|
|
<h2 className={`mb-8 text-center text-3xl font-bold sm:text-4xl ${isVisible ? "animate-fade-up" : "opacity-0"}`}>
|
|
{t("cases_title_1")} <span className="gradient-text">{t("cases_title_2")}</span>
|
|
</h2>
|
|
|
|
<div className="flex flex-wrap justify-center gap-4">
|
|
{cases.map((c, i) => (
|
|
<div
|
|
key={c.titleKey}
|
|
className={`glass-card group flex items-center gap-3 rounded-full px-6 py-3 transition-all duration-500 hover:scale-[1.03] hover:shadow-lg hover:shadow-gekon-green/10 ${
|
|
isVisible ? "animate-fade-up" : "opacity-0"
|
|
}`}
|
|
style={{
|
|
animationName: isVisible ? "fade-up, float" : undefined,
|
|
animationDuration: isVisible ? "0.6s, 5.4s" : undefined,
|
|
animationTimingFunction: isVisible ? "ease-out, ease-in-out" : undefined,
|
|
animationIterationCount: isVisible ? "1, infinite" : undefined,
|
|
animationFillMode: isVisible ? "both, both" : undefined,
|
|
animationDelay: isVisible ? `${i * 0.08}s, ${0.2 + i * 0.16}s` : `${i * 0.08}s`,
|
|
}}
|
|
>
|
|
<div className="rounded-full bg-gekon-green/10 p-1.5 transition-all duration-300 group-hover:bg-gekon-green/20 group-hover:shadow-[0_0_18px_rgba(16,185,129,0.25)]">
|
|
<c.icon size={19} className="text-gekon-green transition-transform duration-300 group-hover:scale-110" />
|
|
</div>
|
|
<div>
|
|
<span className="font-semibold text-foreground transition-colors group-hover:text-gekon-green">{t(c.titleKey)}</span>
|
|
<span className="ml-2 text-sm text-muted-foreground">{t(c.descKey)}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|