wip
This commit is contained in:
@@ -1,182 +1,26 @@
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Button, Section, Container } from '@/components/ui';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import Hero from '@/components/home/Hero';
|
||||
import ProductCategories from '@/components/home/ProductCategories';
|
||||
import WhatWeDo from '@/components/home/WhatWeDo';
|
||||
import WhyChooseUs from '@/components/home/WhyChooseUs';
|
||||
import MeetTheTeam from '@/components/home/MeetTheTeam';
|
||||
import GallerySection from '@/components/home/GallerySection';
|
||||
import VideoSection from '@/components/home/VideoSection';
|
||||
import CTA from '@/components/home/CTA';
|
||||
|
||||
export default function HomePage() {
|
||||
const t = useTranslations('Index');
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
{/* Hero Section */}
|
||||
<section className="relative h-[80vh] flex items-center justify-center overflow-hidden bg-neutral-dark">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<video
|
||||
className="w-full h-full object-cover"
|
||||
autoPlay
|
||||
muted
|
||||
loop
|
||||
playsInline
|
||||
poster="/uploads/2025/02/Still-2025-02-10-104337_1.1.1.webp"
|
||||
>
|
||||
<source src="/uploads/2025/02/header.webm" type="video/webm" />
|
||||
<source src="/uploads/2025/02/header.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-black/10 to-black/40" />
|
||||
</div>
|
||||
|
||||
<Container className="relative z-10 text-left text-white w-full">
|
||||
<div className="max-w-4xl">
|
||||
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 tracking-tight leading-tight">
|
||||
We are helping to expand the energy cable networks for a <span className="text-[#82ed20] relative inline-block">green</span> future
|
||||
</h1>
|
||||
<div className="mt-8">
|
||||
<Link href="/contact" className="inline-flex items-center text-white text-xl font-medium group">
|
||||
Let's talk
|
||||
<span className="ml-2 w-8 h-8 border-2 border-white rounded-full flex items-center justify-center group-hover:bg-white group-hover:text-black transition-all">
|
||||
→
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Product Categories Preview */}
|
||||
<Section className="bg-neutral-dark py-0">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
|
||||
{[
|
||||
{
|
||||
title: 'Low Voltage Cables',
|
||||
desc: 'Powering everyday essentials with reliability and safety.',
|
||||
img: '/uploads/2024/12/low-voltage-scaled.webp',
|
||||
icon: '/uploads/2024/11/Low-Voltage.svg',
|
||||
href: '/products/low-voltage-cables'
|
||||
},
|
||||
{
|
||||
title: 'Medium Voltage Cables',
|
||||
desc: 'The perfect balance between power and performance for industrial and urban grids.',
|
||||
img: '/uploads/2024/12/medium-voltage-scaled.webp',
|
||||
icon: '/uploads/2024/11/Medium-Voltage.svg',
|
||||
href: '/products/medium-voltage-cables'
|
||||
},
|
||||
{
|
||||
title: 'High Voltage Cables',
|
||||
desc: 'Delivering maximum power over long distances—without compromise.',
|
||||
img: '/uploads/2025/06/na2xsfl2y-rendered.webp',
|
||||
icon: '/uploads/2024/11/High-Voltage.svg',
|
||||
href: '/products/high-voltage-cables'
|
||||
},
|
||||
{
|
||||
title: 'Solar Cables',
|
||||
desc: 'Connecting the sun’s energy to your sustainable future.',
|
||||
img: '/uploads/2025/04/3.webp',
|
||||
icon: '/uploads/2024/11/Solar.svg',
|
||||
href: '/products/solar-cables'
|
||||
}
|
||||
].map((category, idx) => (
|
||||
<Link key={idx} href={category.href} className="group block relative h-[400px] md:h-[500px] overflow-hidden">
|
||||
<Image
|
||||
src={category.img}
|
||||
alt={category.title}
|
||||
fill
|
||||
className="object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/40 group-hover:bg-black/50 transition-colors" />
|
||||
<div className="absolute inset-0 p-8 flex flex-col justify-center items-center text-center text-white">
|
||||
<div className="mb-4 transform transition-transform group-hover:-translate-y-2">
|
||||
<img src={category.icon} alt="" className="w-16 h-16 mx-auto" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-2 transform transition-transform group-hover:-translate-y-2">{category.title}</h3>
|
||||
<p className="text-white/90 opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">
|
||||
{category.desc}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* What We Do 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">
|
||||
<div className="sticky top-24">
|
||||
<h2 className="text-5xl font-bold text-primary mb-6">What we do</h2>
|
||||
<p className="text-xl text-white/80">
|
||||
We ensure that the electricity flows – with quality-tested cables. From low voltage up to high voltage.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
|
||||
{[
|
||||
{
|
||||
num: '01',
|
||||
title: 'Supply to energy suppliers, wind and solar parks, industry and trade',
|
||||
desc: 'We support your projects from 1 to 220 kV, from simple NYY to high-voltage cables with segment conductors and aluminum sheaths, with a particular focus on medium-voltage cables.'
|
||||
},
|
||||
{
|
||||
num: '02',
|
||||
title: 'Supply of cables whose quality is certified',
|
||||
desc: 'Cables are products that have to function 100%. For decades, often 80 to 100 years. Our cables are not only approved by VDE. The most well-known energy suppliers trust us.'
|
||||
},
|
||||
{
|
||||
num: '03',
|
||||
title: 'We deliver on time because we know the consequences for you',
|
||||
desc: 'Wind farm North Germany, coordinates XYZ, delivery Wednesday 2-4 p.m., no unloading option. Yes, we know that. We organize the logistics with a back office team that has up to 20 years of cable experience.'
|
||||
},
|
||||
{
|
||||
num: '04',
|
||||
title: 'The cable alone is not the solution',
|
||||
desc: 'Stony ground? Perhaps a thicker outer sheath would be better? Damp ground? Can there be transverse watertight protection? We think for you and ask questions.'
|
||||
}
|
||||
].map((item, idx) => (
|
||||
<div key={idx} className="space-y-4">
|
||||
<span className="text-sm font-mono text-white/60 border-b border-white/20 pb-2 block w-fit">{item.num}</span>
|
||||
<h3 className="text-2xl font-bold">{item.title}</h3>
|
||||
<p className="text-white/70 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Video Section */}
|
||||
<section className="relative h-[60vh] overflow-hidden">
|
||||
<video
|
||||
className="w-full h-full object-cover"
|
||||
autoPlay
|
||||
muted
|
||||
loop
|
||||
playsInline
|
||||
>
|
||||
<source src="/uploads/2024/12/making-of-metal-cable-on-factory-2023-11-27-04-55-16-utc-2.webm" type="video/mp4" />
|
||||
</video>
|
||||
<div className="absolute inset-0 bg-black/50 flex items-center justify-center">
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white text-center max-w-4xl px-4 leading-tight">
|
||||
From a single strand to infinite power – the <span className="text-[#82ed20] italic">future</span> starts here.
|
||||
</h2>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<Section className="bg-primary text-white py-24">
|
||||
<Container>
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-8">
|
||||
<h2 className="text-3xl md:text-4xl font-bold max-w-2xl">
|
||||
Enough information, let's build something together!
|
||||
</h2>
|
||||
<Link href="/contact" className="group flex items-center gap-4 text-xl font-bold text-[#82ed20]">
|
||||
Reach out now
|
||||
<span className="w-10 h-10 border-2 border-[#82ed20] rounded-full flex items-center justify-center group-hover:bg-[#82ed20] group-hover:text-primary transition-all">
|
||||
→
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
<Hero />
|
||||
<ProductCategories />
|
||||
<WhatWeDo />
|
||||
<WhyChooseUs />
|
||||
<MeetTheTeam />
|
||||
<GallerySection />
|
||||
<VideoSection />
|
||||
<CTA />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user