add section border where missing

pull/47/head
SwagMuffin88 4 months ago
parent edb88be0f0
commit de2d2a0b4d
  1. 229
      src/app/messiala/page.tsx
  2. 12
      src/app/turniirid/page.tsx

@ -4,6 +4,7 @@ import { vipnagorgialla } from "@/components/Vipnagorgialla";
import * as THREE from "three"; import * as THREE from "three";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { EyeClosed, Eye } from "lucide-react"; import { EyeClosed, Eye } from "lucide-react";
import SectionDivider from "@/components/SectionDivider";
// Define interface for the ref with toggle function // Define interface for the ref with toggle function
interface MountRefCurrent extends HTMLDivElement { interface MountRefCurrent extends HTMLDivElement {
@ -379,121 +380,125 @@ export default function Expo() {
}, [showDividers]); }, [showDividers]);
return ( return (
<div className="flex flex-col min-h-[90vh] m-6 mt-16 md:m-16"> <div>
<h1 <div className="flex flex-col min-h-[90vh] m-6 mt-16 md:m-16 ">
className={`text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] dark:text-[#EEE5E5] mt-8 md:mt-16 mb-4 uppercase`} <h1
> className={`text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] dark:text-[#EEE5E5] mt-8 md:mt-16 mb-4 uppercase`}
Messiala >
</h1> Messiala
<div className="mb-6"> </h1>
<h2 className="text-2xl text-[#2A2C3F] dark:text-[#EEE5E5] mb-3"> <div className="mb-6">
Tudengimaja <h2 className="text-2xl text-[#2A2C3F] dark:text-[#EEE5E5] mb-3">
</h2> Tudengimaja
<div className="flex flex-wrap gap-4 pb-4"> </h2>
<div className="flex items-center gap-2"> <div className="flex flex-wrap gap-4 pb-4">
<div <div className="flex items-center gap-2">
className="w-4 h-4 border border-gray-300" <div
style={{ backgroundColor: "#4ecdc4" }} className="w-4 h-4 border border-gray-300"
></div> style={{ backgroundColor: "#4ecdc4" }}
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> ></div>
Baariala <span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
</span> Baariala
</div> </span>
<div className="flex items-center gap-2"> </div>
<div <div className="flex items-center gap-2">
className="w-4 h-4 border border-gray-300" <div
style={{ backgroundColor: "#ffe66d" }} className="w-4 h-4 border border-gray-300"
></div> style={{ backgroundColor: "#ffe66d" }}
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> ></div>
EVAL <span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
</span> EVAL
</div> </span>
<div className="flex items-center gap-2"> </div>
<div <div className="flex items-center gap-2">
className="w-4 h-4 border border-gray-300" <div
style={{ backgroundColor: "#343434" }} className="w-4 h-4 border border-gray-300"
></div> style={{ backgroundColor: "#343434" }}
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> ></div>
Lauamängude ala <span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
</span> Lauamängude ala
</div> </span>
<div className="flex items-center gap-2"> </div>
<div <div className="flex items-center gap-2">
className="w-4 h-4 border border-gray-300" <div
style={{ backgroundColor: "#080682" }} className="w-4 h-4 border border-gray-300"
></div> style={{ backgroundColor: "#080682" }}
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> ></div>
LVLup! <span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
</span> LVLup!
</div> </span>
<div className="flex items-center gap-2"> </div>
<div <div className="flex items-center gap-2">
className="w-4 h-4 border border-gray-300" <div
style={{ backgroundColor: "#C02841" }} className="w-4 h-4 border border-gray-300"
></div> style={{ backgroundColor: "#C02841" }}
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> ></div>
Red Bull <span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
</span> Red Bull
</div> </span>
<div className="flex items-center gap-2"> </div>
<div <div className="flex items-center gap-2">
className="w-4 h-4 border border-gray-300" <div
style={{ backgroundColor: "#ff6600" }} className="w-4 h-4 border border-gray-300"
></div> style={{ backgroundColor: "#ff6600" }}
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> ></div>
Red Bull Sim Racing <span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
</span> Red Bull Sim Racing
</div> </span>
<div className="items-center gap-2 hidden"> </div>
<div <div className="items-center gap-2 hidden">
className="w-4 h-4 border border-gray-300" <div
style={{ backgroundColor: "#3498db" }} className="w-4 h-4 border border-gray-300"
></div> style={{ backgroundColor: "#3498db" }}
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> ></div>
Sony <span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
</span> Sony
</div> </span>
<div className="flex items-center gap-2"> </div>
<div <div className="flex items-center gap-2">
className="w-4 h-4 border border-gray-300" <div
style={{ backgroundColor: "#ff1493" }} className="w-4 h-4 border border-gray-300"
></div> style={{ backgroundColor: "#ff1493" }}
<span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]"> ></div>
Võitlusmängu ala <span className="text-sm text-[#2A2C3F] dark:text-[#EEE5E5]">
</span> Võitlusmängu ala
</div> </span>
</div> </div>
<div className="flex flex-col lg:flex-row gap-8 items-start"> </div>
<div className="flex-shrink-0 border-3 border-[#1F5673] w-full max-w-[800px] relative"> <div className="flex flex-col lg:flex-row gap-8 items-start">
<div ref={mountRef} className="w-full" /> <div className="flex-shrink-0 border-3 border-[#1F5673] w-full max-w-[800px] relative">
<button <div ref={mountRef} className="w-full" />
onClick={() => setShowDividers(!showDividers)} <button
className={`absolute top-2 right-2 px-3 py-2 bg-[#1F5673] text-white hover:bg-[#2A7A9B] ${vipnagorgialla.className} uppercase italic text-sm font-semibold flex items-center transition-colors shadow-lg z-10`} onClick={() => setShowDividers(!showDividers)}
> className={`absolute top-2 right-2 px-3 py-2 bg-[#1F5673] text-white hover:bg-[#2A7A9B] ${vipnagorgialla.className} uppercase italic text-sm font-semibold flex items-center transition-colors shadow-lg z-10`}
{showDividers ? ( >
<EyeClosed className="w-6 h-6 mr-2" /> {showDividers ? (
) : ( <EyeClosed className="w-6 h-6 mr-2" />
<Eye className="w-6 h-6 mr-2" /> ) : (
)} <Eye className="w-6 h-6 mr-2" />
)}
{showDividers ? "Peida" : "Näita"}
</button> {showDividers ? "Peida" : "Näita"}
</button>
</div>
</div>
{/* Tooltip */}
{hoveredRoom && (
<div
className="fixed bg-black bg-opacity-80 text-white px-3 py-2 rounded-lg text-sm pointer-events-none z-50"
style={{
left: mousePosition.x + 10,
top: mousePosition.y - 10,
}}
>
{hoveredRoom}
</div>
)}
</div> </div>
</div> </div>
{/* Tooltip */} <SectionDivider />
{hoveredRoom && (
<div
className="fixed bg-black bg-opacity-80 text-white px-3 py-2 rounded-lg text-sm pointer-events-none z-50"
style={{
left: mousePosition.x + 10,
top: mousePosition.y - 10,
}}
>
{hoveredRoom}
</div>
)}
</div>
</div> </div>
); );
} }

