66 lines
2.8 KiB
JavaScript
66 lines
2.8 KiB
JavaScript
'use client'
|
||
import { useState } from "react";
|
||
import Link from "next/link";
|
||
|
||
export default function Fluid() {
|
||
const images = [
|
||
"/assets/images/menu-card/new-menu-1.webp",
|
||
"/assets/images/menu-card/new-menu-2.webp",
|
||
"/assets/images/menu-card/new-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 row m-0 d-flex align-items-center">
|
||
|
||
{/* Content Column */}
|
||
<div className="col-lg-6 content-column">
|
||
<div className="inner-column">
|
||
{/* Title Box */}
|
||
<div className="title-box">
|
||
<h2>Spice Up Your Screen!</h2>
|
||
<div className="text">
|
||
Grab our exclusive *Spicy Kitchen* recipe book – packed with 10 fan-favorite dishes<br /> bursting with bold flavor. Try before you buy!
|
||
</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 className="book-thumbnail" src={img} alt={`Book ${idx + 1}`}/>
|
||
</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="col-lg-6 p-0">
|
||
<div className="w-100">
|
||
<img
|
||
src={selectedImage}
|
||
alt="Selected Book"
|
||
className="img-fluid "
|
||
style={{ width: "100%", height: "auto", objectFit: "cover" }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</>
|
||
);
|
||
}
|