Generate a modern web app landing + dashboard UI for an app called "PySQL Labs" — a Python + SQL interactive learning platform with hands-on labs and interview-style drills. Create a polished, developer-focused, slightly playful but professional design.

Top-level layout:
- Hero section (full-width): App name "PySQL Labs", short tagline "Hands-on Python & SQL labs with auto-grading and interview drills", primary CTA "Start Free Lab" and secondary CTA "Try Interview Mode".
- Prominent visual: split-screen mock (left: code editor with output; right: SQL results grid) or an animated device frame showing both editors.

Key UI modules on the landing page:
1. Feature grid with 4 cards:
- Interactive Python Lab (editor, run + tests)
- SQL Sandbox (seeded DB viewer, run query)
- Auto-grader & Feedback (instant scoring)
- Interview Simulator (timed mock interviews)
Each card: icon, short description, small CTA "Try sample".

2. How it works (3-step horizontal flow):
- Select a lab or problem
- Write and run code / query
- Get instant feedback & progress tracking

3. Example problems carousel (compact cards):
- Python: "Even or Odd" — filter list; "First Prime" — find first prime
- SQL: "Find employee" — select by name; "Merge two lists" — union/join sample
Each card shows difficulty, estimated time, and a one-line prompt.

4. Dashboard preview section:
- Left: progress summary (level, badges, streak)
- Middle: "Continue Lab" card with small code snippet preview and test status
- Right: "Interview Mode" card: timer and next question preview

5. SQL Lab mini UI component:
- Table browser (employees sample), SQL editor, Run button, results grid, "Reset DB" small button.

6. Python Lab mini UI component:
- Editor pane, console output pane, visible testcases list with pass/fail badges, Hints toggle.

7. Footer: links to Docs, Cheat-sheets, Contact, Privacy, and small copy: "For educational use only."

Design constraints & visual tone:
- Clean developer-friendly typography, monospaced for code snippets.
- Use a modern dashboard aesthetic: subtle gradients, card shadows, soft rounded corners.
- Action colors: a primary color for CTAs and a secondary accent for badges; keep palette professional (no neon).
- Micro-interactions: hover on cards, subtle run button animation, progress bar fills.
- Responsive: layout adapts to tablet and mobile (stacked sections).

Deliverables: produce a landing + logged-in dashboard layout with modular components described above, ready to iterate into a working app design. Provide clean spacing, clear CTA hierarchy, and distinct lab/editor visual treatments so the design reads as an interactive coding/SQL platform.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Pysql Playground Interactive Python Sql Labs
-emoji: 🐠
-colorFrom: red
+title: PySQL Playground - Interactive Python & SQL Labs 👨‍💻
+colorFrom: purple
 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/dashboard.js

