701 lines
37 KiB
TypeScript
701 lines
37 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef } from 'react';
|
|
import Navigation from '../../../components/Navigation';
|
|
import FloatingLanguageSwitcher from '../../../components/FloatingLanguageSwitcher';
|
|
import Footer from '../../../components/Footer';
|
|
import { Locale } from '../../../lib/i18n';
|
|
import { getTranslations } from '../../../lib/translations';
|
|
import { updateDocumentMeta } from '../../../lib/seo-utils';
|
|
|
|
// Enhanced Particle Background Component for Products
|
|
function ProductParticleBackground() {
|
|
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);
|
|
|
|
// Enhanced particle system with different types
|
|
const particles: Array<{
|
|
x: number;
|
|
y: number;
|
|
vx: number;
|
|
vy: number;
|
|
size: number;
|
|
opacity: number;
|
|
type: 'circle' | 'square' | 'triangle';
|
|
color: string;
|
|
rotation: number;
|
|
rotationSpeed: number;
|
|
}> = [];
|
|
|
|
const colors = ['#22c55e', '#3b82f6', '#f59e0b', '#ef4444', '#8b5cf6'];
|
|
|
|
// Create particles
|
|
for (let i = 0; i < 80; i++) {
|
|
particles.push({
|
|
x: Math.random() * canvas.width,
|
|
y: Math.random() * canvas.height,
|
|
vx: (Math.random() - 0.5) * 0.8,
|
|
vy: (Math.random() - 0.5) * 0.8,
|
|
size: Math.random() * 4 + 2,
|
|
opacity: Math.random() * 0.6 + 0.2,
|
|
type: ['circle', 'square', 'triangle'][Math.floor(Math.random() * 3)] as
|
|
| 'circle'
|
|
| 'square'
|
|
| 'triangle',
|
|
color: colors[Math.floor(Math.random() * colors.length)],
|
|
rotation: Math.random() * Math.PI * 2,
|
|
rotationSpeed: (Math.random() - 0.5) * 0.02,
|
|
});
|
|
}
|
|
|
|
// 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;
|
|
particle.rotation += particle.rotationSpeed;
|
|
|
|
// Wrap around edges
|
|
if (particle.x < -particle.size) particle.x = canvas.width + particle.size;
|
|
if (particle.x > canvas.width + particle.size) particle.x = -particle.size;
|
|
if (particle.y < -particle.size) particle.y = canvas.height + particle.size;
|
|
if (particle.y > canvas.height + particle.size) particle.y = -particle.size;
|
|
|
|
// Set style
|
|
ctx.fillStyle = particle.color;
|
|
ctx.globalAlpha = particle.opacity;
|
|
ctx.save();
|
|
ctx.translate(particle.x, particle.y);
|
|
ctx.rotate(particle.rotation);
|
|
|
|
// Draw different shapes
|
|
ctx.beginPath();
|
|
switch (particle.type) {
|
|
case 'circle':
|
|
ctx.arc(0, 0, particle.size, 0, Math.PI * 2);
|
|
break;
|
|
case 'square':
|
|
ctx.rect(
|
|
-particle.size,
|
|
-particle.size,
|
|
particle.size * 2,
|
|
particle.size * 2,
|
|
);
|
|
break;
|
|
case 'triangle':
|
|
ctx.moveTo(0, -particle.size);
|
|
ctx.lineTo(-particle.size, particle.size);
|
|
ctx.lineTo(particle.size, particle.size);
|
|
ctx.closePath();
|
|
break;
|
|
}
|
|
ctx.fill();
|
|
ctx.restore();
|
|
});
|
|
|
|
// Draw connections with different colors
|
|
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 < 120) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(particle.x, particle.y);
|
|
ctx.lineTo(otherParticle.x, otherParticle.y);
|
|
const gradient = ctx.createLinearGradient(
|
|
particle.x,
|
|
particle.y,
|
|
otherParticle.x,
|
|
otherParticle.y,
|
|
);
|
|
gradient.addColorStop(0, particle.color);
|
|
gradient.addColorStop(1, otherParticle.color);
|
|
ctx.strokeStyle = gradient;
|
|
ctx.globalAlpha = 0.1 * (1 - distance / 120);
|
|
ctx.lineWidth = 1;
|
|
ctx.stroke();
|
|
}
|
|
});
|
|
});
|
|
|
|
ctx.globalAlpha = 1;
|
|
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="j7rncr6"
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default function ProductsPage({ 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 bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900"
|
|
data-oid="cvpywwb"
|
|
>
|
|
{/* Enhanced Particle Background */}
|
|
<ProductParticleBackground data-oid="uc9k0a8" />
|
|
|
|
{/* Navigation */}
|
|
<Navigation locale={params.locale} data-oid="531iitl" />
|
|
|
|
{/* Floating Language Switcher */}
|
|
<FloatingLanguageSwitcher locale={params.locale} data-oid="kpdg95h" />
|
|
|
|
{/* Hero Section */}
|
|
<section className="relative z-10 pt-20 pb-16 px-4" data-oid="lm2ytxy">
|
|
<div className="max-w-7xl mx-auto text-center" data-oid="j5e12u3">
|
|
<h1
|
|
className="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight"
|
|
data-oid="5baiugk"
|
|
>
|
|
{t.products?.title || 'Our Products'}
|
|
</h1>
|
|
<p
|
|
className="text-xl md:text-2xl text-white/80 mb-12 max-w-3xl mx-auto"
|
|
data-oid=":evsigy"
|
|
>
|
|
{t.products?.subtitle ||
|
|
'Discover innovative solutions for a sustainable future'}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Featured Product */}
|
|
<section className="relative z-10 py-16 px-4" data-oid="3djucnf">
|
|
<div className="max-w-7xl mx-auto" data-oid="jffsbbq">
|
|
<div
|
|
className="bg-white/10 backdrop-blur-md rounded-3xl p-8 md:p-12 border border-white/20"
|
|
data-oid="5j0vqo-"
|
|
>
|
|
<div
|
|
className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
|
|
data-oid="w:qoogs"
|
|
>
|
|
<div data-oid="jp:93sh">
|
|
<div
|
|
className="inline-block bg-green-500 text-white px-4 py-2 rounded-full text-sm font-medium mb-6"
|
|
data-oid="_2jwbsf"
|
|
>
|
|
Featured Product
|
|
</div>
|
|
<h2
|
|
className="text-4xl md:text-5xl font-bold text-white mb-6"
|
|
data-oid="42kynsq"
|
|
>
|
|
{t.products?.featured?.title || 'Eco-Life Simulator'}
|
|
</h2>
|
|
<p className="text-xl text-white/80 mb-8" data-oid=":6k38y3">
|
|
{t.products?.featured?.description ||
|
|
'Experience the ultimate environmental simulation game'}
|
|
</p>
|
|
<div className="space-y-4 mb-8" data-oid="gakgmck">
|
|
{(t.products?.featured?.features || []).map(
|
|
(feature, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-center space-x-3"
|
|
data-oid="f4az8h0"
|
|
>
|
|
<div
|
|
className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center"
|
|
data-oid="nwia:z7"
|
|
>
|
|
<svg
|
|
className="w-4 h-4 text-white"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
data-oid="to48jui"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M5 13l4 4L19 7"
|
|
data-oid="hqp78tt"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span className="text-white/90" data-oid="a.d5.o0">
|
|
{feature}
|
|
</span>
|
|
</div>
|
|
),
|
|
)}
|
|
</div>
|
|
<div className="flex items-center space-x-6" data-oid="ciy3l:k">
|
|
<span
|
|
className="text-3xl font-bold text-green-400"
|
|
data-oid="j3m:k.g"
|
|
>
|
|
{t.products?.featured?.price || '$29.99'}
|
|
</span>
|
|
<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="3vyrpk7"
|
|
>
|
|
{t.products?.featured?.cta || 'Get Started Now'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="relative" data-oid="2frqox_">
|
|
<div
|
|
className="aspect-square bg-gradient-to-br from-green-400 to-blue-500 rounded-3xl p-8 relative overflow-hidden"
|
|
data-oid="sv04vkp"
|
|
>
|
|
{/* Product mockup with particles */}
|
|
<div
|
|
className="absolute inset-0 bg-black/20 rounded-3xl"
|
|
data-oid="7mphq74"
|
|
></div>
|
|
<div
|
|
className="relative z-10 h-full flex items-center justify-center"
|
|
data-oid="::y3wwb"
|
|
>
|
|
<div className="text-center text-white" data-oid="_a3bv_z">
|
|
<div
|
|
className="w-24 h-24 bg-white/20 rounded-full mx-auto mb-4 flex items-center justify-center"
|
|
data-oid="xoz1gv-"
|
|
>
|
|
<svg
|
|
className="w-12 h-12"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
data-oid="htmw:.5"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
data-oid="qm_gi7x"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h3
|
|
className="text-2xl font-bold mb-2"
|
|
data-oid="._-sk9i"
|
|
>
|
|
Interactive Demo
|
|
</h3>
|
|
<p className="text-white/80" data-oid="_yx_77f">
|
|
Experience the simulation
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Product Categories */}
|
|
<section className="relative z-10 py-16 px-4" data-oid="dth.vfh">
|
|
<div className="max-w-7xl mx-auto" data-oid="b_yrju2">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8" data-oid="deq5x:y">
|
|
<div
|
|
className="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 hover:bg-white/15 transition-all duration-300"
|
|
data-oid="vrhxdx5"
|
|
>
|
|
<div
|
|
className="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mb-6"
|
|
data-oid="fbph6.s"
|
|
>
|
|
<svg
|
|
className="w-8 h-8 text-white"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
data-oid="i-5t_6a"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1a3 3 0 000-6h-1m0 6V4m0 6h6m-7 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
data-oid="21l8sg_"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-2xl font-bold text-white mb-4" data-oid="zh43ndf">
|
|
{t.products.categories.games.title}
|
|
</h3>
|
|
<p className="text-white/70" data-oid=".xj-6y.">
|
|
{t.products.categories.games.description}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 hover:bg-white/15 transition-all duration-300"
|
|
data-oid="_r4xti3"
|
|
>
|
|
<div
|
|
className="w-16 h-16 bg-blue-500 rounded-2xl flex items-center justify-center mb-6"
|
|
data-oid="2xc--or"
|
|
>
|
|
<svg
|
|
className="w-8 h-8 text-white"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
data-oid="xr0zrf:"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
|
|
data-oid="e6ly5m_"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-2xl font-bold text-white mb-4" data-oid="7vi9m0h">
|
|
{t.products.categories.tools.title}
|
|
</h3>
|
|
<p className="text-white/70" data-oid="f1:5c.n">
|
|
{t.products.categories.tools.description}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 hover:bg-white/15 transition-all duration-300"
|
|
data-oid="tc7x7dh"
|
|
>
|
|
<div
|
|
className="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6"
|
|
data-oid="q2r2se9"
|
|
>
|
|
<svg
|
|
className="w-8 h-8 text-white"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
data-oid="ahfdmqs"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
|
data-oid="w05eav4"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-2xl font-bold text-white mb-4" data-oid="b8tkf9z">
|
|
{t.products.categories.education.title}
|
|
</h3>
|
|
<p className="text-white/70" data-oid="ac0dw_k">
|
|
{t.products.categories.education.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Product Grid */}
|
|
<section className="relative z-10 py-16 px-4" data-oid=":df3vby">
|
|
<div className="max-w-7xl mx-auto" data-oid="1fm-ile">
|
|
<div
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
|
|
data-oid="mq9zk93"
|
|
>
|
|
{/* Product 1 */}
|
|
<div
|
|
className="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/20 hover:bg-white/15 transition-all duration-300 group"
|
|
data-oid="4m47ygl"
|
|
>
|
|
<div
|
|
className="aspect-square bg-gradient-to-br from-green-400 to-green-600 rounded-xl mb-6 relative overflow-hidden"
|
|
data-oid="ni7-0vh"
|
|
>
|
|
<div
|
|
className="absolute inset-0 bg-black/20"
|
|
data-oid="qqzr2r2"
|
|
></div>
|
|
<div
|
|
className="absolute inset-0 flex items-center justify-center"
|
|
data-oid="kg2s6ba"
|
|
>
|
|
<svg
|
|
className="w-12 h-12 text-white"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
data-oid=".exeex5"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
data-oid="6vhjg1_"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-white mb-2" data-oid="27_ijij">
|
|
{t.products.productList.ecoSimulator.title}
|
|
</h3>
|
|
<p className="text-white/70 mb-4 text-sm" data-oid="5x:wp2_">
|
|
{t.products.productList.ecoSimulator.description}
|
|
</p>
|
|
<div className="flex items-center justify-between" data-oid="ad00jbx">
|
|
<span className="text-green-400 font-bold" data-oid="6q1_97d">
|
|
{t.products.productList.ecoSimulator.price}
|
|
</span>
|
|
<button
|
|
className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-200"
|
|
data-oid="e.r9qu-"
|
|
>
|
|
View Details
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Product 2 */}
|
|
<div
|
|
className="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/20 hover:bg-white/15 transition-all duration-300 group"
|
|
data-oid="5rbr4p8"
|
|
>
|
|
<div
|
|
className="aspect-square bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl mb-6 relative overflow-hidden"
|
|
data-oid="m1w2yx2"
|
|
>
|
|
<div
|
|
className="absolute inset-0 bg-black/20"
|
|
data-oid="w8uva_n"
|
|
></div>
|
|
<div
|
|
className="absolute inset-0 flex items-center justify-center"
|
|
data-oid="igj8g:d"
|
|
>
|
|
<svg
|
|
className="w-12 h-12 text-white"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
data-oid="zsd1xns"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
|
|
data-oid="c7izslw"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-white mb-2" data-oid="16315pd">
|
|
{t.products.productList.carbonTracker.title}
|
|
</h3>
|
|
<p className="text-white/70 mb-4 text-sm" data-oid="fxx3xzs">
|
|
{t.products.productList.carbonTracker.description}
|
|
</p>
|
|
<div className="flex items-center justify-between" data-oid="3iqh5.-">
|
|
<span className="text-blue-400 font-bold" data-oid="afep:s-">
|
|
{t.products.productList.carbonTracker.price}
|
|
</span>
|
|
<button
|
|
className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-200"
|
|
data-oid="v:84d.f"
|
|
>
|
|
View Details
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Product 3 */}
|
|
<div
|
|
className="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/20 hover:bg-white/15 transition-all duration-300 group"
|
|
data-oid="ylps7.f"
|
|
>
|
|
<div
|
|
className="aspect-square bg-gradient-to-br from-purple-400 to-purple-600 rounded-xl mb-6 relative overflow-hidden"
|
|
data-oid="sgmy4a-"
|
|
>
|
|
<div
|
|
className="absolute inset-0 bg-black/20"
|
|
data-oid="1jrvfuf"
|
|
></div>
|
|
<div
|
|
className="absolute inset-0 flex items-center justify-center"
|
|
data-oid="giashnw"
|
|
>
|
|
<svg
|
|
className="w-12 h-12 text-white"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
data-oid=":haulu-"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
|
data-oid="gg2vvsi"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-white mb-2" data-oid="6itbonk">
|
|
{t.products.productList.greenGuide.title}
|
|
</h3>
|
|
<p className="text-white/70 mb-4 text-sm" data-oid="94_u:5r">
|
|
{t.products.productList.greenGuide.description}
|
|
</p>
|
|
<div className="flex items-center justify-between" data-oid="im08pp2">
|
|
<span className="text-purple-400 font-bold" data-oid="hxtwl9f">
|
|
{t.products.productList.greenGuide.price}
|
|
</span>
|
|
<button
|
|
className="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-200"
|
|
data-oid="3e9u9t0"
|
|
>
|
|
View Details
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Product 4 */}
|
|
<div
|
|
className="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/20 hover:bg-white/15 transition-all duration-300 group"
|
|
data-oid="od:zoot"
|
|
>
|
|
<div
|
|
className="aspect-square bg-gradient-to-br from-orange-400 to-orange-600 rounded-xl mb-6 relative overflow-hidden"
|
|
data-oid=".09wskk"
|
|
>
|
|
<div
|
|
className="absolute inset-0 bg-black/20"
|
|
data-oid="xb_lxfj"
|
|
></div>
|
|
<div
|
|
className="absolute inset-0 flex items-center justify-center"
|
|
data-oid="gbvwymw"
|
|
>
|
|
<svg
|
|
className="w-12 h-12 text-white"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
data-oid="1m6hjyl"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
|
|
data-oid=".sikv1l"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-white mb-2" data-oid="gfqu2:k">
|
|
{t.products.productList.ecoChallenge.title}
|
|
</h3>
|
|
<p className="text-white/70 mb-4 text-sm" data-oid="rrsnl8c">
|
|
{t.products.productList.ecoChallenge.description}
|
|
</p>
|
|
<div className="flex items-center justify-between" data-oid="s5jbagy">
|
|
<span className="text-orange-400 font-bold" data-oid="rmdip20">
|
|
{t.products.productList.ecoChallenge.price}
|
|
</span>
|
|
<button
|
|
className="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-200"
|
|
data-oid="gjhr-2m"
|
|
>
|
|
View Details
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="relative z-10 py-20 px-4" data-oid="9d:srtj">
|
|
<div className="max-w-4xl mx-auto text-center" data-oid="ehinuqy">
|
|
<div
|
|
className="bg-white/10 backdrop-blur-md rounded-3xl p-12 border border-white/20"
|
|
data-oid="bszxslt"
|
|
>
|
|
<h2
|
|
className="text-4xl md:text-5xl font-bold text-white mb-6"
|
|
data-oid="y3mxv4e"
|
|
>
|
|
Ready to Make a Difference?
|
|
</h2>
|
|
<p className="text-xl text-white/80 mb-8" data-oid="4rdacti">
|
|
Join thousands of users already making sustainable choices with our
|
|
products.
|
|
</p>
|
|
<div
|
|
className="flex flex-col sm:flex-row gap-4 justify-center"
|
|
data-oid="d-iudla"
|
|
>
|
|
<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="wn7ixwn"
|
|
>
|
|
Explore All Products
|
|
</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="1iho.r8"
|
|
>
|
|
Contact Sales
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<Footer locale={params.locale} data-oid="0vh4cx:" />
|
|
</div>
|
|
);
|
|
}
|