Skip to content

Commit 427bd91

Browse files
pasqualevitiellopasqualevitiello
committed
v3.0.0 - Next.js conversion
1 parent 2201318 commit 427bd91

Some content is hidden

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

61 files changed

+1643
-3706
lines changed

‎.gitignore‎

Lines changed: 38 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,39 @@
1-
node_modules
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
219
.DS_Store
3-
dist
4-
dist-ssr
5-
*.local
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
.pnpm-debug.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts
37+
38+
# contentlayer
39+
.contentlayer

‎.vscode/settings.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"typescript.tsdk": "node_modules/typescript/lib",
3+
"typescript.enablePromptUseWorkspaceTsdk": true
4+
}

‎CHANGELOG.md‎

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

3+
## [3.0.0] - 2023-04-12
4+
5+
Conversion to Next.js
6+
37
## [2.0.3] - 2023-03-28
48

59
Fix video

‎README.md‎

Lines changed: 37 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
# Free React landing page template
22

3-
![Open React template preview](https://user-images.githubusercontent.com/2683512/217847405-a7941b8f-45e9-4ed0-8793-03f793f45db1.png)
3+
![Open React template preview](https://user-images.githubusercontent.com/2683512/231426532-c71f4291-4813-401b-a569-ada47fe13efa.png)
44

55
**Open** is a **free React 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-
*The previous version built with the Cruip CSS is available [here](https://github.com/cruip/open-react-template/releases/tag/1.0.0).*
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).*
1213

1314
## Live demo
1415

@@ -18,43 +19,50 @@ Check the live demo here 👉️ [https://open.cruip.com/](https://open.cruip.co
1819

1920
[![Open Pro](https://user-images.githubusercontent.com/2683512/151177673-e56ade57-c98d-4c37-b315-d313bd14bb53.png)](https://cruip.com/)
2021

21-
## Table of contents
22-
23-
* [Usage](#usage)
24-
* [Project setup](#project-setup)
25-
* [Compiles and hot-reloads for development](#compiles-and-hot-reloads-for-development)
26-
* [Compiles and minifies for production](#compiles-and-minifies-for-production)
27-
* [Customize configuration](#customize-configuration)
28-
* [Support notes](#support-notes)
29-
* [Credits](#credits)
30-
* [Terms and License](#terms-and-license)
31-
* [About Us](#about-us)
32-
* [Stay in the loop](#stay-in-the-loop)
33-
3422
## Usage
3523

36-
This project was bootstrapped with [Vite](https://vitejs.dev/).
24+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
3725

38-
### Project setup
39-
```
40-
npm install
41-
```
26+
### Getting Started
4227

43-
#### Compiles and hot-reloads for development
44-
```
28+
First, run the development server:
29+
30+
```bash
4531
npm run dev
32+
# or
33+
yarn dev
34+
# or
35+
pnpm dev
4636
```
4737

48-
#### Compiles and minifies for production
49-
```
50-
npm run build
51-
```
38+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
39+
40+
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
41+
42+
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
43+
44+
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
45+
46+
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
47+
48+
### Learn More
49+
50+
To learn more about Next.js, take a look at the following resources:
51+
52+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
53+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
54+
55+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
56+
57+
### Deploy on Vercel
58+
59+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
60+
61+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
5262

53-
#### Customize configuration
54-
See [Configuration Reference](https://vitejs.dev/guide/).
5563

5664
### Support notes
57-
We are shipping our templates with a very basic React configuration to let you quickly get into the development process, but we don't discourage you from using any other configuration or framework built on the top of React. 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.
65+
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.
5866

5967
For more information about what support covers, please see our (FAQs)[https://cruip.com/faq/].
6068

‎app/(auth)/layout.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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="grow">
10+
11+
<PageIllustration />
12+
13+
{children}
14+
15+
</main>
16+
)
17+
}

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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 className="relative">
11+
<div className="max-w-6xl mx-auto px-4 sm:px-6">
12+
<div className="pt-32 pb-12 md:pt-40 md:pb-20">
13+
14+
{/* Page header */}
15+
<div className="max-w-3xl mx-auto text-center pb-12 md:pb-20">
16+
<h1 className="h1 mb-4">Forgot your password?</h1>
17+
<p className="text-xl text-gray-400">We'll email you instructions on how to reset it.</p>
18+
</div>
19+
20+
{/* Form */}
21+
<div className="max-w-sm mx-auto">
22+
<form>
23+
<div className="flex flex-wrap -mx-3 mb-4">
24+
<div className="w-full px-3">
25+
<label className="block text-gray-300 text-sm font-medium mb-1" htmlFor="email">Email</label>
26+
<input id="email" type="email" className="form-input w-full text-gray-300" placeholder="you@yourcompany.com" required />
27+
</div>
28+
</div>
29+
<div className="flex flex-wrap -mx-3 mt-6">
30+
<div className="w-full px-3">
31+
<button className="btn text-white bg-purple-600 hover:bg-purple-700 w-full">Reset Password</button>
32+
</div>
33+
</div>
34+
</form>
35+
<div className="text-gray-400 text-center mt-6">
36+
<Link href="/signin" className="text-purple-600 hover:text-gray-200 transition duration-150 ease-in-out">Cancel</Link>
37+
</div>
38+
</div>
39+
40+
</div>
41+
</div>
42+
</section>
43+
)
44+
}

‎app/(auth)/signin/page.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
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 className="relative">
11+
<div className="max-w-6xl mx-auto px-4 sm:px-6">
12+
<div className="pt-32 pb-12 md:pt-40 md:pb-20">
13+
14+
{/* Page header */}
15+
<div className="max-w-3xl mx-auto text-center pb-12 md:pb-20">
16+
<h1 className="h1">Welcome back. We exist to make entrepreneurship easier.</h1>
17+
</div>
18+
19+
{/* Form */}
20+
<div className="max-w-sm mx-auto">
21+
<form>
22+
<div className="flex flex-wrap -mx-3">
23+
<div className="w-full px-3">
24+
<button className="btn px-0 text-white bg-red-600 hover:bg-red-700 w-full relative flex items-center">
25+
<svg className="w-4 h-4 fill-current text-white opacity-75 shrink-0 mx-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
26+
<path d="M7.9 7v2.4H12c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C11.5 1.7 9.9 1 8 1 4.1 1 1 4.1 1 8s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H7.9z" />
27+
</svg>
28+
<span className="h-6 flex items-center border-r border-white border-opacity-25 mr-4" aria-hidden="true"></span>
29+
<span className="flex-auto pl-16 pr-8 -ml-16">Sign in with Google</span>
30+
</button>
31+
</div>
32+
</div>
33+
</form>
34+
<div className="flex items-center my-6">
35+
<div className="border-t border-gray-700 border-dotted grow mr-3" aria-hidden="true"></div>
36+
<div className="text-gray-400">Or, sign in with your email</div>
37+
<div className="border-t border-gray-700 border-dotted grow ml-3" aria-hidden="true"></div>
38+
</div>
39+
<form>
40+
<div className="flex flex-wrap -mx-3 mb-4">
41+
<div className="w-full px-3">
42+
<label className="block text-gray-300 text-sm font-medium mb-1" htmlFor="email">Email</label>
43+
<input id="email" type="email" className="form-input w-full text-gray-300" placeholder="you@yourcompany.com" required />
44+
</div>
45+
</div>
46+
<div className="flex flex-wrap -mx-3 mb-4">
47+
<div className="w-full px-3">
48+
<label className="block text-gray-300 text-sm font-medium mb-1" htmlFor="password">Password</label>
49+
<input id="password" type="password" className="form-input w-full text-gray-300" placeholder="Password (at least 10 characters)" required />
50+
</div>
51+
</div>
52+
<div className="flex flex-wrap -mx-3 mb-4">
53+
<div className="w-full px-3">
54+
<div className="flex justify-between">
55+
<label className="flex items-center">
56+
<input type="checkbox" className="form-checkbox" />
57+
<span className="text-gray-400 ml-2">Keep me signed in</span>
58+
</label>
59+
<Link href="/reset-password" className="text-purple-600 hover:text-gray-200 transition duration-150 ease-in-out">Forgot Password?</Link>
60+
</div>
61+
</div>
62+
</div>
63+
<div className="flex flex-wrap -mx-3 mt-6">
64+
<div className="w-full px-3">
65+
<button className="btn text-white bg-purple-600 hover:bg-purple-700 w-full">Sign in</button>
66+
</div>
67+
</div>
68+
</form>
69+
<div className="text-gray-400 text-center mt-6">
70+
Don’t you have an account? <Link href="/signup" className="text-purple-600 hover:text-gray-200 transition duration-150 ease-in-out">Sign up</Link>
71+
</div>
72+
</div>
73+
74+
</div>
75+
</div>
76+
</section>
77+
)
78+
}

‎app/(auth)/signup/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 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 className="relative">
11+
<div className="max-w-6xl mx-auto px-4 sm:px-6">
12+
<div className="pt-32 pb-12 md:pt-40 md:pb-20">
13+
14+
{/* Page header */}
15+
<div className="max-w-3xl mx-auto text-center pb-12 md:pb-20">
16+
<h1 className="h1">Welcome. We exist to make entrepreneurship easier.</h1>
17+
</div>
18+
19+
{/* Form */}
20+
<div className="max-w-sm mx-auto">
21+
<form>
22+
<div className="flex flex-wrap -mx-3">
23+
<div className="w-full px-3">
24+
<button className="btn px-0 text-white bg-red-600 hover:bg-red-700 w-full relative flex items-center">
25+
<svg className="w-4 h-4 fill-current text-white opacity-75 shrink-0 mx-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
26+
<path d="M7.9 7v2.4H12c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C11.5 1.7 9.9 1 8 1 4.1 1 1 4.1 1 8s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H7.9z" />
27+
</svg>
28+
<span className="h-6 flex items-center border-r border-white border-opacity-25 mr-4" aria-hidden="true"></span>
29+
<span className="flex-auto pl-16 pr-8 -ml-16">Sign up with Google</span>
30+
</button>
31+
</div>
32+
</div>
33+
</form>
34+
<div className="flex items-center my-6">
35+
<div className="border-t border-gray-700 border-dotted grow mr-3" aria-hidden="true"></div>
36+
<div className="text-gray-400">Or, register with your email</div>
37+
<div className="border-t border-gray-700 border-dotted grow ml-3" aria-hidden="true"></div>
38+
</div>
39+
<form>
40+
<div className="flex flex-wrap -mx-3 mb-4">
41+
<div className="w-full px-3">
42+
<label className="block text-gray-300 text-sm font-medium mb-1" htmlFor="full-name">Full Name <span className="text-red-600">*</span></label>
43+
<input id="full-name" type="text" className="form-input w-full text-gray-300" placeholder="First and last name" required />
44+
</div>
45+
</div>
46+
<div className="flex flex-wrap -mx-3 mb-4">
47+
<div className="w-full px-3">
48+
<label className="block text-gray-300 text-sm font-medium mb-1" htmlFor="company-name">Company Name <span className="text-red-600">*</span></label>
49+
<input id="company-name" type="text" className="form-input w-full text-gray-300" placeholder="Your company or app name" required />
50+
</div>
51+
</div>
52+
<div className="flex flex-wrap -mx-3 mb-4">
53+
<div className="w-full px-3">
54+
<label className="block text-gray-300 text-sm font-medium mb-1" htmlFor="email">Work Email <span className="text-red-600">*</span></label>
55+
<input id="email" type="email" className="form-input w-full text-gray-300" placeholder="you@yourcompany.com" required />
56+
</div>
57+
</div>
58+
<div className="flex flex-wrap -mx-3 mb-4">
59+
<div className="w-full px-3">
60+
<label className="block text-gray-300 text-sm font-medium mb-1" htmlFor="password">Password <span className="text-red-600">*</span></label>
61+
<input id="password" type="password" className="form-input w-full text-gray-300" placeholder="Password (at least 10 characters)" required />
62+
</div>
63+
</div>
64+
<div className="text-sm text-gray-500 text-center">
65+
I agree to be contacted by Open PRO about this offer as per the Open PRO <Link href="#" className="underline text-gray-400 hover:text-gray-200 hover:no-underline transition duration-150 ease-in-out">Privacy Policy</Link>.
66+
</div>
67+
<div className="flex flex-wrap -mx-3 mt-6">
68+
<div className="w-full px-3">
69+
<button className="btn text-white bg-purple-600 hover:bg-purple-700 w-full">Sign up</button>
70+
</div>
71+
</div>
72+
</form>
73+
<div className="text-gray-400 text-center mt-6">
74+
Already using Open PRO? <Link href="/signin" className="text-purple-600 hover:text-gray-200 transition duration-150 ease-in-out">Sign in</Link>
75+
</div>
76+
</div>
77+
78+
</div>
79+
</div>
80+
</section>
81+
)
82+
}

0 commit comments

Comments
 (0)