ui-landing-page 6.1.0

package/src/components/LandingPage/common/ui-kit/organisms/QuaTangQuocHoi/constant/data.ts

@@ -0,0 +1,87 @@
+export const quaTangQuocHoiData = {
+  mainTitle: "TOÀ NHÀ QUỐC HỘI VIỆT NAM",
+  introduction:
+    "Toạ lạc tại trung tâm chính trị Ba Đình, toà nhà Quốc hội không chỉ là trụ sở làm việc của Quốc hội Việt Nam - biểu tượng quyền lực nhà nước, nơi quyết định những vấn đề quan trọng liên quan trực tiếp đến tương lai của đất nước, mà còn là điểm đến giàu giá trị văn hoá, khơi dậy niềm tự hào dân tộc trong lòng mỗi người dân Việt Nam. Toà nhà không chỉ là nơi diễn ra các kì họp quan trọng mà còn là công trình văn hoá sở hữu thiết kế độc đáo giao thoa giữa nét kiến trúc truyền thống và phong cách hiện đại, cùng với hầm trưng bày các di tích khảo cổ quý báu của thời kì Thăng Long.",
+
+  history: {
+    title: "Lược sử hình thành",
+    content:
+      "Toà nhà Quốc hội ngày nay được xây dựng trên nền Hội trường Ba Đình cũ vào ngày 12/10/2009 và chính thức khánh thành và đi vào hoạt động từ ngày 20/10/2014. Việc xây dựng trên mảnh đất giàu truyền thống lịch sử này thể hiện sự kế thừa, tôn trọng quá khứ, làm tiền đề cho sự phát triển của hệ thống quyền lực cao nhất cả nước. Đồng thời, công trình còn mang đậm tư tưởng Hồ Chí Minh, với quan điểm quyền lực thuộc về nhân dân",
+  },
+
+  architecture: {
+    title: "KIẾN TRÚC & THIẾT KẾ",
+    bánhChưngBánhGiày: {
+      title: "Bánh chưng, bánh giày",
+      content:
+        "Bánh chưng, bánh giày là biểu tượng của **Trời tròn, Đất vuông**, với hình tròn tượng trưng cho người cha (Mặt Trời) và hình vuông tượng trưng cho người mẹ (Đất). Đây là quan niệm cổ truyền về mối liên hệ giữa con người với vũ trụ, giữa thế giới vật chất và tinh thần.",
+    },
+    hìnhKhối: {
+      title: "Hình khối",
+      content:
+        "Toà nhà được thiết kế với khối vuông vững chãi, tượng trưng cho sức mạnh và sự ổn định của chính quyền nhân dân. Phần mái vòm tròn ở trên đỉnh toà nhà gợi nhớ đến trống đồng - biểu tượng của văn hoá cổ đại Việt Nam và quyền lực, sự thống nhất dân tộc.",
+    },
+    mặtTiền: {
+      title: "Mặt tiền",
+      content:
+        "Mặt tiền được phủ bằng các tấm kính màu vàng, lấy cảm hứng từ hoa văn lá cờ tổ quốc và tranh dân gian **Tứ quý** (Tùng, Cúc, Trúc, Mai), tượng trưng cho bốn mùa và những phẩm chất tốt đẹp của con người. Hệ thống che nắng bằng đá tạo cảm giác vừa hiện đại vừa thân quen, gợi nhớ đến chiếu tre trong văn hoá làng quê Việt Nam.",
+    },
+    vậtLiệu: {
+      title: "Vật liệu",
+      content:
+        "Sử dụng các vật liệu nội thất cao cấp và truyền thống như gỗ lim, gỗ hương và đá ốp lát địa phương, thể hiện tinh thần tự lực tự cường và tôn vinh nguồn tài nguyên bản địa. Hệ thống che nắng bằng đá tạo cảm giác vừa hiện đại vừa thân quen, gợi nhớ đến chiếu tre trong văn hoá làng quê Việt Nam.",
+    },
+  },
+
+  functionalRooms: {
+    title: "Các phòng chức năng của nhà Quốc hội Việt Nam",
+    rooms: [
+      {
+        name: "PHÒNG HỌP DIÊN HỒNG",
+        description:
+          "là phòng họp chính của Nhà Quốc hội, nơi tổ chức các phiên họp toàn thể để bàn thảo và quyết định các vấn đề lớn của đất nước. Tên gọi Diên Hồng lấy cảm hứng từ hội nghị dân chủ đầu tiên trong lịch sử Việt Nam vào cuối năm 1284, khi Thượng hoàng Trần Thánh Tông họp bàn với các bô lão cả nước quyết định phương án đánh quân Nguyên - Mông. Phòng họp có 2 tầng với thiết kế hình vòng cung. Tầng một gồm 575 ghế (tự động xếp hàng thẳng tắp, có thể tự lùi 15cm cũng như xoay 360 độ mà ko hề gây ra bất cứ tiếng động nào, và khi thả tay, ghế sẽ tự động trở về vị trí cũ) dành cho đại biểu Quốc hội. Tầng hai có 393 ghế cho khách mời và đại biểu dự thính. Bên trong được trang bị hệ thống công nghệ hiện đại, tiên tiến như: thiết bị điểm danh, biểu quyết điện tử, màn hình lớn để phục vụ theo dõi và phát sóng trực tiếp. Đặc biệt, hệ thống chiếu sáng phía trên trần phòng có hàng nghìn bóng đèn công suất lớn, tạo không gian sáng sủa và trang trọng.",
+        imageCaption: "(Hình ảnh: Phòng họp Diên Hồng)",
+        image: "https://storage.nomion.io/Qua-tang-quoc-hoi/screen2-1-8.webp",
+      },
+      {
+        name: "PHÒNG HỌP TÂN TRÀO",
+        description:
+          "nằm ở tầng 2 của toà nhà Quốc hội, là nơi diễn ra các phiên họp của Uỷ ban Thường vụ Quốc hội và là cơ quan thực hiện các nhiệm vụ quan trọng diễn ra trong khoảng thời gian Quốc hội không họp. Không gian bên trong được bài trí bằng các ghế ngồi hình ô van. Phòng được thiết kế hiện đại, mang dáng dấp của kiến trúc Châu Âu nhưng được cải tiến hài hoà cùng với nhu cầu văn hoá người Viêt.",
+        imageCaption: "(Hình ảnh: Phòng họp Tân Trào)",
+        image: "https://storage.nomion.io/Qua-tang-quoc-hoi/screen2-1-9.webp",
+      },
+      {
+        name: "PHÒNG THĂNG LONG",
+        description:
+          "nằm tại Sảnh trung tâm tầng 1 của nhà Quốc hội. là phòng họp đa năng lớn nhất, phù hợp cho các sự kiện trọng đại như hội nghị hoặc tiệc, với sức chứa lên đến 800 đại biểu. Hơn thế, phòng còn được trang bị hệ thống phân chia linh hoạt, cho phép tách thành 2, 3 phòng nhỏ để đáp ứng nhu cầu tổ chức các sự kiện khác nhau.",
+        imageCaption: "(Hình ảnh: Phòng Thăng Long)",
+        image: "https://storage.nomion.io/Qua-tang-quoc-hoi/screen2-1-10.webp",
+      },
+      {
+        name: "PHÒNG HỌP ĐOÀN ĐẠI BIỂU QUỐC HỘI ",
+        description:
+          "là nơi các đại biểu thảo luận trước những nội dung thuộc kỳ họp, trước khi đưa ra quyết định tại phiên họp toàn thể. Khu vực phòng họp này được bố trí linh hoạt tại tầng 1, tầng 2 và tầng 4 của tòa nhà. Thiết kế phòng mang tính linh động cao, có hệ thống ngăn di động (đóng mở khi cần thiết), tạo thành không gian phù hợp cho các cuộc họp Đại biểu Quốc hội.",
+        imageCaption: "(Hình ảnh: Phòng Thăng Long)",
+        image: "",
+      },
+    ],
+    exhibition: {
+      description:
+        "Ngoài ra, trong toà nhà Quốc hội còn có: Trung tâm Báo chí (nơi tổ chức các buổi họp báo trước và sau mỗi kỳ họp), Bảo tàng Quốc hội (Phòng Truyền thống Quốc hội, nơi trưng bày hình ảnh và hiện vật tái hiện hành trình hình thành và phát triển của Quốc hội Việt Nam từ năm 1946 đến nay), Thư viện Quốc hội, Phòng trưng bày di vật khảo cổ dưới lòng đất tái hiện sống động lịch sử kinh thành Thăng Long xưa",
+    },
+  },
+
+  images: {
+    mainImage: "https://storage.nomion.io/Qua-tang-quoc-hoi/screen2-1-1.webp",
+    exterior: "https://storage.nomion.io/Qua-tang-quoc-hoi/screen2-1-2.webp",
+    exteriorLarge: "https://storage.nomion.io/Qua-tang-quoc-hoi/screen2-1-3.webp",
+    architecturalModel: "https://storage.nomion.io/Qua-tang-quoc-hoi/screen2-1-4.webp",
+    auditorium: "https://storage.nomion.io/Qua-tang-quoc-hoi/screen2-1-5.webp",
+    cityscape: "https://storage.nomion.io/Qua-tang-quoc-hoi/screen2-1-6.webp",
+    cityscape2: "https://storage.nomion.io/Qua-tang-quoc-hoi/screen2-1-7.webp",
+    terracottaArtifacts1: "https://storage.nomion.io/Qua-tang-quoc-hoi/screen2-1-12.webp",
+    terracottaArtifacts: "https://storage.nomion.io/Qua-tang-quoc-hoi/screen2-1-14.webp",
+    exhibitionHall: "https://storage.nomion.io/Qua-tang-quoc-hoi/screen2-1-15.webp",
+    wallRelief: "https://storage.nomion.io/Qua-tang-quoc-hoi/screen2-1-13.webp",
+  },
+};

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

