ui-landing-page 6.1.0

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

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { HomSectionFS } from "./HomeSection";
+
+const meta = {
+  title: "Template/Organism/HomeSection",
+  component: HomSectionFS,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+  args: {},
+  // args: { onClick: fn() },
+} satisfies Meta<typeof HomSectionFS>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  args: {
+    className: "h-[800px]",
+    sectionData: {
+      name: {
+        value: "Ấn Phẩm Báo Mới Nhất",
+      },
+      tags: {
+        value: ["Độc bản"],
+      },
+      media: {
+        value: {
+          url: "https://storage.googleapis.com/assets-fygito-dev//user_id/1714107766-nhandan-1.jpg",
+          type: "image",
+        },
+      },
+      background: {
+        value: {
+          image: {
+            url: "https://storage.googleapis.com/assets-fygito/images/user_id/1705041846-Group5.png",
+            type: "image",
+          },
+          is_overlay: false,
+        },
+      },
+      author_modal: {
+        value: {
+          name: "Ông Trần Văn A",
+          label: "Sở Hữu",
+          description: "Author Description",
+        },
+      },
+    },
+    id: "home-section",
+    configTheme: {
+      background_color: "white",
+      font_family: "var(--font-svnPoppins)",
+      primary_color: "#ce2e0e",
+      primary_font: "var(--font-svnPoppins)",
+      secondary_color: "black",
+    },
+  },
+};

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

