"use client" ;

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

const GraphicDesignBanner = () => {

    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'>Graphic Design Ahmedabad</h1>
            <p className=' text-[#3A3A3A] text-[18px] md:text-[36px] font-bold Manrope'>A simple design makes a huge difference!</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 '>Tailor Made <span className='text-[#E77025]'>Graphic Design</span></h3>
        </div>
        <Image data-aos="zoom-in" src="/images/Graphic_Design_img.webp" className='w-full relative' width={1200} height={600} alt="Graphic design services banner — Fruxinfo Ahmedabad" />
      </div>
    </div>
  )
}

export default GraphicDesignBanner
