ui-landing-page 6.1.0

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

@@ -0,0 +1,383 @@
+import { ArrowUpIcon } from "@phosphor-icons/react";
+import { useLanguage } from "./hook/useLanguage";
+import LanguageSwitcher from "./components/LanguageSwitcher";
+import { useRef } from "react";
+import { motion } from "framer-motion";
+
+const ContentTheme5 = () => {
+  const { t, language } = useLanguage();
+  const ref = useRef<HTMLDivElement>(null);
+
+  const scrollToAbout = () => {
+    const aboutSection = document.getElementById("about");
+    if (aboutSection) {
+      aboutSection.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
+  return (
+    <motion.div
+      ref={ref}
+      className="relative overflow-y-auto h-screen text-black bg-white"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 1 }}
+    >
+      <div className=" h-full min-h-screen font-roboto leading-5">
+        <motion.section
+          id="background"
+          className="relative"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 1 }}
+        >
+          <motion.img
+            src="https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/theme-5/background.webp"
+            className="w-full h-full object-cover"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 1 }}
+          />
+          <motion.div
+            className="absolute bottom-0 left-0 w-auto h-[71%]"
+            initial={{ opacity: 0, x: -50 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.8, delay: 0.3 }}
+          >
+            <img
+              src="https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/theme-5/anh-1.webp"
+              className=" w-full h-full object-cover"
+            />
+          </motion.div>
+          <motion.div
+            className="absolute bottom-0 right-0 text-white w-full h-full"
+            initial={{ opacity: 0, x: 50 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.8, delay: 0.5 }}
+          >
+            <div className="flex flex-col items-end justify-start pr-10 pt-10">
+              <motion.h2
+                className="text-[40px] font-bold text-right leading-relaxed py-2"
+                style={{ fontFamily: "var(--font-russo-one)" }}
+                initial={{ opacity: 0, y: 30 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8, delay: 0.7 }}
+              >
+                {t("header.name")}
+              </motion.h2>
+              <motion.p
+                className="text-sm max-w-[178px] text-right pb-4 whitespace-pre-wrap"
+                style={{ fontFamily: "var(--font-russo-one)" }}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: 0.9 }}
+              >
+                {`${t("header.candidacy")}`}
+              </motion.p>
+              <motion.div
+                onClick={scrollToAbout}
+                initial={{ opacity: 0, scale: 0.8 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ duration: 0.8, delay: 1.3 }}
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+              >
+                <img
+                  src={`https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/theme-5/button-${language}.webp`}
+                  className="w-auto h-[21px] object-cover"
+                />
+              </motion.div>
+            </div>
+          </motion.div>
+        </motion.section>
+        {/* About Section */}
+        <motion.section
+          id="about"
+          className="py-2 bg-white"
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.5 }}
+        >
+          <div className="container mx-auto px-6">
+            <motion.div
+              className="flex items-end gap-4 w-full mb-4"
+              initial={{ opacity: 0, x: -30 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.8, delay: 0.7 }}
+            >
+              <h2 className="text-4xl italic w-full">{t("about.title")}</h2>
+              <div className="w-full h-[1px] bg-black mb-2"></div>
+            </motion.div>
+            <div className="flex items-start gap-2">
+              <motion.div
+                className="flex-1"
+                initial={{ opacity: 0, x: -30 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.8, delay: 0.9 }}
+              >
+                <motion.p
+                  className="text-2xl font-bold"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.6, delay: 1.1 }}
+                >
+                  {t("about.subtitle")}
+                </motion.p>
+                <motion.p
+                  className="text-4xl font-bold"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.6, delay: 1.3 }}
+                >
+                  {t("about.name")}
+                </motion.p>
+                <motion.p
+                  className="text-sm leading-relaxed"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.6, delay: 1.5 }}
+                >
+                  {t("about.description")}
+                </motion.p>
+              </motion.div>
+              <motion.div
+                className="flex-shrink-0 w-1/3"
+                initial={{ opacity: 0, x: 30 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.8, delay: 1.1 }}
+              >
+                <img
+                  src="https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/theme-5/anh-2.webp"
+                  alt={t("about.subtitle")}
+                  className="w-full h-auto object-cover"
+                />
+              </motion.div>
+            </div>
+          </div>
+        </motion.section>
+
+        {/* Education Section */}
+        <motion.section
+          id="education"
+          className="py-2"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 1, delay: 0.5 }}
+        >
+          <motion.img
+            src="https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/theme-5/anh-3.webp"
+            className="w-full h-full object-cover"
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.8, delay: 0.7 }}
+          />
+          <motion.div
+            className="container bg-[#EB963CB8]"
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.9 }}
+          >
+            <div className="p-5">
+              <motion.p
+                className="text-sm text-center"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.6, delay: 1.1 }}
+              >
+                {t("education.description")}
+              </motion.p>
+            </div>
+          </motion.div>
+        </motion.section>
+
+        {/* Career Section */}
+        <motion.section
+          id="career"
+          className="py-2 bg-white"
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.5 }}
+        >
+          <div className="container mx-auto px-6">
+            <div className="flex items-start justify-between gap-6">
+              <motion.div
+                className="flex-shrink-0 w-[40%]"
+                initial={{ opacity: 0, x: -30 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.8, delay: 0.7 }}
+              >
+                <img
+                  src="https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/theme-5/anh-4.webp"
+                  alt={t("about.subtitle")}
+                  className="w-full h-auto object-cover"
+                />
+              </motion.div>
+              <motion.div
+                className="flex-1"
+                initial={{ opacity: 0, x: 30 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.8, delay: 0.9 }}
+              >
+                <motion.p
+                  className="text-sm mt-4"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.6, delay: 1.1 }}
+                >
+                  {t("career.description")} <span className="text-5xl font-bold">{t("career.startYear")}</span>
+                  {t("career.text-2")} <span className="text-4xl font-extrabold">{t("career.organization")}</span>
+                  {language === "fr" && " sur la scène internationale"}
+                </motion.p>
+              </motion.div>
+            </div>
+
+            <motion.img
+              src="https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/theme-5/anh-5.webp"
+              alt={t("about.subtitle")}
+              className="w-full h-auto object-cover py-4"
+              initial={{ opacity: 0, y: 30 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 1.3 }}
+            />
+          </div>
+        </motion.section>
+
+        <motion.section
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 1, delay: 0.5 }}
+        >
+          <motion.img
+            src="https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/theme-5/anh-6.webp"
+            alt="International Engagement"
+            className="w-full h-full object-cover rounded-lg mb-4"
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.8, delay: 0.7 }}
+          />
+          <div className="px-6">
+            <motion.div
+              className="mb-4"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.9 }}
+            >
+              <p className="text-sm leading-5 text-justify">{t("career.currentRole")}</p>
+            </motion.div>
+            <div className="flex items-start gap-2">
+              <motion.div
+                className="flex-1"
+                initial={{ opacity: 0, x: -30 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.8, delay: 1.1 }}
+              >
+                <p className="text-sm leading-5 text-justify">{t("career.previousRoles1")}</p>
+              </motion.div>
+              <motion.div
+                className="flex-shrink-0 w-[50%]"
+                initial={{ opacity: 0, x: 30 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.8, delay: 1.3 }}
+              >
+                <img
+                  src="https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/theme-5/anh-7.webp"
+                  alt={t("about.subtitle")}
+                  className="w-full h-auto object-cover"
+                />
+              </motion.div>
+            </div>
+
+            <motion.p
+              className="text-sm leading-5 text-justify py-4"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 1.5 }}
+            >
+              {t("career.previousRoles2")}
+            </motion.p>
+
+            <div className="flex items-start gap-4">
+              <motion.div
+                className="flex-shrink-0 w-[55%]"
+                initial={{ opacity: 0, x: -30 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.8, delay: 1.7 }}
+              >
+                <img
+                  src="https://s3-sgn10.fptcloud.com/nomion-assets/Qua-tang-quoc-hoi/theme-5/anh-8.webp"
+                  alt={t("about.subtitle")}
+                  className="w-full h-auto object-cover"
+                />
+              </motion.div>
+              <motion.div
+                className="flex-1"
+                initial={{ opacity: 0, x: 30 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.8, delay: 1.9 }}
+              >
+                <p className="text-sm mt-4 leading-5">
+                  <motion.p
+                    className="text-6xl font-semibold italic text-shadow-lg mb-2"
+                    style={{ textShadow: "0 4px 4px rgba(0, 0, 0, 0.25)" }}
+                    initial={{ opacity: 0, scale: 0.8 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: 0.8, delay: 2.1 }}
+                  >
+                    {t("career.she")}
+                  </motion.p>
+                  <motion.span
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6, delay: 2.3 }}
+                  >
+                    {t("career.previousRoles3")}
+                  </motion.span>
+                  <motion.p
+                    className="text-4xl font-bold py-2 w-5"
+                    initial={{ opacity: 0, scale: 0.8 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: 0.8, delay: 2.5 }}
+                  >
+                    {t("career.ipu")}
+                  </motion.p>
+                </p>
+              </motion.div>
+            </div>
+
+            <motion.p
+              className="text-sm leading-5 text-justify py-4 pb-10 whitespace-pre-line"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 2.7 }}
+            >
+              {t("internationalEngagement.description")}
+            </motion.p>
+          </div>
+        </motion.section>
+      </div>
+      {/* Language Switcher */}
+      <motion.div
+        className="fixed top-4 right-10 z-50"
+        initial={{ opacity: 0, x: 50 }}
+        animate={{ opacity: 1, x: 0 }}
+        transition={{ duration: 0.8, delay: 1.0 }}
+      >
+        <LanguageSwitcher />
+      </motion.div>
+      <motion.button
+        className="fixed bottom-5 right-5 z-50 w-9 h-9 rounded-full p-[4px] flex items-center justify-center bg-[#C8172B] text-white hover:bg-[#A0121F] transition-colors"
+        onClick={() => {
+          ref.current?.scrollTo({ top: 0, behavior: "smooth" });
+        }}
+        initial={{ opacity: 0, scale: 0.8 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.8, delay: 1.5 }}
+        whileTap={{ scale: 0.9 }}
+      >
+        <ArrowUpIcon className="text-2xl" />
+      </motion.button>
+    </motion.div>
+  );
+};
+
+export default ContentTheme5;

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

