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,97 @@
+import { fluxgore } from "@/utils/fonts";
+
+interface ButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  className?: string;
+  variant?: "default" | "blue";
+}
+
+export default function Button(props: ButtonProps) {
+  const { variant = "default" } = props;
+
+  const getButtonStyles = () => {
+    switch (variant) {
+      case "blue":
+        return "bg-[#1068B0] text-white hover:bg-[#0e5a9c]";
+      default:
+        return "bg-white text-black hover:bg-gray-100";
+    }
+  };
+
+  return (
+    <div className={fluxgore.className}>
+      <div className="relative inline-block">
+        {/* Shadow element */}
+        <div
+          className="absolute bg-black transition-all duration-150 ease-in-out"
+          style={{
+            top: "8px",
+            left: "8px",
+            right: "-8px",
+            bottom: "-8px",
+            clipPath:
+              "polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px)",
+            zIndex: 0,
+          }}
+        />
+        {/* Button */}
+        <button
+          className={`${getButtonStyles()} inline-block relative transition-all duration-150 ease-in-out active:translate-x-1 active:translate-y-1 ${props.className}`}
+          onClick={props.onClick}
+          style={{
+            fontSize: "18px",
+            lineHeight: "1.2",
+            padding: "20px 40px",
+            clipPath:
+              "polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px)",
+            border: "none",
+            zIndex: 1,
+          }}
+          onMouseEnter={(e) => {
+            const shadow = e.currentTarget
+              .previousElementSibling as HTMLElement;
+            if (shadow) {
+              shadow.style.top = "6px";
+              shadow.style.left = "6px";
+              shadow.style.right = "-6px";
+              shadow.style.bottom = "-6px";
+            }
+          }}
+          onMouseLeave={(e) => {
+            const shadow = e.currentTarget
+              .previousElementSibling as HTMLElement;
+            if (shadow) {
+              shadow.style.top = "8px";
+              shadow.style.left = "8px";
+              shadow.style.right = "-8px";
+              shadow.style.bottom = "-8px";
+            }
+          }}
+          onMouseDown={(e) => {
+            const shadow = e.currentTarget
+              .previousElementSibling as HTMLElement;
+            if (shadow) {
+              shadow.style.top = "4px";
+              shadow.style.left = "4px";
+              shadow.style.right = "-4px";
+              shadow.style.bottom = "-4px";
+            }
+          }}
+          onMouseUp={(e) => {
+            const shadow = e.currentTarget
+              .previousElementSibling as HTMLElement;
+            if (shadow) {
+              shadow.style.top = "6px";
+              shadow.style.left = "6px";
+              shadow.style.right = "-6px";
+              shadow.style.bottom = "-6px";
+            }
+          }}
+        >
+          {props.children}
+        </button>
+      </div>
+    </div>
+  );
+}
@@ -1,10 +1,5 @@
-import localfont from "next/font/local";
-
-const fluxgore = localfont({
-  src: "../fonts/FLUXGORE/fluxgore_italic.otf",
-  weight: "400",
-  style: "italic",
-});
+import { fluxgore } from "@/utils/fonts";
+import Button from "./Button";

 interface CoverHeadingProps {
  children: React.ReactNode;
@@ -20,16 +15,16 @@ function CoverHeading({ children, textPosition }: CoverHeadingProps) {
        className="text-white relative"
        style={{
          textAlign: textAlign,
-          fontSize: "130px",
+          fontSize: "8vw", // Changed from fixed 130px to 8vw
          lineHeight: "1",
        }}
      >
        {/* Shadow layer */}
        {textAlign === "left" && (
          <span
-            className="absolute top-0 left-0 text-black"
+            className="absolute top-0 text-black"
            style={{
-              transform: `translate(18px, 11px)`,
+              transform: `translate(1.1vw, 0.7vw)`, // Changed from fixed pixels to vw
              textAlign: textAlign,
              zIndex: 1,
            }}
@@ -41,9 +36,9 @@ function CoverHeading({ children, textPosition }: CoverHeadingProps) {

        {textAlign === "right" && (
          <span
-            className="absolute top-0 right-0 text-black"
+            className="absolute top-0 text-black"
            style={{
-              transform: `translate(18px, 11px)`,
+              transform: `translate(calc(-100% + 1.1vw), 0.7vw)`, // Changed from fixed pixels to vw
              textAlign: textAlign,
              zIndex: 1,
            }}
@@ -60,7 +55,7 @@ function CoverHeading({ children, textPosition }: CoverHeadingProps) {
            zIndex: 3,
            display: "block",
            textAlign: textAlign,
-            WebkitTextStroke: "12px black",
+            WebkitTextStroke: "0.75vw black", // Changed from fixed 12px to 0.75vw
            paintOrder: "stroke fill",
          }}
        >
@@ -78,7 +73,7 @@ function DateBox() {
        className="bg-white text-black px-6 py-2 inline-block"
        style={{
          transform: "skewX(-15deg)",
-          fontSize: "40px",
+          fontSize: "2.5vw", // Changed from 40px to 2.5vw
          lineHeight: "1.2",
          filter: `
            drop-shadow(8px 8px 0px black)
@@ -97,90 +92,6 @@ function DateBox() {
  );
 }

-interface ButtonProps {
-  children: React.ReactNode;
-  onClick?: () => void;
-  className?: string;
-}
-
-function CoverButton(props: ButtonProps) {
-  return (
-    <div className={fluxgore.className}>
-      <div className="relative inline-block">
-        {/* Shadow element */}
-        <div
-          className="absolute bg-black transition-all duration-150 ease-in-out"
-          style={{
-            top: "8px",
-            left: "8px",
-            right: "-8px",
-            bottom: "-8px",
-            clipPath:
-              "polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px)",
-            zIndex: 0,
-          }}
-        />
-        {/* Button */}
-        <button
-          className={`bg-white text-black inline-block relative transition-all duration-150 ease-in-out hover:bg-gray-100 active:translate-x-1 active:translate-y-1 ${props.className}`}
-          onClick={props.onClick}
-          style={{
-            fontSize: "18px",
-            lineHeight: "1.2",
-            padding: "20px 40px",
-            clipPath:
-              "polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px)",
-            border: "none",
-            zIndex: 1,
-          }}
-          onMouseEnter={(e) => {
-            const shadow = e.currentTarget
-              .previousElementSibling as HTMLElement;
-            if (shadow) {
-              shadow.style.top = "6px";
-              shadow.style.left = "6px";
-              shadow.style.right = "-6px";
-              shadow.style.bottom = "-6px";
-            }
-          }}
-          onMouseLeave={(e) => {
-            const shadow = e.currentTarget
-              .previousElementSibling as HTMLElement;
-            if (shadow) {
-              shadow.style.top = "8px";
-              shadow.style.left = "8px";
-              shadow.style.right = "-8px";
-              shadow.style.bottom = "-8px";
-            }
-          }}
-          onMouseDown={(e) => {
-            const shadow = e.currentTarget
-              .previousElementSibling as HTMLElement;
-            if (shadow) {
-              shadow.style.top = "4px";
-              shadow.style.left = "4px";
-              shadow.style.right = "-4px";
-              shadow.style.bottom = "-4px";
-            }
-          }}
-          onMouseUp={(e) => {
-            const shadow = e.currentTarget
-              .previousElementSibling as HTMLElement;
-            if (shadow) {
-              shadow.style.top = "6px";
-              shadow.style.left = "6px";
-              shadow.style.right = "-6px";
-              shadow.style.bottom = "-6px";
-            }
-          }}
-        >
-          {props.children}
-        </button>
-      </div>
-    </div>
-  );
-}
-
 function Cover() {
  return (
    <div
@@ -200,13 +111,13 @@ function Cover() {
      </div>

      <div className="flex justify-center items-center">
-        <CoverButton
+        <Button
          onClick={() => {
            window.location.href = "/about";
          }}
        >
          смотреть карту
-        </CoverButton>
+        </Button>
      </div>
    </div>
  );
@@ -0,0 +1,103 @@
+/* eslint-disable @next/next/no-img-element */
+import { gothampro } from "@/utils/fonts";
+import Button from "./Button";
+
+function Info() {
+  return (
+    <div className={gothampro.className}>
+      <div
+        className="bg-[#161616] relative overflow-hidden"
+        style={{
+          backgroundImage: `url('/images/noise.svg')`,
+          backgroundSize: "cover",
+          backgroundRepeat: "repeat",
+          backgroundBlendMode: "overlay",
+        }}
+      >
+        <div className="container mx-auto pt-36">
+          <div className="flex flex-row">
+            <div className="flex-1 basis-1/3">
+              <p className="text-white opacity-60 text-base uppercase font-medium">
+                [ о нас ]
+              </p>
+            </div>
+
+            <div className="flex-col max-w-2/3">
+              <p className="text-white text-4xl font-normal">
+                Фестиваль технических видов спорта 2025 — это седьмой{" "}
+                <span className="text-[#1068B0]">год драйва и эмоций</span>!
+              </p>
+            </div>
+          </div>
+
+          <div className="flex flex-row">
+            <div className="flex-1 basis-2/12"></div>
+
+            <div className="flex-col max-w-10/12">
+              <p className="text-white text-4xl font-normal">
+                Организованный Департаментом спорта Москвы и РАФ в День города,
+                он объединяет фанатов скорости и семьи.
+              </p>
+            </div>
+          </div>
+
+          <div className="flex flex-row mt-8">
+            <div className="flex-1 basis-1/3"></div>
+
+            <div className="flex-col max-w-2/3">
+              <p className="text-white text-base font-normal max-w-2/5">
+                В этом году, помимо традиционной «Битвы за Москву» по дрифту,
+                вас ждут абсолютно новые для фестиваля соревнования:{" "}
+                <span className="text-[#1068B0]">
+                  YUKA Джимхана и Кубок ШОС по Мотокроссу.
+                </span>
+                А также масса активностей: выставки авто/мото, квест,
+                граффити-контест, детская зона и киберкафе. <br />
+                <br />
+                Благодаря новым партнерам, праздник будет еще ярче. Приходите
+                всей семьей и получите незабываемые впечатления!
+              </p>
+            </div>
+          </div>
+
+          <div className="flex flex-row mt-8">
+            <div className="flex-1 basis-1/3"></div>
+
+            <div className="flex-col min-w-2/3 justify-start items-start">
+              <Button variant="blue">смотреть весь фотоотчёт</Button>
+            </div>
+          </div>
+        </div>
+
+        <div className="container mx-auto flex flex-row pt-24 pb-56">
+          <div className="w-1/3">
+            <img
+              src="/images/info/moto.png"
+              alt="moto"
+              className="w-1/2 h-auto object-cover"
+            />
+          </div>
+          <div className="w-1/3">
+            <img
+              src="/images/info/podium.png"
+              alt="car"
+              className="w-full h-auto object-cover"
+            />
+          </div>
+          <div className="flex w-1/3">
+            <div className="w-1/3"></div>
+            <div className="w-2/3">
+              <img
+                src="/images/info/jump.png"
+                alt="jump"
+                className="w-full h-auto object-cover"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Info;
@@ -1,9 +1,218 @@
-import React from 'react'
+/* eslint-disable @next/next/no-img-element */
+
+import Link from "next/link";
+import { useState } from "react";

 function Navbar() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
  return (
-    <div>Navbar</div>
-  )
+    <nav className="absolute top-0 left-0 w-full bg-[#0D0D0D] text-white px-2 z-50">
+      <div className="container min-h-20 mx-auto flex justify-between items-center">
+        <img
+          src="/images/tech_logo.svg"
+          alt="Tech Fest Logo"
+          className="h-8 md:h-10"
+        />
+
+        {/* Desktop Navigation */}
+        <ul className="hidden lg:flex space-x-20 uppercase text-base">
+          <li>
+            <Link href="/" className="hover:underline">
+              О фестивале
+            </Link>
+          </li>
+          <li>
+            <Link href="/about" className="hover:underline">
+              Карта
+            </Link>
+          </li>
+          <li>
+            <Link href="/events" className="hover:underline">
+              соревнования
+            </Link>
+          </li>
+          <li>
+            <Link href="/contact" className="hover:underline">
+              Активности
+            </Link>
+          </li>
+        </ul>
+
+        {/* Desktop Social Links */}
+        <ul className="hidden md:flex space-x-2 items-center">
+          <li>
+            <Link
+              href="https://t.me/your_channel"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="w-8 h-8 bg-white bg-opacity-10 hover:bg-opacity-20 hover:scale-110 active:scale-95 rounded-full flex items-center justify-center transition-all duration-200 transform hover:shadow-lg hover:shadow-blue-500/30"
+            >
+              <svg
+                className="w-4 h-4 fill-black hover:fill-blue-400 transition-colors duration-200"
+                viewBox="0 0 24 24"
+              >
+                <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
+              </svg>
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="https://vk.com/your_group"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="w-8 h-8 bg-white bg-opacity-10 hover:bg-opacity-20 hover:scale-110 active:scale-95 rounded-full flex items-center justify-center transition-all duration-200 transform hover:shadow-lg hover:shadow-blue-600/30"
+            >
+              <svg
+                className="w-4 h-4 fill-black hover:fill-blue-500 transition-colors duration-200"
+                viewBox="0 0 24 24"
+              >
+                <path d="M15.684 0H8.316C1.592 0 0 1.592 0 8.316v7.368C0 22.408 1.592 24 8.316 24h7.368C22.408 24 24 22.408 24 15.684V8.316C24 1.592 22.408 0 15.684 0zm3.692 17.123h-1.744c-.66 0-.864-.525-2.05-1.71-1.033-1.001-1.49-.996-1.701-.996-.346 0-.444.097-.444.574v1.563c0 .422-.135.678-1.253.678-1.846 0-3.896-1.118-5.335-3.202C4.624 10.857 4.03 8.57 4.03 8.096c0-.21.097-.405.574-.405h1.744c.428 0 .59.194.756.648.83 2.405 2.229 4.506 2.807 4.506.213 0 .31-.097.31-.632V9.98c-.062-1.438-.84-1.563-.84-2.077 0-.17.135-.34.359-.34h2.744c.359 0 .487.194.487.632v3.473c0 .359.159.487.259.487.213 0 .383-.128.773-.518 1.205-1.315 2.067-3.34 2.067-3.34.118-.248.311-.485.73-.485h1.744c.523 0 .634.27.523.632-.24.749-2.42 4.062-2.42 4.062-.194.31-.259.446 0 .747.194.226 1.116.96 1.394 1.315.757.973.525 1.528.157 1.528z" />
+              </svg>
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="https://youtube.com/@your_channel"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="w-8 h-8 bg-white bg-opacity-10 hover:bg-opacity-20 hover:scale-110 active:scale-95 rounded-full flex items-center justify-center transition-all duration-200 transform hover:shadow-lg hover:shadow-red-500/30"
+            >
+              <svg
+                className="w-4 h-4 fill-black hover:fill-red-500 transition-colors duration-200"
+                viewBox="0 0 24 24"
+              >
+                <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+              </svg>
+            </Link>
+          </li>
+        </ul>
+
+        {/* Mobile Menu Button */}
+        <button
+          onClick={toggleMenu}
+          className="lg:hidden p-2 rounded-md hover:bg-white hover:bg-opacity-10 transition-colors"
+          aria-label="Toggle menu"
+        >
+          <svg
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            {isMenuOpen ? (
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            ) : (
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            )}
+          </svg>
+        </button>
+      </div>
+
+      {/* Mobile Menu */}
+      {isMenuOpen && (
+        <div className="lg:hidden bg-[#0D0D0D] border-t border-gray-700">
+          <div className="container mx-auto px-2 py-4">
+            <ul className="space-y-4 uppercase text-base mb-6">
+              <li>
+                <Link
+                  href="/"
+                  className="block py-2 hover:text-gray-300"
+                  onClick={() => setIsMenuOpen(false)}
+                >
+                  О фестивале
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/about"
+                  className="block py-2 hover:text-gray-300"
+                  onClick={() => setIsMenuOpen(false)}
+                >
+                  Карта
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/events"
+                  className="block py-2 hover:text-gray-300"
+                  onClick={() => setIsMenuOpen(false)}
+                >
+                  соревнования
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/contact"
+                  className="block py-2 hover:text-gray-300"
+                  onClick={() => setIsMenuOpen(false)}
+                >
+                  Активности
+                </Link>
+              </li>
+            </ul>
+
+            {/* Mobile Social Links */}
+            <div className="flex space-x-4 justify-center md:hidden">
+              <Link
+                href="https://t.me/your_channel"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="w-10 h-10 bg-white bg-opacity-10 hover:bg-opacity-20 rounded-full flex items-center justify-center transition-all duration-200"
+              >
+                <svg
+                  className="w-5 h-5 fill-white"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
+                </svg>
+              </Link>
+              <Link
+                href="https://vk.com/your_group"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="w-10 h-10 bg-white bg-opacity-10 hover:bg-opacity-20 rounded-full flex items-center justify-center transition-all duration-200"
+              >
+                <svg
+                  className="w-5 h-5 fill-white"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M15.684 0H8.316C1.592 0 0 1.592 0 8.316v7.368C0 22.408 1.592 24 8.316 24h7.368C22.408 24 24 22.408 24 15.684V8.316C24 1.592 22.408 0 15.684 0zm3.692 17.123h-1.744c-.66 0-.864-.525-2.05-1.71-1.033-1.001-1.49-.996-1.701-.996-.346 0-.444.097-.444.574v1.563c0 .422-.135.678-1.253.678-1.846 0-3.896-1.118-5.335-3.202C4.624 10.857 4.03 8.57 4.03 8.096c0-.21.097-.405.574-.405h1.744c.428 0 .59.194.756.648.83 2.405 2.229 4.506 2.807 4.506.213 0 .31-.097.31-.632V9.98c-.062-1.438-.84-1.563-.84-2.077 0-.17.135-.34.359-.34h2.744c.359 0 .487.194.487.632v3.473c0 .359.159.487.259.487.213 0 .383-.128.773-.518 1.205-1.315 2.067-3.34 2.067-3.34.118-.248.311-.485.73-.485h1.744c.523 0 .634.27.523.632-.24.749-2.42 4.062-2.42 4.062-.194.31-.259.446 0 .747.194.226 1.116.96 1.394 1.315.757.973.525 1.528.157 1.528z" />
+                </svg>
+              </Link>
+              <Link
+                href="https://youtube.com/@your_channel"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="w-10 h-10 bg-white bg-opacity-10 hover:bg-opacity-20 rounded-full flex items-center justify-center transition-all duration-200"
+              >
+                <svg
+                  className="w-5 h-5 fill-white"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+                </svg>
+              </Link>
+            </div>
+          </div>
+        </div>
+      )}
+    </nav>
+  );
 }

-export default Navbar
+export default Navbar;
@@ -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;
@@ -0,0 +1 @@
+Copyright (c) 2003 The Hoefler Type Foundry, Inc., dba Hoefler & Frere-Jones. All Rights Reserved.
@@ -1,9 +1,17 @@
 import Cover from "@/components/Cover";
+import Info from "@/components/Info";
+import Navbar from "@/components/Navbar";
+import Video from "@/components/Video";

 export default function Home() {
  return (
-    <main className="flex-col min-h-full">
-      <Cover />
-    </main>
+    <>
+      <Navbar />
+      <main className="flex-col min-h-full">
+        <Cover />
+        <Info />
+        <Video />
+      </main>
+    </>
  );
 }
@@ -0,0 +1,64 @@
+import localfont from "next/font/local";
+
+const fluxgore = localfont({
+  src: "../fonts/fluxgore/fluxgore_italic.otf",
+  weight: "400",
+  style: "italic",
+});
+
+const gothampro = localfont({
+  src: [
+    {
+      path: "../fonts/gotham_pro/gothampro_black.ttf",
+      weight: "900",
+      style: "normal",
+    },
+    {
+      path: "../fonts/gotham_pro/gothampro_blackitalic.ttf",
+      weight: "900",
+      style: "italic",
+    },
+    {
+      path: "../fonts/gotham_pro/gothampro_bold.ttf",
+      weight: "700",
+      style: "normal",
+    },
+    {
+      path: "../fonts/gotham_pro/gothampro_bolditalic.ttf",
+      weight: "700",
+      style: "italic",
+    },
+    {
+      path: "../fonts/gotham_pro/gothampro_italic.ttf",
+      weight: "400",
+      style: "italic",
+    },
+    {
+      path: "../fonts/gotham_pro/gothampro_light.ttf",
+      weight: "300",
+      style: "normal",
+    },
+    {
+      path: "../fonts/gotham_pro/gothampro_lightitalic.ttf",
+      weight: "300",
+      style: "italic",
+    },
+    {
+      path: "../fonts/gotham_pro/gothampro_medium.ttf",
+      weight: "500",
+      style: "normal",
+    },
+    {
+      path: "../fonts/gotham_pro/gothampro_mediumitalic.ttf",
+      weight: "500",
+      style: "italic",
+    },
+    {
+      path: "../fonts/gotham_pro/gothampro.ttf",
+      weight: "400",
+      style: "normal",
+    },
+  ],
+});
+
+export { fluxgore, gothampro };
				`@@ -0,0 +1 @@`
				`Copyright (c) 2003 The Hoefler Type Foundry, Inc., dba Hoefler & Frere-Jones. All Rights Reserved.`