Spaces:

Bhishaj
/

MerchFlow-AI

Sleeping

App Files Files Community

Bhishaj commited on Mar 16

Commit

3bf6f3c

1 Parent(s): f4ae8bb

Update dashboard and main files, add landing page

Browse files

Files changed (3) hide show

dashboard.html +5 -0
landingpage.html +426 -0
main.py +16 -7

dashboard.html CHANGED Viewed

@@ -147,6 +147,10 @@
 </div>
 </div>
 </div>
 <button class="group relative flex-none flex cursor-pointer items-center justify-center overflow-hidden rounded-full h-9 lg:h-10 px-4 lg:px-6 bg-gradient-to-r from-amber-600 to-amber-800 hover:from-amber-500 hover:to-amber-700 border border-white/10 shadow-[0_0_15px_rgba(245,158,11,0.3)] transition-all" id="deployBtn">
 <div class="absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity"></div>
 <span class="material-symbols-outlined lg:mr-2 text-lg relative z-10">rocket_launch</span>
@@ -390,3 +394,4 @@ copyBtn.addEventListener('click', () => {
 </script>
 </body>
 </html>

 </div>
 </div>
 </div>
+<a class="hidden sm:inline-flex flex-none items-center justify-center rounded-full h-9 lg:h-10 px-4 lg:px-5 bg-white/5 hover:bg-white/10 border border-white/10 text-white text-xs lg:text-sm font-bold transition-all" href="/">
+<span class="material-symbols-outlined text-lg lg:mr-2">arrow_back</span>
+<span class="hidden lg:inline">Back to Home</span>
+</a>
 <button class="group relative flex-none flex cursor-pointer items-center justify-center overflow-hidden rounded-full h-9 lg:h-10 px-4 lg:px-6 bg-gradient-to-r from-amber-600 to-amber-800 hover:from-amber-500 hover:to-amber-700 border border-white/10 shadow-[0_0_15px_rgba(245,158,11,0.3)] transition-all" id="deployBtn">
 <div class="absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity"></div>
 <span class="material-symbols-outlined lg:mr-2 text-lg relative z-10">rocket_launch</span>
 </script>
 </body>
 </html>

landingpage.html ADDED Viewed

	@@ -0,0 +1,426 @@

+<!DOCTYPE html>
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>MerchFlow AI | Autonomous E-Commerce Catalog Intelligence</title>
+<!-- BEGIN: External Resources -->
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com" rel="preconnect"/>
+<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
+<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<!-- END: External Resources -->
+<!-- BEGIN: Tailwind Configuration -->
+<script id="tailwind-config">
+    tailwind.config = {
+      darkMode: "class",
+      theme: {
+        extend: {
+          colors: {
+            "primary": "#fbbf24", // Amber-400
+            "primary-dark": "#d97706", // Amber-600
+            "charcoal": "#0a0a0a",
+            "glass-white": "rgba(255, 255, 255, 0.08)",
+            "glass-amber": "rgba(251, 191, 36, 0.05)",
+          },
+          fontFamily: {
+            "sans": ["Plus Jakarta Sans", "sans-serif"],
+          },
+          animation: {
+            'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+            'shine': 'shine 2s infinite',
+            'float': 'float 6s ease-in-out infinite',
+          },
+          keyframes: {
+            shine: {
+              '0%': { transform: 'translateX(-100%)' },
+              '100%': { transform: 'translateX(100%)' }
+            },
+            float: {
+              '0%, 100%': { transform: 'translateY(0)' },
+              '50%': { transform: 'translateY(-20px)' }
+            }
+          }
+        },
+      },
+    }
+  </script>
+<!-- END: Tailwind Configuration -->
+<!-- BEGIN: Custom Styles -->
+<style data-purpose="layout-and-glassmorphism">
+    body {
+      background-color: #0a0a0a;
+      background-image:
+        radial-gradient(circle at 20% 30%, rgba(217, 119, 6, 0.08) 0%, transparent 40%),
+        radial-gradient(circle at 80% 70%, rgba(251, 191, 36, 0.05) 0%, transparent 40%);
+    }
+    .glass-panel {
+      background: rgba(255, 255, 255, 0.03);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+    }
+    .glass-card-hover:hover {
+      background: rgba(251, 191, 36, 0.05);
+      border-color: rgba(251, 191, 36, 0.3);
+      transform: translateY(-4px);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .text-glow {
+      text-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
+    }
+    .custom-scrollbar::-webkit-scrollbar {
+      width: 6px;
+    }
+    .custom-scrollbar::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .custom-scrollbar::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 10px;
+    }
+    /* Scroll Reveal Animation Styles */
+    .reveal-card {
+      opacity: 0;
+      transform: translateY(30px);
+      transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
+      will-change: transform, opacity;
+    }
+    .reveal-card.is-visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  </style>
+<!-- END: Custom Styles -->
+</head>
+<body class="text-slate-200 antialiased font-sans">
+<!-- BEGIN: NavHeader -->
+<header class="fixed top-0 w-full z-50 px-6 py-4 flex items-center justify-between glass-panel border-t-0 border-x-0">
+<div class="flex items-center gap-3">
+<div class="flex items-center justify-center size-10 rounded-lg bg-gradient-to-br from-primary to-primary-dark text-charcoal">
+<span class="material-symbols-outlined font-bold">all_inclusive</span>
+</div>
+<div>
+<h1 class="text-white font-extrabold text-lg leading-none">MerchFlow AI</h1>
+<p class="text-[10px] text-primary uppercase tracking-[0.2em] font-semibold">Enterprise Edition</p>
+</div>
+</div>
+<nav class="hidden md:flex items-center gap-8">
+<a class="text-sm font-medium hover:text-primary transition-colors" href="#features">Features</a>
+<a class="text-sm font-medium hover:text-primary transition-colors" href="#architecture">Architecture</a>
+<a class="text-sm font-medium hover:text-primary transition-colors" href="#tech-stack">Tech Stack</a>
+<a class="text-sm font-medium hover:text-primary transition-colors" href="#legal">Legal</a>
+</nav>
+<div class="flex items-center gap-4">
+<button class="px-5 py-2.5 rounded-full text-sm font-bold bg-white/5 hover:bg-white/10 border border-white/10 transition-all">
+        Sign In
+      </button>
+</div>
+</header>
+<!-- END: NavHeader -->
+<main class="pt-24">
+<!-- BEGIN: Hero Section -->
+<section class="relative min-h-[90vh] flex items-center px-6 lg:px-24 overflow-hidden" id="hero">
+<div class="grid lg:grid-cols-2 gap-12 items-center w-full">
+<div class="z-10">
+<span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-widest mb-6">
+<span class="relative flex h-2 w-2">
+<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+<span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+</span>
+            Now in Private Beta
+          </span>
+<h2 class="text-5xl lg:text-7xl font-extrabold text-white leading-[1.1] mb-6 tracking-tight">
+            Autonomous <br/>
+<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-primary-dark">E-Commerce</span> <br/>
+            Intelligence
+          </h2>
+<p class="text-lg text-slate-400 mb-10 max-w-xl leading-relaxed">
+            A multi-agent AI pipeline that converts raw product imagery into enterprise-grade, SEO-optimized e-commerce catalogs in seconds.
+          </p>
+<div class="flex flex-wrap gap-4">
+<a class="flex items-center gap-3 px-8 py-4 bg-primary hover:bg-primary-dark text-charcoal rounded-xl font-bold transition-all transform hover:scale-105 shadow-[0_0_30px_rgba(251,191,36,0.2)]" href="/dashboard">
+<span class="material-symbols-outlined">rocket_launch</span>
+              Enter Dashboard
+            </a>
+<button class="flex items-center gap-3 px-8 py-4 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl font-bold transition-all">
+              Watch Demo
+            </button>
+</div>
+</div>
+<!-- Visual: Floating Glassmorphic Product Conversion -->
+<div class="relative flex justify-center items-center">
+<div class="absolute w-[120%] h-[120%] bg-primary/5 rounded-full blur-[100px] -z-10"></div>
+<div class="relative animate-float">
+<!-- Glass Mockup for Conversion -->
+<div class="w-72 h-96 glass-panel rounded-[2rem] p-6 shadow-2xl relative">
+<div class="w-full h-48 rounded-2xl bg-white/5 border border-white/10 overflow-hidden mb-4 flex items-center justify-center">
+<span class="material-symbols-outlined text-6xl text-white/20">image</span>
+</div>
+<div class="space-y-3">
+<div class="h-4 w-3/4 bg-white/10 rounded"></div>
+<div class="h-4 w-1/2 bg-white/10 rounded"></div>
+<div class="pt-4 grid grid-cols-3 gap-2">
+<div class="h-8 rounded bg-primary/20 border border-primary/30"></div>
+<div class="h-8 rounded bg-white/5 border border-white/10"></div>
+<div class="h-8 rounded bg-white/5 border border-white/10"></div>
+</div>
+</div>
+<!-- JSON Output Popover -->
+<div class="absolute -right-12 -bottom-10 w-64 glass-panel rounded-2xl p-4 border-primary/30 shadow-2xl scale-90 lg:scale-100">
+<div class="flex items-center gap-2 mb-2">
+<div class="size-2 rounded-full bg-green-500"></div>
+<span class="text-[10px] font-mono text-slate-400">output.json</span>
+</div>
+<pre class="text-[10px] font-mono text-primary/80"><code>{
+  "sku": "MF-9902",
+  "name": "AeroShell X",
+  "tags": ["SEO", "Hiker"]
+}</code></pre>
+</div>
+</div>
+</div>
+</div>
+</div>
+</section>
+<!-- END: Hero Section -->
+<!-- BEGIN: Core Value Prop -->
+<section class="py-24 px-6 lg:px-24" id="features">
+<div class="max-w-4xl mx-auto text-center mb-16">
+<h3 class="text-3xl lg:text-5xl font-bold text-white mb-6">Zero Manual Bottlenecks</h3>
+<p class="text-slate-400 text-lg">Shift from human-in-the-loop to autonomous excellence. Our pipeline ensures your inventory is ready for global distribution instantly.</p>
+</div>
+<div class="grid md:grid-cols-3 gap-8">
+<div class="p-8 rounded-3xl glass-panel glass-card-hover text-center">
+<div class="size-14 mx-auto mb-6 rounded-2xl bg-primary/10 flex items-center justify-center">
+<span class="material-symbols-outlined text-primary text-3xl">bolt</span>
+</div>
+<h4 class="text-xl font-bold text-white mb-3">Instant Delivery</h4>
+<p class="text-slate-400 text-sm leading-relaxed">Go from product photo to live Shopify entry in under 15 seconds with zero latency agents.</p>
+</div>
+<div class="p-8 rounded-3xl glass-panel glass-card-hover text-center border-primary/20 bg-glass-amber">
+<div class="size-14 mx-auto mb-6 rounded-2xl bg-primary flex items-center justify-center">
+<span class="material-symbols-outlined text-charcoal text-3xl">verified</span>
+</div>
+<h4 class="text-xl font-bold text-white mb-3">0% Human Error</h4>
+<p class="text-slate-400 text-sm leading-relaxed">Automated cross-referencing against technical specs ensures 100% attribute accuracy.</p>
+</div>
+<div class="p-8 rounded-3xl glass-panel glass-card-hover text-center">
+<div class="size-14 mx-auto mb-6 rounded-2xl bg-primary/10 flex items-center justify-center">
+<span class="material-symbols-outlined text-primary text-3xl">trending_up</span>
+</div>
+<h4 class="text-xl font-bold text-white mb-3">SEO Native</h4>
+<p class="text-slate-400 text-sm leading-relaxed">Every description is engineered for search algorithms using real-time market sentiment data.</p>
+</div>
+</div>
+</section>
+<!-- END: Core Value Prop -->
+<!-- BEGIN: Multi-Agent Pipeline -->
+<section class="py-24 px-6 lg:px-24 bg-white/2" id="architecture">
+<div class="flex flex-col lg:flex-row gap-16 items-start">
+<div class="lg:w-1/3 sticky top-32">
+<h3 class="text-4xl font-bold text-white mb-6">Multi-Agent <br/>Pipeline</h3>
+<p class="text-slate-400 leading-relaxed mb-8">A sophisticated orchestration of specialized AI agents working in harmony to deliver high-fidelity catalog data.</p>
+<div class="p-6 rounded-2xl border border-white/5 bg-white/2">
+<div class="flex items-center gap-4 text-sm text-slate-300">
+<span class="material-symbols-outlined text-green-500">memory</span>
+              Orchestration Layer: FastAPI + LangGraph
+            </div>
+</div>
+</div>
+<div class="lg:w-2/3 grid gap-6">
+<!-- Card 1 -->
+<div class="reveal-card group p-8 rounded-3xl glass-panel flex gap-6 items-start hover:border-primary/40 transition-all">
+<div class="size-16 rounded-2xl bg-indigo-500/20 flex-shrink-0 flex items-center justify-center">
+<span class="material-symbols-outlined text-indigo-400 text-3xl">visibility</span>
+</div>
+<div>
+<div class="flex items-center justify-between mb-2">
+<h4 class="text-xl font-bold text-white">Visual Analyst</h4>
+<span class="text-[10px] font-mono px-2 py-1 rounded bg-indigo-500/10 text-indigo-400 border border-indigo-500/20">GEMINI 2.5 FLASH</span>
+</div>
+<p class="text-slate-400 text-sm leading-relaxed">Performs deep pixel analysis to extract material textures, silhouettes, and hardware details directly from raw imagery.</p>
+</div>
+</div>
+<!-- Card 2 -->
+<div class="reveal-card group p-8 rounded-3xl glass-panel flex gap-6 items-start hover:border-primary/40 transition-all">
+<div class="size-16 rounded-2xl bg-cyan-500/20 flex-shrink-0 flex items-center justify-center">
+<span class="material-symbols-outlined text-cyan-400 text-3xl">database</span>
+</div>
+<div>
+<div class="flex items-center justify-between mb-2">
+<h4 class="text-xl font-bold text-white">Semantic Memory</h4>
+<span class="text-[10px] font-mono px-2 py-1 rounded bg-cyan-500/10 text-cyan-400 border border-cyan-500/20">PINECONE RAG</span>
+</div>
+<p class="text-slate-400 text-sm leading-relaxed">Queries vector databases for historical product context, brand voice guidelines, and competitive SEO keywords.</p>
+</div>
+</div>
+<!-- Card 3 -->
+<div class="reveal-card group p-8 rounded-3xl glass-panel flex gap-6 items-start hover:border-primary/40 transition-all">
+<div class="size-16 rounded-2xl bg-primary/20 flex-shrink-0 flex items-center justify-center">
+<span class="material-symbols-outlined text-primary text-3xl">edit_note</span>
+</div>
+<div>
+<div class="flex items-center justify-between mb-2">
+<h4 class="text-xl font-bold text-white">Writer Agent</h4>
+<span class="text-[10px] font-mono px-2 py-1 rounded bg-primary/10 text-primary border border-primary/20">LLAMA 3.3 70B (GROQ)</span>
+</div>
+<p class="text-slate-400 text-sm leading-relaxed">Synthesizes visual and semantic data into high-converting product descriptions, bullet points, and metadata.</p>
+</div>
+</div>
+</div>
+</div>
+</section>
+<!-- END: Multi-Agent Pipeline -->
+<!-- BEGIN: Tech Stack Table -->
+<section class="py-24 px-6 lg:px-24" id="tech-stack">
+<div class="glass-panel rounded-3xl overflow-hidden border-white/5 shadow-2xl">
+<div class="px-8 py-6 border-b border-white/5 bg-white/2 flex items-center justify-between">
+<h3 class="text-xl font-bold text-white">Technical Infrastructure</h3>
+<span class="text-xs text-slate-500 font-mono tracking-widest">SYSTEM_MANIFEST.V2</span>
+</div>
+<div class="overflow-x-auto">
+<table class="w-full text-left">
+<thead>
+<tr class="bg-white/2 text-[10px] uppercase tracking-widest text-slate-500 border-b border-white/5">
+<th class="px-8 py-4 font-bold">Component</th>
+<th class="px-8 py-4 font-bold">Technology</th>
+<th class="px-8 py-4 font-bold">Purpose</th>
+<th class="px-8 py-4 font-bold">Status</th>
+</tr>
+</thead>
+<tbody class="text-sm">
+<tr class="border-b border-white/5 hover:bg-white/2 transition-colors">
+<td class="px-8 py-6 font-bold text-white">Core Backend</td>
+<td class="px-8 py-6 text-slate-400">Python 3.10+ / FastAPI</td>
+<td class="px-8 py-6 text-slate-400">Asynchronous high-throughput processing</td>
+<td class="px-8 py-6"><span class="px-2 py-1 rounded-full bg-green-500/10 text-green-500 text-[10px] font-bold">STABLE</span></td>
+</tr>
+<tr class="border-b border-white/5 hover:bg-white/2 transition-colors">
+<td class="px-8 py-6 font-bold text-white">Agent Framework</td>
+<td class="px-8 py-6 text-slate-400">Google GenAI / Groq SDK</td>
+<td class="px-8 py-6 text-slate-400">Multi-LLM orchestration &amp; execution</td>
+<td class="px-8 py-6"><span class="px-2 py-1 rounded-full bg-green-500/10 text-green-500 text-[10px] font-bold">STABLE</span></td>
+</tr>
+<tr class="border-b border-white/5 hover:bg-white/2 transition-colors">
+<td class="px-8 py-6 font-bold text-white">Knowledge Base</td>
+<td class="px-8 py-6 text-slate-400">Pinecone Vector DB</td>
+<td class="px-8 py-6 text-slate-400">Retrieval Augmented Generation (RAG)</td>
+<td class="px-8 py-6"><span class="px-2 py-1 rounded-full bg-green-500/10 text-green-500 text-[10px] font-bold">STABLE</span></td>
+</tr>
+<tr class="hover:bg-white/2 transition-colors">
+<td class="px-8 py-6 font-bold text-white">Deployment</td>
+<td class="px-8 py-6 text-slate-400">Docker / Kubernetes</td>
+<td class="px-8 py-6 text-slate-400">Containerized auto-scaling architecture</td>
+<td class="px-8 py-6"><span class="px-2 py-1 rounded-full bg-green-500/10 text-green-500 text-[10px] font-bold">STABLE</span></td>
+</tr>
+</tbody>
+</table>
+</div>
+</div>
+</section>
+<!-- END: Tech Stack Table -->
+<!-- BEGIN: Final CTA -->
+<section class="py-24 px-6 text-center">
+<div class="max-w-3xl mx-auto glass-panel p-12 lg:p-20 rounded-[3rem] border-primary/20 relative overflow-hidden">
+<div class="absolute -top-24 -right-24 size-64 bg-primary/10 rounded-full blur-3xl"></div>
+<h3 class="text-4xl lg:text-6xl font-extrabold text-white mb-8 tracking-tight">Scale Your Catalog To <br/>Infinite.</h3>
+<p class="text-slate-400 text-lg mb-10 leading-relaxed">Join enterprise retail leaders who are automating their supply chain intelligence with MerchFlow AI.</p>
+<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
+<input class="w-full sm:w-auto min-w-[300px] bg-charcoal border border-white/10 rounded-xl px-6 py-4 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-white" placeholder="Enter corporate email" type="email"/>
+<button class="w-full sm:w-auto px-8 py-4 bg-primary hover:bg-primary-dark text-charcoal rounded-xl font-bold transition-all transform hover:scale-105">
+            Request Access
+          </button>
+</div>
+</div>
+</section>
+<!-- END: Final CTA -->
+</main>
+<!-- BEGIN: Footer -->
+<footer class="mt-12 border-t border-white/5 bg-charcoal py-12 px-6 lg:px-24" id="legal">
+<div class="flex flex-col md:flex-row justify-between items-start gap-12 mb-12">
+<div class="max-w-xs">
+<div class="flex items-center gap-3 mb-6">
+<div class="flex items-center justify-center size-8 rounded-lg bg-primary text-charcoal">
+<span class="material-symbols-outlined text-sm font-bold">all_inclusive</span>
+</div>
+<span class="text-white font-bold tracking-tight">MerchFlow AI</span>
+</div>
+<p class="text-xs text-slate-500 leading-relaxed">
+          The exclusive proprietary property of Bhishaj Technologies. Designed and engineered for high-performance e-commerce logistics.
+        </p>
+</div>
+<div class="grid grid-cols-2 md:grid-cols-3 gap-12">
+<div>
+<h5 class="text-white text-xs font-bold uppercase tracking-widest mb-6">Platform</h5>
+<ul class="space-y-4 text-xs text-slate-400">
+<li><a class="hover:text-primary" href="#">Agent Dashboard</a></li>
+<li><a class="hover:text-primary" href="#">API Documentation</a></li>
+<li><a class="hover:text-primary" href="#">Pricing Plans</a></li>
+</ul>
+</div>
+<div>
+<h5 class="text-white text-xs font-bold uppercase tracking-widest mb-6">Company</h5>
+<ul class="space-y-4 text-xs text-slate-400">
+<li><a class="hover:text-primary" href="#">Bhishaj Tech</a></li>
+<li><a class="hover:text-primary" href="#">Careers</a></li>
+<li><a class="hover:text-primary" href="#">Contact</a></li>
+</ul>
+</div>
+<div>
+<h5 class="text-white text-xs font-bold uppercase tracking-widest mb-6">Security</h5>
+<ul class="space-y-4 text-xs text-slate-400">
+<li><a class="hover:text-primary" href="#">Privacy Policy</a></li>
+<li><a class="hover:text-primary" href="#">Terms of Service</a></li>
+<li><a class="hover:text-primary" href="#">SLA</a></li>
+</ul>
+</div>
+</div>
+</div>
+<div class="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-4">
+<p class="text-[10px] text-slate-600">
+        © 2026 Bhishaj Technologies — UDYAM-UP-02-0108589. All Rights Reserved.
+      </p>
+<div class="flex gap-6">
+<span class="material-symbols-outlined text-slate-600 hover:text-primary cursor-pointer">public</span>
+<span class="material-symbols-outlined text-slate-600 hover:text-primary cursor-pointer">lock</span>
+<span class="material-symbols-outlined text-slate-600 hover:text-primary cursor-pointer">hub</span>
+</div>
+</div>
+</footer>
+<!-- END: Footer -->
+<!-- BEGIN: Animation Script -->
+<script id="scroll-reveal-logic">
+  document.addEventListener('DOMContentLoaded', () => {
+    const observerOptions = {
+      root: null,
+      threshold: 0.15,
+      rootMargin: '0px 0px -50px 0px'
+    };
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry, index) => {
+        if (entry.isIntersecting) {
+          // Stagger the animation of the cards
+          setTimeout(() => {
+            entry.target.classList.add('is-visible');
+          }, index * 100);
+          // Once visible, stop observing this specific element
+          observer.unobserve(entry.target);
+        }
+      });
+    }, observerOptions);
+    const revealCards = document.querySelectorAll('.reveal-card');
+    revealCards.forEach(card => observer.observe(card));
+  });
+</script>
+<!-- END: Animation Script -->
+</body></html>

