ui-landing-page 6.1.0

package/src/components/LandingPage/common/ui-kit/organisms/khaocoky/KhaoCoKyImageTextSection.tsx

@@ -0,0 +1,89 @@
+// @ts-nocheck
+import { FC, useState } from "react";
+import SectionFullScreen from "../../../SectionFullScreen/index";
+import { BaseSectionProps } from "../../../../models/base-section";
+import { MediaType } from "../../../../models/general";
+import Title from "../../moleculars/Title";
+import BackgroundImage from "../../moleculars/BackgroundImage";
+import { Field } from "../../types/base";
+import {
+  FullScreen,
+  useFullScreenContext,
+} from "../../../../hooks/useFullScreenContext";
+import { checkQuillEmpty, getContentFromLexicalValue } from "@phygitallabs/helpers";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import KhaoCoKyTitle from "./KhaoCoKyTitle";
+import { Drawer } from "antd";
+
+interface ImageTextSectionData {
+  title_image_text: Field<string>;
+  description_image_text: Field<any>;
+  image: Field<Media>;
+  full_description: Field<any>;
+}
+
+export interface KhaoCoKyImageTextProps extends BaseSectionProps {}
+
+const KhaoCoKyImageTextSection: FC<KhaoCoKyImageTextProps> = (props) => {
+  const { sectionData, id, configTheme } = props;
+
+  const [isOpenDrawer, setIsOpenDrawer] = useState(false);
+  const { isInViewport } = useFullScreenContext(id);
+
+  const { title_image_text, description_image_text, image, full_description } =
+    {
+      ...sectionData,
+    } as ImageTextSectionData;
+
+  const titleValue = title_image_text?.value;
+  const imageValue = image?.value?.url;
+  const descriptionValue = getContentFromLexicalValue(
+    description_image_text?.value
+  );
+  const fullDescriptionValue = getContentFromLexicalValue(
+    full_description?.value
+  );
+
+  return (
+    <>
+      <SectionFullScreen
+        name={id}
+        showScrollGuide
+        className="py-6 font-antiqua"
+      >
+        <div className="relative m-auto space-y-6 px-4">
+          <KhaoCoKyTitle title={titleValue} />
+          {imageValue && (
+            <Image src={imageValue} className="max-h-[270px] object-contain" />
+          )}
+          <div className="text-justify">{descriptionValue}</div>
+          {fullDescriptionValue && (
+            <button
+              type="button"
+              onClick={() => setIsOpenDrawer(true)}
+              className="mx-auto mt-2 w-full text-center"
+            >
+              <p className="text-sm font-medium underline underline-offset-4">
+                Xem thêm
+              </p>
+            </button>
+          )}
+        </div>
+      </SectionFullScreen>
+      <Drawer
+        open={isOpenDrawer}
+        onClose={() => setIsOpenDrawer(false)}
+        placement="right"
+        style={{
+          backgroundImage: configTheme?.backgroundImage,
+        }}
+      >
+        <div className="text-justify text-base text-black font-antiqua">
+          {fullDescriptionValue}
+        </div>
+      </Drawer>
+    </>
+  );
+};
+
+export default KhaoCoKyImageTextSection;

package/src/components/LandingPage/common/ui-kit/organisms/khaocoky/KhaoCoKyTitle.tsx

