ui-landing-page 6.1.0

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

@@ -0,0 +1,120 @@
+// @ts-nocheck
+import { BaseSectionProps } from "../../../../../LandingPage/models/base-section";
+import { Field } from "../../types/base";
+import { parse } from "@phygitallabs/helpers";
+import { FC, useEffect, useState } from "react";
+import SectionFullScreen from "../../../SectionFullScreen";
+import { FadeInMotion } from "../../../FadeInMotion";
+import BackgroundImage from "../../moleculars/BackgroundImage";
+
+interface NgheLetterSectionProps extends BaseSectionProps {}
+
+interface NgheLetterSectionData {
+  owner_name: Field;
+  description: Field;
+  background: Field;
+  honorofics: Field;
+  position: Field;
+}
+
+const getKeysInDescription = (description: string): string[] => {
+  if (description === undefined || "") return [];
+  const regex = /\{([^}]+)\}/g;
+  const matches = description?.match(regex);
+  let keys: string[] = [];
+  if (matches) {
+    const keysArrayAfterMatch = matches?.map((match) => match.slice(1, -1));
+    keys = keysArrayAfterMatch.filter((item, index, array) => {
+      return array.indexOf(item) === index;
+    });
+  }
+  return keys;
+};
+
+const replaceKeysInDescription = (description: string, extraInfo: any) => {
+  const keys = getKeysInDescription(description);
+  if (keys.length === 0) return description;
+  keys.forEach((key) => {
+    description = description?.replaceAll(`{${key}}`, extraInfo?.[key] ?? "");
+  });
+  return description;
+};
+
+const NgheLetterSection: FC<NgheLetterSectionProps> = ({
+  id,
+  sectionData,
+  hasAnimation = true,
+}) => {
+  const { background, description, owner_name, honorofics, position } =
+    sectionData || ({} as Partial<NgheLetterSectionData>);
+
+  const descriptionValue = description?.value as string;
+  const nameValue = owner_name?.value;
+  const honoroficsValue = honorofics?.value;
+  const positionValue = position?.value;
+
+  const [letterContent, setLetterContent] = useState<string[]>([]);
+
+  useEffect(() => {
+    const hasOwnerName = !!nameValue;
+
+    if (!!descriptionValue && typeof descriptionValue === "string") {
+      const rawParsedDescription = parse(descriptionValue);
+      const parsedDescription = Array.isArray(rawParsedDescription)
+        ? (rawParsedDescription as React.ReactElement[])
+        : ([rawParsedDescription] as React.ReactElement[]);
+
+      parsedDescription?.forEach((item) => {
+        const parsedChildren =
+          typeof item.props?.children === "string" ? item.props?.children : "";
+        const contentAfterReplaceKey = replaceKeysInDescription(
+          parsedChildren,
+          descriptionValue
+        );
+        if (parsedChildren?.search("{name}") !== -1) {
+          const content = parsedChildren.split("{name}") as string[];
+          content[0] = replaceKeysInDescription(content[0], descriptionValue);
+          if (hasOwnerName) {
+            content[0] += ", thuộc về:";
+          }
+          setLetterContent(content);
+        } else setLetterContent((item) => [...item, contentAfterReplaceKey]);
+      });
+    }
+  }, [sectionData, descriptionValue]);
+
+  return (
+    <SectionFullScreen name={id}>
+      <div className="absolute left-0 top-0 z-10 flex h-[100svh] svh-full w-full flex-col items-center justify-center gap-[16px] bg-black-alpha-.8 px-[16px] pb-[32px] sm:gap-[24px]"></div>
+      <BackgroundImage field={background} />
+      <div className="absolute left-0 top-[80px] z-10 flex h-[95%] w-full flex-col items-center justify-start gap-[10px] overflow-hidden px-5 sm:gap-[24px]">
+        <p className="text-base leading-5 text-neutral-3">{letterContent[0]}</p>
+        {!!nameValue && (
+          <FadeInMotion
+            duration={!hasAnimation ? 0 : 0.5}
+            delay={hasAnimation ? 0.2 : 0}
+            className="!gap-2 border-2 border-neutral-8 p-2 text-center"
+          >
+            <p className="text-md">{parse(honoroficsValue)}</p>
+            <p className="font-lost-type text-lg">{parse(nameValue)}</p>
+            {!!positionValue && (
+              <p className="text-md">{parse(positionValue)}</p>
+            )}
+          </FadeInMotion>
+        )}
+
+        {letterContent.map((item, index) => {
+          if (index === 0) return null;
+          else
+            return (
+              <p key={index} className="text-base leading-5 text-neutral-3">
+                {item}
+              </p>
+            );
+        })}
+      </div>
+    </SectionFullScreen>
+  );
+};
+
+export default NgheLetterSection;

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

@@ -0,0 +1,5 @@
+import BookCoverSectionUI from "./BookCoverSection";
+import BookSectionUI from "./BookSection";
+import NgheLetterSectionUI from "./NgheLetterSection";
+
+export { BookCoverSectionUI, BookSectionUI, NgheLetterSectionUI };

package/src/components/LandingPage/common/ui-kit/organisms/BookSection/utils/index.ts

@@ -0,0 +1,29 @@
+export const scrollToPage = (
+  pageNumber: number,
+  otherSectionNumber: number
+) => {
+  const container = document.getElementById("snap-container")!;
+  const clientHeight = window.innerHeight;
+  const currentPagePosition =
+    clientHeight * otherSectionNumber + clientHeight * (pageNumber - 1);
+  container.scrollTo({
+    top: currentPagePosition,
+    behavior: "smooth",
+  });
+};
+
+export const serializeDocumentFragment = (el: Element) => {
+  const serializer = new XMLSerializer();
+  let htmlString = "";
+
+  el.childNodes.forEach(function (node) {
+    let serializedNode = serializer.serializeToString(node);
+    serializedNode = serializedNode.replace(
+      /\sxmlns="http:\/\/www\.w3\.org\/1999\/xhtml"/,
+      ""
+    );
+    htmlString += serializedNode;
+  });
+
+  return htmlString;
+};

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

@@ -0,0 +1,19 @@
+interface Props {
+  color: string;
+}
+
+const BgRectangle = (props: Props) => {
+  const { color } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 390 300"
+      fill="none">
+      <path d="M0 0H390V193.5L0 300V0Z" fill={color} />
+    </svg>
+  );
+};
+
+export default BgRectangle;

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

@@ -0,0 +1,78 @@
+import SectionFullScreen from "../../../SectionFullScreen";
+import { twMerge } from "tailwind-merge";
+import BgRectangle from "./BgRectangle";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import TitleCustom from "../../moleculars/Title";
+import { Typography } from "../../atomics";
+import { FadeInMotionV2 } from "../../../FadeInMotion";
+import FragmentContactInfo from "./FragmentContactInfo";
+import { BusinessProfileProps } from ".";
+
+const BusinessCardAvtCircle = (props: BusinessProfileProps) => {
+  const { id, sectionData, configTheme } = props;
+  const profileInfo = sectionData?.profile_info?.value;
+  const profileInfoStyleConfig = sectionData?.profile_info?.style_config;
+  const primaryColor =
+    sectionData?.primary_color?.value || configTheme?.primary_color!;
+  const isThemeDark = false;
+
+  return (
+    <>
+      <SectionFullScreen
+        className={twMerge(
+          "space-y-8 pb-10 bg-white text-black min-h-[100svh] min-svh-full h-fit",
+          isThemeDark && "bg-black text-white"
+        )}
+        name={id}
+        isSnapScroll={false}
+      >
+        <div className="relative h-fit">
+          <BgRectangle color={primaryColor} />
+          <FadeInMotionV2
+            isVisible={true}
+            delay={0.25}
+            className="absolute left-5 top-[50%] -translate-y-1/2 flex flex-col gap-2"
+          >
+            <Image
+              src={profileInfo?.company_logo?.url}
+              className="w-[75px] !h-[75px] object-contain rounded-xl border-2 box-content border-white"
+              width={75}
+              height={75}
+            />
+            <TitleCustom
+              className="text-2xl text-white"
+              field={{
+                value: profileInfo?.name,
+                style_config: profileInfoStyleConfig,
+              }}
+            />
+            <Typography variant="span" className="text-white">
+              {profileInfo?.description}
+            </Typography>
+            <Typography variant="span" className="text-white font-thin italic">
+              {profileInfo?.company_name}
+            </Typography>
+          </FadeInMotionV2>
+          <FadeInMotionV2
+            isVisible={true}
+            delay={0.5}
+            className="absolute right-5 top-[60%] w-fit"
+          >
+            <Image
+              src={profileInfo?.thumbnail?.url}
+              className="w-[140px] !h-[140px] object-cover rounded-full border-[4px] box-content border-white"
+              width={140}
+              height={140}
+            />
+          </FadeInMotionV2>
+        </div>
+        <FragmentContactInfo
+          configTheme={configTheme}
+          sectionData={sectionData}
+        />
+      </SectionFullScreen>
+    </>
+  );
+};
+
+export default BusinessCardAvtCircle;

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

@@ -0,0 +1,77 @@
+import SectionFullScreen from "../../../SectionFullScreen";
+import { twMerge } from "tailwind-merge";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import TitleCustom from "../../moleculars/Title";
+import { Typography } from "../../atomics";
+import { FadeInMotionV2 } from "../../../FadeInMotion";
+import FragmentContactInfo from "./FragmentContactInfo";
+import { BusinessProfileProps } from ".";
+
+const BusinessCardAvtFull = (props: BusinessProfileProps) => {
+  const { id, sectionData, configTheme } = props;
+  const profileInfo = sectionData?.profile_info?.value;
+  const profileInfoStyleConfig = sectionData?.profile_info?.style_config;
+
+  const isThemeDark = false;
+  const primaryColor =
+    sectionData?.primary_color?.value || configTheme?.primary_color;
+
+  return (
+    <>
+      <SectionFullScreen
+        className={twMerge(
+          "space-y-4 pb-10 bg-white text-black min-h-[100svh] min-svh-full h-fit",
+          isThemeDark && "bg-black text-white"
+        )}
+        name={id}
+        isSnapScroll={false}
+      >
+        <FadeInMotionV2 isVisible={true} delay={0.25} className="w-full">
+          <Image
+            style={{
+              borderBottom: `5px solid ${primaryColor}`,
+            }}
+            src={profileInfo?.thumbnail?.url}
+            className="w-full h-1/3 max-h-[450px] object-cover box-content border-white"
+            width="100%"
+            height="25%"
+          />
+        </FadeInMotionV2>
+        <FadeInMotionV2
+          isVisible={true}
+          delay={0.5}
+          className="flex flex-row gap-2 px-5 w-full justify-between"
+        >
+          <div className="flex flex-col max-w-[72%] flex-none">
+            <TitleCustom
+              className="text-2xl text-wrap break-words "
+              field={{
+                value: profileInfo?.name,
+                style_config: profileInfoStyleConfig,
+              }}
+            />
+            <Typography variant="span" className="">
+              {profileInfo?.description}
+            </Typography>
+            <Typography variant="span" className="font-thin italic">
+              {profileInfo?.company_name}
+            </Typography>
+          </div>
+          <Image
+            src={profileInfo?.company_logo?.url}
+            className="w-[50px] !h-[50px] object-contain rounded-xl border-2 box-content border-white grow"
+            width={50}
+            height={50}
+          />
+        </FadeInMotionV2>
+
+        <FragmentContactInfo
+          configTheme={configTheme}
+          sectionData={sectionData}
+        />
+      </SectionFullScreen>
+    </>
+  );
+};
+
+export default BusinessCardAvtFull;

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

@@ -0,0 +1,214 @@
+import { ProfileSocialType } from "../../../../../LandingPage/models/general";
+import { twMerge } from "tailwind-merge";
+import { Typography } from "../../atomics";
+import IconMail from "./icons/IconMail";
+import IconPhone from "./icons/IconPhone";
+import IconWeb from "./icons/IconWeb";
+import IconAddress from "./icons/IconAddress";
+import { FadeInMotionV2 } from "../../../FadeInMotion";
+import TwitterIcon from "../../../icons/social-icons/TwitterIcon";
+import TiktokIcon from "../../../icons/social-icons/TiktokIcon";
+import ThreadsIcon from "../../../icons/social-icons/ThreadsIcon";
+import YoutubeIcon from "../../../icons/social-icons/YoutubeIcon";
+import IconFacebook from "./icons/IconFacebook";
+import IconInsta from "./icons/IconInsta";
+import IconTele from "./icons/IconTele";
+import IconLinkedin from "./icons/IconLinkedin";
+import { BusinessProfileSectionData } from ".";
+
+const defaultOrderSocial = [
+  ProfileSocialType.Linkedin,
+  ProfileSocialType.Facebook,
+  ProfileSocialType.Instagram,
+  ProfileSocialType.Telegram,
+  ProfileSocialType.Tiktok,
+  ProfileSocialType.Youtube,
+  ProfileSocialType.Threads,
+  ProfileSocialType.Twitter,
+];
+
+const getIconByFieldKey = (fieldKey: string) => {
+  switch (fieldKey) {
+    case ProfileSocialType.Facebook:
+      return <IconFacebook />;
+    case ProfileSocialType.Instagram:
+      return <IconInsta />;
+    case ProfileSocialType.Twitter:
+      return <TwitterIcon />;
+    case ProfileSocialType.Tiktok:
+      return <TiktokIcon />;
+    case ProfileSocialType.Telegram:
+      return <IconTele />;
+    case ProfileSocialType.Threads:
+      return <ThreadsIcon />;
+    case ProfileSocialType.Youtube:
+      return <YoutubeIcon theme={"light" as any} />;
+    case ProfileSocialType.Linkedin:
+      return <IconLinkedin />;
+    default:
+      return null;
+  }
+};
+
+interface Props {
+  sectionData: BusinessProfileSectionData;
+  configTheme: any;
+}
+
+const FragmentContactInfo = (props: Props) => {
+  const { sectionData, configTheme } = props;
+  const profileInfo = sectionData?.profile_info?.value;
+  const primaryColor =
+    sectionData?.primary_color?.value || configTheme?.primary_color!;
+  const vcfInfo = sectionData?.vcf_info?.value;
+  const social = sectionData?.social?.value;
+  const companyEmail = profileInfo?.email;
+  const personalEmail = profileInfo?.personal_email;
+  const saveContact = profileInfo?.save_contact || "Save contact";
+  const isThemeDark = false;
+  return (
+    <FadeInMotionV2 isVisible={true} delay={0.75} className="px-5 space-y-2">
+      {companyEmail && (
+        <div className="flex items-center gap-2">
+          <div
+            style={{ backgroundColor: primaryColor }}
+            className="p-1 rounded-md "
+          >
+            <IconMail />
+          </div>
+          <div className="flex flex-col">
+            <a href={`mailto:${companyEmail}`} className="leading-3">
+              <Typography variant="p">{companyEmail}</Typography>
+            </a>
+            <Typography
+              variant="span"
+              className="text-xs text-[#BBB] font-medium"
+            >
+              Work
+            </Typography>
+          </div>
+        </div>
+      )}
+      {personalEmail && (
+        <div className="flex items-center gap-2">
+          <div
+            style={{ backgroundColor: primaryColor }}
+            className="p-1 rounded-md "
+          >
+            <IconMail />
+          </div>
+          <div className="flex flex-col">
+            <a href={`mailto:${personalEmail}`} className="leading-3">
+              <Typography variant="p">{personalEmail}</Typography>
+            </a>
+            <Typography
+              variant="span"
+              className="text-xs text-[#BBB] font-medium"
+            >
+              Personal
+            </Typography>
+          </div>
+        </div>
+      )}
+      {profileInfo?.phone && (
+        <a
+          href={`tel:${profileInfo?.phone}`}
+          className="flex items-center gap-2"
+        >
+          <div
+            style={{ backgroundColor: primaryColor }}
+            className="p-1 rounded-md "
+          >
+            <IconPhone />
+          </div>
+          <Typography variant="p">{profileInfo?.phone}</Typography>
+        </a>
+      )}
+      {profileInfo?.web && (
+        <div
+          onClick={() => {
+            let inputUrl = profileInfo?.web as any;
+            if (!inputUrl.trim().match(/^(http:\/\/|https:\/\/)/)) {
+              // Prefix with https:// if no protocol is found
+              inputUrl = "https://" + inputUrl;
+            }
+            window.open(inputUrl, "_blank");
+          }}
+          className="flex items-center gap-2"
+        >
+          <div
+            style={{ backgroundColor: primaryColor }}
+            className="p-1 rounded-md "
+          >
+            <IconWeb />
+          </div>
+          <Typography variant="p">{profileInfo?.web}</Typography>
+        </div>
+      )}
+      {profileInfo?.address && (
+        <div className="flex items-center gap-2">
+          <div
+            style={{ backgroundColor: primaryColor }}
+            className="p-1 rounded-md "
+          >
+            <IconAddress />
+          </div>
+          <Typography variant="p">{profileInfo?.address}</Typography>
+        </div>
+      )}
+      {vcfInfo && (
+        <a
+          href={vcfInfo}
+          target="_blank"
+          className={twMerge(
+            "flex relative items-center justify-center text-black no-underline w-full p-2 rounded-lg",
+            isThemeDark && "text-white"
+          )}
+        >
+          <div
+            className="absolute h-full w-full opacity-20 rounded-lg"
+            style={{
+              backgroundColor: primaryColor,
+            }}
+          />
+          <Typography variant="span">{saveContact}</Typography>
+        </a>
+      )}
+      <div className="w-full">
+        <div
+          style={{ color: primaryColor }}
+          className="flex items-center justify-center gap-3"
+        >
+          {defaultOrderSocial.map((item, index) => {
+            return (
+              !!(social as any)?.[item] && (
+                <FadeInMotionV2
+                  className="w-fit"
+                  isVisible={true}
+                  delay={0.5 + index * 0.2}
+                >
+                  <div
+                    key={item}
+                    onClick={() => {
+                      let inputUrl = (social as any)[item];
+                      if (!inputUrl.trim().match(/^(http:\/\/|https:\/\/)/)) {
+                        // Prefix with https:// if no protocol is found
+                        inputUrl = "https://" + inputUrl;
+                      }
+                      window.open(inputUrl, "_blank");
+                    }}
+                  >
+                    {getIconByFieldKey(item)}
+                    <div />
+                  </div>
+                </FadeInMotionV2>
+              )
+            );
+          })}
+        </div>
+      </div>
+    </FadeInMotionV2>
+  );
+};
+
+export default FragmentContactInfo;

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

@@ -0,0 +1,17 @@
+const IconAddress = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M9.6875 13.6719C9.78195 13.7259 9.88886 13.7543 9.99766 13.7543C10.1065 13.7543 10.2134 13.7259 10.3078 13.6719C10.4992 13.5617 14.9953 10.9375 14.9953 6.25392C14.956 4.95494 14.4125 3.72228 13.48 2.81715C12.5474 1.91202 11.2991 1.40554 9.99955 1.40503C8.69997 1.40452 7.45126 1.91003 6.518 2.81443C5.58475 3.71883 5.04029 4.95106 5 6.25001C5 10.9375 9.49844 13.5578 9.6875 13.6719ZM10 4.37501C10.3708 4.37501 10.7334 4.48498 11.0417 4.69101C11.35 4.89704 11.5904 5.18987 11.7323 5.53248C11.8742 5.87509 11.9113 6.25209 11.839 6.61581C11.7666 6.97952 11.588 7.31362 11.3258 7.57584C11.0636 7.83806 10.7295 8.01664 10.3658 8.08899C10.0021 8.16133 9.62508 8.1242 9.28247 7.98229C8.93986 7.84037 8.64702 7.60005 8.44099 7.29171C8.23497 6.98337 8.125 6.62085 8.125 6.25001C8.125 5.75273 8.32254 5.27582 8.67417 4.92419C9.02581 4.57256 9.50272 4.37501 10 4.37501ZM18.75 14.375C18.75 16.811 14.2414 18.125 10 18.125C5.75859 18.125 1.25 16.811 1.25 14.375C1.25 13.2352 2.28281 12.2258 4.15859 11.5336C4.31242 11.4828 4.47997 11.4937 4.62592 11.564C4.77187 11.6343 4.88481 11.7586 4.94094 11.9105C4.99707 12.0625 4.99199 12.2303 4.92679 12.3786C4.86158 12.5269 4.74134 12.6441 4.59141 12.7055C3.30156 13.1828 2.5 13.8219 2.5 14.375C2.5 15.4188 5.35313 16.875 10 16.875C14.6469 16.875 17.5 15.4188 17.5 14.375C17.5 13.8219 16.6984 13.1828 15.4086 12.7063C15.2587 12.6449 15.1384 12.5277 15.0732 12.3794C15.008 12.2311 15.0029 12.0633 15.0591 11.9113C15.1152 11.7593 15.2281 11.6351 15.3741 11.5648C15.52 11.4945 15.6876 11.4836 15.8414 11.5344C17.7172 12.2258 18.75 13.2352 18.75 14.375Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default IconAddress;

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