@@ -0,0 +1,261 @@
+// @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 DidInfoModal from "../../moleculars/DidInfoModal";
+
+interface HomeSectionData {
+  name: Field;
+  tags: Field;
+  media: Field;
+  meta_info: Field;
+  config: Field;
+  background: Field;
+  author_modal: Field;
+  buy_order_label: Field;
+}
+
+export interface HomeSectionProps extends BaseSectionProps {
+  className?: string;
+  nft?: NFT;
+  collection?: Collection;
+  didInfo?: {
+    DID: string;
+    CreatedAt: number;
+    Type: string;
+  };
+}
+
+const HomeSection: FC<HomeSectionProps> = (props) => {
+  const {
+    sectionData,
+    id,
+    configTheme,
+    hardCodeOption,
+    nft,
+    collection,
+    didInfo,
+  } = props;
+  const isTongla = hardCodeOption?.isTongla;
+  const isHPT = hardCodeOption?.isHPT;
+  const isSouvenir = hardCodeOption?.isSouvenir;
+  const isUnesco = hardCodeOption?.isUnesco;
+  const ownerNameExtraInfo = hardCodeOption?.ownerNameExtraInfo;
+  const did = didInfo?.DID;
+  const didSplit = did?.split(":");
+  const walletAddress = didSplit?.[didSplit.length - 1];
+  const baseUrl = process.env.NEXT_PUBLIC_NDA_EXPLORER_URL;
+  const didExplorerUrl = `${baseUrl}/address/${walletAddress}`;
+
+  const { isInViewport } = useFullScreenContext(id);
+
+  const {
+    tags = {},
+    name = {},
+    media = {},
+    config = {},
+    background = {},
+    meta_info: metaInfo = {},
+    author_modal: authorModal = {},
+    nft_info: nftInfo = {},
+    buy_order_label: buyOrderLabel = {},
+    nft_id: nftId = {},
+    index: index = {},
+    total: total = {},
+    author_context: authorContext = {},
+    owner_name: ownerName = {},
+  } = { ...sectionData } as HomeSectionData;
+
+  const renderMedia = () => {
+    const { value } = media;
+    const { url = "", thumbnail_url = "", type = "" } = { ...value };
+    switch (type) {
+      case MediaType.ThreeD:
+        if (isTongla)
+          return (
+            <ThreeModelViewerTongla
+              isHidden={!isInViewport}
+              asset3DUrl={url}
+              showArButton={config?.show_ar_button || false}
+            />
+          );
+        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",
+              isSouvenir && "aspect-[1/1.41] object-fill"
+            )}
+          />
+        );
+      case MediaType.Video:
+        return (
+          <Video
+            videoUrl={url}
+            thumbnailUrl={thumbnail_url}
+            loop={true}
+            autoPlay
+            muted={true}
+          />
+        );
+    }
+  };
+
+  const { openseaUrl, explorerUrl, chainName } = getNftDetails(
+    collection?.chain_id,
+    collection?.address,
+    nft?.token_id
+  );
+
+  const hasNft = !!collection?.address && !!nft?.token_id;
+  return (
+    <>
+      <SectionFullScreen name={id} showScrollGuide>
+        <div className="relative m-auto h-full flex flex-col items-center">
+          <BackgroundImage field={background} />
+
+          <div className="relative flex h-[calc(100%-200px)] item flex-col w-full justify-center pt-[50px]">
+            {renderMedia()}
+            {!isTongla && (
+              <MetaInfoModal field={metaInfo} configTheme={configTheme} />
+            )}
+            {isTongla && (
+              <div className="flex justify-center items-center">
+                <div className="rounded border border-neutral-6 px-2 text-sm">
+                  {index?.value || 1}
+                  <span className="text-neutral-6">/{total?.value || 1}</span>
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="z-10 flex w-full flex-col justify-between gap-2 p-3">
+            {checkEmptyArray(buyOrderLabel?.value) && (
+              <FadeInMotion delay={0.5} duration={0.5}>
+                <div className="flex w-full gap-2 px-2">
+                  {buyOrderLabel.value.map((b, index) => (
+                    <ButtonCommingSoon key={index}>{b}</ButtonCommingSoon>
+                  ))}
+                </div>
+              </FadeInMotion>
+            )}
+            <Title field={name} configTheme={configTheme} />
+            <div className="flex gap-2 overflow-x-auto">
+              {hasNft && (
+                <NftInfoModal
+                  field={nftInfo}
+                  configTheme={configTheme}
+                  {...getNftDetails(
+                    collection?.chain_id,
+                    collection?.address,
+                    nft?.token_id
+                  )}
+                  nftId={nft?.token_id}
+                  collectionName={collection?.name}
+                />
+              )}
+              {did && (
+                <DidInfoModal
+                  field={didInfo}
+                  configTheme={configTheme}
+                  explorerUrl={didExplorerUrl}
+                  nftId={
+                    walletAddress?.slice(0, 6) +
+                    "..." +
+                    walletAddress?.slice(-4)
+                  }
+                />
+              )}
+              <TagName
+                className="flex-nowrap"
+                field={tags}
+                configTheme={{
+                  ...configTheme,
+                  primary_color: isUnesco
+                    ? "#BFBFBF"
+                    : configTheme?.primary_color,
+                }}
+              />
+            </div>
+            <AuthorModal
+              field={authorModal}
+              hardCodeOption={{ isHPT }}
+              configTheme={configTheme}
+              walletAddress={walletAddress}
+              explorerUrl={didExplorerUrl}
+            />
+            <OwnerName field={ownerName} />
+            <AuthorContext field={authorContext} configTheme={configTheme} />
+
+            {hasNft && !!nftId.value && (
+              <div className="flex w-full justify-start gap-2 text-[14px] font-light text-neutral-6">
+                <a
+                  href={explorerUrl}
+                  className="text-sm font-semibold underline"
+                  target="_blank"
+                >
+                  Định danh: {shortenTxAddress(collection.address)}
+                </a>
+              </div>
+            )}
+
+            {isTongla && (
+              <MetaInfoModal field={metaInfo} isAbsolute={!isTongla} />
+            )}
+          </div>
+        </div>
+      </SectionFullScreen>
+    </>
+  );
+};
+
+export default HomeSection;
+
+export const HomSectionFS: FC<HomeSectionProps> = (props) => {
+  const { className } = props;
+  return (
+    <div className={twMerge(!!className && className)}>
+      <FullScreen>
+        <HomeSection {...props} />
+      </FullScreen>
+    </div>
+  );
+};

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

@@ -0,0 +1,134 @@
+// @ts-nocheck
+import { FC, useEffect } from "react";
+import SectionFullScreen from "../../../../SectionFullScreen";
+import { BaseSectionProps } from "../../../../../models/base-section";
+import { Media, MediaType, PageSteps } from "../../../../../models/general";
+import { motion } from "framer-motion";
+import Video from "../../../../Video";
+import ThreeModelViewer from "../../../../3DModel";
+import { FadeInMotion } from "../../../../FadeInMotion";
+import Title from "../../../moleculars/Title";
+import TagName from "../../../moleculars/TagName";
+import AuthorModal from "../../../moleculars/AuthorModal";
+import MetaInfoModal from "../../../moleculars/MetaInfoModal";
+import BackgroundImage from "../../../moleculars/BackgroundImage";
+import { Field } from "../../../types/base";
+import { FullScreen } from "../../../../../hooks/useFullScreenContext";
+import { twMerge } from "tailwind-merge";
+import { Typography } from "../../../atomics";
+import ImageWithFallback from "./ImageWithFallback";
+import dayjs from "dayjs";
+
+interface SectionData {
+  name: Field;
+  tags: Field;
+  media: Field;
+  config: Field;
+  background: Field;
+  author_modal: Field;
+  release_date: Field;
+}
+
+export interface Props extends BaseSectionProps {
+  className?: string;
+}
+
+const HomeSouvenirSection: FC<Props> = (props) => {
+  const { sectionData, id, configTheme } = props;
+  const {
+    tags = {},
+    name = {},
+    media = {},
+    config = {},
+    background = {},
+    meta_info: metaInfo = {},
+    author_modal: authorModal = {},
+    release_date: releaseDate = {},
+  } = { ...sectionData } as SectionData;
+  console.log(releaseDate);
+
+  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 (
+          <ImageWithFallback
+            style={{
+              boxShadow: "8.5px 8.074px 20.099px 0px rgba(32, 32, 30, 0.50)",
+            }}
+            src={url}
+            alt="Media"
+            className={"m-auto h-4/5 w-auto aspect-[1/1.41] object-fill"}
+          />
+        );
+      case MediaType.Video:
+        return (
+          <Video
+            videoUrl={url}
+            thumbnailUrl={thumbnail_url}
+            loop={true}
+            autoPlay
+            muted={true}
+          />
+        );
+    }
+  };
+
+  console.log('releaseDate?', releaseDate)
+
+  const formatDate = (date?: string) => {
+    if(!date) return '';
+    const dateObj = dayjs(new Date(date));
+    return dateObj.format("DD-MM-YYYY")
+  }
+
+  return (
+    <>
+      <SectionFullScreen name={id} showScrollGuide>
+        <div className="relative m-auto h-full flex flex-col items-center">
+          <BackgroundImage field={background} />
+
+          <div className="relative flex h-[calc(100%-200px)] w-full justify-center pt-[50px]">
+            {renderMedia()}
+            <MetaInfoModal field={metaInfo} />
+          </div>
+          <div className="z-10 flex w-full flex-col justify-between gap-2 p-3">
+            <Title field={name} configTheme={configTheme} />
+            <TagName field={tags} configTheme={configTheme} />
+            <div className="flex gap-1.5">
+              <Typography variant="span" className="font-thin">
+                Xuất bản ngày
+              </Typography>
+              <Typography variant="span" className="font-semibold underline">
+                {formatDate(releaseDate?.value)}
+              </Typography>
+            </div>
+            <AuthorModal field={authorModal} />
+          </div>
+        </div>
+      </SectionFullScreen>
+    </>
+  );
+};
+
+export default HomeSouvenirSection;
+
+export const HomSectionFS: FC<Props> = (props) => {
+  const { className } = props;
+  return (
+    <div className={twMerge(!!className && className)}>
+      <FullScreen>
+        <HomeSouvenirSection {...props} />
+      </FullScreen>
+    </div>
+  );
+};

