-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
18 changed files
with
6,623 additions
and
4,481 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,169 +1,20 @@ | ||
import Card from "@/components/home/card"; | ||
import { DEPLOY_URL } from "@/lib/constants"; | ||
import { Github, Twitter } from "@/components/shared/icons"; | ||
import WebVitals from "@/components/home/web-vitals"; | ||
import ComponentGrid from "@/components/home/component-grid"; | ||
import Image from "next/image"; | ||
import { nFormatter } from "@/lib/utils"; | ||
|
||
export default async function Home() { | ||
const { stargazers_count: stars } = await fetch( | ||
"https://api.github.com/repos/steven-tey/precedent", | ||
{ | ||
...(process.env.GITHUB_OAUTH_TOKEN && { | ||
headers: { | ||
Authorization: `Bearer ${process.env.GITHUB_OAUTH_TOKEN}`, | ||
"Content-Type": "application/json", | ||
}, | ||
}), | ||
// data will revalidate every 24 hours | ||
next: { revalidate: 86400 }, | ||
}, | ||
) | ||
.then((res) => res.json()) | ||
.catch((e) => console.log(e)); | ||
|
||
export default function Home() { | ||
return ( | ||
<> | ||
<div className="z-10 w-full max-w-xl px-5 xl:px-0"> | ||
<a | ||
href="https://twitter.com/steventey/status/1613928948915920896" | ||
target="_blank" | ||
rel="noreferrer" | ||
className="mx-auto mb-5 flex max-w-fit animate-fade-up items-center justify-center space-x-2 overflow-hidden rounded-full bg-blue-100 px-7 py-2 transition-colors hover:bg-blue-200" | ||
> | ||
<Twitter className="h-5 w-5 text-[#1d9bf0]" /> | ||
<p className="text-sm font-semibold text-[#1d9bf0]"> | ||
Introducing Precedent | ||
</p> | ||
</a> | ||
<div className="z-10 w-full max-w-2xl px-5 xl:px-0"> | ||
<h1 | ||
className="animate-fade-up bg-gradient-to-br from-black to-stone-500 bg-clip-text text-center font-display text-4xl font-bold tracking-[-0.02em] text-transparent opacity-0 drop-shadow-sm [text-wrap:balance] md:text-7xl md:leading-[5rem]" | ||
className="animate-fade-up bg-gradient-to-br from-black to-stone-500 bg-clip-text text-center font-display text-3xl font-bold tracking-[-0.02em] text-transparent opacity-0 drop-shadow-sm [text-wrap:balance] md:text-7xl md:leading-[5rem]" | ||
style={{ animationDelay: "0.15s", animationFillMode: "forwards" }} | ||
> | ||
Building blocks for your Next project | ||
Innovating Journalism | ||
</h1> | ||
<p | ||
className="mt-6 animate-fade-up text-center text-gray-500 opacity-0 [text-wrap:balance] md:text-xl" | ||
style={{ animationDelay: "0.25s", animationFillMode: "forwards" }} | ||
> | ||
An opinionated collection of components, hooks, and utilities for your | ||
Next.js project. | ||
Revolutionize the way we approach news and media in the digital age. | ||
</p> | ||
<div | ||
className="mx-auto mt-6 flex animate-fade-up items-center justify-center space-x-5 opacity-0" | ||
style={{ animationDelay: "0.3s", animationFillMode: "forwards" }} | ||
> | ||
<a | ||
className="group flex max-w-fit items-center justify-center space-x-2 rounded-full border border-black bg-black px-5 py-2 text-sm text-white transition-colors hover:bg-white hover:text-black" | ||
href={DEPLOY_URL} | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
<svg | ||
className="h-4 w-4 group-hover:text-black" | ||
viewBox="0 0 24 24" | ||
fill="currentColor" | ||
xmlns="https://www.w3.org/2000/svg" | ||
> | ||
<path | ||
d="M12 4L20 20H4L12 4Z" | ||
stroke="currentColor" | ||
strokeWidth="2" | ||
strokeLinecap="round" | ||
strokeLinejoin="round" | ||
/> | ||
</svg> | ||
<p>Deploy to Vercel</p> | ||
</a> | ||
<a | ||
className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-gray-300 bg-white px-5 py-2 text-sm text-gray-600 shadow-md transition-colors hover:border-gray-800" | ||
href="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/steven-tey/precedent" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
<Github /> | ||
<p> | ||
<span className="hidden sm:inline-block">Star on</span> GitHub{" "} | ||
<span className="font-semibold">{nFormatter(stars)}</span> | ||
</p> | ||
</a> | ||
</div> | ||
</div> | ||
<div className="my-10 grid w-full max-w-screen-xl animate-fade-up grid-cols-1 gap-5 px-5 md:grid-cols-3 xl:px-0"> | ||
{features.map(({ title, description, demo, large }) => ( | ||
<Card | ||
key={title} | ||
title={title} | ||
description={description} | ||
demo={ | ||
title === "Beautiful, reusable components" ? ( | ||
<ComponentGrid /> | ||
) : ( | ||
demo | ||
) | ||
} | ||
large={large} | ||
/> | ||
))} | ||
</div> | ||
</> | ||
); | ||
} | ||
|
||
const features = [ | ||
{ | ||
title: "Beautiful, reusable components", | ||
description: | ||
"Pre-built beautiful, a11y-first components, powered by [Tailwind CSS](https://tailwindcss.com/), [Radix UI](https://www.radix-ui.com/), and [Framer Motion](https://framer.com/motion)", | ||
large: true, | ||
}, | ||
{ | ||
title: "Performance first", | ||
description: | ||
"Built on [Next.js](https://nextjs.org/) primitives like `@next/font` and `next/image` for stellar performance.", | ||
demo: <WebVitals />, | ||
}, | ||
{ | ||
title: "One-click Deploy", | ||
description: | ||
"Jumpstart your next project by deploying Precedent to [Vercel](https://vercel.com/) in one click.", | ||
demo: ( | ||
<a href={DEPLOY_URL}> | ||
<Image | ||
src="https://vercel.com/button" | ||
alt="Deploy with Vercel" | ||
width={120} | ||
height={30} | ||
unoptimized | ||
/> | ||
</a> | ||
), | ||
}, | ||
{ | ||
title: "Built-in Auth + Database", | ||
description: | ||
"Precedent comes with authentication and database via [Auth.js](https://authjs.dev/) + [Prisma](https://prisma.io/)", | ||
demo: ( | ||
<div className="flex items-center justify-center space-x-20"> | ||
<Image alt="Auth.js logo" src="/authjs.webp" width={50} height={50} /> | ||
<Image alt="Prisma logo" src="/prisma.svg" width={50} height={50} /> | ||
</div> | ||
), | ||
}, | ||
{ | ||
title: "Hooks, utilities, and more", | ||
description: | ||
"Precedent offers a collection of hooks, utilities, and `@vercel/og`", | ||
demo: ( | ||
<div className="grid grid-flow-col grid-rows-3 gap-10 p-10"> | ||
<span className="font-mono font-semibold">useIntersectionObserver</span> | ||
<span className="font-mono font-semibold">useLocalStorage</span> | ||
<span className="font-mono font-semibold">useScroll</span> | ||
<span className="font-mono font-semibold">nFormatter</span> | ||
<span className="font-mono font-semibold">capitalize</span> | ||
<span className="font-mono font-semibold">truncate</span> | ||
</div> | ||
), | ||
}, | ||
]; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,28 +1,26 @@ | ||
import { BuyMeACoffee } from "../shared/icons"; | ||
|
||
export default function Footer() { | ||
return ( | ||
<div className="absolute w-full py-5 text-center"> | ||
<div className="fixed bottom-0 w-full py-5 text-center"> | ||
<p className="text-gray-500"> | ||
A project by{" "} | ||
<a | ||
className="font-semibold text-gray-600 underline-offset-4 transition-colors hover:underline" | ||
href="https://twitter.com/steventey" | ||
href="https://github.com/admineral" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
Steven Tey | ||
Elias Zobler | ||
</a> | ||
{" "}and{" "} | ||
<a | ||
className="font-semibold text-gray-600 underline-offset-4 transition-colors hover:underline" | ||
href="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/nixknameee" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
Nikoll Gjokaj | ||
</a> | ||
</p> | ||
<a | ||
href="https://www.buymeacoffee.com/steventey" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
className="mx-auto mt-2 flex max-w-fit items-center justify-center space-x-2 rounded-lg border border-gray-200 bg-white px-6 py-2 transition-all duration-75 hover:scale-105" | ||
> | ||
<BuyMeACoffee className="h-6 w-6" /> | ||
<p className="font-medium text-gray-600">Buy me a coffee</p> | ||
</a> | ||
</div> | ||
); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.