File size: 9,968 Bytes
2f9dd2e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VORKFLOW Services - AI Consulting & Engineering</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<!-- Libraries -->
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<!-- Web Components -->
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="components/service-card.js"></script>
</head>
<body class="bg-deep-navy text-off-white font-body">
<!-- Cursor Follower -->
<div class="cursor-follower"></div>
<!-- Navigation -->
<custom-navbar></custom-navbar>
<!-- Main Content -->
<main>
<!-- Hero Section -->
<section class="relative py-24 px-4 overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-charcoal/30 to-deep-navy/30"></div>
<div class="relative z-10 max-w-6xl mx-auto text-center">
<h1 class="text-4xl md:text-6xl font-heading font-bold mb-6">
<span class="block">AI Services Engineered</span>
<span class="block bg-gradient-to-r from-accent-blue via-white to-accent-blue bg-clip-text text-transparent">For Maximum Impact</span>
</h1>
<p class="text-xl text-white/70 max-w-3xl mx-auto">
We architect, deploy, and optimize AI systems that transform business operations into automated, data-driven powerhouses.
</p>
</div>
</section>
<!-- Services Grid -->
<section class="py-24 px-4">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-heading font-bold mb-6">Our AI Service Portfolio</h2>
<p class="text-xl text-white/60 max-w-3xl mx-auto">Each service is designed to deliver measurable ROI through intelligent automation and data-driven insights.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<service-card
title="AI Revenue & Sales Automation"
description="Deploy intelligent agents that autonomously qualify leads, personalize outreach at scale, and optimize sales pipelines—resulting in higher conversion rates and accelerated revenue growth."
icon="trending-up"
></service-card>
<service-card
title="Workflow Automation Engineering"
description="Design and implement AI-driven workflow systems that eliminate manual tasks, reduce errors, and accelerate process completion across departments."
icon="refresh-cw"
></service-card>
<service-card
title="Predictive Analytics & Performance Intelligence"
description="Build predictive models that forecast trends, identify opportunities, and provide actionable insights for strategic decision-making."
icon="bar-chart-2"
></service-card>
<service-card
title="AI Agents for Teams"
description="Create specialized AI assistants that augment human capabilities across departments—from customer support to R&D and beyond."
icon="users"
></service-card>
<service-card
title="Enterprise AI Architecture"
description="Design scalable, secure AI infrastructure that integrates seamlessly with existing enterprise systems and workflows."
icon="layers"
></service-card>
<service-card
title="AI Training, Deployment, Strategy Consulting"
description="Provide end-to-end consulting—from AI readiness assessment to full-scale deployment, optimization, and ongoing support."
icon="target"
></service-card>
</div>
</div>
</section>
<!-- Service Details Accordion -->
<section class="py-24 px-4 bg-charcoal">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-heading font-bold mb-6">Service Details & Capabilities</h2>
<p class="text-xl text-white/60 max-w-3xl mx-auto">Deep dive into each service's capabilities, deliverables, and expected outcomes.</p>
</div>
<div class="space-y-4">
<div class="service-accordion">
<button class="accordion-btn w-full text-left p-6 bg-deep-navy/50 rounded-xl border border-white/10 hover:border-white/20 transition-all duration-300" onclick="toggleAccordion(this)">
<div class="flex justify-between items-center">
<h3 class="text-2xl font-heading font-semibold">AI Revenue & Sales Automation</h3>
<i data-feather="chevron-down" class="transition-transform duration-300"></i>
</div>
<div class="accordion-content hidden mt-4 p-6 bg-deep-navy/30 rounded-xl border border-white/10">
<ul class="space-y-3 text-white/70">
<li class="flex items-center gap-3">
<i data-feather="check" class="w-5 h-5 text-highlight"></i>
<span>Intelligent lead scoring and prioritization</span>
</li>
<li class="flex items-center gap-3">
<i data-feather="check" class="w-5 h-5 text-highlight"></i>
<span>Automated personalized outreach at scale</span>
</li>
<li class="flex items-center gap-3">
<i data-feather="check" class="w-5 h-5 text-highlight"></i>
<span>Sales pipeline optimization and forecasting</span>
</li>
<li class="flex items-center gap-3">
<i data-feather="check" class="w-5 h-5 text-highlight"></i>
<span>Average revenue increase: 42%</span>
</li>
</ul>
</div>
</div>
<div class="service-accordion">
<button class="accordion-btn w-full text-left p-6 bg-deep-navy/50 rounded-xl border border-white/10 hover:border-white/20 transition-all duration-300" onclick="toggleAccordion(this)">
<div class="flex justify-between items-center">
<h3 class="text-2xl font-heading font-semibold">Workflow Automation Engineering</h3>
<i data-feather="chevron-down" class="transition-transform duration-300"></i>
</div>
<div class="accordion-content hidden mt-4 p-6 bg-deep-navy/30 rounded-xl border border-white/10">
<ul class="space-y-3 text-white/70">
<li class="flex items-center gap-3">
<i data-feather="check" class="w-5 h-5 text-highlight"></i>
<span>Process mapping and bottleneck identification</span>
</li>
<li class="flex items-center gap-3">
<i data-feather="check" class="w-5 h-5 text-highlight"></i>
<span>Intelligent task routing and prioritization</span>
</li>
<li class="flex items-center gap-3">
<i data-feather="check" class="w-5 h-5 text-highlight"></i>
<span>Average time saved: 65%</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<custom-footer></custom-footer>
<!-- Scripts -->
<script src="script.js"></script>
<script>
feather.replace();
function toggleAccordion(button) {
const content = button.nextElementSibling;
const icon = button.querySelector('i');
content.classList.toggle('hidden');
const isOpen = !content.classList.contains('hidden');
if (isOpen) {
icon.style.transform = 'rotate(180deg)';
} else {
icon.style.transform = 'rotate(0deg)';
}
}
</script>
</body>
</html> |