File size: 11,508 Bytes
1380c1d |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Case Studies | The Code Company</title>
<meta name="description" content="Examples of our work with clients across industries.">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="bg-navy-900 text-ivory-100 font-sans">
<custom-navbar></custom-navbar>
<main class="pt-20">
<!-- Hero Section -->
<section class="relative py-32 bg-gradient-to-b from-navy-800 to-navy-900">
<div class="container mx-auto px-6 text-center">
<h1 class="text-4xl md:text-6xl font-serif font-bold mb-6 text-gold-500">Case Studies</h1>
<p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto leading-relaxed">
Selected examples of our work with enterprise and government clients.
</p>
</div>
</section>
<!-- Case Studies Grid -->
<section class="py-20 bg-navy-900">
<div class="container mx-auto px-6">
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
<img src="http://static.photos/finance/640x360/1" alt="Financial Services AI" class="w-full h-48 object-cover">
<div class="p-8">
<div class="flex items-center mb-2">
<span class="bg-emerald-900/20 text-emerald-400 text-xs px-3 py-1 rounded-full">Financial Services</span>
</div>
<h3 class="text-xl font-bold mb-3">AI Evaluation Framework</h3>
<p class="text-platinum-400 mb-4">Designed and implemented a comprehensive AI risk assessment framework for a Fortune 100 bank's credit underwriting models.</p>
<ul class="flex flex-wrap gap-2 mb-4">
<li class="bg-navy-700 text-xs px-2 py-1 rounded">Explainability</li>
<li class="bg-navy-700 text-xs px-2 py-1 rounded">Fairness</li>
<li class="bg-navy-700 text-xs px-2 py-1 rounded">Governance</li>
</ul>
<a href="#" class="text-gold-500 font-medium inline-flex items-center group">
Read Case Study <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
</div>
<div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
<img src="http://static.photos/technology/640x360/3" alt="GPU Cloud" class="w-full h-48 object-cover">
<div class="p-8">
<div class="flex items-center mb-2">
<span class="bg-blue-900/20 text-blue-400 text-xs px-3 py-1 rounded-full">Cloud Infrastructure</span>
</div>
<h3 class="text-xl font-bold mb-3">GPU Cloud Architecture</h3>
<p class="text-platinum-400 mb-4">Designed and implemented a multi-cloud GPU infrastructure for an AI research lab, reducing training costs by 40%.</p>
<ul class="flex flex-wrap gap-2 mb-4">
<li class="bg-navy-700 text-xs px-2 py-1 rounded">Kubernetes</li>
<li class="bg-navy-700 text-xs px-2 py-1 rounded">Cost Optimization</li>
<li class="bg-navy-700 text-xs px-2 py-1 rounded">Multi-cloud</li>
</ul>
<a href="#" class="text-gold-500 font-medium inline-flex items-center group">
Read Case Study <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
</div>
<div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
<img src="http://static.photos/legal/640x360/1" alt="Government AI" class="w-full h-48 object-cover">
<div class="p-8">
<div class="flex items-center mb-2">
<span class="bg-purple-900/20 text-purple-400 text-xs px-3 py-1 rounded-full">Government</span>
</div>
<h3 class="text-xl font-bold mb-3">AI Procurement Framework</h3>
<p class="text-platinum-400 mb-4">Developed technical evaluation criteria and procurement strategy for a federal agency's $50M AI initiative.</p>
<ul class="flex flex-wrap gap-2 mb-4">
<li class="bg-navy-700 text-xs px-2 py-1 rounded">Compliance</li>
<li class="bg-navy-700 text-xs px-2 py-1 rounded">Evaluation</li>
<li class="bg-navy-700 text-xs px-2 py-1 rounded">Procurement</li>
</ul>
<a href="#" class="text-gold-500 font-medium inline-flex items-center group">
Read Case Study <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
</div>
<div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
<img src="http://static.photos/medical/640x360/1" alt="Healthcare AI" class="w-full h-48 object-cover">
<div class="p-8">
<div class="flex items-center mb-2">
<span class="bg-red-900/20 text-red-400 text-xs px-3 py-1 rounded-full">Healthcare</span>
</div>
<h3 class="text-xl font-bold mb-3">Clinical AI Monitoring</h3>
<p class="text-platinum-400 mb-4">Implemented model monitoring and drift detection for a hospital system's diagnostic AI suite.</p>
<ul class="flex flex-wrap gap-2 mb-4">
<li class="bg-navy-700 text-xs px-2 py-1 rounded">Monitoring</li>
<li class="bg-navy-700 text-xs px-2 py-1 rounded">Compliance</li>
<li class="bg-navy-700 text-xs px-2 py-1 rounded">Healthcare</li>
</ul>
<a href="#" class="text-gold-500 font-medium inline-flex items-center group">
Read Case Study <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
</div>
<div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
<img src="http://static.photos/technology/640x360/4" alt="Enterprise AI" class="w-full h-48 object-cover">
<div class="p-8">
<div class="flex items-center mb-2">
<span class="bg-yellow-900/20 text-yellow-400 text-xs px-3 py-1 rounded-full">Enterprise</span>
</div>
<h3 class="text-xl font-bold mb-3">AI Technical Strategy</h3>
<p class="text-platinum-400 mb-4">Developed 3-year technical roadmap and hiring plan for a Fortune 500 company's AI transformation.</p>
<ul class="flex flex-wrap gap-2 mb-4">
<li class="bg-navy-700 text-xs px-2 py-1 rounded">Roadmap</li>
<li class="bg-navy-700 text-xs px-2 py-1 rounded">Strategy</li>
<li class="bg-navy-700 text-xs px-2 py-1 rounded">Talent</li>
</ul>
<a href="#" class="text-gold-500 font-medium inline-flex items-center group">
Read Case Study <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
</div>
<div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
<img src="http://static.photos/finance/640x360/2" alt="Fraud Detection" class="w-full h-48 object-cover">
<div class="p-8">
<div class="flex items-center mb-2">
<span class="bg-green-900/20 text-green-400 text-xs px-3 py-1 rounded-full">Fintech</span>
</div>
<h3 class="text-xl font-bold mb-3">Fraud Detection System</h3>
<p class="text-platinum-400 mb-4">Architected real-time fraud detection pipeline processing 10M+ transactions daily with 99.9% uptime.</p>
<ul class="flex flex-wrap gap-2 mb-4">
<li class="bg-navy-700 text-xs px-2 py-1 rounded">Real-time</li>
<li class="bg-navy-700 text-xs px-2 py-1 rounded">Scalability</li>
<li class="bg-navy-700 text-xs px-2 py-1 rounded">Security</li>
</ul>
<a href="#" class="text-gold-500 font-medium inline-flex items-center group">
Read Case Study <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 bg-gradient-to-r from-emerald-900/30 to-navy-900">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-serif font-bold mb-6 text-gold-500">Ready to discuss your project?</h2>
<a href="/contact.html" class="inline-block bg-gold-500 hover:bg-gold-600 text-navy-900 font-bold py-3 px-8 rounded-sm transition-all duration-300 transform hover:scale-105 mt-8">
Contact Us
</a>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>feather.replace();</script>
</body>
</html> |