zhaxal/tech-fest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor code structure for improved readability and maintainability

Browse Source
This commit is contained in:
Anuarbek Zhakhangir
2025-07-26 13:48:36 +09:00
parent 3c93956ae6
commit 72d04e034d
18 changed files with 268 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Cover.tsx
+32 -10
View File
@@ -1,3 +1,4 @@
/* eslint-disable @next/next/no-img-element */
import { fluxgore } from "@/utils/fonts";
import Button from "./Button";
@@ -14,7 +15,7 @@ function CoverHeading({ children, textPosition }: CoverHeadingProps) {
className={`${fluxgore.className} text-white relative`}
style={{
textAlign: textAlign,
fontSize: "8vw", // Changed from fixed 130px to 8vw
fontSize: "clamp(50px, 10vw, 7vw)", // Slightly smaller on all screen sizes
lineHeight: "1",
}}
>
@@ -23,7 +24,7 @@ function CoverHeading({ children, textPosition }: CoverHeadingProps) {
<span
className="absolute top-0 text-black"
style={{
transform: `translate(1.1vw, 0.7vw)`, // Changed from fixed pixels to vw
transform: `translate(clamp(6px, 1.5vw, 1vw), clamp(4px, 1vw, 0.6vw))`, // Adjusted shadow offset
textAlign: textAlign,
zIndex: 1,
}}
@@ -37,7 +38,7 @@ function CoverHeading({ children, textPosition }: CoverHeadingProps) {
<span
className="absolute top-0 text-black"
style={{
transform: `translate(calc(-100% + 1.1vw), 0.7vw)`, // Changed from fixed pixels to vw
transform: `translate(calc(-100% + clamp(6px, 1.5vw, 1vw)), clamp(4px, 1vw, 0.6vw))`, // Adjusted shadow offset
textAlign: textAlign,
zIndex: 1,
}}
@@ -54,7 +55,7 @@ function CoverHeading({ children, textPosition }: CoverHeadingProps) {
zIndex: 3,
display: "block",
textAlign: textAlign,
WebkitTextStroke: "0.75vw black", // Changed from fixed 12px to 0.75vw
WebkitTextStroke: "clamp(3px, 1vw, 0.6vw) black", // Adjusted stroke width
paintOrder: "stroke fill",
}}
>
@@ -67,10 +68,9 @@ function CoverHeading({ children, textPosition }: CoverHeadingProps) {
function DateBox() {
return (
<div
className={`${fluxgore.className} bg-white text-black px-6 py-2 inline-block`}
className={`${fluxgore.className} bg-white text-black px-6 py-2 inline-blockt text-3xl md:text-[40px]`}
style={{
transform: "skewX(-15deg)",
fontSize: "2vw", // Changed from 40px to 2.5vw
lineHeight: "1.2",
filter: `
drop-shadow(8px 8px 0px black)
@@ -94,16 +94,36 @@ function Cover() {
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">
<div className="container mx-auto mb-24">
{/* Top row with ФЕСТИВАЛЬ and date box */}
<div className="flex align-center justify-center pb-7 md:hidden">
<DateBox />
</div>
{/* <div className="flex align-center justify-center pb-7 md:hidden">
<DateBox />
</div>
<div className="flex flex-row items-center space-x-16">
<CoverHeading>ФЕСТИВАЛЬ</CoverHeading>
<DateBox />
<div className="hidden md:block">
<DateBox />
</div>
</div>
<CoverHeading textPosition="right">ТЕХНИЧЕСКИХ</CoverHeading>
<CoverHeading>ВИДОВ СПОРТА</CoverHeading>
<CoverHeading>ВИДОВ СПОРТА</CoverHeading> */}
<img
src="/images/cover_text.png"
alt="Фестиваль технических видов спорта 2025"
className="w-full max-w-3xl mx-auto hidden md:block"
/>
<img
src="/images/cover_text_mobile.png"
alt="Фестиваль технических видов спорта 2025"
className="w-full max-w-3xl mx-auto md:hidden"
/>
</div>
<div className="flex justify-center items-center">
@@ -129,7 +149,9 @@ function CoverSoon() {
{/* Top row with ФЕСТИВАЛЬ and date box */}
<div className="flex flex-row items-center space-x-16">
<CoverHeading>ФЕСТИВАЛЬ</CoverHeading>
<DateBox />
<div className="hidden md:block">
<DateBox />
</div>
</div>
<CoverHeading textPosition="right">ТЕХНИЧЕСКИХ</CoverHeading>