feat: 🎸 pricing (#1935)

improved free tier visibility

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

frontend/app/pricing/page.tsx

@@ -1,8 +1,5 @@
 "use client";
-import { useTranslation } from "react-i18next";
-
 import { StripePricingTable } from "@/lib/components/Stripe/PricingModal/components/PricingTable/PricingTable";
-import Card from "@/lib/components/ui/Card";
 
 import {
   FooterSection,
@@ -13,29 +10,35 @@ import {
 import { UseCases } from "../(home)/components/UseCases/UseCases";
 
 const ContactSalesPage = (): JSX.Element => {
-  const { t } = useTranslation("contact");
-
   return (
     <div className="bg-[#FCFAF6]">
       <HomeHeader color="black" />
 
       <main className="relative flex flex-col items-center px-10">
-        <h1 className="text-4xl font-semibold my-10 text-center">
-          <span className="text-primary">{t("pricing")}</span>
-        </h1>
-        <Card className="my-auto flex flex-col h-fit mt-5 mb-10 p-10 w-full ">
-          <StripePricingTable />
-        </Card>
-        <HomeSection
-          bg="bg-[#362469]"
-        >
+        <section className="flex flex-col h-fit mt-5 mb-10 p-10 w-full">
+          <div className="rounded-xl overflow-hidden">
+            <div className="p-8 text-center">
+              <h1 className="text-6xl font-bold text-primary mb-4">Pricing</h1>
+              <p className="text-2xl font-semibold text-gray-700 mb-6">
+                Explore our extensive free tier, or upgrade for more features.
+              </p>
+            </div>
+
+            {/* Stripe Pricing Table */}
+
+            <StripePricingTable />
+          </div>
+        </section>
+
+        <HomeSection bg="bg-[#362469]">
           <UseCases />
           <div />
         </HomeSection>
-        <HomeSection bg="bg-[#FCFAF6] ">
+
+        <HomeSection bg="bg-[#FCFAF6]">
           <TestimonialsSection />
         </HomeSection>
-        
+
         <HomeSection bg="bg-gradient-to-b from-[#D07DF9] to-[#7A27FD]">
           <FooterSection />
         </HomeSection>

frontend/lib/components/Stripe/PricingModal/components/PricingTable/PricingTable.tsx

@@ -4,11 +4,43 @@ const PUBLISHABLE_KEY = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY;
 export const StripePricingTable = (): JSX.Element => {
   return (
     <>
-      <script async src="https://js.stripe.com/v3/pricing-table.js"></script>
-      <stripe-pricing-table
-        pricing-table-id={PRICING_TABLE_ID}
-        publishable-key={PUBLISHABLE_KEY}
-      ></stripe-pricing-table>
+      <div className="grid md:grid-cols-2 gap-4 p-6 bg-highlight">
+        <div className="space-y-3 text-center">
+          <h3 className="text-2xl font-semibold text-black">Free Tier</h3>
+          <ul className="list-none space-y-2">
+            <li className="text-lg font-medium text-gray-800">🧠 3 brains</li>
+            <li className="text-lg font-medium text-gray-800">
+              🙋‍♂️ 20 questions per day
+            </li>
+            <li className="text-lg font-medium text-gray-800">
+              💾 Up to 30Mb of storage
+            </li>
+          </ul>
+        </div>
+        <div className="space-y-3 text-center">
+          <h3 className="text-2xl font-semibold text-black">
+            Premium Features
+          </h3>
+          <ul className="list-none space-y-2">
+            <li className="text-lg font-medium text-gray-800">
+              🧠 Bigger & more Brains
+            </li>
+            <li className="text-lg font-medium text-gray-800">
+              🙋‍♂️ More daily questions
+            </li>
+            <li className="text-lg font-medium text-gray-800">
+              🚀 Priority support
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div className="p-10">
+        <script async src="https://js.stripe.com/v3/pricing-table.js"></script>
+        <stripe-pricing-table
+          pricing-table-id={PRICING_TABLE_ID}
+          publishable-key={PUBLISHABLE_KEY}
+        ></stripe-pricing-table>
+      </div>
     </>
   );
 };