main.py CHANGED Viewed

@@ -2,8 +2,9 @@ import os
 import asyncio
 import json
 import traceback
 from fastapi import FastAPI, UploadFile, File, HTTPException
-from fastapi.responses import HTMLResponse, JSONResponse
 from dotenv import load_dotenv
 # Import Agents
@@ -14,6 +15,7 @@ from agents.writer_agent import WriterAgent
 load_dotenv()
 app = FastAPI()
 # Initialize Agents
 try:
@@ -32,13 +34,20 @@ except Exception as e:
     print(f"❌ Agent Startup Failed: {e}")
     # We continue, but endpoints might fail if agents aren't ready.
-@app.get("/", response_class=HTMLResponse)
 async def read_root():
-    try:
-        with open("dashboard.html", "r") as f:
-            return f.read()
-    except FileNotFoundError:
-        return "<h1>Error: dashboard.html not found</h1>"
 @app.post("/generate-catalog")
 async def generate_catalog(file: UploadFile = File(...)):

 import asyncio
 import json
 import traceback
+from pathlib import Path
 from fastapi import FastAPI, UploadFile, File, HTTPException
+from fastapi.responses import FileResponse, JSONResponse
 from dotenv import load_dotenv
 # Import Agents
 load_dotenv()
 app = FastAPI()
+BASE_DIR = Path(__file__).resolve().parent
 # Initialize Agents
 try:
     print(f"❌ Agent Startup Failed: {e}")
     # We continue, but endpoints might fail if agents aren't ready.
+@app.get("/")
 async def read_root():
+    landing_page = BASE_DIR / "landingpage.html"
+    if not landing_page.exists():
+        raise HTTPException(status_code=404, detail="landingpage.html not found")
+    return FileResponse(landing_page)
+@app.get("/dashboard")
+async def read_dashboard():
+    dashboard_page = BASE_DIR / "dashboard.html"
+    if not dashboard_page.exists():
+        raise HTTPException(status_code=404, detail="dashboard.html not found")
+    return FileResponse(dashboard_page)
 @app.post("/generate-catalog")
 async def generate_catalog(file: UploadFile = File(...)):