From 7f61c809e981b84d9337b01dbc81a0ef99fcad3d Mon Sep 17 00:00:00 2001 From: shadcn Date: Thu, 10 Nov 2022 12:38:41 +0400 Subject: [PATCH] feat: implement responsive styles for marketing pages --- app/(auth)/layout.tsx | 2 +- app/(auth)/login/page.tsx | 30 ++--- app/(auth)/register/page.tsx | 10 +- app/(marketing)/blog/[...slug]/page.tsx | 17 ++- app/(marketing)/blog/page.tsx | 36 ++--- app/(marketing)/layout.tsx | 37 ++++-- app/(marketing)/page.tsx | 168 ++++++++++++++++++++---- components/icons.tsx | 2 + tailwind.config.js | 4 + 9 files changed, 226 insertions(+), 80 deletions(-) diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx index c0b534d..ca7d2eb 100644 --- a/app/(auth)/layout.tsx +++ b/app/(auth)/layout.tsx @@ -5,5 +5,5 @@ interface AuthLayoutProps { } export default function RootLayout({ children }: AuthLayoutProps) { - return
{children}
+ return
{children}
} diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx index a3da97c..042421c 100644 --- a/app/(auth)/login/page.tsx +++ b/app/(auth)/login/page.tsx @@ -5,32 +5,30 @@ import { UserAuthForm } from "@/components/user-auth-form" export default function LoginPage() { return ( -
+
<> Back -
-
-
- -

Welcome back

-

- Enter your email to sign in to your account -

-
- -

- - Don't have an account? Sign Up - +

+
+ +

Welcome back

+

+ Enter your email to sign in to your account

+ +

+ + Don't have an account? Sign Up + +

) diff --git a/app/(auth)/register/page.tsx b/app/(auth)/register/page.tsx index 30898b7..8489bf0 100644 --- a/app/(auth)/register/page.tsx +++ b/app/(auth)/register/page.tsx @@ -5,16 +5,16 @@ import { UserAuthForm } from "@/components/user-auth-form" export default function RegisterPage() { return ( -
+
Login -
-
-
+
+
+

Create an account

diff --git a/app/(marketing)/blog/[...slug]/page.tsx b/app/(marketing)/blog/[...slug]/page.tsx index 0e21fa2..b5e3164 100644 --- a/app/(marketing)/blog/[...slug]/page.tsx +++ b/app/(marketing)/blog/[...slug]/page.tsx @@ -31,23 +31,26 @@ export default async function PostPage({ params }: PostPageProps) { const mdx = await serialize(post.content) return ( -
-
-

+
+
+

{post.frontMatter.title}

{post.frontMatter.date && ( -

- {formatDate(post.frontMatter.date)} -

+

{formatDate(post.frontMatter.date)}

)}
-
+
+
+
{mdx && (
)} +
+
+
) } diff --git a/app/(marketing)/blog/page.tsx b/app/(marketing)/blog/page.tsx index f9e4562..c4ba1a5 100644 --- a/app/(marketing)/blog/page.tsx +++ b/app/(marketing)/blog/page.tsx @@ -2,29 +2,33 @@ import Link from "next/link" import { Blog } from "@/lib/mdx/sources" import { formatDate } from "@/lib/utils" -import { Icons } from "@/components/icons" export default async function BlogPage() { const posts = await Blog.getAllMdxNodes() return ( -
-

- Blog -

-

- A blog built using MDX content. I copied some sample blog posts from my{" "} - - personal site - - . -

-
+
+
+

+ Blog +

+

+ A blog built using MDX content. I copied some sample blog posts from + my{" "} + + personal site + + . +

+
+
+
+
{posts.map((post) => (
-

+

{post.frontMatter.title}

@@ -37,7 +41,9 @@ export default async function BlogPage() { {post.frontMatter.excerpt && (

{post.frontMatter.excerpt}

)} -
+
+
+
))}
diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx index 65b4a0d..39c7a74 100644 --- a/app/(marketing)/layout.tsx +++ b/app/(marketing)/layout.tsx @@ -7,24 +7,41 @@ interface MarketingLayoutProps { export default function MarketingLayout({ children }: MarketingLayoutProps) { return ( -
-
-
+
+
+
- Taxonomy + Taxonomy -
-
- Login -
+
-
{children}
+
{children}
) } diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx index a23c564..fd432bf 100644 --- a/app/(marketing)/page.tsx +++ b/app/(marketing)/page.tsx @@ -1,33 +1,149 @@ -import { Icons } from "@/components/icons" -import Image from "next/image" import Link from "next/link" +import { Icons } from "@/components/icons" + export default function IndexPage() { return ( -
-
-

- Publishing Platform for Everyone -

-

- A Next.js 13 application built using layouts, server components and - everything new in React 18. -

- - Get Started - - + <> +
+
+ + Follow the development on Twitter + + + + +

+ Publishing Platform for Everyone +

+

+ An open source application built using the new router, server + components and everything new in Next.js 13. +

+
+
+ + Get Started + + + + GitHub + +
+
+
+
- Next.js logo -
+
+
+

+ Features +

+

+ This project is as an experiment to see how a modern app, with + features like authentication, subscriptions, API routes, and static + pages, would work in Next.js 13. +

+
+
+
+
+ + + +
+

Next.js 13

+

+ App dir, Routing, Layouts, Loading UI and API routes. +

+
+
+
+
+
+ + + +
+

React 18

+

+ Server and Client Components. Use hook. +

+
+
+
+
+
+ + + +
+

Database

+

+ ORM using Prisma and deployed on PlanetScale. +

+
+
+
+
+
+ + + +
+

Components

+

+ UI components built using Radix UI and styled with Tailwind + CSS. +

+
+
+
+
+
+ + + +
+

Authentication

+

+ Authentication using NextAuth.js and middlewares. +

+
+
+
+
+
+ + + +
+

Subscriptions

+

+ Free and paid subscriptions using Stripe. +

+
+
+
+
+
+ ) } diff --git a/components/icons.tsx b/components/icons.tsx index a9027a0..4500cc4 100644 --- a/components/icons.tsx +++ b/components/icons.tsx @@ -5,6 +5,7 @@ import { Command, File, FileText, + Github, HelpCircle, Image, Loader2, @@ -35,4 +36,5 @@ export const Icons = { arrowRight: ArrowRight, help: HelpCircle, pizza: Pizza, + gitHub: Github, } diff --git a/tailwind.config.js b/tailwind.config.js index 360faf7..158b7d1 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -8,6 +8,10 @@ module.exports = { "./ui/**/*.{ts,tsx}", ], theme: { + container: { + center: true, + padding: "1.5rem", + }, extend: { colors: { ...colors,