ui-landing-page 6.1.0

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

@@ -0,0 +1,147 @@
+import HeaderSectionUI from "./HeaderSection/HeaderSection";
+import ImageTextSectionUI from "./ImageTextSection";
+import ImageTextArraySectionUI from "./ImageTextArraySection";
+import ContactSectionUI from "./ContactSection";
+import LetterSectionUI from "./LetterSection";
+import CoverSectionUI from "./CoverSetion";
+import { AudioLexicalLetterSectionUI, LexicalLetterSectionUI } from "./LexicalLetterSection";
+import VerticalCarouselSectionUI from "./VerticalCarouselSection";
+import NavigationSectionUI from "./NavigationSection";
+import ImagePaddingSectionUI from "./ImagePaddingSection";
+import VideoIntroSectionUI from "./VideoIntroSection";
+import ProfileSectionUI from "./ProfileSection";
+import MetaverseSectionUI from "./MetaverseSection";
+import AuthorSectionUI from "./AuthorSection";
+import HesmanVideoSectionUI from "./HesmanVideoSection";
+import HesmanPuzzleSectionUI from "./HesmanPuzzleSection";
+import BEDIPageSectionUI from "./BEDIPageSection";
+import { BEDIMenuOrder } from "./BEDIPageSection/constants";
+import HesmanGreetingSectionUI from "./HesmanGreetingSection";
+import HesmanMetaverseSectionUI from "./HesmanMetaverseSection";
+import HesmanThankyouSectionUI from "./HesmanThankyouSection";
+import HesmanCertSectionUI from "./HesmanCertSection";
+import GiftAvatarSectionUI from "./GiftAvatarSection";
+import BusinessCardSectionUI from "./BusinessCardSection";
+import QuizSectionUI from "./QuizSection";
+import TetCoverSection1 from "./TetCoverSection1";
+import TetCoverSection2 from "./TetCoverSection2";
+import { LuckyMoneySection, LuckyMoneySectionAdvance } from "./TetLuckyMoneySection";
+import { LuckyMoneySection2, LuckyMoneySection2Advance } from "./TetLuckyMoneySection2";
+import { BookCoverSectionUI, BookSectionUI, NgheLetterSectionUI } from "./BookSection";
+import { HomeNewspaperSectionUI, HomeSectionUI, HomeSouvenirSectionUI } from "./HomeSection";
+
+import HorizontalBookImageSectionUI from "./HorizontalBookImageSection";
+import { MY_TAM_FORM_KEY } from "./NavigationSection/ModalWelcomeInput";
+import PetProfileSectionUI from "./PetProfileSection";
+import AdvanceProfileSectionUI from "./AdvanceProfileSection";
+import HorizontalImageListSectionUI from "./HorizontalImageListSection";
+import {
+  KhaoCoKyCompareSectionUI,
+  KhaoCoKyContactSectionUI,
+  KhaoCoKyHomeSectionUI,
+  KhaoCoKyImageTextSectionUI,
+  KhaoCoKyCarouselSectionUI,
+} from "./khaocoky";
+
+import {
+  Christmas1HomeSectionUI,
+  Christmas1LetterSectionUI,
+  Christmas1GreetingSectionUI,
+  Christmas2HomeSectionUI,
+  Christmas2GreetingSectionUI,
+} from "./Christmas";
+
+import {
+  ValentineHomeSectionUI,
+  ValentineLetterSectionUI,
+  ValentineGreetingSectionUI,
+  ValentineTheFaceShopHomeSectionUI,
+  ValentineTheFaceShopLetterSectionUI,
+  ValentineTheFaceShopGreetingSectionUI,
+} from "./Valentine";
+
+import { WomanHomeSection, WomanLetterSection, WomanGreetingSection } from "./WomanDay";
+
+import BaoNgayNay2025SectionUI from "./BaoNgayNay2025Section";
+import NguyenKimLuckyVoucher from "./NguyenKimLuckyVoucher";
+
+// KhaoCoKyV2
+import { KhaoCoKyHome, KhaoCoKyImageText, KhaoCoKyMemories, KhaoCoKyListImageText } from "./khaocokyv2";
+
+import BizCardProfileSectionUI from "./BizCardProfileSection";
+import { InforSection, QuaTangQuocHoiSection } from "./QuaTangQuocHoi";
+
+
+export {
+  WomanHomeSection,
+  WomanLetterSection,
+  WomanGreetingSection,
+  NguyenKimLuckyVoucher,
+  BaoNgayNay2025SectionUI,
+  HeaderSectionUI,
+  AuthorSectionUI,
+  ImageTextSectionUI,
+  LetterSectionUI,
+  CoverSectionUI,
+  VerticalCarouselSectionUI,
+  BookSectionUI,
+  BookCoverSectionUI,
+  NgheLetterSectionUI,
+  HomeNewspaperSectionUI,
+  HomeSectionUI,
+  LexicalLetterSectionUI,
+  AudioLexicalLetterSectionUI,
+  NavigationSectionUI,
+  ImagePaddingSectionUI,
+  VideoIntroSectionUI,
+  ImageTextArraySectionUI,
+  HomeSouvenirSectionUI,
+  MY_TAM_FORM_KEY,
+  ContactSectionUI,
+  ProfileSectionUI,
+  MetaverseSectionUI,
+  HorizontalBookImageSectionUI,
+  HesmanVideoSectionUI,
+  HesmanPuzzleSectionUI,
+  BEDIPageSectionUI,
+  BEDIMenuOrder,
+  HesmanGreetingSectionUI,
+  HesmanMetaverseSectionUI,
+  HesmanThankyouSectionUI,
+  GiftAvatarSectionUI,
+  HesmanCertSectionUI,
+  BusinessCardSectionUI,
+  QuizSectionUI,
+  PetProfileSectionUI,
+  AdvanceProfileSectionUI,
+  HorizontalImageListSectionUI,
+  KhaoCoKyHomeSectionUI,
+  KhaoCoKyImageTextSectionUI,
+  KhaoCoKyCompareSectionUI,
+  KhaoCoKyContactSectionUI,
+  KhaoCoKyCarouselSectionUI,
+  Christmas1HomeSectionUI,
+  Christmas1LetterSectionUI,
+  Christmas1GreetingSectionUI,
+  Christmas2HomeSectionUI,
+  Christmas2GreetingSectionUI,
+  TetCoverSection1,
+  TetCoverSection2,
+  LuckyMoneySection,
+  LuckyMoneySection2,
+  LuckyMoneySectionAdvance,
+  LuckyMoneySection2Advance,
+  ValentineHomeSectionUI,
+  ValentineLetterSectionUI,
+  ValentineGreetingSectionUI,
+  ValentineTheFaceShopHomeSectionUI,
+  ValentineTheFaceShopLetterSectionUI,
+  ValentineTheFaceShopGreetingSectionUI,
+  KhaoCoKyHome,
+  KhaoCoKyImageText,
+  KhaoCoKyMemories,
+  KhaoCoKyListImageText,
+  BizCardProfileSectionUI,
+  InforSection,
+  QuaTangQuocHoiSection,
+};

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

