FacebookVideoEmbed

src/app/(home)/about-us/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const AboutUS = () => {
+  return (
+    <div className='text-3xl'>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil est fuga distinctio repellat veniam laborum molestias blanditiis neque, similique tempora recusandae, eligendi incidunt reiciendis nulla optio dolore ratione fugiat! Minima!
+    </div>
+  )
+}
+
+export default AboutUS

src/components/pages/home/Home.tsx

@@ -8,16 +8,18 @@ import RadioChilmariFacebookPage from '@/components/ui/FacebookPage';
 
 const Home = () => {
   return (
-    <div>
+    <div className=''>
 
-<Alert color="info">Alert!</Alert>;
+<Alert color="info">Alert!</Alert>
 
 <TopRegularProgramSlider />
 
-<FacebookVideoEmbed />
+
 
 <RadioChilmariFacebookPage />
 
+<hr className='my-4' />
+<FacebookVideoEmbed />
 
     </div>
   )

src/components/ui/FFD.css

@@ -0,0 +1,71 @@
+#app {
+    height: 100%;
+  }
+  html,
+  body {
+    position: relative;
+    height: 100%;
+  }
+
+  body {
+    background: #eee;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    color: #000;
+    margin: 0;
+    padding: 0;
+  }
+
+  .swiper {
+    width: 100%;
+    height: 100%;
+  }
+
+  .swiper-slide {
+    text-align: center;
+    font-size: 18px;
+    background: #fff;
+
+    /* Center slide text vertically */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .swiper-slide img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .autoplay-progress {
+    position: absolute;
+    right: 16px;
+    bottom: 16px;
+    z-index: 10;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    color: var(--swiper-theme-color);
+  }
+
+  .autoplay-progress svg {
+    --progress: 0;
+    position: absolute;
+    left: 0;
+    top: 0px;
+    z-index: 10;
+    width: 100%;
+    height: 100%;
+    stroke-width: 4px;
+    stroke: var(--swiper-theme-color);
+    fill: none;
+    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
+    stroke-dasharray: 125.6;
+    transform: rotate(-90deg);
+  }
+

src/components/ui/FacebookPage.tsx

@@ -17,27 +17,41 @@ const RadioChilmariFacebookPage = () => {
   }, []);
 
   return (
-    <div>
-      {/* Embed Radio Chilmari Facebook Page */}
-      <div
-        className="fb-page"
-        data-href="https://www.facebook.com/radiochilmari"
-        data-tabs="timeline"
-        data-width="500"
-        data-height="600"
-        data-small-header="false"
-        data-adapt-container-width="true"
-        data-hide-cover="false"
-        data-show-facepile="true"
-      ></div>
+    <div className="flex items-center justify-between h-screen bg-gray-100 dark:bg-gray-900 p-6">
+      {/* Left Side: Text Content */}
+      <div className="max-w-lg">
+        <h1 className="text-3xl font-bold text-gray-800 dark:text-gray-100">
+          Our Facebook Page
+        </h1>
+        <p className="mt-4 text-gray-600 dark:text-gray-300">
+          Stay updated all the time! Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+          Perspiciatis incidunt velit asperiores voluptate necessitatibus voluptates harum tempora atque quo. 
+          Saepe vitae ad dicta neque voluptatibus ut officiis ducimus perspiciatis eos?
+        </p>
+      </div>
 
-      {/* Facebook Share Button */}
-      <div className="mt-4">
+      {/* Right Side: Facebook Page Embed */}
+      <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
         <div
-          className="fb-share-button"
+          className="fb-page"
           data-href="https://www.facebook.com/radiochilmari"
-          data-layout="button"
+          data-tabs="timeline"
+          data-width="400"
+          data-height="500"
+          data-small-header="false"
+          data-adapt-container-width="true"
+          data-hide-cover="false"
+          data-show-facepile="true"
         ></div>
+
+        {/* Facebook Share Button */}
+        <div className="mt-4 text-center">
+          <div
+            className="fb-share-button"
+            data-href="https://www.facebook.com/radiochilmari"
+            data-layout="button"
+          ></div>
+        </div>
       </div>
     </div>
   );

src/components/ui/FacebookVideoEmbed.tsx

@@ -1,33 +1,21 @@
 'use client';
 
-import { useEffect } from 'react';
-
 const FacebookVideoEmbed = () => {
-  useEffect(() => {
-    // Load the Facebook SDK
-    if (!document.getElementById('facebook-jssdk')) {
-      const script = document.createElement('script');
-      script.id = 'facebook-jssdk';
-      script.async = true;
-      script.defer = true;
-      script.crossOrigin = 'anonymous';
-      script.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v17.0';
-      document.body.appendChild(script);
-    }
-  }, []);
-
   return (
-    <div>
-      {/* Add the Facebook Embedded Video */}
-      <div
-        className="fb-video"
-        data-href="https://www.facebook.com/facebook/videos/10153231379946729/"
-        data-width="500"
-        data-show-text="false"
-      ></div>
-
-
-<iframe src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fradiochilmari%2Fvideos%2F3470305789941801%2F&show_text=false&width=560&t=0" width="560" height="314" style={{border:"none",overflow:"hidden"}} scrolling="no"  allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" ></iframe>
+    <div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-6">
+      <div className="max-w-2xl w-full bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
+        <iframe
+          src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fradiochilmari%2Fvideos%2F3470305789941801%2F&show_text=true&width=560&t=0"
+          width="100%"
+          height="429"
+          className="rounded-lg"
+          style={{ border: 'none', overflow: 'hidden' }}
+          scrolling="no"
+          frameBorder="0"
+          allowFullScreen
+          allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
+        ></iframe>
+      </div>
     </div>
   );
 };

