From 55479ef4ab9e3c07d8b8f0beb5548d0728031dd2 Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Fri, 17 Dec 2021 19:47:39 -0600
Subject: [PATCH] Move hero and landing page to /landing-page. Add bouncing
 arrow.

---
 web/components/hero.tsx    |  50 -----------
 web/pages/index.tsx        | 116 +-----------------------
 web/pages/landing-page.tsx | 176 +++++++++++++++++++++++++++++++++++++
 3 files changed, 177 insertions(+), 165 deletions(-)
 delete mode 100644 web/components/hero.tsx
 create mode 100644 web/pages/landing-page.tsx

diff --git a/web/components/hero.tsx b/web/components/hero.tsx
deleted file mode 100644
index 3c78d994..00000000
--- a/web/components/hero.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-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>
-        <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">
-            <div className="lg:grid lg:grid-cols-2 lg:gap-8">
-              <div className="mx-auto max-w-md px-8 sm:max-w-2xl sm:text-center lg:px-0 lg:text-left lg:flex lg:items-center">
-                <div className="lg:py-24">
-                  <h1 className="mt-4 text-4xl text-white 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-300 to-green-400">
-                      prediction markets
-                    </div>
-                  </h1>
-                  <p className="mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
-                    Better forecasting through accessible prediction markets for
-                    you and your community
-                  </p>
-                  <div className="mt-10 sm:mt-12">
-                    <button
-                      className="btn normal-case text-lg font-medium px-10 bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600"
-                      onClick={firebaseLogin}
-                    >
-                      Sign in to get started!
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  )
-}
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
index d86a2c05..76164807 100644
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -1,19 +1,9 @@
 import React from 'react'
-import {
-  LightningBoltIcon,
-  ScaleIcon,
-  UserCircleIcon,
-  BeakerIcon,
-} from '@heroicons/react/outline'
-
 import type { NextPage } from 'next'
 
-import { Hero } from '../components/hero'
 import { useUser } from '../hooks/use-user'
 import Markets from './markets'
-import { useContracts } from '../hooks/use-contracts'
-import { SearchableGrid } from '../components/contracts-list'
-import { Col } from '../components/layout/col'
+import LandingPage from './landing-page'
 
 const Home: NextPage = () => {
   const user = useUser()
@@ -22,108 +12,4 @@ const Home: NextPage = () => {
   return user ? <Markets /> : <LandingPage />
 }
 
-function LandingPage() {
-  return (
-    <div>
-      <Hero />
-      <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
diff --git a/web/pages/landing-page.tsx b/web/pages/landing-page.tsx
new file mode 100644
index 00000000..69b6cb9c
--- /dev/null
+++ b/web/pages/landing-page.tsx
@@ -0,0 +1,176 @@
+import React from 'react'
+import {
+  LightningBoltIcon,
+  ScaleIcon,
+  UserCircleIcon,
+  BeakerIcon,
+  ArrowDownIcon,
+} from '@heroicons/react/outline'
+
+import { firebaseLogin } from '../lib/firebase/users'
+import { useContracts } from '../hooks/use-contracts'
+import { SearchableGrid } from '../components/contracts-list'
+import { Col } from '../components/layout/col'
+import { Header } from '../components/header'
+
+export default function LandingPage() {
+  return (
+    <div>
+      <Hero />
+      <FeaturesSection />
+      <ExploreMarketsSection />
+    </div>
+  )
+}
+
+function Hero() {
+  const scrollToAbout = () => {
+    const aboutElem = document.getElementById('about')
+    window.scrollTo({ top: aboutElem?.offsetTop, behavior: 'smooth' })
+  }
+
+  return (
+    <div className="overflow-hidden h-screen bg-world-trading bg-cover bg-gray-900 bg-center lg:bg-left">
+      <Header darkBackground>
+        <div
+          className="text-base font-medium text-white cursor-pointer hover:underline hover:decoration-teal-500 hover:decoration-2"
+          onClick={scrollToAbout}
+        >
+          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">
+            <div className="lg:grid lg:grid-cols-2 lg:gap-8">
+              <div className="mx-auto max-w-md px-8 sm:max-w-2xl sm:text-center lg:px-0 lg:text-left lg:flex lg:items-center">
+                <div className="lg:py-24">
+                  <h1 className="mt-4 text-4xl text-white 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-300 to-green-400">
+                      prediction markets
+                    </div>
+                  </h1>
+                  <p className="mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
+                    Better forecasting through accessible prediction markets for
+                    you and your community
+                  </p>
+                  <div className="mt-10 sm:mt-12">
+                    <button
+                      className="btn normal-case text-lg font-medium px-10 bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600"
+                      onClick={firebaseLogin}
+                    >
+                      Sign in to get started!
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="absolute bottom-12 w-full">
+            <ArrowDownIcon
+              className="text-white mx-auto cursor-pointer animate-bounce"
+              width={32}
+              height={32}
+              onClick={scrollToAbout}
+            />
+          </div>
+        </div>
+      </main>
+    </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>
+  )
+}