Service page upgrade

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

src/pages/Services.tsx

@@ -2,8 +2,24 @@ import Navigation from '@/components/Navigation';
 import Footer from '@/components/Footer';
 import { Monitor, Wifi, Cloud, Shield, Database, Settings, CheckCircle } from 'lucide-react';
 import ScrollReveal from '@/components/ScrollReveal';
+import { useEffect, useRef } from 'react';
 
 const Services = () => {
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (imageRef.current) {
+        const scrolled = window.pageYOffset;
+        const parallax = scrolled * 0.5;
+        imageRef.current.style.transform = `translateY(${parallax}px) scale(1.1)`;
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
   const services = [
     {
       icon: Monitor,
@@ -126,28 +142,59 @@ const Services = () => {
       <Navigation />
       
       <main>
-        {/* Hero section */}
-        <section className="pt-32 pb-16 bg-background relative overflow-hidden">
-          <div className="absolute inset-0 grid-overlay opacity-10"></div>
+        {/* Hero section with image background */}
+        <section className="relative h-screen flex items-center justify-center overflow-hidden">
+          {/* Background image with parallax */}
+          <div className="absolute inset-0 overflow-hidden">
+            <img 
+              ref={imageRef}
+              src="/service_background.png" 
+              alt="IT services background" 
+              className="w-full h-[110%] object-cover will-change-transform"
+              style={{ transform: 'translateY(0px) scale(1.1)' }}
+            />
+          </div>
 
-          <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          {/* Overlay for better text readability */}
+          <div className="absolute inset-0 bg-black/40"></div>
+
+          {/* Hero content */}
+          <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
             <ScrollReveal>
-              <div className="max-w-3xl">
-                <h1 className="font-heading font-bold text-5xl sm:text-6xl text-foreground mb-6">
+              <div className="max-w-4xl mx-auto">
+                <h1 className="font-heading font-bold text-5xl sm:text-6xl lg:text-7xl text-white mb-6 text-balance drop-shadow-[0_0_20px_rgba(255,255,255,0.3)]">
                   Complete IT solutions for{' '}
-                  <span className="text-neon">your business</span>
+                  <span className="text-neon text-glow drop-shadow-[0_0_30px_rgba(51,102,255,0.8)]">your business</span>
                 </h1>
-                <p className="text-xl text-foreground-muted leading-relaxed">
+                <p className="text-xl sm:text-2xl text-white/95 mb-8 max-w-3xl mx-auto leading-relaxed drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]">
                   From desktop support to enterprise infrastructure, we provide the technology 
                   foundation your business needs to thrive in the Coastal Bend.
                 </p>
+                
+                {/* CTA button */}
+                <div className="flex justify-center">
+                  <a
+                    href="#services"
+                    className="btn-neon group flex items-center space-x-2"
+                  >
+                    <span>Explore our services</span>
+                    <CheckCircle className="w-5 h-5 transition-transform group-hover:scale-110" />
+                  </a>
+                </div>
               </div>
             </ScrollReveal>
           </div>
+
+          {/* Scroll indicator */}
+          <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
+            <div className="w-6 h-10 border-2 border-neon/60 rounded-full flex justify-center drop-shadow-[0_0_10px_rgba(51,102,255,0.3)]">
+              <div className="w-1 h-3 bg-neon rounded-full mt-2 animate-bounce"></div>
+            </div>
+          </div>
         </section>
 
         {/* Services detail */}
-        <section className="py-24 bg-background-deep">
+        <section id="services" className="py-24 bg-background-deep">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="space-y-24">
               {services.map((service, index) => {