102 lines
3.3 KiB
TypeScript
102 lines
3.3 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
||
import { fluxgore, gothampro } from "@/utils/fonts";
|
||
|
||
interface VideoStatsProps {
|
||
number: string;
|
||
label: string;
|
||
}
|
||
|
||
function VideoStats(props: VideoStatsProps) {
|
||
const { number, label } = props;
|
||
return (
|
||
<div className="flex flex-col">
|
||
<h1
|
||
className={`${fluxgore.className} text-4xl md:text-8xl text-[#1068B0] relative`}
|
||
>
|
||
{number}
|
||
</h1>
|
||
|
||
<p
|
||
className={`${gothampro.className} text-[#E6E6E6] text-sm md:text-xl max-w-[536px] leading-normal uppercase`}
|
||
>
|
||
{label}
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Video() {
|
||
return (
|
||
<div
|
||
className="bg-[#161616] relative overflow-hidden pt-10 md:pt-20"
|
||
style={{
|
||
backgroundImage: `url('/images/noise.svg')`,
|
||
backgroundSize: "cover",
|
||
backgroundRepeat: "repeat",
|
||
backgroundBlendMode: "overlay",
|
||
}}
|
||
>
|
||
<img
|
||
className="absolute top-0 right-0 object-cover"
|
||
src="/images/video/arrows.svg"
|
||
alt="Lines"
|
||
/>
|
||
|
||
<div className="container mx-auto px-4">
|
||
<div className="flex flex-col md:flex-row space-y-6 md:space-y-0 md:space-x-16">
|
||
<h1
|
||
className={`${fluxgore.className} text-4xl md:text-7xl text-white relative`}
|
||
>
|
||
как это Было
|
||
</h1>
|
||
|
||
<p
|
||
className={`${gothampro.className} text-[#E6E6E6] opacity-90 text-base md:text-xl max-w-full md:max-w-[536px] leading-relaxed md:leading-none`}
|
||
>
|
||
Прошлый фестиваль технических видов спорта стал незабываемым
|
||
праздником скорости и мастерства, собрав рекордное количество
|
||
участников и зрителей.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex mt-8 md:mt-14">
|
||
<iframe
|
||
src="https://www.youtube.com/embed/FVzlAMLPFh0?si=E_EaXkQ3tJYtyf_s"
|
||
title="YouTube video player"
|
||
frameBorder="0"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
referrerPolicy="strict-origin-when-cross-origin"
|
||
allowFullScreen
|
||
className="w-full h-auto aspect-video"
|
||
style={{
|
||
clipPath:
|
||
"polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px)",
|
||
}}
|
||
></iframe>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-24 mt-16 md:mt-36 pb-32 md:pb-64">
|
||
<VideoStats number="260" label="[ единиц техники ]" />
|
||
<VideoStats
|
||
number="11"
|
||
label="[ дисциплин технических видов спорта ]"
|
||
/>
|
||
<VideoStats number="24 K" label="[ л.с. суммарной мощности ]" />
|
||
<VideoStats
|
||
number="350+"
|
||
label="[ спортсменов-участников соревнований ]"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<img
|
||
className="absolute bottom-0 object-cover w-full"
|
||
src="/images/video/paper_tear.png"
|
||
alt="Paper tear"
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default Video;
|