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/UseCasesSection.tsx
+15 -6
View File
@@ -16,9 +16,9 @@ export function UseCasesSection() {
const { t } = useI18n();
return (
<section className="relative px-4 py-24 sm:py-32">
<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-12 text-center text-3xl font-bold sm:text-4xl ${isVisible ? "animate-fade-up" : "opacity-0"}`}>
<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>
@@ -26,14 +26,23 @@ export function UseCasesSection() {
{cases.map((c, i) => (
<div
key={c.titleKey}
className={`glass-card flex items-center gap-3 rounded-full px-6 py-3 transition-all hover:scale-105 hover:shadow-lg hover:shadow-gekon-green/5 ${
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={{ animationDelay: `${i * 0.08}s` }}
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`,
}}
>
<c.icon size={20} className="text-gekon-green" />
<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">{t(c.titleKey)}</span>
<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>