first commit
Made-with: Cursor
This commit is contained in:
71
frontend/components/public/HeroSection.tsx
Normal file
71
frontend/components/public/HeroSection.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { ArrowRight, MapPin } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
interface MeetupData {
|
||||
id?: string;
|
||||
month?: string;
|
||||
day?: string;
|
||||
title?: string;
|
||||
location?: string;
|
||||
time?: string;
|
||||
link?: string;
|
||||
}
|
||||
|
||||
interface HeroSectionProps {
|
||||
meetup?: MeetupData;
|
||||
}
|
||||
|
||||
export function HeroSection({ meetup }: HeroSectionProps) {
|
||||
const month = meetup?.month ?? "TBD";
|
||||
const day = meetup?.day ?? "--";
|
||||
const title = meetup?.title ?? "Next Gathering";
|
||||
const location = meetup?.location ?? "Brussels, BE";
|
||||
const time = meetup?.time ?? "19:00";
|
||||
const eventHref = meetup?.id ? `/events/${meetup.id}` : "#meetup";
|
||||
|
||||
return (
|
||||
<section className="pt-32 pb-24 px-8">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<span className="inline-block uppercase tracking-[0.25em] text-primary mb-8 font-semibold text-xs border border-primary/20 px-4 py-1.5 rounded-full">
|
||||
Antwerp, Belgium
|
||||
</span>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-black tracking-tighter leading-[0.95] mb-6">
|
||||
Belgium's Monthly
|
||||
<br />
|
||||
<span className="text-primary">Bitcoin Meetups</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-on-surface-variant max-w-md mx-auto leading-relaxed mb-14">
|
||||
A sovereign space for education, technical discussion, and community.
|
||||
No hype, just signal.
|
||||
</p>
|
||||
|
||||
<div className="inline-flex flex-col sm:flex-row items-stretch sm:items-center gap-4 bg-zinc-900 border border-zinc-800 rounded-2xl p-4 sm:p-5 w-full max-w-xl">
|
||||
<div className="flex items-center gap-4 flex-1 min-w-0">
|
||||
<div className="bg-zinc-800 rounded-xl px-3 py-2 text-center shrink-0 min-w-[52px]">
|
||||
<span className="block text-[10px] font-bold uppercase text-primary tracking-wider leading-none mb-0.5">
|
||||
{month}
|
||||
</span>
|
||||
<span className="block text-2xl font-black leading-none">{day}</span>
|
||||
</div>
|
||||
<div className="text-left min-w-0">
|
||||
<p className="font-bold text-base truncate">{title}</p>
|
||||
<p className="text-on-surface-variant text-sm flex items-center gap-1 mt-0.5">
|
||||
<MapPin size={12} className="shrink-0" />
|
||||
<span className="truncate">{location} · {time}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href={eventHref}
|
||||
className="flex items-center justify-center gap-2 bg-primary text-on-primary px-6 py-3 rounded-xl font-bold text-sm hover:opacity-90 transition-opacity shrink-0"
|
||||
>
|
||||
More info <ArrowRight size={16} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user