ui-landing-page 6.1.0

package/src/components/LandingPage/common/ui-kit/organisms/BEDIPageSection/BEDIPage1Section/BEDIBentoImageSection.tsx

@@ -0,0 +1,170 @@
+import { Field } from "../../../types/base";
+import { Media } from "../../../../../models/general";
+import { HEADER_HEGIHT } from "../../../../../constants";
+import { twMerge } from "tailwind-merge";
+import { LayoutImages } from "../../BEDIPageSection";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+
+interface Props {
+  sectionData: {
+    sender: Field<string>;
+    receiver: Field<string>;
+    memory_images: Field<Media[]>;
+    letter: Field;
+    letter_background: Field<Media>;
+    layout_images: Field<LayoutImages>;
+  };
+}
+
+const IMG_HAPPIEST =
+  "https://storage.googleapis.com/assets-fygito/images/user_id/1723626533-Thehappiestcouple.webp";
+const IMG_TO_HEART =
+  "https://storage.googleapis.com/assets-fygito/images/user_id/1723626572-totheheart,loveandbeyond.webp";
+// const IMG_DEAR =
+//   "https://storage.googleapis.com/assets-fygito/images/user_id/1723625442-Dear.webp";
+const DEFAULT_BG =
+  "https://storage.googleapis.com/assets-fygito/images/user_id/1723711363-image1.webp";
+
+const getLayoutFromLength = (length: number) => {
+  if (length > 6) return;
+  if (length === 2) return LayoutImages.Two;
+  if (length === 3) return LayoutImages.Three;
+  if (length === 4) return LayoutImages.Four;
+  if (length === 5) return LayoutImages.Four;
+  if (length === 6) return LayoutImages.Six;
+};
+
+function CommonLayout({ children, className }: any) {
+  return (
+    <div
+      className={twMerge(
+        "flex flex-col justify-center max-w-full max-h-[500px] short:max-h-[340px] h-full",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+function CommonImage({ url, className }: any) {
+  return (
+    <div className={twMerge("p-[1px]", className)}>
+      <Image
+        className={twMerge("object-cover")}
+        width="100%"
+        height={"100%"}
+        src={url}
+        alt={url}
+      />
+    </div>
+  );
+}
+
+const BEDIBentoImageSection = (props: Props) => {
+  const { sectionData } = props;
+  const { sender, receiver, memory_images, layout_images } = sectionData;
+  const renderImages = () => {
+    const imageLength = memory_images?.value?.filter(
+      (image) => image?.url
+    )?.length;
+    if (!imageLength) return null;
+    let layout = layout_images?.value;
+    if (!layout) layout = getLayoutFromLength(imageLength)!;
+    switch (layout) {
+      case LayoutImages.Two:
+        return (
+          <CommonLayout className="aspect-[16/18]">
+            {memory_images?.value
+              ?.slice(0, 2)
+              ?.map((image, index) => (
+                <CommonImage
+                  url={image?.url}
+                  className="h-1/2 w-full"
+                  key={index}
+                />
+              ))}
+          </CommonLayout>
+        );
+      case LayoutImages.Three:
+        return (
+          <CommonLayout className="aspect-[16/27]">
+            {memory_images?.value
+              ?.slice(0, 3)
+              ?.map((image, index) => (
+                <CommonImage
+                  url={image?.url}
+                  className="h-1/3 w-full"
+                  key={index}
+                />
+              ))}
+          </CommonLayout>
+        );
+      case LayoutImages.Four:
+        return (
+          <CommonLayout className="aspect-[9/16] flex-wrap">
+            {memory_images?.value
+              ?.slice(0, 4)
+              ?.map((image, index) => (
+                <CommonImage
+                  url={image?.url}
+                  className="h-1/2 w-1/2"
+                  key={index}
+                />
+              ))}
+          </CommonLayout>
+        );
+      case LayoutImages.Six:
+        return (
+          <CommonLayout className="aspect-[10/12] flex-wrap">
+            {memory_images?.value
+              ?.slice(0, 6)
+              ?.map((image, index) => (
+                <CommonImage
+                  url={image?.url}
+                  className="h-1/3 w-1/2"
+                  key={index}
+                />
+              ))}
+          </CommonLayout>
+        );
+    }
+  };
+
+  return (
+    <div
+      className="flex flex-col relative w-full justify-center items-center h-[100svh] svh-full"
+      // isSnapScroll={false}
+    >
+      <div
+        className="flex flex-col items-center justify-center h-full pb-10 pt-[60px] short:pt-[55px] gap-4 short:gap-3 w-full"
+        style={{
+          backgroundImage: `url(${DEFAULT_BG})`,
+        }}
+      >
+        <div className="h-[calc(100%-110px)] w-full flex flex-col items-center gap-1.5 justify-center">
+          <img
+            className="max-w-[275px] short:w-[200px]"
+            src={IMG_HAPPIEST}
+            alt="Happiest"
+          />
+          <div className="flex gap-2 font-canela text-2xl mb-6 text-white">
+            <div>{sender?.value}</div>
+            <div>&</div>
+            <div>{receiver?.value}</div>
+          </div>
+          <div className="flex w-full flex-wrap back justify-center px-4">
+            {renderImages()}
+          </div>
+          <img
+            className="w-[150px] short:w-[125px] mt-2"
+            src={IMG_TO_HEART}
+            alt="Dear"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BEDIBentoImageSection;

package/src/components/LandingPage/common/ui-kit/organisms/BEDIPageSection/BEDIPage1Section/BEDIIntroSection.tsx

@@ -0,0 +1,69 @@
+import VideoRef from "../../../moleculars/VideoRef";
+import PlayIcon from "../../../../icons/PlayIcon";
+import { useRef, useState } from "react";
+import { useSwiper } from "swiper/react";
+import { HEADER_HEGIHT } from "../../../../../constants";
+import { BEDIEnumId } from "../constants";
+
+const BEDIIntroSection = ({ onVideoEnd }: any) => {
+  const videoIntroRef = useRef<HTMLVideoElement | null>(null);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const [isPlay, setIsPlay] = useState(false);
+  const swiper = useSwiper();
+
+  const scrollToNextPage = () => {
+    swiper.slideNext();
+  };
+
+  const resetVideo = () => {
+    if (!videoIntroRef?.current) return;
+    videoIntroRef.current.currentTime = 0;
+    setIsPlay(false);
+  };
+
+  const handleVideoEnd = () => {
+    onVideoEnd();
+    setTimeout(() => {
+      resetVideo();
+      scrollToNextPage();
+    }, 1500);
+  };
+
+  return (
+    <div
+      id={BEDIEnumId.Intro}
+      className="flex flex-col items-center justify-center text-center gap-2 relative h-[100svh] svh-full"
+      style={{
+        paddingTop: `${HEADER_HEGIHT}px`,
+      }}>
+      <VideoRef
+        videoUrl="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/media/bedi-video.MOV"
+        onLoadEnded={handleVideoEnd}
+        ref={videoIntroRef}
+        thumbnailUrl="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/media/bedi-video-thumbnail.webp"
+        objectFit="cover"
+        muted={true}
+      />
+      <audio
+        loop
+        ref={audioRef}
+        src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/media/time-flies.mp3"
+      />
+      {!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();
+              audioRef?.current?.play();
+              setIsPlay(true);
+            }}>
+            <PlayIcon />
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default BEDIIntroSection;

package/src/components/LandingPage/common/ui-kit/organisms/BEDIPageSection/BEDIPage1Section/BEDILetterSection.tsx

@@ -0,0 +1,71 @@
+import { BaseSectionProps } from "../../../../../models/base-section";
+import { Field } from "../../../types/base";
+import { Media } from "../../../../../models/general";
+import { parse } from "@phygitallabs/helpers";
+import { FadeInMotion } from "../../../../FadeInMotion";
+import { HEADER_HEGIHT } from "../../../../../../LandingPage/constants";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+
+interface Props extends BaseSectionProps {}
+interface SectionData {
+  letter_background: Field<Media>;
+  letter: Field;
+}
+
+const IMG_DEAR =
+  "https://storage.googleapis.com/assets-fygito/images/user_id/1723625442-Dear.webp";
+// const IMG_INFINITIVE_LOVE =
+//   "https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/media/bedi/infinity love.webp";
+const DEFAULT_BG =
+  "https://storage.googleapis.com/assets-fygito/images/user_id/1723711363-image1.webp";
+
+const BEDILetterSection = (props: Props) => {
+  const { sectionData } = props;
+  const { letter, letter_background } = sectionData as SectionData;
+
+  return (
+    <div
+      style={{
+        paddingTop: `${HEADER_HEGIHT}px`,
+      }}
+      className="w-full h-[100svh] svh-full relative">
+      <FadeInMotion className="h-full" delay={0.5}>
+        <div className="relative z-50 h-full w-full px-5 pb-[10svh] justify-center pt-[30px] flex flex-col items-center gap-3">
+          <img className="w-auto max-h-[60px]" src={IMG_DEAR} alt="Dear" />
+          <div className="w-full text-justify text-base leading-7 mb-10 text-white">
+            {parse(letter?.value?.htmlContent)}
+          </div>
+        </div>
+
+        {!letter_background?.value?.url && (
+          <div className="absolute z-0 w-full h-full top-0 left-0">
+            <Image
+              width={"100%"}
+              height={"100%"}
+              className="object-cover"
+              src={DEFAULT_BG}
+              alt="Infinity love"
+            />
+          </div>
+        )}
+
+        {letter_background?.value?.url && (
+          <div className="absolute z-10 w-full h-full">
+            <div className="w-full h-full relative overlay z-20"></div>
+            <div className="absolute z-2 w-full h-full top-0 left-0">
+              <Image
+                width={"100%"}
+                height={"100%"}
+                className="object-cover"
+                src={letter_background?.value?.url}
+                alt="Infinity love"
+              />
+            </div>
+          </div>
+        )}
+      </FadeInMotion>
+    </div>
+  );
+};
+
+export default BEDILetterSection;

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

@@ -0,0 +1,102 @@
+import CarouselCustom from "../../../../CarouselCustom";
+import BEDIIntroSection from "./BEDIIntroSection";
+import BEDIBentoImageSection from "./BEDIBentoImageSection";
+import { useEffect, useRef, useState } from "react";
+import { BEDISectionData } from "../index";
+import { BEDIEnumId } from "../constants";
+import BEDILetterSection from "../../BEDIPageSection/BEDIPage1Section/BEDILetterSection";
+
+interface Props {
+  sectionData: BEDISectionData;
+  handleShowScrollDown?: () => void;
+}
+
+const BEDIPage1Section = (props: Props) => {
+  const { sectionData, handleShowScrollDown } = props;
+  const {
+    sender,
+    receiver,
+    memory_images,
+    letter,
+    letter_background,
+    layout_images,
+  } = sectionData;
+  const [pageIndex, setPageIndex] = useState(1);
+  const [swiperInstance, setSwiperInstance] = useState<any>(null);
+  const [autoSlide, setAutoSlide] = useState(false);
+  const timerId = useRef<any>(null);
+
+  const scrollToNextpage = () => {
+    console.log("scrollToNextpage");
+    const container = document.getElementsByTagName("body")[0];
+    const targetEle = document.getElementById(BEDIEnumId.WhatIsLove)!;
+    const top = targetEle?.offsetTop - 48;
+    if (container) {
+      container.scrollTo({
+        top,
+        behavior: "smooth", // Add smooth scrolling effect
+      });
+    }
+  };
+
+  useEffect(() => {
+    const container = document.getElementById("snap-container");
+    if (!container) return;
+    container.addEventListener("scroll", () => {
+      clearTimeout(timerId.current);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!swiperInstance) return;
+    if (pageIndex === 1) clearTimeout(timerId.current);
+    if (pageIndex === 2) {
+      if (autoSlide) {
+        timerId.current = setTimeout(() => swiperInstance.slideNext(), 4000);
+      }
+    }
+    if (pageIndex === 3) {
+      handleShowScrollDown?.();
+      if (autoSlide) {
+        setAutoSlide(false);
+        timerId.current = setTimeout(() => {
+          scrollToNextpage();
+        }, 7000);
+      }
+    }
+
+    return () => clearTimeout(timerId.current);
+  }, [pageIndex]);
+
+  return (
+    <div
+      id={BEDIEnumId.Intro}
+      className="flex flex-col items-center justify-center text-center gap-2 relative h-[100svh] svh-full bg-[#040A3F]">
+      <CarouselCustom
+        spaceBetween={0}
+        setSwiperInstance={setSwiperInstance}
+        hasClickNavigation={false}
+        onSlideChange={(swiper) => {
+          setPageIndex(swiper.realIndex + 1);
+        }}
+        slidesPerView={1}
+        listItem={[
+          <BEDIIntroSection onVideoEnd={() => setAutoSlide(true)} />,
+          <BEDIBentoImageSection
+            sectionData={{
+              sender,
+              receiver,
+              memory_images,
+              letter,
+              letter_background,
+              layout_images,
+            }}
+          />,
+          <BEDILetterSection sectionData={{ letter, letter_background }} />,
+        ]}
+      />
+    </div>
+  );
+};
+
+export default BEDIPage1Section;

package/src/components/LandingPage/common/ui-kit/organisms/BEDIPageSection/BEDIPage1Section/BgLetter.tsx

@@ -0,0 +1,29 @@
+import { twMerge } from "tailwind-merge";
+
+interface Props {
+  url: string;
+}
+
+const BgLetter = (props: Props) => {
+  const { url } = props;
+  return (
+    <>
+      <div
+        className="absolute h-[100svh] svh-full w-full bg-cover bg-center blur z-10 bg-black"
+        style={{
+          backgroundImage: `url("${url}")`,
+        }}
+      />
+      <div
+        className={twMerge(
+          "absolute inset-0 h-[100svh] svh-full w-full z-20 bg-[#040A3F]"
+        )}
+        // style={{
+        //   backgroundColor: "rgba(255, 255, 255, 0.65)",
+        // }}
+      />
+    </>
+  );
+};
+
+export default BgLetter;

package/src/components/LandingPage/common/ui-kit/organisms/BEDIPageSection/constants.ts

@@ -0,0 +1,35 @@
+export enum BEDIEnumId {
+  Carousel = "bedi-carousel",
+  BentoImage = "bedi-bento-image",
+  Intro = "bedi-intro",
+  Letter = "bedi-letter",
+  Activate = "bedi-activate",
+  WhatIsLove = "bedi-what-is-love",
+  InfinityLove = "bedi-infinity-love",
+  BatteryLove = "bedi-battery-love",
+  UserGuide = "bedi-user-guide",
+  Contact = "bedi-contact",
+}
+
+export const BEDIMenuOrder = [
+  {
+    name: "You & Me",
+    id: BEDIEnumId.Intro,
+  },
+  {
+    name: "Tình yêu có nghĩa là gì",
+    id: BEDIEnumId.WhatIsLove,
+  },
+  {
+    name: "Kích hoạt Lover - Ship",
+    id: BEDIEnumId.Activate,
+  },
+  {
+    name: "Hướng dẫn sử dụng",
+    id: BEDIEnumId.UserGuide,
+  },
+  {
+    name: "Liên hệ",
+    id: BEDIEnumId.Contact,
+  },
+];

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

@@ -0,0 +1,171 @@
+import { BaseSectionProps } from "../../../../../LandingPage/models/base-section";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import { FC, useEffect, useState } from "react";
+import { Field } from "../../types/base";
+import { LexicalType, Media } from "../../../../models/general";
+import BEDIContactSection from "./BEDIContactSection";
+import { ChevronDown, VerifiedIcon } from "lucide-react";
+import BEDIPage1Section from "./BEDIPage1Section/BEDIPage1Section";
+import BEDICarouselSection from "./BEDICarouselSection";
+import { BEDIEnumId } from "./constants";
+import { twMerge } from "tailwind-merge";
+
+export enum LayoutImages {
+  Two = "2",
+  Three = "3",
+  ThreeMixed = "3-mixed",
+  Four = "4",
+  Six = "6",
+}
+
+export interface BEDIContact {
+  facebook: string;
+  insta: string;
+  tiktok: string;
+  phone: string;
+  location: string;
+}
+
+export interface BEDISectionData {
+  video_intro: Field<Media>;
+  active_image: Field<Media>;
+  video_intro_thumbnail: Field<Media>;
+  memory_images: Field<Media[]>;
+  sender: Field<string>;
+  receiver: Field<string>;
+  letter: Field<LexicalType>;
+  activation_url: Field<string>;
+  contacts: Field<BEDIContact>;
+  letter_background: Field<Media>;
+  layout_images: Field<LayoutImages>;
+}
+
+export interface BEDIPageSectionProps extends BaseSectionProps {
+  sectionData: BEDISectionData;
+}
+
+const ScrollGuide = ({
+  className = "",
+}: {
+  title?: string;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={twMerge(
+        "fixed bottom-0 left-0 z-[200] flex h-[50px] w-full cursor-pointer flex-col items-center justify-center text-center",
+        className
+      )}>
+      <p className="text-[10px] font-semibold uppercase text-white">
+        Kéo xuống
+      </p>
+      <div className="mx-auto animate-bounce">
+        <ChevronDown width={30} height={30} color="white" />
+      </div>
+    </div>
+  );
+};
+
+const BEDIPageSection: FC<BEDIPageSectionProps> = (props) => {
+  const { sectionData } = props;
+  const { active_image } = sectionData;
+  const [show, setShow] = useState(false);
+  const [showPosition, setShowPosition] = useState(false);
+  const [isInLastSection, setIsInLastSection] = useState<boolean | null>(null);
+  const handleScroll = () => {
+    const container = document.getElementsByTagName("body")[0]; 
+    const scrollHeight = container?.scrollHeight;
+    const scrollTop = container?.scrollTop;
+    const clientHeight = container?.clientHeight;
+
+    // Show button only if scrolled past the viewport height and not too close to the bottom
+    if (scrollTop + clientHeight < scrollHeight - 50) {
+      setIsInLastSection(false);
+    } else {
+      setIsInLastSection(true);
+    }
+
+    if (scrollTop > 0) {
+      setShowPosition(true);
+    } else {
+      setShowPosition(false);
+    }
+  };
+
+  useEffect(() => {
+    const container = document.getElementsByTagName("body")[0]; 
+    container?.addEventListener("scroll", handleScroll);
+    return () => {
+      container?.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  const isShowScrolldown = (showPosition || show) && isInLastSection !== true
+
+  return (
+    <div className="relative" id="bedi-container">
+      <div className="bg-[#DDD]">
+        <BEDIPage1Section
+          handleShowScrollDown={() => setShow(true)}
+          sectionData={sectionData}
+        />
+        <div
+          className="relative w-full flex justify-center items-center"
+          id={BEDIEnumId.WhatIsLove}>
+          <Image
+            src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/media/bedi/Layer_1 (1) (1).webp"
+            className="w-full h-full !object-contain aspect-mobile"
+          />
+        </div>
+        <BEDICarouselSection />
+        <div
+          id={BEDIEnumId.Activate}
+          className="relative w-full flex flex-col justify-center items-center mt-[60px]">
+          <div className="relative">
+            {active_image?.value?.url && (
+              <Image
+                src={active_image?.value?.url}
+                className="w-full max-h-[100svh] max-svh-full object-contain"
+              />
+            )}
+            <Image
+              src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/media/activate.png"
+              className="w-full max-h-[100svh] max-svh-full object-contain mt-[-8px]"
+            />
+            <a
+              href="https://zalo.me/s/536875380284216243/dynamic-action?slug=2016&code_id=1158"
+              target="_blank"
+              className="absolute bottom-14 left-[30px] inline-flex items-center justify-center text-white text-md 
+            max-[380px]:text-xs uppercase gap-1 rounded-lg py-2 px-3 font-medium 
+            transition-colors focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-slate-50 animate-shimmer bg-[linear-gradient(110deg,#07137A,45%,#F846B8,55%,#07137A)] bg-[length:200%_100%]">
+              <VerifiedIcon
+                fill="white"
+                size={18}
+                className="text-black border-none"
+              />
+              <p>Kích hoạt ngay</p>
+            </a>
+          </div>
+        </div>
+
+        <div className="relative w-full pt-[60px] pb-3 flex justify-center flex-col items-center">
+          <Image
+            src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/media/tram-sac-3x.webp"
+            className="w-full h-full object-contain"
+          />
+        </div>
+        <div
+          id={BEDIEnumId.UserGuide}
+          className="relative w-full pb-3 flex justify-center flex-col items-center">
+          <Image
+            src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/media/user-guide-full.png"
+            className="w-full h-full object-contain"
+          />
+        </div>
+        <BEDIContactSection />
+      </div>
+      {isShowScrolldown && <ScrollGuide />}
+    </div>
+  );
+};
+export default BEDIPageSection;

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

@@ -0,0 +1,30 @@
+import { useMedia } from "../../../../hooks";
+import { AUDIO_TET_THEM } from "./constant";
+import { useEffect, useRef } from "react";
+
+export const audioThemeId = "audio-theme-tet";
+
+export const AudioTheme = () => {
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  const { registerMedia } = useMedia();
+
+  useEffect(() => {
+    if (audioRef.current) {
+      registerMedia({
+        id: audioThemeId,
+        type: "audio",
+        element: audioRef.current,
+      });
+    }
+  }, []);
+
+  return (
+    <audio
+      className="invisible"
+      ref={audioRef}
+      src={AUDIO_TET_THEM}
+      preload="auto"
+    />
+  );
+};