ui-landing-page 6.1.0

package/src/components/LandingPage/common/ui-kit/organisms/BaoNgayNay2025Section/IntroSection.tsx

@@ -0,0 +1,105 @@
+import SectionFullScreen from "../../../../../LandingPage/common/SectionFullScreen";
+import { Media } from "../../../../models/general";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+import AudioPlayer from "../../moleculars/AudioPlayer";
+import { useEffect, useRef } from "react";
+import { ThemeConfig } from "../../types/base";
+import { useMedia } from "../../../../hooks";
+import { ScrollDownGuide } from "../../moleculars/ScrollDownGuide";
+import { AudioButton, AudioGenerating } from "./icons";
+
+export interface IntroData {
+  logo: Media;
+  logo_new_year: Media;
+  audio: Media;
+  greeting: any;
+}
+
+interface IntroSectionProps {
+  data: IntroData;
+  configTheme?: ThemeConfig;
+  audioUrl?: string;
+  loadingAudio?: boolean;
+}
+
+const audioId = "bao-ngay-nay-2025-intro-audio";
+
+export const IntroSection = ({
+  data,
+  configTheme,
+  audioUrl,
+  loadingAudio,
+}: IntroSectionProps) => {
+  const { logo, logo_new_year, greeting } = data;
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  const { registerMedia, play } = useMedia();
+  useEffect(() => {
+    if (audioRef.current) {
+      registerMedia({
+        id: audioId,
+        type: "audio",
+        element: audioRef.current,
+      });
+    }
+  }, []);
+
+  return (
+    <SectionFullScreen name="intro" className="h-auto">
+      {audioUrl && (
+        <AudioPlayer
+          className="w-full hidden"
+          src={audioUrl}
+          audioRef={audioRef}
+          id={audioId}
+        />
+      )}
+      <div className="flex w-full flex-col justify-center items-center h-full min-h-[100svh] pb-20 gap-16">
+        <div className="flex w-full flex-col gap-4 justify-center items-center">
+          {logo && (
+            <Image
+              src={logo.url}
+              alt="Logo"
+              className="object-contain"
+              height={50}
+            />
+          )}
+          {logo_new_year && (
+            <Image
+              src={logo_new_year.url}
+              alt="Logo New Year"
+              className="object-contain"
+              height={50}
+            />
+          )}
+        </div>
+        <p
+          className="text-center text-base font-light"
+          style={{
+            color: configTheme?.secondary_color,
+          }}
+        >
+          {greeting}
+        </p>
+        {!audioUrl || loadingAudio ? (
+          <div className="cursor-pointer animate-opacity">
+            <AudioGenerating />
+          </div>
+        ) : (
+          <div
+            className="cursor-pointer animate-opacity"
+            onClick={() => play(audioId)}
+          >
+            <AudioButton />
+          </div>
+        )}
+      </div>
+      <ScrollDownGuide
+        title="Khám phá"
+        className="text-black"
+        isVisible={true}
+        delay={0.5}
+      />
+    </SectionFullScreen>
+  );
+};

package/src/components/LandingPage/common/ui-kit/organisms/BaoNgayNay2025Section/LetterSection.tsx

@@ -0,0 +1,21 @@
+import {
+  CloseQuotesIcon,
+  OpenQuotesIcon,
+} from "../../../../../LandingPage/common/icons";
+import SectionFullScreen from "../../../../../LandingPage/common/SectionFullScreen";
+
+interface LetterSectionProps {
+  data: any;
+}
+
+export const LetterSection = ({ data }: LetterSectionProps) => {
+  return (
+    <SectionFullScreen name="letter" className="h-auto py-10 px-4">
+      {!!data && <OpenQuotesIcon className="w-8 h-8" />}
+      <div className="flex w-full py-6">
+        <p className="font-light text-base">{data}</p>
+      </div>
+      {!!data && <CloseQuotesIcon className="w-8 h-8 ml-auto" />}
+    </SectionFullScreen>
+  );
+};

package/src/components/LandingPage/common/ui-kit/organisms/BaoNgayNay2025Section/NgayNayIcon.tsx

@@ -0,0 +1,31 @@
+export const NgayNayIcon = () => (
+  <svg
+    width="79"
+    height="24"
+    viewBox="0 0 79 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <rect width="79" height="24" fill="url(#pattern0_1802_4450)" />
+    <defs>
+      <pattern
+        id="pattern0_1802_4450"
+        patternContentUnits="objectBoundingBox"
+        width="1"
+        height="1"
+      >
+        <use
+          xlinkHref="#image0_1802_4450"
+          transform="matrix(0.00344828 0 0 0.0113506 0 -0.0107759)"
+        />
+      </pattern>
+      <image
+        id="image0_1802_4450"
+        width="290"
+        height="90"
+        xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASIAAABaCAYAAAAcuFuuAAAAAXNSR0IArs4c6QAAIABJREFUeF7tXU2oJcd1rrp3CMz7WRiJiTYh4GCLSCKLLAyWMTbGSBgi7EQ2OCKJtVBkhDaSbFAiJysnYwfsKJsgpNFCdowSsCeJUMAoBOHB2AItEhCWhCxkMNqMBylazPvBZt7tzFc+p3O6b1VX1znV97373rub93O7q6vr56vv/Ht3+jm0Ebhy5crW9vb2DQcHB99yzr3fObc10JlXnHPnt7a2/vPQOnz64NMRmGgE/ETtnjY7cgQARhsbG3c55/7aOfc7A7ftOude8d4/sru7+9Nz587tjHzE6WWnI3DkR+BEABE2+9iZOIwNvru7+/vOuceapvlQhhUBfO7b29v78WH0c+wYnl53OgKlI3CsgYgBaHNz84NN03wMg9M0zY3OuXNioK7gd+/9O865V+fz+Rtnz579eelAWq/f39//7cVicUPTNDcPteW9f+OUEVlH+/T+ozYCfmdn52Flp17NncwAAgkCpc+Zz+f/WgoK/MzFYnG39/4jBDpgRGNYURB3vPcvLxaL97z33829Y8k7MTCSKHZTyb2aa733lyRo7ezs/DG1o3n2Zefcu0M6KiFmatpH17LPwEUA7YODg9ubprkNBwgOl7E/Z7PZxRyQ03v8OR9cY9vGdf0xj80b9R8Hzq2aeR15TzhUce3BwcEfjbwndtllHH6bm5v/HfuSxup2w7tcns/nPwYQ/UDTyaZp3tzf3394SEQQA/5Y6TNo8p8aCwRiQMAqPuG9/4BQAL+v4Pm/cs79wjm3471/rWmaH2FxzWazd0tBsf/MnnK687Vc7Lm+EqsbvIzau4hJ5n5fvXr1b2ez2c1j7u83jvYWi8Ub29vbX0k9GO939uzZx2nsc6+x9D2N9TtbW1uPDz0Dh5s4aEqf8+TQxmKgWywW39SMk3Puyb29veeH9sXOzs4dYOh0UJb2f9T1vG4BRoZ3gQSB9f+Tra2tf04B0dmzZ/9S+y68zwFEv7xujfmNUW/3/xeFzTqfzz969erVd1ODzieXc+4fnXMlYIAnveecezA3qbhQsKAHaBMEMazS53Xn3AWIbWNBMfVcAcwvXNcJYQwx7vyztLu4Dx9uQ/4e/tc0zTfAAPg0293d/V7TNLc4536X7i3pA+bjla2trY9n3u+HzrnfKn0ZXO+9v5gDO1wHZue9v7tpmrtLn9M0zXkcLEPMjuYJ7/GbhXsDY/TVvb29CxkgAjP9onPuw4Xtl7zuJefcc+jLxsbGy2QIKd3neN4lgFHqAKKxgtVX8y5Yf2855x4CEP2vc25TMSBo5K4hnYoRiN6+zsIfzQGReIa0OmkGPDXJeE9YrCC2PZ5bZEMrpQdEJYtKc20AIrnpIIbj5NJsYDoYLu/t7X0otsmEGP7vWiAaAxIERHd47+/XvAfADhtriHXRPH1fsXmPFBAxgJDUA/cQzQHxetM0/5YBIs1YYSqxRr89m82esAARGnoETCF1uhiBKMuIBMX9Q8WiKd3cjN4XsLlTMvNQo7COkTL62dKHK67/lff++aZpnuL5AZMgvUqxqEzM7a35fP6pmIgq9EMa9hsWpXPu3pzYxCK4Foicc9hYOOGDDij2WQEQQS+L5zMzVUxv9pb2Pa9evYo1C1WFRlJIjlfv8ClljzznfwFdsAmI6ARLyo9GIBpkRNQ2lHCfVtLC7EzGLqAT9WKOqcXuBXA6525wzq0SiC6yfE9AiMX4dQUDxiu97b3/TAyEhYIXzLRUDEfb4eCROq3UBGEcDUCEd3h5d3f33oxKQXPKZxmRGCeAkYahjF23EohYN1gsytKcv7y5ufnZ/oMFEP2Xdc5NQJST6Y1AlGRE4vT9O4UcP3Yik9dpwYiACJaSvzd3It8AGMZLUJ4yEBnnIwBRyo+JFNVQWj6gXJSve+//JMc0KzCiMC7z+fwLKePDlIyowjjlZ/7XVwTABYAYmTDm/Gcx3aBQNTxvOdhgxTQBEb9s6nQxLvwoIxLWsX9YgTiWmvSwmEu9nI0LYuwC5OtaUVLqQ4gVfUcpFgweDpubm8/AYqkAoiBGIoQlB0R4OSMjQhMwQECpHLVuTQlEaPvatWv3e++/rNy8Y9dBa1wwqgTQTlQ3aGw37KG9vb0/ADO1AlF42dTpYgSi6KIXeqGpJzI34QDKx0t8nVYMRLzhLkSACIxMY+VIih5W6wkU62fOnHkq5yJRgRExs0saHlYARH/lvf+ziYEoHEQwLlA8I/yW/kVzSKCdmG7QyPDhp/cikxgrEIWXTVFqIxAtMSJBa+GoqFG85cCl5PtiVgSrFczn3vv7Sh5kuHYJOOhE1m6E95qmeWJ/f/9rff2KYfOyfuirY0G9AiPCe1xM+cEZ3iWrIwKLWCwWcDOZeg2EvQkAgYsNORZrmXBUbDYerJ21ZAWi9tSNmbWNQNRhREIxhtP8sEFIYsMjY61owqFQozTU4FGYbMk0hJJfo7AOIlRfFK+ktPz8GD+tSoyo3aQxBjYlEFUA0ZJ1EIwL0MEAiCieEQHWpe4tbTvyADIerB3xuAYQJU8XIxB1GJFgQ386sbWhZKKDE17OL4UbBBCRB+qqgLT102DdixE0oopeo9JyEBRik1FpMycV7xMDkdoZs2hh/vpiHOYB4CGeGXRTUTWJ4WBdkqSqAJGU9eRgGYGo8/JCpACb0JiHZdfQNn80zpyyrUHPU3mh0Z9DsQ5DkO/TcBiLABEcD0t9P3JABI/x0k9HaZm7uRIj4k0adRc4ZkAUohNITwR3Fw0TTgKR8mBdWkc1gCh5ohmBqGVEWDVCxkXOnlJq2QehVxArN5vN3kepN0o3pGwvaw4WjAiOZdBvTenI1tnLACIE70qnU9rM/6FUWL/dD+0x+kcN6msmZERBbJUhMPysiYEI/kPwfVsFK251Vni3jY0NBKdqFNZR3RcdrJr1vOTLVQOIOhRQypBGIGpRmNAcg6j12uU1Fpy8zpw58zdQ4Il24Y9kcS6DvPvQkI6DRCKteTtHFJLfs8+TDFoUwakadgk90YdlELBRaRmsj2NDZyoyIvY8bx0+VwFEJJ4jEmAVh1FHIWwB2L5y37iel6SIWkAEVhBctaXyzwhELSMSqUQ0tLLdpDFHRGF2/j2lyMfR+oObqcJzVGAU02FV8O69U8YYVlBaPlSSAreSjqj1s+qDoGXD5oJeDSxCM/9BR8jWQcGES9f6kpHC4q5BLP1FeThWA6KYH4gRiFpGJNI+mHyHaFO2sVeYWcPkyIXxdtM0/xQza/dOWW2UsmYR8j0hClv6EgnPdIRjaE7me2RMmDGY9hIcQ8c4Mor5ut0Q4tGZtxgbO05AJK2cBhazpH4gZ0aVP1osNKwaELGnsVxQRiBqGRFk26ZpPmd0AgunA8QyydrE5CBNq1Y8C85Zs9nsSymHPDFxq9ANZJXpxv50gp0NSviOU9tYtK3EiPC4Jasi/jklEFEqFstaGztM4f1kOIvB8hy8q6VTI+kFEd1gPsjQ0VpAhLaWzKFGIGoZUSUgChakGBBRMi+N0o0XxaCHOS4yhlaULL7+tdHoaQsAyxPN0s6YSPj+y1TUEYWmYzq0qYCoEvsuWQsdp0bob5UAEtQPbKQgxTcXfCgFIhw+n+xnyawJRCGNg4yeNgLRyhhRBSAa9IXpxceVTlzJwotd2wY/9r/U6itIxn8N4p6B7hf5YMm+V2REaHZJdD1GQBQIAjs1AogMIlULIARESGNSmkFgCRh5XmsCEdrsUHYjEK0TI2odtFL5kClftFYnYwGjISBSpYeQCnCj0hLZEpNpZGIvXZsRxVjZVEBkaNcy/x0rp8Fo0rYDizOlhy11Lk66ulQFInlSCllba3ZfN0b0C3ny9FcOFSnQJsOSDpilzpxBbOQo5x6z0CZKa82vRpGzo/Qeu9sqM6Kl8TEARjLWDABK7iKaFLQYGl4DGgfcjpVTy4Sv65tCOwREyE1e6v6RjFWsCkSU3/ZNzn53whhREogMSkLemwBl/pQq1KdI49DqnQxMD6fjYKrhFTGiJbF6KiAiNxRtKl34qnElmtI1UMvKGdoB69/Y2IBDbKkbQDKNTG0gQpTua5zNzQhEx4YRVQAiLEL+lOqYkvorYjOo81aa2Kr1jBVVakv6FZSfQwxyiB1VZkRBjyITvk0FROTZ/LTCOss+T9o1cI8sBWXw+wqqFzjuEhCVppJJxvfVBqLOojcC0brpiHKMCFT2TsUiZIUqL8LSyW8Vln1fHUMAbCvO1NYV5MSzCXRELPa01TcmBCJYmjTRAUG3QmOD4qAloA9rcUcXZ8gjJIGotDLIoEGnNhB1ThdjaMaxYkSG7IXBusQbtGkaVRqHVIpXg7I5OCJSbh2NriCZDygHRhMwoo4/04RABB2hJqc3+zshNhIMtsgXre/JTO+HRGlFTJjbgWX84ODgfwojEZK6Ssz3FEDUKuyMQHSsGJEViFB5NkyYLrNfUjY3xJ2F+DrycC5ND5tNIJYCo4kYUWvNETGIVZPni7CawwKi4G6BcdUyYTZGIf9W0zSlCfMRffBCqnrKJEDEAXJGIDpWjEip3Av7EQsA64eASBPmkgMiTdL7kNiKCgWWKi1H1axLgdEEjCgweXbYo3VbHYhIjNUUFwg16lA+nTJGFCXW6xe5EBa8onfkdgBEhVH8QSwbqo82BRC1pwtmFzXKlXLxsWFEBqrPQAQZn2u8q4AoleJVOFuWKlFDfJ33vrSmXOulm8tPvSKrmXxMa55WVkcdNN+T42ypGIv+haByEsvOKdLMLkW7Kx1R0c6bMEiV5jWKebDLgZ8CiILyD27cSBVhAKKVMSISm6zxP1HXdQwGAZHWfwRNQEl42Tl3U+kCoMmeIkczK1DBhkp8WwZ1BTn9EL6fiBGxUvcSWYVKlbFLSm/5LlgDVINeo+MLUQuYf4CR9760QGYQi2SObqWoCCaEcQIYFSX/7yfo68/zVEAUvDCp01CKaSwFh8GIsNE1H5Sj3kERgb5ndQVHNglE+P0ZRWK4QSCiRYmNh/cf6zDJJuXSRHVJT+8xAz+Rjkgyz58go2FtRmQwCjDAPWgBon5RSZGBoWRvQhy/Quy8BFCDaDlUpWUqIMLgBd8Fqmxa8rK8HlfCiOiERXWNG2ez2c1QCkMOH/sT97MimROuyeRwWsVgb1MGs6lhLEM+mUx2gO9RtspSZ7kx+CGvGaylPqaxqRgROeT+COlcJgKiIp2MGAscyp+n+cdhUVqgcykoW6zLEgdL7EkcutBXlriRZJPfTQZEbOojMNKmpwz5dqeMvsdkY1LGbIDcNbESxkIHoxkDfiSDOv7WtJNNZ7uqxP45XUFujKdkRFwwFIB9cHCgAY2ojqgCKw5iP+mItJWCl/I+KZgw1hE+u4XMuVNxODbHkwERny4IalSKZitjRLnFb/leSYH7j7yTldUGIIoWyeMHIVQDsUNN0xRZZErHJqcrGNPehIyI9V7nnXOaSsJJIKLwjlKTNw9HACL80TQNVB3Pjhmn3jXR2mQryI8UfKD6edP7/Z8SiAIFNwDRSnREigktukUAkUa3w88KQEQLUbOYO/lkYsxtws0txyuanK5kQCdmROgKuyXA36dU/zUVEAXXgsVicYMFiOD31U/JawiAHTttQT8UK1IgG5gSiIK36mKxeENZ5/tYMCJSUmrLuGCu2vQLtBA1QIR2klY9fIl+GupejV2UWV3BmIYmBM0A2Eq3hDDGsZzVWk9mGov2EMHfBwcHYESask0BYGWeaLRHWSGmrCoSCIXMU7Zq0SycLvA5aJqm1POWJ3UlOqIxi197TYUN3gKIMY3EYLS7MOdqU5XkhojFnif7myF3o/x+BYwoKHbhPFiLEVFwsVakCtbJXg37otAMGr/oITAhqIdDdGxw85SMKHSCtOylFBcvcWwY0bVr17S15sM4VPD4bUU8WX2jDwCU0uOLhRaRsTgySlcwprGJNw+ACJYhfErr3UUZUQUgegn5pHAQESuG8re0tl+0wAP6RvGCRX5BY+apnzN76J4pgYhZDX6WOLxxfyfVEdWylMnBjeleiBFpgaij28GzlGZl7uZgIjJs8ApFClLrbZSuILfAV8CI+CTHz9LNHgUiQ7Q776GQ2C5spM3NDyrivEI7/dpk+KdIUaMJPclNV7aoBDcwNRDlOjr0/aSMiE7/4Klq6WQ7kN6/g7puCJqUgIQT5/rJ8Jgyar6TOoE2obZCK7raSeXbf286uRHZbaoflxjPUbqCMXMxMSMa04XUNSkg0mbCDADCJd2tQJQqDS+yh2okl8E9nCuztQ5ANAUjOs/encJaUMWHKOVZbUhWzifzS/P5/AuIyxJAVBpkGuY7Vk9KriJj/qihBTlaV5BDgRUxolw3VgpEzGTwUENAbtDRJVIG30FZFEq8pceMUVCQwxcwJi3IBk4SI+qUEyL/CY0SPTYBmOTdWJmU2kBkSSeSAyJDAGxuUQZmFwuByd0Y+34NGRE8929RBKvi9TtxYoYA6mRisolEcg4BGizFfuIZUWVHruSJb0wu3yn1a8gdxIzoaVgxZdXX/kY3LPQhTBmtK8gB05oyooe99x9ROot2lMyGmLVk1oOJRPKsN/8pIzp79uerAKIKDKOjYBRApEo5K8sApTa8Mj1EDj+yJblzDcjv140RGcNnOmZ3AxCxvmmpuKHwc9KED6Wmbinif2iOj7JoNqmOaMVApJ3gTvkVYeEorSfFa2ApL01/cVR4Rmy9jdYV5ABpHRmR0XsZY3dhb2/vAvQs4qDQ6HNC8CzSnCQCsxEAW+qykJqy7Fo7ZUQrYkRC+asN71gCoo2NDU2FTQlEbbmn2AoSISk1i0GGtLL9DZADndT3a8iILkA0K016T+/f8YgW7iCaBGvJTJ2GwovRaRrDvtcFiNaeERkd2QKVliEDFbyf23pkGdEMvirfUW6cftNFuoIcOK0bIxIMRpt4L4A4x4gZ9YQh0yPcTPrZMa1if3/eyDByqR/blppfi2iGlyp1+MqtM/l9bT+imNVMuzhim22pnJBQApbmj+H2l04wQ0FD1hG8uLu7e++QObWynmgwaXrJguBrDYyI01igqSnW7pIfkdHlorU2cikoowNiMkFZhUNOTmUAPOS27pewmgKIMOgaj+mxa2/tGZHRo5YZUYi3Y+CwAhHiqNgvKcOKnqmUKM2cCE3208iIgpsFtTc2E+XY9brEYPEPo3IZTXTyCE0MRNA71RDJQ2rbXKBrDdGMAxjfT2Vwp5jUtWdE5J/xMUWOYZ6jpcqYBG7IlVNUZI8aHC0mGS097Ror1RWM2fUGRsQZBvEYzfjlurfEiIQfWVEtstR8CeaiKks0lKnT6PPGY8MxpveV6AS1olkwK3vvP0BRylNNau3o+9azegKHxiXRzFDatwWifllmo18S2o0myOrvMDAvZE1QOuG1zZXqCnI73cCIAhvCutWU5Mn1i75fAiLjwRFN8UplvjXpl8NBhMKYMZGpkkg++IzaolkAIjQ64aROyohw4iNHNZdoKUwc3x/PqEMjgMjgyBZ1QDNS/dbbNadErMDmeIzuKaHoYza8gREFKySeocyRletezLiAclpaBhsKDUidntE3bUnn1H8hYsIoEaUlF2GMhxLlxwbRwojChIIRWU/NxOxOqiOiE/826j+YHcRMbeL4KBAJsNOkX4265BuBKDCiWKa+/hxUULSjyWqBrtw/AyPi/qAoJD4a0aYIiHCxUadXG4iyjLiCSB7AOGaZGxo8LRAF7TvSwDZNc5tBBzLUt0kZkXyw4YTlZpJARP4jWv1ASIjVdz6zVI0lIGod5FITIE5erTNm9vTN7erU94b5CsAogKh2tPnk7hYkPsG9oqT6hhzKqFMjX1BBJF/Sa46ZZy0QBdFsNps9QTl0tQ57Q32cghE9jZI/0oeCHfiMieNTQARHNrAtLRDBwoNsgf0P2JvWA3Z0uIXQb2g2rEpXkFu0RkaEPt1F+b+RmqVW0DN3ewmIqMy01hOek7T9LDIuJeV85O2DFi2jSJ6MuczNqwmIsKkph25pueJcv/B9bUYUTdw+JRCRQvwWg7zN5mbOGIhxQdoSuE3go/GFGQ1EQjF+ZICIxB1OW1Eq8rZAtFgs7vbe104GVhuI2O8JmU7lh9eAZv4HfXyMQIQ+BmNIv9BobsObgAglbCljHLxwNYv10BkRLWxrKZ3oSVABiHLzp/l+dDDiUQSiGowI6XINpdBzaxb5d9q4MEO9e83cjr0nmSDPCEStOL5yIEKiJmNO5tTgrTUjEh61FiX42IVVcl2b8S+XrOooApGBETG7CI52lPtZq2dJjfcSI7LkjyqZ1JJrh/JSGYHo8BgRZYyzlMsZmtTafkQr0xEREJXWky9ZT9prg29KLFNfv8GjCEQVGFEAIrzrwcHBt5xzqmyXicGPKauR2rfmM7Tz3t7HVZhj1VSMQHR4jAhvZ3CwGhrUtWZEEyUYMy9CrqyQAyJhndGK3ZMoqw2MCLe27gTILU5spVa8IbffEc3IwqlVLNeY76U2CIiiCfIqANGSY++YlzDriPAQ0hPVzGXSLhrEWW1sbNxeo7oEJqBvNaOFXV1HRGyi9piMmdPcNVH/pNhNx5kRAYjIomVx3usPW4cRHdXDCGE3KHy6vb39lf4LVAAiVUpgMxBxsqYJkH9tGVEPnLVOkjlA0X4/2sR6FIHIwIg6OiIAEZi80W0jCUT4wlgQUzu/Y+5D0rJoXqoKQHQ4jKiXNa6mX8ba+hGRuArX/incGsYstNw1g+Wn+eajCES1dETwJRNJ4+/LDdjI71tGJA4jbYnwkY9UXRYqMG9ubn722DEio+NWbDTXmhFNpDdTrbrITYPetbj+GOqIOowIQFShHPggI4JKwTmn9UyvNdexdhDmc2Vra+vjEwDR4TEi1rNUymXCYzMJI4I3uIw8FqlRUWpZ4wGN/nbEHWJESOk6RTxTjQWaTBkqGz/ujKhyMjAMXYcRHeHDKGk5rSCaHZ6OCDNQIRizv8EmYUR9ICIQfdg59+maQEQMsbbnbg0QajdMLjDxKAIRzZfGs3qJEfEBWlFP1AIR6YfAiKYIf7Kug6TBogIQHS4jqp18m02tta1mCUYE9nKSgCi4+a8jENXUETGokUW2hp6oD0RT+NdZQajD4Pt5idYeiPB2xrIpOUaETIdfVsZXhbbJf+K7MhePoOe1gehxnLTOuSmyV1oXYzJ3MTd8EnREeNdK6U6kOiH4EVHEwf3WNWud6IH7o1HyGA+Kw3tM8ezRFtl+21XM99xohYyEsn+tHoP8lKC/+boFiCht6UWZA1rkALb4kyzpiMhZTlN7So5BaDeyICxBj+FEbJrm2zGfqpOkIxIqhZudcy8oNl7/lg4jqhT6lFoDyL6AjybwlcXzTj50wRC16Y2PDBDd4Zy71TmnrVohJ7bVEQl5W5MeU7YZErnv7+9/jeOsKpR76VBdBPtRfxE+YPGo5QX4qHPuXfkSJEpo04uE/iJ38fVFfH6oysJJ0BEJVlTD+bQDRIvF4ptN01gOI+wBpAA5HwFJMBZLHONSWlsei7VnRBXqeEUZEW1snFpWU2iIPAcTgEMbHiZAwxIP1DkJKgLRW/P5/FPcVx4cFFlsmuYWQ2bMUeEXRxGIauuIBCv6foUMEu3mBou/DvjIeWQCIk4V2wciiurXFm1kRtSGowip5o6madabEUFhTVHNLxkoI49Jy4jwj4phJGGxOOdedc7dQBYTqyNmDIisC3vIxIrE9tbMmJ0yNf2FflJ0RAxEJEZZdXodIGqaBpKBlhUHy1bTND/a3t6GMaXzqaCPDckNkcpHZmE4FjqiCU6XVoYlkAPVtYIGnwZyYq0K5RgQ/dCQRRF9C/mKE96vNYAom9LzpDAiY4mePosPLEPk6dImoUe7yfrxFZLcB/F8Npt9SWYsPRZWM4yc0LlYKGnYiNfdkx5lxbJQKmvTbkbE7Gr/6gARLUKra/8QEFnos2Scg7WnjiIQofPKnNVRPyJes+QFbQ3J6TMia76jHBBBNLM44b7UL7ZpZER8gH5m5YnR+sm1jJUoozoiEVjLpVlqZ4O0IlILRLPZ7N1K4mmyTn2FCrLMCh8cKvVzFIFoCh2RYPJWFlsViIai5CtU24g6NRoZ0dECokqu7R1G1GNbNcQzK/jI+ztARHm8rebgZKnmSkCE/idrjp0kHZFgRUhiZrZEwVGU1oDJuDJUJReuMjWccOfz+UelaGZkREfDfM87s1Ielmg8lLFoYU3wWQIiTCr+SfmQnzU+7JJz7rmtra3H++1UtE4+4r2/lDLhnyRGhDEmBbDFLSIwIoxpjeo2mQRmViAKrNh7/0kpRh0rRoQ33NjYsKZJXWJErB8gX6UpA0pZnzDWWSycBBWBKJjXVwFEsB6mqr4eRSCaQkfEQG8siMnirgQi02GUASJrMj/0F+vsLlmj3siIjo5oxpNKFSwsaTijjEiIDBbTaI6sAATxgQfzGItaC0SkH4IC0eTUyV7gsbzCxDjN3sBDSdTx8kcRiKbSERHAWa2R0jXE7NibSXJfA4iWxPNjw4jk6WKochqQVVrNJHKIKqSoKV5dcY0FgOd57xH2Mab9DhAZPFPb1yQgeirGVgQQwTt6LGvrg28I80CCrJj4d9J0RAJ4AfBaJsNAdNk5d5P1MMpV2/De3980TWltt/466OgJjx0jQulaY3qFwZw5IqkVTJhap7GlzQknMtSGF86OY9wQWiCCktLgmdr2B7Q8lrIEF9RyHB2i/ieREQmA1yqZWyCq4HCKKRisP1YJiDp6wmPHiAhZHzCEISQZkRD/OFJ4LHPJiWStt2lhvbY+EH3O8N6hj0NAJNiKyVdpyDx8EhlR7501jogMRJi/G733mgh2uUaTQFRhf/E6Oz+bzS6yweIwGdEvFfQ+0Pq+e3hffKLkYNrUHaOyCAoxDZNuYUYhwJAdvOh0LMkn8zaU1bCYGZlgUCI2TfONM2fOPCVNqzy+tYCIPHejSdQQajHwAAAB9klEQVQFI9IGg46KZ8udDP3vjTqiJZ1Iv31sREOMWAAigNBsNgMzNotN3vs3YlbNikD0tPe+TY1zmIzoB865c6ULoh/FHrtfiGeo/176uYKoY6nRTzWAxcmFHikY9E7n3NjqGa2FSpqye6cjlNa5TwAxEs3AiCAyaj949+e4dHFsM4rA2uK54/agH0qVlWEgok15o+ZFUCkil2qktF2el8ViAbatGeOHUHI6BvDoSy99bHH3nHNPQj9E61DTP/nMZF+FagLSgPqDWDYJRCI/01J828iHXPHeP1LsWQ3fiZEP6FzmvX9R5vWJtcE0TwN0aA86krEvJJjRrVigWAhk9eLcPbKLu/THDiIGAKoAIQl6DG4IhpzNZsFytlgs3kv9ju+x6dhqRs/XDG3YD/3+9BvihagdW2oPz3knpqzG98wKccLTcwCQAL4xP6HsfyeXBVIzQLxZeIwxJ5gbWjPR3/k5uTXF6wipVjR9w6aGfpHBSNOG7Cs89WOgSXODen+f4Pfv/xwzHjiM5AHMejJ+/9TYDrzXFTB5ZIzIlTSXbXjLQJXciwku6VhJ2/JaPAd/w7ubJ4kWLKwY+ATwYTaQ2/Dcb26Xw03QkPyd/9b2+/S+8hGQayr1e0B1WnurWoPlb6K/I7Y+5Tv3f899xz0ZGk99b9N3/h/qzJTP5MzbHQAAAABJRU5ErkJggg=="
+      />
+    </defs>
+  </svg>
+);

package/src/components/LandingPage/common/ui-kit/organisms/BaoNgayNay2025Section/UploadImage.tsx

@@ -0,0 +1,67 @@
+import { Camera, Images, Spinner } from "@phosphor-icons/react";
+import { ChangeEvent, useRef, useState } from "react";
+
+export const UploadImage = ({
+  handleSetImage,
+}: {
+  currentImage?: string;
+  handleSetImage: (file: string) => void;
+}) => {
+  const inputFileRef = useRef<HTMLInputElement>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
+    const fileList = e.target.files;
+
+    if (!fileList) return;
+    setIsLoading(true);
+
+    const file = fileList[0]!;
+    const imageUrl = URL.createObjectURL(file);
+    handleSetImage(imageUrl);
+    setIsLoading(false);
+  };
+
+  const handleClickUpload = (isCapture: boolean) => {
+    if (!inputFileRef.current) return;
+    if (isCapture) {
+      inputFileRef.current.capture = "environment";
+    } else if (inputFileRef.current.capture) {
+      inputFileRef.current.removeAttribute("capture");
+    }
+    inputFileRef.current.click();
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex w-full gap-2 text-black items-center justify-center">
+        <Spinner size={24} className="!animate-spin duration-1000" />
+        <span className="text-sm">Đang xử lý ...</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex w-full gap-2">
+      <input
+        type="file"
+        accept="image/*"
+        hidden
+        onChange={handleFileChange}
+        ref={inputFileRef}
+      />
+      <button
+        className="bg-[#F0F0F0] text-black py-2.5 justify-center whitespace-nowrap px-4 text-sm rounded-md w-1/2 flex items-center gap-2"
+        onClick={() => handleClickUpload(true)}
+      >
+        <Camera className="flex-shrink-0" size={20} /> Chụp ảnh
+      </button>
+      <button
+        className="bg-[#F0F0F0] text-black py-2.5 justify-center whitespace-nowrap px-4 text-sm rounded-md w-1/2 flex items-center gap-2"
+        onClick={() => handleClickUpload(false)}
+      >
+        <Images className="flex-shrink-0" size={20} /> Chọn từ thư viện
+      </button>
+    </div>
+  );
+};