From e59a1168ce7d261e0e421c0393246d67676ce3c7 Mon Sep 17 00:00:00 2001
From: dev sp <dev2@ns1.cicdhosting.com>
Date: Tue, 23 Jan 2024 08:15:50 +0000
Subject: [PATCH] change homepage desgine

---
 src/pages/[id].astro                |  1 +
 src/pages/bn/index.astro            | 61 +++++++++++++++++----------
 src/pages/bn/local/index.astro      | 63 ++++++++++++++++++----------
 src/pages/bn/national/index.astro   | 61 +++++++++++++++++----------
 src/pages/bn/politics/index.astro   | 61 +++++++++++++++++----------
 src/pages/bn/technology/index.astro | 61 +++++++++++++++++----------
 src/pages/index.astro               | 63 ++++++++++++++++++----------
 src/pages/local/index.astro         | 65 ++++++++++++++++++-----------
 src/pages/national/index.astro      | 65 ++++++++++++++++++-----------
 src/pages/politics/index.astro      | 65 ++++++++++++++++++-----------
 src/pages/technology/index.astro    | 65 ++++++++++++++++++-----------
 11 files changed, 401 insertions(+), 230 deletions(-)

diff --git a/src/pages/[id].astro b/src/pages/[id].astro
index c98f2c9..9ab0b7b 100644
--- a/src/pages/[id].astro
+++ b/src/pages/[id].astro
@@ -54,6 +54,7 @@ const items  = data.data[idx];
                 <p id="message3" class="text-justify text-red-700 mt-4" set:html={items.content}></p>
             </div>
         </section>
+        
     </main>
 </Layout>
 <script is:inline>
diff --git a/src/pages/bn/index.astro b/src/pages/bn/index.astro
index 7a48104..733d01d 100644
--- a/src/pages/bn/index.astro
+++ b/src/pages/bn/index.astro
@@ -32,33 +32,50 @@ const items = metaJSON.data[0];
 				<span class="text-[#780a0a] font-bold" id="pageName"></span>
 				<h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1>
 			</div>