@@ -0,0 +1,164 @@
+class CustomDashboard extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        .dashboard-container {
+          background: rgba(31, 41, 55, 0.7);
+          border-radius: 1.5rem;
+          padding: 2rem;
+          border: 1px solid rgba(55, 65, 81, 0.3);
+        }
+        .progress-bar {
+          height: 0.75rem;
+          border-radius: 9999px;
+          background: rgba(55, 65, 81, 0.5);
+          overflow: hidden;
+        }
+        .progress-fill {
+          height: 100%;
+          border-radius: 9999px;
+          background: linear-gradient(90deg, #22c55e, #d946ef);
+          transition: width 1s ease-in-out;
+        }
+        .badge {
+          display: inline-flex;
+          align-items: center;
+          padding: 0.25rem 0.75rem;
+          border-radius: 9999px;
+          font-size: 0.75rem;
+          font-weight: 600;
+        }
+        .interview-timer {
+          font-family: 'JetBrains Mono', monospace;
+          font-size: 1.875rem;
+          font-weight: bold;
+        }
+      </style>
+      <div class="dashboard-container">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Left: Progress Summary -->
+            <div class="space-y-6">
+              <div>
+                <h3 class="text-lg font-semibold mb-3">Your Progress</h3>
+                <div class="bg-gray-800/50 rounded-xl p-4">
+                  <div class="flex items-center justify-between mb-4">
+                <div>
+                  <div class="text-2xl font-bold">Level 12</div>
+                    <div class="text-gray-400">Python & SQL Expert</div>
+              </div>
+              <div class="space-y-4">
+                <div>
+                  <div class="flex justify-between text-sm mb-1">
+                    <span>Python Mastery</span>
+                    <span>85%</span>
+                </div>
+                <div class="progress-bar">
+                  <div class="progress-fill" style="width: 85%"></div>
+              </div>
+              <div>
+                <div class="flex justify-between text-sm mb-1">
+                    <span>SQL Skills</span>
+                    <span>78%</span>
+                </div>
+                <div class="progress-bar">
+                  <div class="progress-fill" style="width: 78%"></div>
+              </div>
+            </div>
+            <div class="mt-4">
+              <div class="flex space-x-3">
+                <div class="badge bg-primary/10 text-primary">
+                  <i data-feather="star" class="w-3 h-3 mr-2"></i>
+              3 Badges
+            </div>
+                <div class="badge bg-secondary/10 text-secondary">
+                  <i data-feather="flame" class="w-3 h-3 mr-2"></i>
+              Streak: 14 days
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Middle: Continue Lab -->
+      <div class="space-y-6">
+        <h3 class="text-lg font-semibold">Continue Learning</h3>
+        <div class="bg-gray-800/70 rounded-xl p-4 border border-gray-700">
+          <div class="flex items-center justify-between mb-3">
+              <span class="text-sm text-gray-400">Last active lab</span>
+          <div class="badge bg-green-500/10 text-green-500">
+          <i data-feather="play-circle" class="w-4 h-4 mr-2"></i>
+              Continue Lab
+            </div>
+          </div>
+          
+          <div class="space-y-4">
+            <div class="bg-gray-900 rounded-lg p-3 font-mono text-sm">
+              def find_first_prime(nums):
+                for num in nums:
+                  if is_prime(num):
+                    return num
+              return None
+            </div>
+            
+            <div class="flex items-center justify-between">
+              <div class="text-sm text-gray-300">Find First Prime</div>
+              <div class="flex items-center">
+                <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
+            <span class="text-sm">Tests: 4/5 passed</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right: Interview Mode -->
+      <div class="space-y-6">
+        <h3 class="text-lg font-semibold">Interview Mode</h3>
+        <div class="bg-gray-800/70 rounded-xl p-4 border border-gray-700">
+          <div class="interview-timer text-center mb-4" id="interview-timer">
+            30:00
+          </div>
+          
+          <div class="space-y-4">
+            <div>
+              <div class="text-sm text-gray-400 mb-2">Next Question</div>
+          
+          <div class="bg-gray-900 rounded-lg p-4">
+            <div class="font-mono text-sm mb-3">
+              # SQL: Find duplicate emails
+              # Time limit: 10 minutes
+            </div>
+            
+            <button class="w-full py-3 bg-gradient-to-r from-secondary to-secondary/80 hover:from-secondary/90 hover:to-secondary text-white font-semibold rounded-lg transition-all">
+              <i data-feather="zap" class="w-4 h-4 mr-2"></i>
+              Start Interview
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="mt-8 grid grid-cols-2 gap-4">
+      <div class="text-center p-4 bg-gray-800/50 rounded-xl">
+        <div class="text-3xl font-bold mb-2">142</div>
+          <div class="text-sm text-gray-400">Problems Solved</div>
+        </div>
+        <div class="text-center p-4 bg-gray-800/50 rounded-xl">
+          <div class="text-3xl font-bold mb-2">87%</div>
+          <div class="text-sm text-gray-400">Success Rate</div>
+      </div>
+    </div>
+      </div>
+    `;
+    
+    setTimeout(() => {
+      if (typeof feather !== 'undefined') {
+        feather.replace();
+      }
+    }, 100);
+  }
+}
+
+customElements.define('custom-dashboard', CustomDashboard);

components/feature-card.js

@@ -0,0 +1,103 @@
+class CustomFeatureCard extends HTMLElement {
+  constructor() {
+    super();
+    this.icon = this.getAttribute('icon') || 'code';
+    this.title = this.getAttribute('title') || 'Feature';
+    this.description = this.getAttribute('description') || 'Description';
+    this.ctaText = this.getAttribute('cta-text') || 'Try Now';
+    this.color = this.getAttribute('color') || 'primary';
+  }
+
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        .feature-card {
+          background: linear-gradient(145deg, rgba(31, 41, 55, 0.8), rgba(17, 24, 39, 0.8));
+          border: 1px solid rgba(55, 65, 81, 0.3);
+          border-radius: 1rem;
+          padding: 1.5rem;
+          transition: all 0.3s ease;
+          height: 100%;
+        }
+        .feature-card:hover {
+          transform: translateY(-5px);
+          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
+          border-color: rgba(34, 197, 94, 0.5);
+        }
+        .icon-container {
+          width: 3.5rem;
+          height: 3.5rem;
+          border-radius: 0.75rem;
+          display: flex;
+          align-items: center;
+            justify-content: center;
+            margin-bottom: 1rem;
+        }
+        .primary-icon {
+          background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
+        }
+        .secondary-icon {
+          background: linear-gradient(135deg, rgba(217, 70, 239, 0.15), rgba(217, 70, 239, 0.05));
+        }
+        .primary-text {
+          color: #22c55e;
+        }
+        .secondary-text {
+          color: #d946ef;
+        }
+        h3 {
+          font-size: 1.25rem;
+          font-weight: 600;
+          margin-bottom: 0.75rem;
+        }
+        p {
+          color: #d1d5db;
+          margin-bottom: 1rem;
+          line-height: 1.5;
+        }
+        .cta-button {
+          display: inline-flex;
+          align-items: center;
+          padding: 0.5rem 1rem;
+          border-radius: 0.5rem;
+          font-weight: 500;
+          transition: all 0.2s ease;
+        }
+        .primary-cta {
+          background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
+          color: #22c55e;
+        }
+        .secondary-cta {
+          background: linear-gradient(135deg, rgba(217, 70, 239, 0.15), rgba(217, 70, 239, 0.05));
+          color: #d946ef;
+        }
+        .cta-button:hover {
+          transform: translateX(3px);
+        }
+      </style>
+      <div class="feature-card fade-in hover-lift">
+        <div class="icon-container ${this.color === 'primary' ? 'primary-icon' : 'secondary-icon'}">
+        <i data-feather="${this.icon}" class="w-6 h-6 ${this.color === 'primary' ? 'primary-text' : 'secondary-text'}"></i>
+      </div>
+      <h3>${this.title}</h3>
+      <p>${this.description}</p>
+      <a href="#try-sample" class="cta-button ${this.color === 'primary' ? 'primary-cta' : 'secondary-cta'}">
+          <i data-feather="arrow-right" class="w-4 h-4 mr-2"></i>
+          ${this.ctaText}
+        </a>
+      </div>
+    `;
+    
+    setTimeout(() => {
+      if (typeof feather !== 'undefined') {
+        feather.replace();
+      }
+    }, 100);
+  }
+}
+
+customElements.define('custom-feature-card', CustomFeatureCard);

components/footer.js

