From e97cd1b203ae7569ae0e21a0755b39acda987ff9 Mon Sep 17 00:00:00 2001
From: Akash <developerakash99@gmail.com>
Date: Thu, 4 Dec 2025 21:44:44 +0530
Subject: [PATCH] feat: added legal pages

---
 src/App.jsx                            |  12 ++-
 src/components/Footer.jsx              |  15 ++++
 src/components/Footer.module.css       |  97 ++++++++++++++------
 src/components/Header.jsx              | 120 +++++++++++++++----------
 src/components/Header.module.css       |  47 ++++++++++
 src/pages/legal/About.jsx              |  94 +++++++++++++++++++
 src/pages/legal/Contact.jsx            |  45 ++++++++++
 src/pages/legal/PrivacyPolicy.jsx      |  89 ++++++++++++++++++
 src/pages/legal/RefundPolicy.jsx       |  63 +++++++++++++
 src/pages/legal/TermsAndConditions.jsx | 104 +++++++++++++++++++++
 10 files changed, 610 insertions(+), 76 deletions(-)
 create mode 100644 src/pages/legal/About.jsx
 create mode 100644 src/pages/legal/Contact.jsx
 create mode 100644 src/pages/legal/PrivacyPolicy.jsx
 create mode 100644 src/pages/legal/RefundPolicy.jsx
 create mode 100644 src/pages/legal/TermsAndConditions.jsx

diff --git a/src/App.jsx b/src/App.jsx
index b681fab..3130329 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -16,6 +16,11 @@ import NotFound from './components/NotFound'
 import Profile from "./pages/Profile";
 import PayoutDashboard from "./pages/PayoutDashboard";
 import AdminRoute from "./routes/AdminRoutes";
+import PrivacyPolicy from "./pages/legal/PrivacyPolicy";
+import TermsAndConditions from "./pages/legal/TermsAndConditions";
+import RefundPolicy from "./pages/legal/RefundPolicy";
+import Contact from "./pages/legal/Contact";
+import About from "./pages/legal/About";
 
 function InterceptorBoot() {
   const navigate = useNavigate();
@@ -51,9 +56,14 @@ function App() {
               <AdminRoute>
                 <PayoutDashboard />
               </AdminRoute>
-              } />
+            } />
             <Route path="*" element={<NotFound />} />
             <Route path="/profile" element={<Profile />} />
+            <Route path="/privacy-policy" element={<PrivacyPolicy />} />
+            <Route path="/terms" element={<TermsAndConditions />} />
+            <Route path="/refund-policy" element={<RefundPolicy />} />
+            <Route path="/contact" element={<Contact />} />
+            <Route path="/about" element={<About />} />
           </Routes>
         </main>
         <Footer />
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 1aed532..0879ac5 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,9 +1,24 @@
+import { Link } from "react-router-dom";
 import styles from "./Footer.module.css";
 
 export default function Footer() {
   return (
     <footer className={styles.myFooter}>
       <div className={styles.line}></div>
+
+      {/* Legal Links */}
+      <div className={styles.linksWrapper}>
+        <Link to="/privacy-policy" className={styles.link}>Privacy Policy</Link>
+        <span className={styles.dot}>•</span>
+        <Link to="/terms" className={styles.link}>Terms & Conditions</Link>
+        <span className={styles.dot}>•</span>
+        <Link to="/refund-policy" className={styles.link}>Refund Policy</Link>
+        <span className={styles.dot}>•</span>
+        <Link to="/contact" className={styles.link}>Contact Us</Link>
+        <span className={styles.dot}>•</span>
+        <Link to="/about" className={styles.link}>About Us</Link>
+      </div>
+
       <p className={styles.text}>© Copyrighted by Thenga Coders</p>
     </footer>
   );
diff --git a/src/components/Footer.module.css b/src/components/Footer.module.css
index d4ff3db..e4f7950 100644
--- a/src/components/Footer.module.css
+++ b/src/components/Footer.module.css
@@ -6,73 +6,116 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 16px 40px 12px;
+  padding: 18px 40px 14px;
   font-family: Inter, sans-serif;
   width: 100%;
-  max-width: 100%;
-  box-sizing: border-box;
   background: #ffffff;
   z-index: 100;
+  box-sizing: border-box;
+  gap: 6px;
 }
 
