import Image from 'next/image'
import React from 'react'

const BannerSection = () => {
  return (
    <div className='Privacy_Policy_Banner'>
      <div className='max-w-[1200px] mx-auto px-3 py-20'>
        <div className='relative'>
            {/* <div className='absolute top-[70%] left-[8%] font-bold Manrope text-[#FFF] text-[30px] md:text-[60px]'>Payment Policy</div> */}
            <Image src="/images/Privacy_Policy_Banner.webp" className='w-full' width={1200} height={600} alt="Payment policy banner — Fruxinfo" />
        </div>
        <div className='mt-10'>
            <h3 className='text-[20px] md:text-[36px] text-[#000] font-bold mb-5'>Payment Policy</h3>
              {/* Annual Charges  Domain+hosting  For maintenance 1% of total Billing amount per month after a year  After live 1 month Free unlimited Changes SCHEDULE OF PAYMENT Our payment terms are: 50% advance and 50% Before upload . 18% GST Applicable, for above amount before upload. After live we are providing 1 month maintains free. After that 1.5% to 5% charge accordingly. */}
            <h4 className='text-[20px] md:text-[26px] text-[#000] font-bold mb-5'>Annual Charges</h4>
            <ul>
              <li className='text-[16px] text-[#5D5D5D] mb-4'>Domain + Hosting</li>
              <li className='text-[16px] text-[#5D5D5D] mb-4'>Maintenance: 1% of total billing amount per month (after 1 year)</li>
              <li className='text-[16px] text-[#5D5D5D] mb-4'>After Live: 1 Month Free Unlimited Changes</li>
            </ul>

            <h4 className='text-[20px] md:text-[26px] text-[#000] font-bold mb-5'>Schedule of Payment</h4>
            <ul>
              <li className='text-[16px] text-[#5D5D5D] font-bold mb-4'>Our Payment Terms</li>
              <li className='text-[16px] text-[#5D5D5D] mb-4'>50% Advance</li>
              <li className='text-[16px] text-[#5D5D5D] mb-4'>50% Before Upload</li>
              <li className='text-[16px] text-[#5D5D5D] mb-4'>18% GST applicable on the above amount before upload</li>
            </ul>

            <h4 className='text-[20px] md:text-[26px] text-[#000] font-bold mb-5'>After-Live Maintenance</h4>
            <ul>
              <li className='text-[16px] text-[#5D5D5D] mb-4'>1 Month Free Maintenance</li>
              <li className='text-[16px] text-[#5D5D5D] mb-4'>After that: 1.5% to 5% charge, depending on work</li>
            </ul>
          </div>
      </div>
    </div>
  )
}

export default BannerSection
