Skip to content

Commit

Permalink
v3.0.1
Browse files Browse the repository at this point in the history
  • Loading branch information
pasqualevitiello committed Jun 20, 2024
1 parent c0a32ac commit 31b8175
Show file tree
Hide file tree
Showing 30 changed files with 875 additions and 567 deletions.
2 changes: 1 addition & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true
}
}
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# CHANGELOG.md

## [3.0.1] - 2024-06-20

- Minor styling changes + Prettify code

## [3.0.0] - 2024-06-18

- Redesign the entire template
Expand Down
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

![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.
**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.
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).*
_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

Expand Down Expand Up @@ -61,8 +61,8 @@ The easiest way to deploy your Next.js app is to use the [Vercel Platform](https

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.


### Support notes

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/].
Expand All @@ -84,4 +84,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).
65 changes: 29 additions & 36 deletions app/(auth)/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,57 +1,50 @@
import Image from "next/image"
import Logo from "@/components/ui/logo"
import AuthBg from "@/public/images/auth-bg.svg"
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
children: React.ReactNode;
}) {
return (
<>
<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">
<header className="absolute z-30 w-full">
<div className="mx-auto max-w-6xl px-4 sm:px-6">
<div className="flex h-16 items-center justify-between md:h-20">
{/* Site branding */}
<div className="shrink-0 mr-4">
<div className="mr-4 shrink-0">
<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>
<main className="relative flex grow">
<div
className="pointer-events-none absolute bottom-0 left-0 -translate-x-1/3"
aria-hidden="true"
>
<div className="h-80 w-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="flex h-full flex-col justify-center before:min-h-[4rem] before:flex-1 after:flex-1 md:before:min-h-[5rem]">
<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 className="mx-auto w-full max-w-sm">
<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">
<div className="relative my-6 mr-6 hidden w-[572px] shrink-0 overflow-hidden rounded-2xl lg:block">
{/* 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"
className="pointer-events-none absolute left-1/2 top-1/2 -z-10 -ml-24 -translate-x-1/2 -translate-y-1/2 bg-blue-50"
aria-hidden="true"
>
<Image
Expand All @@ -63,13 +56,15 @@ export default function AuthLayout({
/>
</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 className="absolute left-32 top-1/2 w-[500px] -translate-y-1/2">
<div className="aspect-video w-full rounded-2xl bg-gray-900 px-5 py-3 shadow-xl transition duration-300">
<div className="relative mb-8 flex items-center justify-between before:block before:h-[9px] before:w-[41px] before:bg-[length:16px_9px] before:[background-image:radial-gradient(circle_at_4.5px_4.5px,_theme(colors.gray.600)_4.5px,_transparent_0)] after:w-[41px]">
<span className="text-[13px] font-medium text-white">
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]">
<div className="font-mono text-sm text-gray-500 transition duration-300 [&_span]:opacity-0">
<span className="animate-[code-1_10s_infinite] text-gray-200">
npm login
</span>{" "}
<span className="animate-[code-2_10s_infinite]">
Expand All @@ -84,7 +79,7 @@ export default function AuthLayout({
</span>
<br />
<br />
<span className="text-gray-200 animate-[code-5_10s_infinite]">
<span className="animate-[code-5_10s_infinite] text-gray-200">
npm publish
</span>
<br />
Expand All @@ -96,9 +91,7 @@ export default function AuthLayout({
</div>
</div>
</>


</main>
</>
)
);
}
30 changes: 20 additions & 10 deletions app/(auth)/reset-password/page.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export const metadata = {
title: 'Reset Password - Simple',
description: 'Page description',
}
title: "Reset Password - Simple",
description: "Page description",
};

export default function ResetPassword() {
return (
Expand All @@ -14,17 +14,27 @@ export default function ResetPassword() {
<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 />
<label
className="mb-1 block text-sm font-medium text-gray-700"
htmlFor="email"
>
Email
</label>
<input
id="email"
className="form-input w-full py-2"
type="email"
placeholder="[email protected]"
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">Reset
Password</button>
<button className="btn w-full bg-gradient-to-t from-blue-600 to-blue-500 bg-[length:100%_100%] bg-[bottom] text-white shadow hover:bg-[length:100%_150%]">
Reset Password
</button>
</div>
</form>
</>
)
);
}
23 changes: 11 additions & 12 deletions app/(auth)/signin/page.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
export const metadata = {
title: 'Sign In - Simple',
description: 'Page description',
}
title: "Sign In - Simple",
description: "Page description",
};

import Link from 'next/link'
import Link from "next/link";

export default function SignIn() {
return (
Expand All @@ -17,29 +17,29 @@ export default function SignIn() {
<div className="space-y-4">
<div>
<label
className="block text-sm text-gray-700 font-medium mb-1"
className="mb-1 block text-sm font-medium text-gray-700"
htmlFor="email"
>
Email
</label>
<input
id="email"
className="form-input py-2 w-full"
className="form-input w-full py-2"
type="email"
placeholder="[email protected]"
required
/>
</div>
<div>
<label
className="block text-sm text-gray-700 font-medium mb-1"
className="mb-1 block text-sm font-medium text-gray-700"
htmlFor="password"
>
Password
</label>
<input
id="password"
className="form-input py-2 w-full"
className="form-input w-full py-2"
type="password"
autoComplete="on"
placeholder="••••••••"
Expand All @@ -48,13 +48,13 @@ export default function SignIn() {
</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">
<button className="btn w-full bg-gradient-to-t from-blue-600 to-blue-500 bg-[length:100%_100%] bg-[bottom] text-white shadow hover:bg-[length:100%_150%]">
Sign In
</button>
</div>
</form>
{/* Bottom link */}
<div className="text-center mt-6">
<div className="mt-6 text-center">
<Link
className="text-sm text-gray-700 underline hover:no-underline"
href="/reset-password"
Expand All @@ -63,7 +63,6 @@ export default function SignIn() {
</Link>
</div>
</>

</>
)
);
}
Loading

0 comments on commit 31b8175

Please sign in to comment.