Move hero and landing page to /landing-page. Add bouncing arrow.
This commit is contained in:
jahooma
parent
b3bacd6e1e
commit
55479ef4ab
|
|
@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,19 +1,9 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import {
|
|
||||||
LightningBoltIcon,
|
|
||||||
ScaleIcon,
|
|
||||||
UserCircleIcon,
|
|
||||||
BeakerIcon,
|
|
||||||
} from '@heroicons/react/outline'
|
|
||||||
|
|
||||||
import type { NextPage } from 'next'
|
import type { NextPage } from 'next'
|
||||||
|
|
||||||
import { Hero } from '../components/hero'
|
|
||||||
import { useUser } from '../hooks/use-user'
|
import { useUser } from '../hooks/use-user'
|
||||||
import Markets from './markets'
|
import Markets from './markets'
|
||||||
import { useContracts } from '../hooks/use-contracts'
|
import LandingPage from './landing-page'
|
||||||
import { SearchableGrid } from '../components/contracts-list'
|
|
||||||
import { Col } from '../components/layout/col'
|
|
||||||
|
|
||||||
const Home: NextPage = () => {
|
const Home: NextPage = () => {
|
||||||
const user = useUser()
|
const user = useUser()
|
||||||
|
|
@ -22,108 +12,4 @@ const Home: NextPage = () => {
|
||||||
return user ? <Markets /> : <LandingPage />
|
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
|
export default Home
|
||||||
|
|
|
||||||
176
web/pages/landing-page.tsx
Normal file
176
web/pages/landing-page.tsx
Normal file
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user