Skip to content

Instantly share code, notes, and snippets.

@gregorym

gregorym/index.tsx

Last active November 3, 2022 15:33
Show Gist options
  • Save gregorym/aed38c7d396dc65c327466312c01e07c to your computer and use it in GitHub Desktop.
Save gregorym/aed38c7d396dc65c327466312c01e07c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.tsx
import Head from "next/head";
import NavButton from "../components/NavButton";
export default function Home() {
const buttonCls = `border-4 border-black rounded-xl text-white px-4 py-2`;
return (
<div>
<Head>
<title>Funbots</title>
<meta name="description" content="Funbots NFT Collection" />
<link rel="icon" href="/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Acme&family=Sigmar+One&display=swap"
rel="stylesheet"
></link>
</Head>
<style global jsx>
{`
body {
font-family: "Sigmar One", cursive;
}
`}
</style>
<section className="bg-[#ffd9bb] h-screen">
<div className="-auto max-w-7xl sm:px-6 lg:px-8 m-auto">
<nav
className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
aria-label="Top"
>
<div className="m-auto w-[700px]">
<div className="flex w-full border-b py-6 lg:border-none flex justify-around">
<NavButton href="#about" text="About" bg="red" />
<NavButton href="#map" text="Funmap" bg="blue" />
<NavButton href="#team" text="Team" bg="purple" />
<NavButton href="#access" text="Access Pass" bg="green" />
</div>
</div>
</nav>
</div>
<div
className="bg-repeat-x"
style={{
marginTop: "-120px",
width: "100%",
height: "100vh",
backgroundImage: `url("machine_non_anime.svg")`,
}}
></div>
</section>
<section
style={{
backgroundSize: `40px 40px`,
backgroundImage: `
linear-gradient(to right, #4d8ffb 3px, transparent 1px),
linear-gradient(to bottom, #4d8ffb 3px, transparent 1px)
`,
}}
id="about"
className="bg-[#005ef9] h-screen relative"
>
<div className="-auto max-w-7xl sm:px-6 lg:px-8">
<img
style={{
height: `calc(55vh)`,
right: 180,
top: 180,
}}
src="/sneak_peek.gif"
alt="Bot"
className="absolute z-0"
/>
<img src="/machine.svg" alt="Machine" className="absolute z-1" />
</div>
</section>
<section
style={{
backgroundImage: `url("yellow_bg.svg")`,
}}
className="bg-[#ffce00] h-screen flex"
>
<div className="max-w-7xl sm:px-6 lg:px-8 py-10 m-auto">
<div className="grid grid-cols-2">
<div>
<img src="grid.svg" className="w-5/6" />
</div>
<div className="flex mr-0">
<img src="funart.svg" className="w-5/6 ml-auto" />
</div>
</div>
</div>
</section>
<section id="team" className="bg-[#fcd7b9] h-screen m-auto"></section>
<section id="map" className="bg-[#c3bfc0] h-screen m-auto">
<div
className="bg-no-repeat"
style={{
marginTop: "-120px",
width: "100%",
height: "100vh",
backgroundImage: `url("map.svg")`,
backgroundSize: "contain",
backgroundPositionX: "40%",
}}
></div>
</section>
<section id="access" className="bg-[#F4D7BB] h-screen m-auto">
<div className="max-w-7xl sm:px-6 lg:px-8 py-10 m-auto">
<div className="grid grid-cols-2">
<div className="mt-20">
<button className="w-2/3 text-white text-left bg-red border-4 px-4 py-2 text-xl font-bold border-black rounded-lg">
What is FunBot?
</button>
<button className="w-2/3 mt-4 text-white text-left bg-blue border-4 px-4 py-2 text-xl font-bold border-black rounded-lg">
What is FunFactory?
</button>
<button className="w-2/3 mt-4 text-white text-left bg-green border-4 px-4 py-2 text-xl font-bold border-black rounded-lg">
When is the launch?
</button>
<button className="w-2/3 mt-4 text-white text-left bg-yellow border-4 px-4 py-2 text-xl font-bold border-black rounded-lg">
On which blockchain?
</button>
</div>
<div className="flex mr-0">
<img src="red.gif" className="w-5/6 ml-auto" />
</div>
</div>
</div>
</section>
<footer className="border-black border-4 w-full bg-[#C4C0C1] m-auto flex">
<div className="flex w-full">
<div className="max-w-7xl sm:px-6 lg:px-8 m-auto flex">
<p className="text-black text-xl py-6">
FunBots (c) 2022. All rights reserved.
</p>
</div>
<div className="m-auto flex gap-2">
<a
target="_blank"
href="https://twitter.com/Funbots_NFT"
rel="noreferrer"
>
<img className="w-12 h-12 rounded" src="/twitter.svg" />
</a>
<a>
<img className="w-12 h-12 rounded" src="/discord.svg" />
</a>
</div>
</div>
</footer>
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment