diff --git a/web/components/header.tsx b/web/components/header.tsx index c9d51619..95632265 100644 --- a/web/components/header.tsx +++ b/web/components/header.tsx @@ -3,11 +3,11 @@ import Link from 'next/link' import { useUser } from '../hooks/use-user' -const navigation = [ - { - name: 'About', - href: 'https://mantic.notion.site/About-Mantic-Markets-7c44bc161356474cad54cba2d2973fe2', - }, +const navigation: any[] = [ + // { + // name: 'About', + // href: 'https://mantic.notion.site/About-Mantic-Markets-7c44bc161356474cad54cba2d2973fe2', + // }, ] const hoverClasses = @@ -43,8 +43,8 @@ function SignInLink(props: { darkBackground?: boolean }) { ) } -export function Header(props: { darkBackground?: boolean }) { - const { darkBackground } = props +export function Header(props: { darkBackground?: boolean; children?: any }) { + const { darkBackground, children } = props return (
@@ -81,7 +81,7 @@ export function Header(props: { darkBackground?: boolean }) { target="_blank" className={clsx( 'text-base font-medium ' + hoverClasses, - darkBackground ? 'text-white' : '' + darkBackground ? 'text-white hover:decoration-teal-500' : '' )} > {item.name} @@ -89,6 +89,8 @@ export function Header(props: { darkBackground?: boolean }) { ))} + {children} +
diff --git a/web/components/hero.tsx b/web/components/hero.tsx index ce0fc200..3c78d994 100644 --- a/web/components/hero.tsx +++ b/web/components/hero.tsx @@ -1,11 +1,20 @@ -import Link from 'next/link' import { firebaseLogin } from '../lib/firebase/users' import { Header } from './header' export const Hero = () => { return (
-
+
+
{ + const aboutElem = document.getElementById('about') + window.scrollTo({ top: aboutElem?.offsetTop, behavior: 'smooth' }) + }} + > + About +
+
diff --git a/web/package-lock.json b/web/package-lock.json index 12166edf..01f69719 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -6,6 +6,7 @@ "": { "name": "mantic", "dependencies": { + "@heroicons/react": "^1.0.5", "@nivo/core": "0.74.0", "@nivo/line": "0.74.0", "clsx": "1.1.1", @@ -1585,6 +1586,14 @@ "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.2.1.tgz", "integrity": "sha512-gfta+H8aziZsm8pZa0vj04KO6biEiisppNgA1kbJvFrrWu9Vm7eaUEy76DIxsuTaWvti5fkJVhllWc6ZTE+Mdw==" }, + "node_modules/@heroicons/react": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-1.0.5.tgz", + "integrity": "sha512-UDMyLM2KavIu2vlWfMspapw9yii7aoLwzI2Hudx4fyoPwfKfxU8r3cL8dEBXOjcLG0/oOONZzbT14M1HoNtEcg==", + "peerDependencies": { + "react": ">= 16" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", @@ -9439,6 +9448,12 @@ "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.2.1.tgz", "integrity": "sha512-gfta+H8aziZsm8pZa0vj04KO6biEiisppNgA1kbJvFrrWu9Vm7eaUEy76DIxsuTaWvti5fkJVhllWc6ZTE+Mdw==" }, + "@heroicons/react": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-1.0.5.tgz", + "integrity": "sha512-UDMyLM2KavIu2vlWfMspapw9yii7aoLwzI2Hudx4fyoPwfKfxU8r3cL8dEBXOjcLG0/oOONZzbT14M1HoNtEcg==", + "requires": {} + }, "@humanwhocodes/config-array": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", diff --git a/web/package.json b/web/package.json index 5d3ca4ce..9a53a852 100644 --- a/web/package.json +++ b/web/package.json @@ -10,6 +10,7 @@ "prepare": "cd .. && husky install web/.husky" }, "dependencies": { + "@heroicons/react": "^1.0.5", "@nivo/core": "0.74.0", "@nivo/line": "0.74.0", "clsx": "1.1.1", diff --git a/web/pages/index.tsx b/web/pages/index.tsx index 2c018ffa..d86a2c05 100644 --- a/web/pages/index.tsx +++ b/web/pages/index.tsx @@ -1,4 +1,10 @@ import React from 'react' +import { + LightningBoltIcon, + ScaleIcon, + UserCircleIcon, + BeakerIcon, +} from '@heroicons/react/outline' import type { NextPage } from 'next' @@ -7,7 +13,7 @@ import { useUser } from '../hooks/use-user' import Markets from './markets' import { useContracts } from '../hooks/use-contracts' import { SearchableGrid } from '../components/contracts-list' -import { Title } from '../components/title' +import { Col } from '../components/layout/col' const Home: NextPage = () => { const user = useUser() @@ -17,17 +23,107 @@ const Home: NextPage = () => { } function LandingPage() { - const contracts = useContracts() - return (
-
- - <SearchableGrid contracts={contracts === 'loading' ? [] : contracts} /> + <FeaturesSection /> + <ExploreMarketsSection /> + </div> + ) +} + +const notionAboutUrl = + 'https://mantic.notion.site/About-Mantic-Markets-7c44bc161356474cad54cba2d2973fe2' + +function FeaturesSection() { + const features = [ + { + name: 'Easy to participate', + description: 'Sign up for free and make your own predictions in seconds!', + icon: UserCircleIcon, + }, + { + name: 'Play money, real results', + description: + 'Get accurate predictions by betting with Mantic Dollars, our virtual currency.', + icon: LightningBoltIcon, + }, + { + name: 'Creator-driven markets', + description: + 'Resolve markets you create with your own judgment—enabling new markets with subjective or personal questions', + icon: ScaleIcon, + }, + { + name: 'Become smarter', + description: + 'Bet on questions that matter and share the forecasts. With better information, we can all make better decisions.', + icon: BeakerIcon, + }, + ] + + 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="lg:text-center"> + <h2 className="text-base text-teal-600 font-semibold tracking-wide uppercase"> + Mantic Markets + </h2> + <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> + Better forecasting for everyone + </p> + <p className="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> + The easiest way to get an accurate forecast on anything + </p> + </div> + + <div className="mt-10"> + <dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10"> + {features.map((feature) => ( + <div key={feature.name} className="relative"> + <dt> + <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-teal-500 text-white"> + <feature.icon className="h-6 w-6" aria-hidden="true" /> + </div> + <p className="ml-16 text-lg leading-6 font-medium text-gray-900"> + {feature.name} + </p> + </dt> + <dd className="mt-2 ml-16 text-base text-gray-500"> + {feature.description} + </dd> + </div> + ))} + </dl> + </div> + </div> + + <Col className="mt-20"> + <a + className="btn btn-primary mx-auto" + href={notionAboutUrl} + target="_blank" + > + Learn more + </a> + </Col> </div> </div> ) } +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"> + Explore our markets + </p> + <SearchableGrid contracts={contracts === 'loading' ? [] : contracts} /> + </div> + ) +} + export default Home