Hero

Code

"use client"

import Button from "../Button"

const Hero = () => (
	<div className="relative overflow-hidden flex flex-1 items-start justify-center pt-44 text-white">
		<img
			alt="Living room"
			className="object-cover"
			src="https://images.unsplash.com/photo-1601084881623-cdf9a8ea242c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3680&q=80"
		/>
		<div className="absolute flex flex-1 flex-col items-center justify-center gap-12 text-center">
			<h1 className="text-6xl md:text-8xl font-bold line-clamp-2">Alles voor je huis</h1>
			<p className="text-2xl px-6">Van eettafel tot bijzettafel vind de meubels die je zoekt</p>
			<a href="/en-GB/products/">
				<Button className="bg-white group-hover:bg-gray-50 hover:bg-gray-50" variant="default">
					<span className="text-black">Bekijk onze producten</span>
				</Button>
			</a>
		</div>
	</div>
)

export default Hero