-				<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; date_created : string | undefined;}) =>
-					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-6 place-content-between rounded-lg">
+			<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+				{data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
+					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
 						<div class="flex flex-col">
+							<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
 							<a href={`/bn/${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}?quality=50&format=jpeg`} alt={items.title} />
-							<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
-							<div class="h-[100px] overflow-y-hidden">
-								<p id="" set:html={items.content}></p>		
+							<div class=" overflow-y-hidden"> <!--h-[100px] -->
+								<h2 class="text-lg ">{items.title}</h2>    
+								<div>
+									<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
+										<form method="dialog">
+											<div class="float-right -mt-4 -mr-4">
+												<button class="text-xl bg-[#580a0a50] rounded-tl-full rounded-bl-full px-2 py-1 text-[#580a0a]" onclick={`document.getElementById('d-${items.id}').close()}`}>&#10008;</button>
+											</div>
+											<div class="flex flex-col md:flex-col">
+												<img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+												<h1 class="text-lg font-bold">{items.heading} </h1>
+												<h2 class="text-justify ">{items.in_brief}</h2>
+												<div class="flex flex-row place-content-between place-items-center">
+													<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit">
+														<a href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
+														<a href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>                  
+														<a href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
+														<a href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
+													</div>
+													<div class="border-b-4 border-[#780a0a] border-t rounded-xl shadow-xl">
+														<a class=" text-[#780a0a] font-bold rounded-lg py-2 px-6" href={`/bn/${items.slug}`}>Details</a>	
+													</div>
+												</div>
+											</div>
+										</form>
+									</dialog>
+								</div>
 							</div>
 						</div>
-						<div class="flex justify-end">
-							<a href={`/bn/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Read More</a>
-						</div>			
+						<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
+						<div class="flex flex-row place-content-between">
+							<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
+							<a href={`/bn/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</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}?quality=50&format=jpeg`} alt=""/>
-					</div>
-					)}
-				</div> -->
+				)}
+				<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
+			</div>
 		</section>
 	</main>
 </LayoutBN>
diff --git a/src/pages/bn/local/index.astro b/src/pages/bn/local/index.astro
index eda3a90..7c73f5f 100644
--- a/src/pages/bn/local/index.astro
+++ b/src/pages/bn/local/index.astro
@@ -31,33 +31,50 @@ const items = metaJSON.data[0];
 				<span class="text-[#780a0a] font-bold" id="pageName"></span>
 				<h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1>
 			</div>
-				<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; date_created : string | undefined;}) =>
-					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-6 place-content-between rounded-lg">
+			<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+				{data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
+					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
 						<div class="flex flex-col">
-							<a href={`/bn/${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}?quality=50&format=jpeg`} alt={items.title}/>
-							<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
-							<div class="h-[100px] overflow-y-hidden">
-								<p id="" set:html={items.content}></p>		
+							<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+							<a href={`/bn/local/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a>
+							<div class=" overflow-y-hidden"> <!--h-[100px] -->
+								<h2 class="text-lg ">{items.title}</h2>    
+								<div>
+									<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
+										<form method="dialog">
+											<div class="float-right -mt-4 -mr-4">
+												<button class="text-xl bg-[#580a0a50] rounded-tl-full rounded-bl-full px-2 py-1 text-[#580a0a]" onclick={`document.getElementById('d-${items.id}').close()}`}>&#10008;</button>
+											</div>
+											<div class="flex flex-col md:flex-col">
+												<img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+												<h1 class="text-lg font-bold">{items.heading} </h1>
+												<h2 class="text-justify ">{items.in_brief}</h2>
+												<div class="flex flex-row place-content-between place-items-center">
+													<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit">
+														<a href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
+														<a href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>                  
+														<a href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
+														<a href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
+													</div>
+													<div class="border-b-4 border-[#780a0a] border-t rounded-xl shadow-xl">
+														<a class=" text-[#780a0a] font-bold rounded-lg py-2 px-6" href={`/bn/local/${items.slug}`}>Details</a>	
+													</div>
+												</div>
+											</div>
+										</form>
+									</dialog>
+								</div>
 							</div>
 						</div>
-						<div class="flex justify-end">
-							<a href={`/bn/local/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Read More</a>
-						</div>			
+						<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
+						<div class="flex flex-row place-content-between">
+							<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
+							<a href={`/bn/local/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</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}?quality=50&format=jpeg`} alt=""/>
-					</div>
-					)}
-				</div> -->
+				)}
+				<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
+			</div>
 		</section>
 	</main>
 </LayoutBN>
diff --git a/src/pages/bn/national/index.astro b/src/pages/bn/national/index.astro
index 76b53bf..94ab3d2 100644
--- a/src/pages/bn/national/index.astro
+++ b/src/pages/bn/national/index.astro
@@ -31,33 +31,50 @@ const items = metaJSON.data[0];
 				<span class="text-[#780a0a] font-bold" id="pageName"></span>
 				<h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1>
 			</div>
-				<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; date_created: string | undefined;}) =>
-					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-6 place-content-between rounded-lg">
+			<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+				{data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
+					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
 						<div class="flex flex-col">
+							<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
 							<a href={`/bn/national/${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}?quality=50&format=jpeg`} alt={items.title}/>
-							<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
-							<div class="h-[100px] overflow-y-hidden">
-								<p id="" set:html={items.content}></p>		
+							<div class=" overflow-y-hidden"> <!--h-[100px] -->
+								<h2 class="text-lg ">{items.title}</h2>    
+								<div>
+									<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
+										<form method="dialog">
+											<div class="float-right -mt-4 -mr-4">
+												<button class="text-xl bg-[#580a0a50] rounded-tl-full rounded-bl-full px-2 py-1 text-[#580a0a]" onclick={`document.getElementById('d-${items.id}').close()}`}>&#10008;</button>
+											</div>
+											<div class="flex flex-col md:flex-col">
+												<img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+												<h1 class="text-lg font-bold">{items.heading} </h1>
+												<h2 class="text-justify ">{items.in_brief}</h2>
+												<div class="flex flex-row place-content-between place-items-center">
+													<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit">
+														<a href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
+														<a href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>                  
+														<a href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
+														<a href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
+													</div>
+													<div class="border-b-4 border-[#780a0a] border-t rounded-xl shadow-xl">
+														<a class=" text-[#780a0a] font-bold rounded-lg py-2 px-6" href={`/bn/national/${items.slug}`}>Details</a>	
+													</div>
+												</div>
+											</div>
+										</form>
+									</dialog>
+								</div>
 							</div>
 						</div>
-						<div class="flex justify-end">
-							<a href={`/bn/national/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Read More</a>
-						</div>			
+						<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
+						<div class="flex flex-row place-content-between">
+							<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
+							<a href={`/bn/national/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</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}?quality=50&format=jpeg`} alt=""/>
-					</div>
-					)}
-				</div> -->
+				)}
+				<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
+			</div>
 		</section>
 	</main>
 </LayoutBN>