@@ -0,0 +1,105 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        .footer-container {
+          background: rgba(17, 24, 39, 0.95);
+          border-top: 1px solid rgba(55, 65, 81, 0.3);
+        }
+        .footer-link {
+          color: #9ca3af;
+          transition: color 0.3s ease;
+        }
+        .footer-link:hover {
+          color: #22c55e;
+        }
+      </style>
+      <footer class="footer-container">
+        <div class="container mx-auto px-6 py-12">
+          <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <!-- Brand -->
+            <div>
+              <div class="flex items-center space-x-3 mb-4">
+                <div class="w-10 h-10 rounded-xl bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
+                <i data-feather="cpu" class="w-6 h-6 text-gray-900"></i>
+            </div>
+            <span class="text-xl font-bold">PySQL Labs</span>
+            </div>
+              <p class="text-gray-400 text-sm">
+                Interactive platform for mastering Python and SQL through hands-on labs and interview simulations.
+            </p>
+          </div>
+
+          <!-- Quick Links -->
+          <div>
+            <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
+            <ul class="space-y-3">
+              <li><a href="#docs" class="footer-link">Documentation</a></li>
+            <li><a href="#cheatsheets" class="footer-link">Cheat Sheets</a></li>
+              <li><a href="#api" class="footer-link">API Reference</a></li>
+            <li><a href="#tutorials" class="footer-link">Video Tutorials</a></li>
+            </ul>
+          </div>
+
+          <!-- Resources -->
+          <div>
+            <h4 class="text-lg font-semibold mb-4">Resources</h4>
+              <ul class="space-y-3">
+                <li><a href="#blog" class="footer-link">Developer Blog</a></li>
+            <li><a href="#community" class="footer-link">Community Forum</a></li>
+              <li><a href="#webinars" class="footer-link">Live Webinars</a></li>
+            <li><a href="#github" class="footer-link">GitHub Repo</a></li>
+            <li><a href="#roadmap" class="footer-link">Product Roadmap</a></li>
+            </ul>
+        </div>
+
+        <!-- Legal -->
+        <div>
+            <h4 class="text-lg font-semibold mb-4">Legal</h4>
+              <ul class="space-y-3">
+                <li><a href="#privacy" class="footer-link">Privacy Policy</a></li>
+            <li><a href="#terms" class="footer-link">Terms of Service</a></li>
+              <li><a href="#cookies" class="footer-link">Cookie Policy</a></li>
+              <li><a href="#security" class="footer-link">Security</a></li>
+            <li><a href="#contact" class="footer-link">Contact Us</a></li>
+            </ul>
+          </div>
+        </div>
+        
+        <div class="border-t border-gray-800 mt-8 pt-8">
+          <div class="flex flex-col md:flex-row justify-between items-center">
+            <div class="text-gray-500 text-sm mb-4 md:mb-0">
+              &copy; ${new Date().getFullYear()} PySQL Labs. For educational use only.
+          </div>
+          <div class="flex space-x-6">
+              <a href="#twitter" aria-label="Twitter">
+                <i data-feather="twitter" class="w-5 h-5 text-gray-400 hover:text-primary transition-colors">
+              </a>
+            <a href="#github" aria-label="GitHub">
+                <i data-feather="github" class="w-5 h-5 text-gray-400 hover:text-primary transition-colors">
+              </a>
+            <a href="#linkedin" aria-label="LinkedIn">
+                <i data-feather="linkedin" class="w-5 h-5 text-gray-400 hover:text-primary transition-colors">
+              </a>
+            <a href="#discord" aria-label="Discord">
+                <i data-feather="message-circle" class="w-5 h-5 text-gray-400 hover:text-primary transition-colors">
+              </a>
+            </div>
+          </div>
+        </div>
+      </footer>
+    `;
+    
+    setTimeout(() => {
+      if (typeof feather !== 'undefined') {
+        feather.replace();
+      }
+    }, 100);
+  }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,115 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          position: sticky;
+          top: 0;
+          z-index: 50;
+        }
+        .nav-container {
+          background: rgba(17, 24, 39, 0.95);
+          backdrop-filter: blur(10px);
+          border-bottom: 1px solid rgba(55, 65, 81, 0.3);
+        }
+        .nav-link {
+          position: relative;
+          transition: color 0.3s ease;
+        }
+        .nav-link:hover {
+          color: #22c55e;
+        }
+        .nav-link::after {
+          content: '';
+          position: absolute;
+          width: 0;
+          height: 2px;
+          bottom: -2px;
+          left: 0;
+          background: linear-gradient(90deg, #22c55e, #d946ef);
+          transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+          width: 100%;
+        }
+        @media (max-width: 768px) {
+          .mobile-menu {
+            animation: slideDown 0.3s ease-out;
+          }
+        }
+        @keyframes slideDown {
+          from {
+            opacity: 0;
+            transform: translateY(-10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      </style>
+      <nav class="nav-container">
+        <div class="container mx-auto px-6 py-4">
+          <div class="flex items-center justify-between">
+            <!-- Logo -->
+            <a href="/" class="flex items-center space-x-3">
+              <div class="w-8 h-8 rounded-lg bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
+              <i data-feather="cpu" class="w-5 h-5 text-gray-900"></i>
+            </div>
+            <span class="text-xl font-bold">PySQL Labs</span>
+          </a>
+
+          <!-- Desktop Menu -->
+          <div class="hidden md:flex items-center space-x-8">
+            <a href="#features" class="nav-link">Features</a>
+            <a href="#how-it-works" class="nav-link">How It Works</a>
+            <a href="#challenges" class="nav-link">Challenges</a>
+            <a href="#dashboard" class="nav-link">Dashboard</a>
+            <a href="#login" class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors">
+              Log In
+            </a>
+            <a href="#signup" class="px-4 py-2 bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary text-gray-900 font-semibold rounded-lg transition-all">
+              Sign Up Free
+            </a>
+            <button id="dark-mode-toggle" class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700">
+              <i data-feather="sun" class="w-5 h-5"></i>
+            </button>
+          </div>
+
+          <!-- Mobile Menu Button -->
+          <button data-menu-toggle class="md:hidden p-2 rounded-lg bg-gray-800 hover:bg-gray-700">
+              <i data-feather="menu" class="w-6 h-6"></i>
+          </button>
+        </div>
+
+        <!-- Mobile Menu -->
+        <div id="mobile-menu" class="hidden md:hidden px-6 pb-4">
+          <div class="flex flex-col space-y-4">
+            <a href="#features" class="nav-link py-2">Features</a>
+            <a href="#how-it-works" class="nav-link py-2">How It Works</a>
+            <a href="#challenges" class="nav-link py-2">Challenges</a>
+            <a href="#dashboard" class="nav-link py-2">Dashboard</a>
+            <div class="pt-4 border-t border-gray-700">
+              <a href="#login" class="block py-2">Log In</a>
+            <a href="#signup" class="block px-4 py-2 bg-gradient-to-r from-primary to-primary/80 text-gray-900 font-semibold rounded-lg">
+                Sign Up Free
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+    `;
+    
+    // Initialize Feather Icons in shadow DOM
+    setTimeout(() => {
+      if (typeof feather !== 'undefined') {
+        feather.replace();
+      }
+    }, 100);
+  }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

components/problem-card.js

