Clean up About page

web/package.json

@@ -31,6 +31,7 @@
   },
   "devDependencies": {
     "@tailwindcss/forms": "0.4.0",
+    "@tailwindcss/typography": "^0.5.1",
     "@types/lodash": "4.14.178",
     "@types/node": "16.11.11",
     "@types/react": "17.0.37",

web/pages/about.module.css

@@ -1,64 +1,9 @@
-.div {
-  /* Tailwind Gray 700 */
-  color: #334155;
-  font-size: 1.1em;
-}
-
 .h1,
 .h2,
 .h3 {
-  color: #4338ca;
+  color: #4338ca !important;
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-  font-family: 'Readex Pro', sans-serif;
-}
-
-.h1 {
-  font-size: 2rem;
-}
-
-.h2 {
-  font-size: 2rem;
-}
-
-.h3 {
-  font-size: 1.5rem;
-}
-
-.p {
-  margin-bottom: 0.75rem;
 }
 
 .a {
-  /* Tailwind Indigo 700 */
+  font-weight: 700 !important;
-  color: #4338ca;
-}
-
-.a:hover {
-  text-decoration: solid underline #4338ca 2px;
-}
-
-.aside {
-  border-radius: 0.5rem;
-  /* Tailwind Slate 200 */
-  background-color: #e2e8f0;
-  padding: 1.5rem;
-}
-
-.hr {
-  margin-top: -0.5rem;
-  margin-bottom: 1rem;
-}
-
-.ul {
-  list-style-type: disc;
-}
-
-.ol {
-  list-style-type: decimal;
-}
-
-.li {
-  margin-left: 2rem;
-  margin-bottom: 0.5rem;
 }

web/pages/about.tsx

@@ -8,7 +8,9 @@ export default function About() {
   return (
     <Page margin>
       <SEO title="About" description="About" url="/about" />
-      <Contents />
+      <div className="prose lg:prose-lg mx-auto text-gray-700">
+        <Contents />
+      </div>
     </Page>
   )
 }
@@ -41,17 +43,23 @@ function Contents() {
   return cloneWithStyle(
     <div>
       <h1 id="about">About</h1>
-      <hr />
       <p>
-        Manifold Markets is creating better forecasting through user-created
+        Manifold Markets lets anyone create a prediction market on any topic.
-        prediction markets.
+        Win virtual money betting on what you know, from{' '}
-      </p>
+        <a href="https://manifold.markets/SG/will-magnus-carlsen-lose-any-regula">
-      <p>
+          chess tournaments
-        Our mission is to expand humanity&#39;s collective knowledge by making
+        </a>{' '}
-        prediction markets accessible to all.
+        to{' '}
+        <a href="https://manifold.markets/Duncan/will-the-wayward-falcon-9-booster-h">
+          lunar collisions
+        </a>{' '}
+        to{' '}
+        <a href="https://manifold.markets/Nu%C3%B1oSempere/how-many-additional-subscribers-wil">
+          newsletter subscriber rates
+        </a>{' '}
+        - or learn about the future by creating your own market!
       </p>
       <h1 id="faq">FAQ</h1>
-      <hr />
       <h3 id="what-are-prediction-markets-">What are prediction markets?</h3>
       <p>
         <strong>
@@ -76,7 +84,8 @@ function Contents() {
         <a href="https://en.wikipedia.org/wiki/Efficient-market_hypothesis">
           market&#39;s best estimate
         </a>
-        . This is the power of prediction markets!
+        . Since these probabilities are public, anyone can use them to make
+        better decisions!
       </p>
       <h3 id="how-does-manifold-markets-work-">
         How does Manifold Markets work?
@@ -86,29 +95,30 @@ function Contents() {
           <strong>
             Anyone can create a market for any yes-or-no question.
           </strong>
+          <p>
+            You can ask questions about the future like &quot;Will Taiwan remove
+            its 14-day COVID quarantine by Jun 01, 2022?&quot; If the market
+            thinks this is very likely, you can plan more activities for your
+            trip.
+          </p>
+          <p>
+            You can also ask subjective, personal questions like &quot;Will I
+            enjoy my 2022 Taiwan trip?&quot;. Then share the market with your
+            family and friends and get their takes!
+          </p>
         </li>
-        <p>
-          You can ask questions about the future like &quot;Will Taiwan remove
-          its 14-day COVID quarantine by Jun 01, 2022?&quot; Then use the
-          information to plan your trip.
-        </p>
-        <p>
-          You can also ask subjective, personal questions like &quot;Will I
-          enjoy my 2022 Taiwan trip?&quot;. Then share the market with your
-          family and friends.
-        </p>
         <li>
           <strong>
             Anyone can bet on a market using Manifold Dollars (M$), our platform
             currency.
           </strong>
+          <p>
+            You get M$ 1,000 just for signing up, so you can start betting
+            immediately! When a market creator decides an outcome in your favor,
+            you&#39;ll win Manifold Dollars from people who bet against you.
+          </p>
         </li>
       </ol>
-      <p>
-        You get M$ 1,000 just for signing up, so you can start betting
-        immediately! When a market creator decides an outcome in your favor,
-        you&#39;ll win Manifold Dollars from people who bet against you.
-      </p>
       <h3 id="can-prediction-markets-work-without-real-money-">
         Can prediction markets work without real money?
       </h3>
@@ -223,6 +233,13 @@ function Contents() {
         The result is a market that can function well when trading volume is low
         without any risk to the market creator.
       </p>
+      <p>
+        Read{' '}
+        <a href="https://manifoldmarkets.notion.site/Technical-Guide-to-Manifold-Markets-b9b48a09ea1f45b88d991231171730c5">
+          our technical guide
+        </a>{' '}
+        to find out more!
+      </p>
 
       <h3 id="who-are-we-">Who are we?</h3>
       <p>Manifold Markets is currently a team of three:</p>
@@ -235,14 +252,14 @@ function Contents() {
         We&#39;ve previously launched consumer-facing startups (
         <a href="https://throne.live/">Throne</a>,{' '}
         <a href="http://oneword.games/platform">One Word</a>), and worked at top
-        tech and finance companies (Google, Susquehanna).
+        tech and trading firms (Google, Susquehanna).
       </p>
       <h1 id="talk-to-us-">Talk to us!</h1>
-      <hr />
       <p>Questions? Comments? Want to create a market? Talk to us!</p>
       <ul>
         <li>
-          Email: <code>info@manifold.markets</code>
+          Email:{' '}
+          <a href="mailto:info@manifold.markets">info@manifold.markets</a>
         </li>
         <li>
           Office hours:{' '}
@@ -269,7 +286,6 @@ function Contents() {
       <p></p>
 
       <h1 id="further-reading">Further Reading</h1>
-      <hr />
 
       <ul>
         <li>

web/tailwind.config.js

@@ -21,7 +21,11 @@ module.exports = {
   variants: {
     extend: {},
   },
-  plugins: [require('@tailwindcss/forms'), require('daisyui')],
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+    require('daisyui'),
+  ],
   daisyui: {
     themes: [
       {

yarn.lock

@@ -975,6 +975,15 @@
   dependencies:
     mini-svg-data-uri "^1.2.3"
 
+"@tailwindcss/typography@^0.5.1":
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.1.tgz#486248a9426501f11a9b0295f7cfc0eb29659c46"
+  integrity sha512-AmSzZSgLhHKlILKduU+PKBTHL6c+al82syZlRid1xgmlWwXagLigO+O++B4C0scpMfzW//f/3YCRcwwEHWoU3w==
+  dependencies:
+    lodash.castarray "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.merge "^4.6.2"
+
 "@tootallnate/once@2":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
@@ -4070,6 +4079,11 @@ lodash.camelcase@^4.3.0:
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
   integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
 
+lodash.castarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
+  integrity sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=
+
 lodash.clonedeep@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"