[portal][misc] tweak homepage hero

pull/527/head
Yangshun Tay 2 years ago
parent 57489d62e4
commit 5b2f06fadc

@ -1,3 +1,4 @@
import Head from 'next/head';
import { Button } from '@tih/ui'; import { Button } from '@tih/ui';
import Container from '~/components/shared/Container'; import Container from '~/components/shared/Container';
@ -28,48 +29,58 @@ const features = [
export default function HomePage() { export default function HomePage() {
return ( return (
<div className="bg-white py-12"> <>
<Container className="space-y-24"> <Head>
<div className="text-center"> <title>Tech Interview Handbook Portal</title>
<h1 className="text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl md:text-6xl"> </Head>
<span className="block">Tech Interview Handbook</span> <div className="bg-white pb-24">
<span className="text-primary-600 block">Portal</span> <div className="space-y-12">
</h1> <div className="bg-slate-100 py-8 text-center sm:py-16">
<p className="mx-auto mt-3 max-w-md text-base text-slate-500 sm:text-lg md:mt-5 md:max-w-3xl md:text-xl"> <Container>
Suite of products to help you get better at technical interviews. <h1 className="text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl md:text-6xl">
</p> <span className="block">Tech Interview Handbook</span>
</div> <span className="text-primary-600 block">Portal</span>
<div> </h1>
<h2 className="sr-only">Products.</h2> <p className="mx-auto mt-3 max-w-md text-base text-slate-500 sm:text-lg md:mt-5 md:max-w-3xl md:text-xl">
<dl className="space-y-10 lg:grid lg:grid-cols-3 lg:gap-12 lg:space-y-0"> Suite of products to help you get better at technical
{features.map((feature) => ( interviews.
<div key={feature.name}> </p>
<dt> </Container>
<div className="flex justify-center"> </div>
<img <Container>
alt={feature.name} <div>
className="h-48" <h2 className="sr-only">Products.</h2>
src={feature.img} <dl className="space-y-10 lg:grid lg:grid-cols-3 lg:gap-12 lg:space-y-0">
{features.map((feature) => (
<div key={feature.name}>
<dt>
<div className="flex justify-center">
<img
alt={feature.name}
className="h-48"
src={feature.img}
/>
</div>
<p className="mt-8 text-xl font-medium leading-6 text-slate-900">
{feature.name}
</p>
</dt>
<dd className="mt-2 text-base text-slate-500">
{feature.description}
</dd>
<Button
className="mt-4"
href={feature.href}
label="Try it out"
variant="tertiary"
/> />
</div> </div>
<p className="mt-8 text-xl font-medium leading-6 text-slate-900"> ))}
{feature.name} </dl>
</p> </div>
</dt> </Container>
<dd className="mt-2 text-base text-slate-500">
{feature.description}
</dd>
<Button
className="mt-4"
href={feature.href}
label="Try it out"
variant="tertiary"
/>
</div>
))}
</dl>
</div> </div>
</Container> </div>
</div> </>
); );
} }

Loading…
Cancel
Save