ui-landing-page 6.1.0

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

@@ -0,0 +1,38 @@
+import { getContentFromLexicalValue } from "@phygitallabs/helpers";
+import { BaseSectionProps } from "../../../../models/base-section";
+import SectionFullScreen from "../../../SectionFullScreen";
+import { Field } from "../../types/base";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+
+export interface ValentineLetterSectionProps extends BaseSectionProps {}
+
+interface ValentineLetterData {
+  letter: Field<any>;
+}
+
+export default function ValentineLetterSectionUI(
+  props: ValentineLetterSectionProps
+) {
+  const { id, sectionData } = props;
+
+  const { letter } = { ...sectionData } as ValentineLetterData;
+  const letterValue = getContentFromLexicalValue(letter?.value);
+
+  return (
+    <SectionFullScreen
+      name={id}
+      className="flex justify-center items-center p-5 bg-[url('https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/valentine/thefaceshop-2.webp')] bg-cover bg-center overflow-hidden"
+    >
+      <div className="flex flex-col gap-4 items-center mt-[200px] px-2">
+        <div className="text-base line-clamp-[20] text-[#AC1F2D] h-[calc(100%-200px)] max-w-full ">
+          {letterValue}
+        </div>
+        <Image
+          src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/valentine/love-icon-widget.png"
+          alt="love-icon"
+          width={85}
+        />
+      </div>
+    </SectionFullScreen>
+  );
+}

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

@@ -0,0 +1,6 @@
+export { default as ValentineHomeSectionUI } from "./ValentineHomeSection";
+export { default as ValentineLetterSectionUI } from "./ValentineLetterSection";
+export { default as ValentineGreetingSectionUI } from "./ValentineGreetingSection";
+export { default as ValentineTheFaceShopHomeSectionUI } from "./ValentineTheFaceShopHomeSection";
+export { default as ValentineTheFaceShopLetterSectionUI } from "./ValentineTheFaceShopLetterSection";
+export { default as ValentineTheFaceShopGreetingSectionUI } from "./ValentineTheFaceShopGreetingSection";

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

@@ -0,0 +1,63 @@
+import { FC } from "react";
+import ClampLines from "react-clamp-lines";
+import { Field } from "../../types/base";
+import { BaseSectionProps } from "../../../../models/base-section";
+import TitleCustom from "../../moleculars/Title";
+import SectionFullScreen from "../../../SectionFullScreen";
+import ImageWithBackground from "../../moleculars/ImageWithBackground";
+
+interface VerticalCarouselProps extends BaseSectionProps {}
+
+interface VerticalCarouselSectionData {
+  title: Field;
+  background: Field;
+  list_images: Field;
+}
+
+const VerticalCarouselSection: FC<VerticalCarouselProps> = ({
+  id,
+  sectionData,
+  configTheme,
+}) => {
+  const { title, list_images: listImage } =
+    sectionData as VerticalCarouselSectionData;
+  const { value } = { ...listImage };
+
+  return (
+    <>
+      {value?.map(
+        ({ image, title: subTitle, description }: any, index: number) => {
+          return (
+            <SectionFullScreen name={id} key={index}>
+              <div className="absolute left-0 top-0 z-10 flex h-full w-full flex-col items-center justify-between pt-[48px]">
+                <div className="w-full bg-black-alpha-.3 p-3 py-4 text-center backdrop-blur-md">
+                  <TitleCustom field={title} configTheme={configTheme} />
+                </div>
+                <div className="min-h-20 flex w-full flex-col items-start justify-center overflow-y-hidden bg-black-alpha px-6 py-4 backdrop-blur-md">
+                  {subTitle && (
+                    <p className="text-[14px] font-semibold text-white">
+                      {subTitle}
+                    </p>
+                  )}
+                  {description && (
+                    <ClampLines
+                      className="font-light"
+                      id="really-unique-id"
+                      text={description}
+                      lines={3}
+                      moreText="Đọc tiếp"
+                      lessText="Rút gọn"
+                    />
+                  )}
+                </div>
+              </div>
+              <ImageWithBackground field={{ value: image }} />
+            </SectionFullScreen>
+          );
+        }
+      )}
+    </>
+  );
+};
+
+export default VerticalCarouselSection;

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

@@ -0,0 +1,247 @@
+import IconMuted from "../../../icons/IconMuted";
+import IconUmuted from "../../../icons/IconUmuted";
+import PlayIcon from "../../../icons/PlayIcon";
+import { useFullScreenContext } from "../../../../hooks/useFullScreenContext";
+import { BaseSectionProps } from "../../../../models/base-section";
+import { Media } from "../../../../models/general";
+import { motion } from "framer-motion";
+import { useEffect, useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
+// import VideoRef from "../../moleculars/VideoRef";
+import SectionFullScreen from "../../../SectionFullScreen";
+import { Field } from "../../types/base";
+import Title from "../../moleculars/Title";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import { useMedia } from "../../../../hooks/audio";
+
+interface VideoIntroSectionData {
+  video: Field;
+  is_autoplay: Field;
+  has_controls: Field;
+  is_video_fullscreen: Field;
+  menu: Field;
+  thumbnails: Field<Media>;
+}
+
+export interface VideoIntroSectionProps extends BaseSectionProps {
+  onLoadEnd: () => void;
+  isMytam?: boolean;
+}
+
+const VideoIntroSection = (props: VideoIntroSectionProps) => {
+  const { sectionData, onLoadEnd, configTheme, isMytam } = props;
+  const id = props.id!;
+  const { currentSection, isInViewport } = useFullScreenContext(id);
+
+  const { registerMedia, unregisterMedia, play, pause } =
+    useMedia();
+
+  const {
+    video: videoField,
+    is_autoplay: isAutoPlayField,
+    has_controls: hasControlsField,
+    is_video_fullscreen: isVideoFullscreenField,
+    thumbnails,
+  } = sectionData as VideoIntroSectionData;
+
+  const video = videoField?.value as Media;
+  const isAutoPlay = isAutoPlayField?.value as boolean;
+  const hasControls = (hasControlsField?.value as boolean) || true;
+  const isVideoFullscreen = (isVideoFullscreenField?.value ?? true) as boolean;
+  const thumnailUrl = video?.thumbnail_url || thumbnails?.value?.url;
+
+  // const [isPlay, setIsPlay] = useState<boolean>(false);
+  const [isMuted, setIsMuted] = useState<boolean>(isAutoPlay);
+  const [showMuteBtn, setShowMuteBtn] = useState<boolean>(false);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [showThumbnail, setShowThumbnail] = useState<boolean>(true);
+
+  // const isPlay = getMediaStatus(id) === "playing";
+
+  useEffect(() => {
+    if (videoRef.current) {
+      registerMedia({
+        id,
+        type: "video",
+        element: videoRef.current,
+      });
+    }
+    return () => unregisterMedia(id);
+  }, []);
+
+  const onSkipVideo = () => {
+    pause(id);
+    onLoadEnd();
+  };
+
+  const handlePauseVideo = () => {
+    pause(id);
+  };
+
+  const handlePlayVideo = () => {
+    play(id);
+  };
+
+  useEffect(() => {
+    setShowMuteBtn(true);
+    const interval = setInterval(() => setShowMuteBtn(false), 2000);
+    return () => clearInterval(interval);
+  }, [isMuted]);
+
+  const toggleMute = () => {
+    if (videoRef.current) {
+      setIsMuted((prev) => !prev);
+      videoRef.current.muted = !isMuted;
+    }
+  };
+
+  useEffect(() => {
+    if (!currentSection) return;
+    if (!isInViewport) {
+      handlePauseVideo();
+      // videoRef.current!.currentTime = 0;
+    } else {
+      if (isAutoPlay) {
+        handlePlayVideo();
+      } else {
+        handlePauseVideo();
+      }
+    }
+  }, [isInViewport]);
+
+  const handleClickThumbnail = () => {
+    setShowThumbnail(false);
+    handlePlayVideo();
+  }
+
+  if (!video?.url && !isMytam) {
+    return null;
+  }
+
+  return (
+    <SectionFullScreen className="max-h-full" name={id}>
+      <motion.div
+        className={twMerge(
+          "relative m-auto flex h-full w-full max-w-[600px] flex-col items-center overflow-hidden",
+          isVideoFullscreen && "items-center justify-center"
+        )}
+        initial={{ opacity: 0, scale: 0.8 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 1 }}
+      >
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.2 }}
+          className={twMerge(
+            "absolute h-[250px] w-full",
+            isVideoFullscreen && " h-full items-center flex justify-center"
+          )}
+        >
+          <video
+            ref={videoRef}
+            controls={hasControls}
+            src={video?.url}
+            muted={isMuted}
+            onEnded={onSkipVideo}
+            onPlay={() => {
+              play(id);
+            }}
+            onPause={() => {
+              pause(id);
+            }}
+            className="h-full w-full object-cover"
+          />
+
+          {/* <VideoRef
+            controls={hasControls}
+            videoUrl={video?.url}
+            thumbnailUrl={thumnailUrl}
+            onLoadEnded={onSkipVideo}
+            ref={videoRef}
+            muted={isMuted}
+            onPlay={() => {
+              play(id);
+            }}
+            onPause={() => {
+              pause(id);
+            }}
+          /> */}
+          {isMytam && (
+            <div className="p-4 space-y-5">
+              <div className="border-b p-3">
+                <Title field={{ value: "Ước gì" }} configTheme={configTheme} />
+                <div className="text-sm">Tốp ca / sáng tác Võ Thiện Thanh</div>
+              </div>
+              <div className="border-b p-3">
+                <Title
+                  field={{ value: "Tình Yêu Chưa Nói - Nhé Anh" }}
+                  configTheme={configTheme}
+                />
+                <div className="text-sm">
+                  Liên khúc / sáng tác Mỹ Tâm - Nguyễn Hà
+                </div>
+              </div>
+              <div className="border-b p-3">
+                <Title
+                  field={{ value: "Chuyện Như Chưa Bắt Đầu" }}
+                  configTheme={configTheme}
+                />
+                <div className="text-sm">Sáng tác</div>
+              </div>
+              <div className="border-b p-3">
+                <Title
+                  field={{ value: "Ngôi Sao Cô Đơn" }}
+                  configTheme={configTheme}
+                />
+                <div className="text-sm">
+                  biểu diễn Quang Dũng / Sáng tác Thanh Tùng
+                </div>
+              </div>
+            </div>
+          )}
+        </motion.div>
+
+        
+        {showThumbnail ? (
+          <div className="relative h-full w-full z-10" 
+          onClick={handleClickThumbnail}>
+            {!!thumnailUrl  && (
+              <Image
+                src={thumnailUrl}
+                alt="Intro Thumbnail"
+                className="h-full w-full object-cover z-0"
+                
+              />
+            )}
+
+            <div className="cursor absolute flex h-full w-full items-center justify-center z-10 top-0 left-0">
+              <div className="relative flex h-full w-full items-center justify-center">
+                <div className="absolute inline-flex h-[55px] w-[55px] animate-ping rounded-full bg-white"></div>
+                <div
+                  className="z-50 flex h-[80px] w-[80px] items-center justify-center rounded-full bg-black"
+                  onClick={handlePlayVideo}
+                >
+                  <PlayIcon />
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          !hasControls && (
+            <div
+              onClick={toggleMute}
+              className="absolute m-auto flex h-full w-full items-center justify-center"
+            >
+              <div className={twMerge(!showMuteBtn && "hidden")}>
+                {isMuted ? <IconMuted /> : <IconUmuted />}
+              </div>
+            </div>
+          )
+        )}
+      </motion.div>
+    </SectionFullScreen>
+  );
+};
+
+export default VideoIntroSection;

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

