150 lines
3.8 KiB
TypeScript
150 lines
3.8 KiB
TypeScript
import { fluxgore } from "@/utils/fonts";
|
||
import Button from "./Button";
|
||
|
||
interface CoverHeadingProps {
|
||
children: React.ReactNode;
|
||
textPosition?: "left" | "right";
|
||
}
|
||
|
||
function CoverHeading({ children, textPosition }: CoverHeadingProps) {
|
||
const textAlign = textPosition || "left";
|
||
|
||
return (
|
||
<h1
|
||
className={`${fluxgore.className} text-white relative`}
|
||
style={{
|
||
textAlign: textAlign,
|
||
fontSize: "8vw", // Changed from fixed 130px to 8vw
|
||
lineHeight: "1",
|
||
}}
|
||
>
|
||
{/* Shadow layer */}
|
||
{textAlign === "left" && (
|
||
<span
|
||
className="absolute top-0 text-black"
|
||
style={{
|
||
transform: `translate(1.1vw, 0.7vw)`, // Changed from fixed pixels to vw
|
||
textAlign: textAlign,
|
||
zIndex: 1,
|
||
}}
|
||
aria-hidden="true"
|
||
>
|
||
{children}
|
||
</span>
|
||
)}
|
||
|
||
{textAlign === "right" && (
|
||
<span
|
||
className="absolute top-0 text-black"
|
||
style={{
|
||
transform: `translate(calc(-100% + 1.1vw), 0.7vw)`, // Changed from fixed pixels to vw
|
||
textAlign: textAlign,
|
||
zIndex: 1,
|
||
}}
|
||
aria-hidden="true"
|
||
>
|
||
{children}
|
||
</span>
|
||
)}
|
||
|
||
{/* Main text */}
|
||
<span
|
||
className="relative text-white"
|
||
style={{
|
||
zIndex: 3,
|
||
display: "block",
|
||
textAlign: textAlign,
|
||
WebkitTextStroke: "0.75vw black", // Changed from fixed 12px to 0.75vw
|
||
paintOrder: "stroke fill",
|
||
}}
|
||
>
|
||
{children}
|
||
</span>
|
||
</h1>
|
||
);
|
||
}
|
||
|
||
function DateBox() {
|
||
return (
|
||
<div
|
||
className={`${fluxgore.className} bg-white text-black px-6 py-2 inline-block`}
|
||
style={{
|
||
transform: "skewX(-15deg)",
|
||
fontSize: "2vw", // Changed from 40px to 2.5vw
|
||
lineHeight: "1.2",
|
||
filter: `
|
||
drop-shadow(8px 8px 0px black)
|
||
drop-shadow(-2px -2px 0px rgba(0,0,0,0.3))
|
||
`,
|
||
border: "4px solid black",
|
||
}}
|
||
>
|
||
<div style={{ transform: "skewX(15deg)" }}>
|
||
5-7 СЕНТЯБРЯ
|
||
<br />
|
||
МОСКВА 2025
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Cover() {
|
||
return (
|
||
<div
|
||
className="bg-cover bg-center bg-no-repeat relative justify-center items-center py-36"
|
||
style={{ backgroundImage: "url('/images/cover.svg')" }}
|
||
>
|
||
<div className="container mx-auto max-w-5/7 mb-24">
|
||
{/* Top row with ФЕСТИВАЛЬ and date box */}
|
||
<div className="flex flex-row items-center space-x-16">
|
||
<CoverHeading>ФЕСТИВАЛЬ</CoverHeading>
|
||
<DateBox />
|
||
</div>
|
||
|
||
<CoverHeading textPosition="right">ТЕХНИЧЕСКИХ</CoverHeading>
|
||
|
||
<CoverHeading>ВИДОВ СПОРТА</CoverHeading>
|
||
</div>
|
||
|
||
<div className="flex justify-center items-center">
|
||
<Button
|
||
onClick={() => {
|
||
window.location.href = "/about";
|
||
}}
|
||
>
|
||
смотреть карту
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function CoverSoon() {
|
||
return (
|
||
<div
|
||
className="bg-cover bg-center bg-no-repeat relative justify-center items-center py-36"
|
||
style={{ backgroundImage: "url('/images/cover.svg')" }}
|
||
>
|
||
<div className="container mx-auto max-w-5/7 mb-24">
|
||
{/* Top row with ФЕСТИВАЛЬ and date box */}
|
||
<div className="flex flex-row items-center space-x-16">
|
||
<CoverHeading>ФЕСТИВАЛЬ</CoverHeading>
|
||
<DateBox />
|
||
</div>
|
||
|
||
<CoverHeading textPosition="right">ТЕХНИЧЕСКИХ</CoverHeading>
|
||
|
||
<CoverHeading>ВИДОВ СПОРТА</CoverHeading>
|
||
</div>
|
||
|
||
<div className="flex justify-center items-center">
|
||
<Button disabled>скоро</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export { CoverSoon };
|
||
|
||
export default Cover;
|