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.
52 lines
2.5 KiB
TypeScript
52 lines
2.5 KiB
TypeScript
import { Zap, Rocket, Globe, Wrench, BarChart3, Settings } from "lucide-react";
|
|
import { useScrollAnimation } from "@/hooks/useScrollAnimation";
|
|
import { useI18n } from "@/i18n/context";
|
|
import type { TranslationKeys } from "@/i18n/translations";
|
|
|
|
const features: { icon: typeof Zap; titleKey: TranslationKeys; descKey: TranslationKeys }[] = [
|
|
{ icon: Zap, titleKey: "feature_1_title", descKey: "feature_1_desc" },
|
|
{ icon: Rocket, titleKey: "feature_2_title", descKey: "feature_2_desc" },
|
|
{ icon: Globe, titleKey: "feature_3_title", descKey: "feature_3_desc" },
|
|
{ icon: Wrench, titleKey: "feature_4_title", descKey: "feature_4_desc" },
|
|
{ icon: BarChart3, titleKey: "feature_5_title", descKey: "feature_5_desc" },
|
|
{ icon: Settings, titleKey: "feature_6_title", descKey: "feature_6_desc" },
|
|
];
|
|
|
|
export function FeaturesSection() {
|
|
const { ref, isVisible } = useScrollAnimation();
|
|
const { t } = useI18n();
|
|
|
|
return (
|
|
<section id="technology" className="relative px-4 pb-0 pt-5 sm:pb-0 sm:pt-5">
|
|
<div className="mx-auto max-w-7xl" ref={ref}>
|
|
<div className="mb-7 text-center">
|
|
<h2 className={`mb-3 text-3xl font-bold sm:text-4xl ${isVisible ? "animate-fade-up" : "opacity-0"}`}>
|
|
{t("features_title_1")} <span className="gradient-text">{t("features_title_2")}</span>
|
|
</h2>
|
|
<p className={`mx-auto max-w-2xl text-muted-foreground ${isVisible ? "animate-fade-up-delay-1" : "opacity-0"}`}>
|
|
{t("features_subtitle")}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
{features.map((feature, i) => (
|
|
<div
|
|
key={feature.titleKey}
|
|
className={`glass-card group rounded-lg p-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-gekon-green/5 ${
|
|
isVisible ? "animate-fade-up" : "opacity-0"
|
|
}`}
|
|
style={{ animationDelay: `${i * 0.1}s` }}
|
|
>
|
|
<div className="mb-3 flex h-9 w-9 items-center justify-center rounded-md bg-gradient-to-br from-gekon-green/20 to-gekon-cyan/20 transition-all group-hover:from-gekon-green/30 group-hover:to-gekon-cyan/30">
|
|
<feature.icon size={19} className="text-gekon-green" />
|
|
</div>
|
|
<h3 className="mb-1.5 text-base font-semibold text-foreground">{t(feature.titleKey)}</h3>
|
|
<p className="text-sm leading-snug text-muted-foreground">{t(feature.descKey)}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|