diff --git a/public/events/yuka.png b/public/events/yuka.png new file mode 100644 index 0000000..da262cf Binary files /dev/null and b/public/events/yuka.png differ diff --git a/public/images/events/paper_tear.png b/public/images/events/paper_tear.png new file mode 100644 index 0000000..d35f99c Binary files /dev/null and b/public/images/events/paper_tear.png differ diff --git a/src/components/Button.tsx b/src/components/Button.tsx index d85ba32..9875762 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -43,13 +43,16 @@ export default function Button(props: ButtonProps) { {/* Button */} + + + ); +} + +function Events() { + return ( +
+ Paper tear + +
+
+
+

что вас ждет

+
+ +

+ [Для участия в соревнованиях нажмите кнопку регистрация] +

+
+ +
+ +
+
+
+ ); +} + +export default Events; diff --git a/src/components/Info.tsx b/src/components/Info.tsx index 4a5ffa7..041b45c 100644 --- a/src/components/Info.tsx +++ b/src/components/Info.tsx @@ -64,7 +64,13 @@ function Info() {
-
diff --git a/src/components/Scheme.tsx b/src/components/Scheme.tsx index 4bfd7cd..fafdcbc 100644 --- a/src/components/Scheme.tsx +++ b/src/components/Scheme.tsx @@ -1,10 +1,69 @@ /* eslint-disable @next/next/no-img-element */ import { fluxgore, gothampro } from "@/utils/fonts"; import Button from "./Button"; +import { ReactNode, useState } from "react"; + +interface SchemeSelectProps { + children: ReactNode; + active?: boolean; + onClick?: () => void; +} + +function SchemeSelect({ + children, + active = false, + onClick, +}: SchemeSelectProps) { + const baseClasses = `${fluxgore.className} leading-none cursor-pointer transition-all duration-300 ease-in-out hover:opacity-80 transform hover:scale-105`; + const activeClasses = "text-[#1E1E1E] text-4xl"; + const inactiveClasses = "text-[#0D0D0D] text-xl opacity-50 self-end"; + + return ( +

+ {children} +

+ ); +} + +interface SchemeItemProps { + time: string; + title: string; +} + +function SchemeItem({ time, title }: SchemeItemProps) { + return ( +
+ + {time} + + + {title} + +
+ ); +} function Scheme() { + const [activeVenue, setActiveVenue] = useState("главная площадка"); + + const venues = [ + { name: "главная площадка" }, + { name: "мотокросс" }, + { name: "картинг" }, + { name: "Детская площадка" }, + { name: "выставка" }, + { name: "мфт" }, + ]; + return ( -
+

5 сентября -

+ +
+ {venues.map((venue) => ( + setActiveVenue(venue.name)} + > + {venue.name} + + ))} +
+ +
+ + + + + + + + + + +
); diff --git a/src/components/Video.tsx b/src/components/Video.tsx index 970989d..406b2a4 100644 --- a/src/components/Video.tsx +++ b/src/components/Video.tsx @@ -35,7 +35,7 @@ function Video() { }} > Lines @@ -86,7 +86,7 @@ function Video() {
Paper tear diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c28d69e..c8d6394 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,4 +1,5 @@ import Cover from "@/components/Cover"; +import Events from "@/components/Events"; import Info from "@/components/Info"; import Navbar from "@/components/Navbar"; import Scheme from "@/components/Scheme"; @@ -13,6 +14,7 @@ export default function Home() {