160 lines
8.5 KiB
HTML
160 lines
8.5 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</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>
|
||
<!-- 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> |