"use client";

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

const WebDevelopmentContain = () => {
 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>
         <div className='Web_Design_Contain max-w-[1200px] mx-auto overflow-hidden pb-16 px-3'>
           <div className='grid sm:grid-cols-12 items-center gap-4'>
             <div className='sm:col-span-6'>
               <h3 className='text-[#000] text-[24px] md:text-[32px] font-bold text-center md:text-start mb-4 Manrope'>Create your own website and rule the world!</h3>
               <p className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify mb-4'>The worth of having a website is not hidden. If you are running a business, you must have a good website. Previously there was an era when people created traditional websites only for the sake of having a website. But now the time has changed and your <span className='text-[#E77025]'> web design</span> should be relevant to your business. For example, if you have a shop, your website must have a facility from where one can shop online. A simple introductory website will not work anymore.</p>
             </div>
             <div className='sm:col-span-6'>
               <div className='vectore_image'>
                 <Image src="/images/Vactore_image_Web_Development.webp" className='w-full' width={1200} height={600} alt="Web development illustration — Fruxinfo" />
               </div>
             </div>
           </div>
         </div>
     </div>
   )
}

export default WebDevelopmentContain
