Added tickets and timetable pages

pull/2/head
v4ltages 8 months ago
parent 9399dc332e
commit ed248a88e5
No known key found for this signature in database
GPG Key ID: DC7BC38E0DC642B
  1. 2
      src/app/layout.tsx
  2. 46
      src/app/page.tsx
  3. 53
      src/app/tickets/page.tsx
  4. 10
      src/app/timetable/page.tsx
  5. 21
      src/components/Footer.tsx

@ -34,6 +34,7 @@ export const vipnagorgialla = localFont({
import "./globals.css";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
const workSans = Work_Sans({
subsets: ["latin"],
@ -56,6 +57,7 @@ export default function RootLayout({
>
<Header />
{children}
<Footer />
</body>
</html>
);

@ -1,6 +1,6 @@
import { vipnagorgialla } from "./layout";
import { SiDiscord, SiInstagram, SiFacebook } from "react-icons/si";
import { MdEast, MdEmojiEvents, MdEventNote, MdWeekend } from "react-icons/md";
import Link from 'next/link';
export default function Home() {
return (
@ -16,12 +16,14 @@ export default function Home() {
{/* 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="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"/>
</div>
<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"/>
</div>
</Link>
<div>
<MdEventNote size={'4em'} className="text-[#007CAB] group-hover:text-[#EEE5E5] mb-4"/>
<p className="text-xl group-hover:text-black">
@ -62,32 +64,20 @@ export default function Home() {
</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="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"/>
</div>
<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"/>
</div>
</Link>
<h2 className="text-6xl text-[#007CAB] group-hover:text-[#EEE5E5]">
24.-26. okt.
</h2>
</div>
{/* Footer */}
<div className="flex items-center justify-between h-60 px-12">
<img src="/tipilan-white.svg" alt="TipiLAN Logo" className="h-16"/>
{/* Social media */}
<div className="flex flex-row">
<a href="#" target="_blank" rel="noopener noreferrer">
<SiDiscord title="Discord" size={'2em'} className="mx-4 text-[#2A2C3F]"/>
</a>
<a href="#" target="_blank" rel="noopener noreferrer">
<SiInstagram title="Instagram" size={'2em'} className="mx-4 text-[#2A2C3F]"/>
</a>
<a href="#" target="_blank" rel="noopener noreferrer">
<SiFacebook title="Facebook" size={'2em'} className="mx-4 text-[#2A2C3F]"/>
</a>
</div>
</div>
</div>
);
}

@ -0,0 +1,53 @@
import { vipnagorgialla } from "../layout";
import Link from 'next/link';
export default function Tickets() {
return (
<div className="flex flex-col min-h-[90vh] bg-[#EEE5E5] p-12">
<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">
<h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-4`}>8</h2>
<h3 className={`text-3xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-2`}>Osaleja</h3>
<ul className="pl-4 pb-4 list-[square] marker:text-[#1F5673]">
<li className="text-xl">Isiklik laud, voolu- ja internetiühendus</li>
<li className="text-xl">Ligipääs demoalale</li>
<li className="text-xl">Turniiride pealt vaatamine</li>
<li className="text-xl">Võimalus osaleda miniturniiridel</li>
</ul>
<Link href="https://fienta.com/et/tipilan">
<button className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`}>OSTA PILET</button>
</Link>
</div>
<div className="bg-[#007CAB] -skew-x-5 text-white px-12 py-16 w-72 hover:scale-105 transition-all">
<h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-4`}>10</h2>
<h3 className={`text-3xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-2`}>Võistleja</h3>
<ul className="pl-4 pb-4 list-[square] marker:text-[#1F5673]">
<li className="text-xl">Võimalus osaleda turniiridel</li>
<li className="text-xl">Isiklik laud, voolu- ja internetiühendus</li>
<li className="text-xl">Ligipääs demoalale</li>
<li className="text-xl">Turniiride pealt vaatamine</li>
<li className="text-xl">Võimalus osaleda miniturniiridel</li>
</ul>
<Link href="https://fienta.com/et/tipilan">
<button className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`}>OSTA PILET</button>
</Link>
</div>
<div className="bg-[#007CAB] -skew-x-5 text-white px-12 py-16 w-72 hover:scale-105 transition-all">
<h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-4`}>6</h2>
<h3 className={`text-3xl ${vipnagorgialla.className} font-bold italic text-[#EEE5E5] pb-2`}>Külastaja</h3>
<ul className="pl-4 pb-4 list-[square] marker:text-[#1F5673]">
<li className="text-xl">Ligipääs demoalale</li>
<li className="text-xl">Turniiride pealt vaatamine</li>
<li className="text-xl">Võimalus osaleda miniturniiridel</li>
</ul>
<Link href="https://fienta.com/et/tipilan">
<button className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`}>OSTA PILET</button>
</Link>
</div>
</div>
</div>
);
}

@ -0,0 +1,10 @@
import { vipnagorgialla } from "../layout";
export default function Timetable() {
return (
<div className="flex flex-col min-h-[90vh] bg-[#EEE5E5] p-12">
<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>
</div>
);
}

@ -0,0 +1,21 @@
import { SiDiscord, SiInstagram, SiFacebook } from "react-icons/si";
const Footer = () => (
<div className="flex items-center justify-between h-60 px-12">
<img src="/tipilan-white.svg" alt="TipiLAN Logo" className="h-16"/>
{/* Social media */}
<div className="flex flex-row">
<a href="#" target="_blank" rel="noopener noreferrer">
<SiDiscord title="Discord" size={'2em'} className="mx-4 text-[#2A2C3F]"/>
</a>
<a href="#" target="_blank" rel="noopener noreferrer">
<SiInstagram title="Instagram" size={'2em'} className="mx-4 text-[#2A2C3F]"/>
</a>
<a href="#" target="_blank" rel="noopener noreferrer">
<SiFacebook title="Facebook" size={'2em'} className="mx-4 text-[#2A2C3F]"/>
</a>
</div>
</div>
);
export default Footer;
Loading…
Cancel
Save