clone init

app/[locale]/team/page.tsx

@@ -0,0 +1,57 @@
+import { useTranslations } from 'next-intl';
+import { Section, Container } from '@/components/ui';
+import Image from 'next/image';
+
+export default function TeamPage() {
+  const t = useTranslations('Navigation');
+
+  const teamMembers = [
+    {
+      name: 'Klaus',
+      role: 'Founder & CEO',
+      image: '/media/team/klaus.jpg', // Placeholder path
+      bio: 'With decades of experience in the cable industry, Klaus leads KLZ with a vision for quality and innovation.'
+    },
+    {
+      name: 'Michael',
+      role: 'Technical Director',
+      image: '/media/team/michael.jpg', // Placeholder path
+      bio: 'Expert in high-voltage systems and technical planning, ensuring every project meets the highest standards.'
+    },
+    // Add more team members as needed
+  ];
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Section className="bg-neutral-light">
+        <Container>
+          <div className="max-w-3xl mx-auto text-center mb-16">
+            <h1 className="text-4xl font-bold mb-6">Our Team</h1>
+            <p className="text-xl text-text-secondary">
+              Meet the experts behind KLZ Cables. We are a dedicated team of professionals committed to powering your success.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {teamMembers.map((member, idx) => (
+              <div key={idx} className="bg-white rounded-lg overflow-hidden shadow-sm border border-neutral-dark group hover:-translate-y-1 transition-transform duration-300">
+                <div className="aspect-[3/4] bg-neutral relative overflow-hidden">
+                  {/* Placeholder for team image */}
+                  <div className="absolute inset-0 flex items-center justify-center text-text-light bg-neutral-dark">
+                    <span className="text-4xl font-bold opacity-20">{member.name[0]}</span>
+                  </div>
+                  {/* <Image src={member.image} alt={member.name} fill className="object-cover" /> */}
+                </div>
+                <div className="p-6">
+                  <h3 className="text-xl font-bold text-text-primary mb-1">{member.name}</h3>
+                  <p className="text-primary font-medium mb-4">{member.role}</p>
+                  <p className="text-text-secondary text-sm">{member.bio}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Container>
+      </Section>
+    </div>
+  );
+}