Spaces:

DjayChucko
/

kyber-value-mapper-pro

Running

App Files Files Community

DjayChucko commited on Dec 6, 2025

Commit

0b2a6ce

verified ·

1 Parent(s): 2854d53

Build me a landing page using this html:

Browse files

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Kyber Sales Enablement - Your strategic real-time video companion">
<title>Kyber Value Mapper | Home</title>

<link rel="icon" type="image/png" href="Images/kyber-logomark.png">

<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 = {
darkMode: 'class',
theme: {
extend: {
colors: {
// Generic, high-contrast colors inspired by the original
primary: '#3b82f6', // Blue-500
secondary: '#6366f1', // Indigo-500
dark: '#1e293b'
}
}
}
}
</script>
<style>
/* --- UNIFIED HEADER STYLES --- */
.nav-link.active {
@apply text-primary font-medium border-b-2 border-primary;
}
.hamburger-line {
@apply w-6 h-0.5 bg-white transition-all duration-300;
}
#mobileMenuButton.open .hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 6px);
}
#mobileMenuButton.open .hamburger-line:nth-child(2) {
opacity: 0;
}
#mobileMenuButton.open .hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(5px, -6px);
}

/* --- PAGE-SPECIFIC STYLES --- */
select {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1.25rem;
}
.dark select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
</style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen flex flex-col">

<header class="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md shadow-sm">
<div class="container mx-auto px-4 py-3">
<div class="flex justify-between items-center">
<a href="index.html" class="flex items-center space-x-2">
<img src="Images/kyber-logomark.png" alt="Kyber Logo" class="h-8 mr-2">

<span class="text-xl font-bold text-gray-800 dark:text-white font-heading">Kyber Sales Enablement</span>
</a>
<nav class="hidden md:flex space-x-8">
<a href="value-mapper.html" class="nav-link py-2 px-1 text-slate-200 hover:text-blue-400 transition-colors">Mapper</a>
<a href="intel.html" class="nav-link py-2 px-1 text-slate-200 hover:text-blue-400 transition-colors">Products</a>
<a href="proof.html" class="nav-link py-2 px-1 text-slate-200 hover:text-blue-400 transition-colors">Proof</a>
<a href="scorecard.html" class="nav-link py-2 px-1 text-slate-200 hover:text-blue-400 transition-colors">Scorecard</a>
<a href="strategy.html" class="nav-link py-2 px-1 text-slate-200 hover:text-blue-400 transition-colors">Method</a>
<a href="academy.html" class="nav-link py-2 px-1 text-slate-200 hover:text-blue-400 transition-colors">Academy</a>
</nav>
<div class="flex items-center space-x-4">
<button id="themeToggle" class="p-2 rounded-full text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700">
<i data-feather="moon" class="hidden dark:block"></i>
<i data-feather="sun" class="block dark:hidden"></i>
</button>
<button id="mobileMenuButton" class="md:hidden flex flex-col space-y-1.5 p-2 z-50 bg-indigo-600 rounded-lg">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
</button>
</div>
</div>
</div>
</header>

<div id="mobileMenu" class="hidden fixed inset-0 z-40 bg-gray-900 bg-opacity-95 backdrop-blur-sm">
<div class="flex flex-col items-center justify-center h-full space-y-8">
<a href="index.html" class="nav-link text-3xl text-white">Home</a>
<a href="value-mapper.html" class="nav-link text-3xl text-white">Mapper</a>
<a href="intel.html" class="nav-link text-3xl text-white">Products</a>
<a href="proof.html" class="nav-link text-3xl text-white">Proof</a>
<a href="scorecard.html" class="nav-link text-3xl text-white">Scorecard</a>
<a href="strategy.html" class="nav-link text-3xl text-white">Method</a>
<a href="academy.html" class="nav-link text-3xl text-white">Academy</a>
</div>
</div>
<main class="flex-grow bg-gradient-to-br from-purple-600 to-indigo-700">
<div class="container mx-auto px-4 py-12">
<div class="bg-white dark:bg-gray-800 p-6 sm:p-8 rounded-2xl shadow-2xl mb-8">
<div class="text-center">
<h1 class="text-3xl sm:text-4xl font-heading font-extrabold text-gray-800 dark:text-white mb-3 leading-tight">Kyber Value Mapper</h1>
<div class="flex justify-center mb-6">
<img src="Images/kyber-mapper.png" alt="Kyber Value Mapper Graphic" class="h-48 w-auto">

