Staging

.github/dependabot.yml

@@ -5,7 +5,11 @@
 
 version: 2
 updates:
-  - package-ecosystem: "pip" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: "pip"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/app"
     schedule:
       interval: "weekly"

api/routes/auth.py

@@ -22,6 +22,17 @@ def home():
     if not is_authenticated and not google.authorized and not github.authorized:
         session.pop("user_info", None)
 
+    # If unauthenticated, show a simple landing page that invites sign-in or continuing as guest
+    if not is_authenticated:
+        return render_template("landing.j2", is_authenticated=False, user_info=None)
+
+    return render_template("chat.j2", is_authenticated=is_authenticated, user_info=user_info)
+
+
+@auth_bp.route('/chat')
+def chat():
+    """Explicit chat route (renders main chat UI)."""
+    user_info, is_authenticated = validate_and_cache_user()
     return render_template("chat.j2", is_authenticated=is_authenticated, user_info=user_info)
 
 

app/public/css/landing.css

@@ -0,0 +1,61 @@
+.landing-container{
+  max-width:1200px;
+  margin:3rem auto;
+  display:grid;
+  grid-template-columns:1fr 500px;
+  gap:2.5rem;
+  align-items:center;
+  padding:0 1rem;
+}
+
+.hero-left{padding:1rem 0}
+.hero-title{
+  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
+  font-weight:800;
+  font-size:4rem;
+  line-height:1.02;
+  margin:0 0 1rem 0;
+  color:var(--text-primary);
+}
+.hero-sub{
+  color:var(--text-secondary);
+  font-size:1.05rem;
+  max-width:44rem;
+  margin-bottom:1.5rem;
+}
+.hero-ctas{display:flex;gap:1rem;align-items:center}
+.btn-pill{display:inline-block;padding:0.9rem 1.25rem;border-radius:999px;background:var(--falkor-primary);color:#fff;text-decoration:none;box-shadow:0 8px 20px rgba(91,107,192,0.14);}
+.btn-ghost{background:transparent;color:var(--text-primary);text-decoration:none;padding:0.9rem 1.25rem}
+
+.demo-card{background:var(--falkor-secondary);border-radius:12px;box-shadow:0 16px 30px rgba(11,18,32,0.06);padding:1rem;border:1px solid var(--border-color)}
+
+/* Use a neutral themed surface for the inner area so it adapts to light/dark */
+.demo-inner{background:var(--bg-tertiary);border-radius:8px;padding:1rem;border:1px solid var(--falkor-border-tertiary)}
+.demo-label{font-size:0.9rem;color:var(--text-secondary);margin-bottom:0.5rem}
+
+/* Use the theme's secondary surface for the white/black boxes so text contrast is correct in both themes */
+.demo-question{background:var(--falkor-secondary);border-radius:6px;padding:0.75rem 1rem;border:1px solid var(--falkor-border-tertiary);color:var(--text-primary);height:120px;white-space:pre-wrap;font-family:monospace;font-size:0.95rem;overflow:auto;line-height:1.3}
+.demo-sql{background:var(--falkor-secondary);border-radius:6px;padding:0.75rem 1rem;border:1px solid var(--falkor-border-tertiary);color:var(--text-primary);margin-top:0.8rem;font-size:0.9rem;overflow:auto;height:200px;line-height:1.25}
+.demo-sql.typing{position:relative}
+.demo-sql.typing::after{
+  content: '';
+  display:inline-block;
+  width:10px;
+  height:1.1em;
+  background:var(--falkor-primary);
+  margin-left:6px;
+  vertical-align:bottom;
+  animation: blink-caret 1s steps(1) infinite;
+}
+
+@keyframes blink-caret{
+  0%, 50% { opacity: 1 }
+  51%, 100% { opacity: 0 }
+}
+.demo-cta{margin-top:1rem;text-align:center}
+.demo-cta .btn-full{display:inline-block;width:100%;padding:0.75rem;border-radius:8px;background:#e7f1ff;color:var(--falkor-primary);text-decoration:none}
+
+@media (max-width:900px){
+  .landing-container{grid-template-columns:1fr;gap:1.25rem}
+  .hero-title{font-size:2.4rem}
+}

app/templates/landing.j2

@@ -0,0 +1,119 @@
+{% extends "base.j2" %}
+
+{% block title %}QueryWeaver — Natural language to SQL{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/landing.css') }}">
+{% endblock %}
+
+{% block content %}
+<div class="landing-container">
+
+  <!-- Left hero -->
+  <section class="hero-left">
+    <h1 class="hero-title">Transform Plain<br/>English into Powerful<br/>SQL.</h1>
+    <p class="hero-sub">The intelligent AI solution that connects your business questions to data across multiple databases. Ask a question in plain English and get runnable SQL and visual results.</p>
+
+    <div class="hero-ctas">
+      <a href="{{ url_for('auth.chat') }}" class="btn-pill">Sign Up for Free</a>
+      <a href="{{ url_for('auth.login_google') }}" class="btn-ghost">Sign In</a>
+    </div>
+  </section>
+
+  <!-- Right demo card -->
+  <aside class="demo-card">
+    <div class="demo-inner">
+      <div class="demo-label">Your Business Question:</div>
+      <div class="demo-question">Which customers from Germany who bought 'Chai' also have an open support ticket in Salesforce?</div>
+
+      <div class="demo-label">Generated SQL:</div>
+      <pre class="demo-sql">
+SELECT c.companyName
+FROM customers c
+JOIN orders o ON c.customerID = o.customerID
+JOIN order_details od ON o.orderID = od.orderID
+JOIN products p ON od.productID = p.productID
+JOIN salesforce_tickets st ON c.customerID = st.customerID
+WHERE c.country = 'Germany'
+  AND p.productName = 'Chai'
+  AND st.status = 'Open';
+      </pre>
+
+      <div class="demo-cta">
+        <button id="demo-next" class="btn-full" type="button">Try another question</button>
+      </div>
+    </div>
+    <script>
+      (function(){
+        const examples = [
+          {
+            q: "Which customers from Germany who bought 'Chai' also have an open support ticket in Salesforce?",
+            sql: `SELECT c.companyName\nFROM customers c\nJOIN orders o ON c.customerID = o.customerID\nJOIN order_details od ON o.orderID = od.orderID\nJOIN products p ON od.productID = p.productID\nJOIN salesforce_tickets st ON c.customerID = st.customerID\nWHERE c.country = 'Germany'\n  AND p.productName = 'Chai'\n  AND st.status = 'Open';`
+          },
+          {
+            q: "Show me the top 5 customers by order count in London.",
+            sql: `SELECT c.companyName, COUNT(o.orderID) AS order_count\nFROM customers c\nJOIN orders o ON c.customerID = o.customerID\nWHERE c.city = 'London'\nGROUP BY c.companyName\nORDER BY order_count DESC\nLIMIT 5;`
+          },
+          {
+            q: "What is the quarterly revenue trend for the 'Beverages' category over the last two years?",
+            sql: `SELECT strftime('%Y-Q%q', o.orderDate) AS quarter,\n  SUM(od.unitPrice * od.quantity) AS total_revenue\nFROM orders o\nJOIN order_details od ON o.orderID = od.orderID\nJOIN products p ON od.productID = p.productID\nJOIN categories cat ON p.categoryID = cat.categoryID\nWHERE cat.categoryName = 'Beverages'\n  AND o.orderDate >= date('now', '-2 years')\nGROUP BY quarter\nORDER BY quarter;`
+          }
+        ];
+
+        let idx = 0;
+        const qEl = document.querySelector('.demo-question');
+        const sEl = document.querySelector('.demo-sql');
+        const btn = document.getElementById('demo-next');
+
+        let typingTimer = null;
+        const typingSpeed = 15; // ms per character
+
+        function renderFull(i){
+          const ex = examples[i % examples.length];
+          if(qEl) qEl.textContent = ex.q;
+          if(sEl) {
+            sEl.classList.remove('typing');
+            sEl.textContent = ex.sql;
+          }
+        }
+
+        function typeSql(text){
+          if(!sEl) return;
+          // stop any previous typing
+          if(typingTimer) {
+            clearInterval(typingTimer);
+            typingTimer = null;
+          }
+          sEl.classList.add('typing');
+          sEl.textContent = '';
+          let pos = 0;
+          typingTimer = setInterval(() => {
+            pos += 1;
+            sEl.textContent = text.slice(0, pos);
+            if(pos >= text.length){
+              clearInterval(typingTimer);
+              typingTimer = null;
+              sEl.classList.remove('typing');
+            }
+          }, typingSpeed);
+        }
+
+        if(btn){
+          btn.addEventListener('click', function(){
+            idx = (idx + 1) % examples.length;
+            const ex = examples[idx];
+            if(qEl) qEl.textContent = ex.q;
+            // animate SQL typing
+            typeSql(ex.sql);
+          });
+        }
+
+        // initial render: show full first example without typing
+        renderFull(0);
+      })();
+    </script>
+    </div>
+  </aside>
+
+</div>
+{% endblock %}

vercel.json

@@ -1,10 +1,24 @@
 {
   "rewrites": [
-    { "source": "/(.*)", "destination": "/api/index.py" }
+    {
+      "source": "/(.*)",
+      "destination": "/api/index.py"
+    }
   ],
-  "functions": {
-    "api/index.py": {
-      "maxDuration": 300
+  "builds": [
+    {
+      "src": "app/package.json",
+      "use": "@vercel/static-build",
+      "config": {
+        "distDir": "public"
+      }
+    },
+    {
+      "src": "api/index.py",
+      "use": "@vercel/python",
+      "config": {
+        "maxDuration": 300
+      }
     }
-  }
+  ]
 }