fix: optimize images to WebP (95% reduction), add form loading spinners (#97 #130) (batch 10.1)

src/data/services.js

@@ -36,7 +36,7 @@ As an 8x8 Certified Partner, we deliver enterprise-grade contact center solution
 
 We support Cisco Webex Contact Center, 8x8 Contact Center, and other leading platforms.`,
     icon: 'users',
-    image: '/assets/modern-call-center.png',
+    image: '/assets/modern-call-center.webp',
     benefits: [
       'Omnichannel customer interactions',
       'Real-time analytics and reporting',
@@ -99,7 +99,7 @@ We support Cisco Webex Contact Center, 8x8 Contact Center, and other leading pla
     homeDesc: 'Bad cabling means dropped calls and slow networks. We build it right the first time.',
     fullDesc: 'Clean structured cabling that gives your business the physical foundation for reliable communication and growth.',
     icon: 'link',
-    image: '/assets/cabling.png',
+    image: '/assets/cabling.webp',
     benefits: [
       'Cat6/Cat6a and fiber optic installations',
       'Data center cabling solutions',
@@ -140,7 +140,7 @@ We support Cisco Webex Contact Center, 8x8 Contact Center, and other leading pla
     homeDesc: 'A network that doesn\'t go down when it matters. Secure, fast, and built for your workload.',
     fullDesc: 'Switching and routing built for stability, visibility, and secure local network performance.',
     icon: 'network',
-    image: '/assets/local-networking.png',
+    image: '/assets/local-networking.webp',
     benefits: [
       'Enterprise-grade routing and switching',
       'Network security and segmentation',

src/pages/About.jsx

@@ -48,7 +48,7 @@ const About = () => {
             <div>
               <div className="rounded-xl overflow-hidden shadow-lg">
                 <img 
-                  src="/assets/about-image.png" 
+                  src="/assets/about-image.webp"
                   alt="Queue North Technologies team providing business communications solutions" 
                   className="w-full max-h-96 h-auto object-cover"
                 />

src/pages/Contact.jsx

@@ -350,7 +350,17 @@ const Contact = () => {
                   className="w-full"
                   disabled={isSubmitting}
                 >
-                  {isSubmitting ? 'Submitting...' : 'Request Consultation'}
+                  {isSubmitting ? (
+                    <>
+                      <svg className="animate-spin -ml-1 mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                      </svg>
+                      Submitting...
+                    </>
+                  ) : (
+                    'Request Consultation'
+                  )}
                 </Button>
               </form>
             </div>

src/pages/Home.jsx

@@ -111,7 +111,7 @@ const Home = () => {
             <div className="md:order-2 md:mt-0">
               <div className="relative rounded-xl overflow-hidden shadow-2xl">
                 <img 
-                  src="/assets/hero-tech.png" 
+                  src="/assets/hero-tech.webp"
                   alt="Business communications and IT infrastructure solutions by Queue North Technologies" 
                   className="w-full h-full object-cover"
                 />

src/pages/Support.jsx

@@ -357,7 +357,17 @@ const Support = () => {
                   className="w-full"
                   disabled={isSubmitting}
                 >
-                  {isSubmitting ? 'Submitting...' : 'Submit Request'}
+                  {isSubmitting ? (
+                    <>
+                      <svg className="animate-spin -ml-1 mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                      </svg>
+                      Submitting...
+                    </>
+                  ) : (
+                    'Submit Request'
+                  )}
                 </Button>
               </form>
             </div>