Soroush.Asadi
73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import type { LucideIcon } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export interface HowItWorksStepProps {
|
|
number: number;
|
|
title: string;
|
|
description: string;
|
|
icon: LucideIcon;
|
|
previewClassName: string;
|
|
reversed?: boolean;
|
|
}
|
|
|
|
export function HowItWorksStep({
|
|
number,
|
|
title,
|
|
description,
|
|
icon: Icon,
|
|
previewClassName,
|
|
reversed = false,
|
|
}: HowItWorksStepProps) {
|
|
const slideFrom = reversed ? 48 : -48;
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"grid items-center gap-8 lg:grid-cols-2 lg:gap-16",
|
|
reversed && "lg:[&>*:first-child]:order-2 lg:[&>*:last-child]:order-1"
|
|
)}
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, x: slideFrom }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true, margin: "-80px" }}
|
|
transition={{ duration: 0.4, ease: "easeOut" }}
|
|
className="flex gap-5"
|
|
>
|
|
<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary-600 font-heading text-lg font-bold text-white shadow-sm">
|
|
{number}
|
|
</div>
|
|
<div>
|
|
<div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-primary-50 text-primary-600">
|
|
<Icon className="h-5 w-5" aria-hidden />
|
|
</div>
|
|
<h3 className="font-heading text-xl font-bold text-neutral-900 sm:text-2xl">
|
|
{title}
|
|
</h3>
|
|
<p className="mt-3 text-base leading-relaxed text-neutral-600">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -slideFrom }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true, margin: "-80px" }}
|
|
transition={{ duration: 0.4, ease: "easeOut", delay: 0.08 }}
|
|
className={cn(
|
|
"flex aspect-[4/3] items-center justify-center rounded-xl border shadow-sm",
|
|
previewClassName
|
|
)}
|
|
aria-hidden
|
|
>
|
|
<Icon className="h-20 w-20 opacity-30" />
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|