radiochilmari award images add

src/components/pages/home/Home.tsx

@@ -6,40 +6,54 @@ import HoursCard from "@/components/ui/HoursCard";
 import OurFacebookNews from "@/components/ui/OurFacebookNews";
 import RdrsProgram from "@/components/ui/RdrsProgram";
 import BackgroundHero from "@/components/ui/BackgroundHero";
+import Award from "@/components/ui/Award";
+import Testimonials from "@/components/ui/Testimonials";
+import RadioPlayer from "@/components/ui/RadioPlayer";
 
 const Home = () => {
   return (
     <div className="bg-gray-100 dark:bg-gray-900">
       {/* Main Content */}
       <main className="p-6">
+        {/* Background Hero Section */}
         <BackgroundHero />
+
+    <RadioPlayer />
+
         {/* Slider Section */}
-        <section>
+        <section className="my-8">
           <TopRegularProgramSlider />
         </section>
 
         {/* Facebook Page Section */}
         <section className="my-8">
-          <RadioChilmariFacebookPage pageHref={""} />
+          <RadioChilmariFacebookPage pageHref="https://www.facebook.com/radiochilmari" />
         </section>
+        <hr className="" />
 
-        {/* Facebook News Section */}
-        <section className="my-8">
-          <OurFacebookNews />
-        </section>
 
         {/* Hours Card Section */}
         <section className="my-8">
           <HoursCard />
         </section>
 
-        <RdrsProgram />
+        {/* RDRS Program Section */}
+        <section className="my-8">
+          <RdrsProgram />
+        </section>
+        <Testimonials />
+        <section>
+        <Award />
+        </section>
+
+
         {/* Video Embed Section */}
         <section className="my-8">
-          {/* Uncomment if needed */}
           <FacebookVideoEmbed />
         </section>
       </main>
+
+
     </div>
   );
 };

src/components/ui/Award.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import React from "react";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import { AwardImages } from "@/contexts/Award99.2";
+import Image from "next/image";
+import { StaticImport } from "next/dist/shared/lib/get-img-props";
+
+// Type for image import
+type AwardImage = StaticImport; 
+
+// React component
+const Award: React.FC = () => {
+  // Slick carousel settings
+  const settings = {
+    className: "center",
+    infinite: true,
+    centerPadding: "60px",
+    slidesToShow: 5,
+    swipeToSlide: true,
+    afterChange: function(index: number) {
+      console.log(
+        `Slider Changed to: ${index + 1}, background: #222; color: #bada55`
+      );
+    }
+  };
+
+  return (
+    <div className="award-carousel-container">
+      <Slider {...settings}>
+        {AwardImages.map((image, index) => (
+          <div key={index} className="award-slide">
+            <Image
+              src={image as AwardImage} // Type assertion to StaticImport
+              alt={`Award ${index + 1}`}
+              width={500} // Customize the width as needed
+              height={300} // Customize the height as needed
+            />
+          </div>
+        ))}
+      </Slider>
+    </div>
+  );
+};
+
+export default Award;

src/components/ui/BackgroundHero.tsx

@@ -1,23 +1,25 @@
 import React from "react";
-import BackgroundHeroImages from "@/assets/images/radiochilmar_bg-logo.jpg";
 import Image from "next/image";
