diff --git a/web/app/api/auth/nonce/route.ts b/web/app/api/auth/nonce/route.ts
index 29caace..1a2cf9a 100644
--- a/web/app/api/auth/nonce/route.ts
+++ b/web/app/api/auth/nonce/route.ts
@@ -1,9 +1,9 @@
-import { NextRequest, NextResponse } from 'next/server';
-import crypto from 'crypto';
-import { getRedisClient } from "c:/Users/USER/Desktop/Roster-Rumble/web/lib/redis";
+import { NextRequest, NextResponse } from "next/server";
+import crypto from "crypto";
+import { getRedisClient } from "@/lib/redis";
 
 const generateNonce = (): string => {
-  return crypto.randomBytes(32).toString('hex');
+  return crypto.randomBytes(32).toString("hex");
 };
 
 const NONCE_TTL = 300;
@@ -11,11 +11,11 @@ const NONCE_TTL = 300;
 export async function GET(request: NextRequest) {
   try {
     const url = request.nextUrl || new URL(request.url);
-    const walletAddress = url.searchParams.get('walletAddress');
+    const walletAddress = url.searchParams.get("walletAddress");
 
     if (!walletAddress) {
       return NextResponse.json(
-        { error: 'Missing required parameter: walletAddress' },
+        { error: "Missing required parameter: walletAddress" },
         { status: 400 }
       );
     }
@@ -27,23 +27,23 @@ export async function GET(request: NextRequest) {
       // Store the nonce in Redis with a 5-minute TTL
       const redis = await getRedisClient();
       const nonceKey = `auth:nonce:${walletAddress}`;
-      
+
       await redis.set(nonceKey, nonce, { EX: NONCE_TTL });
-      
+
       // Return the nonce as JSON
       return NextResponse.json({ nonce });
     } catch (redisError) {
-      console.error('Redis error:', redisError);
+      console.error("Redis error:", redisError);
       return NextResponse.json(
-        { error: 'Failed to store nonce' },
+        { error: "Failed to store nonce" },
         { status: 500 }
       );
     }
   } catch (error) {
-    console.error('Error generating nonce:', error);
+    console.error("Error generating nonce:", error);
     return NextResponse.json(
-      { error: 'Failed to generate nonce' },
+      { error: "Failed to generate nonce" },
       { status: 500 }
     );
   }
-}
\ No newline at end of file
+}
diff --git a/web/app/api/contests/routes.ts b/web/app/api/contests/routes.ts
index 03d01d6..acfcdd7 100644
--- a/web/app/api/contests/routes.ts
+++ b/web/app/api/contests/routes.ts
@@ -1,17 +1,17 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { NextRequest, NextResponse } from 'next/server';
-import { z } from 'zod';
-import jwt from 'jsonwebtoken';
-import { Pool } from 'pg';
-import amqp from 'amqplib';
-import { getRedisClient } from '@/lib/redis';
+import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import jwt from "jsonwebtoken";
+import { Pool } from "pg";
+import amqp from "amqplib";
+import { getRedisClient } from "@/lib/redis";
 
 const DATABASE_URL = process.env.DATABASE_URL!;
 const JWT_SECRET = process.env.JWT_SECRET!;
 const RABBITMQ_URL = process.env.RABBITMQ_URL!;
 
 if (!DATABASE_URL || !JWT_SECRET || !RABBITMQ_URL) {
-  throw new Error('Missing required environment variables.');
+  throw new Error("Missing required environment variables.");
 }
 
 // PostgreSQL pool
@@ -22,7 +22,7 @@ const contestSchema = z.object({
   sport: z.string(),
   entryFee: z.number().nonnegative(),
   startsAt: z.string().refine((date: string) => !isNaN(Date.parse(date)), {
-    message: 'Invalid ISO8601 date string',
+    message: "Invalid ISO8601 date string",
   }),
   maxPlayers: z.number().int().positive(),
 });
