mirror of
https://github.com/wasp-lang/wasp.git
synced 2024-11-30 18:23:19 +03:00
104 lines
2.7 KiB
JavaScript
104 lines
2.7 KiB
JavaScript
import { ArrowRight } from 'react-feather'
|
|
|
|
import SectionContainer from './Layouts/SectionContainer'
|
|
|
|
const Feature = ({ title, description, url }) => (
|
|
<div className='col-span-12 md:col-span-6'>
|
|
<div className='lg:mt-5'>
|
|
<dt>
|
|
<h4 className='mb-4'>
|
|
<span className='bg-yellow-500/25 px-2 py-1 rounded'>{ title }</span>
|
|
</h4>
|
|
<p className='text-neutral-600'>
|
|
{ description }
|
|
</p>
|
|
<TextLink url={url} label='Learn more' />
|
|
</dt>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
const TextLink = ({ url, label }) => (
|
|
<a href={url}
|
|
className={`
|
|
mt-3 block cursor-pointer text-sm
|
|
text-neutral-600 hover:text-neutral-500
|
|
`}
|
|
>
|
|
<div className='group flex gap-1 items-center'>
|
|
<span>{label}</span>
|
|
<div className='transition-all group-hover:ml-0.5'>
|
|
<span className='text-yellow-600'>
|
|
<ArrowRight size={14} strokeWidth={2} />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
)
|
|
|
|
const HowItWorks = () => {
|
|
return (
|
|
<SectionContainer className='lg:pb-8'>
|
|
<div className='grid grid-cols-12'>
|
|
|
|
<div className='col-span-12 lg:col-span-4'>
|
|
<h2 className='text-xl lg:text-2xl text-neutral-700 mb-4'>
|
|
What's under the hood? 🚕
|
|
</h2>
|
|
<p className='text-neutral-700'>
|
|
Given <code>.wasp</code> and <code>.js(x)/.css/...</code>, source files,
|
|
Wasp compiler generates the full source of your web app in
|
|
the target stack - front-end, back-end and deployment.
|
|
</p>
|
|
|
|
{/* Features */}
|
|
<div className='py-8'>
|
|
<dl className='grid grid-cols-12 gap-y-4 md:gap-8'>
|
|
|
|
<Feature
|
|
title='Typescript support'
|
|
url='/'
|
|
description="JS or TS - mix'n'match as you wish."
|
|
/>
|
|
|
|
<Feature
|
|
title='Wasp CLI'
|
|
url='/'
|
|
description='All the handy commands at your fingertips.'
|
|
/>
|
|
|
|
<Feature
|
|
title='LSP for VS Code'
|
|
url='/'
|
|
description='Syntax highligthing, go-to-definition, etc. work out-of-the-box.'
|
|
/>
|
|
|
|
<Feature
|
|
title='Deploy anywhere'
|
|
url='/'
|
|
description='See our deployment guide for more details.'
|
|
/>
|
|
|
|
</dl>
|
|
|
|
</div> {/* EOF Features */}
|
|
</div>
|
|
|
|
<div className='col-span-12 lg:col-span-7 xl:col-span-7 xl:col-start-6'>
|
|
<img
|
|
className=''
|
|
src='/wasp-compilation-diagram.png'
|
|
alt='React'
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
</SectionContainer>
|
|
|
|
|
|
)
|
|
|
|
}
|
|
|
|
export default HowItWorks
|