jeffemmett
/
web3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[site/components,#223][s]: add hero CTA and move form to new section

This commit is contained in:
khalilcodes 2023-05-26 15:04:44 +03:00
parent 57950e91a4
commit 380f58013a
1 changed files with 70 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
site/components/Home/Hero.js
View File

@ -2,6 +2,7 @@ import siteConfig from 'config/siteConfig'
export function Hero() { export function Hero() {
return ( return (
<>
<div className="pt-10 sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden"> <div className="pt-10 sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden">
<div className="mx-auto max-w-7xl lg:px-8"> <div className="mx-auto max-w-7xl lg:px-8">
<div className="lg:grid lg:grid-cols-2 lg:gap-8"> <div className="lg:grid lg:grid-cols-2 lg:gap-8">
@ -14,42 +15,16 @@ export function Hero() {
<p className="mt-3 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl"> <p className="mt-3 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
Crypto & Web3 are a huge phenomenon but can be hard to make sense of. We help with introductions to key concepts and in-depth evaluations of the claims for its social and economic impact. Crypto & Web3 are a huge phenomenon but can be hard to make sense of. We help with introductions to key concepts and in-depth evaluations of the claims for its social and economic impact.
</p> </p>
<div className="mt-10 sm:mt-12"> <div className="mt-10">
<form className="sm:max-w-xl sm:mx-auto lg:mx-0" method="POST" name="get-updates" data-netlify="true" action="/subscribed">
<div className="sm:flex">
<div className="min-w-0 flex-1">
<label htmlFor="email" className="sr-only">
Email address
</label>
<input
name="email"
type="email"
required="required"
placeholder="Enter your email"
className="block w-full px-4 py-3 rounded-md border-0 text-base dark:text-white dark:placeholder-gray-200 text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-300 focus:ring-offset-gray-900"
/>
<input type="hidden" name="form-name" value="get-updates" />
</div>
<div className="mt-3 sm:mt-0 sm:ml-3">
<button
type="submit"
className="block w-full py-3 px-4 rounded-md shadow bg-yellow-500 text-sm text-slate-50 font-medium hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-300 focus:ring-offset-gray-900"
>
Get Updates
</button>
</div>
</div>
</form>
</div>
<p className="mt-3 text-sm text-gray-300 sm:mt-4">
Get short updates as we release new material or review important developments.
</p>
<p className="mt-8 text-sm text-white uppercase tracking-wide font-semibold sm:mt-10">A project of
<a <a
href={siteConfig.authorUrl} href="/guide"
target="_blank" className="block w-fit md:mx-auto lg:mx-0 py-2.5 px-6 rounded-md shadow bg-yellow-500 text-md font-bold text-slate-900 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-300 focus:ring-offset-gray-900"
rel="noopener noreferrer"
> >
Read our guide
</a>
</div>
<p className="mt-8 text-sm text-white uppercase tracking-wide font-semibold sm:mt-10">A project of
<a href={siteConfig.authorUrl} target="_blank">
<img src={siteConfig.authorLogo} alt={siteConfig.author} className="mx-1 h-6 inline" /> <img src={siteConfig.authorLogo} alt={siteConfig.author} className="mx-1 h-6 inline" />
Life Itself Labs Life Itself Labs
</a> </a>
@ -69,5 +44,39 @@ export function Hero() {
</div> </div>
</div> </div>
</div> </div>
{/* Form section */}
<div className="relative bg-slate-800/60 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
<div className="mx-auto max-w-7xl lg:px-8">
<p className="mb-3 text-center text-xl mb-8">
Get short updates as we release new material or review important developments.
</p>
<form className="sm:max-w-xl sm:mx-auto" method="POST" name="get-updates" data-netlify="true" action="/subscribed">
<div className="sm:flex sm:items-center">
<div className="min-w-0 flex-1">
<label htmlFor="email" className="sr-only">
Email address
</label>
<input
name="email"
type="email"
required="required"
placeholder="Enter your email"
className="block w-full px-4 py-3 rounded-md border-0 shadow text-md dark:text-white dark:placeholder-gray-200 text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-300 focus:ring-offset-gray-900"
/>
<input type="hidden" name="form-name" value="get-updates" />
</div>
<div className="mt-3 sm:mt-0 sm:ml-3">
<button
type="submit"
className="block w-full py-2.5 px-6 sm:mb-0.5 rounded-md shadow bg-yellow-500 text-md font-bold text-slate-900 font-bold hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-300 focus:ring-offset-gray-900"
>
Get Updates
</button>
</div>
</div>
</form>
</div>
</div>
</>
) )
} }