| Server IP : 103.243.232.44 / Your IP : 216.73.216.69 Web Server : LiteSpeed System : Linux server17213-10344.hostycare.online 5.14.0-687.38.1.el9_8.x86_64 #1 SMP PREEMPT_DYNAMIC Wed Aug 12 17:19:12 EDT 2026 x86_64 User : iamakash ( 1400) PHP Version : 8.1.34 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/iamakash/kahom.tech/flowgenix/ |
Upload File : |
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Documentation & developer portal | Flowgenix</title>
<meta name="description" content="Developer resources for Flowgenix: quickstart guides, orchestration concepts, API reference and community support."/>
<link rel="icon" type="image/png" href="assets/flowgenix-icon.png"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&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"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"error":"#ba1a1a","secondary-fixed":"#d3e4ff","on-tertiary-fixed":"#001f25",
"inverse-surface":"#283044","secondary-container":"#3f9eff","on-primary-fixed-variant":"#003bb0",
"on-surface":"#131b2e","on-secondary-fixed-variant":"#004881","surface-tint":"#2d55c9",
"on-primary":"#ffffff","inverse-on-surface":"#eef0ff","ai-cyan":"#00E0FF",
"surface-subtle":"#F8FAFC","surface":"#faf8ff","outline":"#747685","on-secondary-container":"#00345f",
"tertiary-fixed-dim":"#00daf8","error-container":"#ffdad6","on-error-container":"#93000a",
"primary-fixed":"#dce1ff","primary":"#00287f","on-tertiary-fixed-variant":"#004e5a",
"secondary-fixed-dim":"#a2c9ff","primary-fixed-dim":"#b6c4ff","surface-bright":"#faf8ff",
"on-tertiary-container":"#00c8e3","tertiary-container":"#004f5b","tertiary":"#00373f",
"border-low":"#E2E8F0","energy-orange":"#FF6210","surface-variant":"#dae2fd",
"on-error":"#ffffff","surface-container-low":"#f2f3ff","surface-container":"#eaedff",
"outline-variant":"#c4c5d6","surface-container-high":"#e2e7ff","on-background":"#131b2e",
"on-tertiary":"#ffffff","on-secondary":"#ffffff","surface-dim":"#d2d9f4",
"on-surface-variant":"#434653","on-primary-fixed":"#00164f","primary-container":"#003bb1",
"on-secondary-fixed":"#001c38","secondary":"#0060a9","background":"#faf8ff",
"inverse-primary":"#b6c4ff","on-primary-container":"#9eb2ff","tertiary-fixed":"#a5eeff",
"surface-container-lowest":"#ffffff","surface-container-highest":"#dae2fd"
},
borderRadius: { "DEFAULT":"0.25rem","xl":"12px","2xl":"1rem","full":"9999px" },
spacing: { "margin-desktop":"40px","margin-mobile":"16px","stack-lg":"32px",
"base":"4px","gutter":"24px","stack-sm":"8px","stack-md":"16px" },
fontFamily: {
"headline-sm":["Hanken Grotesk"],"display-lg":["Hanken Grotesk"],"body-md":["Inter"],
"headline-lg-mobile":["Hanken Grotesk"],"headline-lg":["Hanken Grotesk"],
"headline-md":["Hanken Grotesk"],"body-lg":["Inter"],"body-sm":["Inter"],"label-md":["JetBrains Mono"]
},
fontSize: {
"display-lg":["64px",{lineHeight:"72px",letterSpacing:"-0.02em"}],
"headline-lg":["40px",{lineHeight:"48px",letterSpacing:"-0.01em"}],
"headline-md":["32px",{lineHeight:"40px"}],
"headline-sm":["24px",{lineHeight:"32px"}],
"body-lg":["18px",{lineHeight:"28px"}],"body-md":["16px",{lineHeight:"24px"}],
"body-sm":["14px",{lineHeight:"20px"}],"label-md":["12px",{lineHeight:"16px"}]
}
}
}
}
</script>
<style>
.material-symbols-outlined { font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; }
html { scroll-behavior:smooth; }
.glass-card { background:rgba(255,255,255,0.7); backdrop-filter:blur(12px); border:1px solid rgba(226,232,240,0.5); }
.hero-gradient { background:radial-gradient(circle at top right,rgba(0,59,177,0.05),transparent),radial-gradient(circle at bottom left,rgba(0,224,255,0.05),transparent); }
.ai-glow { box-shadow:0 0 40px -10px rgba(0,224,255,0.2); animation:pulse-glow 3s ease-in-out infinite; }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 40px -10px rgba(0,224,255,0.2);} 50%{box-shadow:0 0 60px -5px rgba(0,224,255,0.4);} }
.bento-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:24px; }
.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.8s ease-out,transform 0.8s ease-out; }
.reveal.active { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce) { .reveal{opacity:1;transform:none;transition:none;} .ai-glow{animation:none;} html{scroll-behavior:auto;} }
.interactive-card { --x:50%; --y:50%; position:relative; overflow:hidden; transition:transform 0.2s ease-out; }
.interactive-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at var(--x) var(--y),rgba(0,224,255,0.1) 0%,transparent 50%); pointer-events:none; opacity:0; transition:opacity 0.3s; }
.interactive-card:hover::before { opacity:1; }
nav.scrolled { padding-top:0.5rem; padding-bottom:0.5rem; background-color:rgba(250,248,255,0.92); }
.shimmer-ai { position:relative; }
.shimmer-ai::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.05),transparent); transform:translateX(-100%); animation:shimmer 4s infinite; }
@keyframes shimmer { 100%{transform:translateX(100%);} }
.stagger-1{transition-delay:100ms;} .stagger-2{transition-delay:200ms;} .stagger-3{transition-delay:300ms;} .stagger-4{transition-delay:400ms;} .stagger-5{transition-delay:500ms;} .stagger-6{transition-delay:600ms;}
.nav-link { font-weight:600; color:#434653; transition:color 0.2s; }
.nav-link:hover { color:#00287f; }
.nav-link.active-page { color:#00287f; border-bottom:2px solid #00287f; padding-bottom:2px; }
.dropdown:hover .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-menu { opacity:0; visibility:hidden; transform:translateY(8px); transition:all 0.2s ease-out; }
#mobile-menu { max-height:0; overflow:hidden; transition:max-height 0.35s ease; }
#mobile-menu.open { max-height:640px; }
</style>
</head>
<body class="bg-background text-on-background selection:bg-primary-fixed selection:text-on-primary-fixed font-body-md overflow-x-hidden">
<!-- Navigation -->
<nav class="fixed top-0 w-full z-50 bg-surface/80 backdrop-blur-md border-b border-outline-variant/30 shadow-sm transition-all duration-300 py-4" id="main-nav">
<div class="flex justify-between items-center px-margin-mobile md:px-margin-desktop max-w-7xl mx-auto">
<div class="flex items-center gap-8">
<a href="index.html" class="flex items-center shrink-0"><img alt="Flowgenix" class="h-8" src="assets/flowgenix-logo.png"/></a>
<div class="hidden lg:flex items-center gap-7 text-body-sm">
<a class="nav-link" href="platform.html">Platform</a>
<div class="dropdown relative">
<a class="nav-link flex items-center gap-1" href="products.html">Products <span class="material-symbols-outlined text-base">expand_more</span></a>
<div class="dropdown-menu absolute top-full left-0 pt-3 w-72">
<div class="bg-surface-container-lowest rounded-xl border border-border-low shadow-xl p-2">
<a href="carbongenie.html" class="flex items-start gap-3 p-3 rounded-lg hover:bg-surface-container-low transition-colors"><span class="material-symbols-outlined text-primary mt-0.5">eco</span><span><span class="block font-semibold text-on-surface">CarbonGenie</span><span class="block text-label-md font-label-md text-on-surface-variant">ESG & carbon automation</span></span></a>
<a href="adaptive-iam.html" class="flex items-start gap-3 p-3 rounded-lg hover:bg-surface-container-low transition-colors"><span class="material-symbols-outlined text-primary mt-0.5">shield_lock</span><span><span class="block font-semibold text-on-surface">Adaptive IAM</span><span class="block text-label-md font-label-md text-on-surface-variant">Identity & access management</span></span></a>
<a href="e-frm.html" class="flex items-start gap-3 p-3 rounded-lg hover:bg-surface-container-low transition-colors"><span class="material-symbols-outlined text-primary mt-0.5">frame_inspect</span><span><span class="block font-semibold text-on-surface">E-FRM Suite</span><span class="block text-label-md font-label-md text-on-surface-variant">Fraud risk management</span></span></a>
<a href="ai-factory.html" class="flex items-start gap-3 p-3 rounded-lg hover:bg-surface-container-low transition-colors"><span class="material-symbols-outlined text-primary mt-0.5">smart_toy</span><span><span class="block font-semibold text-on-surface">AI Factory Library</span><span class="block text-label-md font-label-md text-on-surface-variant">Agents & document intelligence</span></span></a>
</div>
</div>
</div>
<a class="nav-link" href="industries.html">Industries</a>
<a class="nav-link" href="about.html">Company</a>
</div>
</div>
<div class="flex items-center gap-3">
<a href="contact.html" class="hidden sm:inline-flex bg-primary-container text-on-primary px-6 py-2.5 rounded-lg font-bold shadow-md hover:scale-[1.02] active:scale-[0.98] transition-all">Request a demo</a>
<button id="mobile-toggle" class="lg:hidden w-10 h-10 flex items-center justify-center rounded-lg hover:bg-surface-container-low" aria-label="Menu"><span class="material-symbols-outlined">menu</span></button>
</div>
</div>
<div id="mobile-menu" class="lg:hidden bg-surface border-t border-outline-variant/20">
<div class="px-margin-mobile py-4 flex flex-col gap-1">
<a class="py-2.5 font-semibold text-on-surface" href="platform.html">Platform</a>
<a class="py-2.5 font-semibold text-on-surface" href="products.html">Products</a>
<a class="py-1 pl-4 text-body-sm text-on-surface-variant" href="carbongenie.html">— CarbonGenie</a>
<a class="py-1 pl-4 text-body-sm text-on-surface-variant" href="adaptive-iam.html">— Adaptive IAM</a>
<a class="py-1 pl-4 text-body-sm text-on-surface-variant" href="e-frm.html">— E-FRM Suite</a>
<a class="py-1 pl-4 text-body-sm text-on-surface-variant" href="ai-factory.html">— AI Factory Library</a>
<a class="py-2.5 font-semibold text-on-surface" href="industries.html">Industries</a>
<a class="py-2.5 font-semibold text-on-surface" href="about.html">Company</a>
<a class="mt-3 bg-primary-container text-on-primary px-6 py-3 rounded-lg font-bold text-center" href="contact.html">Request a demo</a>
</div>
</div>
</nav>
<div class="max-w-7xl mx-auto px-margin-desktop flex flex-col md:flex-row gap-gutter py-stack-lg min-h-screen">
<!-- Sidebar Navigation -->
<aside class="w-full md:w-64 flex-shrink-0">
<div class="sticky top-28 space-y-stack-md">
<div class="space-y-base">
<h3 class="text-label-md font-bold text-outline px-stack-md uppercase tracking-wider">Introduction</h3>
<a class="flex items-center gap-stack-sm px-stack-md py-stack-sm rounded-lg nav-active" href="#">
<span class="material-symbols-outlined text-[20px]">rocket_launch</span>
<span class="font-body-sm text-body-sm">Getting Started</span>
</a>
<a class="flex items-center gap-stack-sm px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
<span class="material-symbols-outlined text-[20px]">architecture</span>
<span class="font-body-sm text-body-sm">Architecture</span>
</a>
</div>
<div class="space-y-base pt-stack-md">
<h3 class="text-label-md font-bold text-outline px-stack-md uppercase tracking-wider">Resources</h3>
<a class="flex items-center gap-stack-sm px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
<span class="material-symbols-outlined text-[20px]">api</span>
<span class="font-body-sm text-body-sm">API Reference</span>
</a>
<a class="flex items-center gap-stack-sm px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
<span class="material-symbols-outlined text-[20px]">terminal</span>
<span class="font-body-sm text-body-sm">SDKs & Libraries</span>
</a>
<a class="flex items-center gap-stack-sm px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
<span class="material-symbols-outlined text-[20px]">menu_book</span>
<span class="font-body-sm text-body-sm">Tutorials</span>
</a>
</div>
<div class="space-y-base pt-stack-md">
<h3 class="text-label-md font-bold text-outline px-stack-md uppercase tracking-wider">Status & Support</h3>
<a class="flex items-center gap-stack-sm px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
<span class="material-symbols-outlined text-[20px]">check_circle</span>
<span class="font-body-sm text-body-sm">API Status</span>
<span class="ml-auto w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
</a>
<a class="flex items-center gap-stack-sm px-stack-md py-stack-sm rounded-lg text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
<span class="material-symbols-outlined text-[20px]">groups</span>
<span class="font-body-sm text-body-sm">Community Forum</span>
</a>
</div>
<!-- API Status Mini-Card -->
<div class="mt-stack-lg p-stack-md bg-surface-container-low rounded-xl border border-outline-variant">
<div class="flex items-center justify-between mb-stack-sm">
<span class="font-label-md text-label-md text-on-surface-variant">API v2.4</span>
<span class="bg-green-100 text-green-700 text-[10px] px-1.5 py-0.5 rounded font-bold">STABLE</span>
</div>
<div class="text-[11px] text-on-surface-variant mb-base">Response Time: <span class="font-label-md text-on-surface">124ms</span></div>
<div class="w-full bg-surface-variant h-1 rounded-full overflow-hidden">
<div class="bg-green-500 h-full w-[98%]"></div>
</div>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="flex-1 space-y-stack-lg overflow-hidden">
<!-- Breadcrumbs -->
<div class="flex items-center gap-base text-body-sm text-on-surface-variant">
<span>Docs</span>
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
<span class="text-on-surface font-medium">Getting Started</span>
</div>
<section class="space-y-stack-md">
<h1 class="font-headline-lg text-headline-lg text-primary tracking-tight">Enterprise-Grade AI Automation</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-3xl">
Flowgenix provides the robust infrastructure and API endpoints required to orchestrate complex AI workflows across your entire enterprise stack.
</p>
</section>
<!-- Bento Grid - Quick Start -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
<div class="md:col-span-2 bg-surface-container-lowest p-stack-lg rounded-xl border border-border-low shadow-sm hover:shadow-md transition-shadow group">
<div class="flex items-start justify-between">
<div class="space-y-stack-sm">
<div class="w-12 h-12 bg-primary-fixed rounded-lg flex items-center justify-center text-primary">
<span class="material-symbols-outlined">bolt</span>
</div>
<h2 class="font-headline-sm text-headline-sm text-on-surface">Quickstart Guide</h2>
<p class="text-body-md text-on-surface-variant">Get your first flow running in under 5 minutes using our CLI or web interface.</p>
</div>
</div>
<div class="mt-stack-lg">
<div class="code-snippet p-stack-md rounded-lg text-label-md relative group/code overflow-hidden">
<div class="flex items-center justify-between mb-stack-sm">
<span class="text-outline-variant">bash</span>
<button class="opacity-0 group-hover/code:opacity-100 transition-opacity text-outline-variant hover:text-white">
<span class="material-symbols-outlined text-[18px]">content_copy</span>
</button>
</div>
<code>$ npm install -g @flowgenix/cli</code><br/>
<code>$ flowgenix init project-alpha</code>
</div>
</div>
</div>
<div class="bg-surface-container-lowest p-stack-lg rounded-xl border border-border-low shadow-sm hover:shadow-md transition-shadow flex flex-col justify-between">
<div class="space-y-stack-sm">
<div class="w-12 h-12 bg-secondary-fixed rounded-lg flex items-center justify-center text-secondary">
<span class="material-symbols-outlined">school</span>
</div>
<h2 class="font-headline-sm text-headline-sm text-on-surface">Video Tutorials</h2>
<p class="text-body-sm text-on-surface-variant">Walkthroughs for complex enterprise setups.</p>
</div>
<div class="mt-stack-md h-32 w-full rounded-lg bg-surface-container-highest relative overflow-hidden group/video">
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover/video:scale-105" data-alt="A cinematic, high-quality still from a professional screencast showing a developer's code editor with vibrant syntax highlighting and the Flowgenix dashboard in the background. The lighting is moody with cool blue and cyan accents, reflecting an advanced tech aesthetic. The focus is sharp on the terminal window displaying success logs." style="background:linear-gradient(135deg,#003bb1,#00287f 55%,#00373f)"></div>
<div class="absolute inset-0 flex items-center justify-center bg-primary/20 group-hover/video:bg-primary/40 transition-colors">
<span class="material-symbols-outlined text-white text-[48px] drop-shadow-lg">play_circle</span>
</div>
</div>
</div>
</div>
<!-- How it Works / Diagram Section -->
<section class="bg-surface-container p-stack-lg rounded-2xl border border-outline-variant relative overflow-hidden min-h-[400px] flex flex-col">
<div class="z-10 max-w-md space-y-stack-sm mb-stack-lg">
<h2 class="font-headline-sm text-headline-sm text-primary">How Flowgenix Orchestrates</h2>
<p class="text-body-md text-on-surface-variant">Our Technical Sophistication layer ensures data integrity between siloed systems using technical 'Data-Light' accents.</p>
</div>
<!-- Diagram Visual (Abstract Technical Representation) -->
<div class="flex-1 relative flex items-center justify-center">
<div class="w-full max-w-2xl aspect-[16/7] relative">
<!-- Connecting Lines / Grid -->
<div class="absolute inset-0 grid grid-cols-4 grid-rows-2 gap-stack-md">
<!-- Node 1 -->
<div class="bg-surface-container-lowest border border-primary-fixed-dim rounded-xl p-stack-sm flex flex-col items-center justify-center text-center shadow-sm z-10">
<span class="material-symbols-outlined text-primary mb-1">input</span>
<span class="font-label-md text-[10px] text-on-surface uppercase">Ingestion</span>
</div>
<div class="col-span-2 flex items-center px-base relative">
<div class="w-full h-px bg-gradient-to-r from-primary-fixed-dim via-ai-cyan to-primary-fixed-dim relative">
<div class="absolute -top-1 left-1/2 w-2 h-2 bg-ai-cyan rounded-full animate-[ping_2s_infinite]"></div>
</div>
</div>
<!-- Node 2 -->
<div class="bg-surface-container-lowest border border-primary-fixed-dim rounded-xl p-stack-sm flex flex-col items-center justify-center text-center shadow-sm z-10">
<span class="material-symbols-outlined text-primary mb-1">psychology</span>
<span class="font-label-md text-[10px] text-on-surface uppercase">AI Logic</span>
</div>
<!-- Middle Layer -->
<div class="col-start-2 row-start-2 bg-surface-container-lowest border border-secondary-fixed rounded-xl p-stack-sm flex flex-col items-center justify-center text-center shadow-sm z-10">
<span class="material-symbols-outlined text-secondary mb-1">storage</span>
<span class="font-label-md text-[10px] text-on-surface uppercase">Context</span>
</div>
<div class="col-start-3 row-start-2 bg-surface-container-lowest border border-tertiary-fixed rounded-xl p-stack-sm flex flex-col items-center justify-center text-center shadow-sm z-10">
<span class="material-symbols-outlined text-tertiary mb-1">output</span>
<span class="font-label-md text-[10px] text-on-surface uppercase">Action</span>
</div>
</div>
<!-- Animated Shader for "Flow" -->
</div>
</div>
</section>
<!-- API Reference Preview -->
<section class="space-y-stack-md">
<div class="flex items-center justify-between">
<h2 class="font-headline-sm text-headline-sm text-on-surface">API Reference Preview</h2>
<a class="text-primary font-medium text-body-sm hover:underline" href="#">View Full API Docs</a>
</div>
<div class="border border-outline-variant rounded-xl overflow-hidden bg-surface-container-lowest">
<div class="flex border-b border-outline-variant bg-surface-container-low px-stack-md py-base gap-stack-md">
<button class="text-label-md text-primary font-bold border-b-2 border-primary pb-base px-base">POST /v1/orchestrate</button>
<button class="text-label-md text-on-surface-variant hover:text-on-surface pb-base px-base">GET /v1/flows</button>
<button class="text-label-md text-on-surface-variant hover:text-on-surface pb-base px-base">DELETE /v1/flows/{id}</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2">
<div class="p-stack-lg space-y-stack-md border-r border-outline-variant">
<div>
<h3 class="text-label-md font-bold text-on-surface mb-base uppercase">Parameters</h3>
<div class="space-y-stack-sm">
<div class="flex items-start gap-stack-md">
<code class="text-label-md bg-surface-variant text-primary px-1.5 py-0.5 rounded">flow_id</code>
<div class="text-body-sm text-on-surface-variant">
<span class="font-bold text-on-surface">string</span> (required)
<p>The unique identifier for the workflow blueprint.</p>
</div>
</div>
<div class="flex items-start gap-stack-md">
<code class="text-label-md bg-surface-variant text-primary px-1.5 py-0.5 rounded">context</code>
<div class="text-body-sm text-on-surface-variant">
<span class="font-bold text-on-surface">object</span>
<p>Input data for the AI model to process.</p>
</div>
</div>
</div>
</div>
</div>
<div class="p-stack-lg code-snippet">
<pre class="text-label-md leading-relaxed"><span class="text-cyan-400">{</span>
<span class="text-orange-400">"status"</span>: <span class="text-green-400">"success"</span>,
<span class="text-orange-400">"request_id"</span>: <span class="text-green-400">"req_f9a2b8c"</span>,
<span class="text-orange-400">"data"</span>: <span class="text-cyan-400">{</span>
<span class="text-orange-400">"result"</span>: <span class="text-green-400">"Operation completed"</span>,
<span class="text-orange-400">"execution_time"</span>: <span class="text-yellow-400">0.45</span>
<span class="text-cyan-400">}</span>
<span class="text-cyan-400">}</span></pre>
</div>
</div>
</div>
</section>
<!-- Community & Support Grid -->
<section class="grid grid-cols-1 md:grid-cols-2 gap-gutter">
<div class="p-stack-lg border border-outline-variant rounded-xl flex items-center gap-stack-md hover:bg-surface-container-low transition-colors group">
<div class="w-16 h-16 bg-tertiary-container text-on-tertiary-container rounded-full flex items-center justify-center">
<span class="material-symbols-outlined text-[32px]">forum</span>
</div>
<div>
<h3 class="font-headline-sm text-headline-sm text-on-surface group-hover:text-primary transition-colors">Developer Forum</h3>
<p class="text-body-sm text-on-surface-variant">Join 50k+ developers discussing integrations and best practices.</p>
</div>
</div>
<div class="p-stack-lg border border-outline-variant rounded-xl flex items-center gap-stack-md hover:bg-surface-container-low transition-colors group">
<div class="w-16 h-16 bg-secondary-container text-on-secondary-container rounded-full flex items-center justify-center">
<span class="material-symbols-outlined text-[32px]">support_agent</span>
</div>
<div>
<h3 class="font-headline-sm text-headline-sm text-on-surface group-hover:text-primary transition-colors">Priority Support</h3>
<p class="text-body-sm text-on-surface-variant">24/7 dedicated support for our enterprise Tier customers.</p>
</div>
</div>
</section>
</main>
</div>
<!-- Footer -->
<!-- Footer -->
<footer class="bg-on-surface w-full pt-16 pb-10">
<div class="grid grid-cols-2 md:grid-cols-5 gap-gutter px-margin-mobile md:px-margin-desktop max-w-7xl mx-auto">
<div class="col-span-2">
<img alt="Flowgenix" class="h-7 mb-6 brightness-0 invert" src="assets/flowgenix-logo.png"/>
<p class="text-body-sm text-surface-variant/80 mb-6 max-w-xs">Transforming enterprises with intelligent automation, reusable accelerators, and AI-native low-code — from concept to market in weeks.</p>
<div class="flex flex-col gap-2 text-body-sm text-surface-variant/80">
<a href="mailto:contact@flowgenix.tech" class="flex items-center gap-2 hover:text-surface transition-colors"><span class="material-symbols-outlined text-base">mail</span> contact@flowgenix.tech</a>
<a href="tel:+919818430664" class="flex items-center gap-2 hover:text-surface transition-colors"><span class="material-symbols-outlined text-base">call</span> +91 98184 30664</a>
<span class="flex items-center gap-2"><span class="material-symbols-outlined text-base">location_on</span> Sector 119, Noida, UP 201305</span>
</div>
</div>
<div>
<h5 class="text-primary-fixed-dim font-semibold mb-5 font-body-sm">Platform</h5>
<ul class="space-y-3 text-body-sm">
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="platform.html">How it works</a></li>
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="platform.html#capabilities">Capabilities</a></li>
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="platform.html#why">Why Flowgenix</a></li>
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="industries.html">Industries</a></li>
</ul>
</div>
<div>
<h5 class="text-primary-fixed-dim font-semibold mb-5 font-body-sm">Products</h5>
<ul class="space-y-3 text-body-sm">
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="carbongenie.html">CarbonGenie</a></li>
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="adaptive-iam.html">Adaptive IAM</a></li>
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="e-frm.html">E-FRM Suite</a></li>
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="ai-factory.html">AI Factory Library</a></li>
</ul>
</div>
<div>
<h5 class="text-primary-fixed-dim font-semibold mb-5 font-body-sm">Company</h5>
<ul class="space-y-3 text-body-sm">
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="about.html">About & team</a></li>
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="about.html#leadership">Leadership</a></li>
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="contact.html">Contact</a></li>
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="contact.html">Partner with us</a></li>
</ul>
</div>
</div>
<div class="max-w-7xl mx-auto px-margin-mobile md:px-margin-desktop mt-14 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-body-sm text-surface-variant/60">© 2026 Flowgenix Business Solutions Pvt Ltd. All rights reserved.</p>
<p class="text-label-md font-label-md text-surface-variant/50 uppercase tracking-widest">From concept to market in weeks, not months</p>
</div>
</footer>
<script>
const nav = document.getElementById('main-nav');
window.addEventListener('scroll', () => {
if (window.scrollY > 40) nav.classList.add('scrolled','shadow-md');
else nav.classList.remove('scrolled','shadow-md');
});
const revealObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('active'); });
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));
document.querySelectorAll('.interactive-card').forEach(card => {
card.addEventListener('mousemove', e => {
const r = card.getBoundingClientRect();
card.style.setProperty('--x', ((e.clientX - r.left)/r.width)*100 + '%');
card.style.setProperty('--y', ((e.clientY - r.top)/r.height)*100 + '%');
});
});
const mt = document.getElementById('mobile-toggle');
const mm = document.getElementById('mobile-menu');
if (mt) mt.addEventListener('click', () => {
mm.classList.toggle('open');
mt.querySelector('.material-symbols-outlined').textContent = mm.classList.contains('open') ? 'close' : 'menu';
});
// Animated counters
const counters = document.querySelectorAll('[data-count]');
const countObs = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (!entry.isIntersecting) return;
const el = entry.target;
const target = parseFloat(el.dataset.count);
const suffix = el.dataset.suffix || '';
const dec = (target % 1 !== 0) ? 1 : 0;
let start = null;
const dur = 1400;
function step(ts){
if (!start) start = ts;
const p = Math.min((ts - start)/dur, 1);
const eased = 1 - Math.pow(1 - p, 3);
el.textContent = (target * eased).toFixed(dec) + suffix;
if (p < 1) requestAnimationFrame(step);
else el.textContent = target.toFixed(dec) + suffix;
}
requestAnimationFrame(step);
countObs.unobserve(el);
});
}, { threshold: 0.5 });
counters.forEach(c => countObs.observe(c));
// Contact form (front-end only)
const cf = document.getElementById('contact-form');
if (cf) cf.addEventListener('submit', (e) => {
e.preventDefault();
document.getElementById('form-fields').classList.add('hidden');
document.getElementById('form-success').classList.remove('hidden');
});
</script>
</body></html>