@@ -0,0 +1,94 @@
+import { Drawer } from "antd";
+import ContentTheme12 from "./ContentTheme12";
+import ContentTheme3 from "./ContentTheme3";
+import { ArrowLeftIcon, ArrowUpIcon } from "@phosphor-icons/react";
+import { cn } from "@phygitallabs/helpers";
+import ContentTheme4 from "./ContentTheme4";
+
+interface InforSectionProps {
+  open: boolean;
+  onClose: () => void;
+  theme: number;
+}
+
+const InforSection = ({ open, onClose, theme }: InforSectionProps) => {
+  const renderThemeLayout = () => {
+    switch (theme) {
+      case 1:
+      case 2:
+        return <ContentTheme12 />;
+      case 3:
+        return <ContentTheme3 />;
+      case 4:
+        return <ContentTheme4 />;
+      default:
+        return <ContentTheme12 />;
+    }
+  };
+
+  const getArrowThemeColor = () => {
+    switch (theme) {
+      case 1:
+      case 2:
+        return "text-[#C8172B]";
+      case 3:
+        return "text-[#32463C]";
+      case 4:
+        return "text-white";
+      default:
+        return "text-[#C8172B]";
+    }
+  };
+
+  return (
+    <Drawer
+      placement="right"
+      onClose={onClose}
+      open={open}
+      width="100%"
+      className="quoc-hoi-drawer"
+      style={{ zIndex: 1000 }}
+      styles={{
+        body: {
+          padding: 0,
+          background: "#FFFDE8",
+          minHeight: "100vh",
+        },
+        header: null,
+      }}
+      headerStyle={{
+        display: "none",
+      }}
+    >
+      <button
+        onClick={onClose}
+        className="absolute top-0 left-0 z-50 w-fit h-fit"
+      >
+        <ArrowLeftIcon className={cn("text-2xl ml-4 mt-4", getArrowThemeColor())} />
+      </button>
+      {/* <div> */}
+      {renderThemeLayout()}
+      <button
+        className={cn(
+          "fixed bottom-5 right-5 z-50 w-9 h-9 rounded-full p-[4px] flex items-center justify-center",
+          theme === 3 || theme === 4 ? "text-[#32463C] bg-white" : "bg-[#C8172B] text-white"
+        )}
+        onClick={() => {
+          // Find the drawer's scrollable container
+          const drawerBody = document.querySelector(".ant-drawer-body");
+          if (drawerBody) {
+            drawerBody.scrollTo({ top: 0, behavior: "smooth" });
+          } else {
+            // Fallback to window scroll
+            window.scrollTo({ top: 0, behavior: "smooth" });
+          }
+        }}
+      >
+        <ArrowUpIcon className="text-2xl" />
+      </button>
+      {/* </div> */}
+    </Drawer>
+  );
+};
+
+export default InforSection;