ui-landing-page 6.1.0

package/src/components/LandingPage/common/ui-kit/organisms/BusinessCardSection/icons/IconTele.tsx

@@ -0,0 +1,17 @@
+const IconTele = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M21.4571 2.45532C21.3409 2.35498 21.1995 2.28825 21.0482 2.26231C20.8969 2.23637 20.7414 2.25222 20.5984 2.30814L1.599 9.74345C1.32974 9.84815 1.10177 10.0375 0.949431 10.283C0.797088 10.5284 0.728611 10.8168 0.754309 11.1045C0.780008 11.3923 0.898491 11.6639 1.09192 11.8785C1.28535 12.0931 1.54326 12.2391 1.82681 12.2944L6.74963 13.2609V18.75C6.74866 19.049 6.83751 19.3414 7.00467 19.5893C7.17182 19.8372 7.40958 20.0291 7.68713 20.1403C7.96424 20.2535 8.269 20.2806 8.56176 20.2183C8.85452 20.1559 9.12175 20.0069 9.32869 19.7906L11.7024 17.3288L15.4684 20.625C15.7401 20.866 16.0905 20.9994 16.4537 21C16.6128 20.9999 16.771 20.9749 16.9224 20.9259C17.1699 20.8474 17.3925 20.7055 17.568 20.5142C17.7435 20.3229 17.8658 20.0889 17.9228 19.8356L21.7281 3.28126C21.7621 3.13196 21.7549 2.97622 21.7071 2.83072C21.6594 2.68522 21.573 2.55545 21.4571 2.45532ZM16.4556 19.5L8.70431 12.7031L19.8606 4.7072L16.4556 19.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default IconTele;

package/src/components/LandingPage/common/ui-kit/organisms/BusinessCardSection/icons/IconWeb.tsx

@@ -0,0 +1,17 @@
+const IconWeb = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10 1.875C8.39303 1.875 6.82214 2.35152 5.486 3.24431C4.14985 4.1371 3.10844 5.40605 2.49348 6.8907C1.87852 8.37535 1.71762 10.009 2.03112 11.5851C2.34463 13.1612 3.11846 14.6089 4.25476 15.7452C5.39106 16.8815 6.8388 17.6554 8.4149 17.9689C9.99099 18.2824 11.6247 18.1215 13.1093 17.5065C14.594 16.8916 15.8629 15.8502 16.7557 14.514C17.6485 13.1779 18.125 11.607 18.125 10C18.1225 7.84588 17.2657 5.78069 15.7425 4.2575C14.2193 2.7343 12.1541 1.87748 10 1.875ZM16.1219 6.875H13.3367C12.986 5.58821 12.3948 4.37943 11.5945 3.3125C12.5615 3.54479 13.4668 3.98342 14.2484 4.59832C15.03 5.21323 15.6693 5.98987 16.1227 6.875H16.1219ZM16.875 10C16.8755 10.634 16.788 11.2651 16.6148 11.875H13.6063C13.7979 10.6323 13.7979 9.36765 13.6063 8.125H16.6148C16.788 8.73493 16.8755 9.36597 16.875 10ZM10 3.35938C10.9359 4.36134 11.6306 5.56378 12.0313 6.875H7.96875C8.36898 5.5636 9.06377 4.36108 10 3.35938ZM7.96875 13.125H12.0313C11.631 14.4364 10.9362 15.6389 10 16.6406C9.06413 15.6387 8.36939 14.4362 7.96875 13.125ZM7.66407 11.875C7.44949 10.6342 7.44949 9.36579 7.66407 8.125H12.3422C12.5568 9.36579 12.5568 10.6342 12.3422 11.875H7.66407ZM11.5977 16.6875C12.398 15.6206 12.9891 14.4118 13.3398 13.125H16.1258C15.6721 14.0105 15.0323 14.7873 14.2501 15.4022C13.468 16.0172 12.5621 16.4556 11.5945 16.6875H11.5977Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default IconWeb;

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

@@ -0,0 +1,57 @@
+import { BaseSectionProps } from "../../../../models/base-section";
+import { Field } from "../../types/base";
+import { Media } from "../../../../../LandingPage/models/general";
+import BusinessCardAvatarCircle from "./BusinessCardAvtCircle";
+import BusinessCardAvtFull from "./BusinessCardAvtFull";
+
+export enum Theme {
+  Light = "light",
+  Dark = "dark",
+}
+
+export interface BusinessProfileSectionData {
+  theme: Field<Theme>;
+  primary_color: Field<string>;
+  social: Field<{
+    [key: string]: string;
+  }>;
+  profile_info: Field<{
+    thumbnail: Media;
+    company_logo: Media;
+    email: string;
+    name: string;
+    description: string;
+    phone: string;
+    company_name: string;
+    personal_email: string;
+    web: string;
+    address: string;
+    save_contact: string;
+  }>;
+  is_layout_avt_circle: Field<boolean>;
+  vcf_info: Field<string>;
+}
+
+export interface BusinessProfileProps extends BaseSectionProps {
+  sectionData: BusinessProfileSectionData;
+}
+
+export const DEFAULT_PRIMARY_COLOR = "#E05E06";
+
+const BusinessCardSection = (props: BusinessProfileProps) => {
+  const { sectionData, configTheme, themes } = props;
+  const isLayoutAvtCircle =
+    themes?.theme_layout === "1" || sectionData?.is_layout_avt_circle?.value;
+  if (isLayoutAvtCircle)
+    return (
+      <BusinessCardAvatarCircle
+        configTheme={configTheme}
+        sectionData={sectionData}
+      />
+    );
+  return (
+    <BusinessCardAvtFull configTheme={configTheme} sectionData={sectionData} />
+  );
+};
+
+export default BusinessCardSection;

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

