Merge pull request #2 from amyssnippet/master

changes: images and content

Author: MaheshThakur9152

public/services/Blog-TankCleaning_HeaderImage.jpg

@@ -5,6 +5,7 @@ import Image from 'next/image';
 import { Mail, Building2, Phone, Send } from 'lucide-react';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
+import { motion } from 'framer-motion';
 
 interface FormData {
   fullName: string;
@@ -106,29 +107,34 @@ const Contact = () => {
     <div className="min-h-screen">
       <Header />
       {/* Hero Section */}
-      <section className="relative h-[400px] md:h-[500px] w-full">
-        {/* Background image */}
-        <Image
-          src="/header.jpg"
-          alt="Contact Hero"
-          fill
-          className="object-cover"
-          priority
-        />
-
-        {/* Overlay */}
-        <div className="absolute inset-0 bg-black/40"></div>
-
-        {/* Content - Properly spaced */}
-        <div className="absolute inset-0 flex flex-col items-center justify-center text-white px-4">
-          <h1 className="text-5xl md:text-6xl font-bold mb-4">
-            Contact Us
-          </h1>
-          <p className="text-xl md:text-2xl max-w-2xl text-center">
-            Professional Facility Management Solutions
-          </p>
+      <motion.section 
+        className="relative w-full h-[40vh] flex items-center justify-center overflow-hidden"
+        initial={{ opacity: 0, y: -50, scale: 0.95 }}
+        whileInView={{ opacity: 1, y: 0, scale: 1 }}
+        transition={{ duration: 0.5, ease: "easeOut" }}
+        viewport={{ once: true }}
+        style={{ willChange: 'transform' }}
+      >
+        {/* Hero Image */}
+        <div className="absolute inset-0">
+          <Image
+            src="/header.jpg"
+            fill={true}
+            priority={true}
+            alt="About Us Background"
+            className="object-cover"
+            sizes="100vw"
+          />
         </div>
-      </section>
+
+        {/* Dark Overlay */}
+        <div className="absolute inset-0 bg-black/60"></div>
+
+        {/* Content */}
+        <div className="relative z-10 text-center text-white">
+          <h1 className="text-5xl md:text-6xl font-bold">Contact Us</h1>
+        </div>
+      </motion.section>
 
       {/* Contact Section */}
       <section className="py-20 bg-gray-50">

public/services/hero-header.jpg

@@ -3,7 +3,7 @@
 import Image from 'next/image';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
-import { Home, Bug, Building, Droplets, Utensils, ArrowUpDown, Car, Wrench } from 'lucide-react';
+import { Home, Bug, Building, Droplets, Utensils, ArrowUpDown, Car, Wrench, FileText } from 'lucide-react';
 import Header from '../../components/Header';
 import Footer from '../../components/Footer';
 
@@ -18,7 +18,7 @@ const services = [
   {
     title: "Pest Control",
     description: "Effective pest management with safe, certified methods.",
-    image: "/Pest-control/Pantry-boy.jpeg",
+    image: "/services/pest-control.jpg",
     icon: Bug,
     slug: "pest-control"
   },
@@ -32,14 +32,14 @@ const services = [
   {
     title: "Tank Cleaning",
     description: "Specialized water tank cleaning and maintenance services.",
-    image: "/services/tank-cleaning.jpg",
+    image: "/services/Blog-TankCleaning_HeaderImage.jpg",
     icon: Droplets,
     slug: "tank-cleaning"
   },
   {
     title: "Catering",
     description: "Quality catering services for events and offices.",
-    image: "/services/catering.jpg",
+    image: "/services/pantry-boy.jpg",
     icon: Utensils,
     slug: "catering"
   },
@@ -63,6 +63,13 @@ const services = [
     image: "/services/civil.jpg",
     icon: Wrench,
     slug: "technical-maintenance"
+  },
+  {
+    title: "Office Boy",
+    description: "Comprehensive office support services including cleaning, maintenance, and management.",
+    image: "/services/office-boy.jpg",
+    icon: FileText,
+    slug: "office-boy"
   }
 ];
 
@@ -72,29 +79,34 @@ export default function ServicesPage() {
       <Header />
 
       {/* Hero Section */}
-      <section 
-        className="relative w-full h-[60vh] flex items-center justify-center overflow-hidden"
-        style={{ backgroundImage: 'url(/Image.use.jpg)', backgroundSize: 'cover', backgroundPosition: 'center' }}
+      <motion.section
+        className="relative w-full h-[40vh] flex items-center justify-center overflow-hidden"
+        initial={{ opacity: 0, y: -50, scale: 0.95 }}
+        whileInView={{ opacity: 1, y: 0, scale: 1 }}
+        transition={{ duration: 0.5, ease: "easeOut" }}
+        viewport={{ once: true }}
+        style={{ willChange: 'transform' }}
       >
+        {/* Hero Image */}
+        <div className="absolute inset-0">
+          <Image
+            src="/header.jpg"
+            fill={true}
+            priority={true}
+            alt="About Us Background"
+            className="object-cover"
+            sizes="100vw"
+          />
+        </div>
+
         {/* Dark Overlay */}
-        <div className="absolute inset-0 bg-black/40"></div>
+        <div className="absolute inset-0 bg-black/60"></div>
 
         {/* Content */}
-        <div className="relative z-10 text-center text-white px-4 max-w-4xl mx-auto">
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, delay: 0.8 }}
-          >
-            <Link
-              href="#services"
-              className="inline-flex items-center px-8 py-4 bg-orange-500 hover:bg-orange-600 text-white rounded-lg font-medium transition-colors text-lg"
-            >
-              Explore Our Services
-            </Link>
-          </motion.div>
+        <div className="relative z-10 text-center text-white">
+          <h1 className="text-5xl md:text-6xl font-bold">Our Services</h1>
         </div>
-      </section>
+      </motion.section>
 
       {/* Services Grid */}
       <section id="services" className="py-20 bg-gray-50">

src/app/contact/page.tsx

@@ -17,7 +17,7 @@ const Footer = () => {
     <footer className="bg-gray-900 text-white">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          
+
           {/* Company Info */}
           <div>
             <h3 className="font-serif text-xl font-bold text-white mb-6">
@@ -34,17 +34,29 @@ const Footer = () => {
                 </a>
               </div>
               <div className="flex items-center gap-3">
+                <Phone className="w-5 h-5 text-blue-400" />
+                <a href="tel:+9197977018742" className="text-gray-300 hover:text-white transition-colors">
+                  +91 7977018742
+                </a>
+              </div>
+              <div className="flex items-center gap-3">
+                <Phone className="w-5 h-5 text-blue-400" />
+                <a href="tel:+02245066566" className="text-gray-300 hover:text-white transition-colors">
+                  +022 4506 6566
+                </a>
+              </div>
+            </div>
+              <div className="flex items-center gap-3 pt-3">
                 <Mail className="w-5 h-5 text-blue-400" />
                 <a href="mailto:[email protected]" className="text-gray-300 hover:text-white transition-colors">
                   [email protected]
                 </a>
               </div>
-              <div className="flex items-start gap-3">
+              <div className="flex items-start gap-3 pt-3">
                 <MapPin className="w-5 h-5 text-blue-400 mt-1" />
                 <span className="text-gray-300">Mumbai, Maharashtra</span>
               </div>
             </div>
-          </div>
 
           {/* Quick Links */}
           <div>

src/app/services/page.tsx

@@ -32,11 +32,11 @@ const Header = () => {
       isScrolled ? 'bg-white/80 backdrop-blur-md shadow-lg' : 'bg-white'
     }`}>
       <div className="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
-        <div className="flex justify-between items-center py-6">
+        <div className="flex justify-between items-center py-4">
           {/* Logo */}
           <div className="flex items-center">
-            <Link href="/" className="font-serif text-2xl font-bold text-blue-900">
-              Ambe Service Facilities
+            <Link href="/" className="pl-0 font-serif text-2xl font-bold text-blue-900">
+              Ambe Service Facilities Pvt Ltd
             </Link>
           </div>
 
@@ -68,12 +68,6 @@ const Header = () => {
             >
               About
             </Link>
-            <button
-              onClick={() => scrollToSection('testimonials')}
-              className="font-sans text-base font-medium text-gray-700 hover:text-blue-600 transition-colors"
-            >
-              Testimonials
-            </button>
             <Link
               href="/contact"
               className="font-sans text-base font-medium text-gray-700 hover:text-blue-600 transition-colors"

src/components/Footer.tsx

@@ -62,13 +62,13 @@ const Hero = () => {
               transition={{ duration: 0.8, delay: 0.3, ease: "easeOut" }}
             >
               <Link href="#services">
-                <motion.button 
+                <motion.text 
                   className="bg-white text-black px-8 py-3 rounded-full font-sans font-medium hover:bg-gray-100 transition-all duration-300"
                   whileHover={{ scale: 1.05 }}
                   whileTap={{ scale: 0.95 }}
                 >
                   Facility Management
-                </motion.button>
+                </motion.text>
               </Link>
             </motion.div>
           </div>

src/components/Header.tsx

@@ -39,7 +39,7 @@ const Services = () => {
       icon: Waves,
       title: "Tank Cleaning",
       description: "Ensure the purity and safety of your water supply. Our thorough cleaning and disinfection processes adhere to stringent standards, promoting safety and well-being.",
-      image: "/services/tank-cleaning.jpg"
+      image: "/services/Blog-TankCleaning_HeaderImage.jpg"
     },
     {
       icon: Coffee,