92 lines
3.7 KiB
TypeScript
92 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useState } from "react";
|
|
import { Autoplay } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
|
|
type HeroSlideItem = {
|
|
title: string;
|
|
description: string;
|
|
img: string;
|
|
};
|
|
|
|
export default function HeroSlider() {
|
|
const [slideItems] = useState<HeroSlideItem[]>([
|
|
{
|
|
title: "Full-Service Veteran-Owned Real Estate Company",
|
|
description:
|
|
"Dynamic Realty is a full-service veteran-owned real estate company based in Centerville, GA, established in 2004. Our services include buying & selling, rentals, & property management. We strive to provide a service that meets the needs of all our customers & are proud to have been helping people with their real estate needs for the past 20 years.",
|
|
img: "/images/bg-header4.jpg",
|
|
},
|
|
{
|
|
title: "Comprehensive Range of Realty Services",
|
|
description:
|
|
"Our services include buying & selling, renting, & property management. We understand the real estate sector inside out & are committed to providing a professional service to our clients. We strive to make the process of reaching your real estate goals as easy & stress-free as possible.",
|
|
img: "/images/bg-header5.jpg",
|
|
},
|
|
]);
|
|
|
|
return (
|
|
<section className="section flex! flex-row! justify-end! relative! min-h-[900px]! lg:min-h-[600px]!">
|
|
<Swiper
|
|
className="absolute w-full h-full"
|
|
modules={[Autoplay]}
|
|
spaceBetween={50}
|
|
slidesPerView={1}
|
|
autoplay={{ delay: 10000 }}
|
|
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/85 w-full h-full z-20">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-12 col-lg-4 flex justify-center">
|
|
<div className="w-[200px] h-[200px] relative mb-4 lg:hidden">
|
|
<Image alt="Logo" src={"/images/logo1.png"} quality={100} fill />
|
|
</div>
|
|
<div className="w-[300px] h-[300px] relative mb-4 hidden lg:block">
|
|
<Image alt="Logo" src={"/images/logo1.png"} quality={100} fill />
|
|
</div>
|
|
</div>
|
|
<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-6xl! font-playfairdisplay text-center! lg:text-left!">
|
|
{slide.title}
|
|
</div>
|
|
<div className="text-lg lg:text-xl! 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>
|
|
);
|
|
}
|