package/src/components/LandingPage/common/ui-kit/organisms/HomeSection/HomeSouvenirSection/ImageWithFallback.tsx

@@ -0,0 +1,30 @@
+import {
+  DetailedHTMLProps,
+  ImgHTMLAttributes,
+  useEffect,
+  useState,
+} from "react";
+
+interface Props
+  extends DetailedHTMLProps<
+    ImgHTMLAttributes<HTMLImageElement>,
+    HTMLImageElement
+  > {}
+
+const DEFAULT_COVER =
+  "https://storage.googleapis.com/assets-fygito/nomion/sourvenir/bao-nhan-dan/ND-ma%CC%A3%CC%86c-%C4%91i%CC%A3nh.webp";
+
+const ImageWithFallback = (props: Props) => {
+  const { src, ...rest } = props;
+  const [imgSrc, setImgSrc] = useState(src);
+
+  useEffect(() => {
+    setImgSrc(src);
+  }, [src]);
+
+  return (
+    <img src={imgSrc} onError={() => setImgSrc(DEFAULT_COVER)} {...rest} />
+  );
+};
+
+export default ImageWithFallback;

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

@@ -0,0 +1,3 @@
+export { default as HomeSectionUI } from "./HomeSection";
+export { default as HomeNewspaperSectionUI } from "./HomeNewspaperSection";
+export { default as HomeSouvenirSectionUI } from "./HomeSouvenirSection/HomeSouvenirSection";

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

