wip
This commit is contained in:
@@ -7,51 +7,129 @@ export default function TeamPage() {
|
||||
|
||||
const teamMembers = [
|
||||
{
|
||||
name: 'Klaus',
|
||||
name: 'Klaus Mintel',
|
||||
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.'
|
||||
image: 'https://klz-cables.com/wp-content/uploads/2024/12/DSC07963-Large.webp',
|
||||
quote: 'Sometimes all it takes is a clear head and a good cable to make the world a little better.',
|
||||
bio: 'Klaus is the man with the experience, bringing perspective and calm to the table—even when cable chaos threatens to take over. With impressive industry knowledge and a network as solid as our cables, he ensures everything runs smoothly. Klaus isn’t just a problem solver; he’s a strategic thinker who knows how to get to the point with a touch of humor.',
|
||||
linkedin: 'https://www.linkedin.com/in/klaus-mintel-b80a8b193/'
|
||||
},
|
||||
{
|
||||
name: 'Michael',
|
||||
name: 'Michael Bodemer',
|
||||
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
|
||||
image: 'https://klz-cables.com/wp-content/uploads/2024/12/DSC07768-Large.webp',
|
||||
quote: 'Challenges exist to be solved, not to debate how complicated they are.',
|
||||
bio: 'Michael Bodemer is the go-to guy when things get complicated—and let’s face it, that’s often the case with cable networks. With sharp insight and a knack for practical solutions, Michael is one of our key players. He’s not just detail-oriented; he’s a driving force—whether it’s in planning, customer interactions, or securing the best cables for every project.',
|
||||
linkedin: 'https://www.linkedin.com/in/michael-bodemer-33b493122/'
|
||||
}
|
||||
];
|
||||
|
||||
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>
|
||||
{/* Hero Section */}
|
||||
<section className="relative h-[60vh] flex items-center justify-center overflow-hidden bg-neutral-dark">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="https://klz-cables.com/wp-content/uploads/2024/12/DSC07655-Large.webp"
|
||||
alt="KLZ Team"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/80 to-black/40" />
|
||||
</div>
|
||||
|
||||
<Container className="relative z-10 text-center text-white max-w-4xl">
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-6 tracking-tight">
|
||||
The bright sparks behind the power
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl text-neutral-light">
|
||||
We connect energy, expertise, and innovation to power a greener future.
|
||||
</p>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{/* Team Members Section */}
|
||||
<Section className="bg-white">
|
||||
<Container>
|
||||
<div className="space-y-24">
|
||||
{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 key={idx} className={`flex flex-col md:flex-row gap-12 items-center ${idx % 2 === 1 ? 'md:flex-row-reverse' : ''}`}>
|
||||
<div className="w-full md:w-1/2 relative aspect-[4/3] rounded-lg overflow-hidden shadow-lg">
|
||||
<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 className="w-full md:w-1/2 space-y-6">
|
||||
<h2 className="text-4xl font-bold text-primary">{member.name}</h2>
|
||||
<blockquote className="text-2xl font-medium italic text-text-primary border-l-4 border-primary pl-6 py-2">
|
||||
"{member.quote}"
|
||||
</blockquote>
|
||||
<p className="text-lg text-text-secondary leading-relaxed">
|
||||
{member.bio}
|
||||
</p>
|
||||
<a
|
||||
href={member.linkedin}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center text-primary font-bold hover:text-primary-dark transition-colors group border-2 border-primary px-6 py-3 rounded-full hover:bg-primary hover:text-white"
|
||||
>
|
||||
Check {member.name.split(' ')[0]}'s LinkedIn
|
||||
<span className="ml-2 group-hover:translate-x-1 transition-transform">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Manifesto Section */}
|
||||
<Section className="bg-neutral-dark text-white">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
|
||||
<div className="lg:col-span-4">
|
||||
<h2 className="text-4xl font-bold text-primary mb-6 sticky top-24">Our manifesto</h2>
|
||||
</div>
|
||||
<div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{[
|
||||
{ title: 'Competence', desc: 'Decades of experience and Europe-wide know-how combined with commitment and new ideas.' },
|
||||
{ title: 'Availability', desc: 'Always there for you - no waiting, no delays, just fast and reliable support.' },
|
||||
{ title: 'Solutions', desc: 'Solutions require a lot of questions. We ask them. You, the manufacturer and ourselves.' },
|
||||
{ title: 'Logistics', desc: 'Monitoring production, regular exchanges, freight tracking, customs clearance - our everyday life.' },
|
||||
{ title: 'Open to new things', desc: 'We listen. From the inquiry, through the offer, to delivery. What can be done better needs to be discussed.' },
|
||||
{ title: 'Reliability', desc: 'We deliver what we promise – every time, without fail.' }
|
||||
].map((item, idx) => (
|
||||
<div key={idx} className="bg-white/5 p-6 rounded-lg border border-white/10 hover:bg-white/10 transition-colors">
|
||||
<div className="text-primary font-mono text-xl mb-4">0{idx + 1}</div>
|
||||
<h3 className="text-xl font-bold mb-3">{item.title}</h3>
|
||||
<p className="text-white/70">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Gallery Section */}
|
||||
<Section className="bg-neutral-dark py-0 pb-24">
|
||||
<Container>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{[
|
||||
'https://klz-cables.com/wp-content/uploads/2024/12/DSC07539-Large-600x400.webp',
|
||||
'https://klz-cables.com/wp-content/uploads/2024/12/DSC07460-Large-600x400.webp',
|
||||
'https://klz-cables.com/wp-content/uploads/2024/12/DSC07469-Large-600x400.webp',
|
||||
'https://klz-cables.com/wp-content/uploads/2024/12/DSC07433-Large-600x400.webp'
|
||||
].map((src, idx) => (
|
||||
<div key={idx} className="relative aspect-video rounded-lg overflow-hidden opacity-80 hover:opacity-100 transition-opacity">
|
||||
<Image src={src} alt="Team Gallery" fill className="object-cover" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user