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

initial commit

Browse Source
This commit is contained in:
Anuarbek Zhakhangir
2025-07-14 20:18:14 +09:00
parent a047bfe27a
commit 8011550ae8
9 changed files with 6335 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/images/cover.svg
+5979
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 16 MiB

public/images/cover_text.svg
+70
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

public/images/covert_text.svg
+55
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

src/components/Cover.tsx
+215
View File
@@ -0,0 +1,215 @@
import localfont from "next/font/local";
const fluxgore = localfont({
src: "../fonts/FLUXGORE/fluxgore_italic.otf",
weight: "400",
style: "italic",
});
interface CoverHeadingProps {
children: React.ReactNode;
textPosition?: "left" | "right";
}
function CoverHeading({ children, textPosition }: CoverHeadingProps) {
const textAlign = textPosition || "left";
return (
<div className={fluxgore.className}>
<h1
className="text-white relative"
style={{
textAlign: textAlign,
fontSize: "130px",
lineHeight: "1",
}}
>
{/* Shadow layer */}
{textAlign === "left" && (
<span
className="absolute top-0 left-0 text-black"
style={{
transform: `translate(18px, 11px)`,
textAlign: textAlign,
zIndex: 1,
}}
aria-hidden="true"
>
{children}
</span>
)}
{textAlign === "right" && (
<span
className="absolute top-0 right-0 text-black"
style={{
transform: `translate(18px, 11px)`,
textAlign: textAlign,
zIndex: 1,
}}
aria-hidden="true"
>
{children}
</span>
)}
{/* Main text */}
<span
className="relative text-white"
style={{
zIndex: 3,
display: "block",
textAlign: textAlign,
WebkitTextStroke: "12px black",
paintOrder: "stroke fill",
}}
>
{children}
</span>
</h1>
</div>
);
}
function DateBox() {
return (
<div className={fluxgore.className}>
<div
className="bg-white text-black px-6 py-2 inline-block"
style={{
transform: "skewX(-15deg)",
fontSize: "40px",
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>
</div>
);
}
interface ButtonProps {
children: React.ReactNode;
onClick?: () => void;
className?: string;
}
function CoverButton(props: ButtonProps) {
return (
<div className={fluxgore.className}>
<div className="relative inline-block">
{/* Shadow element */}
<div
className="absolute bg-black transition-all duration-150 ease-in-out"
style={{
top: "8px",
left: "8px",
right: "-8px",
bottom: "-8px",
clipPath:
"polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px)",
zIndex: 0,
}}
/>
{/* Button */}
<button
className={`bg-white text-black inline-block relative transition-all duration-150 ease-in-out hover:bg-gray-100 active:translate-x-1 active:translate-y-1 ${props.className}`}
onClick={props.onClick}
style={{
fontSize: "18px",
lineHeight: "1.2",
padding: "20px 40px",
clipPath:
"polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px)",
border: "none",
zIndex: 1,
}}
onMouseEnter={(e) => {
const shadow = e.currentTarget
.previousElementSibling as HTMLElement;
if (shadow) {
shadow.style.top = "6px";
shadow.style.left = "6px";
shadow.style.right = "-6px";
shadow.style.bottom = "-6px";
}
}}
onMouseLeave={(e) => {
const shadow = e.currentTarget
.previousElementSibling as HTMLElement;
if (shadow) {
shadow.style.top = "8px";
shadow.style.left = "8px";
shadow.style.right = "-8px";
shadow.style.bottom = "-8px";
}
}}
onMouseDown={(e) => {
const shadow = e.currentTarget
.previousElementSibling as HTMLElement;
if (shadow) {
shadow.style.top = "4px";
shadow.style.left = "4px";
shadow.style.right = "-4px";
shadow.style.bottom = "-4px";
}
}}
onMouseUp={(e) => {
const shadow = e.currentTarget
.previousElementSibling as HTMLElement;
if (shadow) {
shadow.style.top = "6px";
shadow.style.left = "6px";
shadow.style.right = "-6px";
shadow.style.bottom = "-6px";
}
}}
>
{props.children}
</button>
</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/6 mb-24">
{/* Top row with ФЕСТИВАЛЬ and date box */}
<div className="flex items-center" style={{ gap: "40px" }}>
<CoverHeading>ФЕСТИВАЛЬ</CoverHeading>
<DateBox />
</div>
<CoverHeading textPosition="right">ТЕХНИЧЕСКИХ</CoverHeading>
<CoverHeading>ВИДОВ СПОРТА</CoverHeading>
</div>
<div className="flex justify-center items-center">
<CoverButton
onClick={() => {
window.location.href = "/about";
}}
>
смотреть карту
</CoverButton>
</div>
</div>
);
}
export default Cover;
src/components/Navbar.tsx
+9
View File
@@ -0,0 +1,9 @@
import React from 'react'
function Navbar() {
return (
<div>Navbar</div>
)
}
export default Navbar
src/fonts/FLUXGORE/COPYRIGHT.txt
+1
View File
@@ -0,0 +1 @@
FLUXGORE © By RAREGUN (All Rights Reserved)
src/fonts/FLUXGORE/fluxgore_italic.otf
Executable
BIN
View File
Binary file not shown.
src/pages/index.tsx
+4 -110
View File
@@ -1,115 +1,9 @@
import Image from "next/image";
import { Geist, Geist_Mono } from "next/font/google";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
import Cover from "@/components/Cover";
export default function Home() {
return (
<div
className={`${geistSans.className} ${geistMono.className} grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]`}
>
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2 tracking-[-.01em]">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
src/pages/index.tsx
</code>
.
</li>
<li className="tracking-[-.01em]">
Save and see your changes instantly.
</li>
</ol>
<div className="flex gap-4 items-center flex-col sm:flex-row">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Read our docs
</a>
</div>
</main>
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org →
</a>
</footer>
</div>
<main className="flex-col min-h-full">
<Cover />
</main>
);
}
src/styles/globals.css
+2 -19
View File
@@ -1,26 +1,9 @@
@import "tailwindcss";
:root {
--background: #ffffff;
--foreground: #171717;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
height: 100%;
}
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}