jeffemmett
/
web3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[site/home][m]: solid hero section for home page with colors, fonts. 

* font: inter
* colors: from standard tailwind using life itself yellow as primary
This commit is contained in:
Rufus Pollock 2022-03-07 17:58:42 +01:00
parent 7538c4f26b
commit 6c2342967c
7 changed files with 62 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
site/components/Layout.js
View File

@ -18,28 +18,24 @@ export default function Layout({ children, title='' }) {
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap" rel="stylesheet" />
<link rel="preload" href="/fonts/Restora/Restora.ttf" as="font" crossOrigin="" /> <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet"></link>
<link rel="preload" href="/fonts/Restora/RestoraBold.ttf" as="font" crossOrigin="" />
<link rel="preload" href="/fonts/Restora/RestoraExtraLight.otf" as="font" crossOrigin="" />
</Head> </Head>
<body className="dark:bg-[#4a4e7d]"> <Nav />
<Nav /> <main>
<main> {children}
{children} </main>
</main> <footer className="flex items-center justify-center w-full h-24 mt-16">
<footer className="flex items-center justify-center w-full h-24 border-t mt-16"> <p className="flex items-center justify-center">
<p className="flex items-center justify-center"> Created by
Created by <a
<a href={siteConfig.authorUrl}
href={siteConfig.authorUrl} target="_blank"
target="_blank" rel="noopener noreferrer"
rel="noopener noreferrer" >
> <img src={siteConfig.authorLogo} alt={siteConfig.author} className="ml-2 h-6 block" />
<img src={siteConfig.authorLogo} alt={siteConfig.author} className="ml-2 h-6 block" /> </a>
</a> </p>
</p> </footer>
</footer>
</body>
</> </>
) )
} }

2
site/components/Nav.js
View File

@ -12,7 +12,7 @@ function classNames(...classes) {
export default function Nav() { export default function Nav() {
return ( return (
<Disclosure as="nav" className="bg-[#4a4e7d] shadow"> <Disclosure as="nav" className="shadow">
{({ open }) => ( {({ open }) => (
<> <>
<div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">

4
site/next.config.mjs
View File

@ -17,4 +17,8 @@ const withMDX = withMDXImp({
export default withMDX({ export default withMDX({
// Append the default value with md extensions // Append the default value with md extensions
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'], pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
webpack: (config, { buildId, dev }) => {
config.resolve.symlinks = false
return config
}
}) })

2
site/pages/_app.js
View File

@ -2,9 +2,9 @@ import { useEffect } from 'react'
import Script from 'next/script' import Script from 'next/script'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { DefaultSeo } from 'next-seo' import { DefaultSeo } from 'next-seo'
import 'tailwindcss/tailwind.css'
import { ThemeProvider } from 'next-themes' import { ThemeProvider } from 'next-themes'
import '../styles/global.css'
import siteConfig from '../config/siteConfig.js' import siteConfig from '../config/siteConfig.js'
import Layout from '../components/Layout' import Layout from '../components/Layout'
import MdxPage from '../components/MDX' import MdxPage from '../components/MDX'

11
site/pages/home.js
View File

@ -1,15 +1,15 @@
export default function Home(props) { export default function Home(props) {
return ( return (
<div className="pt-10 bg-[#4a4e7d] sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden"> <div className="pt-10 sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden">
<div className="mx-auto max-w-7xl lg:px-8"> <div className="mx-auto max-w-7xl lg:px-8">
<div className="lg:grid lg:grid-cols-2 lg:gap-8"> <div className="lg:grid lg:grid-cols-2 lg:gap-8">
<div className="mx-auto max-w-md px-4 sm:max-w-2xl sm:px-6 sm:text-center lg:px-0 lg:text-left lg:flex lg:items-center"> <div className="mx-auto max-w-md px-4 sm:max-w-2xl sm:px-6 sm:text-center lg:px-0 lg:text-left lg:flex lg:items-center">
<div className="lg:py-24"> <div className="lg:py-24">
<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">Making Sense of</span> <span className="block">Making Sense of</span>
<span className="block text-[#0cca4a]">Web3 (&amp; Crypto)</span> <span className="block text-yellow-500">Web3 &amp; Crypto</span>
</h1> </h1>
<p className="mt-3 font-serif text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl"> <p className="mt-3 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
Web3 is a huge phenomenon but it can be hard to make sense of. We're here to help with introductions to key concepts and in-depth exploration of the claims for its concrete social and economic impact. Web3 is a huge phenomenon but it can be hard to make sense of. We're here to help with introductions to key concepts and in-depth exploration of the claims for its concrete social and economic impact.
</p> </p>
<div className="mt-10 sm:mt-12"> <div className="mt-10 sm:mt-12">
@ -29,7 +29,7 @@ export default function Home(props) {
<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-[#0aae41] text-white font-medium hover:bg-[#0cca4a] 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-yellow-500 text-sm text-slate-50 font-medium hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-300 focus:ring-offset-gray-900"
> >
Get Updates Get Updates
</button> </button>
@ -41,10 +41,9 @@ export default function Home(props) {
</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="/img/skribbl.svg" src="/img/undraw_digital_currency_qpak.svg"
alt="" alt=""
/> />
</div> </div>

29
site/styles/global.css Normal file
View File

@ -0,0 +1,29 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/* FONTS */
@layer base {
h1, h2, h3, h4, h5 {
@apply font-sans;
}
}
/* OTHERS */
html {
scroll-behavior: smooth;
}
/* bg-neutral-800
@apply bg-slate-800
*/
body {
@apply bg-slate-900;
@apply text-slate-400;
}
.extra-small {
font-size: 0.50rem;
}

6
site/tailwind.config.js
View File

@ -10,9 +10,13 @@ module.exports = {
theme: { theme: {
extend: { extend: {
fontFamily: { fontFamily: {
nunito: ["Nunito Sans", ...defaultTheme.fontFamily.sans], sans: ["Inter", ...defaultTheme.fontFamily.sans],
serif: ["Restora", ...defaultTheme.fontFamily.serif], serif: ["Restora", ...defaultTheme.fontFamily.serif],
}, },
colors: {
// life itself yellow
'yellow-li': '#f0ca5e'
}
}, },
}, },
variants: { variants: {