115 lines
4.5 KiB
TypeScript
115 lines
4.5 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
||
import { gothampro } from "@/utils/fonts";
|
||
import Button from "./Button";
|
||
|
||
function Info() {
|
||
return (
|
||
<div id="info" className={gothampro.className}>
|
||
<div
|
||
className="bg-[#161616] relative overflow-hidden px-4"
|
||
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-sm md:text-base uppercase font-medium">
|
||
[ о нас ]
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex-col max-w-2/3">
|
||
<p className="text-white text-base md: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-base md: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 md:text-base font-normal md: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 md:min-w-2/3 justify-start items-start">
|
||
<Button
|
||
onClick={() => {
|
||
// open this link in a new tab
|
||
const url = "https://disk.yandex.ru/d/l8yiw1huY5NU9w";
|
||
|
||
window.open(url, "_blank", "noopener,noreferrer");
|
||
}}
|
||
shadowEnabled={false}
|
||
variant="blue"
|
||
>
|
||
смотреть весь фотоотчёт
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="container mx-auto flex flex-col md:flex-row pt-12 md:pt-24 pb-28 md:pb-56 gap-4 md:gap-0">
|
||
<div className="w-full md:w-1/3 flex justify-center md:justify-start">
|
||
<img
|
||
src="/images/info/moto.png"
|
||
alt="moto"
|
||
className="w-3/4 md:w-1/2 h-auto object-cover"
|
||
/>
|
||
</div>
|
||
<div className="w-full md:w-1/3 flex justify-center">
|
||
<img
|
||
src="/images/info/podium.jpg"
|
||
alt="car"
|
||
className="w-3/4 md:w-full h-auto object-cover"
|
||
/>
|
||
</div>
|
||
<div className="flex w-full md:w-1/3 justify-center md:justify-start">
|
||
<div className="w-0 md:w-1/3"></div>
|
||
<div className="w-3/4 md: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;
|