manifold/web/components/landing-page-panel.tsx

66 lines
2.2 KiB
TypeScript
Raw Normal View History

import { SparklesIcon } from '@heroicons/react/solid'
2022-06-13 16:19:46 +00:00
import { Contract } from 'common/contract'
import { Spacer } from './layout/spacer'
import { firebaseLogin } from 'web/lib/firebase/users'
import { ContractsGrid } from './contract/contracts-list'
2022-01-27 00:21:14 +00:00
import { Col } from './layout/col'
2022-03-03 08:56:03 +00:00
import { Row } from './layout/row'
2022-06-13 16:19:46 +00:00
export function LandingPagePanel(props: { hotContracts: Contract[] }) {
const { hotContracts } = props
return (
<>
2022-06-13 16:19:46 +00:00
<Col className="mb-6 rounded-xl sm:m-12 sm:mt-0">
2022-05-17 14:25:51 +00:00
<img
height={250}
width={250}
className="self-center"
src="/flappy-logo.gif"
/>
2022-06-13 16:52:29 +00:00
<div className="m-4 max-w-[550px] self-center">
2022-06-13 16:19:46 +00:00
<h1 className="text-3xl sm:text-6xl xl:text-6xl">
<div className="font-semibold sm:mb-2">
Predict{' '}
<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 ">
Create a play-money prediction market on any topic you care about
and bet with your friends on what will happen!
<br />
{/* <br />
2022-05-17 12:17:22 +00:00
Sign up and get {formatMoney(1000)} - worth $10 to your{' '}
2022-05-07 14:10:25 +00:00
<SiteLink className="font-semibold" href="/charity">
favorite charity.
</SiteLink>
2022-06-13 16:19:46 +00:00
<br /> */}
</div>
</div>
2022-01-27 00:21:14 +00:00
<Spacer h={6} />
<button
2022-06-13 16:19:46 +00:00
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"
2022-01-27 00:21:14 +00:00
onClick={firebaseLogin}
>
2022-06-13 16:19:46 +00:00
Get started
2022-01-27 00:21:14 +00:00
</button>{' '}
</Col>
2022-01-22 20:52:49 +00:00
2022-03-03 08:56:03 +00:00
<Row className="m-4 mb-6 items-center gap-1 text-xl font-semibold text-gray-800">
<SparklesIcon className="inline h-5 w-5" aria-hidden="true" />
2022-05-07 23:44:01 +00:00
Trending markets
2022-03-03 08:56:03 +00:00
</Row>
2022-01-27 00:21:14 +00:00
<ContractsGrid
contracts={hotContracts?.slice(0, 10) || []}
loadMore={() => {}}
hasMore={false}
2022-01-27 00:21:14 +00:00
/>
</>
)
}