@ -5,21 +5,15 @@ import Image from "next/image";
export default function Tourney() { export default function Tourney() {
const headingStyle = `text-3xl md:text-5xl lg:text-5xl ${vipnagorgialla.className} font-bold uppercase text-[#2A2C3F] dark:text-[#EEE5E5] -skew-x-2 md:-skew-x-5`; const headingStyle = `text-3xl md:text-5xl lg:text-5xl ${vipnagorgialla.className} font-bold uppercase text-[#2A2C3F] dark:text-[#EEE5E5] -skew-x-2 md:-skew-x-5`;
// const SectionDivider = () => <hr className="border-t-[3px] border-[#1F5673]" />;
return ( return (
<div className="flex flex-col min-h-[90vh] mt-16"> <div className="flex flex-col min-h-[90vh] mt-16">
<h1 <h1
className={`text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] dark:text-[#EEE5E5] mt-8 md:mt-16 mb-4 m-6 md:m-16`} className={`text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic uppercase
text-[#2A2C3F] dark:text-[#EEE5E5] md:m-16`}
> >
Turniirid Turniirid
</h1> </h1>
{/*<p className="text-2xl text-[#2A2C3F] dark:text-[#EEE5E5]">*/}
{/* Kui tahate oma oskusi proovile panna, siis vaadake siia tagasi! Rohkem*/}
{/* infot lähiajal.*/}
{/*</p>*/}
<div className="flex flex-col"> <div className="flex flex-col">
{/* CS2 turniir */} {/* CS2 turniir */}
<div className="hover:bg-[#007CAB] py-8 md:py-16 transition group"> <div className="hover:bg-[#007CAB] py-8 md:py-16 transition group">
@ -133,7 +127,7 @@ export default function Tourney() {
</div> </div>
{/* Mini-turniirid */} {/* Mini-turniirid */}
<div className="hover:bg-[#007CAB] py-8 md:py-16 border-t-[3px] border-[#1F5673] transition group"> <div className="hover:bg-[#007CAB] py-8 md:py-16 border-t-[3px] border-b-[3px] border-[#1F5673] transition group">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center mx-8 md:mx-16 lg:mx-32 xl:mx-48"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center mx-8 md:mx-16 lg:mx-32 xl:mx-48">
<div className="-skew-x-2 md:-skew-x-5"> <div className="-skew-x-2 md:-skew-x-5">
<h2 className={`${headingStyle}`}>Mini&shy;turniirid</h2> <h2 className={`${headingStyle}`}>Mini&shy;turniirid</h2>

Loading…
Cancel
Save