103 lines
5.8 KiB
TypeScript
103 lines
5.8 KiB
TypeScript
import React from 'react'
|
|
import { CoursesProps, 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>
|
|
<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-3xl">
|
|
{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
|