Hugging Face's logo

Spaces:
t7353103
/
deepsite-project-qo8ya
Running

App Files Community
t7353103 commited on
Commit
08c30ba
·
verified ·
1 Parent(s): 8c0c594

Initial DeepSite commit

Browse files
Files changed (5) hide show
  1. README.md +9 -6
  2. about.html +314 -0
  3. index.html +334 -19
  4. portfolio.html +227 -0
  5. services.html +353 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Deepsite Project Qo8ya
3
- emoji: 👀
4
- colorFrom: green
5
- colorTo: yellow
6
  sdk: static
7
- pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: DeepSite Project
3
+ colorFrom: yellow
4
+ colorTo: green
 
5
  sdk: static
6
+ emoji: 🎉
7
+ tags:
8
+ - deepsite-v4
9
  ---
10
 
11
+ # DeepSite Project
12
+
13
+ This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.
about.html ADDED
@@ -0,0 +1,314 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 Us | BusinessHub - Digital Transformation Experts</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ body { font-family: 'Inter', sans-serif; }
12
+ .team-card { transition: all 0.3s ease; }
13
+ .team-card:hover { transform: translateY(-5px); }
14
+ </style>
15
+ </head>
16
+ <body class="bg-gray-50 text-gray-800">
17
+
18
+ <!-- Navigation -->
19
+ <nav class="bg-white shadow-md fixed w-full z-50">
20
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
21
+ <div class="flex justify-between h-16">
22
+ <div class="flex items-center">
23
+ <a href="index.html" class="flex items-center gap-2">
24
+ <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
25
+ <i data-lucide="building-2" class="w-5 h-5 text-white"></i>
26
+ </div>
27
+ <span class="font-bold text-xl text-gray-900">BusinessHub</span>
28
+ </a>
29
+ </div>
30
+
31
+ <div class="hidden md:flex items-center space-x-8">
32
+ <a href="index.html" class="text-gray-600 hover:text-blue-600 font-medium transition">Home</a>
33
+ <a href="about.html" class="text-blue-600 font-medium">About</a>
34
+ <a href="services.html" class="text-gray-600 hover:text-blue-600 font-medium transition">Services</a>
35
+ <a href="portfolio.html" class="text-gray-600 hover:text-blue-600 font-medium transition">Results</a>
36
+ <a href="contact.html" class="bg-blue-600 text-white px-5 py-2 rounded-lg font-medium hover:bg-blue-700 transition">Contact Us</a>
37
+ </div>
38
+
39
+ <div class="md:hidden flex items-center">
40
+ <button onclick="toggleMenu()" class="text-gray-600 hover:text-gray-900 focus:outline-none">
41
+ <i data-lucide="menu" class="w-6 h-6"></i>
42
+ </button>
43
+ </div>
44
+ </div>
45
+ </div>
46
+
47
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
48
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
49
+ <a href="index.html" class="block px-3 py-2 text-gray-600 font-medium hover:bg-gray-50 rounded-md">Home</a>
50
+ <a href="about.html" class="block px-3 py-2 text-blue-600 font-medium bg-blue-50 rounded-md">About</a>
51
+ <a href="services.html" class="block px-3 py-2 text-gray-600 font-medium hover:bg-gray-50 rounded-md">Services</a>
52
+ <a href="portfolio.html" class="block px-3 py-2 text-gray-600 font-medium hover:bg-gray-50 rounded-md">Results</a>
53
+ <a href="contact.html" class="block px-3 py-2 text-gray-600 font-medium hover:bg-gray-50 rounded-md">Contact</a>
54
+ </div>
55
+ </div>
56
+ </nav>
57
+
58
+ <!-- Page Header -->
59
+ <section class="bg-gray-900 text-white pt-32 pb-20 px-4 sm:px-6 lg:px-8">
60
+ <div class="max-w-7xl mx-auto text-center">
61
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">About BusinessHub</h1>
62
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">We're on a mission to democratize digital transformation for businesses of all sizes. From local shops to enterprise companies, we make going online simple, affordable, and profitable.</p>
63
+ </div>
64
+ </section>
65
+
66
+ <!-- Our Story -->
67
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-white">
68
+ <div class="max-w-7xl mx-auto">
69
+ <div class="grid md:grid-cols-2 gap-12 items-center">
70
+ <div>
71
+ <img src="http://static.photos/office/800x600/42" alt="BusinessHub Team" class="rounded-2xl shadow-2xl w-full object-cover">
72
+ </div>
73
+ <div>
74
+ <h2 class="text-3xl font-bold text-gray-900 mb-6">Our Story</h2>
75
+ <p class="text-gray-600 mb-4 text-lg leading-relaxed">
76
+ BusinessHub was founded in 2018 when we noticed a troubling gap: while large corporations could afford expensive digital agencies, small and medium businesses were being left behind in the digital revolution.
77
+ </p>
78
+ <p class="text-gray-600 mb-4 text-lg leading-relaxed">
79
+ We started with a simple belief: every business deserves access to world-class digital tools and expertise. What began as a small consulting firm has grown into a comprehensive digital transformation platform serving over 500 businesses across 20 countries.
80
+ </p>
81
+ <p class="text-gray-600 mb-6 text-lg leading-relaxed">
82
+ Today, we combine cutting-edge AI technology with hands-on human expertise to deliver solutions that are both powerful and practical.
83
+ </p>
84
+ <div class="grid grid-cols-2 gap-6">
85
+ <div class="border-l-4 border-blue-600 pl-4">
86
+ <div class="text-3xl font-bold text-blue-600">2018</div>
87
+ <div class="text-gray-600">Year Founded</div>
88
+ </div>
89
+ <div class="border-l-4 border-blue-600 pl-4">
90
+ <div class="text-3xl font-bold text-blue-600">75+</div>
91
+ <div class="text-gray-600">Expert Consultants</div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </section>
98
+
99
+ <!-- What Makes Us Different -->
100
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-blue-50">
101
+ <div class="max-w-7xl mx-auto">
102
+ <div class="text-center mb-16">
103
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Why Businesses Choose Us</h2>
104
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">We don't just build websites or run ads—we become your long-term digital partner.</p>
105
+ </div>
106
+
107
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
108
+ <div class="bg-white p-6 rounded-xl shadow-md">
109
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
110
+ <i data-lucide="handshake" class="w-6 h-6 text-blue-600"></i>
111
+ </div>
112
+ <h3 class="text-lg font-bold text-gray-900 mb-2">Partnership Approach</h3>
113
+ <p class="text-gray-600 text-sm">We work alongside you, not just for you. Your success is our success.</p>
114
+ </div>
115
+
116
+ <div class="bg-white p-6 rounded-xl shadow-md">
117
+ <div class="w-12 h-12 bg-cyan-100 rounded-lg flex items-center justify-center mb-4">
118
+ <i data-lucide="zap" class="w-6 h-6 text-cyan-600"></i>
119
+ </div>
120
+ <h3 class="text-lg font-bold text-gray-900 mb-2">AI-Powered Tools</h3>
121
+ <p class="text-gray-600 text-sm">Early access to AI solutions that automate tasks and unlock growth.</p>
122
+ </div>
123
+
124
+ <div class="bg-white p-6 rounded-xl shadow-md">
125
+ <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
126
+ <i data-lucide="users" class="w-6 h-6 text-purple-600"></i>
127
+ </div>
128
+ <h3 class="text-lg font-bold text-gray-900 mb-2">Industry Expertise</h3>
129
+ <p class="text-gray-600 text-sm">Specialized knowledge across retail, hospitality, professional services, and more.</p>
130
+ </div>
131
+
132
+ <div class="bg-white p-6 rounded-xl shadow-md">
133
+ <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
134
+ <i data-lucide="shield-check" class="w-6 h-6 text-green-600"></i>
135
+ </div>
136
+ <h3 class="text-lg font-bold text-gray-900 mb-2">Results Guaranteed</h3>
137
+ <p class="text-gray-600 text-sm">We measure success by your ROI. No fluff, just measurable outcomes.</p>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </section>
142
+
143
+ <!-- Our Expertise Areas -->
144
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-white">
145
+ <div class="max-w-7xl mx-auto">
146
+ <div class="text-center mb-16">
147
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Industries We Serve</h2>
148
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Tailored solutions for every sector</p>
149
+ </div>
150
+
151
+ <div class="grid md:grid-cols-3 gap-6">
152
+ <div class="bg-gray-50 p-6 rounded-xl border border-gray-100 text-center">
153
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
154
+ <i data-lucide="shopping-bag" class="w-8 h-8 text-blue-600"></i>
155
+ </div>
156
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Retail & E-commerce</h3>
157
+ <p class="text-gray-600">Online stores, inventory management, and omnichannel retail solutions.</p>
158
+ </div>
159
+
160
+ <div class="bg-gray-50 p-6 rounded-xl border border-gray-100 text-center">
161
+ <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
162
+ <i data-lucide="utensils" class="w-8 h-8 text-orange-600"></i>
163
+ </div>
164
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Restaurants & Hospitality</h3>
165
+ <p class="text-gray-600">Online ordering, reservation systems, and delivery integration.</p>
166
+ </div>
167
+
168
+ <div class="bg-gray-50 p-6 rounded-xl border border-gray-100 text-center">
169
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
170
+ <i data-lucide="briefcase" class="w-8 h-8 text-purple-600"></i>
171
+ </div>
172
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Professional Services</h3>
173
+ <p class="text-gray-600">Booking systems, client portals, and credibility-building websites.</p>
174
+ </div>
175
+
176
+ <div class="bg-gray-50 p-6 rounded-xl border border-gray-100 text-center">
177
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
178
+ <i data-lucide="factory" class="w-8 h-8 text-green-600"></i>
179
+ </div>
180
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Manufacturing</h3>
181
+ <p class="text-gray-600">B2B portals, supply chain digitization, and wholesale platforms.</p>
182
+ </div>
183
+
184
+ <div class="bg-gray-50 p-6 rounded-xl border border-gray-100 text-center">
185
+ <div class="w-16 h-16 bg-cyan-100 rounded-full flex items-center justify-center mx-auto mb-4">
186
+ <i data-lucide="heart-pulse" class="w-8 h-8 text-cyan-600"></i>
187
+ </div>
188
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Healthcare</h3>
189
+ <p class="text-gray-600">HIPAA-compliant telehealth, scheduling, and patient management.</p>
190
+ </div>
191
+
192
+ <div class="bg-gray-50 p-6 rounded-xl border border-gray-100 text-center">
193
+ <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-4">
194
+ <i data-lucide="graduation-cap" class="w-8 h-8 text-pink-600"></i>
195
+ </div>
196
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Education & Training</h3>
197
+ <p class="text-gray-600">LMS platforms, course selling, and virtual classroom setup.</p>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </section>
202
+
203
+ <!-- Team Section -->
204
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50">
205
+ <div class="max-w-7xl mx-auto">
206
+ <div class="text-center mb-16">
207
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Meet Our Leadership</h2>
208
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Experienced professionals dedicated to your success</p>
209
+ </div>
210
+
211
+ <div class="grid md:grid-cols-3 gap-8">
212
+ <div class="team-card bg-white rounded-2xl overflow-hidden shadow-md">
213
+ <img src="http://static.photos/people/400x400/101" alt="CEO" class="w-full h-64 object-cover">
214
+ <div class="p-6">
215
+ <h3 class="text-xl font-bold text-gray-900">Michael Torres</h3>
216
+ <p class="text-blue-600 font-medium mb-3">CEO & Founder</p>
217
+ <p class="text-gray-600 text-sm mb-4">Former digital strategist for Fortune 500 companies, now focused on helping SMBs compete in the digital age.</p>
218
+ <div class="flex gap-3">
219
+ <a href="#" class="text-gray-400 hover:text-blue-600"><i data-lucide="linkedin" class="w-5 h-5"></i></a>
220
+ <a href="#" class="text-gray-400 hover:text-blue-600"><i data-lucide="twitter" class="w-5 h-5"></i></a>
221
+ </div>
222
+ </div>
223
+ </div>
224
+
225
+ <div class="team-card bg-white rounded-2xl overflow-hidden shadow-md">
226
+ <img src="http://static.photos/people/400x400/102" alt="COO" class="w-full h-64 object-cover">
227
+ <div class="p-6">
228
+ <h3 class="text-xl font-bold text-gray-900">Sarah Chen</h3>
229
+ <p class="text-blue-600 font-medium mb-3">Chief Operating Officer</p>
230
+ <p class="text-gray-600 text-sm mb-4">Operations expert with 15 years scaling e-commerce platforms and digital service delivery.</p>
231
+ <div class="flex gap-3">
232
+ <a href="#" class="text-gray-400 hover:text-blue-600"><i data-lucide="linkedin" class="w-5 h-5"></i></a>
233
+ <a href="#" class="text-gray-400 hover:text-blue-600"><i data-lucide="twitter" class="w-5 h-5"></i></a>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <div class="team-card bg-white rounded-2xl overflow-hidden shadow-md">
239
+ <img src="http://static.photos/people/400x400/103" alt="CTO" class="w-full h-64 object-cover">
240
+ <div class="p-6">
241
+ <h3 class="text-xl font-bold text-gray-900">David Okonkwo</h3>
242
+ <p class="text-blue-600 font-medium mb-3">Chief Technology Officer</p>
243
+ <p class="text-gray-600 text-sm mb-4">AI researcher and full-stack architect passionate about making advanced tech accessible to all businesses.</p>
244
+ <div class="flex gap-3">
245
+ <a href="#" class="text-gray-400 hover:text-blue-600"><i data-lucide="linkedin" class="w-5 h-5"></i></a>
246
+ <a href="#" class="text-gray-400 hover:text-blue-600"><i data-lucide="github" class="w-5 h-5"></i></a>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </section>
253
+
254
+ <!-- Footer -->
255
+ <footer class="bg-gray-900 text-gray-300 py-12">
256
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
257
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
258
+ <div class="col-span-2">
259
+ <div class="flex items-center gap-2 mb-4">
260
+ <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
261
+ <i data-lucide="building-2" class="w-5 h-5 text-white"></i>
262
+ </div>
263
+ <span class="font-bold text-xl text-white">BusinessHub</span>
264
+ </div>
265
+ <p class="text-gray-400 mb-4 max-w-sm">Empowering businesses with digital transformation, e-commerce solutions, AI integration, and expert consulting services.</p>
266
+ <div class="flex gap-4">
267
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-600 transition">
268
+ <i data-lucide="facebook" class="w-5 h-5"></i>
269
+ </a>
270
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-600 transition">
271
+ <i data-lucide="twitter" class="w-5 h-5"></i>
272
+ </a>
273
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-600 transition">
274
+ <i data-lucide="linkedin" class="w-5 h-5"></i>
275
+ </a>
276
+ </div>
277
+ </div>
278
+
279
+ <div>
280
+ <h4 class="text-white font-semibold mb-4">Quick Links</h4>
281
+ <ul class="space-y-2">
282
+ <li><a href="index.html" class="hover:text-white transition">Home</a></li>
283
+ <li><a href="about.html" class="hover:text-white transition">About Us</a></li>
284
+ <li><a href="services.html" class="hover:text-white transition">Services</a></li>
285
+ <li><a href="portfolio.html" class="hover:text-white transition">Results</a></li>
286
+ <li><a href="contact.html" class="hover:text-white transition">Contact</a></li>
287
+ </ul>
288
+ </div>
289
+
290
+ <div>
291
+ <h4 class="text-white font-semibold mb-4">Legal</h4>
292
+ <ul class="space-y-2">
293
+ <li><a href="privacy-policy.html" class="hover:text-white transition">Privacy Policy</a></li>
294
+ <li><a href="terms-of-service.html" class="hover:text-white transition">Terms of Service</a></li>
295
+ </ul>
296
+ </div>
297
+ </div>
298
+
299
+ <div class="border-t border-gray-800 pt-8 text-center">
300
+ <p class="text-gray-500">&copy; 2024 BusinessHub. All rights reserved.</p>
301
+ </div>
302
+ </div>
303
+ </footer>
304
+
305
+ <script>
306
+ lucide.createIcons();
307
+
308
+ function toggleMenu() {
309
+ const menu = document.getElementById('mobile-menu');
310
+ menu.classList.toggle('hidden');
311
+ }
312
+ </script>
313
+ </body>
314
+ </html>
index.html CHANGED
@@ -1,19 +1,334 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>BusinessHub | Helping Businesses Thrive Online</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ body { font-family: 'Inter', sans-serif; }
12
+ .hero-gradient { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #06b6d4 100%); }
13
+ .card-hover { transition: all 0.3s ease; }
14
+ .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
15
+ .float-animation { animation: float 6s ease-in-out infinite; }
16
+ @keyframes float {
17
+ 0% { transform: translateY(0px); }
18
+ 50% { transform: translateY(-20px); }
19
+ 100% { transform: translateY(0px); }
20
+ }
21
+ </style>
22
+ </head>
23
+ <body class="bg-gray-50 text-gray-800">
24
+
25
+ <!-- Navigation -->
26
+ <nav class="bg-white shadow-md fixed w-full z-50">
27
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
28
+ <div class="flex justify-between h-16">
29
+ <div class="flex items-center">
30
+ <a href="index.html" class="flex items-center gap-2">
31
+ <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
32
+ <i data-lucide="building-2" class="w-5 h-5 text-white"></i>
33
+ </div>
34
+ <span class="font-bold text-xl text-gray-900">BusinessHub</span>
35
+ </a>
36
+ </div>
37
+
38
+ <!-- Desktop Menu -->
39
+ <div class="hidden md:flex items-center space-x-8">
40
+ <a href="index.html" class="text-blue-600 font-medium">Home</a>
41
+ <a href="about.html" class="text-gray-600 hover:text-blue-600 font-medium transition">About</a>
42
+ <a href="services.html" class="text-gray-600 hover:text-blue-600 font-medium transition">Services</a>
43
+ <a href="portfolio.html" class="text-gray-600 hover:text-blue-600 font-medium transition">Results</a>
44
+ <a href="contact.html" class="bg-blue-600 text-white px-5 py-2 rounded-lg font-medium hover:bg-blue-700 transition">Contact Us</a>
45
+ </div>
46
+
47
+ <!-- Mobile menu button -->
48
+ <div class="md:hidden flex items-center">
49
+ <button onclick="toggleMenu()" class="text-gray-600 hover:text-gray-900 focus:outline-none">
50
+ <i data-lucide="menu" class="w-6 h-6"></i>
51
+ </button>
52
+ </div>
53
+ </div>
54
+ </div>
55
+
56
+ <!-- Mobile Menu -->
57
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
58
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
59
+ <a href="index.html" class="block px-3 py-2 text-blue-600 font-medium bg-blue-50 rounded-md">Home</a>
60
+ <a href="about.html" class="block px-3 py-2 text-gray-600 font-medium hover:bg-gray-50 rounded-md">About</a>
61
+ <a href="services.html" class="block px-3 py-2 text-gray-600 font-medium hover:bg-gray-50 rounded-md">Services</a>
62
+ <a href="portfolio.html" class="block px-3 py-2 text-gray-600 font-medium hover:bg-gray-50 rounded-md">Results</a>
63
+ <a href="contact.html" class="block px-3 py-2 text-gray-600 font-medium hover:bg-gray-50 rounded-md">Contact</a>
64
+ </div>
65
+ </div>
66
+ </nav>
67
+
68
+ <!-- Hero Section -->
69
+ <section class="hero-gradient pt-32 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
70
+ <div class="absolute inset-0 opacity-10">
71
+ <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cg fill=\"none\" fill-rule=\"evenodd\"%3E%3Cg fill=\"%23ffffff\" fill-opacity=\"0.4\"%3E%3Cpath d=\"M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')]"></div>
72
+ </div>
73
+ <div class="max-w-7xl mx-auto text-center relative z-10">
74
+ <div class="inline-block px-4 py-2 bg-white/20 rounded-full text-white text-sm font-medium mb-6 backdrop-blur-sm">
75
+ 🚀 Trusted by 500+ Businesses Worldwide
76
+ </div>
77
+ <h1 class="text-4xl md:text-6xl font-bold text-white mb-6 leading-tight">
78
+ Take Your Business<br>Online with Confidence
79
+ </h1>
80
+ <p class="text-xl text-blue-100 mb-10 max-w-3xl mx-auto">
81
+ Complete digital transformation solutions for modern businesses. From e-commerce setup to AI integration, we provide the tools, knowledge, and expertise you need to thrive in the digital economy.
82
+ </p>
83
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
84
+ <a href="services.html" class="bg-white text-blue-600 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-gray-100 transition shadow-lg inline-flex items-center gap-2">
85
+ Explore Services
86
+ <i data-lucide="arrow-right" class="w-5 h-5"></i>
87
+ </a>
88
+ <a href="contact.html" class="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-white hover:text-blue-600 transition inline-flex items-center gap-2">
89
+ Free Consultation
90
+ <i data-lucide="calendar" class="w-5 h-5"></i>
91
+ </a>
92
+ </div>
93
+
94
+ <div class="mt-16 flex flex-wrap justify-center gap-8 text-blue-100 text-sm">
95
+ <div class="flex items-center gap-2">
96
+ <i data-lucide="check-circle" class="w-5 h-5"></i>
97
+ <span>E-commerce Solutions</span>
98
+ </div>
99
+ <div class="flex items-center gap-2">
100
+ <i data-lucide="check-circle" class="w-5 h-5"></i>
101
+ <span>AI Integration</span>
102
+ </div>
103
+ <div class="flex items-center gap-2">
104
+ <i data-lucide="check-circle" class="w-5 h-5"></i>
105
+ <span>Digital Marketing</span>
106
+ </div>
107
+ <div class="flex items-center gap-2">
108
+ <i data-lucide="check-circle" class="w-5 h-5"></i>
109
+ <span>24/7 Support</span>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </section>
114
+
115
+ <!-- What We Offer Section -->
116
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-white">
117
+ <div class="max-w-7xl mx-auto">
118
+ <div class="text-center mb-16">
119
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Everything You Need to Go Digital</h2>
120
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Comprehensive solutions to transform your traditional business into a digital powerhouse.</p>
121
+ </div>
122
+
123
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
124
+ <div class="card-hover bg-gray-50 p-8 rounded-2xl border border-gray-100">
125
+ <div class="w-14 h-14 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
126
+ <i data-lucide="shopping-cart" class="w-7 h-7 text-blue-600"></i>
127
+ </div>
128
+ <h3 class="text-xl font-bold text-gray-900 mb-3">E-commerce Setup</h3>
129
+ <p class="text-gray-600">Launch your online store with seamless payment integration, inventory management, and optimized checkout experiences.</p>
130
+ </div>
131
+
132
+ <div class="card-hover bg-gray-50 p-8 rounded-2xl border border-gray-100">
133
+ <div class="w-14 h-14 bg-cyan-100 rounded-xl flex items-center justify-center mb-6">
134
+ <i data-lucide="brain" class="w-7 h-7 text-cyan-600"></i>
135
+ </div>
136
+ <h3 class="text-xl font-bold text-gray-900 mb-3">AI Integration</h3>
137
+ <p class="text-gray-600">Leverage artificial intelligence for customer service, data analysis, automation, and competitive advantage.</p>
138
+ </div>
139
+
140
+ <div class="card-hover bg-gray-50 p-8 rounded-2xl border border-gray-100">
141
+ <div class="w-14 h-14 bg-purple-100 rounded-xl flex items-center justify-center mb-6">
142
+ <i data-lucide="megaphone" class="w-7 h-7 text-purple-600"></i>
143
+ </div>
144
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Digital Marketing</h3>
145
+ <p class="text-gray-600">SEO, social media, email campaigns, and PPC strategies that drive traffic and convert visitors into customers.</p>
146
+ </div>
147
+
148
+ <div class="card-hover bg-gray-50 p-8 rounded-2xl border border-gray-100">
149
+ <div class="w-14 h-14 bg-green-100 rounded-xl flex items-center justify-center mb-6">
150
+ <i data-lucide="compass" class="w-7 h-7 text-green-600"></i>
151
+ </div>
152
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Business Consulting</h3>
153
+ <p class="text-gray-600">Strategic guidance on digital transformation, workflow optimization, and technology adoption tailored to your industry.</p>
154
+ </div>
155
+
156
+ <div class="card-hover bg-gray-50 p-8 rounded-2xl border border-gray-100">
157
+ <div class="w-14 h-14 bg-orange-100 rounded-xl flex items-center justify-center mb-6">
158
+ <i data-lucide="wrench" class="w-7 h-7 text-orange-600"></i>
159
+ </div>
160
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Tools & Software</h3>
161
+ <p class="text-gray-600">Access to premium business tools, CRM systems, analytics platforms, and custom software solutions.</p>
162
+ </div>
163
+
164
+ <div class="card-hover bg-gray-50 p-8 rounded-2xl border border-gray-100">
165
+ <div class="w-14 h-14 bg-pink-100 rounded-xl flex items-center justify-center mb-6">
166
+ <i data-lucide="graduation-cap" class="w-7 h-7 text-pink-600"></i>
167
+ </div>
168
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Training & Support</h3>
169
+ <p class="text-gray-600">Hands-on training for your team, documentation, video tutorials, and ongoing technical support.</p>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </section>
174
+
175
+ <!-- How It Works -->
176
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50">
177
+ <div class="max-w-7xl mx-auto">
178
+ <div class="text-center mb-16">
179
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Your Digital Journey in 4 Steps</h2>
180
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">We make the transition to online business smooth and stress-free.</p>
181
+ </div>
182
+
183
+ <div class="grid md:grid-cols-4 gap-8">
184
+ <div class="text-center relative">
185
+ <div class="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4 text-white shadow-lg relative z-10">
186
+ <i data-lucide="search" class="w-8 h-8"></i>
187
+ </div>
188
+ <div class="hidden md:block absolute top-10 left-1/2 w-full h-0.5 bg-blue-200 -z-0"></div>
189
+ <h3 class="text-xl font-bold text-gray-900 mb-2">1. Discovery</h3>
190
+ <p class="text-gray-600 text-sm">We analyze your current business model and identify digital opportunities.</p>
191
+ </div>
192
+
193
+ <div class="text-center relative">
194
+ <div class="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4 text-white shadow-lg relative z-10">
195
+ <i data-lucide="map" class="w-8 h-8"></i>
196
+ </div>
197
+ <div class="hidden md:block absolute top-10 left-1/2 w-full h-0.5 bg-blue-200 -z-0"></div>
198
+ <h3 class="text-xl font-bold text-gray-900 mb-2">2. Strategy</h3>
199
+ <p class="text-gray-600 text-sm">Custom roadmap for your online presence, tools, and marketing approach.</p>
200
+ </div>
201
+
202
+ <div class="text-center relative">
203
+ <div class="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4 text-white shadow-lg relative z-10">
204
+ <i data-lucide="rocket" class="w-8 h-8"></i>
205
+ </div>
206
+ <div class="hidden md:block absolute top-10 left-1/2 w-full h-0.5 bg-blue-200 -z-0"></div>
207
+ <h3 class="text-xl font-bold text-gray-900 mb-2">3. Implementation</h3>
208
+ <p class="text-gray-600 text-sm">We build, configure, and migrate your business to digital platforms.</p>
209
+ </div>
210
+
211
+ <div class="text-center">
212
+ <div class="w-20 h-20 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4 text-white shadow-lg relative z-10">
213
+ <i data-lucide="trending-up" class="w-8 h-8"></i>
214
+ </div>
215
+ <h3 class="text-xl font-bold text-gray-900 mb-2">4. Growth</h3>
216
+ <p class="text-gray-600 text-sm">Ongoing optimization, marketing, and support to scale your success.</p>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </section>
221
+
222
+ <!-- Stats Section -->
223
+ <section class="py-16 bg-gray-900 text-white">
224
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
225
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
226
+ <div>
227
+ <div class="text-4xl font-bold text-blue-400 mb-2">500+</div>
228
+ <div class="text-gray-400">Businesses Transformed</div>
229
+ </div>
230
+ <div>
231
+ <div class="text-4xl font-bold text-blue-400 mb-2">$50M+</div>
232
+ <div class="text-gray-400">Revenue Generated</div>
233
+ </div>
234
+ <div>
235
+ <div class="text-4xl font-bold text-blue-400 mb-2">98%</div>
236
+ <div class="text-gray-400">Client Satisfaction</div>
237
+ </div>
238
+ <div>
239
+ <div class="text-4xl font-bold text-blue-400 mb-2">24/7</div>
240
+ <div class="text-gray-400">Expert Support</div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </section>
245
+
246
+ <!-- CTA Section -->
247
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-blue-50">
248
+ <div class="max-w-4xl mx-auto text-center">
249
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Ready to Transform Your Business?</h2>
250
+ <p class="text-lg text-gray-600 mb-8">Join hundreds of successful businesses that have made the leap to digital. Get a free consultation and roadmap.</p>
251
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
252
+ <a href="contact.html" class="inline-flex items-center gap-2 bg-blue-600 text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-blue-700 transition shadow-lg">
253
+ Schedule Free Call
254
+ <i data-lucide="phone" class="w-5 h-5"></i>
255
+ </a>
256
+ <a href="services.html" class="inline-flex items-center gap-2 border-2 border-gray-300 text-gray-700 px-8 py-4 rounded-lg font-semibold text-lg hover:border-blue-600 hover:text-blue-600 transition">
257
+ View All Services
258
+ </a>
259
+ </div>
260
+ </div>
261
+ </section>
262
+
263
+ <!-- Footer -->
264
+ <footer class="bg-gray-900 text-gray-300 py-12">
265
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
266
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
267
+ <div class="col-span-2">
268
+ <div class="flex items-center gap-2 mb-4">
269
+ <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
270
+ <i data-lucide="building-2" class="w-5 h-5 text-white"></i>
271
+ </div>
272
+ <span class="font-bold text-xl text-white">BusinessHub</span>
273
+ </div>
274
+ <p class="text-gray-400 mb-4 max-w-sm">Empowering businesses with digital transformation, e-commerce solutions, AI integration, and expert consulting services.</p>
275
+ <div class="flex gap-4">
276
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-600 transition">
277
+ <i data-lucide="facebook" class="w-5 h-5"></i>
278
+ </a>
279
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-600 transition">
280
+ <i data-lucide="twitter" class="w-5 h-5"></i>
281
+ </a>
282
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-600 transition">
283
+ <i data-lucide="linkedin" class="w-5 h-5"></i>
284
+ </a>
285
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-600 transition">
286
+ <i data-lucide="instagram" class="w-5 h-5"></i>
287
+ </a>
288
+ </div>
289
+ </div>
290
+
291
+ <div>
292
+ <h4 class="text-white font-semibold mb-4">Quick Links</h4>
293
+ <ul class="space-y-2">
294
+ <li><a href="index.html" class="hover:text-white transition">Home</a></li>
295
+ <li><a href="about.html" class="hover:text-white transition">About Us</a></li>
296
+ <li><a href="services.html" class="hover:text-white transition">Services</a></li>
297
+ <li><a href="portfolio.html" class="hover:text-white transition">Results</a></li>
298
+ <li><a href="contact.html" class="hover:text-white transition">Contact</a></li>
299
+ </ul>
300
+ </div>
301
+
302
+ <div>
303
+ <h4 class="text-white font-semibold mb-4">Legal</h4>
304
+ <ul class="space-y-2">
305
+ <li><a href="privacy-policy.html" class="hover:text-white transition">Privacy Policy</a></li>
306
+ <li><a href="terms-of-service.html" class="hover:text-white transition">Terms of Service</a></li>
307
+ </ul>
308
+ <h4 class="text-white font-semibold mb-4 mt-6">Contact</h4>
309
+ <ul class="space-y-2">
310
+ <li class="flex items-center gap-2">
311
+ <i data-lucide="mail" class="w-4 h-4"></i>
312
+ <span>hello@businesshub.app</span>
313
+ </li>
314
+ </ul>
315
+ </div>
316
+ </div>
317
+
318
+ <div class="border-t border-gray-800 pt-8 text-center">
319
+ <p class="text-gray-500">&copy; 2024 BusinessHub. All rights reserved.</p>
320
+ </div>
321
+ </div>
322
+ </footer>
323
+
324
+ <script>
325
+ lucide.createIcons();
326
+
327
+ function toggleMenu() {
328
+ const menu = document.getElementById('mobile-menu');
329
+ menu.classList.toggle('hidden');
330
+ }
331
+ </script>
332
+ <script src="https://deepsite.hf.co/deepsite-badge.js"></script>
333
+ </body>
334
+ </html>
portfolio.html ADDED
@@ -0,0 +1,227 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Portfolio | Your Company Name</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ body { font-family: 'Inter', sans-serif; }
12
+ .portfolio-item { transition: all 0.3s ease; }
13
+ .portfolio-item:hover .overlay { opacity: 1; }
14
+ .portfolio-item:hover img { transform: scale(1.05); }
15
+ .filter-btn { transition: all 0.3s ease; }
16
+ .filter-btn.active { background-color: #4f46e5; color: white; }
17
+ </style>
18
+ </head>
19
+ <body class="bg-gray-50 text-gray-800">
20
+
21
+ <!-- Navigation -->
22
+ <nav class="bg-white shadow-md fixed w-full z-50">
23
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
24
+ <div class="flex justify-between h-16">
25
+ <div class="flex items-center">
26
+ <a href="index.html" class="flex items-center gap-2">
27
+ <div class="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center">
28
+ <i data-lucide="zap" class="w-5 h-5 text-white"></i>
29
+ </div>
30
+ <span class="font-bold text-xl text-gray-900">YourBrand</span>
31
+ </a>
32
+ </div>
33
+
34
+ <div class="hidden md:flex items-center space-x-8">
35
+ <a href="index.html" class="text-gray-600 hover:text-indigo-600 font-medium transition">Home</a>
36
+ <a href="about.html" class="text-gray-600 hover:text-indigo-600 font-medium transition">About</a>
37
+ <a href="services.html" class="text-gray-600 hover:text-indigo-600 font-medium transition">Services</a>
38
+ <a href="portfolio.html" class="text-indigo-600 font-medium">Portfolio</a>
39
+ <a href="contact.html" class="bg-indigo-600 text-white px-5 py-2 rounded-lg font-medium hover:bg-indigo-700 transition">Contact Us</a>
40
+ </div>
41
+
42
+ <div class="md:hidden flex items-center">
43
+ <button onclick="toggleMenu()" class="text-gray-600 hover:text-gray-900 focus:outline-none">
44
+ <i data-lucide="menu" class="w-6 h-6"></i>
45
+ </button>
46
+ </div>
47
+ </div>
48
+ </div>
49
+
50
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
51
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
52
+ <a href="index.html" class="block px-3 py-2 text-gray-600 font-medium hover:bg-gray-50 rounded-md">Home</a>
53
+ <a href="about.html" class="block px-3 py-2 text-gray-600 font-medium hover:bg-gray-50 rounded-md">About</a>
54
+ <a href="services.html" class="block px-3 py-2 text-gray-600 font-medium hover:bg-gray-50 rounded-md">Services</a>
55
+ <a href="portfolio.html" class="block px-3 py-2 text-indigo-600 font-medium bg-indigo-50 rounded-md">Portfolio</a>
56
+ <a href="contact.html" class="block px-3 py-2 text-gray-600 font-medium hover:bg-gray-50 rounded-md">Contact</a>
57
+ </div>
58
+ </div>
59
+ </nav>
60
+
61
+ <!-- Page Header -->
62
+ <section class="bg-gray-900 text-white pt-32 pb-20 px-4 sm:px-6 lg:px-8">
63
+ <div class="max-w-7xl mx-auto text-center">
64
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Our Portfolio</h1>
65
+ <p class="text-xl text-gray-400 max-w-2xl mx-auto">Explore our latest work and see how we've helped businesses transform their digital presence.</p>
66
+ </div>
67
+ </section>
68
+
69
+ <!-- Filter Buttons -->
70
+ <section class="py-8 px-4 sm:px-6 lg:px-8 bg-white border-b">
71
+ <div class="max-w-7xl mx-auto flex flex-wrap justify-center gap-4">
72
+ <button class="filter-btn active px-6 py-2 rounded-full border border-indigo-600 text-indigo-600 font-medium" onclick="filterPortfolio('all', this)">All Projects</button>
73
+ <button class="filter-btn px-6 py-2 rounded-full border border-gray-300 text-gray-600 font-medium hover:border-indigo-600 hover:text-indigo-600" onclick="filterPortfolio('web', this)">Web Design</button>
74
+ <button class="filter-btn px-6 py-2 rounded-full border border-gray-300 text-gray-600 font-medium hover:border-indigo-600 hover:text-indigo-600" onclick="filterPortfolio('mobile', this)">Mobile Apps</button>
75
+ <button class="filter-btn px-6 py-2 rounded-full border border-gray-300 text-gray-600 font-medium hover:border-indigo-600 hover:text-indigo-600" onclick="filterPortfolio('branding', this)">Branding</button>
76
+ <button class="filter-btn px-6 py-2 rounded-full border border-gray-300 text-gray-600 font-medium hover:border-indigo-600 hover:text-indigo-600" onclick="filterPortfolio('marketing', this)">Marketing</button>
77
+ </div>
78
+ </section>
79
+
80
+ <!-- Portfolio Grid -->
81
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50">
82
+ <div class="max-w-7xl mx-auto">
83
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="portfolio-grid">
84
+
85
+ <!-- Project 1 -->
86
+ <div class="portfolio-item group relative overflow-hidden rounded-2xl shadow-lg bg-white" data-category="web">
87
+ <div class="overflow-hidden h-64">
88
+ <img src="http://static.photos/technology/800x600/201" alt="E-Commerce Platform" class="w-full h-full object-cover transition duration-500">
89
+ </div>
90
+ <div class="overlay absolute inset-0 bg-gradient-to-t from-indigo-900 via-indigo-900/80 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
91
+ <span class="text-indigo-300 text-sm font-medium mb-2">Web Development</span>
92
+ <h3 class="text-white text-xl font-bold mb-2">E-Commerce Platform</h3>
93
+ <p class="text-gray-300 text-sm mb-4">A full-featured online shopping experience with payment integration.</p>
94
+ <a href="#" class="inline-flex items-center text-white font-semibold hover:text-indigo-300">
95
+ View Project <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>
96
+ </a>
97
+ </div>
98
+ <div class="p-6 bg-white">
99
+ <h3 class="text-lg font-bold text-gray-900 mb-1">E-Commerce Platform</h3>
100
+ <p class="text-gray-600 text-sm">Web Development</p>
101
+ </div>
102
+ </div>
103
+
104
+ <!-- Project 2 -->
105
+ <div class="portfolio-item group relative overflow-hidden rounded-2xl shadow-lg bg-white" data-category="mobile">
106
+ <div class="overflow-hidden h-64">
107
+ <img src="http://static.photos/technology/800x600/202" alt="Fitness App" class="w-full h-full object-cover transition duration-500">
108
+ </div>
109
+ <div class="overlay absolute inset-0 bg-gradient-to-t from-indigo-900 via-indigo-900/80 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
110
+ <span class="text-indigo-300 text-sm font-medium mb-2">Mobile App</span>
111
+ <h3 class="text-white text-xl font-bold mb-2">Fitness Tracker App</h3>
112
+ <p class="text-gray-300 text-sm mb-4">iOS and Android app for tracking workouts and nutrition.</p>
113
+ <a href="#" class="inline-flex items-center text-white font-semibold hover:text-indigo-300">
114
+ View Project <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>
115
+ </a>
116
+ </div>
117
+ <div class="p-6 bg-white">
118
+ <h3 class="text-lg font-bold text-gray-900 mb-1">Fitness Tracker App</h3>
119
+ <p class="text-gray-600 text-sm">Mobile Development</p>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Project 3 -->
124
+ <div class="portfolio-item group relative overflow-hidden rounded-2xl shadow-lg bg-white" data-category="branding">
125
+ <div class="overflow-hidden h-64">
126
+ <img src="http://static.photos/minimal/800x600/203" alt="Brand Identity" class="w-full h-full object-cover transition duration-500">
127
+ </div>
128
+ <div class="overlay absolute inset-0 bg-gradient-to-t from-indigo-900 via-indigo-900/80 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
129
+ <span class="text-indigo-300 text-sm font-medium mb-2">Branding</span>
130
+ <h3 class="text-white text-xl font-bold mb-2">Tech Startup Brand</h3>
131
+ <p class="text-gray-300 text-sm mb-4">Complete brand identity including logo, colors, and guidelines.</p>
132
+ <a href="#" class="inline-flex items-center text-white font-semibold hover:text-indigo-300">
133
+ View Project <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>
134
+ </a>
135
+ </div>
136
+ <div class="p-6 bg-white">
137
+ <h3 class="text-lg font-bold text-gray-900 mb-1">Tech Startup Brand</h3>
138
+ <p class="text-gray-600 text-sm">Branding & Design</p>
139
+ </div>
140
+ </div>
141
+
142
+ <!-- Project 4 -->
143
+ <div class="portfolio-item group relative overflow-hidden rounded-2xl shadow-lg bg-white" data-category="web">
144
+ <div class="overflow-hidden h-64">
145
+ <img src="http://static.photos/office/800x600/204" alt="Corporate Website" class="w-full h-full object-cover transition duration-500">
146
+ </div>
147
+ <div class="overlay absolute inset-0 bg-gradient-to-t from-indigo-900 via-indigo-900/80 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
148
+ <span class="text-indigo-300 text-sm font-medium mb-2">Web Design</span>
149
+ <h3 class="text-white text-xl font-bold mb-2">Corporate Website</h3>
150
+ <p class="text-gray-300 text-sm mb-4">Modern corporate presence with CMS integration.</p>
151
+ <a href="#" class="inline-flex items-center text-white font-semibold hover:text-indigo-300">
152
+ View Project <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>
153
+ </a>
154
+ </div>
155
+ <div class="p-6 bg-white">
156
+ <h3 class="text-lg font-bold text-gray-900 mb-1">Corporate Website</h3>
157
+ <p class="text-gray-600 text-sm">Web Design</p>
158
+ </div>
159
+ </div>
160
+
161
+ <!-- Project 5 -->
162
+ <div class="portfolio-item group relative overflow-hidden rounded-2xl shadow-lg bg-white" data-category="marketing">
163
+ <div class="overflow-hidden h-64">
164
+ <img src="http://static.photos/business/800x600/205" alt="Marketing Campaign" class="w-full h-full object-cover transition duration-500">
165
+ </div>
166
+ <div class="overlay absolute inset-0 bg-gradient-to-t from-indigo-900 via-indigo-900/80 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
167
+ <span class="text-indigo-300 text-sm font-medium mb-2">Marketing</span>
168
+ <h3 class="text-white text-xl font-bold mb-2">SEO Campaign</h3>
169
+ <p class="text-gray-300 text-sm mb-4">Increased organic traffic by 300% for a retail client.</p>
170
+ <a href="#" class="inline-flex items-center text-white font-semibold hover:text-indigo-300">
171
+ View Project <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>
172
+ </a>
173
+ </div>
174
+ <div class="p-6 bg-white">
175
+ <h3 class="text-lg font-bold text-gray-900 mb-1">SEO Campaign</h3>
176
+ <p class="text-gray-600 text-sm">Digital Marketing</p>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Project 6 -->
181
+ <div class="portfolio-item group relative overflow-hidden rounded-2xl shadow-lg bg-white" data-category="mobile">
182
+ <div class="overflow-hidden h-64">
183
+ <img src="http://static.photos/technology/800x600/206" alt="Fintech App" class="w-full h-full object-cover transition duration-500">
184
+ </div>
185
+ <div class="overlay absolute inset-0 bg-gradient-to-t from-indigo-900 via-indigo-900/80 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
186
+ <span class="text-indigo-300 text-sm font-medium mb-2">Mobile App</span>
187
+ <h3 class="text-white text-xl font-bold mb-2">Fintech Banking App</h3>
188
+ <p class="text-gray-300 text-sm mb-4">Secure mobile banking with biometric authentication.</p>
189
+ <a href="#" class="inline-flex items-center text-white font-semibold hover:text-indigo-300">
190
+ View Project <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>
191
+ </a>
192
+ </div>
193
+ <div class="p-6 bg-white">
194
+ <h3 class="text-lg font-bold text-gray-900 mb-1">Fintech Banking App</h3>
195
+ <p class="text-gray-600 text-sm">Mobile Development</p>
196
+ </div>
197
+ </div>
198
+
199
+ </div>
200
+
201
+ <div class="text-center mt-12">
202
+ <button class="inline-flex items-center gap-2 border-2 border-indigo-600 text-indigo-600 px-8 py-3 rounded-lg font-semibold hover:bg-indigo-600 hover:text-white transition">
203
+ Load More Projects
204
+ <i data-lucide="loader" class="w-5 h-5"></i>
205
+ </button>
206
+ </div>
207
+ </div>
208
+ </section>
209
+
210
+ <!-- Testimonials -->
211
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-white">
212
+ <div class="max-w-7xl mx-auto">
213
+ <div class="text-center mb-16">
214
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Client Testimonials</h2>
215
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">What our clients say about working with us</p>
216
+ </div>
217
+
218
+ <div class="grid md:grid-cols-3 gap-8">
219
+ <div class="bg-gray-50 p-8 rounded-2xl">
220
+ <div class="flex gap-1 mb-4">
221
+ <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
222
+ <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
223
+ <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
224
+ <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
225
+ <i data-lucide="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
226
+ </div>
227
+ <p class="text-gray-600 mb-6 italic">"Working with this team transformed our online presence. The website they built increased our conversions by 150% in
services.html ADDED
@@ -0,0 +1,353 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Our Services | BusinessHub - Digital Solutions</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ body { font-family: 'Inter', sans-serif; }
12
+ .service-card { transition: all 0.3s ease; }
13
+ .service-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
14
+ .price-card { transition: all 0.3s ease; }
15
+ .price-card:hover { transform: scale(1.02); }
16
+ </style>
17
+ </head>
18
+ <body class="bg-gray-50 text-gray-800">
19
+
20
+ <!-- Navigation -->
21
+ <nav class="bg-white shadow-md fixed w-full z-50">
22
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
23
+ <div class="flex justify-between h-16">
24
+ <div class="flex items-center">
25
+ <a href="index.html" class="flex items-center gap-2">
26
+ <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
27
+ <i data-lucide="building-2" class="w-5 h-5 text-white"></i>
28
+ </div>
29
+ <span class="font-bold text-xl text-gray-900">BusinessHub</span>
30
+ </a>
31
+ </div>
32
+
33
+ <div class="hidden md:flex items-center space-x-8">
34
+ <a href="index.html" class="text-gray-600 hover:text-blue-600 font-medium transition">Home</a>
35
+ <a href="about.html" class="text-gray-600 hover:text-blue-600 font-medium transition">About</a>
36
+ <a href="services.html" class="text-blue-600 font-medium">Services</a>
37
+ <a href="portfolio.html" class="text-gray-600 hover:text-blue-600 font-medium transition">Results</a>
38
+ <a href="contact.html" class="bg-blue-600 text-white px-5 py-2 rounded-lg font-medium hover:bg-blue-700 transition">Contact Us</a>
39
+ </div>
40
+
41
+ <div class="md:hidden flex items-center">
42
+ <button onclick="toggleMenu()" class="text-gray-600 hover:text-gray-900 focus:outline-none">
43
+ <i data-lucide="menu" class="w-6 h-6"></i>
44
+ </button>
45
+ </div>
46
+ </div>
47
+ </div>
48
+
49
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
50
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
51
+ <a href="index.html" class="block px-3 py-2 text-gray-600 font-medium hover:bg-gray-50 rounded-md">Home</a>
52
+ <a href="about.html" class="block px-3 py-2 text-gray-600 font-medium hover:bg-gray-50 rounded-md">About</a>
53
+ <a href="services.html" class="block px-3 py-2 text-blue-600 font-medium bg-blue-50 rounded-md">Services</a>
54
+ <a href="portfolio.html" class="block px-3 py-2 text-gray-600 font-medium hover:bg-gray-50 rounded-md">Results</a>
55
+ <a href="contact.html" class="block px-3 py-2 text-gray-600 font-medium hover:bg-gray-50 rounded-md">Contact</a>
56
+ </div>
57
+ </div>
58
+ </nav>
59
+
60
+ <!-- Page Header -->
61
+ <section class="bg-gradient-to-r from-blue-600 to-cyan-500 text-white pt-32 pb-20 px-4 sm:px-6 lg:px-8">
62
+ <div class="max-w-7xl mx-auto text-center">
63
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Complete Digital Solutions</h1>
64
+ <p class="text-xl text-blue-100 max-w-3xl mx-auto">From getting your first website to implementing AI automation—we provide everything your business needs to succeed online.</p>
65
+ </div>
66
+ </section>
67
+
68
+ <!-- Main Services Grid -->
69
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-white">
70
+ <div class="max-w-7xl mx-auto">
71
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
72
+
73
+ <!-- Service 1: Online Migration -->
74
+ <div class="service-card bg-white border border-gray-200 rounded-2xl p-8">
75
+ <div class="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mb-6">
76
+ <i data-lucide="globe" class="w-8 h-8 text-blue-600"></i>
77
+ </div>
78
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Business Online Setup</h3>
79
+ <p class="text-gray-600 mb-6 leading-relaxed">Take your brick-and-mortar business digital. We handle everything from domain registration to launch.</p>
80
+ <ul class="space-y-2 mb-6">
81
+ <li class="flex items-center gap-2 text-gray-600">
82
+ <i data-lucide="check-circle" class="w-5 h-5 text-blue-600"></i>
83
+ <span>Professional Website Design</span>
84
+ </li>
85
+ <li class="flex items-center gap-2 text-gray-600">
86
+ <i data-lucide="check-circle" class="w-5 h-5 text-blue-600"></i>
87
+ <span>Domain & Hosting Setup</span>
88
+ </li>
89
+ <li class="flex items-center gap-2 text-gray-600">
90
+ <i data-lucide="check-circle" class="w-5 h-5 text-blue-600"></i>
91
+ <span>Google Business Profile</span>
92
+ </li>
93
+ <li class="flex items-center gap-2 text-gray-600">
94
+ <i data-lucide="check-circle" class="w-5 h-5 text-blue-600"></i>
95
+ <span>Email Setup (G Suite/Office 365)</span>
96
+ </li>
97
+ </ul>
98
+ <a href="contact.html" class="inline-flex items-center text-blue-600 font-semibold hover:text-blue-700">
99
+ Get Started <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>
100
+ </a>
101
+ </div>
102
+
103
+ <!-- Service 2: E-commerce -->
104
+ <div class="service-card bg-white border border-gray-200 rounded-2xl p-8">
105
+ <div class="w-16 h-16 bg-cyan-100 rounded-2xl flex items-center justify-center mb-6">
106
+ <i data-lucide="shopping-cart" class="w-8 h-8 text-cyan-600"></i>
107
+ </div>
108
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">E-commerce Solutions</h3>
109
+ <p class="text-gray-600 mb-6 leading-relaxed">Sell products online with a store that converts visitors into customers. Shopify, WooCommerce, or custom solutions.</p>
110
+ <ul class="space-y-2 mb-6">
111
+ <li class="flex items-center gap-2 text-gray-600">
112
+ <i data-lucide="check-circle" class="w-5 h-5 text-cyan-600"></i>
113
+ <span>Store Setup & Design</span>
114
+ </li>
115
+ <li class="flex items-center gap-2 text-gray-600">
116
+ <i data-lucide="check-circle" class="w-5 h-5 text-cyan-600"></i>
117
+ <span>Payment Gateway Integration</span>
118
+ </li>
119
+ <li class="flex items-center gap-2 text-gray-600">
120
+ <i data-lucide="check-circle" class="w-5 h-5 text-cyan-600"></i>
121
+ <span>Inventory Management</span>
122
+ </li>
123
+ <li class="flex items-center gap-2 text-gray-600">
124
+ <i data-lucide="check-circle" class="w-5 h-5 text-cyan-600"></i>
125
+ <span>Shipping & Tax Configuration</span>
126
+ </li>
127
+ </ul>
128
+ <a href="contact.html" class="inline-flex items-center text-cyan-600 font-semibold hover:text-cyan-700">
129
+ Learn More <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>
130
+ </a>
131
+ </div>
132
+
133
+ <!-- Service 3: AI Integration -->
134
+ <div class="service-card bg-white border border-gray-200 rounded-2xl p-8">
135
+ <div class="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center mb-6">
136
+ <i data-lucide="brain" class="w-8 h-8 text-purple-600"></i>
137
+ </div>
138
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">AI Integration</h3>
139
+ <p class="text-gray-600 mb-6 leading-relaxed">Leverage artificial intelligence to automate tasks, improve customer service, and gain competitive advantage.</p>
140
+ <ul class="space-y-2 mb-6">
141
+ <li class="flex items-center gap-2 text-gray-600">
142
+ <i data-lucide="check-circle" class="w-5 h-5 text-purple-600"></i>
143
+ <span>AI Chatbots & Customer Service</span>
144
+ </li>
145
+ <li class="flex items-center gap-2 text-gray-600">
146
+ <i data-lucide="check-circle" class="w-5 h-5 text-purple-600"></i>
147
+ <span>Content Generation Tools</span>
148
+ </li>
149
+ <li class="flex items-center gap-2 text-gray-600">
150
+ <i data-lucide="check-circle" class="w-5 h-5 text-purple-600"></i>
151
+ <span>Data Analysis & Insights</span>
152
+ </li>
153
+ <li class="flex items-center gap-2 text-gray-600">
154
+ <i data-lucide="check-circle" class="w-5 h-5 text-purple-600"></i>
155
+ <span>Workflow Automation</span>
156
+ </li>
157
+ </ul>
158
+ <a href="contact.html" class="inline-flex items-center text-purple-600 font-semibold hover:text-purple-700">
159
+ Explore AI <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>
160
+ </a>
161
+ </div>
162
+
163
+ <!-- Service 4: Digital Marketing -->
164
+ <div class="service-card bg-white border border-gray-200 rounded-2xl p-8">
165
+ <div class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mb-6">
166
+ <i data-lucide="trending-up" class="w-8 h-8 text-green-600"></i>
167
+ </div>
168
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Digital Marketing</h3>
169
+ <p class="text-gray-600 mb-6 leading-relaxed">Get found online and convert visitors into customers with data-driven marketing strategies.</p>
170
+ <ul class="space-y-2 mb-6">
171
+ <li class="flex items-center gap-2 text-gray-600">
172
+ <i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i>
173
+ <span>SEO & Local Search Optimization</span>
174
+ </li>
175
+ <li class="flex items-center gap-2 text-gray-600">
176
+ <i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i>
177
+ <span>Social Media Management</span>
178
+ </li>
179
+ <li class="flex items-center gap-2 text-gray-600">
180
+ <i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i>
181
+ <span>Google & Facebook Ads</span>
182
+ </li>
183
+ <li class="flex items-center gap-2 text-gray-600">
184
+ <i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i>
185
+ <span>Email Marketing Automation</span>
186
+ </li>
187
+ </ul>
188
+ <a href="contact.html" class="inline-flex items-center text-green-600 font-semibold hover:text-green-700">
189
+ Grow Your Reach <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>
190
+ </a>
191
+ </div>
192
+
193
+ <!-- Service 5: Business Consulting -->
194
+ <div class="service-card bg-white border border-gray-200 rounded-2xl p-8">
195
+ <div class="w-16 h-16 bg-orange-100 rounded-2xl flex items-center justify-center mb-6">
196
+ <i data-lucide="users" class="w-8 h-8 text-orange-600"></i>
197
+ </div>
198
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Business Consulting</h3>
199
+ <p class="text-gray-600 mb-6 leading-relaxed">Strategic guidance to optimize your operations, reduce costs, and identify new revenue streams.</p>
200
+ <ul class="space-y-2 mb-6">
201
+ <li class="flex items-center gap-2 text-gray-600">
202
+ <i data-lucide="check-circle" class="w-5 h-5 text-orange-600"></i>
203
+ <span>Digital Transformation Roadmap</span>
204
+ </li>
205
+ <li class="flex items-center gap-2 text-gray-600">
206
+ <i data-lucide="check-circle" class="w-5 h-5 text-orange-600"></i>
207
+ <span>Process Optimization</span>
208
+ </li>
209
+ <li class="flex items-center gap-2 text-gray-600">
210
+ <i data-lucide="check-circle" class="w-5 h-5 text-orange-600"></i>
211
+ <span>Tech Stack Recommendations</span>
212
+ </li>
213
+ <li class="flex items-center gap-2 text-gray-600">
214
+ <i data-lucide="check-circle" class="w-5 h-5 text-orange-600"></i>
215
+ <span>ROI Analysis & Reporting</span>
216
+ </li>
217
+ </ul>
218
+ <a href="contact.html" class="inline-flex items-center text-orange-600 font-semibold hover:text-orange-700">
219
+ Book Consultation <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>
220
+ </a>
221
+ </div>
222
+
223
+ <!-- Service 6: Tools & Training -->
224
+ <div class="service-card bg-white border border-gray-200 rounded-2xl p-8">
225
+ <div class="w-16 h-16 bg-pink-100 rounded-2xl flex items-center justify-center mb-6">
226
+ <i data-lucide="graduation-cap" class="w-8 h-8 text-pink-600"></i>
227
+ </div>
228
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Tools & Training</h3>
229
+ <p class="text-gray-600 mb-6 leading-relaxed">Empower your team with the knowledge and tools to manage your digital presence confidently.</p>
230
+ <ul class="space-y-2 mb-6">
231
+ <li class="flex items-center gap-2 text-gray-600">
232
+ <i data-lucide="check-circle" class="w-5 h-5 text-pink-600"></i>
233
+ <span>Software Training Sessions</span>
234
+ </li>
235
+ <li class="flex items-center gap-2 text-gray-600">
236
+ <i data-lucide="check-circle" class="w-5 h-5 text-pink-600"></i>
237
+ <span>CRM Setup & Management</span>
238
+ </li>
239
+ <li class="flex items-center gap-2 text-gray-600">
240
+ <i data-lucide="check-circle" class="w-5 h-5 text-pink-600"></i>
241
+ <span>Video Tutorial Library</span>
242
+ </li>
243
+ <li class="flex items-center gap-2 text-gray-600">
244
+ <i data-lucide="check-circle" class="w-5 h-5 text-pink-600"></i>
245
+ <span>Documentation & SOPs</span>
246
+ </li>
247
+ </ul>
248
+ <a href="contact.html" class="inline-flex items-center text-pink-600 font-semibold hover:text-pink-700">
249
+ Learn More <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>
250
+ </a>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </section>
255
+
256
+ <!-- Packages Section -->
257
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50">
258
+ <div class="max-w-7xl mx-auto">
259
+ <div class="text-center mb-16">
260
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Business Starter Packages</h2>
261
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Everything you need to get online, bundled for convenience and savings.</p>
262
+ </div>
263
+
264
+ <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
265
+ <!-- Basic Package -->
266
+ <div class="price-card bg-white rounded-2xl p-8 border border-gray-200">
267
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Starter</h3>
268
+ <div class="text-4xl font-bold text-blue-600 mb-4">$2,499</div>
269
+ <p class="text-gray-600 mb-6">Perfect for small businesses just getting started.</p>
270
+ <ul class="space-y-3 mb-8">
271
+ <li class="flex items-start gap-2 text-gray-600">
272
+ <i data-lucide="check" class="w-5 h-5 text-green-500 mt-0.5"></i>
273
+ <span>5-Page Professional Website</span>
274
+ </li>
275
+ <li class="flex items-start gap-2 text-gray-600">
276
+ <i data-lucide="check" class="w-5 h-5 text-green-500 mt-0.5"></i>
277
+ <span>Mobile Responsive Design</span>
278
+ </li>
279
+ <li class="flex items-start gap-2 text-gray-600">
280
+ <i data-lucide="check" class="w-5 h-5 text-green-500 mt-0.5"></i>
281
+ <span>Google Business Setup</span>
282
+ </li>
283
+ <li class="flex items-start gap-2 text-gray-600">
284
+ <i data-lucide="check" class="w-5 h-5 text-green-500 mt-0.5"></i>
285
+ <span>Basic SEO Optimization</span>
286
+ </li>
287
+ <li class="flex items-start gap-2 text-gray-600">
288
+ <i data-lucide="check" class="w-5 h-5 text-green-500 mt-0.5"></i>
289
+ <span>30 Days Support</span>
290
+ </li>
291
+ </ul>
292
+ <a href="contact.html" class="block text-center border-2 border-blue-600 text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-blue-600 hover:text-white transition">
293
+ Get Started
294
+ </a>
295
+ </div>
296
+
297
+ <!-- Professional Package -->
298
+ <div class="price-card bg-blue-600 rounded-2xl p-8 text-white relative transform scale-105 shadow-xl">
299
+ <div class="absolute top-0 right-0 bg-yellow-400 text-gray-900 text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">POPULAR</div>
300
+ <h3 class="text-xl font-bold mb-2">Professional</h3>
301
+ <div class="text-4xl font-bold mb-4">$4,999</div>
302
+ <p class="text-blue-100 mb-6">For businesses ready to sell online and automate.</p>
303
+ <ul class="space-y-3 mb-8">
304
+ <li class="flex items-start gap-2">
305
+ <i data-lucide="check" class="w-5 h-5 text-white mt-0.5"></i>
306
+ <span>Everything in Starter, plus:</span>
307
+ </li>
308
+ <li class="flex items-start gap-2">
309
+ <i data-lucide="check" class="w-5 h-5 text-white mt-0.5"></i>
310
+ <span>E-commerce Store Setup</span>
311
+ </li>
312
+ <li class="flex items-start gap-2">
313
+ <i data-lucide="check" class="w-5 h-5 text-white mt-0.5"></i>
314
+ <span>Payment Gateway Integration</span>
315
+ </li>
316
+ <li class="flex items-start gap-2">
317
+ <i data-lucide="check" class="w-5 h-5 text-white mt-0.5"></i>
318
+ <span>AI Chatbot Setup</span>
319
+ </li>
320
+ <li class="flex items-start gap-2">
321
+ <i data-lucide="check" class="w-5 h-5 text-white mt-0.5"></i>
322
+ <span>Email Marketing Setup</span>
323
+ </li>
324
+ <li class="flex items-start gap-2">
325
+ <i data-lucide="check" class="w-5 h-5 text-white mt-0.5"></i>
326
+ <span>90 Days Support</span>
327
+ </li>
328
+ </ul>
329
+ <a href="contact.html" class="block text-center bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
330
+ Get Started
331
+ </a>
332
+ </div>
333
+
334
+ <!-- Enterprise Package -->
335
+ <div class="price-card bg-white rounded-2xl p-8 border border-gray-200">
336
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Enterprise</h3>
337
+ <div class="text-4xl font-bold text-blue-600 mb-4">Custom</div>
338
+ <p class="text-gray-600 mb-6">Tailored solutions for complex requirements.</p>
339
+ <ul class="space-y-3 mb-8">
340
+ <li class="flex items-start gap-2 text-gray-600">
341
+ <i data-lucide="check" class="w-5 h-5 text-green-500 mt-0.5"></i>
342
+ <span>Everything in Professional</span>
343
+ </li>
344
+ <li class="flex items-start gap-2 text-gray-600">
345
+ <i data-lucide="check" class="w-5 h-5 text-green-500 mt-0.5"></i>
346
+ <span>Custom Software Development</span>
347
+ </li>
348
+ <li class="flex items-start gap-2 text-gray-600">
349
+ <i data-lucide="check" class="w-5 h-5 text-green-500 mt-0.5"></i>
350
+ <span>Advanced AI Integration</span>
351
+ </li>
352
+ <li class="flex items-start gap-2 text-gray-600">
353
+ <i data-lucide="check" class="w-5 h-