Add features section to landing page. About header scrolls to features section.

2021-12-17 01:21:40 -06:00 · 2021-12-17 01:21:40 -06:00 · cda5810589
commit cda5810589
parent 96f2b4abfc
5 changed files with 139 additions and 16 deletions
--- 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 (
    <div className="pt-6">
@ -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 }) {
              </Link>
            ))}

+            {children}
+
            <SignInLink darkBackground={darkBackground} />
          </div>
        </div>
--- 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 (
    <div className="relative overflow-hidden h-screen bg-world-trading bg-cover bg-gray-900 bg-center lg:bg-left">
-      <Header darkBackground />
+      <Header darkBackground>
+        <div
+          className="text-base font-medium text-white cursor-pointer hover:underline hover:decoration-teal-500 hover:decoration-2"
+          onClick={() => {
+            const aboutElem = document.getElementById('about')
+            window.scrollTo({ top: aboutElem?.offsetTop, behavior: 'smooth' })
+          }}
+        >
+          About
+        </div>
+      </Header>
      <main>
        <div className="pt-40 sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden">
          <div className="mx-auto max-w-7xl lg:px-8">
--- 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",
--- 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",
--- 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 (
    <div>
      <Hero />
-      <div className="max-w-4xl py-8 mx-auto">
-        <Title className="mx-8 md:mx-0" text="Explore prediction markets" />
-        <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