From 06b3609b1148c4f8706ed5ba8250f62f95f4ff72 Mon Sep 17 00:00:00 2001
From: emilyokeefe <emyokeefe@gmail.com>
Date: Wed, 6 Aug 2025 12:02:50 -0400
Subject: [PATCH 1/2] Changed wording

---
 app/About/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/About/page.tsx b/app/About/page.tsx
index 43decb32..8d5786cf 100644
--- a/app/About/page.tsx
+++ b/app/About/page.tsx
@@ -25,7 +25,7 @@ export default function About() {
         <h1 className="text-3xl font-bold  mb-4 text-center">About Compass</h1>
         <div className="et_pb_text_inner">
           {/*<h1 id="abstract">Abstract</h1>*/}
-          <p>Forming and maintaining close connections is fundamental for most people’s mental health—and hence overall
+          <p>Close connections is fundamental for most people’s mental health—and hence overall
             well-being. However, currently available meeting platforms, lacking transparency and searchability, are
             deeply failing to bring together thoughtful people. This platform is designed to
             foster close friendships and relationships for people who prioritize learning, curiosity, and critical

From 840380664dd2e9e72419de222a794e47073dec15 Mon Sep 17 00:00:00 2001
From: emilyokeefe <emyokeefe@gmail.com>
Date: Wed, 6 Aug 2025 16:30:33 -0400
Subject: [PATCH 2/2] remove share button because it doesn't function yet

---
 app/About/page.tsx | 154 ++++++++++++++++++++++++++++++++++-----------
 1 file changed, 117 insertions(+), 37 deletions(-)

diff --git a/app/About/page.tsx b/app/About/page.tsx
index 8d5786cf..30a1365d 100644
--- a/app/About/page.tsx
+++ b/app/About/page.tsx
@@ -21,46 +21,126 @@ export default function About() {
   return (
     <div className="text-gray-600 dark:text-white min-h-screen p-6">
       {aColor}
-      <div className="max-w-3xl mx-auto">
-        <h1 className="text-3xl font-bold  mb-4 text-center">About Compass</h1>
+      <div className="w-full">
+        <div className="w-screen relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] bg-gray-100 dark:bg-gray-800 py-8 mb-8 overflow-hidden">
+          <div className="relative z-10 max-w-3xl mx-auto px-4">
+            <h1 className="text-3xl font-bold mb-4 text-center">Why Choose Compass?</h1>
+            <div className="flex flex-col md:flex-row items-center justify-center mb-8 gap-8">
+              <div className="w-40 h-40 bg-gray-200 rounded-xl flex items-center justify-center overflow-hidden">
+                <img src="/favicon.ico" alt="Compass logo" className="w-full h-full object-cover" />
+              </div>
+              <div className="w-full max-w-2xl mx-auto text-center md:text-left">
+                <h3 className="text-2xl font-bold mb-2">Built for users, by users.</h3>
+                <p className="text-gray-600 dark:text-gray-300 text-lg">Open, transparent, and truly user-first. No paywalls, no addictive algorithms, no venture capital. Just real people, real values, and real connections.</p>
+              </div>
+            </div>
+            <div className="flex justify-center mb-8">
+              <Link
+                href="/register"
+                className="px-8 py-3 text-white text-lg rounded-full font-bold shadow transition bg-gradient-to-r from-red-700 to-red-900 hover:from-red-800 hover:to-red-950"
+              >
+                Join Now
+              </Link>
+            </div>
+          </div>
+        </div>
         <div className="et_pb_text_inner">
-          {/*<h1 id="abstract">Abstract</h1>*/}
-          <p>Close connections is fundamental for most people’s mental health—and hence overall
-            well-being. However, currently available meeting platforms, lacking transparency and searchability, are
-            deeply failing to bring together thoughtful people. This platform is designed to
-            foster close friendships and relationships for people who prioritize learning, curiosity, and critical
-            thinking. The directory of users is fully transparent and each profile contains extensive
-            information, allowing searches over all users through powerful filtering and sorting methods. To prevent any
-            value drift from this pro-social mission, the platform will always be free, ad-free, not for profit,
-            donation-supported, open source, and democratically governed.</p>
-          <div className="mt-8 flex space-x-4 justify-center">
-            <Link
-              href="/manifesto"
-              className="px-6 py-3 bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-white text-lg rounded-full hover:bg-gray-300 dark:hover:bg-gray-500 transition"
-            >
-              The Deeper Why
-            </Link>
+          <div className="max-w-3xl mx-auto mt-8 mb-8">
+            <section className="mb-12">
+              <h2 className="text-3xl font-bold mb-4">Search EXACTLY What You're Looking For</h2>
+              <p className="text-lg text-gray-500">Keyword search from our entire database. Meet your introverted rock climbing dream bae who's also into Magic the Gathering and cats. ME-OW!</p>
+            </section>
+            <section className="mb-12">
+              <h2 className="text-3xl font-bold mb-4">Get Notified About Your Searches</h2>
+              <p className="text-lg text-gray-500">When someone joins and meets your search criteria, get notified!</p>
+              <p className="text-lg text-gray-500">Goodbye swipe addiction. Hello precious time!</p>
+            </section>
+            <section className="mb-12">
+              <h2 className="text-3xl font-bold mb-4">Everything is free. Seriously.</h2>
+              <p className="text-lg text-gray-500">No subscriptions. No paywalls. We're designed by regular people who were fed up by inaccessible and extractive dating apps.</p>
+            </section>
+            <section className="mb-12">
+              <h2 className="text-3xl font-bold mb-4">Character is Hot</h2>
+              <p className="text-lg text-gray-500">Personality first, pictures last. Instead of swiping on people based on how hot that six pack looks, let's focus on how he saved that cat from a tree.</p>
+            </section>
+            <section className="mb-12">
+              <h2 className="text-3xl font-bold mb-4">Fully Transparent</h2>
+              <p className="text-lg text-gray-500">You're in the know. Our code is open source, there are clear policies, absolutely no data-selling, and we are community designed.</p>
+            </section>
+          </div>
+        </div>
+        <div className="w-screen relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] bg-gray-100 dark:bg-gray-800 py-8 mt-12 overflow-hidden">
+          <div className="relative z-10 max-w-3xl mx-auto px-4">
+            <h3 className="text-4xl font-bold text-center mt-8 mb-8">Help Improve Compass</h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+              <div className="bg-white dark:bg-gray-900 rounded-xl shadow p-6 flex flex-col items-center">
+                <h5 id="give-suggestions-or-contribute" className="font-bold mb-4 text-xl text-center">Give Suggestions or Contribute</h5>
+                <p className="mb-4 text-center">Give suggestions or let us know you want to help through this form!</p>
+                <a
+                  href="https://forms.gle/tKnXUMAbEreMK6FC6"
+                  className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition"
+                  target="_blank" rel="noopener noreferrer"
+                >
+                  Suggest Here
+                </a>
+              </div>
+              <div className="bg-white dark:bg-gray-900 rounded-xl shadow p-6 flex flex-col items-center">
+                <h5 id="join-chats" className="font-bold mb-4 text-xl text-center">Join Chats</h5>
+                <p className="mb-4 text-center">Join the community to shape the product—or just chat with like-minded people.</p>
+                <a
+                  href="https://discord.gg/8Vd7jzqjun"
+                  className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition"
+                  target="_blank" rel="noopener noreferrer"
+                >
+                  Join the Discord
+                </a>
+              </div>
+              <div className="bg-white dark:bg-gray-900 rounded-xl shadow p-6 flex flex-col items-center">
+                <h5 id="share" className="font-bold mb-4 text-xl text-center">Tell Your Friends and Family</h5>
+                <p className="mb-4 text-center">We're a new app, and the more people who use it, the more useful it is!</p>
+              </div>
+              <div className="bg-white dark:bg-gray-900 rounded-xl shadow p-6 flex flex-col items-center">
+                <h5 id="donate" className="font-bold mb-4 text-xl text-center">Donate</h5>
+                <p className="mb-4 text-center">We're not-for-profit with no paywalls for the best user experience. Support the infrastructure. (GitHub has increased transparency, but requires an account).</p>
+                <div className="flex flex-col gap-4 w-full items-center">
+                  <a
+                    href="https://www.paypal.com/paypalme/MartinBraquet"
+                    className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition w-full text-center"
+                    target="_blank" rel="noopener noreferrer"
+                  >
+                    Donate on PayPal
+                  </a>
+                  <a
+                    href="https://github.com/sponsors/MartinBraquet"
+                    className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition w-full text-center"
+                    target="_blank" rel="noopener noreferrer"
+                  >
+                    Donate on GitHub
+                  </a>
+                </div>
+              </div>
+              <div className="bg-white dark:bg-gray-900 rounded-xl shadow p-6 flex flex-col items-center md:col-span-2">
+                <h5 id="github-repo" className="font-bold mb-4 text-xl text-center">Help Develop the App</h5>
+                <p className="mb-4 text-center">The source code and instructions for development are available on GitHub.</p>
+                <a
+                  href="https://github.com/BayesBond/BayesBond"
+                  className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition"
+                  target="_blank" rel="noopener noreferrer"
+                >
+                  View Code
+                </a>
+              </div>
+            </div>
+            <div className="flex justify-center mt-12 mb-16">
+              <Link
+                href="/register"
+                className="px-8 py-3 text-white text-lg rounded-full font-bold shadow transition bg-gradient-to-r from-red-700 to-red-900 hover:from-red-800 hover:to-red-950"
+              >
+                Join Compass
+              </Link>
+            </div>
           </div>
-          <h3 id="how-to-help">How to Help</h3>
-          <h5 id="give-suggestions-or-contribute">Give Suggestions or Contribute</h5>
-          <p>Give suggestions or let us know you want to help through this <a
-            href="https://forms.gle/tKnXUMAbEreMK6FC6">form</a>!</p>
-          <h5 id="join-chats">Join Chats</h5>
-          <p>Join the community on <a
-            href="https://discord.gg/8Vd7jzqjun">Discord</a> to shape and test the product—or just chat with
-            like-minded people.</p>
-          <h5 id="share">Share</h5>
-          <p>Share the app and article with people who may benefit from the product.</p>
-          <h5 id="donate">Donate</h5>
-          <p>Donate to support the initial infrastructure via <a
-            href="https://www.paypal.com/paypalme/MartinBraquet">PayPal</a> or <a
-            href="https://github.com/sponsors/MartinBraquet">GitHub</a> (GitHub has increased transparency, but requires
-            an account).</p>
-          <h5 id="github-repo">Source Code</h5>
-          <p>The source code and instructions for development are available on <a href="https://github.com/BayesBond/BayesBond">GitHub</a>.</p>
         </div>
-        <h3 id="how-to-help">Statistics</h3>
-        <p>{totalUsers} total users</p>
       </div>
     </div>
   );