Skip to content

Commit 6c0c691

Browse files
ank-it07ank-it07
committed
landing and auth
1 parent 61c327b commit 6c0c691

21 files changed

+954
-275
lines changed

‎app/favicon.ico

-25.3 KB
Binary file not shown.

‎app/globals.css

+79-14
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,7 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
:root {
6-
--background: #ffffff;
7-
--foreground: #171717;
8-
}
9-
10-
@media (prefers-color-scheme: dark) {
11-
:root {
12-
--background: #0a0a0a;
13-
--foreground: #ededed;
14-
}
15-
}
16-
175
body {
18-
color: var(--foreground);
19-
background: var(--background);
206
font-family: Arial, Helvetica, sans-serif;
217
}
228

@@ -25,3 +11,82 @@ body {
2511
text-wrap: balance;
2612
}
2713
}
14+
15+
@layer base {
16+
:root {
17+
--background: 0 0% 100%;
18+
--foreground: 222.2 84% 4.9%;
19+
--card: 0 0% 100%;
20+
--card-foreground: 222.2 84% 4.9%;
21+
--popover: 0 0% 100%;
22+
--popover-foreground: 222.2 84% 4.9%;
23+
--primary: 222.2 47.4% 11.2%;
24+
--primary-foreground: 210 40% 98%;
25+
--secondary: 210 40% 96.1%;
26+
--secondary-foreground: 222.2 47.4% 11.2%;
27+
--muted: 210 40% 96.1%;
28+
--muted-foreground: 215.4 16.3% 46.9%;
29+
--accent: 210 40% 96.1%;
30+
--accent-foreground: 222.2 47.4% 11.2%;
31+
--destructive: 0 84.2% 60.2%;
32+
--destructive-foreground: 210 40% 98%;
33+
--border: 214.3 31.8% 91.4%;
34+
--input: 214.3 31.8% 91.4%;
35+
--ring: 222.2 84% 4.9%;
36+
--chart-1: 12 76% 61%;
37+
--chart-2: 173 58% 39%;
38+
--chart-3: 197 37% 24%;
39+
--chart-4: 43 74% 66%;
40+
--chart-5: 27 87% 67%;
41+
--radius: 0.5rem;
42+
}
43+
.dark {
44+
--background: 222.2 84% 4.9%;
45+
--foreground: 210 40% 98%;
46+
--card: 222.2 84% 4.9%;
47+
--card-foreground: 210 40% 98%;
48+
--popover: 222.2 84% 4.9%;
49+
--popover-foreground: 210 40% 98%;
50+
--primary: 210 40% 98%;
51+
--primary-foreground: 222.2 47.4% 11.2%;
52+
--secondary: 217.2 32.6% 17.5%;
53+
--secondary-foreground: 210 40% 98%;
54+
--muted: 217.2 32.6% 17.5%;
55+
--muted-foreground: 215 20.2% 65.1%;
56+
--accent: 217.2 32.6% 17.5%;
57+
--accent-foreground: 210 40% 98%;
58+
--destructive: 0 62.8% 30.6%;
59+
--destructive-foreground: 210 40% 98%;
60+
--border: 217.2 32.6% 17.5%;
61+
--input: 217.2 32.6% 17.5%;
62+
--ring: 212.7 26.8% 83.9%;
63+
--chart-1: 220 70% 50%;
64+
--chart-2: 160 60% 45%;
65+
--chart-3: 30 80% 55%;
66+
--chart-4: 280 65% 60%;
67+
--chart-5: 340 75% 55%;
68+
}
69+
}
70+
71+
@layer base {
72+
* {
73+
@apply border-border;
74+
}
75+
/* body {
76+
@apply bg-background text-foreground;
77+
} */
78+
h1 {
79+
@apply text-4xl md:text-6xl xl:text-7xl font-bold;
80+
}
81+
h2 {
82+
@apply text-4xl lg:text-4xl font-medium;
83+
}
84+
h3 {
85+
@apply text-2xl lg:text-4xl font-medium;
86+
}
87+
88+
button {
89+
@apply hover:cursor-pointer
90+
bg-purple-600 hover:bg-purple-700;
91+
}
92+
}

‎app/icon.ico

422 KB
Binary file not shown.

‎app/layout.tsx

+26-22
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,39 @@
11
import type { Metadata } from "next";
2-
import localFont from "next/font/local";
2+
import { IBM_Plex_Sans as FontSans } from "next/font/google";
33
import "./globals.css";
4+
import { cn } from "@/lib/utils";
5+
import Header from "@/components/home/header";
6+
import { ClerkProvider } from "@clerk/nextjs";
47

