"use client" ;

import React from 'react'
import "aos/dist/aos.css";
import { useEffect } from "react";
import Image from 'next/image';

const AppDevelopmentBanner = () => {
  useEffect(() => {
          import("aos").then((mod) => {
          mod.default.init({
          disable: window.innerWidth < 768, // mobile: no scroll animations (perf/LCP)
          duration: 1000, // Animation duration in ms
          offset: 100, // Offset from original trigger point
          easing: "ease-in-out",
          once: false, // Animation runs only once
          });
        });
      }, []);
      
      return (
          <div className='Web_Design_Banner pb-24'>
          <div className='banner_img max-w-[1200px] mx-auto overflow-hidden px-3'>
              <div data-aos="zoom-in" className='relative text-center'>
                  <h1 className='text-[#3A3A3A] text-[30px] md:text-[68px] font-extrabold Manrope'>Mobile App Development Ahmedabad</h1>
                  <p className=' text-[#3A3A3A] text-[18px] md:text-[36px] font-bold Manrope'>Reach More Customers with a Smart Mobile App!</p>
              </div>
          </div>
          <div className='max-w-[1200px] mx-auto overflow-hidden px-3 relative'>
              <div data-aos="zoom-in" className='contain_image'>
                  <h3 className='text-[18px] md:text-[50px] font-bold text-[#4A4A4A] text-center'>Changing Role of Developer in<br /><span className='text-[#E77025]'>Mobile App Development</span></h3>
              </div>
              <Image data-aos="zoom-in" src="/images/Mobile_App_Development.webp" width={1200} height={600} className='w-full relative' alt="" />
          </div>
          </div>
      )
  }

export default AppDevelopmentBanner
