<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Humanizit | AI Automation Feature</title>
<!-- CSS & Fonts -->
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500;600;700;800;900&family=Poppins:wght@600;700;800;900&display=swap" rel="stylesheet">
<style>
#humanizit-wrapper {
font-family: 'Maven Pro', sans-serif;
background-color: #000;
color: #fff;
margin: 0;
padding: 0;
width: 100%;
position: relative;
min-height: 100vh;
}
#humanizit-wrapper h1,
#humanizit-wrapper h2,
#humanizit-wrapper h3,
#humanizit-wrapper h4,
#humanizit-wrapper h5,
#humanizit-wrapper h6 {
font-family: 'Poppins', sans-serif !important;
font-weight: 600 !important;
}
/* Markdown styling for AI responses */
.prose p { margin-bottom: 1rem; color: #d4d4d8; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: #facc15; margin-top: 1.5rem; margin-bottom: 0.5rem; font-weight: 600 !important; }
.prose strong { color: #fff; font-weight: 700; }
/* Smooth scrolling */
html { scroll-behavior: smooth; }
</style>
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@18.3.1",
"react-dom": "https://esm.sh/react-dom@18.3.1",
"react-dom/client": "https://esm.sh/react-dom@18.3.1/client",
"framer-motion": "https://esm.sh/framer-motion@11.11.11?deps=react@18.3.1",
"lucide-react": "https://esm.sh/lucide-react@0.454.0?deps=react@18.3.1",
"@google/genai": "https://esm.sh/@google/genai@1.3.0",
"htm": "https://esm.sh/htm@3.1.1",
"react/": "https://esm.sh/react@^19.2.3/"
}
}
</script>
</head>
<body>
<div id="humanizit-wrapper">
<!-- CRITICAL: ID must match what the script looks for -->
<div id="humanizit-app"></div>
</div>
<script type="module">
import React from 'react';
import ReactDOM from 'react-dom/client';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
import { GoogleGenAI } from "@google/genai";
import htm from 'htm';
const html = htm.bind(React.createElement);
const {
MessageSquare, Cpu, TrendingUp, Check, ArrowUpRight,
MessageCircle, Mic, Megaphone, PenTool, Calendar,
Search, Database, FileSearch, Loader2, Sparkles
} = Lucide;
// --- AI SERVICE ---
const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
const consultAgent = async (userPrompt) => {
try {
const response = await ai.models.generateContent({
model: "gemini-3-flash-preview",
contents: userPrompt,
config: {
systemInstruction: "You are the Humanizit Strategic Automation Architect. Analyze the bottleneck and suggest a strategy using Front End, Back End, and Complex Growth agents. Keep it bold, professional, and use Markdown. Focus on the value of human-like automation.",
temperature: 0.7,
},
});
return response.text;
} catch (err) {
console.error("AI Error:", err);
return "I'm ready to architect your solution, but I'm having a connection issue. Please try again or book a call directly.";
}
};
// --- COMPONENTS ---
const FuturisticBackground = () => html`
<div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
<div className="absolute inset-0 opacity-[0.05]" style=${{ backgroundImage: 'linear-gradient(#facc15 1px, transparent 1px), linear-gradient(90deg, #facc15 1px, transparent 1px)', backgroundSize: '60px 60px' }} />
<${motion.div} animate=${{ scale: [1, 1.2, 1], opacity: [0.1, 0.15, 0.1] }} transition=${{ duration: 15, repeat: Infinity }} className="absolute -top-[10%] -left-[10%] w-[80%] h-[80%] bg-yellow-400 rounded-full blur-[180px]" />
<${motion.div} animate=${{ scale: [1, 1.1, 1], opacity: [0.05, 0.08, 0.05] }} transition=${{ duration: 20, repeat: Infinity, delay: 2 }} className="absolute bottom-[0%] right-[0%] w-[70%] h-[70%] bg-zinc-700 rounded-full blur-[150px]" />
</div>
`;
const AgentCard = ({ title, description, icon, tag, features, delay }) => html`
<${motion.div}
initial=${{ opacity: 0, y: 30 }}
whileInView=${{ opacity: 1, y: 0 }}
viewport=${{ once: true }}
transition=${{ duration: 0.6, delay }}
className="group relative bg-zinc-900/40 backdrop-blur-xl border border-white/5 p-8 rounded-[2.5rem] flex flex-col h-full hover:border-yellow-400/40 transition-all duration-500"
>
<div className="mb-10 flex items-center justify-between">
<div className="w-16 h-16 rounded-2xl bg-zinc-800 border border-white/5 flex items-center justify-center text-yellow-400 group-hover:bg-yellow-400 group-hover:text-black transition-all shadow-lg">${icon}</div>
<span className="text-[9px] uppercase font-black tracking-[0.2em] text-zinc-500 border border-zinc-800 px-4 py-1.5 rounded-full bg-black/20">${tag}</span>
</div>
<h3 className="text-2xl font-semibold mb-5 tracking-tight group-hover:text-yellow-400 transition-colors">${title}</h3>
<p className="text-zinc-400 text-sm leading-relaxed mb-10 flex-grow">${description}</p>
<ul className="space-y-4">
${features.map(f => html`
<li key=${f} className="flex items-center gap-3 text-xs font-medium text-zinc-300">
<div className="w-5 h-5 rounded-full bg-yellow-400/10 flex items-center justify-center shrink-0 border border-yellow-400/20">
<${Check} className="w-3 h-3 text-yellow-400" />
</div>
${f}
</li>
`)}
</ul>
<div className="absolute bottom-0 left-0 w-0 h-1 bg-yellow-400 group-hover:w-full transition-all duration-700" />
</${motion.div}>
`;
const CapabilityItem = ({ name, icon, delay }) => html`
<${motion.div}
initial=${{ opacity: 0, scale: 0.9 }}
whileInView=${{ opacity: 1, scale: 1 }}
viewport=${{ once: true }}
transition=${{ duration: 0.4, delay }}
className="group cursor-pointer flex items-center justify-between bg-yellow-400 p-6 h-20 rounded-2xl shadow-xl hover:shadow-yellow-400/30 transition-all overflow-hidden relative"
>
<div className="flex items-center gap-4">
<div className="p-2.5 bg-black/10 rounded-lg group-hover:bg-black group-hover:text-yellow-400 transition-colors">${icon}</div>
<span className="text-black font-black uppercase tracking-tight text-[11px] leading-tight">${name}</span>
</div>
<${ArrowUpRight} className="w-5 h-5 text-black group-hover:rotate-45 transition-transform" />
</${motion.div}>
`;
const AgentFinder = () => {
const [input, setInput] = React.useState('');
const [loading, setLoading] = React.useState(false);
const [result, setResult] = React.useState(null);
const industries = ['E-commerce', 'SaaS', 'Real Estate', 'Logistics', 'Healthcare', 'Retail', 'Education', 'Legal', 'Accountants'];
const triggerStrategy = async (val) => {
if (loading || !val.trim()) return;
setLoading(true);
const res = await consultAgent(val);
setResult(res);
setLoading(false);
};
return html`
<div className="w-full bg-zinc-950/60 backdrop-blur-2xl border border-white/5 rounded-[3rem] p-8 md:p-12 shadow-2xl overflow-hidden relative">
<form onSubmit=${(e) => { e.preventDefault(); triggerStrategy(input); }}>
<div className="flex flex-col md:flex-row gap-5 mb-8">
<input type="text" value=${input} onChange=${e => setInput(e.target.value)} placeholder="Describe your business challenge..." className="flex-1 bg-zinc-900/50 border border-white/10 rounded-[1.5rem] px-8 py-5 text-white focus:border-yellow-400 outline-none text-lg" />
<button type="submit" disabled=${loading} className="bg-yellow-400 hover:bg-white text-black font-black uppercase tracking-widest text-xs px-10 py-5 rounded-[1.5rem] flex items-center justify-center gap-3 transition-all active:scale-95 shadow-lg">
${loading ? html`<${Loader2} className="w-5 h-5 animate-spin" />` : html`<${Sparkles} className="w-5 h-5" />`}
${loading ? 'Architecting...' : 'Build My Strategy'}
</button>
</div>
</form>
<div className="flex flex-wrap gap-3 justify-center mb-4">
${industries.map(ind => html`
<button key=${ind} onClick=${() => { setInput(`Strategy for ${ind}`); triggerStrategy(`Create a strategy for a ${ind} business.`); }} className="px-4 py-2 border border-zinc-800 rounded-full text-[10px] font-bold uppercase tracking-widest text-zinc-500 hover:border-yellow-400 hover:text-yellow-400 transition-all">
${ind}
</button>
`)}
</div>
<${AnimatePresence}>
${result && html`
<${motion.div} initial=${{ opacity: 0, height: 0 }} animate=${{ opacity: 1, height: 'auto' }} className="mt-12 pt-12 border-t border-white/5">
<div className="prose prose-invert max-w-none whitespace-pre-wrap text-zinc-300 mb-10">${result}</div>
<div className="p-10 bg-zinc-900/80 rounded-[2.5rem] text-center border border-yellow-400/10 shadow-2xl">
<h4 className="text-xl font-semibold mb-3">Ready to deploy these agents?</h4>
<p className="text-zinc-500 text-sm mb-8">Discuss this custom architecture with a human expert today.</p>
<a href="https://humanizit.co/consultation-call/" target="_blank" className="inline-block bg-yellow-400 text-black font-black uppercase tracking-widest text-xs px-12 py-4 rounded-full hover:bg-white transition-all shadow-xl">Book Free Consultation</a>
</div>
</${motion.div}>
`}
</${AnimatePresence}>
</div>
`;
};
const App = () => {
const capabilities = [
{ name: "Text & Voice Enquiry", icon: html`<${Mic} className="w-5 h-5" />` },
{ name: "Marketing Activities", icon: html`<${Megaphone} className="w-5 h-5" />` },
{ name: "Content Creation", icon: html`<${PenTool} className="w-5 h-5" />` },
{ name: "Booking Management", icon: html`<${Calendar} className="w-5 h-5" />` },
{ name: "Data & Research", icon: html`<${Search} className="w-5 h-5" />` },
{ name: "Sales Management", icon: html`<${Database} className="w-5 h-5" />` },
{ name: "CRM Management", icon: html`<${FileSearch} className="w-5 h-5" />` },
{ name: "Enquiry Handling", icon: html`<${MessageCircle} className="w-5 h-5" />` },
];
return html`
<div className="relative z-10 min-h-screen">
<${FuturisticBackground} />
<main className="max-w-7xl mx-auto px-6 py-24">
<!-- HEADER -->
<header className="text-center mb-24">
<span className="text-yellow-400 font-black tracking-[0.4em] text-[10px] uppercase mb-6 block">Intelligent Workflow Systems</span>
<h2 className="text-5xl md:text-8xl font-semibold tracking-tighter mb-8 leading-tight">
The Future of Work is <br className="hidden md:block"/><span className="text-yellow-400">Automated.</span>
</h2>
<p className="text-zinc-500 text-xl max-w-2xl mx-auto leading-relaxed">Scaling your operations without scaling your overhead using custom-built Digital Agents.</p>
</header>
<!-- 3 BOXES SIDE BY SIDE -->
<div className="grid grid-cols-1 md:grid-cols-3 gap-10 mb-32 items-stretch">
<${AgentCard} title="Front End AI Agents" description="Direct interaction with your customers across chat, SMS, and voice to qualify leads and secure bookings 24/7." tag="Engagement" features=${["Lead Qualification", "24/7 Multi-channel", "Instant Response"]} icon=${html`<${MessageSquare} className="w-8 h-8" />`} delay=${0.1} />
<${AgentCard} title="Back End AI Agents" description="The engine room of your business. Seamlessly connecting your data, workflows, and admin systems." tag="Operations" features=${["ERP/CRM Sync", "Workflow Automation", "Autonomous Admin"]} icon=${html`<${Cpu} className="w-8 h-8" />`} delay=${0.2} />
<${AgentCard} title="Complex Growth Agents" description="Sophisticated AI that drives LTV, reduces churn, and converts past customers through smart nurturing." tag="Revenue" features=${["Predictive Churn", "Smart Retargeting", "Personalized CRM"]} icon=${html`<${TrendingUp} className="w-8 h-8" />`} delay=${0.3} />
</div>
<!-- CORE CAPABILITIES -->
<section className="mb-32">
<div className="text-center mb-16">
<h3 className="text-3xl font-semibold uppercase tracking-[0.2em] mb-4">Native Capabilities</h3>
<div className="w-20 h-1 bg-yellow-400 mx-auto rounded-full shadow-[0_0_15px_rgba(250,204,21,0.5)]" />
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
${capabilities.map((cap, i) => html`<${CapabilityItem} key=${i} ...${cap} delay=${i * 0.05} />`)}
</div>
</section>
<!-- AI STRATEGY ARCHITECT -->
<section id="strategy-architect">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-semibold mb-6">Need a custom blueprint?</h2>
<p className="text-zinc-500 text-lg">Our AI Strategist will build a custom architecture for your business in seconds.</p>
</div>
<${AgentFinder} />
</section>
</main>
</div>
`;
};
// CRITICAL: Ensure we mount to the correct element ID
const rootElement = document.getElementById('humanizit-app');
if (rootElement) {
ReactDOM.createRoot(rootElement).render(React.createElement(App));
} else {
console.error("Mount element not found! Make sure id='humanizit-app' exists.");
}
</script>
</body>
</html>