About Me

askdjhaklfaklfjaklsfjalksjfkals

asfasfasfasljfhaksfjhaskfjhafhj

askdljaklsdjaslkdjalksdjkals

asdasdas dasdasdas dasdasd asdasd asd asd as das da s

`<template> <div class="pb-20"> <BlogHero />

<section class="container py-12 md:py-16 lg:py-20">
  <div class="mx-auto flex flex-col gap-10">
    <div class="text-center">
      <h2 class="font-heading text-3xl font-bold leading-[1.1] sm:text-3xl md:text-6xl">
        Latest Articles
      </h2>
      <p class="mt-4 text-muted-foreground sm:text-lg">
        Check out the most recent insights and tutorials.
      </p>
    </div>
    
    <div v-if="pending" class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      <!-- Skeletons for loading state -->
      <div v-for="i in 3" :key="i" class="rounded-lg border bg-card text-card-foreground shadow-sm h-[400px] animate-pulse">
        <div class="h-48 bg-muted rounded-t-lg"></div>
        <div class="p-4 space-y-3">
           <div class="h-4 w-1/3 bg-muted rounded"></div>
           <div class="h-6 w-3/4 bg-muted rounded"></div>
           <div class="h-4 w-full bg-muted rounded"></div>
        </div>
      </div>
    </div>

    <div v-else-if="error" class="text-center text-red-500">
      Failed to load blog posts.
    </div>

    <div v-else-if="posts?.data?.length" class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      <BlogCard v-for="post in posts.data" :key="post._id" :post="post" />
    </div>
    
    <div v-else class="text-center text-muted-foreground">
      No posts found.
    </div>

    <div class="flex justify-center">
      <NuxtLink href="/blog" class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background border border-input hover:bg-accent hover:text-accent-foreground h-11 px-8 group">
        View all articles
        <font-awesome-icon :icon="['fas', 'arrow-right']" class="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
      </NuxtLink>
    </div>
  </div>
</section>

</div> </template>

const { data: posts, pending, error } = await getPosts({ limit: 3 }) </script>