open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change color and background image of landing page

Browse Source
This commit is contained in:
jahooma 2021-12-01 17:23:48 -06:00
parent 844a908118
commit dc038eae0a
3 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web/components/hero.tsx
View File

@ -11,7 +11,9 @@ const navigation = [
export const Hero = () => { export const Hero = () => {
return ( return (
<div className="relative overflow-hidden h-screen bg-gray-900"> <div className="relative overflow-hidden h-screen bg-world-trading bg-cover ">
{/* <div className="absolute w-full h-full overflow-hidden bg-world-trading bg-cover bg-gray-900 z--1" /> */}
<Popover as="header" className="relative"> <Popover as="header" className="relative">
<div className="pt-6"> <div className="pt-6">
<nav <nav
@ -21,19 +23,19 @@ export const Hero = () => {
<div className="flex items-center flex-1"> <div className="flex items-center flex-1">
<div className="flex items-center justify-between w-full md:w-auto"> <div className="flex items-center justify-between w-full md:w-auto">
<a href="#"> <a href="#">
<span className="sr-only">Workflow</span> <span className="sr-only">Mantic Markets</span>
<img <img
className="h-8 w-auto sm:h-10" className="h-8 w-auto sm:h-10"
src="/logo.png" src="/logo.png"
alt="" alt=""
/> />
</a> </a>
<div className="-mr-2 flex items-center md:hidden"> {/* <div className="-mr-2 flex items-center md:hidden">
<Popover.Button className="bg-gray-900 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-800 focus:outline-none focus:ring-2 focus-ring-inset focus:ring-white"> <Popover.Button className="bg-gray-900 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-800 focus:outline-none focus:ring-2 focus-ring-inset focus:ring-white">
<span className="sr-only">Open main menu</span> <span className="sr-only">Open main menu</span>
<MenuIcon className="h-6 w-6" aria-hidden="true" /> <MenuIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button> </Popover.Button>
</div> </div> */}
</div> </div>
{/* <div className="hidden space-x-8 md:flex md:ml-10"> {/* <div className="hidden space-x-8 md:flex md:ml-10">
{navigation.map((item) => ( {navigation.map((item) => (
@ -77,7 +79,7 @@ export const Hero = () => {
/> />
</div> </div>
<div className="-mr-2"> <div className="-mr-2">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-600"> <Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-green-600">
<span className="sr-only">Close menu</span> <span className="sr-only">Close menu</span>
<XIcon className="h-6 w-6" aria-hidden="true" /> <XIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button> </Popover.Button>
@ -98,7 +100,7 @@ export const Hero = () => {
<div className="mt-6 px-5"> <div className="mt-6 px-5">
<a <a
href="#" href="#"
className="block text-center w-full py-3 px-4 rounded-md shadow bg-indigo-600 text-white font-medium hover:bg-indigo-700" className="block text-center w-full py-3 px-4 rounded-md shadow bg-green-600 text-white font-medium hover:bg-green-700"
> >
Start free trial Start free trial
</a> </a>
@ -135,7 +137,7 @@ export const Hero = () => {
</a> */} </a> */}
<h1 className="mt-4 text-4xl tracking-tight font-extrabold text-white sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl"> <h1 className="mt-4 text-4xl tracking-tight font-extrabold text-white sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl">
<span className="block">Create your own</span> <span className="block">Create your own</span>
<span className="block text-indigo-400">prediction markets</span> <span className="block text-green-400">prediction markets</span>
</h1> </h1>
<p className="mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl"> <p className="mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
Create and resolve your own prediction markets to earn a percent of the bet volume. Powered by Solana smart contracts. Create and resolve your own prediction markets to earn a percent of the bet volume. Powered by Solana smart contracts.
@ -151,13 +153,13 @@ export const Hero = () => {
id="email" id="email"
type="email" type="email"
placeholder="Enter your email" placeholder="Enter your email"
className="block w-full px-4 py-3 rounded-md border-0 text-base text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-300 focus:ring-offset-gray-900" className="block w-full px-4 py-3 rounded-md border-0 text-base text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-300 focus:ring-offset-gray-900"
/> />
</div> </div>
<div className="mt-3 sm:mt-0 sm:ml-3"> <div className="mt-3 sm:mt-0 sm:ml-3">
<button <button
type="submit" type="submit"
className="block w-full py-3 px-4 rounded-md shadow bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-300 focus:ring-offset-gray-900" className="block w-full py-3 px-4 rounded-md shadow bg-green-500 text-white font-medium hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-300 focus:ring-offset-gray-900"
> >
Keep me updated Keep me updated
</button> </button>
@ -175,16 +177,15 @@ export const Hero = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="mt-12 -mb-16 sm:-mb-48 lg:m-0 lg:relative"> {/* <div className="mt-12 -mb-16 sm:-mb-48 lg:m-0 lg:relative">
<div className="mx-auto max-w-md px-4 sm:max-w-2xl sm:px-6 lg:max-w-none lg:px-0"> <div className="mx-auto max-w-md px-4 sm:max-w-2xl sm:px-6 lg:max-w-none lg:px-0">
{/* Illustration taken from Lucid Illustrations: https://lucid.pixsellz.io/ */}
<img <img
className="w-full lg:absolute lg:inset-y-0 lg:left-0 lg:h-full lg:w-auto lg:max-w-none" className="w-full lg:absolute lg:inset-y-0 lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
src="https://tailwindui.com/img/component-images/cloud-illustration-indigo-400.svg" src="/world-trading-background.jpg"
alt="" alt=""
/> />
</div> </div>
</div> </div> */}
</div> </div>
</div> </div>
</div> </div>

BIN
web/public/world-trading-background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 MiB

8
web/tailwind.config.js
View File

@ -3,12 +3,16 @@ module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class' darkMode: false, // or 'media' or 'class'
theme: { theme: {
extend: {}, extend: {
backgroundImage: {
'world-trading': "url('/world-trading-background.jpg')",
}
},
}, },
variants: { variants: {
extend: {}, extend: {},
}, },
plugins: [ plugins: [
require('@tailwindcss/forms'), require('@tailwindcss/forms'),
], ],
} }