first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,48 @@
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
const BlockFeaturesOne = () => {
|
||||
return (
|
||||
<div className="block-style-thirtyEight mb-200 md-mb-150">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-xl-5 col-lg-6" data-aos="fade-right">
|
||||
<div className="title-style-sixteen">
|
||||
<div className="upper-title">Easy to use,</div>
|
||||
<h2>
|
||||
READY, <br /> HEADSET, GO
|
||||
</h2>
|
||||
</div>
|
||||
<p className="mt-30 pe-xl-5">
|
||||
No wires means you're not stuck playing Quest 2 at home. You’re free
|
||||
to take all the games, workouts, shows, experiences and more on the
|
||||
road with you.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="col-xl-7 col-lg-5 col-md-8 ms-auto text-end"
|
||||
data-aos="fade-left"
|
||||
>
|
||||
<div className="img-meta d-inline-block position-relative md-mt-70">
|
||||
<Image width={577} height={500} style={{width:'100%',height:'fit-content'}} src="/images/media/img_120.jpg" alt="media" />
|
||||
<Image width="141" height="160"
|
||||
src="/images/shape/244.svg"
|
||||
alt="media"
|
||||
className="shapes shape-one"
|
||||
data-aos="fade-down"
|
||||
data-aos-delay="300"
|
||||
/>
|
||||
<Image width={286} height={209}
|
||||
src="/images/media/img_121.png"
|
||||
alt="media"
|
||||
className="shapes shape-two"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="300"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlockFeaturesOne;
|
||||
@@ -0,0 +1,41 @@
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
const BlockFeaturesTwo = () => {
|
||||
return (
|
||||
<div className="block-style-thirtyEight">
|
||||
<div className="row align-items-center">
|
||||
<div
|
||||
className="col-xl-5 col-lg-6 order-lg-last ms-auto"
|
||||
data-aos="fade-left"
|
||||
>
|
||||
<div className="title-style-sixteen">
|
||||
<div className="upper-title">Gaming</div>
|
||||
<h2>PLAY FAVORITES GAMES.</h2>
|
||||
</div>
|
||||
<p className="mt-30 pe-xl-5">
|
||||
From multiplayer games to unique experiences to joining up with
|
||||
friends at a live show or instructor-led workout, opportunities to
|
||||
meet & connect with others.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-xl-7 col-lg-5 col-md-8" data-aos="fade-right">
|
||||
<div className="img-meta d-inline-block position-relative md-mt-70">
|
||||
<Image width={600} height={500} style={{width:'100%',height:'fit-content'}} src="/images/media/img_122.jpg" alt="media" />
|
||||
<Image
|
||||
width={259}
|
||||
height={310}
|
||||
src="/images/media/img_123.png"
|
||||
alt="media"
|
||||
className="shapes shape-three"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="300"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlockFeaturesTwo;
|
||||
@@ -0,0 +1,45 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
const FancyFeature = () => {
|
||||
const rating = ["fa-star", "fa-star", "fa-star", "fa-star", "fa-star"];
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xl-11 m-auto" data-aos="fade-up">
|
||||
<div className="title-style-fifteen text-center">
|
||||
<div className="upper-title">FEATURES</div>
|
||||
<h2>Complete Headset Filled with Unique Experiences.</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="img-meta mt-80 mb-65 md-mt-50 md-mb-50"
|
||||
data-aos="fade-up"
|
||||
>
|
||||
<Image width={1320} height={597} style={{width:'100%',height:'fit-content'}} src="/images/media/img_118.jpg" alt="media" className="w-100" />
|
||||
</div>
|
||||
<div className="d-flex align-items-center justify-content-center">
|
||||
<ul className="d-flex justify-content-center rating">
|
||||
{rating.map((star, i) => (
|
||||
<li key={i}>
|
||||
<i className={`fa ${star}`} aria-hidden="true"></i>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="rating-count">5,638 REVIEWS</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-xl-11 m-auto">
|
||||
<p className="text-lg text-center mt-30">
|
||||
DeskiVr is non-stop fun. The biggest titles and multi-player
|
||||
games—we have them. New ways to workout, socialize or lose track of
|
||||
time—we have those too. And our library keeps growing every day.
|
||||
Discover what’s possible on janovr.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FancyFeature;
|
||||
@@ -0,0 +1,40 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from "react";
|
||||
import ModalVideo from "react-modal-video";
|
||||
|
||||
const FancyVideo = () => {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<ModalVideo
|
||||
channel="youtube"
|
||||
autoplay
|
||||
isOpen={isOpen}
|
||||
videoId="ZFTgGi06vbM"
|
||||
onClose={() => setOpen(false)}
|
||||
/>
|
||||
|
||||
<div className="col-lg-6 ms-auto">
|
||||
<div className="content">
|
||||
<div className="title">
|
||||
Stylish Afford<span>able.</span> Quality.
|
||||
</div>
|
||||
<div className="fancybox video-icon tran3s mt-70 d-flex align-items-center cursor-default">
|
||||
<span className="icon cursor-pointer" onClick={() => setOpen(true)}>
|
||||
<i className="fa fa-play"></i>
|
||||
</span>
|
||||
<div className="ps-5 text-start">
|
||||
<span className="d-block ps-text">Watch Intro video </span>
|
||||
<strong className="d-block">
|
||||
It is a long established fact that will get it.{" "}
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FancyVideo;
|
||||
@@ -0,0 +1,83 @@
|
||||
'use client'
|
||||
|
||||
import Image from "next/image";
|
||||
|
||||
import React from "react";
|
||||
import CountUp from "react-countup";
|
||||
import VisibilitySensor from "react-visibility-sensor";
|
||||
|
||||
const counterUpContent = [
|
||||
{
|
||||
icon: "194",
|
||||
startCount: "0",
|
||||
endCount: "300",
|
||||
meta: "Focal Adjustment",
|
||||
},
|
||||
{
|
||||
icon: "195",
|
||||
startCount: "0",
|
||||
endCount: "108",
|
||||
meta: "Field of View",
|
||||
},
|
||||
{
|
||||
icon: "196",
|
||||
startCount: "0",
|
||||
endCount: "237",
|
||||
meta: "Weight",
|
||||
},
|
||||
{
|
||||
icon: "197",
|
||||
startCount: "0",
|
||||
endCount: "32",
|
||||
meta: "HD Lens Diameter",
|
||||
},
|
||||
];
|
||||
|
||||
const FeatureCounter = () => {
|
||||
const [focus, setFocus] = React.useState(false);
|
||||
return (
|
||||
<>
|
||||
{counterUpContent.map((val, i) => (
|
||||
<div
|
||||
className="col-lg-3 col-sm-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1200"
|
||||
key={i}
|
||||
>
|
||||
<div className="counter-box-six text-center mt-40">
|
||||
<div className="icon d-flex align-items-end justify-content-center">
|
||||
<Image width={57} height={45} style={{objectFit:'contain'}} src={`/images/icon/${val.icon}.svg`} alt="icon" />
|
||||
</div>
|
||||
<h2 className="number">
|
||||
<span className="timer">
|
||||
{" "}
|
||||
<CountUp
|
||||
start={focus ? val.startCount : null}
|
||||
end={val.endCount}
|
||||
duration={1}
|
||||
redraw={true}
|
||||
>
|
||||
{({ countUpRef }) => (
|
||||
<VisibilitySensor
|
||||
onChange={(isVisible) => {
|
||||
if (isVisible) {
|
||||
setFocus(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span ref={countUpRef} />
|
||||
</VisibilitySensor>
|
||||
)}
|
||||
</CountUp>{" "}
|
||||
</span>{" "}
|
||||
m
|
||||
</h2>
|
||||
<p>{val.meta}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeatureCounter;
|
||||
@@ -0,0 +1,228 @@
|
||||
'use client'
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import Modal from "react-modal";
|
||||
import MegaMenuLanding from "../header/mega-menu/MegaMenuLanding";
|
||||
import HeaderPopupForm from "../form/HeaderPopupForm";
|
||||
import Image from "next/image";
|
||||
const logo = "/images/logo/deski_06.svg";
|
||||
|
||||
const HeaderLanding = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
const [navbar, setNavbar] = useState(false);
|
||||
|
||||
function toggleModalOne() {
|
||||
setIsOpen(!isOpen);
|
||||
}
|
||||
|
||||
const changeBackground = () => {
|
||||
if (typeof window !== "undefined") {
|
||||
if (window.scrollY >= 90) {
|
||||
setNavbar(true);
|
||||
} else {
|
||||
setNavbar(false);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", changeBackground);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", changeBackground);
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* =============================================
|
||||
Theme Main Menu
|
||||
============================================== */}
|
||||
<div
|
||||
className={
|
||||
navbar
|
||||
? "theme-main-menu sticky-menu theme-menu-five fixed"
|
||||
: "theme-main-menu sticky-menu theme-menu-five"
|
||||
}
|
||||
>
|
||||
<div className="d-flex align-items-center justify-content-center">
|
||||
<div className="logo">
|
||||
<Link href="/">
|
||||
<Image width="138" height="47" src={logo} alt="brand" />
|
||||
</Link>
|
||||
</div>
|
||||
{/* End logo */}
|
||||
|
||||
<nav id="mega-menu-holder" className="navbar navbar-expand-lg">
|
||||
<div className="container nav-container">
|
||||
<div className="mob-header">
|
||||
<button className="toggler-menu" onClick={handleClick}>
|
||||
<div className={click ? "active" : ""}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/* End Header */}
|
||||
|
||||
<div
|
||||
className="navbar-collapse collapse landing-menu-onepage"
|
||||
id="navbarSupportedContent"
|
||||
>
|
||||
<div className="d-lg-flex justify-content-between align-items-center">
|
||||
<div
|
||||
className="navbar-nav main-side-nav font-gordita"
|
||||
|
||||
>
|
||||
<div data-to-scrollspy-id="home" className="nav-item dropdown position-static">
|
||||
<a
|
||||
className="nav-link dropdown-toggle"
|
||||
href="#home"
|
||||
data-toggle="dropdown"
|
||||
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
<div className="dropdown-menu">
|
||||
<MegaMenuLanding />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-to-scrollspy-id="product" className="nav-item">
|
||||
<a href="#product" className="nav-link">
|
||||
Product
|
||||
</a>
|
||||
</div> <div data-to-scrollspy-id="feature" className="nav-item">
|
||||
<a href="#feature" className="nav-link">
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="product-details" className="nav-item">
|
||||
<a href="#product-details" className="nav-link">
|
||||
Product Details
|
||||
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="testimonial" className="nav-item">
|
||||
<a href="#testimonial" className="nav-link">
|
||||
Testimonials
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div className="right-widget">
|
||||
<button className="demo-button" onClick={toggleModalOne}>
|
||||
<span>Contact Us</span>
|
||||
<Image width={20} height={20} src="/images/icon/user.svg" alt="icon" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.theme-main-menu */}
|
||||
|
||||
{/* Mobile Menu Start */}
|
||||
<div className={click ? "mobile-menu menu-open" : "mobile-menu"}>
|
||||
<div className="logo order-md-1">
|
||||
<Link href="/">
|
||||
<Image width="138" height="47" src="/images/logo/deski_06.svg" alt="brand" />
|
||||
</Link>
|
||||
<div className="fix-icon text-dark" onClick={handleClick}>
|
||||
<Image width="14" height="14" src="/images/icon/close.svg" alt="icon" />
|
||||
</div>
|
||||
{/* Mobile Menu close icon */}
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
||||
>
|
||||
<p data-to-scrollspy-id="home" className="nav-item">
|
||||
<a href="#home" className="nav-link" onClick={handleClick}>
|
||||
Home
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<div data-to-scrollspy-id="product" className="nav-item">
|
||||
<a href="#product" className="nav-link" onClick={handleClick}>
|
||||
Product
|
||||
</a>
|
||||
</div><div data-to-scrollspy-id="feature" className="nav-item">
|
||||
<a href="#feature" className="nav-link" onClick={handleClick}>
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="product-details" className="nav-item">
|
||||
<a href="#product-details" className="nav-link" onClick={handleClick}>
|
||||
Product Details
|
||||
</a>
|
||||
</div>
|
||||
<div data-to-scrollspy-id="testimonial" className="nav-item">
|
||||
<a href="#testimonial" className="nav-link" onClick={handleClick}>
|
||||
Testimonials
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Mobile Menu End */}
|
||||
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onRequestClose={toggleModalOne}
|
||||
contentLabel="My dialog"
|
||||
className="custom-modal modal-contact-popup-one"
|
||||
overlayClassName="custom-overlay"
|
||||
closeTimeoutMS={500}
|
||||
>
|
||||
<div className="box_inner ">
|
||||
<main className="main-body box_inner modal-content clearfix">
|
||||
<button className="close" onClick={toggleModalOne}>
|
||||
<Image width="14" height="14" src="/images/icon/close.svg" alt="close" />
|
||||
</button>
|
||||
{/* End close icon */}
|
||||
|
||||
<div className="left-side">
|
||||
<div className="d-flex flex-column justify-content-between h-100">
|
||||
<div className="row">
|
||||
<div className="col-xl-10 col-lg-8 m-auto">
|
||||
<blockquote>
|
||||
“I never dreamed about success. I worked for it.”
|
||||
</blockquote>
|
||||
<span className="bio">—Estée Lauder</span>
|
||||
</div>
|
||||
</div>
|
||||
<Image width="649" height="466"
|
||||
src="/images/assets/ils_18.svg"
|
||||
alt="image"
|
||||
className="illustration mt-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.left-side */}
|
||||
|
||||
<div className="right-side">
|
||||
<h2 className="form-title">Contact us</h2>
|
||||
<HeaderPopupForm />
|
||||
</div>
|
||||
{/* /.right-side */}
|
||||
</main>
|
||||
{/* /.main-body */}
|
||||
</div>
|
||||
</Modal>
|
||||
{/* End Modal For Request a demo */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderLanding;
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
|
||||
const HeroBanner = () => {
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<h1 className="hero-heading" data-aos="fade-right">
|
||||
Let’s explore the virtual world.
|
||||
</h1>
|
||||
<p
|
||||
className="hero-sub-heading"
|
||||
data-aos="fade-right"
|
||||
data-aos-delay="100"
|
||||
>
|
||||
Deski delivered blazing performance, striking word solution lorem.
|
||||
</p>
|
||||
<div
|
||||
className="d-lg-flex align-items-center justify-content-between pe-xl-5"
|
||||
data-aos="fade-right"
|
||||
data-aos-delay="200"
|
||||
>
|
||||
<div className="info">
|
||||
Virtual Reality Glass{" "}
|
||||
<span className="d-block">
|
||||
20% <span>SALE ON</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="price">$49.</div>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
className="explore-btn mt-5 md-mt-40"
|
||||
data-aos="fade-right"
|
||||
data-aos-delay="300"
|
||||
>
|
||||
Explore more & Shop
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroBanner;
|
||||
@@ -0,0 +1,101 @@
|
||||
'use client'
|
||||
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import Slider from "react-slick";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
|
||||
const LatestProduct = () => {
|
||||
const settings = {
|
||||
dots: false,
|
||||
arrow: true,
|
||||
infinite: true,
|
||||
speed: 900,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
autoplay: false,
|
||||
centerPadding: "0",
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const vrProducts = [
|
||||
{
|
||||
_id: 1,
|
||||
image: "img_115",
|
||||
title: "Oculus Quest",
|
||||
productLink: "#",
|
||||
price: "72.00",
|
||||
rating: ["fa-star", "fa-star", "fa-star", "fa-star", "fa-star-o"],
|
||||
},
|
||||
{
|
||||
_id: 2,
|
||||
image: "img_116",
|
||||
title: "VR Controller",
|
||||
productLink: "#",
|
||||
price: "27.00",
|
||||
rating: ["fa-star", "fa-star", "fa-star", "fa-star", "fa-star"],
|
||||
},
|
||||
{
|
||||
_id: 3,
|
||||
image: "img_117",
|
||||
title: "Play Station 2",
|
||||
productLink: "#",
|
||||
price: "382.00",
|
||||
rating: ["fa-star", "fa-star", "fa-star", "fa-star", "fa-star"],
|
||||
},
|
||||
{
|
||||
_id: 4,
|
||||
image: "img_116",
|
||||
title: "VR Controller",
|
||||
productLink: "#",
|
||||
price: "27.00",
|
||||
rating: ["fa-star", "fa-star", "fa-star", "fa-star", "fa-star"],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Slider {...settings}>
|
||||
{vrProducts.map((product) => (
|
||||
<div className="item" key={product._id}>
|
||||
<div className="block-style-thirtySeven">
|
||||
<div className="img-meta d-flex align-items-center justify-content-center">
|
||||
<Image width={207} height={120} style={{objectFit:'contain'}}
|
||||
src={`/images/media/${product.image}.png`}
|
||||
alt="vr product"
|
||||
/>
|
||||
</div>
|
||||
<h4 className="p-title mt-25">
|
||||
<a href={product.productLink}>{product.title}</a>
|
||||
</h4>
|
||||
<div className="price mt-15 mb-15">${product.price}</div>
|
||||
<ul className="d-flex justify-content-center rating">
|
||||
{product.rating.map((star, i) => (
|
||||
<li key={i}>
|
||||
<i className={`fa ${star}`} aria-hidden="true"></i>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LatestProduct;
|
||||
@@ -0,0 +1,111 @@
|
||||
'use client'
|
||||
|
||||
|
||||
import React from "react";
|
||||
import Slider from "react-slick";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
import Image from "next/image";
|
||||
const Testimonials = () => {
|
||||
const settings = {
|
||||
dots: true,
|
||||
arrow: false,
|
||||
infinite: true,
|
||||
speed: 900,
|
||||
rtl: true,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
autoplay: false,
|
||||
centerMode: true,
|
||||
centerPadding: "0",
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
dots: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
const reviewContent = [
|
||||
{
|
||||
_id: 1,
|
||||
name: "Bostami H.",
|
||||
region: "Lodon",
|
||||
avatar: "img_46",
|
||||
ratingDetails: `Pellentesque gravida sceleri pretium. Quisque ut lacus quis neque
|
||||
lac lacinia eget augue mauris at magna. some lorem quis.`,
|
||||
rating: ["fa-star", "fa-star", "fa-star", "fa-star", "fa-star"],
|
||||
},
|
||||
{
|
||||
_id: 1,
|
||||
name: "Jannatul Ara",
|
||||
region: "United Kingdom",
|
||||
avatar: "img_47",
|
||||
ratingDetails: `Pellentesque gravida sceleri pretium. Quisque ut lacus quis neque
|
||||
lac lacinia eget augue mauris at magna. some lorem quis.`,
|
||||
rating: ["fa-star", "fa-star", "fa-star", "fa-star", "fa-star"],
|
||||
},
|
||||
{
|
||||
_id: 1,
|
||||
name: "Reladia M.",
|
||||
region: "USA",
|
||||
avatar: "img_48",
|
||||
ratingDetails: `Pellentesque gravida sceleri pretium. Quisque ut lacus quis neque
|
||||
lac lacinia eget augue mauris at magna. some lorem quis.`,
|
||||
rating: ["fa-star", "fa-star", "fa-star", "fa-star", "fa-star"],
|
||||
},
|
||||
{
|
||||
_id: 1,
|
||||
name: "Kiron Li",
|
||||
region: "Australia",
|
||||
avatar: "img_49",
|
||||
ratingDetails: `Pellentesque gravida sceleri pretium. Quisque ut lacus quis neque
|
||||
lac lacinia eget augue mauris at magna. some lorem quis.`,
|
||||
rating: ["fa-star", "fa-star", "fa-star", "fa-star", "fa-star-o"],
|
||||
},
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<Slider {...settings}>
|
||||
{reviewContent.map((review) => (
|
||||
<div className="item" key={review._id}>
|
||||
<div className="bg-wrapper">
|
||||
<div className="d-flex align-items-center">
|
||||
<Image width={51} height={51} style={{height:'fit-content'}}
|
||||
src={`/images/media/${review.avatar}.png`}
|
||||
alt="media"
|
||||
className="avatar rounded-circle"
|
||||
/>
|
||||
<div className="ps-4">
|
||||
<h6 className="name">{review.name}</h6>
|
||||
<span className="region">{review.region}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="pt-25 pb-30">{review.ratingDetails}</p>
|
||||
<div className="d-flex align-items-center justify-content-between">
|
||||
<ul className="d-flex justify-content-center rating">
|
||||
{review.rating.map((star, i) => (
|
||||
<li key={i}>
|
||||
<i className={`fa ${star}`} aria-hidden="true"></i>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Image width="28" height="23" src="/images/icon/198.svg" alt="icon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Testimonials;
|
||||
Reference in New Issue
Block a user