@@ -0,0 +1,137 @@
+class CustomProblemCard extends HTMLElement {
+  constructor() {
+    super();
+    this.title = this.getAttribute('title') || 'Challenge';
+    this.language = this.getAttribute('language') || 'Python';
+    this.difficulty = this.getAttribute('difficulty') || 'Easy';
+    this.time = this.getAttribute('time') || '15 min';
+    this.description = this.getAttribute('description') || 'Description';
+    this.status = this.getAttribute('status') || 'free';
+  }
+
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        .problem-card {
+          background: rgba(31, 41, 55, 0.7);
+          border: 1px solid rgba(55, 65, 81, 0.3);
+          border-radius: 1rem;
+          padding: 1.5rem;
+          transition: all 0.3s ease;
+          height: 100%;
+          position: relative;
+          overflow: hidden;
+        }
+        .problem-card::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          height: 3px;
+          background: linear-gradient(90deg, #22c55e, #d946ef);
+          opacity: 0;
+          transition: opacity 0.3s ease;
+        }
+        .problem-card:hover::before {
+          opacity: 1;
+        }
+        .language-badge {
+          display: inline-block;
+          padding: 0.25rem 0.75rem;
+          border-radius: 9999px;
+          font-size: 0.75rem;
+          font-weight: 600;
+        }
+        .python-badge {
+          background: rgba(34, 197, 94, 0.15);
+          color: #22c55e;
+        }
+        .sql-badge {
+          background: rgba(217, 70, 239, 0.15);
+          color: #d946ef;
+        }
+        .difficulty-badge {
+          display: inline-flex;
+          align-items: center;
+          padding: 0.25rem 0.75rem;
+          border-radius: 9999px;
+          font-size: 0.75rem;
+          font-weight: 600;
+        }
+        .difficulty-easy {
+          background: rgba(34, 197, 94, 0.1);
+          border: 1px solid rgba(34, 197, 94, 0.3);
+          color: #22c55e;
+        }
+        .difficulty-medium {
+          background: rgba(245, 158, 11, 0.1);
+          border: 1px solid rgba(245, 158, 11, 0.3);
+          color: #f59e0b;
+        }
+        .status-ribbon {
+          position: absolute;
+          top: 0;
+          right: 0;
+          padding: 0.25rem 1rem;
+          font-size: 0.75rem;
+          font-weight: 600;
+          border-radius: 0.375rem 1rem 0.375rem 0.375rem;
+          font-size: 0.75rem;
+        }
+        .status-free {
+          background: rgba(34, 197, 94, 0.2);
+          color: #22c55e;
+        }
+        .status-premium {
+          background: rgba(217, 70, 239, 0.2);
+          color: #d946ef;
+        }
+        .hover-lift:hover {
+          transform: translateY(-3px);
+          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+        }
+      </style>
+      <div class="problem-card fade-in hover-lift">
+          ${this.status !== 'free' ? 
+            `<div class="status-ribbon ${this.status === 'premium' ? 'status-premium' : ''}">
+            ${this.status.toUpperCase()}
+          </div>` : ''}
+          
+          <div class="flex justify-between items-start mb-4">
+            <div class="language-badge ${this.language === 'Python' ? 'python-badge' : 'sql-badge'}">
+            ${this.language}
+          </div>
+        </div>
+        
+        <h3 class="text-xl font-bold mb-3">${this.title}</h3>
+        
+        <p class="text-gray-300 mb-6">${this.description}</p>
+        
+        <div class="flex justify-between items-center">
+          <div class="flex items-center">
+            <div class="difficulty-badge ${this.difficulty.toLowerCase() === 'easy' ? 'difficulty-easy' : 'difficulty-medium'}">
+              ${this.difficulty}
+            </div>
+            <div class="text-gray-400 text-sm flex items-center">
+              <i data-feather="clock" class="w-4 h-4 mr-1"></i>
+              ${this.time}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    
+    setTimeout(() => {
+      if (typeof feather !== 'undefined') {
+        feather.replace();
+      }
+    }, 100);
+  }
+}
+
+customElements.define('custom-problem-card', CustomProblemCard);

components/python-lab.js

