frondend/components/Aboutus/AboutusContent.tsx

103 lines
5.8 KiB
TypeScript
Raw Normal View History

2024-10-06 11:52:45 +08:00
import React from 'react'
2024-10-08 14:46:18 +08:00
import { AboutusProps } from '@/types'
2024-10-06 11:52:45 +08:00
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 (
2024-10-08 14:46:18 +08:00
<div key={index}>
2024-10-06 11:52:45 +08:00
<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
2024-10-08 13:35:35 +08:00
src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${item.image}`}
2024-10-06 11:52:45 +08:00
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
2024-10-08 13:35:35 +08:00
className='mt-8 [&_*]:!text-[1.0rem] [&_*]:!text-gray-600 [&_*]:!bg-transparent'
2024-10-06 11:52:45 +08:00
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
2024-10-08 21:29:13 +08:00
className='mt-8 [&_*]:!text-[1.0rem] [&_*]:!text-gray-600 [&_*]:!text-start [&_*]:!bg-transparent'
2024-10-06 11:52:45 +08:00
dangerouslySetInnerHTML={{ __html: item.description }}
/>
</div>
</div>
<div className="flex col-span-1 h-auto w-full justify-end ">
<img
2024-10-08 13:35:35 +08:00
src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${item.image}`}
2024-10-06 11:52:45 +08:00
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
2024-10-08 13:35:35 +08:00
src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${item.image}`}
2024-10-06 11:52:45 +08:00
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">
2024-10-08 19:08:37 +08:00
<p className="lg:text-4xl text-2xl">
2024-10-06 11:52:45 +08:00
{item.title}
</p>
{/* <p className="text-base overflow-hidden mt-8">
{item.description}
</p> */}
<div
2024-10-08 13:35:35 +08:00
className='mt-8 [&_*]:!text-[1.0rem] [&_*]:!text-gray-600 [&_*]:!bg-transparent'
2024-10-06 11:52:45 +08:00
dangerouslySetInnerHTML={{ __html: item.description }}
/>
</div>
</div>
</div>
)
})
}
</div >
)
}
export default AboutusContent