-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
251 lines (239 loc) · 13.7 KB
/
index.html
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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Papamana - Enterprise Solutions</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
html {
scroll-behavior: smooth;
}
.section-nav {
transition: all 0.3s;
}
.section-nav:hover {
background-color: rgba(37, 99, 235, 0.9);
transform: scale(1.2);
}
</style>
</head>
<body class="bg-gray-50">
<!-- Fixed Top Navigation -->
<nav class="fixed top-0 left-0 right-0 bg-white border-b border-gray-200 z-40">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<span class="text-2xl font-bold text-blue-600">PAPAMANA</span>
</div>
<!-- Desktop Menu -->
<div class="hidden md:flex items-center space-x-8">
<a href="#solutions" class="text-gray-600 hover:text-blue-600">Solutions</a>
<a href="#features" class="text-gray-600 hover:text-blue-600">Features</a>
<a href="#portfolio" class="text-gray-600 hover:text-blue-600">Portfolio</a>
<a href="#contact" class="text-gray-600 hover:text-blue-600">Contact</a>
<!-- <button class="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700">
Get Started
</button> -->
</div>
<!-- Mobile Menu Button -->
<div class="md:hidden flex items-center">
<button id="menuBtn" class="text-gray-600 hover:text-blue-600 focus:outline-none">
<svg class="h-6 w-6 block" id="menuIcon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
<!-- Mobile Menu Panel -->
<div id="mobileMenu" class="hidden md:hidden">
<div class="px-2 pt-2 pb-3 space-y-1 bg-white">
<a href="#solutions" class="block px-3 py-2 text-gray-600 hover:text-blue-600 hover:bg-gray-50 rounded-md">Solutions</a>
<a href="#features" class="block px-3 py-2 text-gray-600 hover:text-blue-600 hover:bg-gray-50 rounded-md">Features</a>
<a href="#portfolio" class="block px-3 py-2 text-gray-600 hover:text-blue-600 hover:bg-gray-50 rounded-md">Portfolio</a>
<a href="#contact" class="block px-3 py-2 text-gray-600 hover:text-blue-600 hover:bg-gray-50 rounded-md">Contact</a>
<!-- <button class="w-full text-left block px-3 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded-md">
Get Started
</button> -->
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="solutions" class="min-h-screen flex items-center bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
Transform Your Enterprise with Smart Solutions
</h1>
<p class="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
Empower your business with our cutting-edge enterprise solutions.
Drive innovation, enhance productivity, and achieve sustainable growth.
</p>
<div class="flex justify-center gap-4">
<!-- <button class="border border-blue-600 text-blue-600 px-8 py-3 rounded-md hover:bg-blue-50">
Learn More
</button> -->
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="min-h-screen flex items-center bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="space-y-16">
<div class="text-center">
<h2 class="text-3xl md:text-5xl font-bold text-gray-900 mb-4">Our Features</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
Discover the powerful features that set us apart
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="text-xl font-semibold mb-4 text-gray-900">High Performance</h3>
<p class="text-gray-600">Optimize your operations with our high-performance enterprise solutions designed for scale.</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<h3 class="text-xl font-semibold mb-4 text-gray-900">Enhanced Security</h3>
<p class="text-gray-600">Protect your business with enterprise-grade security features and compliance measures.</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
</div>
<h3 class="text-xl font-semibold mb-4 text-gray-900">Scalable Solutions</h3>
<p class="text-gray-600">Grow confidently with solutions that scale seamlessly with your business needs.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="min-h-screen flex items-center bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold text-gray-900 mb-4">Our Work</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
Discover how we've helped businesses transform their operations
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Portfolio Items -->
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
<img src="https://media.istockphoto.com/id/1409309637/vector/breaking-news-label-banner-isolated-vector-design.jpg?s=612x612&w=0&k=20&c=JoQHezk8t4hw8xXR1_DtTeWELoUzroAevPHo0Lth2Ow=" alt="Project 1" class="w-full h-48 object-cover"/>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900">News API Provider</h3>
<p class="text-gray-600 mt-2">100% improved efficiency to serve API data.</p>
</div>
</div>
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
<img src="https://miro.medium.com/v2/resize:fit:1400/1*uhhdrhJQHbuah2bKyFFM_Q.png" alt="Project 1" class="w-full h-48 object-cover"/>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900">Bot Trading Crypto</h3>
<p class="text-gray-600 mt-2">Automated crypto trading software that buys and sells based on rules.</p>
</div>
</div>
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTiu8Nms-JNHSq7Ahc0z__G9HsVn3V7zAubWA&s" alt="Project 1" class="w-full h-48 object-cover"/>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900">HR Assessment</h3>
<p class="text-gray-600 mt-2">HR assessment evaluates candidate skills, personality, and job fit efficiently.</p>
</div>
</div>
</div>
<div class="text-center mt-12">
<button class="border border-blue-600 text-blue-600 px-8 py-3 rounded-md hover:bg-blue-50">
View All Case Studies
</button>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="min-h-screen flex items-center bg-blue-600">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl md:text-5xl font-bold text-white mb-4">Ready to Transform Your Business?</h2>
<p class="text-xl text-blue-100 mb-8">Join thousands of enterprises that trust our solutions</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button onclick="window.location.href='mailto:[email protected]'" class="bg-white text-blue-600 px-8 py-3 rounded-md hover:bg-blue-50">
Contact Sales
</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div>
<h4 class="text-lg font-semibold mb-4">Solutions</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Enterprise Suite</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Analytics</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Security</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Support</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Legal</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Security</a></li>
</ul>
</div>
</div> -->
<div class="mt-12 pt-8 border-t border-gray-800 text-center text-gray-400">
<p>© 2024 papamana. All rights reserved.</p>
</div>
</div>
</footer>
<script>
const menuBtn = document.getElementById('menuBtn');
const mobileMenu = document.getElementById('mobileMenu');
menuBtn.addEventListener('click', () => {
// Toggle the menu visibility
mobileMenu.classList.toggle('hidden');
});
// Close menu when clicking a link
const menuLinks = document.querySelectorAll('#mobileMenu a');
menuLinks.forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
// Close menu when clicking outside
document.addEventListener('click', (e) => {
if (!menuBtn.contains(e.target) && !mobileMenu.contains(e.target)) {
mobileMenu.classList.add('hidden');
}
});
</script>
</body>
</html>