"use client";

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

const DigitalMarketingContain = () => {
  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'>Smart Strategies to Boost Your Online Presence</h3>
            <p className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify mb-4'>If people don't notice your business online, you're losing customers every single day. We know and help you grow your customers using social media, paid ads, content marketing, and performance marketing so the right people find you, trust you, and choose you.</p>
            <p className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify mb-4'>Digital marketing isn't just about having a website or a Facebook page. It's about being seen, remembered, and actually making money.</p>
             <ul>
                    <li className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify mb-1 ms-5 list-disc'><strong>Social Media</strong>–Get noticed on Instagram, Facebook, and LinkedIn.</li>
                    <li className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify mb-1 ms-5 list-disc'><strong>Paid Ads</strong> – Run Google & Meta ads that actually bring customers.</li>
                    <li className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify mb-1 ms-5 list-disc'><strong>Content Marketing </strong> –  Create content that turns readers into buyers</li>
                    <li className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify mb-1 ms-5 list-disc'><strong>Performance Marketing</strong> – Track everything. Improve everything.</li>
                    <li className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify mb-1 ms-5 list-disc'><strong>Branding </strong> – Make people remember and trust you.</li>
                    <li className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify mb-1 ms-5 list-disc'><strong>Conversion Optimization</strong> –  Turn website visitors into calls and sales.</li>
                 </ul>
             </div>
            
             <div className='sm:col-span-6'>
            <div className='vectore_image'>
                <Image src="/images/Vactore_image_digital_marketing3.png" className='w-full' width={1200} height={600} alt="Digital marketing illustration — Fruxinfo" />
            </div>
            </div>

             <div className='sm:col-span-6'>
            <div className='vectore_image'>
                <Image src="/images/Vactore_image_digital_marketing2.png" className='w-full' width={1200} height={600} alt="Digital marketing illustration — Fruxinfo" />
            </div>
            </div>

             <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'>Plus, we do something most agencies don’t:</h3>
             <p className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify '>We don’t just run ads or post content.</p> 
             <p className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify mb-4'>We focus on full funnel growth from visibility → engagement → conversion.</p>
             <p className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify '><strong>That means:</strong></p>
              <p className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify '>No wasted budget.</p>
               <p className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify '> No random posting.</p>
                <p className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify '>Just clear strategy and real results.</p>
            
            </div>

           

           <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'>Why Digital Marketing Works for Your Business ? </h3> 
             <ul>
                    <li className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify mb-1 ms-5 list-disc'>Reach the right people at the right time</li>
                    <li className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify mb-1 ms-5 list-disc'>Get more leads and real paying customers</li>
                    <li className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify mb-1 ms-5 list-disc'>Build brand awareness so people remember you</li>
                    <li className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify mb-1 ms-5 list-disc'>Track everything and keep improving</li>
                    <li className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify mb-1 ms-5 list-disc'>Spend less compared to newspaper or TV ads</li>
                    <li className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify mb-1 ms-5 list-disc'>Grow your business faster</li>
                     <li className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify mb-1 ms-5 list-disc'>Connect with customers everywhere they hang out online</li>
                     <li className='text-[#5D5D5D] text-[16px] md:text-[18px]  md:text-start text-justify mb-1 ms-5 list-disc'>Beat your competitors who are already doing this</li>
                 </ul>
            </div>

             <div className='sm:col-span-6'>
            <div className='vectore_image'>
                <Image src="/images/Vactore_image_digital_marketing.webp" className='w-full' width={1200} height={600} alt="Digital marketing illustration — Fruxinfo" />
            </div>
            </div>

           
        </div>
        </div>
    </div>
    )
}

export default DigitalMarketingContain
