v3.0.0 - Next.js conversion

cruip · Apr 12, 2023 · 427bd91 · 427bd91 · vercel · Apr 12, 2023
1 parent 2201318
commit 427bd91
Show file tree

Hide file tree

Showing 61 changed files with 1,643 additions and 3,706 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,39 @@
-node_modules
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
 .DS_Store
-dist
-dist-ssr
-*.local
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# contentlayer
+.contentlayer
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG.md
 
+## [3.0.0] - 2023-04-12
+
+Conversion to Next.js
+
 ## [2.0.3] - 2023-03-28
 
 Fix video

diff --git a/README.md b/README.md
@@ -1,14 +1,15 @@
 # Free React landing page template
 
-![Open React template preview](https://user-images.githubusercontent.com/2683512/217847405-a7941b8f-45e9-4ed0-8793-03f793f45db1.png)
+![Open React template preview](https://user-images.githubusercontent.com/2683512/231426532-c71f4291-4813-401b-a569-ada47fe13efa.png)
 
 **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.
 
 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.
 
 Created and maintained with ❤️ by [Cruip.com](https://cruip.com).
 
-*The previous version built with the Cruip CSS is available [here](https://github.com/cruip/open-react-template/releases/tag/1.0.0).*
+*Version 1.0.0 built with the Cruip CSS is available [here](https://github.com/cruip/open-react-template/releases/tag/1.0.0).*
+*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).*
 
 ## Live demo
 
@@ -18,43 +19,50 @@ Check the live demo here 👉️ [https://open.cruip.com/](https://open.cruip.co
 
 [![Open Pro](https://user-images.githubusercontent.com/2683512/151177673-e56ade57-c98d-4c37-b315-d313bd14bb53.png)](https://cruip.com/)
 
-## Table of contents
-
-* [Usage](#usage)
-  * [Project setup](#project-setup)
-  * [Compiles and hot-reloads for development](#compiles-and-hot-reloads-for-development)
-  * [Compiles and minifies for production](#compiles-and-minifies-for-production)
-  * [Customize configuration](#customize-configuration)
-* [Support notes](#support-notes)            
-* [Credits](#credits)
-* [Terms and License](#terms-and-license)
-* [About Us](#about-us)
-* [Stay in the loop](#stay-in-the-loop)
-
 ## Usage
 
-This project was bootstrapped with [Vite](https://vitejs.dev/).
+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).
 
-### Project setup
-```
-npm install
-```
+### Getting Started
 
-#### Compiles and hot-reloads for development
-```
+First, run the development server:
+
+```bash
 npm run dev
+# or
+yarn dev
+# or
+pnpm dev
 ```
 
-#### Compiles and minifies for production
-```
-npm run build
-```
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+[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`.
+
+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.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+### Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+### Deploy on Vercel
+
+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.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
 
-#### Customize configuration
-See [Configuration Reference](https://vitejs.dev/guide/).
 
 ### Support notes
-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.
+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.
 
 For more information about what support covers, please see our (FAQs)[https://cruip.com/faq/].
 

diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
@@ -0,0 +1,17 @@
+import PageIllustration from '@/components/page-illustration'
+
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {  
+  return (
+    <main className="grow">
+
+      <PageIllustration />
+
+      {children}
+
+    </main>
+  )
+}
diff --git a/app/(auth)/reset-password/page.tsx b/app/(auth)/reset-password/page.tsx
@@ -0,0 +1,44 @@
+export const metadata = {
+  title: 'Reset Password - Open PRO',
+  description: 'Page description',
+}
+
+import Link from 'next/link'
+
+export default function ResetPassword() {
+  return (
+    <section className="relative">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6">
+        <div className="pt-32 pb-12 md:pt-40 md:pb-20">
+
+          {/* Page header */}
+          <div className="max-w-3xl mx-auto text-center pb-12 md:pb-20">
+            <h1 className="h1 mb-4">Forgot your password?</h1>
+            <p className="text-xl text-gray-400">We'll email you instructions on how to reset it.</p>
+          </div>
+
+          {/* Form */}
+          <div className="max-w-sm mx-auto">
+            <form>
+              <div className="flex flex-wrap -mx-3 mb-4">
+                <div className="w-full px-3">
+                  <label className="block text-gray-300 text-sm font-medium mb-1" htmlFor="email">Email</label>
+                  <input id="email" type="email" className="form-input w-full text-gray-300" placeholder="you@yourcompany.com" required />
+                </div>
+              </div>
+              <div className="flex flex-wrap -mx-3 mt-6">
+                <div className="w-full px-3">
+                  <button className="btn text-white bg-purple-600 hover:bg-purple-700 w-full">Reset Password</button>
+                </div>
+              </div>
+            </form>
+            <div className="text-gray-400 text-center mt-6">
+              <Link href="/signin" className="text-purple-600 hover:text-gray-200 transition duration-150 ease-in-out">Cancel</Link>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/app/(auth)/signin/page.tsx b/app/(auth)/signin/page.tsx
@@ -0,0 +1,78 @@
+export const metadata = {
+  title: 'Sign In - Open PRO',
+  description: 'Page description',
+}
+
+import Link from 'next/link'
+
+export default function SignIn() {
+  return (
+    <section className="relative">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6">
+        <div className="pt-32 pb-12 md:pt-40 md:pb-20">
+
+          {/* Page header */}
+          <div className="max-w-3xl mx-auto text-center pb-12 md:pb-20">
+            <h1 className="h1">Welcome back. We exist to make entrepreneurship easier.</h1>
+          </div>
+
+          {/* Form */}
+          <div className="max-w-sm mx-auto">
+            <form>
+              <div className="flex flex-wrap -mx-3">
+                <div className="w-full px-3">
+                  <button className="btn px-0 text-white bg-red-600 hover:bg-red-700 w-full relative flex items-center">
+                    <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">
+                      <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" />
+                    </svg>
+                    <span className="h-6 flex items-center border-r border-white border-opacity-25 mr-4" aria-hidden="true"></span>
+                    <span className="flex-auto pl-16 pr-8 -ml-16">Sign in with Google</span>
+                  </button>
+                </div>
+              </div>
+            </form>
+            <div className="flex items-center my-6">
+              <div className="border-t border-gray-700 border-dotted grow mr-3" aria-hidden="true"></div>
+              <div className="text-gray-400">Or, sign in with your email</div>
+              <div className="border-t border-gray-700 border-dotted grow ml-3" aria-hidden="true"></div>
+            </div>
+            <form>
+              <div className="flex flex-wrap -mx-3 mb-4">
+                <div className="w-full px-3">
+                  <label className="block text-gray-300 text-sm font-medium mb-1" htmlFor="email">Email</label>
+                  <input id="email" type="email" className="form-input w-full text-gray-300" placeholder="you@yourcompany.com" required />
+                </div>
+              </div>
+              <div className="flex flex-wrap -mx-3 mb-4">
+                <div className="w-full px-3">
+                  <label className="block text-gray-300 text-sm font-medium mb-1" htmlFor="password">Password</label>
+                  <input id="password" type="password" className="form-input w-full text-gray-300" placeholder="Password (at least 10 characters)" required />
+                </div>
+              </div>
+              <div className="flex flex-wrap -mx-3 mb-4">
+                <div className="w-full px-3">
+                  <div className="flex justify-between">
+                    <label className="flex items-center">
+                      <input type="checkbox" className="form-checkbox" />
+                      <span className="text-gray-400 ml-2">Keep me signed in</span>
+                    </label>
+                    <Link href="/reset-password" className="text-purple-600 hover:text-gray-200 transition duration-150 ease-in-out">Forgot Password?</Link>
+                  </div>
+                </div>
+              </div>
+              <div className="flex flex-wrap -mx-3 mt-6">
+                <div className="w-full px-3">
+                  <button className="btn text-white bg-purple-600 hover:bg-purple-700 w-full">Sign in</button>
+                </div>
+              </div>
+            </form>
+            <div className="text-gray-400 text-center mt-6">
+              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>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/app/(auth)/signup/page.tsx b/app/(auth)/signup/page.tsx
@@ -0,0 +1,82 @@
+export const metadata = {
+  title: 'Sign Up - Open PRO',
+  description: 'Page description',
+}
+
+import Link from 'next/link'
+
+export default function SignUp() {
+  return (
+    <section className="relative">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6">
+        <div className="pt-32 pb-12 md:pt-40 md:pb-20">
+
+          {/* Page header */}
+          <div className="max-w-3xl mx-auto text-center pb-12 md:pb-20">
+            <h1 className="h1">Welcome. We exist to make entrepreneurship easier.</h1>
+          </div>
+
+          {/* Form */}
+          <div className="max-w-sm mx-auto">
+            <form>
+              <div className="flex flex-wrap -mx-3">
+                <div className="w-full px-3">
+                  <button className="btn px-0 text-white bg-red-600 hover:bg-red-700 w-full relative flex items-center">
+                    <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">
+                      <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" />
+                    </svg>
+                    <span className="h-6 flex items-center border-r border-white border-opacity-25 mr-4" aria-hidden="true"></span>
+                    <span className="flex-auto pl-16 pr-8 -ml-16">Sign up with Google</span>
+                  </button>
+                </div>
+              </div>
+            </form>
+            <div className="flex items-center my-6">
+              <div className="border-t border-gray-700 border-dotted grow mr-3" aria-hidden="true"></div>
+              <div className="text-gray-400">Or, register with your email</div>
+              <div className="border-t border-gray-700 border-dotted grow ml-3" aria-hidden="true"></div>
+            </div>
+            <form>
+              <div className="flex flex-wrap -mx-3 mb-4">
+                <div className="w-full px-3">
+                  <label className="block text-gray-300 text-sm font-medium mb-1" htmlFor="full-name">Full Name <span className="text-red-600">*</span></label>
+                  <input id="full-name" type="text" className="form-input w-full text-gray-300" placeholder="First and last name" required />
+                </div>
+              </div>
+              <div className="flex flex-wrap -mx-3 mb-4">
+                <div className="w-full px-3">
+                  <label className="block text-gray-300 text-sm font-medium mb-1" htmlFor="company-name">Company Name <span className="text-red-600">*</span></label>
+                  <input id="company-name" type="text" className="form-input w-full text-gray-300" placeholder="Your company or app name" required />
+                </div>
+              </div>
+              <div className="flex flex-wrap -mx-3 mb-4">
+                <div className="w-full px-3">
+                  <label className="block text-gray-300 text-sm font-medium mb-1" htmlFor="email">Work Email <span className="text-red-600">*</span></label>
+                  <input id="email" type="email" className="form-input w-full text-gray-300" placeholder="you@yourcompany.com" required />
+                </div>
+              </div>
+              <div className="flex flex-wrap -mx-3 mb-4">
+                <div className="w-full px-3">
+                  <label className="block text-gray-300 text-sm font-medium mb-1" htmlFor="password">Password <span className="text-red-600">*</span></label>
+                  <input id="password" type="password" className="form-input w-full text-gray-300" placeholder="Password (at least 10 characters)" required />
+                </div>
+              </div>
+              <div className="text-sm text-gray-500 text-center">
+                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>.
+              </div>
+              <div className="flex flex-wrap -mx-3 mt-6">
+                <div className="w-full px-3">
+                  <button className="btn text-white bg-purple-600 hover:bg-purple-700 w-full">Sign up</button>
+                </div>
+              </div>
+            </form>
+            <div className="text-gray-400 text-center mt-6">
+              Already using Open PRO? <Link href="/signin" className="text-purple-600 hover:text-gray-200 transition duration-150 ease-in-out">Sign in</Link>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  )
+}