From e3dd999e1d7f920fb6f3f09283cbd17630638267 Mon Sep 17 00:00:00 2001
From: Kewonit <108450560+kewonit@users.noreply.github.com.>
Date: Sat, 5 Jul 2025 17:17:51 +0530
Subject: [PATCH] feat: add data safety message and Pepe icon to MHTCET login
 page for user reassurance

---
 app/mht-cet-login-required/page.tsx | 36 +++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/app/mht-cet-login-required/page.tsx b/app/mht-cet-login-required/page.tsx
index 4b5aebe..c8478b0 100644
--- a/app/mht-cet-login-required/page.tsx
+++ b/app/mht-cet-login-required/page.tsx
@@ -27,12 +27,34 @@ export default async function MHTCETLoginRequired({ searchParams }: {
                     </p>
                 </div>
 
+                <div className="bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-xl p-5 shadow-sm relative overflow-visible">
+                    <div className="text-center relative z-10">
+                        <h3 className="text-lg font-semibold text-green-800 mb-1">
+                            Your Data is Safe
+                        </h3>
+                        <p className="text-sm text-green-700 leading-relaxed">
+                            We only collect your email to rate limit usage and keep this service free for everyone. We will never sell your data.
+                        </p>
+                    </div>
+
+                    {/* Pepe icon positioned at top right with overflow */}
+                    <div className="absolute -top-3 -right-3 sm:-top-4 sm:-right-4 md:-top-5 md:-right-5">
+                        <Image
+                            src="https://res.cloudinary.com/dfyrk32ua/image/upload/v1751715700/pepechill_hqrkgj.webp"
+                            alt="Pepe Chill"
+                            width={64}
+                            height={64}
+                            className="w-14 h-14 sm:w-16 sm:h-16 md:w-18 md:h-18 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-2 border-white/50 hover:scale-105 transition-all duration-300 ease-in-out"
+                        />
+                    </div>
+                </div>
+
                 <div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
-                    <h2 className="text-xl font-semibold text-blue-900 mb-2">
+                    <h2 className="text-xl font-semibold text-blue-900 mb-3">
                         Login Required
                     </h2>
                     <p className="text-blue-700 mb-4">
-                        Please sign in to access MHT-CET resources that includs state cutoffs
+                        Please sign in to access MHT-CET resources including state cutoffs
                     </p>
 
                     <div className="space-y-3">
@@ -40,7 +62,7 @@ export default async function MHTCETLoginRequired({ searchParams }: {
                             href={`/login?redirect=${encodeURIComponent(redirectTo)}`}
                             className="block w-full"
                         >
-                            <Button className="w-full bg-blue-600 hover:bg-blue-700">
+                            <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 h-12">
                                 Sign In
                             </Button>
                         </Link>
@@ -49,7 +71,7 @@ export default async function MHTCETLoginRequired({ searchParams }: {
                             href={`/signup?redirect=${encodeURIComponent(redirectTo)}`}
                             className="block w-full"
                         >
-                            <Button variant="neutral" className="w-full">
+                            <Button variant="neutral" className="w-full text-blue-700 hover:bg-blue-50 font-medium py-3 h-12 border-blue-300">
                                 Create Account
                             </Button>
                         </Link>
@@ -63,14 +85,14 @@ export default async function MHTCETLoginRequired({ searchParams }: {
                 </div>
 
             </div>
-            <div className="mt-20 overflow-hidden flex justify-center">
+            <div className="mt-16 overflow-hidden flex justify-center">
                 <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none">
                     <Image
                         src="https://res.cloudinary.com/dfyrk32ua/image/upload/v1751627283/gdgc/clipboard-image-1751627216_j5fqdd.webp"
-                        alt="Page Screenshot"
+                        alt="MHT-CET Dashboard Preview"
                         width="1432"
                         height="442"
-                        className="w-3xl max-w-none rounded-xl shadow-xl ring-1 ring-white/10 sm:w-228 md:-ml-4 lg:-ml-0"
+                        className="w-full max-w-4xl rounded-xl shadow-2xl ring-1 ring-gray-200/50"
                         priority
                     />
                 </div>