kris/reacord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add neat tilted background

Browse Source
This commit is contained in:
MapleLeaf
2022-01-12 17:51:16 -06:00
parent 0695bbc6bd
commit 1bfbe9608c
4 changed files with 32 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
packages/website/app/routes/index.tsx
View File

@@ -1,4 +1,5 @@
import packageJson from "reacord/package.json"
import dotsBackgroundUrl from "~/assets/dots-background.svg"
import { AppFooter } from "~/modules/app/app-footer"
import LandingExample from "~/modules/landing/landing-example.mdx"
import { MainNavigation } from "~/modules/navigation/main-navigation"
@@ -6,26 +7,32 @@ import { maxWidthContainer } from "~/modules/ui/components"
export default function Landing() {
return (
<div className="flex flex-col min-w-0 min-h-screen text-center pb-4">
<header className={maxWidthContainer}>
<MainNavigation />
</header>
<div className="px-4 pb-8 flex flex-1">
<main className="px-4 py-6 rounded-lg shadow bg-slate-800 space-y-5 m-auto w-full max-w-xl">
<h1 className="text-6xl font-light">reacord</h1>
<section className="mx-auto text-sm sm:text-base">
<LandingExample />
</section>
<p className="text-2xl font-light">{packageJson.description}</p>
<a
href="/guides/getting-started"
className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow"
>
Get Started
</a>
</main>
<>
<div
className="fixed inset-0 rotate-6 scale-125 opacity-20"
style={{ backgroundImage: `url(${dotsBackgroundUrl})` }}
/>
<div className="flex flex-col relative min-w-0 min-h-screen text-center pb-4">
<header className={maxWidthContainer}>
<MainNavigation />
</header>
<div className="px-4 pb-8 flex flex-1">
<main className="px-4 py-6 rounded-lg shadow bg-slate-800 space-y-5 m-auto w-full max-w-xl">
<h1 className="text-6xl font-light">reacord</h1>
<section className="mx-auto text-sm sm:text-base">
<LandingExample />
</section>
<p className="text-2xl font-light">{packageJson.description}</p>
<a
href="/guides/getting-started"
className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow"
>
Get Started
</a>
</main>
</div>
<AppFooter />
</div>
<AppFooter />
</div>
</>
)
}