DetailInfo.js 4.13 KB
import Image from "next/image";
import React, { Fragment } from "react";
import { Button } from "react-bootstrap";

const DetailInfo = () => {
  return (
    <Fragment>
      <div className="row">
        <div className="col-12">
          <div className="product-info">
                <div className="top-row">
                    <div className="most-booked">Most Booked</div>
                    <div className="wishlist-share">
                        <a href="#" className="add-to-wishlist">
                            <span className="image-container">
                                <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist-01.svg" />
                            </span>
                        </a>
                        <a href="#" className="add-to-forwardt">
                            <span className="image-container">
                                <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/forward.svg" />
                            </span>
                        </a>
                    </div>
                </div>
                <div className="product-name">
                    Edge City Climb
                </div>
                <div className="product-reviews">
                    <span className="rating">8.8</span>
                    <span className="review">1,365 Reviews</span>
                    <span className="star">
                        <a href="">
                            <span className="image-container">
                                <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                            </span>
                        </a>
                        <a href="">
                            <span className="image-container">
                                <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                            </span>
                        </a>
                        <a href="">
                            <span className="image-container">
                                <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                            </span>
                        </a>
                        <a href="">
                            <span className="image-container">
                                <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                            </span>
                        </a>
                        <a href="">
                            <span className="image-container">
                                <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                            </span>
                        </a>
                    </span>
                </div>
                <div className="">Per Person</div>
                <div className="price">$185 <span>20% Off</span></div>
                <div className="mb-4">
                The worlds highest building ascent, City Climb allows participants to scale the outside of a skyscraper more than 1,200 feet (366 meters) above the ground, then lean out and look down from the highest outdoor platform in the city. Following that, experience The Edge, the highest outdoor sky deck in the Western Hemisphere. Height: 4.9ft - 6.7ft; Maximum Weight: 310lbs; Cannot be under the influence of alcohol.
                </div>
                <div className="location">Location & Address <span>(Outdoor)</span></div>
                <div className="mb-2">Chelsea </div>
                <div className="">30 Hudson Yards, New York, NY 10001</div>
                <div className="btn-row">
                    <Button variant="primary me-3">Book Now</Button>
                    <Button variant="secondary">Gift Now <span className="image-container btn-gift">
                    <Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" />
                    </span></Button>
                </div>
          </div>
        </div>
      </div>
    </Fragment>
  );
};

export default DetailInfo;