62 lines
2.6 KiB
JavaScript
62 lines
2.6 KiB
JavaScript
'use client'
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
|
|
export default function Fluid() {
|
|
const images = [
|
|
"/assets/images/menu-card/menu-1.webp",
|
|
"/assets/images/menu-card/menu-2.webp",
|
|
"/assets/images/menu-card/menu-3.webp",
|
|
"/assets/images/menu-card/menu-4.webp"
|
|
];
|
|
|
|
const [selectedImage, setSelectedImage] = useState(images[0]); // Set first image as default
|
|
|
|
return (
|
|
<>
|
|
{/* Fluid Section Two */}
|
|
<section className="fluid-section-two">
|
|
<div className="section-text">Recipe book</div>
|
|
<div className="outer-container clearfix">
|
|
|
|
{/* Content Column */}
|
|
<div className="content-column">
|
|
<div className="inner-column">
|
|
{/* Title Box */}
|
|
<div className="title-box">
|
|
<h2>Free recipe book!</h2>
|
|
<div className="text">
|
|
Get your copy of spicy kitchen featuring 10 of our most loved, <br /> highly-rated recipes!
|
|
</div>
|
|
</div>
|
|
|
|
{/* Image List */}
|
|
<ul className="book-list d-flex justify-content-start align-items-center">
|
|
{images.map((img, idx) => (
|
|
<li key={idx} style={{ cursor: "pointer" }} onClick={() => setSelectedImage(img)}>
|
|
<img src={img} alt={`Book ${idx + 1}`} style={{width:"150px", height:"150px"}}/>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* Button Box */}
|
|
<div className="button-box">
|
|
<Link href="#menu" className="theme-btn btn-style-one clearfix">
|
|
<span className="icon"></span>View Menu
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Image Column */}
|
|
<div className="image-column" style={{ backgroundImage: `url(${selectedImage})` }}>
|
|
<figure className="image-box">
|
|
<img src={selectedImage} alt="Selected Book" />
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|