@@ -0,0 +1,101 @@
+// @ts-nocheck
+import { FC, useState } from "react";
+import SectionFullScreen from "../../../SectionFullScreen/index";
+import { BaseSectionProps } from "../../../../models/base-section";
+import { MediaType } from "../../../../models/general";
+import Title from "../../moleculars/Title";
+import BackgroundImage from "../../moleculars/BackgroundImage";
+import { Field } from "../../types/base";
+import {
+  FullScreen,
+  useFullScreenContext,
+} from "../../../../hooks/useFullScreenContext";
+import { checkQuillEmpty, getContentFromLexicalValue, parse } from "@phygitallabs/helpers";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import KhaoCoKyTitle from "./KhaoCoKyTitle";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Pagination } from "swiper/modules";
+import CarouselCustom from "../../../../common/CarouselCustom";
+
+interface ImageTextSectionData {
+  title_carousel: Field<string>;
+  list_images: Field<{ [key: any]: string }>;
+  background_title: Field<Media>;
+}
+
+export interface KhaoCoKyCarouselProps extends BaseSectionProps {}
+
+const KhaoCoKyCarouselSection: FC<KhaoCoKyCarouselProps> = (props) => {
+  const { sectionData, id, configTheme } = props;
+
+  const { isInViewport } = useFullScreenContext(id);
+
+  const { title_carousel, list_images, background_title } = {
+    ...sectionData,
+  } as ImageTextSectionData;
+
+  const titleValue = getContentFromLexicalValue(title_carousel?.value);
+  const backgroundTitleValue = background_title?.value?.url;
+  const listImagesValue = list_images?.value.filter(
+    (item) => !!item.image?.url
+  );
+
+  if (listImagesValue?.length === 0) {
+    return null;
+  }
+
+  const coverItem = (
+    <SwiperSlide key="cover-item" className="w-full z-50 h-[520px]">
+      <div className="h-full w-full bg-black/50 absolute z-10 top-0 left-0 flex items-center justify-center">
+        <p className="text-white text-2xl font-bold text-center">
+          {titleValue}
+        </p>
+      </div>
+      {backgroundTitleValue && (
+        <Image src={backgroundTitleValue} className="object-cover h-full" />
+      )}
+    </SwiperSlide>
+  );
+
+  const generateListItem = listImagesValue?.map((item, index) => (
+    <SwiperSlide
+      key={`slide-${index}`}
+      className="w-full z-50 h-[520px] relative"
+    >
+      <img
+        src={item.image.url}
+        className="object-contain absolute h-full w-full z-10"
+      />
+      <img
+        src={item.image.url}
+        alt="backdrop-image"
+        className="object-cover h-full w-full absolute z-0 blur-md"
+      />
+      <div className="absolute pointer-events-none bottom-0 left-0 w-full max-h-1/3 overflow-scroll bg-black/40 z-10">
+        <p className="text-white text-sm text-center pb-8 px-4 pt-4">
+          {parse(item.description)}
+        </p>
+      </div>
+    </SwiperSlide>
+  ));
+
+  return (
+    <SectionFullScreen
+      name={id}
+      showScrollGuide
+      className="font-antiqua py-6 h-[100svh] svh-full"
+    >
+      <div className="h-full w-full flex items-center justify-center relative">
+        <CarouselCustom
+          slidesPerView={1}
+          wrapperClassName="flex items-center justify-center"
+          className="[&_.swiper-pagination]:!bottom-2 [&_.swiper-pagination-bullet-active]:!bg-gray-600 flex items-center justify-center"
+          listItem={[coverItem, ...(generateListItem || [])]}
+          lazyPreloadPrevNext={2}
+        />
+      </div>
+    </SectionFullScreen>
+  );
+};
+
+export default KhaoCoKyCarouselSection;

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

