feat: add missing exports for deployment

Add getRandomAyats function to data file.
Create AuthButtons component for client-side auth states.

Co-authored-by: undefined <undefined+undefined@users.noreply.github.com>

Author: v0[bot]

app/games/page.tsx

@@ -31,6 +31,25 @@ export default function GamesPage() {
           </CardFooter>
         </Card>
 
+
+        {/* Spiritual-Model Card */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Spiritual Model Game</CardTitle>
+            <CardDescription>Move sliders & see how spiritual factors influence your deeds</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p>See how spiritual factors influence your deeds based on Quran, which describes how deeds are weighed on Judgment Day.</p>
+          </CardContent>
+          <CardFooter>
+            <Link href="/pages/spiritual-model" passHref>
+              <Button>Play Now</Button>
+            </Link>
+          </CardFooter>
+        </Card>
+
+
+
         {/* Make Quranic Ayats Game Card */}
         <Card className="border-purple-200 bg-purple-50">
           <CardHeader>
@@ -202,7 +221,7 @@ export default function GamesPage() {
         </Card>
 
 
-        {/* New DSD and Quranic Ayats Game Card */}
+        {/* DSD and Quranic Ayats Game Card */}
         <Card className="border-purple-200 bg-purple-50">
           <CardHeader>
             <CardTitle className="text-purple-800">DSD in Quranic Ayats</CardTitle>

package.json

@@ -60,9 +60,9 @@
     "path": "latest",
     "react": "latest",
     "react-day-picker": "latest",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
-    "react-dnd-touch-backend": "^16.0.1",
+    "react-dnd": "latest",
+    "react-dnd-html5-backend": "latest",
+    "react-dnd-touch-backend": "latest",
     "react-dom": "19.2.0",
     "react-hook-form": "latest",
     "react-resizable-panels": "latest",