Untitled

export default function FloorPlan() {
  return (
    <div className="grid grid-cols-11 gap-1 p-4 bg-gray-200">
      {/* Lot Boundary */}
      <div className="col-span-11 text-center font-bold">11.00m Lot Width</div>
      
      {/* Front Easement and Sidewalk */}
      <div className="col-span-11 text-center bg-gray-400 p-2">1.00m Sidewalk</div>
      <div className="col-span-11 text-center bg-green-400 p-2">3.00m Front Easement (Yard)</div>
      
      {/* Buildable Area (House) */}
      <div className="col-span-2 bg-gray-300 p-4">2.00m Side Easement</div>
      <div className="col-span-7 grid grid-rows-4 gap-1 bg-white p-4 border">
        {/* Rooms */}
        <div className="row-span-1 bg-blue-300 p-2 text-center">Living Room</div>
        <div className="row-span-1 bg-yellow-300 p-2 text-center">Dining & Kitchen</div>
        <div className="row-span-1 grid grid-cols-2 gap-1">
          <div className="bg-red-300 p-2 text-center">Bedroom 1</div>
          <div className="bg-red-300 p-2 text-center">Bedroom 2</div>
        </div>
        <div className="row-span-1 grid grid-cols-2 gap-1">
          <div className="bg-gray-500 p-2 text-center">Bathroom</div>
          <div className="bg-gray-500 p-2 text-center">Bathroom</div>
        </div>
      </div>
      <div className="col-span-2 bg-gray-300 p-4">2.00m Side Easement</div>
      
      {/* Rear Easement */}
      <div className="col-span-11 text-center bg-green-400 p-2">2.00m Rear Easement (Yard)</div>
      <div className="col-span-11 text-center font-bold">13.00m Lot Depth</div>
    </div>
  );
}