ch

src/pages/index.astro

@@ -1,85 +1,52 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import Card from '../components/Card.astro';
-import MainHeader from '../components/MainHeader.vue';
 import Footer from '../components/Footer.astro';
+const fetchData = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published');
+const dataJSON = await fetchData.json();
+const data = dataJSON.data;
+// const imageData = data.image;
+// const data = fetchDataJSON.data;
+// console.log()
 ---
 
-<Layout title="Welcome to Astro.">
-	<MainHeader />
+<Layout title="Barta News">
 	<main>
-		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
-		<p class="instructions">
-			To get started, open the directory <code>src/pages</code> in your project.<br />
-			<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
-		</p>
-		<ul role="list" class="link-card-grid">
-			<Card
-				href="https://docs.astro.build/"
-				title="Documentation"
-				body="Learn how Astro works and explore the official API docs."
-			/>
-			<Card
-				href="https://astro.build/integrations/"
-				title="Integrations"
-				body="Supercharge your project with new frameworks and libraries."
-			/>
-			<Card
-				href="https://astro.build/themes/"
-				title="Themes"
-				body="Explore a galaxy of community-built starter themes."
-			/>
-			<Card
-				href="https://astro.build/chat/"
-				title="Community"
-				body="Come say hi to our amazing Discord community. ❤️"
-			/>
-		</ul>
+		<section class="container mx-auto px-4">
+			<h1 class="text-4xl font-bold border-b-4 border-[#780A0A] my-16">Latest News</h1>
+				<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+					{data.map((items: {heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined;}) =>
+					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-6 place-content-between rounded-lg">
+						<div class="flex flex-col">
+							<a href={`/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a>
+							<h2 class="text-lg line-clamp-1">{items.title}</h2>
+							<img class="aspect-video	" src={`https://api7.siliconpin.com/assets/${items.img}`} alt=""/>
+							<div class="h-[100px] overflow-y-hidden">
+								<p id="" set:html={items.content}></p>		
+							</div>
+						</div>
+						<div class="flex justify-end">
+							<a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Read More</a>
+						</div>			
+					</div>
+					)}
+				</div>
+				<!-- <div class="flex flex-col">
+					{data.map((items: {heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined;}) =>
+					<div class="flex flex-col border-2 gap-6 p-6">
+						<h1 class="border-b-4 border-[#780a0a] text-2xl font-bold">{items.heading}</h1>
+						<h2 class="text-lg">{items.title}</h2>
+						<img src={`https://api7.siliconpin.com/assets/${items.img}`} alt=""/>
+					</div>
+					)}
+				</div> -->
+		</section>
 	</main>
 	<Footer />
 </Layout>
+<script is:inline>
 
+</script>
 <style>
-	main {
-		margin: auto;
-		padding: 1.5rem;
-		max-width: 60ch;
-	}
-	h1 {
-		font-size: 3rem;
-		font-weight: 800;
-		margin: 0;
-	}
-	.text-gradient {
-		background-image: var(--accent-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 400%;
-		background-position: 0%;
-	}
-	.instructions {
-		line-height: 1.6;
-		margin: 1rem 0;
-		border: 1px solid rgba(var(--accent), 25%);
-		background-color: white;
-		padding: 1rem;
-		border-radius: 0.4rem;
-	}
-	.instructions code {
-		font-size: 0.875em;
-		font-weight: bold;
-		background: rgba(var(--accent), 12%);
-		color: rgb(var(--accent));
-		border-radius: 4px;
-		padding: 0.3em 0.45em;
-	}
-	.instructions strong {
-		color: rgb(var(--accent));
-	}
-	.link-card-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-		gap: 1rem;
-		padding: 0;
-	}
+
 </style>