hd-awesome-app/src/pages/Home.jsx

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 (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-6 text-center">Our Products</h1>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        {products.map((product) => (
          <div
            key={product.id}
            className="border border-gray-200 rounded-lg shadow-md p-4 bg-white"
          >
            <img
              src={product.image}
              alt={product.title}
              className="w-full h-40 object-cover rounded-md mb-4"
            />
            <h2 className="text-lg font-semibold mb-2">{product.title}</h2>
            <p className="text-sm text-gray-600 mb-4">{product.description}</p>
            <button className="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600">
              View Details
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Home;