38 lines
1.9 KiB
TypeScript
38 lines
1.9 KiB
TypeScript
import picOne from "../assets/hero-picture-1.png";
|
|
|
|
|
|
interface PicWithTextProps {
|
|
src?: string
|
|
title?: string
|
|
text?: string
|
|
reverse: boolean
|
|
}
|
|
|
|
|
|
export default function PicWithText(content: PicWithTextProps){
|
|
let flex_state = content.reverse ? "md:flex-row flex-col" : "md:flex-row-reverse flex-col-reverse";
|
|
return (
|
|
<div className={`flex ${flex_state} items-center md:items-start gap-8 w-full mt-10 pb-30`}>
|
|
<div className="w-full md:w-1/2 shrink-0">
|
|
<img
|
|
className="w-full h-auto rounded-2xl object-cover"
|
|
src={content.src}
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div className="w-full md:w-1/2">
|
|
<h1 className="mb-4 text-5xl font-bold">{content.title}</h1>
|
|
<p className="text-lg font-normal text-body lg:text-xl">{content.text}</p>
|
|
|
|
<div className="flex items-center w-full my-8">
|
|
<div className="flex-1 h-px bg-neutral-300 dark:bg-neutral-700" />
|
|
<div className="px-3">
|
|
<svg className="w-6 h-6 text-neutral-400 dark:text-neutral-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 11V8a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1Zm0 0v2a4 4 0 0 1-4 4H5m14-6V8a1 1 0 0 0-1-1h-3a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1Zm0 0v2a4 4 0 0 1-4 4h-1"/></svg>
|
|
</div>
|
|
<div className="flex-1 h-px bg-neutral-300 dark:bg-neutral-700" />
|
|
</div>
|
|
<p className="text-gray-300 italic">This is more text, however, this is actually a quote, yes, a quote indeed!</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |