diff --git a/src/components/AddFile.vue b/src/components/AddFile.vue
new file mode 100644
index 0000000..fd971bb
--- /dev/null
+++ b/src/components/AddFile.vue
@@ -0,0 +1,103 @@
+<template>
+    <div class="my-10">
+      <section class="container mx-auto px-4 max-w-2xl shadow-lg rounded-xl p-6">
+        <p class="text-2xl py-4">Edit News</p>
+        <form id="formID">
+            <p class="text-red-500" style="display: none;" id="errorMessage"></p>
+            <p class="text-red-500" style="display: none;" id="errorMessage2"></p>
+            <label for="file">Choose a file:</label>
+            <input @change="saveFile" type="file" name="fileToUploadToSpApi" id="fileToUpload" required />
+        </form>
+        <form action="">
+            <div>
+                <input :value="data.file_url" type="text" name="fileLink" id="fileLink" class="p-2 border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl"/>
+            </div>
+        </form>
+      </section>
+    </div>
+</template>
+  
+  <script>
+    export default {
+    data() {
+        return {
+            slugURLbn: "",
+            fullURL: "",
+            spliturl: "",
+            bartaData: {}, // Initialize bartaData as an object
+            bnData: {},
+            data:{},
+        };
+    },
+    mounted() {
+        // this.getBarta();
+        let fullURL = window.location.href.split("/")[5].split('?add=')[1];
+        console.log(fullURL)
+    },
+    methods: {
+        saveFile(event) {
+            event.preventDefault();
+            let formData = new FormData();
+            // Append the selected file to the FormData object
+            formData.append('file', event.target.files[0]);
+            
+            fetch(`https://apisp.dev2.cicdhosting.com/upload_file/v2/`, {
+                method: 'POST',
+                body: formData,
+            })
+            .then(data => data.json())
+            .then(data => {
+                console.log(data);
+
+            })
+            .catch(error => {
+                console.error(error);
+            });
+        },
+
+        // getBarta() {
+        //     let currentUrl = window.location.href;
+        //     console.log('full url', currentUrl)
+        //     let langValue = currentUrl.split("/")[5].split('?add=')[1];
+        //     console.log( langValue);
+        //     let formData = new FormData();
+        //     formData.append('slug', langValue);
+        //     fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/edit-news/`, {
+        //         method: 'POST',
+        //         body: formData,
+        //     })
+        //     .then(response => response.json())
+        //     .then(data => {
+        //         // Assign fetched data to bartaData property
+        //         // console.log(data)
+        //         this.bartaData = data;
+        //         console.log(this.bartaData)
+        //     })
+        //     .catch(error => {
+        //         // console.log('An error occurred', error);
+        //     });
+        // },
+        // getBartaBN() {
+        //     let currentUrl = window.location.href;
+        //     let spliturl = currentUrl.split("/")[3].split("edit=")[1];
+        //     // console.log(spliturl);
+        //     let formData = new FormData();
+        //     formData.append('slug', spliturl);
+        //     fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/edit-news/?action=news_bn`, {
+        //         method: 'POST',
+        //         body: formData,
+        //     })
+        //     .then(response => response.json())
+        //     .then(data => {
+        //         // Assign fetched data to bartaData property
+        //         // console.log(data)
+        //         this.bnData = data;
+        //         console.log(this.bnData)
+        //     })
+        //     .catch(error => {
+        //         // console.log('An error occurred', error);
+        //     });
+        // },
+    },
+    };
+    </script>
\ No newline at end of file
diff --git a/src/components/AdminHeader.astro b/src/components/AdminHeader.astro
index 236fb41..5666e4c 100644
--- a/src/components/AdminHeader.astro
+++ b/src/components/AdminHeader.astro
@@ -5,6 +5,7 @@
                 <div class="flex flex-row ">
                     <a class="p-4" href="/editor/add-news">Add News</a>
                     <a class="p-4" href="/editor/edit-news">Edit News</a>
+                    <a class="p-4" href="/editor/add-file-list">Add Image</a>
                 </div>
                 <!-- <a href="/editor/add-news">Add News</a>
                 <a href="/editor/add-news">Add News</a> -->
