wheyy's picture
You are an expert full-stack developer, UI/UX designer, and motion-graphics engineer.
2f9dd2e verified
Raw
History Blame Contribute Delete
6.56 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VORKFLOW Case Studies - AI Transformation Results</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>
</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">Proven AI Transformations</span>
<span class="block bg-gradient-to-r from-accent-blue via-white to-accent-blue bg-clip-text text-transparent">That Deliver Results</span>
</h1>
<p class="text-xl text-white/70 max-w-3xl mx-auto">
Real-world case studies demonstrating how our AI systems drive measurable business outcomes.
</p>
</div>
</section>
<!-- Case Studies 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">Case Studies</h2>
<p class="text-xl text-white/60 max-w-3xl mx-auto">Each case study represents a strategic AI implementation that delivered significant ROI and operational transformation.</p>
</div>
<div class="space-y-8">
<!-- Case Study 1 -->
<div class="case-study-card bg-charcoal/50 p-8 rounded-2xl border border-white/10 hover:border-white/20 transition-all duration-300">
<div class="flex flex-col lg:flex-row gap-8">
<div class="lg:w-2/3">
<div class="flex items-center gap-4 mb-6">
<div class="w-16 h-16 bg-gradient-to-r from-accent-blue to-highlight rounded-xl flex items-center justify-center">
<i data-feather="briefcase" class="w-8 h-8"></i>
</div>
<h3 class="text-2xl font-heading font-semibold mb-4">FinTech Enterprise: Revenue Growth Automation</h3>
<div class="space-y-4">
<div>
<h4 class="text-lg font-semibold mb-2">Challenge</h4>
<p class="text-white/70">
Manual lead qualification processes resulted in slow sales cycles and missed opportunities. The sales team spent 70% of their time on administrative tasks rather than closing deals.
</p>
</div>
<div>
<h4 class="text-lg font-semibold mb-2">Vorkflow AI Solution</h4>
<p class="text-white/70">
Deployed an intelligent AI sales agent that autonomously qualified leads, personalized outreach, and optimized the entire sales pipeline.
</p>
</div>
<div>
<h4 class="text-lg font-semibold mb-2">Impact Metrics</h4>
<ul class="space-y-2 text-white/70">
<li class="flex items-center gap-2">
<i data-feather="arrow-up" class="w-4 h-4 text-highlight"></i>
<span>+42% Revenue Growth</span>
</li>
<li class="flex items-center gap-2">
<i data-feather="clock" class="w-4 h-4 text-highlight"></i>
<span>−65% Time Saved</span>
</li>
<li class="flex items-center gap-2">
<i data-feather="trending-up" class="w-4 h-4 text-highlight"></i>
<span>87% Process Automation Rate</span>
</li>
</ul>
</div>
<div class="lg:w-1/3">
<div class="bg-deep-navy p-6 rounded-xl border border-white/10">
<div class="flex justify-between items-center mb-4">
<span class="font-semibold">Before AI</span>
<span class="font-semibold">After AI</span>
</div>
<div class="h-40 flex items-end gap-4">
<div class="w-full bg-gradient-to-t from-accent-blue/30 to-transparent h-16 rounded-t-lg"></div>
<div class="w-full bg-gradient-to-t from-highlight/50 to-transparent h-32 rounded-t-lg"></div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<custom-footer></custom-footer>
<!-- Scripts -->
<script src="script.js"></script>
<script>
feather.replace();
</script>
</body>
</html>