vlcsolutions commited on
Commit
b2505cd
Β·
verified Β·
1 Parent(s): 2e6faf0

Manual changes saved

Browse files
Files changed (1) hide show
  1. index.html +35 -83
index.html CHANGED
@@ -245,92 +245,44 @@
245
  </div>
246
  </section>
247
  <!-- Section 2 -->
248
- <section class="py-16 bg-[var(--vlc-tint)]">
249
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
250
- <div class="text-center mb-16">
251
- <h2 class="text-3xl font-bold text-[var(--vlc-navy)] mb-4" data-aos="fade-up">Our E-Commerce Portfolio</h2>
252
- <div class="w-24 h-1 bg-gradient-to-r from-[var(--vlc-leaf)] to-[var(--vlc-sky)] mx-auto mb-6" data-aos="fade-up"></div>
253
- <p class="text-lg text-gray-600 max-w-3xl mx-auto" data-aos="fade-up">Comprehensive solutions tailored for your business needs</p>
254
- </div>
255
-
256
- <div class="grid md:grid-cols-3 gap-8">
257
- <!-- Card 1 - Gradient Border -->
258
- <div class="relative p-1 rounded-lg bg-gradient-to-br from-[var(--vlc-leaf)] to-[var(--vlc-sky)]" data-aos="fade-up">
259
- <div class="bg-white p-8 rounded-lg h-full">
260
- <div class="w-12 h-12 rounded-full bg-[var(--vlc-leaf-tint)] flex items-center justify-center mb-6">
261
- <i data-feather="layout" class="w-6 h-6 text-[var(--vlc-leaf)]"></i>
262
- </div>
263
- <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-3">Web Design & Development</h3>
264
- <p class="text-gray-600 mb-6">Custom, responsive websites that drive conversions and engagement</p>
265
- <a href="https://www.vlcsolutions.com/ecommerce-web-design-development.html" class="text-[var(--vlc-sky)] font-medium flex items-center hover:text-[var(--vlc-navy)]">
266
- Learn more <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
267
- </a>
268
- </div>
269
- </div>
270
-
271
- <!-- Card 2 - Icon with Background -->
272
- <div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition-all" data-aos="fade-up" data-aos-delay="100">
273
- <div class="w-12 h-12 rounded-full bg-[var(--vlc-tint)] flex items-center justify-center mb-6">
274
- <i data-feather="users" class="w-6 h-6 text-[var(--vlc-sky)]"></i>
275
- </div>
276
- <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-3">Consulting</h3>
277
- <p class="text-gray-600 mb-6">Strategic guidance to optimize your e-commerce operations</p>
278
- <a href="https://www.vlcsolutions.com/ecommerce-consulting.html" class="text-[var(--vlc-sky)] font-medium flex items-center hover:text-[var(--vlc-navy)]">
279
- Learn more <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
280
- </a>
281
- </div>
282
-
283
- <!-- Card 3 - Minimalist -->
284
- <div class="border border-gray-200 p-8 rounded-lg hover:border-[var(--vlc-sky)] transition-all" data-aos="fade-up" data-aos-delay="200">
285
- <i data-feather="link" class="w-8 h-8 text-[var(--vlc-navy)] mb-6"></i>
286
- <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-3">Integration</h3>
287
- <p class="text-gray-600 mb-6">Seamless connection between your e-commerce platform and business systems</p>
288
- <a href="https://www.vlcsolutions.com/ecommerce-integration.html" class="text-[var(--vlc-sky)] font-medium flex items-center hover:text-[var(--vlc-navy)]">
289
- Learn more <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
290
- </a>
291
- </div>
292
-
293
- <!-- Card 4 - Highlight on Hover -->
294
- <div class="bg-white p-8 rounded-lg hover:bg-[var(--vlc-tint)] hover:shadow-sm transition-all" data-aos="fade-up" data-aos-delay="300">
295
- <i data-feather="search" class="w-8 h-8 text-[var(--vlc-navy)] mb-6"></i>
296
- <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-3">Search Engine Marketing</h3>
297
- <p class="text-gray-600 mb-6">Increase visibility and drive qualified traffic to your store</p>
298
- <a href="https://www.vlcsolutions.com/search-engine-marketing.html" class="text-[var(--vlc-sky)] font-medium flex items-center hover:text-[var(--vlc-navy)]">
299
- Learn more <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
300
- </a>
301
- </div>
302
-
303
- <!-- Card 5 - Dark Theme -->
304
- <div class="bg-[var(--vlc-navy)] text-white p-8 rounded-lg hover:shadow-lg transition-all" data-aos="fade-up" data-aos-delay="400">
305
- <i data-feather="film" class="w-8 h-8 text-[var(--vlc-sky)] mb-6"></i>
306
- <h3 class="text-xl font-bold mb-3">Multimedia</h3>
307
- <p class="text-gray-300 mb-6">Engaging content that showcases your products effectively</p>
308
- <a href="https://www.vlcsolutions.com/multimedia-services.html" class="text-[var(--vlc-leaf)] font-medium flex items-center hover:text-[var(--vlc-sky)]">
309
- Learn more <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
310
- </a>
311
- </div>
312
-
313
- <!-- Card 6 - With Image -->
314
- <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all" data-aos="fade-up" data-aos-delay="500">
315
- <img src="http://static.photos/technology/640x360/2" alt="Mobile Commerce" class="w-full h-48 object-cover">
316
- <div class="p-6">
317
- <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-3">Mobile Commerce</h3>
318
- <p class="text-gray-600 mb-6">Optimized shopping experiences for mobile users</p>
319
- <a href="https://www.vlcsolutions.com/ecommerce-development-services.html#" class="text-[var(--vlc-sky)] font-medium flex items-center hover:text-[var(--vlc-navy)]">
320
- Learn more <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
321
- </a>
322
- </div>
323
- </div>
324
- </div>
325
-
326
- <div class="text-center mt-16">
327
- <p class="text-xl text-[var(--vlc-navy)] mb-6 mx-auto max-w-3xl">Integrate your systems for a fully connected e-commerce ecosystem. Scale quickly and effortlessly with seamless connections that power smarter, faster decisions.</p>
328
- <a href="https://www.vlcsolutions.com/contactus.html" class="inline-flex items-center justify-center px-8 py-3 rounded-md bg-gradient-to-r from-[var(--vlc-leaf)] to-[var(--vlc-sky)] text-white font-medium hover:shadow-lg transition-all">
329
- Connect and Scale Now
330
- <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i>
331
  </a>
