39 lines
1.5 KiB
JavaScript
39 lines
1.5 KiB
JavaScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export default function Loading() {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center p-4" style={{ backgroundColor: "#0f172a" }}>
|
|
<motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1.3 }} transition={{ duration: 0.4 }} className="text-center flex flex-col items-center justify-center gap-4">
|
|
<motion.div
|
|
animate={{
|
|
scale: [1, 1.06, 1],
|
|
opacity: [0.8, 1, 0.8],
|
|
}}
|
|
transition={{
|
|
duration: 2,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
}}
|
|
className="relative w-25 h-36 flex items-center justify-center"
|
|
>
|
|
<svg viewBox="0 0 100 100" className="w-full h-full fill-amber-500/10 stroke-amber-500 stroke-[4] drop-shadow-[0_0_12px_rgba(245,158,11,0.2)] " xmlns="http://www.w3.org/2000/svg">
|
|
<polygon points="50,5 95,27.5 95,72.5 50,95 5,72.5 5,27.5" />
|
|
</svg>
|
|
|
|
<div className="absolute inset-0 flex items-center justify-center p-2 text-center">
|
|
<span className="text-amber-400 font-bold text-[10px] tracking-wide select-none">Sweet Home</span>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<p className="text-amber-400 text-sm font-bold tracking-wide animate-pulse" suppressHydrationWarning>
|
|
{t("loading")}
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|