ui-landing-page 6.1.0

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

@@ -0,0 +1,324 @@
+/* eslint-disable camelcase */
+import { isIOS, parse } from "@phygitallabs/helpers";
+import { twMerge } from "tailwind-merge";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import clsx from "clsx";
+import { usePGLModal } from "../../../../hooks/usePGLModalContext";
+import type { BaseSectionProps } from "../../../../models/base-section";
+import SectionFullScreen from "../../../SectionFullScreen";
+import BaseButton from "../../atomics/BaseButton";
+import type { Field } from "../../types/base";
+import type { Media } from "../../../../models/general";
+import { ProfileSocialType } from "../../../../models/general";
+import TitleCustom from "../../moleculars/Title";
+import { Typography } from "../../atomics";
+import FacebookIcon from "../../../icons/social-icons/FacebookIcon";
+import InstagramIcon from "../../../icons/social-icons/InstagramIcon";
+import TiktokIcon from "../../../icons/social-icons/TiktokIcon";
+import TelegramIcon from "../../../icons/social-icons/TelegramIcon";
+import ThreadsIcon from "../../../icons/social-icons/ThreadsIcon";
+import YoutubeIcon from "../../../icons/social-icons/YoutubeIcon";
+import TwitterIcon from "../../../icons/social-icons/TwitterIcon";
+import LinkedinIcon from "../../../icons/social-icons/LinkedinIcon";
+import IconMail from "../../../icons/social-icons/IconMail";
+import IconPhone from "../../../icons/social-icons/IconPhone";
+import { FadeInMotionV2 } from "../../../FadeInMotion";
+import { SealCheck } from "@phosphor-icons/react";
+
+export enum Theme {
+  Light = "light",
+  Dark = "dark",
+}
+
+const getIconByFieldKey = (fieldKey: string, theme: Theme = Theme.Light) => {
+  switch (fieldKey) {
+    case ProfileSocialType.Facebook:
+      return <FacebookIcon theme={theme} />;
+    case ProfileSocialType.Instagram:
+      return <InstagramIcon />;
+    case ProfileSocialType.Twitter:
+      return <TwitterIcon />;
+    case ProfileSocialType.Tiktok:
+      return <TiktokIcon />;
+    case ProfileSocialType.Telegram:
+      return <TelegramIcon theme={theme} />;
+    case ProfileSocialType.Threads:
+      return <ThreadsIcon />;
+    case ProfileSocialType.Youtube:
+      return <YoutubeIcon theme={theme} />;
+    case ProfileSocialType.Linkedin:
+      return <LinkedinIcon />;
+    default:
+      return null;
+  }
+};
+
+const defaultOrderSocial = [
+  ProfileSocialType.Facebook,
+  ProfileSocialType.Tiktok,
+  ProfileSocialType.Instagram,
+  ProfileSocialType.Linkedin,
+  ProfileSocialType.Youtube,
+  ProfileSocialType.Threads,
+  ProfileSocialType.Twitter,
+  ProfileSocialType.Telegram,
+];
+
+interface SectionData {
+  theme: Field<Theme>;
+  social_contact: Field<Record<string, string>>;
+  profile_info: Field<{
+    thumbnail: Media;
+    email: string;
+    name: string;
+    description: string;
+    mail: string;
+    phone: string;
+    background: Media;
+  }>;
+  vcf_info: Field<string>;
+}
+
+interface Props extends BaseSectionProps {
+  sectionData: SectionData;
+}
+
+function ProfileSection(props: Props) {
+  const { id, sectionData, type, themes } = props;
+  const {
+    profile_info = {
+      value: {
+        thumbnail: {
+          url: "",
+        },
+        name: "",
+        description: "",
+        email: "",
+        phone: "",
+        background: {
+          url: "",
+        },
+      },
+      style_config: {},
+    },
+    social_contact = {
+      value: {},
+      style_config: {},
+    },
+    theme = {
+      value: Theme.Light,
+    },
+    vcf_info = { value: "" },
+  } = sectionData ?? {};
+
+  const currentTheme = themes?.theme_layout ?? theme?.value;
+  const isThemeDark = currentTheme === Theme.Dark;
+
+  const profileInfo = profile_info?.value;
+  const socialContact = social_contact?.value;
+  const isValidAvatar = Boolean(profileInfo?.thumbnail?.url);
+  const bgImg = profileInfo?.background?.url;
+
+  const isPGL = type === "pgl-staff-profile";
+
+  const isAuthenticate =
+    window.location.pathname.split("/")[1] === "1dd3c10e071080";
+
+  const { toggleCertModal } = usePGLModal();
+
+  return (
+    <SectionFullScreen
+      className={twMerge(
+        "space-y-8 pt-16 px-4 pb-10 bg-white text-black min-h-[100svh] min-svh-full h-fit",
+        isThemeDark && "bg-black text-white"
+      )}
+      isSnapScroll={false}
+      name={id}
+    >
+      {bgImg ? (
+        <div
+          className={clsx(
+            "absolute inset-0 z-10 h-full w-full ",
+            isThemeDark
+              ? "bg-cover bg-center bg-black bg-opacity-[70%]"
+              : "bg-cover bg-center bg-white bg-opacity-[70%]"
+          )}
+          style={{
+            backgroundImage: `url(${bgImg})`,
+            backgroundBlendMode: "overlay",
+          }}
+        />
+      ) : null}
+
+      <FadeInMotionV2
+        className="w-full flex justify-center items-center flex-col gap-3 z-20 relative"
+        delay={0.25}
+        isVisible
+      >
+        {isValidAvatar ? (
+          <Image
+            className="w-[140px] !h-[140px] object-cover rounded-full"
+            height={140}
+            src={profileInfo.thumbnail.url}
+            width={140}
+          />
+        ) : null}
+        <div className="space-y-1 text-center">
+          <div className="flex items-center flex-row gap-2">
+            <TitleCustom
+              className="text-2xl"
+              field={{
+                value: profileInfo?.name,
+                style_config: profile_info?.style_config,
+              }}
+            />
+            {isAuthenticate && (
+              <SealCheck size={20} color="#34C759" weight="fill" />
+            )}
+          </div>
+          <Typography className="text-neutral-6" variant="span">
+            {profileInfo?.description}
+          </Typography>
+        </div>
+        <div
+          className={clsx(
+            "text-neutral-8 w-full flex items-start flex-col border border-neutral-5 p-5 rounded-xl backdrop-blur space-y-3",
+            isThemeDark && "border-neutral-8"
+          )}
+        >
+          {profileInfo?.email ? (
+            <a
+              className={twMerge(
+                "flex items-center gap-1 w-fit text-white no-underline",
+                isThemeDark ? "text-white" : "text-black"
+              )}
+              href={`mailto:${profileInfo?.email}`}
+            >
+              <IconMail />
+              <Typography variant="span">{profileInfo?.email}</Typography>
+            </a>
+          ) : null}
+          {profileInfo?.phone ? (
+            <a
+              className={twMerge(
+                "flex items-center gap-1 w-fit text-white no-underline",
+                isThemeDark ? "text-white" : "text-black"
+              )}
+              href={`tel:${profileInfo?.phone}`}
+              rel="noopener"
+              target="_blank"
+            >
+              <IconPhone />
+              <Typography variant="span">{profileInfo?.phone}</Typography>
+            </a>
+          ) : null}
+          {vcf_info?.value && isIOS() ? (
+            <a
+              className={twMerge(
+                "flex items-center justify-center text-black no-underline border w-full p-2 rounded-lg border-neutral-5",
+                isThemeDark && "text-white"
+              )}
+              href={vcf_info?.value}
+              rel="noopener"
+              target="_blank"
+            >
+              <Typography variant="span">Lưu thông tin liên lạc</Typography>
+            </a>
+          ) : null}
+        </div>
+      </FadeInMotionV2>
+
+      <div className="flex justify-center flex-col gap-3 relative z-20">
+        {isPGL ? (
+          <>
+            {/* <FadeInMotionV2 delay={0.5} isVisible>
+              <BaseButton
+                className={twMerge(
+                  "flex p-4 items-center justify-between rounded-xl bg-black bg-opacity-10 backdrop-blur-xl text-black",
+                  isThemeDark && "!bg-neutral-8 text-white"
+                )}
+                onClick={toggleCertModal}
+                type="button"
+              >
+                <Typography
+                  className="font-semibold capitalize !text-center w-full"
+                  variant="p"
+                >
+                  Certificate
+                </Typography>
+                <div />
+              </BaseButton>
+            </FadeInMotionV2> */}
+            <FadeInMotionV2 delay={0.5} isVisible>
+              <BaseButton
+                className={twMerge(
+                  "flex p-4 items-center justify-between rounded-xl bg-black bg-opacity-10 backdrop-blur-xl relative text-black",
+                  isThemeDark && "!bg-neutral-8 text-white"
+                )}
+                onClick={toggleCertModal}
+                type="button"
+              >
+                <Typography
+                  className="font-semibold capitalize !text-center w-full"
+                  variant="p"
+                >
+                  Certificate
+                </Typography>
+                <div />
+              </BaseButton>
+            </FadeInMotionV2>
+          </>
+        ) : null}
+        {defaultOrderSocial.map((item, index) => {
+          return (
+            Boolean((socialContact as any)?.[item]) && (
+              <FadeInMotionV2 delay={0.5 + index * 0.2} isVisible>
+                <BaseButton
+                  className={twMerge(
+                    "flex p-4 justify-between rounded-xl bg-black bg-opacity-10 backdrop-blur-xl relative text-black",
+                    isThemeDark && "!bg-neutral-8 text-white"
+                  )}
+                  key={item}
+                  onClick={() => {
+                    let inputUrl = (socialContact as any)[item];
+                    if (!inputUrl.trim().match(/^(http:\/\/|https:\/\/)/)) {
+                      // Prefix with https:// if no protocol is found
+                      inputUrl = `https://${inputUrl}`;
+                    }
+                    window.open(inputUrl, "_blank");
+                  }}
+                  type="button"
+                >
+                  {getIconByFieldKey(item, currentTheme as Theme)}
+                  <Typography
+                    className="font-semibold capitalize absolute left-1/2 -translate-x-1/2"
+                    variant="p"
+                  >
+                    {parse(item)}
+                  </Typography>
+                  <div />
+                </BaseButton>
+              </FadeInMotionV2>
+            )
+          );
+        })}
+        {isAuthenticate && (
+          <FadeInMotionV2
+            delay={1.25}
+            isVisible
+            className="flex items-center justify-center"
+          >
+            <Image
+              className="object-contain"
+              height={85}
+              width={180}
+              src="https://s3-sgn10.fptcloud.com/phygix-assets/Xác thực.png"
+            />
+          </FadeInMotionV2>
+        )}
+      </div>
+    </SectionFullScreen>
+  );
+}
+
+export default ProfileSection;

