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
Show Stats 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() {
return (
<footer className={styles.footer}>
<footer className="flex items-center justify-center w-full h-24 border-t">
<a
href="https://www.datopian.com/"
className="flex items-center justify-center"
href="https://datopian.com/"
target="_blank"
rel="noopener noreferrer"
>
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>
</footer>
)

92
docs/pages/index.js
View File

@ -12,50 +12,62 @@ export default function Home() {
<link rel="icon" href="/favicon.ico" />
</Head>
<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}>
Welcome to <a href="https://github.com/datopian/portal.js">Portal.js!</a>
</h1>
<h2 className="mt-6 text-4xl font-normal leading-snug">
Rapidly build rich data portals using a modern frontend framework
</h2>
<p className={styles.description}>
Rapidly build rich data portals using a modern frontend framework!
</p>
<div className={styles.grid}>
<a href="/docs" className={styles.card}>
<h3>Documentation &rarr;</h3>
<p>Find in-depth information about Portal.js features and API.</p>
</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
<div className="flex flex-wrap items-center justify-around max-w-4xl mt-6 sm:w-full">
<a
href="/docs/"
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">▸ Documentation</h3>
<p className="mt-4 text-xl">
Find in-depth information about Portal.js features and API.
</p>
</a>
</div>
</main>
<Footer />
</div>
</a>
<a
href="/learn/"
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 />
</>
)
}