@@ -42,12 +42,12 @@ type ContestQuery = z.infer<typeof contestQuerySchema>;
 // Helper: verify JWT and check admin
 export function verifyAdmin(token: string | undefined) {
   if (!token) {
-    throw new Error('No token provided');
+    throw new Error("No token provided");
   }
   try {
     const payload = jwt.verify(token, JWT_SECRET) as any;
-    if (payload.role !== 'admin') {
-      throw new Error('Forbidden');
+    if (payload.role !== "admin") {
+      throw new Error("Forbidden");
     }
     return payload;
   } catch (err) {
@@ -61,7 +61,7 @@ export async function getMqChannel() {
   if (mqChannel) return mqChannel;
   const conn = await amqp.connect(RABBITMQ_URL);
   const channel = await conn.createChannel();
-  await channel.assertExchange('contest.events', 'fanout', { durable: true });
+  await channel.assertExchange("contest.events", "fanout", { durable: true });
   mqChannel = channel;
   return mqChannel;
 }
@@ -74,7 +74,7 @@ export async function GET(req: NextRequest) {
 
     // Build query params object
     const rawQuery: Record<string, string> = {};
-    for (const key of ['sport', 'minFee', 'maxFee', 'page', 'limit'] as const) {
+    for (const key of ["sport", "minFee", "maxFee", "page", "limit"] as const) {
       const v = searchParams.get(key);
       if (v !== null) rawQuery[key] = v;
     }
@@ -86,7 +86,10 @@ export async function GET(req: NextRequest) {
     } catch (validationError) {
       if (validationError instanceof z.ZodError) {
         return NextResponse.json(
-          { error: 'Invalid query parameters', details: validationError.errors },
+          {
+            error: "Invalid query parameters",
+            details: validationError.errors,
+          },
           { status: 400 }
         );
       }
@@ -115,7 +118,7 @@ export async function GET(req: NextRequest) {
         return NextResponse.json(parsed, { status: 200 });
       }
     } catch (cacheErr) {
-      console.warn('Redis cache error, proceeding without cache:', cacheErr);
+      console.warn("Redis cache error, proceeding without cache:", cacheErr);
     }
 
     // Build SQL query with filters
@@ -140,15 +143,19 @@ export async function GET(req: NextRequest) {
       paramIndex++;
     }
 
-    const whereClause = conditions.length ? `WHERE ${conditions.join(' AND ')}` : '';
+    const whereClause = conditions.length
+      ? `WHERE ${conditions.join(" AND ")}`
+      : "";
 
     // Get total count
     const countQuery = `SELECT COUNT(*) AS total FROM contests ${whereClause}`;
     const countResult = await client.query(countQuery, values);
     if (!countResult.rows || !countResult.rows[0]) {
-      throw new Error('Failed to retrieve total count');
+      throw new Error("Failed to retrieve total count");
     }
-    const total = countResult.rows[0] ? parseInt(countResult.rows[0].total || '0', 10) : 0;
+    const total = countResult.rows[0]
+      ? parseInt(countResult.rows[0].total || "0", 10)
+      : 0;
 
     // Get paginated data
     const offset = (queryParams.page - 1) * queryParams.limit;
@@ -165,7 +172,11 @@ export async function GET(req: NextRequest) {
       ORDER BY starts_at DESC
       LIMIT $${paramIndex} OFFSET $${paramIndex + 1}
     `;
-    const dataResult = await client.query(dataQuery, [...values, queryParams.limit, offset]);
+    const dataResult = await client.query(dataQuery, [
+      ...values,
+      queryParams.limit,
+      offset,
+    ]);
 
     const response = {
       contests: dataResult.rows || [],
@@ -180,19 +191,22 @@ export async function GET(req: NextRequest) {
       const redis = await getRedisClient();
       await redis.setEx(cacheKey, 30, JSON.stringify(response));
     } catch (cacheErr) {
-      console.warn('Failed to cache result:', cacheErr);
+      console.warn("Failed to cache result:", cacheErr);
     }
 
     return NextResponse.json(response, { status: 200 });
   } catch (err: any) {
-    console.error('GET /contests error:', err.message, err.stack);
-    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+    console.error("GET /contests error:", err.message, err.stack);
+    return NextResponse.json(
+      { error: "Internal Server Error" },
+      { status: 500 }
+    );
   } finally {
     if (client) {
       try {
         await client.release();
       } catch (releaseErr) {
-        console.warn('Failed to release client:', releaseErr);
+        console.warn("Failed to release client:", releaseErr);
       }
     }
   }
@@ -203,8 +217,10 @@ export async function POST(req: NextRequest) {
   let client;
   try {
     // Admin JWT from Authorization header
-    const authHeader = req.headers.get('authorization') || '';
-    const token = authHeader.startsWith('Bearer ') ? authHeader.slice(7) : undefined;
+    const authHeader = req.headers.get("authorization") || "";
+    const token = authHeader.startsWith("Bearer ")
+      ? authHeader.slice(7)
+      : undefined;
     verifyAdmin(token);
 
     const body = await req.json();
@@ -221,40 +237,45 @@ export async function POST(req: NextRequest) {
 
     // Emit event
     const channel = await getMqChannel();
-    const eventPayload = Buffer.from(JSON.stringify({ type: 'ContestCreated', data: contest }));
-    channel.publish('contest.events', '', eventPayload);
+    const eventPayload = Buffer.from(
+      JSON.stringify({ type: "ContestCreated", data: contest })
+    );
+    channel.publish("contest.events", "", eventPayload);
 
     // Invalidate cache after creating new contest
     try {
       const redis = await getRedisClient();
-      const keys = await redis.keys('contests:*');
+      const keys = await redis.keys("contests:*");
       if (keys.length > 0) {
         await redis.del(keys);
       }
     } catch (cacheError) {
-      console.warn('Failed to invalidate cache:', cacheError);
+      console.warn("Failed to invalidate cache:", cacheError);
     }
 
     return NextResponse.json(contest, { status: 201 });
   } catch (err: any) {
-    if (err.message === 'Forbidden') {
-      return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
+    if (err.message === "Forbidden") {
+      return NextResponse.json({ error: "Forbidden" }, { status: 403 });
     }
     if (err instanceof z.ZodError) {
       return NextResponse.json({ errors: err.errors }, { status: 400 });
     }
-    if (err.message === 'No token provided') {
-      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    if (err.message === "No token provided") {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
     }
-    console.error('POST /contests error:', err);
-    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+    console.error("POST /contests error:", err);
+    return NextResponse.json(
+      { error: "Internal Server Error" },
+      { status: 500 }
+    );
   } finally {
     if (client) {
       try {
         await client.release();
       } catch (releaseErr) {
-        console.warn('Failed to release client:', releaseErr);
+        console.warn("Failed to release client:", releaseErr);
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/web/app/components/ToasterProviderWrapper.tsx b/web/app/components/ToasterProviderWrapper.tsx
deleted file mode 100644
index 641528f..0000000
--- a/web/app/components/ToasterProviderWrapper.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-'use client';
-
-import React from 'react';
-import { ToasterProvider } from '../context/ToasterContext';
-
-export function ToasterProviderWrapper({ children }: { children: React.ReactNode }) {
-  return <ToasterProvider>{children}</ToasterProvider>;
-}
\ No newline at end of file
diff --git a/web/app/context/ToasterContext.tsx b/web/app/context/ToasterContext.tsx
index 7296358..6a5c0c2 100644
--- a/web/app/context/ToasterContext.tsx
+++ b/web/app/context/ToasterContext.tsx
@@ -1,15 +1,19 @@
-'use client';
+"use client";
 
-import React, { createContext, useContext, ReactNode } from 'react';
-import { useToastStore, ToastStatus } from '../../lib/toastStore';
-import { Toaster } from '../components/Toaster';
+import React, { createContext, useContext, ReactNode } from "react";
+import { useToastStore, ToastStatus } from "../../lib/toastStore";
+import { Toaster } from "@/components/Toaster";
 
 interface ToasterContextValue {
-  showToast: (message: string, status: ToastStatus, options?: {
-    txHash?: string;
-    network?: string;
-    autoDismiss?: number;
-  }) => string;
+  showToast: (
+    message: string,
+    status: ToastStatus,
+    options?: {
+      txHash?: string;
+      network?: string;
+      autoDismiss?: number;
+    }
+  ) => string;
   updateToast: (id: string, message: string, status: ToastStatus) => void;
   dismissToast: (id: string) => void;
   pendingTransactions: Array<{
@@ -20,10 +24,19 @@ interface ToasterContextValue {
   }>;
 }
 
-const ToasterContext = createContext<ToasterContextValue | undefined>(undefined);
+const ToasterContext = createContext<ToasterContextValue | undefined>(
+  undefined
+);
 
-export const ToasterProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-  const { toasts, addToast, updateToast: updateStoreToast, removeToast } = useToastStore();
+export const ToasterProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const {
+    toasts,
+    addToast,
+    updateToast: updateStoreToast,
+    removeToast,
+  } = useToastStore();
 
   const showToast = (message: string, status: ToastStatus, options = {}) => {
     return addToast(message, status, options);
@@ -38,16 +51,18 @@ export const ToasterProvider: React.FC<{ children: ReactNode }> = ({ children })
   };
 
   const pendingTransactions = toasts
-    .filter(toast => toast.status === 'pending' && toast.txHash)
-    .map(toast => ({
+    .filter((toast) => toast.status === "pending" && toast.txHash)
+    .map((toast) => ({
       id: toast.id,
-      message: toast.message, 
+      message: toast.message,
       txHash: toast.txHash,
-      network: toast.network
+      network: toast.network,
     }));
 
   return (
-    <ToasterContext.Provider value={{ showToast, updateToast, dismissToast, pendingTransactions }}>
+    <ToasterContext.Provider
+      value={{ showToast, updateToast, dismissToast, pendingTransactions }}
+    >
       {children}
       <Toaster />
     </ToasterContext.Provider>
@@ -57,7 +72,7 @@ export const ToasterProvider: React.FC<{ children: ReactNode }> = ({ children })
 export const useToaster = (): ToasterContextValue => {
   const context = useContext(ToasterContext);
   if (context === undefined) {
-    throw new Error('useToaster must be used within a ToasterProvider');
+    throw new Error("useToaster must be used within a ToasterProvider");
   }
   return context;
-};
\ No newline at end of file
+};
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 016ad4c..ddf1162 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -1,8 +1,7 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
-import { ToasterProviderWrapper } from './components/ToasterProviderWrapper';
-
+import { ToasterProviderWrapper } from "@/components/ToasterProviderWrapper";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -16,8 +15,8 @@ const geistMono = localFont({
 });
 
 export const metadata: Metadata = {
-  title: 'Toast System Demo',
-  description: 'Blockchain transaction toast notification system',
+  title: "Toast System Demo",
+  description: "Blockchain transaction toast notification system",
 };
 
 export default function RootLayout({
@@ -30,9 +29,7 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        <ToasterProviderWrapper>
-          {children}
-        </ToasterProviderWrapper>
+        <ToasterProviderWrapper>{children}</ToasterProviderWrapper>
       </body>
     </html>
   );
diff --git a/web/app/page.tsx b/web/app/page.tsx
index 433c8aa..0deaf0f 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -1,101 +1,30 @@
-import Image from "next/image";
+// import { Footer } from "./components/footer";
+import { Footer } from "@/components/footer";
+import { Header } from "@/components/header";
+import { AppPromotionSection } from "@/components/landing-page/app-promotion-section";
+import { ContactSection } from "@/components/landing-page/contact-section";
+import { EasyStepsSection } from "@/components/landing-page/easy-steps-section";
+import { FAQSection } from "@/components/landing-page/faq-section";
+import { HeroCarousel } from "@/components/landing-page/hero-carousel";
+import { StatsSection } from "@/components/landing-page/stats-section";
+import { TestimonialsSection } from "@/components/landing-page/testimonials-section";
+import { WinnersSection } from "@/components/landing-page/winners-section";
 
-export default function Home() {
+export default function HomePage() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="https://nextjs.org/icons/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="https://nextjs.org/icons/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
+    <div className="min-h-screen bg-white">
+      <Header />
+      <main>
+        <HeroCarousel />
+        <ContactSection />
+        <StatsSection />
+        <WinnersSection />
+        <EasyStepsSection />
+        <AppPromotionSection />
+        <FAQSection />
+        <TestimonialsSection />
       </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+      <Footer />
     </div>
   );
 }
diff --git a/web/app/components/MobileNav.tsx b/web/components/MobileNav.tsx
similarity index 100%
rename from web/app/components/MobileNav.tsx
rename to web/components/MobileNav.tsx
diff --git a/web/app/components/Toaster.tsx b/web/components/Toaster.tsx
similarity index 65%
rename from web/app/components/Toaster.tsx
rename to web/components/Toaster.tsx
index b958af0..c7cbb68 100644
--- a/web/app/components/Toaster.tsx
+++ b/web/components/Toaster.tsx
@@ -1,9 +1,14 @@
-'use client';
+"use client";
 
-import React, { useEffect } from 'react';
-import * as Toast from '@radix-ui/react-toast';
-import { useToastStore, getExplorerUrl } from '../../lib/toastStore';
-import { X as XIcon, Check as CheckIcon, RefreshCw as RefreshIcon, ExternalLink as ExternalLinkIcon } from 'lucide-react';
+import React, { useEffect } from "react";
+import * as Toast from "@radix-ui/react-toast";
+import { useToastStore, getExplorerUrl } from "@/lib/toastStore";
+import {
+  X as XIcon,
+  Check as CheckIcon,
+  RefreshCw as RefreshIcon,
+  ExternalLink as ExternalLinkIcon,
+} from "lucide-react";
 
 const DEFAULT_AUTO_DISMISS = 5000;
 
@@ -13,11 +18,11 @@ export const Toaster = () => {
   // Set up auto-dismiss
   useEffect(() => {
     toasts.forEach((toast) => {
-      if (toast.status !== 'pending' && (toast.autoDismiss !== 0)) {
+      if (toast.status !== "pending" && toast.autoDismiss !== 0) {
         const timeout = setTimeout(() => {
           removeToast(toast.id);
         }, toast.autoDismiss || DEFAULT_AUTO_DISMISS);
-        
+
         return () => clearTimeout(timeout);
       }
     });
@@ -25,14 +30,16 @@ export const Toaster = () => {
 
   const handleRetry = (toastId: string) => {
     // In a real app, you'd call your transaction function here
-    updateToast(toastId, { status: 'pending' });
-    
+    updateToast(toastId, { status: "pending" });
+
     // This is just for demo purposes
     setTimeout(() => {
       const success = Math.random() > 0.5;
-      updateToast(toastId, { 
-        status: success ? 'success' : 'error',
-        message: success ? 'Transaction successful!' : 'Transaction failed. Try again?'
+      updateToast(toastId, {
+        status: success ? "success" : "error",
+        message: success
+          ? "Transaction successful!"
+          : "Transaction failed. Try again?",
       });
     }, 2000);
   };
@@ -41,12 +48,14 @@ export const Toaster = () => {
     <Toast.Provider>
       <div className="fixed bottom-0 right-0 z-50 flex flex-col gap-2 p-4 max-w-xs w-full">
         {toasts.map((toast) => (
-          <Toast.Root 
+          <Toast.Root
             key={toast.id}
             className={`flex items-center gap-2 p-4 rounded-md shadow-lg ${
-              toast.status === 'pending' ? 'bg-blue-50 border border-blue-200' :
-              toast.status === 'success' ? 'bg-green-50 border border-green-200' :
-              'bg-red-50 border border-red-200'
+              toast.status === "pending"
+                ? "bg-blue-50 border border-blue-200"
+                : toast.status === "success"
+                ? "bg-green-50 border border-green-200"
+                : "bg-red-50 border border-red-200"
             }`}
             open={true}
             onOpenChange={(open) => {
@@ -54,22 +63,26 @@ export const Toaster = () => {
             }}
           >
             <div className="flex-shrink-0">
-              {toast.status === 'pending' && (
+              {toast.status === "pending" && (
                 <div className="animate-spin w-5 h-5">
                   <div className="h-5 w-5 rounded-full border-2 border-t-blue-500 border-r-blue-500 border-b-transparent border-l-transparent" />
                 </div>
               )}
-              {toast.status === 'success' && <CheckIcon className="w-5 h-5 text-green-500" />}
-              {toast.status === 'error' && <XIcon className="w-5 h-5 text-red-500" />}
+              {toast.status === "success" && (
+                <CheckIcon className="w-5 h-5 text-green-500" />
+              )}
+              {toast.status === "error" && (
+                <XIcon className="w-5 h-5 text-red-500" />
+              )}
             </div>
-            
+
             <Toast.Description className="flex-grow text-sm">
               {toast.message}
             </Toast.Description>
-            
+
             <div className="flex gap-1">
-              {toast.status === 'error' && (
-                <button 
+              {toast.status === "error" && (
+                <button
                   onClick={() => handleRetry(toast.id)}
                   className="p-1 rounded hover:bg-red-100"
                   aria-label="Retry transaction"
@@ -77,9 +90,9 @@ export const Toaster = () => {
                   <RefreshIcon className="w-4 h-4" />
                 </button>
               )}
-              
-              {toast.status === 'success' && toast.txHash && (
-                <a 
+
+              {toast.status === "success" && toast.txHash && (
+                <a
                   href={getExplorerUrl(toast.txHash, toast.network)}
                   target="_blank"
                   rel="noopener noreferrer"
@@ -89,8 +102,8 @@ export const Toaster = () => {
                   <ExternalLinkIcon className="w-4 h-4" />
                 </a>
               )}
-              
-              <button 
+
+              <button
                 onClick={() => removeToast(toast.id)}
                 className="p-1 rounded hover:bg-gray-100"
                 aria-label="Close"
@@ -100,9 +113,9 @@ export const Toaster = () => {
             </div>
           </Toast.Root>
         ))}
-        
+
         <Toast.Viewport />
       </div>
     </Toast.Provider>
   );
-};
\ No newline at end of file
+};
diff --git a/web/components/ToasterProviderWrapper.tsx b/web/components/ToasterProviderWrapper.tsx
new file mode 100644
index 0000000..ce901af
--- /dev/null
+++ b/web/components/ToasterProviderWrapper.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import React from "react";
+import { ToasterProvider } from "@/app/context/ToasterContext";
+
+export function ToasterProviderWrapper({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <ToasterProvider>{children}</ToasterProvider>;
+}
diff --git a/web/components/footer.tsx b/web/components/footer.tsx
new file mode 100644
index 0000000..fcb2dbd
--- /dev/null
+++ b/web/components/footer.tsx
@@ -0,0 +1,298 @@
+import Link from "next/link";
+import {
+  Facebook,
+  Twitter,
+  Instagram,
+  Linkedin,
+  Send,
+  Shield,
+  Award,
+  CreditCard,
+  Phone,
+  Mail,
+  MapPin,
+  Download,
+  Star,
+  Users,
+  Trophy,
+  ChevronRight,
+} from "lucide-react";
+
+/**
+ * Footer Component
+ *
+ * Ultra-modern footer with advanced design and perfect responsiveness
+ * Features gradient backgrounds, hover animations, and organized sections
+ * Links arranged in compact columns for better space utilization
+ */
+export function Footer() {
+  // All links organized by category
+  const footerLinks = [
+    {
+      category: "Quick Links",
+      links: [
+        { name: "Home", href: "/" },
+        { name: "How to Play", href: "/how-to-play" },
+        { name: "Contests", href: "/contests" },
+        { name: "Winners", href: "/winners" },
+        { name: "Points System", href: "/points" },
+        { name: "Tips & Tricks", href: "/tips" },
+        { name: "Fantasy Cricket League", href: "/cricket-league" },
+        { name: "Help", href: "/help" },
+      ],
+    },
+    {
+      category: "Games",
+      links: [
+        { name: "Fantasy Cricket", href: "/cricket" },
+        { name: "Fantasy Football", href: "/football" },
+        { name: "Cricket Schedule", href: "/schedule" },
+        { name: "TATA IPL 2025", href: "/ipl" },
+        { name: "T20 World Cup", href: "/t20" },
+        { name: "Live Matches", href: "/live" },
+        { name: "Today's Match Prediction", href: "/prediction" },
+        { name: "Cricket Records", href: "/records" },
+      ],
+    },
+    {
+      category: "Support",
+      links: [
+        { name: "Help Center", href: "/help" },
+        { name: "Contact Us", href: "/contact" },
+        { name: "Withdraw Cash", href: "/withdraw" },
+        { name: "Responsible Gaming", href: "/responsible" },
+        { name: "Terms of Service", href: "/terms" },
+        { name: "Privacy Policy", href: "/privacy" },
+        { name: "About Us", href: "/about" },
+        { name: "Blog", href: "/blog" },
+      ],
+    },
+  ];
+
+  const socialLinks = [
+    {
+      icon: Facebook,
+      href: "#",
+      name: "Facebook",
+      color: "from-blue-600 to-blue-700",
+    },
+    {
+      icon: Twitter,
+      href: "#",
+      name: "Twitter",
+      color: "from-sky-500 to-sky-600",
+    },
+    {
+      icon: Instagram,
+      href: "#",
+      name: "Instagram",
+      color: "from-pink-500 to-purple-600",
+    },
+    {
+      icon: Linkedin,
+      href: "#",
+      name: "LinkedIn",
+      color: "from-blue-700 to-blue-800",
+    },
+    {
+      icon: Send,
+      href: "#",
+      name: "Telegram",
+      color: "from-blue-500 to-blue-600",
+    },
+  ];
+
+  const stats = [
+    { icon: Users, value: "10M+", label: "Active Players" },
+    { icon: Trophy, value: "₹500Cr+", label: "Prizes Won" },
+    { icon: Star, value: "4.8", label: "App Rating" },
+  ];
+
+  return (
+    <footer className="relative bg-gradient-to-br from-gray-900 via-black to-gray-900 text-white overflow-hidden">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 opacity-5">
+        <div
+          className="absolute inset-0"
+          style={{
+            backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fillRule='evenodd'%3E%3Cg fill='%23ffffff' fillOpacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+          }}
+        />
+      </div>
+
+      <div className="relative z-10">
+        {/* Top Section with Stats */}
+        <div className="border-b border-gray-800">
+          <div className="container mx-auto px-4 py-8">
+            <div className="grid md:grid-cols-3 gap-6 text-center">
+              {stats.map((stat, index) => (
+                <div key={index} className="group">
+                  <div className="bg-gradient-to-br from-red-600/20 to-red-700/20 rounded-2xl p-4 border border-red-500/20 hover:border-red-500/40 transition-all duration-300 hover:scale-105">
+                    <stat.icon className="h-6 w-6 text-red-500 mx-auto mb-2" />
+                    <div className="text-2xl font-bold text-white mb-1">
+                      {stat.value}
+                    </div>
+                    <div className="text-gray-400 text-sm">{stat.label}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Main Footer Content */}
+        <div className="container mx-auto px-4 py-12">
+          <div className="grid lg:grid-cols-12 gap-8">
+            {/* Brand Section */}
+            <div className="lg:col-span-4 space-y-6">
+              <div className="flex items-center">
+                <div className="h-12 w-12 rounded-2xl bg-gradient-to-br from-red-600 to-red-700 flex items-center justify-center mr-4 shadow-lg">
+                  <div className="h-8 w-8 rounded-xl bg-white flex items-center justify-center">
+                    <div className="h-5 w-5 rounded-lg bg-gradient-to-br from-red-600 to-red-700"></div>
+                  </div>
+                </div>
+                <div>
+                  <span className="text-white font-bold text-2xl block">
+                    ROSTERRUMBLE
+                  </span>
+                  <span className="text-red-400 text-sm">
+                    Fantasy Sports Platform
+                  </span>
+                </div>
+              </div>
+
+              <p className="text-gray-300 leading-relaxed">
+                India&apos;s most trusted fantasy sports platform. Create your
+                dream team, join contests, and win exciting prizes every day.
+                Experience the thrill of fantasy cricket and football.
+              </p>
+
+              <div className="space-y-3">
+                <div className="flex items-center text-gray-300">
+                  <Phone className="h-4 w-4 mr-3 text-red-500" />
+                  <span className="text-sm">+91 8010400200</span>
+                </div>
+                <div className="flex items-center text-gray-300">
+                  <Mail className="h-4 w-4 mr-3 text-red-500" />
+                  <span className="text-sm">support@rosterrumble.com</span>
+                </div>
+                <div className="flex items-center text-gray-300">
+                  <MapPin className="h-4 w-4 mr-3 text-red-500" />
+                  <span className="text-sm">Mumbai, India</span>
+                </div>
+              </div>
+
+              {/* Social Links */}
+              <div>
+                <h3 className="font-semibold mb-4 text-lg">Follow Us</h3>
+                <div className="flex space-x-3">
+                  {socialLinks.map((social) => (
+                    <Link
+                      key={social.name}
+                      href={social.href}
+                      className={`p-3 bg-gradient-to-br ${social.color} rounded-xl hover:scale-110 transition-all duration-200 shadow-lg hover:shadow-xl`}
+                    >
+                      <social.icon className="h-5 w-5" />
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* Links Section - Compact Side-by-Side Layout */}
+            <div className="lg:col-span-5 grid grid-cols-3 gap-6">
+              {footerLinks.map((section) => (
+                <div key={section.category}>
+                  <h3 className="font-semibold mb-4 text-lg text-white">
+                    {section.category}
+                  </h3>
+                  <div className="space-y-2">
+                    {section.links.map((link, index) => (
+                      <Link
+                        key={index}
+                        href={link.href}
+                        className="flex items-center text-gray-300 hover:text-red-400 transition-all duration-200 text-sm group"
+                      >
+                        <ChevronRight className="h-3 w-3 mr-1 opacity-0 group-hover:opacity-100 transition-opacity" />
+                        <span>{link.name}</span>
+                      </Link>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Download & Security Section */}
+            <div className="lg:col-span-3 space-y-6">
+              {/* Download App */}
+              <div className="space-y-4">
+                <h3 className="font-semibold text-lg text-white">
+                  Download App
+                </h3>
+                <div className="space-y-3">
+                  <button className="w-full bg-gradient-to-r from-gray-800 to-gray-900 hover:from-gray-700 hover:to-gray-800 rounded-xl p-3 flex items-center justify-center space-x-2 transition-all duration-200 hover:scale-105 border border-gray-700">
+                    <Download className="h-5 w-5 text-green-500" />
+                    <span className="text-sm font-medium">Android App</span>
+                  </button>
+                  <button className="w-full bg-gradient-to-r from-gray-800 to-gray-900 hover:from-gray-700 hover:to-gray-800 rounded-xl p-3 flex items-center justify-center space-x-2 transition-all duration-200 hover:scale-105 border border-gray-700">
+                    <Download className="h-5 w-5 text-blue-500" />
+                    <span className="text-sm font-medium">iOS App</span>
+                  </button>
+                </div>
+              </div>
+
+              {/* Security Badges */}
+              <div>
+                <h3 className="font-semibold mb-4 text-lg text-white">
+                  Security
+                </h3>
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="bg-gradient-to-br from-green-600/20 to-green-700/20 rounded-xl p-3 text-center border border-green-500/20 hover:border-green-500/40 transition-all duration-200 hover:scale-105">
+                    <Shield className="h-6 w-6 text-green-500 mx-auto mb-1" />
+                    <div className="text-xs text-green-400 font-semibold">
+                      SSL Secure
+                    </div>
+                  </div>
+                  <div className="bg-gradient-to-br from-blue-600/20 to-blue-700/20 rounded-xl p-3 text-center border border-blue-500/20 hover:border-blue-500/40 transition-all duration-200 hover:scale-105">
+                    <Award className="h-6 w-6 text-blue-500 mx-auto mb-1" />
+                    <div className="text-xs text-blue-400 font-semibold">
+                      Certified
+                    </div>
+                  </div>
+                  <div className="bg-gradient-to-br from-purple-600/20 to-purple-700/20 rounded-xl p-3 text-center col-span-2 border border-purple-500/20 hover:border-purple-500/40 transition-all duration-200 hover:scale-105">
+                    <CreditCard className="h-6 w-6 text-purple-500 mx-auto mb-1" />
+                    <div className="text-xs text-purple-400 font-semibold">
+                      Safe Payments
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Bottom Section */}
+        <div className="border-t border-gray-800 bg-black/50">
+          <div className="container mx-auto px-4 py-6">
+            <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
+              <div className="text-gray-400 text-sm text-center md:text-left max-w-2xl">
+                <p>
+                  © {new Date().getFullYear()} Play Games24x7 Pvt. Ltd. All
+                  Rights Reserved.
+                </p>
+              </div>
+
+              <div className="flex flex-wrap justify-center md:justify-end gap-4 text-xs text-gray-400">
+                <span>*18+ only. T&C Apply.</span>
+                <span>|</span>
+                <span>Play responsibly</span>
+                <span>|</span>
+                <span>Fantasy sports involves financial risk</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/web/components/header.tsx b/web/components/header.tsx
new file mode 100644
index 0000000..9df5402
--- /dev/null
+++ b/web/components/header.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+/**
+ * Header Component
+ *
+ * Professional navigation header with beautiful mobile menu
+ * Mobile menu shows on screens smaller than 1280px (xl breakpoint)
+ * Features outside click to close and backdrop blur
+ */
+export function Header() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const checkScreenSize = () => {
+      setIsMobile(window.innerWidth < 1280); // xl breakpoint - shows menu earlier
+    };
+
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+
+    // Handle outside click
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setIsMenuOpen(false);
+      }
+    };
+
+    if (isMenuOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      window.removeEventListener("resize", checkScreenSize);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isMenuOpen]);
+
+  const menuItems = [
+    { name: "Home", href: "/", isActive: true },
+    { name: "How to Play", href: "/how-to-play" },
+    { name: "Contests", href: "/contests" },
+    { name: "Winners", href: "/winners" },
+    { name: "About Us", href: "/about" },
+    { name: "Support", href: "/support" },
+  ];
+
+  return (
+    <header className="fixed top-0 left-0 right-0 z-50 bg-black/95 backdrop-blur-md border-b border-gray-800 py-2">
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between h-16">
+          {/* Hamburger Menu - Shows on mobile/tablet (earlier breakpoint) */}
+          {isMobile && (
+            <button
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
+              className="relative text-white p-2 hover:bg-red-600/20 rounded-lg transition-all duration-200 group"
+              aria-label="Toggle menu"
+            >
+              <div className="relative w-6 h-6">
+                <span
+                  className={`absolute block h-0.5 w-6 bg-white transform transition-all duration-300 ${
+                    isMenuOpen ? "rotate-45 top-3" : "top-1"
+                  }`}
+                />
+                <span
+                  className={`absolute block h-0.5 w-6 bg-white transform transition-all duration-300 ${
+                    isMenuOpen ? "opacity-0" : "top-3"
+                  }`}
+                />
+                <span
+                  className={`absolute block h-0.5 w-6 bg-white transform transition-all duration-300 ${
+                    isMenuOpen ? "-rotate-45 top-3" : "top-5"
+                  }`}
+                />
+              </div>
+            </button>
+          )}
+
+          {/* Logo - Center on mobile, left on desktop */}
+          <Link
+            href="/"
+            className={`flex items-center group ${isMobile ? "mx-auto" : ""}`}
+          >
+            <div className="flex items-center space-x-3">
+              <span className="text-white font-bold text-xl tracking-wide">
+                ROSTER<span className="text-red-500">RUMBLE</span>
+              </span>
+            </div>
+          </Link>
+
+          {/* Desktop Navigation - Hidden on mobile */}
+          {!isMobile && (
+            <nav className="flex items-center space-x-1">
+              {menuItems.map((item) => (
+                <Link
+                  key={item.name}
+                  href={item.href}
+                  className={`px-4 py-2 rounded-lg font-medium transition-all duration-200 ${
+                    item.isActive
+                      ? "text-red-500 bg-red-500/10"
+                      : "text-gray-300 hover:text-white hover:bg-white/10"
+                  }`}
+                >
+                  {item.name}
+                </Link>
+              ))}
+            </nav>
+          )}
+
+          {/* Auth Section - Right */}
+          <div className="flex items-center space-x-3">
+            <div className="hidden lg:flex items-center space-x-3">
+              <span className="text-gray-300 text-sm">Not a Member Yet?</span>
+              <Link
+                href="/register"
+                className="text-red-500 hover:text-red-400 text-sm font-medium transition-colors duration-200 hover:underline"
+              >
+                Register Now
+              </Link>
+            </div>
+            <Button className="bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 text-white border-0 px-6 py-2 rounded-lg font-medium transition-all duration-200 hover:scale-105">
+              Log In
+            </Button>
+          </div>
+        </div>
+
+        {/* Modern Mobile Menu Dropdown */}
+        {isMenuOpen && isMobile && (
+          <>
+            {/* Backdrop Blur Overlay */}
+            <div
+              className="fixed inset-0 bg-black/20 backdrop-blur-md z-40"
+              onClick={() => setIsMenuOpen(false)}
+            />
+
+            {/* Dropdown Menu */}
+            <div
+              ref={menuRef}
+              className="absolute top-full left-0 right-0 bg-white/95 backdrop-blur-xl border-t border-gray-200 shadow-2xl z-50 animate-in slide-in-from-top duration-300"
+            >
+              <div className="container mx-auto px-4 py-6">
+                <nav className="space-y-2">
+                  {menuItems.map((item) => (
+                    <Link
+                      key={item.name}
+                      href={item.href}
+                      className={`block px-4 py-3 rounded-xl font-medium transition-all duration-200 ${
+                        item.isActive
+                          ? "text-red-600 bg-red-50"
+                          : "text-gray-700 hover:text-red-600 hover:bg-gray-50"
+                      }`}
+                      onClick={() => setIsMenuOpen(false)}
+                    >
+                      {item.name}
+                    </Link>
+                  ))}
+
+                  {/* Mobile Auth */}
+                  <div className="pt-4 mt-4 border-t border-gray-200">
+                    <Link
+                      href="/register"
+                      className="block w-full text-center bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 text-white font-medium px-4 py-3 rounded-xl transition-all duration-200"
+                      onClick={() => setIsMenuOpen(false)}
+                    >
+                      Register Now
+                    </Link>
+                  </div>
+                </nav>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </header>
+  );
+}
diff --git a/web/components/landing-page/app-promotion-section.tsx b/web/components/landing-page/app-promotion-section.tsx
new file mode 100644
index 0000000..ce62433
--- /dev/null
+++ b/web/components/landing-page/app-promotion-section.tsx
@@ -0,0 +1,86 @@
+import { Button } from "@/components/ui/button";
+import { Star } from "lucide-react";
+import Image from "next/image";
+
+/**
+ * App Promotion Section
+ *
+ * Showcases the mobile app with features and app screenshot
+ * Clean and advanced layout without childish elements
+ */
+export function AppPromotionSection() {
+  const features = [
+    "Lightning-fast gameplay experience",
+    "Real-time match updates and notifications",
+    "Secure payment gateway integration",
+    "Expert analysis and player insights",
+    "24/7 customer support",
+  ];
+
+  return (
+    <section className="bg-white py-20">
+      <div className="container mx-auto px-4">
+        <div className="grid lg:grid-cols-2 gap-16 items-center max-w-7xl mx-auto">
+          {/* Content */}
+          <div className="space-y-8 order-2 lg:order-1">
+            <div>
+              <h2 className="text-red-600 text-4xl md:text-5xl font-bold mb-6">
+                Play Fantasy Cricket on RosterRumble App
+              </h2>
+              <div className="w-20 h-1 bg-red-600 rounded-full"></div>
+            </div>
+
+            <div className="space-y-6 text-gray-700 leading-relaxed">
+              <p className="text-lg">
+                Want to enjoy fantasy games like cricket but just can&apos;t
+                manage the time? Well, RosterRumble.com is the answer you need.
+                This is the place where your favorite fantasy sports come alive.
+              </p>
+
+              <p>
+                RosterRumble.com brings the best fantasy games at your
+                fingertips. It is committed to offering the same gameplay
+                experience with millions of players. Register with us, pick a
+                game and win cash daily.
+              </p>
+
+              <p>
+                Fantasy cricket and football boost your skill and let you win
+                real cash rewards. We offer a safe and secured platform to enjoy
+                online fantasy sports at your leisure.
+              </p>
+            </div>
+
+            {/* Features List */}
+            <div className="space-y-3">
+              {features.map((feature, index) => (
+                <div key={index} className="flex items-center space-x-3">
+                  <Star className="h-5 w-5 text-red-500 fill-current flex-shrink-0" />
+                  <span className="text-gray-700">{feature}</span>
+                </div>
+              ))}
+            </div>
+
+            <Button className="bg-red-600 hover:bg-red-700 text-white px-8 py-7 text-lg rounded-xl">
+              Today&apos;s Match Preview
+            </Button>
+          </div>
+
+          {/* Mobile App Image  */}
+          <div className="flex justify-center order-1 lg:order-2">
+            <div className="relative w-full max-w-sm lg:max-w-md">
+              <Image
+                src="/appScreenshot.png"
+                alt="RosterRumble Mobile App Screenshot"
+                width={400}
+                height={800}
+                className="w-full h-auto rounded-2xl shadow-2xl hover:shadow-3xl transition-shadow duration-300"
+                priority
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/web/components/landing-page/contact-section.tsx b/web/components/landing-page/contact-section.tsx
new file mode 100644
index 0000000..6958be9
--- /dev/null
+++ b/web/components/landing-page/contact-section.tsx
@@ -0,0 +1,69 @@
+import { Phone, Smartphone, ArrowRight } from "lucide-react";
+
+/**
+ * Missed Call Section
+ *
+ * Enhanced call-to-action section with phone number and app download
+ * Advanced design with subtle animations and visual elements
+ */
+export function ContactSection() {
+  return (
+    <section className="relative bg-gradient-to-r from-gray-900 via-black to-gray-900 py-8 overflow-hidden">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 opacity-5">
+        <div
+          className="absolute inset-0"
+          style={{
+            backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fillRule='evenodd'%3E%3Cg fill='%23ffffff' fillOpacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+          }}
+        />
+      </div>
+
+      <div className="container mx-auto px-4 relative z-10">
+        <div className="flex flex-col md:flex-row items-center justify-between gap-8">
+          {/* Missed Call Info  */}
+          <div className="flex items-center justify-center text-center md:text-left group bg-black/30 backdrop-blur-sm px-6 py-4 rounded-2xl border border-gray-800 hover:border-red-500/30 transition-all duration-300">
+            <div className="relative">
+              <div className="absolute -inset-1 bg-red-500 rounded-full opacity-30 animate-pulse"></div>
+              <div className="relative bg-red-500 rounded-full p-3">
+                <Phone className="text-white h-6 w-6" />
+              </div>
+            </div>
+            <div className="ml-4">
+              <span className="text-gray-300 font-medium text-sm block mb-1">
+                GIVE A MISSED CALL
+              </span>
+              <div className="relative">
+                <span className="text-white text-2xl md:text-3xl font-bold tracking-wider">
+                  <span className="text-red-500">8010</span>400200
+                </span>
+                <div className="absolute -bottom-2 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-red-500 to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500"></div>
+              </div>
+            </div>
+          </div>
+
+          {/* App Download Button */}
+          <div className="group relative">
+            <div className="absolute -inset-0.5 bg-gradient-to-r from-red-500 to-red-600 rounded-xl blur opacity-30 group-hover:opacity-70 transition duration-500"></div>
+            <div className="relative flex items-center bg-black rounded-xl px-6 py-4 hover:bg-gray-900 transition-all duration-300 cursor-pointer border border-gray-800">
+              <div className="bg-gradient-to-br from-gray-800 to-black p-3 rounded-xl mr-4">
+                <Smartphone className="text-red-500 h-6 w-6 group-hover:scale-110 transition-transform duration-300" />
+              </div>
+              <div className="text-left">
+                <div className="text-xs text-gray-400 mb-1">
+                  To Download Your
+                </div>
+                <div className="flex items-center">
+                  <span className="text-white font-bold">ROSTER</span>
+                  <span className="text-red-500 font-bold">RUMBLE</span>
+                  <span className="text-white font-bold ml-1">APP</span>
+                  <ArrowRight className="h-4 w-0 text-red-400 ml-0 opacity-0 group-hover:w-4 group-hover:ml-2 group-hover:opacity-100 transition-all duration-300" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/web/components/landing-page/easy-steps-section.tsx b/web/components/landing-page/easy-steps-section.tsx
new file mode 100644
index 0000000..d9cb63b
--- /dev/null
+++ b/web/components/landing-page/easy-steps-section.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import { useState } from "react";
+import { Play, Target, Users, Trophy } from "lucide-react";
+
+/**
+ * Easy Steps Section
+ *
+ * Red background section with playable video and step guide
+ */
+export function EasyStepsSection() {
+  const [isVideoPlaying, setIsVideoPlaying] = useState(false);
+
+  const steps = [
+    {
+      icon: Target,
+      title: "Select a Match",
+      description:
+        "Select an upcoming match of your choice from our extensive list",
+    },
+    {
+      icon: Users,
+      title: "Create your own team",
+      description:
+        "Use your sports knowledge and check player stats to create a winning team using 100 credits",
+    },
+    {
+      icon: Trophy,
+      title: "Join Free & Cash Contests",
+      description:
+        "Participate in Cash or Practice Contests and win exciting prizes",
+    },
+  ];
+
+  const handleVideoPlay = () => {
+    setIsVideoPlaying(true);
+    // You can add actual video play logic here
+  };
+
+  return (
+    <section className="bg-red-600 py-16">
+      <div className="container mx-auto px-4">
+        <h2 className="text-white text-4xl md:text-5xl font-bold text-center mb-16">
+          3 Easy Steps
+        </h2>
+
+        <div className="grid lg:grid-cols-2 gap-12 items-center max-w-7xl mx-auto">
+          {/* Video Section */}
+          <div className="relative group">
+            <div className="bg-black rounded-2xl overflow-hidden aspect-video shadow-2xl">
+              {!isVideoPlaying ? (
+                // Video Thumbnail/Placeholder
+                <div
+                  className="w-full h-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center group-hover:from-gray-700 group-hover:to-gray-800 transition-all duration-300 cursor-pointer"
+                  onClick={handleVideoPlay}
+                >
+                  <div className="text-center">
+                    <div className="relative">
+                      <Play className="text-red-500 h-20 w-20 mx-auto mb-4 group-hover:scale-110 transition-transform duration-300" />
+                      <div className="absolute inset-0 bg-red-500/20 rounded-full animate-ping"></div>
+                    </div>
+                    <p className="text-white text-lg font-semibold">
+                      How to play on RosterRumble
+                    </p>
+                    <p className="text-white/70 text-sm mt-2">
+                      Click to play video
+                    </p>
+                  </div>
+                </div>
+              ) : (
+                // Actual Video Element
+                <video
+                  className="w-full h-full object-cover"
+                  controls
+                  autoPlay
+                  poster="/appScreenshot.png"
+                >
+                  <source src="/how-to-play.mp4" type="video/mp4" />
+                  <source src="/how-to-play.webm" type="video/webm" />
+                  Your browser does not support the video tag.
+                </video>
+              )}
+            </div>
+
+            {/* Video Title Overlay */}
+            <div className="absolute bottom-4 left-4 right-4 bg-black/70 rounded-lg p-3">
+              <p className="text-white font-semibold">
+                How to play on RosterRumble | Tutorial
+              </p>
+            </div>
+          </div>
+
+          {/* Steps Section */}
+          <div className="space-y-8">
+            {steps.map((step, index) => (
+              <div
+                key={index}
+                className="flex items-start space-x-6 group"
+                style={{ animationDelay: `${index * 200}ms` }}
+              >
+                <div className="bg-white rounded-full p-4 shadow-lg group-hover:shadow-xl transition-all duration-300 group-hover:scale-110 flex-shrink-0">
+                  <step.icon className="h-8 w-8 text-red-600" />
+                </div>
+                <div className="flex-1">
+                  <h3 className="text-white text-xl font-bold mb-3 group-hover:text-red-100 transition-colors">
+                    {step.title}
+                  </h3>
+                  <p className="text-white/90 leading-relaxed group-hover:text-white transition-colors">
+                    {step.description}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/web/components/landing-page/faq-section.tsx b/web/components/landing-page/faq-section.tsx
new file mode 100644
index 0000000..24798a7
--- /dev/null
+++ b/web/components/landing-page/faq-section.tsx
@@ -0,0 +1,132 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+/**
+ * FAQ Section
+ *
+ * Comprehensive FAQ with tabbed interface for Cricket/Football
+ * Modern accordion design with smooth animations
+ */
+export function FAQSection() {
+  const cricketFAQs = [
+    {
+      question: "What is Fantasy Cricket?",
+      answer:
+        "Fantasy Cricket is a virtual game where you create your own team of real cricket players and earn points based on their actual performance in live matches.",
+    },
+    {
+      question: "How to Download the Fantasy Cricket App?",
+      answer:
+        "You can download the RosterRumble app from Google Play Store for Android devices or App Store for iOS devices.",
+    },
+    {
+      question:
+        "Play Daily Fantasy Cricket Tournaments & Win Real Cash on RosterRumble",
+      answer:
+        "Join daily contests, create your team, and compete with millions of players to win exciting cash prizes.",
+    },
+    {
+      question: "Benefits of Playing Fantasy Sports on RosterRumble App",
+      answer:
+        "Enjoy secure gameplay, instant withdrawals, expert analysis, daily bonuses, and 24/7 customer support.",
+    },
+    {
+      question: "Can I Play Practice Fantasy Cricket Games on RosterRumble?",
+      answer:
+        "Yes, you can play practice games to improve your skills before joining cash contests.",
+    },
+  ];
+
+  const additionalFAQs = [
+    {
+      question: "Why Fantasy Games?",
+      answer:
+        "Fantasy games combine your sports knowledge with strategy to win real cash prizes while enjoying your favorite sports.",
+    },
+    {
+      question: "Unique Features of RosterRumble",
+      answer:
+        "We offer unique features like expert tips, live match updates, instant withdrawals, and secure gameplay.",
+    },
+    {
+      question: "Playing Fantasy Cricket & Football is Safe, Secure & Legal",
+      answer:
+        "Yes, fantasy sports are completely legal in India and we ensure 100% secure transactions and fair gameplay.",
+    },
+  ];
+
+  return (
+    <section className="bg-gray-50 py-20">
+      <div className="container mx-auto px-4">
+        <div className="max-w-4xl mx-auto">
+          <Tabs defaultValue="cricket" className="w-full">
+            <TabsList className="grid w-full max-w-md mx-auto grid-cols-2 mb-12 bg-white shadow-lg rounded-xl">
+              <TabsTrigger
+                value="cricket"
+                className="data-[state=active]:bg-red-600 data-[state=active]:text-white rounded-lg font-semibold"
+              >
+                CRICKET
+              </TabsTrigger>
+              <TabsTrigger
+                value="football"
+                className="data-[state=active]:bg-red-600 data-[state=active]:text-white rounded-lg font-semibold"
+              >
+                FOOTBALL
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="cricket" className="space-y-4">
+              <Accordion type="single" collapsible className="w-full space-y-4">
+                {cricketFAQs.map((faq, index) => (
+                  <AccordionItem
+                    key={index}
+                    value={`item-${index}`}
+                    className="bg-white border-0 rounded-xl shadow-md hover:shadow-lg transition-all duration-300"
+                  >
+                    <AccordionTrigger className="px-6 py-5 text-left hover:no-underline font-semibold text-gray-800 hover:text-red-600">
+                      {faq.question}
+                    </AccordionTrigger>
+                    <AccordionContent className="px-6 pb-5 text-gray-600 leading-relaxed">
+                      {faq.answer}
+                    </AccordionContent>
+                  </AccordionItem>
+                ))}
+              </Accordion>
+            </TabsContent>
+
+            <TabsContent value="football">
+              <div className="text-center text-gray-500 py-12 bg-white rounded-xl shadow-md">
+                <p className="text-lg">Football FAQs coming soon...</p>
+              </div>
+            </TabsContent>
+          </Tabs>
+
+          {/* Additional FAQ Section */}
+          <div className="mt-16">
+            <Accordion type="single" collapsible className="w-full space-y-4">
+              {additionalFAQs.map((faq, index) => (
+                <AccordionItem
+                  key={index}
+                  value={`additional-${index}`}
+                  className="bg-white border-0 rounded-xl shadow-md hover:shadow-lg transition-all duration-300"
+                >
+                  <AccordionTrigger className="px-6 py-5 text-left hover:no-underline font-semibold text-gray-800 hover:text-red-600">
+                    {faq.question}
+                  </AccordionTrigger>
+                  <AccordionContent className="px-6 pb-5 text-gray-600 leading-relaxed">
+                    {faq.answer}
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/web/components/landing-page/hero-carousel.tsx b/web/components/landing-page/hero-carousel.tsx
new file mode 100644
index 0000000..8afcc9a
--- /dev/null
+++ b/web/components/landing-page/hero-carousel.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+/**
+ * Hero Carousel Component
+ *
+ * Full-width image carousel with smooth transitions
+ * Auto-plays with manual navigation controls
+ * Responsive design with proper aspect ratios
+ */
+export function HeroCarousel() {
+  const [currentSlide, setCurrentSlide] = useState(0);
+
+  const slides = [
+    {
+      id: 1,
+      image: "/soccer-image.jpeg",
+      alt: "Play with Champions - Fantasy Cricket",
+    },
+    {
+      id: 2,
+      image: "/soccer-image1.jpeg",
+      alt: "Win Big Prizes - RosterRumble",
+    },
+    {
+      id: 3,
+      image: "/soccer-image2.jpeg",
+      alt: "Fantasy Sports Experience",
+    },
+  ];
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentSlide((prev) => (prev + 1) % slides.length);
+    }, 5000);
+    return () => clearInterval(interval);
+  }, [slides.length]);
+
+  return (
+    <section className="relative w-full h-[500px] md:h-[90vh] mt-16 overflow-hidden">
+      {slides.map((slide, index) => (
+        <div
+          key={slide.id}
+          className={`absolute inset-0 transition-all duration-1000 ease-in-out ${
+            index === currentSlide
+              ? "opacity-100 scale-100"
+              : "opacity-0 scale-105"
+          }`}
+        >
+          <div
+            className="w-full h-full bg-cover bg-center bg-gray-900"
+            style={{
+              backgroundImage: `url('${slide.image}')`,
+            }}
+          />
+        </div>
+      ))}
+
+      {/* Navigation Dots */}
+      <div className="absolute bottom-6 left-1/2 transform -translate-x-1/2 flex space-x-3">
+        {slides.map((_, index) => (
+          <button
+            key={index}
+            onClick={() => setCurrentSlide(index)}
+            className={`w-3 h-3 rounded-full transition-all duration-300 ${
+              index === currentSlide
+                ? "bg-red-500 scale-125 shadow-lg shadow-red-500/50"
+                : "bg-white/60 hover:bg-white/80"
+            }`}
+            aria-label={`Go to slide ${index + 1}`}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/web/components/landing-page/stats-section.tsx b/web/components/landing-page/stats-section.tsx
new file mode 100644
index 0000000..ed86b29
--- /dev/null
+++ b/web/components/landing-page/stats-section.tsx
@@ -0,0 +1,64 @@
+import { Star, Users, IndianRupee } from "lucide-react"
+
+/**
+ * Stats Section
+ *
+ * Displays key platform statistics in modern card design
+ * Features hover animations and responsive grid layout
+ */
+export function StatsSection() {
+  const stats = [
+    {
+      icon: Star,
+      number: "4.3",
+      title: "4.3 OUT OF 5",
+      subtitle: "USER RATING",
+      color: "text-yellow-500",
+    },
+    {
+      icon: Users,
+      number: "4+",
+      title: "CRORE",
+      subtitle: "TOTAL USERS",
+      color: "text-blue-500",
+    },
+    {
+      icon: IndianRupee,
+      number: "₹500",
+      title: "CRORE+",
+      subtitle: "PRIZES WON",
+      color: "text-green-500",
+    },
+  ]
+
+  return (
+    <section className="bg-gray-50 py-12">
+      <div className="container mx-auto px-4">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+          {stats.map((stat, index) => (
+            <div
+              key={index}
+              className="group bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
+            >
+              <div className="flex items-center">
+                {/* Icon & Number */}
+                <div className="bg-gray-100 rounded-xl p-4 flex items-center justify-center min-w-[80px] h-20 mr-4 group-hover:bg-red-50 transition-colors">
+                  <div className="text-center">
+                    <stat.icon className={`h-6 w-6 ${stat.color} mx-auto mb-1`} />
+                    <span className="text-2xl font-bold text-gray-800">{stat.number}</span>
+                  </div>
+                </div>
+
+                {/* Text Content */}
+                <div className="flex-1">
+                  <div className="text-gray-800 font-bold text-sm mb-1">{stat.title}</div>
+                  <div className="text-gray-600 text-sm">{stat.subtitle}</div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/web/components/landing-page/testimonials-section.tsx b/web/components/landing-page/testimonials-section.tsx
new file mode 100644
index 0000000..470bd9a
--- /dev/null
+++ b/web/components/landing-page/testimonials-section.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { ChevronLeft, ChevronRight, Quote } from "lucide-react";
+import Image from "next/image";
+
+/**
+ * Testimonials Section
+ *
+ * Auto-rotating testimonials with manual navigation
+ * Showcases user success stories and winnings
+ */
+export function TestimonialsSection() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const testimonials = [
+    {
+      name: "Ramesh Singh",
+      location: "Ghaziabad, Uttar Pradesh",
+      winnings: "₹1 Crore",
+      text: "I won 1 crore on RosterRumble & I am very happy. My experience with playing RosterRumble for last 2 years has been amazing. I recommend it very highly to every sports fantasy player.",
+      avatar: "/testimonial-img2.jpg",
+    },
+    {
+      name: "Pradip Apte",
+      location: "Latur, Maharashtra",
+      winnings: "₹1 Crore",
+      text: "I've been an avid cricket follower since my childhood. I got to know about RosterRumble from a YouTube ad. Recently won 1 Crore on RosterRumble! The app is easy, secure, and smooth!",
+      avatar: "/testimonial-img2.jpg",
+    },
+    {
+      name: "Anjali Sharma",
+      location: "Mumbai, Maharashtra",
+      winnings: "₹50 Lakh",
+      text: "As a working professional, RosterRumble fits perfectly into my schedule. The interface is user-friendly and I've been consistently winning. Highly recommended for cricket enthusiasts!",
+      avatar: "/testimonial-img2.jpg",
+    },
+    {
+      name: "Vikash Kumar",
+      location: "Patna, Bihar",
+      winnings: "₹75 Lakh",
+      text: "Started playing RosterRumble 6 months ago and already won 75 lakhs! The expert analysis feature really helps in team selection. Best fantasy app in India!",
+      avatar: "/testimonial-img2.jpg",
+    },
+    {
+      name: "Deepak Mehta",
+      location: "Jaipur, Rajasthan",
+      winnings: "₹2 Crore",
+      text: "RosterRumble changed my life! Won 2 crores in the IPL season. The platform is transparent, secure, and offers great contests. Thank you RosterRumble team!",
+      avatar: "/testimonial-img2.jpg",
+    },
+    {
+      name: "Priya Nair",
+      location: "Kochi, Kerala",
+      winnings: "₹30 Lakh",
+      text: "Being a cricket fan, RosterRumble allows me to use my knowledge and earn money. Won 30 lakhs so far and the withdrawal process is super quick!",
+      avatar: "/testimonial-img2.jpg",
+    },
+  ];
+
+  // Auto-rotation effect
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIndex(
+        (prev) => (prev + 1) % Math.ceil(testimonials.length / 2)
+      );
+    }, 5000); // Change every 5 seconds
+
+    return () => clearInterval(interval);
+  }, [testimonials.length]);
+
+  const nextTestimonial = () => {
+    setCurrentIndex((prev) => (prev + 1) % Math.ceil(testimonials.length / 2));
+  };
+
+  const prevTestimonial = () => {
+    setCurrentIndex(
+      (prev) =>
+        (prev - 1 + Math.ceil(testimonials.length / 2)) %
+        Math.ceil(testimonials.length / 2)
+    );
+  };
+
+  const getCurrentTestimonials = () => {
+    const startIndex = currentIndex * 2;
+    return testimonials.slice(startIndex, startIndex + 2);
+  };
+
+  return (
+    <section className="bg-white py-20">
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-16">
+          <h2 className="text-red-600 text-4xl md:text-5xl font-bold mb-4">
+            Players Love RosterRumble
+          </h2>
+          <div className="w-20 h-1 bg-red-600 rounded-full mx-auto"></div>
+        </div>
+
+        <div className="max-w-6xl mx-auto relative">
+          <div className="grid md:grid-cols-2 gap-8 min-h-[300px]">
+            {getCurrentTestimonials().map((testimonial, index) => (
+              <div
+                key={`${currentIndex}-${index}`}
+                className="bg-gray-50 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all  hover:-translate-y-2 animate-in fade-in duration-500"
+              >
+                <Quote className="h-8 w-8 text-red-500 mb-4" />
+
+                <div className="flex items-start space-x-4">
+                  <Image
+                    src={testimonial.avatar || "/placeholder.svg"}
+                    alt={testimonial.name}
+                    width={64}
+                    height={64}
+                    className="w-16 h-16 rounded-full border-4 border-red-100"
+                  />
+                  <div className="flex-1">
+                    <h3 className="font-bold text-red-600 text-lg">
+                      {testimonial.name}
+                    </h3>
+                    <p className="text-gray-600 text-sm mb-1">
+                      {testimonial.location}
+                    </p>
+                    <p className="text-red-600 font-semibold mb-3">
+                      Winnings {testimonial.winnings}
+                    </p>
+                    <p className="text-gray-700 italic leading-relaxed">
+                      &quot;{testimonial.text}&quot;
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Navigation Arrows */}
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={prevTestimonial}
+            className="absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-4 bg-white shadow-lg hover:shadow-xl rounded-full"
+          >
+            <ChevronLeft className="h-6 w-6 text-red-600" />
+          </Button>
+
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={nextTestimonial}
+            className="absolute right-0 top-1/2 transform -translate-y-1/2 translate-x-4 bg-white shadow-lg hover:shadow-xl rounded-full"
+          >
+            <ChevronRight className="h-6 w-6 text-red-600" />
+          </Button>
+
+          {/* Dots Indicator */}
+          <div className="flex justify-center space-x-2 mt-8">
+            {Array.from({ length: Math.ceil(testimonials.length / 2) }).map(
+              (_, index) => (
+                <button
+                  key={index}
+                  onClick={() => setCurrentIndex(index)}
+                  className={`w-3 h-3 rounded-full transition-all duration-300 ${
+                    index === currentIndex
+                      ? "bg-red-500 scale-125"
+                      : "bg-gray-300 hover:bg-gray-400"
+                  }`}
+                />
+              )
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/web/components/landing-page/winners-section.tsx b/web/components/landing-page/winners-section.tsx
new file mode 100644
index 0000000..da9e45a
--- /dev/null
+++ b/web/components/landing-page/winners-section.tsx
@@ -0,0 +1,54 @@
+/**
+ * Winners Section
+ *
+ * Clean showcase of crorepati winners with modern card design
+ */
+export function WinnersSection() {
+  const winners = [
+    { name: "DARSHAN BISHT", amount: "₹1 CRORE", location: "UTTARAKHAND" },
+    { name: "PRADIP APTE", amount: "₹1 CRORE", location: "MAHARSHTRA" },
+    { name: "UPENDRA KUMAR", amount: "₹5 CRORE", location: "UTTAR PRADESH" },
+    { name: "GOUR BHAIRAGYA", amount: "₹1 CRORE", location: "WEST BENGAL" },
+  ];
+
+  return (
+    <section className="relative min-h-[600px] bg-white overflow-hidden">
+      <div className="relative z-10 container mx-auto px-4 py-16">
+        <div className="text-center">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
+            {winners.map((winner, index) => (
+              <div
+                key={index}
+                className="group bg-white border border-red-200 rounded-2xl p-6 hover:bg-red-50 transition-all duration-500 hover:scale-105 hover:shadow-lg"
+              >
+                <div className="relative mb-4">
+                  <div className="w-20 h-20 bg-red-500 rounded-full mx-auto flex items-center justify-center group-hover:shadow-lg group-hover:shadow-red-500/50 transition-all duration-300">
+                    <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center">
+                      <span className="text-red-500 font-bold text-lg">
+                        {winner.name
+                          .split(" ")
+                          .map((n) => n[0])
+                          .join("")}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="absolute -top-2 -right-2 w-8 h-8 bg-red-500 rounded-full flex items-center justify-center">
+                    <span className="text-white text-xs font-bold">👑</span>
+                  </div>
+                </div>
+
+                <h3 className="text-red-700 font-bold text-sm mb-1">
+                  {winner.name}
+                </h3>
+                <div className="text-2xl font-bold text-red-500 mb-1">
+                  {winner.amount}
+                </div>
+                <p className="text-red-400 text-xs">{winner.location}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/web/components/ui/accordion.tsx b/web/components/ui/accordion.tsx
new file mode 100644
index 0000000..2f55a32
--- /dev/null
+++ b/web/components/ui/accordion.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/web/components/ui/button.tsx b/web/components/ui/button.tsx
new file mode 100644
index 0000000..65d4fcd
--- /dev/null
+++ b/web/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/web/components/ui/tabs.tsx b/web/components/ui/tabs.tsx
new file mode 100644
index 0000000..0f4caeb
--- /dev/null
+++ b/web/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/web/package-lock.json b/web/package-lock.json
index 18dad24..aee24cf 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,6 +8,9 @@
       "name": "web",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/react-accordion": "^1.2.11",
+        "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-tabs": "^1.1.12",
         "@radix-ui/react-toast": "^1.2.13",
         "amqplib": "^0.10.8",
         "class-variance-authority": "^0.7.1",
@@ -19,8 +22,8 @@
         "lucide-react": "^0.488.0",
         "next": "14.2.23",
         "pg": "^8.15.6",
-        "react": "^18",
-        "react-dom": "^18",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "redis": "^5.1.1",
         "starknet": "^6.24.1",
         "tailwind-merge": "^3.2.0",
@@ -31,9 +34,11 @@
       "devDependencies": {
         "@swc/core": "^1.11.29",
         "@swc/jest": "^0.2.38",
+        "@types/amqplib": "^0.10.7",
         "@types/ioredis": "^4.28.10",
         "@types/jsonwebtoken": "^9.0.9",
         "@types/node": "^20",
+        "@types/pg": "^8.15.4",
         "@types/react": "^18",
         "@types/react-dom": "^18",
         "dotenv": "^16.5.0",
@@ -1516,6 +1521,139 @@
       "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.11.tgz",
+      "integrity": "sha512-l3W5D54emV2ues7jjeG1xcyN7S3jnK3zE2zHqgn0CmMsy9lNJwmgcrmaxS+7ipw15FAivzKNzH3d5EcGoFKw0A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collapsible": "1.1.11",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-accordion/node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-accordion/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.11.tgz",
+      "integrity": "sha512-2qrRsVGSCYasSz1RFOorXwl0H7g7J1frQtgpQgYrt+MOidtPAINHn9CPovQXb83r8ahapdx3Tu0fa/pdFFSdPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.6.tgz",
@@ -1542,6 +1680,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.2.tgz",
+      "integrity": "sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
@@ -1572,6 +1728,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dismissable-layer": {
       "version": "1.1.9",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.9.tgz",
@@ -1599,6 +1770,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-portal": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.8.tgz",
@@ -1670,7 +1859,7 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-slot": {
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.2.tgz",
       "integrity": "sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ==",
@@ -1688,6 +1877,157 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.10.tgz",
+      "integrity": "sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.12.tgz",
+      "integrity": "sha512-GTVAlRVrQrSw3cEARM0nAx73ixrWDPNZAruETn3oHCNP6SbZ/hNxdxp+u7VkIEv3/sFoLq1PfcHrl7Pnp0CDpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-toast": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.13.tgz",
@@ -2215,6 +2555,16 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@types/amqplib": {
+      "version": "0.10.7",
+      "resolved": "https://registry.npmjs.org/@types/amqplib/-/amqplib-0.10.7.tgz",
+      "integrity": "sha512-IVj3avf9AQd2nXCx0PGk/OYq7VmHiyNxWFSb5HhU9ATh+i+gHWvVcljFTcTWQ/dyHJCTrzCixde+r/asL2ErDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -2346,6 +2696,18 @@
         "undici-types": "~6.19.2"
       }
     },
+    "node_modules/@types/pg": {
+      "version": "8.15.4",
+      "resolved": "https://registry.npmjs.org/@types/pg/-/pg-8.15.4.tgz",
+      "integrity": "sha512-I6UNVBAoYbvuWkkU3oosC8yxqH21f4/Jc4DK71JLG3dT2mdlGe1z+ep/LQGXaKaOgcvUrsQoPRqfgtMcvZiJhg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "pg-protocol": "*",
+        "pg-types": "^2.2.0"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.14",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
@@ -8253,7 +8615,7 @@
       "integrity": "sha512-DYTWtWpfd5FOro3UnAfwvhD8jh59r2ig8bPtc9H8Ds7MscE/9NYruUQWFAOuraRl29jwcT2kyMFQ3MxeaVjUhg==",
       "license": "MIT"
     },
-    "node_modules/pg/node_modules/pg-types": {
+    "node_modules/pg-types": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz",
       "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==",
@@ -8269,45 +8631,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/pg/node_modules/postgres-array": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
-      "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/pg/node_modules/postgres-bytea": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.0.tgz",
-      "integrity": "sha512-xy3pmLuQqRBZBXDULy7KbaitYqLcmxigw14Q5sj8QBVLqEwXfeybIKVWiqAXTlcvdvb0+xkOtDbfQMOf4lST1w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pg/node_modules/postgres-date": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz",
-      "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pg/node_modules/postgres-interval": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz",
-      "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
-      "license": "MIT",
-      "dependencies": {
-        "xtend": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/pgpass": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz",
@@ -8535,6 +8858,45 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "license": "MIT"
     },
+    "node_modules/postgres-array": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
+      "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postgres-bytea": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.0.tgz",
+      "integrity": "sha512-xy3pmLuQqRBZBXDULy7KbaitYqLcmxigw14Q5sj8QBVLqEwXfeybIKVWiqAXTlcvdvb0+xkOtDbfQMOf4lST1w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postgres-date": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz",
+      "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postgres-interval": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz",
+      "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "xtend": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
diff --git a/web/package.json b/web/package.json
index d748a26..3c890e4 100644
--- a/web/package.json
+++ b/web/package.json
@@ -11,6 +11,9 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-toast": "^1.2.13",
     "amqplib": "^0.10.8",
     "class-variance-authority": "^0.7.1",
@@ -22,8 +25,8 @@
     "lucide-react": "^0.488.0",
     "next": "14.2.23",
     "pg": "^8.15.6",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "redis": "^5.1.1",
     "starknet": "^6.24.1",
     "tailwind-merge": "^3.2.0",
@@ -34,9 +37,11 @@
   "devDependencies": {
     "@swc/core": "^1.11.29",
     "@swc/jest": "^0.2.38",
+    "@types/amqplib": "^0.10.7",
     "@types/ioredis": "^4.28.10",
     "@types/jsonwebtoken": "^9.0.9",
     "@types/node": "^20",
+    "@types/pg": "^8.15.4",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "dotenv": "^16.5.0",
diff --git a/web/public/appScreenshot.png b/web/public/appScreenshot.png
new file mode 100644
index 0000000..1a0afbb
Binary files /dev/null and b/web/public/appScreenshot.png differ
diff --git a/web/public/soccer-image.jpeg b/web/public/soccer-image.jpeg
new file mode 100644
index 0000000..c33f43e
Binary files /dev/null and b/web/public/soccer-image.jpeg differ
diff --git a/web/public/soccer-image1.jpeg b/web/public/soccer-image1.jpeg
new file mode 100644
index 0000000..610a5de
Binary files /dev/null and b/web/public/soccer-image1.jpeg differ
diff --git a/web/public/soccer-image2.jpeg b/web/public/soccer-image2.jpeg
new file mode 100644
index 0000000..6190d35
Binary files /dev/null and b/web/public/soccer-image2.jpeg differ
diff --git a/web/public/testimonial-img2.jpg b/web/public/testimonial-img2.jpg
new file mode 100644
index 0000000..d96139e
Binary files /dev/null and b/web/public/testimonial-img2.jpg differ
diff --git a/web/tailwind.config.ts b/web/tailwind.config.ts
index ebc9f38..19b5077 100644
--- a/web/tailwind.config.ts
+++ b/web/tailwind.config.ts
@@ -55,6 +55,28 @@ const config: Config = {
   			lg: 'var(--radius)',
   			md: 'calc(var(--radius) - 2px)',
   			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		keyframes: {
+  			'accordion-down': {
+  				from: {
+  					height: '0'
+  				},
+  				to: {
+  					height: 'var(--radix-accordion-content-height)'
+  				}
+  			},
+  			'accordion-up': {
+  				from: {
+  					height: 'var(--radix-accordion-content-height)'
+  				},
+  				to: {
+  					height: '0'
+  				}
+  			}
+  		},
+  		animation: {
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out'
   		}
   	}
   },