Skip to content

Commit 45cbd32

Browse files
pasqualevitiellopasqualevitiello
committed
4.0.0
1 parent 7b84f5b commit 45cbd32

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

81 files changed

+2933
-1752
lines changed

‎(auth)/layout.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import PageIllustration from "@/components/page-illustration";
2+
3+
export default function AuthLayout({
4+
children,
5+
}: {
6+
children: React.ReactNode;
7+
}) {
8+
return (
9+
<main className="relative flex grow flex-col">
10+
<PageIllustration multiple />
11+
12+
{children}
13+
</main>
14+
);
15+
}

‎(auth)/reset-password/page.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
export const metadata = {
2+
title: "Reset Password - Open PRO",
3+
description: "Page description",
4+
};
5+
6+
import Link from "next/link";
7+
8+
export default function ResetPassword() {
9+
return (
10+
<section>
11+
<div className="mx-auto max-w-6xl px-4 sm:px-6">
12+
<div className="py-12 md:py-20">
13+
{/* Section header */}
14+
<div className="pb-12 text-center">
15+
<h1 className="animate-[gradient_6s_linear_infinite] bg-[linear-gradient(to_right,theme(colors.gray.200),theme(colors.indigo.200),theme(colors.gray.50),theme(colors.indigo.300),theme(colors.gray.200))] bg-[length:200%_auto] bg-clip-text font-nacelle text-3xl font-semibold text-transparent md:text-4xl">
16+
Reset your password
17+
</h1>
18+
</div>
19+
{/* Contact form */}
20+
<form className="mx-auto max-w-[400px]">
21+
<div>
22+
<label
23+
className="mb-1 block text-sm font-medium text-indigo-200/65"
24+
htmlFor="email"
25+
>
26+
Email
27+
</label>
28+
<input
29+
id="email"
30+
type="email"
31+
className="form-input w-full"
32+
placeholder="Your email"
33+
/>
34+
</div>
35+
<div className="mt-6">
36+
<button className="btn w-full bg-gradient-to-t from-indigo-600 to-indigo-500 bg-[length:100%_100%] bg-[bottom] text-white shadow-[inset_0px_1px_0px_0px_theme(colors.white/.16)] hover:bg-[length:100%_150%]">
37+
Reset Password
38+
</button>
39+
</div>
40+
</form>
41+
</div>
42+
</div>
43+
</section>
44+
);
45+
}

‎(auth)/signin/page.tsx

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
export const metadata = {
2+
title: "Sign In - Open PRO",
3+
description: "Page description",
4+
};
5+
6+
import Link from "next/link";
7+
8+
export default function SignIn() {
9+
return (
10+
<section>
11+
<div className="mx-auto max-w-6xl px-4 sm:px-6">
12+
<div className="py-12 md:py-20">
13+
{/* Section header */}
14+
<div className="pb-12 text-center">
15+
<h1 className="animate-[gradient_6s_linear_infinite] bg-[linear-gradient(to_right,theme(colors.gray.200),theme(colors.indigo.200),theme(colors.gray.50),theme(colors.indigo.300),theme(colors.gray.200))] bg-[length:200%_auto] bg-clip-text font-nacelle text-3xl font-semibold text-transparent md:text-4xl">
16+
Welcome back
17+
</h1>
18+
</div>
19+
{/* Contact form */}
20+
<form className="mx-auto max-w-[400px]">
21+
<div className="space-y-5">
22+
<div>
23+
<label
24+
className="mb-1 block text-sm font-medium text-indigo-200/65"
25+
htmlFor="email"
26+
>
27+
Email
28+
</label>
29+
<input
30+
id="email"
31+
type="email"
32+
className="form-input w-full"
33+
placeholder="Your email"
34+
/>
35+
</div>
36+
<div>
37+
<div className="mb-1 flex items-center justify-between gap-3">
38+
<label
39+
className="block text-sm font-medium text-indigo-200/65"
40+
htmlFor="password"
41+
>
42+
Password
43+
</label>
44+
<Link
45+
className="text-sm text-gray-600 hover:underline"
46+
href="/reset-password"
47+
>
48+
Forgot?
49+
</Link>
50+
</div>
51+
<input
52+
id="password"
53+
type="password"
54+
className="form-input w-full"
55+
placeholder="Your password"
56+
/>
57+
</div>
58+
</div>
59+
<div className="mt-6 space-y-5">
60+
<button className="btn w-full bg-gradient-to-t from-indigo-600 to-indigo-500 bg-[length:100%_100%] bg-[bottom] text-white shadow-[inset_0px_1px_0px_0px_theme(colors.white/.16)] hover:bg-[length:100%_150%]">
61+
Sign in
62+
</button>
63+
<div className="flex items-center gap-3 text-center text-sm italic text-gray-600 before:h-px before:flex-1 before:bg-gradient-to-r before:from-transparent before:via-gray-400/25 after:h-px after:flex-1 after:bg-gradient-to-r after:from-transparent after:via-gray-400/25">
64+
or
65+
</div>
66+
<button className="btn relative w-full bg-gradient-to-b from-gray-800 to-gray-800/60 bg-[length:100%_100%] bg-[bottom] text-gray-300 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,theme(colors.gray.800),theme(colors.gray.700),theme(colors.gray.800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)] hover:bg-[length:100%_150%]">
67+
Sign In with Google
68+
</button>
69+
</div>
70+
</form>
71+
{/* Bottom link */}
72+
<div className="mt-6 text-center text-sm text-indigo-200/65">
73+
Don't you have an account?{" "}
74+
<Link className="font-medium text-indigo-500" href="/signup">
75+
Sign Up
76+
</Link>
77+
</div>
78+
</div>
79+
</div>
80+
</section>
81+
);
82+
}

‎(auth)/signup/page.tsx

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
export const metadata = {
2+
title: "Sign Up - Open PRO",
3+
description: "Page description",
4+
};
5+
6+
import Link from "next/link";
7+
8+
export default function SignUp() {
9+
return (
10+
<section>
11+
<div className="mx-auto max-w-6xl px-4 sm:px-6">
12+
<div className="py-12 md:py-20">
13+
{/* Section header */}
14+
<div className="pb-12 text-center">
15+
<h1 className="animate-[gradient_6s_linear_infinite] bg-[linear-gradient(to_right,theme(colors.gray.200),theme(colors.indigo.200),theme(colors.gray.50),theme(colors.indigo.300),theme(colors.gray.200))] bg-[length:200%_auto] bg-clip-text font-nacelle text-3xl font-semibold text-transparent md:text-4xl">
16+
Create an account
17+
</h1>
18+
</div>
19+
{/* Contact form */}
20+
<form className="mx-auto max-w-[400px]">
21+
<div className="space-y-5">
22+
<div>
23+
<label
24+
className="mb-1 block text-sm font-medium text-indigo-200/65"
25+
htmlFor="name"
26+
>
27+
Name <span className="text-red-500">*</span>
28+
</label>
29+
<input
30+
id="name"
31+
type="text"
32+
className="form-input w-full"
33+
placeholder="Your full name"
34+
required
35+
/>
36+
</div>
37+
<div>
38+
<label
39+
className="mb-1 block text-sm font-medium text-indigo-200/65"
40+
htmlFor="name"
41+
>
42+
Company Name <span className="text-red-500">*</span>
43+
</label>
44+
<input
45+
id="company"
46+
type="text"
47+
className="form-input w-full"
48+
placeholder="Your company name"
49+
required
50+
/>
51+
</div>
52+
<div>
53+
<label
54+
className="mb-1 block text-sm font-medium text-indigo-200/65"
55+
htmlFor="email"
56+
>
57+
Work Email <span className="text-red-500">*</span>
58+
</label>
59+
<input
60+
id="email"
61+
type="email"
62+
className="form-input w-full"
63+
placeholder="Your work email"
64+
/>
65+
</div>
66+
<div>
67+
<label
68+
className="block text-sm font-medium text-indigo-200/65"
69+
htmlFor="password"
70+
>
71+
Password <span className="text-red-500">*</span>
72+
</label>
73+
<input
74+
id="password"
75+
type="password"
76+
className="form-input w-full"
77+
placeholder="Password (at least 10 characters)"
78+
/>
79+
</div>
80+
</div>
81+
<div className="mt-6 space-y-5">
82+
<button className="btn w-full bg-gradient-to-t from-indigo-600 to-indigo-500 bg-[length:100%_100%] bg-[bottom] text-white shadow-[inset_0px_1px_0px_0px_theme(colors.white/.16)] hover:bg-[length:100%_150%]">
83+
Register
84+
</button>
85+
<div className="flex items-center gap-3 text-center text-sm italic text-gray-600 before:h-px before:flex-1 before:bg-gradient-to-r before:from-transparent before:via-gray-400/25 after:h-px after:flex-1 after:bg-gradient-to-r after:from-transparent after:via-gray-400/25">
86+
or
87+
</div>
88+
<button className="btn relative w-full bg-gradient-to-b from-gray-800 to-gray-800/60 bg-[length:100%_100%] bg-[bottom] text-gray-300 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,theme(colors.gray.800),theme(colors.gray.700),theme(colors.gray.800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)] hover:bg-[length:100%_150%]">
89+
Sign In with Google
90+
</button>
91+
</div>
92+
</form>
93+
{/* Bottom link */}
94+
<div className="mt-6 text-center text-sm text-indigo-200/65">
95+
Already have an account?{" "}
96+
<Link className="font-medium text-indigo-500" href="/signin">
97+
Sign in
98+
</Link>
99+
</div>
100+
</div>
101+
</div>
102+
</section>
103+
);
104+
}