@@ -0,0 +1,51 @@
+import { HTMLAttributes } from "react";
+
+export const LeftIconLine = () => (
+  <svg
+    width="20"
+    height="8"
+    viewBox="0 0 20 8"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1.08667 4.38825L14.5721 7.98467C14.7975 8.02554 15.0229 7.98467 15.1731 7.86207L19.831 4.34738C20.0564 4.18391 20.0564 3.85696 19.831 3.69349L15.2107 0.137931C15.0229 0.0153257 14.7975 -0.0255428 14.6097 0.0153257L12.3934 0.628352L16.9762 3.97957L15.3609 4.67433L10.2898 1.15964L1.04911 3.57088C0.711033 3.69349 0.711033 4.30651 1.08667 4.38825Z"
+      fill="#202020"
+    />
+  </svg>
+);
+
+export const RightIconLine = () => (
+  <svg
+    width="20"
+    height="8"
+    viewBox="0 0 20 8"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M18.9134 4.38825L5.42797 7.98467C5.20259 8.02554 4.97721 7.98467 4.82695 7.86207L0.169037 4.34738C-0.0563458 4.18391 -0.0563458 3.85696 0.169037 3.69349L4.78939 0.137931C4.97721 0.0153257 5.20259 -0.0255428 5.39041 0.0153257L7.60668 0.628352L3.02389 3.97957L4.63913 4.67433L9.71025 1.15964L18.951 3.57088C19.289 3.69349 19.289 4.30651 18.9134 4.38825Z"
+      fill="#202020"
+    />
+  </svg>
+);
+
+export interface KhaoCoKyTitleProps extends HTMLAttributes<HTMLDivElement> {
+  title: string;
+  showTextLine?: boolean;
+}
+
+export default function KhaoCoKyTitle({
+  title,
+  showTextLine = true,
+  ...props
+}: KhaoCoKyTitleProps) {
+  if (!title) return null;
+  return (
+    <div className="flex items-center justify-center gap-2" {...props}>
+      {showTextLine && <LeftIconLine />}
+      <p className="text-xl !font-godWord">{title}</p>
+      {showTextLine && <RightIconLine />}
+    </div>
+  );
+}

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

@@ -0,0 +1,5 @@
+export { default as KhaoCoKyHomeSectionUI } from "./KhaoCoKyHomeSection";
+export { default as KhaoCoKyImageTextSectionUI } from "./KhaoCoKyImageTextSection";
+export { default as KhaoCoKyCompareSectionUI } from "./KhaoCoKyCompareSection";
+export { default as KhaoCoKyContactSectionUI } from "./KhaoCoKyContactSection";
+export { default as KhaoCoKyCarouselSectionUI } from "./KhaoCoKyCarouselSection";

package/src/components/LandingPage/common/ui-kit/organisms/khaocokyv2/KhaoCoKyHome.tsx

@@ -0,0 +1,169 @@
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import { BaseSectionProps } from "../../../../../LandingPage/models/base-section";
+import SectionFullScreen from "../../../../../LandingPage/common/SectionFullScreen";
+import { Media } from "../../../../../LandingPage/models/general";
+import { Field } from "../../types/base";
+import { compareString } from "@phygitallabs/helpers";
+import { twMerge } from "tailwind-merge";
+import AuthorModalDeDo from "../../moleculars/AuthorModalDeDo";
+import ThreeModelViewer from "../../../3DModel";
+
+// glb assets render with model-viewer; anything else is an embed url served in an iframe
+const isGlbUrl = (url: string) => /\.glb(\?|#|$)/i.test(url);
+
+interface KhaoCoKyHomeData {
+  logo: Field<Media>;
+  media: Field<Media>;
+  title: Field<string>;
+  author_info: Field<{
+    name: string;
+    logo: Media;
+    description: any;
+  }>;
+}
+
+interface KhaoCoKyImageTextProps extends BaseSectionProps {
+  buttonClaim?: React.ReactNode;
+  claimText?: string;
+  isOwned?: boolean;
+  ownerText?: string;
+  productName?: string;
+}
+
+const BASE_MATERIAL =
+  "https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/khao-co-ky/v2/base-covat.webp";
+const LEAF_RIGHT =
+  "https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/khao-co-ky/v2/laurel_wreath_right.png";
+const LEAF_LEFT =
+  "https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/khao-co-ky/v2/laurel_wreath_left.png";
+const HOME_BACKGROUND =
+  "https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/khao-co-ky/v2/khaocoky-bg-home.png";
+
+export const KhaoCoKyHome = (props: KhaoCoKyImageTextProps) => {
+  const {
+    sectionData,
+    id,
+    buttonClaim,
+    isOwned,
+    ownerText = "Sở hữu",
+    productName,
+  } = props;
+
+  const { logo, title, author_info } = {
+    ...sectionData,
+  } as KhaoCoKyHomeData;
+
+  const threeDUrl = sectionData["3d_url"]?.value;
+  const titleValue = title?.value || "Cổ vật";
+  const logoValue =
+    logo?.value?.url ||
+    "https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/khao-co-ky/v2/dedologo.png";
+
+  const isTranslateY = ["khau ha", "dai hong chung"].some((item) =>
+    compareString(item, productName || "")
+  );
+
+  return (
+    <SectionFullScreen name={id} className="font-godWord">
+      <div className="flex flex-col h-[100svh] svh-full items-center justify-between p-4 mb-10">
+        <img
+          src={HOME_BACKGROUND}
+          className="absolute top-0 z-0 object-contain"
+          alt="BG-HOME"
+        />
+        <Image
+          src={logoValue}
+          className="object-contain absolute top-0 left-1/2 -translate-x-1/2"
+          alt="khaocoky-logo"
+          width={120}
+          height={120}
+        />
+        <div className="relative w-full z-[100] h-full min-h-[300px] max-h-[400px]">
+          {threeDUrl &&
+            (isGlbUrl(threeDUrl) ? (
+              <div
+                className={twMerge(
+                  "w-full h-full relative",
+                  isTranslateY && "translate-y-[25%]"
+                )}
+              >
+                <ThreeModelViewer asset3DUrl={threeDUrl} />
+              </div>
+            ) : (
+              <iframe
+                src={threeDUrl}
+                width="1000px"
+                height="100%"
+                className={twMerge(
+                  "translate-x-[-50%] left-1/2 relative pointer-events-none",
+                  isTranslateY && "translate-y-[25%]"
+                )}
+              ></iframe>
+            ))}
+        </div>
+
+        <div className="relative w-full flex -translate-y-[20%] flex-col items-center justify-center">
+          <Image src={BASE_MATERIAL} alt="base-material" />
+          <div className="flex flex-row absolute bottom-0 h-[100px]">
+            <Image
+              width="auto"
+              src={LEAF_LEFT}
+              alt="leaf-left"
+              className="object-contain"
+            />
+            <div className="flex flex-1 flex-col items-center justify-center gap-4">
+              <div className="flex flex-col items-center justify-center gap-2 !min-h-[75px]">
+                <p
+                  style={{
+                    backgroundClip: "text",
+                    WebkitBackgroundClip: "text",
+                    color: "transparent",
+                  }}
+                  className="bg-gradient-to-b flex-shrink-0 line-clamp-3 font-bold capitalize from-[#FFDC3C] to-[#FFFBE8] text-center text-2xl w-full min-w-[280px] font-godWord"
+                >
+                  {titleValue}
+                </p>
+                {author_info && (
+                  <div className="w-full z-[100]">
+                    <AuthorModalDeDo field={author_info} />
+                  </div>
+                )}
+              </div>
+              {isOwned && (
+                <div className="w-auto flex">
+                  <p className="px-4 whitespace-nowrap py-2 bg-[#313131] text-white rounded-md text-sm">
+                    {ownerText}
+                  </p>
+                </div>
+              )}
+            </div>
+            <Image
+              width="auto"
+              src={LEAF_RIGHT}
+              alt="leaf-right"
+              className="object-contain"
+            />
+          </div>
+        </div>
+        {buttonClaim}
+        {/* <div className="flex flex-col relative items-center justify-center">
+          <p
+            style={{
+              backgroundClip: "text",
+              WebkitBackgroundClip: "text",
+              color: "transparent",
+            }}
+            className="animate-pulse bg-gradient-to-b font-bold capitalize z-10 absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 from-[#FFDC3C] to-[#FFFBE8] text-center text-2xl"
+          >
+            Sở Hữu Ngay
+          </p>
+          <Image
+            src="https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/khao-co-ky/dedo-button.png"
+            alt="Button"
+            width={300}
+          />
+        </div> */}
+      </div>
+    </SectionFullScreen>
+  );
+};

package/src/components/LandingPage/common/ui-kit/organisms/khaocokyv2/KhaoCoKyImageText.tsx

@@ -0,0 +1,105 @@
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import { BaseSectionProps } from "../../../../../LandingPage/models/base-section";
+import SectionFullScreen from "../../../../../LandingPage/common/SectionFullScreen";
+import { Field } from "../../types/base";
+import { useState } from "react";
+import { BaseModal } from "../../atomics";
+import { getContentFromLexicalValue } from "@phygitallabs/helpers";
+import { Media } from "../../../../../LandingPage/models/general";
+
+interface SectionData {
+  title: Field<string>;
+  description: Field<string>;
+  image: Field<Media>;
+  fullDescription: Field<string>;
+}
+
+interface KhaoCoKyImageTextProps extends BaseSectionProps {
+  title?: string;
+}
+
+const BG_IMAGE_TEXT =
+  "https://s3-sgn10.fptcloud.com/phygix-assets/nomion/static/khao-co-ky/bg-image-text-min.webp";
+
+export const KhaoCoKyImageText = (props: KhaoCoKyImageTextProps) => {
+  const { sectionData, id, title: titleTranslate } = props;
+
+  const { title, description, image, fullDescription } = {
+    ...sectionData,
+  } as SectionData;
+
+  const [showFullDescription, setShowFullDescription] = useState(false);
+
+  const imageValue = image?.value?.url;
+  const titleValue = title?.value || "Khảo cổ ký";
+  const descriptionValue = description?.value || "Khảo cổ ký";
+  const fullDescriptionValue = fullDescription?.value || "Khảo cổ ký";
+
+  return (
+    <SectionFullScreen
+      name={id}
+      className="relative h-auto overflow-hidden svh-full p-4 mb-10 font-godWord"
+    >
+      <div className="relative h-full rounded-3xl">
+        <div className="absolute z-0 h-full w-full rounded-3xl">
+          <Image
+            src={BG_IMAGE_TEXT}
+            alt="bg-image-text"
+            className="!rounded-3xl !h-full !w-full"
+          />
+        </div>
+        <div className="w-full relative z-10 h-full flex px-4 py-6 flex-col items-center">
+          <p className="text-center text-white mb-5 text-2xl font-bold">
+            {titleTranslate}
+          </p>
+          <div className="h-2/5 mb-4 w-full">
+            {imageValue && (
+              <Image
+                src={imageValue}
+                alt="bg-image-text"
+                className="rounded-3xl object-cover max-h-[375px] w-auto"
+              />
+            )}
+          </div>
+          <div className="flex flex-col items-center gap-2 justify-center">
+            <p className="text-[#FFDC3C] text-2xl text-center font-bold">
+              {titleValue}
+            </p>
+            <p className="text-[#f7e4cb] text-justify text-sm">
+              {getContentFromLexicalValue(descriptionValue)}
+            </p>
+          </div>
+        </div>
+      </div>
+      <BaseModal
+        hasExitIcon
+        className="max-h-[100svh] h-full w-screen font-godWord z-[210] backdrop-blur-2xl"
+        isOpen={showFullDescription}
+        toggleModal={() => setShowFullDescription(!showFullDescription)}
+      >
+        <div className="w-full h-auto flex p-6 flex-col items-center justify-start">
+          <div className="h-2/5 mb-4">
+            {imageValue && (
+              <Image
+                src={imageValue}
+                alt="bg-image-text"
+                className="rounded-3xl object-cover"
+              />
+            )}
+          </div>
+          <div className="flex flex-col items-center mb-10 gap-2 justify-center">
+            <p className="text-[#FFDC3C] text-2xl text-center font-bold">
+              {titleValue}
+            </p>
+            <p className="text-[#f7e4cb] text-justify text-sm">
+              {getContentFromLexicalValue(descriptionValue)}
+            </p>
+            <p className="text-[#f7e4cb] text-justify text-sm">
+              {getContentFromLexicalValue(fullDescriptionValue)}
+            </p>
+          </div>
+        </div>
+      </BaseModal>
+    </SectionFullScreen>
+  );
+};

package/src/components/LandingPage/common/ui-kit/organisms/khaocokyv2/KhaoCoKyListImageText.tsx

@@ -0,0 +1,60 @@
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import { BaseSectionProps } from "../../../../../LandingPage/models/base-section";
+import SectionFullScreen from "../../../../../LandingPage/common/SectionFullScreen";
+import { Field } from "../../types/base";
+import { Media } from "../../../../../LandingPage/models/general";
+import { getContentFromLexicalValue } from "@phygitallabs/helpers";
+
+interface SectionData {
+  list_image_text: Field<
+    {
+      title: string;
+      description: string;
+      image: Media;
+      full_description: string;
+    }[]
+  >;
+}
+
+interface KhaoCoKyListImageTextProps extends BaseSectionProps {}
+
+
+export const KhaoCoKyListImageText = (props: KhaoCoKyListImageTextProps) => {
+  const { sectionData } = props;
+
+  const { list_image_text } = {
+    ...sectionData,
+  } as SectionData;
+
+  const listImageTextValue = list_image_text?.value || [];
+
+  return listImageTextValue?.map((item, index) => (
+    <SectionFullScreen
+      key={index}
+      className="relative overflow-hidden svh-full p-2 font-godWord"
+    >
+      <div className="relative h-full bg-[#262626] rounded-3xl">
+        <div className="w-full z-10 h-full flex p-4 py-6 flex-col items-center justify-center">
+          <p className="text-white text-2xl font-bold mb-5">{item.title}</p>
+          <div className="h-2/5 mb-2 w-full">
+            <Image
+              src={
+                item.image.url ||
+                "https://s3-sgn10.fptcloud.com/phygix-assets/khaocoky-logo.png"
+              }
+              alt="bg-image-text"
+              className="rounded-3xl object-cover  max-h-[375px] w-auto"
+            />
+          </div>
+          <div className="flex flex-col items-center gap-2 justify-center">
+            <div className="text-white text-justify text-sm">
+              {getContentFromLexicalValue(item.description)}
+            </div>
+          </div>
+         
+        </div>
+      </div>
+     
+    </SectionFullScreen>
+  ));
+};

package/src/components/LandingPage/common/ui-kit/organisms/khaocokyv2/KhaoCoKyMemories.tsx

@@ -0,0 +1,3 @@
+export const KhaoCoKyMemories = () => {
+  return <div>KhaoCoKyMemories</div>;
+};

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

@@ -0,0 +1,4 @@
+export { KhaoCoKyHome } from "./KhaoCoKyHome";
+export { KhaoCoKyImageText } from "./KhaoCoKyImageText";
+export { KhaoCoKyMemories } from "./KhaoCoKyMemories";
+export { KhaoCoKyListImageText } from "./KhaoCoKyListImageText";

package/src/components/LandingPage/common/ui-kit/types/base.ts

@@ -0,0 +1,31 @@
+import { Media } from "../../../models/general";
+
+export interface BackgroundImageField {
+  image: Media;
+  is_overlay?: boolean;
+}
+
+export interface ThemeConfig {
+  primary_font?: string;
+  font_family?: string;
+  background_color?: string;
+  primary_color?: string;
+  secondary_color?: string;
+}
+
+export type FieldConfig = {
+  font_family?: string;
+  text_color?: string;
+};
+
+export type Field<T = any> = {
+  value: T;
+  style_config?: FieldConfig;
+};
+
+export type BaseFieldType<T = any> = {
+  field: Field<T>;
+  configTheme?: ThemeConfig;
+  className?: string;
+  hardCodeOption?: any;
+};

package/src/components/LandingPage/constants/index.ts

@@ -0,0 +1,2 @@
+export const SnapFullScreenID = "snap-container";
+export const HEADER_HEGIHT = 48;

package/src/components/LandingPage/device/index.tsx

@@ -0,0 +1,30 @@
+import { twMerge } from "tailwind-merge";
+
+interface Props {
+  children: React.ReactElement;
+  className?: string;
+}
+const Device = ({ children, className }: Props) => {
+  return (
+    <div className={twMerge("marvel-device iphone-x bg-black", className)}>
+      {/* <div className="notch">
+        <div className="camera"></div>
+        <div className="speaker"></div>
+      </div> */}
+      <div className="top-bar"></div>
+      <div className="sleep"></div>
+      <div className="bottom-bar"></div>
+      <div className="volume"></div>
+      <div className="overflow">
+        <div className="shadow shadow--tr"></div>
+        <div className="shadow shadow--tl"></div>
+        <div className="shadow shadow--br"></div>
+        <div className="shadow shadow--bl"></div>
+      </div>
+      <div className="inner-shadow"></div>
+      <div className="screen">{children}</div>
+    </div>
+  );
+};
+
+export { Device };

package/src/components/LandingPage/hooks/audio/index.tsx

@@ -0,0 +1 @@
+export * from "./useMediaContext";