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

web/components/header.tsx

@@ -3,11 +3,11 @@ import Link from 'next/link'
 
 import { useUser } from '../hooks/use-user'
 
-const navigation = [
+const navigation: any[] = [
-  {
+  // {
-    name: 'About',
+  //   name: 'About',
-    href: 'https://mantic.notion.site/About-Mantic-Markets-7c44bc161356474cad54cba2d2973fe2',
+  //   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 }) {
+export function Header(props: { darkBackground?: boolean; children?: any }) {
-  const { darkBackground } = props
+  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>

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">

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",

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",

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">
+      <FeaturesSection />
-        <Title className="mx-8 md:mx-0" text="Explore prediction markets" />
+      <ExploreMarketsSection />
-        <SearchableGrid contracts={contracts === 'loading' ? [] : contracts} />
+    </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