forked from mrwyndham/fastpocket
6.1 KiB
6.1 KiB
| sidebar_position |
|---|
| 2 |
Split Section With An Image And A Form
<>
{/* <!-- Hero --> */}
<div className="relative overflow-hidden">
<div className="mx-auto max-w-screen-md py-12 px-4 sm:px-6 md:max-w-screen-xl md:py-20 lg:py-32 md:px-8">
<div className="md:pe-8 md:w-1/2 xl:pe-0 xl:w-5/12">
{/* <!-- Title --> */}
<h1 className="text-3xl text-base-content font-bold md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight dark:text-base-200">
Solving problems for every{" "}
<span className="text-primary dark:text-primary">team</span>
</h1>
<p className="mt-3 text-base text-secondary-content">
Built on standard web technology, teams use FastPocket to build
beautiful cross-platform hybrid apps in a fraction of the time.
</p>
{/* <!-- End Title --> */}
<div className="mt-8 grid">
<button
type="button"
className="py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-base-200 bg-base-100 text-base-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 "
>
<svg
className="w-4 h-auto"
width="46"
height="47"
viewBox="0 0 46 47"
fill="none"
>
<path
d="M46 24.0287C46 22.09 45.8533 20.68 45.5013 19.2112H23.4694V27.9356H36.4069C36.1429 30.1094 34.7347 33.37 31.5957 35.5731L31.5663 35.8669L38.5191 41.2719L38.9885 41.3306C43.4477 37.2181 46 31.1669 46 24.0287Z"
fill="#4285F4"
/>
<path
d="M23.4694 47C29.8061 47 35.1161 44.9144 39.0179 41.3012L31.625 35.5437C29.6301 36.9244 26.9898 37.8937 23.4987 37.8937C17.2793 37.8937 12.0281 33.7812 10.1505 28.1412L9.88649 28.1706L2.61097 33.7812L2.52296 34.0456C6.36608 41.7125 14.287 47 23.4694 47Z"
fill="#34A853"
/>
<path
d="M10.1212 28.1413C9.62245 26.6725 9.32908 25.1156 9.32908 23.5C9.32908 21.8844 9.62245 20.3275 10.0918 18.8588V18.5356L2.75765 12.8369L2.52296 12.9544C0.909439 16.1269 0 19.7106 0 23.5C0 27.2894 0.909439 30.8731 2.49362 34.0456L10.1212 28.1413Z"
fill="#FBBC05"
/>
<path
d="M23.4694 9.07688C27.8699 9.07688 30.8622 10.9863 32.5344 12.5725L39.1645 6.11C35.0867 2.32063 29.8061 0 23.4694 0C14.287 0 6.36607 5.2875 2.49362 12.9544L10.0918 18.8588C11.9987 13.1894 17.25 9.07688 23.4694 9.07688Z"
fill="#EB4335"
/>
</svg>
Sign up with Google
</button>
</div>
<div className="py-6 flex items-center text-sm text-secondary-content uppercase before:flex-[1_1_0%] before:border-t before:me-6 after:flex-[1_1_0%] after:border-t after:ms-6">
Or
</div>
{/* <!-- Form --> */}
<form>
<div className="mb-4">
<label
htmlFor="hs-hero-name-2"
className="block text-sm font-medium dark:text-base-100"
>
<span className="sr-only">Full name</span>
</label>
<input
type="text"
id="hs-hero-name-2"
className="py-3 px-4 block w-full border-base-200 rounded-lg text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none"
placeholder="Full name"
/>
</div>
<div className="mb-4">
<label
htmlFor="hs-hero-email-2"
className="block text-sm font-medium dark:text-base-100"
>
<span className="sr-only">Email address</span>
</label>
<input
type="email"
id="hs-hero-email-2"
className="py-3 px-4 block w-full border-base-200 rounded-lg text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none"
placeholder="Email address"
/>
</div>
<div className="mb-4">
<label
htmlFor="hs-hero-password-2"
className="block text-sm font-medium dark:text-base-100"
>
<span className="sr-only">Password</span>
</label>
<input
type="email"
id="hs-hero-password-2"
className="py-3 px-4 block w-full border-base-200 rounded-lg text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none"
placeholder="Password"
/>
</div>
<div className="grid">
<button
type="submit"
className="py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-primary text-base-100 hover:bg-primary/50 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 "
>
Sign up
</button>
</div>
</form>
{/* <!-- End Form --> */}
</div>
</div>
<div className="hidden md:block md:absolute md:top-0 md:start-1/2 md:end-0 h-full bg-[url('https://images.unsplash.com/photo-1606868306217-dbf5046868d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1981&q=80')] bg-no-repeat bg-center bg-cover"></div>
{/* <!-- End Col --> */}
</div>
{/* <!-- End Hero --> */}
</>