fixed owner and customer register make reuseable component and completed it

app/components/OwnerComponents/HeaderOfSteps.js

@@ -0,0 +1,28 @@
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { ArrowLeft } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+export default function HeaderOfSteps({ step, colors, numberStep }) {
+  const { t } = useTranslation();
+  return (
+    <>
+      <div className="mb-8">
+        <div className="flex items-center justify-between mb-4">
+          <Link href="/auth/choose-role" className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors group">
+            <motion.div whileHover={{ x: -5 }}>
+              <ArrowLeft className="w-4 h-4" />
+            </motion.div>
+            <span>{t("forgotPassword.backToLogin")}</span>
+          </Link>
+          <span className="text-sm text-gray-200">{t("register.stepOf2", { step: step })}</span>
+        </div>
+        <div className="flex gap-2">
+          {numberStep.map((s) => (
+            <motion.div key={s} className={`h-2 flex-1 rounded-full ${step >= s ? colors : "bg-gray-800"}`} animate={{ scaleX: step >= s ? 1 : 0.5 }} />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}