Improve spacing on landing-page, about faq.

web/components/bets-list.tsx

@@ -153,7 +153,10 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
         />
       </Row>
 
-      <div className="collapse-content" style={{ backgroundColor: 'white' }}>
+      <div
+        className="collapse-content !px-0"
+        style={{ backgroundColor: 'white' }}
+      >
         <Spacer h={8} />
 
         <ContractBetsTable contract={contract} bets={bets} />

web/components/header.tsx

@@ -97,7 +97,10 @@ function SignedOutHeaders(props: { themeClasses?: string }) {
   return (
     <>
       <div
-        className={clsx('text-base font-medium cursor-pointer', themeClasses)}
+        className={clsx(
+          'text-base font-medium cursor-pointer whitespace-nowrap',
+          themeClasses
+        )}
         onClick={firebaseLogin}
       >
         Sign in
@@ -106,8 +109,12 @@ function SignedOutHeaders(props: { themeClasses?: string }) {
   )
 }
 
-export function Header(props: { darkBackground?: boolean; children?: any }) {
-  const { darkBackground, children } = props
+export function Header(props: {
+  darkBackground?: boolean
+  className?: string
+  children?: any
+}) {
+  const { darkBackground, className, children } = props
 
   const user = useUser()
 
@@ -115,7 +122,10 @@ export function Header(props: { darkBackground?: boolean; children?: any }) {
 
   return (
     <nav
-      className="max-w-7xl w-full flex flex-row justify-between md:justify-start pt-5 pb-4"
+      className={clsx(
+        'max-w-7xl w-full flex flex-row justify-between md:justify-start pt-5 pb-4',
+        className
+      )}
       aria-label="Global"
     >
       <Link href="/">
@@ -137,12 +147,7 @@ export function Header(props: { darkBackground?: boolean; children?: any }) {
         </a>
       </Link>
 
-      <Row
-        className={clsx(
-          'gap-8 mt-1',
-          darkBackground ? 'md:ml-16' : 'md:ml-auto'
-        )}
-      >
+      <Row className="gap-6 sm:gap-8 mt-1 md:ml-16">
         {children}
 
         {user ? (

web/pages/about.tsx

@@ -5,12 +5,10 @@ import styles from './about.module.css'
 
 export default function About() {
   return (
-    <div>
+    <div className="max-w-3xl px-4 mx-auto">
       <SEO title="About" description="About" url="/about" />
       <Header />
-      <div className="max-w-3xl pt-8 pb-0 sm:pb-8 mx-auto">
-        <Contents />
-      </div>
+      <Contents />
     </div>
   )
 }

web/pages/landing-page.tsx

@@ -32,18 +32,19 @@ function Hero() {
 
   return (
     <div className="overflow-hidden h-screen bg-world-trading bg-cover bg-gray-900 bg-center lg:bg-left">
+      <div className="max-w-7xl w-full mx-auto">
+        <Header className="px-6 sm:px-8" darkBackground>
+          <div
+            className="text-base font-medium text-white cursor-pointer hover:underline hover:decoration-teal-500 hover:decoration-2"
+            onClick={scrollToAbout}
+          >
+            About
+          </div>
+        </Header>
+      </div>
       <main>
         <div className="pt-32 sm:pt-8 lg:pt-0 lg:pb-14 lg:overflow-hidden">
           <div className="mx-auto max-w-7xl lg:px-8">
-            <Header darkBackground>
-              <div
-                className="text-base font-medium text-white cursor-pointer hover:underline hover:decoration-teal-500 hover:decoration-2"
-                onClick={scrollToAbout}
-              >
-                About
-              </div>
-            </Header>
-
             <div className="lg:grid lg:grid-cols-2 lg:gap-8">
               <div className="mx-auto max-w-md px-8 sm:max-w-2xl sm:text-center lg:px-0 lg:text-left lg:flex lg:items-center">
                 <div className="lg:py-24">
@@ -53,7 +54,7 @@ function Hero() {
                       prediction markets
                     </div>
                   </h1>
-                  <p className="mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
+                  <p className="mt-3 text-base text-white sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
                     Better forecasting through accessible prediction markets
                     <br />
                     for you and your community
@@ -114,7 +115,7 @@ function FeaturesSection() {
   return (
     <div id="about" className="w-full py-16 bg-green-50">
       <div className="max-w-4xl py-12 mx-auto">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
           <div className="lg:text-center">
             <h2 className="text-base text-teal-600 font-semibold tracking-wide uppercase">
               Mantic Markets
@@ -162,8 +163,8 @@ function ExploreMarketsSection() {
   const contracts = useContracts()
 
   return (
-    <div className="max-w-4xl py-8 mx-auto">
-      <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-indigo-700 sm:text-4xl">
+    <div className="max-w-4xl px-4 py-8 mx-auto">
+      <p className="my-12 text-3xl leading-8 font-extrabold tracking-tight text-indigo-700 sm:text-4xl">
         Explore our markets
       </p>
       <SearchableGrid contracts={contracts === 'loading' ? [] : contracts} />