| <!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"> |
| |
| <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"> |
| |
| <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> |
| |
| <link rel="stylesheet" href="style.css"> |
| |
| <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"> |
| |
| <div class="cursor-follower"></div> |
|
|
| |
| <custom-navbar></custom-navbar> |
|
|
| |
| <main> |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <custom-footer></custom-footer> |
|
|
| |
| <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> |
