From f378065344b73776e10d8da1f9c323d79bbeaa6e Mon Sep 17 00:00:00 2001
From: dev sp <dev2@ns1.cicdhosting.com>
Date: Wed, 24 Jan 2024 14:07:59 +0000
Subject: [PATCH] remove weather

---
 .vscode/settings.json               |   2 +
 src/components/WeatherandTime.astro |  32 ++++++-
 src/layouts/Layout.astro            |   2 +-
 src/layouts/LayoutBN.astro          |   1 -
 src/pages/bn/index.astro            |  80 ++++++++--------
 src/pages/bn/local/index.astro      |  80 ++++++++--------
 src/pages/bn/national/index.astro   |  80 ++++++++--------
 src/pages/bn/politics/index.astro   |  80 ++++++++--------
 src/pages/bn/technology/index.astro |  80 ++++++++--------
 src/pages/index.astro               |  50 +++++-----
 src/pages/local/index.astro         |  77 +++++++--------
 src/pages/national/index.astro      |  77 +++++++--------
 src/pages/politics/index.astro      |  77 +++++++--------
 src/pages/technology/index.astro    |  77 +++++++--------
 src/pages/weather.astro             | 140 ++++++++++++++++++++++++++++
 15 files changed, 554 insertions(+), 381 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 src/pages/weather.astro

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..7a73a41
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,2 @@
+{
+}
\ No newline at end of file
diff --git a/src/components/WeatherandTime.astro b/src/components/WeatherandTime.astro
index 99bb318..ecc7f3a 100644
--- a/src/components/WeatherandTime.astro
+++ b/src/components/WeatherandTime.astro
@@ -7,7 +7,16 @@
                 <p id="description"></p>
             </div>
         </section>
+        <div class="flex flex-col justify-center place-items-center fixed top-[50%] right-[50%] bg-white md:max-w-lg w-full p-6 rounded-2xl shadow-xl" style="display: none;" id="weatherPermission">
+            <p>know weather information allow location Permission</p>
+            <div class="flex flex-row gap-6">
+                <button id="yesButton" class="border-2 border-[#580a0a] text-[#580a0a] px-4 py-2 rounded-xl">Allow</button>
+                <button id="noButton" class="border-2 border-[#580a0a] text-[#580a0a] px-4 py-2 rounded-xl">Deny</button>
+            </div>
+            
+        </div>
         <!-- <div class="bg-red-500 text-black" id="weatherInfo"></div> -->
+
     </div>
 </main>
 <script is:inline>
@@ -106,7 +115,26 @@
         // <p>Description: ${description}</p>
         // `;
     }