+/* Divider Line */
 .line {
-  width: 100%;            
-  height: 1px;            /* thinner line */
-  background-color: #ccc; /* light gray */
-  margin: 0 0 10px 0;  /* spacing below the line */
+  width: 100%;
+  height: 1px;
+  background-color: #d8d8d8;
+  margin-bottom: 8px;
   border-radius: 2px;
-  box-sizing: border-box;
 }
 
-.text {
-  margin: 0;
+/* Legal Links Row */
+.linksWrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-bottom: 4px;
+}
+
+/* Single Link */
+.link {
   font-size: 14px;
   color: #0a1427;
-  padding-bottom: 0px;
-  line-height: 1.4;
+  text-decoration: none;
+  opacity: 0.85;
+  transition: 0.2s;
+}
+
+.link:hover {
+  opacity: 1;
+  color: #ffa116; /* subtle highlight */
 }
 
-/* Tablet styles (max-width: 1024px) */
+/* Dots between links */
+.dot {
+  color: #bbbbbb;
+  font-size: 12px;
+  margin: 0 4px;
+}
+
+/* Copyright */
+.text {
+  margin: 0;
+  font-size: 13px;
+  color: #020a1a;
+  opacity: 0.75;
+}
+
+/* Tablet (≤1024px) */
 @media (max-width: 1024px) {
   .myFooter {
-    padding: 14px 35px 10px;
+    padding: 16px 30px 12px;
   }
 
-  .text {
+  .link {
     font-size: 13px;
   }
 
-  .line {
-    margin: 0 0 8px 0;
+  .text {
+    font-size: 12.5px;
   }
 }
 
-/* Mobile styles (max-width: 768px) */
+/* Mobile (≤768px) */
 @media (max-width: 768px) {
   .myFooter {
-    padding: 12px 24px 10px;
+    padding: 14px 20px 10px;
   }
 
-  .line {
-    margin: 0 0 8px 0;
+  .linksWrapper {
+    gap: 8px;
   }
 
-  .text {
+  .link {
     font-size: 12px;
   }
+
+  .dot {
+    font-size: 11px;
+  }
+
+  .text {
+    font-size: 11.5px;
+  }
 }
 
-/* Small mobile styles (max-width: 480px) */
+/* Small Mobile (≤480px) */
 @media (max-width: 480px) {
   .myFooter {
-    padding: 10px 16px 8px;
+    padding: 12px 12px 10px;
   }
 
-  .line {
-    margin: 0 0 7px 0;
+  .linksWrapper {
+    gap: 6px;
+  }
+
+  .link {
+    font-size: 11px;
   }
 
   .text {
     font-size: 11px;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 47f0b4f..a76c124 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -34,6 +34,7 @@ export default function Header() {
 
   return (
     <header className={styles.siteHeader}>
+      {/* LOGO */}
       <div className={styles.logo}>
         <NavLink to="/" className={styles.logoLink}>
           <span className={styles.logoSymbol}>
@@ -43,76 +44,99 @@ export default function Header() {
         </NavLink>
       </div>
 
-      {/* Desktop Navigation */}
-      <nav className={styles.mainNav}>
-        <NavLink
-          to="/rooms"
-          className={({ isActive }) =>
-            isActive ? `${styles.navLink} ${styles.active}` : styles.navLink
-          }
+      {/* 🔥 RIGHT SIDE GROUP (GitHub + Desktop Nav + Hamburger) */}
+      <div className={styles.rightGroup}>
+        {/* GitHub Button */}
+        <a
+          href="https://github.com/ThengaCoders"
+          target="_blank"
+          rel="noopener noreferrer"
+          className={styles.githubButton}
         >
-          My Rooms
-        </NavLink>
+          <img
+            src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
+            alt="GitHub"
+            className={styles.githubIcon}
+          />
+        </a>
 
-        {loggedIn ? (
-          <button onClick={handleLogout} className={`${styles.navLink} ${styles.logoutBtn}`}>
-            Logout
-          </button>
-        ) : (
+        {/* Desktop Navigation */}
+        <nav className={styles.mainNav}>
           <NavLink
-            to="/login"
+            to="/rooms"
             className={({ isActive }) =>
               isActive ? `${styles.navLink} ${styles.active}` : styles.navLink
             }
           >
-            Sign In
+            My Rooms
           </NavLink>
-        )}
-      </nav>
 
-      {/* Mobile Menu */}
-      <div className={styles.mobileMenuWrapper} ref={mobileMenuRef}>
-        <button
-          className={`${styles.hamburgerBtn} ${isMobileMenuOpen ? styles.active : ""}`}
-          onClick={() => setIsMobileMenuOpen((prev) => !prev)}
-        >
-          <span className={styles.hamburgerLine}></span>
-          <span className={styles.hamburgerLine}></span>
-          <span className={styles.hamburgerLine}></span>
-        </button>
-
-        {isMobileMenuOpen && (
-          <div className={styles.mobileMenu}>
+          {loggedIn ? (
+            <button
+              onClick={handleLogout}
+              className={`${styles.navLink} ${styles.logoutBtn}`}
+            >
+              Logout
+            </button>
+          ) : (
             <NavLink
-              to="/rooms"
+              to="/login"
               className={({ isActive }) =>
-                isActive ? `${styles.mobileMenuItem} ${styles.active}` : styles.mobileMenuItem
+                isActive ? `${styles.navLink} ${styles.active}` : styles.navLink
               }
-              onClick={() => setIsMobileMenuOpen(false)}
             >
-              <i className="fa-solid fa-door-open"></i>
-              My Rooms
+              Sign In
             </NavLink>
+          )}
+        </nav>
 
-            {loggedIn ? (
-              <button onClick={handleLogout} className={`${styles.mobileMenuItem} ${styles.logoutBtn}`}>
-                <i className="fa-solid fa-sign-out-alt"></i>
-                Logout
-              </button>
-            ) : (
+        {/* Mobile Menu */}
+        <div className={styles.mobileMenuWrapper} ref={mobileMenuRef}>
+          <button
+            className={`${styles.hamburgerBtn} ${isMobileMenuOpen ? styles.active : ""}`}
+            onClick={() => setIsMobileMenuOpen((prev) => !prev)}
+          >
+            <span className={styles.hamburgerLine}></span>
+            <span className={styles.hamburgerLine}></span>
+            <span className={styles.hamburgerLine}></span>
+          </button>
+
+          {isMobileMenuOpen && (
+            <div className={styles.mobileMenu}>
               <NavLink
-                to="/login"
+                to="/rooms"
                 className={({ isActive }) =>
                   isActive ? `${styles.mobileMenuItem} ${styles.active}` : styles.mobileMenuItem
                 }
                 onClick={() => setIsMobileMenuOpen(false)}
               >
-                <i className="fa-solid fa-sign-in-alt"></i>
-                Sign In
+                <i className="fa-solid fa-door-open"></i>
+                My Rooms
               </NavLink>
-            )}
-          </div>
-        )}
+
+              {loggedIn ? (
+                <button
+                  onClick={handleLogout}
+                  className={`${styles.mobileMenuItem} ${styles.logoutBtn}`}
+                >
+                  <i className="fa-solid fa-sign-out-alt"></i>
+                  Logout
+                </button>
+              ) : (
+                <NavLink
+                  to="/login"
+                  className={({ isActive }) =>
+                    isActive ? `${styles.mobileMenuItem} ${styles.active}` : styles.mobileMenuItem
+                  }
+                  onClick={() => setIsMobileMenuOpen(false)}
+                >
+                  <i className="fa-solid fa-sign-in-alt"></i>
+                  Sign In
+                </NavLink>
+              )}
+            </div>
+          )}
+        </div>
       </div>
     </header>
   );
diff --git a/src/components/Header.module.css b/src/components/Header.module.css
index 00fd3ba..998afcd 100644
--- a/src/components/Header.module.css
+++ b/src/components/Header.module.css
@@ -238,3 +238,50 @@ header a * {
   cursor: pointer;
 }
 
+/* =============================
+   RIGHT SIDE GROUP (GitHub + Nav + Hamburger)
+============================= */
+.rightGroup {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+/* =============================
+   GITHUB BUTTON
+============================= */
+.githubButton {
+  display: flex;
+  align-items: center;
+}
+
+.githubIcon {
+  width: 35px;
+  height: 35px;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.githubIcon:hover {
+  transform: scale(1.1);
+}
+
+/* =============================
+   MOBILE — GitHub stays outside (left of hamburger)
+============================= */
+@media (max-width: 480px) {
+  .rightGroup {
+    gap: 12px;
+  }
+
+  .githubButton {
+    order: -1;        /* pushes GitHub before hamburger */
+    margin-right: 6px;
+  }
+
+  .githubIcon {
+  width: 32px;
+  height: 32px;
+  
+}
+}
diff --git a/src/pages/legal/About.jsx b/src/pages/legal/About.jsx
new file mode 100644
index 0000000..f63ef69
--- /dev/null
+++ b/src/pages/legal/About.jsx
@@ -0,0 +1,94 @@
+import React from "react";
+
+export default function About() {
+  return (
+    <div style={styles.container}>
+      <h1>About LeetComp</h1>
+
+      <p>
+        <strong>LeetComp</strong> is a skill-based competitive coding platform
+        built by a passionate team of seven students known as{" "}
+        <strong>Thenga Coders</strong> from the National Institute
+        of Technology Calicut. Users compete by solving LeetCode problems, climb
+        leaderboards, and win prize pools — all in a transparent and skill-based
+        manner.
+      </p>
+
+      <h2>Our Vision</h2>
+      <p>
+        To build India’s most transparent, fair, and community-driven
+        competitive coding ecosystem that rewards consistency, discipline, and
+        real effort — not luck.
+      </p>
+
+      <h2>What We Offer</h2>
+      <ul>
+        <li>Create or join rooms based on LeetCode problem solving</li>
+        <li>Real-time leaderboard & streaks updated via LeetCode APIs</li>
+        <li>Entry-fee rooms with cash prizes (100% prize pool given to winners)</li>
+        <li>Prize splitting when multiple users tie</li>
+        <li>Zero commission — every rupee contributed by users is rewarded back</li>
+        <li>Clean UI, seamless experience, and fair competition</li>
+      </ul>
+
+      <h2>Who Are We?</h2>
+      <p>
+        We are a group of seven NIT Calicut students known as{" "}
+        <strong>Thenga Coders</strong>. We love coding, fairness, product design,
+        and building cool community-driven projects. LeetComp is not a registered
+        company — it is a student-built platform with a commitment to ethics,
+        transparency, and user trust.
+      </p>
+
+      <h2>Open Source Contributions</h2>
+      <p>
+        LeetComp proudly welcomes open-source contributions from developers
+        worldwide. Anyone can contribute by submitting issues, improving features,
+        fixing bugs, enhancing UI, or creating new ideas.
+      </p>
+      <p>
+        You can contribute through our GitHub repository below:
+      </p>
+      <p>
+        <a
+          href="https://github.com/ThengaCoders"
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{ color: "#0a66c2", textDecoration: "none" }}
+        >
+         Visit our GitHub Repository
+        </a>
+      </p>
+
+      <h2>Contact</h2>
+      <p>
+        Email:&nbsp;
+        <a
+          style={styles.emailLink}
+          href="mailto:thengacoders@gmail.com"
+        >
+          thengacoders@gmail.com
+        </a>
+      </p>
+
+      <p>
+        Address:{" "}
+        <strong>
+          National Institute of Technology Calicut, Kozhikode – 673601,
+          Kerala, India
+        </strong>
+      </p>
+    </div>
+  );
+}
+
+const styles = {
+  container: {
+    maxWidth: "900px",
+    margin: "auto",
+    padding: "20px",
+    lineHeight: "1.8",
+    // fontFamily: "Inter, sans-serif",
+  },
+  
+};
diff --git a/src/pages/legal/Contact.jsx b/src/pages/legal/Contact.jsx
new file mode 100644
index 0000000..c53a03c
--- /dev/null
+++ b/src/pages/legal/Contact.jsx
@@ -0,0 +1,45 @@
+import React from "react";
+
+export default function Contact() {
+  return (
+    <div style={styles.container}>
+      <h1>Contact Us</h1>
+
+      <p>
+        If you have questions, support issues, refund concerns, or want to
+        report bugs, you can reach the LeetComp team here:
+      </p>
+
+      <h2>Email</h2>
+      <p>
+                <a className={styles.emailLink} href="mailto:thengacoders@gmail.com">
+                    thengacoders@gmail.com
+                </a>
+            </p>
+
+      <h2>Address</h2>
+      <p>
+        National Institute of Technology Calicut, <br />
+        Kozhikode – 673601, Kerala, India
+      </p>
+
+      <h2>Support Hours</h2>
+      <p>Monday – Saturday, 9:00 AM – 7:00 PM IST</p>
+    </div>
+  );
+}
+
+const styles = {
+  container: {
+    maxWidth: "900px",
+    margin: "auto",
+    padding: "20px",
+    lineHeight: "1.8",
+    fontFamily: "Inter, sans-serif",
+  },
+  emailLink: {
+    color: "#0a66c2",
+    textDecoration: "none",
+    fontWeight: "500",
+  },
+};
diff --git a/src/pages/legal/PrivacyPolicy.jsx b/src/pages/legal/PrivacyPolicy.jsx
new file mode 100644
index 0000000..0c4777e
--- /dev/null
+++ b/src/pages/legal/PrivacyPolicy.jsx
@@ -0,0 +1,89 @@
+import React from "react";
+
+export default function PrivacyPolicy() {
+    return (
+        <div style={styles.container}>
+            <h1>Privacy Policy</h1>
+            <p><strong>Last Updated:</strong> {new Date().toLocaleDateString()}</p>
+
+            <p>
+                Welcome to <strong>LeetComp</strong>. This Privacy Policy explains how we
+                collect, use, and protect your information when you use our platform.
+            </p>
+
+            <h2>1. Who We Are</h2>
+            <p>
+                LeetComp is a skill-based competitive coding platform created by a team
+                of seven students known as{" "}
+        <strong>Thenga Coders</strong> from the National Institute of Technology Calicut.
+                We are not a registered business entity yet and operate as an independent
+                student project team.
+            </p>
+
+            <h2>2. Information We Collect</h2>
+            <ul>
+                <li><strong>Google Login Data</strong> (Name, Email, Profile Picture)</li>
+                <li><strong>Username</strong> (chosen by you)</li>
+                <li><strong>LeetCode ID</strong> (for tracking questions solved)</li>
+                <li><strong>Phone Number</strong> (UPI-linked for payouts)</li>
+                <li><strong>Entry Fee Payments</strong> processed securely via Razorpay</li>
+                <li>Device information and analytics</li>
+            </ul>
+
+            <h2>3. How We Use Your Information</h2>
+            <ul>
+                <li>Leaderboard generation & real-time score updates</li>
+                <li>Room creation & participation management</li>
+                <li>Prize pool distribution and UPI payouts</li>
+                <li>Preventing fraud & ensuring fair gameplay</li>
+                <li>Improving platform experience</li>
+            </ul>
+
+            <h2>4. How We Store & Secure Data</h2>
+            <p>
+                All data is stored securely using encrypted servers. We do not store
+                sensitive financial data. Razorpay handles payment processing in a
+                PCI-DSS compliant manner.
+            </p>
+
+            <h2>5. Sharing of Data</h2>
+            <p>We share data only with:</p>
+            <ul>
+                <li>Razorpay (for processing payments)</li>
+                <li>LeetCode APIs (for leaderboard updates)</li>
+                <li>Legal authorities if required by Indian law</li>
+            </ul>
+
+            <h2>6. Your Rights</h2>
+            <ul>
+                <li>Request profile deletion</li>
+                <li>Edit your information</li>
+                <li>Remove LeetCode ID or phone number</li>
+                <li>Close your account</li>
+            </ul>
+
+            <h2>7. Contact Us</h2>
+            <p> Email:&nbsp;
+                <a className={styles.emailLink} href="mailto:thengacoders@gmail.com">
+                    thengacoders@gmail.com
+                </a>
+            </p>
+            <p>
+                Address: <strong>
+                    National Institute of Technology Calicut, Kozhikode – 673601, Kerala,
+                    India
+                </strong>
+            </p>
+        </div>
+    );
+}
+
+const styles = {
+    container: {
+        maxWidth: "900px",
+        margin: "auto",
+        padding: "20px",
+        lineHeight: "1.8",
+        // fontFamily: "Inter, sans-serif",
+    },
+};
diff --git a/src/pages/legal/RefundPolicy.jsx b/src/pages/legal/RefundPolicy.jsx
new file mode 100644
index 0000000..a99c7c0
--- /dev/null
+++ b/src/pages/legal/RefundPolicy.jsx
@@ -0,0 +1,63 @@
+import React from "react";
+
+export default function RefundPolicy() {
+  return (
+    <div style={styles.container}>
+      <h1>Refund & Cancellation Policy</h1>
+      <p><strong>Last Updated:</strong> {new Date().toLocaleDateString()}</p>
+
+      <p>
+        This Refund Policy outlines how refunds are handled on{" "}
+        <strong>LeetComp</strong>.
+      </p>
+
+      <h2>1. No-Refund Conditions</h2>
+      <p>Refunds are NOT provided when:</p>
+      <ul>
+        <li>User voluntarily joins a room</li>
+        <li>User changes mind</li>
+        <li>User selects wrong room</li>
+        <li>User forgets to compete</li>
+        <li>Room ends normally</li>
+        <li>User fails to win the room</li>
+      </ul>
+
+      <h2>2. Refund Allowed Only When:</h2>
+      <ul>
+        <li>Payment deducted but user not added to room</li>
+        <li>Double payment detected by Razorpay</li>
+        <li>System-wide crash affecting all participants</li>
+        <li>Invalid or failed transaction due to technical issues</li>
+      </ul>
+
+      <h2>3. Cancellation</h2>
+      <p>
+        Users cannot cancel a joined room or request withdrawal after
+        participation.
+      </p>
+
+      <h2>4. Contact for Refund Issues</h2>
+      <p> Email:&nbsp;
+                <a className={styles.emailLink} href="mailto:thengacoders@gmail.com">
+                    thengacoders@gmail.com
+                </a>
+            </p>
+
+      <h2>5. Address</h2>
+      <p>
+        National Institute of Technology Calicut, Kozhikode – 673601, Kerala,
+        India
+      </p>
+    </div>
+  );
+}
+
+const styles = {
+  container: {
+    maxWidth: "900px",
+    margin: "auto",
+    padding: "20px",
+    lineHeight: "1.8",
+    // fontFamily: "Inter, sans-serif",
+  },
+};
diff --git a/src/pages/legal/TermsAndConditions.jsx b/src/pages/legal/TermsAndConditions.jsx
new file mode 100644
index 0000000..2b86bd3
--- /dev/null
+++ b/src/pages/legal/TermsAndConditions.jsx
@@ -0,0 +1,104 @@
+import React from "react";
+
+export default function TermsAndConditions() {
+  return (
+    <div style={styles.container}>
+      <h1>Terms & Conditions</h1>
+      <p><strong>Last Updated:</strong> {new Date().toLocaleDateString()}</p>
+
+      <p>
+        By using <strong>LeetComp</strong>, you agree to the following Terms &
+        Conditions. Please read them carefully.
+      </p>
+
+      <h2>1. About LeetComp</h2>
+      <p>
+        LeetComp is a skill-based competitive coding platform developed by seven
+        students known as{" "}
+        <strong>Thenga Coders</strong> of NIT Calicut. Participants join or create rooms, solve
+        LeetCode problems, and compete on leaderboards. Winners receive the
+        entire prize pool collected from entry fees.
+      </p>
+
+      <h2>2. Eligibility</h2>
+      <ul>
+        <li>You must be 18+ or legally competent.</li>
+        <li>You must use authentic information.</li>
+        <li>You must have a valid UPI-linked phone number.</li>
+      </ul>
+
+      <h2>3. Nature of Platform</h2>
+      <p>This platform is strictly:</p>
+      <ul>
+        <li>Skill-based (not gambling or lottery)</li>
+        <li>Based on LeetCode problem solving</li>
+        <li>Transparent & zero-commission</li>
+      </ul>
+
+      <h2>4. Payments</h2>
+      <p>
+        Entry fees are processed via Razorpay. LeetComp does not store payment
+        card details. All entry fees collected form the prize pool.
+      </p>
+
+      <h2>5. Prize Distribution</h2>
+      <ul>
+        <li>Winner = highest score when room ends</li>
+        <li>If multiple winners tie → prize split equally</li>
+        <li>Payouts are sent via UPI to the verified phone number</li>
+      </ul>
+
+      <h2>6. No Commission</h2>
+      <p>
+        LeetComp takes <strong>0% commission</strong>. Entire prize pool goes to
+        winners.
+      </p>
+
+      <h2>7. Refund Policy</h2>
+      <p>Refunds are governed by our <strong>Refund & Cancellation Policy</strong>.</p>
+
+      <h2>8. User Responsibilities</h2>
+      <ul>
+        <li>No cheating or artificial score manipulation</li>
+        <li>No fake LeetCode accounts</li>
+        <li>No system abuse or exploitation</li>
+      </ul>
+
+      <h2>9. Limitation of Liability</h2>
+      <p>
+        We are not liable for LeetCode API downtime, bank/UPI failures, or users
+        entering incorrect information.
+      </p>
+
+      <h2>10. Governing Law</h2>
+      <p>
+        These terms are governed by Indian law. Any disputes fall under courts
+        in Kerala.
+      </p>
+
+      <h2>11. Contact</h2>
+      <p> Email:&nbsp;
+                <a className={styles.emailLink} href="mailto:thengacoders@gmail.com">
+                    thengacoders@gmail.com
+                </a>
+            </p>
+
+      <p>
+        Address: <strong>
+          National Institute of Technology Calicut, Kozhikode – 673601, Kerala,
+          India
+        </strong>
+      </p>
+    </div>
+  );
+}
+
+const styles = {
+  container: {
+    maxWidth: "900px",
+    margin: "auto",
+    padding: "20px",
+    lineHeight: "1.8",
+    // fontFamily: "Inter, sans-serif",
+  },
+};