37 lines
No EOL
2 KiB
JavaScript
37 lines
No EOL
2 KiB
JavaScript
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import React from 'react'
|
|
import { GoClock } from 'react-icons/go'
|
|
import { PiCalendarCheck, PiInfo, PiMapPinLight } from 'react-icons/pi'
|
|
|
|
const Hero = () => {
|
|
return (
|
|
<>
|
|
<div className='flex flex-col text-center mt-20 md:mt-40 overflow-hidden'>
|
|
<div>
|
|
<p className='uppercase text-5xl md:text-6xl font-semibold drop-shadow-xl font-outline-2 text-white mb-5'>Schedule meetings</p>
|
|
<p className='uppercase text-4xl md:text-5xl font-semibold drop-shadow-xl mb-5'>for <span>everyone</span></p>
|
|
<p className='text-base sm:text-xl font-semibold min-[400px]:text-lg'>Set your availability and share your link.</p>
|
|
<p className='text-base sm:text-xl font-semibold min-[400px]:text-lg'>Schedule.Me ensures you never get double booked!</p>
|
|
</div>
|
|
</div>
|
|
<div className='max-w-xl bg-white grid grid-cols-2 mx-auto mt-2 border border-black border-t-8 rounded-md shadow-md min-[400px]:mt-5'>
|
|
<div className='flex flex-col gap-2 p-5 border-r'>
|
|
<p className='text-md uppercase font-semibold tracking-wide mb-2'>Schedule.Me</p>
|
|
<p className='flex w-5 h-5 rounded-full bg-gray-500 text-white justify-center items-center mb-2'>S</p>
|
|
<p className='flex gap-1 items-center text-xs'><PiInfo className='text-base'/>Stand-up meeting</p>
|
|
<p className='flex gap-1 items-center text-xs'><PiCalendarCheck className='text-base'/>April 30th, 2024</p>
|
|
<p className='flex gap-1 items-center text-xs'><GoClock className='text-base'/>30 minutes </p>
|
|
<p className='flex gap-1 items-center text-xs'><PiMapPinLight className='text-base'/>Zoom</p>
|
|
<Link href="https://zoom.us/" className="text-gray-500 underline text-xs">https://zoom.us</Link>
|
|
</div>
|
|
<div className='flex flex-col gap-2 px-5 mt-14 mb-5'>
|
|
<p className='text-xs font-semibold'>Select date & time</p>
|
|
<Image src='/calendar.png' width={200} height={200} alt='calendar'/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Hero |