knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[site][s]: refactor front page to tailwind and use new logo.

Browse Source
This commit is contained in:
Rufus Pollock
2021-05-26 20:25:07 +02:00
parent 27187fe02f
commit 6e81d5d707
2 changed files with 56 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/components/Footer/index.jsx
View File

@@ -2,14 +2,15 @@ import styles from '../../styles/Home.module.css'
export default function Footer() { export default function Footer() {
return ( return (
<footer className={styles.footer}> <footer className="flex items-center justify-center w-full h-24 border-t">
<a <a
href="https://www.datopian.com/" className="flex items-center justify-center"
href="https://datopian.com/"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
Built by{' '} Built by{' '}
<img src="/datopian-logo.png" alt="Datopian Logo" className={styles.logo} /> <img src="/datopian-logo.png" alt="Datopian Logo" className="h-6 ml-2" />
</a> </a>
</footer> </footer>
) )

92
docs/pages/index.js
View File

@@ -12,50 +12,62 @@ export default function Home() {
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<Nav /> <Nav />
<div className={styles.container}>
<main className={styles.main}> <main className="flex flex-col items-center justify-center w-full flex-1 px-20 text-center py-10">
<h1 className="text-6xl font-bold">
<a href="https://portaljs.com/">
<img src="/logo.svg" alt="PortalJS Logo" className="h-28" />
</a>
</h1>
<h1 className={styles.title}> <h2 className="mt-6 text-4xl font-normal leading-snug">
Welcome to <a href="https://github.com/datopian/portal.js">Portal.js!</a> Rapidly build rich data portals using a modern frontend framework
</h1> </h2>
<p className={styles.description}> <div className="flex flex-wrap items-center justify-around max-w-4xl mt-6 sm:w-full">
Rapidly build rich data portals using a modern frontend framework! <a
</p> href="/docs/"
className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
<div className={styles.grid}> >
<a href="/docs" className={styles.card}> <h3 className="text-2xl font-semibold">▸ Documentation</h3>
<h3>Documentation &rarr;</h3> <p className="mt-4 text-xl">
<p>Find in-depth information about Portal.js features and API.</p> Find in-depth information about Portal.js features and API.
</a>
<a href="/learn" className={styles.card}>
<h3>Learn &rarr;</h3>
<p>Learn about Portal.js with examples!</p>
</a>
<a
href="/gallery"
className={styles.card}
>
<h3>Gallery &rarr;</h3>
<p>Discover examples of Portal.js projects.</p>
</a>
<a
href="https://github.com/datopian/portal.js"
className={styles.card}
>
<h3>Contribute &rarr;</h3>
<p>
Checkout the Portal.js repository on github
</p> </p>
</a> </a>
</div>
</main> <a
<Footer /> href="/learn/"
</div> className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
>
<h3 className="text-2xl font-semibold">▸ Learn</h3>
<p className="mt-4 text-xl">
Learn about Portal.js in an interactive course.
</p>
</a>
<a
href="/gallery/"
className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
>
<h3 className="text-2xl font-semibold">▸ Gallery</h3>
<p className="mt-4 text-xl">
Discover examples of Portal.js projects.
</p>
</a>
<a
href="https://github.com/datopian/portal.js"
className="p-6 mt-6 text-left border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600"
>
<h3 className="text-2xl font-semibold">▸ Contribute</h3>
<p className="mt-4 text-xl">
Checkout the Portal.js repository on github
</p>
</a>
</div>
</main>
<Footer />
</> </>
) )
} }