LiveChat facebook

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "XFBML"
+    ]
+}

src/components/pages/home/Home.tsx

@@ -5,14 +5,16 @@ import RadioChilmariFacebookPage from '@/components/ui/FacebookPage';
 import HoursCard from '@/components/ui/HoursCard';
 import OurFacebookNews from '@/components/ui/OurFacebookNews';
 import RdrsProgram from '@/components/ui/RdrsProgram';
+import BackgroundHero from '@/components/ui/BackgroundHero';
 
 const Home = () => {
   return (
     <div className="bg-gray-100 dark:bg-gray-900">
 
+
       {/* Main Content */}
       <main className="p-6">
-
+      <BackgroundHero />
         {/* Slider Section */}
         <section>
           <TopRegularProgramSlider />

src/components/ui/BackgroundHero.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import BackgroundHeroImages from "@/assets/images/radiochilmar_bg-logo.jpg"
+import Image from 'next/image'
+
+const BackgroundHero = () => {
+  return (
+    <div className="relative mt-20 w-full">
+      <Image
+        src={BackgroundHeroImages}
+        alt="Background Image" 
+        className="object-cover object-center w-full h-full" 
+      />
+
+
+      {/* 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>
+      </div> */}
+    </div>
+  )
+}
+
+export default BackgroundHero

src/components/ui/LiveChat.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from 'react'
+
+const LiveChat = () => {
+  useEffect(() => {
+    // Load Facebook SDK for Messenger
+    const loadFacebookMessenger = () => {
+      // Create a script tag to load the SDK
+      const script = document.createElement("script");
+      script.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
+      script.async = true;
+      document.body.appendChild(script);
+    };
+
+    loadFacebookMessenger();
+  }, []);
+
+  return (
+    <>
+      <div id="fb-root"></div>
+
+      {/* Facebook Messenger Chat Plugin */}
+      <div 
+        className="fb-customerchat"
+        // attribution="setup_tool"
+        // page_id="your-facebook-page-id"  // Replace with your Facebook Page ID
+        // theme_color="#0084ff"
+        // logged_in_greeting="Hi! How can we help you?"
+        // logged_out_greeting="Goodbye! See you again soon."
+      ></div>
+    </>
+  )
+}
+
+export default LiveChat