@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/views/feature-components/YearlyRecap/components/RecapSlide.jsx

@@ -0,0 +1,183 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Box, Container, IconButton, Fab } from '@mui/material';
+import { motion, AnimatePresence } from 'framer-motion';
+import FontAwesomeIcons from '@/common/fontAwesomeIcons/FontAwesomeIcons';
+import html2canvas from 'html2canvas';
+import PropTypes from 'prop-types';
+
+const RecapSlide = ({
+  children,
+  onNext,
+  onPrev,
+  showNext = true,
+  showPrev = true,
+  isActive,
+  bgGradient = 'radial-gradient(circle at 50% 50%, #FFD700 0%, #FF4081 50%, #7C4DFF 100%)',
+}) => {
+  const [showControls, setShowControls] = useState(false);
+  const slideRef = useRef(null);
+
+  useEffect(() => {
+    if (!isActive) return;
+
+    setShowControls(false);
+    const timer = setTimeout(() => {
+      setShowControls(true);
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, [isActive]);
+
+  const handleDownload = async () => {
+    if (slideRef.current) {
+      const canvas = await html2canvas(slideRef.current, {
+        useCORS: true,
+        scale: 2,
+        backgroundColor: null,
+      });
+      const data = canvas.toDataURL('image/png');
+      const link = document.createElement('a');
+      link.href = data;
+      link.download = `techo-recap-${Date.now()}.png`;
+      link.click();
+    }
+  };
+
+  return (
+    <Box
+      ref={slideRef}
+      sx={{
+        width: '100vw',
+        height: '100vh',
+        background: bgGradient,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+        overflow: 'hidden',
+        flexShrink: 0,
+        scrollSnapAlign: 'start',
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          backgroundImage:
+            "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E\")",
+          pointerEvents: 'none',
+          zIndex: 0,
+        },
+      }}
+    >
+      <Container
+        maxWidth="sm"
+        sx={{
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          position: 'relative',
+          zIndex: 2,
+        }}
+      >
+        {children}
+      </Container>
+
+      <AnimatePresence>
+        {showControls && (
+          <>
+            {/* Download Button */}
+            {showNext && (
+              <Fab
+                size="small"
+                onClick={handleDownload}
+                component={motion.button}
+                initial={{ opacity: 0, scale: 0 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0 }}
+                sx={{
+                  position: 'absolute',
+                  top: 20,
+                  right: 20,
+                  // bgcolor: 'rgba(255,255,255,0.8)',
+                  color: 'rgba(5, 3, 3, 0.6)',
+                  // '&:hover': { bgcolor: '#fff' },
+                  zIndex: 10,
+                  // boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+                }}
+              >
+                <FontAwesomeIcons iconName="faDownload" />
+              </Fab>
+            )}
+
+            {/* Navigation Buttons */}
+            {showPrev && onPrev && (
+              <IconButton
+                onClick={onPrev}
+                component={motion.button}
+                initial={{ x: -50, opacity: 0 }}
+                animate={{ x: 0, opacity: 1 }}
+                exit={{ x: -50, opacity: 0 }}
+                whileHover={{ scale: 1.1 }}
+                whileTap={{ scale: 0.9 }}
+                sx={{
+                  position: 'absolute',
+                  left: 20,
+                  top: '50%',
+                  transform: 'translateY(-50%)',
+                  //   bgcolor: 'rgba(255,255,255,0.6)',
+                  color: 'rgba(5, 3, 3, 0.6)',
+                  //   '&:hover': { bgcolor: 'rgba(255,255,255,0.9)' },
+                  zIndex: 10,
+                  //   boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+                }}
+              >
+                <FontAwesomeIcons iconName="faChevronLeft" />
+              </IconButton>
+            )}
+
+            {showNext && onNext && (
+              <IconButton
+                onClick={onNext}
+                component={motion.button}
+                initial={{ x: 50, opacity: 0 }}
+                animate={{ x: 0, opacity: 1 }}
+                exit={{ x: 50, opacity: 0 }}
+                whileHover={{ scale: 1.1 }}
+                whileTap={{ scale: 0.9 }}
+                sx={{
+                  position: 'absolute',
+                  right: 20,
+                  top: '50%',
+                  transform: 'translateY(-50%)',
+                  //   bgcolor: 'rgba(255,255,255,0.6)',
+                  color: 'rgba(5, 3, 3, 0.6)',
+                  //   '&:hover': { bgcolor: 'rgba(255,255,255,0.9)' },
+                  zIndex: 10,
+                  //   boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+                }}
+              >
+                <FontAwesomeIcons iconName="faChevronRight" />
+              </IconButton>
+            )}
+          </>
+        )}
+      </AnimatePresence>
+    </Box>
+  );
+};
+
+RecapSlide.propTypes = {
+  children: PropTypes.node,
+  onNext: PropTypes.func,
+  onPrev: PropTypes.func,
+  showNext: PropTypes.bool,
+  showPrev: PropTypes.bool,
+  isActive: PropTypes.bool,
+  bgGradient: PropTypes.string,
+};
+
+export default RecapSlide;

package/src/views/feature-components/YearlyRecap/languageTranslator/TranslationContext.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+
+export const TranslationContext = createContext();
+
+export const useTranslateProvider = () => useContext(TranslationContext);

package/src/views/feature-components/YearlyRecap/languageTranslator/TranslationProvider.jsx

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { TranslationContext } from './TranslationContext';
+
+const TranslationProvider = ({ children }) => {
+  const { t } = useTranslation();
+
+  const translate = (value, options = {}) => {
+    if (!value) return value;
+    // Remove interpolation placeholders and spaces to create a clean key
+    const key = value.replace(/\{\{.*?\}\}/g, '').replace(/\s+/g, '');
+    const translatedValue = t(key, options);
+    return translatedValue !== key ? translatedValue : value;
+  };
+
+  const contextValue = React.useMemo(() => ({ translate }), [translate]);
+
+  return <TranslationContext.Provider value={contextValue}>{children}</TranslationContext.Provider>;
+};
+
+TranslationProvider.propTypes = {
+  children: PropTypes.node,
+};
+
+export default TranslationProvider;

package/src/views/feature-components/YearlyRecap/languageTranslator/i18n.js

@@ -0,0 +1,46 @@
+// i18n.js
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import localTranslations from './translations.json';
+
+export const initializeI18n = (translations, preferredLanguage) => {
+  const resources = {
+    en: {
+      translation: {
+        ...(Object.values(translations['en'] || {})?.reduce((acc, obj) => ({ ...acc, ...obj }), {}) || {}),
+        ...localTranslations.en,
+      },
+    },
+    gu: {
+      translation: {
+        ...(Object.values(translations['gu'] || {})?.reduce((acc, obj) => ({ ...acc, ...obj }), {}) || {}),
+        ...localTranslations.gu,
+      },
+    },
+    hi: {
+      translation: {
+        ...(Object.values(translations['hi'] || {})?.reduce((acc, obj) => ({ ...acc, ...obj }), {}) || {}),
+        ...localTranslations.hi,
+      },
+    },
+    pa: {
+      translation: {
+        ...(Object.values(translations['pa'] || {})?.reduce((acc, obj) => ({ ...acc, ...obj }), {}) || {}),
+        ...localTranslations.pa,
+      },
+    },
+  };
+
+  i18n
+    .use(initReactI18next) // Passes i18n instance to react-i18next
+    .init({
+      resources,
+      lng: preferredLanguage || 'en', // Default language
+      fallbackLng: 'en',
+      interpolation: {
+        escapeValue: false, // React already escapes strings
+      },
+    });
+
+  return i18n;
+};

package/src/views/feature-components/YearlyRecap/languageTranslator/translations.json

@@ -0,0 +1,167 @@
+{
+    "en": {
+        "Welcome": "Welcome",
+        "Oneyear.": "One year.",
+        "Manyhomes.": "Many homes.",
+        "Yourcarereachedeveryone.": "Your care reached everyone.",
+        "Thankyouforyourserviceanddedication.": "Thank you for your service and dedication.",
+        "Abigyear,youstoodwith": "A big year, you stood with",
+        "families": "families",
+        "Youreffortstouchedthelivesof": "Your efforts touched the lives of",
+        "people": "people",
+        "Becauseofyou,": "Because of you,",
+        "childrenarehealthiertoday": "children are healthier today",
+        "EnsuringSafeMotherhood": "Ensuring Safe Motherhood",
+        "PregnanciesRegistered": "Pregnancies Registered",
+        "High-RiskPregnanciesManaged": "High-Risk Pregnancies Managed",
+        "LiveBirthsGiven": "Live Births Given",
+        "Youguidedmothersthrougheverystep—ensuringcare,safety,andlife🤍": "You guided mothers through every step — ensuring care, safety, and life 🤍",
+        "AntenatalCare": "Antenatal Care",
+        "ANCVisitsCompleted": "ANC Visits Completed",
+        "ImmunisationServices": "Immunisation Services",
+        "VaccinationsProvided": "Vaccinations Provided",
+        "PostnatalCare": "Postnatal Care",
+        "PostnatalHomeVisitsCompleted": "Postnatal Home Visits Completed",
+        "ChildHealth": "Child Health",
+        "ChildServiceProvided": "Child Service Provided",
+        "NPCB": "NPCB",
+        "NPCBScreenings": "NPCB Screenings",
+        "NPCBScreeningsDone": "NPCB Screenings Done",
+        "percentile_ranking": "You’re in the top {{percentile}}% of workers",
+        "You’reinthetop%ofworkers": "You’re in the top {{percentile}}% of workers",
+        "HappyNewYear!🎉": "Happy New Year! 🎉",
+        "Thankyouforeverythingyoudidthisyear.": "Thank you for everything you did this year.",
+        "Share": "Share",
+        "Download": "Download",
+        "SharetoWhatsApp": "Share to WhatsApp",
+        "Processing...": "Processing...",
+        "My2025Recap": "My 2025 Recap",
+        "Here’sasnapshotoftheworkIdidthisyear.": "Here’s a snapshot of the work I did this year.",
+        "Everycontributionmatters": "Every contribution matters",
+        "Yourpresencesupportedthehealthcaresystemthisyear.": "Your presence supported the healthcare system this year.",
+        "Yourfocusonmadearealdifference": "Your focus on {{label}} made a real difference",
+        "Consistenteffortbuildsstrongoutcomes.": "Consistent effort builds strong outcomes.",
+        "Youmadeanimpactacrossmultipleservices": "You made an impact across multiple services",
+        "Balancedeffortslikeyoursstrengthencommunityhealth.": "Balanced efforts like yours strengthen community health.",
+        "Yousupportedcarebeyondwhat’sshownhere": "You supported care beyond what’s shown here",
+        "Everyvisit,follow-up,andrecordcounted.": "Every visit, follow-up, and record counted.",
+        "Thankyouforbeingpartofthesystem": "Thank you for being part of the system",
+        "Yourroleenablescaredelivery.": "Your role enables care delivery.",
+        "CBAC": "CBAC",
+        "CBACFormsFilled": "CBAC Forms Filled",
+        "NCD": "NCD",
+        "NCDScreeningsDone": "NCD Screenings Done",
+        "ABHA": "ABHA",
+        "ABHAIncentivesGiven": "ABHA Incentives Given"
+    },
+    "hi": {
+        "Welcome": "नमस्ते",
+        "Oneyear.": "एक साल।",
+        "Manyhomes.": "कई घर।",
+        "Yourcarereachedeveryone.": "आपकी देखभाल सब तक पहुँची।",
+        "Thankyouforyourserviceanddedication.": "आपकी सेवा और समर्पण के लिए धन्यवाद।",
+        "Abigyear,youstoodwith": "एक बड़ा साल, आप साथ खड़े रहे",
+        "families": "परिवारों के",
+        "Youreffortstouchedthelivesof": "आपके प्रयासों ने जीवन को छुआ",
+        "people": "लोगों के",
+        "Becauseofyou,": "आपकी वजह से,",
+        "childrenarehealthiertoday": "बच्चे आज स्वस्थ हैं",
+        "EnsuringSafeMotherhood": "सुरक्षित मातृत्व सुनिश्चित करना",
+        "PregnanciesRegistered": "पंजीकृत गर्भधारण",
+        "High-RiskPregnanciesManaged": "प्रबंधित उच्च जोखिम वाले गर्भधारण",
+        "LiveBirthsGiven": "दिए गए जीवित जन्म",
+        "Youguidedmothersthrougheverystep—ensuringcare,safety,andlife🤍": "आपने हर कदम पर माताओं का मार्गदर्शन किया - देखभाल, सुरक्षा और जीवन सुनिश्चित करना 🤍",
+        "AntenatalCare": "प्रसवपूर्व देखभाल",
+        "ANCVisitsCompleted": "ANC विज़िट पूरी हुईं",
+        "ImmunisationServices": "टीकाकरण सेवाएँ",
+        "VaccinationsProvided": "प्रदान किए गए टीकाकरण",
+        "PostnatalCare": "प्रसवोत्तर देखभाल",
+        "PostnatalHomeVisitsCompleted": "प्रसवोत्तर गृह विज़िट पूरी हुईं",
+        "ChildHealth": "बाल स्वास्थ्य",
+        "ChildServiceProvided": "प्रदान की गई बाल सेवा",
+        "NPCB": "एनपीसीबी",
+        "NPCBScreenings": "NPCB स्क्रीनिंग",
+        "NPCBScreeningsDone": "NPCB स्क्रीनिंग पूरी हुई",
+        "percentile_ranking": "आप शीर्ष {{percentile}}% कार्यकर्ताओं में से हैं",
+        "You’reinthetop%ofworkers": "आप शीर्ष {{percentile}}% कार्यकर्ताओं में से हैं",
+        "HappyNewYear!🎉": "नया साल मुबारक हो! 🎉",
+        "Thankyouforeverythingyoudidthisyear.": "इस साल आपने जो कुछ भी किया उसके लिए धन्यवाद।",
+        "Share": "साझा करें",
+        "Download": "डाउनलोड करें",
+        "SharetoWhatsApp": "व्हाट्सएप पर साझा करें",
+        "Processing...": "प्रक्रिया जारी है...",
+        "My2025Recap": "मेरा 2025 रिकैप",
+        "Here’sasnapshotoftheworkIdidthisyear.": "यहाँ इस वर्ष मेरे द्वारा किए गए कार्यों का एक स्नैपशॉट है।",
+        "Everycontributionmatters": "हर योगदान मायने रखता है",
+        "Yourpresencesupportedthehealthcaresystemthisyear.": "आपकी उपस्थिति ने इस वर्ष स्वास्थ्य सेवा प्रणाली का समर्थन किया।",
+        "Yourfocusonmadearealdifference": "{{label}} पर आपके ध्यान ने वास्तव में बदलाव लाया",
+        "Consistenteffortbuildsstrongoutcomes.": "निरंतर प्रयास मजबूत परिणाम देते हैं।",
+        "Youmadeanimpactacrossmultipleservices": "आपने कई सेवाओं में प्रभाव डाला",
+        "Balancedeffortslikeyoursstrengthencommunityhealth.": "आप जैसे संतुलित प्रयास सामुदायिक स्वास्थ्य को मजबूत करते हैं।",
+        "Yousupportedcarebeyondwhat’sshownhere": "आपने यहाँ दिखाए गए कार्यों से परे देखभाल का समर्थन किया",
+        "Everyvisit,follow-up,andrecordcounted.": "हर विज़िट, फॉलो-अप और रिकॉर्ड मायने रखता है।",
+        "Thankyouforbeingpartofthesystem": "प्रणाली का हिस्सा बनने के लिए धन्यवाद",
+        "Yourroleenablescaredelivery.": "आपकी भूमिका देखभाल वितरण को सक्षम बनाती है।",
+        "CBAC": "सीबीएसी",
+        "CBACFormsFilled": "सीबीएसी फॉर्म भरे गए",
+        "NCD": "एनसीडी",
+        "NCDScreeningsDone": "एनसीडी स्क्रीनिंग पूरी हुई",
+        "ABHA": "आभा",
+        "ABHAIncentivesGiven": "आभा प्रोत्साहन दिया गया"
+    },
+    "gu": {
+        "Welcome": "સ્વાગત છે",
+        "Oneyear.": "એક વર્ષ.",
+        "Manyhomes.": "અનેક ઘર.",
+        "Yourcarereachedeveryone.": "તમારી સંભાળ બધાં સુધી પહોંચી.",
+        "Thankyouforyourserviceanddedication.": "તમારી સેવા અને સમર્પણ બદલ આભાર.",
+        "Abigyear,youstoodwith": "એક મોટું વર્ષ, તમે સાથે રહ્યા",
+        "families": "પરિવારોની",
+        "Youreffortstouchedthelivesof": "તમારા પ્રયત્નોએ જીવનને સ્પર્શ્યું",
+        "people": "લોકોના",
+        "Becauseofyou,": "તમારા કારણે,",
+        "childrenarehealthiertoday": "બાળકો આજે સ્વસ્થ છે",
+        "EnsuringSafeMotherhood": "સુરક્ષિત માતૃત્વ સુનિશ્ચિત કરવું",
+        "PregnanciesRegistered": "નોંધાયેલ સગર્ભાવસ્થા",
+        "High-RiskPregnanciesManaged": "સંચાલિત ઉચ્ચ જોખમ ધરાવતી સગર્ભાવસ્થા",
+        "LiveBirthsGiven": "આપેલ જીવંત જન્મ",
+        "Youguidedmothersthrougheverystep—ensuringcare,safety,andlife🤍": "તમે દરેક પગલે માતાઓને માર્ગદર્શન આપ્યું - સંભાળ, સુરક્ષા અને જીવન સુનિશ્ચિત કર્યું 🤍",
+        "AntenatalCare": "પ્રસૂતિ પૂર્વેની સંભાળ",
+        "ANCVisitsCompleted": "ANC મુલાકાતો પૂર્ણ થઈ",
+        "ImmunisationServices": "રસીકરણ સેવાઓ",
+        "VaccinationsProvided": "આપેલ રસીકરણ",
+        "PostnatalCare": "પ્રસૂતિ પછીની સંભાળ",
+        "PostnatalHomeVisitsCompleted": "પ્રસૂતિ પછીની હોમ વિઝિટ પૂર્ણ થઈ",
+        "ChildHealth": "બાળ આરોગ્ય",
+        "ChildServiceProvided": "આપેલ બાળ સેવા",
+        "NPCB": "એનપીસીબી",
+        "NPCBScreenings": "NPCB સ્ક્રિનિંગ",
+        "NPCBScreeningsDone": "NPCB સ્ક્રિનિંગ પૂર્ણ થયું",
+        "percentile_ranking": "તમે ટોચના {{percentile}}% કાર્યકરોમાં છો",
+        "You’reinthetop%ofworkers": "તમે ટોચના {{percentile}}% કાર્યકરોમાં છો",
+        "HappyNewYear!🎉": "નવું વર્ષ મુબારક! 🎉",
+        "Thankyouforeverythingyoudidthisyear.": "તમે આ વર્ષે જે કંઈ કર્યું તે બદલ આભાર.",
+        "Share": "શેર કરો",
+        "Download": "ડાઉનલોડ કરો",
+        "SharetoWhatsApp": "વોટ્સએપ પર શેર કરો",
+        "Processing...": "પ્રક્રિયા ચાલુ છે...",
+        "My2025Recap": "મારું 2025 રિકેપ",
+        "Here’sasnapshotoftheworkIdidthisyear.": "મેં આ વર્ષે કરેલા કામનો સ્નેપશોટ અહીં છે.",
+        "Everycontributionmatters": "દરેક યોગદાન મહત્વનું છે",
+        "Yourpresencesupportedthehealthcaresystemthisyear.": "તમારી હાજરીએ આ વર્ષે આરોગ્ય સંભાળ પ્રણાલીને ટેકો આપ્યો.",
+        "Yourfocusonmadearealdifference": "{{label}} પર તમારા ધ્યાને ખરેખર ફરક પાડ્યો છે",
+        "Consistenteffortbuildsstrongoutcomes.": "સતત પ્રયત્નો મજબૂત પરિણામો લાવે છે.",
+        "Youmadeanimpactacrossmultipleservices": "તમે બહુવિધ સેવાઓમાં પ્રભાવ પાડ્યો છે",
+        "Balancedeffortslikeyoursstrengthencommunityhealth.": "તમારા જેવા સંતુલિત પ્રયત્નો સામુદાયિક સ્વાસ્થ્યને મજબૂત બનાવે છે.",
+        "Yousupportedcarebeyondwhat’sshownhere": "તમે અહીં બતાવેલ સંભાળથી આગળ વધીને ટેકો આપ્યો",
+        "Everyvisit,follow-up,andrecordcounted.": "દરેક મુલાકાત, ફોલો-અપ અને રેકોર્ડ ગણાય છે.",
+        "Thankyouforbeingpartofthesystem": "સિસ્ટમનો ભાગ બનવા બદલ આભાર",
+        "Yourroleenablescaredelivery.": "તમારી ભૂમિકા સંભાળ વિતરણને સક્ષમ કરે છે.",
+        "CBAC": "સીબીએસી",
+        "CBACFormsFilled": "સીબીએસી ફોર્મ ભર્યા",
+        "NCD": "એનસીડી",
+        "NCDScreeningsDone": "એનસીડી સ્ક્રિનિંગ પૂર્ણ થયું",
+        "ABHA": "આભા",
+        "ABHAIncentivesGiven": "આભા પ્રોત્સાહનો આપવામાં આવ્યા"
+    }
+}

package/src/views/feature-components/YearlyRecap/slides/IntroSlide.jsx

@@ -0,0 +1,233 @@
+import React, { useEffect } from 'react';
+import { Typography, Box } from '@mui/material';
+import { motion, AnimatePresence, useAnimation } from 'framer-motion';
+import RecapSlide from '../components/RecapSlide';
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+
+import PropTypes from 'prop-types';
+
+const IntroSlide = ({ data, onNext, isActive }) => {
+  const titleControls = useAnimation();
+  const circle1Controls = useAnimation();
+  const circle2Controls = useAnimation();
+  const text1Controls = useAnimation();
+  const text2Controls = useAnimation();
+  const waveControls = useAnimation();
+  const { translate } = useTranslateProvider();
+
+  const gratitudeLines = [translate('One year.'), translate('Many homes.'), translate('Your care reached everyone.')];
+  const gratitudeText2 = translate('Thank you for your service and dedication.');
+
+  useEffect(() => {
+    if (!isActive) return;
+
+    (async () => {
+      // Welcome (UNCHANGED)
+      await titleControls.start('visible');
+      await new Promise((r) => setTimeout(r, 700));
+      await titleControls.start('pop');
+
+      // Circle 1 + Text 1
+      await circle1Controls.start('enter');
+      await text1Controls.start('center');
+
+      await new Promise((r) => setTimeout(r, 1000));
+
+      // Circle 2 + Text 2
+      await circle2Controls.start('enter');
+      await text2Controls.start('center');
+
+      await new Promise((r) => setTimeout(r, 600));
+      await waveControls.start('visible');
+    })();
+  }, [isActive, titleControls, circle1Controls, circle2Controls, text1Controls, text2Controls]);
+
+  return (
+    <RecapSlide onNext={onNext} bgGradient="linear-gradient(to top, #fff1eb 0%, #ace0f9 100%)" isActive={isActive}>
+      <Box
+        sx={{
+          position: 'relative',
+          height: '100%',
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center',
+        }}
+      >
+        <AnimatePresence mode="wait">
+          {isActive && (
+            <>
+              {/* WELCOME */}
+              <Typography
+                component={motion.h1}
+                variants={{
+                  hidden: { opacity: 0, scale: 0.6 },
+                  visible: {
+                    opacity: 1,
+                    scale: 1,
+                    transition: { duration: 1.2, ease: 'easeOut' },
+                  },
+                  pop: {
+                    scale: 2.4,
+                    opacity: 0,
+                    transition: { duration: 0.6, ease: 'easeIn' },
+                  },
+                }}
+                initial="hidden"
+                animate={titleControls}
+                variant="h2"
+                sx={{
+                  fontWeight: 900,
+                  fontSize: { xs: '2.5rem', sm: '3.75rem' },
+                  background: 'linear-gradient(to top, #0c3483 0%, #a2b6df 100%)',
+                  WebkitBackgroundClip: 'text',
+                  WebkitTextFillColor: 'transparent',
+                  position: 'absolute',
+                  zIndex: 6,
+                  px: 2,
+                }}
+              >
+                {translate('Welcome')}, {data.name}!
+              </Typography>
+
+              {/* CIRCLE 1*/}
+              <motion.div
+                initial={{ scale: 0 }}
+                animate={circle1Controls}
+                variants={{
+                  enter: {
+                    scale: 4,
+                    transition: { duration: 1.4, ease: 'easeOut' },
+                  },
+                }}
+                style={{
+                  position: 'absolute',
+                  width: '55%',
+                  height: '27%',
+                  borderRadius: '50%',
+                  top: '-20%',
+                  left: '-20%',
+                  background: '#CFE9FF',
+                  zIndex: 3,
+                }}
+              />
+
+              {/* TEXT 1 (INSIDE CIRCLE 1) */}
+              <Typography
+                component={motion.div}
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={text1Controls}
+                variants={{
+                  center: {
+                    opacity: 1,
+                    scale: 1,
+                    transition: { duration: 0.9 },
+                  },
+                }}
+                sx={{
+                  position: 'relative',
+                  zIndex: 4,
+                  fontFamily: '"Poppins", sans-serif',
+                  fontSize: { xs: '1.4rem', sm: '1.8rem' },
+                  fontWeight: 700,
+                  color: '#7c625aff',
+                  maxWidth: { xs: 240, sm: 280 },
+                  lineHeight: 1.4,
+                  letterSpacing: '0.3px',
+                  top: { xs: '-25%', sm: '-30%' },
+                  left: { xs: '10%', sm: '20%' },
+                }}
+              >
+                {gratitudeLines.map((line, index) => (
+                  <motion.div
+                    key={index}
+                    initial={{ opacity: 0 }}
+                    animate={text1Controls}
+                    variants={{
+                      center: {
+                        opacity: 1,
+                        transition: {
+                          delay: index * 0.6,
+                          duration: 0.8,
+                          ease: 'easeIn',
+                        },
+                      },
+                      corner: {
+                        opacity: 0.8,
+                        transition: { duration: 0.8 },
+                      },
+                    }}
+                    style={{
+                      marginBottom: 6,
+                    }}
+                  >
+                    {line}
+                  </motion.div>
+                ))}
+              </Typography>
+
+              {/* CIRCLE 2 */}
+              <motion.div
+                initial={{ scale: 0 }}
+                animate={circle2Controls}
+                variants={{
+                  enter: {
+                    scale: 4,
+                    transition: { duration: 1.2, ease: 'easeOut' },
+                  },
+                }}
+                style={{
+                  position: 'absolute',
+                  width: '55%',
+                  height: '27%',
+                  borderRadius: '50%',
+                  bottom: '-15%',
+                  right: '-15%',
+                  background: '#FFD6C9',
+                  zIndex: 2,
+                }}
+              />
+
+              {/* TEXT 2 (INSIDE CIRCLE 2) */}
+              <Typography
+                component={motion.div}
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={text2Controls}
+                variants={{
+                  center: {
+                    opacity: 1,
+                    scale: 1,
+                    transition: { duration: 1.2 },
+                  },
+                }}
+                sx={{
+                  position: 'relative',
+                  zIndex: 5,
+                  fontFamily: '"Poppins", sans-serif',
+                  fontSize: { xs: '1.2rem', sm: '1.5rem' },
+                  fontWeight: 600,
+                  color: '#213e58ff',
+                  maxWidth: { xs: 220, sm: 260 },
+                  mt: 2,
+                  top: '30%',
+                  right: '20%',
+                }}
+              >
+                {gratitudeText2}
+              </Typography>
+            </>
+          )}
+        </AnimatePresence>
+      </Box>
+    </RecapSlide>
+  );
+};
+
+IntroSlide.propTypes = {
+  data: PropTypes.any,
+  onNext: PropTypes.func,
+  isActive: PropTypes.bool,
+};
+
+export default IntroSlide;