@@ -0,0 +1,81 @@
+import React, { createContext, useContext, useState, ReactNode } from "react";
+import { Language, LanguageData, LanguageContextType } from "../types";
+import enData from "../locale/en.json";
+
+const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
+
+interface LanguageProviderProps {
+  children: ReactNode;
+}
+
+export const LanguageProvider: React.FC<LanguageProviderProps> = ({ children }) => {
+  const [language, setLanguage] = useState<Language>("en");
+  const [languageData, setLanguageData] = useState<LanguageData>(enData as unknown as LanguageData);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Load language data from JSON files
+  const loadLanguageData = async (lang: Language) => {
+    setIsLoading(true);
+    try {
+      const data = await import(`../locale/${lang}.json`);
+      setLanguageData(data.default);
+    } catch (error) {
+      console.error(`Failed to load language data for ${lang}:`, error);
+      // Fallback to English if loading fails
+      if (lang !== "en") {
+        try {
+          const fallbackData = await import("../locale/en.json");
+          setLanguageData(fallbackData.default as unknown as LanguageData);
+        } catch (fallbackError) {
+          console.error("Failed to load fallback language data:", fallbackError);
+        }
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Switch language
+  const switchLanguage = (newLang: Language) => {
+    setLanguage(newLang);
+    loadLanguageData(newLang);
+  };
+
+  // Get translation by key
+  const t = (key: string): any => {
+    if (!languageData) return key;
+
+    const keys = key.split(".");
+    let value: any = languageData;
+
+    for (const k of keys) {
+      if (value && typeof value === "object" && k in value) {
+        value = value[k];
+      } else {
+        return key; // Return key if translation not found
+      }
+    }
+
+    return value;
+  };
+
+  const contextValue: LanguageContextType = {
+    language,
+    setLanguage,
+    languageData,
+    setLanguageData,
+    isLoading,
+    switchLanguage,
+    t,
+  };
+
+  return <LanguageContext.Provider value={contextValue}>{children}</LanguageContext.Provider>;
+};
+
+export const useLanguageContext = (): LanguageContextType => {
+  const context = useContext(LanguageContext);
+  if (context === undefined) {
+    throw new Error("useLanguageContext must be used within a LanguageProvider");
+  }
+  return context;
+};

package/src/components/LandingPage/common/ui-kit/organisms/QuaTangQuocHoi/hook/useLanguage.ts

@@ -0,0 +1,13 @@
+import { useLanguageContext } from "../context/LanguageContext";
+
+export const useLanguage = () => {
+  const context = useLanguageContext();
+
+  return {
+    language: context.language,
+    switchLanguage: context.switchLanguage,
+    t: context.t,
+    languageData: context.languageData,
+    isLoading: context.isLoading,
+  };
+};

package/src/components/LandingPage/common/ui-kit/organisms/QuaTangQuocHoi/index.ts

@@ -0,0 +1,2 @@
+export { default as InforSection } from "./InforSection";
+export { default as QuaTangQuocHoiSection } from "./QuaTangQuocHoiSection";

package/src/components/LandingPage/common/ui-kit/organisms/QuaTangQuocHoi/locale/en.json

@@ -0,0 +1,39 @@
+{
+  "header": {
+    "name": "Hon. Le Thu Ha",
+    "candidacy": "With compliments of\nHon. Le Thu Ha\nVice Chairwoman,\nOffice of the\nNational Assembly\nSocialist Republic of\nViet Nam",
+    "readMoreButton": "Read more"
+  },
+  "about": {
+    "title": "About",
+    "subtitle": "The Honorable",
+    "name":"LE THU HA",
+    "description": "Hon. Le Thu Ha, born on 26 November 1968 in Hà Nội, Viet Nam, is a senior parliamentary administrator and two-term legislator with more than three decades of experience in parliamentary administration, inter-parliamentary diplomacy, and legislative leadership. She is committed to strengthening the independence, efficiency, and professionalism of parliamentary secretariats worldwide."
+  },
+  "education": {
+    "title": "Education",
+    "description": "Hon. Ha holds a Master of Public Policy from the National University of Singapore (1998) and a Bachelor of Science from Vietnam National University, Hanoi (1990). She has also completed executive and professional development programmes in the United States, Japan, Canada, Russia, and Singapore, further broadening her perspectives on governance and international cooperation."
+  },
+  "career": {
+    "title": "Career",
+    "startYear": "1990",
+    "organization": "National Assembly of Viet Nam",
+    "description": "Beginning her parliamentary service in",
+    "text-2": ", Hon. Ha has dedicated her career to advancing the effectiveness and international engagement of the",
+    "currentRole": "She currently serves as Vice Chair of the Office of the National Assembly (since March 2025), where she oversees the strategic coordination of legislative, oversight, and international relations activities, ensuring professionalism, transparency, and effective support to the National Assembly and its members. From 2022 to 2025, she was Vice Chair of the Foreign Affairs Committee, directing parliamentary diplomacy and overseeing foreign policy and international agreements. She was elected Member of the National Assembly for both the 14th (2016–2021) and 15th (2021–2026) legislatures, contributing administrative insight to law-making, oversight, and constituency work. Earlier, she served as Director of the Foreign Affairs Department of the Office of the National Assembly, and as Deputy Consul General of Viet Nam in San Francisco, United States, where she strengthened bilateral and parliamentary ties and expanded Viet Nam’s network of international partners.",
+    "previousRoles1": "Throughout her career, Hon. Ha has been deeply engaged in multilateral parliamentary diplomacy. She played a pivotal role as Deputy Secretary-General of the National Organizing Committee for the 132nd Inter-Parliamentary Union (IPU) Assembly held in Hà Nội in 2015, working closely with the IPU",
+    "previousRoles2": "Secretariat to deliver a landmark gathering of over 160 national parliaments and leading to the adoption of the “Hà Nội Declaration,” which affirmed the central role of parliaments in implementing the 2030 Agenda for Sustainable Development. She has directed and hosted numerous regional IPU meetings and thematic conferences in Viet Nam, further elevating the country’s parliamentary profile and strengthening links with parliamentary secretariats worldwide.",
+    "previousRoles3": "is a regular participant and speaker at major inter-parliamentary forums",
+    "she": "She",
+    "ipu":"IPU AIPA APPF"
+  },
+  "internationalEngagement": {
+    "title": "International Engagement",
+    "description": "Hon. Ha is a regular participant and speaker at major inter-parliamentary forums including the IPU, the ASEAN Inter-Parliamentary Assembly (AIPA), and the Asia-Pacific Parliamentary Forum (APPF). In these arenas, she has consistently championed gender equality and the political participation of women, advancing objectives closely aligned with the mission of the ASGP.\n\nFluent in English and Russian, with a working knowledge of French, Hon. Ha brings strategic leadership, multilateral diplomacy, and organizational management skills to every role she undertakes. She joined the Association of Secretaries General of Parliaments in 2025 and remains firmly committed to advancing its mission of strengthening parliamentary institutions and fostering international best practices."
+  },
+  "common": {
+    "language": "Language",
+    "english": "English",
+    "french": "French"
+  }
+}

package/src/components/LandingPage/common/ui-kit/organisms/QuaTangQuocHoi/locale/fr.json

@@ -0,0 +1,39 @@
+{
+  "header": {
+    "name": "Mme. Le Thu Ha",
+    "candidacy": "Avec les\ncompliments de\nMme Le Thu Ha\nVice-présidente du\nBureau de\nl'Assemblée\nnationale du\nVietnam",
+    "readMoreButton": "En savoir plus"
+  },
+  "about": {
+    "title": "À propos",
+    "subtitle": "L'honorable Mme",
+    "name": "LE THU HA",
+    "description": "Mme Le Thu Ha, née le 26 novembre 1968 à Hanoï (Vietnam), est fonctionnaire de longue date travaillant dans l’administration parlementaire et députée élue pour deux législatures, disposant plus de trente ans d’expérience dans l’administration parlementaire, la diplomatie interparlementaire et le leadership législatif. Elle s’est engagée tout au long de sa carrière à renforcer l’indépendance, l’efficacité et le professionnalisme des secrétariats parlementaires à travers le monde."
+  },
+  "education": {
+    "title": "Formation",
+    "description": "Mme Ha est titulaire d’un Master en politiques publiques de l’Université nationale de Singapour (1998) et d’une Licence ès sciences de l’Université nationale du Vietnam à Hanoï (1990). Elle a également suivi plusieurs programmes de formation des cadres et de perfectionnement professionnel aux États-Unis, au Japon, au Canada, en Russie et à Singapour, enrichissant ainsi sa vision sur la gouvernance et la coopération internationale."
+  },
+  "career": {
+    "title": "Carrière",
+    "startYear": "1990",
+    "organization": "l’Assemblée nationale du Vietnam",
+    "description": "Ayant apporté ses services au Parlement dès",
+    "text-2": ", Mme Hà a consacré sa carrière au renforcement de l’efficacité et de l’engagement de ",
+    "currentRole": "Elle occupe actuellement le poste de vice-présidente du Bureau de l’Assemblée nationale (depuis mars 2025), où elle assure la coordination stratégique des activités relatives à la législation, la supervision et les relations internationales, en veillant au professionnalisme, à la transparence et en devenant un appui efficace à l’Assemblée nationale. De 2022 à 2025, elle a exercé les fonctions de vice-présidente de la commission des Relations extérieures, guidant la diplomatie parlementaire et supervisant les questions relatives à la politique étrangère et aux accords internationaux. Élue députée aux 14ᵉ (2016–2021) et 15ᵉ (2021–2026) législatures, elle a apporté son expertise administrative aux travaux législatifs, au contrôle parlementaire et au travail de circonscription. Auparavant, elle a été directrice des Relations extérieures du Bureau de l’Assemblée nationale, puis consul général adjoint du Vietnam à San Francisco (États-Unis), où elle a œuvré au renforcement des relations bilatérales et parlementaires ainsi qu’à l’élargissement du réseau de partenaires internationaux du Vietnam.",
+    "previousRoles1": "Tout au long de sa carrière, Mme Ha est fortement engagée dans la diplomatie parlementaire multilatérale. Elle a joué un rôle central en tant que Secrétaire générale adjointe du Comité national d’organisation de la 132ᵉ Assemblée de l’Union interparlementaire (UIP), tenue à Hanoï en 2015",
+    "previousRoles2": "Travaillant en étroite collaboration avec le Secrétariat de l’UIP, elle a contribué à faire de cet événement un sommet majeur réunissant les parlements venant de plus de 160 pays différents, aboutissant à l’adoption de la  « Déclaration de Hanoï », qui a affirmé le rôle essentiel des parlements dans la mise en œuvre du Programme de développement durable à l’horizon 2030. Mme Hà a dirigé et accueilli de nombreuses réunions régionales de l’UIP et conférences thématiques au Vietnam, contribuant à rehausser le profil parlementaire du pays et à renforcer les liens entre les secrétariats parlementaires du monde entier.",
+    "previousRoles3": "participe régulièrement, en tant qu’intervenante, aux grands forums interparlementaires",
+    "she": "Elle",
+    "ipu": "UIP AIPA APPF"
+  },
+  "internationalEngagement": {
+    "title": "Engagement international",
+    "description": "Elle participe régulièrement, en tant qu’intervenante, aux grands forums interparlementaires tels que l’Union interparlementaire (UIP), l’Assemblée interparlementaire de l’ASEAN (AIPA) et le Forum parlementaire Asie-Pacifique (APPF). Au sein de ces institutions, elle s’est constamment fait la promotrice de l’égalité hommes-femmes et de la participation des femmes dans le milieu politique, des objectifs qui s’alignent avec la mission de l’ASGP.\n\n Maîtrisant couramment l’anglais et le russe, et disposant d’une bonne connaissance de la langue française, Mme Hà met ses compétences en leadership stratégique, en diplomatie multilatérale et en gestion organisationnelle au service de chacune de ses fonctions. Membre de l’Association des Secrétaires généraux des Parlements depuis 2025, elle demeure pleinement engagée à œuvrer sa mission:renforcer les institutions parlementaires et promouvoir les meilleures pratiques internationales."
+  },
+  "common": {
+    "language": "Langue",
+    "english": "Anglais",
+    "french": "Français"
+  }
+}

package/src/components/LandingPage/common/ui-kit/organisms/QuaTangQuocHoi/types.ts

@@ -0,0 +1,58 @@
+export type Language = "en" | "fr";
+
+export interface LanguageData {
+  header: {
+    name: string;
+    candidacy: string;
+    currentRole: string;
+    readMoreButton: string;
+  };
+  about: {
+    title: string;
+    subtitle: string;
+    description: string;
+  };
+  education: {
+    title: string;
+    description: string;
+  };
+  career: {
+    title: string;
+    startYear: string;
+    organization: string;
+    description: string;
+    currentRole: string;
+    previousRoles: string[];
+  };
+  diplomacy: {
+    title: string;
+    ipuRole: string;
+    regionalMeetings: string;
+  };
+  internationalEngagement: {
+    title: string;
+    description: string;
+    forums: string[];
+  };
+  skills: {
+    title: string;
+    languages: string;
+    skills: string;
+    asgpCommitment: string;
+  };
+  common: {
+    language: string;
+    english: string;
+    french: string;
+  };
+}
+
+export interface LanguageContextType {
+  language: Language;
+  setLanguage: (language: Language) => void;
+  languageData: LanguageData | null;
+  setLanguageData: (data: LanguageData | null) => void;
+  isLoading: boolean;
+  switchLanguage: (newLang: Language) => void;
+  t: (key: string) => string;
+}

package/src/components/LandingPage/common/ui-kit/organisms/QuizSection/ViewAnswer.tsx

@@ -0,0 +1,48 @@
+import { FadeInMotionV2 } from "../../../FadeInMotion";
+import BackgroundImage from "../../moleculars/BackgroundImage";
+import { QuizSectionData } from ".";
+import { generateRandomNumber, parse } from "@phygitallabs/helpers";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+
+interface Props {
+  sectionData: QuizSectionData;
+}
+
+const ViewAnswer = (props: Props) => {
+  const { sectionData } = props;
+  const { backgrounds, messages, msg_images } = sectionData;
+  const bgLength = backgrounds?.value?.length;
+  const msgLength = messages?.value?.length;
+  const msgImgLength = msg_images?.value?.length;
+  const background = backgrounds?.value?.[generateRandomNumber(bgLength - 1)];
+  const msg = messages?.value?.[generateRandomNumber(msgLength - 1)];
+  const audioUrl = msg?.audio?.url;
+  const msg_img = msg_images?.value?.[generateRandomNumber(msgImgLength - 1)];
+  const msgImgUrl = msg_img?.url;
+
+  return (
+    <>
+      {audioUrl && <audio src={audioUrl} autoPlay loop />}
+      <FadeInMotionV2
+        className="flex w-full justify-center z-40 items-center"
+        isVisible={true}
+        duration={1}
+        delay={0.25}>
+        <BackgroundImage field={{ value: background }} />
+        {!msgImgUrl && (
+          <div className="to-transparent absolute bottom-0 left-0 z-10 h-full w-full bg-gradient-to-b from-white" />
+        )}
+        <FadeInMotionV2
+          className="flex w-full justify-center z-40 items-center absolute top-1/3 px-5 -translate-y-1/4 gap-20"
+          isVisible={true}
+          duration={1}
+          delay={0.5}>
+          {msgImgUrl && <Image width="auto" height="40svh" src={msgImgUrl} />}
+          <div>{parse(msg?.image?.htmlContent)}</div>
+        </FadeInMotionV2>
+      </FadeInMotionV2>
+    </>
+  );
+};
+
+export default ViewAnswer;

package/src/components/LandingPage/common/ui-kit/organisms/QuizSection/ViewQuestion.tsx

@@ -0,0 +1,48 @@
+import { FadeInMotionV2 } from "../../../FadeInMotion";
+import BaseButton from "../../atomics/BaseButton";
+import BackgroundImage from "../../moleculars/BackgroundImage";
+import { QuizSectionData } from ".";
+import { parse } from "@phygitallabs/helpers";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+
+interface Props {
+  setIsViewAnswer: React.Dispatch<React.SetStateAction<boolean>>;
+  sectionData: QuizSectionData;
+}
+
+const ViewQuestion = (props: Props) => {
+  const { sectionData, setIsViewAnswer } = props;
+  const { question, cta_title, background_question, image } = sectionData;
+  const imgUrl = image?.value?.url;
+  const handleClick = () => setIsViewAnswer((pre) => !pre);
+  const isCtaTitleValid = typeof cta_title?.value === "string";
+
+  return (
+    <FadeInMotionV2
+      className="flex w-full justify-center z-40 items-center"
+      isVisible={true}
+      duration={1}
+      delay={0.25}
+    >
+      <BackgroundImage field={background_question} />
+      <FadeInMotionV2
+        className="flex w-full justify-center z-40 items-center px-5"
+        isVisible={true}
+        duration={1}
+        delay={0.5}
+      >
+        {imgUrl && <Image width="auto" height="40svh" src={imgUrl} />}
+
+        {parse(question?.value?.htmlContent)}
+        <BaseButton
+          onClick={handleClick}
+          className="bg-[#292929] uppercase text-white w-fit"
+        >
+          {isCtaTitleValid ? cta_title?.value : ""}
+        </BaseButton>
+      </FadeInMotionV2>
+    </FadeInMotionV2>
+  );
+};
+
+export default ViewQuestion;

package/src/components/LandingPage/common/ui-kit/organisms/QuizSection/index.tsx

@@ -0,0 +1,48 @@
+import { BaseSectionProps } from "../../../../models/base-section";
+import SectionFullScreen from "../../../SectionFullScreen";
+import { Field } from "../../types/base";
+import { LexicalType, Media } from "../../../../models/general";
+import ViewQuestion from "./ViewQuestion";
+import { useState } from "react";
+import ViewAnswer from "./ViewAnswer";
+
+export interface MsgAudio {
+  image: LexicalType;
+  audio: Media;
+}
+
+export interface QuizSectionData {
+  question: Field<LexicalType>;
+  cta_title: Field<string>;
+  background_question: Field<Media>;
+  messages: Field<MsgAudio[]>;
+  msg_images: Field<Media[]>;
+  backgrounds: Field<Media[]>;
+  image: Field<Media>;
+}
+
+interface Props extends BaseSectionProps {
+  sectionData: QuizSectionData;
+}
+
+const QuizSection = (props: Props) => {
+  const { id, sectionData } = props;
+  const [isViewAnswer, setIsViewAnswer] = useState(false);
+
+  return (
+    <SectionFullScreen
+      className="flex flex-col items-center justify-center text-center gap-2 relative"
+      name={id}>
+      {isViewAnswer ? (
+        <ViewAnswer sectionData={sectionData} />
+      ) : (
+        <ViewQuestion
+          setIsViewAnswer={setIsViewAnswer}
+          sectionData={sectionData}
+        />
+      )}
+    </SectionFullScreen>
+  );
+};
+
+export default QuizSection;

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

@@ -0,0 +1,36 @@
+import { BaseSectionProps } from "../../../../models/base-section";
+import SectionFullScreen from "../../../SectionFullScreen";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import type { Field } from "../../types/base";
+
+interface TetCoverSection1Data {
+  background: Field<number>;
+  title: Field<string>;
+}
+
+export interface TetCoverSection1Props extends BaseSectionProps {}
+
+function TetCoverSection1({ sectionData, id }: TetCoverSection1Props) {
+  const data = sectionData as TetCoverSection1Data;
+  const { background, title } = data || {};
+  const titleValue = title?.value;
+  const backgroundValue = background?.value || 1;
+  const backgroundImage = `https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/tet2025-cover-${backgroundValue}.png`;
+
+  return (
+    <SectionFullScreen className="max-h-full" name={id}>
+      <div className="flex flex-col items-center justify-center h-full relative">
+        <Image src={backgroundImage} alt="tet-2025" className="object-cover" />
+        {titleValue && (
+          <div className="absolute w-full top-0 left-0 z-10 h-[150px] flex items-center justify-center px-4 pt-8">
+            <p className="text-4xl line-clamp-3 font-bold text-black  text-center">
+              {titleValue}
+            </p>
+          </div>
+        )}
+      </div>
+    </SectionFullScreen>
+  );
+}
+
+export default TetCoverSection1;

package/src/components/LandingPage/common/ui-kit/organisms/TetCoverSection1/index.tsx

@@ -0,0 +1 @@
+export { default } from "./TetCoverSection1";

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

@@ -0,0 +1,33 @@
+import { BaseSectionProps } from "../../../../models/base-section";
+import SectionFullScreen from "../../../SectionFullScreen";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import type { Field } from "../../types/base";
+
+interface TetCoverSection2Data {
+  background: Field<number>;
+  title: Field<string>;
+}
+
+export interface TetCoverSection2Props extends BaseSectionProps {}
+
+function TetCoverSection2({ sectionData, id }: TetCoverSection2Props) {
+  const data = sectionData as TetCoverSection2Data;
+  const { title } = data;
+  const titleValue = title?.value || "Mừng năm 2025";
+  const backgroundImage = `https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/tet2025-cover-5.png`;
+
+  return (
+    <SectionFullScreen className="max-h-full" name={id}>
+      <div className="flex flex-col items-center justify-center h-full relative">
+        <Image src={backgroundImage} alt="tet-2025" className="object-cover" />
+        <div className="absolute w-full top-[60px] left-0 z-10 h-[150px] flex items-center justify-center px-4 pt-8">
+          <p className="text-4xl line-clamp-3 font-medium text-[#B52E10]  text-center">
+            {titleValue}
+          </p>
+        </div>
+      </div>
+    </SectionFullScreen>
+  );
+}
+
+export default TetCoverSection2;

package/src/components/LandingPage/common/ui-kit/organisms/TetCoverSection2/index.tsx

@@ -0,0 +1 @@
+export { default } from "./TetCoverSection2";