init pole elements collection

client/src/pages/index.astro

@@ -1,11 +1,51 @@
 ---
-import Welcome from '../components/Welcome.astro';
+// Import necessary components and utilities
 import Layout from '../layouts/Layout.astro';
+import { getCollection } from 'astro:content';
+import MarkdownComponent from "../components/MardownContent.astro";
 
-// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
-// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
+// Fetch all posts from Strapi using Astro's content collection
+const strapiPoleElements = await getCollection("strapiPoleElementsLoader");
+// Get Strapi URL from environment variables with fallback to localhost
+const BASE_URL = await import.meta.env.STRAPI_URL || "http://localhost:1337";
+
+// Helper function to handle media URLs from Strapi
+function getStrapiMedia(url: string | null) {
+  if (url == null) return null;
+  // Return as-is if it's a data URL (base64)
+  if (url.startsWith("data:")) return url;
+  // Return as-is if it's an absolute URL
+  if (url.startsWith("http") || url.startsWith("//")) return url;
+  // Prepend BASE_URL for relative URLs
+  return `${BASE_URL}${url}`;
+}
 ---
 
 <Layout>
-	<Welcome />
-</Layout>
+  <div class="container mx-auto p-4">
+  <!-- Main heading -->
+	<h1 class="text-3xl font-bold mb-8">Hello Strapi 5 and Astro 5 World</h1>
+	<!-- Responsive grid layout using Tailwind CSS -->
+	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+		{/* Map through posts and create article cards */}
+		{strapiPoleElements.map((post) => (
+			<article class="bg-white rounded-lg shadow-lg overflow-hidden">
+				{/* Post cover image */}
+				<img 
+					src={getStrapiMedia(post.data.mainImage.url)} 
+					alt={post.data.mainImage.alternativeText} 
+					class="w-full h-48 object-cover"
+				/>
+				{/* Post content container */}
+				<div class="p-4">
+					<h2 class="text-xl font-bold mb-2">{post.data.name}</h2>
+					<MarkdownComponent content={post.data.description} class="text-gray-600 mb-4"/>
+					<div class="text-sm text-gray-500">
+						Published: {new Date(post.data.publishedAt).toLocaleDateString()}
+					</div>
+				</div>
+			</article>
+		))}
+	</div>
+</div>
+</Layout>