296 lines
18 KiB
HTML
296 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="dark" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Belgian Bitcoin Embassy | Monthly Meetup</title>
|
|
<script type='text/javascript' nonce='9ButrWt/cTa518miRngtqg==' src='https://contribution.usercontent.google.com/GuY6gPaRx8P7wrAxIzkZ0fQNqPzzi86mwtr8NJkX_fznOFNYK08-VXcbhOG3e0W1gfmAHl19Q7M-20HcuZY1xNCkU2_AN42cBxA9l-AUsyH-azwu4dkmMKQa42MK2c-YWIOJ1RCv7wdEyPMDj0Wz1VwcUJlM8YBCRgi3c4BnKNg='></script><script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"surface-dim": "#131313",
|
|
"primary-container": "#f7931a",
|
|
"on-secondary-container": "#b6b5b4",
|
|
"on-background": "#e5e2e1",
|
|
"on-error-container": "#ffdad6",
|
|
"error": "#ffb4ab",
|
|
"surface-bright": "#393939",
|
|
"on-tertiary-fixed-variant": "#46464b",
|
|
"inverse-surface": "#e5e2e1",
|
|
"surface-container-high": "#2a2a2a",
|
|
"on-primary-fixed": "#2d1600",
|
|
"on-surface-variant": "#dbc2ae",
|
|
"secondary-container": "#474747",
|
|
"on-tertiary-container": "#3f3f44",
|
|
"on-secondary-fixed-variant": "#474747",
|
|
"tertiary-container": "#ababb0",
|
|
"inverse-primary": "#8c4f00",
|
|
"tertiary-fixed": "#e3e2e7",
|
|
"tertiary": "#c7c6cb",
|
|
"primary-fixed": "#ffdcbf",
|
|
"on-primary-fixed-variant": "#6b3b00",
|
|
"surface-container-low": "#1c1b1b",
|
|
"secondary-fixed": "#e4e2e1",
|
|
"on-tertiary-fixed": "#1a1b1f",
|
|
"surface-container-highest": "#353534",
|
|
"on-primary": "#4b2800",
|
|
"on-primary-container": "#603500",
|
|
"error-container": "#93000a",
|
|
"surface-container-lowest": "#0e0e0e",
|
|
"outline-variant": "#554335",
|
|
"outline": "#a38d7b",
|
|
"surface-variant": "#353534",
|
|
"surface-tint": "#ffb874",
|
|
"on-error": "#690005",
|
|
"secondary-fixed-dim": "#c8c6c6",
|
|
"surface": "#131313",
|
|
"on-secondary-fixed": "#1b1c1c",
|
|
"background": "#131313",
|
|
"secondary": "#c8c6c6",
|
|
"inverse-on-surface": "#313030",
|
|
"primary-fixed-dim": "#ffb874",
|
|
"on-tertiary": "#2f3034",
|
|
"on-surface": "#e5e2e1",
|
|
"tertiary-fixed-dim": "#c6c6cb",
|
|
"primary": "#ffb874",
|
|
"on-secondary": "#303030",
|
|
"surface-container": "#201f1f"
|
|
},
|
|
fontFamily: {
|
|
"headline": ["Inter"],
|
|
"body": ["Inter"],
|
|
"label": ["Inter"]
|
|
},
|
|
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
background-color: #131313;
|
|
color: #e5e2e1;
|
|
font-family: 'Inter', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.glass-effect {
|
|
background: rgba(57, 57, 57, 0.4);
|
|
backdrop-filter: blur(15px);
|
|
-webkit-backdrop-filter: blur(15px);
|
|
}
|
|
.asymmetric-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.2fr 0.8fr;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.asymmetric-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="selection:bg-primary-container selection:text-on-primary-container">
|
|
<!-- TopNavBar -->
|
|
<nav class="w-full top-0 z-50 bg-[#131313] dark:bg-[#131313]">
|
|
<div class="flex justify-between items-center max-w-7xl mx-auto px-8 h-20">
|
|
<div class="text-xl font-bold text-[#f7931a] tracking-[-0.02em]">Belgian Bitcoin Embassy</div>
|
|
<div class="hidden md:flex space-x-10 items-center">
|
|
<a class="text-[#f7931a] font-bold border-b-2 border-[#f7931a] pb-1 font-['Inter'] font-medium tracking-tight" href="#">Next Meetup</a>
|
|
<a class="text-[#ffffff] opacity-70 hover:text-[#f7931a] transition-colors duration-200 font-['Inter'] font-medium tracking-tight" href="#">About</a>
|
|
<a class="text-[#ffffff] opacity-70 hover:text-[#f7931a] transition-colors duration-200 font-['Inter'] font-medium tracking-tight" href="#">Community</a>
|
|
<a class="text-[#ffffff] opacity-70 hover:text-[#f7931a] transition-colors duration-200 font-['Inter'] font-medium tracking-tight" href="#">FAQ</a>
|
|
</div>
|
|
<button class="bg-gradient-to-r from-primary to-primary-container text-on-primary px-6 py-2.5 rounded-lg font-bold scale-98 active:opacity-80 transition-all">
|
|
Join Us
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="relative pt-24 pb-32 overflow-hidden px-8">
|
|
<div class="max-w-7xl mx-auto asymmetric-grid gap-16 items-center">
|
|
<div class="z-10">
|
|
<span class="label-md uppercase tracking-[0.2em] text-primary mb-6 block font-semibold">Brussels, Belgium</span>
|
|
<h1 class="text-6xl md:text-8xl font-black tracking-tighter leading-[0.9] mb-8">
|
|
Belgium's Monthly <br/> <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-primary-container">Bitcoin Meetup</span>
|
|
</h1>
|
|
<p class="text-xl text-on-surface-variant max-w-xl leading-relaxed mb-12">
|
|
A sovereign space for education, technical discussion, and community. No hype, just signal. Join us at the Embassy.
|
|
</p>
|
|
<!-- Next Meetup Card (High Visibility) -->
|
|
<div class="bg-surface-container-low p-8 rounded-xl relative overflow-hidden group border-l-4 border-primary shadow-2xl">
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 relative z-10">
|
|
<div class="flex items-center gap-6">
|
|
<div class="bg-surface-container-high w-16 h-16 rounded-lg flex flex-col items-center justify-center text-center">
|
|
<span class="text-xs font-bold uppercase text-primary">Mar</span>
|
|
<span class="text-2xl font-black">15</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-2xl font-bold">Next Gathering</h3>
|
|
<p class="text-on-surface-variant flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-sm">location_on</span> Brussels, BE • 19:00
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button class="bg-primary text-on-primary px-8 py-4 rounded-lg font-black hover:scale-105 transition-transform flex items-center justify-center gap-2">
|
|
Join Meetup <span class="material-symbols-outlined">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
<div class="absolute -right-8 -bottom-8 opacity-5">
|
|
<span class="material-symbols-outlined text-[120px]" data-weight="fill">currency_bitcoin</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative hidden md:block">
|
|
<div class="rounded-2xl overflow-hidden aspect-[4/5] shadow-2xl grayscale hover:grayscale-0 transition-all duration-700">
|
|
<img class="w-full h-full object-cover" data-alt="a professional group of people gathered in a dimly lit sophisticated lounge talking intently in a modern urban environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC8O7UDx19I71OVpYa9i0-xxJG80GX8XSvAaDZegZDtXro6Mtzi4OD2Gi2GXtroeutyOxMyjGfHsh5lMan3NKEkHdCKIqrC3pL1mCQmlVSipWvpN01limpOdFtSOsmXWOZ1ZC0ONa1yP214TD3wYRwRiNiJAp4m3Mcl2mrh4QmDCPwppuzn06-bPer20JlaZ1-NwFH69HjBbKXXkmV40bNACupCJ8WK0k9BrEJurna7m6w0dHM3RtSZkDFPoIIwYM_AjIUqoAPPF9s"/>
|
|
</div>
|
|
<div class="absolute -bottom-6 -left-6 bg-surface-bright p-6 rounded-xl glass-effect border border-white/5">
|
|
<p class="text-xs font-bold uppercase tracking-widest text-primary mb-1">Our Network</p>
|
|
<p class="text-3xl font-black">1,200+</p>
|
|
<p class="text-sm opacity-60">Sovereign Individuals</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Small Knowledge Cards -->
|
|
<section class="py-24 bg-surface-container-lowest px-8">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div class="bg-surface-container p-10 rounded-xl hover:bg-surface-container-high transition-colors">
|
|
<div class="mb-6 bg-primary/10 w-12 h-12 rounded-lg flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-primary">account_balance</span>
|
|
</div>
|
|
<h4 class="text-xl font-bold mb-4">Money without banks</h4>
|
|
<p class="text-on-surface-variant leading-relaxed">Operate outside the legacy financial system with peer-to-peer digital sound money.</p>
|
|
</div>
|
|
<div class="bg-surface-container p-10 rounded-xl hover:bg-surface-container-high transition-colors">
|
|
<div class="mb-6 bg-primary/10 w-12 h-12 rounded-lg flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-primary">all_inclusive</span>
|
|
</div>
|
|
<h4 class="text-xl font-bold mb-4">Scarcity: 21 million</h4>
|
|
<p class="text-on-surface-variant leading-relaxed">A mathematical certainty of fixed supply. No inflation, no dilution, ever.</p>
|
|
</div>
|
|
<div class="bg-surface-container p-10 rounded-xl hover:bg-surface-container-high transition-colors">
|
|
<div class="mb-6 bg-primary/10 w-12 h-12 rounded-lg flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-primary">key</span>
|
|
</div>
|
|
<h4 class="text-xl font-bold mb-4">Self-custody</h4>
|
|
<p class="text-on-surface-variant leading-relaxed">True ownership. Your keys, your bitcoin. No counterparty risk, absolute freedom.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- About Section -->
|
|
<section class="py-32 px-8">
|
|
<div class="max-w-5xl mx-auto text-center">
|
|
<span class="label-md uppercase tracking-[0.3em] text-primary mb-8 block">The Mission</span>
|
|
<h2 class="text-4xl md:text-5xl font-black mb-10 leading-tight">
|
|
"Fix the money, fix the world."
|
|
</h2>
|
|
<p class="text-2xl text-on-surface-variant font-light leading-relaxed mb-12">
|
|
We help people in Belgium understand and adopt Bitcoin through education, meetups, and community. We are not a company, but a sovereign network of individuals building a sounder future.
|
|
</p>
|
|
<div class="w-24 h-1 bg-primary mx-auto opacity-50"></div>
|
|
</div>
|
|
</section>
|
|
<!-- Community Grid -->
|
|
<section class="py-24 bg-surface px-8">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="flex justify-between items-end mb-16">
|
|
<div>
|
|
<h2 class="text-4xl font-black mb-4">Community Moments</h2>
|
|
<p class="text-on-surface-variant">The Belgian Bitcoin scene in action.</p>
|
|
</div>
|
|
<div class="text-right hidden md:block">
|
|
<p class="text-primary font-bold text-lg">1,200+ Members</p>
|
|
<p class="text-xs uppercase tracking-widest opacity-50">Active on Telegram</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
|
|
<div class="rounded-xl overflow-hidden aspect-square grayscale hover:grayscale-0 transition-all duration-500">
|
|
<img class="w-full h-full object-cover" data-alt="candid shot of people laughing and talking at a tech meetup in a modern brewery setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD0-zvmcx_ClJTCfizqyE-JgZodOBr_o0C1QRw1bCK_2C_q4oSMuRzOCpX4eNuAT5Eug7DrlvVmfA03Xtys0v72PLz5k0pFW-7X5OPcKzXwvrhAa2bVUSSvy0l7zeN33I98r6iibLbqDojACvJ7ARzWN2-rRR62qpHzTprzmCSLeg4dYHBDnsmrFWIypqnxUGS0jR8aOXnJlan4AZPg_JE1N-sgdWfwIBCHEljyLq2d1NLl51b83GMc6iCwHPoLN11I2FFglrruAKg"/>
|
|
</div>
|
|
<div class="rounded-xl overflow-hidden aspect-square md:translate-y-12 grayscale hover:grayscale-0 transition-all duration-500">
|
|
<img class="w-full h-full object-cover" data-alt="wide shot of a presenter speaking to a seated audience in a minimal dark auditorium with orange ambient light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD2NvZKeDfyJP8xVnpv3JmTRaaAmJcDHjzh5HnpR_Cbxxll_t57_W-4T2VY0kOpyW95a1bs3AUMoRMeqf35kv_HJpmz9qDXqehsLIY4lprPFG3g6x8VRVbDGmVyTTjkk216iCg72tiG1Vy8jTUXj4of0bSZR9_PtPmb0YbPBXVAkuIy06wOuiUI1qOFotm9-jYqHry8c4AKAZSDEMxUVj4odFBb3eM5uM_CkFhXA-N9QcdfCfUAwwCIMisytHhyaKKydxhg8W-eSRE"/>
|
|
</div>
|
|
<div class="rounded-xl overflow-hidden aspect-square grayscale hover:grayscale-0 transition-all duration-500">
|
|
<img class="w-full h-full object-cover" data-alt="close up of several people in a circle holding drinks and engaged in deep conversation at a networking event" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAXeVQGITkhHYXlDFg3EnGCn88bpkKSR6jWROs1LwVVwrvyuQ0CwD2tnwSxWWxY3r6bs8m7QftuFPi03mAo3VVy7WPYZf_AtlCfOE7w7Lg2fVK1Pzh5E7Oon0UAitJD-wXi0beZhoaX1g1qC21QfGsl67L_zNhm6XyGNL_rZ54nCiD6yWeDsAWpU5tVluiOpg0TC7zjC-LMRUMhNA8XFRODN1rtWR8NKoOa_cRZDDG4YL4PM2I1eK9p4m4pYqQeM49qdPYw7-KnOTw"/>
|
|
</div>
|
|
<div class="rounded-xl overflow-hidden aspect-square md:translate-y-12 grayscale hover:grayscale-0 transition-all duration-500">
|
|
<img class="w-full h-full object-cover" data-alt="two young professionals collaborating over a laptop in a cozy warm cafe with soft focus background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC3dDHSTRTPrq5sTHEOz-UrPnrKzyRlqsrtmo2XUVk_Bv3v4LnLHGTGqa1kr1XuZWxFfFxan_uTWimAHx_n9RUupJ-ciA9ZhlG2TmKqAsbnUHL0IhVN3yiBEHU50mPOG6KBrt82AEP6b1MoVmKgyFgl4-Zdq7QpiH2CtCkALFvUkO_Hi3A2Y-0Ht5-n6H8y_WzFmAHlhvboKNpGmpP6tBizZZvVIXv7HqoCCw2MvKqeZu1L90XwGpoZVwhCdsAKRs_GI7CMyFrPb8g"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Learning Cards -->
|
|
<section class="py-48 px-8">
|
|
<div class="max-w-7xl mx-auto">
|
|
<h2 class="text-4xl font-black mb-16 text-center">Your Journey Starts Here</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<a class="group relative bg-surface-container-low p-12 rounded-xl border border-transparent hover:border-primary/20 transition-all" href="#">
|
|
<span class="material-symbols-outlined text-primary mb-6 text-4xl">shopping_cart</span>
|
|
<h3 class="text-2xl font-bold mb-4">Buy Bitcoin</h3>
|
|
<p class="text-on-surface-variant mb-8">Learn the safest ways to acquire bitcoin in Belgium without excessive fees.</p>
|
|
<span class="text-primary font-bold flex items-center gap-2 group-hover:gap-4 transition-all">Explore <span class="material-symbols-outlined">arrow_right_alt</span></span>
|
|
</a>
|
|
<a class="group relative bg-surface-container-low p-12 rounded-xl border border-transparent hover:border-primary/20 transition-all" href="#">
|
|
<span class="material-symbols-outlined text-primary mb-6 text-4xl">safety_check</span>
|
|
<h3 class="text-2xl font-bold mb-4">Store Bitcoin</h3>
|
|
<p class="text-on-surface-variant mb-8">Protect your wealth with hardware wallets and multisig best practices.</p>
|
|
<span class="text-primary font-bold flex items-center gap-2 group-hover:gap-4 transition-all">Secure wealth <span class="material-symbols-outlined">arrow_right_alt</span></span>
|
|
</a>
|
|
<a class="group relative bg-surface-container-low p-12 rounded-xl border border-transparent hover:border-primary/20 transition-all" href="#">
|
|
<span class="material-symbols-outlined text-primary mb-6 text-4xl">school</span>
|
|
<h3 class="text-2xl font-bold mb-4">Learn Basics</h3>
|
|
<p class="text-on-surface-variant mb-8">Dive into our curated educational resources for beginners and experts alike.</p>
|
|
<span class="text-primary font-bold flex items-center gap-2 group-hover:gap-4 transition-all">Start learning <span class="material-symbols-outlined">arrow_right_alt</span></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Final CTA -->
|
|
<section class="py-32 px-8 bg-surface-container-low relative overflow-hidden">
|
|
<div class="max-w-4xl mx-auto text-center relative z-10">
|
|
<h2 class="text-5xl font-black mb-8">Start your Bitcoin journey today</h2>
|
|
<p class="text-on-surface-variant text-xl mb-12">The best time to learn was 10 years ago. The second best time is today. Join the community.</p>
|
|
<div class="flex flex-col md:flex-row items-center justify-center gap-6">
|
|
<button class="w-full md:w-auto bg-[#24A1DE] text-white px-10 py-4 rounded-lg font-bold flex items-center justify-center gap-2 hover:opacity-90">
|
|
<span class="material-symbols-outlined">send</span> Join Telegram
|
|
</button>
|
|
<button class="w-full md:w-auto bg-primary text-on-primary px-10 py-4 rounded-lg font-bold hover:scale-105 transition-transform">
|
|
Attend Meetup
|
|
</button>
|
|
<button class="w-full md:w-auto bg-surface-container-highest text-on-surface px-10 py-4 rounded-lg font-bold hover:bg-surface-bright transition-colors">
|
|
Learn Bitcoin
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Decorative Background Element -->
|
|
<div class="absolute -bottom-20 -right-20 opacity-5">
|
|
<span class="material-symbols-outlined text-[400px]" data-weight="fill">hub</span>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Footer -->
|
|
<footer class="w-full py-12 bg-[#0e0e0e]">
|
|
<div class="flex flex-col items-center justify-center space-y-6 w-full px-8 text-center">
|
|
<div class="text-lg font-black text-[#f7931a]">Belgian Bitcoin Embassy</div>
|
|
<div class="flex space-x-12">
|
|
<a class="text-[#ffffff] opacity-50 hover:opacity-100 transition-opacity font-['Inter'] text-sm tracking-widest uppercase" href="#">Privacy</a>
|
|
<a class="text-[#ffffff] opacity-50 hover:opacity-100 transition-opacity font-['Inter'] text-sm tracking-widest uppercase" href="#">Terms</a>
|
|
<a class="text-[#ffffff] opacity-50 hover:opacity-100 transition-opacity font-['Inter'] text-sm tracking-widest uppercase" href="#">Contact</a>
|
|
</div>
|
|
<p class="text-[#ffffff] opacity-50 font-['Inter'] text-sm tracking-widest uppercase">© Belgian Bitcoin Embassy. No counterparty risk.</p>
|
|
</div>
|
|
</footer>
|
|
</body></html> |