zias/kunstenkamp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

webpage start

Browse Source
This commit is contained in:
ッ
2026-03-02 14:47:14 +01:00
parent 0856e154b9
commit 65d5ab71d7
59 changed files with 1889 additions and 1309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
apps/web/src/components/homepage/Hero.tsx
View File

@@ -1,21 +1,164 @@
import { useEffect, useState } from "react";
export default function Hero() {
const [micVisible, setMicVisible] = useState(false);
useEffect(() => {
// Trigger entrance animation after component mounts
const timer = setTimeout(() => {
setMicVisible(true);
}, 100);
return () => clearTimeout(timer);
}, []);
const scrollToRegistration = () => {
const registrationSection = document.getElementById("registration");
if (registrationSection) {
registrationSection.scrollIntoView({ behavior: "smooth" });
}
};
return (
<section
style={{
minHeight: "100vh",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
}}
>
<h1>Welcome to Our Event</h1>
<p>
Join us for an amazing experience. Register now to secure your spot.
</p>
<div>
<button type="button">Register Now</button>
<button type="button">Learn More</button>
<section className="snap-section relative h-screen w-full overflow-hidden bg-white">
{/* Desktop Layout - hidden on mobile */}
<div className="relative hidden h-full w-full flex-col gap-[10px] p-[10px] lg:flex">
{/* Desktop Microphone - positioned on top of top sections, under bottom sections */}
<div
className={`pointer-events-none absolute z-20 transition-all duration-1000 ease-out ${
micVisible
? "translate-x-0 translate-y-0 opacity-100"
: "translate-x-24 -translate-y-24 opacity-0"
}`}
style={{
right: "5%",
top: "0",
width: "38%",
}}
>
<img
src="/assets/mic.png"
alt="Vintage microphone"
className="h-full w-full object-contain drop-shadow-2xl"
/>
</div>
{/* Top row - 2:1 ratio using flex */}
<div className="relative flex h-[65%] min-h-0 flex-shrink-0 gap-[10px]">
{/* Top Left - Magenta with title - under mic */}
<div className="relative z-10 flex min-w-0 flex-[2] flex-col justify-center bg-[#d82560] px-[5%] py-[5%]">
<h1 className="font-['Intro',sans-serif] font-normal text-[clamp(3rem,7vw,6rem)] text-white uppercase leading-[1]">
OPEN MIC
<br />
NIGHT
</h1>
<p className="mt-4 font-['Intro',sans-serif] font-normal text-[clamp(1.25rem,2.5vw,2.625rem)] text-white/90">
Ongedesemd brood
</p>
</div>
{/* Top Right - Teal - under mic */}
<div className="relative z-10 min-w-0 flex-1 bg-[#52979b]" />
</div>
{/* Bottom row - equal width */}
<div className="relative z-30 flex min-h-0 flex-1 gap-[10px]">
{/* Bottom Left - Mustard - above mic */}
<div className="relative flex flex-1 items-center bg-[#d09035] px-[3%]">
<p className="font-['Intro',sans-serif] font-normal text-[clamp(1.25rem,2.5vw,2.625rem)] text-white leading-tight">
Een kunstenkamp
<br />
initiatief
</p>
</div>
{/* Bottom Right - Dark Teal with date - above mic */}
<div className="relative flex flex-1 items-center justify-end bg-[#214e51]">
<p className="px-12 text-right font-['Intro',sans-serif] font-normal text-[clamp(2rem,5vw,6rem)] text-white uppercase leading-[1.1]">
VRIJDAG 18
<br />
april
</p>
</div>
</div>
{/* Desktop CTA Button - centered at bottom */}
<div className="absolute bottom-[10px] left-1/2 z-30 -translate-x-1/2">
<button
onClick={scrollToRegistration}
type="button"
className="bg-black px-[40px] py-[10px] font-['Intro',sans-serif] font-normal text-[30px] text-white transition-all hover:scale-105 hover:bg-gray-900"
>
Registreer nu!
</button>
</div>
</div>
{/* Mobile Responsive Layout */}
<div className="relative flex h-full w-full flex-col lg:hidden">
{/* Mobile: Single column stacked */}
<div className="flex flex-1 flex-col gap-[10px] overflow-hidden p-[10px]">
{/* Mobile Top - Magenta */}
<div className="relative z-10 flex flex-1 flex-col justify-center overflow-hidden bg-[#d82560] px-6 py-8">
<h1 className="font-['Intro',sans-serif] font-normal text-[15vw] text-white uppercase leading-[0.95]">
OPEN MIC
<br />
NIGHT
</h1>
<p className="mt-4 font-['Intro',sans-serif] font-normal text-[5vw] text-white/90">
Ongedesemd brood
</p>
{/* Mobile Microphone - positioned inside magenta section, clipped by overflow */}
<div
className={`pointer-events-none absolute z-10 transition-all duration-1000 ease-out ${
micVisible
? "translate-x-0 translate-y-0 opacity-100"
: "translate-x-12 -translate-y-12 opacity-0"
}`}
style={{
right: "-30%",
bottom: "-55%",
width: "70%",
height: "130%",
}}
>
<img
src="/assets/mic.png"
alt="Vintage microphone"
className="h-full w-full object-contain object-bottom drop-shadow-2xl"
/>
</div>
</div>
{/* Mobile Bottom Row - Mustard + Dark Teal */}
<div className="relative z-20 flex flex-1 gap-[10px]">
<div className="flex flex-1 items-center bg-[#d09035] px-4">
<p className="font-['Intro',sans-serif] font-normal text-[4vw] text-white leading-tight">
Een kunstenkamp
<br />
initiatief
</p>
</div>
<div className="flex flex-1 flex-col items-end justify-center bg-[#214e51] p-4">
<p className="text-right font-['Intro',sans-serif] font-normal text-[8vw] text-white uppercase leading-tight">
VRIJDAG
<br />
18 april
</p>
</div>
</div>
</div>
{/* Mobile CTA */}
<div className="px-[10px] pb-[10px]">
<button
onClick={scrollToRegistration}
type="button"
className="w-full bg-black py-3 font-['Intro',sans-serif] font-normal text-lg text-white transition-all hover:scale-105 hover:bg-gray-900"
>
Registreer nu!
</button>
</div>
</div>
</section>
);