46 lines
2.1 KiB
JavaScript
46 lines
2.1 KiB
JavaScript
|
import { motion } from "framer-motion";
|
||
|
|
import { itemVariants } from "../Animation/HeaderLoginAnimation";
|
||
|
|
import { ArrowLeft, KeyRound,Home } from "lucide-react";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
import Link from "next/link";
|
||
|
|
//Back Link
|
||
|
|
export function BackLink() {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<motion.div variants={itemVariants} className="absolute -top-16 left-0">
|
||
|
|
<Link href="/" className="group flex items-center gap-2 text-gray-400 hover:text-white transition-colors">
|
||
|
|
<motion.div whileHover={{ x: -5 }} transition={{ type: "spring", stiffness: 400 }}>
|
||
|
|
<ArrowLeft className="w-4 h-4" />
|
||
|
|
</motion.div>
|
||
|
|
<span>{t("backToHome")}</span>
|
||
|
|
</Link>
|
||
|
|
</motion.div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function HeaderForm({ step }) {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="bg-gradient-to-r from-amber-700 to-amber-400 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={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.3, type: "spring" }} className="absolute -bottom-10 -left-10 w-40 h-40 bg-white/10 rounded-full" />
|
||
|
|
|
||
|
|
<motion.div initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.2 }} 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"
|
||
|
|
>
|
||
|
|
{step === "otp" ? <KeyRound className="w-10 h-10 text-white" /> : <Home className="w-10 h-10 text-white" />}
|
||
|
|
</motion.div>
|
||
|
|
<h1 className="text-3xl font-bold text-white mb-2">SweetHome</h1>
|
||
|
|
<p className="text-amber-100">{step === "otp" ? t("enterOTP") : t("welcomeBack")}</p>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|