fixed owner and customer register make reuseable component and completed it

app/components/OwnerComponents/HeaderOfForm.js

@@ -0,0 +1,44 @@
+"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>
+  );
+}