src/components/ui/Navbar.tsx

@@ -1,31 +1,34 @@
 import React from 'react';
 import Image from 'next/image';
+import Link from 'next/link';
 
 const Navbar = () => {
   return (
-    <div className="flex items-center justify-between h-16 px-4 bg-gray-800 text-white">
+    <div className="fixed top-0 w-full flex items-center justify-between h-16 px-4 bg-gray-800 text-white shadow-md z-50">
       {/* Centered Logo */}
       <div className="flex-1 flex justify-center">
-        <Image
+       <Link href="/">
+       <Image
           src="/android-chrome-192x192.png"
           alt="Logo"
           width={50}
           height={50}
           className="object-contain"
         />
+       </Link>
       </div>
 
       {/* Right Side Links */}
       <div className="flex space-x-6">
-        <a href="#about-us" className="hover:underline">
-          About Us
-        </a>
-        <a href="#our-show" className="hover:underline">
-          Our Show
-        </a>
-        <a href="#contact-us" className="hover:underline">
-          Contact Us
-        </a>
+        <Link href="/about-us" className="hover:underline">
+        আমাদের সম্পর্কে
+        </Link>
+        <Link href="/our-show" className="hover:underline">
+        আমাদের শো
+        </Link>
+        <Link href="/contact-us" className="hover:underline">
+        যোগাযোগ করুন
+        </Link>
       </div>
     </div>
   );

src/components/ui/TopRegularProgramSlider.tsx

@@ -1,28 +1,47 @@
 'use client';
-import React, { useState } from 'react';
+
+import React, { useRef, useState, useEffect } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Autoplay } from 'swiper/modules';
 import 'swiper/css';
-import imageUrls from '@/contexts/TopRegularProgramSliderData';
-
-const TopRegularProgramSlider = () => {
+import Image, { StaticImageData } from 'next/image';
+import { imageK } from '@/contexts/TopRegularProgramSliderData';
 
+interface ImageItem {
+  id: number;
+  image: StaticImageData;
+}
 
+const TopRegularProgramSlider: React.FC = () => {
   const [bgColor, setBgColor] = useState('bg-white');
   const [currentSlide, setCurrentSlide] = useState(1);
+  const progressCircle = useRef<SVGCircleElement>(null);
+  const progressContent = useRef<HTMLSpanElement>(null);
 
-  const handleBgColorChange = () => {
-    const colors = ['bg-white', 'bg-gray-100', 'bg-blue-50', 'bg-yellow-50'];
-    const nextColor = colors[(colors.indexOf(bgColor) + 1) % colors.length];
-    setBgColor(nextColor);
+  useEffect(() => {
+    setBgColor(currentSlide === 1 ? 'bg-white' : 'bg-gray-100');
+  }, [currentSlide]);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const onAutoplayTimeLeft = (swiper: any, time: number, progress: number) => {
+    if (progressCircle.current) {
+      progressCircle.current.style.setProperty('--progress', 1 - progress as never);
+    }
+    if (progressContent.current) {
+      progressContent.current.textContent = `${Math.ceil(time / 1000)}s`;
+    }
   };
 
   return (
-    <div className={`relative ${bgColor}`}>
-      <div className="absolute  flex items-center space-x-4">
-        <button onClick={handleBgColorChange}>Change Color</button>
-        <div>Current Slide: {currentSlide}</div>
+    <div className={`relative ${bgColor} py-8 px-4`}>
+      {/* Header */}
+      <div className="text-center mb-6">
+        <h1 className="text-3xl font-bold text-gray-800">
+          নিয়মিত প্রোগ্রাম সমূহ
+        </h1>
       </div>
+
+      {/* Swiper Slider */}
       <Swiper
         spaceBetween={50}
         slidesPerView={1}
@@ -33,20 +52,50 @@ const TopRegularProgramSlider = () => {
           disableOnInteraction: false,
         }}
         onSlideChange={(swiper) => setCurrentSlide(swiper.realIndex + 1)}
+        onAutoplayTimeLeft={onAutoplayTimeLeft}
       >
-        {imageUrls.map((url, index) => (
-          <SwiperSlide key={index}>
-            <img
-              src={url}
-              alt={`Image ${index + 1}`}
-              className="w-full h-auto object-cover"
-            />
+        {imageK.map((imageItem: ImageItem) => (
+          <SwiperSlide key={imageItem.id}>
+            <div className="flex justify-center">
+              <Image
+                src={imageItem.image}
+                alt={`Image ${imageItem.id}`}
+                className="w-full max-w-screen-lg object-cover rounded-md shadow-lg"
+                placeholder="blur" // Optional for Next.js images
+              />
+            </div>
           </SwiperSlide>
-
         ))}
-
+        {/* Autoplay Progress */}
+        <div className="autoplay-progress absolute bottom-4 right-4 w-12 h-12 flex items-center justify-center z-10">
+          <svg className="w-full h-full" viewBox="0 0 48 48">
+            <circle
+              ref={progressCircle}
+              cx="24"
+              cy="24"
+              r="20"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="4"
+              className="text-gray-300"
+              style={{
+                strokeDasharray: '125.6',
+                strokeDashoffset: `calc(125.6px * (1 - var(--progress, 0)))`,
+                transform: 'rotate(-90deg)',
+                transformOrigin: 'center',
+              }}
+            />
+          </svg>
+          <span ref={progressContent} className="text-sm font-semibold"></span>
+        </div>
       </Swiper>
-
+
+      {/* Current Slide Indicator */}
+      <div className="flex justify-center mt-4">
+        <span className="text-lg font-medium text-gray-600">
+          Item {currentSlide}
+        </span>
+      </div>
     </div>
   );
 };