header and footer same, total design pattern change

index.html

@@ -218,58 +218,89 @@
       </div>
     </div>
   </header>
-  <!-- Banner Section -->
-  <section class="bg-gradient-to-r from-[var(--vlc-navy)] to-[var(--vlc-sky)] text-white py-20">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-      <h1 class="text-4xl md:text-5xl font-bold mb-4">Got Questions?</h1>
-      <p class="text-xl md:text-2xl mb-8">A VLC Representative Will Get Back to You Shortly.</p>
+  <!-- Hero Section -->
+  <section class="bg-gradient-to-br from-[var(--vlc-navy)] to-[var(--vlc-sky)] text-white py-24 relative overflow-hidden">
+    <div class="container relative z-10">
+      <div class="max-w-3xl mx-auto text-center">
+        <h1 class="mb-6">Got Questions?</h1>
+        <p class="text-xl opacity-90 mb-8">A VLC Representative Will Get Back to You Shortly.</p>
+        <a href="#contact" class="btn btn-primary">
+          Contact Us
+          <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
+        </a>
+      </div>
+    </div>
+    <div class="absolute inset-0 opacity-10">
+      <div class="absolute inset-0 bg-[url('https://static.photos/technology/1200x630/1')] bg-cover bg-center"></div>
     </div>
   </section>
 
   <!-- Intro Section -->
-  <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
-    <div class="text-center max-w-3xl mx-auto">
-      <p class="text-lg md:text-xl text-gray-600">We're here to assist you with your IT needs, answer your questions, or explore how we can help your business thrive. Get in touch today!</p>
+  <section class="section">
+    <div class="container">
+      <div class="max-w-3xl mx-auto text-center">
+        <h2 class="section-title">How Can We Help You?</h2>
+        <p class="text-lg">We're here to assist you with your IT needs, answer your questions, or explore how we can help your business thrive. Get in touch today!</p>
+        <div class="grid grid-cols-3 gap-6 mt-12">
+          <div class="card">
+            <i data-feather="message-circle" class="w-10 h-10 text-[var(--vlc-leaf)] mb-4"></i>
+            <h3>Consultation</h3>
+            <p>Get expert advice on your IT infrastructure and business solutions.</p>
+          </div>
+          <div class="card">
+            <i data-feather="settings" class="w-10 h-10 text-[var(--vlc-leaf)] mb-4"></i>
+            <h3>Implementation</h3>
+            <p>Professional deployment of business applications and systems.</p>
+          </div>
+          <div class="card">
+            <i data-feather="headphones" class="w-10 h-10 text-[var(--vlc-leaf)] mb-4"></i>
+            <h3>Support</h3>
+            <p>24/7 technical support for all your IT needs and challenges.</p>
+          </div>
+        </div>
+      </div>
     </div>
   </section>
-<!-- Section 2 -->
- <section>
-<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-    <!-- Alert Messages -->
-    <div id="fail_email" class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-6 rounded relative hidden">
-      <div class="flex items-center">
-        <i data-feather="alert-circle" class="w-6 h-6 mr-3"></i>
-        <span>Could not send an email! Please try again later.</span>
+  <!-- Contact Section -->
+  <section id="contact" class="section">
+    <div class="container">
+      <!-- Alert Messages -->
+      <div id="fail_email" class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-6 rounded-lg relative hidden">
+        <div class="flex items-center">
+          <i data-feather="alert-circle" class="w-6 h-6 mr-3"></i>
+          <span>Could not send an email! Please try again later.</span>
+        </div>
+        <button onclick="document.getElementById('fail_email').classList.add('hidden')" class="absolute top-0 right-0 p-2">
+          <i data-feather="x" class="w-4 h-4"></i>
+        </button>
       </div>
-      <button onclick="document.getElementById('fail_email').classList.add('hidden')" class="absolute top-0 right-0 p-2">
-        <i data-feather="x" class="w-4 h-4"></i>
-      </button>
-    </div>
 
