Hugging Face's logo

Spaces:
webcoderz
/
the-code-deco-collective
Running

App Files Community
webcoderz commited on
Commit
1380c1d
·
verified ·
1 Parent(s): d5b9733

this looks absolutely amazing, great job!.. now i need the about,capabilities,case studies, insights, and contact pages created

Browse files
Files changed (5) hide show
  1. about.html +112 -0
  2. capabilities.html +125 -0
  3. case-studies.html +165 -0
  4. contact.html +165 -0
  5. insights.html +190 -0
about.html ADDED
@@ -0,0 +1,112 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>About | The Code Company</title>
7
+ <meta name="description" content="Learn about our team and approach to engineering intelligence.">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ </head>
12
+ <body class="bg-navy-900 text-ivory-100 font-sans">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <main class="pt-20">
16
+ <!-- Hero Section -->
17
+ <section class="relative py-32 bg-gradient-to-b from-navy-800 to-navy-900">
18
+ <div class="container mx-auto px-6 text-center">
19
+ <h1 class="text-4xl md:text-6xl font-serif font-bold mb-6 text-gold-500">Our Philosophy</h1>
20
+ <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto leading-relaxed">
21
+ At The Code Company, we believe intelligent systems require intelligent design. Our team of engineers, scientists, and strategists work at the intersection of technology and governance.
22
+ </p>
23
+ </div>
24
+ </section>
25
+
26
+ <!-- Team Section -->
27
+ <section class="py-20 bg-navy-900">
28
+ <div class="container mx-auto px-6">
29
+ <div class="text-center mb-16">
30
+ <h2 class="text-3xl md:text-4xl font-serif font-bold mb-4 text-gold-500">Leadership Team</h2>
31
+ <div class="w-24 h-1 bg-gold-500 mx-auto mb-6"></div>
32
+ <p class="text-platinum-400 max-w-2xl mx-auto">
33
+ Our principals bring decades of combined experience building and governing complex technical systems.
34
+ </p>
35
+ </div>
36
+
37
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-12">
38
+ <div class="bg-navy-800 p-8 rounded-sm hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
39
+ <img src="http://static.photos/people/640x360/1" alt="Cody Webb" class="w-full h-64 object-cover mb-6 rounded-sm">
40
+ <h3 class="text-2xl font-bold mb-2">Cody Webb</h3>
41
+ <p class="text-gold-500 mb-4">Founder & Principal Engineer</p>
42
+ <p class="text-platinum-400">Former AI infrastructure lead at Fortune 500 companies and government research labs.</p>
43
+ </div>
44
+ <div class="bg-navy-800 p-8 rounded-sm hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
45
+ <img src="http://static.photos/people/640x360/2" alt="Alex Chen" class="w-full h-64 object-cover mb-6 rounded-sm">
46
+ <h3 class="text-2xl font-bold mb-2">Alex Chen</h3>
47
+ <p class="text-gold-500 mb-4">Head of Research</p>
48
+ <p class="text-platinum-400">PhD in Computer Science with focus on AI safety and evaluation frameworks.</p>
49
+ </div>
50
+ <div class="bg-navy-800 p-8 rounded-sm hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
51
+ <img src="http://static.photos/people/640x360/3" alt="Sarah Johnson" class="w-full h-64 object-cover mb-6 rounded-sm">
52
+ <h3 class="text-2xl font-bold mb-2">Sarah Johnson</h3>
53
+ <p class="text-gold-500 mb-4">Director of Government Programs</p>
54
+ <p class="text-platinum-400">Former DOD and intelligence community advisor on AI procurement.</p>
55
+ </div>
56
+ </div>
57
+ </div>
58
+ </section>
59
+
60
+ <!-- Values Section -->
61
+ <section class="py-20 bg-navy-800">
62
+ <div class="container mx-auto px-6">
63
+ <div class="text-center mb-16">
64
+ <h2 class="text-3xl md:text-4xl font-serif font-bold mb-4 text-gold-500">Core Values</h2>
65
+ <div class="w-24 h-1 bg-gold-500 mx-auto mb-6"></div>
66
+ </div>
67
+
68
+ <div class="grid md:grid-cols-3 gap-8">
69
+ <div class="text-center">
70
+ <div class="bg-navy-700 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
71
+ <i data-feather="eye" class="text-gold-500 w-8 h-8"></i>
72
+ </div>
73
+ <h3 class="text-xl font-bold mb-3">Transparency</h3>
74
+ <p class="text-platinum-400">We believe systems should be observable, interpretable, and accountable at every layer.</p>
75
+ </div>
76
+ <div class="text-center">
77
+ <div class="bg-navy-700 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
78
+ <i data-feather="shield" class="text-gold-500 w-8 h-8"></i>
79
+ </div>
80
+ <h3 class="text-xl font-bold mb-3">Security</h3>
81
+ <p class="text-platinum-400">We engineer systems with defense-in-depth from the silicon up.</p>
82
+ </div>
83
+ <div class="text-center">
84
+ <div class="bg-navy-700 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
85
+ <i data-feather="trending-up" class="text-gold-500 w-8 h-8"></i>
86
+ </div>
87
+ <h3 class="text-xl font-bold mb-3">Performance</h3>
88
+ <p class="text-platinum-400">We optimize for real-world throughput, not just benchmark numbers.</p>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </section>
93
+
94
+ <!-- CTA Section -->
95
+ <section class="py-20 bg-gradient-to-r from-emerald-900/30 to-navy-900">
96
+ <div class="container mx-auto px-6 text-center">
97
+ <h2 class="text-3xl md:text-4xl font-serif font-bold mb-6 text-gold-500">Ready to engineer intelligence?</h2>
98
+ <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">
99
+ Contact Our Team
100
+ </a>
101
+ </div>
102
+ </section>
103
+ </main>
104
+
105
+ <custom-footer></custom-footer>
106
+
107
+ <script src="components/navbar.js"></script>
108
+ <script src="components/footer.js"></script>
109
+ <script src="script.js"></script>
110
+ <script>feather.replace();</script>
111
+ </body>
112
+ </html>
capabilities.html ADDED
@@ -0,0 +1,125 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Capabilities | The Code Company</title>
7
+ <meta name="description" content="Our core service offerings in AI, cloud, strategy, and government advisory.">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ </head>
12
+ <body class="bg-navy-900 text-ivory-100 font-sans">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <main class="pt-20">
16
+ <!-- Hero Section -->
17
+ <section class="relative py-32 bg-gradient-to-b from-navy-800 to-navy-900">
18
+ <div class="container mx-auto px-6 text-center">
19
+ <h1 class="text-4xl md:text-6xl font-serif font-bold mb-6 text-gold-500">Our Capabilities</h1>
20
+ <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto leading-relaxed">
21
+ We design and implement intelligent systems from silicon to strategy, combining technical depth with governance expertise.
22
+ </p>
23
+ </div>
24
+ </section>
25
+
26
+ <!-- Services Section -->
27
+ <section class="py-20 bg-navy-900" id="ai">
28
+ <div class="container mx-auto px-6">
29
+ <div class="grid md:grid-cols-2 gap-12 items-center mb-20">
30
+ <div>
31
+ <h2 class="text-3xl md:text-4xl font-serif font-bold mb-4 text-gold-500">AI & Data Systems</h2>
32
+ <div class="w-24 h-1 bg-gold-500 mb-6"></div>
33
+ <p class="text-platinum-400 mb-6">
34
+ We architect production-grade AI systems with built-in observability, security, and governance controls. Our evaluation frameworks go beyond accuracy metrics to assess real-world robustness.
35
+ </p>
36
+ <ul class="space-y-3 text-platinum-400">
37
+ <li class="flex items-start"><i data-feather="check" class="text-gold-500 mr-2 w-5 h-5"></i> <span>Explainability and interpretability engineering</span></li>
38
+ <li class="flex items-start"><i data-feather="check" class="text-gold-500 mr-2 w-5 h-5"></i> <span>Custom evaluation frameworks and red teaming</span></li>
39
+ <li class="flex items-start"><i data-feather="check" class="text-gold-500 mr-2 w-5 h-5"></i> <span>Data pipeline and feature store architecture</span></li>
40
+ <li class="flex items-start"><i data-feather="check" class="text-gold-500 mr-2 w-5 h-5"></i> <span>Model monitoring and drift detection</span></li>
41
+ </ul>
42
+ </div>
43
+ <div class="bg-navy-800 p-8 rounded-sm">
44
+ <img src="http://static.photos/technology/640x360/1" alt="AI Systems" class="w-full h-auto rounded-sm">
45
+ </div>
46
+ </div>
47
+
48
+ <div class="grid md:grid-cols-2 gap-12 items-center mb-20" id="cloud">
49
+ <div class="order-2 md:order-1">
50
+ <img src="http://static.photos/technology/640x360/2" alt="Cloud Infrastructure" class="w-full h-auto rounded-sm">
51
+ </div>
52
+ <div class="order-1 md:order-2">
53
+ <h2 class="text-3xl md:text-4xl font-serif font-bold mb-4 text-gold-500">Cloud Infrastructure</h2>
54
+ <div class="w-24 h-1 bg-gold-500 mb-6"></div>
55
+ <p class="text-platinum-400 mb-6">
56
+ We design and optimize GPU cloud architectures for AI workloads, balancing performance, cost, and security requirements.
57
+ </p>
58
+ <ul class="space-y-3 text-platinum-400">
59
+ <li class="flex items-start"><i data-feather="check" class="text-gold-500 mr-2 w-5 h-5"></i> <span>Kubernetes-based GPU cluster design</span></li>
60
+ <li class="flex items-start"><i data-feather="check" class="text-gold-500 mr-2 w-5 h-5"></i> <span>Multi-cloud and hybrid architectures</span></li>
61
+ <li class="flex items-start"><i data-feather="check" class="text-gold-500 mr-2 w-5 h-5"></i> <span>High-performance storage solutions</span></li>
62
+ <li class="flex items-start"><i data-feather="check" class="text-gold-500 mr-2 w-5 h-5"></i> <span>Cost optimization and capacity planning</span></li>
63
+ </ul>
64
+ </div>
65
+ </div>
66
+
67
+ <div class="grid md:grid-cols-2 gap-12 items-center mb-20" id="strategy">
68
+ <div>
69
+ <h2 class="text-3xl md:text-4xl font-serif font-bold mb-4 text-gold-500">Technical Strategy</h2>
70
+ <div class="w-24 h-1 bg-gold-500 mb-6"></div>
71
+ <p class="text-platinum-400 mb-6">
72
+ We help organizations translate AI ambitions into executable roadmaps with clear technical milestones and resourcing requirements.
73
+ </p>
74
+ <ul class="space-y-3 text-platinum-400">
75
+ <li class="flex items-start"><i data-feather="check" class="text-gold-500 mr-2 w-5 h-5"></i> <span>Technology due diligence and vendor evaluation</span></li>
76
+ <li class="flex items-start"><i data-feather="check" class="text-gold-500 mr-2 w-5 h-5"></i> <span>Technical roadmap development</span></li>
77
+ <li class="flex items-start"><i data-feather="check" class="text-gold-500 mr-2 w-5 h-5"></i> <span>Team structure and hiring strategy</span></li>
78
+ <li class="flex items-start"><i data-feather="check" class="text-gold-500 mr-2 w-5 h-5"></i> <span>Technical risk assessment</span></li>
79
+ </ul>
80
+ </div>
81
+ <div class="bg-navy-800 p-8 rounded-sm">
82
+ <img src="http://static.photos/office/640x360/1" alt="Technical Strategy" class="w-full h-auto rounded-sm">
83
+ </div>
84
+ </div>
85
+
86
+ <div class="grid md:grid-cols-2 gap-12 items-center" id="gov">
87
+ <div class="order-2 md:order-1">
88
+ <img src="http://static.photos/office/640x360/2" alt="Government Advisory" class="w-full h-auto rounded-sm">
89
+ </div>
90
+ <div class="order-1 md:order-2">
91
+ <h2 class="text-3xl md:text-4xl font-serif font-bold mb-4 text-gold-500">Government Advisory</h2>
92
+ <div class="w-24 h-1 bg-gold-500 mb-6"></div>
93
+ <p class="text-platinum-400 mb-6">
94
+ We help public sector organizations navigate AI procurement, implementation, and governance challenges.
95
+ </p>
96
+ <ul class="space-y-3 text-platinum-400">
97
+ <li class="flex items-start"><i data-feather="check" class="text-gold-500 mr-2 w-5 h-5"></i> <span>AI procurement strategy and RFPs</span></li>
98
+ <li class="flex items-start"><i data-feather="check" class="text-gold-500 mr-2 w-5 h-5"></i> <span>Compliance and certification guidance</span></li>
99
+ <li class="flex items-start"><i data-feather="check" class="text-gold-500 mr-2 w-5 h-5"></i> <span>Technical policy development</span></li>
100
+ <li class="flex items-start"><i data-feather="check" class="text-gold-500 mr-2 w-5 h-5"></i> <span>Vendor technical evaluations</span></li>
101
+ </ul>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </section>
106
+
107
+ <!-- CTA Section -->
108
+ <section class="py-20 bg-gradient-to-r from-emerald-900/30 to-navy-900">
109
+ <div class="container mx-auto px-6 text-center">
110
+ <h2 class="text-3xl md:text-4xl font-serif font-bold mb-6 text-gold-500">Need specialized expertise?</h2>
111
+ <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">
112
+ Discuss Your Project
113
+ </a>
114
+ </div>
115
+ </section>
116
+ </main>
117
+
118
+ <custom-footer></custom-footer>
119
+
120
+ <script src="components/navbar.js"></script>
121
+ <script src="components/footer.js"></script>
122
+ <script src="script.js"></script>
123
+ <script>feather.replace();</script>
124
+ </body>
125
+ </html>
case-studies.html ADDED
@@ -0,0 +1,165 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Case Studies | The Code Company</title>
7
+ <meta name="description" content="Examples of our work with clients across industries.">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ </head>
12
+ <body class="bg-navy-900 text-ivory-100 font-sans">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <main class="pt-20">
16
+ <!-- Hero Section -->
17
+ <section class="relative py-32 bg-gradient-to-b from-navy-800 to-navy-900">
18
+ <div class="container mx-auto px-6 text-center">
19
+ <h1 class="text-4xl md:text-6xl font-serif font-bold mb-6 text-gold-500">Case Studies</h1>
20
+ <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto leading-relaxed">
21
+ Selected examples of our work with enterprise and government clients.
22
+ </p>
23
+ </div>
24
+ </section>
25
+
26
+ <!-- Case Studies Grid -->
27
+ <section class="py-20 bg-navy-900">
28
+ <div class="container mx-auto px-6">
29
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
30
+ <div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
31
+ <img src="http://static.photos/finance/640x360/1" alt="Financial Services AI" class="w-full h-48 object-cover">
32
+ <div class="p-8">
33
+ <div class="flex items-center mb-2">
34
+ <span class="bg-emerald-900/20 text-emerald-400 text-xs px-3 py-1 rounded-full">Financial Services</span>
35
+ </div>
36
+ <h3 class="text-xl font-bold mb-3">AI Evaluation Framework</h3>
37
+ <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>
38
+ <ul class="flex flex-wrap gap-2 mb-4">
39
+ <li class="bg-navy-700 text-xs px-2 py-1 rounded">Explainability</li>
40
+ <li class="bg-navy-700 text-xs px-2 py-1 rounded">Fairness</li>
41
+ <li class="bg-navy-700 text-xs px-2 py-1 rounded">Governance</li>
42
+ </ul>
43
+ <a href="#" class="text-gold-500 font-medium inline-flex items-center group">
44
+ Read Case Study <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
45
+ </a>
46
+ </div>
47
+ </div>
48
+
49
+ <div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
50
+ <img src="http://static.photos/technology/640x360/3" alt="GPU Cloud" class="w-full h-48 object-cover">
51
+ <div class="p-8">
52
+ <div class="flex items-center mb-2">
53
+ <span class="bg-blue-900/20 text-blue-400 text-xs px-3 py-1 rounded-full">Cloud Infrastructure</span>
54
+ </div>
55
+ <h3 class="text-xl font-bold mb-3">GPU Cloud Architecture</h3>
56
+ <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>
57
+ <ul class="flex flex-wrap gap-2 mb-4">
58
+ <li class="bg-navy-700 text-xs px-2 py-1 rounded">Kubernetes</li>
59
+ <li class="bg-navy-700 text-xs px-2 py-1 rounded">Cost Optimization</li>
60
+ <li class="bg-navy-700 text-xs px-2 py-1 rounded">Multi-cloud</li>
61
+ </ul>
62
+ <a href="#" class="text-gold-500 font-medium inline-flex items-center group">
63
+ Read Case Study <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
64
+ </a>
65
+ </div>
66
+ </div>
67
+
68
+ <div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
69
+ <img src="http://static.photos/legal/640x360/1" alt="Government AI" class="w-full h-48 object-cover">
70
+ <div class="p-8">
71
+ <div class="flex items-center mb-2">
72
+ <span class="bg-purple-900/20 text-purple-400 text-xs px-3 py-1 rounded-full">Government</span>
73
+ </div>
74
+ <h3 class="text-xl font-bold mb-3">AI Procurement Framework</h3>
75
+ <p class="text-platinum-400 mb-4">Developed technical evaluation criteria and procurement strategy for a federal agency's $50M AI initiative.</p>
76
+ <ul class="flex flex-wrap gap-2 mb-4">
77
+ <li class="bg-navy-700 text-xs px-2 py-1 rounded">Compliance</li>
78
+ <li class="bg-navy-700 text-xs px-2 py-1 rounded">Evaluation</li>
79
+ <li class="bg-navy-700 text-xs px-2 py-1 rounded">Procurement</li>
80
+ </ul>
81
+ <a href="#" class="text-gold-500 font-medium inline-flex items-center group">
82
+ Read Case Study <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
83
+ </a>
84
+ </div>
85
+ </div>
86
+
87
+ <div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
88
+ <img src="http://static.photos/medical/640x360/1" alt="Healthcare AI" class="w-full h-48 object-cover">
89
+ <div class="p-8">
90
+ <div class="flex items-center mb-2">
91
+ <span class="bg-red-900/20 text-red-400 text-xs px-3 py-1 rounded-full">Healthcare</span>
92
+ </div>
93
+ <h3 class="text-xl font-bold mb-3">Clinical AI Monitoring</h3>
94
+ <p class="text-platinum-400 mb-4">Implemented model monitoring and drift detection for a hospital system's diagnostic AI suite.</p>
95
+ <ul class="flex flex-wrap gap-2 mb-4">
96
+ <li class="bg-navy-700 text-xs px-2 py-1 rounded">Monitoring</li>
97
+ <li class="bg-navy-700 text-xs px-2 py-1 rounded">Compliance</li>
98
+ <li class="bg-navy-700 text-xs px-2 py-1 rounded">Healthcare</li>
99
+ </ul>
100
+ <a href="#" class="text-gold-500 font-medium inline-flex items-center group">
101
+ Read Case Study <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
102
+ </a>
103
+ </div>
104
+ </div>
105
+
106
+ <div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
107
+ <img src="http://static.photos/technology/640x360/4" alt="Enterprise AI" class="w-full h-48 object-cover">
108
+ <div class="p-8">
109
+ <div class="flex items-center mb-2">
110
+ <span class="bg-yellow-900/20 text-yellow-400 text-xs px-3 py-1 rounded-full">Enterprise</span>
111
+ </div>
112
+ <h3 class="text-xl font-bold mb-3">AI Technical Strategy</h3>
113
+ <p class="text-platinum-400 mb-4">Developed 3-year technical roadmap and hiring plan for a Fortune 500 company's AI transformation.</p>
114
+ <ul class="flex flex-wrap gap-2 mb-4">
115
+ <li class="bg-navy-700 text-xs px-2 py-1 rounded">Roadmap</li>
116
+ <li class="bg-navy-700 text-xs px-2 py-1 rounded">Strategy</li>
117
+ <li class="bg-navy-700 text-xs px-2 py-1 rounded">Talent</li>
118
+ </ul>
119
+ <a href="#" class="text-gold-500 font-medium inline-flex items-center group">
120
+ Read Case Study <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
121
+ </a>
122
+ </div>
123
+ </div>
124
+
125
+ <div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
126
+ <img src="http://static.photos/finance/640x360/2" alt="Fraud Detection" class="w-full h-48 object-cover">
127
+ <div class="p-8">
128
+ <div class="flex items-center mb-2">
129
+ <span class="bg-green-900/20 text-green-400 text-xs px-3 py-1 rounded-full">Fintech</span>
130
+ </div>
131
+ <h3 class="text-xl font-bold mb-3">Fraud Detection System</h3>
132
+ <p class="text-platinum-400 mb-4">Architected real-time fraud detection pipeline processing 10M+ transactions daily with 99.9% uptime.</p>
133
+ <ul class="flex flex-wrap gap-2 mb-4">
134
+ <li class="bg-navy-700 text-xs px-2 py-1 rounded">Real-time</li>
135
+ <li class="bg-navy-700 text-xs px-2 py-1 rounded">Scalability</li>
136
+ <li class="bg-navy-700 text-xs px-2 py-1 rounded">Security</li>
137
+ </ul>
138
+ <a href="#" class="text-gold-500 font-medium inline-flex items-center group">
139
+ Read Case Study <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
140
+ </a>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </section>
146
+
147
+ <!-- CTA Section -->
148
+ <section class="py-20 bg-gradient-to-r from-emerald-900/30 to-navy-900">
149
+ <div class="container mx-auto px-6 text-center">
150
+ <h2 class="text-3xl md:text-4xl font-serif font-bold mb-6 text-gold-500">Ready to discuss your project?</h2>
151
+ <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">
152
+ Contact Us
153
+ </a>
154
+ </div>
155
+ </section>
156
+ </main>
157
+
158
+ <custom-footer></custom-footer>
159
+
160
+ <script src="components/navbar.js"></script>
161
+ <script src="components/footer.js"></script>
162
+ <script src="script.js"></script>
163
+ <script>feather.replace();</script>
164
+ </body>
165
+ </html>
contact.html ADDED
@@ -0,0 +1,165 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Contact | The Code Company</title>
7
+ <meta name="description" content="Get in touch with our team to discuss your project.">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ </head>
12
+ <body class="bg-navy-900 text-ivory-100 font-sans">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <main class="pt-20">
16
+ <!-- Hero Section -->
17
+ <section class="relative py-32 bg-gradient-to-b from-navy-800 to-navy-900">
18
+ <div class="container mx-auto px-6 text-center">
19
+ <h1 class="text-4xl md:text-6xl font-serif font-bold mb-6 text-gold-500">Contact Us</h1>
20
+ <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto leading-relaxed">
21
+ Let's discuss how we can help design and implement your intelligent systems.
22
+ </p>
23
+ </div>
24
+ </section>
25
+
26
+ <!-- Contact Form -->
27
+ <section class="py-20 bg-navy-900">
28
+ <div class="container mx-auto px-6 max-w-4xl">
29
+ <div class="grid md:grid-cols-2 gap-12">
30
+ <div>
31
+ <h2 class="text-3xl font-serif font-bold mb-6 text-gold-500">Get in Touch</h2>
32
+ <p class="text-platinum-400 mb-8">
33
+ Whether you're exploring AI implementation, need infrastructure guidance, or require government advisory services, our team can help.
34
+ </p>
35
+
36
+ <div class="space-y-6">
37
+ <div class="flex items-start">
38
+ <div class="bg-navy-700 w-12 h-12 rounded-full flex items-center justify-center mr-4">
39
+ <i data-feather="mail" class="text-gold-500 w-5 h-5"></i>
40
+ </div>
41
+ <div>
42
+ <h3 class="text-lg font-bold mb-1">Email</h3>
43
+ <a href="mailto:contact@thecodecompany.ai" class="text-platinum-400 hover:text-gold-500 transition-colors">contact@thecodecompany.ai</a>
44
+ </div>
45
+ </div>
46
+
47
+ <div class="flex items-start">
48
+ <div class="bg-navy-700 w-12 h-12 rounded-full flex items-center justify-center mr-4">
49
+ <i data-feather="phone" class="text-gold-500 w-5 h-5"></i>
50
+ </div>
51
+ <div>
52
+ <h3 class="text-lg font-bold mb-1">Phone</h3>
53
+ <a href="tel:+18005551234" class="text-platinum-400 hover:text-gold-500 transition-colors">+1 (800) 555-1234</a>
54
+ </div>
55
+ </div>
56
+
57
+ <div class="flex items-start">
58
+ <div class="bg-navy-700 w-12 h-12 rounded-full flex items-center justify-center mr-4">
59
+ <i data-feather="map-pin" class="text-gold-500 w-5 h-5"></i>
60
+ </div>
61
+ <div>
62
+ <h3 class="text-lg font-bold mb-1">Office</h3>
63
+ <p class="text-platinum-400">123 Engineering Lane<br>San Francisco, CA 94107</p>
64
+ </div>
65
+ </div>
66
+
67
+ <div class="flex items-start">
68
+ <div class="bg-navy-700 w-12 h-12 rounded-full flex items-center justify-center mr-4">
69
+ <i data-feather="clock" class="text-gold-500 w-5 h-5"></i>
70
+ </div>
71
+ <div>
72
+ <h3 class="text-lg font-bold mb-1">Hours</h3>
73
+ <p class="text-platinum-400">Monday - Friday<br>9:00 AM - 5:00 PM PST</p>
74
+ </div>
75
+ </div>
76
+ </div>
77
+
78
+ <div class="mt-10">
79
+ <h3 class="text-lg font-bold mb-4 text-gold-500">Follow Us</h3>
80
+ <div class="flex gap-4">
81
+ <a href="#" class="bg-navy-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-gold-500 hover:text-navy-900 transition-colors">
82
+ <i data-feather="linkedin"></i>
83
+ </a>
84
+ <a href="#" class="bg-navy-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-gold-500 hover:text-navy-900 transition-colors">
85
+ <i data-feather="twitter"></i>
86
+ </a>
87
+ <a href="#" class="bg-navy-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-gold-500 hover:text-navy-900 transition-colors">
88
+ <i data-feather="github"></i>
89
+ </a>
90
+ </div>
91
+ </div>
92
+ </div>
93
+
94
+ <div class="bg-navy-800 p-8 rounded-sm">
95
+ <form class="space-y-6">
96
+ <div>
97
+ <label for="name" class="block text-platinum-400 mb-2">Full Name</label>
98
+ <input type="text" id="name" class="w-full bg-navy-700 border border-navy-600 text-platinum-400 px-4 py-3 rounded-sm focus:outline-none focus:ring-2 focus:ring-gold-500">
99
+ </div>
100
+
101
+ <div>
102
+ <label for="email" class="block text-platinum-400 mb-2">Email</label>
103
+ <input type="email" id="email" class="w-full bg-navy-700 border border-navy-600 text-platinum-400 px-4 py-3 rounded-sm focus:outline-none focus:ring-2 focus:ring-gold-500">
104
+ </div>
105
+
106
+ <div>
107
+ <label for="company" class="block text-platinum-400 mb-2">Company</label>
108
+ <input type="text" id="company" class="w-full bg-navy-700 border border-navy-600 text-platinum-400 px-4 py-3 rounded-sm focus:outline-none focus:ring-2 focus:ring-gold-500">
109
+ </div>
110
+
111
+ <div>
112
+ <label for="service" class="block text-platinum-400 mb-2">Service Interest</label>
113
+ <select id="service" class="w-full bg-navy-700 border border-navy-600 text-platinum-400 px-4 py-3 rounded-sm focus:outline-none focus:ring-2 focus:ring-gold-500">
114
+ <option>Select a service</option>
115
+ <option>AI & Data Systems</option>
116
+ <option>Cloud Infrastructure</option>
117
+ <option>Technical Strategy</option>
118
+ <option>Government Advisory</option>
119
+ <option>Other</option>
120
+ </select>
121
+ </div>
122
+
123
+ <div>
124
+ <label for="message" class="block text-platinum-400 mb-2">Message</label>
125
+ <textarea id="message" rows="4" class="w-full bg-navy-700 border border-navy-600 text-platinum-400 px-4 py-3 rounded-sm focus:outline-none focus:ring-2 focus:ring-gold-500"></textarea>
126
+ </div>
127
+
128
+ <button type="submit" class="w-full 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-[1.02]">
129
+ Submit Message
130
+ </button>
131
+ </form>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </section>
136
+
137
+ <!-- Map Section -->
138
+ <section class="relative h-96 bg-navy-800 overflow-hidden">
139
+ <div class="absolute inset-0 bg-gradient-to-r from-navy-900/70 to-navy-900/30 z-10"></div>
140
+ <div class="absolute inset-0 flex items-center justify-center z-20">
141
+ <div class="text-center px-6">
142
+ <h3 class="text-2xl font-serif font-bold mb-4 text-gold-500">Visit Our Office</h3>
143
+ <p class="text-platinum-400 mb-6 max-w-md mx-auto">Schedule a meeting with our team in San Francisco.</p>
144
+ <a href="#" class="inline-block border border-gold-500 text-gold-500 hover:bg-gold-500/10 font-bold py-3 px-8 rounded-sm transition-all duration-300">
145
+ Request Meeting
146
+ </a>
147
+ </div>
148
+ </div>
149
+ <div class="absolute inset-0 bg-gray-800">
150
+ <!-- Map placeholder -->
151
+ <div class="w-full h-full flex items-center justify-center text-platinum-400">
152
+ <i data-feather="map" class="w-16 h-16 opacity-20"></i>
153
+ </div>
154
+ </div>
155
+ </section>
156
+ </main>
157
+
158
+ <custom-footer></custom-footer>
159
+
160
+ <script src="components/navbar.js"></script>
161
+ <script src="components/footer.js"></script>
162
+ <script src="script.js"></script>
163
+ <script>feather.replace();</script>
164
+ </body>
165
+ </html>
insights.html ADDED
@@ -0,0 +1,190 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Insights | The Code Company</title>
7
+ <meta name="description" content="Thought leadership on AI, infrastructure, and governance.">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ </head>
12
+ <body class="bg-navy-900 text-ivory-100 font-sans">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <main class="pt-20">
16
+ <!-- Hero Section -->
17
+ <section class="relative py-32 bg-gradient-to-b from-navy-800 to-navy-900">
18
+ <div class="container mx-auto px-6 text-center">
19
+ <h1 class="text-4xl md:text-6xl font-serif font-bold mb-6 text-gold-500">Insights</h1>
20
+ <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto leading-relaxed">
21
+ Perspectives on engineering intelligent systems — from technical architectures to governance frameworks.
22
+ </p>
23
+ </div>
24
+ </section>
25
+
26
+ <!-- Featured Post -->
27
+ <section class="py-16 bg-navy-900">
28
+ <div class="container mx-auto px-6">
29
+ <div class="bg-navy-800 rounded-sm overflow-hidden grid md:grid-cols-2">
30
+ <div class="p-12">
31
+ <div class="flex items-center mb-4">
32
+ <span class="bg-gold-500/10 text-gold-500 text-xs px-3 py-1 rounded-full">Featured</span>
33
+ <span class="text-platinum-400 text-sm ml-4">June 2023</span>
34
+ </div>
35
+ <h2 class="text-3xl md:text-4xl font-serif font-bold mb-4">Engineering AI Observability</h2>
36
+ <p class="text-platinum-400 mb-6">
37
+ Modern AI systems require new approaches to monitoring that go beyond traditional metrics. We examine the architectural patterns and tooling needed for production-grade observability.
38
+ </p>
39
+ <div class="flex flex-wrap gap-2 mb-8">
40
+ <span class="bg-navy-700 text-xs px-2 py-1 rounded">AI Engineering</span>
41
+ <span class="bg-navy-700 text-xs px-2 py-1 rounded">Observability</span>
42
+ <span class="bg-navy-700 text-xs px-2 py-1 rounded">Monitoring</span>
43
+ </div>
44
+ <a href="#" class="text-gold-500 font-medium inline-flex items-center group">
45
+ Read Article <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
46
+ </a>
47
+ </div>
48
+ <div class="hidden md:block">
49
+ <img src="http://static.photos/technology/640x360/5" alt="AI Observability" class="w-full h-full object-cover">
50
+ </div>
51
+ </div>
52
+ </div>
53
+ </section>
54
+
55
+ <!-- Insights Grid -->
56
+ <section class="py-20 bg-navy-900">
57
+ <div class="container mx-auto px-6">
58
+ <div class="flex justify-between items-center mb-12">
59
+ <h2 class="text-2xl md:text-3xl font-serif font-bold text-gold-500">Latest Perspectives</h2>
60
+ <div class="flex items-center">
61
+ <span class="text-platinum-400 mr-3">Filter by topic:</span>
62
+ <select class="bg-navy-800 border border-navy-700 text-platinum-400 rounded-sm px-4 py-2">
63
+ <option>All Topics</option>
64
+ <option>AI Engineering</option>
65
+ <option>Cloud Infrastructure</option>
66
+ <option>Technical Strategy</option>
67
+ <option>Government Policy</option>
68
+ </select>
69
+ </div>
70
+ </div>
71
+
72
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
73
+ <div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
74
+ <img src="http://static.photos/technology/640x360/6" alt="GPU Infrastructure" class="w-full h-48 object-cover">
75
+ <div class="p-8">
76
+ <div class="flex items-center mb-2">
77
+ <span class="text-platinum-400 text-sm">May 2023</span>
78
+ </div>
79
+ <h3 class="text-xl font-bold mb-3">Optimizing GPU Cloud Costs</h3>
80
+ <p class="text-platinum-400 mb-4">Practical strategies for reducing cloud GPU spend while maintaining performance for AI workloads.</p>
81
+ <a href="#" class="text-gold-500 font-medium inline-flex items-center group">
82
+ Read More <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
83
+ </a>
84
+ </div>
85
+ </div>
86
+
87
+ <div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
88
+ <img src="http://static.photos/legal/640x360/2" alt="AI Governance" class="w-full h-48 object-cover">
89
+ <div class="p-8">
90
+ <div class="flex items-center mb-2">
91
+ <span class="text-platinum-400 text-sm">April 2023</span>
92
+ </div>
93
+ <h3 class="text-xl font-bold mb-3">AI Procurement Best Practices</h3>
94
+ <p class="text-platinum-400 mb-4">How government agencies can structure AI acquisitions to ensure technical and ethical requirements are met.</p>
95
+ <a href="#" class="text-gold-500 font-medium inline-flex items-center group">
96
+ Read More <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
97
+ </a>
98
+ </div>
99
+ </div>
100
+
101
+ <div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
102
+ <img src="http://static.photos/technology/640x360/7" alt="AI Testing" class="w-full h-48 object-cover">
103
+ <div class="p-8">
104
+ <div class="flex items-center mb-2">
105
+ <span class="text-platinum-400 text-sm">March 2023</span>
106
+ </div>
107
+ <h3 class="text-xl font-bold mb-3">Red Teaming AI Systems</h3>
108
+ <p class="text-platinum-400 mb-4">Our framework for adversarial testing of production AI systems to uncover vulnerabilities.</p>
109
+ <a href="#" class="text-gold-500 font-medium inline-flex items-center group">
110
+ Read More <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
111
+ </a>
112
+ </div>
113
+ </div>
114
+
115
+ <div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
116
+ <img src="http://static.photos/technology/640x360/8" alt="AI Strategy" class="w-full h-48 object-cover">
117
+ <div class="p-8">
118
+ <div class="flex items-center mb-2">
119
+ <span class="text-platinum-400 text-sm">February 2023</span>
120
+ </div>
121
+ <h3 class="text-xl font-bold mb-3">Technical Debt in AI Systems</h3>
122
+ <p class="text-platinum-400 mb-4">Identifying and addressing technical debt patterns unique to machine learning systems.</p>
123
+ <a href="#" class="text-gold-500 font-medium inline-flex items-center group">
124
+ Read More <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
125
+ </a>
126
+ </div>
127
+ </div>
128
+
129
+ <div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
130
+ <img src="http://static.photos/technology/640x360/9" alt="Kubernetes" class="w-full h-48 object-cover">
131
+ <div class="p-8">
132
+ <div class="flex items-center mb-2">
133
+ <span class="text-platinum-400 text-sm">January 2023</span>
134
+ </div>
135
+ <h3 class="text-xl font-bold mb-3">Kubernetes for AI Workloads</h3>
136
+ <p class="text-platinum-400 mb-4">Architecture patterns and operational considerations for running GPU workloads at scale.</p>
137
+ <a href="#" class="text-gold-500 font-medium inline-flex items-center group">
138
+ Read More <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
139
+ </a>
140
+ </div>
141
+ </div>
142
+
143
+ <div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
144
+ <img src="http://static.photos/legal/640x360/3" alt="AI Policy" class="w-full h-48 object-cover">
145
+ <div class="p-8">
146
+ <div class="flex items-center mb-2">
147
+ <span class="text-platinum-400 text-sm">December 2022</span>
148
+ </div>
149
+ <h3 class="text-xl font-bold mb-3">AI Governance Frameworks</h3>
150
+ <p class="text-platinum-400 mb-4">Comparing technical implementations of emerging AI governance requirements.</p>
151
+ <a href="#" class="text-gold-500 font-medium inline-flex items-center group">
152
+ Read More <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
153
+ </a>
154
+ </div>
155
+ </div>
156
+ </div>
157
+
158
+ <div class="flex justify-center mt-16">
159
+ <button class="border border-gold-500 text-gold-500 hover:bg-gold-500/10 font-bold py-3 px-8 rounded-sm transition-all duration-300">
160
+ Load More Articles
161
+ </button>
162
+ </div>
163
+ </div>
164
+ </section>
165
+
166
+ <!-- Newsletter Section -->
167
+ <section class="py-20 bg-navy-800">
168
+ <div class="container mx-auto px-6 max-w-4xl text-center">
169
+ <h2 class="text-3xl md:text-4xl font-serif font-bold mb-6 text-gold-500">Stay Informed</h2>
170
+ <p class="text-platinum-400 mb-8 max-w-2xl mx-auto">
171
+ Subscribe to our newsletter for the latest insights on engineering intelligent systems.
172
+ </p>
173
+ <form class="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto">
174
+ <input type="email" placeholder="Your email address" class="flex-grow bg-navy-700 border border-navy-600 text-platinum-400 px-4 py-3 rounded-sm focus:outline-none focus:ring-2 focus:ring-gold-500">
175
+ <button type="submit" class="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">
176
+ Subscribe
177
+ </button>
178
+ </form>
179
+ </div>
180
+ </section>
181
+ </main>
182
+
183
+ <custom-footer></custom-footer>
184
+
185
+ <script src="components/navbar.js"></script>
186
+ <script src="components/footer.js"></script>
187
+ <script src="script.js"></script>
188
+ <script>feather.replace();</script>
189
+ </body>
190
+ </html>