added eToro referral

index.html

@@ -140,6 +140,74 @@
 </div>
 </div>
 </main>
+<!-- Featured Quests Section -->
+<section 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">
+                    <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" 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">