Refactor: Replace Section component imports with EngagementModal in various containers

jeromehardaway · jeromehardaway · commit e4729b72124d · 2025-06-17T17:28:30.000-04:00
- Updated imports in blog, brand, contact, course, cta, donate, event, faq, funfact, gradation, newsletter, profile, quote, register-guide, service, team, testimonial, timeline, video, and zoom-meetings containers to use EngagementModal instead of the previous Section component.
- Added EngagementModal component with custom animations and accessibility features.
- Introduced EngagementModal styles for improved UI/UX.
diff --git a/src/components/ui/engagement-modal/EngagementModal.module.css b/src/components/ui/engagement-modal/EngagementModal.module.css
diff --git a/src/components/ui/engagement-modal/EngagementModal.tsx b/src/components/ui/engagement-modal/EngagementModal.tsx
@@ -28,8 +28,13 @@ export const EngagementModal: React.FC<EngagementModalProps> = ({
 }) => {
     const [open, setOpen] = useState(false);
     const modalRef = useRef<HTMLDivElement>(null);
-    // Add a ref to track if modal has been shown this session
-    const hasInitialized = useRef(false);
+    // DEBUG: Log mount and open state
+    useEffect(() => {
+        console.log("[EngagementModal] mounted, forceShow:", forceShow);
+    }, []);
+    useEffect(() => {
+        console.log("[EngagementModal] open state:", open);
+    }, [open]);
 
     // Expose method to manually open modal for debugging
     // This can be called from browser console: window.openEngagementModal()
@@ -43,10 +48,7 @@ export const EngagementModal: React.FC<EngagementModalProps> = ({
     }, []);
 
     useEffect(() => {
-        if (typeof window === "undefined" || hasInitialized.current) return;
-
-        // Mark that we've initialized
-        hasInitialized.current = true;
+        if (typeof window === "undefined") return;
 
         if (forceShow) {
             const timer = setTimeout(() => setOpen(true), 3000);
diff --git a/src/components/ui/engagement-modal/index.tsx b/src/components/ui/engagement-modal/index.tsx
diff --git a/src/components/vwc-grid/index.tsx b/src/components/vwc-grid/index.tsx
@@ -1,4 +1,4 @@
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import { PropsWithChildren } from "react";
 
 interface TProps {
diff --git a/src/containers/about/layout-01/index.tsx b/src/containers/about/layout-01/index.tsx
@@ -1,4 +1,4 @@
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SectionTitle from "@components/section-title";
 import Anchor from "@ui/anchor";
 import { motion } from "motion/react";
diff --git a/src/containers/about/layout-02/index.tsx b/src/containers/about/layout-02/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import MottoText from "@ui/motto-text";
 import SectionTitle from "@components/section-title";
 import { useUI } from "@contexts/ui-context";
diff --git a/src/containers/app-download/index.tsx b/src/containers/app-download/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SectionTitle from "@components/section-title";
 import Button from "@ui/button";
 import Shape2 from "@assets/svgs/shape-2.svg";
diff --git a/src/containers/blog-full/layout-01/index.tsx b/src/containers/blog-full/layout-01/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import BlogCard from "@components/blog-card/blog-03";
 import Pagination from "@components/pagination/pagination-01";
 import { IBlog } from "@utils/types";
diff --git a/src/containers/blog-full/layout-02/index.tsx b/src/containers/blog-full/layout-02/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import BlogCard from "@components/blog-card/blog-04";
 import BlogSidebar from "@containers/blog-details/blog-sidebar";
 import Pagination from "@components/pagination/pagination-01";
diff --git a/src/containers/blog-full/layout-03/index.tsx b/src/containers/blog-full/layout-03/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import BlogCard from "@components/blog-card/blog-05";
 import BlogSidebar from "@containers/blog-details/blog-sidebar";
 import Pagination from "@components/pagination/pagination-01";
diff --git a/src/containers/blog-full/layout-04/index.tsx b/src/containers/blog-full/layout-04/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import BlogCard from "@components/blog-card/blog-06";
 import Pagination from "@components/pagination/pagination-01";
 import { IBlog } from "@utils/types";
diff --git a/src/containers/blog-full/layout-05/index.tsx b/src/containers/blog-full/layout-05/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import BlogCard from "@components/blog-card/blog-03";
 import Button from "@ui/button";
 import { IBlog } from "@utils/types";
diff --git a/src/containers/blog/layout-01/index.tsx b/src/containers/blog/layout-01/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import BlogCard01 from "@components/blog-card/blog-01";
 import BlogCard02 from "@components/blog-card/blog-02";
 import MottoText from "@components/ui/motto-text";
diff --git a/src/containers/blog/layout-02/index.tsx b/src/containers/blog/layout-02/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SectionTitle from "@components/section-title";
 import Anchor from "@ui/anchor";
 import BlogCard from "@components/blog-card/blog-04";
diff --git a/src/containers/blog/layout-03/index.tsx b/src/containers/blog/layout-03/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import BlogCard from "@components/blog-card/blog-03";
 import SectionTitle from "@components/section-title";
 import { scrollUpVariants } from "@utils/variants";
diff --git a/src/containers/brand/layout-01/index.tsx b/src/containers/brand/layout-01/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SwiperSlider, { SwiperSlide } from "@ui/swiper";
 import { motion } from "motion/react";
 import { scrollUpVariants } from "@utils/variants";
diff --git a/src/containers/brand/layout-02/index.tsx b/src/containers/brand/layout-02/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SwiperSlider, { SwiperSlide } from "@ui/swiper";
 import { motion } from "motion/react";
 import { scrollUpVariants } from "@utils/variants";
diff --git a/src/containers/contact-form/layout-01/index.tsx b/src/containers/contact-form/layout-01/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import ContactForm from "@components/forms/contact-form";
 import { SectionTitleType, TSection } from "@utils/types";
 import { scrollUpVariants } from "@utils/variants";
diff --git a/src/containers/contact-form/layout-02/index.tsx b/src/containers/contact-form/layout-02/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import ContactForm from "@components/forms/contact-form";
 import { SectionTitleType, TSection } from "@utils/types";
 import { scrollUpVariants } from "@utils/variants";
diff --git a/src/containers/contact-info/layout-01/index.tsx b/src/containers/contact-info/layout-01/index.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import { motion } from "motion/react";
 import { useUI } from "@contexts/ui-context";
 import { ImageType, ItemType, SectionTitleType, TSection } from "@utils/types";
diff --git a/src/containers/contact-info/layout-02/index.tsx b/src/containers/contact-info/layout-02/index.tsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import GoogleMap from "@ui/google-map";
 import { ItemType, SectionTitleType, TSection } from "@utils/types";
 import { scrollUpVariants } from "@utils/variants";
diff --git a/src/containers/course-full/layout-03/index.tsx b/src/containers/course-full/layout-03/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import CourseCard from "@components/course-card/course-03";
 import { ICourse } from "@utils/types";
 import { courseSorting } from "@utils/methods";
diff --git a/src/containers/course/layout-01/index.tsx b/src/containers/course/layout-01/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SectionTitle from "@components/section-title";
 import CourseCard from "@components/course-card/course-01";
 import MottoText from "@components/ui/motto-text";
diff --git a/src/containers/course/layout-02/index.tsx b/src/containers/course/layout-02/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import Button from "@ui/button";
 import { useUI } from "@contexts/ui-context";
 import { ButtonType, SectionTitleType, TSection } from "@utils/types";
diff --git a/src/containers/course/layout-05/index.tsx b/src/containers/course/layout-05/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SectionTitle from "@components/section-title";
 import CourseCard from "@components/course-card/course-02";
 import Button from "@ui/button";
diff --git a/src/containers/cta/layout-01/index.tsx b/src/containers/cta/layout-01/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SectionTitle from "@components/section-title";
 import Button from "@ui/button";
 import { scrollUpVariants } from "@utils/variants";
diff --git a/src/containers/cta/layout-02/index.tsx b/src/containers/cta/layout-02/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import Button from "@ui/button";
 import { useUI } from "@contexts/ui-context";
 import { ButtonType, SectionTitleType, TSection } from "@utils/types";
diff --git a/src/containers/cta/layout-03/index.tsx b/src/containers/cta/layout-03/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import Button from "@ui/button";
 import { ButtonType, SectionTitleType, TSection } from "@utils/types";
 import { scrollUpVariants } from "@utils/variants";
diff --git a/src/containers/donate-form/layout-01/index.tsx b/src/containers/donate-form/layout-01/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import DonateForm from "@components/forms/donate-form";
 import { SectionTitleType, TSection } from "@utils/types";
 import { scrollUpVariants } from "@utils/variants";
diff --git a/src/containers/event/layout-01/index.tsx b/src/containers/event/layout-01/index.tsx
@@ -1,5 +1,5 @@
 import dynamic from "next/dynamic";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import NiceSelect from "@ui/nice-select";
 import { IEvent } from "@utils/types";
 import { eventFilter } from "@utils/methods";
diff --git a/src/containers/event/layout-02/index.tsx b/src/containers/event/layout-02/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SectionTitle from "@components/section-title";
 import MottoText from "@components/ui/motto-text";
 import SwiperSlider, { SwiperSlide } from "@ui/swiper";
diff --git a/src/containers/event/layout-03/index.tsx b/src/containers/event/layout-03/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SectionTitle from "@components/section-title";
 import EventCard from "@components/event-card/event-02";
 import MottoText from "@ui/motto-text";
diff --git a/src/containers/faq/layout-01/index.tsx b/src/containers/faq/layout-01/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import Shape2 from "@assets/svgs/shape-2.svg";
 import SectionTitle from "@components/section-title";
 import Accordion from "@ui/accordion";
diff --git a/src/containers/faq/layout-02/index.tsx b/src/containers/faq/layout-02/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SectionTitle from "@components/section-title";
 import Accordion from "@ui/accordion";
 import { ItemType, SectionTitleType, TSection } from "@utils/types";
diff --git a/src/containers/funfact/layout-01/index.tsx b/src/containers/funfact/layout-01/index.tsx
@@ -1,4 +1,4 @@
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import FunFact from "@components/funfact/funfact-01";
 import SectionTitle from "@components/section-title";
 import { motion } from "motion/react";
diff --git a/src/containers/funfact/layout-02/index.tsx b/src/containers/funfact/layout-02/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import FunFact from "@components/funfact/funfact-01";
 import { scrollUpVariants } from "@utils/variants";
 import { ItemType, TSection } from "@utils/types";
diff --git a/src/containers/funfact/layout-03/index.tsx b/src/containers/funfact/layout-03/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import FunFact from "@components/funfact/funfact-02";
 import { ItemType, TSection } from "@utils/types";
 import { scrollUpVariants } from "@utils/variants";
diff --git a/src/containers/funfact/layout-04/index.tsx b/src/containers/funfact/layout-04/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SectionTitle from "@components/section-title";
 import MottoText from "@ui/motto-text";
 import FunFact from "@components/funfact/funfact-01";
diff --git a/src/containers/gradation/index.tsx b/src/containers/gradation/index.tsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SectionTitle from "@components/section-title";
 import Gradation from "@components/gradation";
 import { ItemType, SectionTitleType, TSection } from "@utils/types";
diff --git a/src/containers/newsletter/layout-01/index.tsx b/src/containers/newsletter/layout-01/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import { useUI } from "@contexts/ui-context";
 import SectionTitle from "@components/section-title";
 import NewsletterForm from "@components/forms/newsletter-form";
diff --git a/src/containers/newsletter/layout-02/index.tsx b/src/containers/newsletter/layout-02/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SectionTitle from "@components/section-title";
 import NewsletterForm from "@components/forms/newsletter-form";
 import { SectionTitleType, TSection } from "@utils/types";
diff --git a/src/containers/profile/bio.tsx b/src/containers/profile/bio.tsx
@@ -1,4 +1,4 @@
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import Social, { SocialLink } from "@components/ui/social";
 
 const ProfileBio = () => {
diff --git a/src/containers/quote/layout-01/index.tsx b/src/containers/quote/layout-01/index.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SwiperSlider, { SwiperSlide } from "@ui/swiper";
 import QuoteItem from "@components/quote-item";
 import { useUI } from "@contexts/ui-context";
diff --git a/src/containers/register-guide/index.tsx b/src/containers/register-guide/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SectionTitle from "@components/section-title";
 import ListWithCheck from "@ui/list-with-check";
 import Button from "@ui/button";
diff --git a/src/containers/service/layout-01/index.tsx b/src/containers/service/layout-01/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SectionTitle from "@components/section-title";
 import ServiceCard from "@components/icon-box/icon-box-01";
 import { scrollUpVariants } from "@utils/variants";
diff --git a/src/containers/service/layout-02/index.tsx b/src/containers/service/layout-02/index.tsx
@@ -1,4 +1,4 @@
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SectionTitle from "@components/section-title";
 import ServiceCard from "@components/image-box/image-box-01";
 import { motion } from "motion/react";
diff --git a/src/containers/service/layout-03/index.tsx b/src/containers/service/layout-03/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import ServiceCard from "@components/image-box/image-box-02";
 import MottoText from "@ui/motto-text";
 import { ItemType, MottoType, TSection } from "@utils/types";
diff --git a/src/containers/service/layout-04/index.tsx b/src/containers/service/layout-04/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SectionTitle from "@components/section-title";
 import ServiceCard from "@components/image-box/image-box-03";
 import { ItemType, SectionTitleType, TSection } from "@utils/types";
diff --git a/src/containers/service/layout-05/index.tsx b/src/containers/service/layout-05/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SectionTitle from "@components/section-title";
 import Button from "@ui/button";
 import ListWithCheck from "@ui/list-with-check";
diff --git a/src/containers/service/layout-06/index.tsx b/src/containers/service/layout-06/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SectionTitle from "@components/section-title";
 import ServiceCard from "@components/icon-box/icon-box-02";
 import { scrollUpVariants } from "@utils/variants";
diff --git a/src/containers/team/layout-01/index.tsx b/src/containers/team/layout-01/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import Shape2 from "@assets/svgs/shape-2.svg";
 import SectionTitle from "@components/section-title";
 import Button from "@ui/button";
diff --git a/src/containers/testimonial/layout-01/index.tsx b/src/containers/testimonial/layout-01/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import Swiper, { SwiperSlide } from "@ui/swiper";
 import Testimonial from "@components/testimonial/testimonial-01";
 import { motion } from "motion/react";
diff --git a/src/containers/testimonial/layout-02/index.tsx b/src/containers/testimonial/layout-02/index.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { motion } from "motion/react";
 import dynamic from "next/dynamic";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import { SwiperSlide } from "@ui/swiper";
 import Testimonial from "@components/testimonial/testimonial-02";
 import SectionTitle from "@components/section-title";
diff --git a/src/containers/testimonial/layout-03/index.tsx b/src/containers/testimonial/layout-03/index.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import { EffectCoverflow } from "swiper";
 import SectionTitle from "@components/section-title";
 import Testimonial from "@components/testimonial/testimonial-02";
diff --git a/src/containers/testimonial/layout-04/index.tsx b/src/containers/testimonial/layout-04/index.tsx
@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import Section from "@ui/section";
+import Section from "@components/ui/engagement-modal";
 import SectionTitle from "@components/section-title";
 import Button from "@ui/button";
 import Testimonial03 from "@components/testimonial/testimonial-03";
diff --git a/src/containers/testimonial/layout-05/index.tsx b/src/containers/testimonial/layout-05/index.tsx
diff --git a/src/containers/timeline/index.tsx b/src/containers/timeline/index.tsx
diff --git a/src/containers/video/layout-01/index.tsx b/src/containers/video/layout-01/index.tsx
diff --git a/src/containers/video/layout-02/index.tsx b/src/containers/video/layout-02/index.tsx
diff --git a/src/containers/video/layout-03/index.tsx b/src/containers/video/layout-03/index.tsx
diff --git a/src/containers/video/layout-04/index.tsx b/src/containers/video/layout-04/index.tsx
diff --git a/src/containers/video/layout-07/index.tsx b/src/containers/video/layout-07/index.tsx
diff --git a/src/containers/zoom-meetings/index.tsx b/src/containers/zoom-meetings/index.tsx
diff --git a/src/pages/index.tsx b/src/pages/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import Section from "@ui/section";`
	`1`	`+import Section from "@components/ui/engagement-modal";`
`2`	`2`	`import { PropsWithChildren } from "react";`
`3`	`3`
`4`	`4`	`interface TProps {`