Spaces:
Running
Running
| <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&display=swap" rel="stylesheet"/> | |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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 & 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> |