lapikud/tipilan
3
0
Fork 0
mirror of https://github.com/Lapikud/tipilan.git synced 2026-03-23 21:34:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added sidebar, z-index hell

Browse Source
This commit is contained in:
Randel Mandre
2025-04-29 17:39:44 +03:00
parent ed248a88e5
commit 959ca48643
8 changed files with 178 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/layout.tsx
View File

@@ -1,5 +1,5 @@
// Head metadata
import type { Metadata } from "next";
// import type { Metadata } from "next";
// Fonts
import { Work_Sans } from "next/font/google";
@@ -33,17 +33,19 @@ export const vipnagorgialla = localFont({
});
import "./globals.css";
import Header from "@/components/Header";
import SidebarParent from "@/components/SidebarParent";
import Footer from "@/components/Footer";
const workSans = Work_Sans({
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Tipilan",
description: "TipiLAN on pungil põnevatest turniiridest, mini-võistlustest, loengutest ja paljust muust.",
};
// Commented out for now, because it doesn't work having client components in the layout file
// export const metadata: Metadata = {
// title: "Tipilan",
// description: "TipiLAN on pungil põnevatest turniiridest, mini-võistlustest, loengutest ja paljust muust.",
// };
export default function RootLayout({
children,
@@ -55,7 +57,7 @@ export default function RootLayout({
<body
className={`${workSans} antialiased bg-[#EEE5E5]`}
>
<Header />
<SidebarParent />
{children}
<Footer />
</body>

18
src/app/page.tsx
View File

@@ -6,7 +6,7 @@ export default function Home() {
return (
<div>
{/* Title */}
<div className="border-b-3 border-[#007CAB] flex items-center justify-between">
<div className="border-b-3 border-[#007CAB] flex items-center justify-between pt-18">
<img src="/tipilan-white.svg" alt="TipiLAN Logo" className="h-64"/>
<div className="pr-12 hidden 2xl:block">
<h3 className={`text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F]`}>Auhinnafond</h3>
@@ -15,13 +15,13 @@ export default function Home() {
</div>
{/* Grid of buttons */}
<div className="grid grid-cols-1 xl:grid-cols-3 border-[#007CAB] min-h-[33vh]">
<div className="p-12 flex flex-col justify-between border-b-3 lg:border-r-3 group border-[#007CAB] hover:bg-[#007CAB] transition-all">
<div className="p-12 flex flex-col justify-between border-b-3 lg:border-r-3 group border-[#007CAB] hover:bg-[#007CAB] transition">
<Link href="/timetable" prefetch={true}>
<div className="cursor-pointer flex flex-row justify-between">
<h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] group-hover:text-black`}>
Ajakava
</h2>
<MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition-all"/>
<MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition"/>
</div>
</Link>
<div>
@@ -32,12 +32,12 @@ export default function Home() {
</div>
</div>
<div className="p-12 flex flex-col justify-between border-b-3 lg:border-r-3 group border-[#007CAB] hover:bg-[#007CAB] transition-all">
<div className="p-12 flex flex-col justify-between border-b-3 lg:border-r-3 group border-[#007CAB] hover:bg-[#007CAB] transition">
<div className="cursor-pointer flex flex-row justify-between">
<h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] group-hover:text-black`}>
Turniirid
</h2>
<MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition-all"/>
<MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition"/>
</div>
<div>
<MdEmojiEvents size={'4em'} className="text-[#007CAB] group-hover:text-[#EEE5E5] mb-4"/>
@@ -52,7 +52,7 @@ export default function Home() {
<h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] group-hover:text-black`}>
Messiala
</h2>
<MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition-all"/>
<MdEast size={'4em'} className="text-[#007CAB] group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition"/>
</div>
<div>
<MdWeekend size={'4em'} className="text-[#007CAB] group-hover:text-[#EEE5E5] mb-4"/>
@@ -63,21 +63,19 @@ export default function Home() {
</div>
</div>
{/* Date */}
<div className={`p-12 flex flex-col ${vipnagorgialla.className} font-bold italic border-b-3 border-[#007CAB] hover:bg-[#007CAB] group transition-all`}>
<div className={`p-12 flex flex-col ${vipnagorgialla.className} font-bold italic border-b-3 border-[#007CAB] hover:bg-[#007CAB] group transition`}>
<Link href="/tickets" prefetch={true}>
<div className="cursor-pointer text-left flex flex-row justify-between xl:justify-start">
<h3 className="text-5xl text-[#2A2C3F] group-hover:text-black pb-8">
Broneeri oma koht juba täna!
</h3>
<MdEast size={'4em'} className="text-[#007CAB] ml-8 group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition-all"/>
<MdEast size={'4em'} className="text-[#007CAB] ml-8 group-hover:translate-x-2 -translate-y-2 group-hover:text-[#EEE5E5] transition"/>
</div>
</Link>
<h2 className="text-6xl text-[#007CAB] group-hover:text-[#EEE5E5]">
24.-26. okt.
</h2>
</div>
{/* Footer */}
</div>
);
}

2
src/app/tickets/page.tsx
View File

@@ -3,7 +3,7 @@ import Link from 'next/link';
export default function Tickets() {
return (
<div className="flex flex-col min-h-[90vh] bg-[#EEE5E5] p-12">
<div className="flex flex-col min-h-[90vh] bg-[#EEE5E5] p-12 pt-18">
<h1 className={`text-6xl ${vipnagorgialla.className} font-bold text-[#2A2C3F] mt-8 pb-8`}>Piletid ja registreerimine</h1>
<div className="flex justify-center items-center flex-row gap-16 flex-grow">
<div className="bg-[#007CAB] -skew-x-5 text-white px-12 py-16 w-72 hover:scale-105 transition-all">

4
src/app/timetable/page.tsx
View File

@@ -2,9 +2,9 @@ import { vipnagorgialla } from "../layout";
export default function Timetable() {
return (
<div className="flex flex-col min-h-[90vh] bg-[#EEE5E5] p-12">
<div className="flex flex-col min-h-[90vh] bg-[#EEE5E5] p-12 pt-18">
<h1 className={`text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] mt-8 mb-4`}>Ajakava</h1>
<p className="text-xl text-[#2A2C3F]">Ajakava on tegemisel.</p>
<p className="text-2xl text-[#2A2C3F]">Lisame ajakava lähiajal.</p>
</div>
);
}