40 lines
1.6 KiB
TypeScript
40 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import Image from "next/image"
|
|
|
|
export default function Component() {
|
|
|
|
return (
|
|
<div
|
|
className='w-full bg-linear-gradient'
|
|
>
|
|
<div
|
|
className='flex justify-between items-end m-auto max-w-7xl h-20 px-3 /* small */
|
|
md:px-3 md:h-calc-2 /* middle */
|
|
xl:max-w-7xl xl:h-96 /* xlarge */
|
|
'>
|
|
<h1
|
|
className='self-center text-center text-lg leading-normal font-bold w-full /* small */
|
|
md:text-left md:text-calc-1 md:w-2/5 /* middle */
|
|
xl:text-left xl:text-4xl xl:leading-normal xl:w-2/5 /* xlarge */
|
|
'
|
|
// style={{ fontSize: 'calc((100vw - 8px) / 1024 * 36)' }}
|
|
>
|
|
|
|
Free, official online office tutorials by WPS Academy
|
|
</h1>
|
|
<div
|
|
className='hidden
|
|
md:flex md:h-calc-1 /* midle */
|
|
xl:h-80 xl:w-3/5 /* xlarge */
|
|
'>
|
|
<Image
|
|
className='w-full h-full'
|
|
src="https://res-academy.cache.wpscdn.com/images/57a4a45ff9748ff9cdef334582053ed9.png"
|
|
alt={'big img'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |