Marc Mintel
474fa4f3df
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 7s
Build & Deploy / 🧪 QA (push) Successful in 1m26s
Build & Deploy / 🏗️ Build (push) Successful in 4m17s
Build & Deploy / 🚀 Deploy (push) Successful in 26s
Build & Deploy / 🧪 Smoke Test (push) Successful in 52s
Build & Deploy / ⚡ Lighthouse (push) Successful in 3m41s
Build & Deploy / 🔔 Notify (push) Successful in 2s
- Suppress browser source map references to fix 404/SyntaxErrors - Reduce legacy JS polyfills via browserslist config - Optimize LCP by refining Hero animations and image sizes - Implement video lazy loading and reduce SVG animation complexity - Add preconnect hints for critical origins
42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import Scribble from '@/components/Scribble';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
export default function VideoSection() {
|
|
const t = useTranslations('Home.video');
|
|
|
|
return (
|
|
<section className="relative h-[70vh] overflow-hidden bg-primary">
|
|
<video
|
|
className="w-full h-full object-cover opacity-60"
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
preload="none"
|
|
>
|
|
<source
|
|
src="/uploads/2024/12/making-of-metal-cable-on-factory-2023-11-27-04-55-16-utc-2.webm"
|
|
type="video/webm"
|
|
/>
|
|
</video>
|
|
<div className="absolute inset-0 bg-gradient-to-b from-primary/60 via-transparent to-primary/60 flex items-center justify-center">
|
|
<div className="max-w-5xl px-6 text-center animate-slide-up">
|
|
<h2 className="text-3xl md:text-4xl lg:text-5xl 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>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|