diff --git a/src/pages/bn/politics/index.astro b/src/pages/bn/politics/index.astro
index ee5e3b9..b39684b 100644
--- a/src/pages/bn/politics/index.astro
+++ b/src/pages/bn/politics/index.astro
@@ -32,33 +32,50 @@ const items = metaJSON.data[0];
 				<span class="text-[#780a0a] font-bold" id="pageName"></span>
 				<h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1>
 			</div>
-				<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; date_created : string | undefined;}) =>
-					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-6 place-content-between rounded-lg">
+			<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+				{data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
+					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
 						<div class="flex flex-col">
+							<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
 							<a href={`/bn/politics/${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}?quality=50&format=jpeg`} alt={items.title}/>
-							<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
-							<div class="h-[100px] overflow-y-hidden">
-								<p id="" set:html={items.content}></p>		
+							<div class=" overflow-y-hidden"> <!--h-[100px] -->
+								<h2 class="text-lg ">{items.title}</h2>    
+								<div>
+									<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
+										<form method="dialog">
+											<div class="float-right -mt-4 -mr-4">
+												<button class="text-xl bg-[#580a0a50] rounded-tl-full rounded-bl-full px-2 py-1 text-[#580a0a]" onclick={`document.getElementById('d-${items.id}').close()}`}>&#10008;</button>
+											</div>
+											<div class="flex flex-col md:flex-col">
+												<img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+												<h1 class="text-lg font-bold">{items.heading} </h1>
+												<h2 class="text-justify ">{items.in_brief}</h2>
+												<div class="flex flex-row place-content-between place-items-center">
+													<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit">
+														<a href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
+														<a href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>                  
+														<a href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
+														<a href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
+													</div>
+													<div class="border-b-4 border-[#780a0a] border-t rounded-xl shadow-xl">
+														<a class=" text-[#780a0a] font-bold rounded-lg py-2 px-6" href={`/bn/politics/${items.slug}`}>Details</a>	
+													</div>
+												</div>
+											</div>
+										</form>
+									</dialog>
+								</div>
 							</div>
 						</div>
-						<div class="flex justify-end">
-							<a href={`/bn/politics/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Read More</a>
-						</div>			
+						<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
+						<div class="flex flex-row place-content-between">
+							<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
+							<a href={`/bn/politics/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</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}?quality=50&format=jpeg`} alt=""/>
-					</div>
-					)}
-				</div> -->
+				)}
+				<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
+			</div>
 		</section>
 	</main>
 </LayoutBN>
diff --git a/src/pages/bn/technology/index.astro b/src/pages/bn/technology/index.astro
index 3a47d2c..a0997da 100644
--- a/src/pages/bn/technology/index.astro
+++ b/src/pages/bn/technology/index.astro
@@ -32,33 +32,50 @@ const items = metaJSON.data[0];
 				<span class="text-[#780a0a] font-bold" id="pageName"></span>
 				<h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1>
 			</div>
-				<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; date_created: string | undefined;}) =>
-					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-6 place-content-between rounded-lg">
+			<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+				{data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
+					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
 						<div class="flex flex-col">
+							<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
 							<a href={`/bn/technology/${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}?quality=50&format=jpeg`} alt={items.title} />
-							<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
-							<div class="h-[100px] overflow-y-hidden">
-								<p id="" set:html={items.content}></p>		
+							<div class=" overflow-y-hidden"> <!--h-[100px] -->
+								<h2 class="text-lg ">{items.title}</h2>    
+								<div>
+									<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
+										<form method="dialog">
+											<div class="float-right -mt-4 -mr-4">
+												<button class="text-xl bg-[#580a0a50] rounded-tl-full rounded-bl-full px-2 py-1 text-[#580a0a]" onclick={`document.getElementById('d-${items.id}').close()}`}>&#10008;</button>
+											</div>
+											<div class="flex flex-col md:flex-col">
+												<img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+												<h1 class="text-lg font-bold">{items.heading} </h1>
+												<h2 class="text-justify ">{items.in_brief}</h2>
+												<div class="flex flex-row place-content-between place-items-center">
+													<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit">
+														<a href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
+														<a href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>                  
+														<a href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
+														<a href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
+													</div>
+													<div class="border-b-4 border-[#780a0a] border-t rounded-xl shadow-xl">
+														<a class=" text-[#780a0a] font-bold rounded-lg py-2 px-6" href={`/bn/technology/${items.slug}`}>Details</a>	
+													</div>
+												</div>
+											</div>
+										</form>
+									</dialog>
+								</div>
 							</div>
 						</div>
-						<div class="flex justify-end">
-							<a href={`/bn/technology/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Read More</a>
-						</div>			
+						<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
+						<div class="flex flex-row place-content-between">
+							<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
+							<a href={`/bn/technology/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</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}?quality=50&format=jpeg`} alt=""/>
-					</div>
-					)}
-				</div> -->
+				)}
+				<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
+			</div>
 		</section>
 	</main>
 </LayoutBN>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 16b15d5..97fb800 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -30,34 +30,51 @@ const items = metaJSON.data[0];
 	<main>
 		<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; date_created : string | undefined;}) =>
