45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import { Separator } from "@/components/ui/separator";
|
|
import Image from "next/image";
|
|
|
|
interface LandingPageSectionProps {
|
|
title: string;
|
|
description: string;
|
|
imageSrc: string;
|
|
isImageRight?: boolean;
|
|
}
|
|
|
|
const IMAGE_SIZE = 600;
|
|
|
|
const LandingPageSection: React.FC<LandingPageSectionProps> = ({
|
|
title,
|
|
description,
|
|
imageSrc,
|
|
isImageRight,
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={`flex flex-col max-w-screen-xl ${
|
|
isImageRight ? "md:flex-row" : "md:flex-row-reverse"
|
|
} gap-10 justify-between mx-auto mb-28 items-center`}
|
|
>
|
|
<Image
|
|
src={imageSrc}
|
|
className="rounded-2xl"
|
|
alt="toy"
|
|
width={IMAGE_SIZE}
|
|
height={IMAGE_SIZE}
|
|
style={{
|
|
objectFit: "cover",
|
|
}}
|
|
/>
|
|
<div className={`flex flex-col gap-4`}>
|
|
<h2 className="text-4xl font-normal">{title}</h2>
|
|
<p className="text-xl font-normal text-gray-500">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LandingPageSection;
|