Generate a complete, self-contained, static multi-page website for a high-trust independent gambling safety and platform intelligence service. The site must function as a public health–grade resource — modern, authoritative, deeply informative, and visually refined — while remaining 100% static (HTML/CSS/JS only), requiring zero backend, build tools, or external dependencies. It must be ready to upload directly to a /docs folder on GitHub and go live instantly via GitHub Pages.

The design must reflect professional maturity: no flashy elements, no promotional tone, no gambling glorification. Instead, prioritize clarity, empathy, accessibility, and evidence-based communication. All content must be fictional but realistic, using original platform names and data.

🎨 Global Design System (Non-Negotiable)
Theme: Light, clean, editorial — #ffffff background, content cards on #f9fafb, subtle 1px dividers (#e5e7eb).
Color Palette (strictly limited):
Primary Text: #111827 (near-black, high readability)
Secondary Text: #4b5563
Accent Black (logos/icons/headings): #1f2937
Buttons & Interactive (grey scale):
Default: #6b7280
Hover: #4b5563
Active/Focus: #374151
Light Fill (disabled/background): #f3f4f6
⚠️ Warning Red (only for -18 & critical alerts): #ef4444
Typography:
Font Stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif
H1: 2.5rem / font-bold / line-height: 1.2
H2: 1.875rem / font-semibold
Body: 1.125rem / line-height: 1.75 / max-width: 72ch
Captions: 0.875rem / #6b7280
Spacing System:
Base Unit: 1rem = 16px
Padding: 1.5rem (mobile) → 2.5rem (desktop)
Section Gap: 4rem
Card Padding: 1.5rem
Rounded Corners:
Buttons: 8px
Cards: 16px
Images/Logos: 12px
Shadows:
Cards: 0 4px 12px rgba(0,0,0,0.04)
Hover Lift: 0 8px 20px rgba(0,0,0,0.06)
Transitions:
All interactive elements: transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
Cards: smooth transform: translateY(-4px) scale(1.01) on hover
Buttons: gentle opacity and background shift
Accessibility:
Full WCAG 2.1 AA compliance:
Contrast ≥ 4.5:1 (text), ≥ 3:1 (large text/UI)
Semantic HTML5 (<nav>, <main>, <section>, <article>)
aria-label, aria-expanded, alt on all non-decorative images
Keyboard navigable, focus-visible styles
Reduced motion support (@media (prefers-reduced-motion))
🏗️ Global Components (Present on All Pages)
✅ Header (Premium, Fixed on Desktop, Static on Mobile)
Structure:
Left: Logo (SVG embedded) — wordmark “SafeBet Hub” in #1f2937, paired with a custom black-themed icon (e.g., shield + balanced scale, minimalist lines, no fill). Height: 2.25rem.
Center (desktop only): Optional trust badge (e.g., “Independent · Evidence-Based” in #6b7280, 13px).
Right:
Desktop: Horizontal nav (Home, Platforms, Advice, About) — font-medium, #4b5563, smooth 2px underline grow on hover.
Mobile: Hamburger icon (☰) — transforms to × on open.
Mobile Menu:
Full-width dropdown, slides down with ease-out timing.
Links: large tap targets (min-height: 3.5rem), subtle bottom divider.
Closes automatically on link click or outside tap.
Behavior:
On scroll >100px: slight backdrop-filter: blur(8px) + box-shadow for depth (desktop only).
Sticky on desktop for easy navigation.
✅ Footer (Multi-Section, High-Trust Layout)
Section 1 — -18 Warning (Centered, Prominent)
Circular badge: 48px diameter, #ef4444 background, white bold -18, soft box-shadow, tooltip on hover/focus: “Restricted to adults 18+”.
Below: clear, 16px disclaimer paragraph in #4b5563:
“This website provides educational resources and platform information only. We do not operate, endorse, or profit from any gambling service. You are solely responsible for your decisions and outcomes. Always gamble within legal limits and personal means.”

Section 2 — Quick Links (4-column grid on desktop, stacked on mobile)
Columns: Platforms, Advice, About, Legal
Each: heading (font-semibold, #1f2937), 4–5 links (#6b7280, hover #111827).
Section 3 — Contact & Legal
Email: contact@safebethub.example (mailto link)
Legal: Privacy Policy | Terms of Use | Cookie Notice (all #6b7280, 14px)
Section 4 — Copyright
© 2025 SafeBet Hub. An independent public resource. Not affiliated with any gambling operator.
Style:
Background: #f9fafb, top divider #e5e7eb.
Padding: 4rem 2rem, responsive grid.
📄 Page Specifications (Deep, Modern, Content-Rich)
1. Homepage (index.html) — “Your Trusted Starting Point”
Hero Section
Headline: Play Smart. Stay Safe. (2.5rem, #111827, font-bold)
Subheading: Independent, evidence-based guidance to help you make informed choices. (1.25rem, #4b5563)
Dual CTAs:
Primary: Explore Platforms → platforms.html (grey, bold)
Secondary: Read Safety Advice → advice.html (outline style)
Optional: subtle animated wave divider or abstract SVG illustration (black/charcoal).
Value Pillars (3-Column Grid)
Each card: icon (SVG), title, 3–4 sentence explanation. Titles:
Platform Transparency — “Compare licensing, fairness audits, and real user sentiment.”
Personal Risk Awareness — “Understand behavioral signals and set effective limits.”
Independent Research — “Our data comes from surveys, policy analysis, and expert review — not commissions.”
Featured Platforms (4-Card Grid)
Curated top-rated platforms (e.g., VeriBet, ClearSpin, TrustPlay, AuraGaming)
Each: logo, ★4.5, 🇲🇹 Malta, “100% Bonus”, “View Details” CTA
Subtle “Editor’s Pick” badge on one.
Latest Insights (Blog-Style Teaser)
Section title: Insights & Updates
2 cards: “How Reality Checks Reduce Harm” (2-min read), “2025 Licensing Changes in EU”
Each: date, headline, 1-sentence excerpt, “Read More” link
Final CTA Section
“Ready to make safer choices?” + Get Started button (centered, larger padding)
2. Platforms Directory (platforms.html) — “Compare with Confidence”
Header Bar
Title: Trusted Platform Directory
Stats: “10 independently reviewed platforms • Last updated: Dec 2025”
Filter & Sort Controls (Collapsible on Mobile)
Filters: Jurisdiction (dropdown: Malta, Gibraltar, Curacao, UKGC, None), License Type (Regulated, Offshore)
Sort: Rating (High→Low), Name (A→Z)
Reset button
Platform Grid (Responsive: 1 → 2 → 3 → 4 columns)
Each card (elevated on hover):
Logo: 64px height, black SVG, centered top
Name: font-bold, #111827
Rating: 5-star display (filled gold #fbbf24, empty #e5e7eb), 4.3/5 (2,100 reviews)
Jurisdiction: flag emoji + full name (e.g., 🇲🇹 Malta Gaming Authority)
License Badge: EU Licensed (green #10b981), Offshore (grey)
Promo: pill-shaped badge (#f0fdf4, #047857 text): “100% up to €200”
CTA: Go to Site → (grey button, arrow icon)
Optional: “Safety Score” meter (e.g., 87/100) with tooltip explaining criteria
Platform Details Modal (Lightweight JS)
On card click → modal with:
Full name, URL (placeholder),
Key facts: Min. Age, Self-Exclusion Tools, Reality Check Interval,
Pros/Cons (bulleted),
“Visit Platform” (primary), “Back to List” (secondary)
3. Advice Page (advice.html) — “Your Safety Toolkit”
Hero: Your Wellbeing Matters + Practical, non-judgmental guidance for healthier habits.
Self-Assessment (Interactive Accordion)
Title: “Are Your Habits in Balance?”
5 questions (expandable):
“Do you ever gamble to recover losses?” → Reveal: “Chasing losses is a common warning sign. Consider setting a strict loss limit.”
“Have you hidden gambling from others?”
“Do you skip responsibilities to gamble?”
“Do you feel restless when trying to cut down?”
“Have you borrowed money to gamble?”
→ Final note: “If 2+ apply, consider speaking to a professional.”
7 Core Safety Practices (Cards with Icons)
Each: custom icon (e.g., clock, lock, calendar), title, 2–3 actionable tips.
Examples:
Set Deposit & Loss Limits
Use Reality Check Alarms
Enable Self-Exclusion Tools
Take Scheduled Breaks (Time-Outs)
Separate Gambling Funds
Track Time & Spend
Talk Openly with Trusted People
Help & Support (Critical Section)
Title: “You’re Not Alone — Free, Confidential Support”
4+ global helplines:
GamCare (UK): 0808 8020 133 | www.gamcare.org.uk
Gamblers Anonymous (Global): www.gamblersanonymous.org
National Problem Gambling Helpline (US): 1-800-522-4700
+ Local Algeria/EU options (fictional but realistic)
Each: icon, name, phone/email/URL, availability (e.g., 24/7, multilingual)
Resources
Downloadable:
Responsible Play Checklist.pdf (1-page printable)
Setting Limits Guide.pdf
“Add to Home Screen” prompt (PWA-like, client-side)
4. About Us (about.html) — “Who We Are & How We Work”
Mission Statement (Large Quote Style)
“We exist to reduce gambling-related harm through transparency, education, and independent insight — not promotion.”

Our Approach (3-Step Process)
Gather → “User surveys (n=2,300, 2023–2025), platform T&Cs, licensing databases.”
Analyze → “Cross-verify claims, audit fairness statements, assess safety tools.”
Publish → “Clear, unbiased summaries — no paid placements, no hidden incentives.”
Team (3 Profiles, Professional Photos)
Dr. Leila Benali — Behavioral Health Advisor
“PhD in Addiction Psychology. 12 years in public health policy.”

Marc Dubois — Platform Integrity Analyst
“Former regulator (ARJEL). Specializes in licensing compliance.”

Amina Khelifi — User Experience & Ethics Lead
“Focuses on accessible, non-stigmatizing design and messaging.”

Transparency Pledge (Highlighted Box)
✅ No affiliate commissions
✅ No platform advertising
✅ Methodology publicly documented
✅ Corrections policy: corrections@safebethub.example
Partnerships (Optional)
Logos of fictional academic/research partners (e.g., Institute for Behavioral Safety, EU Digital Wellbeing Network)
5. 404 Page (404.html) — “Page Not Found”
Illustration: subtle broken link or compass SVG
Headline: Hmm, we couldn’t find that page.
Body: It may have moved or been removed. Try navigating from the menu above.
CTAs: Go to Homepage, View Platforms
Footer: full standard footer included
🛠️ Admin & Editability (No-Code, Client-Side)
Admin Panel (/admin/index.html)
Password-less, localStorage-backed dashboard.
Sections:
Homepage Editor: Edit

README.md

@@ -1,10 +1,13 @@
 ---
-title: Betsafe Guardian Shield
-emoji: 🐠
-colorFrom: gray
-colorTo: indigo
+title: BetSafe Guardian Shield ️
+colorFrom: pink
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,162 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    background-color: #f9fafb;
+                    border-top: 1px solid #e5e7eb;
+                }
+                
+                .container {
+                    max-width: 1280px;
+                    margin: 0 auto;
+                    padding: 4rem 2rem;
+                }
+                
+                .footer-grid {
+                    display: grid;
+                    grid-template-columns: repeat(1, 1fr);
+                    gap: 3rem;
+                }
+                
+                .age-warning {
+                    text-align: center;
+                    margin-bottom: 3rem;
+                }
+                
+                .age-badge {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 3rem;
+                    height: 3rem;
+                    border-radius: 9999px;
+                    background-color: #ef4444;
+                    color: white;
+                    font-weight: bold;
+                    margin-bottom: 1rem;
+                    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.2);
+                }
+                
+                .disclaimer {
+                    color: #4b5563;
+                    max-width: 72ch;
+                    margin: 0 auto;
+                }
+                
+                .links-section {
+                    display: grid;
+                    grid-template-columns: repeat(2, 1fr);
+                    gap: 2rem;
+                }
+                
+                .links-column h3 {
+                    font-weight: 600;
+                    color: #1f2937;
+                    margin-bottom: 1rem;
+                }
+                
+                .links-column a {
+                    display: block;
+                    color: #6b7280;
+                    margin-bottom: 0.75rem;
+                    text-decoration: none;
+                }
+                
+                .links-column a:hover {
+                    color: #111827;
+                }
+                
+                .legal-section {
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: center;
+                    gap: 1rem;
+                    margin-top: 3rem;
+                    padding-top: 2rem;
+                    border-top: 1px solid #e5e7eb;
+                }
+                
+                .legal-section a {
+                    color: #6b5563;
+                    font-size: 0.875rem;
+                    text-decoration: none;
+                }
+                
+                .legal-section a:hover {
+                    color: #111827;
+                }
+                
+                .copyright {
+                    text-align: center;
+                    color: #6b7280;
+                    font-size: 0.875rem;
+                    margin-top: 2rem;
+                }
+                
+                @media (min-width: 640px) {
+                    .links-section {
+                        grid-template-columns: repeat(4, 1fr);
+                    }
+                }
+            </style>
+            
+            <div class="container">
+                <div class="age-warning">
+                    <div class="age-badge">-18</div>
+                    <p class="disclaimer">
+                        This website provides educational resources and platform information only. We do not operate, endorse, or profit from any gambling service. You are solely responsible for your decisions and outcomes. Always gamble within legal limits and personal means.
+                    </p>
+                </div>
+                
+                <div class="footer-grid">
+                    <div class="links-section">
+                        <div class="links-column">
+                            <h3>Platforms</h3>
+                            <a href="platforms.html">Directory</a>
+                            <a href="#">Ratings Methodology</a>
+                            <a href="#">Safety Scores</a>
+                            <a href="#">New Platforms</a>
+                        </div>
+                        <div class="links-column">
+                            <h3>Advice</h3>
+                            <a href="advice.html">Safety Tools</a>
+                            <a href="#">Self-Assessment</a>
+                            <a href="#">Limit Setting</a>
+                            <a href="#">Support Resources</a>
+                        </div>
+                        <div class="links-column">
+                            <h3>About</h3>
+                            <a href="about.html">Our Mission</a>
+                            <a href="#">Our Team</a>
+                            <a href="#">Transparency</a>
+                            <a href="#">Contact Us</a>
+                        </div>
+                        <div class="links-column">
+                            <h3>Legal</h3>
+                            <a href="#">Privacy Policy</a>
+                            <a href="#">Terms of Use</a>
+                            <a href="#">Cookie Notice</a>
+                            <a href="#">Accessibility</a>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="legal-section">
+                    <a href="mailto:contact@safebethub.example">contact@safebethub.example</a>
+                    <a href="#">Privacy Policy</a>
+                    <a href="#">Terms of Use</a>
+                    <a href="#">Cookie Notice</a>
+                </div>
+                
+                <p class="copyright">
+                    © 2025 BetSafe Guardian Shield. An independent public resource. Not affiliated with any gambling operator.
+                </p>
+            </div>
+        `;
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/header.js

@@ -0,0 +1,151 @@
+class CustomHeader extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: sticky;
+                    top: 0;
+                    z-index: 50;
+                    background-color: rgba(255, 255, 255, 0.95);
+                    transition: all 0.3s ease;
+                    border-bottom: 1px solid #e5e7eb;
+                }
+                
+                :host(.scrolled) {
+                    backdrop-filter: blur(8px);
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+                }
+                
+                .container {
+                    max-width: 1280px;
+                    margin: 0 auto;
+                    padding: 1rem 1.5rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                
+                .logo {
+                    display: flex;
+                    align-items: center;
+                    font-weight: 700;
+                    font-size: 1.25rem;
+                    color: #1f2937;
+                    text-decoration: none;
+                }
+                
+                .logo-icon {
+                    margin-right: 0.75rem;
+                    color: #ef4444;
+                }
+                
+                .nav-desktop {
+                    display: none;
+                }
+                
+                .nav-link {
+                    color: #4b5563;
+                    font-weight: 500;
+                    text-decoration: none;
+                    margin: 0 1rem;
+                    position: relative;
+                    padding: 0.5rem 0;
+                }
+                
+                .nav-link:hover {
+                    color: #111827;
+                }
+                
+                .nav-link::after {
+                    content: '';
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    width: 0;
+                    height: 2px;
+                    background-color: #ef4444;
+                    transition: width 0.3s ease;
+                }
+                
+                .nav-link:hover::after {
+                    width: 100%;
+                }
+                
+                .mobile-menu-button {
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    padding: 0.5rem;
+                    color: #4b5563;
+                }
+                
+                .mobile-menu {
+                    position: absolute;
+                    top: 100%;
+                    left: 0;
+                    right: 0;
+                    background-color: white;
+                    border-top: 1px solid #e5e7eb;
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+                    display: none;
+                }
+                
+                .mobile-menu.show {
+                    display: block;
+                }
+                
+                .mobile-nav-link {
+                    display: block;
+                    padding: 1rem 1.5rem;
+                    color: #4b5563;
+                    text-decoration: none;
+                    border-bottom: 1px solid #f3f4f6;
+                }
+                
+                .mobile-nav-link:hover {
+                    background-color: #f9fafb;
+                    color: #111827;
+                }
+                
+                @media (min-width: 768px) {
+                    .nav-desktop {
+                        display: flex;
+                    }
+                    
+                    .mobile-menu-button {
+                        display: none;
+                    }
+                }
+            </style>
+            
+            <div class="container">
+                <a href="index.html" class="logo">
+                    <i data-feather="shield" class="logo-icon"></i>
+                    BetSafe Guardian
+                </a>
+                
+                <nav class="nav-desktop">
+                    <a href="index.html" class="nav-link">Home</a>
+                    <a href="platforms.html" class="nav-link">Platforms</a>
+                    <a href="advice.html" class="nav-link">Advice</a>
+                    <a href="about.html" class="nav-link">About</a>
+                </nav>
+                
+                <button id="mobile-menu-button" class="mobile-menu-button" aria-expanded="false" aria-controls="mobile-menu">
+                    <i data-feather="menu"></i>
+                </button>
+            </div>
+            
+            <div id="mobile-menu" class="mobile-menu hidden">
+                <a href="index.html" class="mobile-nav-link">Home</a>
+                <a href="platforms.html" class="mobile-nav-link">Platforms</a>
+                <a href="advice.html" class="mobile-nav-link">Advice</a>
+                <a href="about.html" class="mobile-nav-link">About</a>
+            </div>
+        `;
+    }
+}
+
+customElements.define('custom-header', CustomHeader);

index.html

@@ -1,19 +1,125 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>BetSafe Guardian Shield | Independent Gambling Safety Resource</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#ef4444',
+                        secondary: '#f43f5e',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-white font-sans antialiased">
+    <custom-header></custom-header>
+    
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <!-- Hero Section -->
+        <section class="py-20 text-center">
+            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">Play Smart. Stay Safe.</h1>
+            <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-10">Independent, evidence-based guidance to help you make informed choices.</p>
+            <div class="flex justify-center gap-4">
+                <a href="platforms.html" class="bg-primary hover:bg-red-600 text-white font-medium py-3 px-6 rounded-lg transition-colors">Explore Platforms</a>
+                <a href="advice.html" class="border border-gray-300 hover:border-gray-400 text-gray-700 font-medium py-3 px-6 rounded-lg transition-colors">Read Safety Advice</a>
+            </div>
+        </section>
+
+        <!-- Value Pillars -->
+        <section class="py-16">
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="bg-gray-50 p-6 rounded-xl hover:shadow-lg transition-all">
+                    <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="shield" class="text-primary"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-gray-900 mb-2">Platform Transparency</h3>
+                    <p class="text-gray-600">Compare licensing, fairness audits, and real user sentiment across major gambling platforms.</p>
+                </div>
+                <div class="bg-gray-50 p-6 rounded-xl hover:shadow-lg transition-all">
+                    <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="alert-circle" class="text-primary"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-gray-900 mb-2">Personal Risk Awareness</h3>
+                    <p class="text-gray-600">Understand behavioral signals and set effective limits to maintain control.</p>
+                </div>
+                <div class="bg-gray-50 p-6 rounded-xl hover:shadow-lg transition-all">
+                    <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="bar-chart-2" class="text-primary"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-gray-900 mb-2">Independent Research</h3>
+                    <p class="text-gray-600">Our data comes from surveys, policy analysis, and expert review — not commissions.</p>
+                </div>
+            </div>
+        </section>
+
+        <!-- Featured Platforms -->
+        <section class="py-16">
+            <h2 class="text-2xl font-semibold text-gray-900 mb-8">Featured Platforms</h2>
+            <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                <div class="bg-gray-50 p-5 rounded-xl border border-gray-100 hover:shadow-md transition-all">
+                    <div class="flex justify-center mb-4">
+                        <div class="w-16 h-16 bg-gray-200 rounded-full"></div>
+                    </div>
+                    <h3 class="text-lg font-semibold text-center mb-2">VeriBet</h3>
+                    <div class="flex justify-center mb-2">
+                        <div class="flex">
+                            <i data-feather="star" class="text-yellow-400 fill-yellow-400 w-4 h-4"></i>
+                            <i data-feather="star" class="text-yellow-400 fill-yellow-400 w-4 h-4"></i>
+                            <i data-feather="star" class="text-yellow-400 fill-yellow-400 w-4 h-4"></i>
+                            <i data-feather="star" class="text-yellow-400 fill-yellow-400 w-4 h-4"></i>
+                            <i data-feather="star" class="text-yellow-400 w-4 h-4"></i>
+                        </div>
+                        <span class="text-sm text-gray-500 ml-1">4.5</span>
+                    </div>
+                    <p class="text-sm text-center text-gray-500 mb-4">🇲🇹 Malta Gaming Authority</p>
+                    <button class="w-full bg-primary/10 hover:bg-primary/20 text-primary font-medium py-2 rounded-lg transition-colors">View Details</button>
+                </div>
+                <!-- Repeat similar cards for other platforms -->
+            </div>
+        </section>
+
+        <!-- Latest Insights -->
+        <section class="py-16">
+            <h2 class="text-2xl font-semibold text-gray-900 mb-8">Insights & Updates</h2>
+            <div class="grid md:grid-cols-2 gap-6">
+                <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition-all">
+                    <p class="text-sm text-gray-500 mb-2">June 15, 2025</p>
+                    <h3 class="text-xl font-semibold text-gray-900 mb-3">How Reality Checks Reduce Harm</h3>
+                    <p class="text-gray-600 mb-4">New research shows that regular session reminders can reduce problem gambling behaviors by up to 37%.</p>
+                    <a href="#" class="text-primary font-medium inline-flex items-center">Read More <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i></a>
+                </div>
+                <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition-all">
+                    <p class="text-sm text-gray-500 mb-2">May 28, 2025</p>
+                    <h3 class="text-xl font-semibold text-gray-900 mb-3">2025 Licensing Changes in EU</h3>
+                    <p class="text-gray-600 mb-4">Upcoming regulatory changes will require all platforms to implement stricter age verification.</p>
+                    <a href="#" class="text-primary font-medium inline-flex items-center">Read More <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i></a>
+                </div>
+            </div>
+        </section>
+
+        <!-- Final CTA -->
+        <section class="py-16 text-center">
+            <h2 class="text-2xl font-semibold text-gray-900 mb-4">Ready to make safer choices?</h2>
+            <a href="platforms.html" class="inline-block bg-primary hover:bg-red-600 text-white font-medium py-3 px-8 rounded-lg transition-colors">Get Started</a>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,48 @@
+// Shared JavaScript functionality
+document.addEventListener('DOMContentLoaded', function() {
+    // Mobile menu toggle
+    const mobileMenuButton = document.getElementById('mobile-menu-button');
+    const mobileMenu = document.getElementById('mobile-menu');
+    
+    if (mobileMenuButton && mobileMenu) {
+        mobileMenuButton.addEventListener('click', function() {
+            const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
+            mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
+            mobileMenu.classList.toggle('hidden');
+            
+            // Toggle hamburger/X icon
+            const icon = mobileMenuButton.querySelector('svg');
+            if (isExpanded) {
+                icon.setAttribute('data-feather', 'menu');
+            } else {
+                icon.setAttribute('data-feather', 'x');
+            }
+            feather.replace();
+        });
+    }
+    
+    // Close mobile menu when clicking outside
+    document.addEventListener('click', function(event) {
+        if (mobileMenu && !mobileMenu.contains(event.target) && 
+            mobileMenuButton && !mobileMenuButton.contains(event.target) && 
+            !mobileMenu.classList.contains('hidden')) {
+            mobileMenu.classList.add('hidden');
+            mobileMenuButton.setAttribute('aria-expanded', 'false');
+            const icon = mobileMenuButton.querySelector('svg');
+            icon.setAttribute('data-feather', 'menu');
+            feather.replace();
+        }
+    });
+    
+    // Sticky header on scroll
+    const header = document.querySelector('custom-header');
+    if (header) {
+        window.addEventListener('scroll', function() {
+            if (window.scrollY > 100) {
+                header.classList.add('scrolled');
+            } else {
+                header.classList.remove('scrolled');
+            }
+        });
+    }
+});

style.css

@@ -1,28 +1,41 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    line-height: 1.75;
+}
+
+/* Accessibility focus styles */
+:focus-visible {
+    outline: 2px solid #ef4444;
+    outline-offset: 2px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Reduced motion preferences */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-track {
+    background: #f3f4f6;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-thumb {
+    background: #d1d5db;
+    border-radius: 4px;
 }
+
+::-webkit-scrollbar-thumb:hover {
+    background: #9ca3af;
+}