-					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-6 place-content-between rounded-lg">
+			<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+				{data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
+					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
 						<div class="flex flex-col">
+							<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
 							<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}?quality=50&format=jpeg`} alt={items.title} />
-							<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
-							<div class="h-[100px] overflow-y-hidden">
-								<p id="" set:html={items.content}></p>		
+							<div class=" overflow-y-hidden"> <!--h-[100px] -->
+								<h2 class="text-lg ">{items.title}</h2>    
+								<div>
+									<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
+										<form method="dialog">
+											<div class="float-right -mt-4 -mr-4">
+												<button class="text-xl bg-[#580a0a50] rounded-tl-full rounded-bl-full px-2 py-1 text-[#580a0a]" onclick={`document.getElementById('d-${items.id}').close()}`}>&#10008;</button>
+											</div>
+											<div class="flex flex-col md:flex-col">
+												<img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+												<h1 class="text-lg font-bold">{items.heading} </h1>
+												<h2 class="text-justify ">{items.in_brief}</h2>
+												<div class="flex flex-row place-content-between place-items-center">
+													<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit">
+														<a href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
+														<a href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>                  
+														<a href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
+														<a href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
+													</div>
+													<div class="border-b-4 border-[#780a0a] border-t rounded-xl shadow-xl">
+														<a class=" text-[#780a0a] font-bold rounded-lg py-2 px-6" href={`/${items.slug}`}>Details</a>	
+													</div>
+												</div>
+											</div>
+										</form>
+									</dialog>
+								</div>
 							</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>			
+						<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
+						<div class="flex flex-row place-content-between">
+							<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
+							<a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</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}?quality=50&format=jpeg`} alt=""/>
-					</div>
-					)}
-				</div> -->
-		</section>
+				)}
+				<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
+			</div>
+		</section>		
 	</main>
 </Layout>
 <script is:inline>
diff --git a/src/pages/local/index.astro b/src/pages/local/index.astro
index 1d8bb38..fc686b5 100644
--- a/src/pages/local/index.astro
+++ b/src/pages/local/index.astro
@@ -32,34 +32,51 @@ const items = metaJSON.data[0];
 				<span class="text-[#780a0a] font-bold" id="pageName"></span>
 				<h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1>
 			</div>
-				<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; date_created : string | undefined;}) =>
-					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-6 place-content-between rounded-lg">
+			<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+				{data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
+					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
 						<div class="flex flex-col">
-							<a href={`/local${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}?quality=50&format=jpeg`} alt={items.title} />
-							<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
-							<div class="h-[100px] overflow-y-hidden">
-								<p id="" set:html={items.content}></p>		
+							<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+							<a href={`/local/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a>
+							<div class=" overflow-y-hidden"> <!--h-[100px] -->
+								<h2 class="text-lg ">{items.title}</h2>    
+								<div>
+									<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
+										<form method="dialog">
+											<div class="float-right -mt-4 -mr-4">
+												<button class="text-xl bg-[#580a0a50] rounded-tl-full rounded-bl-full px-2 py-1 text-[#580a0a]" onclick={`document.getElementById('d-${items.id}').close()}`}>&#10008;</button>
+											</div>
+											<div class="flex flex-col md:flex-col">
+												<img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+												<h1 class="text-lg font-bold">{items.heading} </h1>
+												<h2 class="text-justify ">{items.in_brief}</h2>
+												<div class="flex flex-row place-content-between place-items-center">
+													<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit">
+														<a href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
+														<a href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>                  
+														<a href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
+														<a href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
+													</div>
+													<div class="border-b-4 border-[#780a0a] border-t rounded-xl shadow-xl">
+														<a class=" text-[#780a0a] font-bold rounded-lg py-2 px-6" href={`/local/${items.slug}`}>Details</a>	
+													</div>
+												</div>
+											</div>
+										</form>
+									</dialog>
+								</div>
 							</div>
 						</div>
-						<div class="flex justify-end">
-							<a href={`/local/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Read More</a>
-						</div>			
+						<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
+						<div class="flex flex-row place-content-between">
+							<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
+							<a href={`/local/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</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}?quality=50&format=jpeg`} alt=""/>
-					</div>
-					)}
-				</div> -->
-		</section>
+				)}
+				<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
+			</div>
+		</section>	
 	</main>
 </Layout>
 <script is:inline>
diff --git a/src/pages/national/index.astro b/src/pages/national/index.astro
index 74cda97..f88b169 100644
--- a/src/pages/national/index.astro
+++ b/src/pages/national/index.astro
@@ -32,34 +32,51 @@ const items = metaJSON.data[0];
 				<span class="text-[#780a0a] font-bold" id="pageName"></span>
 				<h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1>
 			</div>
-				<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; date_created : string | undefined}) =>
-					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-6 place-content-between rounded-lg">
+			<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+				{data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
+					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
 						<div class="flex flex-col">
-							<a href={`/national${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}?quality=50&format=jpeg`} alt={items.title} />
-							<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
-							<div class="h-[100px] overflow-y-hidden">
-								<p id="" set:html={items.content}></p>		
+							<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+							<a href={`/national/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a>
+							<div class=" overflow-y-hidden"> <!--h-[100px] -->
+								<h2 class="text-lg ">{items.title}</h2>    
+								<div>
+									<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
+										<form method="dialog">
+											<div class="float-right -mt-4 -mr-4">
+												<button class="text-xl bg-[#580a0a50] rounded-tl-full rounded-bl-full px-2 py-1 text-[#580a0a]" onclick={`document.getElementById('d-${items.id}').close()}`}>&#10008;</button>
+											</div>
+											<div class="flex flex-col md:flex-col">
+												<img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+												<h1 class="text-lg font-bold">{items.heading} </h1>
+												<h2 class="text-justify ">{items.in_brief}</h2>
+												<div class="flex flex-row place-content-between place-items-center">
+													<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit">
+														<a href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
+														<a href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>                  
+														<a href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
+														<a href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
+													</div>
+													<div class="border-b-4 border-[#780a0a] border-t rounded-xl shadow-xl">
+														<a class=" text-[#780a0a] font-bold rounded-lg py-2 px-6" href={`/national/${items.slug}`}>Details</a>	
+													</div>
+												</div>
+											</div>
+										</form>
+									</dialog>
+								</div>
 							</div>
 						</div>
-						<div class="flex justify-end">
-							<a href={`/national/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Read More</a>
-						</div>			
+						<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
+						<div class="flex flex-row place-content-between">
+							<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
+							<a href={`/national/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</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}?quality=50&format=jpeg`} alt=""/>
-					</div>
-					)}
-				</div> -->
-		</section>
+				)}
+				<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
+			</div>
+		</section>	
 	</main>
 </Layout>
 <script is:inline>
diff --git a/src/pages/politics/index.astro b/src/pages/politics/index.astro
index d2b9747..5e96102 100644
--- a/src/pages/politics/index.astro
+++ b/src/pages/politics/index.astro
@@ -32,34 +32,51 @@ const items = metaJSON.data[0];
 				<span class="text-[#780a0a] font-bold" id="pageName"></span>
 				<h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1>
 			</div>