</div>
</div>
<div class="max-w-md mx-auto">
<select id="industry-selector" onchange="updateContent(true)" class="block w-full py-3 px-4 pr-10 border border-gray-300 dark:border-gray-600 rounded-xl text-base font-semibold text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:outline-none transition duration-200 shadow-lg">
<option value="placeholder" disabled selected class="text-gray-500">- Choose Industry to Map -</option>
<option value="Robotics & Tele-Operation">Robotics & Tele-Operation</option>
<option value="Cloud Gaming / Cloud Rendering">Cloud Gaming / Cloud Rendering</option>
<option value="Live Auctions & eSports Betting">Live Auctions & eSports Betting</option>
<option value="Healthcare / Tele-Surgery">Healthcare / Tele-Surgery (New)</option>
<option value="Industrial IoT / Machine Vision">Industrial IoT / Machine Vision (New)</option>
<option value="Remote Live Production (REMI)">Remote Live Production (REMI) (New)</option>
</select>
</div>
</div>

<div id="initial-message" class="text-center p-12 rounded-xl bg-white/80 dark:bg-gray-800/80 text-gray-600 dark:text-gray-300 border-2 border-dashed border-gray-400 dark:border-gray-600 backdrop-blur-sm">
<p class="text-lg font-medium">Please select an industry from the dropdown above to reveal targeted value mapping, discovery questions, and permission-based openers.</p>
</div>

<div id="dynamic-area" class="hidden space-y-8">
<h2 id="industry-title" class="text-3xl font-heading font-bold text-white text-center pt-4"></h2>

<div class="bg-white dark:bg-gray-800 p-6 sm:p-8 rounded-xl shadow-lg">
<h3 class="text-xl font-heading font-bold mb-6 text-gray-800 dark:text-white">Recommended Value Proposition & Suggested Product Focus</h3>
<div id="value-drivers" class="space-y-4 text-gray-700 dark:text-gray-300 text-base"></div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg">
<h3 class="text-lg font-heading font-bold mb-4 text-gray-800 dark:text-white">Permission-Based Opener (PBO) / C-Level Hook</h3>
<p id="pbo1" class="text-gray-800 dark:text-white font-medium text-base"></p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg">
<h3 class="text-lg font-heading font-bold mb-4 text-gray-800 dark:text-white">Discovery Question (DQ) / Technical Deep Dive</h3>
<p id="dq1" class="text-gray-600 dark:text-gray-400 italic text-base"></p>
</div>
</div>

<div class="flex justify-center pt-4">
<button id="refresh-button" class="hidden items-center px-6 py-3 bg-white/20 hover:bg-white/30 rounded-lg text-white font-semibold transition flex space-x-2 shadow-lg">
<i data-feather="refresh-cw" class="w-5 h-5"></i>
<span>Cycle Inspiration</span>
</button>
</div>

</div>
</div>
</main>

<footer class="bg-purple-800/80 dark:bg-purple-800/80 backdrop-blur-sm border-t border-gray-700">
<div class="container mx-auto px-4 py-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<p class="text-gray-600 dark:text-gray-300 mt-2 text-sm">
Leveraging Kyber to Enable Real-Time Interaction
</p>
</div>

<div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700 text-center text-sm text-gray-500 dark:

Files changed (5) hide show

README.md +7 -4
components/navbar.js +239 -0
index.html +366 -19
script.js +85 -0
style.css +46 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Kyber Value Mapper Pro
-emoji: 😻
 colorFrom: yellow
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Kyber Value Mapper Pro 🚀
 colorFrom: yellow
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/navbar.js ADDED Viewed

	@@ -0,0 +1,239 @@

