cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Changes to the Hero Component

Browse Source
This commit is contained in:
Belen Curcio 2020-10-23 13:25:33 -03:00
parent db68e663ac
commit ef2d647a99
2 changed files with 14 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

@ -1,6 +1,4 @@
import cn from 'classnames'
import React, { FC } from 'react' import React, { FC } from 'react'
import s from './Hero.module.css'
import { Container } from '@components/ui' import { Container } from '@components/ui'
import { RightArrow } from '@components/icon' import { RightArrow } from '@components/icon'
interface Props { interface Props {
@ -9,19 +7,15 @@ interface Props {
description: string description: string
} }
const Hero: FC<Props> = ({ headline, description, className }) => { const Hero: FC<Props> = ({ headline, description }) => {
const rootClassName = cn('bg-black py-40 min-h-72', className)
return ( return (
<div className={rootClassName}>
<Container> <Container>
<div className="mx-auto grid grid-cols-2"> <div className="mx-auto grid grid-cols-2 bg-black py-32">
<h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl"> <h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
{headline} {headline}
</h2> </h2>
<div className="flex flex-col justify-between"> <div className="flex flex-col justify-between">
<p className="mt-5 text-xl leading-7 text-accent-2"> <p className="mt-5 text-xl leading-7 text-accent-2">{description}</p>
{description}
</p>
<a className="block text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer"> <a className="block text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer">
<span>Read it here</span> <span>Read it here</span>
<RightArrow width="20" heigh="20" className="ml-1" /> <RightArrow width="20" heigh="20" className="ml-1" />
@ -29,7 +23,6 @@ const Hero: FC<Props> = ({ headline, description, className }) => {
</div> </div>
</div> </div>
</Container> </Container>
</div>
) )
} }