@@ -0,0 +1,193 @@
+class CustomPythonLab extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        .python-lab {
+          background: rgba(31, 41, 55, 0.8);
+          border-radius: 1rem;
+          overflow: hidden;
+          border: 1px solid rgba(55, 65, 81, 0.5);
+        }
+        .editor-container {
+          background: #1a202c;
+          padding: 1.5rem;
+        }
+        .code-editor {
+          background: transparent;
+          color: #e2e8f0;
+          font-family: 'JetBrains Mono', monospace;
+          font-size: 0.875rem;
+          line-height: 1.5;
+        }
+        .console-output {
+          background: rgba(17, 24, 39, 0.9);
+          color: #e2e8f0;
+          font-family: 'JetBrains Mono', monospace;
+          font-size: 0.875rem;
+          line-height: 1.5;
+        }
+        .test-case {
+          padding: 0.75rem;
+          border-radius: 0.5rem;
+          margin-bottom: 0.5rem;
+        }
+        .test-pass {
+          color: #22c55e;
+          border: 1px solid rgba(34, 197, 94, 0.3);
+        }
+        .test-fail {
+          color: #ef4444;
+          border: 1px solid rgba(239, 68, 68, 0.3);
+        }
+        .hints-toggle {
+          background: rgba(217, 70, 239, 0.1);
+        }
+        .hint-content {
+          background: rgba(17, 24, 39, 0.9);
+        }
+        .badge-pass {
+          background: rgba(34, 197, 94, 0.1);
+          border: 1px solid rgba(34, 197, 94, 0.3);
+        }
+        .badge-fail {
+          background: rgba(239, 68, 68, 0.1);
+          color: #ef4444;
+          border: 1px solid rgba(239, 68, 68, 0.3);
+        }
+      </style>
+      <div class="python-lab">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6">
+            <!-- Left: Editor -->
+            <div class="lg:col-span-2">
+          <div class="editor-container rounded-xl mb-6">
+            <div class="flex items-center justify-between mb-4">
+              <div class="flex items-center">
+                <i data-feather="code" class="w-5 h-5 text-primary mr-3"></i>
+                <h3 class="text-lg font-semibold">Python Editor</h3>
+              </div>
+              <div class="flex space-x-2">
+                <div class="w-3 h-3 rounded-full bg-red-500"></div>
+              <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                <div class="w-3 h-3 rounded-full bg-green-500"></div>
+              </div>
+            </div>
+            
+            <div class="code-editor">
+              <pre id="python-editor">
+def find_first_prime(nums):
+    """Return the first prime number in a list."""
+    for num in nums:
+        if num < 2:
+            continue
+        is_prime = True
+        for i in range(2, int(num**0.5) + 1):
+            if num % i == 0:
+                is_prime = False
+                break
+        if is_prime:
+            return num
+    return None
+
+# Test cases
+print(find_first_prime([4, 6, 7, 8, 9, 10, 11])  # Should return 7
+print(find_first_prime([1, 2, 3, 4, 5])  # Should return 2
+print(find_first_prime([4, 6, 8, 10]))  # Should return None
+            </pre>
+            </div>
+          </div>
+          
+          <div class="flex space-x-4 mb-6">
+            <button id="run-btn" class="px-6 py-3 bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary text-gray-900 font-semibold rounded-lg transition-all">
+              <i data-feather="play" class="w-4 h-4 mr-2"></i>
+              Run Code
+            </button>
+            <button id="hints-toggle" class="px-6 py-3 bg-gray-800 hover:bg-gray-700 border border-gray-700 font-semibold rounded-lg transition-all">
+              <i data-feather="help-circle" class="w-4 h-4 mr-2"></i>
+              Show Hints
+            </button>
+          </div>
+        </div>
+
+        <!-- Right: Console & Tests -->
+        <div class="space-y-6">
+              <div class="console-output rounded-xl p-4">
+                <div class="text-sm font-medium mb-2">Console Output</div>
+                <div id="python-output" class="font-mono text-sm">
+              Click "Run Code" to see output...
+          </div>
+        </div>
+        
+        <div class="hints-toggle rounded-xl p-4 hidden">
+          <div class="text-sm font-medium mb-2">Hints</div>
+              <div class="hint-content p-3 rounded-lg">
+              <ul class="space-y-2 text-sm">
+                <li class="flex items-center">
+                  <i data-feather="info" class="w-4 h-4 mr-2 text-primary"></i>
+              Remember that 0 and 1 are not prime numbers.</li>
+                <li class="flex items-center">
+                  <i data-feather="info" class="w-4 h-4 mr-2 text-primary"></i>
+                  The Sieve of Eratosthenes is efficient for finding primes in a range.</li>
+              <li class="flex items-center">
+                <i data-feather="info" class="w-4 h-4 mr-2 text-primary"></i>
+                  Try breaking the problem into smaller functions.</li>
+            </ul>
+          </div>
+        </div>
+        
+        <div class="test-cases space-y-3">
+          <div class="text-sm font-medium">Test Cases</div>
+          
+          <div class="test-case test-pass flex items-center justify-between">
+            <span>First prime in [4, 6, 7, 8, 9, 10, 11]</div>
+          <div class="badge-pass px-3 py-1 rounded-full text-xs">
+            PASS
+          </div>
+        </div>
+        
+        <div class="test-case test-pass flex items-center justify-between">
+            <span>First prime in [1, 2, 3, 4, 5]</div>
+            <div class="badge-pass px-3 py-1 rounded-full text-xs">
+              PASS
+            </div>
+          </div>
+          
+          <div class="test-case test-pass flex items-center justify-between">
+              <span>Handles empty list</span>
+          <div class="badge-pass px-3 py-1 rounded-full text-xs">
+                PASS
+              </div>
+            </div>
+            
+            <div class="test-case test-fail flex items-center justify-between">
+            <span>First prime in large list</span>
+            <div class="badge-fail px-3 py-1 rounded-full text-xs">
+              FAIL
+            </div>
+          </div>
+          
+          <div class="test-case test-pass flex items-center justify-between">
+              <span>Returns None if no prime</span>
+              <div class="badge-pass px-3 py-1 rounded-full text-xs">
+                PASS
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+      </div>
+    `;
+    
+    setTimeout(() => {
+      if (typeof feather !== 'undefined') {
+        feather.replace();
+      }
+    }, 100);
+  }
+}
+
+customElements.define('custom-python-lab', CustomPythonLab);

components/sql-lab.js

@@ -0,0 +1,158 @@
+class CustomSqlLab extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        .sql-lab {
+          background: rgba(31, 41, 55, 0.8);
+          border-radius: 1rem;
+          overflow: hidden;
+          border: 1px solid rgba(55, 65, 81, 0.5);
+        }
+        .table-browser {
+          background: rgba(17, 24, 39, 0.9);
+          padding: 1.5rem;
+        }
+        .sql-editor {
+          background: #1a202c;
+          border-radius: 0.5rem;
+          padding: 1rem;
+          font-family: 'JetBrains Mono', monospace;
+          font-size: 0.875rem;
+          line-height: 1.5;
+          color: #e2e8f0;
+        }
+        .run-button {
+          background: linear-gradient(135deg, #22c55e, #22c55e/80);
+          color: #111827;
+          font-weight: 600;
+          padding: 0.75rem 1.5rem;
+          border-radius: 0.5rem;
+          transition: all 0.3s ease;
+        }
+        .run-button:hover {
+          transform: scale(1.05);
+          box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.4);
+        }
+        .results-grid {
+          background: rgba(17, 24, 39, 0.9);
+        }
+        .reset-button {
+          background: rgba(239, 68, 68, 0.1);
+          color: #ef4444;
+          border: 1px solid rgba(239, 68, 68, 0.3);
+          padding: 0.5rem 1rem;
+          border-radius: 0.375rem;
+          font-size: 0.75rem;
+          font-weight: 600;
+        }
+        .table-row:hover {
+          background: rgba(55, 65, 81, 0.3);
+        }
+      </style>
+      <div class="sql-lab">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6">
+            <!-- Left: Table Browser -->
+            <div class="table-browser rounded-xl">
+              <div class="flex items-center mb-4">
+                <i data-feather="database" class="w-5 h-5 text-secondary mr-3"></i>
+                <h3 class="text-lg font-semibold">Employees Database</h3>
+              </div>
+              
+              <div class="overflow-x-auto">
+                <table class="w-full text-sm">
+                  <thead>
+                    <tr class="border-b border-gray-700">
+                      <th class="pb-3 text-left">Table</th>
+                      <th class="pb-3 text-left">Rows</th>
+                      <th class="pb-3 text-left">Preview</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr class="table-row border-b border-gray-800">
+                    <td class="py-3 font-medium">employees</td>
+                    <td class="py-3">500</td>
+                    <td class="py-3">
+                      <button class="view-table-btn p-1 rounded hover:bg-gray-800">
+                        <i data-feather="eye" class="w-4 h-4 text-gray-400"></i>
+                    </td>
+                  </tr>
+                  <tr class="table-row border-b border-gray-800">
+                      <td class="py-3 font-medium">departments</td>
+                      <td class="py-3">10</td>
+                    <td class="py-3">
+                      <button class="view-table-btn p-1 rounded hover:bg-gray-800">
+                        <i data-feather="eye" class="w-4 h-4 text-gray-400"></i>
+                    </td>
+                  </tr>
+                  <tr class="table-row">
+                      <td class="py-3 font-medium">salaries</td>
+                      <td class="py-3">500</td>
+                    <td class="py-3">
+                      <button class="view-table-btn p-1 rounded hover:bg-gray-800">
+                        <i data-feather="eye" class="w-4 h-4 text-gray-400"></i>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+
+        <!-- Middle: SQL Editor -->
+        <div class="space-y-6">
+              <div class="sql-editor">
+                SELECT id, name, department<br>
+                FROM employees<br>
+                WHERE department = 'Engineering'<br>
+                ORDER BY name ASC<br>
+                LIMIT 10;
+            </div>
+            
+            <div class="flex space-x-4">
+              <button id="sql-run-btn" class="run-button flex items-center">
+                <i data-feather="play" class="w-4 h-4 mr-2"></i>
+              Run Query
+            </button>
+            <button class="reset-button flex items-center text-sm">
+              <i data-feather="refresh-cw" class="w-4 h-4 mr-2"></i>
+              Reset DB
+            </button>
+          </div>
+        </div>
+
+        <!-- Right: Results Grid -->
+        <div class="results-grid rounded-xl p-4">
+          <div class="flex items-center justify-between mb-4">
+            <div class="text-gray-300">Query Results</div>
+              <div class="text-xs text-gray-400">Click "Run Query" to see results</div>
+          </div>
+          
+          <div id="sql-results" class="text-gray-400 text-sm">
+            Results will appear here...
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="p-6 bg-gray-900/50 border-t border-gray-800">
+          <div class="text-sm text-gray-300 mb-2">Sample Query:</div>
+          <div class="font-mono text-xs text-gray-400">
+          -- Find all employees in Engineering department
+        </div>
+      </div>
+    </div>
+    `;
+    
+    setTimeout(() => {
+      if (typeof feather !== 'undefined') {
+        feather.replace();
+      }
+    }, 100);
+  }
+}
+
+customElements.define('custom-sql-lab', CustomSqlLab);

components/step.js

