ui-landing-page 6.1.0

package/src/components/LandingPage/common/ui-kit/organisms/QuaTangQuocHoi/QuaTangQuocHoiSection.tsx

@@ -0,0 +1,524 @@
+import { BaseSectionProps } from "@components/LandingPage/models/base-section";
+import { Field } from "../../types/base";
+import SectionFullScreen from "../../../SectionFullScreen";
+import InforSection from "./InforSection";
+import { useState } from "react";
+import { motion } from "framer-motion";
+import ContentTheme5 from "./ContentTheme5";
+import { LanguageProvider } from "./context/LanguageContext";
+
+interface QuaTangQuocHoiProps extends BaseSectionProps {
+  name?: Field<string>;
+  themes: any;
+}
+
+const QuaTangQuocHoiSection = ({ sectionData, themes }: QuaTangQuocHoiProps) => {
+  const name = sectionData?.name;
+  const nameValue = name?.value;
+  const theme = themes?.theme_layout || 1;
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  const handleOpenDrawer = () => {
+    setDrawerOpen(true);
+  };
+
+  const handleCloseDrawer = () => {
+    setDrawerOpen(false);
+  };
+  const renderThemeLayout = () => {
+    switch (theme) {
+      case 1:
+        return (
+          <div className="h-fit w-full overflow-y-auto">
+            <SectionFullScreen
+              name="qua-tang-quoc-hoi-section"
+              className="relative overflow-hidden min-h-screen flex items-start justify-center bg-[#020622] bg-cover bg-center bg-no-repeat bg-[url('https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/background-theme-1.webp')]"
+            >
+              <motion.div
+                className="flex flex-col items-center justify-center px-3 gap-4 text-center mt-16"
+                initial={{ opacity: 0, y: 50 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 1, ease: "easeOut" }}
+              >
+                <motion.div
+                  className="z-10"
+                  initial={{ opacity: 0, y: 100 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 1.2, delay: 0.5 }}
+                >
+                  <motion.img
+                    src="https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/logo-theme-1.webp"
+                    className="h-[97px]"
+                  />
+                </motion.div>
+                <motion.p
+                  className="text-normal font-medium text-white text-center font-roboto"
+                  initial={{ opacity: 0, y: 30 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.8, delay: 0.2 }}
+                >
+                  CHỦ TỊCH QUỐC HỘI NƯỚC CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM
+                </motion.p>
+                <div className="space-y-2">
+                  <motion.p
+                    className="text-4xl font-bold text-white"
+                    style={{ fontFamily: '"SVN-Sunflora", serif' }}
+                    initial={{ opacity: 0, scale: 0.8 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: 0.8, delay: 0.4 }}
+                  >
+                    TRẦN THANH MẪN
+                  </motion.p>
+                  <motion.p
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ duration: 0.6, delay: 0.6 }}
+                  >
+                    Kính tặng
+                  </motion.p>
+                  <motion.p
+                    className="font-svnSunflora text-3xl font-bold text-white"
+                    style={{ fontFamily: '"SVN-Sunflora", serif' }}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.8, delay: 0.8 }}
+                  >
+                    {nameValue || "Bà NGUYỄN THỊ BÍCH LAN"}
+                  </motion.p>
+                </div>
+              </motion.div>
+              <motion.div
+                className="absolute top-[60%] z-10"
+                initial={{ opacity: 0, y: 100 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 1.2, delay: 0.5 }}
+              >
+                <motion.img
+                  src="https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/trong-dong.webp"
+                  className="bottom-0 -z-[2] w-full"
+                  animate={{ rotate: 360 }}
+                  transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
+                />
+              </motion.div>
+
+              <motion.div
+                className="fixed bottom-[1%] z-20"
+                initial={{ opacity: 0, y: 30 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8, delay: 1.2 }}
+              >
+                <motion.button
+                  onClick={handleOpenDrawer}
+                  className="bg-transparent border-white border font-medium font-sfuagBuchStencil text-[#C8172B] px-4 py-2 rounded-3xl backdrop-blur-md hover:bg-white/10 transition-all duration-300"
+                  style={{ fontFamily: '"SFUAGBuchStencilBQMedium", sans-serif' }}
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                >
+                  Khám phá Toà nhà Quốc Hội
+                </motion.button>
+              </motion.div>
+              <div className="absolute bottom-[0] left-0 right-0 z-10">
+                <motion.img
+                  src="https://storage.nomion.io/Qua-tang-quoc-hoi/screen2-1-3.webp"
+                  className=" w-full h-[165px] object-cover"
+                  initial={{ opacity: 0, scale: 0.8 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ duration: 1, delay: 0.8 }}
+                />
+              </div>
+            </SectionFullScreen>
+            <motion.img
+              src="https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/chu-tich-quoc-hoi-info.webp"
+              className=" w-full h-full object-cover object-top"
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 1, delay: 0.8 }}
+            />
+          </div>
+        );
+
+      case 2:
+        return (
+          <div className="h-fit w-full overflow-y-auto">
+            <SectionFullScreen
+              name="qua-tang-quoc-hoi-section"
+              className="relative min-h-screen overflow-hidden flex items-start justify-center bg-[#020622] bg-cover bg-center bg-no-repeat bg-[url('https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/background-theme-1.webp')]"
+            >
+              <motion.div
+                className="flex flex-col items-center justify-center px-3 gap-4 text-center mt-16"
+                initial={{ opacity: 0, y: 50 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 1, ease: "easeOut" }}
+              >
+                <motion.div
+                  className="z-10"
+                  initial={{ opacity: 0, y: 100 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 1.2, delay: 0.5 }}
+                >
+                  <motion.img
+                    src="https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/logo-theme-1.webp"
+                    className="h-[97px]"
+                  />
+                </motion.div>
+                <motion.p
+                  className="text-normal font-medium text-white text-center font-roboto"
+                  initial={{ opacity: 0, y: 30 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.8, delay: 0.2 }}
+                >
+                  PHÓ CHỦ TỊCH QUỐC HỘI NƯỚC CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM
+                </motion.p>
+                <div className="space-y-2">
+                  <motion.p
+                    className="text-4xl font-bold text-white"
+                    style={{ fontFamily: '"SVN-Sunflora", serif' }}
+                    initial={{ opacity: 0, scale: 0.8 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: 0.8, delay: 0.4 }}
+                  >
+                    NGUYỄN THỊ THANH
+                  </motion.p>
+                  <motion.p
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ duration: 0.6, delay: 0.6 }}
+                  >
+                    Kính tặng
+                  </motion.p>
+                  <motion.p
+                    className="font-svnSunflora text-3xl font-bold text-white"
+                    style={{ fontFamily: '"SVN-Sunflora", serif' }}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.8, delay: 0.8 }}
+                  >
+                    {nameValue || "Bà NGUYỄN THỊ BÍCH LAN"}
+                  </motion.p>
+                </div>
+              </motion.div>
+              <motion.div
+                className="absolute top-[60%] z-10"
+                initial={{ opacity: 0, y: 100 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 1.2, delay: 0.5 }}
+              >
+                <motion.img
+                  src="https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/trong-dong.webp"
+                  className="bottom-0 -z-[2] w-full"
+                  animate={{ rotate: 360 }}
+                  transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
+                />
+              </motion.div>
+
+              <motion.div
+                className="fixed bottom-[1%] z-20"
+                initial={{ opacity: 0, y: 30 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8, delay: 1.2 }}
+              >
+                <motion.button
+                  onClick={handleOpenDrawer}
+                  className="bg-transparent border-white border font-medium font-sfuagBuchStencil text-[#C8172B] px-4 py-2 rounded-3xl backdrop-blur-sm hover:bg-white/10 transition-all duration-300"
+                  style={{ fontFamily: '"SFUAGBuchStencilBQMedium", sans-serif' }}
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                >
+                  Khám phá Toà nhà Quốc Hội
+                </motion.button>
+              </motion.div>
+              <div className="absolute bottom-[0] left-0 right-0 z-10">
+                <motion.img
+                  src="https://storage.nomion.io/Qua-tang-quoc-hoi/screen2-1-3.webp"
+                  className=" w-full h-[165px] object-cover"
+                  initial={{ opacity: 0, scale: 0.8 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ duration: 1, delay: 0.8 }}
+                />
+              </div>
+            </SectionFullScreen>
+            <motion.img
+              src="https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/pho-chu-tich-quoc-hoi-info.webp"
+              className=" w-full h-full object-cover object-top"
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 1, delay: 0.8 }}
+            />
+          </div>
+        );
+
+      case 3:
+        return (
+          <SectionFullScreen
+            name="qua-tang-quoc-hoi-section"
+            className="relative flex flex-col items-center justify-end bg-cover bg-center bg-no-repeat bg-[url('https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/section2-3-1.webp')]"
+          >
+            <motion.div
+              className="flex flex-col w-full items-center justify-center px-4 text-center text-[#395044] absolute top-[10%] transform -translate-x-1/2 -translate-y-1/2 z-20"
+              initial={{ opacity: 0, y: -50 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 1, ease: "easeOut" }}
+            >
+              <motion.p
+                className="text-2xl font-bold"
+                initial={{ opacity: 0, scale: 0.8 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ duration: 0.8, delay: 0.2 }}
+              >
+                BỘ THÁI BÌNH HƯNG BẢO
+              </motion.p>
+              <motion.p
+                className="text-2xl font-medium"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.6, delay: 0.4 }}
+              >
+                NÀY THUỘC VỀ
+              </motion.p>
+              <motion.p
+                className="text-[28px] font-semibold"
+                style={{ fontFamily: '"SVN-Sunflora", serif' }}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8, delay: 0.6 }}
+              >
+                {nameValue || "Bà NGUYỄN THỊ THANH"}
+              </motion.p>
+              <motion.p
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.6, delay: 0.8 }}
+              >
+                Được tặng bởi
+              </motion.p>
+              <motion.p
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.6, delay: 0.9 }}
+                className="mb-2"
+              >
+                Phó Chủ tịch Quốc hội nước Cộng Hoà Xã Hội Chủ Nghĩa Việt Nam
+              </motion.p>
+              <motion.p
+                className="text-2xl font-medium"
+                style={{ fontFamily: '"SVN-Sunflora", serif' }}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8, delay: 1.0 }}
+              >
+                UBND Tỉnh Ninh Bình
+              </motion.p>
+            </motion.div>
+
+            <motion.div
+              className="absolute bottom-0 left-0 right-0 z-10 w-100vw h-[400px]"
+              initial={{ opacity: 0, y: 100 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 1.2, delay: 0.5 }}
+            >
+              <img
+                src="https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/mountain.webp"
+                className="h-full w-full -z-[1]"
+              />
+              <motion.img
+                src="https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/trong-dong.webp"
+                className="absolute -top-1/2 left-0 right-0 bottom-0 -z-[2]"
+                animate={{ rotate: 360 }}
+                transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
+              />
+              <motion.img
+                src="https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/thai-binh-hung.webp"
+                className="absolute -top-24 left-0 right-0 bottom-0 h-full w-auto max-w-100vw object-cover"
+                initial={{ opacity: 0, scale: 0.8 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ duration: 1, delay: 0.8 }}
+              />
+            </motion.div>
+            <motion.div
+              className="absolute bottom-[4%] z-20"
+              initial={{ opacity: 0, y: 30 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 1.4 }}
+            >
+              <motion.button
+                onClick={handleOpenDrawer}
+                className="bg-transparent border-white border font-medium text-sm text-white px-4 py-2 rounded-3xl backdrop-blur-md hover:bg-white/10 transition-all duration-300"
+                style={{ fontFamily: '"SFUAGBuchStencilBQMedium", sans-serif' }}
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+              >
+                Khám phá Thái Bình Hưng Bảo
+              </motion.button>
+            </motion.div>
+          </SectionFullScreen>
+        );
+
+      case 4:
+        return (
+          <SectionFullScreen
+            name="qua-tang-quoc-hoi-section"
+            className="relative flex items-center justify-center bg-cover bg-center bg-no-repeat bg-[url('https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/section4-1.webp')]"
+          >
+            <div>
+              <motion.div
+                className="flex justify-center items-center mb-20"
+                initial={{ opacity: 0, scale: 0.5 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ duration: 0.8, ease: "easeOut" }}
+              >
+                <img
+                  src="https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/logo.webp"
+                  className="w-auto h-[58px]"
+                  alt="logo"
+                />
+              </motion.div>
+              <motion.div
+                className="flex flex-col items-center justify-center px-3 text-center"
+                initial={{ opacity: 0, y: 50 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 1, delay: 0.3 }}
+              >
+                <motion.p
+                  className="text-[20px] font-medium text-white text-center font-roboto"
+                  initial={{ opacity: 0, y: 30 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.8, delay: 0.5 }}
+                >
+                  VIỆN SÁNG TẠO VÀ CHUYỂN ĐỔI SỐ
+                </motion.p>
+                <div className="space-y-4">
+                  <motion.p
+                    className="text-[20px] text-white text-center font-roboto"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ duration: 0.6, delay: 0.7 }}
+                  >
+                    Kính tặng
+                  </motion.p>
+                  <motion.p
+                    className="text-2xl font-bold text-white"
+                    style={{ fontFamily: '"SVN-Sunflora", serif' }}
+                    initial={{ opacity: 0, scale: 0.8 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: 0.8, delay: 0.9 }}
+                  >
+                    CHỦ TỊCH QUỐC HỘI NƯỚC CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM
+                  </motion.p>
+                  <motion.p
+                    className="font-svnSunflora text-3xl font-bold text-white"
+                    style={{ fontFamily: '"SVN-Sunflora", serif' }}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.8, delay: 1.1 }}
+                  >
+                    {nameValue || "TRẦN THANH MẪN"}
+                  </motion.p>
+                </div>
+              </motion.div>
+              <motion.div
+                className="flex h-full flex-col items-center justify-center mt-20"
+                initial={{ opacity: 0, y: 30 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8, delay: 1.3 }}
+              >
+                <motion.button
+                  onClick={handleOpenDrawer}
+                  className="bg-transparent w-fit border-white border font-medium text-sm text-white px-4 py-2 rounded-3xl backdrop-blur-md hover:bg-white/10 transition-all duration-300"
+                  style={{ fontFamily: '"SFUAGBuchStencilBQMedium", sans-serif' }}
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                >
+                  <p>Tìm hiểu về </p>
+                  Viện Sáng Tạo và Chuyển đổi số
+                </motion.button>
+              </motion.div>
+            </div>
+          </SectionFullScreen>
+        );
+      case 5:
+        return (
+          <LanguageProvider>
+              <ContentTheme5 />
+          </LanguageProvider>
+        );
+      default:
+        // Fallback to theme 1 layout
+        return (
+          <SectionFullScreen
+            name="qua-tang-quoc-hoi-section"
+            className="relative flex items-start justify-center bg-[#020622] bg-cover bg-center bg-no-repeat bg-[url('https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/welcome-1.webp')]"
+          >
+            <motion.div
+              className="flex flex-col items-center justify-center px-3 gap-8 text-center mt-52"
+              initial={{ opacity: 0, y: 50 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 1, ease: "easeOut" }}
+            >
+              <motion.p
+                className="text-normal font-bold text-white text-center"
+                initial={{ opacity: 0, y: 30 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8, delay: 0.2 }}
+              >
+                CHỦ TỊCH QUỐC HỘI NƯỚC CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM
+              </motion.p>
+              <div className="space-y-4">
+                <motion.p
+                  className="text-4xl font-bold text-white"
+                  style={{ fontFamily: '"SVN-Sunflora", serif' }}
+                  initial={{ opacity: 0, scale: 0.8 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ duration: 0.8, delay: 0.4 }}
+                >
+                  TRẦN THANH MẪN
+                </motion.p>
+                <motion.p
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ duration: 0.6, delay: 0.6 }}
+                >
+                  Kính tặng
+                </motion.p>
+                <motion.p
+                  style={{ fontFamily: '"SVN-Sunflora", serif' }}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.8, delay: 0.8 }}
+                >
+                  {nameValue || "Bà NGUYỄN THỊ BÍCH LAN"}
+                </motion.p>
+              </div>
+            </motion.div>
+            <motion.div
+              className="absolute bottom-[2%]"
+              initial={{ opacity: 0, y: 30 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 1.2 }}
+            >
+              <motion.button
+                onClick={handleOpenDrawer}
+                className="bg-transparent border-white border font-medium text-md text-[#C8172B] px-4 py-2 rounded-3xl backdrop-blur-md hover:bg-white/10 transition-all duration-300"
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+              >
+                Khám phá Toà nhà Quốc Hội
+              </motion.button>
+            </motion.div>
+          </SectionFullScreen>
+        );
+    }
+  };
+
+  return (
+    <>
+      {renderThemeLayout()}
+      <InforSection
+        theme={theme}
+        open={drawerOpen}
+        onClose={handleCloseDrawer}
+      />
+    </>
+  );
+};
+
+export default QuaTangQuocHoiSection;

package/src/components/LandingPage/common/ui-kit/organisms/QuaTangQuocHoi/components/LanguageSwitcher.tsx

@@ -0,0 +1,77 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Globe, CaretDown } from "@phosphor-icons/react";
+import { useLanguage } from "../hook/useLanguage";
+import { Language } from "../types";
+
+const LanguageSwitcher: React.FC = () => {
+  const { language, switchLanguage } = useLanguage();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const handleLanguageSelect = (lang: Language) => {
+    switchLanguage(lang as Language);
+    setIsOpen(false);
+  };
+
+  return (
+    <div
+      className="relative"
+      ref={dropdownRef}
+    >
+      {/* Dropdown Button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 px-1 py-1 border border-white rounded-full text-white font-bold text-sm transition-colors font-roboto"
+      >
+        <Globe
+          size={16}
+          weight="light"
+        />
+        <span className="uppercase">{language}</span>
+        <CaretDown
+          size={16}
+          weight="light"
+          className={`transition-transform ${isOpen ? "rotate-180" : ""}`}
+        />
+      </button>
+
+      {/* Dropdown Menu */}
+      {isOpen && (
+        <div className="absolute top-full left-0 mt-2 w-full bg-white border border-white rounded-lg shadow-lg z-50">
+          <button
+            onClick={() => handleLanguageSelect("en")}
+            className={`w-full px-4 py-2 text-left text-sm font-medium transition-colors rounded-t-lg ${
+              language === "en" ? "bg-[#BF150B] text-white" : "text-gray-700 hover:bg-gray-100"
+            }`}
+          >
+            EN
+          </button>
+          <button
+            onClick={() => handleLanguageSelect("fr")}
+            className={`w-full px-4 py-2 text-left text-sm font-medium transition-colors ${
+              language === "fr" ? "bg-[#BF150B] text-white" : "text-gray-700 hover:bg-gray-100"
+            }`}
+          >
+            FR
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LanguageSwitcher;