@@ -0,0 +1,26 @@
+import { cn } from "@phygitallabs/helpers";
+import { Typography } from "../../atomics";
+
+export default function HandSwipe({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn("w-fit flex items-end flex-col", !!className && className)}>
+      <svg
+        width="40"
+        height="40"
+        viewBox="0 0 40 40"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M33.7499 20.0007V27.9585C33.7499 31.9569 32.4249 34.1976 32.3687 34.3101C32.2647 34.5177 32.105 34.6924 31.9074 34.8143C31.7098 34.9363 31.4821 35.0009 31.2499 35.0007H9.9999C9.78199 35.0007 9.56786 34.9438 9.37874 34.8355C9.18962 34.7272 9.03209 34.5714 8.92178 34.3835L4.08584 25.0007C3.91649 24.7076 3.80843 24.3832 3.7682 24.047C3.72798 23.7109 3.75643 23.3702 3.85183 23.0454C3.94724 22.7206 4.10761 22.4186 4.32322 22.1576C4.53883 21.8967 4.80519 21.6822 5.10615 21.5273C6.30303 20.9023 7.77803 21.396 8.4499 22.5616L11.7312 28.2554C11.8224 28.4193 11.9601 28.5526 12.1269 28.6385C12.2937 28.7244 12.4822 28.7591 12.6687 28.7382H12.6874C12.9877 28.6865 13.2596 28.5294 13.4544 28.2951C13.6492 28.0608 13.7539 27.7647 13.7499 27.4601V8.75069C13.7495 8.41202 13.8179 8.07679 13.951 7.76536C14.0841 7.45393 14.2791 7.17278 14.5241 6.93899C14.7692 6.7052 15.0592 6.52364 15.3765 6.40532C15.6939 6.287 16.0319 6.2344 16.3702 6.25069C17.7155 6.31319 18.7499 7.47257 18.7499 8.81788V20.0007C18.7495 20.1721 18.7844 20.3417 18.8523 20.499C18.9202 20.6563 19.0198 20.798 19.1448 20.9152C19.2698 21.0324 19.4175 21.1227 19.5789 21.1804C19.7402 21.2381 19.9117 21.262 20.0827 21.2507C20.4041 21.2231 20.7032 21.0748 20.9197 20.8356C21.1363 20.5965 21.2542 20.2842 21.2499 19.9616V17.5007C21.2495 17.162 21.3179 16.8268 21.451 16.5154C21.5841 16.2039 21.7791 15.9228 22.0241 15.689C22.2692 15.4552 22.5592 15.2736 22.8765 15.1553C23.1939 15.037 23.5319 14.9844 23.8702 15.0007C25.2155 15.0632 26.2499 16.2226 26.2499 17.5679V21.2507C26.2495 21.4221 26.2844 21.5917 26.3523 21.749C26.4203 21.9063 26.5198 22.048 26.6448 22.1652C26.7698 22.2824 26.9175 22.3727 27.0789 22.4304C27.2402 22.4881 27.4117 22.512 27.5827 22.5007C27.904 22.4727 28.2029 22.3243 28.4193 22.0853C28.6358 21.8462 28.7539 21.5341 28.7499 21.2116V20.0741C28.7499 18.7288 29.7843 17.5741 31.1296 17.5069C31.4674 17.4907 31.8049 17.5431 32.1218 17.661C32.4387 17.779 32.7284 17.96 32.9734 18.1931C33.2183 18.4262 33.4135 18.7066 33.5469 19.0173C33.6804 19.328 33.7494 19.6625 33.7499 20.0007ZM38.7499 7.50069H30.5171L33.3843 4.63507C33.5004 4.51893 33.5925 4.38106 33.6554 4.22932C33.7182 4.07757 33.7506 3.91494 33.7506 3.75069C33.7506 3.58645 33.7182 3.42382 33.6554 3.27207C33.5925 3.12033 33.5004 2.98246 33.3843 2.86632C33.2681 2.75018 33.1303 2.65806 32.9785 2.5952C32.8268 2.53235 32.6641 2.5 32.4999 2.5C32.3357 2.5 32.173 2.53235 32.0213 2.5952C31.8695 2.65806 31.7317 2.75018 31.6155 2.86632L26.6155 7.86632C26.4993 7.98241 26.4071 8.12027 26.3442 8.27202C26.2813 8.42377 26.2489 8.58642 26.2489 8.75069C26.2489 8.91496 26.2813 9.07762 26.3442 9.22937C26.4071 9.38112 26.4993 9.51898 26.6155 9.63507L31.6155 14.6351C31.7317 14.7512 31.8695 14.8433 32.0213 14.9062C32.173 14.969 32.3357 15.0014 32.4999 15.0014C32.6641 15.0014 32.8268 14.969 32.9785 14.9062C33.1303 14.8433 33.2681 14.7512 33.3843 14.6351C33.5004 14.5189 33.5925 14.3811 33.6554 14.2293C33.7182 14.0776 33.7506 13.9149 33.7506 13.7507C33.7506 13.5865 33.7182 13.4238 33.6554 13.2721C33.5925 13.1203 33.5004 12.9825 33.3843 12.8663L30.5171 10.0007H38.7499C39.0814 10.0007 39.3994 9.869 39.6338 9.63458C39.8682 9.40016 39.9999 9.08221 39.9999 8.75069C39.9999 8.41917 39.8682 8.10123 39.6338 7.86681C39.3994 7.63239 39.0814 7.50069 38.7499 7.50069Z"
+          fill="white"
+        />
+      </svg>
+      <Typography
+        variant="p"
+        className="w-[120px] text-white text-right font-semibold text-sm mt-2">
+        Vuốt sang trái để xem tiếp
+      </Typography>
+    </div>
+  );
+}

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

