complete awards page

src/components/awards/award-not-complete.tsx

@@ -0,0 +1,23 @@
+import { Calendar2, Cup } from "iconsax-react"
+import ProgressCircle from "./progress-circle"
+
+export const AwardNotComplete = () => {
+    return (
+        <div className="flex flex-col items-center gap-5 bg-auth-form rounded-[40px] w-full h-full relative p-[18px]">
+            <div className="flex flex-row items-center justify-between w-full">
+                <div className="flex flex-row gap-x-[6px] items-center">
+                    <p className="font-normal text-lg text-primary-text-color">75</p>
+                    <Cup className="size-4" color="#11212D" />
+                </div>
+                <ProgressCircle percentage={75} />
+            </div>
+            <div className="flex flex-col items-start gap-3">
+                <p className="font-normal text-base text-primary-text-color" style={{ fontFamily: "vazirmatn" }}>۲۵۰ هزار تومان تخفیف برای اقامت در تمام ویلاها و کلبه های جاجیگا با حداقل رزرو ۲ میلیون تومان</p>
+                <div className="flex flex-row items-center gap-2">
+                    <p className="font-normal text-sm text-secondary-text-color">1403/06/12</p>
+                    <Calendar2 color="#777577" className="size-5" />
+                </div>
+            </div>
+        </div>
+    )
+}

src/components/awards/awards-complete.tsx

@@ -0,0 +1,22 @@
+import { Cup, Transmit } from "iconsax-react"
+
+
+export const AwardComplete = () => {
+    return (
+        <div className="flex flex-col gap-10 bg-auth-form p-[18px] rounded-[40px]">
+            <div className="flex flex-col gap-3">
+                <p className="font-normal text-lg text-secondary-text-color">۲۵۰ هزار تومان تخفیف برای اقامت در تمام ویلاها و کلبه های جاجیگا با حداقل رزرو ۲ میلیون تومان.</p>
+                <p className="font-normal text-base text-secondary-text-color">1403/06/12</p>
+            </div>
+            <div className="flex flex-row justify-between items-center">
+                <div className="flex flex-row gap-x-[6px] items-center">
+                    <p className="font-normal text-lg text-secondary-text-color">75</p>
+                    <Cup className="size-4" color="#777577" />
+                </div>
+                <div className="size-10 flex items-center justify-center bg-white rounded-full cursor-pointer">
+                    <Transmit className="size-5" color="#777577" />
+                </div>
+            </div>
+        </div>
+    )
+}

src/components/awards/index.tsx

@@ -0,0 +1,17 @@
+import { AwardNotComplete } from "./award-not-complete"
+import { AwardComplete } from "./awards-complete"
+
+export const Awards = () => {
+    return (
+        <div className="flex flex-col gap-10">
+            <div className="flex flex-row justify-between items-center">
+                <p className="font-medium text-xl text-primary-text-color">جوایز (5)</p>
+                <p className="font-normal text-base text-primary-text-color">امتیازهای من: 65</p>
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
+                <AwardNotComplete />
+                <AwardComplete />
+            </div>
+        </div>
+    )
+}

src/components/awards/progress-circle.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+interface ProgressCircleProps {
+    percentage: number;
+}
+
+export const ProgressCircle: React.FC<ProgressCircleProps> = ({ percentage }) => {
+    const radius = 45;
+    const stroke = 9;
+    const normalizedRadius = radius - stroke * 2;
+    const circumference = normalizedRadius * 2 * Math.PI;
+    const strokeDashoffset = circumference - (percentage / 100) * circumference;
+
+    return (
+        <svg height={radius * 2} width={radius * 2}>
+            <circle
+                stroke="#E6E8EA"
+                fill="transparent"
+                strokeWidth={stroke}
+                r={normalizedRadius}
+                cx={radius}
+                cy={radius}
+            />
+            <circle
+                stroke="#11212D"
+                fill="transparent"
+                strokeWidth={stroke}
+                r={normalizedRadius}
+                cx={radius}
+                cy={radius}
+                strokeDasharray={`${circumference} ${circumference}`}
+                style={{ strokeDashoffset }}
+                strokeLinecap="round"
+            />
+            <text x="50%" y="50%" textAnchor="middle" dy=".3em" className='text-base font-normal text-primary-text-color'>
+                {`${percentage}%`}
+            </text>
+        </svg>
+    );
+};
+
+export default ProgressCircle;

src/index.css

@@ -14,7 +14,7 @@
 
 
 @layer base {
-    html {
+    * {
         font-family: 'vazirmatn', 'vaziren';
         direction: rtl;
     }

src/pages/dashboard/awards.tsx

@@ -0,0 +1,7 @@
+import { Awards } from "../../components/awards"
+
+export const AwardsPage = () => {
+    return (
+        <Awards />
+    )
+}

src/router/index.tsx

@@ -16,6 +16,7 @@ import { InstallationReportsPage } from "../pages/dashboard/installation-reports
 import { TransactionsPage } from "../pages/dashboard/transactions";
 import { ScorePage } from "../pages/dashboard/score";
 import { SubscriptionReportPage } from "../pages/dashboard/subscription-report";
+import { AwardsPage } from "../pages/dashboard/awards";
 
 
 export const router = createBrowserRouter([
@@ -55,6 +56,10 @@ export const router = createBrowserRouter([
                 path: "subscription-report",
                 element: <SubscriptionReportPage />
             },
+            {
+                path: "awards",
+                element: <AwardsPage />
+            },
         ]
     },
     {