Spaces:

Bhishaj
/

MerchFlow-AI

Sleeping

File size: 19,914 Bytes

3bf6f3c

<!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>