@@ -0,0 +1,90 @@
+import SectionFullScreen from "../../../../../LandingPage/common/SectionFullScreen";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import { Field } from "../../types/base";
+import { Media } from "../../../../../LandingPage/models/general";
+import { BaseSectionProps } from "../../../../../LandingPage/models/base-section";
+import CarouselCustom from "../../../../../LandingPage/common/CarouselCustom";
+import { useState } from "react";
+import TitleCustom from "../../moleculars/Title";
+import { FadeInMotionV2 } from "../../../../../LandingPage/common/FadeInMotion";
+import { Typography } from "../../atomics";
+import HandSwipe from "./HandSwipe";
+
+interface Props extends BaseSectionProps {}
+
+interface SectionData {
+  image: Field<Media[]>;
+  title: Field<string>;
+  caption: Field<string>;
+}
+const HorizontalBookImageSection = (props: Props) => {
+  const { id, sectionData } = props;
+  const {
+    image = {
+      value: [],
+    },
+    title = {
+      value: "",
+    },
+  } = { ...sectionData } as SectionData;
+
+  const [pageIndex, setPageIndex] = useState<number>(1);
+  const pageLength = image.value?.length;
+
+  if (pageLength === 0) {
+    return null;
+  }
+
+  return (
+    <SectionFullScreen className="relative" name={id}>
+      {pageIndex === 1 && (
+        <div className="absolute h-screen w-1/2 bg-gradient-to-l right-0 from-black/50 to-black/0 z-[10] pointer-events-none">
+          <HandSwipe className="absolute top-1/2 -translate-y-1/2 animate-bounce-x right-4" />
+        </div>
+      )}
+      <FadeInMotionV2 delay={0.2} isVisible>
+        <>
+          {pageIndex === 1 && (
+            <TitleCustom
+              field={title}
+              className="absolute top-12 z-10 w-full text-center"
+            />
+          )}
+          <div className="h-full w-full !absolute z-0">
+            <CarouselCustom
+              slidesPerView={1}
+              className="h-full [&_.swiper-pagination-bullet-active]:!bg-white"
+              listItem={image?.value?.map((item, index) => {
+                return (
+                  <div
+                    key={index}
+                    className="w-full h-full items-center flex justify-center"
+                  >
+                    {!!item?.url && (
+                      <Image
+                        src={item.url}
+                        className="w-full h-full object-contain"
+                      />
+                    )}
+                  </div>
+                );
+              })}
+              onSlideChange={(swiper) => {
+                setPageIndex(swiper.realIndex + 1);
+              }}
+              lazyPreloadPrevNext={2}
+            />
+          </div>
+          <Typography
+            variant="p"
+            className="absolute text-white font-semibold w-fit text-sm bg-white/30 z-10 bottom-0 left-1/2 px-2 -translate-x-1/2 mb-2 rounded-sm flex justify-center"
+          >
+            {pageIndex}/{pageLength || 1}
+          </Typography>
+        </>
+      </FadeInMotionV2>
+    </SectionFullScreen>
+  );
+};
+
+export default HorizontalBookImageSection;