Skip to content

Commit 6e9ea80

Browse files
sajadevosajadevo
authored
Merge pull request creativetimofficial#237 from groovemen/feature/new-html-components
Feature: new html components
2 parents 5f49f51 + 2cbec14 commit 6e9ea80

File tree

107 files changed

+8683
-677
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

107 files changed

+8683
-677
lines changed

‎components/pro/authentication/auth-1.tsx

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
export default function SectionAuth1() {
2+
return (
3+
<section className="grid lg:grid-cols-2 items-center h-screen">
4+
<div className="p-10 md:p-20 xl:px-32 xl:py-24 text-center my-auto">
5+
<h3 className="block antialiased tracking-normal font-sans text-3xl font-semibold leading-snug text-blue-gray-900 mb-2">
6+
Welcome back
7+
</h3>
8+
<p className="block antialiased font-sans text-base font-light leading-relaxed text-grey-700 mb-16">
9+
Welcome back, please enter your details.
10+
</p>
11+
<form action="#" className="text-left max-w-[24rem] mx-auto">
12+
<div className="mb-8">
13+
<div className="relative w-full min-w-[200px] h-11">
14+
<div className="input-group input-group-outline">
15+
<label className="form-label">Email</label>
16+
<input type="email" className="form-control" />
17+
</div>
18+
</div>
19+
</div>
20+
<div className="mb-4">
21+
<div className="relative w-full min-w-[200px] h-11">
22+
<div className="input-group input-group-outline">
23+
<label className="form-label">Password</label>
24+
<input type="password" className="form-control" />
25+
</div>
26+
</div>
27+
</div>
28+
<div className="flex items-center justify-between gap-2">
29+
<label className="mt-3 inline-flex items-center">
30+
<input
31+
type="checkbox"
32+
className="checkbox absolute z-10 cursor-pointer opacity-0"
33+
/>
34+
<div className="form-check-input"></div>
35+
<span className="text-grey-700 font-semibold cursor-pointer select-none">
36+
Remember for 30 days
37+
</span>
38+
</label>
39+
<a
40+
href="#"
41+
className="block antialiased font-sans text-base leading-relaxed text-pink-500 font-medium"
42+
>
43+
Forgot password
44+
</a>
45+
</div>
46+
<button
47+
className="button button-pink button-lg w-full mt-6"
48+
type="button"
49+
>
50+
sign in
51+
</button>
52+
<button
53+
className="button button-outlined button-dark button-lg w-full mt-4 flex items-center gap-2 justify-center"
54+
type="button"
55+
>
56+
<i className="fab fa-google not-italic" /> &nbsp; sign in with
57+
google
58+
</button>
59+
</form>
60+
</div>
61+
<img
62+
src="https://images.unsplash.com/photo-1530569673472-307dc017a82d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988&q=80"
63+
alt="background image"
64+
className="w-full h-screen object-cover hidden lg:block"
65+
/>
66+
</section>
67+
68+
)
69+
}

‎components/pro/authentication/auth-2.tsx

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
export default function SectionAuth2() {
2+
return (
3+
<section className="grid items-center h-screen">
4+
<div className="p-10 md:p-20 text-center">
5+
<h3 className="block antialiased tracking-normal font-sans text-3xl font-semibold leading-snug text-blue-gray-900 mb-2">
6+
Create an account
7+
</h3>
8+
<p className="block antialiased font-sans text-base font-light leading-relaxed text-grey-700 mb-12">
9+
Start your 30 days free trial.
10+
</p>
11+
<form action="#" className="text-left max-w-[24rem] mx-auto">
12+
<div className="relative w-full min-w-[200px] h-11">
13+
<div className="input-group input-group-outline">
14+
<label className="form-label">Email</label>
15+
<input type="email" className="form-control" />
16+
</div>
17+
</div>
18+
<button
19+
className="button button-pink button-lg w-full mt-4"
20+
type="button"
21+
>
22+
get started
23+
</button>
24+
<div className="w-full flex items-center gap-2 my-6">
25+
<hr className="w-full bg-blue-gray-50" />
26+
<p className="block antialiased font-sans text-sm leading-normal text-blue-gray-900 font-medium opacity-50">
27+
OR
28+
</p>
29+
<hr className="w-full bg-blue-gray-50" />
30+
</div>
31+
<button
32+
className="button button-outlined button-dark button-lg w-full mt-4 flex items-center gap-2 justify-center"
33+
type="button"
34+
>
35+
<img className="w-5" src="./img/logos/logo-google-2.png" />
36+
&nbsp;
37+
sign in with google
38+
</button>
39+
<button
40+
className="button button-outlined button-dark button-lg w-full mt-4 flex items-center gap-2 justify-center"
41+
type="button"
42+
>
43+
<img className="w-5" src="./img/logos/logo-facebook.png" />
44+
&nbsp; sign in with facebook
45+
</button>
46+
<button
47+
className="button button-outlined button-dark button-lg w-full mt-4 flex items-center gap-2 justify-center"
48+
type="button"
49+
>
50+
<img className="w-5" src="./img/logos/logo-apple.png" />
51+
&nbsp; sign in with apple
52+
</button>
53+
<p className="block antialiased font-sans text-base leading-relaxed text-grey-700 font-normal text-center mt-6">
54+
Already have an account?{" "}
55+
<a
56+
href="#"
57+
className="text-pink-500 font-medium hover:text-pink-700 transition-colors"
58+
>
59+
Log in
60+
</a>
61+
</p>
62+
</form>
63+
</div>
64+
</section>
65+
66+
)
67+
}

‎components/pro/authentication/reset.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export default function SectionReset() {
2+
return (
3+
<section className="block my-12">
4+
<div className="py-56 m-4 min-h-50-screen items-start rounded-xl p-0 relative overflow-hidden flex bg-cover bg-center bg-[url('https://images.unsplash.com/photo-1497996541515-6549b145cd90?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80')]">
5+
<span className="absolute top-0 left-0 w-full h-full bg-center bg-cover opacity-60 bg-gradient-to-tl from-grey-900 to-slate-800" />
6+
</div>
7+
<div className="container mx-auto -mt-24">
8+
<div className="card relative z-10 w-10/12 md:w-1/3 mx-auto">
9+
<div className="card-header mx-4 -mt-6">
10+
<div className="shadow-pink pe-1 rounded-lg bg-pink-500 py-5">
11+
<h4 className="mt-2 mb-0 text-center font-bold text-white">Reset Password</h4>
12+
<p className="text-white/80 text-center text-sm">You will receive an e-mail in maximum 60 seconds</p>
13+
</div>
14+
</div>
15+
<div className="card-body">
16+
<div className="input-group input-group-static">
17+
<label>Email</label>
18+
<input type="text" className="form-control" placeholder="[email protected]" />
19+
</div>
20+
<button className="button button-pink w-full my-7">Sign In</button>
21+
</div>
22+
</div>
23+
</div>
24+
</section>
25+
)
26+
}

0 commit comments

Comments
 (0)