diff --git a/web/components/feed-create.tsx b/web/components/feed-create.tsx index 8b0462a6..8388f9db 100644 --- a/web/components/feed-create.tsx +++ b/web/components/feed-create.tsx @@ -8,43 +8,47 @@ import { firebaseLogin, User } from '../lib/firebase/users' import { ContractsGrid } from './contracts-list' import { Contract } from '../../common/contract' import { TagsList } from './tags-list' +import { Col } from './layout/col' export function FeedPromo(props: { hotContracts: Contract[] }) { const { hotContracts } = props return ( <> -
- + <Col className="w-full bg-white p-6 sm:border-2 sm:border-indigo-100 sm:rounded-lg"> + <h1 className="mt-4 text-4xl sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl"> + <div className="mb-2">Create your own</div> + <div className="font-bold bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-green-400"> + prediction markets + </div> + </h1> + <Spacer h={6} /> <div className="text-gray-500 mb-4"> - On Manifold Markets, you can find prediction markets run by your - favorite creators. + Find prediction markets run by your favorite creators, or make your + own. <br /> - <button - className="text-green-500 hover:underline hover:decoration-gray-300 hover:decoration-2" - onClick={firebaseLogin} - > - Sign up to get M$ 1000 for free - </button>{' '} - and start trading! + Sign up to get M$ 1000 for free and start trading! <br /> </div> - - <TagsList + {/* <TagsList className="mt-2" tags={['#politics', '#crypto', '#covid', '#sports', '#meta']} - /> + /> */} + <Spacer h={6} /> + <button + className="btn btn-lg self-center border-none bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600" + onClick={firebaseLogin} + > + Sign up now + </button>{' '} + </Col> - <Spacer h={4} /> + <Spacer h={6} /> - <ContractsGrid - contracts={hotContracts?.slice(0, 6) || []} - showHotVolume - /> - </div> + <ContractsGrid + contracts={hotContracts?.slice(0, 10) || []} + showHotVolume + /> </> ) } diff --git a/web/components/nav-bar.tsx b/web/components/nav-bar.tsx index 74a54c8b..b63c55e4 100644 --- a/web/components/nav-bar.tsx +++ b/web/components/nav-bar.tsx @@ -82,7 +82,7 @@ function NavOptions(props: { user: User | null; themeClasses: string }) { {user === null ? ( <> <button - className="btn border-none normal-case text-base font-medium px-6 bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600" + className="btn btn-sm btn-outline normal-case text-base font-medium px-6 bg-gradient-to-r" onClick={firebaseLogin} > Sign in diff --git a/web/lib/firebase/contracts.ts b/web/lib/firebase/contracts.ts index 08466cd2..1f02a27f 100644 --- a/web/lib/firebase/contracts.ts +++ b/web/lib/firebase/contracts.ts @@ -160,7 +160,7 @@ export function listenForHotContracts( export async function getHotContracts() { const contracts = await getValues<Contract>(hotContractsQuery) return _.sortBy( - chooseRandomSubset(contracts, 6), + chooseRandomSubset(contracts, 10), (contract) => -1 * contract.volume24Hours ) }