landing page branding, UI tweaks

web/components/landing-page-panel.tsx

@@ -1,51 +1,54 @@
 import { SparklesIcon } from '@heroicons/react/solid'
+
+import { Contract } from 'common/contract'
+
 import { Spacer } from './layout/spacer'
 import { firebaseLogin } from 'web/lib/firebase/users'
 import { ContractsGrid } from './contract/contracts-list'
-import { Contract } from 'common/contract'
 import { Col } from './layout/col'
 import { Row } from './layout/row'
-import { SiteLink } from './site-link'
-import { formatMoney } from 'common/util/format'
 
-export function FeedPromo(props: { hotContracts: Contract[] }) {
+export function LandingPagePanel(props: { hotContracts: Contract[] }) {
   const { hotContracts } = props
 
   return (
     <>
-      <Col className="mb-6 rounded-xl text-center sm:m-12 sm:mt-0">
+      <Col className="mb-6 rounded-xl sm:m-12 sm:mt-0">
         <img
           height={250}
           width={250}
           className="self-center"
           src="/flappy-logo.gif"
         />
+        <div className='self-center m-4 max-w-[550px]'>
           <h1 className="text-3xl sm:text-6xl xl:text-6xl">
             <div className="font-semibold sm:mb-2">
-            Bet on{' '}
+              Predict{' '}
-            <span className="bg-gradient-to-r from-teal-400 to-green-400 bg-clip-text font-bold text-transparent">
+              <span className="bg-gradient-to-r from-indigo-500 to-blue-500 bg-clip-text font-bold text-transparent">
                 anything!
               </span>
             </div>
           </h1>
           <Spacer h={6} />
-        <div className="mb-4 px-2 text-gray-500">
+          <div className="mb-4 px-2 ">
-          Bet on any topic imaginable with play-money markets. Or create your
+            Create a play-money prediction market on any topic you care about
-          own!
+            and bet with your friends on what will happen!
-          <br />
             <br />
+            {/* <br />
           Sign up and get {formatMoney(1000)} - worth $10 to your{' '}
           <SiteLink className="font-semibold" href="/charity">
             favorite charity.
           </SiteLink>
-          <br />
+          <br /> */}
           </div>
+        </div>
+
         <Spacer h={6} />
         <button
-          className="self-center rounded-md border-none bg-gradient-to-r from-teal-500 to-green-500 py-4 px-6 text-lg font-semibold normal-case text-white hover:from-teal-600 hover:to-green-600"
+          className="self-center rounded-md border-none bg-gradient-to-r from-indigo-500 to-blue-500 py-4 px-6 text-lg font-semibold normal-case text-white hover:from-indigo-600 hover:to-blue-600"
           onClick={firebaseLogin}
         >
-          Start betting now
+          Get started
         </button>{' '}
       </Col>
 

web/pages/index.tsx

@@ -3,7 +3,7 @@ import Router from 'next/router'
 
 import { Contract, getContractsBySlugs } from 'web/lib/firebase/contracts'
 import { Page } from 'web/components/page'
-import { FeedPromo } from 'web/components/feed-create'
+import { LandingPagePanel } from 'web/components/landing-page-panel'
 import { Col } from 'web/components/layout/col'
 import { useUser } from 'web/hooks/use-user'
 import { ManifoldLogo } from 'web/components/nav/manifold-logo'
@@ -46,7 +46,7 @@ const Home = (props: { hotContracts: Contract[] }) => {
       </div>
       <Col className="items-center">
         <Col className="max-w-3xl">
-          <FeedPromo hotContracts={hotContracts ?? []} />
+          <LandingPagePanel hotContracts={hotContracts ?? []} />
           {/* <p className="mt-6 text-gray-500">
             View{' '}
             <SiteLink href="/markets" className="font-bold text-gray-700">