@@ -0,0 +1,75 @@
+class CustomStep extends HTMLElement {
+  constructor() {
+    super();
+    this.number = this.getAttribute('number') || '1';
+    this.icon = this.getAttribute('icon') || 'check';
+    this.title = this.getAttribute('title') || 'Step';
+    this.description = this.getAttribute('description') || 'Description';
+    this.delay = this.getAttribute('delay') || '0';
+  }
+
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          animation-delay: ${this.delay}ms;
+        }
+        .step-card {
+          text-align: center;
+          padding: 1.5rem;
+          opacity: 0;
+          animation: fadeIn 0.5s ease-out ${this.delay}ms forwards;
+        }
+        @keyframes fadeIn {
+          to {
+            opacity: 1;
+          }
+        }
+        .step-number {
+          width: 4rem;
+          height: 4rem;
+          margin: 0 auto 1.5rem;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            font-size: 1.5rem;
+            background: linear-gradient(135deg, #22c55e, #d946ef);
+            color: white;
+            font-size: 1.875rem;
+        }
+        .step-icon {
+          width: 1.5rem;
+          height: 1.5rem;
+            color: white;
+        }
+        h3 {
+          font-size: 1.5rem;
+          font-weight: 600;
+          margin-bottom: 0.75rem;
+        }
+        p {
+          color: #9ca3af;
+        }
+      </style>
+      <div class="step-card">
+        <div class="step-number">
+          <i data-feather="${this.icon}" class="step-icon"></i>
+        </div>
+        <h3>${this.title}</h3>
+        <p>${this.description}</p>
+      </div>
+    `;
+    
+    setTimeout(() => {
+      if (typeof feather !== 'undefined') {
+        feather.replace();
+      }
+    }, 100);
+  }
+}
+
+customElements.define('custom-step', CustomStep);

index.html

@@ -1,19 +1,285 @@
-<!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="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PySQL Labs - Interactive Python & SQL Learning Platform</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <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 = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#22c55e', /* lime-500 */
+                        secondary: '#d946ef' /* fuchsia-500 */
+                    },
+                    fontFamily: {
+                        'mono': ['JetBrains Mono', 'Monaco', 'Courier New', 'monospace'],
+                        'sans': ['Inter', 'system-ui', 'sans-serif']
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100 font-sans min-h-screen">
+    <!-- Navigation -->
+    <custom-navbar></custom-navbar>
+
+    <!-- Hero Section -->
+    <section class="relative overflow-hidden">
+        <div class="absolute inset-0 bg-gradient-to-br from-gray-800 via-gray-900 to-black"></div>
+        <div class="relative container mx-auto px-6 py-20 md:py-32">
+            <div class="flex flex-col lg:flex-row items-center justify-between gap-12">
+                <div class="lg:w-1/2">
+                    <div class="mb-6 inline-flex items-center px-4 py-2 rounded-full bg-gradient-to-r from-primary/20 to-secondary/20 border border-primary/30">
+                        <i data-feather="zap" class="w-4 h-4 text-primary mr-2"></i>
+                        <span class="text-sm font-medium">Interactive Learning Platform</span>
+                    </div>
+                    <h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">
+                        PySQL <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">Labs</span>
+                    </h1>
+                    <p class="text-xl text-gray-300 mb-8 max-w-2xl">
+                        Hands-on Python & SQL labs with auto-grading and interview drills. Master data skills through interactive coding challenges and realistic interview simulations.
+                    </p>
+                    <div class="flex flex-col sm:flex-row gap-4">
+                        <a href="#dashboard" class="px-8 py-4 bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary text-gray-900 font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center">
+                            <i data-feather="play-circle" class="w-5 h-5 mr-2"></i>
+                            Start Free Lab
+                        </a>
+                        <a href="#interview-mode" class="px-8 py-4 bg-gray-800 hover:bg-gray-700 border border-gray-700 font-semibold rounded-lg transition-all duration-300 flex items-center justify-center">
+                            <i data-feather="clock" class="w-5 h-5 mr-2"></i>
+                            Try Interview Mode
+                        </a>
+                    </div>
+                </div>
+                <div class="lg:w-1/2 relative">
+                    <div class="relative bg-gray-800 rounded-2xl p-6 shadow-2xl border border-gray-700">
+                        <!-- Mock Editor Split Screen -->
+                        <div class="flex flex-col md:flex-row gap-4">
+                            <!-- Python Editor Mock -->
+                            <div class="md:w-1/2 bg-gray-900 rounded-xl p-4 border border-gray-700">
+                                <div class="flex items-center justify-between mb-3">
+                                    <div class="flex items-center">
+                                        <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
+                                        <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
+                                        <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                                    </div>
+                                    <span class="text-xs text-gray-400 font-mono">lab.py</span>
+                                </div>
+                                <div class="space-y-2">
+                                    <div class="h-4 bg-gray-800 rounded w-3/4"></div>
+                                    <div class="h-4 bg-gray-800 rounded w-full"></div>
+                                    <div class="h-4 bg-primary/30 rounded w-1/2"></div>
+                                    <div class="h-4 bg-gray-800 rounded w-5/6"></div>
+                                    <div class="h-4 bg-gray-800 rounded w-full"></div>
+                                </div>
+                                <div class="mt-4 p-2 bg-gray-800 rounded text-xs font-mono text-green-400">
+                                    > Tests passed: 3/5
+                                </div>
+                            </div>
+                            <!-- SQL Results Mock -->
+                            <div class="md:w-1/2 bg-gray-900 rounded-xl p-4 border border-gray-700">
+                                <div class="flex items-center justify-between mb-3">
+                                    <div class="flex items-center">
+                                        <i data-feather="database" class="w-4 h-4 text-secondary mr-2"></i>
+                                        <span class="text-xs text-gray-300">employees</span>
+                                    </div>
+                                    <span class="text-xs text-gray-400 font-mono">results.csv</span>
+                                </div>
+                                <div class="overflow-x-auto">
+                                    <table class="w-full text-xs">
+                                        <thead>
+                                            <tr class="border-b border-gray-700">
+                                                <th class="pb-2 text-left">id</th>
+                                                <th class="pb-2 text-left">name</th>
+                                                <th class="pb-2 text-left">dept</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr><td class="py-1">101</td><td class="py-1">Alice</td><td class="py-1">Engineering</td></tr>
+                                            <tr><td class="py-1">102</td><td class="py-1">Bob</td><td class="py-1">Sales</td></tr>
+                                            <tr><td class="py-1">103</td><td class="py-1">Charlie</td><td class="py-1">Marketing</td></tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="absolute -top-3 -right-3">
+                            <div class="bg-gradient-to-r from-primary to-secondary text-white text-xs font-bold px-3 py-1 rounded-full">
+                                LIVE PREVIEW
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Features Grid -->
+    <section class="py-20 bg-gray-800/50">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Everything You Need to Master Python & SQL</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <custom-feature-card 
+                    icon="code" 
+                    title="Interactive Python Lab" 
+                    description="Write, run, and test Python code with real-time feedback. Our environment supports all core Python libraries."
+                    cta-text="Try sample"
+                    color="primary">
+                </custom-feature-card>
+                <custom-feature-card 
+                    icon="database" 
+                    title="SQL Sandbox" 
+                    description="Practice SQL queries on realistic datasets. Includes schema browser, query history, and visual result sets."
+                    cta-text="Try sample"
+                    color="secondary">
+                </custom-feature-card>
+                <custom-feature-card 
+                    icon="check-circle" 
+                    title="Auto-grader & Feedback" 
+                    description="Get instant scoring on your solutions. Detailed feedback helps you understand edge cases and optimize your code."
+                    cta-text="Try sample"
+                    color="primary">
+                </custom-feature-card>
+                <custom-feature-card 
+                    icon="clock" 
+                    title="Interview Simulator" 
+                    description="Timed mock interviews with real FAANG-style questions. Track performance metrics and identify areas for improvement."
+                    cta-text="Try sample"
+                    color="secondary">
+                </custom-feature-card>
+            </div>
+        </div>
+    </section>
+
+    <!-- How It Works -->
+    <section class="py-20">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">How PySQL Labs Works</h2>
+            <div class="flex flex-col lg:flex-row items-center justify-between gap-8">
+                <custom-step 
+                    number="1" 
+                    icon="search" 
+                    title="Select a Lab" 
+                    description="Choose from hundreds of Python and SQL problems, categorized by difficulty and topic."
+                    delay="100">
+                </custom-step>
+                <div class="hidden lg:block">
+                    <div class="w-32 h-1 bg-gradient-to-r from-primary to-secondary rounded-full"></div>
+                </div>
+                <custom-step 
+                    number="2" 
+                    icon="edit" 
+                    title="Write & Run Code" 
+                    description="Use our integrated editor to write solutions. Run code instantly and see output in real-time."
+                    delay="200">
+                </custom-step>
+                <div class="hidden lg:block">
+                    <div class="w-32 h-1 bg-gradient-to-r from-primary to-secondary rounded-full"></div>
+                </div>
+                <custom-step 
+                    number="3" 
+                    icon="bar-chart-2" 
+                    title="Track Progress" 
+                    description="Monitor your learning journey with detailed analytics, badges, and streak tracking."
+                    delay="300">
+                </custom-step>
+            </div>
+        </div>
+    </section>
+
+    <!-- Example Problems Carousel -->
+    <section class="py-20 bg-gray-800/50">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Example Challenges</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <custom-problem-card 
+                    title="Even or Odd Filter" 
+                    language="Python" 
+                    difficulty="Easy" 
+                    time="15 min"
+                    description="Filter a list to keep only even numbers using list comprehension."
+                    status="free">
+                </custom-problem-card>
+                <custom-problem-card 
+                    title="First Prime Number" 
+                    language="Python" 
+                    difficulty="Medium" 
+                    time="25 min"
+                    description="Find the first prime number in a given list of integers."
+                    status="free">
+                </custom-problem-card>
+                <custom-problem-card 
+                    title="Employee Finder" 
+                    language="SQL" 
+                    difficulty="Easy" 
+                    time="10 min"
+                    description="Select employee details by name from the employees table."
+                    status="free">
+                </custom-problem-card>
+                <custom-problem-card 
+                    title="Department Join" 
+                    language="SQL" 
+                    difficulty="Medium" 
+                    time="20 min"
+                    description="Merge two tables using JOIN to show employee-department relationships."
+                    status="premium">
+                </custom-problem-card>
+            </div>
+        </div>
+    </section>
+
+    <!-- Dashboard Preview -->
+    <section id="dashboard" class="py-20">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Interactive Dashboard Preview</h2>
+            <custom-dashboard></custom-dashboard>
+        </div>
+    </section>
+
+    <!-- SQL Lab Mini UI -->
+    <section class="py-20 bg-gray-800/50">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Try Our SQL Sandbox</h2>
+            <custom-sql-lab></custom-sql-lab>
+        </div>
+    </section>
+
+    <!-- Python Lab Mini UI -->
+    <section class="py-20">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Python Lab Environment</h2>
+            <custom-python-lab></custom-python-lab>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <custom-footer></custom-footer>
+
+    <!-- Web Components Scripts -->
+    <script src="components/navbar.js"></script>
+    <script src="components/feature-card.js"></script>
+    <script src="components/step.js"></script>
+    <script src="components/problem-card.js"></script>
+    <script src="components/dashboard.js"></script>
+    <script src="components/sql-lab.js"></script>
+    <script src="components/python-lab.js"></script>
+    <script src="components/footer.js"></script>
+
+    <!-- Main 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,209 @@
+// PySQL Labs - Main JavaScript
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize Feather Icons
+    if (typeof feather !== 'undefined') {
+        feather.replace();
+    }
+
+    // Mobile Menu Toggle (for navbar component)
+    document.addEventListener('click', function(e) {
+        if (e.target.closest('[data-menu-toggle]')) {
+            const menu = document.getElementById('mobile-menu');
+            if (menu) {
+                menu.classList.toggle('hidden');
+            }
+    });
+
+    // Code Execution Simulation
+    function simulateCodeExecution(editorId, outputId) {
+        const runBtn = document.getElementById('run-btn');
+        const editor = document.getElementById(editorId);
+        const output = document.getElementById(outputId);
+
+        if (runBtn && editor && output) {
+            runBtn.addEventListener('click', function() {
+                // Show loading state
+                runBtn.innerHTML = '<i data-feather="loader" class="w-4 h-4 animate-spin mr-2"></i>Running...';
+                feather.replace();
+                
+                runBtn.disabled = true;
+                output.innerHTML = '<div class="text-gray-400 animate-pulse">Executing code...</div>';
+                
+                // Simulate API call delay
+                setTimeout(() => {
+                    // Simulated output
+                    output.innerHTML = `
+                        <div class="text-green-400 font-mono text-sm">
+                            > Code executed successfully!<br>
+                            > Tests passed: 4/4<br>
+                            > Execution time: 0.8s
+                        </div>`;
+                    
+                    // Reset button
+                    runBtn.innerHTML = '<i data-feather="play" class="w-4 h-4 mr-2"></i>Run Code';
+                    feather.replace();
+                    runBtn.disabled = false;
+                }, 1500);
+            }
+        }
+    }
+
+    // Carousel functionality for problem cards
+    function initProblemCarousel() {
+        const carousel = document.querySelector('.problems-carousel');
+        if (!carousel) return;
+
+        const cards = carousel.querySelectorAll('.problem-card');
+        let currentIndex = 0;
+
+        function showCard(index) {
+            cards.forEach((card, i) => {
+                card.classList.toggle('active', i === index);
+                card.classList.toggle('opacity-50', i !== index);
+        }
+
+        // Auto-rotate every 5 seconds
+        setInterval(() => {
+            currentIndex = (currentIndex + 1) % cards.length;
+            showCard(currentIndex);
+        }, 5000);
+
+        showCard(0);
+    }
+
+    // SQL Query Execution Simulation
+    function simulateSQLExecution() {
+        const sqlRunBtn = document.getElementById('sql-run-btn');
+        const sqlResults = document.getElementById('sql-results');
+
+        if (sqlRunBtn && sqlResults) {
+            sqlRunBtn.addEventListener('click', function() {
+                sqlRunBtn.innerHTML = '<i data-feather="loader" class="w-4 h-4 animate-spin mr-2"></i>Executing...';
+        feather.replace();
+                sqlRunBtn.disabled = true;
+                
+                setTimeout(() => {
+                    sqlResults.innerHTML = `
+                        <table class="w-full text-sm">
+                            <thead>
+                                <tr class="border-b border-gray-700">
+                                    <th class="py-2 text-left">id</th>
+                                    <th class="py-2 text-left">name</th>
+                                    <th class="py-2 text-left">department</th>
+                                    <th class="py-2 text-left">salary</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr class="border-b border-gray-800">
+                                    <td class="py-2">101</td>
+                                    <td class="py-2">Alice Chen</td>
+                                    <td class="py-2">Engineering</td>
+                                    <td class="py-2">$95,000</td>
+                                </tr>
+                                <tr class="border-b border-gray-800">
+                                    <td class="py-2">102</td>
+                                    <td class="py-2">Bob Johnson</td>
+                                    <td class="py-2">Sales</td>
+                                    <td class="py-2">$85,500</td>
+                                </tr>
+                                <tr>
+                                    <td class="py-2">103</td>
+                                    <td class="py-2">Charlie Brown</td>
+                                    <td class="py-2">Marketing</td>
+                                    <td class="py-2">$78,000</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        <div class="mt-3 text-xs text-gray-400">
+                            3 rows returned. Execution time: 0.2s
+                        </div>`;
+                    
+                    sqlRunBtn.innerHTML = '<i data-feather="play" class="w-4 h-4 mr-2"></i>Run Query';
+                    feather.replace();
+                    sqlRunBtn.disabled = false;
+                }, 1000);
+            });
+        }
+    }
+
+    // Interview Timer Simulation
+    function initInterviewTimer() {
+        const timerElement = document.getElementById('interview-timer');
+        if (!timerElement) return;
+
+        let timeLeft = 1800; // 30 minutes in seconds
+
+        function updateTimer() {
+            const minutes = Math.floor(timeLeft / 60);
+            const seconds = timeLeft % 60;
+            
+            timerElement.textContent = 
+                `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}';
+            
+            if (timeLeft > 0) {
+                timeLeft--;
+            }
+        }
+
+        // Update every second
+        setInterval(updateTimer, 1000);
+        updateTimer(); // Initial call
+    }
+
+    // Initialize all features
+    setTimeout(() => {
+        simulateCodeExecution('python-editor', 'python-output');
+        simulateSQLExecution();
+        initProblemCarousel();
+        initInterviewTimer();
+    }, 500);
+
+    // Dark mode toggle (if needed)
+    const darkModeToggle = document.getElementById('dark-mode-toggle');
+    if (darkModeToggle) {
+        darkModeToggle.addEventListener('click', function() {
+            document.documentElement.classList.toggle('dark');
+            const icon = this.querySelector('i');
+            if (document.documentElement.classList.contains('dark')) {
+                icon.setAttribute('data-feather', 'moon');
+            feather.replace();
+        }
+    }
+
+    // Add keyboard shortcuts for better UX
+    document.addEventListener('keydown', function(e) {
+        // Ctrl+Enter to run code (when editor is focused)
+        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+            const activeRunBtn = document.querySelector('#run-btn:not([disabled]), #sql-run-btn:not([disabled])');
+            if (activeRunBtn) {
+                e.preventDefault();
+                activeRunBtn.click();
+            }
+        }
+    });
+
+    // Tooltip initialization
+    const tooltipTriggers = document.querySelectorAll('[data-tooltip]');
+    tooltipTriggers.forEach(trigger => {
+        trigger.addEventListener('mouseenter', function() {
+            const tooltipText = this.getAttribute('data-tooltip');
+            if (tooltipText) {
+                const tooltip = document.createElement('div');
+                tooltip.className = 'absolute z-50 px-3 py-2 text-sm font-medium bg-gray-800 rounded-lg shadow-sm opacity-0 invisible transition-opacity duration-300';
+                tooltip.textContent = tooltipText;
+                this.appendChild(tooltip);
+                
+                // Show tooltip
+                setTimeout(() => {
+                    tooltip.classList.remove('opacity-0', 'invisible');
+                    tooltip.classList.add('opacity-100');
+                }, 100);
+                
+                this.addEventListener('mouseleave', function() {
+                    tooltip.remove();
+                }, { once: true });
+            }
+        });
+    });
+});