@@ -0,0 +1,140 @@
+import { cn } from "@phygitallabs/helpers";
+import { BaseSectionProps } from "../../../../models/base-section";
+import SectionFullScreen from "../../../SectionFullScreen";
+import { Field } from "../../types/base";
+import { Media } from "../../../../models/general";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import { useState } from "react";
+
+export interface WomanGreetingSectionProps extends BaseSectionProps {}
+
+interface GreetingItem {
+  image: Media;
+  description: string;
+}
+
+interface ValentineGreetingSectionData {
+  greeting_1: Field<GreetingItem>;
+  greeting_2: Field<GreetingItem>;
+  greeting_3: Field<GreetingItem>;
+}
+
+const GreetingWidget = ({
+  index,
+  isRounded = false,
+  className,
+  setActiveWidget,
+  activeWidget,
+  translateDirection = "left",
+  imageUrl = "https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/valentine/love-icon-widget.png",
+  description = "my greatest blessing",
+}: {
+  index: number;
+  isRounded?: boolean;
+  className: string;
+  setActiveWidget: (index: number | null) => void;
+  activeWidget: number | null;
+  translateDirection?: "left" | "right";
+  imageUrl?: string;
+  description?: string;
+}) => (
+  <div
+    className={className}
+    onClick={() => {
+      setActiveWidget(activeWidget === index ? null : index);
+    }}
+  >
+    <div
+      className={cn(
+        "absolute top-0 left-0 w-full shadow-lg shadow-black/25 h-full bg-gradient-valentine z-10 duration-500",
+        isRounded ? "rounded-full" : "rounded-lg",
+        activeWidget === index
+          ? translateDirection === "left"
+            ? "-translate-x-[100%] translate-y-[80%]"
+            : "translate-x-[100%] translate-y-[80%]"
+          : ""
+      )}
+    >
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 w-full h-full flex items-center justify-center p-3 -translate-y-1/2">
+        <p className="text-[#DC4958] text-sm font-normal w-full text-center line-clamp-4">
+          {description}
+        </p>
+      </div>
+    </div>
+    <div
+      className={cn(
+        "absolute z-0 border-2 scale-[95%] top-0 left-0 w-full h-full overflow-hidden",
+        isRounded && "rounded-full"
+      )}
+    >
+      {imageUrl && (
+        <Image
+          src={imageUrl}
+          alt="greeting-image"
+          className="w-full h-full object-cover"
+        />
+      )}
+    </div>
+  </div>
+);
+
+export default function WomanGreetingSectionUI(
+  props: WomanGreetingSectionProps
+) {
+  const { id, sectionData } = props;
+
+  const { greeting_1, greeting_2, greeting_3 } = {
+    ...sectionData,
+  } as ValentineGreetingSectionData;
+
+  const greeting1 = greeting_1?.value;
+  const greeting2 = greeting_2?.value;
+  const greeting3 = greeting_3?.value;
+
+  const greeting1Image = greeting1?.image?.url;
+  const greeting1Description = greeting1?.description;
+
+  const greeting2Image = greeting2?.image?.url;
+  const greeting2Description = greeting2?.description;
+  const greeting3Image = greeting3?.image?.url;
+  const greeting3Description = greeting3?.description;
+
+  const [activeWidget, setActiveWidget] = useState<number | null>(null);
+
+  return (
+    <SectionFullScreen
+      name={id}
+      className="flex justify-center items-center p-5 bg-[url('https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/valentine/8:3-bg-3.png')] bg-cover bg-center bg-no-repeat"
+    >
+      <div className="relative w-full h-full">
+        <GreetingWidget
+          index={0}
+          activeWidget={activeWidget}
+          setActiveWidget={setActiveWidget}
+          className="absolute h-32 w-32 z-10 top-[15%] left-9"
+          imageUrl={greeting1Image}
+          description={greeting1Description}
+        />
+        <GreetingWidget
+          index={1}
+          isRounded
+          activeWidget={activeWidget}
+          setActiveWidget={setActiveWidget}
+          translateDirection="right"
+          className="absolute h-32 w-32 rounded-full z-10 top-[35%] right-9"
+          imageUrl={greeting2Image}
+          description={greeting2Description}
+        />
+
+        <GreetingWidget
+          index={3}
+          activeWidget={activeWidget}
+          setActiveWidget={setActiveWidget}
+          className="absolute w-5/6 h-32 rounded-md z-10 left-1/2 -translate-x-1/2 bottom-[13%]"
+          imageUrl={greeting3Image}
+          description={greeting3Description}
+        />
+      </div>
+    </SectionFullScreen>
+  );
+}

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

