Add custom font utilities for Fluxgore and Gotham Pro

- 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.
2025-07-16 14:17:57 +09:00
parent 8011550ae8
commit 82dea63163
24 changed files with 604 additions and 107 deletions
@@ -0,0 +1,84 @@
+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;