+import BackgroundHeroImages from "@/assets/images/radiochilmar_bg-logo.jpg";
 
 const BackgroundHero = () => {
   return (
-    <div className="relative mt-20 w-full">
+    <div className="relative w-full h-[50vh] lg:h-[70vh] mt-20">
+      {/* Background Image */}
       <Image
         src={BackgroundHeroImages}
-        alt="Background Image"
-        className="object-cover object-center w-full h-full"
+        alt="Radio Chilmari Background"
+        className="object-cover w-full h-full"
+        priority
       />
 
-      {/* Background overlay */}
+      {/* Background Overlay */}
       <div className="absolute inset-0 bg-black bg-opacity-50"></div>
 
-      {/* Content
-      <div className="absolute inset-0 flex flex-col items-center justify-center">
-        <h1 className="text-4xl md:text-5xl lg:text-6xl text-white font-bold">Hello, World!</h1>
-        <p className="text-lg md:text-xl text-white mt-4">This is a text</p>
+      {/* Optional Content */}
+      {/* <div className="absolute inset-0 flex flex-col items-center justify-center text-center text-white">
+        <h1 className="text-4xl md:text-5xl font-bold">Welcome to Radio Chilmari</h1>
+        <p className="mt-4 text-lg md:text-xl">Connecting hearts through radio</p>
       </div> */}
     </div>
   );

src/components/ui/CenteredCard.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+const CenteredCard: React.FC = () => {
+  return (
+    <div className="flex justify-center items-center  bg-gray-100">
+      <div className="p-6 max-w-xl bg-white rounded-lg shadow-lg border border-gray-300 text-center">
+        <h2 className="text-xl md:text-2xl lg:text-3xl font-bold text-purple-600 mb-4">
+          নারীর অধিকার এবং নারী ও শিশু সম্পর্কিত প্রোগ্রাম
+        </h2>
+        <p className="text-sm sm:text-base md:text-lg lg:text-xl text-gray-700">
+          নারীর অধিকার এবং নারী ও শিশু সম্পর্কিত প্রোগ্রামগুলি সচেতনতা সৃষ্টি, তথ্য
+          প্রদান এবং সমাজে ইতিবাচক পরিবর্তন আনার জন্য প্রচারিত হয়। এসব প্রোগ্রামে
+          নারীদের আইনি অধিকার, গার্হস্থ্য সহিংসতা, শিশুদের শিক্ষা ও সুরক্ষা,
+          স্বাস্থ্য সচেতনতা, এবং নারী উদ্যোক্তাদের সাফল্য তুলে ধরা হয়। এছাড়া, শিশু
+          শ্রম, পাচার ও নির্যাতন রোধে সচেতনতা তৈরি করা হয়, যা নারী ও শিশুদের
+          নিরাপত্তা এবং সমান অধিকার নিশ্চিত করতে সহায়ক।
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default CenteredCard;

src/components/ui/CookieConsent.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+
+const CookieConsent: React.FC = () => {
+  // State to control the visibility of the cookie consent
+  const [isVisible, setIsVisible] = useState<boolean>(true);
+
+  // Function to handle the "Accept" button click
+  const handleAccept = () => {
+    // Set the cookie to indicate consent has been given (or use localStorage)
+    localStorage.setItem("cookieConsent", "true");
+    setIsVisible(false); // Hide the cookie consent popup
+  };
+
+  // Check if the user has already accepted cookies
+  const hasAcceptedCookies = localStorage.getItem("cookieConsent");
+
+  // If cookies are accepted, don't show the banner
+  if (hasAcceptedCookies) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`fixed bottom-12 left-1/2 z-50 -translate-x-1/2 rounded-full bg-white dark:bg-gray-800 p-4 drop-shadow-2xl w-11/12 sm:w-1/2 ${
+        isVisible ? "block" : "hidden"
+      }`}
+      id="gdpr"
+    >
+      <div className="flex items-center justify-between gap-6 text-sm">
+        <div className="content-left pl-4 dark:text-white">
+          This website uses cookies to improve your web experience.
+        </div>
+        <div className="content-right text-end">
+          <button
+            onClick={handleAccept}
+            className="cursor-pointer rounded-full bg-black dark:bg-gray-600 px-4 py-2 text-white"
+          >
+            Accept
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CookieConsent;

src/components/ui/FacebookPage.tsx

@@ -1,69 +1,47 @@
 "use client";
 
-import { useEffect } from "react";
+import React, { useEffect } from "react";
+import Image from "next/image";
 import OurFacebookNewsData from "@/contexts/OurFacebookNewsData";
 import readio_icon from "@/assets/icons/readio_icon.png";
-import Image from "next/image";
-
-interface RadioChilmariFacebookPageProps {
-  pageHref: string;
-  width?: number | string;
-  height?: number | string;
-}
 
-const RadioChilmariFacebookPage = ({}: RadioChilmariFacebookPageProps) => {
+const RadioChilmariFacebookPage = ({ pageHref }: { pageHref: string }) => {
   useEffect(() => {
-    // Load the Facebook SDK
     if (!document.getElementById("facebook-jssdk")) {
       const script = document.createElement("script");
       script.id = "facebook-jssdk";
+      script.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v17.0";
       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 className="my-8 text-center">
-      <span className="text-sm sm:text-lg md:text-xl lg:text-xl  text-blue-600 dark:text-gray-100 text-center font-extrabold">
-        আমাদের অফিসিয়াল ফেসবুক পেজ l
-      </span>
-      <div className="flex flex-col lg:flex-row items-center justify-between bg-gray-100 dark:bg-gray-900 p-6 gap-6">
-        {/* Left Side: Text Content (Bangla) */}
-        <div className="max-w-lg text-center lg:text-left">
-          <Image className="mx-auto mb-4" src={readio_icon} alt="Image" width={100} height={100} />
-          <h1 className="text-sm sm:text-lg md:text-xl lg:text-2xl font-bold text-purple-800 dark:text-gray-100">
+    <div className="my-8 text-center h-screen">
+      <h2 className="text-2xl font-bold text-blue-600 dark:text-gray-100">আমাদের অফিসিয়াল ফেসবুক পেজ</h2>
+      <div className="flex flex-col lg:flex-row items-center gap-6 p-6 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-md">
+        {/* Left: Description */}
+        <div className="text-center lg:text-left">
+          <Image src={readio_icon} alt="Radio Chilmari" width={80} height={80} className="mx-auto lg:mx-0 mb-4" />
+          <h3 className="text-xl font-bold text-purple-700 dark:text-gray-100">
             {OurFacebookNewsData.title_1}
-          </h1>
-          <p className="mt-4 text-gray-900 dark:text-gray-300">
-            {OurFacebookNewsData.description}
-          </p>
+          </h3>
+          <p className="text-gray-700 dark:text-gray-300 mt-2">{OurFacebookNewsData.description}</p>
         </div>
 
-        {/* Right Side: Facebook Page Embed */}
-        <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
+        {/* Right: Facebook Embed */}
+        <div className="w-full max-w-md bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
           <div
             className="fb-page"
-            data-href="https://www.facebook.com/radiochilmari"
+            data-href={pageHref}
             data-tabs="timeline"
-            data-width="400"
-            data-height="500"
+            data-width=""
+            data-height="400"
             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>
     </div>

src/components/ui/HoursCard.tsx

@@ -64,8 +64,9 @@ const HoursCard: React.FC = () => {
   ];
 
   return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-100">
-      <div className="w-full max-w-screen-lg bg-white shadow-lg rounded-lg p-6">
+   <div className="container m-auto">
+     <div className="justify-center items-center bg-gray-100">
+      <div className="">
         <h2 className="text-2xl font-bold text-center text-green-600 mb-4">
           অনুষ্ঠানের সময়সূচি
         </h2>
@@ -88,6 +89,7 @@ const HoursCard: React.FC = () => {
         </ul>
       </div>
     </div>
+   </div>
   );
 };