@@ -0,0 +1,98 @@
+// @ts-nocheck
+import { FC } from "react";
+import SectionFullScreen from "../../../SectionFullScreen/index";
+import { BaseSectionProps } from "../../../../models/base-section";
+import { MediaType } from "../../../../models/general";
+import Title from "../../moleculars/Title";
+import BackgroundImage from "../../moleculars/BackgroundImage";
+import { Field } from "../../types/base";
+import {
+  FullScreen,
+  useFullScreenContext,
+} from "../../../../hooks/useFullScreenContext";
+import { checkQuillEmpty, getContentFromLexicalValue } from "@phygitallabs/helpers";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import KhaoCoKyTitle from "./KhaoCoKyTitle";
+
+interface CompareInfo {
+  image: string;
+  description: any;
+}
+
+interface CompareSectionData {
+  title_compare: Field<string>;
+  before_info: Field<CompareInfo>;
+  after_info: Field<CompareInfo>;
+  description_compare: Field<any>;
+}
+
+export interface KhaoCoKyCompareProps extends BaseSectionProps {}
+
+const KhaoCoKyCompareSection: FC<KhaoCoKyCompareProps> = (props) => {
+  const { sectionData, id, configTheme } = props;
+
+  const { isInViewport } = useFullScreenContext(id);
+
+  const { title_compare, before_info, after_info, description_compare } = {
+    ...sectionData,
+  } as CompareSectionData;
+
+  const titleValue = title_compare?.value;
+  const beforeInfoValue = before_info?.value;
+  const afterInfoValue = after_info?.value;
+  const beforeImageValue = beforeInfoValue?.image?.url;
+  const afterImageValue = afterInfoValue?.image?.url;
+  const beforeDescriptionValue = getContentFromLexicalValue(
+    beforeInfoValue?.description
+  );
+  const afterDescriptionValue = getContentFromLexicalValue(
+    afterInfoValue?.description
+  );
+
+  const descriptionValue = getContentFromLexicalValue(
+    description_compare?.value
+  );
+
+  return (
+    <>
+      <SectionFullScreen
+        name={id}
+        showScrollGuide
+        className="py-6 font-antiqua"
+      >
+        <div className="relative m-auto space-y-6 px-4">
+          <KhaoCoKyTitle title={titleValue} />
+          <div className="flex items-center flex-col gap-4">
+            <div className="flex justify-between gap-4">
+              {beforeImageValue && (
+                <Image
+                  src={beforeImageValue}
+                  height={270}
+                  className="object-cover border w-1/2 border-gray-200"
+                />
+              )}
+              {afterImageValue && (
+                <Image
+                  src={afterImageValue}
+                  height={270}
+                  className="object-cover border w-1/2 border-gray-200"
+                />
+              )}
+            </div>
+            <div className="flex justify-center gap-4 w-full">
+              <div className="flex justify-start text-sm w-1/2">
+                <p className="text-justify">{beforeDescriptionValue}</p>
+              </div>
+              <div className="flex flex-col text-sm w-1/2">
+                <p className="text-justify">{afterDescriptionValue}</p>
+              </div>
+            </div>
+          </div>
+          <div className="text-justify">{descriptionValue}</div>
+        </div>
+      </SectionFullScreen>
+    </>
+  );
+};
+
+export default KhaoCoKyCompareSection;

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

