228 lines
13 KiB
HTML
228 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html lang="en"><head>
|
||
<meta charset="utf-8"/>
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@700;800;900&family=Manrope:wght@400;500;600;700&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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
<script id="tailwind-config">
|
||
tailwind.config = {
|
||
darkMode: "class",
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
"error": "#ba1a1a",
|
||
"tertiary-fixed": "#ffdea0",
|
||
"on-tertiary-fixed": "#261900",
|
||
"on-surface": "#1b1c1c",
|
||
"inverse-primary": "#ffb3ac",
|
||
"surface-container-high": "#e9e8e7",
|
||
"on-tertiary-container": "#e7b02d",
|
||
"on-tertiary": "#ffffff",
|
||
"on-primary-container": "#ff9e95",
|
||
"secondary": "#7b5800",
|
||
"tertiary-fixed-dim": "#f6be3b",
|
||
"surface-variant": "#e4e2e2",
|
||
"surface-container": "#efeded",
|
||
"primary": "#6c0008",
|
||
"error-container": "#ffdad6",
|
||
"primary-container": "#8e1b1b",
|
||
"on-primary-fixed-variant": "#8b1919",
|
||
"on-tertiary-fixed-variant": "#5c4300",
|
||
"inverse-on-surface": "#f2f0f0",
|
||
"outline": "#8c716e",
|
||
"surface-container-lowest": "#ffffff",
|
||
"secondary-fixed-dim": "#f7bd48",
|
||
"on-error-container": "#93000a",
|
||
"tertiary-container": "#5f4500",
|
||
"on-secondary-container": "#715000",
|
||
"on-primary-fixed": "#410003",
|
||
"background": "#fbf9f8",
|
||
"on-error": "#ffffff",
|
||
"surface-dim": "#dbdad9",
|
||
"outline-variant": "#e0bfbc",
|
||
"primary-fixed-dim": "#ffb3ac",
|
||
"tertiary": "#433000",
|
||
"secondary-fixed": "#ffdea6",
|
||
"surface-container-low": "#f5f3f3",
|
||
"on-secondary-fixed-variant": "#5d4200",
|
||
"on-surface-variant": "#58413f",
|
||
"surface-container-highest": "#e4e2e2",
|
||
"surface": "#fbf9f8",
|
||
"on-background": "#1b1c1c",
|
||
"surface-tint": "#ac322e",
|
||
"on-primary": "#ffffff",
|
||
"surface-bright": "#fbf9f8",
|
||
"secondary-container": "#fdc34d",
|
||
"primary-fixed": "#ffdad6",
|
||
"inverse-surface": "#303030",
|
||
"on-secondary": "#ffffff",
|
||
"on-secondary-fixed": "#271900"
|
||
},
|
||
fontFamily: {
|
||
"headline": ["Epilogue"],
|
||
"body": ["Manrope"],
|
||
"label": ["Manrope"]
|
||
},
|
||
borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"},
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style>
|
||
.material-symbols-outlined {
|
||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||
}
|
||
body {
|
||
font-family: 'Manrope', sans-serif;
|
||
background-color: #fbf9f8;
|
||
color: #1b1c1c;
|
||
}
|
||
h1, h2, h3 {
|
||
font-family: 'Epilogue', sans-serif;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-background text-on-background selection:bg-secondary-container">
|
||
<!-- TopNavBar -->
|
||
<nav class="flex justify-between items-center w-full px-8 py-6 max-w-screen-2xl mx-auto bg-transparent">
|
||
<div class="text-2xl font-black tracking-tighter text-red-900 dark:text-red-600">
|
||
Referral Kingdom
|
||
</div>
|
||
<div class="flex items-center gap-8">
|
||
<div class="hidden md:flex gap-6 items-center">
|
||
<a class="text-red-900 dark:text-red-400 font-bold border-b-2 border-amber-500 hover:text-amber-600 transition-colors duration-300" href="#">Home</a>
|
||
<a class="text-stone-600 dark:text-stone-400 font-medium hover:text-amber-600 transition-colors duration-300" href="#quests">Quests</a>
|
||
<a class="text-stone-600 dark:text-stone-400 font-medium hover:text-amber-600 transition-colors duration-300" href="#">Vault</a>
|
||
</div>
|
||
<button class="material-symbols-outlined text-red-800 dark:text-red-500 scale-95 duration-150 ease-in-out p-2">
|
||
menu
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
<!-- Main Content Canvas -->
|
||
<main class="min-h-[819px] flex flex-col items-center justify-center px-6 md:px-12 py-16 overflow-hidden">
|
||
<!-- Hero Visual Section -->
|
||
<div class="relative w-full max-w-4xl mb-16">
|
||
<div class="absolute inset-0 bg-primary-container/5 rounded-full blur-3xl -z-10 translate-y-12"></div>
|
||
<div class="flex justify-center">
|
||
<img alt="Grand Citadel Illustration" class="w-full h-auto max-h-[500px] object-contain drop-shadow-2xl" data-alt="A majestic and detailed medieval castle with towering spires and stone fortifications, rendered in a modern clean illustration style with warm lighting." src="./main_image.png"/>
|
||
</div>
|
||
</div>
|
||
<!-- Copy Section -->
|
||
<div class="max-w-3xl text-center space-y-8">
|
||
<div class="space-y-4">
|
||
<h1 class="text-4xl md:text-6xl font-black text-primary tracking-tight leading-tight">
|
||
The Gate is Preparing to Open
|
||
</h1>
|
||
<div class="h-1 w-24 bg-secondary mx-auto"></div>
|
||
</div>
|
||
<div class="bg-surface-container-low p-8 md:p-12 rounded-xl border-t-2 border-secondary relative">
|
||
<p class="text-xl md:text-2xl font-medium text-on-surface-variant leading-relaxed font-body">
|
||
HOW IT WORKS? A lot of companies offer special traits for premium customers. Some of them give you a start bonus if you commit to a referral. We’re here to open up the gate to the best referrals around! Come back and see what traits are open for you next!
|
||
</p>
|
||
<!-- Decorative Accent -->
|
||
<span class="material-symbols-outlined absolute -top-4 -left-4 text-4xl text-secondary-container bg-surface p-2 rounded-full shadow-sm">
|
||
castle
|
||
</span>
|
||
</div>
|
||
<!-- CTA/Teaser Interaction -->
|
||
<div class="flex flex-col md:flex-row gap-4 justify-center items-center pt-8">
|
||
<button class="bg-primary text-on-primary px-8 py-4 rounded-md font-bold text-lg hover:bg-primary-container transition-all duration-300 shadow-lg shadow-primary/20 flex items-center gap-2">
|
||
Notify the Scribe
|
||
<span class="material-symbols-outlined text-sm">notifications</span>
|
||
</button>
|
||
<button class="px-8 py-4 rounded-md font-bold text-lg text-primary border border-primary/20 hover:bg-surface-container-high transition-all">
|
||
Explore Kingdom Laws
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
<!-- Featured Quests Section -->
|
||
<section id="quests" class="w-full py-20 px-6 md:px-12 bg-surface-container-low">
|
||
<div class="max-w-5xl mx-auto">
|
||
<!-- Section Header -->
|
||
<div class="text-center mb-12 space-y-3">
|
||
<p class="text-xs uppercase tracking-[0.25em] font-bold text-secondary font-label">The Gates Have Opened</p>
|
||
<h2 class="text-3xl md:text-5xl font-black text-primary tracking-tight">First Quest of the Kingdom</h2>
|
||
<div class="h-1 w-16 bg-secondary mx-auto mt-2"></div>
|
||
<p class="text-on-surface-variant font-body max-w-xl mx-auto pt-2">Your first conquest awaits. Claim your reward by joining through the Kingdom's seal.</p>
|
||
</div>
|
||
|
||
<!-- Referral Card -->
|
||
<div class="relative bg-white rounded-xl shadow-xl shadow-primary/10 overflow-hidden border border-outline-variant max-w-3xl mx-auto flex flex-col md:flex-row">
|
||
<!-- Gold accent bar -->
|
||
<div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-secondary via-amber-400 to-secondary"></div>
|
||
|
||
<!-- Image Column -->
|
||
<div class="md:w-2/5 flex items-center justify-center bg-gradient-to-br from-stone-100 to-amber-50 p-8">
|
||
<a href="https://etoro.tw/3pJsZOv" target="_blank">
|
||
<img
|
||
src="./etoro_referral.png"
|
||
alt="eToro Referral — Get $500 bonus"
|
||
class="w-full max-w-[220px] md:max-w-full object-contain drop-shadow-xl hover:scale-105 transition-transform duration-300"
|
||
/>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Content Column -->
|
||
<div class="md:w-3/5 p-8 md:p-10 flex flex-col justify-between gap-6">
|
||
<!-- Brand & Badge -->
|
||
<div class="flex items-center gap-3">
|
||
<span class="bg-secondary-container text-on-secondary-container text-xs font-bold uppercase tracking-widest px-3 py-1 rounded-full">Trading</span>
|
||
<span class="bg-primary/10 text-primary text-xs font-bold uppercase tracking-widest px-3 py-1 rounded-full flex items-center gap-1">
|
||
<span class="material-symbols-outlined text-sm" style="font-size:14px;">verified</span>
|
||
Verified Quest
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Title & Description -->
|
||
<div class="space-y-3">
|
||
<h3 class="text-2xl md:text-3xl font-black text-primary font-headline leading-tight">eToro - Tame The Bull</h3>
|
||
<p class="text-on-surface-variant font-body leading-relaxed">
|
||
Join eToro through the Kingdom's gate and earn a <strong class="text-on-surface">$500 welcome bonus</strong> when you deposit and trade. One of the most popular social trading platforms worldwide.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Reward Highlight -->
|
||
<div class="bg-gradient-to-r from-amber-50 to-secondary-container/40 border border-secondary/30 rounded-lg px-5 py-4 flex items-center gap-4">
|
||
<span class="material-symbols-outlined text-secondary text-3xl">payments</span>
|
||
<div>
|
||
<p class="text-xs uppercase tracking-widest font-bold text-secondary font-label">Your Reward</p>
|
||
<p class="text-2xl font-black text-on-surface font-headline">$500 Bonus</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CTA -->
|
||
<a href="https://etoro.tw/3pJsZOv" target="_blank" class="inline-flex items-center justify-center gap-2 bg-primary text-on-primary px-7 py-4 rounded-md font-bold text-base hover:bg-primary-container transition-all duration-300 shadow-md shadow-primary/20 self-start">
|
||
<span class="material-symbols-outlined text-sm" style="font-size:18px;">open_in_new</span>
|
||
Start This Quest
|
||
</a>
|
||
|
||
<!-- Disclaimer -->
|
||
<p class="text-xs text-stone-400 font-body">Terms apply. Referral bonus subject to eToro's conditions.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="w-full py-12 px-8 flex flex-col md:flex-row justify-between items-center gap-4 bg-stone-100 dark:bg-stone-950">
|
||
<div class="text-xs uppercase tracking-widest font-semibold font-manrope text-stone-500 dark:text-stone-600">
|
||
© 742 Referral Kingdom. All rights reserved.
|
||
</div>
|
||
<div class="flex gap-8">
|
||
<a class="text-xs uppercase tracking-widest font-semibold font-manrope text-stone-500 dark:text-stone-600 hover:text-red-800 dark:hover:text-red-400 underline decoration-2 underline-offset-4 transition-opacity" href="#">
|
||
The Scroll
|
||
</a>
|
||
<a class="text-xs uppercase tracking-widest font-semibold font-manrope text-stone-500 dark:text-stone-600 hover:text-red-800 dark:hover:text-red-400 underline decoration-2 underline-offset-4 transition-opacity" href="#">
|
||
Kingdom Laws
|
||
</a>
|
||
<a class="text-xs uppercase tracking-widest font-semibold font-manrope text-stone-500 dark:text-stone-600 hover:text-red-800 dark:hover:text-red-400 underline decoration-2 underline-offset-4 transition-opacity" href="#">
|
||
Contact Scribe
|
||
</a>
|
||
</div>
|
||
</footer>
|
||
</body></html> |