From dcbb27b8d601227bdc8921e8c292167f554bfd69 Mon Sep 17 00:00:00 2001
From: Kewonit <108450560+kewonit@users.noreply.github.com.>
Date: Fri, 4 Jul 2025 18:08:04 +0530
Subject: [PATCH 1/6] refactor: update layout and functionality of account
 form; improve redirect handling in login and signup actions; enhance MHT-CET
 login page links

---
 app/account/account-form.tsx        | 29 +++++------------
 app/login/actions.tsx               | 50 +++++++++++++++++++----------
 app/mht-cet-login-required/page.tsx |  9 ++++--
 app/mht-cet/state-cutoffs/page.tsx  | 21 +-----------
 4 files changed, 48 insertions(+), 61 deletions(-)

diff --git a/app/account/account-form.tsx b/app/account/account-form.tsx
index edac0d3..0c5b787 100644
--- a/app/account/account-form.tsx
+++ b/app/account/account-form.tsx
@@ -80,27 +80,14 @@ export default function AccountForm({ user, message }: { user: User | null; mess
             </div>
           </div>
 
-          <div className="grid grid-cols-3 gap-4 pt-6">
-            <div className="col-span-2">
-              <SubmitButton
-                className="w-full"
-                pendingText="Updating..."
-                disabled={!name.trim() || name.trim().length < 2}
-              >
-                Update Profile
-              </SubmitButton>
-            </div>
-            <div className="col-span-1">
-              <form action={signOut} className="w-full">
-                <Button
-                  className="w-full"
-                  type="submit"
-                  variant="neutral"
-                >
-                  Sign Out
-                </Button>
-              </form>
-            </div>
+          <div className="flex items-start gap-4 pt-6">
+            <SubmitButton
+              className="flex-1"
+              pendingText="Updating..."
+              disabled={!name.trim() || name.trim().length < 2}
+            >
+              Update Profile
+            </SubmitButton>
           </div>
         </form>
       </div>
diff --git a/app/login/actions.tsx b/app/login/actions.tsx
index e689f47..c463bcf 100644
--- a/app/login/actions.tsx
+++ b/app/login/actions.tsx
@@ -14,19 +14,19 @@ export async function login(formData: FormData) {
   // Validate input
   if (!email || !password) {
     const params = new URLSearchParams({ message: 'Please fill in all fields' })
-    if (redirectTo !== '/account') params.set('redirect', redirectTo)
+    if (redirectTo && redirectTo !== '/account') params.set('redirect', redirectTo)
     return redirect(`/login?${params.toString()}`)
   }
 
   if (!email.includes('@')) {
     const params = new URLSearchParams({ message: 'Please enter a valid email address' })
-    if (redirectTo !== '/account') params.set('redirect', redirectTo)
+    if (redirectTo && redirectTo !== '/account') params.set('redirect', redirectTo)
     return redirect(`/login?${params.toString()}`)
   }
 
   if (password.length < 8) {
     const params = new URLSearchParams({ message: 'Password must be at least 8 characters long' })
-    if (redirectTo !== '/account') params.set('redirect', redirectTo)
+    if (redirectTo && redirectTo !== '/account') params.set('redirect', redirectTo)
     return redirect(`/login?${params.toString()}`)
   }
 
@@ -59,7 +59,7 @@ export async function login(formData: FormData) {
   } catch (error) {
     console.error('Login error:', error)
     const params = new URLSearchParams()
-    if (redirectTo !== '/account') params.set('redirect', redirectTo)
+    if (redirectTo && redirectTo !== '/account') params.set('redirect', redirectTo)
 
     if (error instanceof ClientResponseError) {
       if (error.status === 400) {
@@ -85,31 +85,31 @@ export async function signup(formData: FormData) {
   // Validate input
   if (!email || !password || !passwordConfirm || !name) {
     const params = new URLSearchParams({ message: 'Please fill in all fields' })
-    if (redirectTo !== '/account') params.set('redirect', redirectTo)
+    if (redirectTo && redirectTo !== '/account') params.set('redirect', redirectTo)
     return redirect(`/signup?${params.toString()}`)
   }
 
   if (!email.includes('@')) {
     const params = new URLSearchParams({ message: 'Please enter a valid email address' })
-    if (redirectTo !== '/account') params.set('redirect', redirectTo)
+    if (redirectTo && redirectTo !== '/account') params.set('redirect', redirectTo)
     return redirect(`/signup?${params.toString()}`)
   }
 
   if (password.length < 8) {
     const params = new URLSearchParams({ message: 'Password must be at least 8 characters long' })
-    if (redirectTo !== '/account') params.set('redirect', redirectTo)
+    if (redirectTo && redirectTo !== '/account') params.set('redirect', redirectTo)
     return redirect(`/signup?${params.toString()}`)
   }
 
   if (password !== passwordConfirm) {
     const params = new URLSearchParams({ message: 'Passwords do not match' })
-    if (redirectTo !== '/account') params.set('redirect', redirectTo)
+    if (redirectTo && redirectTo !== '/account') params.set('redirect', redirectTo)
     return redirect(`/signup?${params.toString()}`)
   }
 
   if (name.trim().length < 2) {
     const params = new URLSearchParams({ message: 'Name must be at least 2 characters long' })
-    if (redirectTo !== '/account') params.set('redirect', redirectTo)
+    if (redirectTo && redirectTo !== '/account') params.set('redirect', redirectTo)
     return redirect(`/signup?${params.toString()}`)
   }
 
@@ -122,14 +122,13 @@ export async function signup(formData: FormData) {
     passwordConfirm: passwordConfirm,
     name: name.trim(),
   }
-
   try {
     const record = await pb.collection('users').create(data)
     await pb.collection('users').requestVerification(email)
   } catch (error) {
     console.error('Signup error:', error)
     const params = new URLSearchParams()
-    if (redirectTo !== '/account') params.set('redirect', redirectTo)
+    if (redirectTo && redirectTo !== '/account') params.set('redirect', redirectTo)
 
     if (error instanceof ClientResponseError) {
       const errorData = error.response?.data
@@ -149,9 +148,11 @@ export async function signup(formData: FormData) {
     params.set('message', 'Failed to create account. Please try again.')
     return redirect(`/signup?${params.toString()}`)
   }
-
   // Automatically log the user in after successful signup
   try {
+    // Small delay to ensure user record is fully created
+    await new Promise(resolve => setTimeout(resolve, 100))
+
     const authData = await pb.collection('users').authWithPassword(email, password)
 
     const cookieStore = await cookies()
@@ -171,13 +172,28 @@ export async function signup(formData: FormData) {
     })
 
     revalidatePath('/', 'layout')
-    redirect(redirectTo)
+
+    // Try to add success message to destination URL if possible
+    try {
+      const url = new URL(redirectTo, 'https://example.com') // Use dummy base for relative URLs
+      url.searchParams.set('message', 'Account created successfully! Welcome to the platform.')
+      redirect(url.pathname + url.search)
+    } catch {
+      // If URL manipulation fails, just redirect to the destination
+      redirect(redirectTo)
+    }
   } catch (error) {
-    // If auto-login fails, redirect to login page with success message
+    // If auto-login fails, still redirect to original destination but with a success message
     revalidatePath('/', 'layout')
-    const params = new URLSearchParams({ message: 'Account created successfully! Please log in to access the platform.' })
-    if (redirectTo !== '/account') params.set('redirect', redirectTo)
-    redirect(`/login?${params.toString()}`)
+    // Try to add success message to destination URL if possible
+    try {
+      const url = new URL(redirectTo, 'https://example.com') // Use dummy base for relative URLs
+      url.searchParams.set('message', 'Account created successfully! You have been logged in.')
+      redirect(url.pathname + url.search)
+    } catch {
+      // If URL manipulation fails, just redirect to the destination
+      redirect(redirectTo)
+    }
   }
 }
 
diff --git a/app/mht-cet-login-required/page.tsx b/app/mht-cet-login-required/page.tsx
index ce53f2d..4b5aebe 100644
--- a/app/mht-cet-login-required/page.tsx
+++ b/app/mht-cet-login-required/page.tsx
@@ -2,9 +2,12 @@ import Link from "next/link";
 import Image from "next/image";
 import { Button } from "@/components/ui/button";
 
-export default function MHTCETLoginRequired({ searchParams }: {
+export default async function MHTCETLoginRequired({ searchParams }: {
     searchParams: Promise<{ redirect?: string }>
 }) {
+    const params = await searchParams
+    const redirectTo = params?.redirect || '/mht-cet'
+
     return (
         <div className="min-h-screen flex flex-col items-center justify-center px-4 pt-32">
             <div className="max-w-md w-full text-center space-y-8">
@@ -34,7 +37,7 @@ export default function MHTCETLoginRequired({ searchParams }: {
 
                     <div className="space-y-3">
                         <Link
-                            href={`/login?redirect=${encodeURIComponent('/mht-cet')}`}
+                            href={`/login?redirect=${encodeURIComponent(redirectTo)}`}
                             className="block w-full"
                         >
                             <Button className="w-full bg-blue-600 hover:bg-blue-700">
@@ -43,7 +46,7 @@ export default function MHTCETLoginRequired({ searchParams }: {
                         </Link>
 
                         <Link
-                            href="/signup"
+                            href={`/signup?redirect=${encodeURIComponent(redirectTo)}`}
                             className="block w-full"
                         >
                             <Button variant="neutral" className="w-full">
diff --git a/app/mht-cet/state-cutoffs/page.tsx b/app/mht-cet/state-cutoffs/page.tsx
index 4dfe826..87ecb31 100644
--- a/app/mht-cet/state-cutoffs/page.tsx
+++ b/app/mht-cet/state-cutoffs/page.tsx
@@ -1130,25 +1130,6 @@ export default function StateCutoffsPage() {
                         Round 1 cutoffs for engineering colleges
                     </p>
                 </div>
-                <div className="flex flex-col md:flex-row gap-2 md:gap-3">
-                    {/* Stats */}
-                    {totalItems > 0 && (
-                        <div className="bg-white border-2 border-black rounded-base p-3 shadow-base">
-                            <p className="text-xs text-black font-abel">Total Records</p>
-                            <p className="text-lg font-heading text-black">{totalItems.toLocaleString()}</p>
-                        </div>
-                    )}
-                    {/* Export Button */}
-                    <Button
-                        onClick={exportToCSV}
-                        disabled={isExporting || loading || records.length === 0}
-                        variant="neutral"
-                        className="h-fit font-abel"
-                    >
-                        <Download className="mr-2 h-4 w-4" />
-                        {isExporting ? "Exporting..." : "Export CSV"}
-                    </Button>
-                </div>
             </div>
 
             {/* Filters */}
@@ -1169,7 +1150,7 @@ export default function StateCutoffsPage() {
                     <div className="relative">
                         <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                         <Input
-                            placeholder="Search colleges, courses..."
+                            placeholder="Search colleges or universities"
                             value={pendingFilters.search}
                             onChange={(e) => {
                                 const value = e.target.value;

From 21e2164bc1b435acba347c02c518bfad5ea5a8cd Mon Sep 17 00:00:00 2001
From: Kewonit <108450560+kewonit@users.noreply.github.com.>
Date: Fri, 4 Jul 2025 23:02:35 +0530
Subject: [PATCH 2/6] feat: enhance CategoryFlowChart with new seat types and
 improved layout; add connections for Ladies, PWD, and Defence categories

---
 components/CategoryFlowChart.tsx | 716 +++++++++++++++++++++++++++++--
 1 file changed, 681 insertions(+), 35 deletions(-)

diff --git a/components/CategoryFlowChart.tsx b/components/CategoryFlowChart.tsx
index 77364ab..24e9b91 100644
--- a/components/CategoryFlowChart.tsx
+++ b/components/CategoryFlowChart.tsx
@@ -81,7 +81,7 @@ const CategoryFlowChart = () => {
         {
             id: '2',
             type: 'custom',
-            position: { x: 400, y: 0 },
+            position: { x: 400, y: -200 },
             data: {
                 label: 'General',
                 type: 'category',
@@ -89,11 +89,89 @@ const CategoryFlowChart = () => {
             },
         },
 
+        // Main Seat Type - Ladies (centered with its children)
+        {
+            id: '35',
+            type: 'custom',
+            position: { x: 400, y: 2675 }, // Centered around Ladies children (2100-3600)
+            data: {
+                label: 'Ladies',
+                type: 'category',
+                description: 'Ladies seat type',
+            },
+        },
+
+        // Main Seat Type - PWD (centered with its children)
+        {
+            id: '56',
+            type: 'custom',
+            position: { x: 400, y: 4375 }, // Centered around PWD children (3900-4900)
+            data: {
+                label: 'PWD',
+                type: 'category',
+                description: 'Persons with Disabilities seat type',
+            },
+        },
+
+        // Main Seat Type - Defence (centered with its children)
+        {
+            id: '57',
+            type: 'custom',
+            position: { x: 400, y: 5600 }, // Centered around Defence children (5200-6000)
+            data: {
+                label: 'Defence',
+                type: 'category',
+                description: 'Defence seat type',
+            },
+        },
+
+        // Special Categories (spaced out better)
+        {
+            id: '58',
+            type: 'custom',
+            position: { x: 400, y: 400 },
+            data: {
+                label: 'EWS',
+                type: 'final',
+                description: 'Economically Weaker Section',
+            },
+        },
+        {
+            id: '59',
+            type: 'custom',
+            position: { x: 400, y: 550 },
+            data: {
+                label: 'ORPHAN',
+                type: 'final',
+                description: 'Orphan Category',
+            },
+        },
+        {
+            id: '60',
+            type: 'custom',
+            position: { x: 400, y: 700 },
+            data: {
+                label: 'TFWS',
+                type: 'final',
+                description: 'Tuition Fee Waiver Scheme',
+            },
+        },
+        {
+            id: '61',
+            type: 'custom',
+            position: { x: 400, y: 850 },
+            data: {
+                label: 'MI',
+                type: 'final',
+                description: 'Minority Institutions',
+            },
+        },
+
         // Category Level under General (properly aligned with final codes)
         {
             id: '3',
             type: 'custom',
-            position: { x: 800, y: -600 }, // Aligned with OPEN codes
+            position: { x: 800, y: -800 }, // Aligned with OPEN codes
             data: {
                 label: 'OPEN',
                 type: 'subcategory',
@@ -103,7 +181,7 @@ const CategoryFlowChart = () => {
         {
             id: '4',
             type: 'custom',
-            position: { x: 800, y: -250 }, // Aligned with OBC codes
+            position: { x: 800, y: -450 }, // Aligned with OBC codes
             data: {
                 label: 'OBC',
                 type: 'subcategory',
@@ -113,7 +191,7 @@ const CategoryFlowChart = () => {
         {
             id: '5',
             type: 'custom',
-            position: { x: 800, y: 100 }, // Aligned with SC codes
+            position: { x: 800, y: -100 }, // Aligned with SC codes
             data: {
                 label: 'SC',
                 type: 'subcategory',
@@ -123,7 +201,7 @@ const CategoryFlowChart = () => {
         {
             id: '6',
             type: 'custom',
-            position: { x: 800, y: 450 }, // Aligned with ST codes
+            position: { x: 800, y: 250 }, // Aligned with ST codes
             data: {
                 label: 'ST',
                 type: 'subcategory',
@@ -133,7 +211,7 @@ const CategoryFlowChart = () => {
         {
             id: '7',
             type: 'custom',
-            position: { x: 800, y: 800 }, // Aligned with VJ codes
+            position: { x: 800, y: 600 }, // Aligned with VJ codes
             data: {
                 label: 'VJ',
                 type: 'subcategory',
@@ -143,7 +221,7 @@ const CategoryFlowChart = () => {
         {
             id: '8',
             type: 'custom',
-            position: { x: 800, y: 1150 }, // Aligned with NT1 codes
+            position: { x: 800, y: 950 }, // Aligned with NT1 codes
             data: {
                 label: 'NT1',
                 type: 'subcategory',
@@ -153,7 +231,7 @@ const CategoryFlowChart = () => {
         {
             id: '9',
             type: 'custom',
-            position: { x: 800, y: 1500 }, // Aligned with NT2 codes
+            position: { x: 800, y: 1300 }, // Aligned with NT2 codes
             data: {
                 label: 'NT2',
                 type: 'subcategory',
@@ -163,7 +241,7 @@ const CategoryFlowChart = () => {
         {
             id: '10',
             type: 'custom',
-            position: { x: 800, y: 1850 }, // Aligned with NT3 codes
+            position: { x: 800, y: 1650 }, // Aligned with NT3 codes
             data: {
                 label: 'NT3',
                 type: 'subcategory',
@@ -171,11 +249,167 @@ const CategoryFlowChart = () => {
             },
         },
 
+        // Category Level under Ladies (properly aligned with final codes)
+        {
+            id: '36',
+            type: 'custom',
+            position: { x: 800, y: 2100 }, // Aligned with Ladies OPEN codes
+            data: {
+                label: 'OPEN',
+                type: 'subcategory',
+                description: 'Open category (Ladies)',
+            },
+        },
+        {
+            id: '37',
+            type: 'custom',
+            position: { x: 800, y: 2450 }, // Aligned with Ladies OBC codes
+            data: {
+                label: 'OBC',
+                type: 'subcategory',
+                description: 'Other Backward Classes (Ladies)',
+            },
+        },
+        {
+            id: '38',
+            type: 'custom',
+            position: { x: 800, y: 2800 }, // Aligned with Ladies SC codes
+            data: {
+                label: 'SC',
+                type: 'subcategory',
+                description: 'Scheduled Caste (Ladies)',
+            },
+        },
+        {
+            id: '39',
+            type: 'custom',
+            position: { x: 800, y: 3150 }, // Aligned with Ladies ST codes
+            data: {
+                label: 'ST',
+                type: 'subcategory',
+                description: 'Scheduled Tribe (Ladies)',
+            },
+        },
+        {
+            id: '40',
+            type: 'custom',
+            position: { x: 800, y: 3500 }, // Aligned with Ladies VJ codes
+            data: {
+                label: 'VJ',
+                type: 'subcategory',
+                description: 'Vimukta Jati (Ladies)',
+            },
+        },
+
+        // Category Level under PWD (properly aligned with final codes)
+        {
+            id: '62',
+            type: 'custom',
+            position: { x: 800, y: 3900 }, // Aligned with PWD OPEN codes
+            data: {
+                label: 'OPEN',
+                type: 'subcategory',
+                description: 'Open category (PWD)',
+            },
+        },
+        {
+            id: '63',
+            type: 'custom',
+            position: { x: 800, y: 4150 }, // Aligned with PWD OBC codes
+            data: {
+                label: 'OBC',
+                type: 'subcategory',
+                description: 'Other Backward Classes (PWD)',
+            },
+        },
+        {
+            id: '64',
+            type: 'custom',
+            position: { x: 800, y: 4400 }, // Aligned with PWD SC codes
+            data: {
+                label: 'SC',
+                type: 'subcategory',
+                description: 'Scheduled Caste (PWD)',
+            },
+        },
+        {
+            id: '65',
+            type: 'custom',
+            position: { x: 800, y: 4650 }, // Aligned with PWD ST codes
+            data: {
+                label: 'ST',
+                type: 'subcategory',
+                description: 'Scheduled Tribe (PWD)',
+            },
+        },
+        {
+            id: '66',
+            type: 'custom',
+            position: { x: 800, y: 4900 }, // Aligned with PWD VJ codes
+            data: {
+                label: 'VJ',
+                type: 'subcategory',
+                description: 'Vimukta Jati (PWD)',
+            },
+        },
+
+        // Category Level under Defence (properly aligned with final codes)
+        {
+            id: '67',
+            type: 'custom',
+            position: { x: 800, y: 5200 }, // Aligned with Defence OPEN codes
+            data: {
+                label: 'OPEN',
+                type: 'subcategory',
+                description: 'Open category (Defence)',
+            },
+        },
+        {
+            id: '68',
+            type: 'custom',
+            position: { x: 800, y: 5400 }, // Aligned with Defence OBC codes
+            data: {
+                label: 'OBC',
+                type: 'subcategory',
+                description: 'Other Backward Classes (Defence)',
+            },
+        },
+        {
+            id: '69',
+            type: 'custom',
+            position: { x: 800, y: 5600 }, // Aligned with Defence SC codes
+            data: {
+                label: 'SC',
+                type: 'subcategory',
+                description: 'Scheduled Caste (Defence)',
+            },
+        },
+        {
+            id: '70',
+            type: 'custom',
+            position: { x: 800, y: 5800 }, // Aligned with Defence ST codes
+            data: {
+                label: 'ST',
+                type: 'subcategory',
+                description: 'Scheduled Tribe (Defence)',
+            },
+        },
+        {
+            id: '71',
+            type: 'custom',
+            position: { x: 800, y: 6000 }, // Aligned with Defence VJ codes
+            data: {
+                label: 'VJ',
+                type: 'subcategory',
+                description: 'Vimukta Jati (Defence)',
+            },
+        },
+
         // Final Category Codes - OPEN (no overlap, proper spacing)
         {
             id: '11',
             type: 'custom',
-            position: { x: 1200, y: -700 },
+            position: { x: 1200, y: -900 },
             data: {
                 label: 'GOPENS',
                 type: 'final',
@@ -185,7 +419,7 @@ const CategoryFlowChart = () => {
         {
             id: '12',
             type: 'custom',
-            position: { x: 1200, y: -600 },
+            position: { x: 1200, y: -800 },
             data: {
                 label: 'GOPENH',
                 type: 'final',
@@ -195,7 +429,7 @@ const CategoryFlowChart = () => {
         {
             id: '13',
             type: 'custom',
-            position: { x: 1200, y: -500 },
+            position: { x: 1200, y: -700 },
             data: {
                 label: 'GOPENO',
                 type: 'final',
@@ -207,7 +441,7 @@ const CategoryFlowChart = () => {
         {
             id: '14',
             type: 'custom',
-            position: { x: 1200, y: -350 },
+            position: { x: 1200, y: -550 },
             data: {
                 label: 'GOBCS',
                 type: 'final',
@@ -217,7 +451,7 @@ const CategoryFlowChart = () => {
         {
             id: '15',
             type: 'custom',
-            position: { x: 1200, y: -250 },
+            position: { x: 1200, y: -450 },
             data: {
                 label: 'GOBCH',
                 type: 'final',
@@ -227,7 +461,7 @@ const CategoryFlowChart = () => {
         {
             id: '16',
             type: 'custom',
-            position: { x: 1200, y: -150 },
+            position: { x: 1200, y: -350 },
             data: {
                 label: 'GOBCO',
                 type: 'final',
@@ -239,7 +473,7 @@ const CategoryFlowChart = () => {
         {
             id: '17',
             type: 'custom',
-            position: { x: 1200, y: 0 },
+            position: { x: 1200, y: -200 },
             data: {
                 label: 'GSCS',
                 type: 'final',
@@ -249,7 +483,7 @@ const CategoryFlowChart = () => {
         {
             id: '18',
             type: 'custom',
-            position: { x: 1200, y: 100 },
+            position: { x: 1200, y: -100 },
             data: {
                 label: 'GSCH',
                 type: 'final',
@@ -259,7 +493,7 @@ const CategoryFlowChart = () => {
         {
             id: '19',
             type: 'custom',
-            position: { x: 1200, y: 200 },
+            position: { x: 1200, y: 0 },
             data: {
                 label: 'GSCO',
                 type: 'final',
@@ -271,7 +505,7 @@ const CategoryFlowChart = () => {
         {
             id: '20',
             type: 'custom',
-            position: { x: 1200, y: 350 },
+            position: { x: 1200, y: 150 },
             data: {
                 label: 'GSTS',
                 type: 'final',
@@ -281,7 +515,7 @@ const CategoryFlowChart = () => {
         {
             id: '21',
             type: 'custom',
-            position: { x: 1200, y: 450 },
+            position: { x: 1200, y: 250 },
             data: {
                 label: 'GSTH',
                 type: 'final',
@@ -291,7 +525,7 @@ const CategoryFlowChart = () => {
         {
             id: '22',
             type: 'custom',
-            position: { x: 1200, y: 550 },
+            position: { x: 1200, y: 350 },
             data: {
                 label: 'GSTO',
                 type: 'final',
@@ -303,7 +537,7 @@ const CategoryFlowChart = () => {
         {
             id: '23',
             type: 'custom',
-            position: { x: 1200, y: 700 },
+            position: { x: 1200, y: 500 },
             data: {
                 label: 'GVJS',
                 type: 'final',
@@ -313,7 +547,7 @@ const CategoryFlowChart = () => {
         {
             id: '24',
             type: 'custom',
-            position: { x: 1200, y: 800 },
+            position: { x: 1200, y: 600 },
             data: {
                 label: 'GVJH',
                 type: 'final',
@@ -323,7 +557,7 @@ const CategoryFlowChart = () => {
         {
             id: '25',
             type: 'custom',
-            position: { x: 1200, y: 900 },
+            position: { x: 1200, y: 700 },
             data: {
                 label: 'GVJO',
                 type: 'final',
@@ -335,7 +569,7 @@ const CategoryFlowChart = () => {
         {
             id: '26',
             type: 'custom',
-            position: { x: 1200, y: 1050 },
+            position: { x: 1200, y: 850 },
             data: {
                 label: 'GNT1S',
                 type: 'final',
@@ -345,7 +579,7 @@ const CategoryFlowChart = () => {
         {
             id: '27',
             type: 'custom',
-            position: { x: 1200, y: 1150 },
+            position: { x: 1200, y: 950 },
             data: {
                 label: 'GNT1H',
                 type: 'final',
@@ -355,7 +589,7 @@ const CategoryFlowChart = () => {
         {
             id: '28',
             type: 'custom',
-            position: { x: 1200, y: 1250 },
+            position: { x: 1200, y: 1050 },
             data: {
                 label: 'GNT1O',
                 type: 'final',
@@ -367,7 +601,7 @@ const CategoryFlowChart = () => {
         {
             id: '29',
             type: 'custom',
-            position: { x: 1200, y: 1400 },
+            position: { x: 1200, y: 1200 },
             data: {
                 label: 'GNT2S',
                 type: 'final',
@@ -377,7 +611,7 @@ const CategoryFlowChart = () => {
         {
             id: '30',
             type: 'custom',
-            position: { x: 1200, y: 1500 },
+            position: { x: 1200, y: 1300 },
             data: {
                 label: 'GNT2H',
                 type: 'final',
@@ -387,7 +621,7 @@ const CategoryFlowChart = () => {
         {
             id: '31',
             type: 'custom',
-            position: { x: 1200, y: 1600 },
+            position: { x: 1200, y: 1400 },
             data: {
                 label: 'GNT2O',
                 type: 'final',
@@ -399,7 +633,7 @@ const CategoryFlowChart = () => {
         {
             id: '32',
             type: 'custom',
-            position: { x: 1200, y: 1750 },
+            position: { x: 1200, y: 1550 },
             data: {
                 label: 'GNT3S',
                 type: 'final',
@@ -409,7 +643,7 @@ const CategoryFlowChart = () => {
         {
             id: '33',
             type: 'custom',
-            position: { x: 1200, y: 1850 },
+            position: { x: 1200, y: 1650 },
             data: {
                 label: 'GNT3H',
                 type: 'final',
@@ -419,18 +653,345 @@ const CategoryFlowChart = () => {
         {
             id: '34',
             type: 'custom',
-            position: { x: 1200, y: 1950 },
+            position: { x: 1200, y: 1750 },
             data: {
                 label: 'GNT3O',
                 type: 'final',
                 description: 'General NT3 Other University',
             },
         },
+
+        // Final Category Codes - Ladies OPEN (no overlap, proper spacing)
+        {
+            id: '41',
+            type: 'custom',
+            position: { x: 1200, y: 2000 },
+            data: {
+                label: 'LOPENS',
+                type: 'final',
+                description: 'Ladies Open State',
+            },
+        },
+        {
+            id: '42',
+            type: 'custom',
+            position: { x: 1200, y: 2100 },
+            data: {
+                label: 'LOPENH',
+                type: 'final',
+                description: 'Ladies Open Home University',
+            },
+        },
+        {
+            id: '43',
+            type: 'custom',
+            position: { x: 1200, y: 2200 },
+            data: {
+                label: 'LOPENO',
+                type: 'final',
+                description: 'Ladies Open Other University',
+            },
+        },
+
+        // Final Category Codes - Ladies OBC (no overlap, proper spacing)
+        {
+            id: '44',
+            type: 'custom',
+            position: { x: 1200, y: 2350 },
+            data: {
+                label: 'LOBCS',
+                type: 'final',
+                description: 'Ladies OBC State',
+            },
+        },
+        {
+            id: '45',
+            type: 'custom',
+            position: { x: 1200, y: 2450 },
+            data: {
+                label: 'LOBCH',
+                type: 'final',
+                description: 'Ladies OBC Home University',
+            },
+        },
+        {
+            id: '46',
+            type: 'custom',
+            position: { x: 1200, y: 2550 },
+            data: {
+                label: 'LOBCO',
+                type: 'final',
+                description: 'Ladies OBC Other University',
+            },
+        },
+
+        // Final Category Codes - Ladies SC (no overlap, proper spacing)
+        {
+            id: '47',
+            type: 'custom',
+            position: { x: 1200, y: 2700 },
+            data: {
+                label: 'LSCS',
+                type: 'final',
+                description: 'Ladies SC State',
+            },
+        },
+        {
+            id: '48',
+            type: 'custom',
+            position: { x: 1200, y: 2800 },
+            data: {
+                label: 'LSCH',
+                type: 'final',
+                description: 'Ladies SC Home University',
+            },
+        },
+        {
+            id: '49',
+            type: 'custom',
+            position: { x: 1200, y: 2900 },
+            data: {
+                label: 'LSCO',
+                type: 'final',
+                description: 'Ladies SC Other University',
+            },
+        },
+
+        // Final Category Codes - Ladies ST (no overlap, proper spacing)
+        {
+            id: '50',
+            type: 'custom',
+            position: { x: 1200, y: 3050 },
+            data: {
+                label: 'LSTS',
+                type: 'final',
+                description: 'Ladies ST State',
+            },
+        },
+        {
+            id: '51',
+            type: 'custom',
+            position: { x: 1200, y: 3150 },
+            data: {
+                label: 'LSTH',
+                type: 'final',
+                description: 'Ladies ST Home University',
+            },
+        },
+        {
+            id: '52',
+            type: 'custom',
+            position: { x: 1200, y: 3250 },
+            data: {
+                label: 'LSTO',
+                type: 'final',
+                description: 'Ladies ST Other University',
+            },
+        },
+
+        // Final Category Codes - Ladies VJ (no overlap, proper spacing)
+        {
+            id: '53',
+            type: 'custom',
+            position: { x: 1200, y: 3400 },
+            data: {
+                label: 'LVJS',
+                type: 'final',
+                description: 'Ladies VJ State',
+            },
+        },
+        {
+            id: '54',
+            type: 'custom',
+            position: { x: 1200, y: 3500 },
+            data: {
+                label: 'LVJH',
+                type: 'final',
+                description: 'Ladies VJ Home University',
+            },
+        },
+        {
+            id: '55',
+            type: 'custom',
+            position: { x: 1200, y: 3600 },
+            data: {
+                label: 'LVJO',
+                type: 'final',
+                description: 'Ladies VJ Other University',
+            },
+        },
+
+        // Final Category Codes - PWD OPEN
+        {
+            id: '72',
+            type: 'custom',
+            position: { x: 1200, y: 3850 },
+            data: {
+                label: 'PWDOPENS',
+                type: 'final',
+                description: 'PWD Open State',
+            },
+        },
+        {
+            id: '73',
+            type: 'custom',
+            position: { x: 1200, y: 3950 },
+            data: {
+                label: 'PWDOPENH',
+                type: 'final',
+                description: 'PWD Open Home University',
+            },
+        },
+
+        // Final Category Codes - PWD OBC
+        {
+            id: '74',
+            type: 'custom',
+            position: { x: 1200, y: 4100 },
+            data: {
+                label: 'PWDOBCS',
+                type: 'final',
+                description: 'PWD OBC State',
+            },
+        },
+        {
+            id: '75',
+            type: 'custom',
+            position: { x: 1200, y: 4200 },
+            data: {
+                label: 'PWDOBCH',
+                type: 'final',
+                description: 'PWD OBC Home University',
+            },
+        },
+
+        // Final Category Codes - PWD SC
+        {
+            id: '76',
+            type: 'custom',
+            position: { x: 1200, y: 4350 },
+            data: {
+                label: 'PWDSCS',
+                type: 'final',
+                description: 'PWD SC State',
+            },
+        },
+        {
+            id: '77',
+            type: 'custom',
+            position: { x: 1200, y: 4450 },
+            data: {
+                label: 'PWDSCH',
+                type: 'final',
+                description: 'PWD SC Home University',
+            },
+        },
+
+        // Final Category Codes - PWD ST
+        {
+            id: '78',
+            type: 'custom',
+            position: { x: 1200, y: 4600 },
+            data: {
+                label: 'PWDRSTS',
+                type: 'final',
+                description: 'PWD ST State',
+            },
+        },
+        {
+            id: '79',
+            type: 'custom',
+            position: { x: 1200, y: 4700 },
+            data: {
+                label: 'PWDRSTH',
+                type: 'final',
+                description: 'PWD ST Home University',
+            },
+        },
+
+        // Final Category Codes - PWD VJ
+        {
+            id: '80',
+            type: 'custom',
+            position: { x: 1200, y: 4850 },
+            data: {
+                label: 'PWDRVJS',
+                type: 'final',
+                description: 'PWD VJ State',
+            },
+        },
+
+        // Final Category Codes - Defence OPEN
+        {
+            id: '81',
+            type: 'custom',
+            position: { x: 1200, y: 5150 },
+            data: {
+                label: 'DEFOPENS',
+                type: 'final',
+                description: 'Defence Open State',
+            },
+        },
+
+        // Final Category Codes - Defence OBC
+        {
+            id: '82',
+            type: 'custom',
+            position: { x: 1200, y: 5350 },
+            data: {
+                label: 'DEFOBCS',
+                type: 'final',
+                description: 'Defence OBC State',
+            },
+        },
+
+        // Final Category Codes - Defence SC
+        {
+            id: '83',
+            type: 'custom',
+            position: { x: 1200, y: 5550 },
+            data: {
+                label: 'DEFSCS',
+                type: 'final',
+                description: 'Defence SC State',
+            },
+        },
+
+        // Final Category Codes - Defence ST
+        {
+            id: '84',
+            type: 'custom',
+            position: { x: 1200, y: 5750 },
+            data: {
+                label: 'DEFSTS',
+                type: 'final',
+                description: 'Defence ST State',
+            },
+        },
+
+        // Final Category Codes - Defence VJ
+        {
+            id: '85',
+            type: 'custom',
+            position: { x: 1200, y: 5950 },
+            data: {
+                label: 'DEFRVJS',
+                type: 'final',
+                description: 'Defence VJ State',
+            },
+        },
     ], []);
 
     const initialEdges: Edge[] = useMemo(() => [
-        // Root to General
+        // Root to all main categories
         { id: 'e1-2', source: '1', target: '2', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+        { id: 'e1-35', source: '1', target: '35', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+        { id: 'e1-56', source: '1', target: '56', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+        { id: 'e1-57', source: '1', target: '57', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+        { id: 'e1-58', source: '1', target: '58', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+        { id: 'e1-59', source: '1', target: '59', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+        { id: 'e1-60', source: '1', target: '60', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+        { id: 'e1-61', source: '1', target: '61', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
 
         // General to all categories
         { id: 'e2-3', source: '2', target: '3', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
@@ -442,6 +1003,88 @@ const CategoryFlowChart = () => {
         { id: 'e2-9', source: '2', target: '9', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
         { id: 'e2-10', source: '2', target: '10', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
 
+        // Ladies to all categories
+        { id: 'e35-36', source: '35', target: '36', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+        { id: 'e35-37', source: '35', target: '37', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+        { id: 'e35-38', source: '35', target: '38', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+        { id: 'e35-39', source: '35', target: '39', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+        { id: 'e35-40', source: '35', target: '40', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+
+        // PWD to all categories
+        { id: 'e56-62', source: '56', target: '62', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+        { id: 'e56-63', source: '56', target: '63', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+        { id: 'e56-64', source: '56', target: '64', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+        { id: 'e56-65', source: '56', target: '65', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+        { id: 'e56-66', source: '56', target: '66', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+
+        // Defence to all categories
+        { id: 'e57-67', source: '57', target: '67', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+        { id: 'e57-68', source: '57', target: '68', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+        { id: 'e57-69', source: '57', target: '69', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+        { id: 'e57-70', source: '57', target: '70', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+        { id: 'e57-71', source: '57', target: '71', markerEnd: { type: MarkerType.Arrow }, style: { strokeWidth: 2 } },
+
+        // ...existing code...
+
+        // Ladies OPEN to final codes
+        { id: 'e36-41', source: '36', target: '41', markerEnd: { type: MarkerType.Arrow } },
+        { id: 'e36-42', source: '36', target: '42', markerEnd: { type: MarkerType.Arrow } },
+        { id: 'e36-43', source: '36', target: '43', markerEnd: { type: MarkerType.Arrow } },
+
+        // Ladies OBC to final codes
+        { id: 'e37-44', source: '37', target: '44', markerEnd: { type: MarkerType.Arrow } },
+        { id: 'e37-45', source: '37', target: '45', markerEnd: { type: MarkerType.Arrow } },
+        { id: 'e37-46', source: '37', target: '46', markerEnd: { type: MarkerType.Arrow } },
+
+        // Ladies SC to final codes
+        { id: 'e38-47', source: '38', target: '47', markerEnd: { type: MarkerType.Arrow } },
+        { id: 'e38-48', source: '38', target: '48', markerEnd: { type: MarkerType.Arrow } },
+        { id: 'e38-49', source: '38', target: '49', markerEnd: { type: MarkerType.Arrow } },
+
+        // Ladies ST to final codes
+        { id: 'e39-50', source: '39', target: '50', markerEnd: { type: MarkerType.Arrow } },
+        { id: 'e39-51', source: '39', target: '51', markerEnd: { type: MarkerType.Arrow } },
+        { id: 'e39-52', source: '39', target: '52', markerEnd: { type: MarkerType.Arrow } },
+
+        // Ladies VJ to final codes
+        { id: 'e40-53', source: '40', target: '53', markerEnd: { type: MarkerType.Arrow } },
+        { id: 'e40-54', source: '40', target: '54', markerEnd: { type: MarkerType.Arrow } },
+        { id: 'e40-55', source: '40', target: '55', markerEnd: { type: MarkerType.Arrow } },
+
+        // PWD OPEN to final codes
+        { id: 'e62-72', source: '62', target: '72', markerEnd: { type: MarkerType.Arrow } },
+        { id: 'e62-73', source: '62', target: '73', markerEnd: { type: MarkerType.Arrow } },
+
+        // PWD OBC to final codes
+        { id: 'e63-74', source: '63', target: '74', markerEnd: { type: MarkerType.Arrow } },
+        { id: 'e63-75', source: '63', target: '75', markerEnd: { type: MarkerType.Arrow } },
+
+        // PWD SC to final codes
+        { id: 'e64-76', source: '64', target: '76', markerEnd: { type: MarkerType.Arrow } },
+        { id: 'e64-77', source: '64', target: '77', markerEnd: { type: MarkerType.Arrow } },
+
+        // PWD ST to final codes
+        { id: 'e65-78', source: '65', target: '78', markerEnd: { type: MarkerType.Arrow } },
+        { id: 'e65-79', source: '65', target: '79', markerEnd: { type: MarkerType.Arrow } },
+
+        // PWD VJ to final codes
+        { id: 'e66-80', source: '66', target: '80', markerEnd: { type: MarkerType.Arrow } },
+
+        // Defence OPEN to final codes
+        { id: 'e67-81', source: '67', target: '81', markerEnd: { type: MarkerType.Arrow } },
+
+        // Defence OBC to final codes
+        { id: 'e68-82', source: '68', target: '82', markerEnd: { type: MarkerType.Arrow } },
+
+        // Defence SC to final codes
+        { id: 'e69-83', source: '69', target: '83', markerEnd: { type: MarkerType.Arrow } },
+
+        // Defence ST to final codes
+        { id: 'e70-84', source: '70', target: '84', markerEnd: { type: MarkerType.Arrow } },
+
+        // Defence VJ to final codes
+        { id: 'e71-85', source: '71', target: '85', markerEnd: { type: MarkerType.Arrow } },
+
         // OPEN to final codes
         { id: 'e3-11', source: '3', target: '11', markerEnd: { type: MarkerType.Arrow } },
         { id: 'e3-12', source: '3', target: '12', markerEnd: { type: MarkerType.Arrow } },
@@ -504,7 +1147,7 @@ const CategoryFlowChart = () => {
                     MHT-CET Category Code Structure
                 </CardTitle>
                 <div className="text-sm text-muted-foreground font-abel">
-                    Interactive flow chart showing the hierarchy: Seat Types → General → Categories → Final Codes
+                    Interactive flow chart showing the hierarchy: Seat Types → Categories (General/Ladies/PWD/Defence) → Sub-Categories → Final Codes
                 </div>
             </CardHeader>
             <CardContent className="p-0 h-[calc(100%-120px)]">
@@ -524,6 +1167,9 @@ const CategoryFlowChart = () => {
                     minZoom={0.5}
                     maxZoom={2}
                     attributionPosition="bottom-left"
+                    nodesDraggable={false}
+                    nodesConnectable={false}
+                    elementsSelectable={true}
                 >
                     <Background color="#f1f5f9" gap={20} />
                     <Controls position="top-right" />

From 1205a886bc5056f822d8862222b63b8b32385e30 Mon Sep 17 00:00:00 2001
From: Kewonit <108450560+kewonit@users.noreply.github.com.>
Date: Sat, 5 Jul 2025 00:23:27 +0530
Subject: [PATCH 3/6] feat: add DonationCard component to encourage
 contributions for project support

---
 app/mht-cet/state-cutoffs/page.tsx | 355 +++++++++++++++++++----------
 components/DonationCard.tsx        |  37 +++
 2 files changed, 274 insertions(+), 118 deletions(-)
 create mode 100644 components/DonationCard.tsx

diff --git a/app/mht-cet/state-cutoffs/page.tsx b/app/mht-cet/state-cutoffs/page.tsx
index 87ecb31..280bbe8 100644
--- a/app/mht-cet/state-cutoffs/page.tsx
+++ b/app/mht-cet/state-cutoffs/page.tsx
@@ -57,6 +57,7 @@ import {
 } from "@/components/ui/accordion";
 import { BookUser, Building, GraduationCap, Info, Lightbulb, MapPin, ShieldCheck, Users, Video } from 'lucide-react';
 import CategoryFlowChart from '@/components/CategoryFlowChart';
+import { DonationCard } from '@/components/DonationCard';
 
 // Types
 interface CutoffRecord {
@@ -1127,7 +1128,7 @@ export default function StateCutoffsPage() {
                         MHT-CET State Cutoffs 2024
                     </h1>
                     <p className="text-muted-foreground text-sm md:text-base lg:text-lg font-medium mt-1 md:mt-2 font-abel">
-                        Round 1 cutoffs for engineering colleges
+                        Use these to predict your chances of admission based on your percentile. (Data : 2024 Round 1)
                     </p>
                 </div>
             </div>
@@ -1168,7 +1169,6 @@ export default function StateCutoffsPage() {
                         <div className="space-y-2">
                             <Label className="text-sm md:text-base font-medium flex items-center gap-2 font-abel">
                                 Target Percentile (from 0% to target)
-                                <span className="text-xs text-muted-foreground font-normal">(e.g., 88.1234567)</span>
                             </Label>
                             <div className="relative">
                                 <Input
@@ -1868,151 +1868,266 @@ export default function StateCutoffsPage() {
 
 
             {/* Informational Cards - Improved Design & UX */}
-            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 mt-8">
-                {/* How to Use This Tool */}
+            {/* How to Use This Tool - always on top, full width */}
+            <div className="mt-8">
                 <Card className="relative bg-gradient-to-br from-blue-50 to-white border-blue-200 shadow-md transition-all duration-300 overflow-hidden">
                     <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-400 to-blue-200 opacity-70 transition-all duration-300" />
                     <CardHeader className="pb-3">
-                        <CardTitle className="flex items-center gap-3 text-lg font-abel text-blue-900">
-                            <div className="h-10 w-10 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0 shadow group-hover:bg-blue-200 transition-all duration-200">
-                                <Lightbulb className="h-5 w-5 text-blue-600 group-hover:text-blue-800 transition-all duration-200" />
+                        <CardTitle className="flex items-center gap-3 text-3xl md:text-4xl font-abel text-blue-900">
+                            <div className="h-12 w-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0 shadow group-hover:bg-blue-200 transition-all duration-200">
+                                <Lightbulb className="h-6 w-6 text-blue-600 group-hover:text-blue-800 transition-all duration-200" />
                             </div>
                             How to Use This Tool
                         </CardTitle>
                     </CardHeader>
-                    <CardContent className="space-y-4 pt-2">
-                        <ol className="space-y-3 text-sm font-abel">
-                            <li className="flex items-start gap-3">
-                                <span className="flex-shrink-0 mt-1 h-6 w-6 flex items-center justify-center rounded-full bg-blue-200 text-blue-700 font-bold text-base shadow">1</span>
-                                <span>
-                                    <span className="font-semibold text-gray-800">Enter Your Percentile</span>
-                                    <span className="block text-gray-600 text-xs">Type your MHT-CET percentile to see colleges in a -10% range.</span>
-                                </span>
-                            </li>
-                            <li className="flex items-start gap-3">
-                                <span className="flex-shrink-0 mt-1 h-6 w-6 flex items-center justify-center rounded-full bg-blue-200 text-blue-700 font-bold text-base shadow">2</span>
-                                <span>
-                                    <span className="font-semibold text-gray-800">Filter Your Preferences</span>
-                                    <span className="block text-gray-600 text-xs">Select categories, courses, and seat types to narrow down results.</span>
-                                </span>
-                            </li>
-                            <li className="flex items-start gap-3">
-                                <span className="flex-shrink-0 mt-1 h-6 w-6 flex items-center justify-center rounded-full bg-blue-200 text-blue-700 font-bold text-base shadow">3</span>
-                                <span>
-                                    <span className="font-semibold text-gray-800">Analyze & Strategize</span>
-                                    <span className="block text-gray-600 text-xs">Results are sorted by highest cutoff. Use this to plan your CAP round choices.</span>
-                                </span>
-                            </li>
-                        </ol>
-                        <div className="mt-2 p-3 bg-amber-50 border-l-4 border-amber-400 rounded-r-lg flex items-center gap-2">
-                            <span className="inline-flex items-center justify-center h-5 w-5 rounded-full bg-amber-200 text-amber-800 font-bold mr-2">
-                                <Lightbulb className="h-3 w-3" />
+                    <CardContent className="space-y-6 pt-4">
+                        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                            {/* Step 1 */}
+                            <section className="flex flex-col items-center text-center p-6 bg-blue-50 rounded-xl border border-blue-100 shadow-sm" aria-labelledby="step1-title">
+                                <div className="flex items-center justify-center h-12 w-12 rounded-full bg-blue-200 mb-4">
+                                    <span className="text-2xl md:text-3xl font-bold text-blue-700">1</span>
+                                </div>
+                                <h3 id="step1-title" className="text-xl md:text-2xl font-bold text-blue-900 mb-2">Enter Your MHT-CET Percentile</h3>
+                                <p className="text-base md:text-lg text-gray-700 leading-relaxed">
+                                    Type your percentile score (e.g., <span className="font-semibold">95.5</span>) in the box above.<br />
+                                    <span className="text-sm md:text-base text-blue-800 block mt-2">The tool will show all colleges where the cutoff is less than or equal to your percentile.<br />(Range: <b>0%</b> up to your target percentile)</span>
+                                </p>
+                            </section>
+                            {/* Step 2 */}
+                            <section className="flex flex-col items-center text-center p-6 bg-blue-50 rounded-xl border border-blue-100 shadow-sm" aria-labelledby="step2-title">
+                                <div className="flex items-center justify-center h-12 w-12 rounded-full bg-blue-200 mb-4">
+                                    <span className="text-2xl md:text-3xl font-bold text-blue-700">2</span>
+                                </div>
+                                <h3 id="step2-title" className="text-xl md:text-2xl font-bold text-blue-900 mb-2">Filter Your Preferences</h3>
+                                <p className="text-base md:text-lg text-gray-700 leading-relaxed">
+                                    Use the filters to select <span className="font-semibold">categories</span>, <span className="font-semibold">courses</span>, <span className="font-semibold">seat types</span>, and <span className="font-semibold">university regions</span>.<br />
+                                    <span className="text-sm md:text-base text-blue-800 block mt-2">This helps you narrow down the results to match your eligibility and interests.</span>
+                                </p>
+                            </section>
+                            {/* Step 3 */}
+                            <section className="flex flex-col items-center text-center p-6 bg-blue-50 rounded-xl border border-blue-100 shadow-sm" aria-labelledby="step3-title">
+                                <div className="flex items-center justify-center h-12 w-12 rounded-full bg-blue-200 mb-4">
+                                    <span className="text-2xl md:text-3xl font-bold text-blue-700">3</span>
+                                </div>
+                                <h3 id="step3-title" className="text-xl md:text-2xl font-bold text-blue-900 mb-2">Analyze &amp; Plan</h3>
+                                <p className="text-base md:text-lg text-gray-700 leading-relaxed">
+                                    Results are sorted by <span className="font-semibold">highest cutoff</span> first.<br />
+                                    <span className="text-sm md:text-base text-blue-800 block mt-2">Use this to plan your <span className="font-semibold">CAP round choices</span> and maximize your admission chances.</span>
+                                </p>
+                            </section>
+                        </div>
+                        <div className="mt-4 p-4 bg-amber-50 border-l-4 border-amber-400 rounded-r-lg flex items-center gap-3">
+                            <span className="inline-flex items-center justify-center h-8 w-8 rounded-full bg-amber-200 text-amber-800 font-bold mr-2">
+                                <Lightbulb className="h-5 w-5" />
                             </span>
-                            <span className="text-xs font-abel text-amber-900">
-                                <span className="font-bold">Pro Tip:</span> Enter your percentile to see all colleges where you have a chance of admission (from 0% to your target percentile). Results show the distance from your target.
+                            <span className="text-base md:text-lg font-abel text-amber-900">
+                                <span className="font-bold">Tip:</span> Enter your percentile to see all colleges where you have a chance of admission (from 0% up to your target percentile).<br />
+                                <span className="text-amber-800">This tool uses official DTE Maharashtra cutoff data for accuracy.<br />
+                                    <span className='block mt-1 text-xs md:text-sm text-amber-700'>Always double-check with the latest official DTE Maharashtra sources and college websites for the most current and authoritative information. We do not guarantee admission or take responsibility for any decisions made using this tool.</span></span>
                             </span>
                         </div>
                     </CardContent>
                 </Card>
+            </div>
 
-                {/* Seat Allocation Types */}
-                <Card className="relative bg-gradient-to-br from-purple-50 to-white border-purple-200 shadow-md transition-all duration-300 overflow-hidden">
-                    <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-400 to-purple-200 opacity-70 transition-all duration-300" />
-                    <CardHeader className="pb-3">
-                        <CardTitle className="flex items-center gap-3 text-lg font-abel text-purple-900">
-                            <div className="h-10 w-10 bg-purple-100 rounded-xl flex items-center justify-center flex-shrink-0 shadow group-hover:bg-purple-200 transition-all duration-200">
-                                <MapPin className="h-5 w-5 text-purple-600 group-hover:text-purple-800 transition-all duration-200" />
+            {/* Seat Allocation Types and Category & Code Legends side by side */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
+                {/* Seat Allocation Types - left */}
+                <Card className="relative bg-gradient-to-br from-purple-50 to-white border-purple-200 shadow-lg transition-all duration-300 overflow-hidden">
+                    <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-400 to-purple-200 opacity-70" />
+                    <CardHeader className="pb-2">
+                        <CardTitle className="flex items-center gap-3 text-3xl md:text-4xl font-abel text-purple-900">
+                            <div className="h-12 w-12 bg-purple-100 rounded-xl flex items-center justify-center flex-shrink-0 shadow">
+                                <MapPin className="h-6 w-6 text-purple-600" />
                             </div>
-                            Seat Allocation Types
+                            <span className="tracking-tight">Seat Allocation Types (Explained)</span>
                         </CardTitle>
                     </CardHeader>
-                    <CardContent className="space-y-3 pt-2 text-sm font-abel">
-                        <div className="flex items-center gap-3 p-2 rounded-lg bg-white border border-gray-200 group-hover:border-purple-300 transition-all">
-                            <ShieldCheck className="h-5 w-5 text-green-600 flex-shrink-0" />
-                            <div>
-                                <span className="font-semibold text-gray-800">State Level</span>
-                                <span className="block text-xs text-gray-600">Open to all Maharashtra candidates.</span>
+                    <CardContent className="pt-4">
+                        <div className="flex flex-col gap-8 md:gap-10">
+                            {/* State Level */}
+                            <div className="rounded-xl bg-green-50/80 border border-green-100 p-6 shadow-sm flex items-start gap-6">
+                                <ShieldCheck className="h-10 w-10 text-green-600 mt-1" />
+                                <div>
+                                    <div className="font-extrabold text-green-900 font-abel text-2xl md:text-3xl mb-2">State Level (S)</div>
+                                    <div className="text-lg md:text-xl text-gray-700 font-abel mb-2">
+                                        <span className="font-semibold">Who can apply?</span> <br />
+                                        <span>All students from Maharashtra, regardless of their home university region.</span>
+                                    </div>
+                                    <div className="text-lg text-gray-600 font-abel">
+                                        <span className="font-semibold">Example:</span> If you are from any part of Maharashtra, you can compete for these seats.
+                                    </div>
+                                </div>
                             </div>
-                        </div>
-                        <div className="flex items-center gap-3 p-2 rounded-lg bg-white border border-gray-200 group-hover:border-purple-300 transition-all">
-                            <Building className="h-5 w-5 text-blue-600 flex-shrink-0" />
-                            <div>
-                                <span className="font-semibold text-gray-800">Home University</span>
-                                <span className="block text-xs text-gray-600">For students within the same university region.</span>
+
+                            {/* Home University */}
+                            <div className="rounded-xl bg-blue-50/80 border border-blue-100 p-6 shadow-sm flex items-start gap-6">
+                                <Building className="h-10 w-10 text-blue-600 mt-1" />
+                                <div>
+                                    <div className="font-extrabold text-blue-900 font-abel text-2xl md:text-3xl mb-2">Home University (H)</div>
+                                    <div className="text-lg md:text-xl text-gray-700 font-abel mb-2">
+                                        <span className="font-semibold">Who can apply?</span> <br />
+                                        <span>Only students whose <span className="font-semibold">Home University</span> matches the college&apos;s university region.</span>
+                                    </div>
+                                    <div className="text-lg text-gray-600 font-abel mb-2">
+                                        <span className="font-semibold">What is Home University?</span> <br />
+                                        The university region where you completed your 12th standard (HSC) or equivalent. Each district in Maharashtra is mapped to a university region.
+                                    </div>
+                                    <div className="text-lg text-gray-600 font-abel">
+                                        <span className="font-semibold">Example:</span> If you studied in Pune district, your Home University is &quot;Savitribai Phule Pune University&quot;. You can apply for Home University seats in colleges under this university.
+                                    </div>
+                                </div>
                             </div>
-                        </div>
-                        <div className="flex items-center gap-3 p-2 rounded-lg bg-white border border-gray-200 group-hover:border-purple-300 transition-all">
-                            <Users className="h-5 w-5 text-orange-600 flex-shrink-0" />
-                            <div>
-                                <span className="font-semibold text-gray-800">Other University</span>
-                                <span className="block text-xs text-gray-600">For students from different university regions.</span>
+
+                            {/* Other University */}
+                            <div className="rounded-xl bg-orange-50/80 border border-orange-100 p-6 shadow-sm flex items-start gap-6">
+                                <Users className="h-10 w-10 text-orange-600 mt-1" />
+                                <div>
+                                    <div className="font-extrabold text-orange-900 font-abel text-2xl md:text-3xl mb-2">Other University (O)</div>
+                                    <div className="text-lg md:text-xl text-gray-700 font-abel mb-2">
+                                        <span className="font-semibold">Who can apply?</span> <br />
+                                        <span>Students from <span className="font-semibold">other</span> university regions (not the college&apos;s Home University region).</span>
+                                    </div>
+                                    <div className="text-lg text-gray-600 font-abel">
+                                        <span className="font-semibold">Example:</span> If your Home University is &quot;Mumbai University&quot; and you are applying to a college under &quot;Pune University&quot;, you are eligible for Other University seats there.
+                                    </div>
+                                </div>
+                            </div>
+
+                            {/* Visual Table for Quick Reference */}
+                            <div className="rounded-xl bg-purple-50/80 border border-purple-100 p-6 shadow-sm">
+                                <div className="font-extrabold text-purple-900 font-abel text-2xl md:text-3xl mb-3 flex items-center gap-2">
+                                    <MapPin className="h-7 w-7 text-purple-600" />
+                                    Quick Reference Table
+                                </div>
+                                <div className="overflow-x-auto">
+                                    <table className="min-w-full text-lg md:text-xl font-abel border-collapse">
+                                        <thead>
+                                            <tr className="bg-purple-100">
+                                                <th className="px-4 py-3 border border-purple-200 text-left">Type</th>
+                                                <th className="px-4 py-3 border border-purple-200 text-left">Code</th>
+                                                <th className="px-4 py-3 border border-purple-200 text-left">Who Can Apply?</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td className="px-4 py-3 border border-purple-100 font-semibold">State Level</td>
+                                                <td className="px-4 py-3 border border-purple-100 font-mono text-lg md:text-xl">S</td>
+                                                <td className="px-4 py-3 border border-purple-100">All Maharashtra students</td>
+                                            </tr>
+                                            <tr>
+                                                <td className="px-4 py-3 border border-purple-100 font-semibold">Home University</td>
+                                                <td className="px-4 py-3 border border-purple-100 font-mono text-lg md:text-xl">H</td>
+                                                <td className="px-4 py-3 border border-purple-100">Students from the same university region</td>
+                                            </tr>
+                                            <tr>
+                                                <td className="px-4 py-3 border border-purple-100 font-semibold">Other University</td>
+                                                <td className="px-4 py-3 border border-purple-100 font-mono text-lg md:text-xl">O</td>
+                                                <td className="px-4 py-3 border border-purple-100">Students from other university regions</td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                                <div className="mt-4 text-lg md:text-xl text-purple-800 font-abel bg-purple-50 rounded px-3 py-3">
+                                    <span className="font-bold">Tip:</span> If you are unsure about your Home University, check your 12th (HSC) board details or ask your school/college.
+                                </div>
                             </div>
-                        </div>
-                        <div className="mt-2 text-xs text-purple-800 font-abel bg-purple-50 rounded px-2 py-1">
-                            <span className="font-bold">Tip:</span> Hover on seat types in the table for more info.
                         </div>
                     </CardContent>
                 </Card>
 
-                {/* Category and Code Legends */}
-                <Card className="relative bg-gradient-to-br from-emerald-50 to-white border-emerald-200 shadow-md transition-all duration-300 md:col-span-2 xl:col-span-1 overflow-hidden">
-                    <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-emerald-400 to-emerald-200 opacity-70 transition-all duration-300" />
-                    <CardHeader className="pb-3">
-                        <CardTitle className="flex items-center gap-3 text-lg font-abel text-emerald-900">
-                            <div className="h-10 w-10 bg-emerald-100 rounded-xl flex items-center justify-center flex-shrink-0 shadow group-hover:bg-emerald-200 transition-all duration-200">
-                                <BookUser className="h-5 w-5 text-emerald-600 group-hover:text-emerald-800 transition-all duration-200" />
+                {/* Category and Code Legends - right */}
+                <Card className="relative bg-gradient-to-br from-emerald-50 to-white border-emerald-200 shadow-lg transition-all duration-300 overflow-hidden">
+                    <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-emerald-400 to-emerald-200 opacity-70" />
+                    <CardHeader className="pb-2">
+                        <CardTitle className="flex items-center gap-3 text-2xl md:text-3xl font-abel text-emerald-900">
+                            <div className="h-10 w-10 bg-emerald-100 rounded-xl flex items-center justify-center flex-shrink-0 shadow">
+                                <BookUser className="h-5 w-5 text-emerald-600" />
                             </div>
-                            Category & Code Legends
+                            <span className="tracking-tight">Category & Code Legends</span>
                         </CardTitle>
                     </CardHeader>
                     <CardContent className="pt-2">
-                        <Accordion type="single" collapsible className="w-full space-y-3">
-                            <AccordionItem value="item-1" className="border-none bg-gradient-to-br from-emerald-100/60 to-white shadow-lg rounded-xl overflow-hidden">
-                                <AccordionTrigger className="font-abel text-base font-semibold text-emerald-900 hover:no-underline px-4 py-3 bg-emerald-50/80 rounded-t-xl group transition-all duration-200">
-                                    <div className="flex items-center gap-2">
-                                        <Info className="h-5 w-5 text-emerald-600 group-data-[state=open]:text-emerald-800 transition-colors" />
-                                        <span>Category Code Format</span>
-                                    </div>
-                                </AccordionTrigger>
-                                <AccordionContent className="font-abel text-xs sm:text-sm pb-3 bg-white rounded-b-xl border-t border-emerald-100/80 shadow-inner">
-                                    <div className="space-y-2 p-3">
-                                        <p><span className="font-bold">G</span> = General, <span className="font-bold">L</span> = Ladies</p>
-                                        <p><span className="font-bold">H</span> = Home Uni, <span className="font-bold">O</span> = Other Uni, <span className="font-bold">S</span> = State</p>
-                                        <p>Example: <span className="font-mono bg-gray-100 px-1 rounded text-xs">GOPENH</span> is General Open Home University.</p>
-                                    </div>
-                                </AccordionContent>
-                            </AccordionItem>
-                            <AccordionItem value="item-2" className="border-none bg-gradient-to-br from-purple-100/60 to-white shadow-lg rounded-xl overflow-hidden">
-                                <AccordionTrigger className="font-abel text-base font-semibold text-purple-900 hover:no-underline px-4 py-3 bg-purple-50/80 rounded-t-xl group transition-all duration-200">
-                                    <div className="flex items-center gap-2">
-                                        <GraduationCap className="h-5 w-5 text-purple-600 group-data-[state=open]:text-purple-800 transition-colors" />
-                                        <span>Special Category Codes</span>
-                                    </div>
-                                </AccordionTrigger>
-                                <AccordionContent className="font-abel text-xs sm:text-sm pb-3 bg-white rounded-b-xl border-t border-purple-100/80 shadow-inner">
-                                    <div className="space-y-2 p-3">
-                                        <p><span className="font-bold">TFWS:</span> Tuition Fee Waiver Scheme</p>
-                                        <p><span className="font-bold">EWS:</span> Economically Weaker Section</p>
-                                        <p><span className="font-bold">DEF:</span> Defence Reserved</p>
-                                        <p><span className="font-bold">PWD:</span> Persons with Disability</p>
-                                        <p><span className="font-bold">MI:</span> Minority Institutions</p>
-                                    </div>
-                                </AccordionContent>
-                            </AccordionItem>
-                            <AccordionItem value="item-3" className="border-none bg-gradient-to-br from-emerald-100/60 to-white shadow-lg rounded-xl overflow-hidden">
-                                <AccordionTrigger className="font-abel text-base font-semibold text-emerald-900 hover:no-underline px-4 py-3 bg-emerald-50/80 rounded-t-xl group transition-all duration-200">
-                                    <div className="flex items-center gap-2">
-                                        <Info className="h-5 w-5 text-emerald-600 group-data-[state=open]:text-emerald-800 transition-colors" />
-                                        <span>Video Explanation</span>
+                        <div className="flex flex-col gap-6 md:gap-8">
+                            {/* Category Code Format */}
+                            <div className="rounded-xl bg-emerald-50/80 border border-emerald-100 p-6 shadow-sm">
+                                <div className="flex items-center gap-2 mb-3">
+                                    <Info className="h-6 w-6 text-emerald-600" />
+                                    <span className="font-semibold text-emerald-900 font-abel text-xl md:text-2xl">Category Code Format</span>
+                                </div>
+                                <ul className="text-lg md:text-xl font-abel space-y-2 pl-2">
+                                    <li>
+                                        <div className="flex flex-col gap-1">
+                                            <div><span className="font-bold">G</span> = <span className="text-gray-700">General (open to all)</span></div>
+                                            <div><span className="font-bold">L</span> = <span className="text-gray-700">Ladies (female candidates only)</span></div>
+                                            <div><span className="font-bold">SC</span> = <span className="text-gray-700">Scheduled Caste</span>, <span className="font-bold">ST</span> = <span className="text-gray-700">Scheduled Tribe</span>, <span className="font-bold">OBC</span> = <span className="text-gray-700">Other Backward Class</span>, <span className="font-bold">EWS</span> = <span className="text-gray-700">Economically Weaker Section</span></div>
+                                        </div>
+                                    </li>
+                                    <li>
+                                        <div className="flex flex-col gap-1">
+                                            <div><span className="font-bold">OPEN</span> = <span className="text-gray-700">Open to all within that category</span></div>
+                                            <div><span className="font-bold">SC/ST/OBC/EWS</span> = <span className="text-gray-700">Reserved for specific categories</span></div>
+                                        </div>
+                                    </li>
+                                    <li>
+                                        <div className="flex flex-col gap-1">
+                                            <div><span className="font-bold">H</span> = <span className="text-gray-700">Home University (your university region)</span></div>
+                                            <div><span className="font-bold">O</span> = <span className="text-gray-700">Other University (other regions)</span></div>
+                                            <div><span className="font-bold">S</span> = <span className="text-gray-700">State Level (all Maharashtra students)</span></div>
+                                        </div>
+                                    </li>
+                                    <li className="pt-2">
+                                        <div className="flex flex-col gap-1">
+                                            <div><span className="font-bold">Example 1:</span> <span className="font-mono bg-gray-100 px-1 rounded text-base">GOPENH</span> <span className="text-gray-700">= General, Open seat, Home University</span></div>
+                                            <div><span className="font-bold">Example 2:</span> <span className="font-mono bg-gray-100 px-1 rounded text-base">LOPENO</span> <span className="text-gray-700">= Ladies, Open seat, Other University</span></div>
+                                        </div>
+                                    </li>
+                                </ul>
+                                <div className="mt-3 text-base text-emerald-900 font-abel bg-emerald-100 rounded px-3 py-2">
+                                    <b>How to read a code:</b> Most codes are a combination of:
+                                    <ul className="list-disc pl-6 mt-2 space-y-1">
+                                        <li><b>First part:</b> G = General, L = Ladies, SC = Scheduled Caste, ST = Scheduled Tribe, OBC = Other Backward Class, EWS = Economically Weaker Section, etc.</li>
+                                        <li><b>OPEN:</b> Open to all within that category (not a reserved sub-quota). Other codes like OBC, SC, etc. indicate reservation for that group.</li>
+                                        <li><b>H/O/S:</b> H = Home University, O = Other University, S = State Level. This is always at the end of the code.</li>
+                                    </ul>
+                                    <div className="mt-2">
+                                        <b>Full Example:</b>
+                                        <span className="font-mono bg-gray-100 px-1 rounded">GOPENO</span> = General, Open seat, Other University. <br />
+                                        <span className="font-mono bg-gray-100 px-1 rounded">LOPENS</span> = Ladies, Open seat, State Level.
                                     </div>
-                                </AccordionTrigger>
-                                <AccordionContent className="font-abel text-xs sm:text-sm pb-3 bg-white rounded-b-xl border-t border-emerald-100/80 shadow-inner">
-                                    <div className="aspect-video w-full max-w-full rounded overflow-hidden">
-                                        <iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/1WA_Vh1jaU4?si=bBGUzsa5AoHX6ONh" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen className="w-full h-48 md:h-56 rounded" />
+                                    <div className="mt-2">
+                                        <b>Tip:</b> The code tells you both <u>who can apply</u> (category, gender, region) and <u>which seat type</u> (open/reserved). <br />
+                                        <b>Fact check:</b> These codes are based on the official DTE Maharashtra MHT-CET seat matrix and allocation rules. Always refer to the latest government brochure for any changes or new categories.
                                     </div>
-                                </AccordionContent>
-                            </AccordionItem>
-                        </Accordion>
+                                </div>
+                            </div>
+
+                            {/* Special Category Codes */}
+                            <div className="rounded-xl bg-purple-50/80 border border-purple-100 p-6 shadow-sm">
+                                <div className="flex items-center gap-2 mb-3">
+                                    <GraduationCap className="h-6 w-6 text-purple-600" />
+                                    <span className="font-semibold text-purple-900 font-abel text-xl md:text-2xl">Special Category Codes</span>
+                                </div>
+                                <ul className="text-lg md:text-xl font-abel space-y-2 pl-2">
+                                    <li className="text-base md:text-lg"><span className="font-bold">TFWS:</span> Tuition Fee Waiver Scheme</li>
+                                    <li className="text-base md:text-lg"><span className="font-bold">EWS:</span> Economically Weaker Section</li>
+                                    <li className="text-base md:text-lg"><span className="font-bold">DEF:</span> Defence Reserved</li>
+                                    <li className="text-base md:text-lg"><span className="font-bold">PWD:</span> Persons with Disability</li>
+                                    <li className="text-base md:text-lg"><span className="font-bold">MI:</span> Minority Institutions</li>
+                                </ul>
+                            </div>
+
+                            {/* Video Explanation */}
+                            <div className="rounded-xl bg-emerald-50/80 border border-emerald-100 p-6 shadow-sm">
+                                <div className="flex items-center gap-2 mb-3">
+                                    <Info className="h-6 w-6 text-emerald-600" />
+                                    <span className="font-semibold text-emerald-900 font-abel text-xl md:text-2xl">Video Explanation (not affiliated)</span>
+                                </div>
+                                <div className="aspect-video w-full max-w-full rounded overflow-hidden">
+                                    <iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/1WA_Vh1jaU4?si=bBGUzsa5AoHX6ONh" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen className="w-full h-56 md:h-64 rounded" />
+                                </div>
+                            </div>
+                        </div>
                     </CardContent>
                 </Card>
             </div>
@@ -2021,6 +2136,10 @@ export default function StateCutoffsPage() {
             <div className="mt-8 md:mt-12">
                 <CategoryFlowChart />
             </div>
+
+            <div className="mt-8 md:mt-12 overflow-hidden md:overflow-visible">
+                <DonationCard />
+            </div>
         </div>
     );
 }
diff --git a/components/DonationCard.tsx b/components/DonationCard.tsx
new file mode 100644
index 0000000..920a9c3
--- /dev/null
+++ b/components/DonationCard.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import Link from 'next/link';
+import Image from 'next/image';
+
+export const DonationCard = () => {
+    return (
+        <Card className="mt-28 bg-secondary relative">
+            <Image
+                src="https://res.cloudinary.com/dfyrk32ua/image/upload/v1751651691/gdgc/server_jokm9r.webp"
+                alt="Server Image"
+                width={264}
+                height={264}
+                className="absolute bottom-52 sm:bottom-28 right-[-72px] w-52 h-52 overflow-hidden rounded-full"
+            />
+            <CardHeader>
+                <CardTitle className="text-2xl sm:text-3xl">Found this helpful?</CardTitle>
+                <CardDescription className="text-xl sm:text-2xl">
+                    If this site has helped you with your college search, please consider supporting the project.
+                </CardDescription>
+            </CardHeader>
+            <CardContent>
+                <p className="text-lg sm:text-xl">
+                    This is a student-run project, and your contribution helps us cover server costs and continue improving the platform for everyone.
+                </p>
+            </CardContent>
+            <CardFooter>
+                <Button asChild>
+                    <Link href="https://checkout.dodopayments.com/buy/pdt_oQtpdP1lcA07A1Yq9KW3B" target="_blank" rel="noopener noreferrer">
+                        Make a Contribution
+                    </Link>
+                </Button>
+            </CardFooter>
+        </Card>
+    );
+};

From 4d95f5549fae0d1e7621d9482b138f7e76b5e150 Mon Sep 17 00:00:00 2001
From: Kewonit <108450560+kewonit@users.noreply.github.com.>
Date: Sat, 5 Jul 2025 00:38:44 +0530
Subject: [PATCH 4/6] feat: add StateCutoffs layout and update page title for
 better user guidance

---
 app/layout.tsx                       |  2 +-
 app/mht-cet/state-cutoffs/layout.tsx | 64 ++++++++++++++++++++++++++++
 app/mht-cet/state-cutoffs/page.tsx   |  2 +-
 3 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 app/mht-cet/state-cutoffs/layout.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index f2e1dc1..8f2f79c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -27,7 +27,7 @@ export default function RootLayout({
   return (
     <html lang="en" className="bg-[#E4DFF2]">
       <meta property="og:image" content="https://res.cloudinary.com/dfyrk32ua/image/upload/v1722186653/deetnuts/preview_o5ykn7.png" />
-      <meta property="og:image:webp" content="https://res.cloudinary.com/dfyrk32ua/image/upload/v1722186653/deetnuts/preview_o5ykn7.png" />
+      <meta property="og:image:png" content="https://res.cloudinary.com/dfyrk32ua/image/upload/v1722186653/deetnuts/preview_o5ykn7.png" />
       <link rel="icon" href="/favicon.ico" />
       <body className={`${inter.className} relative min-h-screen overflow-x-hidden`}>
         <Navbar />
diff --git a/app/mht-cet/state-cutoffs/layout.tsx b/app/mht-cet/state-cutoffs/layout.tsx
new file mode 100644
index 0000000..b0ed4fa
--- /dev/null
+++ b/app/mht-cet/state-cutoffs/layout.tsx
@@ -0,0 +1,64 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "MHT-CET State Cutoffs 2024 | College Predictor & Category Codes",
+    description:
+        "See official MHT-CET 2024 state cutoffs for all Maharashtra engineering colleges. Filter by percentile, category, course, seat type, and university region. Plan your CAP round choices with the most accurate, up-to-date data.",
+    keywords: [
+        "MHT-CET",
+        "MHT CET",
+        "state cutoffs",
+        "2024",
+        "engineering colleges",
+        "college predictor",
+        "percentile",
+        "category codes",
+        "seat allocation",
+        "CAP round",
+        "DTE Maharashtra",
+        "admission",
+        "cutoff list",
+        "university region",
+        "maharashtra engineering admission",
+        "mhtcet cutoffs",
+        "mht cet college predictor",
+        "mht cet category codes",
+        "mht cet seat types",
+        "mht cet 2024",
+        "mht cet cap round",
+        "mht cet home university",
+        "mht cet other university",
+        "mht cet open category",
+        "mht cet obc sc st",
+        "mht cet cutoff marks",
+        "mht cet cutoff percentile"
+    ],
+    openGraph: {
+        title: "MHT-CET State Cutoffs 2024 | 2025 | College Predictor & Category Codes",
+        description:
+            "See official MHT-CET 2024 state cutoffs for all Maharashtra engineering colleges. Filter by percentile, category, course, seat type, and university region. Plan your CAP round choices with the most accurate, up-to-date data.",
+        url: "https://deetnut.in/mht-cet/state-cutoffs",
+        siteName: "Deetnut.in",
+        type: "website",
+        images: [
+            {
+                url: "https://res.cloudinary.com/dfyrk32ua/image/upload/v1722186653/deetnuts/preview_o5ykn7.png",
+                width: 512,
+                height: 512,
+                alt: "MHT-CET State Cutoffs 2024 Logo"
+            }
+        ]
+    },
+    twitter: {
+        card: "summary_large_image",
+        title: "MHT-CET State Cutoffs 2024 | 2025 | College Predictor & Category Codes",
+        description:
+            "See official MHT-CET 2024 | 2025 state cutoffs for all Maharashtra engineering colleges. Filter by percentile, category, course, seat type, and university region. Plan your CAP round choices with the most accurate, up-to-date data.",
+        images: ["https://res.cloudinary.com/dfyrk32ua/image/upload/v1722186653/deetnuts/preview_o5ykn7.png"]
+    },
+    metadataBase: new URL("https://deetnut.in"),
+};
+
+export default function StateCutoffsLayout({ children }: { children: React.ReactNode }) {
+    return <>{children}</>;
+}
diff --git a/app/mht-cet/state-cutoffs/page.tsx b/app/mht-cet/state-cutoffs/page.tsx
index 280bbe8..f5bb819 100644
--- a/app/mht-cet/state-cutoffs/page.tsx
+++ b/app/mht-cet/state-cutoffs/page.tsx
@@ -1681,7 +1681,7 @@ export default function StateCutoffsPage() {
                     {!filters.percentileInput ? (
                         <div className="flex flex-col items-center justify-center py-12 md:py-16 space-y-4 px-4">
                             <div className="text-center space-y-2">
-                                <h3 className="text-base md:text-lg font-medium font-abel">Enter Target Percentile</h3>
+                                <h3 className="text-base md:text-lg font-medium font-abel">Enter Your MHT-CET Percentile</h3>
                                 <p className="text-xs md:text-sm text-muted-foreground font-abel max-w-md">
                                     Please enter a target percentile above to search for MHT-CET cutoffs
                                 </p>

From 8d1bbc0ccd20ac2409fb5a5a0b04c65a9ac162e2 Mon Sep 17 00:00:00 2001
From: Kewonit <108450560+kewonit@users.noreply.github.com.>
Date: Sat, 5 Jul 2025 00:41:05 +0530
Subject: [PATCH 5/6] fix: update site URL and name in State Cutoffs layout for
 consistency

---
 app/mht-cet/state-cutoffs/layout.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/mht-cet/state-cutoffs/layout.tsx b/app/mht-cet/state-cutoffs/layout.tsx
index b0ed4fa..cd0f8f4 100644
--- a/app/mht-cet/state-cutoffs/layout.tsx
+++ b/app/mht-cet/state-cutoffs/layout.tsx
@@ -37,8 +37,8 @@ export const metadata: Metadata = {
         title: "MHT-CET State Cutoffs 2024 | 2025 | College Predictor & Category Codes",
         description:
             "See official MHT-CET 2024 state cutoffs for all Maharashtra engineering colleges. Filter by percentile, category, course, seat type, and university region. Plan your CAP round choices with the most accurate, up-to-date data.",
-        url: "https://deetnut.in/mht-cet/state-cutoffs",
-        siteName: "Deetnut.in",
+        url: "https://deetnuts.com/mht-cet/state-cutoffs",
+        siteName: "deetnuts.com",
         type: "website",
         images: [
             {
@@ -56,7 +56,7 @@ export const metadata: Metadata = {
             "See official MHT-CET 2024 | 2025 state cutoffs for all Maharashtra engineering colleges. Filter by percentile, category, course, seat type, and university region. Plan your CAP round choices with the most accurate, up-to-date data.",
         images: ["https://res.cloudinary.com/dfyrk32ua/image/upload/v1722186653/deetnuts/preview_o5ykn7.png"]
     },
-    metadataBase: new URL("https://deetnut.in"),
+    metadataBase: new URL("https://deetnuts.com/"),
 };
 
 export default function StateCutoffsLayout({ children }: { children: React.ReactNode }) {

From f49e0b68f78cf53d3b9352f0831ad0b00db94d74 Mon Sep 17 00:00:00 2001
From: Kewonit <108450560+kewonit@users.noreply.github.com.>
Date: Sat, 5 Jul 2025 00:44:33 +0530
Subject: [PATCH 6/6] refactor: clean up unused links in NavDropdown and Footer
 components for improved clarity

---
 components/NavDropdown.tsx | 5 +----
 components/footer.tsx      | 8 ++------
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/components/NavDropdown.tsx b/components/NavDropdown.tsx
index 4bf15e1..c63e2e8 100644
--- a/components/NavDropdown.tsx
+++ b/components/NavDropdown.tsx
@@ -15,13 +15,10 @@ interface LinkItem {
 
 const cutoffLinks: LinkItem[] = [
   { href: '/mht-cet', title: 'MHTCET', subtitle: 'All India & State Cutoffs' },
-  { href: '#', title: 'BITS', subtitle: 'Cutoffs' },
-  { href: '#', title: 'JOSAA', subtitle: 'Cutoffs' },
-  { href: '#', title: 'NIRF', subtitle: 'Stats' },
 ];
 
 const toolLinks: LinkItem[] = [
-  { href: '#', title: 'MHT-CET Rank Predictor', subtitle: 'Estimate your rank' },
+  { href: '#', title: '/', subtitle: '/' },
 ];
 
 interface DropdownProps {
diff --git a/components/footer.tsx b/components/footer.tsx
index f45d0f3..33baf24 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -19,18 +19,14 @@ export default function Footer() {
 
   const serviceLinks = [
     { name: "MHT-CET", href: "/mht-cet" },
-    { name: "MHT-CET State Level", href: "#" },
-    { name: "BITS", href: "#" },
-    { name: "JOSAA", href: "#" },
-    { name: "CSAB", href: "#" },
   ];
 
   const Tools = [
-    { name: "MHT-CET Rank Predictor", href: "#" },
+    { name: "/", href: "#" },
   ];
 
   const Contribute = [
-    { name: "Sumbit Deets", href: "#" },
+    { name: "/", href: "#" },
   ];