@@ -0,0 +1,94 @@
+import { FC, useEffect, useRef } from "react";
+import { motion, Variants } from "framer-motion";
+import SectionFullScreen from "../../../SectionFullScreen";
+import { BaseSectionProps } from "../../../../models/base-section";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import { SpeakerSimpleSlash } from "@phosphor-icons/react";
+import { SpeakerSimpleHigh } from "@phosphor-icons/react";
+import { useMedia } from "../../../../hooks/audio";
+
+export interface WomanHomeSectionProps extends BaseSectionProps {}
+const WomanHomeSection: FC<WomanHomeSectionProps> = (props) => {
+  const { sectionData } = props;
+  const id = props.id!;
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const { registerMedia, unregisterMedia, play, pause, getMediaStatus } =
+    useMedia();
+
+  const isPlaying = getMediaStatus(id) === "playing";
+
+  const audioValue = sectionData?.audio?.value?.url;
+
+  useEffect(() => {
+    if (audioRef.current) {
+      registerMedia({
+        id,
+        type: "audio",
+        element: audioRef?.current,
+      });
+    }
+
+    return () => {
+      unregisterMedia(id);
+    };
+  }, []);
+
+  const handlePlayAudio = () => {
+    play(id);
+  };
+
+  const handlePauseAudio = () => {
+    pause(id);
+  };
+
+  const imageVariants: Variants = {
+    initial: { y: 0, opacity: 0 },
+    animate: { y: "-25%", opacity: 1 },
+  };
+
+  return (
+    <SectionFullScreen
+      name={id}
+      className="relative flex justify-center items-center
+       bg-[url('https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/valentine/8:3-bg-1.png')] bg-cover bg-center
+      "
+    >
+      <audio ref={audioRef} src={audioValue} className="hidden" />
+      {audioValue && (
+        <div className="fixed z-20 bottom-0 right-0 p-2 text-white cursor-pointer">
+          {!isPlaying ? (
+            <SpeakerSimpleSlash
+              size={28}
+              weight="fill"
+              color="#F75C88"
+              onClick={handlePlayAudio}
+            />
+          ) : (
+            <SpeakerSimpleHigh
+              size={28}
+              weight="fill"
+              color="#F75C88"
+              onClick={handlePauseAudio}
+            />
+          )}
+        </div>
+      )}
+
+      <motion.div
+        transition={{ duration: 1 }}
+        variants={imageVariants}
+        whileInView="animate"
+        className="flex justify-center items-center w-full"
+      >
+        <Image
+          src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/valentine/8:3-title-home.png"
+          alt="Woman-material"
+          width={"80%"}
+          className="object-contain"
+        />
+      </motion.div>
+    </SectionFullScreen>
+  );
+};
+
+export default WomanHomeSection;

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