@@ -0,0 +1,159 @@
+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 Christmas1GreetingSectionProps extends BaseSectionProps {}
+
+interface GreetingItem {
+  image: Media;
+  description: string;
+}
+
+interface Christmas1GreetingSectionData {
+  title: Field<string>;
+  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/christmas-template/christmas-material.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-sm shadow-black h-full bg-[#6D020A] 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-[#FCF0C9] 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%] border-[#FAEDCD] 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 Christmas1GreetingSectionUI(
+  props: Christmas1GreetingSectionProps
+) {
+  const { id, sectionData } = props;
+
+  const { title, greeting_1, greeting_2, greeting_3 } = {
+    ...sectionData,
+  } as Christmas1GreetingSectionData;
+  const titleValue = title?.value;
+
+  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-[#0A3922]"
+    >
+      <div className="absolute top-0 z-0 left-0 w-full h-full">
+        <Image
+          src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/christmas-template/Snow-2.gif"
+          alt="snow-effect"
+        />
+      </div>
+
+      <div className="relative w-full h-full">
+        {titleValue && (
+          <p className="text-[#FCF0C9] font-amstirdam absolute text-[60px] line-clamp-2 !max-w-[55%] text-center leading-[80%] top-10 left-1/2 -translate-x-1/2">
+            {titleValue}
+          </p>
+        )}
+        <GreetingWidget
+          index={0}
+          activeWidget={activeWidget}
+          setActiveWidget={setActiveWidget}
+          className="absolute h-32 w-32 z-10 top-[27%] 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-[40%] 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-14"
+          imageUrl={greeting3Image}
+          description={greeting3Description}
+        />
+        <img
+          src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/christmas-template/christmas-house-cover.png"
+          alt="house-christmas"
+          className="w-full h-full z-0 object-cover"
+        />
+      </div>
+    </SectionFullScreen>
+  );
+}

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

@@ -0,0 +1,112 @@
+import { FC, useEffect, useRef } from "react";
+import { motion, Variants } from "framer-motion";
+import SectionFullScreen from "../../../SectionFullScreen";
+import BackgroundImage from "../../moleculars/BackgroundImage";
+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 ChristmasHomeSectionProps extends BaseSectionProps {}
+const ChristmasHomeSection: FC<ChristmasHomeSectionProps> = (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: "5%", opacity: 0 },
+    animate: { y: -150, opacity: 1 },
+  };
+
+  return (
+    <SectionFullScreen
+      name={id}
+      className="relative flex justify-center items-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>
+      )}
+
+      <div className="absolute top-0 z-10 left-0 w-full h-full">
+        <Image
+          src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/christmas-template/Snow-2.gif"
+          alt="snow-effect"
+        />
+      </div>
+      <BackgroundImage
+        field={{
+          value: {
+            image: {
+              url: "https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/christmas-template/christmas-home.webp",
+              type: "image",
+            },
+            is_overlay: false,
+          },
+        }}
+      />
+
+      <motion.div
+        initial="initial"
+        animate="animate"
+        transition={{ duration: 1 }}
+        variants={imageVariants}
+        whileInView="animate"
+      >
+        <Image
+          src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/christmas-template/christmas-material.png"
+          alt="christmas-material"
+          width={300}
+          className="w-auto object-contain"
+        />
+      </motion.div>
+    </SectionFullScreen>
+  );
+};
+
+export default ChristmasHomeSection;

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