@@ -0,0 +1,17 @@
+const IconFacebook = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M21.75 12C21.7469 14.3829 20.8726 16.6825 19.2917 18.4656C17.7109 20.2486 15.5326 21.3921 13.1671 21.6806C13.1145 21.6866 13.0611 21.6813 13.0107 21.6651C12.9602 21.649 12.9137 21.6223 12.8743 21.5869C12.8348 21.5514 12.8034 21.508 12.782 21.4596C12.7605 21.4111 12.7496 21.3586 12.75 21.3056V14.25H15C15.1028 14.2502 15.2045 14.2293 15.2989 14.1885C15.3933 14.1478 15.4783 14.088 15.5487 14.013C15.619 13.938 15.6732 13.8494 15.7078 13.7526C15.7424 13.6558 15.7568 13.5529 15.75 13.4503C15.7334 13.2574 15.6444 13.078 15.5009 12.9481C15.3574 12.8181 15.1701 12.7474 14.9765 12.75H12.75V10.5C12.75 10.1022 12.908 9.72062 13.1893 9.43932C13.4706 9.15801 13.8521 8.99998 14.25 8.99998H15.75C15.8528 9.0002 15.9545 8.97929 16.0489 8.93853C16.1433 8.89777 16.2283 8.83804 16.2987 8.76304C16.369 8.68805 16.4232 8.59939 16.4578 8.50258C16.4924 8.40577 16.5068 8.30288 16.5 8.20029C16.4834 8.0071 16.3941 7.82739 16.2502 7.69742C16.1063 7.56745 15.9185 7.49689 15.7246 7.49998H14.25C13.4543 7.49998 12.6912 7.81605 12.1286 8.37866C11.566 8.94127 11.25 9.70433 11.25 10.5V12.75H8.99996C8.89714 12.7498 8.79538 12.7707 8.70099 12.8114C8.60659 12.8522 8.52159 12.9119 8.45126 12.9869C8.38092 13.0619 8.32676 13.1506 8.29213 13.2474C8.2575 13.3442 8.24315 13.4471 8.24996 13.5497C8.26655 13.7429 8.35579 13.9226 8.49968 14.0525C8.64357 14.1825 8.8314 14.2531 9.02527 14.25H11.25V21.3075C11.2503 21.3604 11.2394 21.4128 11.218 21.4612C11.1967 21.5096 11.1653 21.5529 11.126 21.5884C11.0866 21.6238 11.0403 21.6505 10.9899 21.6667C10.9395 21.6829 10.8863 21.6883 10.8337 21.6825C8.40498 21.3867 6.1758 20.1899 4.5874 18.3289C2.99901 16.4679 2.16716 14.0785 2.25652 11.6334C2.44402 6.57091 6.54464 2.45529 11.6109 2.25841C12.9225 2.20761 14.231 2.42187 15.4579 2.88838C16.6848 3.35489 17.8051 4.06407 18.7516 4.9735C19.6981 5.88293 20.4515 6.97393 20.9667 8.18123C21.4819 9.38854 21.7483 10.6873 21.75 12Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default IconFacebook;

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