diff --git a/src/pages/editor/add-file-list.astro b/src/pages/editor/add-file-list.astro
new file mode 100644
index 0000000..afd049a
--- /dev/null
+++ b/src/pages/editor/add-file-list.astro
@@ -0,0 +1,109 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import AdminHeader from "../../components/AdminHeader.astro";
+---
+<Layout title="Upload File | Barta-India">
+    <AdminHeader />
+    <main>
+        <div>
+            <section class="container mx-auto px-4">
+                <div>
+                    <table class="border-2">
+                        <thead>
+                            <tr class="text-center">
+                                <th>ID</th>
+                                <th>Status</th>
+                                <th>Image</th>
+                            </tr>
+                        </thead>
+                        <tbody class="border-2" id="statusTableBody"></tbody>
+                    </table>
+                </div>
+            </section>
+        </div> 
+
+
+
+
+        <div class="container mx-auto px-4 flex flex-col space-y-4">
+            <!-- <form action="https://apisp.dev2.cicdhosting.com/upload_file/v2/" method="post" enctype="multipart/form-data">
+                Select image to upload:
+                <input type="file" name="fileToUploadToSpApi" id="fileToUpload">
+                <input type="submit" value="Upload Image" name="submit">
+            </form> -->
+            <!-- <h1>Upload File</h1> -->
+            <!-- <form action="https://apisp.dev2.cicdhosting.com/upload_file/v2/" method="post" enctype="multipart/form-data">
+                <input type="file" name="file" id="file" /> <br>
+                <input type="submit" value="Upload">
+            </form> -->
+            <!-- <form id="formID">
+                <p class="text-red-500" style="display: none;" id="errorMessage"></p>
+                <p class="text-red-500" style="display: none;" id="errorMessage2"></p>
+                <label for="file">Choose a file:</label>
+                <input type="file" name="fileToUploadToSpApi" id="fileToUpload" required>
+                <br>
+                <input onclick="noImageNews();" type="submit" value="Upload">
+            </form> -->
+        </div>
+        <!-- <button onclick="noImageNews();">onclick="noImageNews();"</button> -->
+    </main>
+</Layout>
+<script is:inline>
+    window.onload = function noImageNews() {
+        fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/no-file/`)
+        .then(data => data.json())
+        .then(data => {
+            let tableBody = document.getElementById('statusTableBody');
+            data.forEach(function(singleData) {
+                let row = tableBody.insertRow();
+                let cellId = row.insertCell(0);
+                cellId.innerHTML = singleData.id;
+                let cellStatus = row.insertCell(1);
+                cellStatus.innerHTML = singleData.slug;
+                let cellEdit = row.insertCell(2);
+                let addButton = document.createElement('a');
+                addButton.innerText = 'Add';
+                addButton.style.color = 'blue';
+                addButton.href = `/editor/add-file/?add=${singleData.slug}`
+                addButton.addEventListener('click', function() {
+                    // Add your edit functionality here
+                    // console.log('Editing ID:', singleData.id);
+                });
+                cellEdit.appendChild(addButton);
+            });
+            console.log(data);
+        })
+        .catch(error => {
+            console.error('An error occurred', error); // Typo was here: 'console.erroe'
+        });
+    };
+
+    // noImageNews = window.onload;
+    function saveFile(event){
+        event.preventDefault();
+        let formID = document.getElementById('formID');
+        let formData = new FormData(formID);
+        fetch(`https://apisp.dev2.cicdhosting.com/upload_file/v2/`,{
+            method: 'POST',
+            body: formData,
+        })
+        .then(data => data.json())
+        .then(data => {
+            if(data.error_code == 8050){
+                document.getElementById('errorMessage').innerHTML = data.error;
+                document.getElementById('errorMessage').style.display = 'block';
+                document.getElementById('errorMessage2').style.display = 'none';
+            }
+            if(data.error_code == 8051){
+                document.getElementById('errorMessage2').innerHTML = data.error;
+                document.getElementById('errorMessage2').style.display = 'block';
+                document.getElementById('errorMessage').style.display = 'none';
+            }
+            
+            console.log(data)
+        })
+        .catch(error => {
+            console.error(error);
+        })
+    }
+</script>
diff --git a/src/pages/editor/add-file.astro b/src/pages/editor/add-file.astro
index b61d0c4..eb995d8 100644
--- a/src/pages/editor/add-file.astro
+++ b/src/pages/editor/add-file.astro
@@ -1,35 +1,62 @@
 ---
 import Layout from "../../layouts/Layout.astro";
+import AdminHeader from "../../components/AdminHeader.astro";
 ---
-<Layout title="Upload File | Barta-India">
+<Layout title="">
     <main>
