Merge pull request #1 from blockworks-foundation/redesign
Update landing page ui
This commit is contained in:
Tyler
GitHub
commit
50e9d8e683
|
|
@ -1,49 +1,24 @@
|
|||
import { Menu } from "antd";
|
||||
|
||||
export default function Navigation() {
|
||||
return (
|
||||
<div className="pt-4 pl-6 md:pl-8">
|
||||
<Menu
|
||||
mode="horizontal"
|
||||
selectedKeys={[]}
|
||||
style={{
|
||||
background: "none",
|
||||
borderBottom: "none",
|
||||
padding: 0,
|
||||
fontSize: 16,
|
||||
}}
|
||||
>
|
||||
<Menu.Item key="/" disabled style={{ marginLeft: 0 }}>
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
height="40px"
|
||||
width="40px"
|
||||
src="/mango.png"
|
||||
className="inline-block"
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
color: "white",
|
||||
fontWeight: 700,
|
||||
marginRight: "1em",
|
||||
marginLeft: 8,
|
||||
}}
|
||||
className="hidden md:inline-block text-xl"
|
||||
>
|
||||
Mango Markets
|
||||
</span>
|
||||
</div>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="trade">
|
||||
<a href="/trade">Trade</a>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="stats">
|
||||
<a href="/trade">Stats</a>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="help">
|
||||
<a href="/trade">Help</a>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center md:mr-8">
|
||||
<img height="50px" width="50px" src="/mango.png" className="inline-block" />
|
||||
<span className="hidden md:inline-block text-3xl text-white ml-4 font-black">
|
||||
Mango Markets
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<a href="/trade" className="ml-2 sm:ml-14 font-light text-white text-xl sm:text-2xl">
|
||||
Trade
|
||||
</a>
|
||||
|
||||
<a href="/trade" className="ml-8 sm:ml-16 font-light text-white text-xl sm:text-2xl">
|
||||
Stats
|
||||
</a>
|
||||
|
||||
<a href="/trade" className="ml-8 sm:ml-16 font-light text-white text-xl sm:text-2xl">
|
||||
Learn
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,5 +29,8 @@
|
|||
"typescript": "4.0",
|
||||
"webpack": "^4.44.2"
|
||||
},
|
||||
"prettier": {
|
||||
"printWidth": 100
|
||||
},
|
||||
"license": "MIT"
|
||||
}
|
||||
|
|
|
|||
122
pages/index.tsx
122
pages/index.tsx
|
|
@ -1,10 +1,10 @@
|
|||
import { Divider, Button, Layout, Row, Col } from "antd";
|
||||
import { Divider, Layout, Row, Col } from "antd";
|
||||
import Head from "next/head";
|
||||
import { CSSProperties } from "react";
|
||||
import ContactIcons from "../components/ContactIcons";
|
||||
import Logo from "../components/Logo";
|
||||
import Navigation from "../components/Navigation";
|
||||
import StatsPanel from "../components/StatsPanel";
|
||||
// import StatsPanel from "../components/StatsPanel";
|
||||
|
||||
const { Header, Footer, Content } = Layout;
|
||||
|
||||
|
|
@ -20,12 +20,9 @@ const IndexPage = () => (
|
|||
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css?family=Lato:400,700"
|
||||
href="https://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600,700,800"
|
||||
/>
|
||||
<script
|
||||
async
|
||||
src="https://www.googletagmanager.com/gtag/js?id=G-EVV22TP9JN"
|
||||
></script>
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-EVV22TP9JN"></script>
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
|
|
@ -47,51 +44,64 @@ const IndexPage = () => (
|
|||
maxWidth: 1575,
|
||||
}}
|
||||
>
|
||||
<Header style={{ background: "none", padding: 0 }}>
|
||||
<Header style={{ background: "none", padding: 0, marginTop: "5%", marginLeft: "10%" }}>
|
||||
<Navigation />
|
||||
</Header>
|
||||
<Layout style={{ background: "none" }} className="p-6 md:p-12">
|
||||
<Layout style={{ background: "none" }}>
|
||||
<Content className="mt-6">
|
||||
<Row align="middle">
|
||||
<Col xs={24} lg={10}>
|
||||
<Row align="middle" style={{ marginTop: "10%", marginLeft: "10%" }} className="mt-1">
|
||||
<Col>
|
||||
<div>
|
||||
<p className="text-2xl sm:text-3xl md:text-4xl leading-normal md:leading-normal md:pr-7">
|
||||
Decentralized, cross-margined 5x leveraged trading with
|
||||
lightning speed and near-zero fees powered on Serum.
|
||||
</p>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
disabled
|
||||
className="mb-4"
|
||||
style={
|
||||
{
|
||||
padding: "0px 60px 0px 60px",
|
||||
fontWeight: 700,
|
||||
background:
|
||||
"linear-gradient(270deg, #AFD803AA 34.47%, #FECA1AAA 100%)",
|
||||
"-webkit-font-smoothing": "antialiased",
|
||||
} as ButtonStyle
|
||||
}
|
||||
<h1
|
||||
style={{ fontSize: "calc(40px + 2.5vw);" }}
|
||||
className="text-white leading-tight md:pr-7 font-black mb-1 hidden md:block"
|
||||
>
|
||||
Coming Soon
|
||||
</Button>
|
||||
<div>Decentralized,</div>
|
||||
<div className="">cross-margin trading</div>
|
||||
</h1>
|
||||
<h1 className="text-white leading-tight md:pr-7 font-black mb-1 text-4xl md:hidden">
|
||||
<div>Decentralized,</div>
|
||||
<div className="pr-2">cross-margin trading</div>
|
||||
</h1>
|
||||
<p className="pr-8 text-lg sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-normal sm:font-light mt-4 sm:mt-8 sm:tracking-wide text-light-purple">
|
||||
Up to 5x leverage · Lightning Speed · Near-zero fees
|
||||
</p>
|
||||
<div className="mt-6 sm:mt-12">
|
||||
<button
|
||||
className="rounded-lg py-2 px-8 sm:px-10 text-md sm:text-lg md:text-2xl opacity-90 hover:opacity-100 disabled:opacity-30 font-semibold"
|
||||
style={
|
||||
{
|
||||
background: "linear-gradient(270deg, #afda06 34.47%, #fdca19 100%)",
|
||||
"-webkit-font-smoothing": "antialiased",
|
||||
} as ButtonStyle
|
||||
}
|
||||
>
|
||||
<a href="/trade" className="text-primary-bg hover:text-primary-bg">
|
||||
Start Trading
|
||||
</a>
|
||||
</button>
|
||||
<button className="ml-4 sm:ml-6 rounded-lg py-1 px-8 sm:px-10 text-md sm:text-lg md:text-2xl opacity-80 hover:opacity-100 disabled:opacity-30 bg-transparent border-2 border-primary-green">
|
||||
<a href="/trade" className="text-primary-green hover:text-primary-green">
|
||||
Learn More
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={24} lg={14}>
|
||||
{/* <Col xs={24} lg={14}>
|
||||
<div className="hidden md:block">
|
||||
<StatsPanel />
|
||||
</div>
|
||||
</Col>
|
||||
</Col> */}
|
||||
</Row>
|
||||
<Row className="mt-10 sm:mt-32">
|
||||
<Row style={{ marginLeft: "10%" }} className="mt-10 sm:mt-32 pr-10 sm:pr-18 md:pr-24">
|
||||
<Col xs={24} lg={8}>
|
||||
<div className="mt-2 md:mr-6">
|
||||
<p className="text-2xl md:text-4xl">Trade</p>
|
||||
<p style={{ lineHeight: 2, fontSize: 16 }}>
|
||||
Trade with up to 5x leverage, long or short, with limit orders
|
||||
on Serum DEX’s fully on-chain order book as a maker or taker
|
||||
while earning interest on deposits and margin positions.
|
||||
Trade with up to 5x leverage, long or short, with limit orders on Serum DEX’s
|
||||
fully on-chain order book as a maker or taker while earning interest on deposits
|
||||
and margin positions.
|
||||
</p>
|
||||
</div>
|
||||
</Col>
|
||||
|
|
@ -104,9 +114,8 @@ const IndexPage = () => (
|
|||
fontSize: 16,
|
||||
}}
|
||||
>
|
||||
Earn maximal interest on deposits, protect against inflation,
|
||||
and utilize idle investments. Always maintain custody of your
|
||||
funds.
|
||||
Earn maximal interest on deposits, protect against inflation, and utilize idle
|
||||
investments. Always maintain custody of your funds.
|
||||
</p>
|
||||
</div>
|
||||
</Col>
|
||||
|
|
@ -114,28 +123,29 @@ const IndexPage = () => (
|
|||
<div className="mt-2 md:mr-6">
|
||||
<p className="text-2xl md:text-4xl">Fees</p>
|
||||
<p style={{ lineHeight: 2, fontSize: 16 }}>
|
||||
No fees on interest. The only fees you will pay are for
|
||||
trading on Serum DEX. Contribute your SRM into our pool to
|
||||
reduce the fees for everyone. Let's reach the top Serum fee
|
||||
tier together 🚀
|
||||
No fees on interest. The only fees you will pay are for trading on Serum DEX.
|
||||
Contribute your SRM into our pool to reduce the fees for everyone. Let's reach the
|
||||
top Serum fee tier together 🚀
|
||||
</p>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Content>
|
||||
</Layout>
|
||||
<Footer style={{ background: "none" }}>
|
||||
<Divider />
|
||||
<Row align="middle">
|
||||
<Col xs={24} lg={8}>
|
||||
<Logo />© 2021 Blockworks Foundation
|
||||
</Col>
|
||||
<Col xs={24} lg={8}></Col>
|
||||
<Col xs={24} lg={8}>
|
||||
<ContactIcons />
|
||||
</Col>
|
||||
</Row>
|
||||
</Footer>
|
||||
<div className="pr-10 sm:pr-18 md:pr-24">
|
||||
<Footer style={{ background: "none", marginLeft: "10%", paddingLeft: 0, paddingRight: 0 }}>
|
||||
<Divider />
|
||||
<Row align="middle">
|
||||
<Col xs={24} lg={8}>
|
||||
<Logo />© 2021 Blockworks Foundation
|
||||
</Col>
|
||||
<Col xs={24} lg={8}></Col>
|
||||
<Col xs={24} lg={8}>
|
||||
<ContactIcons />
|
||||
</Col>
|
||||
</Row>
|
||||
</Footer>
|
||||
</div>
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,10 +2,19 @@ module.exports = {
|
|||
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
|
||||
darkMode: false, // or 'media' or 'class'
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
colors: {
|
||||
"primary-bg": "#141026",
|
||||
"light-purple": "#9490A6",
|
||||
"primary-green": "#AFD803",
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
extend: {},
|
||||
extend: {
|
||||
opacity: ["disabled"],
|
||||
scale: ["hover"],
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue