v2.0.0 - Next.js conversion

cruip · Apr 12, 2023 · 13694b5 · 13694b5 · vercel · Apr 12, 2023
1 parent d0160ad
commit 13694b5
Show file tree

Hide file tree

Showing 56 changed files with 1,594 additions and 3,627 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
 
+## [2.0.0] - 2023-03-31
+
+Conversion to Next.js
+
 ## [1.3.3] - 2023-03-28
 
 - Fix video

diff --git a/README.md b/README.md
@@ -1,11 +1,13 @@
 # Free Tailwind landing page template
 
-![Simple TailwindCSS template preview](https://user-images.githubusercontent.com/2683512/96160974-f93aa780-0f16-11eb-9ce4-81d94b216be6.png)
+![Simple TailwindCSS template preview](https://user-images.githubusercontent.com/2683512/231426766-72ae7bcd-618b-4a3e-87cd-b46a464bde61.png)
 
 **Simple Light** is a free landing page template built on top of **TailwindCSS** and fully coded in **React**. Simple light is designed to provide all the basic components a developer need to create a landing page for SaaS products, online services, and more. 
 Use it for whatever you want, and be sure to reach us out on Twitter if you build anything cool/useful with it.
 Created and maintained with ❤️ by [Cruip.com](https://cruip.com/).
 
+*Version 1.3.3 built with Tailwind CSS and React + Vite is available [here](https://github.com/cruip/tailwind-landing-page-template/releases/tag/1.3.3).*
+
 ## Live demo
 
 Check the live demo here 👉️ [https://simple.cruip.com/](https://simple.cruip.com/)
@@ -33,28 +35,48 @@ If you need the design files, you can download them from Figma's Community 👉
 
 ## 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/].
 
@@ -75,4 +97,4 @@ We're an Italian developer/designer duo creating high-quality design/code resour
 
 ## Stay in the loop
 
-If you would like to know when we release new resources, you can follow us on [Twitter](https://twitter.com/Cruip_com), or you can subscribe to our monthly [newsletter](https://cruip.com/#subscribe).
+If you would like to know when we release new resources, you can follow us on [Twitter](https://twitter.com/Cruip_com), or you can subscribe to our monthly [newsletter](https://cruip.com/#subscribe).
diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
@@ -0,0 +1,13 @@
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {  
+  return (
+    <main className="grow">
+
+      {children}
+
+    </main>
+  )
+}
diff --git a/app/(auth)/reset-password/page.tsx b/app/(auth)/reset-password/page.tsx
@@ -0,0 +1,39 @@
+export const metadata = {
+  title: 'Reset Password - Simple',
+  description: 'Page description',
+}
+
+export default function ResetPassword() {
+  return (
+    <section className="bg-gradient-to-b from-gray-100 to-white">
+      <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">Let's get you back up on your feet</h1>
+            <p className="text-xl text-gray-600">Enter the email address you used when you signed up for your account, and we'll email you a link to reset your password.</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-800 text-sm font-medium mb-1" htmlFor="email">Email <span className="text-red-600">*</span></label>
+                  <input id="email" type="email" className="form-input w-full text-gray-800" placeholder="Enter your email address" required />
+                </div>
+              </div>
+              <div className="flex flex-wrap -mx-3 mt-6">
+                <div className="w-full px-3">
+                  <button className="btn text-white bg-blue-600 hover:bg-blue-700 w-full">Send reset link</button>
+                </div>
+              </div>
+            </form>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/app/(auth)/signin/page.tsx b/app/(auth)/signin/page.tsx
@@ -0,0 +1,89 @@
+export const metadata = {
+  title: 'Sign In - Simple',
+  description: 'Page description',
+}
+
+import Link from 'next/link'
+
+export default function SignIn() {
+  return (
+    <section className="bg-gradient-to-b from-gray-100 to-white">
+      <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 entrepreneurism easier.</h1>
+          </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-800 text-sm font-medium mb-1" htmlFor="email">Email</label>
+                  <input id="email" type="email" className="form-input w-full text-gray-800" placeholder="Enter your email address" 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="block text-gray-800 text-sm font-medium mb-1" htmlFor="password">Password</label>
+                    <Link href="/reset-password" className="text-sm font-medium text-blue-600 hover:underline">Having trouble signing in?</Link>
+                  </div>
+                  <input id="password" type="password" className="form-input w-full text-gray-800" placeholder="Enter your password" 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-600 ml-2">Keep me signed in</span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <div className="flex flex-wrap -mx-3 mt-6">
+                <div className="w-full px-3">
+                  <button className="btn text-white bg-blue-600 hover:bg-blue-700 w-full">Sign in</button>
+                </div>
+              </div>
+            </form>
+            <div className="flex items-center my-6">
+              <div className="border-t border-gray-300 grow mr-3" aria-hidden="true"></div>
+              <div className="text-gray-600 italic">Or</div>
+              <div className="border-t border-gray-300 grow ml-3" aria-hidden="true"></div>
+            </div>
+            <form>
+              <div className="flex flex-wrap -mx-3 mb-3">
+                <div className="w-full px-3">
+                  <button className="btn px-0 text-white bg-gray-900 hover:bg-gray-800 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.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.993-2.683-.993-.398-.895-.895-1.193-.895-1.193-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.895 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.975 0-.895.298-1.59.795-2.087-.1-.2-.397-.994.1-2.087 0 0 .695-.2 2.186.795a6.408 6.408 0 011.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.087.496.596.795 1.291.795 2.087 0 3.08-1.889 3.677-3.677 3.875.298.398.596.895.596 1.59v2.187c0 .198.1.497.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z" />
+                    </svg>
+                    <span className="flex-auto pl-16 pr-8 -ml-16">Continue with GitHub</span>
+                  </button>
+                </div>
+              </div>
+              <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="flex-auto pl-16 pr-8 -ml-16">Continue with Google</span>
+                  </button>
+                </div>
+              </div>
+            </form>
+            <div className="text-gray-600 text-center mt-6">
+              Don't you have an account? <Link href="/signup" className="text-blue-600 hover:underline 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,85 @@
+export const metadata = {
+  title: 'Sign Up - Simple',
+  description: 'Page description',
+}
+
+import Link from 'next/link'
+
+export default function SignUp() {
+  return (
+    <section className="bg-gradient-to-b from-gray-100 to-white">
+      <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 entrepreneurism easier.</h1>
+          </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-800 text-sm font-medium mb-1" htmlFor="name">Name <span className="text-red-600">*</span></label>
+                  <input id="name" type="text" className="form-input w-full text-gray-800" placeholder="Enter your name" required />
+                </div>
+              </div>
+              <div className="flex flex-wrap -mx-3 mb-4">
+                <div className="w-full px-3">
+                  <label className="block text-gray-800 text-sm font-medium mb-1" htmlFor="email">Email <span className="text-red-600">*</span></label>
+                  <input id="email" type="email" className="form-input w-full text-gray-800" placeholder="Enter your email address" required />
+                </div>
+              </div>
+              <div className="flex flex-wrap -mx-3 mb-4">
+                <div className="w-full px-3">
+                  <label className="block text-gray-800 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-800" placeholder="Enter your password" required />
+                </div>
+              </div>
+              <div className="flex flex-wrap -mx-3 mt-6">
+                <div className="w-full px-3">
+                  <button className="btn text-white bg-blue-600 hover:bg-blue-700 w-full">Sign up</button>
+                </div>
+              </div>
+              <div className="text-sm text-gray-500 text-center mt-3">
+                By creating an account, you agree to the <a className="underline" href="#0">terms & conditions</a>, and our <a className="underline" href="#0">privacy policy</a>.
+              </div>
+            </form>
+            <div className="flex items-center my-6">
+              <div className="border-t border-gray-300 grow mr-3" aria-hidden="true"></div>
+              <div className="text-gray-600 italic">Or</div>
+              <div className="border-t border-gray-300 grow ml-3" aria-hidden="true"></div>
+            </div>
+            <form>
+              <div className="flex flex-wrap -mx-3 mb-3">
+                <div className="w-full px-3">
+                  <button className="btn px-0 text-white bg-gray-900 hover:bg-gray-800 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.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.993-2.683-.993-.398-.895-.895-1.193-.895-1.193-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.895 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.975 0-.895.298-1.59.795-2.087-.1-.2-.397-.994.1-2.087 0 0 .695-.2 2.186.795a6.408 6.408 0 011.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.087.496.596.795 1.291.795 2.087 0 3.08-1.889 3.677-3.677 3.875.298.398.596.895.596 1.59v2.187c0 .198.1.497.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z" />
+                    </svg>
+                    <span className="flex-auto pl-16 pr-8 -ml-16">Continue with GitHub</span>
+                  </button>
+                </div>
+              </div>
+              <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="flex-auto pl-16 pr-8 -ml-16">Continue with Google</span>
+                  </button>
+                </div>
+              </div>
+            </form>
+            <div className="text-gray-600 text-center mt-6">
+              Already using Simple? <Link href="/signin" className="text-blue-600 hover:underline transition duration-150 ease-in-out">Sign in</Link>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  )
+}