package/src/components/LandingPage/common/ui-kit/organisms/QuaTangQuocHoi/ContentTheme12.tsx

@@ -0,0 +1,327 @@
+import { quaTangQuocHoiData } from "./constant/data";
+import { motion } from "framer-motion";
+import { useInView } from "framer-motion";
+import { useRef } from "react";
+
+const ContentTheme12 = () => {
+  const { mainTitle, introduction, history, architecture, functionalRooms, images } = quaTangQuocHoiData;
+
+  // Animation variants
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+        delayChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: {
+      opacity: 0,
+      y: 20,
+    },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4,
+        ease: "easeOut",
+      },
+    },
+  };
+
+  return (
+    <div className="min-h-screen relative overflow-x-hidden">
+      {/* Header Section - Main Title with Golden Model */}
+      <motion.div
+        className="px-6 py-8"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, amount: 0.3 }}
+        variants={containerVariants}
+      >
+        <div className="max-w-7xl mx-auto">
+          <div className="flex flex-col lg:flex-row items-start gap-8 relative">
+            {/* Main Title */}
+            <motion.div
+              className="flex-1"
+              variants={itemVariants}
+            >
+              <div className="flex flex-row justify-between items-start pl-8">
+                <h1
+                  className="text-3xl font-bold text-[#C8172B] mb-6 leading-tight w-4 font-sfuagBuchStencil"
+                  style={{ fontFamily: '"SFUAGBuchStencilBQMedium", sans-serif' }}
+                >
+                  {mainTitle}
+                </h1>
+                <motion.img
+                  src={images.mainImage}
+                  alt="Toà nhà Quốc hội Việt Nam"
+                  className="w-60 h-60 object-cover"
+                  variants={itemVariants}
+                />
+              </div>
+              <motion.p
+                className="text-sm text-black leading-relaxed text-justify font-svnSunflora"
+                variants={itemVariants}
+              >
+                {introduction}
+              </motion.p>
+            </motion.div>
+            <motion.img
+              src={"https://storage.nomion.io/Qua-tang-quoc-hoi/quoc-huy-bg.webp"}
+              alt="Toà nhà Quốc hội Việt Nam"
+              className="h-100 w-full object-cover absolute top-0 right-0 z-0 opacity-70"
+              animate={{ rotate: 360 }}
+              transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
+            />
+          </div>
+        </div>
+      </motion.div>
+
+      {/* History Section */}
+      <motion.div
+        className="pr-4 py-4"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, amount: 0.3 }}
+        variants={containerVariants}
+      >
+        <div className="max-w-7xl mx-auto">
+          <div className="flex flex-row gap-4 items-start relative">
+            <motion.img
+              src={"https://storage.nomion.io/Qua-tang-quoc-hoi/quoc-huy-bg.webp"}
+              alt="Toà nhà Quốc hội Việt Nam"
+              className="h-100 w-full object-cover absolute top-32 right-0"
+              animate={{ rotate: 360 }}
+              transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
+            />
+            <motion.div
+              className="flex-shrink-0 relative"
+              variants={itemVariants}
+            >
+              <img
+                src={images.exterior}
+                alt="Toà nhà Quốc hội Việt Nam"
+                className="h-80 object-cover"
+              />
+            </motion.div>
+            <motion.div
+              className="flex-1"
+              variants={itemVariants}
+            >
+              <h2 className="text-lg font-bold text-[#C8172B] mb-4">{history.title}</h2>
+              <p className="text-black leading-relaxed text-justify">{history.content}</p>
+            </motion.div>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Architecture Section */}
+      <motion.div
+        className="px-6 py-4"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, amount: 0.3 }}
+        variants={containerVariants}
+      >
+        <div className="max-w-7xl mx-auto">
+          <motion.h2
+            className="text-2xl font-bold text-[#C8172B] text-center mb-12"
+            variants={itemVariants}
+          >
+            {architecture.title}
+          </motion.h2>
+
+          {/* Main Building Image */}
+          <motion.div
+            className="mb-8 px-0"
+            variants={itemVariants}
+          >
+            <img
+              src={images.exteriorLarge}
+              alt="Mặt tiền toà nhà Quốc hội"
+              className="w-full object-cover mb-6"
+            />
+          </motion.div>
+
+          {/* Bánh chưng, bánh giày Section */}
+          <motion.div
+            className="mb-8"
+            variants={itemVariants}
+          >
+            <p className="text-black leading-relaxed text-justify">{architecture.bánhChưngBánhGiày.content}</p>
+          </motion.div>
+
+          {/* Hình khối Section with Images */}
+          <motion.div
+            className="mb-8"
+            variants={itemVariants}
+          >
+            <div className="flex flex-row gap-4 items-start relative">
+              <div className="w-1/2">
+                <p className="text-black leading-relaxed text-justify">
+                  <span className="font-bold">{architecture.hìnhKhối.title} </span>
+                  {architecture.hìnhKhối.content}
+                </p>
+              </div>
+              <motion.img
+                src={"https://storage.nomion.io/Qua-tang-quoc-hoi/quoc-huy-bg.webp"}
+                alt="Toà nhà Quốc hội Việt Nam"
+                className="h-100 w-full object-cover absolute top-0 -right-24"
+                animate={{ rotate: 360 }}
+                transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
+              />
+              {/* Architectural Model */}
+              <div className="z-100">
+                <img
+                  src={images.architecturalModel}
+                  alt="Mô hình kiến trúc"
+                  className="w-[290px] h-auto object-cover absolute -right-32 -top-20 "
+                />
+              </div>
+            </div>
+          </motion.div>
+
+          {/* Mặt tiền Section */}
+          <motion.div
+            className="mb-8"
+            variants={itemVariants}
+          >
+            <p className="text-black leading-relaxed text-justify">
+              <span className="font-bold">{architecture.mặtTiền.title} </span>
+              {architecture.mặtTiền.content}
+            </p>
+          </motion.div>
+
+          {/* Vật liệu Section with Auditorium Image */}
+          <motion.div
+            className="mb-8"
+            variants={itemVariants}
+          >
+            <div className="flex flex-row gap-4 items-start">
+              <div className="flex-1">
+                <img
+                  src={images.auditorium}
+                  alt="Hội trường"
+                  className="w-full h-64 object-cover"
+                />
+              </div>
+              <div className="flex-1">
+                <p className="text-black leading-relaxed text-justify">
+                  <span className="font-bold">{architecture.vậtLiệu.title} </span>
+                  {architecture.vậtLiệu.content}
+                </p>
+              </div>
+            </div>
+          </motion.div>
+
+          {/* Cityscape Bottom */}
+          <motion.div
+            className="mt-8"
+            variants={itemVariants}
+          >
+            <img
+              src={images.cityscape}
+              alt="Cảnh quan thành phố"
+              className="w-full h-32 object-cover"
+            />
+          </motion.div>
+          <motion.div
+            className="mt-8"
+            variants={itemVariants}
+          >
+            <img
+              src={images.cityscape2}
+              alt="Cảnh quan thành phố"
+              className="w-full h-32 object-cover"
+            />
+          </motion.div>
+        </div>
+      </motion.div>
+
+      {/* Functional Rooms Section */}
+      <motion.div
+        className="px-6 py-12"
+        viewport={{ once: true, amount: 0.3 }}
+        variants={containerVariants}
+      >
+        <div className="max-w-7xl mx-auto">
+          <motion.h2
+            className="text-[28px] font-bold text-[#C8172B] text-center mb-12"
+            variants={itemVariants}
+          >
+            {functionalRooms.title}
+          </motion.h2>
+
+          <div className="space-y-12">
+            {functionalRooms.rooms.map((room, index) => (
+              <motion.div
+                key={index}
+                variants={itemVariants}
+              >
+                <p className="text-black leading-relaxed text-justify">
+                  <span className="font-bold text-[#C8172B]">{room.name} </span>
+                  {room.description}
+                </p>
+                {room.image && (
+                  <>
+                    <img
+                      src={room.image}
+                      alt={room.name}
+                      className="w-full h-48 object-cover mb-2"
+                    />
+                    <p className="text-sm font-light text-center text-black">{room.imageCaption}</p>
+                  </>
+                )}
+              </motion.div>
+            ))}
+          </div>
+
+          {/* Exhibition Section */}
+          <motion.div
+            className="my-6"
+            variants={itemVariants}
+          >
+            <p className="text-sm leading-relaxed mb-6 text-black">{functionalRooms.exhibition.description}</p>
+
+            <img
+              src={images.terracottaArtifacts1}
+              alt="Cổ vật đất nung"
+              className="w-full h-48 object-cover mb-2"
+            />
+            {/* Exhibition Images Grid */}
+            <div className="grid grid-cols-2 gap-2 mb-6">
+              {/* Large Exhibition Hall */}
+              {/* Terracotta Artifacts */}
+              <div className="space-y-2 col-span-1 w-full h-full">
+                <img
+                  src={images.wallRelief}
+                  alt="Phù điêu tường"
+                  className="w-full h-1/2 object-cover "
+                />
+                <img
+                  src={images.terracottaArtifacts}
+                  alt="Cổ vật đất nung"
+                  className="w-full h-1/2 object-cover "
+                />
+              </div>
+              <div className="col-span-1">
+                <img
+                  src={images.exhibitionHall}
+                  alt="Hội trường triển lãm"
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default ContentTheme12;

package/src/components/LandingPage/common/ui-kit/organisms/QuaTangQuocHoi/ContentTheme3.tsx

@@ -0,0 +1,9 @@
+const ContentTheme3 = () => {
+  return (
+    <div className="min-h-screen">
+      <img src="https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/full-section2-3.webp" />
+    </div>
+  );
+};
+
+export default ContentTheme3;

package/src/components/LandingPage/common/ui-kit/organisms/QuaTangQuocHoi/ContentTheme4.tsx

@@ -0,0 +1,9 @@
+const ContentTheme4 = () => {
+  return (
+    <div className="min-h-screen">
+      <img src="https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/section4-2.webp" />
+    </div>
+  );
+};
+
+export default ContentTheme4;