import Container from 'components/BlogContainer'
import Image from 'next/image'
import Link from 'next/link'

function MorePosts() {
  return (
    <div>
      <div className="bg-stone-100 py-5">
        <Container>
          <h1 className="pb-1 text-center text-xl font-bold leading-tight tracking-tighter text-stone-900 md:text-left md:text-4xl md:leading-none lg:text-4xl">
            More posts
          </h1>
          <p className="text-base">Monthly Release. Products. Promos</p>
        </Container>
      </div>

      <div className="mb-20 grid grid-cols-3 gap-10">
        <div className="card rounded-sm border pb-0">
          <div className="mb-0 bg-stone-100">
            <Image
              alt="alternative text here"
              src="/images/IMG_8445-2.jpg"
              className="aspect-[3/2]"
              width={720}
              height={300}
            />
          </div>

          <div className="px-8 py-5">
            <div className="pb-5">
              <div className="">
                <Link href="#">
                  <h3 className="pb-1 font-sans text-3xl font-light text-gray-900 hover:underline">
                    Judulnya di sini
                  </h3>
                  <div className="font-mono text-stone-500 text-xs">
                    Date: 02 November 2022
                  </div>
                </Link>
              </div>
            </div>

            <div className="pb-5">
              <p className="text-stone-500 text-base">
                Drinking vinegar waistcoat four dollar toast raclette vinyl.
                Fanny pack quinoa tbh fit cornhole, post-ironic schlitz. Keytar
                four loko plaid organic, yr cred narwhal tacos polaroid
                cold-pressed forage stumptown trust fund.
              </p>
            </div>
            <div className="font-mono text-xs hover:underline">
              <Link href="/">Read more</Link>
            </div>
          </div>
        </div>
        <div className="card rounded-sm border pb-0">
          <div className="mb-0 bg-stone-100">
            <Image
              alt="alternative text here"
              src="/images/IMG_8445-2.jpg"
              className="aspect-[3/2]"
              width={720}
              height={300}
            />
          </div>

          <div className="px-8 py-5">
            <div className="pb-5">
              <div className="">
                <Link href="#">
                  <h3 className="pb-1 font-sans text-3xl font-light text-gray-900 hover:underline">
                    Judulnya di sini
                  </h3>
                  <div className="font-mono text-stone-500 text-xs">
                    Date: 02 November 2022
                  </div>
                </Link>
              </div>
            </div>

            <div className="pb-5">
              <p className="text-stone-500 text-base">
                Drinking vinegar waistcoat four dollar toast raclette vinyl.
                Fanny pack quinoa tbh fit cornhole, post-ironic schlitz. Keytar
                four loko plaid organic, yr cred narwhal tacos polaroid
                cold-pressed forage stumptown trust fund.
              </p>
            </div>
            <div className="font-mono text-xs hover:underline">
              <Link href="/">Read more</Link>
            </div>
          </div>
        </div>
        <div className="card rounded-sm border pb-0">
          <div className="mb-0 bg-stone-100">
            <Image
              alt="alternative text here"
              src="/images/IMG_8445-2.jpg"
              className="aspect-[3/2]"
              width={720}
              height={300}
            />
          </div>

          <div className="px-8 py-5">
            <div className="pb-5">
              <div className="">
                <Link href="#">
                  <h3 className="pb-1 font-sans text-3xl font-light text-gray-900 hover:underline">
                    Judulnya di sini
                  </h3>
                  <div className="font-mono text-stone-500 text-xs">
                    Date: 02 November 2022
                  </div>
                </Link>
              </div>
            </div>

            <div className="pb-5">
              <p className="text-stone-500 text-base">
                Drinking vinegar waistcoat four dollar toast raclette vinyl.
                Fanny pack quinoa tbh fit cornhole, post-ironic schlitz. Keytar
                four loko plaid organic, yr cred narwhal tacos polaroid
                cold-pressed forage stumptown trust fund.
              </p>
            </div>
            <div className="font-mono text-xs hover:underline">
              <Link href="/">Read more</Link>
            </div>
          </div>
        </div>
      </div>

      <div className="py-10">
        <Link
          href="/pages/newsroom"
          className="rounded-md border border-yellow-600 bg-white px-4  py-2 text-base font-light text-yellow-600 duration-150 ease-in hover:border-yellow-500 hover:bg-yellow-500 hover:text-white"
        >
          Artikel lainnya
        </Link>
      </div>
    </div>
  )
}

export default MorePosts