-        <div class="container mx-auto px-4 flex flex-col space-y-4">
-            <form action="https://apisp.dev2.cicdhosting.com/upload_file/v2/" method="post" enctype="multipart/form-data">
-                Select image to upload:
-                <input type="file" name="fileToUploadToSpApi" id="fileToUpload">
-                <input type="submit" value="Upload Image" name="submit">
-            </form>
-            <h1>Upload File</h1>
-            <!-- <form action="https://apisp.dev2.cicdhosting.com/upload_file/v2/" method="post" enctype="multipart/form-data">
-                <input type="file" name="file" id="file" /> <br>
-                <input type="submit" value="Upload">
-            </form> -->
-            <!-- <form id="formID">
-                <p class="text-red-500" style="display: none;" id="errorMessage"></p>
-                <p class="text-red-500" style="display: none;" id="errorMessage2"></p>
-                <label for="file">Choose a file:</label>
-                <input type="file" name="file" id="file" required>
-                <br>
-                <input onclick="saveFile(event);" type="submit" value="Upload">
-            </form> -->
+        <AdminHeader />
+        <div>
+            <!-- <AddFile client:visible /> -->
+            <section class="container mx-auto px-4 max-w-2xl shadow-2xl rounded-2xl mt-16">
+                <h3 class="text-2xl py-4">Add File</h3>
+                <form id="imageChoose" class="flex flex-col">
+                    <p class="text-red-500" style="display: none;" id="errorMessage"></p>
+                    <p class="text-red-500" style="display: none;" id="errorMessage2"></p>
+                    <label for="file">Choose a file:</label>
+                    <input oninput="saveFile(event);" type="file" name="fileToUploadToSpApi" id="fileToUpload"  />
+                    <br>
+                    <!-- <input oninput="saveFile(event);" type="submit" value="Upload"> -->
+                </form>
+                <form id="imageLink" style="display: none;" class="space-y-4">
+                    <div class="flex flex-col">
+                        <input type="text" name="slug" id="slug" class="p-2 border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl" required />
+                    </div>
+                    <div class="flex flex-col">
+                        <input type="text" name="fileLink" id="fileLink" class="p-2 border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl" required  />
+                    </div>
+                    <div>
+                        <input onclick="submitNewsImage(event);" type="submit" value="Upload" class="bg-[#780a0a] px-4 py-2 rounded-lg text-white cursor-pointer" />
+                    </div>
+                </form>
+                <div class="flex flex-col justify-center place-items-center p-6">
+                    <img id="imgview" src="" alt="" class="rounded-xl" />
+                </div>
+            </section>
         </div>
     </main>
 </Layout>
-<!-- <script is:inline>
+<script is:inline>
+    function imagePreview() {
+        let fileInput = document.getElementById('fileToUpload');
+        let file = fileInput.files[0];
+        let imgView = document.getElementById('imgview');
+        if (file) {
+            document.getElementById('imgview').style.display = 'block';
+            let imgUrl = URL.createObjectURL(file);
+            imgView.src = imgUrl;
+        } else {
+            imgView.src = "";
+        }
+    }
+
+    let slug = window.location.href.split('/')[5].split('?add=')[1];
+    // console.log(slug)
+    document.getElementById('slug').value = slug;
+
     function saveFile(event){
         event.preventDefault();
-        let formID = document.getElementById('formID');
-        let formData = new FormData(formID);
+        let imageChoose = document.getElementById('imageChoose');
+        let formData = new FormData(imageChoose);
         fetch(`https://apisp.dev2.cicdhosting.com/upload_file/v2/`,{
             method: 'POST',
             body: formData,
@@ -46,11 +73,36 @@ import Layout from "../../layouts/Layout.astro";
                 document.getElementById('errorMessage2').style.display = 'block';
                 document.getElementById('errorMessage').style.display = 'none';
             }
-            
+            if(data.file_url){
+                document.getElementById('fileLink').value = data.file_url;
+                document.getElementById('imageChoose').style.display = 'none';
+                document.getElementById('imageLink').style.display = 'block';
+            }
             console.log(data)
         })
         .catch(error => {
             console.error(error);
         })
+        imagePreview();
     }
