ui-landing-page 6.1.0

package/src/components/LandingPage/common/ui-kit/organisms/BizCardProfileSection/ShareButton.tsx

@@ -0,0 +1,113 @@
+import Modal from "antd/lib/modal";
+import { cn } from "../../../../../LandingPage/utils/helper";
+import { useState } from "react";
+import { Copy, FacebookLogo, TelegramLogo, X } from "@phosphor-icons/react";
+import { message } from "antd";
+
+const ShareIcon = () => (
+  <svg
+    width="16"
+    height="14"
+    viewBox="0 0 16 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M15.6157 7.28195L10.0601 12.8375C9.98242 12.9153 9.88339 12.9683 9.77556 12.9897C9.66774 13.0112 9.55597 13.0002 9.4544 12.9581C9.35283 12.916 9.26603 12.8448 9.20499 12.7533C9.14395 12.6619 9.11142 12.5544 9.1115 12.4444V9.68264C5.14622 9.90764 2.42747 12.4792 1.66428 13.2938C1.54444 13.4217 1.38729 13.5087 1.21518 13.5422C1.04308 13.5756 0.864799 13.554 0.705709 13.4803C0.546619 13.4066 0.414827 13.2846 0.329089 13.1317C0.243351 12.9787 0.208036 12.8026 0.22817 12.6285C0.485808 10.3882 1.71289 8.23334 3.68372 6.56111C5.32053 5.17223 7.31011 4.29098 9.1115 4.13681V1.33334C9.11142 1.22339 9.14395 1.1159 9.20499 1.02446C9.26603 0.933017 9.35283 0.861742 9.4544 0.819658C9.55597 0.777573 9.66774 0.76657 9.77556 0.788043C9.88339 0.809515 9.98242 0.862497 10.0601 0.940281L15.6157 6.49584C15.6673 6.54743 15.7083 6.6087 15.7363 6.67615C15.7642 6.74359 15.7786 6.81588 15.7786 6.88889C15.7786 6.9619 15.7642 7.03419 15.7363 7.10164C15.7083 7.16908 15.6673 7.23035 15.6157 7.28195Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export default function ShareButton({
+  className,
+  primaryColor,
+}: {
+  className?: string;
+  primaryColor?: string;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleCopyLink = (link: string) => {
+    navigator.clipboard.writeText(link);
+    message.success("Copied to clipboard");
+  };
+
+  const handleShareFacebook = (link: string) => {
+    window.open(
+      `https://www.facebook.com/sharer/sharer.php?u=${link}`,
+      "_blank"
+    );
+    message.success("Copied to Facebook");
+  };
+
+  const handleShareTelegram = (link: string) => {
+    window.open(`https://t.me/share/url?url=${link}`, "_blank");
+    message.success("Copied to Telegram");
+  };
+
+  const link = `${window.location.href}?m=1`;
+
+  const BUTTON_SHARE_LIST = [
+    {
+      icon: <Copy size={24} />,
+      label: "Copy link",
+      onClick: () => handleCopyLink(link),
+    },
+    {
+      icon: <FacebookLogo size={24} />,
+      label: "Facebook",
+      onClick: () => handleShareFacebook(link),
+    },
+    {
+      icon: <TelegramLogo size={24} />,
+      label: "Telegram",
+      onClick: () => handleShareTelegram(link),
+    },
+  ];
+
+  return (
+    <>
+      <div
+        className={cn(
+          "bg-white/20 rounded-full p-2 z-50 hover:bg-white/30 transition-all duration-300 absolute top-2 right-2",
+          className
+        )}
+        onClick={() => setIsOpen(true)}
+      >
+        <ShareIcon />
+      </div>
+      <Modal
+        open={isOpen}
+        onCancel={() => setIsOpen(false)}
+        onClose={() => setIsOpen(false)}
+        footer={null}
+        centered
+        closeIcon={<X size={24} color="#000" weight="regular" />}
+      >
+        <div className="flex min-h-[150px] w-full p-4 flex-col items-center justify-center">
+          <div className="flex w-full flex-col items-center justify-center gap-4">
+            <p className="text-lg font-semibold text-center text-[#494949]">
+              Share this profile
+            </p>
+            <div className="flex items-center h-auto justify-center gap-3 w-full overflow-x-auto">
+              {BUTTON_SHARE_LIST.map((item) => (
+                <div
+                  key={item.label}
+                  style={{
+                    backgroundColor: primaryColor ? primaryColor : "#000000",
+                    color: "#fff",
+                  }}
+                  className="w-11 h-11 flex-shrink-0 text-white rounded-full flex items-center justify-center"
+                  onClick={item.onClick}
+                >
+                  {item.icon}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+}

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

@@ -0,0 +1,395 @@
+/* eslint-disable camelcase */
+import { useState } from "react";
+import type { BaseSectionProps } from "../../../../models/base-section";
+import SectionFullScreen from "../../../SectionFullScreen";
+import type { Field } from "../../types/base";
+import {
+  ContactType,
+  ContactTypeEnum,
+  Media,
+} from "../../../../models/general";
+import { cn, getContentFromLexicalValue, isIOS } from "@phygitallabs/helpers";
+import {
+  FacebookLogo,
+  LinkedinLogo,
+  TelegramLogo,
+  SlackLogo,
+  InstagramLogo,
+  TwitterLogo,
+  YoutubeLogo,
+  PinterestLogo,
+  TwitchLogo,
+  DiscordLogo,
+  ThreadsLogo,
+  TiktokLogo,
+} from "@phosphor-icons/react";
+import "swiper/css";
+import { twMerge } from "tailwind-merge";
+import ContactCard from "./ContactCard";
+import ShareButton from "./ShareButton";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+
+interface PersonalInfo {
+  name: string;
+  position: string;
+  company: string;
+  image?: Media;
+  avatar?: Media;
+}
+
+interface ProductLink {
+  product_name: string;
+  product_description?: string;
+  product_image: Media;
+  product_url: string;
+}
+
+interface SectionData {
+  personal_info: Field<PersonalInfo>;
+  contact: Field<ContactType[]>;
+  social_media_links: Field<Record<string, string>>;
+  vcf_info: Field<string>;
+  product_links: Field<ProductLink[]>;
+}
+
+interface Props extends BaseSectionProps {
+  sectionData: SectionData;
+  translations?: {
+    contactText: string;
+    productText: string;
+    saveContactText: string;
+    socialMediaText: string;
+  };
+}
+
+function BizCardProfileSection(props: Props) {
+  const { id, sectionData, themes, translations } = props;
+  const {
+    personal_info,
+    contact,
+    social_media_links,
+    product_links,
+    vcf_info,
+  } = sectionData;
+
+  const {
+    contactText = "Contact",
+    productText = "Product",
+    saveContactText = "Save contact",
+    socialMediaText = "Social media",
+  } = translations || {};
+
+  //theme
+  const themeColor = themes?.theme_color;
+  const themeLayout = themes?.theme_layout || "1";
+
+  const [activeTab, setActiveTab] = useState<"contact" | "product">("contact");
+
+  const contactList = contact?.value;
+  const personalInfo = personal_info?.value;
+  const socialMediaLinks = social_media_links?.value;
+  const productLinks = product_links?.value;
+  const isHaveProduct = productLinks?.length > 0;
+
+  //personal info
+  const profileCoverUrl = personalInfo?.image?.url;
+  const profileAvatarUrl = personalInfo?.avatar?.url;
+  const name = personalInfo?.name;
+  const position = personalInfo?.position;
+  const company = personalInfo?.company;
+
+  //vcf info
+  const vcfInfo = vcf_info?.value;
+  const phoneNumber = contactList?.find(
+    (item) => item.contact_type === ContactTypeEnum.Phone
+  )?.value;
+
+  return (
+    <SectionFullScreen
+      id={id}
+      className="bg-white text-black overflow-y-auto pb-10"
+    >
+      <div className="flex flex-col items-center justify-start max-w-md mx-auto">
+        {personalInfo &&
+          (themeLayout === "2" ? (
+            <div className="w-full h-[320px] overflow-hidden relative">
+              <ShareButton primaryColor={themeColor} />
+              <img
+                src={profileCoverUrl}
+                alt="Profile Cover"
+                className="w-full h-full object-cover"
+              />
+              <div
+                className={cn(
+                  "absolute bottom-2 left-0 p-4 bg-gradient-to-t from-black/30 to-transparent w-full flex gap-4 items-center justify-start",
+                  !isHaveProduct && "bottom-0"
+                )}
+              >
+                <img
+                  src={profileAvatarUrl}
+                  alt={name}
+                  className="w-24 flex-shrink-0 h-24 rounded-full overflow-hidden border-4 border-white shadow-lg"
+                />
+                <div className="text-white">
+                  <h2 className="text-2xl font-semibold">{name}</h2>
+                  <p className="line-clamp-2">
+                    {position} {company && `at ${company}`}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="flex flex-col items-center w-full">
+              <ShareButton primaryColor={themeColor} />
+              {/* Cover image section */}
+              <div className="w-full relative">
+                {profileCoverUrl && (
+                  <div className="w-full h-40 overflow-hidden">
+                    <img
+                      src={profileCoverUrl}
+                      alt="Profile Cover"
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                )}
+
+                {/* Avatar overlapping the cover image */}
+                <div className="w-24 h-24 rounded-full overflow-hidden border-4 border-white shadow-lg absolute left-1/2 transform -translate-x-1/2 -bottom-12">
+                  <img
+                    src={profileAvatarUrl}
+                    alt={name}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+              </div>
+              {/* Name and position with proper spacing after avatar */}
+              <div className="mt-16 text-center mb-6">
+                <h2 className="text-2xl font-semibold">{name}</h2>
+                <p className="text-gray-600">
+                  {position} {company && `at ${company}`}
+                </p>
+              </div>
+            </div>
+          ))}
+
+        {/* Tabs */}
+        <div
+          className={twMerge(
+            "w-full",
+            themeLayout === "2" && isHaveProduct && "translate-y-[-12px]"
+          )}
+        >
+          {isHaveProduct && (
+            <div
+              className={twMerge(
+                "w-2/3 flex mb-6 mx-auto",
+                themeLayout === "2" &&
+                  "w-full p-3 rounded-t-xl shadow-md bg-white z-[1000]"
+              )}
+            >
+              <button
+                className={twMerge(
+                  "flex-1 py-1 text-center font-semibold text-sm"
+                )}
+                type="button"
+                onClick={() => setActiveTab("contact")}
+                style={{
+                  color: activeTab === "contact" ? themeColor : "gray",
+                  borderBottom:
+                    activeTab === "contact" && themeLayout === "2"
+                      ? `2px solid ${themeColor}`
+                      : "none",
+                }}
+              >
+                {contactText}
+              </button>
+              <button
+                type="button"
+                className={twMerge(
+                  "flex-1 py-1 text-center font-semibold text-sm"
+                )}
+                onClick={() => setActiveTab("product")}
+                style={{
+                  color: activeTab === "product" ? themeColor : "gray",
+                  borderBottom:
+                    activeTab === "product" && themeLayout === "2"
+                      ? `2px solid ${themeColor}`
+                      : "none",
+                }}
+              >
+                {productText}
+              </button>
+            </div>
+          )}
+
+          {/* Contact tab */}
+          {activeTab === "contact" && contactList && (
+            <div
+              className={cn("w-full px-4 space-y-6", !isHaveProduct && "mt-6")}
+            >
+              <div className="flex flex-col gap-2">
+                {contactList.map((item: ContactType, index: number) => (
+                  <ContactCard
+                    value={item}
+                    key={index}
+                    primaryColor={themeColor}
+                  />
+                ))}
+              </div>
+
+              {/* social */}
+              {socialMediaLinks && Object.keys(socialMediaLinks).length > 0 && (
+                <div className="w-full flex flex-col gap-4 justify-center items-center">
+                  <p className="text-[#494949] font-semibold">
+                    {socialMediaText}
+                  </p>
+                  <div className="w-full overflow-x-auto flex items-center justify-center gap-4 py-2 px-2">
+                    {Object.entries(socialMediaLinks).map(
+                      ([platform, url], index) => {
+                        if (!url) return null;
+                        let IconComponent: any = null;
+
+                        const platformLower = platform.toLowerCase();
+
+                        if (platformLower.includes("facebook")) {
+                          IconComponent = FacebookLogo;
+                        } else if (platformLower.includes("linkedin")) {
+                          IconComponent = LinkedinLogo;
+                        } else if (platformLower.includes("telegram")) {
+                          IconComponent = TelegramLogo;
+                        } else if (platformLower.includes("slack")) {
+                          IconComponent = SlackLogo;
+                        } else if (platformLower.includes("instagram")) {
+                          IconComponent = InstagramLogo;
+                        } else if (
+                          platformLower.includes("twitter") ||
+                          platformLower.includes("x.com")
+                        ) {
+                          IconComponent = TwitterLogo;
+                        } else if (platformLower.includes("youtube")) {
+                          IconComponent = YoutubeLogo;
+                        } else if (platformLower.includes("pinterest")) {
+                          IconComponent = PinterestLogo;
+                        } else if (platformLower.includes("twitch")) {
+                          IconComponent = TwitchLogo;
+                        } else if (platformLower.includes("discord")) {
+                          IconComponent = DiscordLogo;
+                        } else if (platformLower.includes("threads")) {
+                          IconComponent = ThreadsLogo;
+                        } else if (platformLower.includes("tiktok")) {
+                          IconComponent = TiktokLogo;
+                        }
+
+                        return (
+                          <a
+                            key={index}
+                            href={url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="w-12 h-12 flex-shrink-0 flex items-center justify-center rounded-full"
+                            style={{
+                              color: themeColor,
+                              border: `1px solid ${themeColor}40`,
+                            }}
+                          >
+                            {IconComponent ? (
+                              <IconComponent
+                                size={24}
+                                weight="fill"
+                                className="text-inherit"
+                                style={{ color: themeColor }}
+                              />
+                            ) : (
+                              <span className="text-lg font-bold">
+                                {platform.charAt(0)}
+                              </span>
+                            )}
+                          </a>
+                        );
+                      }
+                    )}
+                  </div>
+                </div>
+              )}
+
+              <div
+                className="w-full flex items-center justify-center rounded-xl text-white text-sm"
+                style={{ backgroundColor: themeColor }}
+              >
+                {vcfInfo && isIOS() && (
+                  <a
+                    href={vcfInfo}
+                    target="_blank"
+                    className="w-full h-full flex items-center justify-center py-3"
+                  >
+                    {saveContactText}
+                  </a>
+                )}
+                {phoneNumber && !isIOS() && (
+                  <a
+                    href={`tel:${phoneNumber}`}
+                    target="_blank"
+                    className="w-full h-full flex items-center justify-center py-3"
+                  >
+                    {saveContactText}
+                  </a>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Product tab */}
+          {activeTab === "product" && productLinks && (
+            <div className="w-full px-4">
+              {productLinks.map((product, index) => (
+                <a
+                  href={product.product_url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  key={index}
+                  className="mb-4 rounded-xl block border !border-neutral-5 overflow-hidden shadow-sm"
+                >
+                  <div className="relative h-56">
+                    {/* Background with color or image */}
+
+                    {product?.product_image?.url ? (
+                      <Image
+                        src={product?.product_image?.url}
+                        alt={product?.product_name || "Product image"}
+                        className="absolute inset-0 w-full h-full object-cover"
+                      />
+                    ) : (
+                      <div
+                        className="absolute inset-0 w-full h-full"
+                        style={{
+                          backgroundColor:
+                            index % 2 === 0 ? "#236643" : "#e6f0ff",
+                        }}
+                      />
+                    )}
+                    {/* Gradient overlay to ensure text readability */}
+                    <div className="absolute inset-0 bg-gradient-to-t from-white/90 to-transparent"></div>
+
+                    {/* Product info overlay at bottom */}
+                    <div className="absolute bottom-0 left-0 p-4 w-full z-10">
+                      <h3 className="text-lg text-black font-semibold">
+                        {product.product_name}
+                      </h3>
+                      <p className="text-sm text-black/90 mt-1 line-clamp-3">
+                        {getContentFromLexicalValue(
+                          product.product_description
+                        )}
+                      </p>
+                    </div>
+                  </div>
+                </a>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </SectionFullScreen>
+  );
+}
+
+export default BizCardProfileSection;

package/src/components/LandingPage/common/ui-kit/organisms/BookSection/BookCoverSection.tsx

@@ -0,0 +1,74 @@
+// import LineText from "@/components/common/LineText";
+import SectionFullScreen from "../../../SectionFullScreen";
+import { FadeInMotion } from "../../../FadeInMotion";
+import { FC } from "react";
+import { BaseSectionProps } from "../../../../models/base-section";
+import { Typography } from "../../atomics";
+import TitleCustom from "../../moleculars/Title";
+import { Field } from "../../types/base";
+import BackgroundImage from "../../moleculars/BackgroundImage";
+
+interface BookCoverSectionProps extends BaseSectionProps {}
+
+interface BookCoverSectionData {
+  title: Field;
+  description: Field;
+  background: Field;
+  author_cover: Field;
+  author_cover_prefix: Field;
+}
+
+const BookCoverSection: FC<BookCoverSectionProps> = ({
+  id,
+  sectionData,
+  hasAnimation = true,
+  configTheme,
+}) => {
+  const {
+    title,
+    description,
+    background,
+    author_cover: authorCover,
+    author_cover_prefix: authorCoverPrefix,
+  } = sectionData as BookCoverSectionData;
+
+  return (
+    <SectionFullScreen name={id}>
+      <BackgroundImage field={background} />
+      <div className="absolute left-0 top-0 z-50 flex h-full w-full items-end justify-center">
+        {title?.value && (
+          <FadeInMotion
+            duration={!hasAnimation ? 0 : 0.5}
+            delay={hasAnimation ? 0.2 : 0}
+            className="mb-28 px-4 py-6 bg-black/50 ">
+            {authorCover && authorCoverPrefix && (
+              <div className="text-sm uppercase space-x-1">
+                <Typography variant="span" className="font-light text-neutral">
+                  {authorCoverPrefix.value}
+                </Typography>
+                <Typography
+                  variant="span"
+                  className="font-semibold text-neutral-1">
+                  {authorCover.value}
+                </Typography>
+              </div>
+            )}
+            <TitleCustom
+              className="text-2xl"
+              field={title}
+              configTheme={configTheme}
+            />
+            {description && (
+              <>
+                <div className="h-[1px] w-full rounded-lg border" />
+                <Typography variant="p">{description.value}</Typography>
+              </>
+            )}
+          </FadeInMotion>
+        )}
+      </div>
+    </SectionFullScreen>
+  );
+};
+
+export default BookCoverSection;