mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Marc Mintel
2026-01-17 02:57:53 +01:00
parent de87c62312
commit 021d23ab93
21 changed files with 967 additions and 578 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
components/home/VideoSection.tsx
View File

@@ -1,14 +1,15 @@
import React from 'react';
import { useTranslations } from 'next-intl';
import Scribble from '@/components/Scribble';
import { Section } from '../../components/ui';
export default function VideoSection() {
const t = useTranslations('Home.video');
return (
<section className="relative h-[60vh] overflow-hidden">
<section className="relative h-[70vh] overflow-hidden bg-primary-dark">
<video
className="w-full h-full object-cover"
className="w-full h-full object-cover opacity-60"
autoPlay
muted
loop
@@ -16,17 +17,24 @@ export default function VideoSection() {
>
<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-[#0a0a0a]/70 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">
{t.rich('title', {
future: (chunks) => (
<span className="relative inline-block mx-2">
<span className="relative z-10 italic">{chunks}</span>
<Scribble variant="underline" className="w-full h-full top-full left-0" />
</span>
)
})}
</h2>
<div className="absolute inset-0 bg-gradient-to-b from-primary-dark/60 via-transparent to-primary-dark/60 flex items-center justify-center">
<div className="max-w-5xl px-6 text-center animate-slide-up">
<h2 className="text-4xl md:text-6xl lg:text-7xl font-extrabold text-white leading-[1.1]">
{t.rich('title', {
future: (chunks) => (
<span className="relative inline-block mx-2">
<span className="relative z-10 italic text-accent">{chunks}</span>
<Scribble variant="underline" className="w-full h-4 -bottom-2 left-0 text-accent/40" />
</span>
)
})}
</h2>
<div className="mt-12 flex justify-center">
<div className="w-24 h-24 rounded-full border-2 border-white/30 flex items-center justify-center group cursor-pointer hover:bg-white transition-all duration-500">
<div className="w-0 h-0 border-t-[12px] border-t-transparent border-l-[20px] border-l-white border-b-[12px] border-b-transparent ml-2 group-hover:border-l-primary-dark transition-colors" />
</div>
</div>
</div>
</div>
</section>
);