forked from mrwyndham/fastpocket
129 lines
6.1 KiB
Markdown
129 lines
6.1 KiB
Markdown
---
|
|
sidebar_position: 2
|
|
---
|
|
|
|
# Split Section With An Image And A Form
|
|
|
|
|
|
|
|
```jsx title="Frontend/sections/HeroSections/SplitSectionWithAnImageAndAForm.tsx"
|
|
<>
|
|
{/* <!-- 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 --> */}
|
|
</>
|
|
```
|