5-
const geistSans = localFont({
6-
src: "./fonts/GeistVF.woff",
7-
variable: "--font-geist-sans",
8-
weight: "100 900",
9-
});
10-
const geistMono = localFont({
11-
src: "./fonts/GeistMonoVF.woff",
12-
variable: "--font-geist-mono",
13-
weight: "100 900",
8+
import { ORIGIN_URL } from "@/lib/constants";
9+
10+
const fontSans = FontSans({
11+
subsets: ["latin"],
12+
weight: ["300", "400", "500", "700"],
13+
variable: "--font-sans",
1414
});
1515

16-
export const metadata: Metadata = {
17-
title: "Create Next App",
18-
description: "Generated by create next app",
19-
};
16+
2017

2118
export default function RootLayout({
2219
children,
2320
}: Readonly<{
2421
children: React.ReactNode;
2522
}>) {
2623
return (
27-
<html lang="en">
28-
<body
29-
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
30-
>
31-
{children}
32-
</body>
33-
</html>
24+
<ClerkProvider>
25+
<html lang="en">
26+
<body
27+
className={cn(
28+
"min-h-screen bg-background font-sans antialiased",
29+
fontSans.variable
30+
)}
31+
>
32+
<Header></Header>
33+
<main>{children}</main>
34+
35+
</body>
36+
</html>
37+
</ClerkProvider>
3438
);
35-
}
39+
}

‎app/page.tsx

+33-94
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,40 @@
1-
import Image from "next/image";
1+
import BgGradient from "@/components/common/bg-gradient";
2+
import Banner from "@/components/home/banner";
3+
import HowItWorks from "@/components/home/howitworks";
4+
import Pricing from "@/components/home/pricing";
5+
import { Dot } from "lucide-react";
26

37
export default function Home() {
48
return (
5-
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
6-
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
7-
<Image
8-
className="dark:invert"
9-
src="https://nextjs.org/icons/next.svg"
10-
alt="Next.js logo"
11-
width={180}
12-
height={38}
13-
priority
14-
/>
15-
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
16-
<li className="mb-2">
17-
Get started by editing{" "}
18-
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
19-
app/page.tsx
20-
</code>
21-
.
22-
</li>
23-
<li>Save and see your changes instantly.</li>
24-
</ol>
9+
<main className="mx-auto w-full inset-0 h-full bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]">
10+
<BgGradient />
11+
<Banner />
12+
<div className="flex items-center justify-center">
13+
<Dot className="text-purple-400"></Dot>
14+
<Dot className="text-purple-400"></Dot>
15+
<Dot className="text-purple-400"></Dot>
16+
</div>
17+
<HowItWorks />
18+
<div className="flex items-center justify-center">
19+
<Dot className="text-purple-400"></Dot>
20+
<Dot className="text-purple-400"></Dot>
21+
<Dot className="text-purple-400"></Dot>
22+
</div>
2523

26-
<div className="flex gap-4 items-center flex-col sm:flex-row">
27-
<a
28-
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
29-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
30-
target="_blank"
31-
rel="noopener noreferrer"
32-
>
33-
<Image
34-
className="dark:invert"
35-
src="https://nextjs.org/icons/vercel.svg"
36-
alt="Vercel logomark"
37-
width={20}
38-
height={20}
39-
/>
40-
Deploy now
41-
</a>
42-
<a
43-
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
44-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
45-
target="_blank"
46-
rel="noopener noreferrer"
47-
>
48-
Read our docs
49-
</a>
50-
</div>
51-
</main>
52-
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
53-
<a
54-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
55-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
56-
target="_blank"
57-
rel="noopener noreferrer"
58-
>
59-
<Image
60-
aria-hidden
61-
src="https://nextjs.org/icons/file.svg"
62-
alt="File icon"
63-
width={16}
64-
height={16}
65-
/>
66-
Learn
67-
</a>
68-
<a
69-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
70-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
71-
target="_blank"
72-
rel="noopener noreferrer"
73-
>
74-
<Image
75-
aria-hidden
76-
src="https://nextjs.org/icons/window.svg"
77-
alt="Window icon"
78-
width={16}
79-
height={16}
80-
/>
81-
Examples
82-
</a>
83-
<a
84-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
85-
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
86-
target="_blank"
87-
rel="noopener noreferrer"
88-
>
89-
<Image
90-
aria-hidden
91-
src="https://nextjs.org/icons/globe.svg"
92-
alt="Globe icon"
93-
width={16}
94-
height={16}
95-
/>
96-
Go to nextjs.org →
24+
<Pricing />
25+
26+
<div className="flex items-center justify-center">
27+
<Dot className="text-purple-400"></Dot>
28+
<Dot className="text-purple-400"></Dot>
29+
<Dot className="text-purple-400"></Dot>
30+
</div>
31+
32+
<footer className="bg-gray-200/20 flex h-20 py-24 px-12 z-20 relative overflow-hidden flex-col gap-2">
33+
<p>All Rights Reserved, {new Date().getFullYear()}</p>
34+
<a href="https://x.com/@kulkarniankita9" target="_blank">
35+
Built by Ankit 🚀
9736
</a>
9837
</footer>
99-
</div>
38+
</main>
10039
);
101-
}
40+
}

‎app/sign-in/[[...sign-in]]/page.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import BgGradient from "@/components/common/bg-gradient";
2+
import { SignIn } from "@clerk/nextjs";
3+
4+
export default function Page() {
5+
return (
6+
<section className="flex justify-center items-center py-16">
7+
<BgGradient>
8+
<SignIn />
9+
</BgGradient>
10+
</section>
11+
);
12+
}

‎app/sign-up/[[...sign-up]]/page.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import BgGradient from "@/components/common/bg-gradient";
2+
import { SignUp } from "@clerk/nextjs";
3+
4+
export default function Page() {
5+
return (
6+
<section className="flex justify-center items-center py-16">
7+
<BgGradient>
8+
<SignUp />
9+
</BgGradient>
10+
</section>
11+
);
12+
}

‎components.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "default",
4+
"rsc": true,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.ts",
8+
"css": "app/globals.css",
9+
"baseColor": "slate",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils",
16+
"ui": "@/components/ui",
17+
"lib": "@/lib",
18+
"hooks": "@/hooks"
19+
}
20+
}

‎components/common/bg-gradient.tsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
export default function BgGradient({
2+
children,
3+
className,
4+
}: {
5+
children?: React.ReactNode;
6+
className?: string;
7+
}) {
8+
return (
9+
<div className="relative isolate">
10+
<div
11+
aria-hidden="true"
12+
className="pointer-events-none absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
13+
>
14+
<div
15+
style={{
16+
clipPath:
17+
"polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)",
18+
}}
19+
className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72rem]"
20+
/>
21+
</div>
22+
{children}
23+
</div>
24+
);
25+
}

0 commit comments

Comments
 (0)