+    function windowOnload() {
+            document.getElementById('weatherPermission').style.display = 'block';
 
-    // Call the function to display the city name and weather information
-    showCityName();
+            // Attach click event handlers to the buttons
+            document.getElementById('yesButton').addEventListener('click', onYesButtonClick);
+            document.getElementById('noButton').addEventListener('click', onNoButtonClick);
+        }
+
+        function onYesButtonClick() {
+            // Call the function to display the city name and weather information
+            showCityName();
+
+            // Hide the weather permission div
+            document.getElementById('weatherPermission').style.display = 'none';
+        }
+
+        function onNoButtonClick() {
+            // Hide the weather permission div without fetching weather information
+            document.getElementById('weatherPermission').style.display = 'none';
+        }
+        
+        window.onload = windowOnload;
 </script>
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 8f4a53c..6d7828d 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -60,7 +60,7 @@ const { title, metaTitle, description, ogImg, tiwtterCard, tiwtterImage, tiwtter
 			<MainHeader /> 
 		</div>
 		<div class="mt-[100px]">
-			<WeatherandTime />
+			<!-- <WeatherandTime /> -->
 			<slot />
 		</div>
 		<Footer />
diff --git a/src/layouts/LayoutBN.astro b/src/layouts/LayoutBN.astro
index dc3153d..217e290 100644
--- a/src/layouts/LayoutBN.astro
+++ b/src/layouts/LayoutBN.astro
@@ -57,7 +57,6 @@ const { title, metaTitle, description, ogImg, tiwtterCard, tiwtterImage, tiwtter
 	<body>
 		<div>
 			<MainHeaderBN /> 
-			
 		</div>
 		<div class="mt-[150px]">
 			<slot />
diff --git a/src/pages/bn/index.astro b/src/pages/bn/index.astro
index 733d01d..7e39d30 100644
--- a/src/pages/bn/index.astro
+++ b/src/pages/bn/index.astro
@@ -12,20 +12,20 @@ const items = metaJSON.data[0];
 ---
 
 <LayoutBN title={items.title}
-			metaTitle={items.meta_title}
-			description={items.description}
-			ogImg={`https://api7.siliconpin.com/assets/${items.img}`}
-			tiwtterCard="summary_large_image"
-			tiwtterImage={`https://api7.siliconpin.com/assets/${items.img}`}
-			tiwtterTitle={items.title}
-			tiwtterDesc={items.description}
-			tiwtterURL=`https://barta-india.in/bn`
-			ogSiteName=`https://barta-india.in/bn`
-			ogType={items.og_type}
-			ogTitle={items.title}
-			ogDesc={items.description}
-			ogURL=`https://barta-india.in/bn`
-			>
+	metaTitle={items.meta_title}
+	description={items.description}
+	ogImg={`https://api7.siliconpin.com/assets/${items.img}`}
+	tiwtterCard="summary_large_image"
+	tiwtterImage={`https://api7.siliconpin.com/assets/${items.img}`}
+	tiwtterTitle={items.title}
+	tiwtterDesc={items.description}
+	tiwtterURL=`https://barta-india.in/bn`
+	ogSiteName=`https://barta-india.in/bn`
+	ogType={items.og_type}
+	ogTitle={items.title}
+	ogDesc={items.description}
+	ogURL=`https://barta-india.in/bn`
+	>
 	<main>
 		<section class="container mx-auto px-4">
 			<div class="my-16">
@@ -36,47 +36,47 @@ const items = metaJSON.data[0];
 				{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>
-							<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">
+							<div class="">
+								<a class="flex flex-col" href={`/bn/${items.slug}`}>
+									<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+									<h2 class="text-lg text-justify ">{items.title}</h2> 
+								</a>
+							</div>
+							<div>
+								<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
+									<form method="dialog">
+										<div class="flex flex-col md:flex-col">
+											<a href={`/bn/${items.slug}`} 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>
+											</a>
+											<div class="flex flex-row place-content-between place-items-center">
+												<div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
+													<a class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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="flex border-b-4 border-gray-500 border-t rounded-full  text-3xl hover:rotate-180  duration-[3s]">
+													<button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
 												</div>
 											</div>
-										</form>
-									</dialog>
-								</div>
+										</div>
+									</form>
+								</dialog>
 							</div>
 						</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>
+							<p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p>
 							<a href={`/bn/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
 						</div>
 					</div>
 				)}
 				<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
 			</div>
-		</section>
+		</section>		
 	</main>
 </LayoutBN>
 <script is:inline>
diff --git a/src/pages/bn/local/index.astro b/src/pages/bn/local/index.astro
index 7c73f5f..42c529f 100644
--- a/src/pages/bn/local/index.astro
+++ b/src/pages/bn/local/index.astro
@@ -11,20 +11,20 @@ const items = metaJSON.data[0];
 ---
 
 <LayoutBN title={items.title}
-			metaTitle={items.title}
-			description={items.description}
-			ogImg={`https://api7.siliconpin.com/assets/${items.img}`}
-			tiwtterCard="summary_large_image"
-			tiwtterImage={`https://api7.siliconpin.com/assets/${items.img}`}
-			tiwtterTitle={items.title}
-			tiwtterDesc={items.description}
-			tiwtterURL=`https://barta-india.in/bn/local/`
-			ogSiteName=`https://barta-india.in/bn/local/`
-			ogType={items.og_type}
-			ogTitle={items.title}
-			ogDesc={items.description}
-			ogURL=`https://barta-india.in/bn/local/`
-			>
+	metaTitle={items.title}
+	description={items.description}
+	ogImg={`https://api7.siliconpin.com/assets/${items.img}`}
+	tiwtterCard="summary_large_image"
+	tiwtterImage={`https://api7.siliconpin.com/assets/${items.img}`}
+	tiwtterTitle={items.title}
+	tiwtterDesc={items.description}
+	tiwtterURL=`https://barta-india.in/bn/local/`
+	ogSiteName=`https://barta-india.in/bn/local/`
+	ogType={items.og_type}
+	ogTitle={items.title}
+	ogDesc={items.description}
+	ogURL=`https://barta-india.in/bn/local/`
+	>
 	<main>
 		<section class="container mx-auto px-4">
 			<div class="my-16">
@@ -35,47 +35,47 @@ const items = metaJSON.data[0];
 				{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/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">
+							<div class="">
+								<a class="flex flex-col" href={`/bn/local/${items.slug}`}>
+									<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+									<h2 class="text-lg text-justify ">{items.title}</h2> 
+								</a>
+							</div>
+							<div>
+								<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
+									<form method="dialog">
+										<div class="flex flex-col md:flex-col">
+											<a href={`/bn/local/${items.slug}`} 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>
+											</a>
+											<div class="flex flex-row place-content-between place-items-center">
+												<div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
+													<a class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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="flex border-b-4 border-gray-500 border-t rounded-full  text-3xl hover:rotate-180  duration-[3s]">
+													<button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
 												</div>
 											</div>
-										</form>
-									</dialog>
-								</div>
+										</div>
+									</form>
+								</dialog>
 							</div>
 						</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>
+							<p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p>
 							<a href={`/bn/local/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
 						</div>
 					</div>
 				)}
 				<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
 			</div>
-		</section>
+		</section>		
 	</main>
 </LayoutBN>
 <script is:inline>
diff --git a/src/pages/bn/national/index.astro b/src/pages/bn/national/index.astro
index 94ab3d2..864f897 100644
--- a/src/pages/bn/national/index.astro
+++ b/src/pages/bn/national/index.astro
@@ -11,20 +11,20 @@ const items = metaJSON.data[0];
 // console.log()
 ---
 <LayoutBN title={items.title}
-		metaTitle={items.title}
-		description={items.description}
-		ogImg={`https://api7.siliconpin.com/assets/${items.img}`}
-		tiwtterCard="summary_large_image"
-		tiwtterImage={`https://api7.siliconpin.com/assets/${items.img}`}
-		tiwtterTitle={items.title}
-		tiwtterDesc={items.description}
-		tiwtterURL=`https://barta-india.in/bn/national/`
-		ogSiteName=`https://barta-india.in/bn/national/`
-		ogType={items.og_type}
-		ogTitle={items.title}
-		ogDesc={items.description}
-		ogURL=`https://barta-india.in/bn/national/`
-		>
+	metaTitle={items.title}
+	description={items.description}
+	ogImg={`https://api7.siliconpin.com/assets/${items.img}`}
+	tiwtterCard="summary_large_image"
+	tiwtterImage={`https://api7.siliconpin.com/assets/${items.img}`}
+	tiwtterTitle={items.title}
+	tiwtterDesc={items.description}
+	tiwtterURL=`https://barta-india.in/bn/national/`
+	ogSiteName=`https://barta-india.in/bn/national/`
+	ogType={items.og_type}
+	ogTitle={items.title}
+	ogDesc={items.description}
+	ogURL=`https://barta-india.in/bn/national/`
+	>
 	<main>
 		<section class="container mx-auto px-4">
 			<div class="my-16">
@@ -35,47 +35,47 @@ const items = metaJSON.data[0];
 				{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>
-							<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">
+							<div class="">
+								<a class="flex flex-col" href={`/bn/national/${items.slug}`}>
+									<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+									<h2 class="text-lg text-justify ">{items.title}</h2> 
+								</a>
+							</div>
+							<div>
+								<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
+									<form method="dialog">
+										<div class="flex flex-col md:flex-col">
+											<a href={`/bn/national/${items.slug}`} 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>
+											</a>
+											<div class="flex flex-row place-content-between place-items-center">
+												<div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
+													<a class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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="flex border-b-4 border-gray-500 border-t rounded-full  text-3xl hover:rotate-180  duration-[3s]">
+													<button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
 												</div>
 											</div>
-										</form>
-									</dialog>
-								</div>
+										</div>
+									</form>
+								</dialog>
 							</div>
 						</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>
+							<p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p>
 							<a href={`/bn/national/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
 						</div>
 					</div>
 				)}
 				<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
 			</div>
-		</section>
+		</section>		
 	</main>
 </LayoutBN>
 <script is:inline>
diff --git a/src/pages/bn/politics/index.astro b/src/pages/bn/politics/index.astro
index b39684b..f5ab8c0 100644
--- a/src/pages/bn/politics/index.astro
+++ b/src/pages/bn/politics/index.astro
@@ -12,20 +12,20 @@ const items = metaJSON.data[0];
 ---
 
 <LayoutBN title={items.title}
-			metaTitle={items.title}
-			description={items.description}
-			ogImg={`https://api7.siliconpin.com/assets/${items.img}`}
-			tiwtterCard="summary_large_image"
-			tiwtterImage={`https://api7.siliconpin.com/assets/${items.img}`}
-			tiwtterTitle={items.title}
-			tiwtterDesc={items.description}
-			tiwtterURL=`https://barta-india.in/bn/politics/`
-			ogSiteName=`https://barta-india.in/bn/politics/`
-			ogType={items.og_type}
-			ogTitle={items.title}
-			ogDesc={items.description}
-			ogURL=`https://barta-india.in/bn/politics/`
-			>
+	metaTitle={items.title}
+	description={items.description}
+	ogImg={`https://api7.siliconpin.com/assets/${items.img}`}
+	tiwtterCard="summary_large_image"
+	tiwtterImage={`https://api7.siliconpin.com/assets/${items.img}`}
+	tiwtterTitle={items.title}
+	tiwtterDesc={items.description}
+	tiwtterURL=`https://barta-india.in/bn/politics/`
+	ogSiteName=`https://barta-india.in/bn/politics/`
+	ogType={items.og_type}
+	ogTitle={items.title}
+	ogDesc={items.description}
+	ogURL=`https://barta-india.in/bn/politics/`
+	>
 	<main>
 		<section class="container mx-auto px-4">
 			<div class="my-16">
@@ -36,47 +36,47 @@ const items = metaJSON.data[0];
 				{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>
-							<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">
+							<div class="">
+								<a class="flex flex-col" href={`/bn/politics/${items.slug}`}>
+									<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+									<h2 class="text-lg text-justify ">{items.title}</h2> 
+								</a>
+							</div>
+							<div>
+								<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
+									<form method="dialog">
+										<div class="flex flex-col md:flex-col">
+											<a href={`/bn/politics/${items.slug}`} 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>
+											</a>
+											<div class="flex flex-row place-content-between place-items-center">
+												<div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
+													<a class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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="flex border-b-4 border-gray-500 border-t rounded-full  text-3xl hover:rotate-180  duration-[3s]">
+													<button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
 												</div>
 											</div>
-										</form>
-									</dialog>
-								</div>
+										</div>
+									</form>
+								</dialog>
 							</div>
 						</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>
+							<p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p>
 							<a href={`/bn/politics/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
 						</div>
 					</div>
 				)}
 				<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
 			</div>
-		</section>
+		</section>		
 	</main>
 </LayoutBN>
 <script is:inline>
diff --git a/src/pages/bn/technology/index.astro b/src/pages/bn/technology/index.astro
index a0997da..3684a54 100644
--- a/src/pages/bn/technology/index.astro
+++ b/src/pages/bn/technology/index.astro
@@ -12,20 +12,20 @@ const items = metaJSON.data[0];
 ---
 
 <LayoutBN title={items.title}
-			metaTitle={items.title}
-			description={items.description}
-			ogImg={`https://api7.siliconpin.com/assets/${items.img}`}
-			tiwtterCard="summary_large_image"
-			tiwtterImage={`https://api7.siliconpin.com/assets/${items.img}`}
-			tiwtterTitle={items.title}
-			tiwtterDesc={items.description}
-			tiwtterURL=`https://barta-india.in/bn/technology/`
-			ogSiteName=`https://barta-india.in/bn/technology/`
-			ogType={items.og_type}
-			ogTitle={items.title}
-			ogDesc={items.description}
-			ogURL=`https://barta-india.in/bn/technology/`
-			>
+	metaTitle={items.title}
+	description={items.description}
+	ogImg={`https://api7.siliconpin.com/assets/${items.img}`}
+	tiwtterCard="summary_large_image"
+	tiwtterImage={`https://api7.siliconpin.com/assets/${items.img}`}
+	tiwtterTitle={items.title}
+	tiwtterDesc={items.description}
+	tiwtterURL=`https://barta-india.in/bn/technology/`
+	ogSiteName=`https://barta-india.in/bn/technology/`
+	ogType={items.og_type}
+	ogTitle={items.title}
+	ogDesc={items.description}
+	ogURL=`https://barta-india.in/bn/technology/`
+	>
 	<main>
 		<section class="container mx-auto px-4">
 			<div class="my-16">
@@ -36,47 +36,47 @@ const items = metaJSON.data[0];
 				{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>
-							<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">
+							<div class="">
+								<a class="flex flex-col" href={`/bn/technology/${items.slug}`}>
+									<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+									<h2 class="text-lg text-justify ">{items.title}</h2> 
+								</a>
+							</div>
+							<div>
+								<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
+									<form method="dialog">
+										<div class="flex flex-col md:flex-col">
+											<a href={`/bn/technology/${items.slug}`} 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>
+											</a>
+											<div class="flex flex-row place-content-between place-items-center">
+												<div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
+													<a class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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="flex border-b-4 border-gray-500 border-t rounded-full  text-3xl hover:rotate-180  duration-[3s]">
+													<button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
 												</div>
 											</div>
-										</form>
-									</dialog>
-								</div>
+										</div>
+									</form>
+								</dialog>
 							</div>
 						</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>
+							<p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p>
 							<a href={`/bn/technology/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
 						</div>
 					</div>
 				)}
 				<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
 			</div>
-		</section>
+		</section>		
 	</main>
 </LayoutBN>
 <script is:inline>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 97fb800..37d3a01 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -34,40 +34,40 @@ const items = metaJSON.data[0];
 				{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>
-							<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">
+							<div class="">
+								<a class="flex flex-col" href={`/${items.slug}`}>
+									<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+									<h2 class="text-lg text-justify">{items.title}</h2> 
+								</a>
+							</div>
+							<div>
+								<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
+									<form method="dialog">
+										<div class="flex flex-col md:flex-col">
+											<a href={`/${items.slug}`} 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>
+											</a>
+											<div class="flex flex-row place-content-between place-items-center">
+												<div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
+													<a class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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="flex border-b-4 border-gray-500 border-t rounded-full  text-3xl hover:rotate-180  duration-[3s]">
+													<button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
 												</div>
 											</div>
-										</form>
-									</dialog>
-								</div>
+										</div>
+									</form>
+								</dialog>
 							</div>
 						</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>
+							<p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p>
 							<a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
 						</div>
 					</div>
diff --git a/src/pages/local/index.astro b/src/pages/local/index.astro
index fc686b5..9bfa3db 100644
--- a/src/pages/local/index.astro
+++ b/src/pages/local/index.astro
@@ -26,39 +26,41 @@ const items = metaJSON.data[0];
 		ogDesc={items.description}
 		ogURL=`https://barta-india.in/local/`
 		>
-	<main>
-		<section class="container mx-auto px-4">
-			<div class="my-16">
-				<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 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={`/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>    
+		<main>
+			<section class="container mx-auto px-4">
+				<div class="my-16">
+					<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 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">
+								<div class="">
+									<a class="flex flex-col" href={`/local/${items.slug}`}>
+										<a class="flex flex-col" href={`/${items.slug}`}>
+									<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+									<h2 class="text-lg text-justify">{items.title}</h2>  
+									</a>
+								</div>
 								<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>
+												<a href={`/local/${items.slug}`} 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>
+												</a>
 												<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 class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
+														<a class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="flex border-b-4 border-gray-500 border-t rounded-full  text-3xl hover:rotate-180  duration-[3s]">
+														<button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
 													</div>
 												</div>
 											</div>
@@ -66,18 +68,17 @@ const items = metaJSON.data[0];
 									</dialog>
 								</div>
 							</div>
+							<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>
+								<p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p>
+								<a href={`/local/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
+							</div>
 						</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>
-				)}
-				<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
-			</div>
-		</section>	
-	</main>
+					)}
+					<!-- <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>
 	const pageName = window.location.href.split('/')[3];
diff --git a/src/pages/national/index.astro b/src/pages/national/index.astro
index f88b169..73d0c03 100644
--- a/src/pages/national/index.astro
+++ b/src/pages/national/index.astro
@@ -26,39 +26,41 @@ const items = metaJSON.data[0];
 		ogDesc={items.description}
 		ogURL=`https://barta-india.in/national/`
 		>
-	<main>
-		<section class="container mx-auto px-4">
-			<div class="my-16">
-				<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 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={`/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>    
+		<main>
+			<section class="container mx-auto px-4">
+				<div class="my-16">
+					<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 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">
+								<div class="">
+									<a class="flex flex-col" href={`/national/${items.slug}`}>
+										<a class="flex flex-col" href={`/${items.slug}`}>
+									<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+									<h2 class="text-lg text-justify">{items.title}</h2>  
+									</a>
+								</div>
 								<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>
+												<a href={`/national/${items.slug}`} 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>
+												</a>
 												<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 class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
+														<a class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="flex border-b-4 border-gray-500 border-t rounded-full  text-3xl hover:rotate-180  duration-[3s]">
+														<button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
 													</div>
 												</div>
 											</div>
@@ -66,18 +68,17 @@ const items = metaJSON.data[0];
 									</dialog>
 								</div>
 							</div>
+							<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>
+								<p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p>
+								<a href={`/national/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
+							</div>
 						</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>
-				)}
-				<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
-			</div>
-		</section>	
-	</main>
+					)}
+					<!-- <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>
 	const pageName = window.location.href.split('/')[3];
diff --git a/src/pages/politics/index.astro b/src/pages/politics/index.astro
index 5e96102..405735a 100644
--- a/src/pages/politics/index.astro
+++ b/src/pages/politics/index.astro
@@ -26,39 +26,41 @@ const items = metaJSON.data[0];
 		ogDesc={items.description}
 		ogURL=`https://barta-india.in/politics/`
 		>
-	<main>
-		<section class="container mx-auto px-4">
-			<div class="my-16">
-				<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 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={`/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>    
+		<main>
+			<section class="container mx-auto px-4">
+				<div class="my-16">
+					<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 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">
+								<div class="">
+									<a class="flex flex-col" href={`/politics/${items.slug}`}>
+										<a class="flex flex-col" href={`/${items.slug}`}>
+									<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+									<h2 class="text-lg text-justify">{items.title}</h2>  
+									</a>
+								</div>
 								<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>
+												<a href={`/politics/${items.slug}`} 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>
+												</a>
 												<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 class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
+														<a class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="flex border-b-4 border-gray-500 border-t rounded-full  text-3xl hover:rotate-180  duration-[3s]">
+														<button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
 													</div>
 												</div>
 											</div>
@@ -66,18 +68,17 @@ const items = metaJSON.data[0];
 									</dialog>
 								</div>
 							</div>
+							<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>
+								<p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p>
+								<a href={`/politics/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
+							</div>
 						</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>
-				)}
-				<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
-			</div>
-		</section>	
-	</main>
+					)}
+					<!-- <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>
 	const pageName = window.location.href.split('/')[3];
diff --git a/src/pages/technology/index.astro b/src/pages/technology/index.astro
index 73c1ba7..c6600f7 100644
--- a/src/pages/technology/index.astro
+++ b/src/pages/technology/index.astro
@@ -26,39 +26,41 @@ const items = metaJSON.data[0];
 		ogDesc={items.description}
 		ogURL=`https://barta-india.in/technology/`
 		>
-	<main>
-		<section class="container mx-auto px-4">
-			<div class="my-16">
-				<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 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={`/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>    
+		<main>
+			<section class="container mx-auto px-4">
+				<div class="my-16">
+					<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 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">
+								<div class="">
+									<a class="flex flex-col" href={`/technology/${items.slug}`}>
+										<a class="flex flex-col" href={`/${items.slug}`}>
+									<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+									<h2 class="text-lg text-justify">{items.title}</h2>  
+									</a>
+								</div>
 								<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>
+												<a href={`/technology/${items.slug}`} 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>
+												</a>
 												<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 class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
+														<a class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" 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 class="flex border-b-4 border-gray-500 border-t rounded-full  text-3xl hover:rotate-180  duration-[3s]">
+														<button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
 													</div>
 												</div>
 											</div>
@@ -66,18 +68,17 @@ const items = metaJSON.data[0];
 									</dialog>
 								</div>
 							</div>
+							<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>
+								<p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p>
+								<a href={`/technology/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
+							</div>
 						</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>
-				)}
-				<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
-			</div>
-		</section>	
-	</main>
+					)}
+					<!-- <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>
 	const pageName = window.location.href.split('/')[3];
diff --git a/src/pages/weather.astro b/src/pages/weather.astro
new file mode 100644
index 0000000..ecc7f3a
--- /dev/null
+++ b/src/pages/weather.astro
@@ -0,0 +1,140 @@
+<main>
+    <div>
+        <section class="container mx-auto px-4">
+            <div id="swicthDIVBG">
+                <p id="cityName"></p>
+                <p id="temper"></p>
+                <p id="description"></p>
+            </div>
+        </section>
+        <div class="flex flex-col justify-center place-items-center fixed top-[50%] right-[50%] bg-white md:max-w-lg w-full p-6 rounded-2xl shadow-xl" style="display: none;" id="weatherPermission">
+            <p>know weather information allow location Permission</p>
+            <div class="flex flex-row gap-6">
+                <button id="yesButton" class="border-2 border-[#580a0a] text-[#580a0a] px-4 py-2 rounded-xl">Allow</button>
+                <button id="noButton" class="border-2 border-[#580a0a] text-[#580a0a] px-4 py-2 rounded-xl">Deny</button>
+            </div>
+            
+        </div>
+        <!-- <div class="bg-red-500 text-black" id="weatherInfo"></div> -->
+
+    </div>
+</main>
+<script is:inline>
+        async function getCurrentLocation() {
+        return new Promise((resolve, reject) => {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(
+            (position) => resolve(position.coords),
+            (error) => reject(error)
+            );
+        } else {
+            reject(new Error('Geolocation is not supported by this browser.'));
+        }
+        });
+    }
+
+    async function getCityName(latitude, longitude) {
+        const apiKey = '4d54049b61eb45c4b121ab2cff9808ba';  // Replace with your OpenCage API key
+        const apiUrl = `https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=${apiKey}`;
+
+        try {
+        const response = await fetch(apiUrl);
+
+        if (!response.ok) {
+            throw new Error('Error fetching data from the server.');
+        }
+
+        const data = await response.json();
+
+        if (data.results && data.results.length > 0) {
+            const city = data.results[0].components.city;
+            return city;
+        } else {
+            throw new Error('City not found.');
+        }
+        } catch (error) {
+        console.error('Error:', error.message);
+        throw new Error('Error fetching city name.');
+        }
+    }
+
+    async function getWeatherData(city) {
+        const apiKey = 'aed8dd87581613e1d2bbbf63eeb618da';
+        const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;
+
+        try {
+        const response = await fetch(apiUrl);
+
+        if (!response.ok) {
+            throw new Error('Error fetching weather data from the server.');
+        }
+
+        const data = await response.json();
+        return data;
+        } catch (error) {
+        console.error('Error:', error.message);
+        throw new Error('Error fetching weather data.');
+        }
+    }
+
+    async function showCityName() {
+        try {
+        const location = await getCurrentLocation();
+        const city = await getCityName(location.latitude, location.longitude);
+        // document.getElementById('weatherInfo').innerText = 'Current City: ' + city;
+
+        const weatherData = await getWeatherData(city);
+        displayWeather(weatherData);
+        } catch (error) {
+        console.error(error.message);
+        // document.getElementById('weatherInfo').innerText = 'Error fetching data.';
+        }
+    }
+
+    function displayWeather(data) {
+        // const weatherInfoDiv = document.getElementById('weatherInfo');
+
+        // Extract relevant information from the API response
+        const cityName = data.name;
+        const temperature = data.main.temp;
+        const description = data.weather[0].description;
+        document.getElementById('cityName').innerHTML= 'City: ' + cityName;
+        document.getElementById('temper').innerHTML = 'Temperature: ' + temperature;
+        document.getElementById('description').innerHTML = 'Description: ' + description;
+        let switchBG = document.innerHTML = description;
+        if (switchBG === 'clear sky') {
+            let clearSkyBG = document.getElementById('swicthDIVBG').style.backgroundImage = 'url(/img/clear_sky.webp)';
+            clearSkyBG.style.backgroundRepeat = 'no-repeat';
+            clearSkyBG.style.backgroundSize = 'cover';
+        }
+        // Display the weather information     switchDiv.style.backgroundImage = 'url("path/to/clear-sky-image.jpg")';
+
+        // weatherInfoDiv.innerHTML = `
+        // <p>City: ${cityName}</p>
+        // <p>Temperature: ${temperature} °C</p>
+        // <p>Description: ${description}</p>
+        // `;
+    }
+    function windowOnload() {
+            document.getElementById('weatherPermission').style.display = 'block';
+
+            // Attach click event handlers to the buttons
+            document.getElementById('yesButton').addEventListener('click', onYesButtonClick);
+            document.getElementById('noButton').addEventListener('click', onNoButtonClick);
+        }
+
+        function onYesButtonClick() {
+            // Call the function to display the city name and weather information
+            showCityName();
+
+            // Hide the weather permission div
+            document.getElementById('weatherPermission').style.display = 'none';
+        }
+
+        function onNoButtonClick() {
+            // Hide the weather permission div without fetching weather information
+            document.getElementById('weatherPermission').style.display = 'none';
+        }
+        
+        window.onload = windowOnload;
+</script>
\ No newline at end of file