ui-landing-page 6.1.0

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

@@ -0,0 +1,79 @@
+import { BaseSectionProps } from "../../../../models/base-section";
+import SectionFullScreen from "../../../SectionFullScreen";
+import { Field } from "../../types/base";
+import { Media } from "../../../../models/general";
+import TitleCustom from "../../moleculars/Title";
+// import { FadeInMotion } from "../../../../../LandingPage/common/FadeInMotion";
+// import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+// import { Typography } from "../../atomics";
+// import { parse } from "@phygitallabs/helpers";
+import HesmanButton from "../../atomics/HesmanButton";
+import ARExploreIcon from "../../../../../LandingPage/common/icons/ARExploreIcon";
+import ThreeModelViewer from "../../../../../LandingPage/common/3DModel";
+
+interface SectionData {
+  button_info: Field<{
+    label: string;
+    url: string;
+  }>;
+  image: Field<Media>;
+  text: Field<{
+    htmlContent: string;
+  }>;
+  title: Field<string>;
+}
+
+interface Props extends BaseSectionProps {
+  sectionData: SectionData;
+}
+
+const HesmanMetaverseSection = (props: Props) => {
+  const { id, sectionData, configTheme } = props;
+  const { button_info, title } = sectionData;
+
+  // const textValue = text?.value.htmlContent;
+  const buttonValue = button_info?.value;
+
+  return (
+    <SectionFullScreen className="relative pt-[60px] space-y-4 px-4" name={id}>
+      <TitleCustom field={title} lineText configTheme={configTheme} />
+      <div className="h-[calc(100%-200px)]">
+        <ThreeModelViewer
+          isHidden={false}
+          showArButton={true}
+          asset3DUrl="https://storage.googleapis.com/assets-fygito/portal/hesman/heman_bust.glb"
+          poster="https://storage.googleapis.com/assets-fygito/portal/hesman/hesman_poster.webp"
+          buttonAr={
+            <HesmanButton className="flex justify-center gap-1 bottom-0 absolute">
+              <ARExploreIcon />
+              {buttonValue?.label}
+            </HesmanButton>
+          }
+        />
+      </div>
+      {/* {imageValue && imageValue.url && (
+        <FadeInMotion delay={0.5} className="max-h-[50%] w-full items-center">
+          <Image
+            src={imageValue.url}
+            alt="image"
+            className="h-full w-full object-contain"
+          />
+        </FadeInMotion>
+      )} */}
+      {/* <HesmanButton
+        onClick={
+          buttonValue?.url
+            ? () => {
+                window.open(buttonValue.url, "_blank");
+              }
+            : undefined
+        }
+        className="flex justify-center gap-1">
+        <ARExploreIcon />
+        {buttonValue?.label}
+      </HesmanButton> */}
+    </SectionFullScreen>
+  );
+};
+
+export default HesmanMetaverseSection;

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