332
- </div>
333
  </div>
 
 
 
 
 
334
  </div>
335
  </div>
336
  </section>
 
245
  </div>
246
  </section>
247
  <!-- Section 2 -->
248
+ <section class="py-16 pattern-tint">
249
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
250
+ <h2 class="text-3xl font-bold text-[var(--vlc-navy)] mb-12 text-center" data-aos="fade-up">Our E-Commerce Portfolio</h2>
251
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-12">
252
+ <a href="https://www.vlcsolutions.com/ecommerce-web-design-development.html" class="card-accent bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition" data-aos="fade-up" data-aos-delay="100">
253
+ <i data-feather="layout" class="w-10 h-10 mx-auto mb-4 text-[var(--vlc-sky)]"></i>
254
+ <h3 class="font-bold text-lg mb-2">Web Design & Development</h3>
255
+ </a>
256
+ <a href="https://www.vlcsolutions.com/ecommerce-consulting.html" class="card-accent bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition" data-aos="fade-up" data-aos-delay="150">
257
+ <i data-feather="users" class="w-10 h-10 mx-auto mb-4 text-[var(--vlc-sky)]"></i>
258
+ <h3 class="font-bold text-lg mb-2">Consulting</h3>
259
+ </a>
260
+ <a href="https://www.vlcsolutions.com/ecommerce-integration.html" class="card-accent bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition" data-aos="fade-up" data-aos-delay="200">
261
+ <i data-feather="link" class="w-10 h-10 mx-auto mb-4 text-[var(--vlc-sky)]"></i>
262
+ <h3 class="font-bold text-lg mb-2">Integration</h3>
263
+ </a>
264
+ <a href="https://www.vlcsolutions.com/search-engine-marketing.html" class="card-accent bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition" data-aos="fade-up" data-aos-delay="250">
265
+ <i data-feather="search" class="w-10 h-10 mx-auto mb-4 text-[var(--vlc-sky)]"></i>
266
+ <h3 class="font-bold text-lg mb-2">Search Engine Marketing</h3>
267
+ </a>
268
+ <a href="https://www.vlcsolutions.com/multimedia-services.html" class="card-accent bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition" data-aos="fade-up" data-aos-delay="300">
269
+ <i data-feather="film" class="w-10 h-10 mx-auto mb-4 text-[var(--vlc-sky)]"></i>
270
+ <h3 class="font-bold text-lg mb-2">Multimedia</h3>
271
+ </a>
272
+ <a href="https://www.vlcsolutions.com/ecommerce-development-services.html#" class="card-accent bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition" data-aos="fade-up" data-aos-delay="350">
273
+ <i data-feather="smartphone" class="w-10 h-10 mx-auto mb-4 text-[var(--vlc-sky)]"></i>
274
+ <h3 class="font-bold text-lg mb-2">Mobile</h3>
275
+ </a>
276
+ <a href="https://www.vlcsolutions.com/social-media-optimization.html" class="card-accent bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition" data-aos="fade-up" data-aos-delay="400">
277
+ <i data-feather="share-2" class="w-10 h-10 mx-auto mb-4 text-[var(--vlc-sky)]"></i>
278
+ <h3 class="font-bold text-lg mb-2">Social Media</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
279
  </a>
 
280
  </div>
281
+ <div class="text-center" data-aos="fade-up">
282
+ <p class="text-xl text-[var(--vlc-navy)] mb-8">Integrate your systems for a fully connected e-commerce ecosystem. Scale quickly and effortlessly with seamless connections that power smarter, faster decisions.</p>
283
+ <div class="flex flex-wrap justify-center gap-4">
284
+ <a href="https://www.vlcsolutions.com/contactus.html" class="btn-primary px-8 py-3 rounded-md text-lg font-medium">Connect and Scale Now</a>
285
+ </div>
286
  </div>
287
  </div>
288
  </section>