<template>
  <div>
    <MlButton
      :pt="{
        root: { class: '' },
        outer: { class: 'bg-gradient-to-r from-green-300 to-red-400' },
        inner: { class: 'dark:bg-gradient-to-r bg-white' },
      }"
    >
      Let's talk
    </MlButton>

    <h1 class="text-3xl bg-black text-white">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt,
      laborum.
    </h1>
  </div>
</template>

<script>
const currentItems = ref([]);
const currentPage = ref(1);

const handlePaginatedItems = (items) => {
  currentItems.value = items;
};

const items = [
  {
    id: 1,
    title: "YourGold.cz",
    href: "YourGold.cz",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat",
  },
  {
    id: 2,
    title: "Web App Development",
    href: "Web App Development",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat",
  },
  {
    id: 3,
    title: "E-commerce",
    href: "E-commerce",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat",
  },
  {
    id: 4,
    title: "Hosting",
    href: "Hosting",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat",
  },
  {
    id: 5,
    title: "Development",
    href: "YourGol",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat",
  },
  {
    id: 6,
    title: "New Title 1",
    href: "new-href-1",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat",
  },
  {
    id: 7,
    title: "New Title 2",
    href: "new-href-2",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat",
  },
  {
    id: 8,
    title: "New Title 3",
    href: "new-href-3",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat",
  },
  {
    id: 9,
    title: "New Title 4",
    href: "new-href-4",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat",
  },
  {
    id: 10,
    title: "New Title 5",
    href: "new-href-5",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat",
  },
];
</script>
