Cards

= daisy_card(css: "max-w-96 bg-base-100 shadow-xl") do |card|
  - card.with_top_figure css: "aspect-video", src: image_path("landscapes/beach.jpg")

  %p Such a beautiful beach!

  - card.with_actions(css: "mt-2 justify-end") do
    = daisy_button(css: "btn-primary") do
      Book Travel

- pics = ["beach", "forest", "mountain-river", "desert"]

.mt-8.grid.grid-cols-1.gap-4.lg:grid-cols-2.xl:grid-cols-4
  - pics.each.with_index do |pic, i|
    = daisy_card(title: pic.titleize, css: "max-w-96 bg-base-100 shadow-xl") do |card|
      - if i % 2 == 0
        - card.with_top_figure css: "aspect-video", src: image_path("landscapes/#{pic}.jpg")
      - else
        - card.with_bottom_figure css: "aspect-video", src: image_path("landscapes/#{pic}.jpg")

      %p Such a beautiful place!

      - card.with_actions(css: "mt-2 justify-end") do
        = daisy_button(css: "btn-primary") do
          Book Travel

.mt-8.space-y-6.md:space-y-0.md:flex.md:flex-row.md:gap-6
  = daisy_card(title: "Large Card", css: "max-w-96 bg-base-100 shadow-xl card-lg") do |card|
    :markdown
      This is a large card with larger text / padding. It provides extra space
      for content and is great for highlighting important information.

    - card.with_actions(css: "mt-2 justify-end") do
      = daisy_button(css: "btn-primary") do
        Learn More

  = daisy_card(title: "Normal Card", css: "max-w-96 bg-base-100 shadow-xl") do |card|
    :markdown
      This is a normal card with default padding. It provides ample space for
      content and is great for detailed information.

    - card.with_actions(css: "mt-2 justify-end") do
      = daisy_button(css: "btn-primary") do
        Learn More

  = daisy_card(title: "Small Card", css: "max-w-96 bg-base-100 shadow-xl card-sm") do |card|
    :markdown
      This is a small card with reduced padding. It's perfect for displaying
      information in a more condensed format.

    - card.with_actions(css: "mt-2 justify-end") do
      = daisy_button(css: "btn-primary btn-sm") do
        Learn More