@@ -0,0 +1,151 @@
+// @ts-nocheck
+import { FC } from "react";
+import SectionFullScreen from "../../../SectionFullScreen/index";
+import { BaseSectionProps } from "../../../../models/base-section";
+import { MediaType } from "../../../../models/general";
+import Title from "../../moleculars/Title";
+import BackgroundImage from "../../moleculars/BackgroundImage";
+import { Field } from "../../types/base";
+import {
+  FullScreen,
+  useFullScreenContext,
+} from "../../../../hooks/useFullScreenContext";
+import { checkQuillEmpty, getContentFromLexicalValue } from "@phygitallabs/helpers";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import KhaoCoKyTitle from "./KhaoCoKyTitle";
+import { FacebookLogo, Globe, ShoppingCart } from "@phosphor-icons/react";
+import { isEmpty } from 'lodash-es';
+
+interface DescriptionItem {
+  description: Field<any>;
+  image: Field<Media>;
+}
+
+interface ContactSectionData {
+  title_contact: Field<string>;
+  description_1: Field<DescriptionItem>;
+  description_2: Field<DescriptionItem>;
+  contact: Field<{ [key: any]: string }>;
+  contact_title: Field<string>;
+}
+
+export interface KhaoCoKyContactProps extends BaseSectionProps {}
+
+const KhaoCoKyContactSection: FC<KhaoCoKyContactProps> = (props) => {
+  const { sectionData, id, configTheme } = props;
+
+  const { isInViewport } = useFullScreenContext(id);
+
+  const {
+    title_contact,
+    description_1,
+    description_2,
+    contact,
+    contact_title,
+  } = {
+    ...sectionData,
+  } as ContactSectionData;
+
+  const titleValue = title_contact?.value;
+  const firstImage = description_1?.value?.image?.url;
+  const secondImage = description_2?.value?.image?.url;
+  const firstDescription = getContentFromLexicalValue(
+    description_1?.value?.description
+  );
+  const secondDescription = getContentFromLexicalValue(
+    description_2?.value?.description
+  );
+  const contactTitle = contact_title?.value;
+
+  const contactValue = contact?.value;
+
+  const getIconByKey = (key: string) => {
+    switch (key) {
+      case "shop":
+        return <ShoppingCart weight="fill" size={24} />;
+      case "facebook":
+        return <FacebookLogo weight="fill" size={24} />;
+      case "website":
+        return <Globe weight="fill" size={24} />;
+      default:
+        return <Globe weight="fill" size={24} />;
+    }
+  };
+
+  return (
+    <>
+      <SectionFullScreen
+        name={id}
+        showScrollGuide
+        className="py-10 font-antiqua"
+      >
+        <div className="relative m-auto space-y-6 px-4">
+          <KhaoCoKyTitle title={titleValue} />
+          <div className="space-y-[220px]">
+            <div className="flex justify-between relative">
+              <div className="w-1/3 z-10 top-5 relative">
+                <Image
+                  src={firstImage}
+                  className="max-h-[180px] object-contain"
+                />
+              </div>
+              <div className="w-3/4 absolute right-0 -bottom-2/3 max-w-[300px]">
+                <div className="relative">
+                  <Image
+                    src="https://storage.googleapis.com/nomion-assets-staging/images/user_id/1732183476-left-letter.png"
+                    className="max-h-[180px] object-contain"
+                  />
+                  <div className="top-1/2 -translate-y-1/2 !text-xs p-8 -rotate-[6deg] left-0 absolute">
+                    {firstDescription}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-row-reverse justify-between relative">
+              <div className="w-1/3 z-10">
+                {secondImage && (
+                  <Image
+                    src={secondImage}
+                    className="max-h-[180px] object-contain"
+                  />
+                )}
+              </div>
+              <div className="w-3/4 absolute left-0 -top-2/3 max-w-[300px]">
+                <div className="relative w-full">
+                  <Image
+                    src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/khao-co-ky/card-bg.png"
+                    className="max-h-[180px] w-full object-contain"
+                  />
+                  <div className="!text-xs p-8 rotate-[6.5deg] left-0 top-1/2 -translate-y-1/2 absolute">
+                    {secondDescription}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col items-center gap-4">
+            <p className="text-base font-semibold">{contactTitle}</p>
+            <div className="flex flex-row justify-center gap-4">
+              {!isEmpty(contactValue) &&
+                Object.keys(contactValue).map((key) => {
+                  const value = contactValue[key];
+                  return (
+                    <a
+                      className="flex flex-row gap-2"
+                      href={value}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {getIconByKey(key)}
+                    </a>
+                  );
+                })}
+            </div>
+          </div>
+        </div>
+      </SectionFullScreen>
+    </>
+  );
+};
+
+export default KhaoCoKyContactSection;

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

