import { PhoneLeftImage, PhoneRightImage } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'

import React from 'react'

const MobileHeroGraphics = () => {
    return (
        <div className='flex w-full justify-center items-center sm:pt-20 lg:pt-[305px] h-[400px]  scale-75 lg:scale-100  '>
            <div className='relative animate-float  group '>
                <span className='absolute h-[100px] sm:h-[250px] w-10 sm:w-20 top-20 z-10 group-hover:opacity-0 duration-300   right-0 bg-black/50 blur-2xl '></span>
                <CustomImage pageTitle={metaTitles?.featuresMobileMeta_Title} priority={true} src={PhoneLeftImage} alt='mobile application' className='  object-contain translate-x-12 sm:translate-x-20 hover:translate-x-12 duration-500' />
            </div>
            <div className='relative animate-float2 z-20'>
                <CustomImage pageTitle={metaTitles?.featuresMobileMeta_Title} priority={true} src={PhoneRightImage} alt='mobile application' className=' relative object-contain -translate-x-12 sm:-translate-x-24 -translate-y-16 hover:translate-y-[-80px] duration-500 ' />
            </div>
        </div>
    )
}

export default MobileHeroGraphics