-
Notifications
You must be signed in to change notification settings - Fork 105
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #79 from moinulmoin/feat/homepage-rework
feat/homepage rework
- Loading branch information
Showing
15 changed files
with
393 additions
and
62 deletions.
There are no files selected for viewing
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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
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
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,55 +1,13 @@ | ||
| import Link from "next/link"; | ||
| import Balancer from "react-wrap-balancer"; | ||
| import Icons from "~/components/shared/icons"; | ||
| import { buttonVariants } from "~/components/ui/button"; | ||
| import { nFormatter } from "~/lib/utils"; | ||
| import Features from "~/components/sections/features"; | ||
| import Hero from "~/components/sections/hero"; | ||
| import OpenSource from "~/components/sections/open-source"; | ||
|
|
||
| export default async function Home() { | ||
| const { stargazers_count: stars } = await fetch( | ||
| "https://api.github.com/repos/moinulmoin/chadnext", | ||
| { | ||
| next: { revalidate: 60 }, | ||
| } | ||
| ) | ||
| .then((res) => res.json()) | ||
| .catch((e) => console.error(e)); | ||
| return ( | ||
| <div className="container"> | ||
| <div className="flex h-full min-h-[calc(100vh-140px)] w-full flex-col items-center justify-center space-y-20 py-14 md:min-h-[calc(100vh-160px)] xl:py-24"> | ||
| <div className="mx-auto w-full max-w-2xl "> | ||
| <a | ||
| href="https://twitter.com/immoinulmoin/status/1661645764697919489" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| className="mx-auto mb-5 flex max-w-fit items-center justify-center space-x-2 overflow-hidden rounded-full bg-blue-100 px-7 py-2 transition-colors duration-300 ease-linear animate-in slide-in-from-top hover:bg-blue-200" | ||
| > | ||
| <Icons.twitter className="h-5 w-5 text-blue-700" /> | ||
| <p className="text-sm font-semibold text-blue-700"> | ||
| Introducing ChadNext | ||
| </p> | ||
| </a> | ||
| <h1 className="font-display bg-gradient-to-br from-black to-stone-500 bg-clip-text text-center text-4xl font-bold tracking-[-0.02em] text-transparent drop-shadow-sm duration-300 ease-linear animate-in zoom-in-50 dark:bg-gradient-to-br dark:from-gray-100 dark:to-gray-900 md:text-7xl md:leading-[5rem]"> | ||
| <Balancer>Quick Starter Template for your Next.js project</Balancer> | ||
| </h1> | ||
| <p className="mt-6 text-center text-muted-foreground md:text-xl"> | ||
| <Balancer>Packed with all necessary tools to get started.</Balancer> | ||
| </p> | ||
| <div className="mx-auto mt-6 flex items-center justify-center space-x-5"> | ||
| <Link | ||
| className={buttonVariants() + " gap-x-2"} | ||
| href="https://github.com/moinulmoin/chadnext" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <Icons.gitHub width={16} /> | ||
| <p> | ||
| <span className="hidden sm:inline-block">Star on</span> GitHub{" "} | ||
| <span className="font-semibold">{nFormatter(stars)}</span> | ||
| </p> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <> | ||
| <Hero /> | ||
| <Features /> | ||
| <OpenSource /> | ||
| </> | ||
| ); | ||
| } |
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
Binary file not shown.
Binary file not shown.
Binary file not shown.
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 |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import Balancer from "react-wrap-balancer"; | ||
| import { ToolIcons } from "../shared/tool-icons"; | ||
| import { Card } from "../ui/card"; | ||
|
|
||
| export default function Features() { | ||
| return ( | ||
| <section | ||
| id="features" | ||
| className="container space-y-6 rounded-md bg-secondary py-8 shadow md:py-12 lg:py-24" | ||
| > | ||
| <div className="mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center"> | ||
| <h2 className="font-heading text-4xl md:text-6xl">Features</h2> | ||
| <p className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7"> | ||
| <Balancer> | ||
| This template comes with features like Authentication, API routes, | ||
| File uploading and more in Next.js 13 app dir. | ||
| </Balancer> | ||
| </p> | ||
| </div> | ||
| <div className="mx-auto grid justify-center gap-4 sm:grid-cols-2 md:max-w-[64rem] md:grid-cols-3"> | ||
| <Card className="flex h-[180px] flex-col justify-between rounded-md p-6"> | ||
| <ToolIcons.nextjs /> | ||
| <div className="space-y-2"> | ||
| <h3 className="font-bold">Next.js 13</h3> | ||
| <p className="text-sm text-muted-foreground"> | ||
| App dir, Routing, Layouts, API routes, Server Components, Server | ||
| actions. | ||
| </p> | ||
| </div> | ||
| </Card> | ||
| <Card className="flex h-[180px] flex-col justify-between rounded-md p-6"> | ||
| <ToolIcons.shadcnUI /> | ||
| <div className="space-y-2"> | ||
| <h3 className="font-bold">Shadcn UI</h3> | ||
| <p className="text-sm text-muted-foreground"> | ||
| UI components built using Radix UI and styled with Tailwind CSS. | ||
| </p> | ||
| </div> | ||
| </Card> | ||
| <Card className="flex h-[180px] flex-col justify-between rounded-md p-6"> | ||
| <ToolIcons.prisma /> | ||
| <div className="space-y-2"> | ||
| <h3 className="font-bold">Database</h3> | ||
| <p className="text-sm text-muted-foreground"> | ||
| Using Postgres with Prisma ORM, hosted on Vercel Postgres. | ||
| </p> | ||
| </div> | ||
| </Card> | ||
| <Card className="flex h-[180px] flex-col justify-between rounded-md p-6"> | ||
| <ToolIcons.authjs /> | ||
| <div className="space-y-2"> | ||
| <h3 className="font-bold">Authentication</h3> | ||
| <p className="text-sm text-muted-foreground"> | ||
| Authentication using NextAuth.js and middlewares. | ||
| </p> | ||
| </div> | ||
| </Card> | ||
| <Card className="flex h-[180px] flex-col justify-between rounded-md p-6"> | ||
| <ToolIcons.uploadthing /> | ||
| <div className="space-y-2"> | ||
| <h3 className="font-bold">File Upload</h3> | ||
| <p className="text-sm text-muted-foreground"> | ||
| Upload and preview files effortlessly with UploadThing. | ||
| </p> | ||
| </div> | ||
| </Card> | ||
| <Card className="flex h-[180px] flex-col justify-between p-6"> | ||
| <ToolIcons.resend /> | ||
| <div className="space-y-2"> | ||
| <h3 className="font-bold">Emails</h3> | ||
| <p className="text-sm text-muted-foreground"> | ||
| Create emails using React Email and Send with Resend. | ||
| </p> | ||
| </div> | ||
| </Card> | ||
| </div> | ||
| <div className="mx-auto text-center md:max-w-[58rem]"> | ||
| <p className="leading-normal text-muted-foreground sm:text-lg sm:leading-7"> | ||
| ChadNext also includes changelog page built using Contentlayer and | ||
| MDX. | ||
| </p> | ||
| </div> | ||
| </section> | ||
| ); | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import { StarIcon } from "lucide-react"; | ||
| import Link from "next/link"; | ||
| import Balancer from "react-wrap-balancer"; | ||
| import Icons from "~/components/shared/icons"; | ||
| import { ToolIcons } from "~/components/shared/tool-icons"; | ||
| import { buttonVariants } from "~/components/ui/button"; | ||
| import { nFormatter } from "~/lib/utils"; | ||
|
|
||
| export default async function Hero() { | ||
| const { stargazers_count: stars } = await fetch( | ||
| "https://api.github.com/repos/moinulmoin/chadnext", | ||
| { | ||
| next: { revalidate: 60 }, | ||
| } | ||
| ) | ||
| .then((res) => res.json()) | ||
| .catch((e) => console.error(e)); | ||
| return ( | ||
| <section className="container"> | ||
| <div className="flex h-full min-h-[calc(100vh-140px)] w-full flex-col items-center justify-center space-y-20 py-14 md:min-h-[calc(100vh-160px)] xl:py-24"> | ||
| <div className="mx-auto w-full max-w-2xl "> | ||
| <a | ||
| href="https://twitter.com/immoinulmoin/status/1661645764697919489" | ||
| title="Follow Updates" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| className="mx-auto mb-5 flex max-w-fit items-center justify-center space-x-2 overflow-hidden rounded-full bg-blue-100 px-7 py-2 transition-colors duration-300 ease-linear animate-in slide-in-from-top hover:bg-blue-200" | ||
| > | ||
| <Icons.twitter className="h-5 w-5 text-blue-700" /> | ||
| <p className="text-sm font-semibold text-blue-700"> | ||
| Introducing ChadNext | ||
| </p> | ||
| </a> | ||
| <h1 className="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-400 bg-clip-text text-center font-heading text-4xl font-bold tracking-[-0.02em] text-transparent drop-shadow-sm duration-300 ease-linear animate-in zoom-in-50 dark:bg-gradient-to-br dark:from-gray-100 dark:to-gray-900 md:text-7xl md:leading-[5rem]"> | ||
| <Balancer>Quick Starter Template for your Next.js project</Balancer> | ||
| </h1> | ||
| <p className="mt-6 text-center text-muted-foreground md:text-xl"> | ||
| <Balancer> | ||
| Packed with all necessary features to get started. | ||
| </Balancer> | ||
| </p> | ||
| <div className="mx-auto mt-6 flex items-center justify-center space-x-5"> | ||
| <Link className={buttonVariants() + " gap-x-2"} href="/signin"> | ||
| Get Started | ||
| </Link> | ||
| <Link | ||
| className={buttonVariants({ variant: "outline" }) + " gap-x-2"} | ||
| href="https://github.com/moinulmoin/chadnext" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <span className="font-medium">{nFormatter(stars)}</span> | ||
| <StarIcon width={16} /> | ||
| <span>on</span> | ||
| <Icons.gitHub width={16} /> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| <div className="w-full "> | ||
| <h2 className="mb-6 text-center text-2xl font-semibold tracking-tight transition-colors"> | ||
| Built using Great Tools | ||
| </h2> | ||
| <div className="flex w-full flex-wrap items-center justify-center gap-x-20 gap-y-10 "> | ||
| {tools.map((t, i) => ( | ||
| <Link key={i} href={t.link} target="_blank"> | ||
| <t.icon /> | ||
| </Link> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| } | ||
|
|
||
| const tools = [ | ||
| { | ||
| link: "https://www.typescriptlang.org/", | ||
| icon: ToolIcons.ts, | ||
| }, | ||
| { | ||
| link: "https://nextjs.org/", | ||
| icon: ToolIcons.nextjs, | ||
| }, | ||
| { | ||
| link: "https://tailwindcss.com/", | ||
| icon: ToolIcons.tailwind, | ||
| }, | ||
| { | ||
| link: "https://www.prisma.io/", | ||
| icon: ToolIcons.prisma, | ||
| }, | ||
| { | ||
| link: "https://vercel.com/", | ||
| icon: ToolIcons.vercel, | ||
| }, | ||
| ]; |
Oops, something went wrong.
0926fa8There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
chadnext – ./
chadnext-git-main-moinulmoin.vercel.app
chadnext.vercel.app
chadnext.moinulmoin.com
chadnext-moinulmoin.vercel.app