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.

src/components/Cover.tsx

@@ -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>
   );