-    <div id="file_email" class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-6 rounded relative hidden">
-      <div class="flex items-center">
-        <i data-feather="alert-circle" class="w-6 h-6 mr-3"></i>
-        <span>Please upload valid files (PDF or MS-Word) only.</span>
+      <div id="file_email" class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-6 rounded-lg relative hidden">
+        <div class="flex items-center">
+          <i data-feather="alert-circle" class="w-6 h-6 mr-3"></i>
+          <span>Please upload valid files (PDF or MS-Word) only.</span>
+        </div>
+        <button onclick="document.getElementById('file_email').classList.add('hidden')" class="absolute top-0 right-0 p-2">
+          <i data-feather="x" class="w-4 h-4"></i>
+        </button>
       </div>
-      <button onclick="document.getElementById('file_email').classList.add('hidden')" class="absolute top-0 right-0 p-2">
-        <i data-feather="x" class="w-4 h-4"></i>
-      </button>
-    </div>
 
-    <div id="large_email" class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-6 rounded relative hidden">
-      <div class="flex items-center">
-        <i data-feather="alert-circle" class="w-6 h-6 mr-3"></i>
-        <span>File size is larger than the allowed limit.</span>
+      <div id="large_email" class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-6 rounded-lg relative hidden">
+        <div class="flex items-center">
+          <i data-feather="alert-circle" class="w-6 h-6 mr-3"></i>
+          <span>File size is larger than the allowed limit.</span>
+        </div>
+        <button onclick="document.getElementById('large_email').classList.add('hidden')" class="absolute top-0 right-0 p-2">
+          <i data-feather="x" class="w-4 h-4"></i>
+        </button>
       </div>
-      <button onclick="document.getElementById('large_email').classList.add('hidden')" class="absolute top-0 right-0 p-2">
-        <i data-feather="x" class="w-4 h-4"></i>
-      </button>
-    </div>
-    <div class="bg-gradient-to-br from-[var(--vlc-navy)] to-[var(--vlc-sky)] text-white rounded-xl shadow-2xl p-8 mb-12">
+      
+      <div class="bg-gradient-to-br from-[var(--vlc-navy)] to-[var(--vlc-sky)] text-white rounded-[20px] shadow-2xl p-10 mb-12">
       <div class="max-w-4xl mx-auto">
-        <h2 class="text-3xl font-bold text-center mb-6">Ready to Start a conversation? VLC Representative will be in touch.</h2>
-        <div class="bg-white bg-opacity-20 backdrop-blur-sm rounded-lg p-6 mb-8">
-          <form id="contactform" method="post" action="./contact.php" enctype="multipart/form-data" class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <h2 class="text-3xl font-bold text-center mb-8">Ready to Start a conversation?</h2>
+        <p class="text-center text-white opacity-90 mb-8">A VLC Representative will be in touch.</p>
+        <div class="bg-white bg-opacity-10 backdrop-blur-md rounded-xl p-8">
+<form id="contactform" method="post" action="./contact.php" enctype="multipart/form-data" class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
         <input type="hidden" name="action" value="validate_captcha">
 
@@ -336,41 +367,42 @@
     </div>
      </section>
     <!-- Contact Info -->
-<!-- Why Choose Us Section -->
-  <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 bg-[var(--vlc-tint)] rounded-xl">
-    <div class="text-center mb-12">
-      <h2 class="text-3xl font-bold text-[var(--vlc-navy)]">Why Choose VLC Solutions?</h2>
-      <p class="text-lg text-gray-600 mt-4 max-w-3xl mx-auto">We offer custom IT solutions, expert support, and a proven track record of success with mid-market businesses.</p>
-    </div>
+  <!-- Why Choose Us Section -->
+  <section class="section bg-[var(--vlc-tint)]">
+    <div class="container">
+      <div class="text-center">
+        <h2 class="section-title">Why Choose VLC Solutions?</h2>
+        <p class="text-lg max-w-3xl mx-auto">We offer custom IT solutions, expert support, and a proven track record of success with mid-market businesses.</p>
+      </div>
 
-    <div class="grid md:grid-cols-3 gap-8">
-      <div class="bg-white rounded-xl shadow-lg p-8 text-center">
-        <div class="bg-[var(--vlc-leaf-tint)] w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-          <i data-feather="settings" class="w-8 h-8 text-[var(--vlc-leaf)]"></i>
+      <div class="grid grid-cols-3 gap-8 mt-12">
+        <div class="card">
+          <div class="bg-[var(--vlc-leaf-tint)] w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
+            <i data-feather="settings" class="w-8 h-8 text-[var(--vlc-leaf)]"></i>
+          </div>
+          <h3>Custom IT Solutions</h3>
+          <p>Tailored technology solutions designed specifically for your business needs and industry requirements.</p>
         </div>
-        <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-4">Custom IT Solutions</h3>
-        <p class="text-gray-600">Tailored technology solutions designed specifically for your business needs and industry requirements.</p>
-      </div>
 
-      <div class="bg-white rounded-xl shadow-lg p-8 text-center">
-        <div class="bg-[var(--vlc-leaf-tint)] w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-          <i data-feather="users" class="w-8 h-8 text-[var(--vlc-leaf)]"></i>
+        <div class="card">
+          <div class="bg-[var(--vlc-leaf-tint)] w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
+            <i data-feather="users" class="w-8 h-8 text-[var(--vlc-leaf)]"></i>
+          </div>
+          <h3>Expert Support</h3>
+          <p>Access to certified professionals with deep expertise in Microsoft technologies and business applications.</p>
         </div>
-        <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-4">Expert Support</h3>
-        <p class="text-gray-600">Access to certified professionals with deep expertise in Microsoft technologies and business applications.</p>
-      </div>
 
-      <div class="bg-white rounded-xl shadow-lg p-8 text-center">
-        <div class="bg-[var(--vlc-leaf-tint)] w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-          <i data-feather="award" class="w-8 h-8 text-[var(--vlc-leaf)]"></i>
+        <div class="card">
+          <div class="bg-[var(--vlc-leaf-tint)] w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
+            <i data-feather="award" class="w-8 h-8 text-[var(--vlc-leaf)]"></i>
+          </div>
+          <h3>Proven Success</h3>
+          <p>A track record of delivering measurable results for mid-market businesses across various industries.</p>
         </div>
-        <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-4">Proven Success</h3>
-        <p class="text-gray-600">A track record of delivering measurable results for mid-market businesses across various industries.</p>
       </div>
     </div>
   </section>
-
-  <!-- FOOTER -->
+<!-- FOOTER -->
   <footer class="bg-[var(--vlc-navy)] text-white pt-14 pb-8">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="grid md:grid-cols-3 gap-10 mb-10">

style.css

@@ -1,30 +1,121 @@
 
 body {
-	padding: 0;
-	margin: 0;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-	overflow-x: hidden;
+  padding: 0;
+  margin: 0;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  overflow-x: hidden;
+  background-color: #f9fafb;
+  line-height: 1.6;
 }
+
+.container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+h1, h2, h3, h4 {
+  font-weight: 700;
+  color: var(--vlc-navy);
+  line-height: 1.3;
+}
+
 h1 {
-	font-size: 16px;
-	margin-top: 0;
+  font-size: 2.5rem;
+  margin-bottom: 1.5rem;
+}
+
+h2 {
+  font-size: 2rem;
+  margin-bottom: 1.25rem;
+}
+
+h3 {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
 }
 
 p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+  color: #4b5563;
+  font-size: 1.1rem;
+  margin-bottom: 1.25rem;
+}
+
+.section {
+  padding: 5rem 0;
+}
+
+.section-title {
+  text-align: center;
+  margin-bottom: 4rem;
 }
 
 .card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
+              0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  padding: 2rem;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 
+              0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.btn {
+  display: inline-block;
+  padding: 0.75rem 1.5rem;
+  border-radius: 8px;
+  font-weight: 600;
+  text-align: center;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.btn-primary {
+  background: var(--vlc-navy);
+  color: white;
+}
+
+.btn-primary:hover {
+  background: var(--vlc-navy-700);
+  transform: translateY(-2px);
+}
+
+.grid {
+  display: grid;
+  gap: 2rem;
+}
+
+.grid-cols-1 {
+  grid-template-columns: repeat(1, 1fr);
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-cols-3 {
+  grid-template-columns: repeat(3, 1fr);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+@media (max-width: 768px) {
+  .grid-cols-2, .grid-cols-3 {
+    grid-template-columns: 1fr;
+  }
+  
+  .section {
+    padding: 3rem 0;
+  }
+  
+  h1 {
+    font-size: 2rem;
+  }
+  
+  h2 {
+    font-size: 1.75rem;
+  }
 }