diff --git a/.gitignore b/.gitignore index 53f7466ac..b87c7b7ff 100644 --- 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 \ No newline at end of file +*.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 new file mode 100644 index 000000000..d0679104b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "typescript.tsdk": "node_modules/typescript/lib", + "typescript.enablePromptUseWorkspaceTsdk": true +} \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index cdf9c22ce..acb66d13c 100644 --- 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 index 9402ecff4..9f6cfdbec 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # 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. @@ -8,7 +8,8 @@ Use it for whatever you want, and be sure to reach us out on [Twitter](https://t 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 new file mode 100644 index 000000000..76fa9b643 --- /dev/null +++ b/app/(auth)/layout.tsx @@ -0,0 +1,17 @@ +import PageIllustration from '@/components/page-illustration' + +export default function AuthLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( +
+ + + + {children} + +
+ ) +} diff --git a/app/(auth)/reset-password/page.tsx b/app/(auth)/reset-password/page.tsx new file mode 100644 index 000000000..4fb5501ab --- /dev/null +++ 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 ( +
+
+
+ + {/* Page header */} +
+

Forgot your password?

+

We'll email you instructions on how to reset it.

+
+ + {/* Form */} +
+
+
+
+ + +
+
+
+
+ +
+
+
+
+ Cancel +
+
+ +
+
+
+ ) +} diff --git a/app/(auth)/signin/page.tsx b/app/(auth)/signin/page.tsx new file mode 100644 index 000000000..8bbe9542d --- /dev/null +++ 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 ( +
+
+
+ + {/* Page header */} +
+

Welcome back. We exist to make entrepreneurship easier.

+
+ + {/* Form */} +
+
+
+
+ +
+
+
+
+ +
Or, sign in with your email
+ +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+ + Forgot Password? +
+
+
+
+
+ +
+
+
+
+ Don’t you have an account? Sign up +
+
+ +
+
+
+ ) +} diff --git a/app/(auth)/signup/page.tsx b/app/(auth)/signup/page.tsx new file mode 100644 index 000000000..a306fb5e6 --- /dev/null +++ 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 ( +
+
+
+ + {/* Page header */} +
+

Welcome. We exist to make entrepreneurship easier.

+
+ + {/* Form */} +
+
+
+
+ +
+
+
+
+ +
Or, register with your email
+ +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+ I agree to be contacted by Open PRO about this offer as per the Open PRO Privacy Policy. +
+
+
+ +
+
+
+
+ Already using Open PRO? Sign in +
+
+ +
+
+
+ ) +} diff --git a/app/(default)/layout.tsx b/app/(default)/layout.tsx new file mode 100644 index 000000000..a6a92c400 --- /dev/null +++ b/app/(default)/layout.tsx @@ -0,0 +1,39 @@ +'use client' + +import { useEffect } from 'react' + +import AOS from 'aos' +import 'aos/dist/aos.css' + +import PageIllustration from '@/components/page-illustration' +import Footer from '@/components/ui/footer' + +export default function DefaultLayout({ + children, +}: { + children: React.ReactNode +}) { + + useEffect(() => { + AOS.init({ + once: true, + disable: 'phone', + duration: 600, + easing: 'ease-out-sine', + }) + }) + + return ( + <> +
+ + + + {children} + +
+ +