diff --git a/public/images/info/jump.png b/public/images/info/jump.png new file mode 100644 index 0000000..a5b717f Binary files /dev/null and b/public/images/info/jump.png differ diff --git a/public/images/info/moto.png b/public/images/info/moto.png new file mode 100644 index 0000000..95ac720 Binary files /dev/null and b/public/images/info/moto.png differ diff --git a/public/images/info/podium.png b/public/images/info/podium.png new file mode 100644 index 0000000..a05ef5c Binary files /dev/null and b/public/images/info/podium.png differ diff --git a/public/images/noise.svg b/public/images/noise.svg new file mode 100644 index 0000000..24552a6 --- /dev/null +++ b/public/images/noise.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/tech_logo.svg b/public/images/tech_logo.svg new file mode 100644 index 0000000..da899bb --- /dev/null +++ b/public/images/tech_logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/images/video/arrows.svg b/public/images/video/arrows.svg new file mode 100644 index 0000000..2e9c47d --- /dev/null +++ b/public/images/video/arrows.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..6ab515a --- /dev/null +++ b/src/components/Button.tsx @@ -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 ( +
+
+ {/* Shadow element */} +
+ {/* Button */} + +
+
+ ); +} diff --git a/src/components/Cover.tsx b/src/components/Cover.tsx index 72cf920..6c981ea 100644 --- a/src/components/Cover.tsx +++ b/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" && ( @@ -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 ( -
-
- {/* Shadow element */} -
- {/* Button */} - -
-
- ); -} - function Cover() { return (
- { window.location.href = "/about"; }} > смотреть карту - +
); diff --git a/src/components/Info.tsx b/src/components/Info.tsx new file mode 100644 index 0000000..87a5fc3 --- /dev/null +++ b/src/components/Info.tsx @@ -0,0 +1,103 @@ +/* eslint-disable @next/next/no-img-element */ +import { gothampro } from "@/utils/fonts"; +import Button from "./Button"; + +function Info() { + return ( +
+
+
+
+
+

+ [ о нас ] +

+
+ +
+

+ Фестиваль технических видов спорта 2025 — это седьмой{" "} + год драйва и эмоций! +

+
+
+ +
+
+ +
+

+ Организованный Департаментом спорта Москвы и РАФ в День города, + он объединяет фанатов скорости и семьи. +

+
+
+ +
+
+ +
+

+ В этом году, помимо традиционной «Битвы за Москву» по дрифту, + вас ждут абсолютно новые для фестиваля соревнования:{" "} + + YUKA Джимхана и Кубок ШОС по Мотокроссу. + + А также масса активностей: выставки авто/мото, квест, + граффити-контест, детская зона и киберкафе.
+
+ Благодаря новым партнерам, праздник будет еще ярче. Приходите + всей семьей и получите незабываемые впечатления! +

+
+
+ +
+
+ +
+ +
+
+
+ +
+
+ moto +
+
+ car +
+
+
+
+ jump +
+
+
+
+
+ ); +} + +export default Info; diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index ed1d4be..dd45534 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -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 ( -
Navbar
- ) + + ); } -export default Navbar \ No newline at end of file +export default Navbar; \ No newline at end of file diff --git a/src/components/Video.tsx b/src/components/Video.tsx new file mode 100644 index 0000000..46de481 --- /dev/null +++ b/src/components/Video.tsx @@ -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 ( +
+

+ {number} +

+ +

+ {label} +

+
+ ); +} + +function Video() { + return ( +
+
+
+
+

как это Было

+
+ +
+

+ Прошлый фестиваль технических видов спорта стал незабываемым + праздником скорости и мастерства, собрав рекордное количество + участников и зрителей. +

+
+
+ +
+ +
+ +
+ + + + +
+
+
+ ); +} + +export default Video; diff --git a/src/fonts/gotham_pro/COPYRIGHT.txt b/src/fonts/gotham_pro/COPYRIGHT.txt new file mode 100644 index 0000000..1b0a7b0 --- /dev/null +++ b/src/fonts/gotham_pro/COPYRIGHT.txt @@ -0,0 +1 @@ +Copyright (c) 2003 The Hoefler Type Foundry, Inc., dba Hoefler & Frere-Jones. All Rights Reserved. \ No newline at end of file diff --git a/src/fonts/gotham_pro/gothampro.ttf b/src/fonts/gotham_pro/gothampro.ttf new file mode 100755 index 0000000..27121d2 Binary files /dev/null and b/src/fonts/gotham_pro/gothampro.ttf differ diff --git a/src/fonts/gotham_pro/gothampro_black.ttf b/src/fonts/gotham_pro/gothampro_black.ttf new file mode 100755 index 0000000..e722dc7 Binary files /dev/null and b/src/fonts/gotham_pro/gothampro_black.ttf differ diff --git a/src/fonts/gotham_pro/gothampro_blackitalic.ttf b/src/fonts/gotham_pro/gothampro_blackitalic.ttf new file mode 100755 index 0000000..6eb01c8 Binary files /dev/null and b/src/fonts/gotham_pro/gothampro_blackitalic.ttf differ diff --git a/src/fonts/gotham_pro/gothampro_bold.ttf b/src/fonts/gotham_pro/gothampro_bold.ttf new file mode 100755 index 0000000..2fb8ae4 Binary files /dev/null and b/src/fonts/gotham_pro/gothampro_bold.ttf differ diff --git a/src/fonts/gotham_pro/gothampro_bolditalic.ttf b/src/fonts/gotham_pro/gothampro_bolditalic.ttf new file mode 100755 index 0000000..da52e52 Binary files /dev/null and b/src/fonts/gotham_pro/gothampro_bolditalic.ttf differ diff --git a/src/fonts/gotham_pro/gothampro_italic.ttf b/src/fonts/gotham_pro/gothampro_italic.ttf new file mode 100755 index 0000000..bf0c716 Binary files /dev/null and b/src/fonts/gotham_pro/gothampro_italic.ttf differ diff --git a/src/fonts/gotham_pro/gothampro_light.ttf b/src/fonts/gotham_pro/gothampro_light.ttf new file mode 100755 index 0000000..3c2a120 Binary files /dev/null and b/src/fonts/gotham_pro/gothampro_light.ttf differ diff --git a/src/fonts/gotham_pro/gothampro_lightitalic.ttf b/src/fonts/gotham_pro/gothampro_lightitalic.ttf new file mode 100755 index 0000000..0e519cf Binary files /dev/null and b/src/fonts/gotham_pro/gothampro_lightitalic.ttf differ diff --git a/src/fonts/gotham_pro/gothampro_medium.ttf b/src/fonts/gotham_pro/gothampro_medium.ttf new file mode 100755 index 0000000..f8b0887 Binary files /dev/null and b/src/fonts/gotham_pro/gothampro_medium.ttf differ diff --git a/src/fonts/gotham_pro/gothampro_mediumitalic.ttf b/src/fonts/gotham_pro/gothampro_mediumitalic.ttf new file mode 100755 index 0000000..8bff2b2 Binary files /dev/null and b/src/fonts/gotham_pro/gothampro_mediumitalic.ttf differ diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 0c0afa6..987679f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -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 ( -
- -
+ <> + +
+ + +
+ ); } diff --git a/src/utils/fonts.ts b/src/utils/fonts.ts new file mode 100644 index 0000000..20e1a1a --- /dev/null +++ b/src/utils/fonts.ts @@ -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 };