-</script> -->
+
+    function submitNewsImage(event) {
+        event.preventDefault();
+        let formElement = document.getElementById('imageLink'); // Replace 'yourFormId' with the actual ID of your form
+        let formData = new FormData(formElement); // Pass the form element
+        
+        fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/no-file-add-file/`, {
+            method: 'POST',
+            body: formData,
+        })
+        .then(response => response.json()) // Convert response to text
+        .then(data => {
+            console.log(data); 
+        })  
+        .catch(error => {
+            console.error('Error occurred:', error);
+        });
+    }
+
+
+</script>
\ No newline at end of file
diff --git a/src/pages/editor/add-news.astro b/src/pages/editor/add-news.astro
index 2599d94..7744def 100644
--- a/src/pages/editor/add-news.astro
+++ b/src/pages/editor/add-news.astro
@@ -36,19 +36,22 @@ import AdminHeader from "../../components/AdminHeader.astro";
                     <div class="flex flex-col">
                         <textarea required name="systemMessage" id="systemMessage" cols="30" rows="3" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl">provide meta_title within 60 characters, meta_description within  160 characters, short_description within 280 characters, heading within 170 characters in en, bn, hi, zh, es ar all in a json structure no use comma after line ending</textarea>
                     </div>
-                    <div class="flex flex-col" id="imgDIV">
-                        <!-- <img class="w-[100px]" id="imgview" src="" alt="" style="display: none;"/>
-                        <label for="file" class="cursor-pointer"><img src="/img/camera.svg" alt="add file | Barta-India"></label> -->
-                        <input oninput="saveFile(event);" type="file" name="file" id="file" class="border-2 p-1.5 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl">
-                        <input style="display: none;" value="" type="text" name="img" id="img" class="border-2 p-1.5 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl" />
-                    </div>
-                    <div>
+                    <div class="flex flex-col">
+                        <input type="text" name="fileLink" id="fileLink" class="p-2 border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl"/>
                     </div>
                     <div>
                         <button id="genButton" onclick="submitNewsPara(event);" class="bg-[#580a0a] text-white px-4 py-2 rounded-lg" >Genarate</button>
                     </div>
                     <!-- <input id="message" type="text" value="" class="border-2 border-[#580a0a] p-2 focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl"/> -->
                 </form>
+                <form id="formID">
+                    <p class="text-red-500" style="display: none;" id="errorMessage"></p>
+                    <p class="text-red-500" style="display: none;" id="errorMessage2"></p>
+                    <label for="file">Choose a file:</label>
+                    <input oninput="saveFile(event);" type="file" name="fileToUploadToSpApi" id="fileToUpload" required />
+                    <br>
+                    <!-- <input oninput="saveFile(event);" type="submit" value="Upload"> -->
+                </form>
             </section>
             <!-- border-2 border-[#780a0a] rounded-xl -->
             <section class="bg-white rounded-full px-6 py-4" id="loadingSection" style="display: none;">
@@ -64,10 +67,8 @@ import AdminHeader from "../../components/AdminHeader.astro";
 <script is:inline>
     function saveFile(event){
         event.preventDefault();
-        let formID = document.getElementById('newsPara');
-        let file = document.getElementById('file').file;
-        let formData = new FormData;
-        formData.append('file', file);
+        let formID = document.getElementById('formID');
+        let formData = new FormData(formID);
         fetch(`https://apisp.dev2.cicdhosting.com/upload_file/v2/`,{
             method: 'POST',
             body: formData,
@@ -84,14 +85,8 @@ import AdminHeader from "../../components/AdminHeader.astro";
                 document.getElementById('errorMessage2').style.display = 'block';
                 document.getElementById('errorMessage').style.display = 'none';
             }
-            document.getElementById('img').value = data.file_url;
             if(data.file_url){
-                document.getElementById('img').style.display = 'block';
-                document.getElementById('file').style.display = 'none';
-
-            }else{
-                document.getElementById('img').style.display = 'none';
-                document.getElementById('file').style.display = 'block';
+                document.getElementById('fileLink').value = data.file_url;
             }
             console.log(data)
         })
diff --git a/src/pages/editor/index.astro b/src/pages/editor/index.astro
index 08cee7c..46fe29c 100644
--- a/src/pages/editor/index.astro
+++ b/src/pages/editor/index.astro
@@ -8,7 +8,6 @@ import AdminHeader from "../../components/AdminHeader.astro";
     <main>
         <div>
             <EditNews client:visible />
-            
         </div>
     </main>
 <!-- </Layout>