@@ -0,0 +1,113 @@
+import { FC, useRef, useEffect } from "react";
+import SectionFullScreen from "../../../SectionFullScreen";
+import { BaseSectionProps } from "../../../../models/base-section";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import { Field } from "../../types/base";
+import { Media } from "../../../../models/general";
+import { SpeakerSimpleHigh, SpeakerSimpleSlash } from "@phosphor-icons/react";
+import { getContentFromLexicalValue } from "@phygitallabs/helpers";
+import { useMedia } from "../../../../hooks/audio/useMediaContext";
+
+interface Christmas2HomeSectionData {
+  image: Field<Media>;
+  letter: Field<string>;
+  audio: Field<Media>;
+}
+
+interface Christmas2HomeSectionProps extends BaseSectionProps {}
+
+const Christmas2HomeSection: FC<Christmas2HomeSectionProps> = (props) => {
+  const { sectionData } = props;
+  const id = props.id!;
+
+  const { image, letter, audio } = sectionData as Christmas2HomeSectionData;
+
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const { registerMedia, unregisterMedia, play, pause, getMediaStatus } =
+    useMedia();
+
+  const isPlaying = getMediaStatus(id) === "playing";
+
+  const imageValue = image?.value?.url;
+  const letterValue = getContentFromLexicalValue(letter?.value);
+  const audioValue = 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-[#7A0F17]"
+    >
+      <audio ref={audioRef} src={audioValue} className="hidden" />
+      <div className="fixed z-20 bottom-0 right-0 p-2 text-white cursor-pointer">
+        {!isPlaying ? (
+          <SpeakerSimpleSlash
+            size={24}
+            weight="fill"
+            color="white"
+            onClick={handlePlayAudio}
+          />
+        ) : (
+          <SpeakerSimpleHigh
+            size={24}
+            weight="fill"
+            color="white"
+            onClick={handlePauseAudio}
+          />
+        )}
+      </div>
+
+      <div className="absolute top-0 z-10 left-0 w-full h-full">
+        <Image
+          src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/christmas-template/Snow-2.gif"
+          alt="snow-effect"
+        />
+      </div>
+      {imageValue && (
+        <div className="absolute top-0 z-0 flex">
+          <div className="relative w-screen h-[340px]">
+            <img
+              src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/christmas-template/frame-image.png"
+              alt="image-bg"
+              className="w-full h-[340px] absolute top-0 left-0 object-contain"
+            />
+            <img
+              src={imageValue}
+              alt="image-avatar"
+              className="h-full w-full object-contain p-14"
+            />
+          </div>
+        </div>
+      )}
+
+      <div className="absolute bottom-0 z-0 w-full top-[320px] p-4">
+        <p className="text-[#FAEDCD] text-center text-4xl line-clamp-[8] max-w-full font-desire font-semibold">
+          {letterValue}
+        </p>
+      </div>
+    </SectionFullScreen>
+  );
+};
+
+export default Christmas2HomeSection;

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

@@ -0,0 +1,96 @@
+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 BackgroundImage from "../../moleculars/BackgroundImage";
+
+export interface Christmas2GreetingSectionProps extends BaseSectionProps {}
+
+interface GreetingItem {
+  image: Media;
+  description: string;
+}
+
+interface Christmas2GreetingSectionData {
+  title: Field<string>;
+  greeting_1: Field<GreetingItem>;
+  greeting_2: Field<GreetingItem>;
+}
+
+export default function Christmas2GreetingSection(
+  props: Christmas2GreetingSectionProps
+) {
+  const { id, sectionData } = props;
+
+  const { title, greeting_1, greeting_2 } = {
+    ...sectionData,
+  } as Christmas2GreetingSectionData;
+  const titleValue = title?.value;
+  const greeting1 = greeting_1?.value;
+  const greeting2 = greeting_2?.value;
+
+  const greeting1Image = greeting1?.image?.url;
+  const greeting1Description = greeting1?.description;
+  const greeting2Image = greeting2?.image?.url;
+  const greeting2Description = greeting2?.description;
+
+  return (
+    <SectionFullScreen
+      name={id}
+      className="relative flex justify-center items-center"
+    >
+      <p className="text-[#FCF0C9] absolute z-20 font-desire text-center leading-[85%] text-[42px] line-clamp-2 w-full max-w-[80%] top-[7%] left-1/2 -translate-x-1/2">
+        {titleValue}
+      </p>
+
+      <div className="absolute top-0 z-10 left-0 w-full h-full">
+        <Image
+          src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/christmas-template/Snow-2.gif"
+          alt="snow-effect"
+        />
+      </div>
+      {greeting1Image && (
+        <div className="absolute w-36 font-amstirdam z-10 top-[20%] left-12 -rotate-6">
+          <div className="bg-white p-2">
+            <Image
+              height={100}
+              src={greeting1Image}
+              alt="greeting-1"
+              className="object-contain border border-black/80"
+            />
+            <p className="text-[#0A3922] text-center text-4xl line-clamp-5 max-w-full leading-[80%]">
+              {greeting1Description}
+            </p>
+          </div>
+        </div>
+      )}
+      {greeting2Image && (
+        <div className="absolute w-36 z-10 font-amstirdam top-[55%] right-12 rotate-6">
+          <div className="bg-white p-2">
+            <Image
+              height={100}
+              src={greeting2Image}
+              alt="greeting-2"
+              className="object-contain border border-black/80"
+            />
+            <p className="text-[#0A3922] text-center text-4xl line-clamp-5 max-w-full leading-[80%]">
+              {greeting2Description}
+            </p>
+          </div>
+        </div>
+      )}
+      <BackgroundImage
+        field={{
+          value: {
+            image: {
+              url: "https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/christmas-template/greeting-background.png",
+              type: "image",
+            },
+            is_overlay: false,
+          },
+        }}
+      />
+    </SectionFullScreen>
+  );
+}