<section
className={[
css`
width: 1391px;
height: 426px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 72px;
text-align: center;
font-size: 80px;
color: #800080;
font-family: Inter;
`,
className,
].join(' ')}
>
<div
className={css`
width: 1391px;
height: 294px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 20px;
`}
>
<h1
className={css`
margin: 0;
width: 1391px;
height: 208px;
position: relative;
font-size: inherit;
letter-spacing: -0.02em;
line-height: 130%;
font-weight: 700;
font-family: inherit;
display: inline-block;
`}
>
<p
className={css`
margin: 0;
`}
>
50% less code
</p>
<p
className={css`
margin: 0;
color: #1f2020;
`}
>
thanks to Figma.
</p>
</h1>
<h3
className={css`
margin: 0;
width: 1391px;
height: 66px;
position: relative;
font-size: 22px;
line-height: 150%;
font-weight: 400;
font-family: inherit;
color: #1f2020;
display: inline-block;
`}
>
<p
className={css`
margin: 0;
`}
>
Edit your UI in Figma, add logic with React or Vue.
</p>
<p
className={css`
margin: 0;
`}
>
No generated code to maintain.
</p>
</h3>
</div>
<button
className={css`
cursor: pointer;
border: none;
padding: 0;
background-color: transparent;
width: 203px;
height: 60px;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
`}
>
<div
className={css`
height: 60px;
width: 203px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
`}
>
<div
className={css`
height: 60px;
width: 203px;
border-radius: 20px;
background-color: #800080;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 18px 50px;
box-sizing: border-box;
`}
>
<div
className={css`
height: 24px;
width: 104px;
position: relative;
font-size: 16px;
line-height: 24px;
font-weight: 900;
font-family: Inter;
color: #fff;
text-align: center;
display: inline-block;
flex-shrink: 0;
`}
>
Start for free
</div>
</div>
</div>
</button>
</section>;