style.css

@@ -1,28 +1,130 @@
+/* PySQL Labs - Global Styles */
+:root {
+    --color-primary: #22c55e;
+    --color-secondary: #d946ef;
+    --color-dark: #111827;
+    --color-light: #f9fafb;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', system-ui, sans-serif;
+    background-color: #111827;
+    color: #f9fafb;
+    overflow-x: hidden;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: #1f2937;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-thumb {
+    background: #374151;
+    border-radius: 5px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb:hover {
+    background: #4b5563;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Code Editor Styling */
+.code-editor {
+    font-family: 'JetBrains Mono', Monaco, 'Courier New', monospace;
+    font-size: 14px;
+    line-height: 1.5;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Button Animations */
+.btn-pulse {
+    animation: pulse 2s infinite;
 }
+
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
+    }
+}
+
+/* Card Hover Effects */
+.hover-lift {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.hover-lift:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
+}
+
+/* Gradient Text */
+.gradient-text {
+    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+/* Progress Bar Animation */
+.progress-fill {
+    transition: width 0.5s ease-in-out;
+}
+
+/* Fade In Animation */
+.fade-in {
+    animation: fadeIn 0.5s ease-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Typewriter Effect */
+.typewriter {
+    overflow: hidden;
+    border-right: .15em solid var(--color-primary);
+    white-space: nowrap;
+    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
+}
+
+@keyframes typing {
+    from { width: 0 }
+    to { width: 100% }
+}
+
+@keyframes blink-caret {
+    from, to { border-color: transparent }
+    50% { border-color: var(--color-primary) }
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .stack-mobile {
+        flex-direction: column;
+    }
+    
+    .text-mobile-center {
+        text-align: center;
+    }
+}