crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 15:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Latest Updates

Browse Source
This commit is contained in:
Bel Curcio 2021-06-05 16:41:30 -03:00
parent 191a401ea6
commit 3cab31332a
3 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/common/SidebarLayout/SidebarLayout.module.css
View File

@ -1,6 +1,5 @@
.root { .root {
@apply relative h-full flex flex-col w-full; @apply relative h-full flex flex-col w-full;
min-width: 400px;
} }
.header { .header {

28
components/ui/Hero/Hero.module.css
View File

@ -1,18 +1,30 @@
.root { .root {
@apply flex flex-col py-32 mx-auto; @apply flex flex-col py-16 mx-auto;
} }
.headline { .title {
@apply text-accent-0 font-extrabold text-5xl leading-none tracking-tight; @apply text-accent-0 font-extrabold text-4xl leading-none tracking-tight;
} }
@screen md { .description {
@apply mt-4 text-xl leading-8 text-accent-2 mb-1 lg:max-w-4xl;
}
@screen lg {
.root { .root {
@apply flex-row items-center justify-center; @apply flex-row items-start justify-center py-32;
}
.title {
@apply text-5xl max-w-xl text-right leading-10 -mt-3;
line-height: 3.5rem;
}
.description {
@apply mt-0 ml-6;
}
} }
.headline { @screen xl {
@apply text-6xl max-w-xl text-right leading-10 -mt-3; .title {
line-height: 4rem; @apply text-6xl;
} }
} }

10
components/ui/Hero/Hero.tsx
View File

@ -14,13 +14,11 @@ const Hero: FC<HeroProps> = ({ headline, description }) => {
<div className="bg-accent-9 border-b border-t border-accent-2"> <div className="bg-accent-9 border-b border-t border-accent-2">
<Container> <Container>
<div className={s.root}> <div className={s.root}>
<h2 className={s.headline}>{headline}</h2> <h2 className={s.title}>{headline}</h2>
<div className="md:ml-6"> <div className={s.description}>
<p className="mt-4 text-xl leading-8 text-accent-2 mb-1 lg:max-w-4xl"> <p>{description}</p>
{description}
</p>
<Link href="/"> <Link href="/">
<a className="text-accent-0 pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content"> <a className="flex items-center text-accent-0 pt-3 font-bold hover:underline cursor-pointer w-max-content">
Read it here Read it here
<ArrowRight width="20" heigh="20" className="ml-1" /> <ArrowRight width="20" heigh="20" className="ml-1" />
</a> </a>