27 lines
No EOL
1.8 KiB
JavaScript
27 lines
No EOL
1.8 KiB
JavaScript
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import React from 'react'
|
|
|
|
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-lg sm:text-xl font-semibold'>Set your availability and share your link.</p>
|
|
<p className='text-lg sm:text-xl font-semibold'>Schedule.Me ensures you never get double booked!</p>
|
|
</div>
|
|
<div className='mt-20'>
|
|
<p className='mb-10 text-sm'>Sign up with <span className='font-semibold'>Google</span> and <span className='font-semibold'>Facebook</span></p>
|
|
<div className='flex flex-col md:flex md:flex-row gap-5 justify-center items-center text-center'>
|
|
<button className='flex items-center gap-1 mb-0 md:mb-5 px-4 py-2 border bg-[#101010] text-white hover:opacity-90'><Image src='/google.png' width={20} height={20} alt='google' className='w-[15px] h-[15px]'/>Sign up with Google</button>
|
|
<button className='flex items-center gap-1 mb-5 px-4 py-2 border border-[#101010] hover:bg-[gray] hover:border-[gray] hover:text-white'><Image src='/facebook.png' alt='facebook' width={20} height={20} className='w-[15px] h-[15px]'/>Sign up with Facebook</button>
|
|
</div>
|
|
<hr className='mb-5 mt-5 w-[350px] mx-auto'/>
|
|
<Link href="" className='text-sm text-[gray] hover:underline transition-all duration-500'>Sign up with your email</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Hero |