fd834ea84a
Change ./init.sh to be an executable then run it. The default inner container ports are as followed: - Postgres: 5432:5432 - Backend: 3001:3000 - Frontend: 3000:3000 - Frontend dev: 8000 The backend image needs to be built: docker compose up -d --build
80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
|
|
const Features: React.FC<
|
|
React.PropsWithChildren<{
|
|
title: string;
|
|
description: string;
|
|
cta: string;
|
|
}>
|
|
> = ({ title, description, cta, children }) => {
|
|
return (
|
|
<section className="lg:md:py-24 sm:py-12 container self-center">
|
|
<div className="flex flex-col gap-16">
|
|
<div className="lg:max-w-sm">
|
|
<h2 className="mb-3 text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6">
|
|
{title}
|
|
</h2>
|
|
<p className="mb-8 text-muted-foreground lg:text-lg">
|
|
{description}
|
|
</p>
|
|
<a
|
|
href="#"
|
|
className="group flex items-center text-xs font-medium md:text-base lg:text-lg"
|
|
>
|
|
{cta}
|
|
<ArrowRight className="ml-2 size-4 transition-transform group-hover:translate-x-1" />
|
|
</a>
|
|
</div>
|
|
<div className="grid gap-6 md:grid-cols-2 lg:gap-8">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Features;
|
|
|
|
export const FeatureItem: React.FC<
|
|
React.PropsWithChildren<{
|
|
title: string;
|
|
image: string;
|
|
position: "left" | "right";
|
|
}>
|
|
> = ({ title, children, image, position }) => {
|
|
const _image = () => (
|
|
<div className="md:min-h-[18rem] lg:min-h-[24rem] xl:min-h-[28rem]">
|
|
<img
|
|
src={image}
|
|
alt={title}
|
|
className="aspect-[16/9] h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
);
|
|
const _content = () => (
|
|
<div className="flex flex-col justify-center px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
|
|
<h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-2xl lg:mb-6">
|
|
{title}
|
|
</h3>
|
|
<div className="text-muted-foreground lg:text-lg">{children}</div>
|
|
</div>
|
|
);
|
|
return (
|
|
<div
|
|
className={`flex ${position === "left" ? "flex-col" : "flex-col-reverse"} container self-center overflow-clip rounded-xl border border-border md:col-span-2 md:grid md:grid-cols-2 md:gap-6 lg:gap-8`}
|
|
>
|
|
{position === "left" ? (
|
|
<>
|
|
<_image />
|
|
<_content />
|
|
</>
|
|
) : (
|
|
<>
|
|
<_content />
|
|
<_image />
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|