From b5170caf9d7fb12d9e47cf00376c96b5dcad7e8b Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Sun, 17 May 2026 17:11:29 -0500
Subject: [PATCH] refactor: full-bleed section backgrounds with centered
 content (closes #48)

---
 src/pages/About.jsx          | 172 ++++++++-------
 src/pages/Contact.jsx        | 410 ++++++++++++++++++-----------------
 src/pages/Home.jsx           |  22 +-
 src/pages/Industries.jsx     | 124 ++++++-----
 src/pages/IndustryDetail.jsx | 158 +++++++-------
 src/pages/ServiceDetail.jsx  | 188 ++++++++--------
 src/pages/Services.jsx       | 122 ++++++-----
 src/pages/Support.jsx        | 408 +++++++++++++++++-----------------
 8 files changed, 840 insertions(+), 764 deletions(-)

diff --git a/src/pages/About.jsx b/src/pages/About.jsx
index 37d2b20..26c9a4f 100644
--- a/src/pages/About.jsx
+++ b/src/pages/About.jsx
@@ -1,102 +1,118 @@
 const About = () => {
   return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
+    <>
       {/* Page Hero */}
-      <section className="mb-16">
-        <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">About Queue North</h1>
-        <p className="text-xl text-soft-text max-w-3xl">
-          We're communications and infrastructure partners who cut through the vendor noise to deliver what actually works for your business.
-        </p>
+      <section className="bg-background py-16 lg:py-24">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div>
+            <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">About Queue North</h1>
+            <p className="text-xl text-soft-text max-w-3xl">
+              We're communications and infrastructure partners who cut through the vendor noise to deliver what actually works for your business.
+            </p>
+          </div>
+        </div>
       </section>
 
       {/* Company Story */}
-      <section className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
-        <div>
-          <h2 className="text-3xl font-bold text-primary-navy mb-4">Our Story</h2>
-          <p className="text-lg text-soft-text mb-6 leading-relaxed">
-            Founded by military veterans, Queue North Technologies began with a simple mission: help businesses navigate the complex world of communications technology. What started as a small team of communications specialists has grown into a full-service provider for SMB and enterprise organizations across multiple industries.
-          </p>
-          <p className="text-lg text-soft-text mb-6 leading-relaxed">
-            Our journey began when our founders saw too many businesses paying too much for solutions that didn't fit their actual needs. We believed in a different approach — one focused on understanding your business challenges first, then selecting or integrating the right technologies to solve them.
-          </p>
-          <p className="text-lg text-soft-text leading-relaxed">
-            Today, we continue that mission as an 8x8 Certified Partner, helping organizations modernize their communications, streamline their operations, and focus on what matters most — their customers and their growth.
-          </p>
-          <p className="text-lg text-soft-text mt-4 leading-relaxed">
-            We continue the mission — bringing the same discipline, reliability, and commitment to every client relationship that we brought to our service.
-          </p>
-        </div>
-        <div>
-          <div className="rounded-xl overflow-hidden shadow-lg">
-            <img 
-              src="/assets/about-image.png" 
-              alt="Our Team" 
-              className="w-full max-h-96 h-auto object-cover"
-            />
+      <section className="bg-background py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+            <div>
+              <h2 className="text-3xl font-bold text-primary-navy mb-4">Our Story</h2>
+              <p className="text-lg text-soft-text mb-6 leading-relaxed">
+                Founded by military veterans, Queue North Technologies began with a simple mission: help businesses navigate the complex world of communications technology. What started as a small team of communications specialists has grown into a full-service provider for SMB and enterprise organizations across multiple industries.
+              </p>
+              <p className="text-lg text-soft-text mb-6 leading-relaxed">
+                Our journey began when our founders saw too many businesses paying too much for solutions that didn't fit their actual needs. We believed in a different approach — one focused on understanding your business challenges first, then selecting or integrating the right technologies to solve them.
+              </p>
+              <p className="text-lg text-soft-text leading-relaxed">
+                Today, we continue that mission as an 8x8 Certified Partner, helping organizations modernize their communications, streamline their operations, and focus on what matters most — their customers and their growth.
+              </p>
+              <p className="text-lg text-soft-text mt-4 leading-relaxed">
+                We continue the mission — bringing the same discipline, reliability, and commitment to every client relationship that we brought to our service.
+              </p>
+            </div>
+            <div>
+              <div className="rounded-xl overflow-hidden shadow-lg">
+                <img 
+                  src="/assets/about-image.png" 
+                  alt="Our Team" 
+                  className="w-full max-h-96 h-auto object-cover"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </section>
 
       {/* Our Values */}
-      <section className="mb-16">
-        <h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Our Values</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {[
-            { title: 'Business First', desc: 'We focus on your business outcomes, not just technology' },
-            { title: 'Honesty', desc: 'We tell you what you need, not just what we can sell' },
-            { title: 'Partnership', desc: 'We work with you, not just for you' },
-            { title: 'Expertise', desc: 'Our team has real, proven experience in your industry' },
-            { title: 'Reliability', desc: 'When we say we will do something, we do it' },
-            { title: 'Support', desc: 'Our job doesn\'t end when installation completes' },
-          ].map((value, index) => (
-            <div key={index} className="p-6 rounded-lg border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
-              <h3 className="text-xl font-semibold text-primary-navy mb-3">{value.title}</h3>
-              <p className="text-soft-text">{value.desc}</p>
-            </div>
-          ))}
+      <section className="bg-background py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Our Values</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {[
+              { title: 'Business First', desc: 'We focus on your business outcomes, not just technology' },
+              { title: 'Honesty', desc: 'We tell you what you need, not just what we can sell' },
+              { title: 'Partnership', desc: 'We work with you, not just for you' },
+              { title: 'Expertise', desc: 'Our team has real, proven experience in your industry' },
+              { title: 'Reliability', desc: 'When we say we will do something, we do it' },
+              { title: 'Support', desc: 'Our job doesn\'t end when installation completes' },
+            ].map((value, index) => (
+              <div key={index} className="p-6 rounded-lg border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
+                <h3 className="text-xl font-semibold text-primary-navy mb-3">{value.title}</h3>
+                <p className="text-soft-text">{value.desc}</p>
+              </div>
+            ))}
+          </div>
         </div>
       </section>
 
       {/* Our Expertise */}