@@ -0,0 +1,17 @@
+const IconInsta = () => {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M20.5 6.25H11.5C10.1081 6.25149 8.77358 6.80509 7.78933 7.78933C6.80509 8.77358 6.25149 10.1081 6.25 11.5V20.5C6.25149 21.8919 6.80509 23.2264 7.78933 24.2107C8.77358 25.1949 10.1081 25.7485 11.5 25.75H20.5C21.8919 25.7485 23.2264 25.1949 24.2107 24.2107C25.1949 23.2264 25.7485 21.8919 25.75 20.5V11.5C25.7485 10.1081 25.1949 8.77358 24.2107 7.78933C23.2264 6.80509 21.8919 6.25149 20.5 6.25ZM16 20.5C15.11 20.5 14.24 20.2361 13.4999 19.7416C12.7599 19.2471 12.1831 18.5443 11.8425 17.7221C11.5019 16.8998 11.4128 15.995 11.5865 15.1221C11.7601 14.2492 12.1887 13.4474 12.818 12.818C13.4474 12.1887 14.2492 11.7601 15.1221 11.5865C15.995 11.4128 16.8998 11.5019 17.7221 11.8425C18.5443 12.1831 19.2471 12.7599 19.7416 13.4999C20.2361 14.24 20.5 15.11 20.5 16C20.4988 17.1931 20.0243 18.337 19.1806 19.1806C18.337 20.0243 17.1931 20.4988 16 20.5ZM21.625 11.5C21.4025 11.5 21.185 11.434 21 11.3104C20.815 11.1868 20.6708 11.0111 20.5856 10.8055C20.5005 10.6 20.4782 10.3738 20.5216 10.1555C20.565 9.93729 20.6722 9.73684 20.8295 9.5795C20.9868 9.42217 21.1873 9.31502 21.4055 9.27162C21.6238 9.22821 21.85 9.25049 22.0555 9.33564C22.2611 9.42078 22.4368 9.56498 22.5604 9.74998C22.684 9.93499 22.75 10.1525 22.75 10.375C22.75 10.6734 22.6315 10.9595 22.4205 11.1705C22.2095 11.3815 21.9234 11.5 21.625 11.5ZM19 16C19 16.5933 18.8241 17.1734 18.4944 17.6667C18.1648 18.1601 17.6962 18.5446 17.1481 18.7716C16.5999 18.9987 15.9967 19.0581 15.4147 18.9424C14.8328 18.8266 14.2982 18.5409 13.8787 18.1213C13.4591 17.7018 13.1734 17.1672 13.0576 16.5853C12.9419 16.0033 13.0013 15.4001 13.2284 14.8519C13.4554 14.3038 13.8399 13.8352 14.3333 13.5056C14.8266 13.1759 15.4067 13 16 13C16.7956 13 17.5587 13.3161 18.1213 13.8787C18.6839 14.4413 19 15.2044 19 16Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default IconInsta;

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

@@ -0,0 +1,17 @@
+const IconLinkedin = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M20.25 2.25H3.75C3.35218 2.25 2.97064 2.40804 2.68934 2.68934C2.40804 2.97064 2.25 3.35218 2.25 3.75V20.25C2.25 20.6478 2.40804 21.0294 2.68934 21.3107C2.97064 21.592 3.35218 21.75 3.75 21.75H20.25C20.6478 21.75 21.0294 21.592 21.3107 21.3107C21.592 21.0294 21.75 20.6478 21.75 20.25V3.75C21.75 3.35218 21.592 2.97064 21.3107 2.68934C21.0294 2.40804 20.6478 2.25 20.25 2.25ZM9 16.5C9 16.6989 8.92098 16.8897 8.78033 17.0303C8.63968 17.171 8.44891 17.25 8.25 17.25C8.05109 17.25 7.86032 17.171 7.71967 17.0303C7.57902 16.8897 7.5 16.6989 7.5 16.5V10.5C7.5 10.3011 7.57902 10.1103 7.71967 9.96967C7.86032 9.82902 8.05109 9.75 8.25 9.75C8.44891 9.75 8.63968 9.82902 8.78033 9.96967C8.92098 10.1103 9 10.3011 9 10.5V16.5ZM8.25 9C8.0275 9 7.80999 8.93402 7.62498 8.8104C7.43998 8.68679 7.29578 8.51109 7.21064 8.30552C7.12549 8.09995 7.10321 7.87375 7.14662 7.65552C7.19002 7.43729 7.29717 7.23684 7.4545 7.0795C7.61184 6.92217 7.81229 6.81502 8.03052 6.77162C8.24875 6.72821 8.47495 6.75049 8.68052 6.83564C8.88609 6.92078 9.06179 7.06498 9.1854 7.24998C9.30902 7.43499 9.375 7.6525 9.375 7.875C9.375 8.17337 9.25647 8.45952 9.0455 8.6705C8.83452 8.88147 8.54837 9 8.25 9ZM17.25 16.5C17.25 16.6989 17.171 16.8897 17.0303 17.0303C16.8897 17.171 16.6989 17.25 16.5 17.25C16.3011 17.25 16.1103 17.171 15.9697 17.0303C15.829 16.8897 15.75 16.6989 15.75 16.5V13.125C15.75 12.6277 15.5525 12.1508 15.2008 11.7992C14.8492 11.4475 14.3723 11.25 13.875 11.25C13.3777 11.25 12.9008 11.4475 12.5492 11.7992C12.1975 12.1508 12 12.6277 12 13.125V16.5C12 16.6989 11.921 16.8897 11.7803 17.0303C11.6397 17.171 11.4489 17.25 11.25 17.25C11.0511 17.25 10.8603 17.171 10.7197 17.0303C10.579 16.8897 10.5 16.6989 10.5 16.5V10.5C10.5009 10.3163 10.5693 10.1393 10.692 10.0026C10.8148 9.86596 10.9834 9.7791 11.166 9.75852C11.3485 9.73794 11.5323 9.78508 11.6824 9.891C11.8325 9.99691 11.9385 10.1542 11.9803 10.3331C12.4877 9.98894 13.0792 9.78947 13.6914 9.75611C14.3036 9.72276 14.9133 9.85679 15.455 10.1438C15.9968 10.4308 16.4501 10.86 16.7664 11.3852C17.0826 11.9105 17.2498 12.5119 17.25 13.125V16.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default IconLinkedin;

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

@@ -0,0 +1,17 @@
+const IconMail = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M17.5 3.75H2.5C2.33424 3.75 2.17527 3.81585 2.05806 3.93306C1.94085 4.05027 1.875 4.20924 1.875 4.375V15C1.875 15.3315 2.0067 15.6495 2.24112 15.8839C2.47554 16.1183 2.79348 16.25 3.125 16.25H16.875C17.2065 16.25 17.5245 16.1183 17.7589 15.8839C17.9933 15.6495 18.125 15.3315 18.125 15V4.375C18.125 4.20924 18.0592 4.05027 17.9419 3.93306C17.8247 3.81585 17.6658 3.75 17.5 3.75ZM7.71172 10L3.125 14.2039V5.79609L7.71172 10ZM8.63672 10.8477L9.57422 11.7109C9.68953 11.8168 9.84035 11.8755 9.99687 11.8755C10.1534 11.8755 10.3042 11.8168 10.4195 11.7109L11.357 10.8477L15.8883 15H4.10703L8.63672 10.8477ZM12.2883 10L16.875 5.79531V14.2047L12.2883 10Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default IconMail;

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

@@ -0,0 +1,17 @@
+const IconPhone = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M18.1156 13.6781C17.9763 14.7368 17.4564 15.7085 16.6531 16.4118C15.8497 17.1151 14.8177 17.5019 13.75 17.5C7.54688 17.5 2.50001 12.4531 2.50001 6.25002C2.49809 5.18228 2.88492 4.15035 3.58824 3.34697C4.29155 2.54359 5.26326 2.0237 6.32188 1.8844C6.58958 1.85171 6.86067 1.90648 7.09468 2.04052C7.3287 2.17457 7.51309 2.3807 7.62032 2.62815L9.27032 6.31174V6.32112C9.35242 6.51054 9.38633 6.71734 9.36901 6.92305C9.3517 7.12877 9.2837 7.32699 9.1711 7.50002C9.15704 7.52112 9.14219 7.54065 9.12657 7.56018L7.50001 9.48831C8.08516 10.6774 9.32891 11.9102 10.5336 12.4969L12.4352 10.8789C12.4538 10.8632 12.4734 10.8486 12.4938 10.8352C12.6666 10.7199 12.8655 10.6495 13.0725 10.6304C13.2794 10.6113 13.4878 10.6441 13.6789 10.7258L13.6891 10.7305L17.3695 12.3797C17.6174 12.4866 17.8241 12.6708 17.9585 12.9048C18.093 13.1389 18.1481 13.4102 18.1156 13.6781Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default IconPhone;