+class CustomNavbar 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.8);
+          backdrop-filter: blur(12px);
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+        .dark :host {
+          background-color: rgba(17, 24, 39, 0.8);
+        }
+        .container {
+          max-width: 1280px;
+          margin: 0 auto;
+          padding: 0.75rem 1rem;
+        }
+        .nav-container {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .logo-link {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          text-decoration: none;
+        }
+        .logo-img {
+          height: 2rem;
+        }
+        .logo-text {
+          font-size: 1.25rem;
+          font-weight: 700;
+          color: rgb(31, 41, 55);
+        }
+        .dark .logo-text {
+          color: white;
+        }
+        .nav-links {
+          display: none;
+          gap: 2rem;
+        }
+        @media (min-width: 768px) {
+          .nav-links {
+            display: flex;
+          }
+        }
+        .nav-link {
+          padding: 0.5rem 0.25rem;
+          color: rgb(148, 163, 184);
+          text-decoration: none;
+          transition: color 0.3s ease;
+        }
+        .nav-link:hover {
+          color: #6366f1;
+        }
+        .nav-link.active {
+          color: #6366f1;
+          font-weight: 500;
+          border-bottom: 2px solid #6366f1;
+        }
+        .actions {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+        }
+        .theme-toggle {
+          padding: 0.5rem;
+          border-radius: 9999px;
+          color: rgb(107, 114, 128);
+          transition: background-color 0.3s ease;
+        }
+        .theme-toggle:hover {
+          background-color: rgb(229, 231, 235);
+        }
+        .dark .theme-toggle:hover {
+          background-color: rgb(55, 65, 81);
+        }
+        .mobile-menu-btn {
+          display: flex;
+          flex-direction: column;
+          gap: 0.375rem;
+          padding: 0.5rem;
+          z-index: 50;
+          background-color: #6366f1;
+          border-radius: 0.5rem;
+        }
+        @media (min-width: 768px) {
+          .mobile-menu-btn {
+            display: none;
+          }
+        }
+        .hamburger-line {
+          width: 1.5rem;
+          height: 0.125rem;
+          background-color: white;
+          transition: all 0.3s ease;
+        }
+        .mobile-menu-btn.open .hamburger-line:nth-child(1) {
+          transform: rotate(45deg) translate(0.3125rem, 0.375rem);
+        }
+        .mobile-menu-btn.open .hamburger-line:nth-child(2) {
+          opacity: 0;
+        }
+        .mobile-menu-btn.open .hamburger-line:nth-child(3) {
+          transform: rotate(-45deg) translate(0.3125rem, -0.375rem);
+        }
+        .mobile-menu {
+          position: fixed;
+          inset: 0;
+          z-index: 40;
+          background-color: rgba(17, 24, 39, 0.95);
+          backdrop-filter: blur(12px);
+          display: none;
+        }
+        .mobile-menu.open {
+          display: flex;
+        }
+        .mobile-menu-content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          height: 100;
+          gap: 2rem;
+        }
+        .mobile-nav-link {
+          font-size: 1.875rem;
+          color: white;
+          text-decoration: none;
+        }
+      </style>
+      <div class="container">
+        <div class="nav-container">
+          <a href="index.html" class="logo-link">
+            <img src="Images/kyber-logomark.png" alt="Kyber Logo" class="logo-img">
+            <span class="logo-text">Kyber Sales Enablement</span>
+          </a>
+          <nav class="nav-links">
+            <a href="value-mapper.html" class="nav-link">Mapper</a>
+            <a href="intel.html" class="nav-link">Products</a>
+            <a href="proof.html" class="nav-link">Proof</a>
+            <a href="scorecard.html" class="nav-link">Scorecard</a>
+            <a href="strategy.html" class="nav-link">Method</a>
+            <a href="academy.html" class="nav-link">Academy</a>
+          </nav>
+          <div class="actions">
+            <button class="theme-toggle">
+              <i data-feather="moon" class="hidden dark:block"></i>
+              <i data-feather="sun" class="block dark:hidden"></i>
+            </button>
+            <button class="mobile-menu-btn">
+              <span class="hamburger-line"></span>
+              <span class="hamburger-line"></span>
+              <span class="hamburger-line"></span>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="mobile-menu">
+        <div class="mobile-menu-content">
+          <a href="index.html" class="mobile-nav-link">Home</a>
+          <a href="value-mapper.html" class="mobile-nav-link">Mapper</a>
+          <a href="intel.html" class="mobile-nav-link">Products</a>
+          <a href="proof.html" class="mobile-nav-link">Proof</a>
+          <a href="scorecard.html" class="mobile-nav-link">Scorecard</a>
+          <a href="strategy.html" class="mobile-nav-link">Method</a>
+          <a href="academy.html" class="mobile-nav-link">Academy</a>
+        </div>
+      </div>
+    `;
+    // Theme toggle functionality
+    const themeToggle = this.shadowRoot.querySelector('.theme-toggle');
+    themeToggle.addEventListener('click', () => {
+      document.documentElement.classList.toggle('dark');
+      localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+      feather.replace();
+    });
+    // Mobile menu functionality
+    const mobileMenuBtn = this.shadowRoot.querySelector('.mobile-menu-btn');
+    const mobileMenu = this.shadowRoot.querySelector('.mobile-menu');
+    mobileMenuBtn.addEventListener('click', () => {
+      mobileMenuBtn.classList.toggle('open');
+      mobileMenu.classList.toggle('open');
+      document.body.classList.toggle('overflow-hidden');
+    });
+    // Set active nav link based on current page
+    const currentPage = window.location.pathname.split('/').pop() || 'index.html';
+    this.shadowRoot.querySelectorAll('.nav-link, .mobile-nav-link').forEach(link => {
+      const linkHref = link.getAttribute('href');
+      if (linkHref === currentPage) {
+        link.classList.add('active');
+      }
+    });
+    // Initialize feather icons
+    feather.replace();
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,366 @@
-<!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" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Kyber Sales Enablement - Your strategic real-time video companion">
+    <title>Kyber Value Mapper | Home</title>
+    <link rel="icon" type="image/png" href="Images/kyber-logomark.png">
+    <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 = {
+        darkMode: 'class',
+        theme: {
+            extend: {
+                colors: {
+                    // Using indigo as primary and purple as secondary
+                    primary: '#6366f1', // Indigo-500
+                    secondary: '#8b5cf6', // Purple-500
+                    dark: '#1e293b'
+                }
+            }
+        }
+      }
+    </script>
+    <style>
+        /* --- UNIFIED HEADER STYLES --- */
+        .nav-link.active {
+            @apply text-primary font-medium border-b-2 border-primary;
+        }
+        .hamburger-line {
+            @apply w-6 h-0.5 bg-white transition-all duration-300;
+        }
+        #mobileMenuButton.open .hamburger-line:nth-child(1) {
+            transform: rotate(45deg) translate(5px, 6px);
+        }
+        #mobileMenuButton.open .hamburger-line:nth-child(2) {
+            opacity: 0;
+        }
+        #mobileMenuButton.open .hamburger-line:nth-child(3) {
+            transform: rotate(-45deg) translate(5px, -6px);
+        }
+        /* --- PAGE-SPECIFIC STYLES --- */
+        select {
+            -webkit-appearance: none; -moz-appearance: none; appearance: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 0.75rem center;
+            background-size: 1.25rem;
+        }
+        .dark select {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+        }
+    </style>
+</head>
+<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen flex flex-col">
+<header class="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md shadow-sm">
+    <div class="container mx-auto px-4 py-3">
+        <div class="flex justify-between items-center">
+            <a href="index.html" class="flex items-center space-x-2">
+                <img src="Images/kyber-logomark.png" alt="Kyber Logo" class="h-8 mr-2">
+                <span class="text-xl font-bold text-gray-800 dark:text-white font-heading">Kyber Sales Enablement</span>
+            </a>
+                <nav class="hidden md:flex space-x-8">
+                    <a href="value-mapper.html" class="nav-link py-2 px-1 text-slate-200 hover:text-primary transition-colors">Mapper</a>
+                    <a href="intel.html" class="nav-link py-2 px-1 text-slate-200 hover:text-primary transition-colors">Products</a>
+                    <a href="proof.html" class="nav-link py-2 px-1 text-slate-200 hover:text-primary transition-colors">Proof</a>
+                    <a href="scorecard.html" class="nav-link py-2 px-1 text-slate-200 hover:text-primary transition-colors">Scorecard</a>
+                    <a href="strategy.html" class="nav-link py-2 px-1 text-slate-200 hover:text-primary transition-colors">Method</a>
+                    <a href="academy.html" class="nav-link py-2 px-1 text-slate-200 hover:text-primary transition-colors">Academy</a>
+                </nav>
+            <div class="flex items-center space-x-4">
+                <button id="themeToggle" class="p-2 rounded-full text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700">
+                    <i data-feather="moon" class="hidden dark:block"></i>
+                    <i data-feather="sun" class="block dark:hidden"></i>
+                </button>
+                <button id="mobileMenuButton" class="md:hidden flex flex-col space-y-1.5 p-2 z-50 bg-primary rounded-lg">
+                    <span class="hamburger-line"></span>
+                    <span class="hamburger-line"></span>
+                    <span class="hamburger-line"></span>
+                </button>
+            </div>
+        </div>
+    </div>
+</header>
+<div id="mobileMenu" class="hidden fixed inset-0 z-40 bg-gray-900 bg-opacity-95 backdrop-blur-sm">
+    <div class="flex flex-col items-center justify-center h-full space-y-8">
+        <a href="index.html" class="nav-link text-3xl text-white">Home</a>
+        <a href="value-mapper.html" class="nav-link text-3xl text-white">Mapper</a>
+        <a href="intel.html" class="nav-link text-3xl text-white">Products</a>
+        <a href="proof.html" class="nav-link text-3xl text-white">Proof</a>
+        <a href="scorecard.html" class="nav-link text-3xl text-white">Scorecard</a>
+        <a href="strategy.html" class="nav-link text-3xl text-white">Method</a>
+        <a href="academy.html" class="nav-link text-3xl text-white">Academy</a>
+    </div>
+</div>
+<main class="flex-grow bg-gradient-to-br from-purple-600 to-indigo-700">
+    <div class="container mx-auto px-4 py-12">
+        <div class="bg-white dark:bg-gray-800 p-6 sm:p-8 rounded-2xl shadow-2xl mb-8">
+            <div class="text-center">
+                <h1 class="text-3xl sm:text-4xl font-heading font-extrabold text-gray-800 dark:text-white mb-3 leading-tight">Kyber Value Mapper</h1>
+                <div class="flex justify-center mb-6">
+                    <img src="Images/kyber-mapper.png" alt="Kyber Value Mapper Graphic" class="h-48 w-auto">
+                </div>
+            </div>
+            <div class="max-w-md mx-auto">
+                <select id="industry-selector" onchange="updateContent(true)" class="block w-full py-3 px-4 pr-10 border border-gray-300 dark:border-gray-600 rounded-xl text-base font-semibold text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-700 focus:ring-2 focus:ring-primary focus:outline-none transition duration-200 shadow-lg">
+                    <option value="placeholder" disabled selected class="text-gray-500">- Choose Industry to Map -</option>
+                    <option value="Robotics & Tele-Operation">Robotics & Tele-Operation</option>
+                    <option value="Cloud Gaming / Cloud Rendering">Cloud Gaming / Cloud Rendering</option>
+                    <option value="Live Auctions & eSports Betting">Live Auctions & eSports Betting</option>
+                    <option value="Healthcare / Tele-Surgery">Healthcare / Tele-Surgery (New)</option>
+                    <option value="Industrial IoT / Machine Vision">Industrial IoT / Machine Vision (New)</option>
+                    <option value="Remote Live Production (REMI)">Remote Live Production (REMI) (New)</option>
+                </select>
+            </div>
+        </div>
+        <div id="initial-message" class="text-center p-12 rounded-xl bg-white/80 dark:bg-gray-800/80 text-gray-600 dark:text-gray-300 border-2 border-dashed border-gray-400 dark:border-gray-600 backdrop-blur-sm">
+            <p class="text-lg font-medium">Please select an industry from the dropdown above to reveal targeted value mapping, discovery questions, and permission-based openers.</p>
+        </div>
+        <div id="dynamic-area" class="hidden space-y-8">
+            <h2 id="industry-title" class="text-3xl font-heading font-bold text-white text-center pt-4"></h2>
+            <div class="bg-white dark:bg-gray-800 p-6 sm:p-8 rounded-xl shadow-lg">
+                <h3 class="text-xl font-heading font-bold mb-6 text-gray-800 dark:text-white">Recommended Value Proposition & Suggested Product Focus</h3>
+                <div id="value-drivers" class="space-y-4 text-gray-700 dark:text-gray-300 text-base"></div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg">
+                    <h3 class="text-lg font-heading font-bold mb-4 text-gray-800 dark:text-white">Permission-Based Opener (PBO) / C-Level Hook</h3>
+                    <p id="pbo1" class="text-gray-800 dark:text-white font-medium text-base"></p>
+                </div>
+                <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg">
+                    <h3 class="text-lg font-heading font-bold mb-4 text-gray-800 dark:text-white">Discovery Question (DQ) / Technical Deep Dive</h3>
+                    <p id="dq1" class="text-gray-600 dark:text-gray-400 italic text-base"></p>
+                </div>
+            </div>
+            <div class="flex justify-center pt-4">
+                <button id="refresh-button" class="hidden items-center px-6 py-3 bg-white/20 hover:bg-white/30 rounded-lg text-white font-semibold transition flex space-x-2 shadow-lg">
+                    <i data-feather="refresh-cw" class="w-5 h-5"></i>
+                    <span>Cycle Inspiration</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</main>
+<footer class="bg-purple-800/80 dark:bg-purple-800/80 backdrop-blur-sm border-t border-gray-700">
+    <div class="container mx-auto px-4 py-8">
+        <div class="flex flex-col md:flex-row justify-between items-center">
+            <div class="mb-6 md:mb-0">
+                <p class="text-gray-600 dark:text-gray-300 mt-2 text-sm">
+                    Leveraging Kyber to Enable Real-Time Interaction
+                </p>
+            </div>
+        <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700 text-center text-sm text-gray-500 dark:text-gray-400">
+            <p>&copy; 2025 Kyber Technologies. Real-Time, All The Time.</p>
+        </div>
+    </div>
+</footer>
+<script>
+    // --- Mobile Menu Toggle ---
+    const mobileMenuButton = document.getElementById('mobileMenuButton');
+    const mobileMenu = document.getElementById('mobileMenu');
+    mobileMenuButton.addEventListener('click', () => {
+        mobileMenu.classList.toggle('hidden');
+        mobileMenuButton.classList.toggle('open');
+        document.body.classList.toggle('overflow-hidden');
+    });
+    // --- Theme Toggle ---
+    const themeToggle = document.getElementById('themeToggle');
+    const html = document.documentElement;
+    themeToggle.addEventListener('click', () => {
+        html.classList.toggle('dark');
+        localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
+        feather.replace();
+    });
+    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        html.classList.add('dark');
+    } else {
+        html.classList.remove('dark');
+    }
+    // --- Set Active Nav Link ---
+    const currentPage = window.location.pathname.split('/').pop() || 'index.html';
+    document.querySelectorAll('.nav-link').forEach(link => {
+        const linkHref = link.getAttribute('href');
+        if (linkHref === currentPage) {
+            link.classList.add('active');
+        } else {
+            link.classList.remove('active');
+        }
+    });
+    feather.replace();
+</script>
+<script>
+    // *** KYBER INDUSTRY DATA - Mapped from provided table ***
+    const INDUSTRY_DATA = {
+        "Robotics & Tele-Operation": {
+            valueDrivers: "Value Drivers: Kyber is essential for applications where ultra-low latency (<100ms) is critical for **precision, safety, and human control**. It enables reliable remote control of industrial robots, inspection drones (UAVs), and heavy machinery by minimizing jitter and ensuring deterministic control. Product Focus: Custom Kyber Stack (Encoder/Decoder/Player), Edge Compute Integration, Jitter Mitigation Protocol.",
+            questions: [
+                // Technical (DQ) paired with C-Level (PBO) - Cycle 1 (Original Index 1 & 1)
+                { pbo: "Would it be helpful to discuss the annual financial exposure or primary safety risk associated with unexpected jitter or lag in your current tele-operation system?", dq: "What is your absolute glass-to-glass latency budget for the remote operator's visual feedback and input response?" },
+                // Technical (DQ) paired with C-Level (PBO) - Cycle 2 (Original Index 2 & 2)
+                { pbo: "If you could own and adapt the full video/input stack (encoder to player) to meet specific national security or proprietary sensor needs, what would that unlock?", dq: "How do you currently handle network variability (jitter) to ensure deterministic control, and what is the cost of your current retransmission/error correction layer?" },
+                // Technical (DQ) paired with C-Level (PBO) - Cycle 3 (Original Index 3 & 3)
+                { pbo: "How much complexity and expense is tied up in deploying your current system to new geographic locations or edge compute nodes?", dq: "Are you currently streaming bidirectional input (gamepad, mouse, USB-over-IP) with the video, and what proprietary protocol is currently driving that?" }
+            ]
+        },
+        "Cloud Gaming / Cloud Rendering": {
+            valueDrivers: "Value Drivers: The core value is delivering a **seamless, highly interactive PC or console experience** streamed to any device. Kyber reduces the network/decoding stack latency to support native high refresh rates (120Hz/240Hz) essential for competitive gaming and high-end graphics work. Product Focus: Kyber Web Codec/WebTransport Client, GPU/CPU Agnostic Optimization, Input Reliability Module.",
+            questions: [
+                // Cycle 1
+                { pbo: "What is the correlation between average latency and customer churn or session abandonment in your interactive cloud service?", dq: "What is the maximum acceptable frame-time added by the network/decoding stack to a native 120Hz or 240Hz rendered stream?" },
+                // Cycle 2
+                { pbo: "If you could shift encoding/decoding optimization to an open, hardware-agnostic platform, what percentage savings could you realize in GPU/CPU rental costs?", dq: "Are you constrained by WebRTC's complexity or WebCodec's browser compatibility, and which codecs (AV1, HEVC) must you support on the client?" },
+                // Cycle 3
+                { pbo: "How long does it currently take your team to port your streaming solution to a new platform (e.g., an embedded smart TV or a new operating system)?", dq: "What is your failover mechanism for input streams during network loss, and is there an unacceptable delay on reconnecting the input channel?" }
+            ]
+        },
+        "Live Auctions & eSports Betting": {
+            valueDrivers: "Value Drivers: Kyber enables **real-time synchronization** of interactive data (bids, odds) with the video feed, requiring sub-300ms total latency. This eliminates missed monetization opportunities and ensures regulatory compliance for high-stakes, time-sensitive events. Product Focus: Kyber QUIC/WebTransport Protocol, Data Synchronization Layer, Custom Player SDK.",
+            questions: [
+                // Cycle 1
+                { pbo: "How many millions of euros in potential revenue are lost annually due to the latency window between the live event and the user's ability to place a bet or bid?", dq: "What is the current delay difference (skew) between the video feed and the interactive data stream (e.g., bid button, betting odds update)?" },
+                // Cycle 2
+                { pbo: "Does your current system provide the auditable, deterministic, and synchronized timestamping needed to satisfy fair-play regulations for high-stakes real-time events?", dq: "How much unnecessary bandwidth is consumed by using a high-latency (e.g., HLS) protocol to achieve scalability that Kyber could reduce with QUIC/WebTransport?" },
+                // Cycle 3
+                { pbo: "What specific new high-interaction product (e.g., live dealer experience, interactive trivia) could you launch if you could guarantee a true real-time experience?", dq: "What custom logic or interactive overlays are you struggling to perfectly sync within the player due to mandated player buffer depths?" }
+            ]
+        },
+        "Healthcare / Tele-Surgery": {
+            valueDrivers: "Value Drivers: Kyber provides the ultra-low latency (<100ms) and **diagnostic fidelity** required for life-critical applications like remote diagnostics, real-time consultation, and remote assistance in complex surgical procedures. **Security and interoperability** are non-negotiable. Product Focus: Kyber Secure Stream, End-to-End Encryption, Medical Imaging Interoperability Module.",
+            questions: [
+                // Cycle 1
+                { pbo: "What is the liability or insurance premium reduction achievable by migrating to an auditable, sub-100ms video stack for remote assistance in the operating room?", dq: "Beyond latency, what is your threshold for acceptable packet loss or video artifacts during a critical remote diagnostic feed?" },
+                // Cycle 2
+                { pbo: "What is the strategic value of securely providing expert surgical consultation or training to remote, low-bandwidth hospitals using an optimized open-source stack?", dq: "How complex is integrating your current real-time video stream with specialized medical imaging hardware (e.g., endoscopy cameras, MRI displays)?" },
+                // Cycle 3
+                { pbo: "How much time is wasted daily by doctors and specialists due to poor video quality, dropped connections, or laggy interactive interfaces?", dq: "Can your current streaming solution meet the necessary end-to-end encryption and metadata privacy standards required by health data regulations (e.g., GDPR, HIPAA)?" }
+            ]
+        },
+        "Industrial IoT / Machine Vision": {
+            valueDrivers: "Value Drivers: Enables **real-time AI inference and action control** on manufacturing lines and autonomous systems by ensuring the total round-trip latency (capture to command) is minimized. Kyber delivers higher operational efficiency and defect detection rates. Product Focus: Kyber Edge SDK, High-Efficiency Codecs (AV1/HEVC), Cloud/Edge Synchronization API.",
+            questions: [
+                // Cycle 1
+                { pbo: "If you could cut 50ms from your control loop latency, what percentage increase would you see in manufacturing throughput or defect detection rate?", dq: "What is the total round-trip time (camera capture $\rightarrow$ cloud/edge inference $\rightarrow$ action command) you must hit to maintain line speed or control stability?" },
+                // Cycle 2
+                { pbo: "Are you concerned about your reliance on a single vendor's proprietary stack for your critical Industrial IoT (IIoT) control plane, and what is the cost of switching?", dq: "How are you managing the synchronization of configuration and control messages between the edge device and the centralized cloud dashboard?" },
+                // Cycle 3
+                { pbo: "Given the open-source nature of Kyber, how valuable is it to your strategy to have a transparent, auditable control stack where proprietary algorithms can be secured?", dq: "Are you leveraging modern, high-efficiency codecs (like AV1 or HEVC) on your embedded hardware to minimize bandwidth costs on cellular/remote connections?" }
+            ]
+        },
+        "Remote Live Production (REMI)": {
+            valueDrivers: "Value Drivers: Kyber provides **high-quality, low-latency transport** of contribution feeds from a remote venue back to a centralized studio (REMI/At-Home Production). It is critical for reducing on-site crew costs while maintaining strict synchronization (genlock) and content quality. Product Focus: Kyber REMI Gateway, Genlock Synchronization Module, Bidirectional Comms API.",
+            questions: [
+                // Cycle 1
+                { pbo: "What is the potential cost savings from reducing the size of your on-site production crew and equipment by shifting more tasks to a remote hub via low-latency feed?", dq: "What is your minimum requirement for synchronization (genlock) between multiple remote camera feeds ingested into the central production switcher?" },
+                // Cycle 2
+                { pbo: "What is the maximum acceptable delay between the action occurring at the venue and the broadcast feed reaching your primary CDN ingest point?", dq: "Are you currently using SRT or NDI, and what specific limitations (jitter, complexity of NAT traversal, non-native web playback) are you encountering with that protocol?" },
+                // Cycle 3
+                { pbo: "How quickly can you spin up a new, professional-grade remote production feed for a sudden, high-profile event using your existing infrastructure?", dq: "How critical is it to have guaranteed, low-latency, bidirectional audio/video communication for the director and camera operators back to the remote site?" }
+            ]
+        }
+    };
+    // *** NEW SCRIPT LOGIC FOR CYCLING (Keep functionality) ***
+    // Global variable to track the current question
+    let currentQuestionIndex = 0;
+    const selector = document.getElementById('industry-selector');
+    const refreshButton = document.getElementById('refresh-button');
+    function cycleQuestions() {
+        const industry = selector.value;
+        if (!industry || industry === 'placeholder') return;
+        const data = INDUSTRY_DATA[industry];
+        if (!data.questions || data.questions.length === 0) return;
+        // Increment index and loop back to 0 if at the end
+        currentQuestionIndex = (currentQuestionIndex + 1) % data.questions.length;
+        const newPair = data.questions[currentQuestionIndex];
+        document.getElementById('pbo1').textContent = newPair.pbo;
+        document.getElementById('dq1').textContent = newPair.dq;
+    }
+    function updateContent(shouldScroll = false) {
+        const industry = selector.value;
+        const dynamicArea = document.getElementById('dynamic-area');
+        const initialMessage = document.getElementById('initial-message');
+        if (!industry || industry === 'placeholder') {
+            dynamicArea.classList.add('hidden');
+            initialMessage.classList.remove('hidden');
+            refreshButton.classList.add('hidden');
+            return;
+        }
+        const data = INDUSTRY_DATA[industry];
+        document.getElementById('industry-title').textContent = industry;
+        const valueDriversElement = document.getElementById('value-drivers');
+        // Format the Value Drivers and Product Focus
+        // Note: This regex relies on the exact formatting of the 'valueDrivers' string:
+        // "Value Drivers: [Content]. Product Focus: [Content]."
+        valueDriversElement.innerHTML = data.valueDrivers.replace(/Value Drivers: (.*?)\. Product Focus: (.*?)\./s,
+            `<p class="font-semibold text-lg mb-2 text-primary dark:text-blue-400">Value Drivers:</p>
+             <p class="mb-4">${'$1'}</p>
+             <p class="font-semibold text-lg mb-2 text-primary dark:text-blue-400">Product Focus:</p>
+             <p>${'$2'}</p>`);
+        // Reset index and load the *first* question for the new industry
+        currentQuestionIndex = 0;
+        if (data.questions && data.questions.length > 0) {
+            const firstPair = data.questions[0];
+            document.getElementById('pbo1').textContent = firstPair.pbo;
+            document.getElementById('dq1').textContent = firstPair.dq;
+            refreshButton.classList.remove('hidden'); // Show the button
+        } else {
+            // No questions for this industry
+            document.getElementById('pbo1').textContent = "No opener available for this industry.";
+            document.getElementById('dq1').textContent = "No discovery question available.";
+            refreshButton.classList.add('hidden'); // Hide the button
+        }
+        initialMessage.classList.add('hidden');
+        dynamicArea.classList.remove('hidden');
+        feather.replace(); // Refresh icons
+        if (shouldScroll) {
+             dynamicArea.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+    }
+    // Add the event listener for the button
+    refreshButton.addEventListener('click', cycleQuestions);
+    // Call updateContent on load in case a value is pre-selected (e.g., browser back button)
+    window.onload = () => updateContent(false);
+</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,85 @@

+// Smooth scroll for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        document.querySelector(this.getAttribute('href')).scrollIntoView({
+            behavior: 'smooth'
+        });
+    });
+});
+// Intersection Observer for scroll animations
+const observerOptions = {
+    threshold: 0.1
+};
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            entry.target.classList.add('fade-in');
+            observer.unobserve(entry.target);
+        }
+    });
+}, observerOptions);
+document.querySelectorAll('.animate-on-scroll').forEach(element => {
+    observer.observe(element);
+});
+// Form validation helper
+function validateForm(form) {
+    let isValid = true;
+    const inputs = form.querySelectorAll('input[required], select[required], textarea[required]');
+    inputs.forEach(input => {
+        if (!input.value.trim()) {
+            input.classList.add('border-red-500');
+            isValid = false;
+        } else {
+            input.classList.remove('border-red-500');
+        }
+    });
+    return isValid;
+}
+// Cookie consent banner
+function initCookieBanner() {
+    if (!localStorage.getItem('cookieConsent')) {
+        const banner = document.createElement('div');
+        banner.className = 'fixed bottom-0 left-0 right-0 bg-gray-800 text-white p-4 flex flex-col md:flex-row justify-between items-center z-50';
+        banner.innerHTML = `
+            <p class="mb-4 md:mb-0">We use cookies to enhance your experience. By continuing to browse, you agree to our use of cookies.</p>
+            <div class="flex space-x-4">
+                <button id="acceptCookies" class="px-4 py-2 bg-primary rounded-lg hover:bg-opacity-90 transition">Accept</button>
+                <button id="rejectCookies" class="px-4 py-2 border border-white rounded-lg hover:bg-white hover:text-gray-800 transition">Reject</button>
+            </div>
+        `;
+        document.body.appendChild(banner);
+        document.getElementById('acceptCookies').addEventListener('click', () => {
+            localStorage.setItem('cookieConsent', 'accepted');
+            banner.remove();
+        });
+        document.getElementById('rejectCookies').addEventListener('click', () => {
+            localStorage.setItem('cookieConsent', 'rejected');
+            banner.remove();
+        });
+    }
+}
+// Initialize cookie banner on DOM content loaded
+document.addEventListener('DOMContentLoaded', () => {
+    initCookieBanner();
+    // Initialize tooltips if any
+    if (window.tippy) {
+        tippy('[data-tippy-content]', {
+            theme: 'light-border',
+            placement: 'top',
+            animation: 'scale',
+            arrow: true
+        });
+    }
+});

style.css CHANGED Viewed

@@ -1,28 +1,56 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+/* Base styles */
 body {
+    font-family: 'Inter', sans-serif;
+    line-height: 1.6;
+}
+/* Custom animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
 }
+.fade-in {
+    animation: fadeIn 0.6s ease-out forwards;
 }
+/* Gradient text */
+.gradient-text {
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    background-image: linear-gradient(90deg, #6366f1, #8b5cf6);
 }
+/* Custom shadows */
+.custom-shadow {
+    box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.2),
+                0 10px 10px -5px rgba(99, 102, 241, 0.04);
 }
+/* Responsive tweaks */
+@media (max-width: 768px) {
+    .mobile-flex-col {
+        flex-direction: column;
+    }
+    .mobile-text-center {
+        text-align: center;
+    }
 }
+/* Smooth transitions */
+.transition-all {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+}
+/* Enhanced focus states */
+.focus-visible {
+    outline: 2px solid #6366f1;
+    outline-offset: 2px;
+}