211 lines
8.2 KiB
TypeScript
211 lines
8.2 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef } from 'react';
|
|
import Navigation from '../../components/Navigation';
|
|
import FloatingLanguageSwitcher from '../../components/FloatingLanguageSwitcher';
|
|
import BlogShowcase from '../../components/BlogShowcase';
|
|
import Footer from '../../components/Footer';
|
|
import { Locale } from '../../lib/i18n';
|
|
import { getTranslations } from '../../lib/translations';
|
|
import { updateDocumentMeta } from '../../lib/seo-utils';
|
|
|
|
// Particle Background Component
|
|
function ParticleBackground() {
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
|
|
useEffect(() => {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
if (!ctx) return;
|
|
|
|
// Set canvas size
|
|
const resizeCanvas = () => {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
};
|
|
resizeCanvas();
|
|
window.addEventListener('resize', resizeCanvas);
|
|
|
|
// Particle system
|
|
const particles: Array<{
|
|
x: number;
|
|
y: number;
|
|
vx: number;
|
|
vy: number;
|
|
size: number;
|
|
opacity: number;
|
|
}> = [];
|
|
|
|
// Create particles
|
|
for (let i = 0; i < 100; i++) {
|
|
particles.push({
|
|
x: Math.random() * canvas.width,
|
|
y: Math.random() * canvas.height,
|
|
vx: (Math.random() - 0.5) * 0.5,
|
|
vy: (Math.random() - 0.5) * 0.5,
|
|
size: Math.random() * 3 + 1,
|
|
opacity: Math.random() * 0.5 + 0.2,
|
|
});
|
|
}
|
|
|
|
// Animation loop
|
|
const animate = () => {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
particles.forEach((particle) => {
|
|
// Update position
|
|
particle.x += particle.vx;
|
|
particle.y += particle.vy;
|
|
|
|
// Wrap around edges
|
|
if (particle.x < 0) particle.x = canvas.width;
|
|
if (particle.x > canvas.width) particle.x = 0;
|
|
if (particle.y < 0) particle.y = canvas.height;
|
|
if (particle.y > canvas.height) particle.y = 0;
|
|
|
|
// Draw particle
|
|
ctx.beginPath();
|
|
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
|
|
ctx.fillStyle = `rgba(255, 255, 255, ${particle.opacity})`;
|
|
ctx.fill();
|
|
});
|
|
|
|
// Draw connections
|
|
particles.forEach((particle, i) => {
|
|
particles.slice(i + 1).forEach((otherParticle) => {
|
|
const dx = particle.x - otherParticle.x;
|
|
const dy = particle.y - otherParticle.y;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
if (distance < 100) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(particle.x, particle.y);
|
|
ctx.lineTo(otherParticle.x, otherParticle.y);
|
|
ctx.strokeStyle = `rgba(255, 255, 255, ${0.1 * (1 - distance / 100)})`;
|
|
ctx.stroke();
|
|
}
|
|
});
|
|
});
|
|
|
|
requestAnimationFrame(animate);
|
|
};
|
|
|
|
animate();
|
|
|
|
return () => {
|
|
window.removeEventListener('resize', resizeCanvas);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<canvas
|
|
ref={canvasRef}
|
|
className="absolute inset-0 w-full h-full"
|
|
style={{ pointerEvents: 'none' }}
|
|
data-oid="iiiegs:"
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default function Page({ params }: { params: { locale: Locale } }) {
|
|
const t = getTranslations(params.locale);
|
|
|
|
// Update meta tags when locale changes
|
|
useEffect(() => {
|
|
updateDocumentMeta(params.locale);
|
|
}, [params.locale]);
|
|
|
|
return (
|
|
<div className="min-h-screen relative overflow-hidden" data-oid="krtdxh9">
|
|
{/* Background Image with Overlay */}
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
|
style={{
|
|
backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23d4a574;stop-opacity:1" /><stop offset="50%" style="stop-color:%23b8956a;stop-opacity:1" /><stop offset="100%" style="stop-color:%23a08660;stop-opacity:1" /></linearGradient></defs><rect width="1200" height="800" fill="url(%23grad1)"/><path d="M0,400 Q300,200 600,350 T1200,300 L1200,800 L0,800 Z" fill="%23967d56"/><path d="M0,500 Q400,300 800,450 T1200,400 L1200,800 L0,800 Z" fill="%238a7350"/><circle cx="200" cy="150" r="80" fill="%23f4e4c1" opacity="0.3"/><circle cx="1000" cy="200" r="60" fill="%23f4e4c1" opacity="0.2"/></svg>')`,
|
|
}}
|
|
data-oid="t35j3uz"
|
|
/>
|
|
|
|
{/* Particle Background */}
|
|
<ParticleBackground data-oid="1eq47iz" />
|
|
|
|
{/* Navigation */}
|
|
<Navigation locale={params.locale} data-oid=".-cxh3." />
|
|
|
|
{/* Floating Language Switcher */}
|
|
<FloatingLanguageSwitcher locale={params.locale} data-oid="usi6f7v" />
|
|
|
|
{/* Hero Section */}
|
|
<section
|
|
id="hero"
|
|
className="relative z-10 flex items-center justify-center min-h-screen text-center px-4"
|
|
data-oid="2n7qgj-"
|
|
>
|
|
<div className="max-w-4xl mx-auto" data-oid="qdxxu5.">
|
|
<h1
|
|
className="text-5xl md:text-7xl font-bold text-white mb-8 leading-tight"
|
|
data-oid="pf:lgs4"
|
|
>
|
|
{t.hero.title}
|
|
</h1>
|
|
<p
|
|
className="text-xl md:text-2xl text-white/90 mb-12 max-w-3xl mx-auto leading-relaxed"
|
|
data-oid="vm1tz7h"
|
|
>
|
|
{t.hero.subtitle}
|
|
</p>
|
|
<div
|
|
className="flex flex-col sm:flex-row gap-6 justify-center"
|
|
data-oid="mbx0eri"
|
|
>
|
|
<button
|
|
className="bg-green-500 hover:bg-green-600 text-white px-8 py-4 rounded-full font-semibold text-lg transform hover:scale-105 transition-all duration-200 shadow-lg"
|
|
data-oid="e2cv0mq"
|
|
>
|
|
{t.hero.startJourney}
|
|
</button>
|
|
<button
|
|
className="border-2 border-white text-white hover:bg-white hover:text-gray-900 px-8 py-4 rounded-full font-semibold text-lg transform hover:scale-105 transition-all duration-200"
|
|
data-oid="sv:-vjb"
|
|
>
|
|
{t.hero.learnMore}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Blog Showcase Section */}
|
|
<BlogShowcase locale={params.locale} data-oid=":qdpiz:" />
|
|
|
|
{/* Floating Action Elements */}
|
|
<div className="fixed bottom-8 left-8 z-50" data-oid="f2x6cuz">
|
|
<button
|
|
className="bg-green-500 hover:bg-green-600 text-white p-4 rounded-full shadow-lg transform hover:scale-110 transition-all duration-200"
|
|
data-oid="jye6ey7"
|
|
>
|
|
<svg
|
|
className="w-6 h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
data-oid="ggzwwl-"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M5 10l7-7m0 0l7 7m-7-7v18"
|
|
data-oid="cngsmmd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<Footer locale={params.locale} data-oid="_rnutw_" />
|
|
</div>
|
|
);
|
|
}
|