zhaxal
82dea63163
- Introduced local font loading for Fluxgore with italic style. - Added comprehensive font definitions for Gotham Pro, including various weights and styles (black, bold, light, medium, and regular). - Organized font paths for better maintainability and clarity.
85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
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-8xl text-[#1068B0] relative`}>
|
||
{number}
|
||
</h1>
|
||
|
||
<p
|
||
className={`${gothampro.className} text-[#E6E6E6] text-xl max-w-[536px] leading-normal uppercase`}
|
||
>
|
||
{label}
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Video() {
|
||
return (
|
||
<div
|
||
className="bg-[#161616] relative overflow-hidden"
|
||
style={{
|
||
backgroundImage: `url('/images/noise.svg')`,
|
||
backgroundSize: "cover",
|
||
backgroundRepeat: "repeat",
|
||
backgroundBlendMode: "overlay",
|
||
}}
|
||
>
|
||
<div className="container mx-auto">
|
||
<div className="flex flex-row space-x-16">
|
||
<div className={fluxgore.className}>
|
||
<h1 className="text-7xl text-white relative">как это Было</h1>
|
||
</div>
|
||
|
||
<div className={gothampro.className}>
|
||
<p className="text-[#E6E6E6] opacity-90 text-xl max-w-[536px] leading-none">
|
||
Прошлый фестиваль технических видов спорта стал незабываемым
|
||
праздником скорости и мастерства, собрав рекордное количество
|
||
участников и зрителей.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex 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(60px 0, 100% 0, 100% calc(100% - 60px), calc(100% - 60px) 100%, 0 100%, 0 60px)",
|
||
}}
|
||
></iframe>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-4 gap-24 mt-36 pb-32">
|
||
<VideoStats number="260" label="[ единиц техники ]" />
|
||
<VideoStats
|
||
number="11"
|
||
label="[ дисциплин технических видов спорта ]"
|
||
/>
|
||
<VideoStats number="24 K" label="[ л.с. суммарной мощности ]" />
|
||
<VideoStats
|
||
number="350+"
|
||
label="[ спортсменов-участников соревнований ]"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default Video;
|