-				<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; date_created : string | undefined;}) =>
-					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-6 place-content-between rounded-lg">
+			<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+				{data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
+					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
 						<div class="flex flex-col">
-							<a href={`/politics${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}?quality=50&format=jpeg`} alt={items.title} />
-							<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
-							<div class="h-[100px] overflow-y-hidden">
-								<p id="" set:html={items.content}></p>		
+							<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+							<a href={`/politics/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a>
+							<div class=" overflow-y-hidden"> <!--h-[100px] -->
+								<h2 class="text-lg ">{items.title}</h2>    
+								<div>
+									<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
+										<form method="dialog">
+											<div class="float-right -mt-4 -mr-4">
+												<button class="text-xl bg-[#580a0a50] rounded-tl-full rounded-bl-full px-2 py-1 text-[#580a0a]" onclick={`document.getElementById('d-${items.id}').close()}`}>&#10008;</button>
+											</div>
+											<div class="flex flex-col md:flex-col">
+												<img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+												<h1 class="text-lg font-bold">{items.heading} </h1>
+												<h2 class="text-justify ">{items.in_brief}</h2>
+												<div class="flex flex-row place-content-between place-items-center">
+													<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit">
+														<a href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
+														<a href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>                  
+														<a href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
+														<a href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
+													</div>
+													<div class="border-b-4 border-[#780a0a] border-t rounded-xl shadow-xl">
+														<a class=" text-[#780a0a] font-bold rounded-lg py-2 px-6" href={`/politics/${items.slug}`}>Details</a>	
+													</div>
+												</div>
+											</div>
+										</form>
+									</dialog>
+								</div>
 							</div>
 						</div>
-						<div class="flex justify-end">
-							<a href={`/politics/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Read More</a>
-						</div>			
+						<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
+						<div class="flex flex-row place-content-between">
+							<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
+							<a href={`/politics/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</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}?quality=50&format=jpeg`} alt=""/>
-					</div>
-					)}
-				</div> -->
-		</section>
+				)}
+				<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
+			</div>
+		</section>	
 	</main>
 </Layout>
 <script is:inline>
diff --git a/src/pages/technology/index.astro b/src/pages/technology/index.astro
index 7efc00e..73c1ba7 100644
--- a/src/pages/technology/index.astro
+++ b/src/pages/technology/index.astro
@@ -32,34 +32,51 @@ const items = metaJSON.data[0];
 				<span class="text-[#780a0a] font-bold" id="pageName"></span>
 				<h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1>
 			</div>
-				<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; date_created : string | undefined;}) =>
-					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-6 place-content-between rounded-lg">
+			<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+				{data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
+					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
 						<div class="flex flex-col">
-							<a href={`/technology${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}?quality=50&format=jpeg`} alt={items.title} />
-							<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
-							<div class="h-[100px] overflow-y-hidden">
-								<p id="" set:html={items.content}></p>		
+							<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+							<a href={`/technology/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a>
+							<div class=" overflow-y-hidden"> <!--h-[100px] -->
+								<h2 class="text-lg ">{items.title}</h2>    
+								<div>
+									<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
+										<form method="dialog">
+											<div class="float-right -mt-4 -mr-4">
+												<button class="text-xl bg-[#580a0a50] rounded-tl-full rounded-bl-full px-2 py-1 text-[#580a0a]" onclick={`document.getElementById('d-${items.id}').close()}`}>&#10008;</button>
+											</div>
+											<div class="flex flex-col md:flex-col">
+												<img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+												<h1 class="text-lg font-bold">{items.heading} </h1>
+												<h2 class="text-justify ">{items.in_brief}</h2>
+												<div class="flex flex-row place-content-between place-items-center">
+													<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit">
+														<a href={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
+														<a href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>                  
+														<a href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
+														<a href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
+													</div>
+													<div class="border-b-4 border-[#780a0a] border-t rounded-xl shadow-xl">
+														<a class=" text-[#780a0a] font-bold rounded-lg py-2 px-6" href={`/technology/${items.slug}`}>Details</a>	
+													</div>
+												</div>
+											</div>
+										</form>
+									</dialog>
+								</div>
 							</div>
 						</div>
-						<div class="flex justify-end">
-							<a href={`/technology/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Read More</a>
-						</div>			
+						<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
+						<div class="flex flex-row place-content-between">
+							<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
+							<a href={`/technology/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</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}?quality=50&format=jpeg`} alt=""/>
-					</div>
-					)}
-				</div> -->
-		</section>
+				)}
+				<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
+			</div>
+		</section>	
 	</main>
 </Layout>
 <script is:inline>