├── src
    ├── App.css
    ├── index.css
    ├── main.jsx
    ├── components
    │   ├── Footer.jsx
    │   ├── NotFound.jsx
    │   ├── ProductGrid.jsx
    │   ├── Banner.jsx
    │   ├── Header.jsx
    │   ├── ProductCard.jsx
    │   ├── AboutUs.jsx
    │   └── ProductDetails.jsx
    ├── pages
    │   ├── Products.jsx
    │   ├── About.tsx
    │   └── Home.jsx
    ├── App.jsx
    └── data.js
├── postcss.config.js
├── vite.config.js
├── .hintrc
├── tailwind.config.js
├── .gitignore
├── index.html
├── README.md
├── package.json
├── eslint.config.js
└── public
    └── vite.svg


/src/App.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/.hintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "development"
 4 |   ],
 5 |   "hints": {
 6 |     "axe/language": [
 7 |       "default",
 8 |       {
 9 |         "html-has-lang": "off"
10 |       }
11 |     ]
12 |   }
13 | }


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 |   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from "react";
 2 | import { createRoot } from "react-dom/client";
 3 | import App from "./App.jsx";
 4 | import "./index.css";
 5 | 
 6 | createRoot(document.getElementById("root")).render(
 7 |   <StrictMode>
 8 |     <App />
 9 |   </StrictMode>
10 | );
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/src/components/Footer.jsx:
--------------------------------------------------------------------------------
 1 | const Footer = () => {
 2 |   return (
 3 |     <header className=" mt-3 md:mt-8 border border-t-[#6369D2] text-sm text-gray-600 gap-1   flex justify-between flex-wrap py-2 md:py-7 px-2 md:px-28">
 4 |       <p>Copyright © 2024 Xbeauty Store</p>
 5 |       <p>Powered by Xbeauty Store</p>
 6 |     </header>
 7 |   );
 8 | };
 9 | 
10 | export default Footer;
11 | 


--------------------------------------------------------------------------------
/src/pages/Products.jsx:
--------------------------------------------------------------------------------
 1 | import Footer from "../components/Footer";
 2 | import Header from "../components/Header";
 3 | import ProductListing from "../components/ProductGrid";
 4 | 
 5 | const Products = () => {
 6 |   return (
 7 |     <div>
 8 |       <Header />
 9 |       <ProductListing />
10 |       <Footer />
11 |     </div>
12 |   );
13 | };
14 | 
15 | export default Products;
16 | 


--------------------------------------------------------------------------------
/src/pages/About.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Header from "../components/Header";
 3 | import Footer from "../components/Footer";
 4 | import AboutUs from "../components/AboutUs";
 5 | 
 6 | const About = () => {
 7 |   return (
 8 |     <div className="bg-[#F2F3FA]">
 9 |       <Header />
10 |       <AboutUs />
11 |       <Footer />
12 |     </div>
13 |   );
14 | };
15 | 
16 | export default About;
17 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |   <title> Xbeauty Store</title>
 9 | </head>
10 | 
11 | <body>
12 |   <div id="root"></div>
13 |   <script type="module" src="/src/main.jsx"></script>
14 | </body>
15 | 
16 | </html>


--------------------------------------------------------------------------------
/src/pages/Home.jsx:
--------------------------------------------------------------------------------
 1 | import Banner from "../components/Banner";
 2 | import Footer from "../components/Footer";
 3 | import Header from "../components/Header";
 4 | import ProductListing from "../components/ProductGrid";
 5 | 
 6 | const Home = () => {
 7 |   return (
 8 |     <div className="bg-[#F2F3FA]">
 9 |       <Header />
10 |       <Banner />
11 |       <ProductListing />
12 | 
13 |       <Footer />
14 |     </div>
15 |   );
16 | };
17 | 
18 | export default Home;
19 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 | 
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 | 
5 | Currently, two official plugins are available:
6 | 
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 | 


--------------------------------------------------------------------------------
/src/components/NotFound.jsx:
--------------------------------------------------------------------------------
 1 | const NotFound = () => {
 2 |   return (
 3 |     <div className="flex items-center justify-center h-screen bg-gray-100">
 4 |       <div className="text-center">
 5 |         <h1 className="text-6xl font-bold text-gray-800">404</h1>
 6 |         <h2 className="text-3xl text-gray-600">Page Not Found</h2>
 7 |         <p className="mt-4 text-lg text-gray-500">
 8 |           Sorry, the page you are looking for does not exist.
 9 |         </p>
10 |         <a
11 |           href="/"
12 |           className="mt-8 inline-block px-6 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
13 |         >
14 |           Go to Home
15 |         </a>
16 |       </div>
17 |     </div>
18 |   );
19 | };
20 | 
21 | export default NotFound;
22 | 


--------------------------------------------------------------------------------
/src/components/ProductGrid.jsx:
--------------------------------------------------------------------------------
 1 | import products from "../data"; // Assuming product data is stored separately.
 2 | import ProductCard from "./ProductCard";
 3 | 
 4 | const ProductListing = () => {
 5 |   return (
 6 |     <div>
 7 |       <h2 className="text-3xl  md:text-5xl font-semibold text-center md:text-start mt-8 mb-4 md:mb-16 md:ml-28 ">
 8 |         Our Products
 9 |       </h2>
10 |       <div className="w-full  max-w-7xl   mx-auto flex justify-center">
11 |         <div className=" flex justify-center flex-wrap gap-4    ">
12 |           {products.map((product) => (
13 |             <ProductCard key={product.id} product={product} />
14 |           ))}
15 |         </div>
16 |       </div>
17 |     </div>
18 |   );
19 | };
20 | 
21 | export default ProductListing;
22 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 2 | 
 3 | import ProductDetails from "./components/ProductDetails";
 4 | import Home from "./pages/Home";
 5 | import NotFound from "./components/NotFound";
 6 | import About from "./pages/About";
 7 | import Products from "./pages/Products";
 8 | 
 9 | function App() {
10 |   return (
11 |     <Router>
12 |       <Routes>
13 |         <Route path="/" element={<Home />} />
14 |         <Route path="/about" element={<About />} />
15 |         <Route path="/product" element={<Products />} />
16 |         <Route path="/product/:id" element={<ProductDetails />} />
17 |         <Route path="*" element={<NotFound />} />
18 |       </Routes>
19 |     </Router>
20 |   );
21 | }
22 | 
23 | export default App;
24 | 


