1nt/GEKON-SUITE-VPN
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign landing sections and interactions

Browse Source 
Refresh visual design across hero, map, features, FAQ, and performance sections with tighter spacing, richer animations, updated branding assets, and localization/content tweaks.
This commit is contained in:
Gekon Dev
2026-05-06 19:02:07 +03:00
parent c1c139de32
commit 80f98282e7
30 changed files with 15091 additions and 1620 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FeaturesSection.tsx
+9 -9
View File
@@ -17,10 +17,10 @@ export function FeaturesSection() {
const { t } = useI18n();
return (
<section id="technology" className="relative px-4 py-24 sm:py-32">
<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-16 text-center">
<h2 className={`mb-4 text-3xl font-bold sm:text-4xl ${isVisible ? "animate-fade-up" : "opacity-0"}`}>
<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"}`}>
@@ -28,20 +28,20 @@ export function FeaturesSection() {
</p>
</div>
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<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-xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-gekon-green/5 ${
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-4 flex h-12 w-12 items-center justify-center rounded-lg 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={24} className="text-gekon-green" />
<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-2 text-lg font-semibold text-foreground">{t(feature.titleKey)}</h3>
<p className="text-sm leading-relaxed text-muted-foreground">{t(feature.descKey)}</p>
<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>