feat : completed rule page

src/pages/rule/index.tsx

@@ -1,11 +1,11 @@
-import Alert from "../../components/alert/Alert";
+import Rules from "./section/Rules";
 
 const Rule = () => {
   return (
-    <div className="relative w-full h-full px-4 py-2">
+    <div className="relative w-full h-full py-2">
-      <Alert type="info" message="">
+      <div className="relative w-full h-full glass px-4 py-2">
-        به زودی صفحه مقررات اضافه می شود
+        <Rules />
-      </Alert>
+      </div>
     </div>
   );
 };

src/pages/rule/section/Rules.tsx

@@ -0,0 +1,66 @@
+import Warning from "../../../assets/gifs/warning.gif";
+
+const Rules = () => {
+  return (
+    <div className="relative w-full h-full flex flex-col px-4 py-4 text-start">
+      <h1 className="font-bold text-xl md:text-2xl text-center">
+        قوانین و مقررات
+      </h1>
+      <p className="font-normal text-sm mt-2 md:text-lg text-start">
+        لطفا با دقت زیاد متن توضیح زیر را بخوانید :<br />
+        قوانین پرشین پینگ لطفا قبل از خریداری به نکاتی که در زیر گفته شده دقت
+        کنید و با آگاهی به این شرایط خرید بفرمایید:
+      </p>
+      <p className="font-bold text-sm mt-2 md:text-lg text-yellow-500 text-start">
+        این سرویس تابع قوانین ایران می‌باشد
+      </p>
+      <p className="font-normal text-sm mt-2 md:text-lg text-start">
+        با تهیه و استفاده از اکانت پرشین پینگ می‌پذیرید:
+      </p>
+      <ListRules />
+    </div>
+  );
+};
+
+export default Rules;
+
+const ListRules = () => {
+  return (
+    <div className="w-full h-full mt-2">
+      <ul>
+        <li className="flex flex-row mt-2 gap-2 w-full bg-gray-800 p-2 rounded-md items-center">
+          <img src={Warning} alt="warning" className=" w-[2rem]" />
+          <p className="font-normal text-sm md:text-lg text-start">
+            هرگونه استفاده غیر مجاز و غیر قانونی به عهده شخص استفاده‌کننده
+            می‌باشد.
+          </p>
+        </li>
+        <li className="flex flex-row mt-2 gap-2 w-full bg-gray-800 p-2 rounded-md items-center">
+          <img src={Warning} alt="warning" className="w-[2rem]" />
+          <p className="font-normal text-sm md:text-lg text-start">
+            در صورتی که سرویس خریداری شده یک کاربره باشد و اگر سرویس خود را در
+            اختیار شخص دیگری قرار دهید سرویس شما به صورت خودکار مسدود خواهد شد.{" "}
+          </p>
+        </li>
+        <li className="flex flex-row mt-2 gap-2 w-full bg-gray-800 p-2 rounded-md items-center">
+          <img src={Warning} alt="warning" className="w-[2rem]" />
+          <p className="font-normal text-sm md:text-lg text-start">
+            در صورتی که مشکلی برای سرویس‌ها به وجود بیاید تمام سعی خود را
+            می‌کنیم تا هر چه سریع‌تر مشکل را برطرف کنیم. بازه زمانی بین 10 دقیقه
+            الی حداکثر 24 ساعت می‌باشد.{" "}
+          </p>
+        </li>
+        <li className="flex flex-row mt-2 gap-2 w-full bg-gray-800 p-2 rounded-md items-center">
+          <img src={Warning} alt="warning" className="w-[2rem]" />
+          <p className="font-normal text-sm md:text-lg text-start">
+            تمامی سرویس‌های ما مخصوص بازی می‌باشد و برای کاهش پینگ در بازی‌های
+            آنلاین و عبور از تحریم بازی‌ها استفاده می‌شود و هرگونه استفاده غیر
+            مجاز از سرویس‌ها به عنوان V.p.n و استفاده‌های دیگر ممنوع می‌باشد و
+            در صورت مشاهده سرویس شما مسدود می‌گردد و هزینه‌ای هم برگشت داده
+            نخواهد شد.
+          </p>
+        </li>
+      </ul>
+    </div>
+  );
+};