‎.vscode/settings.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"typescript.tsdk": "node_modules/typescript/lib",
33
"typescript.enablePromptUseWorkspaceTsdk": true
4-
}
4+
}

‎CHANGELOG.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# CHANGELOG.md
22

3+
## [4.0.0] - 2024-09-11
4+
5+
Redesign the entire template
6+
37
## [3.3.0] - 2023-12-08
48

59
Update to Next.js 14
@@ -40,4 +44,4 @@ Replace Cruip CSS with Tailwind CSS
4044

4145
## [1.0.0] - 2020-04-07
4246

43-
First release
47+
First release

‎README.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
# Free React / Next.js landing page template
22

3-
![Open React / Next.js template preview](https://user-images.githubusercontent.com/2683512/231426532-c71f4291-4813-401b-a569-ada47fe13efa.png)
3+
![Open React / Next.js template preview](https://github.com/user-attachments/assets/522a5e46-2a0e-48ca-80eb-87c7fa58f3ea)
44

55
**Open** is a **free React / Next.js landing page template built with Tailwind CSS** for developers/makers who want to create a quick and professional landing page for their open source projects, SaaS products, online services, and more.
66

77
Use it for whatever you want, and be sure to reach us out on [Twitter](https://twitter.com/Cruip_com) if you build anything cool/useful with it.
88

99
Created and maintained with ❤️ by [Cruip.com](https://cruip.com).
1010

11-
*Version 1.0.0 built with the Cruip CSS is available [here](https://github.com/cruip/open-react-template/releases/tag/1.0.0).*
12-
*Version 2.0.3 built with Tailwind CSS and React + Vite is available [here](https://github.com/cruip/open-react-template/releases/tag/2.0.3).*
11+
_Version 1.0.0 built with the Cruip CSS is available [here](https://github.com/cruip/open-react-template/releases/tag/1.0.0)._
12+
_Version 2.0.3 built with Tailwind CSS and React + Vite is available [here](https://github.com/cruip/open-react-template/releases/tag/2.0.3)._
1313

1414
## Live demo
1515

1616
Check the live demo here 👉️ [https://open.cruip.com/](https://open.cruip.com/)
1717

1818
## Open PRO
1919

20-
[![Open Pro](https://user-images.githubusercontent.com/2683512/151177673-e56ade57-c98d-4c37-b315-d313bd14bb53.png)](https://cruip.com/)
20+
[![Open Pro](https://github.com/user-attachments/assets/2062c728-95f1-4d59-aa2d-d63556f625d5)](https://cruip.com/)
2121

2222
## Design files
2323

@@ -64,8 +64,8 @@ The easiest way to deploy your Next.js app is to use the [Vercel Platform](https
6464

6565
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
6666

67-
6867
### Support notes
68+
6969
This template has been developed with the App Router (`app`) and React Server Components. If you’re unfamiliar with these beta features, you can find more information about them on the Next.js beta documentation page. So, please note that any request dealing with React (e.g. extra features, customisations, et cetera) is to be considered out of the support scope.
7070

7171
For more information about what support covers, please see our (FAQs)[https://cruip.com/faq/].
@@ -77,7 +77,7 @@ For more information about what support covers, please see our (FAQs)[https://cr
7777
## Terms and License
7878

7979
- Released under the [GPL](https://www.gnu.org/licenses/gpl-3.0.html).
80-
- Copyright 2023 [Cruip](https://cruip.com/).
80+
- Copyright 2024 [Cruip](https://cruip.com/).
8181
- Use it for personal and commercial projects, but please don’t republish, redistribute, or resell the template.
8282
- Attribution is not required, although it is really appreciated.
8383

‎app/(auth)/layout.tsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1-
import PageIllustration from '@/components/page-illustration'
1+
import PageIllustration from "@/components/page-illustration";
22

33
export default function AuthLayout({
44
children,
55
}: {
6-
children: React.ReactNode
7-
}) {
6+
children: React.ReactNode;
7+
}) {
88
return (
9-
<main className="grow">
10-
11-
<PageIllustration />
9+
<main className="relative flex grow flex-col">
10+
<PageIllustration multiple />
1211

1312
{children}
14-
1513
</main>
16-
)
14+
);
1715
}

0 commit comments

Comments
 (0)