From fbd89f0bc39c2a11feb2a3a7d2ab17b83201a779 Mon Sep 17 00:00:00 2001
From: Rishikesh Maddhesiya <rishi89324@gmail.com>
Date: Mon, 5 May 2025 01:58:27 +0530
Subject: [PATCH 1/2] made privacy policy and legal notice responsive

---
 src/components/LegalNotice/index.tsx |  8 ++++----
 src/components/Privacy/index.tsx     | 29 ++++++++++++++++++++--------
 src/styles/index.css                 |  4 +++-
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/components/LegalNotice/index.tsx b/src/components/LegalNotice/index.tsx
index 546ea93..ba8f7cc 100644
--- a/src/components/LegalNotice/index.tsx
+++ b/src/components/LegalNotice/index.tsx
@@ -12,8 +12,8 @@ const LegalNoticePopup: React.FC<LegalNoticePopupProps> = ({
   if (!isOpen) return null; // Prevent rendering when not open
 
   return (
-    <div className="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50">
-      <div className="relative w-full max-w-3xl rounded-lg bg-white shadow-lg">
+    <div className="fixed top-40 left-0 right-0 bottom-10 z-80 flex items-center justify-center bg-gray-800 bg-opacity-50 p-4 md:p-16">
+      <div className="w-full max-w-2xl overflow-y-auto max-h-[calc(100vh-10rem)] bg-white p-6 rounded-lg shadow-lg">
         {/* Fixed Close Button */}
         <button
           onClick={onClose}
@@ -24,8 +24,8 @@ const LegalNoticePopup: React.FC<LegalNoticePopupProps> = ({
         </button>
 
         {/* Scrollable Content */}
-        <div className="max-h-[80vh] overflow-y-auto p-8 pt-12">
-          <h2 className="mb-4 text-2xl font-bold text-indigo-600">
+        <div className="px-4 py-6 md:px-8 md:py-10 space-y-10 max-w-prose mx-auto text-justify">
+          <h2 className="text-3xl font-bold text-indigo-600 md:text-4xl">
             {`Legal Notice for DevRhylme Foundation`}
           </h2>
 
diff --git a/src/components/Privacy/index.tsx b/src/components/Privacy/index.tsx
index 1f8b7d0..9e8ded8 100644
--- a/src/components/Privacy/index.tsx
+++ b/src/components/Privacy/index.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useEffect } from "react";
 
 interface PrivacyPolicyPopupProps {
   isOpen: boolean;
@@ -9,30 +10,42 @@ const PrivacyPolicyPopup: React.FC<PrivacyPolicyPopupProps> = ({
   isOpen,
   onClose,
 }) => {
-  if (!isOpen) return null; // Prevent rendering when not open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;// Prevent rendering when not open
 
   return (
-    <div className="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50">
-      <div className="relative w-full max-w-3xl rounded-lg bg-white shadow-lg">
+    <div className="fixed top-40 left-0 right-0 bottom-10 z-80 flex items-center justify-center bg-gray-800 bg-opacity-50 p-4 md:p-16">
+
+      <div className="w-full max-w-2xl overflow-y-auto max-h-[calc(100vh-10rem)] bg-white p-6 rounded-lg shadow-lg">
         {/* Fixed Close Button */}
         <button
           onClick={onClose}
-          className="absolute right-3 top-3 rounded-full bg-gray-200 p-2 text-gray-500 hover:text-gray-800"
+          className="absolute right-3 top-4 rounded-full bg-gray-200 p-2 text-gray-500 hover:text-gray-800"
           aria-label="Close"
         >
           ×
         </button>
 
         {/* Scrollable Content */}
-        <div className="max-h-[80vh] overflow-y-auto p-8 pt-12">
-          <h2 className="mb-4 text-2xl font-bold text-indigo-600">
+        <div className="px-4 py-6 md:px-8 md:py-10 space-y-10 max-w-prose mx-auto text-justify">
+          <h2 className="text-3xl font-bold text-indigo-600 md:text-4xl">
             {`Privacy Policy for DevRhylme Foundation`}
           </h2>
 
-          <h3 className="mb-2 text-lg font-semibold text-indigo-600">
+          <h3 className="text-xl md:text-2xl font-semibold text-indigo-600 leading-snug mt-8">
             {`Introduction`}
           </h3>
-          <p className="text-gray-700">
+          <p className="text-base md:text-lg text-gray-700 leading-relaxed">
             {`Welcome to Devrhylme.org ("we," "our," or "us"). Your privacy is of
             paramount importance to us. This Privacy Policy outlines the types
             of information we collect, how we use it, and the steps we take to
diff --git a/src/styles/index.css b/src/styles/index.css
index 14a8e6f..3e82e97 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -86,4 +86,6 @@ body {
   50% {
     transform: scale(1.005);
   }
-}
\ No newline at end of file
+}
+
+

From 7da490a740e8c7e881d11d023394d233656054a1 Mon Sep 17 00:00:00 2001
From: Rishikesh Maddhesiya <rishi89324@gmail.com>
Date: Mon, 5 May 2025 02:36:51 +0530
Subject: [PATCH 2/2] made privacy policy and legal notice responsive

---
 src/components/LegalNotice/index.tsx | 6 +++---
 src/components/Privacy/index.tsx     | 8 +++-----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/LegalNotice/index.tsx b/src/components/LegalNotice/index.tsx
index ba8f7cc..9f9bcf3 100644
--- a/src/components/LegalNotice/index.tsx
+++ b/src/components/LegalNotice/index.tsx
@@ -12,12 +12,12 @@ const LegalNoticePopup: React.FC<LegalNoticePopupProps> = ({
   if (!isOpen) return null; // Prevent rendering when not open
 
   return (
-    <div className="fixed top-40 left-0 right-0 bottom-10 z-80 flex items-center justify-center bg-gray-800 bg-opacity-50 p-4 md:p-16">
-      <div className="w-full max-w-2xl overflow-y-auto max-h-[calc(100vh-10rem)] bg-white p-6 rounded-lg shadow-lg">
+    <div className="fixed inset-0 z-80 flex items-center justify-center bg-gray-800 bg-opacity-50 p-4">
+      <div className="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-white p-4 md:p-6 rounded-lg shadow-lg">
         {/* Fixed Close Button */}
         <button
           onClick={onClose}
-          className="absolute right-3 top-3 rounded-full bg-gray-200 p-2 text-gray-500 hover:text-gray-800"
+          className="absolute right-5 top-20 rounded-full bg-gray-200 p-2 text-gray-500 hover:text-gray-800"
           aria-label="Close"
         >
           {`×`}
diff --git a/src/components/Privacy/index.tsx b/src/components/Privacy/index.tsx
index 9e8ded8..f8605b3 100644
--- a/src/components/Privacy/index.tsx
+++ b/src/components/Privacy/index.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { useEffect } from "react";
 
 interface PrivacyPolicyPopupProps {
@@ -24,13 +23,12 @@ const PrivacyPolicyPopup: React.FC<PrivacyPolicyPopupProps> = ({
   if (!isOpen) return null;// Prevent rendering when not open
 
   return (
-    <div className="fixed top-40 left-0 right-0 bottom-10 z-80 flex items-center justify-center bg-gray-800 bg-opacity-50 p-4 md:p-16">
-
-      <div className="w-full max-w-2xl overflow-y-auto max-h-[calc(100vh-10rem)] bg-white p-6 rounded-lg shadow-lg">
+    <div className="fixed inset-0 z-80 flex items-center justify-center bg-gray-800 bg-opacity-50 p-4">
+      <div className="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-white p-4 md:p-6 rounded-lg shadow-lg">
         {/* Fixed Close Button */}
         <button
           onClick={onClose}
-          className="absolute right-3 top-4 rounded-full bg-gray-200 p-2 text-gray-500 hover:text-gray-800"
+          className="absolute right-5 top-20 rounded-full bg-gray-200 p-2 text-gray-500 hover:text-gray-800"
           aria-label="Close"
         >
           ×