45 lines
1.8 KiB
JavaScript
45 lines
1.8 KiB
JavaScript
"use client";
|
|
|
|
import { useTranslation } from "react-i18next";
|
|
import { motion } from "framer-motion";
|
|
import { Building, Home } from "lucide-react";
|
|
|
|
const data = [
|
|
{
|
|
colors: "from-amber-500 to-amber-600",
|
|
titleKey: "register.owner.step1Title",
|
|
title2Key: "register.owner.step1bTitle",
|
|
descKey: "register.owner.step1Desc",
|
|
desc2Key: "register.owner.step1bDesc",
|
|
icon: <Building className="w-10 h-10 text-white" />,
|
|
},
|
|
{
|
|
colors: "from-blue-500 to-blue-600",
|
|
titleKey: "register.tenant.step1Title",
|
|
title2Key: "register.tenant.step2Title",
|
|
descKey: "register.tenant.step1Desc",
|
|
desc2Key: "register.tenant.step2Desc",
|
|
icon: <Home className="w-10 h-10 text-white" />,
|
|
},
|
|
];
|
|
export default function HeaderOfForm({ step = 1, num = 0 }) {
|
|
const { t } = useTranslation();
|
|
const currentData = data[num] || data[0];
|
|
return (
|
|
<div className={`bg-gradient-to-r ${currentData.colors} p-8 text-center relative overflow-hidden`}>
|
|
<motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.2, type: "spring" }} className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full" />
|
|
<motion.div initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} className="relative z-10">
|
|
<motion.div
|
|
animate={{ rotate: [0, 10, -10, 0] }}
|
|
transition={{ duration: 2, repeat: Infinity }}
|
|
className="w-20 h-20 mx-auto mb-4 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-sm"
|
|
>
|
|
{data[num].icon}
|
|
</motion.div>
|
|
<h1 className="text-3xl font-bold text-white mb-2">{t(step === 1 ? t(currentData.titleKey) : t(currentData.title2Key))}</h1>
|
|
<p className="text-amber-100">{t(step === 1 ? t(currentData.descKey) : t(currentData.desc2Key))}</p>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|