ui-landing-page 6.1.0

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

@@ -0,0 +1,183 @@
+import { Media } from "../../../../models/general";
+import { BaseSectionProps } from "../../../../models/base-section";
+import SectionFullScreen from "../../../SectionFullScreen";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import type { Field } from "../../types/base";
+import { getContentFromLexicalValue } from "@phygitallabs/helpers";
+import { useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
+import { generateRandomNumberFromWeights } from "../../../../utils/helper";
+
+interface LuckyMoneySection2AdvanceData {
+  title: Field<string>;
+  description: Field;
+  button_label: Field<string>;
+  icon_image: Field<Media>;
+  money_rate: Field<MoneyRate>;
+  audio: Field<Media>;
+  cover: Field<{
+    background: string;
+    title: string;
+  }>;
+}
+
+interface MoneyRate {
+  [key: string]: number;
+}
+
+export interface LuckyMoneySection2AdvanceProps extends BaseSectionProps {}
+
+function LuckyMoneySection2Advance({
+  sectionData,
+  id,
+}: LuckyMoneySection2AdvanceProps) {
+  const [showGift, setShowGift] = useState(false);
+  const [randomNumber, setShowRandomNumber] = useState(0);
+  const data = sectionData as LuckyMoneySection2AdvanceData;
+  const { money_rate, title, description, button_label } = data || {};
+  const titleValue = title?.value;
+  const descriptionValue = description?.value;
+  const moneyRate = money_rate?.value;
+  const iconImage = `https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/meme-tet.png`;
+  const buttonLabel = button_label?.value || "Nhận lì xì";
+  const [showLuckyMoney, setShowLuckyMoney] = useState(false);
+
+  // create a ref, and play in handleShowGift
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const { rate_10, rate_20, rate_50, rate_100, rate_200, rate_500 } =
+    moneyRate || {
+      rate_10: 6,
+      rate_20: 5,
+      rate_50: 4,
+      rate_100: 3,
+      rate_200: 2,
+      rate_500: 1,
+    };
+
+  const moneyRateValue = {
+    10: Number(rate_10),
+    20: Number(rate_20),
+    50: Number(rate_50),
+    100: Number(rate_100),
+    200: Number(rate_200),
+    500: Number(rate_500),
+  };
+
+  const handleShowGift = () => {
+    setShowGift(true);
+    if (audioRef.current) {
+      audioRef.current.play();
+    }
+    setTimeout(() => {
+      const randomNumber = generateRandomNumberFromWeights(moneyRateValue);
+      setShowRandomNumber(randomNumber);
+    }, 5000);
+  };
+
+  if (!showLuckyMoney)
+    return (
+      <SectionFullScreen className="max-h-full" name={id}>
+        <div className="flex flex-col items-center justify-center h-full relative">
+          <Image
+            src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/tet2025-cover-5.png"
+            alt="tet-2025"
+            className="object-cover"
+          />
+          <div className="absolute gap-3 flex-col w-full top-[60px] left-0 z-10 flex items-center justify-center px-4 pt-8">
+            <p className="text-4xl line-clamp-3 font-bold text-[#B52E10]  text-center">
+              {titleValue}
+            </p>
+            <div
+              onClick={() => setShowLuckyMoney(true)}
+              style={{
+                background:
+                  "linear-gradient(180deg, #F6A03E -1.09%, #F2753E 100%), #B52E10",
+              }}
+              className="rounded-lg w-auto text-lg flex items-center justify-center px-4 py-1"
+            >
+              <p className="line-clamp-1 font-medium text-center">NHẬN LÌ XÌ</p>
+            </div>
+          </div>
+        </div>
+      </SectionFullScreen>
+    );
+
+  return (
+    <SectionFullScreen className="min-h-[100vh] bg-[#FBCD60] pt-10" name={id}>
+      <audio
+        src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/xo-so.mp3"
+        ref={audioRef}
+      />
+      <div className="flex flex-col items-center justify-start h-full relative pt-10 px-4">
+        {!showGift && (
+          <>
+            {titleValue && (
+              <p className="text-4xl line-clamp-3 font-bold text-[#B52E10] mb-6 text-center z-10">
+                {titleValue}
+              </p>
+            )}
+            {descriptionValue && (
+              <p className="text-base text-white mb-6 z-10">
+                {getContentFromLexicalValue(descriptionValue)}
+              </p>
+            )}
+            <button
+              type="button"
+              className="px-2 py-1 text-black rounded-md bg-white font-bold z-10"
+              onClick={handleShowGift}
+            >
+              {buttonLabel}
+            </button>
+            <div className="h-full w-full absolute bottom-0 left-0 flex-1 flex justify-end flex-col z-0">
+              <Image
+                src={iconImage}
+                alt="tet-2025"
+                className="object-cover"
+                width="auto"
+                height="auto"
+              />
+            </div>
+          </>
+        )}
+        <div
+          className={twMerge(
+            "w-full h-full items-center justify-center",
+            showGift && !randomNumber ? "flex" : "hidden"
+          )}
+        >
+          <Image
+            src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/tien-lixi.gif"
+            alt="tet-2025"
+            width="auto"
+            height="auto"
+          />
+        </div>
+        <div
+          className={twMerge(
+            "w-full h-full items-center justify-center relative",
+            randomNumber ? "flex" : "hidden"
+          )}
+        >
+          <div className="absolute top-0 left-0 z-10">
+            <Image
+              src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/gift-success.gif"
+              alt="tet-2025"
+              width="100%"
+              height="100%"
+            />
+          </div>
+
+          <Image
+            src={`https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/tet-2025/${randomNumber}k.webp`}
+            alt="tet-2025"
+            width="auto"
+            height="auto"
+          />
+        </div>
+      </div>
+      {/* <div className="absolute bottom-0 left-0 w-full h-full bg-black"></div> */}
+    </SectionFullScreen>
+  );
+}
+
+export default LuckyMoneySection2Advance;

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

@@ -0,0 +1,2 @@
+export { default as LuckyMoneySection2 } from "./LuckyMoneySection2";
+export { default as LuckyMoneySection2Advance } from "./LuckyMoneySection2Advance";

package/src/components/LandingPage/common/ui-kit/organisms/Valentine/ValentineGreetingSection.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 ValentineGreetingSectionProps 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-[#AC1F2D] 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 ValentineGreetingSectionUI(
+  props: ValentineGreetingSectionProps
+) {
+  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/bg-greeting-default.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/Valentine/ValentineHomeSection.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 ValentineHomeSectionProps extends BaseSectionProps {}
+const ValentineHomeSection: FC<ValentineHomeSectionProps> = (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/bg-home-default.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="white"
+              onClick={handlePlayAudio}
+            />
+          ) : (
+            <SpeakerSimpleHigh
+              size={28}
+              weight="fill"
+              color="white"
+              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/home-widget-min.webp"
+          alt="valentine-material"
+          width={"80%"}
+          className="object-contain"
+        />
+      </motion.div>
+    </SectionFullScreen>
+  );
+};
+
+export default ValentineHomeSection;

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

@@ -0,0 +1,45 @@
+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 {
+  title: Field<string>;
+  letter: Field<any>;
+}
+
+export default function ValentineLetterSectionUI(
+  props: ValentineLetterSectionProps
+) {
+  const { id, sectionData } = props;
+
+  const { title, letter } = { ...sectionData } as ValentineLetterData;
+  const titleValue = title?.value;
+  const letterValue = getContentFromLexicalValue(letter?.value);
+
+  return (
+    <SectionFullScreen
+      name={id}
+      className="flex justify-center items-center p-5 bg-[#E95E6D] overflow-hidden"
+    >
+      <div className="flex flex-col gap-4 items-center text-white/85 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/Valentine/ValentineTheFaceShopGreetingSection.tsx

@@ -0,0 +1,141 @@
+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 ValentineGreetingSectionProps 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-2 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-[#AC1F2D] 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 ValentineGreetingSectionUI(
+  props: ValentineGreetingSectionProps
+) {
+  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/thefaceshop-4.webp')] 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-[10%] left-8"
+          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-[31%] 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-[20%]"
+          imageUrl={greeting3Image}
+          description={greeting3Description}
+        />
+      </div>
+    </SectionFullScreen>
+  );
+}

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

@@ -0,0 +1,73 @@
+import { FC, useEffect, useRef } from "react";
+import SectionFullScreen from "../../../SectionFullScreen";
+import { BaseSectionProps } from "../../../../models/base-section";
+import { SpeakerSimpleSlash } from "@phosphor-icons/react";
+import { SpeakerSimpleHigh } from "@phosphor-icons/react";
+import { useMedia } from "../../../../hooks/audio";
+
+export interface ValentineHomeSectionProps extends BaseSectionProps {}
+const ValentineHomeSection: FC<ValentineHomeSectionProps> = (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);
+  };
+
+  return (
+    <SectionFullScreen
+      name={id}
+      className="relative flex justify-center items-center
+       bg-[url('https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/valentine/thefaceshop-1.webp')] 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="white"
+              onClick={handlePlayAudio}
+            />
+          ) : (
+            <SpeakerSimpleHigh
+              size={28}
+              weight="fill"
+              color="white"
+              onClick={handlePauseAudio}
+            />
+          )}
+        </div>
+      )}
+    </SectionFullScreen>
+  );
+};
+
+export default ValentineHomeSection;