From 03d620ea90dd56374f00e9bec0352223c482eb11 Mon Sep 17 00:00:00 2001
From: Guy Korland <gkorland@gmail.com>
Date: Thu, 21 Aug 2025 11:39:08 +0300
Subject: [PATCH 1/5] add landing page

---
 api/routes/auth.py         | 11 +++++++++
 app/public/css/landing.css | 45 ++++++++++++++++++++++++++++++++++
 app/templates/landing.j2   | 49 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 105 insertions(+)
 create mode 100644 app/public/css/landing.css
 create mode 100644 app/templates/landing.j2

diff --git a/api/routes/auth.py b/api/routes/auth.py
index d156c927..d6f483f5 100644
--- a/api/routes/auth.py
+++ b/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)
 
 
diff --git a/app/public/css/landing.css b/app/public/css/landing.css
new file mode 100644
index 00000000..a3a7ccaf
--- /dev/null
+++ b/app/public/css/landing.css
@@ -0,0 +1,45 @@
+.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);min-height:64px;white-space:pre-wrap;font-family:monospace;font-size:0.95rem}
+.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}
+.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}
+}
diff --git a/app/templates/landing.j2 b/app/templates/landing.j2
new file mode 100644
index 00000000..936f409f
--- /dev/null
+++ b/app/templates/landing.j2
@@ -0,0 +1,49 @@
+{% 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">
+        <a href="{{ url_for('auth.chat') }}" class="btn-full">Try another question</a>
+      </div>
+    </div>
+  </aside>
+
+</div>
+{% endblock %}

From 4c7df10c4c8a2193f68cd70aad5da35b99bcefd1 Mon Sep 17 00:00:00 2001
From: Guy Korland <gkorland@gmail.com>
Date: Thu, 21 Aug 2025 11:44:01 +0300
Subject: [PATCH 2/5] fix vercel build

---
 vercel.json | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/vercel.json b/vercel.json
index a01b6455..ae1edd74 100644
--- a/vercel.json
+++ b/vercel.json
@@ -2,6 +2,13 @@
   "rewrites": [
     { "source": "/(.*)", "destination": "/api/index.py" }
   ],
+  "builds": [
+    {
+      "src": "app/package.json",
+      "use": "@vercel/static-build",
+      "config": { "distDir": "app/public" }
+    }
+  ],
   "functions": {
     "api/index.py": {
       "maxDuration": 300

From c5c307be84bec9643feba0a26cf2e4741ab7691b Mon Sep 17 00:00:00 2001
From: Guy Korland <gkorland@gmail.com>
Date: Thu, 21 Aug 2025 11:53:28 +0300
Subject: [PATCH 3/5] fix the vercel

---
 vercel.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/vercel.json b/vercel.json
index ae1edd74..900813e4 100644
--- a/vercel.json
+++ b/vercel.json
@@ -7,11 +7,11 @@
       "src": "app/package.json",
       "use": "@vercel/static-build",
       "config": { "distDir": "app/public" }
+    },
+    {
+      "src": "api/index.py",
+      "use": "@vercel/python",
+      "config": { "maxDuration": 300 }
     }
-  ],
-  "functions": {
-    "api/index.py": {
-      "maxDuration": 300
-    }
-  }
+  ]
 }
\ No newline at end of file

From c477238102adb6b9a85dc16b6981f2e6398a935e Mon Sep 17 00:00:00 2001
From: Guy Korland <gkorland@gmail.com>
Date: Thu, 21 Aug 2025 11:57:32 +0300
Subject: [PATCH 4/5] fix the vercel

---
 vercel.json | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/vercel.json b/vercel.json
index 900813e4..8ebaea34 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,17 +1,24 @@
 {
   "rewrites": [
-    { "source": "/(.*)", "destination": "/api/index.py" }
+    {
+      "source": "/(.*)",
+      "destination": "/api/index.py"
+    }
   ],
   "builds": [
     {
       "src": "app/package.json",
       "use": "@vercel/static-build",
-      "config": { "distDir": "app/public" }
+      "config": {
+        "distDir": "public"
+      }
     },
     {
       "src": "api/index.py",
       "use": "@vercel/python",
-      "config": { "maxDuration": 300 }
+      "config": {
+        "maxDuration": 300
+      }
     }
   ]
 }
\ No newline at end of file

From 6fee86761ed9326140a4e540157fd4fbf1a4fcd7 Mon Sep 17 00:00:00 2001
From: Guy Korland <gkorland@gmail.com>
Date: Thu, 21 Aug 2025 12:56:43 +0300
Subject: [PATCH 5/5] add typing effect in landing

---
 .github/dependabot.yml     |  8 +++--
 app/public/css/landing.css | 20 +++++++++--
 app/templates/landing.j2   | 72 +++++++++++++++++++++++++++++++++++++-
 3 files changed, 95 insertions(+), 5 deletions(-)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 9d866e39..e0d6de17 100644
--- a/.github/dependabot.yml
+++ b/.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"
diff --git a/app/public/css/landing.css b/app/public/css/landing.css
index a3a7ccaf..58f252a3 100644
--- a/app/public/css/landing.css
+++ b/app/public/css/landing.css
@@ -34,8 +34,24 @@
 .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);min-height:64px;white-space:pre-wrap;font-family:monospace;font-size:0.95rem}
-.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}
+.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}
 
diff --git a/app/templates/landing.j2 b/app/templates/landing.j2
index 936f409f..1e2929f6 100644
--- a/app/templates/landing.j2
+++ b/app/templates/landing.j2
@@ -40,9 +40,79 @@ WHERE c.country = 'Germany'
       </pre>
 
       <div class="demo-cta">
-        <a href="{{ url_for('auth.chat') }}" class="btn-full">Try another question</a>
+        <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>