v2.0.0 - Redesign

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG.md
 
+## [3.0.0] - 2024-06-18
+
+- Redesign the entire template
+
 ## [2.4.0] - 2023-12-08
 
 Update to Next.js 14

README.md

@@ -1,6 +1,6 @@
 # Free Tailwind landing page template
 
-![Simple TailwindCSS template preview](https://user-images.githubusercontent.com/2683512/231426766-72ae7bcd-618b-4a3e-87cd-b46a464bde61.png)
+![Simple TailwindCSS template preview](https://github.com/cruip/tailwind-landing-page-template/assets/2683512/f9a98fab-a1bc-4fb5-8572-4de0b6bd932a)
 
 **Simple Light** is a free landing page template built on top of **TailwindCSS** and fully coded in **React** / **Next.js**. 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.
@@ -14,7 +14,7 @@ Check the live demo here 👉️ [https://simple.cruip.com/](https://simple.crui
 
 ## Simple Pro
 
-[![Simple Pro](https://user-images.githubusercontent.com/2683512/151178282-fd81b300-349a-42c3-a30a-f70f6e711e74.png)](https://cruip.com/)
+[![Simple Pro](https://github.com/cruip/tailwind-landing-page-template/assets/2683512/992be2ba-3de7-4838-be41-12e85686c193)](https://cruip.com/)
 
 ## Design files
 
@@ -74,7 +74,7 @@ For more information about what support covers, please see our (FAQs)[https://cr
 ## Terms and License
 
 - Released under the [GPL](https://www.gnu.org/licenses/gpl-3.0.html).
-- Copyright 2020 [Cruip](https://cruip.com/).
+- Copyright 2024 [Cruip](https://cruip.com/).
 - Use it for personal and commercial projects, but please don’t republish, redistribute, or resell the template.
 - Attribution is not required, although it is really appreciated.
 

app/(auth)/layout.tsx

@@ -1,13 +1,104 @@
+import Image from "next/image"
+import Logo from "@/components/ui/logo"
+import AuthBg from "@/public/images/auth-bg.svg"
+
 export default function AuthLayout({
   children,
 }: {
   children: React.ReactNode
-}) {  
+}) {
   return (
-    <main className="grow">
+    <>
+      <header className="absolute w-full z-30">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6">
+          <div className="flex items-center justify-between h-16 md:h-20">
+            {/* Site branding */}
+            <div className="shrink-0 mr-4">
+              <Logo />
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main className="relative grow flex">
+
+        <div className="absolute left-0 -translate-x-1/3 bottom-0 pointer-events-none" aria-hidden="true">
+          <div className="w-80 h-80 rounded-full bg-gradient-to-tr from-blue-500 opacity-70 blur-[160px]"></div>
+        </div>
+
+        {/* Content */}
+        <div className="w-full">
+
+          <div
+            className="h-full flex flex-col justify-center before:min-h-[4rem] md:before:min-h-[5rem] before:flex-1 after:flex-1">
+
+            <div className="px-4 sm:px-6">
+              <div className="w-full max-w-sm mx-auto">
+                <div className="py-16 md:py-20">
+
+                  {children}
+
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+
+        <>
+          {/* Right side */}
+          <div className="hidden relative lg:block shrink-0 w-[572px] my-6 mr-6 rounded-2xl overflow-hidden">
+            {/* Background */}
+            <div
+              className="bg-blue-50 absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 -ml-24 pointer-events-none -z-10"
+              aria-hidden="true"
+            >
+              <Image
+                src={AuthBg}
+                className="max-w-none"
+                width={1285}
+                height={1684}
+                alt="Auth bg"
+              />
+            </div>
+            {/* Illustration */}
+            <div className="absolute top-1/2 -translate-y-1/2 left-32 w-[500px]">
+              <div className="w-full aspect-video bg-gray-900 rounded-2xl px-5 py-3 shadow-xl transition duration-300">
+                <div className="relative flex items-center justify-between before:block before:w-[41px] before:h-[9px] before:[background-image:radial-gradient(circle_at_4.5px_4.5px,_theme(colors.gray.600)_4.5px,_transparent_0)] before:bg-[length:16px_9px] after:w-[41px] mb-8">
+                  <span className="text-white font-medium text-[13px]">cruip.com</span>
+                </div>
+                <div className="text-gray-500 font-mono [&_span]:opacity-0 text-sm transition duration-300">
+                  <span className="text-gray-200 animate-[code-1_10s_infinite]">
+                    npm login
+                  </span>{" "}
+                  <span className="animate-[code-2_10s_infinite]">
+                    --registry=https://npm.pkg.github.com
+                  </span>
+                  <br />
+                  <span className="animate-[code-3_10s_infinite]">
+                    --scope=@phanatic
+                  </span>{" "}
+                  <span className="animate-[code-4_10s_infinite]">
+                    Successfully logged-in.
+                  </span>
+                  <br />
+                  <br />
+                  <span className="text-gray-200 animate-[code-5_10s_infinite]">
+                    npm publish
+                  </span>
+                  <br />
+                  <span className="animate-[code-6_10s_infinite]">
+                    Package published.
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
 
-      {children}
 
-    </main>
+      </main>
+    </>
   )
 }

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

@@ -5,35 +5,26 @@ export const metadata = {
 
 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>
+    <>
+      <div className="mb-10">
+        <h1 className="text-4xl font-bold">Reset password</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 <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>
+      {/* Form */}
+      <form>
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm text-gray-700 font-medium mb-1" htmlFor="email">Email</label>
+            <input id="email" className="form-input py-2 w-full" type="email" placeholder="[email protected]"
+              required />
           </div>
-
         </div>
-      </div>
-    </section>
+        <div className="mt-6">
+          <button
+            className="btn text-white bg-gradient-to-t from-blue-600 to-blue-500 bg-[length:100%_100%] hover:bg-[length:100%_150%] bg-[bottom] shadow w-full">Reset
+            Password</button>
+        </div>
+      </form>
+    </>
   )
 }

app/(auth)/signin/page.tsx

@@ -7,83 +7,63 @@ 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 className="mb-10">
+          <h1 className="text-4xl font-bold">Sign in to your account</h1>
+        </div>
+        {/* Form */}
+        <form>
+          <div className="space-y-4">
+            <div>
+              <label
+                className="block text-sm text-gray-700 font-medium mb-1"
+                htmlFor="email"
+              >
+                Email
+              </label>
+              <input
+                id="email"
+                className="form-input py-2 w-full"
+                type="email"
+                placeholder="[email protected]"
+                required
+              />
             </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>
+              <label
+                className="block text-sm text-gray-700 font-medium mb-1"
+                htmlFor="password"
+              >
+                Password
+              </label>
+              <input
+                id="password"
+                className="form-input py-2 w-full"
+                type="password"
+                autoComplete="on"
+                placeholder="••••••••"
+                required
+              />
             </div>
           </div>
-
+          <div className="mt-6">
+            <button className="btn text-white bg-gradient-to-t from-blue-600 to-blue-500 bg-[length:100%_100%] hover:bg-[length:100%_150%] bg-[bottom] shadow w-full">
+              Sign In
+            </button>
+          </div>
+        </form>
+        {/* Bottom link */}
+        <div className="text-center mt-6">
+          <Link
+            className="text-sm text-gray-700 underline hover:no-underline"
+            href="/reset-password"
+          >
+            Forgot password
+          </Link>
         </div>
-      </div>
-    </section>
+      </>
+
+    </>
   )
 }