frondend/components/Aboutus/AboutusContent.tsx

import React from 'react'
import { AboutusProps } from '@/types'
const AboutusContent = ({ aboutus }: { aboutus: AboutusProps[] }) => {
    return (
        <div className='relative flex flex-col bg-[#F6E8E9] w-full h-auto items-center pb-30 lg:pt-36 pt-10'>
            {
                aboutus.map((item, index) => {
                    const isEven = index % 2 === 0;
                    return (
                        <div key={index}>
                            <div className="hidden lg:flex relative w-[80vw] lg:mb-28 mb-10">
                                {isEven ? (
                                    <div className='lg:grid lg:grid-cols-2 w-[80vw] mb-28'>
                                        <div className="flex col-span-1 h-auto w-full  ">
                                            <img
                                                src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${item.image}`}
                                                alt="Course Image"
                                                className="w-full h-[25vw] object-cover object-center rounded-lg shadow-md"
                                                style={{ aspectRatio: '1 / 1' }}
                                            />
                                        </div>
                                        <div className="relative flex col-span-1 w-full h-auto ml-16 items-center">
                                            <div className="relative flex flex-col items-start w-[30vw]">
                                                <p className="text-4xl">
                                                    {item.title}
                                                </p>
                                                {/* <p className="text-base overflow-hidden mt-8">
                                        {item.description}
                                    </p> */}
                                                <div
                                                    className='mt-8 [&_*]:!text-[1.0rem] [&_*]:!text-gray-600 [&_*]:!bg-transparent'
                                                    dangerouslySetInnerHTML={{ __html: item.description }}
                                                />

                                            </div>
                                        </div>
                                    </div>
                                ) : (
                                    <div className='lg:grid lg:grid-cols-2  w-[80vw] mb-28'>
                                        <div className="relative flex col-span-1 w-full h-auto ml-16 items-center">
                                            <div className="relative flex flex-col items-start w-[30vw]">
                                                <p className="text-4xl">
                                                    {item.title}
                                                </p>
                                                {/* <p className="text-base overflow-hidden mt-8">
                                        {item.description}
                                    </p> */}
                                                <div
                                                    className='mt-8 [&_*]:!text-[1.0rem] [&_*]:!text-gray-600 [&_*]:!text-start'
                                                    dangerouslySetInnerHTML={{ __html: item.description }}
                                                />

                                            </div>
                                        </div>
                                        <div className="flex col-span-1 h-auto w-full justify-end ">
                                            <img
                                                src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${item.image}`}
                                                alt="Course Image"
                                                className="w-full h-[25vw] object-cover object-center rounded-lg shadow-md"
                                                style={{ aspectRatio: '1 / 1' }}
                                            />
                                        </div>
                                    </div>

                                )}

                            </div>
                            <div className="flex flex-col relative w-[80vw] lg:mb-28 mb-10 lg:hidden">
                                <div className="flex col-span-1 h-auto w-full  ">
                                    <img
                                        src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${item.image}`}
                                        alt="Course Image"
                                        className="w-full h-[44vw] object-cover object-center rounded-lg shadow-md"
                                        style={{ aspectRatio: '1 / 1' }}
                                    />
                                </div>
                                <div className="relative flex flex-col lg:mt-0 mt-8">
                                    <p className="lg:text-4xl text-2xl">
                                        {item.title}
                                    </p>
                                    {/* <p className="text-base overflow-hidden mt-8">
                                        {item.description}
                                    </p> */}
                                    <div
                                        className='mt-8 [&_*]:!text-[1.0rem] [&_*]:!text-gray-600 [&_*]:!bg-transparent'
                                        dangerouslySetInnerHTML={{ __html: item.description }}
                                    />

                                </div>

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


        </div >
    )
}

export default AboutusContent