@@ -0,0 +1,194 @@
+// @ts-nocheck
+import { FC } from "react";
+import SectionFullScreen from "../../../SectionFullScreen/index";
+import { BaseSectionProps } from "../../../../models/base-section";
+import { MediaType } from "../../../../models/general";
+import Video from "../../../Video";
+import ThreeModelViewer from "../../../3DModel";
+import { FadeInMotion } from "../../../FadeInMotion";
+import Title from "../../moleculars/Title";
+import TagName from "../../moleculars/TagName";
+import NftInfoModal from "../../moleculars/NftInfoModal";
+import AuthorModal from "../../moleculars/AuthorModal";
+import MetaInfoModal from "../../moleculars/MetaInfoModal";
+import BackgroundImage from "../../moleculars/BackgroundImage";
+import { Field } from "../../types/base";
+import {
+  FullScreen,
+  useFullScreenContext,
+} from "../../../../hooks/useFullScreenContext";
+import { twMerge } from "tailwind-merge";
+import ThreeModelViewerTongla from "../../../3DModel/ThreeModalTongla";
+import { checkQuillEmpty } from "@phygitallabs/helpers";
+import ButtonCommingSoon from "../../moleculars/ButtonCommingSoon";
+import { checkEmptyArray } from "../../../../utils/helper";
+import AuthorContext from "../../moleculars/AuthorContext";
+import OwnerName from "../../moleculars/OwnerName";
+import {
+  shortenTxAddress,
+  getBlockchainExplorerUrl,
+  getNftUrls,
+  getNftDetails,
+} from "../../../../../../utils/web3";
+import { Collection, NFT } from "../../../../../../types/NFT";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import KhaoCoKyTitle from "./KhaoCoKyTitle";
+import { useState } from "react";
+import { Typography } from "../../atomics";
+import TickIconBlue from "../../../icons/TickIconBlue";
+import { Drawer } from "antd";
+import { CloseIcon } from "../../../icons";
+
+interface HomeSectionData {
+  product_name: Field;
+  tags: Field;
+  media: Field;
+  config: Field;
+  author_modal: Field;
+  title: Field;
+}
+
+export interface HomeSectionProps extends BaseSectionProps {}
+
+const KhaoCoKyHomeSection: FC<HomeSectionProps> = (props) => {
+  const { sectionData, id, configTheme } = props;
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { isInViewport } = useFullScreenContext(id);
+
+  const {
+    tags = {},
+    product_name = {},
+    media = {},
+    config = {},
+    author_modal: authorModal = {},
+    title = {},
+  } = { ...sectionData } as HomeSectionData;
+
+  const titleValue = title?.value;
+  const productNameValue = product_name?.value;
+  const renderMedia = () => {
+    const { value } = media;
+    const { url = "", thumbnail_url = "", type = "" } = { ...value };
+    switch (type) {
+      case MediaType.ThreeD:
+        return (
+          <ThreeModelViewer
+            isHidden={false}
+            asset3DUrl={url}
+            showArButton={config?.show_ar_button || false}
+          />
+        );
+      case MediaType.Image:
+        return (
+          <Image
+            src={url}
+            alt="Media"
+            className={twMerge("m-auto h-4/5 w-auto object-contain")}
+          />
+        );
+      case MediaType.Video:
+        return (
+          <Video
+            videoUrl={url}
+            thumbnailUrl={thumbnail_url}
+            loop={true}
+            autoPlay
+            muted={true}
+          />
+        );
+    }
+  };
+
+  const openModal = () => setIsOpen(true);
+  const closeModal = () => setIsOpen(false);
+
+  const toggleModal = () => setIsOpen((prev) => !prev);
+
+  return (
+    <>
+      <SectionFullScreen
+        name={id}
+        showScrollGuide
+        className="py-4 font-antiqua"
+      >
+        <div className="relative m-auto justify-center h-[100svh] gap-4 svh-full flex flex-col items-center">
+          <KhaoCoKyTitle title={titleValue} />
+          <div className="relative flex !h-[calc(100%-350px)] item flex-col gap-2 w-full justify-center">
+            {renderMedia()}
+          </div>
+          {/* {openLinkMetaverse && (
+            <p onClick={openLinkMetaverse} className="flex justify-center">
+              <Typography
+                variant="span"
+                className="font-semibold cursor-pointer p-2 border border-[#202020] rounded-lg"
+              >
+                Trải nghiệm 3D
+              </Typography>
+            </p>
+          )} */}
+          <div className="z-10 flex w-full flex-col justify-between gap-2 p-3">
+            <KhaoCoKyTitle
+              title={productNameValue}
+              showTextLine={false}
+              className="!font-godWord"
+            />
+            <div className="flex gap-2">
+              <TagName field={tags} configTheme={configTheme} />
+            </div>
+            {/* <AuthorModal field={authorModal} /> */}
+            <>
+              <div className="flex gap-1.5 items-center" onClick={openModal}>
+                <Image
+                  src={
+                    "https://storage.googleapis.com/assets-fygito/images/user_id/1732279688-Huế.jpg"
+                  }
+                  alt={name}
+                  className="rounded-full object-contain w-7 h-7"
+                  width={28}
+                  height={28}
+                />
+                <Typography variant="span" className="font-semibold underline">
+                  Trung Tâm Bảo Tồn Di Tích Cố Đô Huế
+                </Typography>
+                <TickIconBlue />
+              </div>
+
+              <Drawer
+                title={null}
+                placement={"bottom"}
+                closable={false}
+                onClose={closeModal}
+                open={isOpen}
+              >
+                <CloseIcon
+                  onClick={closeModal}
+                  className="absolute top-2 right-2 [&>path]:stroke-[#202020]"
+                />
+                <div className="w-full h-full flex flex-col items-center gap-4 pt-10">
+                  <Image
+                    src={
+                      "https://storage.googleapis.com/assets-fygito/images/user_id/1732279688-Huế.jpg"
+                    }
+                    alt={name}
+                    className=""
+                    width={100}
+                    height={100}
+                  />
+                  <div className="text-sm w-full text-center leading-normal text-[#202020]">
+                    Trung tâm Bảo tồn Di tích Cố đô Huế là đơn vị xác thực cho
+                    các sản phẩm thuộc phạm vi dự án, là các sản phẩm được chứng
+                    thực F1 của các cổ vật, bảo vật đang được trưng bày và quản
+                    lý tại Trung tâm
+                  </div>
+                </div>
+              </Drawer>
+            </>
+          </div>
+        </div>
+      </SectionFullScreen>
+    </>
+  );
+};
+
+export default KhaoCoKyHomeSection;