-      <section className="mb-16">
-        <h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Our Expertise</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          {[
-            '8x8 Certified Partner',
-            'VoIP and UCaaS Solutions',
-            'Contact Center Implementation',
-            'Network Infrastructure',
-            'Cloud Migration',
-            'Vendor-Neutral Consulting',
-            'Disaster Recovery Planning',
-            '24/7 Support &amp; Monitoring',
-          ].map((expertise, index) => (
-            <div key={index} className="flex items-center gap-2 p-3 rounded-lg border border-border bg-card">
-              <div className="h-5 w-5 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
-                <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
-                </svg>
+      <section className="bg-background py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Our Expertise</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            {[
+              '8x8 Certified Partner',
+              'VoIP and UCaaS Solutions',
+              'Contact Center Implementation',
+              'Network Infrastructure',
+              'Cloud Migration',
+              'Vendor-Neutral Consulting',
+              'Disaster Recovery Planning',
+              '24/7 Support & Monitoring',
+            ].map((expertise, index) => (
+              <div key={index} className="flex items-center gap-2 p-3 rounded-lg border border-border bg-card">
+                <div className="h-5 w-5 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
+                  <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                  </svg>
+                </div>
+                <span className="text-sm font-medium text-text">{expertise}</span>
               </div>
-              <span className="text-sm font-medium text-text">{expertise}</span>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
       </section>
 
       {/* CTA */}
-      <section className="bg-section-alt rounded-xl p-8 md:p-12 text-center">
-        <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Ready to Learn More?</h2>
-        <p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
-          Schedule a free consultation with our communications experts to discuss your needs.
-        </p>
-        <a
-          href="/contact"
-          className="inline-block bg-primary-navy text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-primary-navy-dark transition-colors"
-        >
-          Request Consultation
-        </a>
+      <section className="bg-section-alt py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <div>
+            <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Ready to Learn More?</h2>
+            <p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
+              Schedule a free consultation with our communications experts to discuss your needs.
+            </p>
+            <a
+              href="/contact"
+              className="inline-block bg-primary-navy text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-primary-navy-dark transition-colors"
+            >
+              Request Consultation
+            </a>
+          </div>
+        </div>
       </section>
-    </div>
+    </>
   )
 }
 
diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx
index d7ae851..afaa997 100644
--- a/src/pages/Contact.jsx
+++ b/src/pages/Contact.jsx
@@ -100,218 +100,226 @@ const Contact = () => {
   }
 
   return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
+    <>
       {/* Page Hero */}
-      <section className="mb-16">
-        <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Contact Us</h1>
-        <p className="text-xl text-soft-text max-w-3xl mb-8">
-          Have questions about our services? We're here to help. Fill out the form and we'll get back to you shortly.
-        </p>
-        <div className="flex flex-wrap gap-4 mb-8">
-          <div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
-            <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 5.13a1 1 0 01-1.31.42a2 2 0 00-2.63-.54l-2.238 5.03a2 2 0 01-2.71.319L2.663 12H4a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2V5z" />
-            </svg>
-            <p className="text-sm font-medium">(906) 482-6616</p>
+      <section className="bg-background py-16 lg:py-24">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div>
+            <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Contact Us</h1>
+            <p className="text-xl text-soft-text max-w-3xl mb-8">
+              Have questions about our services? We're here to help. Fill out the form and we'll get back to you shortly.
+            </p>
+            <div className="flex flex-wrap gap-4 mb-8">
+              <div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
+                <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 5.13a1 1 0 01-1.31.42a2 2 0 00-2.63-.54l-2.238 5.03a2 2 0 01-2.71.319L2.663 12H4a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2V5z" />
+                </svg>
+                <p className="text-sm font-medium">(906) 482-6616</p>
+              </div>
+              <div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
+                <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                </svg>
+                <p className="text-sm font-medium">info@queuenorth.com</p>
+              </div>
+            </div>
+            <div className="mb-8">
+              <a href="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-6 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors">
+                Request Consultation
+              </a>
+            </div>
           </div>
-          <div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
-            <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-            </svg>
-            <p className="text-sm font-medium">info@queuenorth.com</p>
-          </div>
-        </div>
-        <div className="mb-8">
-          <a href="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-6 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors">
-            Request Consultation
-          </a>
         </div>
       </section>
 
       {/* Contact Form */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
-        {/* Left - Info */}
-        <div>
-          <div className="mb-8">
-            <h2 className="text-2xl font-bold text-primary-navy mb-4">Get in Touch</h2>
-            <p className="text-soft-text mb-6">
-              Our team of communications and infrastructure experts is ready to help you find the right solution for your business needs.
-            </p>
-            <div className="space-y-4">
-              <div>
-                <h3 className="font-semibold text-text mb-2">Hours of Operation</h3>
-                <p className="text-soft-text">Monday - Friday: 8:00 AM - 6:00 PM CT</p>
+      <section className="bg-background py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+            {/* Left - Info */}
+            <div>
+              <div className="mb-8">
+                <h2 className="text-2xl font-bold text-primary-navy mb-4">Get in Touch</h2>
+                <p className="text-soft-text mb-6">
+                  Our team of communications and infrastructure experts is ready to help you find the right solution for your business needs.
+                </p>
+                <div className="space-y-4">
+                  <div>
+                    <h3 className="font-semibold text-text mb-2">Hours of Operation</h3>
+                    <p className="text-soft-text">Monday - Friday: 8:00 AM - 6:00 PM CT</p>
+                  </div>
+                  <div>
+                    <h3 className="font-semibold text-text mb-2">Phone</h3>
+                    <p className="text-soft-text">(906) 482-6616</p>
+                  </div>
+                  <div>
+                    <h3 className="font-semibold text-text mb-2">Contact Us</h3>
+                    <p className="text-soft-text">Use the form on the right to get in touch with our team.</p>
+                  </div>
+                </div>
               </div>
-              <div>
-                <h3 className="font-semibold text-text mb-2">Phone</h3>
-                <p className="text-soft-text">(906) 482-6616</p>
-              </div>
-              <div>
-                <h3 className="font-semibold text-text mb-2">Contact Us</h3>
-                <p className="text-soft-text">Use the form on the right to get in touch with our team.</p>
+
+              <div className="bg-section-alt rounded-lg p-6">
+                <h3 className="font-semibold text-primary-navy mb-4">Why Choose Queue North?</h3>
+                <ul className="space-y-3">
+                  {[
+                    '8x8 Certified Partner with proven expertise',
+                    '25+ years of industry experience',
+                    'SMB to Enterprise solutions',
+                    'Focus on your business outcomes',
+                  ].map((item, index) => (
+                    <li key={index} className="flex items-center gap-3 text-text">
+                      <svg className="h-5 w-5 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                      </svg>
+                      {item}
+                    </li>
+                  ))}
+                </ul>
               </div>
             </div>
+
+            {/* Right - Form */}
+            <div>
+              <form onSubmit={handleSubmit} noValidate className={`space-y-6 ${mutation.isPending ? 'opacity-70 pointer-events-none' : ''}`}>
+                <div>
+                  <label htmlFor="company" className="block text-sm font-medium text-text mb-2">
+                    Company Name <span className="text-red-600">*</span>
+                  </label>
+                  <Input
+                    type="text"
+                    id="company"
+                    name="company"
+                    value={formState.company}
+                    onChange={handleChange}
+                    required
+                    placeholder="Your company name"
+                    className={errors.company ? 'border-red-500 focus-visible:ring-red-500' : ''}
+                  />
+                  {debouncedErrors.company && (
+                    <p className="text-xs text-red-600 mt-1">{debouncedErrors.company}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label htmlFor="name" className="block text-sm font-medium text-text mb-2">
+                    Name <span className="text-red-600">*</span>
+                  </label>
+                  <Input
+                    type="text"
+                    id="name"
+                    name="name"
+                    value={formState.name}
+                    onChange={handleChange}
+                    required
+                    placeholder="Your full name"
+                    className={errors.name ? 'border-red-500 focus-visible:ring-red-500' : ''}
+                  />
+                  {debouncedErrors.name && (
+                    <p className="text-xs text-red-600 mt-1">{debouncedErrors.name}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label htmlFor="email" className="block text-sm font-medium text-text mb-2">
+                    Email <span className="text-red-600">*</span>
+                  </label>
+                  <Input
+                    type="email"
+                    id="email"
+                    name="email"
+                    value={formState.email}
+                    onChange={handleChange}
+                    required
+                    placeholder="your.email@example.com"
+                    className={errors.email ? 'border-red-500 focus-visible:ring-red-500' : ''}
+                  />
+                  {debouncedErrors.email && (
+                    <p className="text-xs text-red-600 mt-1">{debouncedErrors.email}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label htmlFor="phone" className="block text-sm font-medium text-text mb-2">
+                    Phone (Optional)
+                  </label>
+                  <Input
+                    type="tel"
+                    id="phone"
+                    name="phone"
+                    value={formState.phone}
+                    onChange={handleChange}
+                    placeholder="(555) 123-4567"
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="zip" className="block text-sm font-medium text-text mb-2">
+                    ZIP Code (Optional)
+                  </label>
+                  <Input
+                    type="text"
+                    id="zip"
+                    name="zip"
+                    value={formState.zip}
+                    onChange={handleChange}
+                    placeholder="12345"
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="service_interest" className="block text-sm font-medium text-text mb-2">
+                    Service Interest (Optional)
+                  </label>
+                  <Select
+                    id="service_interest"
+                    name="service_interest"
+                    value={formState.service_interest}
+                    onChange={handleChange}
+                  >
+                    <option value="">Select a service...</option>
+                    <option value="unified-communications">Unified Communications</option>
+                    <option value="contact-center">Contact Center</option>
+                    <option value="managed-support">Managed Support</option>
+                    <option value="consulting-training">Consulting & Training</option>
+                    <option value="infrastructure-cabling">Infrastructure Cabling</option>
+                    <option value="wireless-access">Wireless Access</option>
+                    <option value="local-networking">Local Networking</option>
+                  </Select>
+                </div>
+
+                <div>
+                  <label htmlFor="message" className="block text-sm font-medium text-text mb-2">
+                    Message <span className="text-red-600">*</span>
+                  </label>
+                  <Textarea
+                    id="message"
+                    name="message"
+                    value={formState.message}
+                    onChange={handleChange}
+                    required
+                    placeholder="Tell us about your needs..."
+                    className={`w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${errors.message ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
+                    rows={5}
+                  />
+                  {debouncedErrors.message && (
+                    <p className="text-xs text-red-600 mt-1">{debouncedErrors.message}</p>
+                  )}
+                </div>
+
+                <Button
+                  type="submit"
+                  className="w-full"
+                  disabled={mutation.isPending}
+                >
+                  {mutation.isPending ? 'Submitting...' : 'Request Consultation'}
+                </Button>
+              </form>
+            </div>
           </div>
-
-          <div className="bg-section-alt rounded-lg p-6">
-            <h3 className="font-semibold text-primary-navy mb-4">Why Choose Queue North?</h3>
-            <ul className="space-y-3">
-              {[
-                '8x8 Certified Partner with proven expertise',
-                '25+ years of industry experience',
-                'SMB to Enterprise solutions',
-                'Focus on your business outcomes',
-              ].map((item, index) => (
-                <li key={index} className="flex items-center gap-3 text-text">
-                  <svg className="h-5 w-5 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
-                  </svg>
-                  {item}
-                </li>
-              ))}
-            </ul>
-          </div>
         </div>
-
-        {/* Right - Form */}
-        <div>
-          <form onSubmit={handleSubmit} noValidate className={`space-y-6 ${mutation.isPending ? 'opacity-70 pointer-events-none' : ''}`}>
-            <div>
-              <label htmlFor="company" className="block text-sm font-medium text-text mb-2">
-                Company Name <span className="text-red-600">*</span>
-              </label>
-              <Input
-                type="text"
-                id="company"
-                name="company"
-                value={formState.company}
-                onChange={handleChange}
-                required
-                placeholder="Your company name"
-                className={errors.company ? 'border-red-500 focus-visible:ring-red-500' : ''}
-              />
-              {debouncedErrors.company && (
-                <p className="text-xs text-red-600 mt-1">{debouncedErrors.company}</p>
-              )}
-            </div>
-
-            <div>
-              <label htmlFor="name" className="block text-sm font-medium text-text mb-2">
-                Name <span className="text-red-600">*</span>
-              </label>
-              <Input
-                type="text"
-                id="name"
-                name="name"
-                value={formState.name}
-                onChange={handleChange}
-                required
-                placeholder="Your full name"
-                className={errors.name ? 'border-red-500 focus-visible:ring-red-500' : ''}
-              />
-              {debouncedErrors.name && (
-                <p className="text-xs text-red-600 mt-1">{debouncedErrors.name}</p>
-              )}
-            </div>
-
-            <div>
-              <label htmlFor="email" className="block text-sm font-medium text-text mb-2">
-                Email <span className="text-red-600">*</span>
-              </label>
-              <Input
-                type="email"
-                id="email"
-                name="email"
-                value={formState.email}
-                onChange={handleChange}
-                required
-                placeholder="your.email@example.com"
-                className={errors.email ? 'border-red-500 focus-visible:ring-red-500' : ''}
-              />
-              {debouncedErrors.email && (
-                <p className="text-xs text-red-600 mt-1">{debouncedErrors.email}</p>
-              )}
-            </div>
-
-            <div>
-              <label htmlFor="phone" className="block text-sm font-medium text-text mb-2">
-                Phone (Optional)
-              </label>
-              <Input
-                type="tel"
-                id="phone"
-                name="phone"
-                value={formState.phone}
-                onChange={handleChange}
-                placeholder="(555) 123-4567"
-              />
-            </div>
-
-            <div>
-              <label htmlFor="zip" className="block text-sm font-medium text-text mb-2">
-                ZIP Code (Optional)
-              </label>
-              <Input
-                type="text"
-                id="zip"
-                name="zip"
-                value={formState.zip}
-                onChange={handleChange}
-                placeholder="12345"
-              />
-            </div>
-
-            <div>
-              <label htmlFor="service_interest" className="block text-sm font-medium text-text mb-2">
-                Service Interest (Optional)
-              </label>
-              <Select
-                id="service_interest"
-                name="service_interest"
-                value={formState.service_interest}
-                onChange={handleChange}
-              >
-                <option value="">Select a service...</option>
-                <option value="unified-communications">Unified Communications</option>
-                <option value="contact-center">Contact Center</option>
-                <option value="managed-support">Managed Support</option>
-                <option value="consulting-training">Consulting & Training</option>
-                <option value="infrastructure-cabling">Infrastructure Cabling</option>
-                <option value="wireless-access">Wireless Access</option>
-                <option value="local-networking">Local Networking</option>
-              </Select>
-            </div>
-
-            <div>
-              <label htmlFor="message" className="block text-sm font-medium text-text mb-2">
-                Message <span className="text-red-600">*</span>
-              </label>
-              <textarea
-                id="message"
-                name="message"
-                value={formState.message}
-                onChange={handleChange}
-                required
-                placeholder="Tell us about your needs..."
-                rows={5}
-                className={`flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${errors.message ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
-              />
-              {debouncedErrors.message && (
-                <p className="text-xs text-red-600 mt-1">{debouncedErrors.message}</p>
-              )}
-            </div>
-
-            <Button
-              type="submit"
-              className="w-full"
-              disabled={mutation.isPending}
-            >
-              {mutation.isPending ? 'Submitting...' : 'Request Consultation'}
-            </Button>
-          </form>
-        </div>
-      </div>
-    </div>
+      </section>
+    </>
   )
 }
 
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index abf9b10..0fa9749 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -17,10 +17,10 @@ const Home = () => {
   const navigate = useNavigate()
 
   return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <>
       {/* Hero Section */}
       <section className="bg-gradient-to-br from-primary-navy via-primary-navy to-teal-900 text-white py-16 md:py-24">
-        <div className="container mx-auto px-4">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center">
             <div className="flex flex-col gap-6 md:gap-8">
               <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold">
@@ -71,7 +71,7 @@ const Home = () => {
 
       {/* Trust Bar */}
       <section className="bg-section-alt py-12">
-        <div className="container mx-auto px-4">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-8">
             <h2 className="text-2xl font-semibold text-primary-navy mb-2">Trusted Partner</h2>
             <p className="text-soft-text">8x8 and Cisco Certified Partner with proven expertise</p>
@@ -95,8 +95,8 @@ const Home = () => {
 
       {/* JointLogoWhite Trust Section */}
       <section className="bg-primary-navy py-16 md:py-24">
-        <div className="container mx-auto px-4 text-center">
-          <div className="max-w-3xl mx-auto">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <div>
             <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">Certified Excellence</h2>
             <div className="flex flex-col md:flex-row items-center justify-center gap-12">
               <div className="flex-1">
@@ -122,7 +122,7 @@ const Home = () => {
 
       {/* Trust Signals Section */}
       <section className="bg-section-alt py-16 md:py-24">
-        <div className="container mx-auto px-4">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-12">
             <h2 className="text-2xl md:text-3xl font-semibold text-primary-navy mb-2">Trusted by Thousands of Businesses</h2>
             <p className="text-xl text-soft-text max-w-2xl mx-auto mb-6">
@@ -226,7 +226,7 @@ const Home = () => {
 
       {/* Services Section */}
       <section className="bg-background py-16 md:py-24">
-        <div className="container mx-auto px-4">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-12">
             <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">What We Handle</h2>
             <p className="text-xl text-soft-text max-w-2xl mx-auto">
@@ -270,7 +270,7 @@ const Home = () => {
 
       {/* Why Queue North */}
       <section className="bg-section-alt py-16 md:py-24">
-        <div className="container mx-auto px-4">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-12">
             <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">Why Queue North</h2>
             <p className="text-xl text-soft-text max-w-2xl mx-auto mb-6">
@@ -334,7 +334,7 @@ const Home = () => {
 
       {/* Industries Section */}
       <section className="bg-background py-16 md:py-24">
-        <div className="container mx-auto px-4">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-12">
             <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">Industries We Serve</h2>
             <p className="text-xl text-soft-text max-w-2xl mx-auto">
@@ -367,7 +367,7 @@ const Home = () => {
 
       {/* Final CTA */}
       <section className="bg-primary-navy text-white py-16 md:py-24">
-        <div className="container mx-auto px-4 text-center max-w-7xl">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
           <h2 className="text-3xl md:text-4xl font-bold mb-6">
             Tell us what you're trying to fix. We'll help map the path.
           </h2>
@@ -379,7 +379,7 @@ const Home = () => {
           </Button>
         </div>
       </section>
-    </div>
+    </>
   )
 }
 
diff --git a/src/pages/Industries.jsx b/src/pages/Industries.jsx
index cf77782..b3297e2 100644
--- a/src/pages/Industries.jsx
+++ b/src/pages/Industries.jsx
@@ -2,75 +2,87 @@ import { industries } from '@/data/industries'
 
 const Industries = () => {
   return (
-    <div className="container mx-auto px-4 py-16 md:py-24">
+    <>
       {/* Page Hero */}
-      <section className="mb-16">
-        <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Industries We Serve</h1>
-        <p className="text-xl text-soft-text max-w-3xl">
-          Tailored communications and infrastructure solutions designed for the unique challenges of your industry.
-        </p>
+      <section className="bg-background py-16 md:py-24">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div>
+            <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Industries We Serve</h1>
+            <p className="text-xl text-soft-text max-w-3xl">
+              Tailored communications and infrastructure solutions designed for the unique challenges of your industry.
+            </p>
+          </div>
+        </div>
       </section>
 
       {/* Industries Grid */}
-      <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
-        {industries.map((industry) => (
-          <div key={industry.id} className="group cursor-pointer">
-            <div className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border">
-              <div className="p-6">
-                <div className="flex items-center gap-4 mb-4">
-                  <div className="h-12 w-12 rounded-lg bg-section-alt flex items-center justify-center flex-shrink-0">
-                    <svg className="h-6 w-6 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
-                    </svg>
-                  </div>
-                  <h3 className="text-xl font-semibold text-primary-navy group-hover:text-primary-navy-dark transition-colors">
-                    {industry.name}
-                  </h3>
-                </div>
-                <p className="text-soft-text mb-4">{industry.shortDesc}</p>
-                
-                <div className="mb-4">
-                  <h4 className="text-sm font-semibold text-text mb-2">Pain Points We Solve</h4>
-                  <div className="space-y-2">
-                    {industry.painPoints.slice(0, 2).map((painPoint, index) => (
-                      <div key={index} className="flex items-start gap-2 text-sm text-soft-text">
-                        <div className="h-4 w-4 rounded-full bg-red-100 text-red-600 flex items-center justify-center flex-shrink-0 mt-0.5">
-                          <svg className="h-2 w-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                          </svg>
-                        </div>
-                        <span>{painPoint}</span>
+      <section className="bg-background py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
+            {industries.map((industry) => (
+              <div key={industry.id} className="group cursor-pointer">
+                <div className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border">
+                  <div className="p-6">
+                    <div className="flex items-center gap-4 mb-4">
+                      <div className="h-12 w-12 rounded-lg bg-section-alt flex items-center justify-center flex-shrink-0">
+                        <svg className="h-6 w-6 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                        </svg>
                       </div>
-                    ))}
+                      <h3 className="text-xl font-semibold text-primary-navy group-hover:text-primary-navy-dark transition-colors">
+                        {industry.name}
+                      </h3>
+                    </div>
+                    <p className="text-soft-text mb-4">{industry.shortDesc}</p>
+                    
+                    <div className="mb-4">
+                      <h4 className="text-sm font-semibold text-text mb-2">Pain Points We Solve</h4>
+                      <div className="space-y-2">
+                        {industry.painPoints.slice(0, 2).map((painPoint, index) => (
+                          <div key={index} className="flex items-start gap-2 text-sm text-soft-text">
+                            <div className="h-4 w-4 rounded-full bg-red-100 text-red-600 flex items-center justify-center flex-shrink-0 mt-0.5">
+                              <svg className="h-2 w-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                              </svg>
+                            </div>
+                            <span>{painPoint}</span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                    
+                    <a href={`/industries/${industry.id}`} className="inline-flex items-center gap-1 text-primary-navy font-medium hover:underline mt-2">
+                      Learn more
+                      <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
+                      </svg>
+                    </a>
                   </div>
                 </div>
-                
-                <a href={`/industries/${industry.id}`} className="inline-flex items-center gap-1 text-primary-navy font-medium hover:underline mt-2">
-                  Learn more
-                  <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
-                  </svg>
-                </a>
               </div>
-            </div>
+            ))}
           </div>
-        ))}
+        </div>
       </section>
 
       {/* CTA */}
-      <section className="mt-16 bg-section-alt rounded-xl p-8 md:p-12 text-center">
-        <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Can't Find Your Industry?</h2>
-        <p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
-          We work with businesses across all industries. Contact us to discuss your specific needs.
-        </p>
-        <a
-          href="/contact"
-          className="inline-block bg-primary-navy text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-primary-navy-dark transition-colors"
-        >
-          Request Consultation
-        </a>
+      <section className="bg-section-alt py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <div>
+            <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Can't Find Your Industry?</h2>
+            <p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
+              We work with businesses across all industries. Contact us to discuss your specific needs.
+            </p>
+            <a
+              href="/contact"
+              className="inline-block bg-primary-navy text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-primary-navy-dark transition-colors"
+            >
+              Request Consultation
+            </a>
+          </div>
+        </div>
       </section>
-    </div>
+    </>
   )
 }
 
diff --git a/src/pages/IndustryDetail.jsx b/src/pages/IndustryDetail.jsx
index 21c10f0..3ef5aaf 100644
--- a/src/pages/IndustryDetail.jsx
+++ b/src/pages/IndustryDetail.jsx
@@ -8,96 +8,106 @@ const IndustryDetail = () => {
 
   if (!industry) {
     return (
-      <div className="container mx-auto px-4 py-16 md:py-24">
-        <div className="text-center">
-          <h1 className="text-3xl font-bold text-primary-navy mb-4">Industry Not Found</h1>
-          <p className="text-xl text-soft-text mb-8">The industry you're looking for doesn't exist.</p>
-          <a href="/industries" className="text-primary-navy hover:underline">
-            Back to Industries
-          </a>
+      <section className="bg-background py-16 md:py-24">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center">
+            <h1 className="text-3xl font-bold text-primary-navy mb-4">Industry Not Found</h1>
+            <p className="text-xl text-soft-text mb-8">The industry you're looking for doesn't exist.</p>
+            <a href="/industries" className="text-primary-navy hover:underline">
+              Back to Industries
+            </a>
+          </div>
         </div>
-      </div>
+      </section>
     )
   }
 
   return (
-    <div className="container mx-auto px-4 py-16 md:py-24">
+    <>
       {/* Page Hero */}
-      <section className="mb-16">
-        <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">{industry.name}</h1>
-        <p className="text-xl text-soft-text max-w-3xl">{industry.shortDesc}</p>
+      <section className="bg-background py-16 md:py-24">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div>
+            <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">{industry.name}</h1>
+            <p className="text-xl text-soft-text max-w-3xl">{industry.shortDesc}</p>
+          </div>
+        </div>
       </section>
 
       {/* Main Content */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
-        {/* Left Column - Main Content */}
-        <div className="lg:col-span-2">
-          <section className="mb-12">
-            <h2 className="text-2xl font-bold text-primary-navy mb-4">Industry Overview</h2>
-            <p className="text-lg text-soft-text mb-6 leading-relaxed">
-              {industry.fullDesc}
-            </p>
-          </section>
+      <section className="bg-background py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
+            {/* Left Column - Main Content */}
+            <div className="lg:col-span-2">
+              <div className="mb-12">
+                <h2 className="text-2xl font-bold text-primary-navy mb-4">Industry Overview</h2>
+                <p className="text-lg text-soft-text mb-6 leading-relaxed">
+                  {industry.fullDesc}
+                </p>
+              </div>
 
-          <section className="mb-12">
-            <h2 className="text-2xl font-bold text-primary-navy mb-4">Pain Points We Solve</h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {industry.painPoints.map((painPoint, index) => (
-                <div key={index} className="flex items-start gap-3">
-                  <div className="h-6 w-6 rounded-full bg-red-100 text-red-700 flex items-center justify-center flex-shrink-0 mt-1">
-                    <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                    </svg>
-                  </div>
-                  <span className="text-lg text-text">{painPoint}</span>
+              <div className="mb-12">
+                <h2 className="text-2xl font-bold text-primary-navy mb-4">Pain Points We Solve</h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {industry.painPoints.map((painPoint, index) => (
+                    <div key={index} className="flex items-start gap-3">
+                      <div className="h-6 w-6 rounded-full bg-red-100 text-red-700 flex items-center justify-center flex-shrink-0 mt-1">
+                        <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                      </div>
+                      <span className="text-lg text-text">{painPoint}</span>
+                    </div>
+                  ))}
                 </div>
-              ))}
-            </div>
-          </section>
+              </div>
 
-          <section className="mb-12">
-            <h2 className="text-2xl font-bold text-primary-navy mb-4">Our Solutions</h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {industry.solutions.map((solution, index) => (
-                <div key={index} className="flex items-start gap-3">
-                  <div className="h-6 w-6 rounded-full bg-green-100 text-green-700 flex items-center justify-center flex-shrink-0 mt-1">
-                    <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
-                    </svg>
-                  </div>
-                  <span className="text-lg text-text">{solution}</span>
+              <div className="mb-12">
+                <h2 className="text-2xl font-bold text-primary-navy mb-4">Our Solutions</h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {industry.solutions.map((solution, index) => (
+                    <div key={index} className="flex items-start gap-3">
+                      <div className="h-6 w-6 rounded-full bg-green-100 text-green-700 flex items-center justify-center flex-shrink-0 mt-1">
+                        <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                        </svg>
+                      </div>
+                      <span className="text-lg text-text">{solution}</span>
+                    </div>
+                  ))}
                 </div>
-              ))}
+              </div>
             </div>
-          </section>
-        </div>
 
-        {/* Right Column - Sidebar */}
-        <div className="lg:col-span-1">
-          <Card className="sticky top-24">
-            <CardHeader>
-              <CardTitle className="text-primary-navy">Industry Insights</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div>
-                <h4 className="font-semibold text-text mb-2">Industry</h4>
-                <p className="text-soft-text">{industry.name}</p>
-              </div>
-              <div className="pt-4 border-t border-border">
-                <a href="/contact" className="block w-full bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors">
-                  Request Consultation
-                </a>
-              </div>
-              <div className="pt-2">
-                <a href="/industries" className="text-primary-navy hover:underline">
-                  ← Back to Industries
-                </a>
-              </div>
-            </CardContent>
-          </Card>
+            {/* Right Column - Sidebar */}
+            <div className="lg:col-span-1">
+              <Card className="sticky top-24">
+                <CardHeader>
+                  <CardTitle className="text-primary-navy">Industry Insights</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div>
+                    <h4 className="font-semibold text-text mb-2">Industry</h4>
+                    <p className="text-soft-text">{industry.name}</p>
+                  </div>
+                  <div className="pt-4 border-t border-border">
+                    <a href="/contact" className="block w-full bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors">
+                      Request Consultation
+                    </a>
+                  </div>
+                  <div className="pt-2">
+                    <a href="/industries" className="text-primary-navy hover:underline">
+                      ← Back to Industries
+                    </a>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+      </section>
+    </>
   )
 }
 
diff --git a/src/pages/ServiceDetail.jsx b/src/pages/ServiceDetail.jsx
index 853bbed..e7ff563 100644
--- a/src/pages/ServiceDetail.jsx
+++ b/src/pages/ServiceDetail.jsx
@@ -8,112 +8,122 @@ const ServiceDetail = () => {
 
   if (!service) {
     return (
-      <div className="container mx-auto px-4 py-16 md:py-24">
-        <div className="text-center">
-          <h1 className="text-3xl font-bold text-primary-navy mb-4">Service Not Found</h1>
-          <p className="text-xl text-soft-text mb-8">The service you're looking for doesn't exist.</p>
-          <a href="/services" className="text-primary-navy hover:underline">
-            Back to Services
-          </a>
+      <section className="bg-background py-16 md:py-24">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center">
+            <h1 className="text-3xl font-bold text-primary-navy mb-4">Service Not Found</h1>
+            <p className="text-xl text-soft-text mb-8">The service you're looking for doesn't exist.</p>
+            <a href="/services" className="text-primary-navy hover:underline">
+              Back to Services
+            </a>
+          </div>
         </div>
-      </div>
+      </section>
     )
   }
 
   return (
-    <div className="container mx-auto px-4 py-16 md:py-24">
+    <>
       {/* Page Hero */}
-      <section className="mb-16">
-        <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">{service.name}</h1>
-        {service.image && (
-          <div className="relative mb-8 rounded-xl overflow-hidden">
-            <img
-              src={service.image}
-              alt={service.id === 'infrastructure-cabling' ? 'Professional structured cabling installation'
-                : service.id === 'contact-center' ? 'Modern contact center operations with agents and dashboard'
-                : 'Network engineer with laptop configuring infrastructure'}
-              className="w-full h-64 md:h-80 object-cover"
-            />
-            <div className="absolute inset-0 bg-gradient-to-t from-primary-navy/60 to-transparent rounded-xl" />
+      <section className="bg-background py-16 md:py-24">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div>
+            <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">{service.name}</h1>
+            {service.image && (
+              <div className="relative mb-8 rounded-xl overflow-hidden">
+                <img
+                  src={service.image}
+                  alt={service.id === 'infrastructure-cabling' ? 'Professional structured cabling installation'
+                    : service.id === 'contact-center' ? 'Modern contact center operations with agents and dashboard'
+                    : 'Network engineer with laptop configuring infrastructure'}
+                  className="w-full h-64 md:h-80 object-cover"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-primary-navy/60 to-transparent rounded-xl" />
+              </div>
+            )}
+            <p className="text-xl text-soft-text max-w-3xl">{service.shortDesc}</p>
           </div>
-        )}
-        <p className="text-xl text-soft-text max-w-3xl">{service.shortDesc}</p>
+        </div>
       </section>
 
       {/* Main Content */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
-        {/* Left Column - Main Content */}
-        <div className="lg:col-span-2">
-          <section className="mb-12">
-            <h2 className="text-2xl font-bold text-primary-navy mb-4">What This Solves</h2>
-            <p className="text-lg text-soft-text mb-6 leading-relaxed">
-              {service.fullDesc}
-            </p>
-          </section>
+      <section className="bg-background py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
+            {/* Left Column - Main Content */}
+            <div className="lg:col-span-2">
+              <div className="mb-12">
+                <h2 className="text-2xl font-bold text-primary-navy mb-4">What This Solves</h2>
+                <p className="text-lg text-soft-text mb-6 leading-relaxed">
+                  {service.fullDesc}
+                </p>
+              </div>
 
-          <section className="mb-12">
-            <h2 className="text-2xl font-bold text-primary-navy mb-4">Key Benefits</h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {service.benefits.map((benefit, index) => (
-                <div key={index} className="flex items-start gap-3">
-                  <div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0 mt-1">
-                    <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
-                    </svg>
-                  </div>
-                  <span className="text-lg text-text">{benefit}</span>
+              <div className="mb-12">
+                <h2 className="text-2xl font-bold text-primary-navy mb-4">Key Benefits</h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {service.benefits.map((benefit, index) => (
+                    <div key={index} className="flex items-start gap-3">
+                      <div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0 mt-1">
+                        <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                        </svg>
+                      </div>
+                      <span className="text-lg text-text">{benefit}</span>
+                    </div>
+                  ))}
                 </div>
-              ))}
-            </div>
-          </section>
+              </div>
 
-          <section className="mb-12">
-            <h2 className="text-2xl font-bold text-primary-navy mb-4">Ideal For</h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {service.idealFor.map((item, index) => (
-                <div key={index} className="flex items-start gap-3">
-                  <div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0 mt-1">
-                    <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
-                    </svg>
-                  </div>
-                  <span className="text-lg text-text">{item}</span>
+              <div className="mb-12">
+                <h2 className="text-2xl font-bold text-primary-navy mb-4">Ideal For</h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {service.idealFor.map((item, index) => (
+                    <div key={index} className="flex items-start gap-3">
+                      <div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0 mt-1">
+                        <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                        </svg>
+                      </div>
+                      <span className="text-lg text-text">{item}</span>
+                    </div>
+                  ))}
                 </div>
-              ))}
+              </div>
             </div>
-          </section>
-        </div>
 
-        {/* Right Column - Sidebar */}
-        <div className="lg:col-span-1">
-          <Card className="sticky top-24">
-            <CardHeader>
-              <CardTitle className="text-primary-navy">Quick Info</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div>
-                <h4 className="font-semibold text-text mb-2">Service</h4>
-                <p className="text-soft-text">{service.name}</p>
-              </div>
-              <div>
-                <h4 className="font-semibold text-text mb-2">Category</h4>
-                <p className="text-soft-text capitalize">{service.id.replace('-', ' ')}</p>
-              </div>
-              <div className="pt-4 border-t border-border">
-                <a href="/contact" className="block w-full bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors">
-                  Request This Service
-                </a>
-              </div>
-              <div className="pt-2">
-                <a href="/services" className="text-primary-navy hover:underline">
-                  ← Back to Services
-                </a>
-              </div>
-            </CardContent>
-          </Card>
+            {/* Right Column - Sidebar */}
+            <div className="lg:col-span-1">
+              <Card className="sticky top-24">
+                <CardHeader>
+                  <CardTitle className="text-primary-navy">Quick Info</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div>
+                    <h4 className="font-semibold text-text mb-2">Service</h4>
+                    <p className="text-soft-text">{service.name}</p>
+                  </div>
+                  <div>
+                    <h4 className="font-semibold text-text mb-2">Category</h4>
+                    <p className="text-soft-text capitalize">{service.id.replace('-', ' ')}</p>
+                  </div>
+                  <div className="pt-4 border-t border-border">
+                    <a href="/contact" className="block w-full bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors">
+                      Request This Service
+                    </a>
+                  </div>
+                  <div className="pt-2">
+                    <a href="/services" className="text-primary-navy hover:underline">
+                      ← Back to Services
+                    </a>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+      </section>
+    </>
   )
 }
 
diff --git a/src/pages/Services.jsx b/src/pages/Services.jsx
index 43adcce..c172ce5 100644
--- a/src/pages/Services.jsx
+++ b/src/pages/Services.jsx
@@ -3,74 +3,86 @@ import { MessageCircle, Users, LifeBuoy, GraduationCap, Link as LinkIcon, Wifi,
 
 const Services = () => {
   return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
+    <>
       {/* Page Hero */}
-      <section className="mb-16">
-        <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Our Services</h1>
-        <p className="text-xl text-soft-text max-w-3xl">
-          Comprehensive communications and infrastructure solutions designed to help your business thrive in today's digital landscape.
-        </p>
+      <section className="bg-background py-16 lg:py-24">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div>
+            <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Our Services</h1>
+            <p className="text-xl text-soft-text max-w-3xl">
+              Comprehensive communications and infrastructure solutions designed to help your business thrive in today's digital landscape.
+            </p>
+          </div>
+        </div>
       </section>
 
       {/* Services Grid */}
-      <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {services.map((service) => (
-          <div key={service.id} className="group cursor-pointer">
-            <div className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border">
-              <div className="p-6">
-                <div className="flex items-center gap-4 mb-4">
-                  <div className="h-12 w-12 rounded-lg bg-section-alt flex items-center justify-center flex-shrink-0">
-                    {service.icon === 'message-circle' && <MessageCircle className="h-6 w-6 text-primary-navy" />}
-                    {service.icon === 'users' && <Users className="h-6 w-6 text-primary-navy" />}
-                    {service.icon === 'life-buoy' && <LifeBuoy className="h-6 w-6 text-primary-navy" />}
-                    {service.icon === 'graduation-cap' && <GraduationCap className="h-6 w-6 text-primary-navy" />}
-                    {service.icon === 'link' && <LinkIcon className="h-6 w-6 text-primary-navy" />}
-                    {service.icon === 'wifi' && <Wifi className="h-6 w-6 text-primary-navy" />}
-                    {service.icon === 'network' && <Network className="h-6 w-6 text-primary-navy" />}
-                  </div>
-                  <h3 className="text-xl font-semibold text-primary-navy group-hover:text-primary-navy-dark transition-colors">
-                    {service.name}
-                  </h3>
-                </div>
-                <p className="text-soft-text mb-4">{service.shortDesc}</p>
-                <div className="space-y-2 mb-4">
-                  {service.benefits.slice(0, 3).map((benefit, index) => (
-                    <div key={index} className="flex items-center gap-2 text-sm text-soft-text">
-                      <div className="h-4 w-4 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
-                        <svg className="h-2 w-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
-                        </svg>
+      <section className="bg-background py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {services.map((service) => (
+              <div key={service.id} className="group cursor-pointer">
+                <div className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border">
+                  <div className="p-6">
+                    <div className="flex items-center gap-4 mb-4">
+                      <div className="h-12 w-12 rounded-lg bg-section-alt flex items-center justify-center flex-shrink-0">
+                        {service.icon === 'message-circle' && <MessageCircle className="h-6 w-6 text-primary-navy" />}
+                        {service.icon === 'users' && <Users className="h-6 w-6 text-primary-navy" />}
+                        {service.icon === 'life-buoy' && <LifeBuoy className="h-6 w-6 text-primary-navy" />}
+                        {service.icon === 'graduation-cap' && <GraduationCap className="h-6 w-6 text-primary-navy" />}
+                        {service.icon === 'link' && <LinkIcon className="h-6 w-6 text-primary-navy" />}
+                        {service.icon === 'wifi' && <Wifi className="h-6 w-6 text-primary-navy" />}
+                        {service.icon === 'network' && <Network className="h-6 w-6 text-primary-navy" />}
                       </div>
-                      <span>{benefit}</span>
+                      <h3 className="text-xl font-semibold text-primary-navy group-hover:text-primary-navy-dark transition-colors">
+                        {service.name}
+                      </h3>
                     </div>
-                  ))}
+                    <p className="text-soft-text mb-4">{service.shortDesc}</p>
+                    <div className="space-y-2 mb-4">
+                      {service.benefits.slice(0, 3).map((benefit, index) => (
+                        <div key={index} className="flex items-center gap-2 text-sm text-soft-text">
+                          <div className="h-4 w-4 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
+                            <svg className="h-2 w-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                            </svg>
+                          </div>
+                          <span>{benefit}</span>
+                        </div>
+                      ))}
+                    </div>
+                    <a href={`/services/${service.id}`} className="inline-flex items-center gap-1 text-primary-navy font-medium hover:underline mt-2">
+                      Learn more
+                      <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
+                      </svg>
+                    </a>
+                  </div>
                 </div>
-                <a href={`/services/${service.id}`} className="inline-flex items-center gap-1 text-primary-navy font-medium hover:underline mt-2">
-                  Learn more
-                  <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
-                  </svg>
-                </a>
               </div>
-            </div>
+            ))}
           </div>
-        ))}
+        </div>
       </section>
 
       {/* CTA */}
-      <section className="mt-16 bg-section-alt rounded-xl p-8 md:p-12 text-center">
-        <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Looking for Something Specific?</h2>
-        <p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
-          Don't see exactly what you're looking for? We can help you find the right solution.
-        </p>
-        <a
-          href="/contact"
-          className="inline-block bg-primary-navy text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-primary-navy-dark transition-colors"
-        >
-          Request Consultation
-        </a>
+      <section className="bg-section-alt py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <div>
+            <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Looking for Something Specific?</h2>
+            <p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
+              Don't see exactly what you're looking for? We can help you find the right solution.
+            </p>
+            <a
+              href="/contact"
+              className="inline-block bg-primary-navy text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-primary-navy-dark transition-colors"
+            >
+              Request Consultation
+            </a>
+          </div>
+        </div>
       </section>
-    </div>
+    </>
   )
 }
 
diff --git a/src/pages/Support.jsx b/src/pages/Support.jsx
index dc54bec..7eb2704 100644
--- a/src/pages/Support.jsx
+++ b/src/pages/Support.jsx
@@ -103,218 +103,226 @@ const Support = () => {
   }
 
   return (
-    <div className="container mx-auto px-4 py-16 md:py-24">
+    <>
       {/* Page Hero */}
-      <section className="mb-16">
-        <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Support</h1>
-        <p className="text-xl text-soft-text max-w-3xl mb-8">
-          Need help with your communications or infrastructure? Submit a support request and we'll get back to you promptly.
-        </p>
-        <div className="flex flex-wrap gap-4 mb-8">
-          <div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
-            <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 5.13a1 1 0 01-1.31.42a2 2 0 00-2.63-.54l-2.238 5.03a2 2 0 01-2.71.319L2.663 12H4a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2V5z" />
-            </svg>
-            <p className="text-sm font-medium">(906) 482-6616</p>
+      <section className="bg-background py-16 md:py-24">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div>
+            <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Support</h1>
+            <p className="text-xl text-soft-text max-w-3xl mb-8">
+              Need help with your communications or infrastructure? Submit a support request and we'll get back to you promptly.
+            </p>
+            <div className="flex flex-wrap gap-4 mb-8">
+              <div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
+                <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 5.13a1 1 0 01-1.31.42a2 2 0 00-2.63-.54l-2.238 5.03a2 2 0 01-2.71.319L2.663 12H4a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2V5z" />
+                </svg>
+                <p className="text-sm font-medium">(906) 482-6616</p>
+              </div>
+              <div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
+                <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                </svg>
+                <p className="text-sm font-medium">info@queuenorth.com</p>
+              </div>
+            </div>
+            <div className="mb-8">
+              <a href="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-6 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors">
+                Request Consultation
+              </a>
+            </div>
           </div>
-          <div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
-            <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-            </svg>
-            <p className="text-sm font-medium">info@queuenorth.com</p>
-          </div>
-        </div>
-        <div className="mb-8">
-          <a href="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-6 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors">
-            Request Consultation
-          </a>
         </div>
       </section>
 
       {/* Support Form */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
-        {/* Left - Info */}
-        <div>
-          <div className="mb-8">
-            <h2 className="text-2xl font-bold text-primary-navy mb-4">Support Services</h2>
-            <p className="text-soft-text mb-6">
-              We provide comprehensive support for all our services, including 24/7 monitoring, rapid response, and dedicated support engineers.
-            </p>
-            <div className="space-y-4">
-              <div>
-                <h3 className="font-semibold text-text mb-2">Visit Support Center</h3>
-                <a
-                  href="https://queuenorth.zoho.com/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="inline-flex items-center justify-center px-4 py-2 bg-primary-navy text-white font-medium rounded-md hover:bg-navy-darker transition-colors text-sm"
-                >
-                  Visit Support Center
-                  <svg className="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-                  </svg>
-                </a>
-              </div>
-              <div>
-                <h3 className="font-semibold text-text mb-2">Phone</h3>
-                <p className="text-soft-text">(906) 482-6616</p>
-              </div>
-              <div>
-                <h3 className="font-semibold text-text mb-2">Support Hours</h3>
-                <p className="text-soft-text">24/7 Monitoring with rapid response SLAs</p>
-              </div>
-              <div>
-                <h3 className="font-semibold text-text mb-2">Priority Levels</h3>
-                <p className="text-soft-text">
-                  Low: General inquiries (response within 24 hours)<br/>
-                  Medium: Standard issues (response within 4 hours)<br/>
-                  High: Critical issues (response within 1 hour)
+      <section className="bg-background py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+            {/* Left - Info */}
+            <div>
+              <div className="mb-8">
+                <h2 className="text-2xl font-bold text-primary-navy mb-4">Support Services</h2>
+                <p className="text-soft-text mb-6">
+                  We provide comprehensive support for all our services, including 24/7 monitoring, rapid response, and dedicated support engineers.
                 </p>
+                <div className="space-y-4">
+                  <div>
+                    <h3 className="font-semibold text-text mb-2">Visit Support Center</h3>
+                    <a
+                      href="https://queuenorth.zoho.com/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center justify-center px-4 py-2 bg-primary-navy text-white font-medium rounded-md hover:bg-navy-darker transition-colors text-sm"
+                    >
+                      Visit Support Center
+                      <svg className="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                      </svg>
+                    </a>
+                  </div>
+                  <div>
+                    <h3 className="font-semibold text-text mb-2">Phone</h3>
+                    <p className="text-soft-text">(906) 482-6616</p>
+                  </div>
+                  <div>
+                    <h3 className="font-semibold text-text mb-2">Support Hours</h3>
+                    <p className="text-soft-text">24/7 Monitoring with rapid response SLAs</p>
+                  </div>
+                  <div>
+                    <h3 className="font-semibold text-text mb-2">Priority Levels</h3>
+                    <p className="text-soft-text">
+                      Low: General inquiries (response within 24 hours)<br/>
+                      Medium: Standard issues (response within 4 hours)<br/>
+                      High: Critical issues (response within 1 hour)
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="bg-section-alt rounded-lg p-6">
+                <h3 className="font-semibold text-primary-navy mb-4">What We Support</h3>
+                <ul className="space-y-3">
+                  {[
+                    '8x8 Communications Platform',
+                    'VoIP Phone Systems',
+                    'Contact Center Solutions',
+                    'Network Infrastructure',
+                    'Cloud Migration Support',
+                  ].map((item, index) => (
+                    <li key={index} className="flex items-center gap-3 text-text">
+                      <svg className="h-5 w-5 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                      </svg>
+                      {item}
+                    </li>
+                  ))}
+                </ul>
               </div>
             </div>
-          </div>
 
-          <div className="bg-section-alt rounded-lg p-6">
-            <h3 className="font-semibold text-primary-navy mb-4">What We Support</h3>
-            <ul className="space-y-3">
-              {[
-                '8x8 Communications Platform',
-                'VoIP Phone Systems',
-                'Contact Center Solutions',
-                'Network Infrastructure',
-                'Cloud Migration Support',
-              ].map((item, index) => (
-                <li key={index} className="flex items-center gap-3 text-text">
-                  <svg className="h-5 w-5 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
-                  </svg>
-                  {item}
-                </li>
-              ))}
-            </ul>
+            {/* Right - Form */}
+            <div>
+              <form onSubmit={handleSubmit} noValidate className={`space-y-6 ${mutation.isPending ? 'opacity-70 pointer-events-none' : ''}`}>
+                <div>
+                  <label htmlFor="name" className="block text-sm font-medium text-text mb-2">
+                    Name <span className="text-red-600">*</span>
+                  </label>
+                  <Input
+                    type="text"
+                    id="name"
+                    name="name"
+                    value={formState.name}
+                    onChange={handleChange}
+                    required
+                    placeholder="Your full name"
+                    className={errors.name ? 'border-red-500 focus-visible:ring-red-500' : ''}
+                  />
+                  {debouncedErrors.name && (
+                    <p className="text-xs text-red-600 mt-1">{debouncedErrors.name}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label htmlFor="company" className="block text-sm font-medium text-text mb-2">
+                    Company Name <span className="text-red-600">*</span>
+                  </label>
+                  <Input
+                    type="text"
+                    id="company"
+                    name="company"
+                    value={formState.company}
+                    onChange={handleChange}
+                    required
+                    placeholder="Your company name"
+                    className={errors.company ? 'border-red-500 focus-visible:ring-red-500' : ''}
+                  />
+                  {debouncedErrors.company && (
+                    <p className="text-xs text-red-600 mt-1">{debouncedErrors.company}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label htmlFor="email" className="block text-sm font-medium text-text mb-2">
+                    Email <span className="text-red-600">*</span>
+                  </label>
+                  <Input
+                    type="email"
+                    id="email"
+                    name="email"
+                    value={formState.email}
+                    onChange={handleChange}
+                    required
+                    placeholder="your.email@example.com"
+                    className={errors.email ? 'border-red-500 focus-visible:ring-red-500' : ''}
+                  />
+                  {debouncedErrors.email && (
+                    <p className="text-xs text-red-600 mt-1">{debouncedErrors.email}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label htmlFor="phone" className="block text-sm font-medium text-text mb-2">
+                    Phone (Optional)
+                  </label>
+                  <Input
+                    type="tel"
+                    id="phone"
+                    name="phone"
+                    value={formState.phone}
+                    onChange={handleChange}
+                    placeholder="(555) 123-4567"
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="priority" className="block text-sm font-medium text-text mb-2">
+                    Priority <span className="text-red-600">*</span>
+                  </label>
+                  <Select
+                    id="priority"
+                    name="priority"
+                    value={formState.priority}
+                    onChange={handleChange}
+                  >
+                    <option value="low">Low - General inquiries (24 hours)</option>
+                    <option value="medium">Medium - Standard issues (4 hours)</option>
+                    <option value="high">High - Critical issues (1 hour)</option>
+                  </Select>
+                </div>
+
+                <div>
+                  <label htmlFor="issue" className="block text-sm font-medium text-text mb-2">
+                    Describe Your Issue <span className="text-red-600">*</span>
+                  </label>
+                  <Textarea
+                    id="issue"
+                    name="issue"
+                    value={formState.issue}
+                    onChange={handleChange}
+                    required
+                    placeholder="Please describe your issue in detail..."
+                    className={`w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${errors.issue ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
+                    rows={5}
+                  />
+                  {debouncedErrors.issue && (
+                    <p className="text-xs text-red-600 mt-1">{debouncedErrors.issue}</p>
+                  )}
+                </div>
+
+                <Button
+                  type="submit"
+                  className="w-full"
+                  disabled={mutation.isPending}
+                >
+                  {mutation.isPending ? 'Submitting...' : 'Submit Request'}
+                </Button>
+              </form>
+            </div>
           </div>
         </div>
-
-        {/* Right - Form */}
-        <div>
-          <form onSubmit={handleSubmit} noValidate className={`space-y-6 ${mutation.isPending ? 'opacity-70 pointer-events-none' : ''}`}>
-            <div>
-              <label htmlFor="name" className="block text-sm font-medium text-text mb-2">
-                Name <span className="text-red-600">*</span>
-              </label>
-              <Input
-                type="text"
-                id="name"
-                name="name"
-                value={formState.name}
-                onChange={handleChange}
-                required
-                placeholder="Your full name"
-                className={errors.name ? 'border-red-500 focus-visible:ring-red-500' : ''}
-              />
-              {debouncedErrors.name && (
-                <p className="text-xs text-red-600 mt-1">{debouncedErrors.name}</p>
-              )}
-            </div>
-
-            <div>
-              <label htmlFor="company" className="block text-sm font-medium text-text mb-2">
-                Company Name <span className="text-red-600">*</span>
-              </label>
-              <Input
-                type="text"
-                id="company"
-                name="company"
-                value={formState.company}
-                onChange={handleChange}
-                required
-                placeholder="Your company name"
-                className={errors.company ? 'border-red-500 focus-visible:ring-red-500' : ''}
-              />
-              {debouncedErrors.company && (
-                <p className="text-xs text-red-600 mt-1">{debouncedErrors.company}</p>
-              )}
-            </div>
-
-            <div>
-              <label htmlFor="email" className="block text-sm font-medium text-text mb-2">
-                Email <span className="text-red-600">*</span>
-              </label>
-              <Input
-                type="email"
-                id="email"
-                name="email"
-                value={formState.email}
-                onChange={handleChange}
-                required
-                placeholder="your.email@example.com"
-                className={errors.email ? 'border-red-500 focus-visible:ring-red-500' : ''}
-              />
-              {debouncedErrors.email && (
-                <p className="text-xs text-red-600 mt-1">{debouncedErrors.email}</p>
-              )}
-            </div>
-
-            <div>
-              <label htmlFor="phone" className="block text-sm font-medium text-text mb-2">
-                Phone (Optional)
-              </label>
-              <Input
-                type="tel"
-                id="phone"
-                name="phone"
-                value={formState.phone}
-                onChange={handleChange}
-                placeholder="(555) 123-4567"
-              />
-            </div>
-
-            <div>
-              <label htmlFor="priority" className="block text-sm font-medium text-text mb-2">
-                Priority <span className="text-red-600">*</span>
-              </label>
-              <Select
-                id="priority"
-                name="priority"
-                value={formState.priority}
-                onChange={handleChange}
-              >
-                <option value="low">Low - General inquiries (24 hours)</option>
-                <option value="medium">Medium - Standard issues (4 hours)</option>
-                <option value="high">High - Critical issues (1 hour)</option>
-              </Select>
-            </div>
-
-            <div>
-              <label htmlFor="issue" className="block text-sm font-medium text-text mb-2">
-                Describe Your Issue <span className="text-red-600">*</span>
-              </label>
-              <textarea
-                id="issue"
-                name="issue"
-                value={formState.issue}
-                onChange={handleChange}
-                required
-                placeholder="Please describe your issue in detail..."
-                rows={5}
-                className={`flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${errors.issue ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
-              />
-              {debouncedErrors.issue && (
-                <p className="text-xs text-red-600 mt-1">{debouncedErrors.issue}</p>
-              )}
-            </div>
-
-            <Button
-              type="submit"
-              className="w-full"
-              disabled={mutation.isPending}
-            >
-              {mutation.isPending ? 'Submitting...' : 'Submit Request'}
-            </Button>
-          </form>
-        </div>
-      </div>
-    </div>
+      </section>
+    </>
   )
 }