@@ -0,0 +1,43 @@
+import { getContentFromLexicalValue } from "@phygitallabs/helpers";
+import { BaseSectionProps } from "../../../../models/base-section";
+import SectionFullScreen from "../../../SectionFullScreen";
+import { Field } from "../../types/base";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+
+export interface WomanLetterSectionProps extends BaseSectionProps {}
+
+interface WomanLetterData {
+  title: Field<string>;
+  letter: Field<any>;
+}
+
+export default function WomanLetterSectionUI(props: WomanLetterSectionProps) {
+  const { id, sectionData } = props;
+
+  const { title, letter } = { ...sectionData } as WomanLetterData;
+  const titleValue = title?.value;
+  const letterValue = getContentFromLexicalValue(letter?.value);
+
+  return (
+    <SectionFullScreen
+      name={id}
+      className="flex justify-center items-center p-5 bg-[url('https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/valentine/8:3-bg-2.png')] overflow-hidden bg-cover bg-center"
+    >
+      <div className="flex flex-col gap-4 items-center text-[#DC4958] px-2">
+        {titleValue && (
+          <p className="text-[90px] text-center leading-[80%] font-amstirdam line-clamp-3 max-w-full">
+            {titleValue}
+          </p>
+        )}
+        <div className="text-base line-clamp-[20] max-w-full">
+          {letterValue}
+        </div>
+        <Image
+          src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/valentine/love-icon-widget.png"
+          alt="love-icon"
+          width={85}
+        />
+      </div>
+    </SectionFullScreen>
+  );
+}

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

@@ -0,0 +1,3 @@
+export { default as WomanHomeSection } from "./WomanHomeSection";
+export { default as WomanLetterSection } from "./WomanLetterSection";
+export { default as WomanGreetingSection } from "./WomanGreetingSection";