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

Homepage updated to fit figma provided design

Browse Source
This commit is contained in:
Randel Mandre
2025-04-20 07:09:05 +03:00
parent 2ac86b5591
commit bd1c8f36da
13 changed files with 146 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/app/fonts/vipnagorgialla/Vipnagorgialla-Bd-It.otf Normal file
View File

Binary file not shown.

BIN
src/app/fonts/vipnagorgialla/Vipnagorgialla-Bd.otf Normal file
View File

Binary file not shown.

BIN
src/app/fonts/vipnagorgialla/Vipnagorgialla-Rg-It.otf Normal file
View File

Binary file not shown.

BIN
src/app/fonts/vipnagorgialla/Vipnagorgialla-Rg.otf Normal file
View File

Binary file not shown.

6
src/app/globals.css
View File

@@ -44,7 +44,11 @@
}
body {
font-family: Inter, Arial, Helvetica, sans-serif;
font-family: "Work Sans", Arial, Helvetica, sans-serif;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
}
:root {

45
src/app/layout.tsx
View File

@@ -1,15 +1,47 @@
// Head metadata
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({
variable: "--font-inter",
// Fonts
import { Work_Sans } from "next/font/google";
import localFont from 'next/font/local'
// Style 'only' has normal and italic for some reason.
// It uses the weight to determine the style used.
export const vipnagorgialla = localFont({
src: [
{
path: './fonts/vipnagorgialla/Vipnagorgialla-Rg.otf',
weight: '400',
style: 'normal',
},
{
path: './fonts/vipnagorgialla/Vipnagorgialla-Rg-It.otf',
weight: '400',
style: 'italic',
},
{
path: './fonts/vipnagorgialla/Vipnagorgialla-Bd.otf',
weight: '700',
style: 'normal',
},
{
path: './fonts/vipnagorgialla/Vipnagorgialla-Bd-It.otf',
weight: '700',
style: 'italic',
},
],
});
import "./globals.css";
import Header from "@/components/Header";
const workSans = Work_Sans({
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Tipilan",
description: "",
description: "TipiLAN on pungil põnevatest turniiridest, mini-võistlustest, loengutest ja paljust muust.",
};
export default function RootLayout({
@@ -20,8 +52,9 @@ export default function RootLayout({
return (
<html lang="en">
<body
className={`${inter.variable} antialiased`}
className={`${workSans} antialiased bg-[#EEE5E5]`}
>
<Header />
{children}
</body>
</html>

76
src/app/page.tsx
View File

@@ -1,12 +1,74 @@
import "./globals.css";
import Header from "@/components/Header";
import HomeComponent from "@/components/HomeComponent";
import { vipnagorgialla } from "./layout";
export default function Home() {
return (
<>
<Header />
<HomeComponent />
</>
<div className="flex flex-col">
{/* Title */}
<div className="border-b-3 border-[#007CAB] flex">
<img src="/tipilan-white.svg" alt="TipiLAN Logo" className="h-64"/>
</div>
{/* Grid of buttons */}
<div className="grid grid-cols-1 lg:grid-cols-3 border-[#007CAB]">
<div className="p-12 border-b-3 lg:border-r-3 border-[#007CAB] hover:bg-[#007CAB] transition-colors">
<button className="cursor-pointer">
<h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic mb-16 text-[#2A2C3F] flex items-center`}>
Ajakava →
</h2>
</button>
<p className="text-xl">
TipiLAN on pungil põnevatest turniiridest, mini-võistlustest, loengutest ja paljust muust.
</p>
</div>
<div className="p-12 border-b-3 lg:border-r-3 border-[#007CAB] hover:bg-[#007CAB] transition-colors">
<button className="cursor-pointer">
<h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] mb-16 flex items-center`}>
Turniirid →
</h2>
</button>
<p className="text-xl">
TipiLANil toimuvad suurejoonelised CS2 ja Lol turniirid, mille auhinnafondid on 5000 €
</p>
</div>
<div className="p-12 border-b-3 border-[#007CAB] hover:bg-[#007CAB] transition-colors">
<button className="cursor-pointer">
<h2 className={`text-5xl ${vipnagorgialla.className} font-bold italic mb-16 text-[#2A2C3F] flex items-center`}>
Messiala →
</h2>
</button>
<p className="text-xl">
TipiLANi messialal paiknevad ettevõtted, lisategevused ja toimuvad loengud.
</p>
</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-colors`}>
<button className="cursor-pointer text-left">
<h3 className="text-5xl text-[#2A2C3F] pb-8">
Broneeri oma koht juba täna. →
</h3>
</button>
<h2 className="text-6xl text-[#007CAB] group-hover:text-[#EEE5E5] transition-colors">
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">
<img src="/discord.svg" alt="Twitch" className="h-8 mx-4"/>
</a>
<a href="#" target="_blank" rel="noopener noreferrer">
<img src="/instagram.svg" alt="Instagram" className="h-8 mx-4"/>
</a>
<a href="#" target="_blank" rel="noopener noreferrer">
<img src="/facebook.svg" alt="Facebook" className="h-8 mx-4"/>
</a>
</div>
</div>
</div>
);
}

13
src/components/Header.tsx
View File

@@ -1,8 +1,15 @@
import React from "react";
// Icons
import { Menu } from "lucide-react";
// Fonts
import { vipnagorgialla } from "@/app/layout";
const Header = () => (
<header className="h-16 bg-gray-100 flex items-center justify-center border-b border-gray-200">
header
<header className="h-16 flex items-center border-b-3 border-[#007CAB] justify-between px-12 text-[#2A2C3F]">
<button>
<Menu className="h-12 w-12 text-[#2A2C3F]" />
</button>
<p className={`text-3xl ${vipnagorgialla.className} font-bold italic`}>ENG</p>
</header>
);

61
src/components/HomeComponent.tsx
View File

@@ -1,61 +0,0 @@
import React from "react";
const HomeComponent = () => (
<div className="max-w-6xl mx-auto px-4 py-8">
{/* Logo/title section */}
<div className="mb-12">
<h1 className="text-5xl font-bold text-center">
TIPI
<span className="text-blue-500">
LAN
</span>
</h1>
</div>
{/* Three middle sections */}
<div className="flex flex-col md:flex-row overflow-hidden border-1 shadow-md">
<div className="flex-1 p-6 border-r border-indigo-100 w-full md:w-[33.33%]">
<h1 className="text-2xl font-bold mb-4 flex items-center ">
Ajakava →
</h1>
<p className="">
TipiLAN on pungil põnevatest turniiridest, mini-võistlustest, loengutest ja paljust muust.
</p>
</div>
<div className="flex-1 bg-white-50 p-6 border-r border-indigo-100 w-full md:w-[33.33%]">
<h1 className="text-2xl font-bold mb-4 flex items-center">
Turniirid →
</h1>
<p className="">
TipiLANil toimuvad suurejoonelised CS2 ja Lol turniirid, mille auhinnafondid on 5000 €
</p>
</div>
<div className="flex-1 bg-white-50 p-6 w-full md:w-[33.33%]">
<h1 className="text-2xl font-bold mb-4 flex items-center">
Messiala →
</h1>
<p className="">
TipiLANi messialal paiknevad ettevõtted, lisategevused ja toimuvad loengud.
</p>
</div>
</div>
{/* Bottom section */}
<div className="flex flex-col md:flex-row overflow-hidden shadow-md">
<div className="flex-1 bg-white-100 p-8 border-r border-indigo-100 w-full md:w-[66.66%]">
<h1 className="text-3xl font-bold mb-6">Suurem kui eales varem.</h1>
<p className="text-lg">
TalTechi üliõpilasorganisatsioonid korraldavad esimest korda <u>koos</u> LANi ning see tuleb enneolematu.
Tänu organisatsioonideülesele koostööle sünnib üks Eesti suurimatest võrgupidududest. Kutsu oma sõbrad ja olge valmis!
</p>
</div>
<div className="flex items-center justify-center p-8 w-full md:w-[33.33%]">
<div className="text-4xl font-bold text-center text-blue-500">24.-26. okt.</div>
</div>
</div>
</div>
);
export default HomeComponent;