87 lines
2.8 KiB
TypeScript
87 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import ContactFormBox from "./ContactFormBox";
|
|
import { Autoplay } from "swiper/modules";
|
|
import { useState } from "react";
|
|
import Image from "next/image";
|
|
|
|
type HeroSliderProps = {
|
|
onClickBook?: () => void;
|
|
};
|
|
|
|
type HeroSlideItem = {
|
|
title: string;
|
|
description: string;
|
|
img: string;
|
|
};
|
|
|
|
export default function HeroSlider({ onClickBook }: HeroSliderProps) {
|
|
const [slideItems] = useState<HeroSlideItem[]>([
|
|
{
|
|
title: "Real Estate, Redefined",
|
|
description: "Where Southern Charm Meets Boutique Real Estate",
|
|
img: "/images/bg-header2.jpg",
|
|
},
|
|
{
|
|
title: "Your Vision, Our Expertise",
|
|
description: "Discover a Smarter Way to Buy & Sell",
|
|
img: "/images/bg-header3.jpg",
|
|
},
|
|
]);
|
|
|
|
return (
|
|
<section className="section flex! flex-row! justify-end! relative! min-h-96! lg:min-h-auto!">
|
|
<Swiper
|
|
className="absolute w-full h-full"
|
|
modules={[Autoplay]}
|
|
spaceBetween={50}
|
|
slidesPerView={1}
|
|
autoplay={{ delay: 4000 }}
|
|
loop
|
|
>
|
|
{slideItems.map((slide, idx) => (
|
|
<SwiperSlide key={idx}>
|
|
<Image
|
|
alt={slide.title}
|
|
src={slide.img}
|
|
quality={100}
|
|
fill
|
|
sizes="100vw"
|
|
style={{
|
|
objectFit: "cover",
|
|
}}
|
|
/>
|
|
<section className="section section-lg text-colorText2! bg-colorHeroOverlay/50 w-full h-full z-20">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-12 col-lg-8 text-wrap space-y-5 md:space-y-8 lg:space-y-12">
|
|
<div className="text-4xl lg:text-8xl! font-playfairdisplay text-center! lg:text-left!">
|
|
{slide.title}
|
|
</div>
|
|
<div className="text-lg lg:text-5xl! font-montserrat text-center! lg:text-left!">
|
|
{slide.description}
|
|
</div>
|
|
<div className="context-dark flex flex-row justify-center lg:hidden">
|
|
<button onClick={onClickBook} className="button button-xs button-primary-outline">
|
|
BOOK APPOINTMENT
|
|
</button>
|
|
</div>
|
|
<div className="context-dark flex flex-row justify-center lg:hidden">
|
|
<a href="tel:(478) 225 9061" className="button button-xs button-primary-outline">
|
|
Call Us
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
|
|
<ContactFormBox />
|
|
</section>
|
|
);
|
|
}
|