From 54cd63259a2787d582353fb97f89edb58efe6060 Mon Sep 17 00:00:00 2001
From: Yasir Akhlaque <akhlaqueyasir28@gmail.com>
Date: Sun, 12 Jan 2025 17:48:22 +0530
Subject: [PATCH 1/2] Imrpoved UI Of Pricing

---
 pricing.css  | 221 ++++++++++++++++++++++++++++++++++-----------------
 pricing.html |  76 +++++++++---------
 2 files changed, 186 insertions(+), 111 deletions(-)

diff --git a/pricing.css b/pricing.css
index 29ea339..1bfe5da 100644
--- a/pricing.css
+++ b/pricing.css
@@ -255,81 +255,152 @@ body {
 }
 
 .pricing-section {
-    text-align: center;
-    padding: 50px 20px;
-}
-
-.pricing-section h1 {
-    font-size: 36px;
-    color: var(--heading-color);
-    margin-bottom: 20px;
-}
-
-.pricing-section p {
-    color: var(--container-text);
-    font-size: 18px;
-    margin-bottom: 40px;
-}
-
-.pricing-cards {
-    display: flex;
-    justify-content: center;
-    gap: 20px;
-    flex-wrap: wrap;
-}
-
-.pricing-card {
-    background: var(--card-bg);
-    border: 2px solid #ffd465;
-    border-radius: 8px;
-    width: 280px;
-    text-align: center;
-    padding: 20px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s ease;
-}
-
-.pricing-card:hover {
-    transform: translateY(-10px);
-}
-
-.pricing-card h3 {
-    font-size: 24px;
-    color: #d6a52b;
-    margin-bottom: 15px;
-}
-
-.pricing-card .price {
-    font-size: 30px;
-    color: var(--price-color);
-    margin: 10px 0;
-}
-
-.pricing-card ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-.pricing-card ul li {
-    color: var(--card-text);
-    margin: 10px 0;
-}
-
-.pricing-card button {
-    background: #d6a52b;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    padding: 10px 20px;
-    font-size: 16px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.pricing-card button:hover {
-    background: #8b4513;
-}
+            padding: 5rem 2rem;
+            background: linear-gradient(135deg, #f6f8fd 0%, #f1f4f9 100%);
+            font-family: 'Arial', sans-serif;
+        }
+
+        .about-box {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .about-box h1 {
+            font-size: 2.5rem;
+            color: #2d3748;
+            margin-bottom: 1rem;
+            background: linear-gradient(to right, #2d3748, #4a5568);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+
+        .about-box > p {
+            font-size: 1.2rem;
+            color: #718096;
+            margin-bottom: 4rem;
+        }
+
+        .pricing-cards {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 2rem;
+            padding: 1rem;
+        }
+
+        .pricing-card {
+            background: white;
+            border-radius: 20px;
+            padding: 2rem;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .pricing-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+        }
+
+        .pricing-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, #d6a52b, #ffb700);
+            transform: scaleX(0);
+            transition: transform 0.3s ease;
+        }
+
+        .pricing-card:hover::before {
+            transform: scaleX(1);
+        }
+
+        .pricing-card h3 {
+            font-size: 1.5rem;
+            color: #2d3748;
+            margin-bottom: 1rem;
+        }
+
+        .price {
+            font-size: 2.5rem;
+            font-weight: bold;
+            color: #d6a52b;
+            margin-bottom: 2rem;
+        }
+
+        .pricing-card ul {
+            list-style: none;
+            padding: 0;
+            margin-bottom: 2rem;
+        }
+
+        .pricing-card li {
+            padding: 0.75rem 0;
+            color: #4a5568;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .pricing-card li::before {
+            content: '✓';
+            color: #d6a52b;
+            font-weight: bold;
+        }
+
+        .pricing-card button {
+            width: 100%;
+            padding: 1rem;
+            border: none;
+            border-radius: 10px;
+            background: linear-gradient(90deg, #d6a52b, #ffb700);
+            color: white;
+            font-weight: bold;
+            cursor: pointer;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+
+        .pricing-card button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
+        }
+
+        /* Popular plan highlight */
+        .pricing-card:nth-child(2) {
+            border: 2px solid #d6a52b;
+            transform: scale(1.05);
+        }
+
+        .pricing-card:nth-child(2)::after {
+            content: 'MOST POPULAR';
+            position: absolute;
+            top: 1rem;
+            right: -2rem;
+            background: #d6a52b;
+            color: white;
+            padding: 0.5rem 3rem;
+            transform: rotate(45deg);
+            font-size: 0.75rem;
+            font-weight: bold;
+        }
+
+        @media (max-width: 768px) {
+            .pricing-cards {
+                grid-template-columns: 1fr;
+            }
+
+            .pricing-card:nth-child(2) {
+                transform: scale(1);
+            }
+
+            .about-box h1 {
+                font-size: 2rem;
+            }
+        }
 .image-button1 {
     position: fixed;
     top: 5px;
diff --git a/pricing.html b/pricing.html
index e34b793..f51ef4e 100644
--- a/pricing.html
+++ b/pricing.html
@@ -167,47 +167,51 @@ <h2>Ajivika</h2>
     <!-- Pricing Section -->
     <section class="pricing-section">
       <div class="about-box">
-        <h1 style="text-align: center">Our Pricing Plans</h1>
-        <p style="text-align: center">
-          Choose a plan that suits your needs the best.
-        </p>
+          <h1>Our Pricing Plans</h1>
+          <p>Choose a plan that suits your needs the best.</p>
 
-        <div class="pricing-cards">
-          <div class="pricing-card">
-            <h3>Basic Plan</h3>
-            <p class="price">$10/month</p>
-            <ul>
-              <li>Access to basic features</li>
-              <li>Email support</li>
-              <li>1 GB storage</li>
-            </ul>
-            <button>Choose Plan</button>
-          </div>
+          <div class="pricing-cards">
+              <div class="pricing-card">
+                  <h3>Basic Plan</h3>
+                  <p class="price">$10<span style="font-size: 1rem">/month</span></p>
+                  <ul>
+                      <li>Access to basic features</li>
+                      <li>Email support</li>
+                      <li>1 GB storage</li>
+                      <li>Community access</li>
+                  </ul>
+                  <button>Choose Plan</button>
+              </div>
 
-          <div class="pricing-card">
-            <h3>Standard Plan</h3>
-            <p class="price">$20/month</p>
-            <ul>
-              <li>Access to all features</li>
-              <li>Priority email support</li>
-              <li>10 GB storage</li>
-            </ul>
-            <button>Choose Plan</button>
-          </div>
+              <div class="pricing-card">
+                  <h3>Standard Plan</h3>
+                  <p class="price">$20<span style="font-size: 1rem">/month</span></p>
+                  <ul>
+                      <li>Access to all features</li>
+                      <li>Priority email support</li>
+                      <li>10 GB storage</li>
+                      <li>Priority community access</li>
+                      <li>Monthly webinars</li>
+                  </ul>
+                  <button>Choose Plan</button>
+              </div>
 
-          <div class="pricing-card">
-            <h3>Premium Plan</h3>
-            <p class="price">$30/month</p>
-            <ul>
-              <li>Access to premium features</li>
-              <li>24/7 support</li>
-              <li>Unlimited storage</li>
-            </ul>
-            <button>Choose Plan</button>
+              <div class="pricing-card">
+                  <h3>Premium Plan</h3>
+                  <p class="price">$30<span style="font-size: 1rem">/month</span></p>
+                  <ul>
+                      <li>Access to premium features</li>
+                      <li>24/7 support</li>
+                      <li>Unlimited storage</li>
+                      <li>VIP community access</li>
+                      <li>Weekly webinars</li>
+                      <li>1-on-1 consultation</li>
+                  </ul>
+                  <button>Choose Plan</button>
+              </div>
           </div>
-        </div>
       </div>
-    </section>
+  </section>
     <!-- Floating Image Button -->
     <button class="image-button">
       <img src="./image.png" alt="Image Button" class="image-icon" />

From 888df7c31f6d6204409c666f37a61ffc14c5d4c0 Mon Sep 17 00:00:00 2001
From: Yasir Akhlaque <akhlaqueyasir28@gmail.com>
Date: Sun, 12 Jan 2025 18:24:32 +0530
Subject: [PATCH 2/2] Fixed Dark Mode

---
 pricing.css  | 294 +++++++++++++++++++++++++--------------------------
 pricing.html |   2 +-
 2 files changed, 148 insertions(+), 148 deletions(-)

diff --git a/pricing.css b/pricing.css
index 1bfe5da..3cfe2ec 100644
--- a/pricing.css
+++ b/pricing.css
@@ -254,153 +254,153 @@ body {
     padding: 0;
 }
 
-.pricing-section {
-            padding: 5rem 2rem;
-            background: linear-gradient(135deg, #f6f8fd 0%, #f1f4f9 100%);
-            font-family: 'Arial', sans-serif;
-        }
-
-        .about-box {
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-
-        .about-box h1 {
-            font-size: 2.5rem;
-            color: #2d3748;
-            margin-bottom: 1rem;
-            background: linear-gradient(to right, #2d3748, #4a5568);
-            -webkit-background-clip: text;
-            background-clip: text;
-            color: transparent;
-        }
-
-        .about-box > p {
-            font-size: 1.2rem;
-            color: #718096;
-            margin-bottom: 4rem;
-        }
-
-        .pricing-cards {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-            gap: 2rem;
-            padding: 1rem;
-        }
-
-        .pricing-card {
-            background: white;
-            border-radius: 20px;
-            padding: 2rem;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .pricing-card:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
-        }
-
-        .pricing-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 4px;
-            background: linear-gradient(90deg, #d6a52b, #ffb700);
-            transform: scaleX(0);
-            transition: transform 0.3s ease;
-        }
-
-        .pricing-card:hover::before {
-            transform: scaleX(1);
-        }
-
-        .pricing-card h3 {
-            font-size: 1.5rem;
-            color: #2d3748;
-            margin-bottom: 1rem;
-        }
-
-        .price {
-            font-size: 2.5rem;
-            font-weight: bold;
-            color: #d6a52b;
-            margin-bottom: 2rem;
-        }
-
-        .pricing-card ul {
-            list-style: none;
-            padding: 0;
-            margin-bottom: 2rem;
-        }
-
-        .pricing-card li {
-            padding: 0.75rem 0;
-            color: #4a5568;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        .pricing-card li::before {
-            content: '✓';
-            color: #d6a52b;
-            font-weight: bold;
-        }
-
-        .pricing-card button {
-            width: 100%;
-            padding: 1rem;
-            border: none;
-            border-radius: 10px;
-            background: linear-gradient(90deg, #d6a52b, #ffb700);
-            color: white;
-            font-weight: bold;
-            cursor: pointer;
-            transition: transform 0.2s ease, box-shadow 0.2s ease;
-        }
-
-        .pricing-card button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
-        }
-
-        /* Popular plan highlight */
-        .pricing-card:nth-child(2) {
-            border: 2px solid #d6a52b;
-            transform: scale(1.05);
-        }
-
-        .pricing-card:nth-child(2)::after {
-            content: 'MOST POPULAR';
-            position: absolute;
-            top: 1rem;
-            right: -2rem;
-            background: #d6a52b;
-            color: white;
-            padding: 0.5rem 3rem;
-            transform: rotate(45deg);
-            font-size: 0.75rem;
-            font-weight: bold;
-        }
-
-        @media (max-width: 768px) {
-            .pricing-cards {
-                grid-template-columns: 1fr;
-            }
-
-            .pricing-card:nth-child(2) {
-                transform: scale(1);
-            }
-
-            .about-box h1 {
-                font-size: 2rem;
-            }
-        }
+:root {
+    --primary-color: #d6a52b; /* Gold gradient base */
+    --secondary-color: #ffb700; /* Bright yellow gradient base */
+    --card-bg-color: white; /* Default card background for light mode */
+    --text-color: #2d3748; /* Dark text for light mode */
+    --subtext-color: #4a5568; /* Subtle text for light mode */
+    --button-text-color: white; /* Button text color */
+    --button-hover-shadow: rgba(59, 130, 246, 0.4); /* Button hover shadow */
+    --card-shadow: rgba(0, 0, 0, 0.1); /* Card shadow */
+    --card-hover-shadow: rgba(0, 0, 0, 0.15); /* Card hover shadow */
+    --popular-badge-bg: var(--primary-color); /* MOST POPULAR badge background */
+}
+
+body.dark {
+    --primary-color: #ffb700; /* Bright yellow for dark mode */
+    --secondary-color: #d6a52b; /* Gold gradient base for dark mode */
+    --card-bg-color: #2d3748; /* Dark card background */
+    --text-color: #f9f9f9; /* Light text for dark mode */
+    --subtext-color: #cbd5e0; /* Subtle light text for dark mode */
+    --button-text-color: #2d3748; /* Dark button text for contrast */
+    --button-hover-shadow: rgba(255, 183, 0, 0.4); /* Button hover shadow for dark mode */
+    --card-shadow: rgba(0, 0, 0, 0.3); /* Darker card shadow */
+    --card-hover-shadow: rgba(0, 0, 0, 0.5); /* Darker hover shadow */
+    --popular-badge-bg: var(--secondary-color); /* MOST POPULAR badge background for dark mode */
+}
+
+.pricing-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 2rem;
+    padding: 1rem;
+}
+
+.pricing-card {
+    background: var(--card-bg-color);
+    border-radius: 20px;
+    padding: 2rem;
+    box-shadow: 0 10px 30px var(--card-shadow);
+    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.pricing-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 20px 40px var(--card-hover-shadow);
+}
+
+.pricing-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+    transform: scaleX(0);
+    transition: transform 0.3s ease;
+}
+
+.pricing-card:hover::before {
+    transform: scaleX(1);
+}
+
+.pricing-card h3 {
+    font-size: 1.5rem;
+    color: var(--text-color);
+    margin-bottom: 1rem;
+}
+
+.price {
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: var(--primary-color);
+    margin-bottom: 2rem;
+}
+
+.pricing-card ul {
+    list-style: none;
+    padding: 0;
+    margin-bottom: 2rem;
+}
+
+.pricing-card li {
+    padding: 0.75rem 0;
+    color: var(--subtext-color);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.pricing-card li::before {
+    content: '✓';
+    color: var(--primary-color);
+    font-weight: bold;
+}
+
+.pricing-card button {
+    width: 100%;
+    padding: 1rem;
+    border: none;
+    border-radius: 10px;
+    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+    color: var(--button-text-color);
+    font-weight: bold;
+    cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.pricing-card button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px var(--button-hover-shadow);
+}
+
+/* Popular plan highlight */
+.pricing-card:nth-child(2) {
+    border: 2px solid var(--primary-color);
+    transform: scale(1.05);
+}
+
+.pricing-card:nth-child(2)::after {
+    content: 'MOST POPULAR';
+    position: absolute;
+    top: 1rem;
+    right: -2rem;
+    background: var(--popular-badge-bg);
+    color: white;
+    padding: 0.5rem 3rem;
+    transform: rotate(45deg);
+    font-size: 0.75rem;
+    font-weight: bold;
+}
+
+@media (max-width: 768px) {
+    .pricing-cards {
+        grid-template-columns: 1fr;
+    }
+
+    .pricing-card:nth-child(2) {
+        transform: scale(1);
+    }
+
+    .about-box h1 {
+        font-size: 2rem;
+    }
+}
+
 .image-button1 {
     position: fixed;
     top: 5px;
diff --git a/pricing.html b/pricing.html
index f51ef4e..bbb66ef 100644
--- a/pricing.html
+++ b/pricing.html
@@ -165,7 +165,7 @@ <h2>Ajivika</h2>
     </button>
 
     <!-- Pricing Section -->
-    <section class="pricing-section">
+    <section class="pricing-section light">
       <div class="about-box">
           <h1>Our Pricing Plans</h1>
           <p>Choose a plan that suits your needs the best.</p>