updated the dashboard layout

src/app/(dashboard)/(user)/(outsideAuth)/page.tsx

 import Dashboard from "@/components/pages/dashboard";
+import UspSlider from "@/components/pages/dashboard/UspSlider";
 import ProtectedLink from "@/routes/ProtectedLink";
-import { getAllGames } from "@/serverApi/game";
+import { getAllGames, getSubGames, getUsp } from "@/serverApi/game";
 import { Tooltip } from "@mui/material";
 import Image from "next/image";
 
 export default async function Home() {
   let games = null;
+  let usps = null;
+  let subGames = null;
 
   try {
     games = await getAllGames();
@@ -18,6 +21,23 @@ export default async function Home() {
     return <p className="text-gray-500">No games found.</p>;
   }
 
+  try {
+    usps = await getUsp();
+  } catch (err) {
+    console.log("❌ Failed to fetch games:", err);
+    return <p className="text-red-500">Failed to load games.</p>;
+  }
+
+  try {
+    subGames = await getSubGames();
+  } catch (err) {
+    console.log("❌ Failed to fetch games:", err);
+    return <p className="text-red-500">Failed to load games.</p>;
+  }
+
+
+  console.log({ subGames: subGames.data, usps })
+
 
   return (
     <>
@@ -48,6 +68,25 @@ export default async function Home() {
         }
       </div >
 
+      <section className="trending__games">
+        <h2 className="text-[14px] mb-4">Top 10 Trending Games</h2>
+        <div className="grid gap-4 grid-cols-2 md:grid-cols-3 lg:grid-cols-5 2xl:grid-cols-6 mb-8">
+          {
+            subGames?.data?.map((game: any) => (
+              <ProtectedLink href={`exclusive-games/${game.id}`} key={game.name} className="col-span-1 relative aspect-[1/1]" >
+                <Image
+                  src={game.image_url || "/assets/images/fallback.png"}
+                  alt={game.name || ""}
+
+                  fill
+                  className=" rounded-[24px] lg:rounded-[32px]  object-cover group-hover:scale-105 transition-transform duration-300 "
+                />
+              </ProtectedLink>
+            ))
+          }
+        </div >
+
+      </section>
       <div className="dashboard-card-wrapper grid grid-cols-2  gap-5 justify-center">
         <div
           className="dashboard-card1 flex px-10 gap-2 rounded-[24px]"
@@ -118,6 +157,7 @@ export default async function Home() {
           </div>
         </div>
       </div>
+      <UspSlider uspData={usps.data || []} />
     </>
   );
 }

src/components/layouts/DashboardLayout.tsx

@@ -33,7 +33,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
         <Box sx={{ display: 'flex' }}>
             <Header open={open} handleDrawerOpen={handleDrawerOpen} />
             <Sidebar open={open} handleDrawerOpen={handleDrawerOpen} />
-            <div className="root_container w-full">
+            <div className="root_container w-full overflow-hidden">
                 <DrawerHeader />
                 <div className="content_box p-4 lg:pl-11 lg:pr-12 lg:py-8">
                     {/* {pathname !== '/' && <Breadcrumb />} */}

src/components/pages/dashboard/UspSlider.tsx

+"use client";
+
+import Image from "next/image";
+import React, { useEffect, useState, useRef } from "react";
+import { motion, useMotionValue, useTransform, animate } from "framer-motion";
+
+interface UspItem {
+    title: string;
+    description: string;
+    icon: string;
+}
+
+
+
+export default function UspSlider({ uspData }: { uspData: { title: string; description: string; icon: string }[] }) {
+    const [items, setItems] = useState<UspItem[]>([]);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const x = useMotionValue(0);
+
+    // Duplicate the data for seamless loop
+    useEffect(() => {
+        setItems([...uspData, ...uspData, ...uspData]);
+    }, []);
+
+    // Auto-play animation
+    useEffect(() => {
+        if (items.length === 0) return;
+        const totalWidth = containerRef.current?.scrollWidth ?? 0;
+        const speed = 50; // px/sec
+        const controls = animate(x, -totalWidth / 3, {
+            ease: "linear",
+            duration: totalWidth / (3 * speed),
+            repeat: Infinity,
+        });
+        return () => controls.stop();
+    }, [items, x]);
+
+    return (
+        <section className="usp__slider w-full px-4 mt-8">
+            <h2 className="text-lg md:text-xl font-semibold mb-4">
+                Top 10 Trending Games
+            </h2>
+
+            <div className="relative w-full overflow-hidden">
+                <motion.div
+                    ref={containerRef}
+                    className="flex gap-4 md:gap-6 cursor-grab active:cursor-grabbing"
+                    style={{ x }}
+                    drag="x"
+                    dragConstraints={{ left: -((containerRef.current?.scrollWidth ?? 0) / 3), right: 0 }}
+                    dragElastic={0.1}
+                >
+                    {items.map((item, index) => (
+                        <motion.div
+                            key={index}
+                            className="flex-shrink-0 w-[220px] md:w-[260px] lg:w-[280px] py-4 px-5 flex items-center gap-3 rounded-2xl"
+                            style={{
+                                background: "rgba(255, 255, 255, 0.15)",
+                                backdropFilter: "blur(8px)",
+                            }}
+                            whileHover={{ scale: 1.05 }}
+                        >
+                            <Image
+                                src={item.icon || "/assets/images/fallback.png"}
+                                alt={item.title}
+                                width={66}
+                                height={66}
+                                className="rounded-full"
+                            />
+                            <div className="content">
+                                <strong className="text-sm font-bold block mb-1">
+                                    {item.title}
+                                </strong>
+                                <p className="text-xs opacity-80">{item.description}</p>
+                            </div>
+                        </motion.div>
+                    ))}
+                </motion.div>
+
+                {/* Optional gradient fade edges for nice look */}
+                <div className="absolute top-0 left-0 w-12 h-full bg-gradient-to-r from-[#11011E] to-transparent pointer-events-none" />
+                <div className="absolute top-0 right-0 w-12 h-full bg-gradient-to-l from-[#11011E] to-transparent pointer-events-none" />
+            </div>
+        </section>
+    );
+}

src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/CoinCalculator.tsx

@@ -7,7 +7,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 
-export default function CoinCalculator() {
+export default function CoinCalculator({ slug }: { slug: string }) {
     const [amount, setAmount] = useState<number | "">("");
     const [baseCoins, setBaseCoins] = useState<number | null>(null);
     const [bonusCoins, setBonusCoins] = useState<number | null>(null);
@@ -38,7 +38,7 @@ export default function CoinCalculator() {
 
     const handleBuy = () => {
         if (baseCoins !== null && bonusCoins !== null) {
-            router.push(`/buy-coins/1/checkout?amount=${amount}&bonus=${bonusCoins}`);
+            router.push(`/buy-coins/${slug}/checkout?amount=${amount}&bonus=${bonusCoins}`);
         }
     };
 

src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/index.tsx

@@ -77,7 +77,7 @@ export default function BuyCoinSinlgeGame({ slug }: { slug: string }) {
                     ))
                 }
                 <div className="col-span-1 h-full">
-                    <CoinCalculator />
+                    <CoinCalculator slug={slug}/>
                 </div>
             </div >
         </section >

src/serverApi/game.ts

@@ -5,6 +5,12 @@ import { cookies } from "next/headers";
 export async function getAllGames(): Promise<GameResponseProps> {
     return serverBaseQuery("/api/get-games");
 }
+export async function getSubGames(): Promise<any> {
+    return serverBaseQuery("/api/general/home/sub-games");
+}
+export async function getUsp(): Promise<any> {
+    return serverBaseQuery("/api/general/home/usp");
+}
 
 export async function getSingleGame(id: string): Promise<SingleGameResponse> {
     const cookieStore = await cookies();