feat: hero left-alignment + about section content fixes (batches 0.6.3, 0.6.4)

- Hero text left-aligned on all screen sizes (Issue #33)
- Hero image always visible, grid breakpoint md instead of lg
- Spacing refactored from margin to gap utils
- About: veteran-founded framing, mission paragraph (Issue #34)
- About: vendor-neutral consulting in expertise (Issue #36)
- About: image sizing max-h-96 object-cover (Issue #37)
- Version bump 0.5.6 → 0.5.7

package.json

@@ -1,7 +1,7 @@
 {
   "name": "queuenorth-website",
   "private": true,
-  "version": "0.5.6",
+  "version": "0.5.7",
   "type": "module",
   "scripts": {
     "dev": "concurrently \"vite\" \"node server/index.js\"",

src/pages/About.jsx

@@ -14,7 +14,7 @@ const About = () => {
         <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 in 2000, 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.
+            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.
@@ -22,13 +22,16 @@ const About = () => {
           <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 h-full object-cover"
+              className="w-full max-h-96 h-auto object-cover"
             />
           </div>
         </div>
@@ -64,9 +67,9 @@ const About = () => {
             'Contact Center Implementation',
             'Network Infrastructure',
             'Cloud Migration',
-            'Cybersecurity for Communications',
+            'Vendor-Neutral Consulting',
             'Disaster Recovery Planning',
-            '24/7 Support & Monitoring',
+            '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">

src/pages/Home.jsx

@@ -13,12 +13,12 @@ const Home = () => {
       {/* 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="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-            <div>
-              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
+          <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">
                 Reliable Business Communications — Without the Runaround
               </h1>
-              <p className="text-xl md:text-2xl text-section-alt mb-8 max-w-2xl">
+              <p className="text-xl md:text-2xl text-section-alt max-w-2xl">
                 We handle your phones, internet, and IT so you can focus on running your business. 8x8 Certified Partner with 25+ years of proven reliability.
               </p>
               <div className="flex flex-col sm:flex-row gap-4">
@@ -29,7 +29,7 @@ const Home = () => {
                   View Services
                 </Button>
               </div>
-              <div className="mt-10 flex flex-wrap gap-4">
+              <div className="flex flex-wrap gap-4">
                 <div className="flex items-center gap-2 px-4 py-2 bg-white/20 rounded-lg text-sm font-medium">
                   <img src="/assets/8x8_Logo_White.svg" alt="8x8" className="h-5 w-5" />
                   <span>8x8 Certified Partner</span>
@@ -47,7 +47,7 @@ const Home = () => {
                 </div>
               </div>
             </div>
-            <div className="hidden lg:block">
+            <div className="md:order-2 md:mt-0">
               <div className="relative rounded-xl overflow-hidden shadow-2xl">
                 <img 
                   src="/assets/hero-tech.png"