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

2
site/components/Nav.js
View File

@ -12,7 +12,7 @@ function classNames(...classes) {
export default function Nav() {
return (
<Disclosure as="nav" className="bg-[#4a4e7d] shadow">
<Disclosure as="nav" className="shadow">
{({ open }) => (
<>
<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({
// Append the default value with md extensions
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 { useRouter } from 'next/router'
import { DefaultSeo } from 'next-seo'
import 'tailwindcss/tailwind.css'
import { ThemeProvider } from 'next-themes'
import '../styles/global.css'
import siteConfig from '../config/siteConfig.js'
import Layout from '../components/Layout'
import MdxPage from '../components/MDX'

11
site/pages/home.js
View File

@ -1,15 +1,15 @@
export default function Home(props) {
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="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="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">
<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>
<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.
</p>
<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">
<button
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
</button>
@ -41,10 +41,9 @@ export default function Home(props) {
</div>
<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">
{/* Illustration taken from Lucid Illustrations: https://lucid.pixsellz.io/ */}
<img
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=""
/>
</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: {
extend: {
fontFamily: {
nunito: ["Nunito Sans", ...defaultTheme.fontFamily.sans],
sans: ["Inter", ...defaultTheme.fontFamily.sans],
serif: ["Restora", ...defaultTheme.fontFamily.serif],
},
colors: {
// life itself yellow
'yellow-li': '#f0ca5e'
}
},
},
variants: {