@@ -0,0 +1,203 @@
+import React, { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import { twMerge } from "tailwind-merge";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import HesmanButton from "../../atomics/HesmanButton";
+import BaseButton from "../../atomics/BaseButton";
+
+interface Piece {
+  id: number;
+  imgSrc: string;
+}
+
+interface PuzzleGameProps {
+  name?: string;
+  originalImage: string;
+  pieces: Piece[];
+  onCancel: () => void;
+  onBack: () => void;
+}
+
+const PuzzleGame: React.FC<PuzzleGameProps> = ({
+  name,
+  originalImage,
+  pieces,
+  onBack,
+}) => {
+  const [showOriginal, setShowOriginal] = useState(true);
+  const [shuffledPieces, setShuffledPieces] = useState<Piece[]>([]);
+  const [selectedPiece, setSelectedPiece] = useState<number | null>(null);
+  const [isWin, setIsWin] = useState(false);
+  const [countdownTime, setCountdownTime] = useState(4);
+
+  // useEffect(() => {
+  //   // Show the original image for 3 seconds
+  //   const timer = setTimeout(() => {
+  //     setShowOriginal(false);
+  //     setShuffledPieces(shuffleArray(pieces));
+  //   }, 3000);
+
+  //   return () => clearTimeout(timer);
+  // }, [pieces]);
+
+  useEffect(() => {
+    // Initialize countdown time to 3 seconds
+    let countdown = 4;
+    // Update state to show countdown
+    setCountdownTime(countdown);
+
+    // Decrease countdown every second
+    const interval = setInterval(() => {
+      countdown -= 1;
+      setCountdownTime(countdown);
+
+      if (countdown === 0) {
+        clearInterval(interval);
+        setShowOriginal(false);
+        setShuffledPieces(shuffleArray(pieces));
+      }
+    }, 1000);
+
+    // Cleanup interval on component unmount
+    return () => clearInterval(interval);
+  }, [pieces]);
+
+  const shuffleArray = (originalArray: Piece[]): any => {
+    // Clone the original array to avoid modifying it
+    let array = [...originalArray];
+    let currentIndex = array.length,
+      temporaryValue,
+      randomIndex;
+
+    // While there remain elements to shuffle...
+    while (currentIndex !== 0) {
+      // Pick a remaining element...
+      randomIndex = Math.floor(Math.random() * currentIndex);
+      currentIndex -= 1;
+
+      // And swap it with the current element.
+      temporaryValue = array[currentIndex];
+      array[currentIndex] = array[randomIndex];
+      array[randomIndex] = temporaryValue;
+    }
+
+    // Check if the shuffled array is the same as the original, if so, reshuffle
+    if (array.every((val, index) => val === originalArray[index])) {
+      return shuffleArray(originalArray);
+    }
+
+    return array;
+  };
+
+  const handlePieceClick = (id: number) => {
+    if (selectedPiece === null) {
+      setSelectedPiece(id);
+    } else {
+      const newPieces = [...shuffledPieces];
+      const selectedIndex = newPieces.findIndex((p) => p.id === selectedPiece);
+      const clickedIndex = newPieces.findIndex((p) => p.id === id);
+
+      // Swap pieces with animation
+      const temp = newPieces[selectedIndex];
+      newPieces[selectedIndex] = newPieces[clickedIndex];
+      newPieces[clickedIndex] = temp;
+
+      setShuffledPieces(newPieces);
+      setSelectedPiece(null);
+
+      // Check if the user has won
+      if (checkWin(newPieces)) {
+        setTimeout(() => {
+          setIsWin(true);
+        }, 1000);
+      }
+    }
+  };
+
+  const checkWin = (pieces: Piece[]) => {
+    for (let i = 0; i < pieces.length; i++) {
+      if (pieces[i].id !== i + 1) {
+        return false;
+      }
+    }
+    return true;
+  };
+
+  if (isWin) {
+    return (
+      <div className="flex flex-col items-center justify-center bg-gray-100 p-4">
+        <div className="w-full h-full flex flex-col items-center">
+          <img
+            src={originalImage}
+            alt="Original"
+            className="w-auto h-[150px] object-cover m-auto mb-2"
+          />
+          <Image
+            className="object-cover m-auto mb-2"
+            src="https://storage.googleapis.com/assets-fygito/portal/hesman/trophy.png"
+            alt="Original"
+            width={200}
+            height={200}
+          />
+          <p className="text-[20px] font-bold text-white text-center z-10 mb-2">
+            Chúc mừng
+          </p>
+          {name && (
+            <p className="text-[20px] font-bold text-[#F8A54D] text-center z-10 mb-2">
+              {name}
+            </p>
+          )}
+          <p className="text-[20px] font-bold text-white text-center z-10 mb-4">
+            Bạn đã chiến thắng
+          </p>
+          <HesmanButton onClick={onBack}>Trở về</HesmanButton>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center h-[470px] bg-gray-100 p-4 relative">
+      <BaseButton onClick={onBack} className="self-start relative top-[-20px]">
+        Quay lại
+      </BaseButton>
+
+      {showOriginal ? (
+        <>
+          <img
+            src={originalImage}
+            alt="Original"
+            className="w-[300px] h-[450px] object-cover m-auto opacity-60"
+          />
+          {countdownTime < 4 && (
+            <div className="absolute z-10 w-full h-full flex items-center justify-center">
+              <div className="w-[80px] h-[80px] p-0 flex items-center justify-center text-[60px] text-white font-bold uppercase spacing-[60px]">
+                {countdownTime}
+              </div>
+            </div>
+          )}
+        </>
+      ) : (
+        <div className="grid grid-cols-2 gap-0 h-[450px] w-[300px]">
+          {shuffledPieces.map((piece) => (
+            <motion.div
+              key={piece.id}
+              className={twMerge(
+                "w-[150px] h-[150px] object-cover cursor-pointer transition-transform duration-200 border-[2px] border-solid"
+              )}
+              onClick={() => handlePieceClick(piece.id)}
+              transition={{ duration: 0.2 }}
+              whileTap={{ scale: 0.9 }}
+              style={{
+                borderColor: `${selectedPiece === piece.id ? "black" : "#ccc9c9"}`,
+              }}>
+              <img src={piece.imgSrc} alt={`Piece ${piece.id}`} />
+            </motion.div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PuzzleGame;

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

@@ -0,0 +1,129 @@
+import { BaseSectionProps } from "../../../../models/base-section";
+import SectionFullScreen from "../../../SectionFullScreen";
+import { useEffect, useState } from "react";
+import PuzzleGame from "./Puzzle";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import { twMerge } from "tailwind-merge";
+import HesmanButton from "../../atomics/HesmanButton";
+import { useFullScreenContext } from "../../../../../../components/LandingPage/hooks";
+
+const pieces = [
+  {
+    id: 1,
+    imgSrc:
+      "https://storage.googleapis.com/assets-fygito/portal/hesman/piece-0.webp",
+  },
+  {
+    id: 2,
+    imgSrc:
+      "https://storage.googleapis.com/assets-fygito/portal/hesman/piece-1.webp",
+  },
+  {
+    id: 3,
+    imgSrc:
+      "https://storage.googleapis.com/assets-fygito/portal/hesman/piece-2.webp",
+  },
+  {
+    id: 4,
+    imgSrc:
+      "https://storage.googleapis.com/assets-fygito/portal/hesman/piece-3.webp",
+  },
+  {
+    id: 5,
+    imgSrc:
+      "https://storage.googleapis.com/assets-fygito/portal/hesman/piece-4.webp",
+  },
+  {
+    id: 6,
+    imgSrc:
+      "https://storage.googleapis.com/assets-fygito/portal/hesman/piece-5.webp",
+  },
+];
+
+const hesmanOriginalImage =
+  "https://s3-sgn10.fptcloud.com/assets-fygito/portal/hesman/hesman_game.webp";
+
+interface Props extends BaseSectionProps {}
+
+const HesmanPuzzleSection = (props: Props & { name?: string }) => {
+  const { id, name } = props;
+  const [step, setStep] = useState(0);
+  const { isInViewport } = useFullScreenContext(id);
+
+  useEffect(() => {
+    if (!isInViewport && step !== 0) {
+      setStep(0);
+    }
+  }, [isInViewport]);
+
+  const handleClickPlay = () => {
+    setStep(1);
+  };
+
+  const handleClosePuzzleModal = () => {
+    setStep(0);
+  };
+
+  return (
+    <SectionFullScreen
+      className="flex flex-col items-center justify-center text-center gap-2 px-3"
+      name={id}>
+      {step === 0 && (
+        <>
+          <div className="absolute z-100 h-full w-full">
+            <Image
+              className="object-cover"
+              src={hesmanOriginalImage}
+              alt="home background"
+            />
+          </div>
+          <div
+            className={twMerge("absolute inset-0 h-full w-full")}
+            style={{
+              backgroundColor: "rgba(0, 0, 0, 0.7)",
+            }}
+          />
+          <h2 className="text-[24px] text-white uppercase z-10 leading-[28px] mb-6">
+            GAME XẾP HÌNH
+          </h2>
+          <HesmanButton
+            onClick={handleClickPlay}
+            className="text-lg font-[16px] z-10 py-2 px-4relative w-[130px] uppercase">
+            Chơi ngay
+          </HesmanButton>
+        </>
+      )}
+
+      {step === 1 && (
+        <PuzzleGame
+          name={name}
+          originalImage={hesmanOriginalImage}
+          pieces={pieces}
+          onCancel={handleClosePuzzleModal}
+          onBack={handleClosePuzzleModal}
+        />
+      )}
+
+      {/* <BaseButton
+       
+        className="text-black text-lg font-medium z-10 p-4 relative ">
+      </BaseButton> */}
+
+      {/* <Modal
+        wrapClassName="hesman-modal"
+        open={openPuzzleModal}
+        onCancel={handleClosePuzzleModal}
+        footer={null}
+        onOk={handleClosePuzzleModal}>
+        <PuzzleGame
+          originalImage={hesmanOriginalImage}
+          pieces={pieces}
+          open={openPuzzleModal}
+          onCancel={handleClosePuzzleModal}
+        />
+      </Modal> */}
+    </SectionFullScreen>
+  );
+};
+
+export default HesmanPuzzleSection;

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

@@ -0,0 +1,93 @@
+import { BaseSectionProps } from "../../../../models/base-section";
+import SectionFullScreen from "../../../SectionFullScreen";
+import { Field } from "../../types/base";
+import { Media } from "../../../../models/general";
+import TitleCustom from "../../moleculars/Title";
+import { FadeInMotion } from "../../../../../LandingPage/common/FadeInMotion";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import { Typography } from "../../atomics";
+import TiktokIcon from "../../../../common/icons/social-icons/TiktokIcon";
+import InstagramIcon from "../../../../common/icons/social-icons/InstagramIcon";
+import FacebookIcon from "../../../../common/icons/social-icons/FacebookIcon";
+
+interface SectionData {
+  title_1: Field<string>;
+  title_2: Field<string>;
+  link_facebook: Field<string>;
+  link_tiktok: Field<string>;
+  link_insta: Field<string>;
+  image: Field<Media>;
+  description: Field<string>;
+}
+
+interface Props extends BaseSectionProps {
+  sectionData: SectionData;
+}
+
+const HesmanMetaverseSection = (props: Props) => {
+  const { id, sectionData } = props;
+  const {
+    title_1,
+    title_2,
+    link_facebook,
+    link_tiktok,
+    link_insta,
+    image,
+    description,
+  } = {
+    ...sectionData,
+  } as SectionData;
+
+  const imageValue = image?.value;
+  const descriptionValue = description?.value;
+  return (
+    <SectionFullScreen
+      className="relative pt-[60px] flex items-center flex-col justify-between px-4 pb-4"
+      name={id}>
+      <FadeInMotion delay={0.25}>
+        <TitleCustom field={title_1} className="text-center text-lg" />
+        <TitleCustom
+          field={title_2}
+          className="text-[#F8A54D] text-center text-lg"
+        />
+      </FadeInMotion>
+      <FadeInMotion delay={0.25} className="w-full items-center">
+        <Image
+          src={imageValue.url}
+          alt="image"
+          className="h-full w-full object-contain"
+        />
+      </FadeInMotion>
+      <FadeInMotion delay={0.25} className="flex flex-col gap-1 items-center">
+        <Typography variant="p" className="text-sm text-center">
+          {descriptionValue}
+        </Typography>
+        <div className="flex-row flex gap-2">
+          <a
+            href={link_facebook?.value}
+            target="_blank"
+            rel="noreferrer"
+            className="p-1 rounded-[4px] bg-white/30">
+            <FacebookIcon />
+          </a>
+          <a
+            href={link_insta?.value}
+            target="_blank"
+            rel="noreferrer"
+            className="p-1 rounded-[4px] bg-white/30">
+            <InstagramIcon />
+          </a>
+          <a
+            href={link_tiktok?.value}
+            target="_blank"
+            rel="noreferrer"
+            className="p-1 rounded-[4px] bg-white/30">
+            <TiktokIcon />
+          </a>
+        </div>
+      </FadeInMotion>
+    </SectionFullScreen>
+  );
+};
+
+export default HesmanMetaverseSection;

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

@@ -0,0 +1,80 @@
+import { useRef, useState } from "react";
+import { BaseSectionProps } from "../../../../models/base-section";
+import SectionFullScreen from "../../../SectionFullScreen";
+import VideoRef from "../../moleculars/VideoRef";
+import { Field } from "../../types/base";
+import PlayIcon from "../../../icons/PlayIcon";
+import { Media } from "../../../../models/general";
+
+interface SectionData {
+  video_intro: Field<Media>;
+  thumbnail_image: Field<Media>;
+}
+
+interface Props extends BaseSectionProps {
+  sectionData: SectionData;
+}
+
+const HesmanVideoSection = (props: Props) => {
+  const { id, sectionData } = props;
+  const { video_intro, thumbnail_image } = sectionData;
+  const videoIntroRef = useRef<HTMLVideoElement | null>(null);
+  const [isPlay, setIsPlay] = useState(false);
+
+  const scrollToNextPage = () => {
+    const container = document.getElementById("snap-container");
+    const currentScreen = document.getElementById(id!);
+    if (!id || !currentScreen) return;
+    const top = currentScreen?.offsetTop + currentScreen?.clientHeight;
+    if (container) {
+      container.scrollTo({
+        top,
+        behavior: "smooth", // Add smooth scrolling effect
+      });
+    }
+  };
+
+  const resetVideo = () => {
+    if (!videoIntroRef?.current) return;
+    videoIntroRef.current.currentTime = 0;
+    setIsPlay(false);
+  };
+
+  const handleVideoEnd = () => {
+    setTimeout(() => {
+      resetVideo();
+      scrollToNextPage();
+    }, 1000);
+  };
+
+  return (
+    <SectionFullScreen
+      className="flex flex-col items-center justify-center text-center gap-2 relative"
+      name={id}>
+      <VideoRef
+        videoUrl={video_intro?.value?.url}
+        onLoadEnded={handleVideoEnd}
+        ref={videoIntroRef}
+      />
+      {!isPlay && (
+        <>
+          <div
+            className="z-50 absolute top-1/2 -translate-y-1/2 flex h-[80px] w-[80px] items-center justify-center rounded-full bg-black"
+            onClick={() => {
+              videoIntroRef.current?.play();
+              setIsPlay(true);
+            }}>
+            <PlayIcon />
+          </div>
+          <img
+            className="h-full w-full absolute"
+            src={thumbnail_image?.value?.url}
+            alt="Thumbnail"
+          />
+        </>
+      )}
+    </SectionFullScreen>
+  );
+};
+
+export default HesmanVideoSection;

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

@@ -0,0 +1,108 @@
+// @ts-nocheck
+import { FC, useEffect } from "react";
+import SectionFullScreen from "../../../SectionFullScreen/index";
+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 { twMerge } from "tailwind-merge";
+import { Typography } from "../../atomics";
+import ListButton from "../../moleculars/ListButton";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+
+interface HomeNewspaperSectionData {
+  name: Field;
+  tags: Field;
+  media: Field;
+  meta_info: Field;
+  config: Field;
+  background: Field;
+  author_modal: Field;
+  list_button: Field;
+  publish_time: Field;
+}
+
+export interface HomeNewspaperSectionProps extends BaseSectionProps {}
+
+const HomeNewspaperSection: FC<HomeNewspaperSectionProps> = (props) => {
+  const { sectionData, id, configTheme } = props;
+
+  const {
+    tags = {},
+    name = {},
+    media = {},
+    config = {},
+    background = {},
+    meta_info: metaInfo = {},
+    author_modal: authorModal = {},
+    list_button: listButton = {},
+    publish_time: publishTime = {},
+  } = { ...sectionData } as HomeNewspaperSectionData;
+
+  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="m-auto h-4/5 w-auto object-contain"
+          />
+        );
+      case MediaType.Video:
+        return (
+          <Video
+            videoUrl={url}
+            thumbnailUrl={thumbnail_url}
+            loop={true}
+            autoPlay
+            muted={true}
+          />
+        );
+    }
+  };
+
+  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%-250px)] 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} />
+            <AuthorModal field={authorModal} />
+            <Typography variant="span" className="font-thin">
+              {publishTime?.value}
+            </Typography>
+            <ListButton field={listButton} configTheme={configTheme} />
+          </div>
+        </div>
+      </SectionFullScreen>
+    </>
+  );
+};
+
+export default HomeNewspaperSection;