drfeely.com/app/views/components/Books.tsx

import Card from "@/components/Card";
import bookCover from "@/public/content/acu_book.jpg";
import { default as Image } from "next-image-export-optimizer";

const Books = () => {
  const titleStyle = "font-bold";
  const yearStyle = "italic";
  const publisherStyle = "italic";
  const pagesStyle = "italic";
  const authorStyle = "";
  return (
    <div>
      <h2>Books</h2>
      <div className="flex flex-col gap-6">
        <Card>
          <div className="flex flex-col gap-6 md:flex-row">
            <Image
              src={bookCover}
              alt="YNSA Principles and Practice cover"
              className=" w-48 self-center rounded-lg md:h-56 md:w-auto"
            />
            <div>
              <div className={titleStyle}>
                Yamamoto New Scalp Acupuncture (YNSA) Principles and Practice
              </div>
              <div className={authorStyle}>Richard A. Feely, DO</div>
              <div className={yearStyle}>2006</div>
              <div className={publisherStyle}>Theime</div>
              <div className={pagesStyle}>139 pgs.</div>
              <hr className="my-2" />
              <div>Second Edition, 2011, 158 pgs.</div>
            </div>
          </div>
        </Card>
        <Card>
          <div className={titleStyle}>
            Clinical Cranial Osteopathy: Selected Readings
          </div>
          <div className={authorStyle}>Richard A. Feely, DO</div>
          <div className={yearStyle}>1998</div>
          <div className={publisherStyle}>The Cranial Academy</div>
          <div className={pagesStyle}>268 pgs.</div>
        </Card>
      </div>
    </div>
  );
};

export default Books;