hd-awesome-app/dist/pages/Home.js

A React project with professional components for e-commerce websites

import React from "react";
const Home = () => {
  // Sample product data
  const products = [{
    id: 1,
    title: "Product 1",
    image: "https://via.placeholder.com/150",
    description: "This is a description of Product 1."
  }, {
    id: 2,
    title: "Product 2",
    image: "https://via.placeholder.com/150",
    description: "This is a description of Product 2."
  }, {
    id: 3,
    title: "Product 3",
    image: "https://via.placeholder.com/150",
    description: "This is a description of Product 3."
  }, {
    id: 4,
    title: "Product 4",
    image: "https://via.placeholder.com/150",
    description: "This is a description of Product 4."
  }, {
    id: 5,
    title: "Product 5",
    image: "https://via.placeholder.com/150",
    description: "This is a description of Product 5."
  }, {
    id: 6,
    title: "Product 6",
    image: "https://via.placeholder.com/150",
    description: "This is a description of Product 6."
  }, {
    id: 7,
    title: "Product 7",
    image: "https://via.placeholder.com/150",
    description: "This is a description of Product 7."
  }, {
    id: 8,
    title: "Product 8",
    image: "https://via.placeholder.com/150",
    description: "This is a description of Product 8."
  }];
  return /*#__PURE__*/React.createElement("div", {
    className: "p-8"
  }, /*#__PURE__*/React.createElement("h1", {
    className: "text-2xl font-bold mb-6 text-center"
  }, "Our Products"), /*#__PURE__*/React.createElement("div", {
    className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"
  }, products.map(product => /*#__PURE__*/React.createElement("div", {
    key: product.id,
    className: "border border-gray-200 rounded-lg shadow-md p-4 bg-white"
  }, /*#__PURE__*/React.createElement("img", {
    src: product.image,
    alt: product.title,
    className: "w-full h-40 object-cover rounded-md mb-4"
  }), /*#__PURE__*/React.createElement("h2", {
    className: "text-lg font-semibold mb-2"
  }, product.title), /*#__PURE__*/React.createElement("p", {
    className: "text-sm text-gray-600 mb-4"
  }, product.description), /*#__PURE__*/React.createElement("button", {
    className: "w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600"
  }, "View Details")))));
};
export default Home;