diff --git a/src/pages/en/[id].astro b/src/pages/en/[id].astro
new file mode 100644
index 0000000..e5d8839
--- /dev/null
+++ b/src/pages/en/[id].astro
@@ -0,0 +1,94 @@
+---
+import Layout from "../../layouts/Layout.astro";
+export async function getStaticPaths() {
+    const postData = { key1: 'value1', key2: 'value2'};
+    const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
+    const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_en', options);
+    const data = await response.json();
+    const finalData = data.map((n: { slug: string | undefined; })=>{
+        return {params: {id:n.slug}}
+    })
+    return finalData;
+}
+const postData = { key1: 'value1', key2: 'value2'};
+const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
+const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_en', options);
+const data = await response.json();
+const { id } = Astro.params;
+const idx = data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
+const items  = data[idx];
+// console.log(items)
+---
+<Layout title=""
+            metaTitle={items.meta_title}
+            description={items.meta_description}
+            ogImg={items.img}          
+            tiwtterCard="summary_large_image"
+            tiwtterImage={items.img}
+            tiwtterTitle={items.meta_title}
+            tiwtterDesc={items.meta_description}
+            tiwtterURL=`https://barta-india.in/bn/${items.slug}`
+            artPubTime={items.date_created}
+            ogSiteName=`https://barta-india.in/bn/${items.slug}`
+            ogType='News'
+            ogTitle={items.meta_title}
+            ogDesc={items.meta_description}
+            ogURL=`https://barta-india.in/bn/${items.slug}`>
+    <main>
+        <section class="container mx-auto px-4 mt-16">
+          <div class="flex flex-col justify-center">
+            <div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
+              <h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
+              <h2 id="message2" class="text-xl py-2">{items.title}</h2>
+              <div class="flex flex-col place-items-center">
+                <img src={items.img} alt={items.title} class="md:w-[40%]" />
+              </div>
+              <div class="flex flex-row justify-center md:justify-end mt-2">
+                <div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit">
+                  <p class="text-xl font-bold text-[#780a0a]">Share on: </p>
+                  <a href=`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/bn/${items.slug}` data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
+                  <a href=`https://www.facebook.com/share.php?u=https://barta-india.in/bn/${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/bn/${items.slug}&text=%20${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/bn/${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>
+              <p class="text-justify  mt-4">{items.content}</p>
+          </div>
+        </section>
+      </main>
+</Layout>
+<script is:inline>
+    let isListening = false;
+    let speechSynthesisInstance = window.speechSynthesis;
+  
+    function toggleSpeech() {
+      if (isListening) {
+        stopSpeech();
+      } else {
+        startSpeech();
+      }
+    }
+  
+    function startSpeech() {
+      let message1 = document.getElementById('message1').innerText;
+      let message2 = document.getElementById('message2').innerText;
+      let allSpeechText = message1 + ' ' + message2;
+  
+      let speechText = new SpeechSynthesisUtterance(allSpeechText);
+      speechText.lang = 'bn';  // Set language to Bengali
+  
+      speechSynthesisInstance.speak(speechText);
+  
+      document.getElementById('listenButton').innerText = 'Stop';
+      isListening = true;
+    }
+  
+    function stopSpeech() {
+      speechSynthesisInstance.cancel();
+      document.getElementById('listenButton').innerText = 'Listen';
+      isListening = false;
+    }
+    // if(window.location.reload()){
+    //   isListening = false;
+    // }
+  </script>
diff --git a/src/pages/en/file.astro b/src/pages/en/file.astro
new file mode 100644
index 0000000..03e93fb
--- /dev/null
+++ b/src/pages/en/file.astro
@@ -0,0 +1,7 @@
+<main>
+    <div>
+        <section>sqjns
+            <img src="https://cdn33.siliconpin.com/files/siliconid0/gtfdo20u6v_" alt="">
+        </section>
+    </div>
+</main>
\ No newline at end of file
diff --git a/src/pages/en/index.astro b/src/pages/en/index.astro
index b14b3c5..114394a 100644
--- a/src/pages/en/index.astro
+++ b/src/pages/en/index.astro
@@ -9,9 +9,61 @@ console.log(news);
 ---
 <Layout title="">
     <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">
+				{news.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={`/en/${items.slug}`}>
+									<img class="aspect-video rounded-t-lg" src={items.img} 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={`/en/${items.slug}`} class="flex flex-col md:flex-col">
+												<img class="rounded-t-xl" src={items.img} 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-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>
+										</div>
+									</form>
+								</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>
+							<a href={`/en/${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> -->
+                <!-- <p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p> -->
+
+			</div>
+		</section>		
+	</main>
+    <!-- <main>
         <div>
             <p>News English</p>
-            <!-- <img src="https:\/\/cdn33.siliconpin.com\/files\/siliconid0\/gtdk3ixrvs_Screenshot-from-2024-02-07-12-42-53.png" alt=""> -->
             <div class="">
                 {data.map((items: {id: string | undefined; title: string | undefined;}) =>
                     <div>
@@ -20,6 +72,6 @@ console.log(news);
                     </div>
                 )}
             </div>
-        </div>
-    </main>
+        </div> 
+    </main> -->
 </Layout>