--------------------------------------------------------------------------------
/src/components/Banner.jsx:
--------------------------------------------------------------------------------
 1 | const Banner = () => {
 2 |   return (
 3 |     <section className="   ">
 4 |       <div className="mx-auto  max-w-7xl  px-4 py-32 lg:flex  h-screen lg:items-center">
 5 |         <div className="mx-auto max-w-xl text-center">
 6 |           <h1 className="text-3xl font-extrabold sm:text-5xl">
 7 |             Welcome to Our Store!
 8 |             <strong className="font-extrabold  text-[#66D7D1] sm:block">
 9 |               {" "}
10 |               Find the best products here
11 |             </strong>
12 |           </h1>
13 | 
14 |           <p className="mt-4 sm:text-xl/relaxed">
15 |             We have a wide range of Heater products for you to choose from.
16 |           </p>
17 |         </div>
18 |       </div>
19 |     </section>
20 |   );
21 | };
22 | 
23 | export default Banner;
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "amazon",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint .",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "react": "^18.3.1",
14 |     "react-dom": "^18.3.1",
15 |     "react-router-dom": "^6.27.0"
16 |   },
17 |   "devDependencies": {
18 |     "@eslint/js": "^9.11.1",
19 |     "@types/react": "^18.3.10",
20 |     "@types/react-dom": "^18.3.0",
21 |     "@vitejs/plugin-react": "^4.3.2",
22 |     "autoprefixer": "^10.4.20",
23 |     "eslint": "^9.11.1",
24 |     "eslint-plugin-react": "^7.37.0",
25 |     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
26 |     "eslint-plugin-react-refresh": "^0.4.12",
27 |     "globals": "^15.9.0",
28 |     "postcss": "^8.4.47",
29 |     "tailwindcss": "^3.4.14",
30 |     "vite": "^5.4.8"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/components/Header.jsx:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | 
 3 | const Header = () => {
 4 |   return (
 5 |     <header className=" border border-b-[#6369D2]">
 6 |       <div className="mx-auto max-w-screen-xl px-4 py-4  flex  justify-between gap-2 items-center">
 7 |         <h1 className="text-xl font-bold  font-mono    text-[#1D1F45] md:text-3xl  ">
 8 |           <Link to="/">Xbeauty</Link>
 9 |         </h1>
10 |         <div>
11 |           <nav className="flex gap-4 mt-4 items-center justify-center ">
12 |             <Link
13 |               to="/"
14 |               className="text-sm font-semibold text-[#1D1F45] hover:text-[#6369D2]"
15 |             >
16 |               Home
17 |             </Link>
18 |             <Link
19 |               to="/about"
20 |               className="text-sm font-semibold text-[#1D1F45] hover:text-[#6369D2]"
21 |             >
22 |               About
23 |             </Link>
24 |           </nav>
25 |         </div>
26 |       </div>
27 |     </header>
28 |   );
29 | };
30 | 
31 | export default Header;
32 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from '@eslint/js'
 2 | import globals from 'globals'
 3 | import react from 'eslint-plugin-react'
 4 | import reactHooks from 'eslint-plugin-react-hooks'
 5 | import reactRefresh from 'eslint-plugin-react-refresh'
 6 | 
 7 | export default [
 8 |   { ignores: ['dist'] },
 9 |   {
10 |     files: ['**/*.{js,jsx}'],
11 |     languageOptions: {
12 |       ecmaVersion: 2020,
13 |       globals: globals.browser,
14 |       parserOptions: {
15 |         ecmaVersion: 'latest',
16 |         ecmaFeatures: { jsx: true },
17 |         sourceType: 'module',
18 |       },
19 |     },
20 |     settings: { react: { version: '18.3' } },
21 |     plugins: {
22 |       react,
23 |       'react-hooks': reactHooks,
24 |       'react-refresh': reactRefresh,
25 |     },
26 |     rules: {
27 |       ...js.configs.recommended.rules,
28 |       ...react.configs.recommended.rules,
29 |       ...react.configs['jsx-runtime'].rules,
30 |       ...reactHooks.configs.recommended.rules,
31 |       'react/jsx-no-target-blank': 'off',
32 |       'react-refresh/only-export-components': [
33 |         'warn',
34 |         { allowConstantExport: true },
35 |       ],
36 |     },
37 |   },
38 | ]
39 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/ProductCard.jsx:
--------------------------------------------------------------------------------
 1 | import { useNavigate } from "react-router-dom";
 2 | 
 3 | /* eslint-disable react/prop-types */
 4 | const ProductCard = ({ product }) => {
 5 |   const navigate = useNavigate();
 6 |   const imageSrc = product.Images?.[0];
 7 | 
 8 |   const title = product.Title.slice(0, 48) + "...";
 9 |   const handleClick = () => {
10 |     navigate(`/product/${product.id}`); // Navigate to product details page
11 |   };
12 | 
13 |   return (
14 |     <div
15 |       className="product-card border rounded-lg p-4 shadow-md hover:shadow-lg w-64 md:w-80 border-[#6369D2] overflow-hidden cursor-pointer transition delay-100  duration-300"
16 |       onClick={handleClick}
17 |     >
18 |       <div className="w-48 h-48 md:w-[20rem] md:h-72 overflow-hidden hover:scale-110 transition delay-100  duration-200">
19 |         <img
20 |           src={imageSrc}
21 |           alt={product.Title}
22 |           className="w-full h-full object-contain mix-blend-multiply "
23 |         />
24 |       </div>
25 |       <div>
26 |         <h2 className="text-lg  md:text-xl font-semibold mt-2">{title}</h2>
27 |         <div className="flex gap-1 justify-between py-2">
28 |           <div className="flex gap-1">
29 |             <p className="text-black font-medium"> Color :</p>
30 |             <p className="text-gray-600"> {product.Color}</p>
31 |           </div>
32 |           <div className="flex gap-1">
33 |             <p className="text-black font-medium"> Price:</p>
34 |             <p className="text-gray-600"> {product.Price}</p>
35 |           </div>
36 |         </div>
37 |       </div>
38 |     </div>
39 |   );
40 | };
41 | 
42 | export default ProductCard;
43 | 


--------------------------------------------------------------------------------
/src/components/AboutUs.jsx:
--------------------------------------------------------------------------------
 1 | // src/components/AboutUs.js
 2 | import React from "react";
 3 | 
 4 | const AboutUs = () => {
 5 |   return (
 6 |     <div className="bg-gray-50 min-h-screen py-12 px-6 flex items-center justify-center">
 7 |       <div className="max-w-5xl w-full">
 8 |         <h1 className="text-5xl font-extrabold text-gray-800 text-center mb-8">
 9 |           About Us
10 |         </h1>
11 |         <div className="space-y-8">
12 |           <section className="bg-white shadow-lg rounded-lg p-8">
13 |             <h2 className="text-2xl font-semibold text-gray-700 mb-4">
14 |               Flame Speed & Brightness Adjustments
15 |             </h2>
16 |             <p className="text-lg text-gray-600 leading-relaxed">
17 |               Our electric fireplace allows you to adjust the flame's speed and
18 |               brightness to match your mood. The flame effects can function
19 |               independently of the heater, giving you the perfect ambiance
20 |               without additional heat. Choose from four vibrant flame colors and
21 |               use the dimmer to set the ideal brightness.
22 |             </p>
23 |           </section>
24 | 
25 |           <section className="bg-white shadow-lg rounded-lg p-8">
26 |             <h2 className="text-2xl font-semibold text-gray-700 mb-4">
27 |               Safe & Overheat Protection
28 |             </h2>
29 |             <p className="text-lg text-gray-600 leading-relaxed">
30 |               Safety is our top priority. The built-in overheat protection
31 |               system ensures the heater automatically shuts off when critical
32 |               temperatures are reached. Designed with a bottom air outlet, it
33 |               effectively prevents overheating and potential harm.
34 |             </p>
35 |           </section>
36 | 
37 |           <section className="bg-white shadow-lg rounded-lg p-8">
38 |             <h2 className="text-2xl font-semibold text-gray-700 mb-4">
39 |               Two-Stage Temperature Control
40 |             </h2>
41 |             <p className="text-lg text-gray-600 leading-relaxed">
42 |               Our heater features two temperature settings: 500W and 1500W.
43 |               Additionally, the built-in timer lets you control when the heater
44 |               operates, helping you save energy and enjoy a warm room upon
45 |               arrival.
46 |             </p>
47 |           </section>
48 | 
49 |           <section className="bg-white shadow-lg rounded-lg p-8">
50 |             <h2 className="text-2xl font-semibold text-gray-700 mb-4">
51 |               Graceful Infrared Heating Design
52 |             </h2>
53 |             <p className="text-lg text-gray-600 leading-relaxed">
54 |               Designed with elegance and portability in mind, this fireplace
55 |               features a classic retro style with a sturdy build. Special
56 |               lightweight materials ensure easy mobility, making it suitable for
57 |               various settings such as offices, restaurants, or homes.
58 |             </p>
59 |           </section>
60 | 
61 |           <section className="bg-white shadow-lg rounded-lg p-8">
62 |             <h2 className="text-2xl font-semibold text-gray-700 mb-4">
63 |               Realistic & Bright Flame Effect
64 |             </h2>
65 |             <p className="text-lg text-gray-600 leading-relaxed">
66 |               Our advanced technology creates a flame effect that surpasses the
67 |               aesthetics of real fire. Enjoy the ambiance of dancing flames and
68 |               glowing logs without the risks associated with an open flame. The
69 |               transparent glass design provides a stunning view from all angles.
70 |             </p>
71 |           </section>
72 | 
73 |           <section className="bg-white shadow-lg rounded-lg p-8">
74 |             <h2 className="text-2xl font-semibold text-gray-700 mb-4">
75 |               Warm & Comfortable Experience
76 |             </h2>
77 |             <p className="text-lg text-gray-600 leading-relaxed">
78 |               Using the latest infrared heating technology, our heater offers
79 |               fast and efficient warmth. It covers areas between 400 to 500
80 |               square feet, with a heating time of just 5 to 7 minutes. The
81 |               bottom vents reduce operational noise, ensuring a peaceful
82 |               environment with noise levels under 40dB.
83 |             </p>
84 |           </section>
85 |         </div>
86 |       </div>
87 |     </div>
88 |   );
89 | };
90 | 
91 | export default AboutUs;
92 | 


--------------------------------------------------------------------------------
/src/components/ProductDetails.jsx:
--------------------------------------------------------------------------------
  1 | import { useParams } from "react-router-dom";
  2 | import products from "../data"; // Make sure this points to your products data file
  3 | import { useEffect, useState, useRef } from "react";
  4 | import Header from "./Header";
  5 | import Footer from "./Footer";
  6 | import NotFound from "./NotFound";
  7 | 
  8 | const ProductDetails = () => {
  9 |   const { id } = useParams();
 10 |   const [product, setProduct] = useState(null);
 11 |   const [mainImage, setMainImage] = useState("");
 12 |   const [isZoomed, setIsZoomed] = useState(false); // Start with no zoom
 13 |   const [zoomPosition, setZoomPosition] = useState({ x: 0, y: 0 }); // Mouse position tracking
 14 |   const [productNotFound, setProductNotFound] = useState(false);
 15 | 
 16 |   const zoomRef = useRef(null); // Ref for the zoom container
 17 | 
 18 |   useEffect(() => {
 19 |     const foundProduct = products.find((p) => p.id === id);
 20 |     if (foundProduct) setMainImage(foundProduct.Images[0]); // Set initial main image
 21 |     if (foundProduct) {
 22 |       setProduct(foundProduct);
 23 |       setProductNotFound(false); // Reset the not found state if product is found
 24 |     } else {
 25 |       setProductNotFound(true); // Set not found state to true if product is not found
 26 |     }
 27 |   }, [id]);
 28 | 
 29 |   if (productNotFound) return <NotFound />;
 30 |   if (!product)
 31 |     return (
 32 |       <p className="flex justify-center items-center h-screen">Loading ...</p>
 33 |     );
 34 | 
 35 |   const toggleZoom = () => {
 36 |     setIsZoomed((prev) => !prev); // Toggle zoom state
 37 |   };
 38 | 
 39 |   const handleMouseMove = (e) => {
 40 |     if (!isZoomed) return; // Only track when zoom is active
 41 | 
 42 |     const { left, top, width, height } =
 43 |       zoomRef.current.getBoundingClientRect();
 44 |     const x = ((e.clientX - left) / width) * 100; // Get mouse position as a percentage
 45 |     const y = ((e.clientY - top) / height) * 100;
 46 | 
 47 |     setZoomPosition({ x, y }); // Store the position as percentages
 48 |   };
 49 | 
 50 |   const handleImageClick = (img) => setMainImage(img); // Update main image
 51 | 
 52 |   return (
 53 |     <>
 54 |       <Header />
 55 | 
 56 |       <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 p-4 md:p-8">
 57 |         {/* Left Side: Image Gallery */}
 58 |         <div className="space-y-4">
 59 |           <div
 60 |             ref={zoomRef}
 61 |             className={`relative border rounded-lg overflow-hidden w-[36vh] h-[40vh] sm:w-[48vh] sm:h-[50vh] mx-auto md:w-[90vh]  md:h-[80vh]  ${
 62 |               isZoomed ? "cursor-zoom-out" : "cursor-zoom-in"
 63 |             }`}
 64 |             onClick={toggleZoom}
 65 |             onMouseMove={handleMouseMove}
 66 |           >
 67 |             {/* Main Image with Zoom Functionality */}
 68 |             <img
 69 |               src={mainImage}
 70 |               alt={product.Title}
 71 |               className={`w-full h-full  object-contain transition-transform duration-300 ease-in-out ${
 72 |                 isZoomed ? "scale-150" : "scale-100" // Conditional scaling
 73 |               }`}
 74 |               style={
 75 |                 isZoomed
 76 |                   ? { transformOrigin: `${zoomPosition.x}% ${zoomPosition.y}%` }
 77 |                   : {}
 78 |               }
 79 |             />
 80 | 
 81 |             {/* Zoom Icon (Only shown when not zoomed) */}
 82 |             {!isZoomed && (
 83 |               <div className="absolute inset-0 flex items-center justify-center">
 84 |                 <span className="text-white text-4xl bg-black/50 p-4 rounded-full">
 85 |                   🔍
 86 |                 </span>
 87 |               </div>
 88 |             )}
 89 |           </div>
 90 | 
 91 |           {/* Thumbnails */}
 92 |           <div className="flex  gap-1 md:w-[95%] max-w-7xl sm:w-auto overflow-x-auto md:overflow-hidden scrollbar-hide">
 93 |             {product.Images.map((img, index) => (
 94 |               <img
 95 |                 key={index}
 96 |                 src={img}
 97 |                 alt={`${product.Title} - ${index + 1}`}
 98 |                 className={`w-20 h-20 object-cover cursor-pointer rounded-md border ${
 99 |                   mainImage === img ? "border-blue-500" : "border-gray-300"
100 |                 }`}
101 |                 onClick={() => handleImageClick(img)}
102 |               />
103 |             ))}
104 |           </div>
105 |         </div>
106 | 
107 |         {/* Right Side: Product Details */}
108 |         <div className="space-y-6  ">
109 |           <h1 className="text-2xl md:text-4xl font-bold">{product.Title}</h1>
110 |           {/* 1 */}
111 |           <div className="flex gap-2 *: items-center">
112 |             <span className="text-black font-semibold"> Color:</span>
113 |             <span className=" font-medium text-gray-600">{product.Color}</span>
114 |           </div>
115 | 
116 |           {/* 2 */}
117 |           <div className="flex gap-2 *: items-center">
118 |             <span className="text-black font-semibold">Brand:</span>
119 |             <span className=" font-medium text-gray-600">{product.Brand}</span>
120 |           </div>
121 |           {/* 3 */}
122 |           <div className="flex gap-2 *: items-center">
123 |             <span className="text-black font-semibold"> PowerSource:</span>
124 |             <span className=" font-medium text-gray-600">
125 |               {product.PowerSource}
126 |             </span>
127 |           </div>
128 |           {/* 4*/}
129 |           <div className="flex gap-2 *: items-center">
130 |             <span className="text-black font-semibold">
131 |               {" "}
132 |               ProductDimensions:
133 |             </span>
134 |             <span className=" font-medium text-gray-600">
135 |               {product.ProductDimensions}
136 |             </span>
137 |           </div>
138 |           {/* 5*/}
139 |           <div className="flex gap-2 *: items-center">
140 |             <span className="text-black font-semibold"> Material:</span>
141 |             <span className=" font-medium text-gray-600">
142 |               {product.Material}
143 |             </span>
144 |           </div>
145 |           {/* 6*/}
146 |           <div className="flex gap-2 *: items-center">
147 |             <span className="text-black font-semibold"> FinishType:</span>
148 |             <span className=" font-medium text-gray-600">
149 |               {product.FinishType}
150 |             </span>
151 |           </div>
152 |           {/* 7*/}
153 |           <div className="flex gap-2 *: items-center">
154 |             <span className="text-black font-semibold"> InstallationType:</span>
155 |             <span className=" font-medium text-gray-600">
156 |               {product.InstallationType}
157 |             </span>
158 |           </div>
159 |           {/* 8*/}
160 |           <div className="flex gap-2 *: items-center">
161 |             <span className="text-black font-semibold"> Heat_Output:</span>
162 |             <span className=" font-medium text-gray-600">
163 |               {product.Heat_Output}
164 |             </span>
165 |           </div>
166 |           {/* 9*/}
167 |           <div className="flex gap-2 *: items-center">
168 |             <span className="text-black font-semibold"> Special_Feature:</span>
169 |             <span className=" font-medium text-gray-600">
170 |               {product.Special_Feature}
171 |             </span>
172 |           </div>
173 |           {/* 10*/}
174 |           <div className="flex gap-2 *: items-center">
175 |             <span className="text-black font-semibold"> Style:</span>
176 |             <span className=" font-medium text-gray-600">{product.Style}</span>
177 |           </div>
178 |           {/* 11*/}
179 |           <div className="flex gap-2 *: items-center">
180 |             <span className="text-black font-semibold"> Room_Type:</span>
181 |             <span className=" font-medium text-gray-600">
182 |               {product.Room_Type}
183 |             </span>
184 |           </div>
185 |           {/* 9*/}
186 |           <div className="flex gap-2 *: items-center">
187 |             <span className="text-black font-semibold"> Ventilation_Type:</span>
188 |             <span className=" font-medium text-gray-600">
189 |               {product.Ventilation_Type}
190 |             </span>
191 |           </div>
192 |         </div>
193 |       </div>
194 | 
195 |       {/* Additional Details Section */}
196 |       <div className="p-8 md:pl-20 space-y-4 max-w-6xl ">
197 |         <h2 className="text-2xl font-bold">Product Details</h2>
198 |         {product.detail.map((paragraph, index) => (
199 |           <p key={index} className="text-gray-700 text-sm md:text-lg">
200 |             .{paragraph}
201 |           </p>
202 |         ))}
203 |       </div>
204 | 
205 |       <Footer />
206 |     </>
207 |   );
208 | };
209 | 
210 | export default ProductDetails;
211 | 


--------------------------------------------------------------------------------
/src/data.js:
--------------------------------------------------------------------------------
  1 | const products = [
  2 |   {
  3 |     id: "1",
  4 |     Title:
  5 |       "Electric Fireplace Heater Portable Electric Fireplace Heater Indoor,Beige",
  6 |     Color: "Beige",
  7 |     Price: "189.99$",
  8 |     Brand: "Xbeauty",
  9 |     PowerSource: "Battery Powered",
 10 |     ProductDimensions: '10.7"D x 23.5"W x 24.3"H',
 11 |     Material: "Stainless Steel",
 12 |     FinishType: "Painted",
 13 |     InstallationType: "Freestanding",
 14 |     Heat_Output: "5100 British Thermal Units",
 15 |     Special_Feature: "Led Flame",
 16 |     Style: "Classic",
 17 | 
 18 |     detail: [
 19 |       [
 20 |         "Vintage Fireplace:Classic retro style,original medieval church gate design, Strong Steel Structure. When the cold sets in, there no better feelithan relaxing by your fireplace, whose efficient 5,100 BTU heat output keeps you warm all winter.",
 21 |       ],
 22 |       [
 23 |         "Portable fireplace: It is only 23.5in*10.7in*24.3in, which means its very portable. Adults can move easily.The electric fireplace heater suitable for many occasions, whether it is a office, a restaurant or a family.",
 24 |       ],
 25 |       [
 26 |         "Realistic Flame Vision:The fire effect of the fireplace heater aesthetically surpasses real flames,the atmosphere created by the combination of bright flames and logs is unparalleled, 3 transparent glass lets you see the realistic flame effect from any angle,so enjoy the visual experience and warmth of this fireplace stove.",
 27 |       ],
 28 |       [
 29 |         "Flame Speed & Brightness are Adjusted:Flame effects can be separated from heat;The flame effect can be controlled independently without heating;Four color-changing flames that change depending on your mood,and the flame dimmer controls the brightness of the flame effect to help you set up when you do not need a heater.",
 30 |       ],
 31 |       [
 32 |         "Safe and Overheat Protection:When the temperature reaches a critical level, the fireplace's overheating protection system will automatically turn off the heater to ensure the user's safety. Furnace bottom design air outlet, can effectively avoid the fuselage overheating and high temperature harm.",
 33 |       ],
 34 |       [
 35 |         "Safe and Overheat Protection:When the temperature reaches a critical level, the fireplace's overheating protection system will automatically turn off the heater to ensure the user's safety. Furnace bottom design air outlet, can effectively avoid the fuselage overheating and high temperature harm.",
 36 |       ],
 37 |     ],
 38 |     Images: [
 39 |       "https://m.media-amazon.com/images/I/71qKr6JfNFL._AC_SL1500_.jpg",
 40 |       "https://m.media-amazon.com/images/I/71TCksDyOOL._AC_SL1500_.jpg",
 41 |       "https://m.media-amazon.com/images/I/71iz0CvkQPL._AC_SL1500_.jpg",
 42 |       "https://m.media-amazon.com/images/I/810CMweeJzL._AC_SL1500_.jpg",
 43 |       "https://m.media-amazon.com/images/I/71J5kRWhBvL._AC_SL1500_.jpg",
 44 |       "https://m.media-amazon.com/images/I/71wI6BxvaLL._AC_SL1500_.jpg",
 45 |       "https://m.media-amazon.com/images/I/81kI5whJIfL._AC_SL1500_.jpg",
 46 |     ],
 47 |   },
 48 |   {
 49 |     id: "2",
 50 |     Title:
 51 |       " Electric Fireplace Heater Portable Electric Fireplace Heater Indoor,Black",
 52 |     Color: " Black",
 53 |     Price: "189.99$",
 54 |     Brand: "Xbeauty",
 55 |     PowerSource: "Electric",
 56 |     ProductDimensions: '10"D x 23"W x 24"H',
 57 |     Material: "Stainless Steel",
 58 | 
 59 |     InstallationType: "Freestanding",
 60 |     Heat_Output: "5100 British Thermal Units",
 61 |     Special_Feature:
 62 |       "Led Flame, Multicolor Flame, Timer function, Adjustable Flame, Two-stage Temperature Control",
 63 |     Style: "Classic",
 64 |     Room_Type: "Office, Kitchen",
 65 | 
 66 |     detail: [
 67 |       [
 68 |         "Vintage Fireplace:Classic retro style,original medieval church gate design, Strong Steel Structure. When the cold sets in, there no better feelithan relaxing by your fireplace, whose efficient 5,100 BTU heat output keeps you warm all winter.",
 69 |       ],
 70 |       [
 71 |         "Portable fireplace: It is only 23.5in*10.7in*24.3in, which means its very portable. Adults can move easily.The electric fireplace heater suitable for many occasions, whether it is a office, a restaurant or a family.",
 72 |       ],
 73 |       [
 74 |         "Realistic Flame Vision:The fire effect of the fireplace heater aesthetically surpasses real flames,the atmosphere created by the combination of bright flames and logs is unparalleled, 3 transparent glass lets you see the realistic flame effect from any angle,so enjoy the visual experience and warmth of this fireplace stove.",
 75 |       ],
 76 |       [
 77 |         "Flame Speed & Brightness are Adjusted:Flame effects can be separated from heat;The flame effect can be controlled independently without heating;Four color-changing flames that change depending on your mood,and the flame dimmer controls the brightness of the flame effect to help you set up when you do not need a heater.",
 78 |       ],
 79 |       [
 80 |         "Safe and Overheat Protection:When the temperature reaches a critical level, the fireplace's overheating protection system will automatically turn off the heater to ensure the user's safety. Furnace bottom design air outlet, can effectively avoid the fuselage overheating and high temperature harm.",
 81 |       ],
 82 |       [
 83 |         "Two-stage Temperature Control: Available in two temperature Settings, 500W and 1500W. In addition, the fireplace heater has a timing function so that you can save resources and have a warm room when you get home.",
 84 |       ],
 85 |     ],
 86 |     Images: [
 87 |       "https://m.media-amazon.com/images/I/71fA-Ut1G2L._AC_SL1500_.jpg",
 88 |       "https://m.media-amazon.com/images/I/81PYoo0ErCL._AC_SL1500_.jpg",
 89 |       "https://m.media-amazon.com/images/I/71wI6BxvaLL._AC_SL1500_.jpg",
 90 |       "https://m.media-amazon.com/images/I/81Unu0Ex94L._AC_SL1500_.jpg",
 91 |       "https://m.media-amazon.com/images/I/71khYLq7d0L._AC_SL1500_.jpg",
 92 |       "https://m.media-amazon.com/images/I/81aO3ulDoDL._AC_SL1500_.jpg",
 93 |       "https://m.media-amazon.com/images/I/71ohuJFi38L._AC_SL1500_.jpg",
 94 |     ],
 95 |   },
 96 |   {
 97 |     id: "3",
 98 |     Title:
 99 |       "Xbeauty Electric Fireplace Stove, Freestanding Fireplace Heater with Realistic Flame, Indoor Electric Stove Heater, Portable, Infrared, Thermostat, Overheating Safety System, 1000W/1500W(23 Inch)",
100 |     Color: "Black-23inch",
101 |     Price: "149.99$",
102 |     Brand: "Xbeauty",
103 |     PowerSource: "Corded Electric",
104 |     ProductDimensions: '12.6"D x 23.6"W x 22.5"H',
105 | 
106 |     InstallationType: "Freestanding",
107 |     Heat_Output: "5100",
108 |     Special_Feature: "Portable",
109 |     Style: "Portable,Retro,Classic,Unique",
110 |     Room_Type: "Study, Bedroom, Living Room",
111 |     Ventilation_Type: "Vent Free",
112 |     detail: [
113 |       [
114 |         "[Grace beautiful Infrared heater] Elegant and unique design, classic retro style, and stable solid structure. These words do not even begin to describe this electric fireplace stove. The designer used special materials to keep the product strong and reduce the weight of the furnace to only  Z6 L X 12.6 W X 22.5 H ,which means the product is very portable. An adult can move it easily. Also, lighter weight means it’s safer.",
115 |       ],
116 |       [
117 |         " [Real and bright flame effect] Based on the latest technology, the flame’s effect of this product not only surpasses the real flame in terms of aesthetics, but also avoids the danger posed by the real flame. The atmosphere created by the combination of the bright flame and the log is unparalleled. You can enjoy the visual experience and warmth brought by this heater in your bedroom, study, hall with your family.",
118 |       ],
119 |       [
120 |         "[Safe and efficient power] This electric stove heater has two heating modes of 1000W and 1500W to adapt to different environments and needs. 120V voltage, 60Hz frequency, 5100BTUS, 12.5AMPS. The overheating protection system will shut down the power when the temperature reaches a critical level to ensure the safety of user. In the lower right corner of the furnace has knobs for adjusting the thermostat and brightness of the flame, which is very convenient and relaxed",
121 |       ],
122 |       [
123 |         " [Warm and comfortable experience] This product USES the latest infrared heating technology to make heating more safer. Moreover, after testing, the maximum heating range of this heater is 400sq to 500sq, and the average heating time is 5 to 7 minutes. The vents at the bottom of the furnace effectively reduce the noise generated by the heater when it is working. The maximum noise will not exceed 40db.",
124 |       ],
125 |       [
126 |         " When the cold sets in, there's no better feeling than relaxing by your fireplace, whose efficient heat output keeps you warm all winter.",
127 |       ],
128 |     ],
129 |     Images: [
130 |       "https://m.media-amazon.com/images/I/7126zgAWrxL._AC_SL1500_.jpg",
131 |       "https://m.media-amazon.com/images/I/81hEC6BoHkL._AC_SL1500_.jpg",
132 |       "https://m.media-amazon.com/images/I/71NhRtBxUfL._AC_SL1500_.jpg",
133 |       "https://m.media-amazon.com/images/I/711PGgD7L7L._AC_SL1500_.jpg",
134 |       "https://m.media-amazon.com/images/I/71jlLcnq8AL._AC_SL1500_.jpg",
135 |       "https://m.media-amazon.com/images/I/719p1-vT71L._AC_SL1500_.jpg",
136 |       "https://m.media-amazon.com/images/I/71LzBVcN8mL._AC_SL1500_.jpg",
137 |     ],
138 |   },
139 |   {
140 |     id: "4",
141 |     Title:
142 |       "Electric Fireplace Heater Portable Electric Fireplace Stove Heater Indoor,12 Flame Colors,12 Flame Bed Colors,5 Flame Brightness,5 Flame Speeds,Control The Temperature",
143 |     Color: "Black-24inch",
144 |     Price: "199.99$",
145 |     Brand: "Xbeauty",
146 |     PowerSource: "Corded Electric",
147 |     ProductDimensions: '10.67"D x 23.46"W x 24.25"H',
148 |     Material: "Stainless Steel",
149 |     FinishType: "Stainless Steel",
150 |     InstallationType: "Freestanding",
151 |     Heat_Output: "5100 British Thermal Units",
152 |     Special_Feature: "Portable, Flame Effect",
153 |     Style: "Colonial",
154 | 
155 |     detail: [
156 |       [
157 |         "Vintage Fireplace:Classic retro style,original medieval church gate design, Strong Steel Structure. When the cold sets in, there's no better feeling than relaxing by your fireplace, whose efficient 5,100 BTU heat output keeps you warm all winter",
158 |       ],
159 |       [
160 |         "Portable Fireplace: It's only 23.46in*10.67in*24.25in, which means it's very portable. Adults can move easily.The electric fireplace heater suitable for many occasions, whether it is a office, a restaurant or a family.",
161 |       ],
162 |       [
163 |         " Realistic Flame Vision:The fire effect of the fireplace heater aesthetically surpasses real flames,the atmosphere created by the combination of bright flames and logs is unparalleled, 3 transparent glass lets you see the realistic flame effect from any angle,so enjoy the visual experience and warmth of this fireplace stove",
164 |       ],
165 |       [
166 |         " Flame Speed & Brightness are Adjusted:Flame effects can be separated from heat;The flame effect can be controlled independently without heating;Four color-changing flames that change depending on your mood,and the flame dimmer controls the brightness of the flame effect to help you set up when you do not need a heater.",
167 |       ],
168 |       [
169 |         " Safe and Overheat Protection:When the temperature reaches a critical level, the fireplace's overheating protection system will automatically turn off the heater to ensure the user's safety. Furnace bottom design air outlet, can effectively avoid the fuselage overheating and high temperature harm.",
170 |       ],
171 |       [
172 |         "Two-stage Temperature Control: Available in two temperature Settings, 500W and 1500W.In addition, the fireplace heater has a timing function so that you can save resources and have a warm room when you get home.",
173 |       ],
174 |     ],
175 |     Images: [
176 |       "https://m.media-amazon.com/images/I/81KE+K-CWeL._AC_SL1500_.jpg",
177 |       "https://m.media-amazon.com/images/I/711KQsmyxnL._AC_SL1500_.jpg",
178 |       "https://m.media-amazon.com/images/I/71tworL4csL._AC_SL1500_.jpg",
179 |       "https://m.media-amazon.com/images/I/716ZDCGA6AL._AC_SL1500_.jpg",
180 |       "https://m.media-amazon.com/images/I/81fPAjbBp0L._AC_SL1500_.jpg",
181 |       "https://m.media-amazon.com/images/I/71fCf35XziL._AC_SL1500_.jpg",
182 |     ],
183 |   },
184 |   {
185 |     id: "5",
186 |     Title:
187 |       "Electric Fireplace Heater Portable Electric Fireplace Heater Indoor,Dark Green",
188 |     Color: " Dark Green",
189 |     Price: "189.99$",
190 |     Brand: "Xbeauty",
191 |     PowerSource: "Corded Electric",
192 |     ProductDimensions: '10.7"D x 23.5"W x 24.32"H',
193 |     Material: "Alloy Steel, Glass",
194 |     FinishType: "Stainless Steel",
195 |     InstallationType: "Freestanding",
196 |     Heat_Output: "5100 British Thermal Units",
197 |     Special_Feature: "Portable",
198 |     Style: "Vintage",
199 |     Room_Type: "	Office, Kitchen",
200 | 
201 |     detail: [
202 |       [
203 |         "Vintage Fireplace:Classic retro style,original medieval church gate design, Strong Steel Structure. When the cold sets in, there's no better feeling than relaxing by your fireplace, whose efficient 5,100 BTU heat output keeps you warm all winter.",
204 |       ],
205 |       [
206 |         "Portable Fireplace: It's only 23.46in*10.67in*24.25in, which means it's very portable. Adults can move easily.The electric fireplace heater suitable for many occasions, whether it is a office, a restaurant or a family.",
207 |       ],
208 |       [
209 |         " Realistic Flame Vision:The fire effect of the fireplace heater aesthetically surpasses real flames,the atmosphere created by the combination of bright flames and logs is unparalleled, 3 transparent glass lets you see the realistic flame effect from any angle,so enjoy the visual experience and warmth of this fireplace stove",
210 |       ],
211 |       [
212 |         " Flame Speed & Brightness are Adjusted:Flame effects can be separated from heat;The flame effect can be controlled independently without heating;Four color-changing flames that change depending on your mood,and the flame dimmer controls the brightness of the flame effect to help you set up when you do not need a heater.",
213 |       ],
214 |       [
215 |         " Safe and Overheat Protection:When the temperature reaches a critical level, the fireplace's overheating protection system will automatically turn off the heater to ensure the user's safety. Furnace bottom design air outlet, can effectively avoid the fuselage overheating and high temperature harm.",
216 |       ],
217 |     ],
218 |     Images: [
219 |       "https://m.media-amazon.com/images/I/71k53tPxvjL._AC_SL1500_.jpg",
220 |       "https://m.media-amazon.com/images/I/71UsmHN9kNL._AC_SL1500_.jpg",
221 |       "https://m.media-amazon.com/images/I/71wI6BxvaLL._AC_SL1500_.jpg",
222 |       "https://m.media-amazon.com/images/I/71kVrKi7gXL._AC_SL1500_.jpg",
223 |       "https://m.media-amazon.com/images/I/71BJskqQw9L._AC_SL1500_.jpg",
224 |       "https://m.media-amazon.com/images/I/81mTDN71OAL._AC_SL1500_.jpg",
225 |       "https://m.media-amazon.com/images/I/81RfKm0cN0L._AC_SL1500_.jpg",
226 |     ],
227 |   },
228 |   {
229 |     id: "6",
230 |     Title:
231 |       "Electric Fireplace Heater Portable Electric Fireplace Heater Indoor,Gray",
232 |     Color: "Gray",
233 |     Price: "189.99$",
234 |     Brand: "Xbeauty",
235 |     PowerSource: "Corded Electric",
236 |     ProductDimensions: '10.7"D x 23.5"W x 24.3"H',
237 |     Material: "Alloy Steel, Glass",
238 |     FinishType: "",
239 |     InstallationType: "Freestanding",
240 |     Heat_Output: "5100 British Thermal Units",
241 |     Special_Feature: "Multicolor Flame, Portable, Adjustable Flame",
242 |     Style: "Classic",
243 |     Room_Type: "Office, Kitchen",
244 | 
245 |     detail: [
246 |       [
247 |         "Vintage Fireplace:Classic retro style,original medieval church gate design, Strong Steel Structure. When the cold sets in, there's no better feeling than relaxing by your fireplace, whose efficient 5,100 BTU heat output keeps you warm all winter.",
248 |       ],
249 |       [
250 |         "Portable Fireplace: It's only 23.46in*10.67in*24.25in, which means it's very portable. Adults can move easily.The electric fireplace heater suitable for many occasions, whether it is a office, a restaurant or a family.",
251 |       ],
252 |       [
253 |         " Realistic Flame Vision:The fire effect of the fireplace heater aesthetically surpasses real flames,the atmosphere created by the combination of bright flames and logs is unparalleled, 3 transparent glass lets you see the realistic flame effect from any angle,so enjoy the visual experience and warmth of this fireplace stove",
254 |       ],
255 |       [
256 |         " Flame Speed & Brightness are Adjusted:Flame effects can be separated from heat;The flame effect can be controlled independently without heating;Four color-changing flames that change depending on your mood,and the flame dimmer controls the brightness of the flame effect to help you set up when you do not need a heater.",
257 |       ],
258 |       [
259 |         " Safe and Overheat Protection:When the temperature reaches a critical level, the fireplace's overheating protection system will automatically turn off the heater to ensure the user's safety. Furnace bottom design air outlet, can effectively avoid the fuselage overheating and high temperature harm.",
260 |       ],
261 |     ],
262 |     Images: [
263 |       "https://m.media-amazon.com/images/I/81TvopRtZjL._AC_SL1500_.jpg",
264 |       "https://m.media-amazon.com/images/I/8133JGreCUL._AC_SL1500_.jpg",
265 |       "https://m.media-amazon.com/images/I/81BLu75RNjL._AC_SL1500_.jpg",
266 |       "https://m.media-amazon.com/images/I/71KEQjcutDL._AC_SL1500_.jpg",
267 |       "https://m.media-amazon.com/images/I/71mjeK2ZXZL._AC_SL1500_.jpg",
268 |       "https://m.media-amazon.com/images/I/81kdCtPUz7L._AC_SL1500_.jpg",
269 |       "https://m.media-amazon.com/images/I/71wI6BxvaLL._AC_SL1500_.jpg",
270 |       "https://m.media-amazon.com/images/I/8134lonZzBL._AC_SL1500_.jpg",
271 |     ],
272 |   },
273 | ];
274 | 
275 | export default products;
276 | 


--------------------------------------------------------------------------------