apply translations in all pages

2026-04-17 11:13:20 +02:00
parent dbeb294920
commit 7a8022d11a
15 changed files with 108 additions and 124 deletions
@@ -0,0 +1,82 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
+import { useTranslations } from "next-intl";
+
+export default function ApproachSection() {
+    const sectionRef = useRef<HTMLElement>(null);
+    const t = useTranslations('approach');
+    
+    const features = [
+        {
+            imagePath: '/icons/brain.svg',
+            title: t('feature1.title'),
+            text: t('feature1.text'),
+        },
+        {
+            imagePath: '/icons/building.svg',
+            title: t('feature2.title'),
+            text: t('feature2.text'),
+        },
+        {
+            imagePath: '/icons/people.svg',
+            title: t('feature3.title'),
+            text: t('feature3.text'),
+        },
+    ];
+
+    useEffect(() => {
+        const section = sectionRef.current;
+        if (!section) return;
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        entry.target.querySelectorAll('.reveal').forEach((el) => {
+                            el.classList.add('visible');
+                        });
+                        observer.unobserve(entry.target);
+                    }
+                });
+            },
+            { threshold: 0.15 }
+        );
+
+        observer.observe(section);
+        return () => observer.disconnect();
+    }, []);
+
+    return (
+        <section ref={sectionRef} className="w-full py-24 md:py-36">
+            {/* Section label */}
+            <div className="reveal flex items-center gap-3 mb-12 md:mb-16">
+                <span className="w-8 h-px bg-brand-brown/40" />
+                <span className="font-sans text-[11px] uppercase tracking-[0.2em] text-brand-brown/45">{t('sectionLabel')}</span>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-6 lg:gap-16">
+                {features.map((feature, i) => (
+                    <div
+                        key={i}
+                        className="reveal group flex flex-col items-center p-8 rounded-2xl border border-brand-brown/8 bg-white/40 hover:bg-white/70 hover:border-brand-brown/15 transition-all duration-300 cursor-default"
+                        style={{ transitionDelay: `${i * 120}ms` }}
+                    >
+                        {/* Icon container */}
+                        <div className="w-20 h-20 rounded-2xl bg-brand-brown/5 flex items-center justify-center mb-6 group-hover:bg-brand-brown/8 transition-colors duration-300">
+                            <img className="w-10 h-10" src={feature.imagePath} alt="" aria-hidden="true" />
+                        </div>
+
+                        <div className="font-serif text-brand-brown text-center leading-[1.1] text-[clamp(1.4rem,2.2vw,1.65rem)] mb-4">
+                            {feature.title}
+                        </div>
+
+                        <div className="font-sans text-sm text-center text-brand-brown/60 leading-relaxed">
+                            {feature.text}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </section>
+    );
+}