new setup

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+    "extends": "next/core-web-vitals",
+    "rules": {
+        "@next/next/no-img-element": "off"
+    }
+}

.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+/package-lock.json
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# .env
+.env.development
+.env.production
+
+/public/sitemap_main.xml
+.vscode
+/public/robots.txt
+robots.txt

.prettierrc

@@ -0,0 +1,8 @@
+{
+    "use-tabs": true,
+    "tabWidth": 4,
+    "printWidth": 120,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "bracketSpacing": true
+}

README.md

@@ -0,0 +1,2 @@
+# convex_sol
+

ai_convo_context.md

@@ -0,0 +1,14 @@
+# AI Assistant Conversation Context (2024-06-13)
+
+## Summary of Today's Work
+- Added a generic SectionSkeleton component for use as a skeleton loader for all sections in MyAppLanding.
+- Refactored MyAppWrapper.tsx to use React.lazy and Suspense for each section, with SectionSkeleton as the fallback.
+- Created this context file to persist the summary and context of today's changes for future reference.
+
+## Key Context
+- The user prefers direct code implementation, not just suggestions.
+- The goal is to improve perceived performance and user experience by showing skeleton loaders while sections load.
+- This file should be updated at the end of each session with a summary of what was done and any important context for the next session.
+
+---
+*When you (the AI assistant) resume tomorrow, check this file for the latest context before proceeding with new instructions.* 

components/MyAppLanding/MyAppWrapper.tsx

@@ -0,0 +1,149 @@
+import React, { useState } from 'react';
+import ContactForm from '@/components/common/contactForm/ContactForm';
+
+import dynamic from 'next/dynamic';
+// import InstagramConceptGrid from './component/InstagramConceptGrid/InstagramConceptGrid';
+
+const InstagramConceptGrid = dynamic(() => import('./component/InstagramConceptGrid/InstagramConceptGrid'), { ssr: true });
+const AppBanner = dynamic(() => import('./component/AppBanner/AppBanner'), { ssr: true });
+const MyAppOverview = dynamic(() => import('./component/MyAppOverview/MyAppOverview'), { ssr: true });
+const BrandLogo = dynamic(() => import('./component/BrandLogo/BrandLogo'), { ssr: true });
+const UrbanService = dynamic(() => import('./component/UrbanService/UrbanService'), { ssr: true });
+const Streamline = dynamic(() => import('./component/streamline/Streamline'), { ssr: true });
+const EssentialThreeGrid = dynamic(() => import('./component/EssentialThreeGrid/EssentialThreeGrid'), { ssr: true });
+const UrbanClapNeed = dynamic(() => import('./component/UrbanClapNeed/UrbanClapNeed'), { ssr: true });
+const InstagramConcept = dynamic(() => import('./component/InstagramConcept/InstagramConcept'), { ssr: true });
+const WhyNeed = dynamic(() => import('./component/WhyNeed/WhyNeed'), { ssr: true });
+const Essential = dynamic(() => import('./component/Essential/Essential'), { ssr: true });
+const CallToAction = dynamic(() => import('./component/callToAction/CallToAction'), { ssr: true });
+const Workflow = dynamic(() => import('./component/Workflow/Workflow'), { ssr: true });
+const AppDevelopmentProcess = dynamic(() => import('./component/AppDevelopmentProcess/AppDevelopmentProcess'), { ssr: true });
+const TechStackBrandLogo = dynamic(() => import('./component/TechStackBrandLogo/TechStackBrandLogo'), { ssr: true });
+const WhyChooseUs = dynamic(() => import('./component/secondWhyChoose/SecondWhyChoose'), { ssr: true });
+const Testimony2 = dynamic(() => import('./component/testimonialLanding2/testimonialLanding2'), { ssr: true });
+const SubLandingQuestions = dynamic(() => import('./component/subLandingQuestions/SubLandingQuestions'), { ssr: false });
+const HowItWorks = dynamic(() => import('./component/howItWorks/howItWorks'), { ssr: true });  
+const NetflixGenFeature = dynamic(() => import('./component/netflixGenFeature/NetflixGenFeature'), { ssr: true });
+const SecondaryAboutApp = dynamic(() => import('./component/SecondaryAboutApp/SecondaryAboutApp'), { ssr: true });
+const Industries = dynamic(() => import('./component/Industries/Industries'), { ssr: true });
+const CaseStudy = dynamic(() => import('./component/CaseStudy/CaseStudy'), { ssr: true });
+const WhyItsEssential = dynamic(() => import('./component/WhyItsEssential/WhyItsEssential'), { ssr: true });
+const AboutCloneApp = dynamic(() => import('./component/AboutCloneApp/AboutCloneApp'), { ssr: true });
+const BuildCustomizedApp = dynamic(() => import('./component/BuildCustomizedApp/BuildCustomizedApp'), { ssr: true });
+const TrackPerformance = dynamic(() => import('./component/TrackPerformance/TrackPerformance'), { ssr: true });
+const RevenueModels = dynamic(() => import('./component/RevenueModels/RevenueModels'), { ssr: true });
+const DevelopmentFeatures = dynamic(() => import('./component/DevelopmentFeatures/DevelopmentFeatures'), { ssr: true });
+const ClientTestimonials = dynamic(() => import('./component/ClientTestimonials/ClientTestimonials'), { ssr: false });
+const EndToEndService = dynamic(() => import('./component/endToEndService/EndToEndService'), { ssr: true });
+const HealthEfficiency = dynamic(() => import('./component/HealthEfficiency/HealthEfficiency'), { ssr: true });
+const AiUberStreamline = dynamic(() => import('./component/AiUberStreamline/AiUberStreamline'), { ssr: true });
+const EssentialFourGrid = dynamic(() => import('./component/EssentialFourGrid/EssentialFourGrid'), { ssr: true });
+const WalmartStreamline = dynamic(() => import('./component/WalmartStreamline/WalmartStreamline'), { ssr: true });
+const UrbanService2 = dynamic(() => import('./component/UrbanService2/UrbanService2'), { ssr: true });
+const WalmartScript = dynamic(() => import('./component/WalmartScript/WalmartScript'), { ssr: true });
+const BookCallModal = dynamic(() => import('../subLandingPage/components/bookCallModal/BookCallModal'), { ssr: true }); 
+const DevicesTechStacks = dynamic(() => import('./component/devicesTechStacks/DevicesTechStacks'), { ssr: true });
+
+const COMPONENT_MAP: Record<string, any> = {
+    Banner: AppBanner,
+    overview: MyAppOverview,
+    clients: BrandLogo,
+    advertiseSection: UrbanService,
+    urbanService: UrbanService,
+    streamline: Streamline,
+    whyItsEssential2: EssentialThreeGrid,
+    whyYouNeed: UrbanClapNeed,
+    concept: InstagramConcept,
+    whyItsEssential3: WhyNeed,
+    essentialTwoGrid: Essential,
+    callToAction: CallToAction,
+    workflow: Workflow,
+    developmentProcess: AppDevelopmentProcess,
+    techStacks: TechStackBrandLogo,
+    whyChooseUs: WhyChooseUs,
+    faq: SubLandingQuestions,
+    // Newly added
+    advanceFeatures: NetflixGenFeature,
+    secondaryAboutApp: SecondaryAboutApp,
+    industries: Industries,
+    caseStudy: CaseStudy,
+    whyItsEssential: WhyItsEssential,
+    clientTestimonials: ClientTestimonials,
+    aboutCloneApp: AboutCloneApp,
+    buildCustomizedApp: BuildCustomizedApp,
+    trackPerformance: TrackPerformance,
+    revenueModels: RevenueModels,
+    developmentFeatures: DevelopmentFeatures,
+    howItWorks: HowItWorks,
+    additionalFeature: AiUberStreamline,
+    revenueModels2: EndToEndService,
+    techniques: HealthEfficiency,
+    goals: EssentialFourGrid,
+    tabHowItWorks: Streamline,
+    UrbanServices2: UrbanService2,
+    script: WalmartScript,
+    cta: CallToAction,
+    cta2: CallToAction,
+    cta3: CallToAction,
+    cta4: CallToAction,
+    stunningFeatures: WalmartStreamline,
+    tabTechStack: DevicesTechStacks,
+    testimony2:Testimony2,
+    instagramConcept:InstagramConceptGrid
+};
+
+const MyAppWrapper = ({ props: pageData }: any) => {
+    const [isBookCallModalOpen, setIsBookCallModalOpen] = useState(false);
+    // 1. Collect sections with order
+    const orderedSections = Object.entries(pageData)
+        .filter(
+            ([key, value]) =>
+                value && ((value as any).componentOrder !== undefined || (value as any).order !== undefined),
+        )
+        .map(([key, value]) => ({
+            key,
+            value,
+            order: (value as any).componentOrder ?? (value as any).order,
+        }))
+        .sort((a, b) => a.order - b.order);
+
+    // 2. Collect sections without order
+    const unorderedSections = Object.entries(pageData)
+        .filter(
+            ([key, value]) =>
+                value &&
+                (value as any).componentOrder === undefined &&
+                (value as any).order === undefined &&
+                COMPONENT_MAP[key],
+        )
+        .map(([key, value]) => ({ key, value }));
+
+    // 3. Render all sections in order
+    return (
+        <>
+            {unorderedSections.map(({ key, value }) => {
+                const Component = COMPONENT_MAP[key];
+                if (!Component) return null;
+                return <Component key={key} props={value} id={key} onOpen={() => setIsBookCallModalOpen(true)} />;
+            })}
+
+            {orderedSections.map(({ key, value }) => {
+                const Component = COMPONENT_MAP[key];
+                if (!Component) return null;
+                return <Component key={key} props={value} id={key} onOpen={() => setIsBookCallModalOpen(true)} />;
+            })}
+            {/* <InstagramConcept props={pageData} id={''} /> */}
+           
+
+            <ContactForm extraClass="hireFrontend" />
+
+            <BookCallModal
+                isBookCallModalOpen={isBookCallModalOpen}
+                onClose={() => setIsBookCallModalOpen(false)}
+                popUpData={pageData?.popUp}
+            />
+        </>
+    );
+};
+
+export default MyAppWrapper;

components/MyAppLanding/component/AboutCloneApp/AboutCloneApp.tsx

@@ -0,0 +1,205 @@
+import React, { useEffect, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+import { Autoplay, Navigation } from 'swiper';
+import global from 'theme/global/global.module.scss';
+import styles from './aboutCloneApp.module.scss';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import Image from 'next/image';
+import { Notes } from '@/interfaces/clientTestimonial';
+import { Header, KeyNote } from '@/interfaces/shared/shared';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+interface AboutCloneAppInterface {
+    Header: Header;
+    notes: KeyNote[];
+}
+
+interface RequiredProps{
+    props: AboutCloneAppInterface;
+    id: string;
+}
+
+const AboutCloneApp = ({ props, id }: RequiredProps) => {
+    const { Header, notes } = props;
+    const [isActiveIndex, setIsActiveIndex] = useState(false);
+    const [isMobileDevice, setIsMobileDevice] = useState(false);
+    const notesLen = notes?.length ?? 0;
+    const perView = Math.min(4, Math.max(1, notesLen));
+    const bps = {
+        320:  { slidesPerView: Math.min(1, notesLen) },
+        640:  { slidesPerView: Math.min(1, notesLen) },
+        768:  { slidesPerView: Math.min(2, notesLen) },
+        1024: { slidesPerView: Math.min(3, notesLen) },
+        1300: { slidesPerView: Math.min(4, notesLen) },
+      };
+    const raw = Header?.titleColor ?? '';
+    const trimmed = typeof raw === 'string' ? raw.replace(/[;]\s*$/, '').trim() : '';
+    const normalized =
+        trimmed.startsWith('--') ? `var(${trimmed.replace(/:$/, '')})` : trimmed;
+    
+    const style = normalized
+        ? ({ ['--heading_color' as any]: normalized } as React.CSSProperties)
+        : undefined;
+
+    const backgroundRaw = Header?.background ?? '';
+   
+    const backgroundTrimmed = typeof backgroundRaw === 'string' ? backgroundRaw.replace(/[;]\s*$/, '').trim() : '';
+    const backgroundNormalized =
+        backgroundTrimmed.startsWith('--') ? `var(${backgroundTrimmed.replace(/:$/, '')})` : backgroundTrimmed;
+    
+    const backgroundStyle = backgroundNormalized
+        ? ({ ['background' as any]: backgroundNormalized } as React.CSSProperties)
+        : undefined;
+
+    const handleClick = () => {
+        if (isMobileDevice) {
+            setIsActiveIndex(!isActiveIndex);
+        }
+    };
+    useEffect(() => {
+        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+        setIsMobileDevice(isMobile);
+    }, []);
+
+    return (
+        <>
+            <section
+                id={id}
+                className={`${styles.AppDevelopmentProcess_sec} ${global.section_padding}  ${global.padding_block2}`}
+            >
+                
+                <div
+                    className={`${styles.grid_card} ${global.padding_block2}`}
+                    style={backgroundStyle}
+                >
+                    <div className={`${styles.overlay}`}>
+                        <Image
+                            src={UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_box_bg}
+                            alt="overlay"
+                            width={1232}
+                            height={832}
+                        />
+                    </div>
+                    <div className={`${styles.custom_container} ${global.container}`}>
+                        <div className={`${styles.inner_auto_services} `}>
+                            <div className={styles.content_box} id="powerBannerLeft">
+                                <div className={styles.content}>
+                                    {Header?.pageTitle && (
+                                        <div className={`${global.body1} ${styles.content_chip}`}>{Header.pageTitle}</div>
+                                    )}
+                                    {Header?.title && (
+                                    <div className={`${global.heading7} ${styles.title}`} style={style}>
+                                       
+                                            <ReactMarkdown
+                                                rehypePlugins={[rehypeRaw as any]}
+                                                skipHtml={false}
+                                            >
+                                                {Header.title || ''}
+                                            </ReactMarkdown>
+                                        </div>
+                                    )}
+                                    {Header?.content && (
+                                        <div className={`${global.details1} ${styles.para}`}>
+                                            <ReactMarkdown
+                                                rehypePlugins={[rehypeRaw as any]}
+                                                skipHtml={false}
+                                            >
+                                                {Header.content || ''}
+                                            </ReactMarkdown>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Swiper
+                        slidesPerView={perView}
+                        spaceBetween={20}
+                        autoHeight
+                        loop={notesLen > 1}                            
+                        breakpoints={bps}
+                        navigation={false}
+                        autoplay={{
+                            delay: 2500,                                   
+                            disableOnInteraction: false,                   
+                            pauseOnMouseEnter: true,                       
+                        }}
+                        speed={800}                                      
+                        modules={[Autoplay, Navigation]}
+                        className={styles.swiper_box}
+                        onSlideChange={() => isMobileDevice && setIsActiveIndex(false)}
+                    >
+                        {notes?.map((item: KeyNote, i: number) => (
+                            <SwiperSlide key={i}>
+                                <div
+                                    className={`${styles.wrapper_box} ${
+                                        isMobileDevice ? (isActiveIndex ? styles.active : styles.non_active) : ''
+                                    }`}
+                                    onClick={handleClick}
+                                >
+                                    <div className={styles.box}>
+                                        <div className={styles.front}>
+                                            <div className={styles.info}>
+                                                <div
+                                                    className={styles.info_icon}
+                                                    style={
+                                                        {
+                                                            '--bg_color': item?.noteIconBg || '',
+                                                        } as React.CSSProperties as any
+                                                    }
+                                                >
+                                                    {item?.noteImage?.data?.attributes?.url && (
+                                                    <img
+                                                        src={item.noteImage?.data?.attributes.url}
+                                                        width={46}
+                                                        height={46}
+                                                            alt="MICROSOFT_choose"
+                                                        />
+                                                    )}
+                                                </div>
+                                                {item?.noteTitle && (
+                                                    <div className={`${global.head4} ${styles.para}`}>
+                                                        <ReactMarkdown
+                                                            rehypePlugins={[rehypeRaw as any]}
+                                                            skipHtml={false}
+                                                        >
+                                                            {item.noteTitle || ''}
+                                                        </ReactMarkdown>
+                                                    </div>
+                                                )}
+                                                {item?.noteBody && (
+                                                    <div className={`${global.details1} ${styles.para_2}`}>
+                                                        <ReactMarkdown
+                                                            rehypePlugins={[rehypeRaw as any]}
+                                                            skipHtml={false}
+                                                        >
+                                                            {item.noteBody || ''}
+                                                        </ReactMarkdown>
+                                                    </div>
+                                                )}
+                                            </div>
+                                            <div className={styles.info_img}>
+                                                {/* <img
+                                                  src={`${process.env.NEXT_PUBLIC_API}${item.image?.data?.attributes.url}`}
+                                                  alt="MICROSOFT_choose"
+                                              /> */}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </SwiperSlide>
+                        ))}
+                    </Swiper>
+                </div>
+                
+            </section>
+        </>
+    );
+};
+export default AboutCloneApp;

components/MyAppLanding/component/AboutCloneApp/aboutCloneApp.module.scss

@@ -0,0 +1,237 @@
+@use 'theme/sass' as *;
+
+.AppDevelopmentProcess_sec {
+    width: 100%;
+    background: hsl(var(--AppM_clr_bg_primary));
+    position: relative;
+    z-index: 1;
+
+    .grid_card {
+        border-radius: rem(50);
+        overflow: hidden;
+        position: relative;
+        z-index: 0;
+        .overlay {
+            position: absolute;
+            inset: 0;
+            margin: auto;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            img {
+                max-width: 100%;
+            }
+        }
+    }
+
+    .custom_container {
+        .inner_auto_services {
+            @include displayFlex(column, flex-start, flex-start);
+            gap: 20px;
+
+            .content_box {
+                width: 100%;
+                @include displayFlex(column, center, center);
+                padding-block-end: 40px;
+
+                .content {
+                    text-align: center;
+                    width: 100%;
+                    padding-inline: rem(20);
+
+                    .content_chip {
+                        width: fit-content;
+                        margin-inline: auto;
+                        background: #ffffff3b;
+                        padding-inline: rem(30);
+                        padding-block: rem(6);
+                        border-radius: rem(20);
+                        min-height: rem(34);
+                        @include displayFlex(row, center, center);
+                        color: var(--clr_text_secondary);
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                        margin-block-end: rem(20);
+                        line-height: rem(24);
+                        & > * {
+                            color: var(--clr_text_secondary);
+                            font-weight: var(--fw_medium);
+                            font-family: var(--fn_accent);
+                        }
+                    }
+
+                    .title {
+                        & > * {
+                            font-weight: var(--fw_semiBold);
+                            font-family: var(--fn_accent);
+                            color: var(--clr_text_secondary);
+                            margin-block-end: 25px;
+                            font-size: scaleValue(28px, 42px);
+                            line-height: scaleValue(40px, 50px);
+                            & > * {
+                                color: var(--clr_text_secondary);
+                                font-weight: var(--fw_semiBold);
+                            }
+                            strong {
+                                background: var(--new_gradient27);
+                                background-clip: text;
+                                -webkit-background-clip: text;
+                                -webkit-text-fill-color: transparent;
+                            }
+                        }
+                    }
+
+                    .para {
+                        width: min(100%, 960px);
+                        margin-inline: auto;
+                        font-weight: var(--fw_regular);
+                        color: var(--clr_text_secondary);
+                        & > * {
+                            color: var(--clr_text_secondary);
+                            font-weight: var(--fw_regular);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .swiper_box {
+        padding-block: 40px;
+        padding-inline: 10px;
+        :global(.swiper-wrapper) {
+            height: 100% !important;
+            align-items: stretch !important;
+        }
+        :global(.swiper-slide) {
+            @include displayFlex(row, stretch, flex-start);
+            width: 300px;
+            height: auto;
+            // @include max(639px) {
+            //     min-height: auto;
+            //     height: auto;
+            // }
+        }
+        :global(.swiper-slide-active) {
+            .box {
+                .listing {
+                    height: 100%;
+                    opacity: 1;
+                }
+            }
+        }
+        // :global(.swiper-button-prev) {
+        //     bottom: 0;
+        //     top: inherit;
+        //     width: 30px;
+        //     height: 30px;
+        //     left: inherit;
+        //     right: 60px;
+        //     border-radius: 50%;
+        //     @include displayFlex(row, center, center);
+        //     border: 1px solid var(--clr_border_3);
+        //     &::after {
+        //         font-size: 14px;
+        //     }
+        // }
+        // :global(.swiper-button-next) {
+        //     bottom: 0;
+        //     top: inherit;
+        //     width: 30px;
+        //     height: 30px;
+        //     border-radius: 50%;
+        //     @include displayFlex(row, center, center);
+        //     border: 1px solid var(--clr_border_3);
+        //     &::after {
+        //         font-size: 14px;
+        //     }
+        // }
+    }
+    .wrapper_box {
+        width: 100%;
+        .box {
+            width: 100%;
+            height: 100%;
+            border-radius: 15px;
+            background: #ffffff1f;
+            backdrop-filter: blur(5px);
+            @include displayFlex(column, flex-start, space-between);
+            gap: 10px;
+            position: relative;
+            overflow: hidden;
+            transition: var(--transition_03);
+
+            .front {
+                width: 100%;
+                .info {
+                    width: 100%;
+                    padding-inline: 30px;
+                    padding-block: 30px;
+                    .info_icon {
+                        @include displayFlex(row, center, center);
+                        width: 90px;
+                        height: 90px;
+                        border-radius: 50%;
+                        background: #ffffff1f;
+                        img {
+                            width: rem(46);
+                            height: rem(46);
+                            object-fit: contain;
+                            filter: brightness(0) saturate(100%) invert(98%) sepia(78%) saturate(174%)
+                                hue-rotate(283deg) brightness(114%) contrast(100%);
+                        }
+                    }
+                    .para {
+                        font-weight: var(--fw_semiBold);
+                        color: var(--clr_text_secondary);
+                        font-family: var(--font_primary);
+                        margin-block-start: 18px;
+                        & > * {
+                            color: var(--clr_text_secondary);
+                            font-weight: var(--fw_semiBold);
+                        }
+                    }
+                    .para_2 {
+                        font-weight: var(--fw_regular);
+                        color: var(--clr_text_secondary);
+                        font-family: var(--font_primary);
+                        margin-block-start: 10px;
+                        & > * {
+                            color: var(--clr_text_secondary);
+                            font-weight: var(--fw_regular);
+                        }
+                    }
+                }
+                .info_img {
+                    width: 100%;
+                    @include displayFlex(column, flex-end, flex-end);
+                    align-self: flex-end;
+                    flex: 1;
+                }
+            }
+        }
+        &:hover {
+            .box {
+                background: var(--clr_background_primary);
+                .front {
+                    .info {
+                        .para {
+                            color: hsl(var(--AppM_clr_text_primary));
+                            & > * {
+                                color: hsl(var(--AppM_clr_text_primary));
+                            }
+                        }
+                        .para_2 {
+                            color: hsl(var(--AppM_clr_text_para));
+                            & > * {
+                                color: hsl(var(--AppM_clr_text_para));
+                            }
+                        }
+                        .info_icon {
+                            background: var(--bg_color);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/AdditionalFeatures/AdditionalFeatures.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+const AdditionalFeatures = ({ props }: any) => (
+  <section>
+    <h2>Industries2 Component</h2>
+    <pre>{JSON.stringify(props, null, 2)}</pre>
+  </section>
+);
+export default AdditionalFeatures; 

components/MyAppLanding/component/AdvanceFeatures/AdvanceFeatures.module.scss

@@ -0,0 +1,90 @@
+.advanceFeaturesSection {
+  background: #232323;
+  color: #fff;
+  border-radius: 16px;
+  padding: 2.5rem 1rem 2.5rem 1rem;
+  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.08);
+  margin: 2rem 0;
+}
+
+.sectionHeader {
+  text-align: center;
+  margin-bottom: 2.5rem;
+}
+
+.sectionTitle {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  line-height: 1.2;
+  color: #fff;
+}
+
+.sectionTitle strong {
+  color: #e34682;
+}
+
+.sectionSubtitle {
+  color: #ccc;
+  font-size: 1.1rem;
+  margin-bottom: 0.5rem;
+}
+
+.featuresGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1.5rem;
+}
+
+.featureCard {
+  background: #181818;
+  border-radius: 12px;
+  padding: 1.5rem 1.2rem;
+  min-width: 220px;
+  max-width: 270px;
+  flex: 1 1 220px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  box-shadow: 0 1px 8px 0 rgba(0,0,0,0.10);
+}
+
+.icon {
+  background: #232323;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.featureTitle {
+  color: #fff;
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.featureDesc {
+  color: #ccc;
+  font-size: 0.98rem;
+}
+
+@media (max-width: 900px) {
+  .featuresGrid {
+    grid-template-columns: 1fr 1fr;
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 600px) {
+  .featuresGrid {
+    grid-template-columns: 1fr;
+    flex-direction: column;
+  }
+  .advanceFeaturesSection {
+    padding: 1rem 0.5rem;
+  }
+} 

components/MyAppLanding/component/AdvanceFeatures/AdvanceFeatures.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import styles from './AdvanceFeatures.module.scss';
+import rehypeRaw from 'rehype-raw';
+import ReactMarkdown from 'react-markdown';
+
+interface FeatureCard {
+  icon?: string; // SVG string
+  title?: string;
+  description?: string;
+}
+
+interface AdvanceFeaturesProps {
+  header?: {
+    title?: string;
+    subtitle?: string;
+  };
+  modules?: any[];
+}
+
+interface Module {
+  moduleNumber?: string | number | null;
+  moduleText?: string;
+  moduleContent?: string;
+  buttonText?: string;
+  moduleIcon?: any;
+}
+
+function decodeHTMLEntities(text: string) {
+  return text
+    .replace(/&/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#039;/g, "'");
+}
+
+
+const AdvanceFeatures = ({ props }: { props: AdvanceFeaturesProps }) => {
+  
+  console.log('props ...........................', props);
+  const header = props?.header || { title: 'Power-Packed Features to Elevate Your <strong>Netflix Clone App</strong>', subtitle: 'Take your Netflix clone to the next level with these advanced, must-have features.' };
+  const features = props?.modules || [];
+
+  return (
+    <section className={styles.advanceFeaturesSection}>
+      <div className={styles.sectionHeader}>
+        <div className={styles.sectionTitle} >
+          <ReactMarkdown
+            rehypePlugins={[rehypeRaw as any]}
+            skipHtml={false}
+          >
+            {header.title || ''}
+          </ReactMarkdown>
+        </div>
+        <div className={styles.sectionSubtitle}>
+          <ReactMarkdown
+            rehypePlugins={[rehypeRaw as any]}
+            skipHtml={false}
+          >
+            {header.subtitle || ''}
+          </ReactMarkdown>
+        </div>
+      </div>
+      <div className={styles.featuresGrid}>
+        {features.map((feature: Module, idx: number) => (
+          <div className={styles.featureCard} key={idx}>
+            <div
+              className={styles.icon}
+            
+            >
+              <ReactMarkdown
+              rehypePlugins={[rehypeRaw as any]}
+              skipHtml={false}
+              >
+                {feature.moduleIcon || ''}
+              </ReactMarkdown>
+            </div>
+            <div className={styles.featureTitle}>{feature.moduleText}</div>
+            <div className={styles.featureDesc}>
+              <ReactMarkdown
+                rehypePlugins={[rehypeRaw as any]}
+                skipHtml={false}
+              >
+                {feature.moduleContent || ''}
+              </ReactMarkdown>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default AdvanceFeatures; 

components/MyAppLanding/component/AdvertiseSection/AdvertiseSection.module.scss

@@ -0,0 +1,165 @@
+.advertiseSection {
+  padding: 2rem 0;
+}
+
+.topSection {
+  background: #fff;
+  border-radius: 16px;
+  margin-bottom: 2rem;
+  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.04);
+  padding: 2rem 1rem 2.5rem 1rem;
+}
+
+.sectionHeader {
+  text-align: center;
+  margin-bottom: 2.5rem;
+}
+
+.sectionChip {
+  display: inline-block;
+  background: #f5f5f5;
+  color: #888;
+  font-size: 0.95rem;
+  font-weight: 600;
+  border-radius: 8px;
+  padding: 0.3rem 1.2rem;
+  margin-bottom: 1rem;
+  letter-spacing: 0.04em;
+}
+
+.sectionTitle {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  line-height: 1.2;
+  color: var(--heading_color, #222);
+}
+
+.sectionTitle strong {
+  color: var(--strong_color, #e34682);
+}
+
+.sectionSubtitle {
+  color: #666;
+  font-size: 1.1rem;
+  margin-bottom: 0.5rem;
+}
+
+.featuresGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1.5rem;
+}
+
+.featureCard {
+  background: #fafbfc;
+  border-radius: 12px;
+  box-shadow: 0 1px 8px 0 rgba(0,0,0,0.03);
+  padding: 1.5rem 1.2rem 1.5rem 1.2rem;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-height: 220px;
+}
+
+.icon {
+  width: 40px;
+  height: 40px;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.featureContent {
+  flex: 1;
+}
+
+.featureTitle {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: #222;
+}
+
+.featureDesc {
+  color: #555;
+  font-size: 0.98rem;
+}
+
+.featureNumber {
+  position: absolute;
+  top: 1.2rem;
+  right: 1.2rem;
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #e34682;
+  opacity: 0.15;
+  pointer-events: none;
+}
+
+.darkSection {
+  background: #232323;
+  color: #fff;
+  border-radius: 16px;
+  padding: 2.5rem 1rem 2.5rem 1rem;
+  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.08);
+}
+
+.darkFeaturesGrid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  justify-content: center;
+  margin-top: 2rem;
+}
+
+.darkFeatureCard {
+  background: #181818;
+  border-radius: 12px;
+  padding: 1.5rem 1.2rem;
+  min-width: 220px;
+  max-width: 270px;
+  flex: 1 1 220px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  box-shadow: 0 1px 8px 0 rgba(0,0,0,0.10);
+}
+
+.darkFeatureCard .icon {
+  background: #232323;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.darkFeatureCard .featureTitle {
+  color: #fff;
+}
+
+.darkFeatureCard .featureDesc {
+  color: #ccc;
+}
+
+@media (max-width: 900px) {
+  .featuresGrid, .darkFeaturesGrid {
+    grid-template-columns: 1fr 1fr;
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 600px) {
+  .featuresGrid, .darkFeaturesGrid {
+    grid-template-columns: 1fr;
+    flex-direction: column;
+  }
+  .topSection, .darkSection {
+    padding: 1rem 0.5rem;
+  }
+} 

components/MyAppLanding/component/AdvertiseSection/AdvertiseSection.tsx

@@ -0,0 +1,189 @@
+import React from 'react';
+import styles from './AdvertiseSection.module.scss';
+import global from 'theme/global/global.module.scss';
+// import styles from './MyAppOverview.module.scss';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+interface FeatureCard {
+    id: number;
+    noteIcon?: React.ReactNode;
+    noteTitle?: string;
+    noteBody?: string;
+    noteAddiotionalFIeld?: JSON;
+    noteImage: any;
+}
+
+interface AdvertiseSectionHeader {
+    title?: string;
+    titleColor?: string;
+    description?: string;
+}
+
+interface AdvertiseSectionProps {
+    props: any;
+    extraClass?: string;
+    id?: string;
+}
+
+function decodeHTMLEntities(text: string) {
+    return text
+        .replace(/&/g, '&')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&quot;/g, '"')
+        .replace(/&#039;/g, "'");
+}
+
+const AdvertiseSection: React.FC<AdvertiseSectionProps> = ({ props, extraClass, id }) => {
+    const header = props?.header || {};
+    const notes = props?.notes || [];
+    const additionalSecton = props?.additionalSecton || {};
+
+    return (
+        <section
+            id={id}
+            className={`${styles.advertiseSection} ${global.section_padding} ${global.padding_block2} ${
+                extraClass || ''
+            }`}
+        >
+            <div className={`${styles.custom_container} ${global.container}`}>
+                {/* Top Section */}
+                <div className={styles.topSection}>
+                    <div className={styles.sectionHeader}>
+                       
+                        <div
+                            className={`${global.heading1} ${styles.sectionTitle}`}
+                            style={
+                                {
+                                    '--heading_color': header.titleColor ? header.titleColor : 'red',
+                                } as React.CSSProperties as any
+                            }
+                        >
+                            <ReactMarkdown
+                                rehypePlugins={[rehypeRaw as any]}
+                                skipHtml={false}
+                            >
+                                {header.title || ''}
+                            </ReactMarkdown>
+                        </div>
+                        {header.content && (
+                            <div className={`${global.head44} ${styles.sectionSubtitle}`}>
+                                <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                    {header.content || ''}
+                                </ReactMarkdown>
+                            </div>
+                        )}
+                    </div>
+                    <div className={styles.featuresGrid}>
+                        {notes.length > 0 ? (
+                            notes.map((feature: FeatureCard, idx: number) => (
+                                <div className={styles.featureCard} key={idx}>
+                                    {feature.noteImage?.data?.attributes?.url ? (
+                                        <img
+                                            src={feature.noteImage?.data?.attributes?.url}
+                                            alt={feature.noteTitle}
+                                            className={styles.icon}
+                                        />
+                                    ) : (
+                                        <div
+                                            className={styles.icon}
+                                           
+                                        >
+                                          <ReactMarkdown
+                                                rehypePlugins={[rehypeRaw as any]}
+                                                skipHtml={false}
+                                            >
+                                                {(feature.noteIcon as string) || ''}
+                                            </ReactMarkdown>
+                                        </div>
+                                    )}
+                                    <div className={styles.featureContent}>
+                                        <h3 className={styles.featureTitle}>{feature.noteTitle || ''}</h3>
+                                        <p className={styles.featureDesc}>{feature.noteBody || ''}</p>
+                                    </div>
+                                    <div className={styles.featureNumber}>{String(idx + 1).padStart(2, '0')}</div>
+                                </div>
+                            ))
+                        ) : (
+                            <div className={styles.featureCard}>
+                                <div className={styles.icon}></div>
+                                <div className={styles.featureContent}>
+                                    <h3 className={styles.featureTitle}>Feature Title</h3>
+                                    <p className={styles.featureDesc}>Feature description.</p>
+                                </div>
+                                <div className={styles.featureNumber}>01</div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+            {/* Additional Section */}
+            {additionalSecton && (
+                <div className={styles.darkSection}>
+                    <div className={styles.sectionHeader}>
+                        <div className={styles.sectionChip}>Netflix Clone Feature</div>
+                        <div
+                            className={`${global.heading1} ${styles.sectionTitle}`}
+                            style={
+                                {
+                                    '--heading_color': additionalSecton.header.titleColor
+                                        ? additionalSecton.header.titleColor
+                                        : '',
+                                } as React.CSSProperties as any
+                            }
+                           
+                        >
+                          <ReactMarkdown
+                                rehypePlugins={[rehypeRaw as any]}
+                                skipHtml={false}
+                            >
+                                {additionalSecton.header.title || ''}
+                            </ReactMarkdown>
+                        </div>
+                        <div className={styles.sectionSubtitle}>
+                          <ReactMarkdown
+                                rehypePlugins={[rehypeRaw as any]}
+                                skipHtml={false}
+                            >
+                                {additionalSecton.header.content || ''}
+                            </ReactMarkdown>
+                        </div>
+                    </div>
+                    <div className={styles.darkFeaturesGrid}>
+                        {additionalSecton.notes &&
+                            additionalSecton.notes.map((feature: FeatureCard, idx: number) => (
+                                <div className={styles.darkFeatureCard} key={idx}>
+                                    {feature.noteImage ? (
+                                        <img
+                                            src={feature.noteImage?.data?.attributes?.url}
+                                            alt={feature.noteTitle}
+                                            className={styles.icon}
+                                        />
+                                    ) : (
+                                        <div
+                                            className={styles.icon}
+                                           
+                                        >
+                                          <ReactMarkdown
+                                                rehypePlugins={[rehypeRaw as any]}
+                                                skipHtml={false}
+                                            >
+                                                {(feature.noteIcon as string) || ''}
+                                            </ReactMarkdown>
+                                        </div>
+                                    )}
+                                    <div className={styles.featureContent}>
+                                        <h3 className={styles.featureTitle}>{feature.noteTitle}</h3>
+                                        <p className={styles.featureDesc}>{feature.noteBody}</p>
+                                    </div>
+                                </div>
+                            ))}
+                    </div>
+                </div>
+            )}
+        </section>
+    );
+};
+
+export default AdvertiseSection;

components/MyAppLanding/component/AiUberStreamline/AiUberStreamline.module.scss

@@ -0,0 +1,192 @@
+@use 'theme/sass' as *;
+
+.custom_sec {
+    width: 100%;
+    position: relative;
+    background-color: hsl(var(--AppM_clr_bg_light_01));
+    z-index: 1;
+    .custom_container {
+        position: relative;
+        z-index: 3;
+        .inner_box {
+            width: 100%;
+            .head_title {
+                width: 100%;
+
+                @include displayFlex(row, center, space-between);
+                gap: rem(20);
+                .title {
+                    color: var(--clr_vzit_offer_text2);
+                    max-width: (602);
+                    strong {
+                        @include textGradient(var(--heading_color));
+                    }
+                    & > * {
+                        color: var(--clr_vzit_offer_text2);
+
+                        strong {
+                            @include textGradient(var(--heading_color));
+                        }
+                    }
+                }
+                .sub_title {
+                    font-weight: var(--fw_regular);
+                    color: var(--clr_vzit_offer_text2);
+                    max-width: (470);
+                    & > * {
+                        font-weight: var(--fw_regular);
+                        color: var(--clr_vzit_offer_text2);
+                    }
+                }
+                @include max(1023px) {
+                    flex-direction: column;
+                    text-align: center;
+                    .title,
+                    .sub_title {
+                        max-width: 100%;
+                    }
+                }
+            }
+            .streamline_overview_content {
+                width: 100%;
+                // background-color: var(--clr_background_primary);
+                margin-block-start: scaleValue(20px, 50px);
+                & > * {
+                    width: 100%;
+                    & :global(.MuiBox-root) {
+                        border: none;
+                        padding: 0;
+                        & :global(.MuiTabs-root) {
+                            background: var(--clr_background_primary);
+                            border-radius: rem(25);
+                            padding: rem(16) rem(24);
+                            & :global(.MuiTabs-scroller) {
+                                overflow: auto !important;
+                                & :global(.MuiTabs-flexContainer) {
+                                    justify-content: space-between;
+                                    margin-block-end: rem(8);
+
+                                    :global(.MuiButtonBase-root) {
+                                        font-size: rem(20);
+                                        font-weight: var(--fw_medium);
+                                        color: hsl(var(--AppM_clr_text_para_01));
+                                        font-family: var(--fn_accent);
+                                        width: 100%;
+                                        max-width: rem(320);
+                                        text-align: left;
+                                        text-transform: capitalize;
+                                        word-break: break-word;
+                                        padding: rem(10) rem(60);
+                                        margin-block: rem(6);
+                                        letter-spacing: 0.2px;
+                                        border-right: 1px solid hsl(var(--AppM_border_07));
+                                        &:first-child {
+                                            padding-inline-start: 0;
+                                        }
+                                        &:last-child {
+                                            border-right: none;
+                                        }
+                                        &:global(.Mui-selected) {
+                                            color: var(--clr_vzit_offer_text2);
+                                            font-weight: var(--fw_bold);
+                                        }
+                                    }
+                                }
+                                & :global(.MuiTabs-indicator) {
+                                    display: none;
+                                }
+                            }
+                        }
+                    }
+                    .devices_overview_content {
+                        width: 100%;
+                        background-color: var(--clr_background_primary);
+                        margin-block-start: scaleValue(20px, 50px);
+                        border-radius: rem(50);
+                        overflow: hidden;
+                        @include displayFlex(row, stretch, flex-start);
+                        padding: scaleValue(25px, 60px);
+                        gap: rem(30);
+                        @include max(1023px) {
+                            flex-direction: column;
+                            border-radius: rem(25);
+                        }
+                        .devices_overview_img {
+                            display: flex;
+                            width: 100%;
+                            max-width: rem(453);
+                            max-height: rem(402);
+                            border-radius: rem(36);
+                            overflow: hidden;
+                            @include max(1023px) {
+                                max-width: 100%;
+                                max-height: 100%;
+                            }
+                            img {
+                                width: 100%;
+                                height: 100%;
+                                object-fit: cover;
+                            }
+                            @include max(767px) {
+                                min-height: 0;
+                                aspect-ratio: 1/1;
+                            }
+                        }
+                        .devices_overview_data {
+                            flex: 1;
+                            @include displayFlex(column, start, flex-start);
+                            gap: rem(22);
+
+                            @include max(1023px) {
+                                margin-inline-end: 0;
+                            }
+                            & .details {
+                                .title_text {
+                                    font-weight: var(--fw_bold);
+                                    font-family: var(--fn_accent);
+                                    padding-block-end: rem(10);
+                                    color: var(--clr_vzit_offer_text2);
+
+                                    & > * {
+                                        color: var(--clr_vzit_offer_text2);
+                                    }
+                                }
+                                .sub_ul {
+                                    color: var(--clr-para);
+                                    font-weight: var(--fw_regular);
+                                    line-height: 1.6;
+                                    max-width: rem(536);
+
+                                    & > * {
+                                        margin-block-start: rem(16);
+                                        line-height: 1.6;
+                                        color: var(--clr-para);
+                                        font-weight: var(--fw_regular);
+                                    }
+                                    ul {
+                                        padding-inline-start: rem(20);
+                                        li {
+                                            list-style: disc;
+                                            padding-block: rem(4);
+                                        }
+                                    }
+
+                                    @include max(1023px) {
+                                        max-width: 100%;
+                                    }
+                                }
+                                .sub_list {
+                                    padding-block-start: rem(10);
+                                    padding-inline-start: rem(20);
+                                    li {
+                                        list-style: disc;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/AiUberStreamline/AiUberStreamline.tsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import global from 'theme/global/global.module.scss';
+import styles from './AiUberStreamline.module.scss';
+import { Box, Tab, Tabs } from '@mui/material';
+import { DevelopmentProcessInterface } from '@/interfaces/eCommerceDevelopment.interface';
+import ReactMarkdown from 'react-markdown';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { CORRECT_ICON } from '@/constants/svgConstant';
+import { Header, Module } from '@/interfaces/shared/shared';
+import rehypeRaw from 'rehype-raw';
+
+interface TabPanelProps {
+    children?: React.ReactNode;
+    index: number;
+    value: number;
+}
+function CustomTabPanel(props: TabPanelProps) {
+    const { children, value, index, ...other } = props;
+
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`simple-tabpanel-${index}`}
+            aria-labelledby={`simple-tab-${index}`}
+            {...other}
+        >
+            {value === index && (
+                <Box className={styles.panel_box} sx={{ p: 3 }}>
+                    {children}
+                </Box>
+            )}
+        </div>
+    );
+}
+
+interface AiUberStreamlineInterface {
+    header: Header;
+    module: Module[];
+}
+
+interface RequiredProps {
+    extractClass?: string;
+    props: AiUberStreamlineInterface;
+    id: string;
+}
+
+const AiUberStreamline = ({ extractClass, props, id }: RequiredProps) => {
+    const { header, module } = props;
+    const [value, setValue] = React.useState(0);
+
+    const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+        setValue(newValue);
+    };
+    return (
+        <section
+            id={id}
+            className={`${styles.custom_sec} ${global.section_padding} ${global.padding_block}`}
+            style={{
+                background: header.background || '#fff',
+            }}
+        >
+            <div className={`${styles.custom_container} ${global.container}`}>
+                <div className={`${styles.inner_box}`}>
+                    <div className={styles.head_title}>
+                        {header?.title && (
+                            <div
+                                className={`${styles.title} ${global.manrope} ${global.heading1_1}`}
+                                style={
+                                    {
+                                        '--heading_color': header.titleColor ? header.titleColor : '',
+                                    } as React.CSSProperties as any
+                                }
+                            >
+                                <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                    {header?.title || ''}
+                                </ReactMarkdown>
+                            </div>
+                        )}
+                        {header?.content && (
+                            <div className={`${styles.sub_title} ${global.body1}`}>
+                                <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                    {header?.content || ''}
+                                </ReactMarkdown>
+                            </div>
+                        )}
+                    </div>
+                    <div className={`${styles.streamline_overview_content}`}>
+                        <div className={styles.tech_wrapper}>
+                            <Box className={`${styles.next_tab} `} sx={{ width: '100%' }}>
+                                <Box
+                                    className={`${styles.next_tabitem}`}
+                                    sx={{ borderBottom: 1, borderColor: 'divider' }}
+                                >
+                                    <Tabs value={value} onChange={handleChange} aria-label="wrapped label tabs example">
+                                        {module?.length &&
+                                            module?.map((item: any, i: number) => (
+                                                <Tab key={i} label={item.moduleText} wrapped />
+                                            ))}
+                                    </Tabs>
+                                </Box>
+                                {module?.length &&
+                                    module?.map((item: Module, i: number) => (
+                                        <CustomTabPanel key={i} value={value} index={i}>
+                                            <div className={`${styles.devices_overview_content}`}>
+                                                <div className={`${styles.devices_overview_data}`}>
+                                                    <div className={styles.details}>
+                                                        <div
+                                                            className={`${global.heading2} ${global.manrope} ${styles.title_text}`}
+                                                        >
+                                                            <ReactMarkdown
+                                                                rehypePlugins={[rehypeRaw as any]}
+                                                                skipHtml={false}
+                                                            >
+                                                                {item?.moduleText || ''}
+                                                            </ReactMarkdown>
+                                                        </div>
+                                                        {item?.moduleContent && (
+                                                            <div className={`${global.head44} ${styles.sub_ul}`}>
+                                                                <ReactMarkdown
+                                                                    rehypePlugins={[rehypeRaw as any]}
+                                                                    skipHtml={false}
+                                                                >
+                                                                    {item?.moduleContent || ''}
+                                                                </ReactMarkdown>
+                                                            </div>
+                                                        )}
+                                                    </div>
+                                                </div>
+
+                                                <div className={`${styles.devices_overview_img}`}>
+                                                    {item?.moduleImage?.data?.attributes?.url && (
+                                                        <img
+                                                            width={536}
+                                                            height={629}
+                                                            src={
+                                                                item.moduleImage?.data?.attributes.url ||
+                                                                UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE
+                                                                    .MY_APP_MOBILE_TABIMG
+                                                            }
+                                                            alt={'tabImg'}
+                                                        />
+                                                    )}
+                                                </div>
+                                            </div>
+                                        </CustomTabPanel>
+                                    ))}
+                            </Box>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default AiUberStreamline;

components/MyAppLanding/component/AppBanner/AppBanner.module.scss

@@ -0,0 +1,134 @@
+@use 'theme/sass' as *;
+
+.microsoftTools_hero_sec {
+    width: 100%;
+    background: url('./../../../../public/assets/images/myAppmobile/clone-bg.png') no-repeat center center;
+    height: 100%;
+    background-size: cover;
+    position: relative;
+    overflow: hidden;
+    isolation: isolate;
+    padding-block-start: scaleValue(60px, 80px);
+    @include max(991px) {
+        padding-block-start: scaleValue(30px, 60px);
+    }
+
+    .custom_container {
+        width: 100%;
+        .inner_microsoft_hero {
+            width: 100%;
+            display: grid;
+            grid-template-columns: 52fr 48fr;
+            align-items: center;
+            gap: 10px;
+            @include max(991px) {
+                display: flex;
+                flex-direction: column;
+                gap: 40px;
+            }
+            .content_box {
+                width: 100%;
+                .content {
+                    width: 100%;
+                    @include displayFlex(column, flex-start, flex-start);
+                    gap: 20px;
+
+                    .title {
+                        max-width: rem(620);
+                        font-weight: var(--fw_bold);
+                        color: var(--clr_vzit_offer_text2);
+                        letter-spacing: 0;
+                        & > * {
+                            font-weight: var(--fw_bold);
+                            color: var(--clr_vzit_offer_text2);
+                        }
+                        strong {
+                            @include textGradient(var(--heading_color));
+                        }
+                        @include max(991px) {
+                            max-width: 100%;
+                        }
+                    }
+                    .sub_title {
+                        max-width: rem(620);
+                        margin-block-start: rem(10);
+                        font-weight: var(--fw_regular);
+                        color: var(--clr_vzit_offer_text2);
+                        & > * {
+                            font-weight: var(--fw_regular);
+                            color: var(--clr_vzit_offer_text2);
+                            strong {
+                                font-weight: var(--fw_semiBold);
+                            }
+                        }
+                        strong {
+                            font-weight: var(--fw_semiBold);
+                        }
+                    }
+                    .para {
+                        font-weight: var(--fw_normal);
+                        font-family: var(--font_primary);
+                        color: var(--clr_vzit_offer_text);
+                        max-width: rem(490);
+                        width: 100%;
+                        & > * {
+                            font-weight: var(--fw_normal);
+                            font-family: var(--font_primary);
+                            color: var(--clr_vzit_offer_text);
+                            &:first-child {
+                                margin-block-start: rem(10);
+                            }
+                        }
+                        @include max(991px) {
+                            max-width: 100%;
+                        }
+                    }
+
+                    .gradient_btn {
+                        @include displayFlex(row, center, center);
+                        .primary_btn {
+                            margin-block-start: 35px;
+                            width: fit-content;
+                            min-width: 136px;
+                            cursor: pointer;
+                            display: flex;
+                            align-items: center;
+                            flex-direction: row;
+                            justify-content: space-between;
+                            gap: 10px;
+                            font-size: 18px;
+                            line-height: 1;
+                            text-transform: capitalize;
+                            font-weight: var(--fw_bold);
+                            font-family: var(--fn_accent);
+                            .box_text {
+                                color: var(--clr_text_secondary);
+                            }
+                        }
+                    }
+                }
+            }
+            .imageBox {
+                @include displayFlex(row, center, center);
+                position: relative;
+                width: 100%;
+                height: 100%;
+                z-index: 1;
+                @include max(991px) {
+                    margin-block-start: 20px;
+                }
+                .center_image {
+                    @include displayFlex(row, center, center);
+                    position: absolute;
+                    img {
+                        width: 100%;
+                        height: 100%;
+                    }
+                    @include max(1023px) {
+                        position: relative;
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/AppBanner/AppBanner.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import global from 'theme/global/global.module.scss';
+import styles from './AppBanner.module.scss';
+import ReactMarkdown from 'react-markdown';
+import { PhoneRings } from '@/constants/svgConstant';
+import { HealthCareHero } from '@/interfaces/healthCare.interface';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { Header } from '@/interfaces/shared/shared';
+import rehypeRaw from 'rehype-raw';
+
+interface BannerInterface {
+    header: Header;
+    buttonText: string | null | undefined;
+    bannerImage: any;
+}
+
+interface HealthBannerPropsInterface {
+    // onOpen: Function;
+    extraClass?: string;
+    props?: any;
+    onOpen: () => void;
+    id: string;
+    // data: HealthCareHero;
+}
+const AppBanner = ({ extraClass, props, onOpen, id }: HealthBannerPropsInterface) => {
+    const { header, bannerImage } = props as BannerInterface;
+    const raw = header?.titleColor ?? '';
+    const cleaned = typeof raw === 'string' ? raw.replace(/;$/, '') : '';
+    const style = cleaned ? ({ ['--heading_color' as any]: cleaned } as React.CSSProperties) : undefined;
+    return (
+        <section
+            id={id}
+            className={`${styles.microsoftTools_hero_sec} ${global.section_padding} ${global.padding_block} ${
+                extraClass && styles[extraClass]
+            }`}
+        >
+            <div className={`${styles.custom_container} ${global.container}`}>
+                <div className={`${styles.inner_microsoft_hero}`}>
+                    <div className={styles.content_box}>
+                        <div className={styles.content}>
+                            <div
+                                className={`${global.extra1} ${global.manrope} ${styles.title}`}
+                                style={style}
+                            >
+                                <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                    {header?.title || ''}
+                                </ReactMarkdown>
+                            </div>
+                            {header?.content && (
+                                <div className={`${global.details1} ${styles.para}`}>
+                                    <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                        {header?.content || ''}
+                                    </ReactMarkdown>
+                                </div>
+                            )}
+                            <div className={styles.gradient_btn}>
+                                <button className={`${styles.primary_btn} ${global.all_btn}`} onClick={() => onOpen()}>
+                                    <PhoneRings />
+                                    {props?.buttonText ? props?.buttonText : ''}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div className={styles.imageBox}>
+                        <div className={`${styles.center_image}`}>
+                            {props?.bannerImage?.data?.attributes?.url && (
+                                <img
+                                    src={
+                                        props?.bannerImage?.data?.attributes?.url ||
+                                        UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_BANNER
+                                    }
+                                    alt={'cloneBanner'}
+                                    width={600}
+                                    height={530}
+                                />
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default AppBanner;

components/MyAppLanding/component/AppDevelopmentProcess/AppDevelopmentProcess.module.scss

@@ -0,0 +1,442 @@
+@use 'theme/sass' as *;
+
+.compelling_sec {
+    width: 100%;
+    background: var(--clr_background_primary);
+    // background: var(--clr_new_bg_dark_octagon_ocean);
+    .custom_container {
+        .inner_compelling {
+            width: 100%;
+            border-radius: rem(50);
+            overflow: hidden;
+            position: relative;
+            z-index: 0;
+            padding-block: scaleValue(30px, 80px);
+            padding-inline: scaleValue(10px, 70px);
+
+            .overlay {
+                position: absolute;
+                inset: 0;
+                margin: auto;
+                width: 100%;
+                height: 100%;
+                z-index: -1;
+                img {
+                    max-width: 100%;
+                }
+            }
+
+            .content_box {
+                width: 100%;
+                position: relative;
+                z-index: 0;
+                .content {
+                    width: 100%;
+                    text-align: center;
+                    .content_chip {
+                        width: fit-content;
+                        line-height: rem(24);
+                        background: var(--bg_chip_color);
+                        padding-block: rem(6);
+                        padding-inline: rem(16);
+                        border-radius: rem(20);
+                        min-height: rem(34);
+                        margin-inline: auto;
+                        @include displayFlex(row, center, center);
+                        color: var(--heading_color);
+                        font-weight: var(--fw_semiBold);
+                        font-family: var(--fn_accent);
+                        text-align: center;
+                        & > * {
+                            color: var(--heading_color);
+                            font-weight: var(--fw_medium);
+                            font-family: var(--fn_accent);
+                        }
+                    }
+                    .title {
+                        width: 100%;
+                        margin-block-start: rem(16);
+                        font-weight: var(--fw_bold);
+                        font-family: var(--fn_accent);
+                        color: var(--clr_vzit_offer_text2);
+                        & > * {
+                            font-weight: var(--fw_bold);
+                            color: var(--clr_vzit_offer_text2);
+
+                            strong {
+                                @include textGradient(var(--heading_color));
+                            }
+                        }
+                        strong {
+                            @include textGradient(var(--heading_color));
+                        }
+                    }
+                    .para {
+                        width: 100%;
+                        margin-block-start: rem(24);
+                        color: var(--subheading_color);
+                        & > * {
+                            color: var(--subheading_color);
+                        }
+                    }
+                }
+                .logo_bg {
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    width: rem(389);
+                    height: rem(278);
+                    z-index: -1;
+                    @include max(575px) {
+                        width: 100%;
+                        height: rem(200);
+                    }
+                }
+            }
+
+            .inner_content {
+                width: 100%;
+                margin-block-start: rem(60);
+
+                div[role='tabpanel'] {
+                    width: 100%;
+                    flex: 1;
+                    border-radius: rem(30);
+                    overflow: hidden;
+                }
+                :global(.MuiBox-root) {
+                    gap: 30px;
+                    border-radius: 20px;
+                    background: transparent;
+                    padding: 0;
+                    width: 100%;
+                    height: 100%;
+                    @include max(1023px) {
+                        flex-direction: column;
+                        height: auto;
+                    }
+                    @include max(576px) {
+                        padding: 0;
+                    }
+                }
+                :global(.MuiTabs-root) {
+                    background: transparent;
+                    max-width: 350px;
+                    border-start-start-radius: 0;
+                    border-end-start-radius: 0;
+                    width: 100%;
+                    // padding-block: 30px;
+                    border: none;
+                    @include max(1023px) {
+                        max-width: 100%;
+                        border-start-start-radius: 0;
+                        border-end-start-radius: 0;
+                        min-height: 100%;
+                        height: 100%;
+                    }
+                    :global(.MuiTabScrollButton-root) {
+                        display: none;
+                    }
+                    :global(.MuiTabs-scroller) {
+                        max-height: rem(455);
+                        height: 100%;
+                        &::-webkit-scrollbar-track {
+                            border-radius: rem(2) !important;
+                            background-color: #d4d4d4 !important;
+                        }
+
+                        &::-webkit-scrollbar {
+                            width: rem(2) !important;
+                            border-radius: rem(2);
+                            background-color: #242424 !important;
+                        }
+
+                        &::-webkit-scrollbar-thumb {
+                            border-radius: rem(2) !important;
+                            background-color: #242424 !important;
+                        }
+                        :global(.MuiTabs-flexContainer) {
+                            gap: 15px;
+                            @include max(1023px) {
+                                flex-direction: row;
+                                // flex-wrap: wrap;
+                                overflow-x: auto;
+                                gap: 20px;
+                            }
+                            :global(.MuiButtonBase-root) {
+                                flex-direction: row;
+                                justify-content: flex-start;
+                                gap: 16px;
+                                min-height: 50px;
+                                max-width: 100%;
+                                width: 100%;
+                                padding-inline: 20px 20px;
+                                color: var(--clr_vzit_offer_text2);
+                                padding-block: 0px;
+                                text-align: left;
+                                text-transform: capitalize;
+                                font-size: 18px;
+                                font-weight: 700;
+                                transition: var(--transition_03);
+                                border-radius: rem(20);
+                                font-family: var(--fn_accent);
+                                min-height: rem(72);
+                                min-width: rem(180);
+                                background: var(--clr_background_primary);
+
+                                img {
+                                    margin-bottom: 0;
+                                    width: rem(30);
+                                    height: rem(30);
+                                    filter: brightness(0) saturate(100%) invert(0%) sepia(4%) saturate(7500%)
+                                        hue-rotate(173deg) brightness(100%) contrast(103%);
+                                }
+                                .label {
+                                    @include displayFlex(row, center, space-between);
+                                    width: 100%;
+                                    gap: 16px;
+                                    font-size: 16px;
+                                    font-family: var(--fn_accent);
+                                    letter-spacing: 0;
+                                    color: var(--clr_vzit_offer_text2);
+                                    font-weight: var(--fw_bold);
+                                    @include max(1023px) {
+                                        justify-content: center;
+                                    }
+
+                                    .number {
+                                        color: hsl(var(--AppMobile_clr_text_03));
+                                        font-size: 24px;
+                                        @include max(1023px) {
+                                            position: absolute;
+                                            top: 6px;
+                                            right: 10px;
+                                        }
+                                        & > * {
+                                            color: hsl(var(--AppMobile_clr_text_03));
+                                        }
+                                    }
+                                }
+
+                                @include max(1023px) {
+                                    width: fit-content;
+                                    padding: rem(10);
+                                    font-size: scaleValue(12px, 16px);
+                                    gap: 6px;
+                                }
+                                @include max(1023px) {
+                                    width: 40%;
+                                    margin-block-end: rem(10);
+                                    flex-direction: column;
+                                    text-align: center;
+                                }
+
+                                &:global(.Mui-selected) {
+                                    background: var(--tab_color);
+                                    color: var(--clr_text_secondary);
+                                    img {
+                                        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
+                                            hue-rotate(152deg) brightness(103%) contrast(103%);
+                                    }
+                                    .label {
+                                        color: var(--clr_text_secondary);
+
+                                        & > * {
+                                            color: var(--clr_text_secondary);
+                                        }
+                                        .number {
+                                            color: var(--clr_text_secondary);
+
+                                            & > * {
+                                                color: var(--clr_text_secondary);
+                                            }
+                                        }
+                                    }
+                                }
+
+                                &:hover {
+                                    background: var(--tab_color);
+                                    color: var(--clr_text_secondary);
+                                    border-radius: 10px;
+                                    img {
+                                        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
+                                            hue-rotate(152deg) brightness(103%) contrast(103%);
+                                    }
+                                    .label {
+                                        color: var(--clr_text_secondary);
+
+                                        & > * {
+                                            color: var(--clr_text_secondary);
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                :global(.MuiTabs-indicator) {
+                    background-color: var(--clr_new_sky_green);
+                    display: none;
+                    @include max(768px) {
+                        display: none;
+                    }
+                }
+
+                .tab_item {
+                    font-weight: var(--fw_medium);
+                    font-family: var(--fn_accent);
+                    color: var(--clr_text_new_gray_blue);
+                    text-transform: capitalize;
+                }
+
+                .panel_box {
+                    @include displayFlex(column, flex-start, flex-start);
+                    border-radius: rem(30);
+                    overflow: hidden;
+                    background: hsl(var(--AppM_clr_bg_black));
+                    position: relative;
+                    width: 100%;
+                    height: 100%;
+
+                    @include max(570px) {
+                        padding-inline: 0;
+                    }
+
+                    .image_box {
+                        position: relative;
+                        @include displayFlex(row, center, center);
+                        width: 100%;
+                        img {
+                            width: 100%;
+                            height: fit-content;
+                        }
+                    }
+
+                    .box {
+                        @include displayFlex(column, flex-start, space-between);
+                        padding: 0;
+                        width: 100%;
+                        position: relative;
+                        height: 100%;
+
+                        .content {
+                            z-index: 9;
+                            width: 100%;
+                            @include displayFlex(row, center, space-between);
+                            padding: rem(26) rem(34);
+                            padding-block-end: rem(18);
+                            gap: rem(20);
+                            @include max(991px) {
+                                max-width: 100%;
+                            }
+                            .tabTitle {
+                                color: var(--clr_text_secondary);
+                                font-family: var(--fn_accent);
+                                font-weight: var(--fw_bold);
+                                & > * {
+                                    color: var(--clr_text_secondary);
+                                    font-family: var(--fn_accent);
+                                    font-weight: var(--fw_bold);
+                                    font-size: 26px;
+                                    line-height: 32px;
+                                    padding: 0;
+                                }
+                            }
+                            p {
+                                font-weight: var(--fw_regular);
+                                color: var(--clr_text_secondary);
+                                font-size: 14px;
+                                line-height: 24px;
+                                padding-block: 15px 10px;
+                            }
+
+                            .number {
+                                font-size: 30px;
+                                line-height: 30px;
+                                font-weight: var(--fw_bold);
+                                color: var(--clr_text_secondary);
+                                font-family: var(--fn_accent);
+                                & > * {
+                                    font-size: 30px;
+                                    line-height: 30px;
+                                    font-weight: var(--fw_bold);
+                                    color: var(--clr_text_secondary);
+                                }
+                            }
+                        }
+                        .techBox {
+                            width: 100%;
+                            padding: rem(26) rem(34);
+                            background: var(--clr_background_primary);
+                            border-radius: rem(30);
+                            flex-grow: 1;
+                            & > *,
+                            p {
+                                color: var(--clr-para);
+                                font-weight: var(--fw_medium);
+                                font-family: var(--fn_accent);
+                                line-height: rem(30);
+                                max-height: rem(310);
+                                overflow: auto;
+
+                                & > * {
+                                    color: var(--clr-para);
+                                }
+                            }
+                            ul {
+                                li {
+                                    font-weight: var(--fw_medium);
+                                    font-family: var(--fn_accent);
+                                    color: var(--clr_vzit_offer_text);
+                                    font-size: 16px;
+                                    line-height: rem(27) !important;
+                                    padding-inline-start: rem(26);
+                                    @include displayFlex(row, flex-start, flex-start);
+                                    gap: rem(10);
+                                    margin-block-start: rem(12);
+                                    position: relative;
+
+                                    &:first-child {
+                                        margin-block-start: 0;
+                                    }
+
+                                    h4 {
+                                        color: hsl(var(--AppM_clr_text_primary));
+                                        font-weight: var(--fw_bold);
+                                        font-family: var(--fn_accent);
+                                    }
+                                    .detailsPara,
+                                    p {
+                                        color: var(--clr_vzit_offer_text);
+                                        font-family: var(--fn_accent);
+                                        font-weight: var(--fw_medium);
+
+                                        & > * {
+                                            color: var(--clr_vzit_offer_text);
+                                        }
+                                    }
+                                    .icon {
+                                        color: var(--icon_color);
+                                        margin-block-start: rem(2);
+                                    }
+                                    &::before {
+                                        content: '';
+                                        position: absolute;
+                                        top: rem(5);
+                                        left: 0;
+                                        width: rem(15);
+                                        height: rem(15);
+                                        background: url('../../../../public/assets/images/myAppmobile/checked.png')
+                                            no-repeat center center;
+                                        filter: brightness(0) saturate(100%) invert(89%) sepia(11%) saturate(707%)
+                                            hue-rotate(162deg) brightness(95%) contrast(95%);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/AppDevelopmentProcess/AppDevelopmentProcess.tsx

@@ -0,0 +1,310 @@
+import React, { ReactNode, useEffect, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+import { SliderInterface } from '@/interfaces/microsoftPowerPage.interface';
+import ReactMarkdown from 'react-markdown';
+import { Autoplay, Navigation } from 'swiper';
+import global from 'theme/global/global.module.scss';
+import styles from './AppDevelopmentProcess.module.scss';
+
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Box from '@mui/material/Box';
+import { FaCheckCircle } from 'react-icons/fa';
+import Image from 'next/image';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { Header, Module } from '@/interfaces/shared/shared';
+import rehypeRaw from 'rehype-raw';
+
+const decodeHTMLEntities = (html: string) => {
+    return html
+        .replace(/&/g, '&')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&quot;/g, '"')
+        .replace(/&#039;/g, "'");
+};
+
+interface TabPanelProps {
+    children?: ReactNode;
+    index: number;
+    value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+    const { children, value, index, ...other } = props;
+
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`vertical-tabpanel-${index}`}
+            aria-labelledby={`vertical-tab-${index}`}
+            {...other}
+        >
+            {value === index && <Box className={styles.panel_area}>{children}</Box>}
+        </div>
+    );
+}
+
+function a11yProps(index: number) {
+    return {
+        id: `vertical-tab-${index}`,
+        'aria-controls': `vertical-tabpanel-${index}`,
+    };
+}
+
+interface businessProspectsDataInterface {
+    // productivityData: ProductivityInterface;
+    extraClass?: string;
+    props: PropsContent;
+    id: string;
+}
+
+interface PropsContent {
+    background: string | undefined | null;
+    header: Header;
+    module: Module[];
+}
+
+const AppDevelopmentProcess = ({ extraClass, props, id }: businessProspectsDataInterface) => {
+    const { header, module } = props;
+    const [value, setValue] = useState(0);
+    const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+        setValue(newValue);
+    };
+    const raw = header?.titleColor ?? '';
+    const trimmed = typeof raw === 'string' ? raw.replace(/[;]\s*$/, '').trim() : '';
+    const normalized =
+        trimmed.startsWith('--') ? `var(${trimmed.replace(/:$/, '')})` : trimmed;
+    
+    const style = normalized
+        ? ({ ['--heading_color' as any]: normalized } as React.CSSProperties)
+        : undefined;
+    const subheadingStyle = normalized
+        ? ({ ['--subheading_color' as any]: normalized } as React.CSSProperties)
+        : undefined;
+
+    const backgroundRaw = props.header.background ?? '';
+    const backgroundTrimmed = typeof backgroundRaw === 'string' ? backgroundRaw.replace(/[;]\s*$/, '').trim() : '';
+    const backgroundNormalized =
+        backgroundTrimmed.startsWith('--') ? `var(${backgroundTrimmed.replace(/:$/, '')})` : backgroundTrimmed;
+    
+    const backgroundStyle = backgroundNormalized
+        ? ({ ['background' as any]: backgroundNormalized } as React.CSSProperties)
+        : undefined;
+
+    const pageTitleBgRaw = props.header.pageTitleSectionBg ?? '';
+    const pageTitleBgTrimmed = typeof pageTitleBgRaw === 'string' ? pageTitleBgRaw.replace(/[;]\s*$/, '').trim() : '';
+    const pageTitleBgNormalized =
+        pageTitleBgTrimmed.startsWith('--') ? `var(${pageTitleBgTrimmed.replace(/:$/, '')})` : pageTitleBgTrimmed;
+    const pageTitleColorRaw = props.header.pageTitleColor ?? '';
+    const pageTitleColorTrimmed = typeof pageTitleColorRaw === 'string' ? pageTitleColorRaw.replace(/[;]\s*$/, '').trim() : '';
+    const pageTitleColorNormalized =
+        pageTitleColorTrimmed.startsWith('--') ? `var(${pageTitleColorTrimmed.replace(/:$/, '')})` : pageTitleColorTrimmed;
+    const pageTitleBgStyle = pageTitleBgNormalized
+        ? ({ background: pageTitleBgNormalized, color: pageTitleColorNormalized } as React.CSSProperties)
+        : undefined;
+    return (
+        <>
+            <section
+                id={id}
+                className={`${styles.compelling_sec} ${global.section_padding} ${global.padding_block2}
+                 ${extraClass && styles[extraClass]}`}
+            >
+                <div className={`${styles.custom_container} ${global.container}`}>
+                    <div
+                        className={`${styles.inner_compelling}`}
+                        style={backgroundStyle}
+                    >
+                        <div className={`${styles.overlay}`}>
+                            <Image
+                                src={UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_box_bg}
+                                alt="overlay"
+                                width={1232}
+                                height={832}
+                            />
+                        </div>
+                        <div className={styles.content_box}>
+                            <div
+                                className={styles.content}
+                                style={
+                                    {
+                                        color: props.background ? 'white' : 'black',
+                                    } as React.CSSProperties as any
+                                }
+                            >
+                                {header?.pageTitle && (
+                                    <div
+                                        className={styles.content_chip}
+                                        style={pageTitleBgStyle}
+                                    >
+                                        {header?.pageTitle}
+                                    </div>
+                                )}
+                                {header?.title && (
+                                    <div
+                                        className={`${global.heading1} ${styles.title}`}
+                                        style={style}
+                                    >
+                                        <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                            {header.title || ''}
+                                        </ReactMarkdown>
+                                    </div>
+                                )}
+                                {header?.content && (
+                                    <div
+                                        className={`${global.details1} ${styles.para}`}
+                                        style={subheadingStyle}
+                                    >
+                                        <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                            {header.content || ''}
+                                        </ReactMarkdown>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+
+                        <div className={styles.inner_content}>
+                            <Box sx={{ flexGrow: 1, bgcolor: 'background.paper', display: 'flex', height: 680 }}>
+                                <Tabs
+                                    orientation="vertical"
+                                    variant="scrollable"
+                                    value={value}
+                                    onChange={handleChange}
+                                    aria-label="Vertical tabs example"
+                                    sx={{ borderRight: 1, borderColor: 'divider' }}
+                                >
+                                    {module?.map((tab: Module, index: number) => {
+                                        const tabRaw = tab?.tabBg ?? '';
+                                        const tabTrimmed = typeof tabRaw === 'string' ? tabRaw.replace(/[;]\s*$/, '').trim() : '';
+                                        const tabNormalized = tabTrimmed.startsWith('--') 
+                                            ? `var(${tabTrimmed.replace(/:$/, '')})` 
+                                            : tabTrimmed;
+                                        const tabBgStyle = tabNormalized
+                                            ? ({ ['--tab_color' as any]: tabNormalized } as React.CSSProperties)
+                                            : undefined;
+                                        return (<Tab
+                                            style={tabBgStyle}
+                                            key={index}
+                                            label={
+                                                <div className={`${styles.label}`}>
+                                                    {tab.moduleText && (
+                                                        <ReactMarkdown
+                                                            rehypePlugins={[rehypeRaw as any]}
+                                                            skipHtml={false}
+                                                        >
+                                                            {tab.moduleText || ''}
+                                                        </ReactMarkdown>
+                                                    )}
+                                                    <div className={`${styles.number}`}>
+                                                        {tab.moduleNumber && (
+                                                            <ReactMarkdown
+                                                                rehypePlugins={[rehypeRaw as any]}
+                                                                skipHtml={false}
+                                                            >
+                                                                {tab.moduleNumber || `${index + 1}`}
+                                                            </ReactMarkdown>
+                                                        )}
+                                                    </div>
+                                                </div>
+                                            }
+                                            icon={
+                                                tab.moduleImage?.data?.attributes?.url ? (
+                                                    <img
+                                                        src={tab.moduleImage?.data?.attributes?.url}
+                                                        alt="icon"
+                                                        width={30}
+                                                        height={30}
+                                                    />
+                                                ) : (
+                                                    <div className={`${styles.icon}`}>
+                                                        <ReactMarkdown
+                                                            rehypePlugins={[rehypeRaw as any]}
+                                                            skipHtml={false}
+                                                        >
+                                                            {tab.moduleIcon || ''}
+                                                        </ReactMarkdown>
+                                                    </div>
+                                                )
+                                            }
+                                            {...a11yProps(index)}
+                                        />
+                                    )
+                                })}
+                                </Tabs>
+
+                                {module?.length > 0 &&
+                                    module?.map((tab: Module, index: number) => (
+                                        <TabPanel key={index} value={value} index={index}>
+                                            <div className={`${styles.panel_box}`}>
+                                                <div className={`${styles.box}`}>
+                                                    <div className={`${styles.content}`}>
+                                                        <div className={`${global.head4} ${styles.tabTitle}`}>
+                                                            {tab.moduleText && (
+                                                                <ReactMarkdown
+                                                                    rehypePlugins={[rehypeRaw as any]}
+                                                                    skipHtml={false}
+                                                                >
+                                                                    {tab.moduleText || ''}
+                                                                </ReactMarkdown>
+                                                            )}
+                                                        </div>
+                                                        {tab.moduleNumber && (
+                                                            <div className={`${styles.number}`}>
+                                                                <ReactMarkdown
+                                                                    rehypePlugins={[rehypeRaw as any]}
+                                                                    skipHtml={false}
+                                                                >
+                                                                    {tab.moduleNumber || `${index + 1}`}
+                                                                </ReactMarkdown>
+                                                            </div>
+                                                        )}
+                                                    </div>
+                                                    <div key={index} className={`${styles.techBox} ${global.body1}`}>
+                                                        {tab.moduleContent && (
+                                                            <ReactMarkdown
+                                                                rehypePlugins={[rehypeRaw as any]}
+                                                                skipHtml={false}
+                                                            >
+                                                                {tab.moduleContent || ''}
+                                                            </ReactMarkdown>
+                                                        )}
+                                                        {/* <ul>
+                                                            <li>
+                                                                <i
+                                                                    className={`${styles.icon}`}
+                                                                    style={
+                                                                        {
+                                                                            '--icon_color': '#b9dfed',
+                                                                        } as React.CSSProperties as any
+                                                                    }
+                                                                >
+                                                                    <FaCheckCircle />
+                                                                </i>
+                                                                <div className={`${global.body1}`}>
+                                                                    <h4>{tab.moduleText}</h4>
+                                                                    <div className={styles.detailsPara}>
+                                                                      
+                                                                    </div>
+                                                                </div>
+                                                            </li>
+                                                        </ul> */}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </TabPanel>
+                                    ))}
+                            </Box>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default AppDevelopmentProcess;

components/MyAppLanding/component/AppWork/AppWork.module.scss

@@ -0,0 +1,273 @@
+@use 'theme/sass' as *;
+
+.custom_container {
+    position: relative;
+    z-index: 2;
+    @include displayFlex(row-reverse, flex-start, space-between);
+    gap: scaleValue(40px, 60px);
+    border: 1px solid #00000021;
+    background: var(--clr_background_primary);
+    border-radius: 30px;
+    padding: rem(12);
+    @include max(991px) {
+        @include displayFlex(column, center, space-between);
+    }
+}
+
+.content_box {
+    width: 100%;
+    padding-block-end: rem(50);
+    .content {
+        width: 100%;
+        text-align: center;
+        .title {
+            width: min(100%, rem(880));
+            margin-inline: auto;
+            margin-block-start: rem(16);
+            color: hsl(var(--AppM_clr_text_primary));
+            font-weight: var(--fw_bold);
+            font-family: var(--fn_accent);
+            & > * {
+                color: hsl(var(--AppM_clr_text_primary));
+                font-weight: var(--fw_bold);
+            }
+            strong {
+                @include textGradient(var(--heading_color));
+            }
+        }
+        .para {
+            width: min(100%, rem(800));
+            margin-inline: auto;
+            margin-block-start: rem(24);
+            color: var(--clr_vzit_offer_text);
+            & > * {
+                color: var(--clr_vzit_offer_text);
+            }
+        }
+    }
+}
+
+.tab_sec {
+    background-color: var(--AppM_clr_bg_primary);
+    height: auto;
+    position: relative;
+    overflow-x: hidden;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 10%;
+        left: 20%;
+        background: var(--grad_bg_112);
+        filter: blur(127px);
+        width: 32.5rem;
+        height: 32.5rem;
+        border-radius: 100%;
+        z-index: 2;
+    }
+
+    .tab_row {
+        @include displayFlex(column, center, space-between);
+        width: 100%;
+        gap: 10px;
+        padding-inline: 0 40px;
+
+        @include max(991px) {
+            padding-inline: 0;
+        }
+
+        @include max(480px) {
+            padding-inline: 16px;
+        }
+        .content_wrp {
+            width: 100%;
+            padding-block-end: 40px;
+            @include displayFlex(column, flex-start, flex-start);
+            gap: 15px;
+            @include max(991px) {
+                grid-column: span 2;
+            }
+            .tab_hed {
+                font-weight: var(--fw_medium);
+                color: var(--clr-heading);
+                font-family: var(--fn_accent);
+            }
+            .tab_para {
+                font-weight: var(--fw_normal);
+                color: var(--clr-para);
+            }
+        }
+
+        .tab_col {
+            width: 100%;
+            padding-inline-end: 0px;
+
+            .tab_colbox {
+                cursor: pointer;
+                background: transparent;
+                min-height: 82px;
+                @include displayFlex(row, center, flex-start);
+                border-radius: 18px;
+                padding-inline: 10px;
+                position: relative;
+                overflow: hidden;
+
+                &.active {
+                    background: #f5f9fe52;
+                    border: 1px solid #a8e1ff;
+                    :global(.MuiPaper-root) {
+                        :global(.MuiButtonBase-root) {
+                            min-height: 37px;
+                            padding-block: 10px;
+                        }
+                    }
+                }
+                :global(.MuiPaper-root) {
+                    box-shadow: none;
+                    border: none;
+                    border-top-left-radius: 18px;
+                    border-top-right-radius: 18px;
+                    background-color: transparent;
+                    margin: 0;
+                    :global(.MuiAccordionSummary-root) {
+                        @include max(415px) {
+                            padding: 0;
+                        }
+                    }
+                    :global(.MuiAccordionSummary-content) {
+                        gap: 20px;
+                        margin: 0;
+                        align-items: center;
+                        @include max(415px) {
+                            gap: 10px;
+                        }
+                        .title {
+                            font-size: 18px;
+                            font-weight: var(--fw_semiBold);
+                            font-family: var(--fn_accent);
+                            @include max(375px) {
+                                font-size: 16px;
+                            }
+                        }
+                    }
+                    .sub_text {
+                        font-size: 17px;
+                        font-weight: var(--fw_normal);
+                        color: var(--clr-para);
+                        width: 100%;
+                    }
+
+                    :global(.MuiAccordionSummary-expandIconWrapper) {
+                        display: none;
+                    }
+                }
+                .tab_icon {
+                    @include displayFlex(row, center, center);
+                    @include max(380px) {
+                        margin-inline-start: 10px;
+                    }
+                }
+                .tab_heading {
+                    margin-inline-start: 20px;
+                    max-width: 130px;
+
+                    .heading4 {
+                        color: var(--clr-accent);
+                        font-size: 16px;
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                        @include max(991px) {
+                            font-weight: var(--fw_bold);
+                        }
+                    }
+                }
+
+                .progress_bar {
+                    width: 100%;
+                    height: 5px;
+                    border-bottom-left-radius: 10px;
+                    border-top-left-radius: 10px;
+                    background-color: transparent;
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+
+                    :global(.MuiLinearProgress-bar) {
+                        background: var(--grad_bg_85);
+                        height: 2px;
+                        top: 3px;
+                    }
+                }
+
+                &.active .progress_bar::before {
+                    width: 78px;
+                }
+            }
+        }
+    }
+
+    :global(.swiper-horizontal) {
+        display: block;
+        width: 100%;
+    }
+    .work_sec {
+        @include max(991px) {
+            width: 100%;
+            margin-inline: auto;
+            padding-block-start: 0;
+        }
+        @include max(767px) {
+            width: 100%;
+        }
+        @include max(575px) {
+            width: 100%;
+        }
+
+        .work_sec_desktop {
+            display: block;
+        }
+
+        .custom2_row {
+            @include displayFlex(row, flex-start, flex-start);
+            gap: 44px;
+            width: 100%;
+            @include max(991px) {
+                @include displayFlex(row, center, space-between);
+                flex-wrap: wrap;
+            }
+            @include max(768px) {
+                width: 100%;
+                gap: 28px;
+            }
+            @include max(575px) {
+                @include displayFlex(column, flex-start, flex-start);
+            }
+
+            .work1 {
+                width: 100%;
+                .work_img {
+                    margin: auto;
+                    text-align: center;
+                    border-radius: 22px;
+                    overflow: hidden;
+                    width: 100%;
+                    &.animationOff {
+                        &:hover {
+                            img {
+                                transform: none;
+                            }
+                        }
+                    }
+                    img {
+                        transition: var(--transition);
+                        width: 100%;
+                        object-fit: cover;
+                        @include max(991px) {
+                            width: 100%;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/AppWork/AppWork.tsx

@@ -0,0 +1,223 @@
+import { Fragment, useEffect, useRef, useState } from 'react';
+import { LinearProgress } from '@mui/material';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/css';
+import global from 'theme/global/global.module.scss';
+import styles from './AppWork.module.scss';
+
+import { DigitalAllyInterface } from '@/interfaces/home.interface';
+
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Image from 'next/image';
+import { CustomImageElement } from '@/helpers/utilities/imageUtil';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+interface DigitalAllyPropsInterface {
+    digitalAllyData: DigitalAllyInterface;
+}
+
+export default function AppWork({ digitalAllyData }: DigitalAllyPropsInterface) {
+    const timerRef = useRef<any>(null);
+    const [progress, setProgress] = useState(0);
+    const [counter, setCounter] = useState(0);
+    const [isPause, setIsPause] = useState<boolean>(false);
+    const [swiper, setSwiper] = useState<any>(null);
+    const [clickedIndex, setClickedIndex] = useState<number | undefined>(undefined);
+    const [expanded, setExpanded] = useState<number | false>(false);
+    const [isVisible, setIsVisible] = useState(false);
+    const digitalAllyRef = useRef(null);
+
+    const slideTo = (index: number) => swiper?.slideTo(index);
+
+    const handleChange = (panel: number) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+        if (isExpanded) {
+            setExpanded(panel);
+        } else {
+            setExpanded(false);
+        }
+    };
+
+    useEffect(() => {
+        if (clickedIndex !== undefined) {
+            setCounter(clickedIndex);
+            setProgress(0);
+            return setClickedIndex(undefined);
+        }
+        if (progress >= 100) {
+            if (counter >= digitalAllyData?.content?.length - 1) {
+                setCounter(0);
+                setExpanded(0);
+            } else {
+                setCounter((prev) => prev + 1);
+            }
+            setProgress(0);
+        } else if (!isPause) setTimeout(() => setProgress((prev) => prev + 1), 50);
+        setExpanded(counter);
+
+        return () => clearTimeout(timerRef.current);
+    }, [progress, isPause, clickedIndex]);
+
+    useEffect(() => {
+        if (counter >= digitalAllyData?.content.length + 1) setCounter(0);
+        slideTo(counter);
+    }, [counter]);
+
+    useEffect(() => {
+        const options = {
+            root: null,
+            rootMargin: '0px',
+            threshold: 0.3,
+        };
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                setIsVisible(entry.isIntersecting);
+            });
+        }, options);
+
+        if (digitalAllyRef.current) {
+            observer.observe(digitalAllyRef.current);
+        }
+
+        return () => {
+            if (digitalAllyRef.current) {
+                observer.unobserve(digitalAllyRef.current);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (isVisible) {
+            setCounter(0);
+        }
+    }, [isVisible]);
+
+    return (
+        <section
+            ref={digitalAllyRef}
+            className={`${styles.tab_sec} ${global.section_padding} ${global.padding_block2}`}
+        >
+            <div className={` ${global.container}`}>
+                <div className={styles.content_box}>
+                    <div className={styles.content}>
+                        <h2
+                            className={`${global.heading1} ${styles.title}`}
+                            style={
+                                {
+                                    '--heading_color': 'linear-gradient(90deg, #A72844 0%, #0E5172 50%, #02BCB6 100%)',
+                                } as React.CSSProperties as any
+                            }
+                        >
+                            How Does Our <strong>TikTok Clone App Work?</strong>
+                        </h2>
+                        <div className={`${global.details1} ${styles.para}`}>
+                            <p>
+                                You can provide an extensive list of services with the help of Urban Company clone app
+                                development provided ConvexSol. The service providers can easily include these services
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className={`${styles.custom_container} ${global.container}`}>
+                <div className={`${styles.tab_row} ${global.row}`}>
+                    {[1, 2, 3, 4].map((singleItem, index) => (
+                        <div key={index} className={`${styles.tab_col}`}>
+                            <div
+                                className={`${styles.tab_colbox} ${counter === index ? styles.active : ''}`}
+                                onMouseOver={() => {
+                                    counter === index && setIsPause(true);
+                                }}
+                                onMouseLeave={() => {
+                                    counter === index && setIsPause(false);
+                                }}
+                                onClick={() => {
+                                    setClickedIndex(index);
+                                }}
+                            >
+                                <Accordion
+                                    expanded={expanded === index}
+                                    onChange={handleChange(index)}
+                                    onClick={() => {
+                                        setClickedIndex(index);
+                                    }}
+                                >
+                                    <AccordionSummary
+                                        aria-controls={`panel1bh-content-${index}`}
+                                        id={`panel1bh-header-${index}`}
+                                    >
+                                        <div className={`${styles.tab_icon} ${counter === index ? styles.active : ''}`}>
+                                            {/* <CustomImageElement attributes={122} /> */}
+                                            <img
+                                                src={UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_SETTING}
+                                                alt="expand icon"
+                                                width={34}
+                                                height={34}
+                                            />
+                                        </div>
+                                        <h3 className={styles.title} style={{ color: '#436288' }}>
+                                            Offline Content Availability with Premium
+                                        </h3>
+                                    </AccordionSummary>
+                                    {/* {counter === index && (
+                                        <AccordionDetails>
+                                            <p className={styles.sub_text}>dggb ghh fh</p>
+                                        </AccordionDetails>
+                                    )} */}
+                                </Accordion>
+
+                                <div className={`${styles.tab_progress}`}>
+                                    <LinearProgress
+                                        aria-label={`progress-${index}`}
+                                        className={`${styles.progress_bar}`}
+                                        variant="determinate"
+                                        value={counter === index ? progress : 0}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+
+                <Swiper allowTouchMove={false} onSwiper={setSwiper}>
+                    {digitalAllyData?.content?.length &&
+                        digitalAllyData?.content.map((item, index) => {
+                            return (
+                                <SwiperSlide key={index}>
+                                    <Fragment>
+                                        <div className={`${styles.work_sec} ${styles.work_sec_desktop}`}>
+                                            <div className={`${styles.custom2_row}`}>
+                                                <div key={index} className={`${styles.work1}`}>
+                                                    <div className={`${styles.work_img} `}>
+                                                        {/* <CustomImageElement
+                                                            attributes={
+                                                                UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE
+                                                                    .MY_APP_MOBILE_LOGO_BG
+                                                            }
+                                                        /> */}
+                                                        <Image
+                                                            src={
+                                                                UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE
+                                                                    .MY_APP_MOBILE_OVERVIEW
+                                                            }
+                                                            alt={item?.title}
+                                                            width={500}
+                                                            height={500}
+                                                            className={`${styles.work_img_desktop}`}
+                                                        />
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </Fragment>
+                                </SwiperSlide>
+                            );
+                        })}
+                </Swiper>
+            </div>
+        </section>
+    );
+}

components/MyAppLanding/component/AppWork/tabCarouselData.ts

@@ -0,0 +1,30 @@
+import {
+    aiMachineLearningIcon,
+    digitalTransformationIcon,
+    eCommerceIcon,
+    mobileDevelopmentIcon,
+    webDevelopmentIcon,
+} from '@/constants/svgConstant';
+
+export const carouselItems = [
+    {
+        title: 'Web Development',
+        icon: webDevelopmentIcon(),
+    },
+    {
+        title: 'Mobile Development',
+        icon: mobileDevelopmentIcon(),
+    },
+    {
+        title: 'Business Analytics',
+        icon: digitalTransformationIcon(),
+    },
+    {
+        title: 'AI & Machine Learning',
+        icon: aiMachineLearningIcon(),
+    },
+    {
+        title: 'E-Commerce',
+        icon: eCommerceIcon(),
+    },
+];

components/MyAppLanding/component/BrandLogo/BrandLogo.module.scss

@@ -0,0 +1,145 @@
+@use 'theme/sass' as *;
+
+.brand_sec {
+    background: var(--clr_background_primary);
+    height: auto;
+    position: relative;
+    &.MyAppLandingGlobal {
+        background: var(--clr_background_primary);
+        .header_content {
+            max-width: rem(1200);
+            .title {
+                font-family: var(--fn_accent) !important;
+                font-size: scaleValue(28px, 42px);
+                line-height: 1.2;
+                letter-spacing: 0;
+                font-weight: var(--fw_bold);
+                color: var(--clr_vzit_offer_text2);
+                & > * {
+                    font-family: var(--fn_accent) !important;
+                    font-size: scaleValue(28px, 42px);
+                    line-height: 1.2;
+                    letter-spacing: 0;
+                    font-weight: var(--fw_bold);
+                    color: var(--clr_vzit_offer_text2);
+                }
+            }
+            .sub_brand_heading {
+                color: var(--clr-para);
+                margin-block-start: rem(20);
+                max-width: rem(866);
+                margin-inline: auto;
+                & > * {
+                    color: var(--clr-para);
+                }
+            }
+        }
+    }
+    .header_content {
+        width: 100%;
+        max-width: rem(1100);
+        margin-inline: auto;
+        .content_chip {
+            width: fit-content;
+            line-height: rem(24);
+            background: hsl(var(--AppMobile_clr_chip));
+            padding-block: rem(6);
+            padding-inline: rem(16);
+            border-radius: rem(20);
+            min-height: rem(34);
+            @include displayFlex(row, center, center);
+            color: hsl(var(--AppMobile_clr_text_chip));
+            font-weight: var(--fw_medium);
+            font-family: var(--fn_accent);
+            margin: 0 auto 20px;
+            & > * {
+                color: hsl(var(--AppMobile_clr_text_chip));
+                font-weight: var(--fw_medium);
+                font-family: var(--fn_accent);
+            }
+        }
+        .title {
+            text-align: center;
+            & > * {
+                text-align: center;
+                color: var(--lnd2_clr_text_black);
+                margin-block-end: 10px;
+                font-size: scaleValue(26px, 44px);
+            }
+            strong {
+                @include textGradient(var(--heading_color));
+            }
+        }
+    }
+
+    .sub_brand_heading {
+        text-align: center;
+        text-transform: capitalize;
+        & > * {
+            font-family: var(--font_primary);
+            color: var(--lnd2_clr_text_gray);
+        }
+    }
+
+    //for others page
+    .home_brand_heading {
+        p {
+            font-weight: var(--fw_regular);
+            color: var(--clr-para);
+        }
+    }
+    .brand {
+        width: 100%;
+        margin-inline: auto;
+        text-align: center;
+
+        .brand_logo {
+            @include displayFlex(row, center, center);
+            flex-wrap: wrap;
+            margin: auto;
+            text-align: center;
+            gap: 45px;
+            width: 100%;
+            margin-block-start: scaleValue(30px, 80px);
+            @include max(991px) {
+                gap: 28px;
+            }
+            @include max(767px) {
+                gap: 40px;
+            }
+            @include max(639px) {
+                gap: 28px;
+            }
+            :global(.swiper-wrapper) {
+                -webkit-transition-timing-function: linear !important;
+                -o-transition-timing-function: linear !important;
+                transition-timing-function: linear !important;
+                align-items: center;
+                :global(.swiper-slide) {
+                    & .brandItem {
+                        img {
+                            width: 100%;
+                            height: 100%;
+                            object-fit: contain;
+                            max-height: rem(45);
+                            @include max(991px) {
+                                max-height: rem(33);
+                            }
+                            @include max(767px) {
+                                max-height: rem(45);
+                            }
+                            @include max(639px) {
+                                max-height: rem(28);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .brand_logo_mobile {
+            @include max(576px) {
+                display: none;
+            }
+        }
+    }
+}

components/MyAppLanding/component/BrandLogo/BrandLogo.tsx

@@ -0,0 +1,328 @@
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+import { Autoplay } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import global from 'theme/global/global.module.scss';
+import styles from './BrandLogo.module.scss';
+import CallToAction from '../callToAction/CallToAction';
+import { LandingTwoBrandLogosInterface } from '@/interfaces/secondLanding.interface';
+import ReactMarkdown from 'react-markdown';
+import Image from 'next/image';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { PhoneRings } from '@/constants/svgConstant';
+import { useState, useEffect } from 'react';
+import { Header } from '@/interfaces/shared/shared';
+import rehypeRaw from 'rehype-raw';
+
+export interface ClientsSection {
+    id: number;
+    title: string;
+    titleColor: string;
+    componentOrder: number;
+    brandLogos: BrandLogo[];
+}
+
+export interface BrandLogo {
+    id: number;
+    brandName: string;
+    brandImage: {
+        data: {
+            id: number;
+            attributes: BrandImageAttributes;
+        };
+    };
+}
+
+export interface BrandImageAttributes {
+    name: string;
+    alternativeText: string | null;
+    caption: string | null;
+    width: number;
+    height: number;
+    formats: ImageFormats | null;
+    hash: string;
+    ext: string;
+    mime: string;
+    size: number;
+    url: string;
+    previewUrl: string | null;
+    provider: string;
+    provider_metadata: any | null;
+    createdAt: string;
+    updatedAt: string;
+}
+
+export interface ImageFormats {
+    small?: ImageFormat;
+    medium?: ImageFormat;
+    thumbnail?: ImageFormat;
+}
+
+export interface ImageFormat {
+    name: string;
+    hash: string;
+    ext: string;
+    mime: string;
+    path: string | null;
+    width: number;
+    height: number;
+    size: number;
+    sizeInBytes: number;
+    url: string;
+}
+
+interface BrandLogoInterface {
+    header: Header;
+    brandLogos: any[];
+}
+
+interface IBrand {
+    extraClass?: string;
+    props?: any;
+    setIsBookCallModalOpen: (bool: boolean) => void;
+    id: string;
+    // brandLogoData: LandingTwoBrandLogosInterface;
+}
+
+const BrandLogo = ({ extraClass, props, setIsBookCallModalOpen, id }: IBrand) => {
+    const [isClient, setIsClient] = useState(false);
+    const [brandsData, setBrandsData] = useState<any[]>([]);
+    
+    const { header, brandLogos } = props as BrandLogoInterface;
+    const raw = header?.titleColor ?? '';
+    const trimmed = typeof raw === 'string' ? raw.replace(/[;]\s*$/, '').trim() : '';
+    const normalized =
+        trimmed.startsWith('--') ? `var(${trimmed.replace(/:$/, '')})` : trimmed;
+    
+    const style = normalized
+        ? ({ ['--heading_color' as any]: normalized } as React.CSSProperties)
+        : undefined;
+
+    const logoKey = (singleLogo: any, index: number) => {
+        return singleLogo?.id ?? singleLogo?.logo?.data?.id ?? singleLogo?.name ?? singleLogo?.logo?.data?.attributes?.url ?? `logo-${index}`;
+    };
+
+    const toLogoSrc = (url: string) => {
+        if (!url) return UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_BRANDLOGO;
+        return url.startsWith('/uploads/') ? `${process.env.NEXT_PUBLIC_API}${url}` : url;
+    };
+
+    // Handle client-side rendering to avoid hydration mismatch
+    useEffect(() => {
+        setIsClient(true);
+        const brands = (brandLogos as any)?.data?.attributes?.brands || [];
+        setBrandsData(brands);
+    }, [brandLogos]);
+
+    if (!isClient) {
+        return (
+            <section id={id} className={`${styles.brand_sec} ${global.padding_block} ${extraClass && styles[extraClass]}`}>
+                <div className={`${styles.custom_container} `}>
+                    <div className={`${styles.header_content} ${global.section_padding}`}>
+                        <div className={styles.content_chip}>Clients</div>
+                        <div
+                            className={`${styles.title} ${global.mona_sans_heading1}`}
+                            style={style}
+                        >
+                            <ReactMarkdown
+                                rehypePlugins={[rehypeRaw as any]}
+                                skipHtml={false}
+                            >
+                                {header?.title || ''}
+                            </ReactMarkdown>
+                        </div>
+                    </div>
+                    <div style={{ 
+                        height: '200px', 
+                        display: 'flex', 
+                        alignItems: 'center', 
+                        justifyContent: 'center',
+                        color: '#666'
+                    }}>
+                        Loading brand logos...
+                    </div>
+                </div>
+            </section>
+        );
+    }
+
+    return (
+        <section id={id} className={`${styles.brand_sec} ${global.padding_block} ${extraClass && styles[extraClass]}`}>
+            <div className={`${styles.custom_container} `}>
+                <div className={`${styles.header_content} ${global.section_padding}`}>
+                    <div className={styles.content_chip}>Clients</div>
+                    <div
+                        className={`${styles.title} ${global.mona_sans_heading1}`}
+                        style={style}
+                    >
+                        <ReactMarkdown
+                            rehypePlugins={[rehypeRaw as any]}
+                            skipHtml={false}
+                        >
+                            {header?.title || ''}
+                        </ReactMarkdown>
+                    </div>
+                </div>
+                <div className={`${styles.brand}`}>
+                    <div className={`${styles.brand_logo}`}>
+                        {/* Row 1 - Reverse direction */}
+                        <Swiper
+                            slidesPerView={8}
+                            spaceBetween={30}
+                            autoplay={{
+                                delay: 0,
+                                disableOnInteraction: false,
+                                reverseDirection: true,
+                            }}
+                            breakpoints={{
+                                280: {
+                                    slidesPerView: 3,
+                                    spaceBetween: 20,
+                                },
+                                640: {
+                                    slidesPerView: 3,
+                                },
+                                768: {
+                                    slidesPerView: 5,
+                                },
+                                1024: {
+                                    slidesPerView: 6,
+                                },
+                                1300: {
+                                    slidesPerView: 7,
+                                },
+                            }}
+                            loop
+                            speed={2000}
+                            modules={[Autoplay]}
+                        >
+                            {brandsData.map((logo: any, i: number) => {
+                                const key = logoKey(logo, i);
+                                const src = toLogoSrc(logo?.logo?.data?.attributes?.url);
+                                
+                                return (
+                                    <SwiperSlide key={key}>
+                                        <div className={styles.brandItem}>
+                                            <Image
+                                                height={33}
+                                                width={200}
+                                                src={src}
+                                                alt={'brandLogo'}
+                                                loading="lazy"
+                                            />
+                                        </div>
+                                    </SwiperSlide>
+                                );
+                            })}
+                        </Swiper>
+
+                        {/* Row 2 - Normal direction */}
+                        <Swiper
+                            slidesPerView={8}
+                            spaceBetween={30}
+                            autoplay={{
+                                delay: 0,
+                                disableOnInteraction: false,
+                            }}
+                            breakpoints={{
+                                280: {
+                                    slidesPerView: 3,
+                                    spaceBetween: 20,
+                                },
+                                640: {
+                                    slidesPerView: 3,
+                                },
+                                768: {
+                                    slidesPerView: 5,
+                                },
+                                1024: {
+                                    slidesPerView: 6,
+                                },
+                                1300: {
+                                    slidesPerView: 7,
+                                },
+                            }}
+                            loop
+                            speed={2000}
+                            modules={[Autoplay]}
+                        >
+                            {[...brandsData].reverse().map((logo: any, i: number) => {
+                                const key = logoKey(logo, i);
+                                const src = toLogoSrc(logo?.logo?.data?.attributes?.url);
+                                
+                                return (
+                                    <SwiperSlide key={`reverse-${key}`}>
+                                        <div className={styles.brandItem}>
+                                            <Image
+                                                height={33}
+                                                width={200}
+                                                src={src}
+                                                alt={'brandLogo'}
+                                                loading="lazy"
+                                            />
+                                        </div>
+                                    </SwiperSlide>
+                                );
+                            })}
+                        </Swiper>
+
+                        {/* Row 3 - Reverse direction */}
+                        <Swiper
+                            slidesPerView={8}
+                            spaceBetween={30}
+                            autoplay={{
+                                delay: 0,
+                                disableOnInteraction: false,
+                                reverseDirection: true,
+                            }}
+                            breakpoints={{
+                                280: {
+                                    slidesPerView: 3,
+                                    spaceBetween: 20,
+                                },
+                                640: {
+                                    slidesPerView: 3,
+                                },
+                                768: {
+                                    slidesPerView: 5,
+                                },
+                                1024: {
+                                    slidesPerView: 6,
+                                },
+                                1300: {
+                                    slidesPerView: 7,
+                                },
+                            }}
+                            loop
+                            speed={2000}
+                            modules={[Autoplay]}
+                        >
+                            {brandsData.map((logo: any, i: number) => {
+                                const key = logoKey(logo, i);
+                                const src = toLogoSrc(logo?.logo?.data?.attributes?.url);
+                                
+                                return (
+                                    <SwiperSlide key={`third-${key}`}>
+                                        <div className={styles.brandItem}>
+                                            <Image
+                                                height={33}
+                                                width={200}
+                                                src={src}
+                                                alt={'brandLogo'}
+                                                loading="lazy"
+                                            />
+                                        </div>
+                                    </SwiperSlide>
+                                );
+                            })}
+                        </Swiper>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default BrandLogo;

components/MyAppLanding/component/BuildCustomizedApp/BuildCustomizedApp.tsx

@@ -0,0 +1,245 @@
+import { ReactNode, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import global from 'theme/global/global.module.scss';
+import styles from './buildCustomizedApp.module.scss';
+
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Box from '@mui/material/Box';
+import { FaCheckCircle } from 'react-icons/fa';
+import Image from 'next/image';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import CallToAction from '../callToAction/CallToAction';
+import { Header, Module } from '@/interfaces/shared/shared';
+import rehypeRaw from 'rehype-raw';
+
+interface TabPanelProps {
+    children?: ReactNode;
+    index: number;
+    value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+    const { children, value, index, ...other } = props;
+
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`vertical-tabpanel-${index}`}
+            aria-labelledby={`vertical-tab-${index}`}
+            {...other}
+        >
+            {value === index && <Box className={styles.panel_area}>{children}</Box>}
+        </div>
+    );
+}
+
+function a11yProps(index: number) {
+    return {
+        id: `vertical-tab-${index}`,
+        'aria-controls': `vertical-tabpanel-${index}`,
+    };
+}
+interface BuildCustomizedAppInterface {
+    header: Header;
+    module: Module[];
+}
+
+interface businessProspectsDataInterface {
+    // productivityData: ProductivityInterface;
+    extraClass?: string;
+    props: BuildCustomizedAppInterface;
+    id:string;
+}
+
+const BuildCustomizedApp = ({ extraClass, props, id }: businessProspectsDataInterface) => {
+    const { header, module } = props;
+    const [value, setValue] = useState(0);
+
+    const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+        setValue(newValue);
+    };
+
+    const raw = props?.header?.titleColor ?? '';
+    const trimmed = typeof raw === 'string' ? raw.replace(/[;]\s*$/, '').trim() : '';
+    const normalized =
+        trimmed.startsWith('--') ? `var(${trimmed.replace(/:$/, '')})` : trimmed;
+    const headingColor = normalized
+        ? ({ ['--heading_color' as any]: normalized } as React.CSSProperties)
+        : undefined;
+    const backgroundRaw = header?.background ?? '';
+    const backgroundTrimmed = typeof backgroundRaw === 'string' ? backgroundRaw.replace(/[;]\s*$/, '').trim() : '';
+    const backgroundNormalized =
+        backgroundTrimmed.startsWith('--') ? `var(${backgroundTrimmed.replace(/:$/, '')})` : backgroundTrimmed;
+        
+    const backgroundStyle = backgroundNormalized
+        ? ({ ['background' as any]: backgroundNormalized } as React.CSSProperties)
+        : undefined;
+
+    return (
+        <>
+            <section
+                id={id}
+                style={backgroundStyle}
+                className={`${styles.compelling_sec} ${global.section_padding} ${global.padding_block2}
+                 ${extraClass && styles[extraClass]}`}
+            >
+                <div className={`${styles.custom_container} ${global.container}`}>
+                    <div className={`${styles.inner_compelling}`}>
+                        <div className={styles.content_box}>
+                            <div className={styles.content}>
+                                {header?.pageTitle && (
+                                    <div className={styles.content_chip}>
+                                        {header?.pageTitle || 'Build Your Very Own Custom booking app'}
+                                    </div>
+                                )}
+                                {header?.title && (
+                                <div
+                                    className={`${global.heading1} ${styles.title}`}
+                                    style={headingColor}
+                                   
+                                >
+                                    <ReactMarkdown  
+                                    rehypePlugins={[rehypeRaw as any]}
+                                    skipHtml={false}>
+                                        {header?.title || ''}
+                                    </ReactMarkdown>
+                                </div>
+                                )}
+                                {header?.content && (
+                                <div className={`${global.details1} ${styles.para}`}>
+                                    <ReactMarkdown  
+                                    rehypePlugins={[rehypeRaw as any]}
+                                    skipHtml={false}>
+                                        {header?.content}
+                                    </ReactMarkdown>
+                                </div>
+                                )}
+                            </div>
+                            <Image
+                                src={UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_LOGO_BG}
+                                width={389}
+                                height={278}
+                                alt="logo"
+                                className={styles.logo_bg}
+                            />
+                        </div>
+
+                        <div className={styles.inner_content}>
+                            <Box sx={{ flexGrow: 1, bgcolor: 'background.paper', display: 'flex', height: 680 }}>
+                                <Tabs
+                                    orientation="vertical"
+                                    variant="scrollable"
+                                    value={value}
+                                    onChange={handleChange}
+                                    aria-label="Vertical tabs example"
+                                    sx={{ borderRight: 1, borderColor: 'divider' }}
+                                >
+                                    {module?.map((tab: Module, index: number) => (
+                                        <Tab
+                                            key={index}
+                                            label={tab?.moduleText}
+                                            icon={<span>{`${tab?.moduleNumber}`}</span>}
+                                            {...a11yProps(index)}
+                                            style={
+                                                {
+                                                    '--bg_color': tab.tabBg || '#F8F8F8 ',
+                                                    '--bg_pre_color': '#035D87',
+                                                } as React.CSSProperties as any
+                                            }
+                                        />
+                                    ))}
+                                </Tabs>
+
+                                {module?.map((tab: Module, index: number) => (
+                                    <TabPanel key={index} value={value} index={index}>
+                                        <div
+                                            className={`${styles.panel_box}`}
+                                            style={
+                                                {
+                                                    '--bg_color': '#035D87',
+                                                } as React.CSSProperties as any
+                                            }
+                                        >
+                                            <div className={`${styles.box}`}>
+                                                <div className={`${styles.content}`}>
+                                                    {tab?.moduleText && (
+                                                        <div className={`${global.head4} ${styles.tabTitle}`}>
+                                                            <ReactMarkdown
+                                                                rehypePlugins={[rehypeRaw as any]}
+                                                                skipHtml={false}
+                                                            >
+                                                                {tab?.moduleText || ''}
+                                                            </ReactMarkdown>
+                                                        </div>
+                                                    )}
+                                                    <div className={`${styles.number}`}>{tab?.moduleNumber}</div>
+                                                </div>
+                                                <div key={index} className={`${styles.techBox}`}  style={
+                                                {
+                                                    '--bg_color': tab.tabBg || '#F8F8F8 ',
+                                                } as React.CSSProperties as any
+                                            }>
+                                                    {tab?.moduleContent && (
+                                                    <div
+                                                        className={`${styles.innerContent}`}
+                                                    >
+                                                     
+                                                            <ReactMarkdown 
+                                                            rehypePlugins={[rehypeRaw as any]}
+                                                            skipHtml={false}>
+                                                                {tab?.moduleContent}
+                                                            </ReactMarkdown>
+                                                        </div>
+                                                    )}
+                                                </div>
+                                                {/* <div key={index} className={`${styles.techBox}`}>
+                                                    <div className={`${styles.innerContent}`}>
+                                                        <ul>
+                                                            <li>
+                                                                <i className={`${styles.icon}`}>
+                                                                    <FaCheckCircle />
+                                                                </i>
+                                                                <div className={`${global.body1}`}>
+                                                                    <h4>Easy Registration</h4>
+                                                                    <p>
+                                                                        Allowing users to access the TikTok like
+                                                                        application with the “one-click login” feature
+                                                                        with an easy and simple registration process
+                                                                        through the email address and contact number.
+                                                                    </p>
+                                                                </div>
+                                                            </li>
+                                                            <li>
+                                                                <i className={`${styles.icon}`}>
+                                                                    <FaCheckCircle />
+                                                                </i>
+                                                                <div className={`${global.body1}`}>
+                                                                    <h4>Easy Registration</h4>
+                                                                    <p>
+                                                                        Allowing users to access the TikTok like
+                                                                        application with the “one-click login” feature
+                                                                        with an easy and simple registration process
+                                                                        through the email address and contact number.
+                                                                    </p>
+                                                                </div>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                </div> */}
+                                            </div>
+                                        </div>
+                                    </TabPanel>
+                                ))}
+                            </Box>
+                        </div>
+                    </div>
+                </div>
+                
+            </section>
+        </>
+    );
+};
+export default BuildCustomizedApp;

components/MyAppLanding/component/BuildCustomizedApp/buildCustomizedApp.module.scss

@@ -0,0 +1,376 @@
+@use 'theme/sass' as *;
+
+.compelling_sec {
+    width: 100%;
+    background: hsl(var(--AppM_clr_bg_primary));
+    // background: var(--clr_new_bg_dark_octagon_ocean);
+    .custom_container {
+        .inner_compelling {
+            width: 100%;
+            .content_box {
+                width: 100%;
+                position: relative;
+                z-index: 0;
+                .content {
+                    width: 100%;
+                    .content_chip {
+                        width: fit-content;
+                        line-height: rem(24);
+                        background: hsl(var(--AppM_clr_bg_blue_chip));
+                        padding-block: rem(6);
+                        padding-inline: rem(16);
+                        border-radius: rem(20);
+                        min-height: rem(34);
+                        @include displayFlex(row, center, flex-start);
+                        color: hsl(var(--AppMobile_clr_text_chip));
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                        & > * {
+                            color: hsl(var(--AppMobile_clr_text_chip));
+                            font-weight: var(--fw_medium);
+                            font-family: var(--fn_accent);
+                        }
+                    }
+                    .title {
+                        width: min(100%, rem(800));
+                        margin-block-start: rem(16);
+                        color: var(--clr_vzit_offer_text2);
+                        font-weight: var(--fw_bold);
+                        font-family: var(--fn_accent);
+                        & > * {
+                            color: var(--clr_vzit_offer_text2);
+                            font-weight: var(--fw_bold);
+                        }
+                        strong {
+                            @include textGradient(var(--heading_color));
+                        }
+                    }
+                    .para {
+                        width: min(100%, rem(1000));
+                        margin-block-start: rem(24);
+                        color: var(--clr_vzit_offer_text);
+                        & > * {
+                            color: var(--clr_vzit_offer_text);
+                        }
+                    }
+                }
+                .logo_bg {
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    width: rem(389);
+                    height: rem(278);
+                    z-index: -1;
+                    @include max(575px) {
+                        width: 100%;
+                        height: rem(200);
+                    }
+                }
+            }
+
+            .inner_content {
+                width: 100%;
+                margin-block-start: rem(60);
+
+                div[role='tabpanel'] {
+                    width: 100%;
+                    flex: 1;
+                }
+                :global(.MuiBox-root) {
+                    gap: 30px;
+                    border-radius: 20px;
+                    background: transparent;
+                    padding: 0;
+                    width: 100%;
+                    height: 100%;
+                    @include max(1023px) {
+                        flex-direction: column;
+                        height: auto;
+                    }
+                    @include max(576px) {
+                        padding: 0;
+                    }
+                }
+                :global(.MuiTabs-root) {
+                    background: transparent;
+                    max-width: 350px;
+                    border-start-start-radius: 0;
+                    border-end-start-radius: 0;
+                    width: 100%;
+                    // padding-block: 30px;
+                    border: none;
+                    @include max(1023px) {
+                        max-width: 100%;
+                        border-start-start-radius: 0;
+                        border-end-start-radius: 0;
+                        min-height: 100%;
+                        height: 100%;
+                    }
+                    :global(.MuiTabScrollButton-root) {
+                        display: none;
+                    }
+                    :global(.MuiTabs-scroller) {
+                        :global(.MuiTabs-flexContainer) {
+                            gap: 15px;
+                            @include max(1023px) {
+                                flex-direction: row;
+                                // flex-wrap: wrap;
+                                overflow-x: auto;
+                                gap: 20px;
+                            }
+                            :global(.MuiButtonBase-root) {
+                                flex-direction: row;
+                                justify-content: flex-start;
+                                min-height: 50px;
+                                max-width: 100%;
+                                width: 100%;
+                                padding-inline: 0px 10px;
+                                gap: 20px;
+                                color: var(--clr_vzit_offer_text2);
+                                padding-block: 0px;
+                                text-align: left;
+                                text-transform: capitalize;
+                                font-size: 18px;
+                                font-weight: 700;
+                                transition: var(--transition_03);
+                                border: 1px solid hsl(var(--AppM_border_01));
+                                border-radius: rem(10);
+                                font-family: var(--fn_accent);
+                                background: var(--bg_color);
+
+                                img {
+                                    margin-bottom: 0;
+                                }
+
+                                :global(.MuiTab-iconWrapper) {
+                                    margin: 0;
+                                    min-width: rem(62);
+                                    min-height: rem(90);
+                                    @include displayFlex(column, center, center);
+                                    background: var(--bg_pre_color);
+                                    border-radius: rem(10);
+                                    color: var(--clr_text_secondary);
+                                    font-size: rem(26);
+                                    @include max(1023px) {
+                                        min-height: rem(50);
+                                    }
+                                }
+
+                                @include max(1023px) {
+                                    width: fit-content;
+                                    padding: rem(10);
+                                    font-size: scaleValue(12px, 16px);
+                                    gap: 6px;
+                                }
+                                @include max(1023px) {
+                                    width: 40%;
+                                    margin-block-end: rem(10);
+                                    flex-direction: column;
+                                    text-align: center;
+                                }
+
+                                &:global(.Mui-selected) {
+                                    background: linear-gradient(90deg, #12aff2 0%, #1ec0b7 100%);
+                                    color: var(--clr_text_secondary);
+                                    border-radius: 10px;
+                                    img {
+                                        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
+                                            hue-rotate(152deg) brightness(103%) contrast(103%);
+                                    }
+                                    :global(.MuiTab-iconWrapper) {
+                                        background: hsla(0, 0%, 100%, 0.2);
+                                    }
+                                }
+
+                                &:hover {
+                                    background: linear-gradient(90deg, #12aff2 0%, #1ec0b7 100%);
+                                    color: var(--clr_text_secondary);
+                                    border-radius: 10px;
+                                    img {
+                                        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
+                                            hue-rotate(152deg) brightness(103%) contrast(103%);
+                                    }
+                                    :global(.MuiTab-iconWrapper) {
+                                        background: hsla(0, 0%, 100%, 0.2);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                :global(.MuiTabs-indicator) {
+                    background-color: var(--clr_new_sky_green);
+                    display: none;
+                    @include max(768px) {
+                        display: none;
+                    }
+                }
+
+                .tab_item {
+                    font-weight: var(--fw_medium);
+                    font-family: var(--fn_accent);
+                    color: var(--clr_text_new_gray_blue);
+                    text-transform: capitalize;
+                }
+
+                .panel_box {
+                    @include displayFlex(column, flex-start, flex-start);
+                    border-radius: rem(16);
+                    overflow: hidden;
+                    position: relative;
+                    width: 100%;
+                    height: 100%;
+
+                    @include max(570px) {
+                        padding-inline: 0;
+                    }
+
+                    .image_box {
+                        position: relative;
+                        @include displayFlex(row, center, center);
+                        width: 100%;
+                        img {
+                            width: 100%;
+                            height: fit-content;
+                        }
+                    }
+
+                    .box {
+                        @include displayFlex(column, flex-start, space-between);
+                        padding: 0;
+                        width: 100%;
+                        position: relative;
+                        backdrop-filter: blur(20px);
+                        height: 100%;
+
+                        .content {
+                            position: relative;
+                            z-index: 0;
+                            width: 100%;
+                            padding: rem(15) rem(24) rem(40);
+                            @include displayFlex(row, center, space-between);
+                            gap: rem(20);
+                            background: var(--bg_color);
+
+                            @include max(991px) {
+                                max-width: 100%;
+                            }
+                            .tabTitle {
+                                color: var(--clr_text_secondary);
+                                min-height: rem(60);
+                                & > * {
+                                    font-size: 26px;
+                                    line-height: 32px;
+                                }
+                            }
+                            p {
+                                font-weight: var(--fw_regular);
+                                color: var(--clr_text_secondary);
+                                font-size: 14px;
+                                line-height: 24px;
+                                padding-block: 15px 10px;
+                            }
+
+                            .number {
+                                position: relative;
+                                font-size: 50px;
+                                line-height: 60px;
+                                font-weight: var(--fw_bold);
+                                @include textGradient(linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%));
+                            }
+                        }
+                        .techBox {
+                            width: 100%;
+                            margin-block-start: -30px;
+                            position: relative;
+                            z-index: 1;
+                            padding: rem(30) rem(34);
+                            background: var(--bg_color);
+                            border: 1px solid var(--clr_border_secondary);
+                            border-radius: rem(16);
+                            flex-grow: 1;
+
+                            .innerContent {
+                                max-height: rem(426);
+                                height: 100%;
+                                overflow-y: auto;
+                                color: var(--clr-para);
+                                font-weight: var(--fw_semiBold);
+                                font-family: var(--fn_accent);
+                                padding-right: rem(10);
+                                &::-webkit-scrollbar-track {
+                                    border-radius: rem(2);
+                                    background-color: #d4d4d4;
+                                }
+
+                                &::-webkit-scrollbar {
+                                    width: rem(2);
+                                    border-radius: rem(2);
+                                    background-color: #242424;
+                                }
+
+                                &::-webkit-scrollbar-thumb {
+                                    border-radius: rem(2);
+                                    background-color: #242424;
+                                }
+                                p {
+                                    margin-block-end: rem(16);
+                                }
+                                ul {
+                                    li {
+                                        font-weight: var(--fw_medium);
+                                        font-family: var(--fn_accent);
+                                        @include displayFlex(row, flex-start, flex-start);
+                                        gap: rem(10);
+                                        color: var(--clr_vzit_offer_text);
+                                        font-size: rem(16);
+                                        line-height: 1.3;
+                                        margin-block-start: rem(18);
+                                        position: relative;
+                                        padding-inline-start: rem(30);
+                                        line-height: 1.6;
+
+                                        &:first-child {
+                                            margin-block-start: 0;
+                                        }
+
+                                        & > * {
+                                            color: var(--clr_text_primary);
+                                            font-weight: var(--fw_bold);
+                                            font-family: var(--fn_accent);
+                                            line-height: 1.6;
+                                        }
+                                        & > * > span {
+                                            color: hsl(var(--AppM_clr_text_para));
+                                            font-family: var(--fn_accent);
+                                            font-weight: var(--fw_medium);
+
+                                            & > * {
+                                                color: hsl(var(--AppM_clr_text_para));
+                                            }
+                                        }
+                                        .icon {
+                                            color: #b9dfed;
+                                        }
+                                        &::before {
+                                            content: '';
+                                            position: absolute;
+                                            top: rem(5);
+                                            left: 0;
+                                            width: rem(15);
+                                            height: rem(15);
+                                            background: url('../../../../public/assets/images/myAppmobile/checked.png')
+                                                no-repeat center center;
+                                            filter: brightness(0) saturate(100%) invert(89%) sepia(11%) saturate(707%)
+                                                hue-rotate(162deg) brightness(95%) contrast(95%);
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/CaseStudy/CaseStudy.tsx

@@ -0,0 +1,158 @@
+import React, { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import global from 'theme/global/global.module.scss';
+import styles from './caseStudy.module.scss';
+import Link from 'next/link';
+import { MdOutlineArrowOutward } from 'react-icons/md';
+import CallToAction from '../callToAction/CallToAction';
+import { Header, KeyNote, CaseStudyInterface, CaseStudyData } from '@/interfaces/shared/shared';
+import rehypeRaw from 'rehype-raw';
+
+function decodeHTMLEntities(text: string) {
+    return text
+        .replace(/&/g, '&')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&quot;/g, '"')
+        .replace(/&#039;/g, "'");
+}
+
+interface propInterface {
+    header: Header;
+    case_studies: CaseStudyInterface;
+}
+
+interface requiredProps{
+    props: propInterface;
+    id: string;
+}
+
+const CaseStudy = ({ props, id }: requiredProps) => {
+    const [isActiveIndex, setIsActiveIndex] = useState(false);
+    const [isMobileDevice, setIsMobileDevice] = useState(false);
+
+    const handleClick = () => {
+        if (isMobileDevice) {
+            setIsActiveIndex(!isActiveIndex);
+        }
+    };
+    useEffect(() => {
+        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+        setIsMobileDevice(isMobile);
+    }, []);
+    const header = props?.header || {};
+    const caseStudy = props?.case_studies?.data || [];
+    return (
+        <section
+            id={id}
+            className={`${styles.devicesCaseStudy} ${global.padding_block2} ${global.section_padding}`}
+        >
+            <div className={`${styles.customContainer} ${global.container}`}>
+                <div className={`${styles.inner_content}`}>
+                    <div className={`${styles.textContent}`}>
+                        {header?.pageTitle && (
+                            <div className={styles.content_chip}>{header?.pageTitle}</div>
+                        )}
+                        {header?.title && (
+                        <div
+                            className={`${global.heading1_1} ${styles.top_head}`}
+                            style={
+                                {
+                                    '--heading_color': header.titleColor ? header.titleColor : 'red',
+                                } as React.CSSProperties as any
+                            }
+                        >
+                            <ReactMarkdown
+                                rehypePlugins={[rehypeRaw as any]}
+                                skipHtml={false}
+                            >
+                                {header.title || ''}
+                            </ReactMarkdown>
+                        </div>)}
+                        {header?.content && (
+                        <div
+                            className={`${global.heading6} ${styles.sub_text}`}
+                            
+                        >
+                            <ReactMarkdown
+                                rehypePlugins={[rehypeRaw as any]}
+                                skipHtml={false}
+                            >
+                                {header?.content || ''}
+                            </ReactMarkdown>
+                        </div>)}
+                    </div>
+                    <div className={`${styles.devices_CaseStudy_content}`}>
+                        {caseStudy?.length > 0 &&
+                            caseStudy?.map((item: CaseStudyData, index: number) => {
+                                return (
+                                <Link
+                                    href={`${item?.attributes?.seo?.ogURL}`}
+                                    key={index}
+                                    className={`${styles.study_content_card}`}
+                                >
+                                    <div className={`${styles.study_content_card_img}`}>
+                                        
+                                    {item?.attributes?.cardImage?.data?.attributes?.url && (
+                                        <img
+                                        src={
+                                          item.attributes.cardImage.data.attributes.url.startsWith('http://') ||
+                                          item.attributes.cardImage.data.attributes.url.startsWith('https://')
+                                            ? item.attributes.cardImage.data.attributes.url
+                                            : item.attributes.cardImage.data.attributes.url.startsWith('/')
+                                              ? `${process.env.NEXT_PUBLIC_API}${item.attributes.cardImage.data.attributes.url}`
+                                              : `${process.env.NEXT_PUBLIC_API}/${item.attributes.cardImage.data.attributes.url}`
+                                        }
+                                        alt={item?.attributes?.seo?.ogTitle || 'image'}
+                                        className={styles.case_study_img}
+                                      />
+                                      
+                                    )}
+                                    </div>
+                                    <div className={`${styles.study_content_card_details}`}>
+                                        <div>
+                                            {item?.attributes?.projectName && (
+                                                <div className={`${global.heading6} ${styles.card_title}`}>
+                                                    <ReactMarkdown
+                                                        rehypePlugins={[rehypeRaw as any]}
+                                                        skipHtml={false}
+                                                    
+                                                    >
+                                                        {item?.attributes?.projectName || ''}
+                                                    </ReactMarkdown>
+                                                </div>
+                                            )}
+                                            {item?.attributes?.shortDetails && (
+                                                <div className={`${global.details1} ${styles.card_details2}`}>
+                                                    <ReactMarkdown
+                                                        rehypePlugins={[rehypeRaw as any]}
+                                                        skipHtml={false}
+                                                    >
+                                                        {item?.attributes?.shortDetails || ''}
+                                                    </ReactMarkdown>
+                                                </div>
+                                            )}
+                                        </div>
+                                        <div className={styles.display_foot}>
+                                            <p className={`${global.details1} ${styles.card_more}`}>View More</p>
+                                            <span className={styles.read_more}>
+                                                <MdOutlineArrowOutward />
+                                            </span>
+                                        </div>
+                                    </div>
+                                </Link>
+                                )
+                            })}
+                    </div>
+                    <div className={`${styles.read_btn}`}>
+                        <Link href="/case-studies" className={`${global.button} ${styles.btn_read}`}>
+                            Read more
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default CaseStudy;

components/MyAppLanding/component/CaseStudy/caseStudy.module.scss

@@ -0,0 +1,183 @@
+@use 'theme/sass' as *;
+
+.devicesCaseStudy {
+    width: 100%;
+    position: relative;
+    background-color: var(--clr_background_primary);
+    z-index: 1;
+
+    .customContainer {
+        position: relative;
+        z-index: 3;
+        .inner_content {
+            width: 100%;
+            .textContent {
+                width: 100%;
+                text-align: center;
+                max-width: rem(1000);
+                margin-inline: auto;
+                .content_chip {
+                    width: fit-content;
+                    line-height: rem(24);
+                    background: hsl(var(--AppMobile_clr_chip));
+                    padding-block: rem(6);
+                    padding-inline: rem(16);
+                    border-radius: rem(20);
+                    min-height: rem(34);
+                    @include displayFlex(row, center, center);
+                    color: hsl(var(--AppMobile_clr_text_chip));
+                    font-weight: var(--fw_medium);
+                    font-family: var(--fn_accent);
+                    margin: 0 auto 20px;
+                    & > * {
+                        color: hsl(var(--AppMobile_clr_text_chip));
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                    }
+                }
+                .top_head {
+                    color: var(--clr_vzit_offer_text2);
+                     
+                    font-family: var(--fn_accent);
+                    & > * {
+                        color: var(--clr_vzit_offer_text2);
+                         
+                        font-family: var(--fn_accent);
+                        strong {
+                            @include textGradient(var(--heading_color));
+                        }
+                    }
+                    strong {
+                        @include textGradient(var(--heading_color));
+                    }
+                }
+                .sub_text {
+                    color: var(--clr-para);
+                    margin-block-start: rem(20);
+                    font-weight: var(--fw_regular);
+                    & > * {
+                        color: var(--clr-para);
+                        font-weight: var(--fw_regular);
+                    }
+                }
+            }
+            .devices_CaseStudy_content {
+                width: 100%;
+                margin-block-start: scaleValue(20px, 50px);
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+                width: 100%;
+                grid-gap: 30px;
+                gap: 30px;
+                @include max(767px) {
+                    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+                }
+                .study_content_card {
+                    width: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: flex-start;
+                    justify-content: flex-start;
+                    overflow: hidden;
+                    border-radius: 17px;
+                    border: 1px solid var(--sub_land_border_clr01);
+                    background: var(--clr_background_secondary14);
+                    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04);
+                    .study_content_card_img {
+                        width: 100%;
+                        overflow: hidden;
+                        transition: all 0.4s ease-in-out;
+                        img {
+                            width: 100%;
+                            height: 100%;
+                            transition: all 0.4s ease-in-out;
+                        }
+                    }
+                    .study_content_card_details {
+                        width: 100%;
+                        display: flex;
+                        flex-direction: column;
+                        align-items: flex-start;
+                        justify-content: space-between;
+                        gap: 20px;
+                        padding-block: 22px;
+                        padding-inline: scaleValue(20px, 30px);
+                        flex-grow: 1;
+                        .card_title {
+                            color: var(--clr_conver);
+                            font-weight: var(--fw_semiBold);
+                            text-transform: capitalize;
+                            & > * {
+                                color: var(--clr_conver);
+                                font-weight: var(--fw_semiBold);
+                                text-transform: capitalize;
+                            }
+                        }
+                        .card_details2 {
+                            color: var(--clr_case_text11);
+                            font-weight: var(--fw_regular);
+                            overflow: hidden;
+                            & > * {
+                                color: var(--clr_case_text11);
+                                font-weight: var(--fw_regular);
+                                margin-block-start: 15px;
+                                overflow: hidden;
+                            }
+                        }
+                        .display_foot {
+                            width: 100%;
+                            @include displayFlex(row, center, space-between);
+                            .card_more {
+                                color: var(--clr_conver);
+                                font-weight: var(--fw_medium);
+                                font-family: var(--fn_accent);
+                                & > * {
+                                    color: var(--clr_conver);
+                                    font-weight: var(--fw_medium);
+                                    font-family: var(--fn_accent);
+                                }
+                            }
+                            .read_more {
+                                color: var(--clr_new_bg_blue_opacity);
+                                font-size: 25px;
+                                display: flex;
+                            }
+                        }
+                    }
+                    &:hover {
+                        .study_content_card_img {
+                            img {
+                                transform: scale(1.2);
+                            }
+                        }
+                    }
+                }
+            }
+            .read_btn {
+                margin-block-start: rem(60);
+                text-align: center;
+                width: 100%;
+                @include displayFlex(row, center, center);
+                .btn_read {
+                    min-width: rem(170);
+                    height: rem(60);
+                    background: transparent;
+                    border-radius: 10px;
+                    border: 1px solid var(--sub_land_border_clr02) !important;
+                    box-shadow: none;
+                    justify-content: center;
+                    font-weight: var(--fw_bold);
+                    color: var(--clr_conver);
+                    transition: var(--transition_02);
+                    margin: 0;
+                    text-transform: capitalize;
+                    &:hover {
+                        background: linear-gradient(93.74deg, #11aef1 11.73%, #1ec0b7 79.95%);
+                        border: 2px solid transparent !important;
+                        color: var(--clr_text_secondary);
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/ClientTestimonials/ClientTestimonials.tsx

@@ -0,0 +1,178 @@
+
+import styles from './clientTestimonials.module.scss';
+import global from 'theme/global/global.module.scss';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation } from 'swiper';
+
+import {  useRef, useState } from 'react';
+
+import { PLAY_ICON, STAR_RATING, TESTIMONIAL_ARROW_LEFT, TESTIMONIAL_ARROW_RIGHT } from '@/constants/svgConstant';
+import { Header, KeyNote, Video } from '@/interfaces/shared/shared';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+interface starInterface {
+    stars: number;
+}
+
+interface ClientTestimonialInterface {
+    header: Header;
+    video: Video;
+    notes: KeyNote[];
+}
+
+interface RequiredProps{
+    props: ClientTestimonialInterface;
+    extraClass:string;
+    id: string;
+}
+function RenderStarRating({ stars }: starInterface) {
+    const arr = new Array(stars);
+    return (
+        <>
+            {arr.map((_, i) => {
+                return <STAR_RATING key={i} />;
+            })}
+        </>
+    );
+}
+
+export default function ClientTestimonials({ extraClass, props, id }: RequiredProps) {
+    const { header, video, notes } = props;
+    const videoRef = useRef<HTMLVideoElement | null>(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+
+    // Function to handle video play on hover
+    const handleMouseEnter = () => {
+        if (videoRef.current) {
+            videoRef.current.play();
+            setIsPlaying(true);
+        }
+    };
+
+    // Function to handle video pause when the mouse leaves
+    const handleMouseLeave = () => {
+        if (videoRef.current) {
+            videoRef.current.pause();
+            // videoRef.current.currentTime = 0; // Optional: reset video to start
+            setIsPlaying(false);
+        }
+    };
+    return (
+        <section id={id} className={`${styles.testimonial_sec} ${global.section_padding}`}
+            style={
+                {
+                    background: header?.background ? header?.background : '',
+                } as React.CSSProperties as any
+            }
+        >
+            <div className={`${styles.custom_container} ${global.container}`}>
+                <div className={`${styles.inner_container} ${global.padding_block}`}>
+                    <div className={styles.heading_content}>
+                        {header?.pageTitle && (
+                            <div className={styles.content_chip}>{header?.pageTitle}</div>
+                        )}
+                        {header?.title && (
+
+                        <div
+                            className={`${styles.special_title} ${global.tt_heading1_semibold}`}
+                            style={
+                                {
+                                    '--heading_color': header.titleColor ? header.titleColor : '',
+                                } as React.CSSProperties as any
+                            }
+                        
+                        >
+                          <ReactMarkdown
+                                rehypePlugins={[rehypeRaw as any]}
+                                skipHtml={false}
+                            >
+                                {header.title || ''}
+                            </ReactMarkdown>
+                        </div>
+                        )}
+                    </div>
+                    <div className={styles.testimonial_wrapper}>
+                        <div className={`${styles.review_leftblk}`}>
+                            <div className={`${styles.client_video}`}>
+                               {video?.video?.data?.attributes?.url && (
+                                
+                                 <video
+                                    src={video?.video?.data?.attributes?.url}
+                                    ref={videoRef} // Attach the ref to the video element
+                                    onMouseEnter={handleMouseEnter} // Play video on hover
+                                    onMouseLeave={handleMouseLeave} // Pause video when not hovering
+                                    muted // Ensure the video is muted (required by many browsers for autoplay)
+                                /> 
+                               )}
+                                <div className={styles.video_details}>
+                                    <div className={`${styles.data_details}`}>
+                                        {video?.name && (
+                                        <h4 className={`${global.manrope} ${global.details1}`}>{video.name}</h4>
+                                        )}
+                                        {video?.content && (
+                                        <div
+                                            className={`${global.manrope} ${global.details1} ${styles.subdata_details}`}
+                                        >
+                                            <h4>{video.content}, {video.location}</h4>
+                                        </div>
+                                        )}
+                                    </div>
+                                    <div className={`${styles.client_video_play}`}>
+                                        <i className={styles.icon}>
+                                            <PLAY_ICON />
+                                        </i>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className={styles.testimonial_box}>
+                            {notes?.map((item: KeyNote, i: number) => (
+                                
+                                <div className={`${styles.review_sec}`} key={i}>
+                                    <div className={`${styles.review_rightblk}`}>
+                                        <div className={`${global.tt_heading6}`}>
+                                            <ReactMarkdown
+                                                rehypePlugins={[rehypeRaw as any]}
+                                                skipHtml={false}
+                                            >
+                                                {item.noteBody || ''}
+                                            </ReactMarkdown>
+                                        </div>
+                                        <div className={`${styles.client_data}`}>
+                                            <div className={styles.client_img}>
+                                                <img
+                                                    src={item.noteImage?.data?.attributes?.url}
+                                                    width={50}
+                                                    height={50}
+                                                />
+                                            </div>
+                                            <div className={`${styles.data_details}`}>
+                                                {item?.noteTitle && (
+                                                <h4 className={`${global.manrope} ${global.body3}`}>{item.noteTitle.split(" ")[0]} </h4>
+                                                )}
+                                                {item?.noteTitle && (
+                                                <div
+                                                    className={`${global.manrope} ${global.body3} ${styles.subdata_details}`}
+                                                >
+                                                    <h4>{item.noteTitle.split(" ")[1]}, {item.noteTitle.split(" ")[2]}</h4>
+                                                </div>
+                                                )}
+                                            </div>
+                                        </div>
+                                        {/* <div className={styles.arrow_cover}>
+                                                        <TESTIMONIAL_ARROW_LEFT />
+                                                        <TESTIMONIAL_ARROW_RIGHT />
+                                                    </div> */}
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}

components/MyAppLanding/component/ClientTestimonials/clientTestimonials.module.scss

@@ -0,0 +1,261 @@
+@use 'theme/sass' as *;
+
+.testimonial_sec {
+    width: 100%;
+    position: relative;
+    z-index: 1;
+    background: var(--clr_background_primary);
+
+    .custom_container {
+        .inner_container {
+            width: 100%;
+            .heading_content {
+                width: 100%;
+                text-align: center;
+                max-width: 864px;
+                margin-inline: auto;
+                .content_chip {
+                    width: fit-content;
+                    line-height: rem(24);
+                    background: hsl(var(--AppMobile_clr_chip));
+                    padding-block: rem(6);
+                    padding-inline: rem(16);
+                    border-radius: rem(20);
+                    min-height: rem(34);
+                    @include displayFlex(row, center, center);
+                    color: hsl(var(--AppMobile_clr_text_chip));
+                    font-weight: var(--fw_medium);
+                    font-family: var(--fn_accent);
+                    margin: 0 auto 20px;
+                    & > * {
+                        color: hsl(var(--AppMobile_clr_text_chip));
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                    }
+                }
+                .special_title {
+                    color: var(--text_clr_dark_blue);
+                    font-weight: var(--fw_semiBold);
+                    font-family: var(--lnd_font_primary);
+                    & > * {
+                        color: var(--text_clr_dark_blue);
+                        font-weight: var(--fw_semiBold);
+                        font-family: var(--lnd_font_primary);
+                    }
+                    strong {
+                        @include textGradient(var(--heading_color));
+                    }
+                }
+                .sub_text {
+                    margin-block-start: 10px;
+                    color: var(--text_clr_shade_grey);
+                    font-weight: var(--lnd_fw_regular);
+                    & > * {
+                        color: var(--text_clr_shade_grey);
+                        font-weight: var(--lnd_fw_regular);
+                    }
+                }
+            }
+            .testimonial_wrapper {
+                padding-block-start: scaleValue(40px, 70px);
+                width: 100%;
+                display: grid;
+                grid-template-columns: 500px calc(100% - 500px);
+                gap: rem(20);
+                & :global(.swiper-horizontal) {
+                    & :global(.swiper-slide) {
+                        height: auto;
+                    }
+                    :global(.swiper-button-prev) {
+                        left: 40px;
+                        bottom: 20px;
+                        top: inherit;
+                        width: 50px;
+                        height: 50px;
+                        border-radius: 50%;
+                        font-size: 14px;
+                        color: var(--clr_text_primary_10);
+                        background: var(--clr_background_primary);
+                        box-shadow: var(--shadow_secondary10);
+                        &::after {
+                            font-size: 14px;
+                        }
+                        @include max(1023px) {
+                            left: calc(50% - 70px);
+                            right: inherit;
+                            margin-inline: auto;
+                        }
+                    }
+                    :global(.swiper-button-next) {
+                        bottom: 20px;
+                        left: 100px;
+                        top: inherit;
+                        width: 50px;
+                        height: 50px;
+                        border-radius: 50%;
+                        font-size: 14px;
+                        color: var(--clr_text_primary_10);
+                        background: var(--clr_background_primary);
+                        box-shadow: var(--shadow_secondary10);
+                        &::after {
+                            font-size: 14px;
+                        }
+                        @include max(1023px) {
+                            left: inherit;
+                            right: calc(50% - 70px);
+                            margin-inline: auto;
+                        }
+                    }
+                }
+
+                @include max(1023px) {
+                    display: block;
+                }
+            }
+            .testimonial_box {
+                width: 100%;
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+                gap: rem(14);
+                @include max(1023px) {
+                    padding-block-start: rem(40);
+                }
+                @include max(575px) {
+                    grid-template-columns: 1fr;
+                }
+            }
+            .review_leftblk {
+                width: 100%;
+                background-color: var(--bg_clr_white);
+                border-radius: 20px;
+                overflow: hidden;
+                @include max(880px) {
+                    max-width: 400px;
+                    margin: 0 auto;
+                }
+                @include max(575px) {
+                    max-width: 100%;
+                }
+                @include max(1023px) {
+                    max-width: 100%;
+                }
+                .client_video {
+                    position: relative;
+                    @include displayFlex(row, center, center);
+                    width: 100%;
+                    border-radius: rem(21);
+                    overflow: hidden;
+                    height: 100%;
+
+                    video,
+                    img {
+                        width: 100%;
+                        height: 100%;
+                        object-fit: cover;
+                        @include max(991px) {
+                            max-width: 100%;
+                        }
+                    }
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        width: 100%;
+                        height: 358px;
+                        bottom: 0;
+                        background: linear-gradient(0deg, #425c68 0%, rgba(255, 255, 255, 0) 100%);
+                        opacity: 0.6;
+                    }
+                    .video_details {
+                        position: absolute;
+                        left: 0;
+                        z-index: 2;
+                        width: 100%;
+                        padding: 29px 37px;
+                        bottom: 0;
+                        @include displayFlex(row, center, space-between);
+                        .data_details {
+                            @include displayFlex(column, start, space-between);
+                            max-width: 250px;
+                            color: var(--clr_text_secondary);
+                            & > * {
+                                color: var(--clr_text_secondary);
+                            }
+                            .subdata_details {
+                                font-weight: var(--fw_bold);
+                                & > * {
+                                    color: var(--clr_text_secondary);
+                                }
+                            }
+                        }
+                        .client_video_play {
+                            width: fit-content;
+                            height: fit-content;
+                            position: relative;
+                            inset: 0;
+                            z-index: 2;
+                            cursor: pointer;
+                            opacity: 1;
+                            transition: var(--transition_02);
+                            .icon {
+                                @include displayFlex(row, center, center);
+                                width: rem(80);
+                                height: rem(80);
+                                background: #ffffff5b;
+                                border-radius: 50%;
+                                color: var(--icon_clr_white);
+                                font-size: rem(30);
+                            }
+                        }
+                    }
+                }
+            }
+            .review_sec {
+                height: 100%;
+                .review_rightblk {
+                    background-color: var(--bg_clr_white);
+                    border-radius: rem(20);
+                    padding: scaleValue(30px, 25px);
+                    text-align: left;
+                    @include displayFlex(column, start, space-between);
+                    gap: rem(30);
+                    position: relative;
+                    height: 100%;
+                    border: 1px solid #0000004f;
+                    & > * {
+                        color: var(--clr_conver);
+                    }
+                    .client_data {
+                        @include displayFlex(row, center, flex-start);
+                        gap: rem(20);
+                        .client_img {
+                            border-radius: 50%;
+                            width: rem(50);
+                            height: rem(50);
+                            overflow: hidden;
+                            img {
+                                width: 100%;
+                                height: 100%;
+                                object-fit: cover;
+                                object-position: top;
+                            }
+                        }
+                        .data_details {
+                            @include displayFlex(column, start, space-between);
+                            max-width: 250px;
+                            color: var(--clr_conver);
+                            & > * {
+                                color: var(--clr_conver);
+                            }
+                            .subdata_details {
+                                font-weight: var(--fw_bold);
+                                & > * {
+                                    color: var(--clr_conver);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/Compelling/Compelling.module.scss

@@ -0,0 +1,317 @@
+@use 'theme/sass' as *;
+
+.compelling_sec {
+    width: 100%;
+    background: hsl(var(--AppM_clr_bg_primary));
+    // background: var(--clr_new_bg_dark_octagon_ocean);
+    .custom_container {
+        .inner_compelling {
+            width: 100%;
+            .content_box {
+                width: 100%;
+                position: relative;
+                z-index: 0;
+                .content {
+                    width: 100%;
+                    .content_chip {
+                        width: fit-content;
+                        line-height: rem(24);
+                        background: var(--clr_background_primary);
+                        padding-block: rem(6);
+                        padding-inline: rem(30);
+                        border-radius: rem(20);
+                        min-height: rem(34);
+                        @include displayFlex(row, center, center);
+                        color: hsl(var(--AppMobile_clr_text_chip));
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                        text-align: center;
+                        & > * {
+                            color: hsl(var(--AppMobile_clr_text_chip));
+                            font-weight: var(--fw_medium);
+                            font-family: var(--fn_accent);
+                        }
+                    }
+                    .title {
+                        width: min(100%, rem(980));
+                        margin-block-start: rem(16);
+                        color: hsl(var(--AppM_clr_text_primary));
+                        font-weight: var(--fw_bold);
+                        font-family: var(--fn_accent);
+                        & > * {
+                            color: hsl(var(--AppM_clr_text_primary));
+                            font-weight: var(--fw_bold);
+                        }
+                        strong {
+                            @include textGradient(var(--heading_color));
+                        }
+                    }
+                    .para {
+                        width: min(100%, rem(1000));
+                        margin-block-start: rem(24);
+                        color: var(--clr_vzit_offer_text);
+                        & > * {
+                            color: var(--clr_vzit_offer_text);
+                        }
+                    }
+                }
+                .logo_bg {
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    width: rem(389);
+                    height: rem(278);
+                    z-index: -1;
+                    @include max(575px) {
+                        width: 100%;
+                        height: rem(200);
+                    }
+                }
+            }
+
+            .inner_content {
+                width: 100%;
+                margin-block-start: rem(60);
+
+                div[role='tabpanel'] {
+                    width: 100%;
+                    flex: 1;
+                }
+                :global(.MuiBox-root) {
+                    gap: 30px;
+                    border-radius: 20px;
+                    background: transparent;
+                    padding: 0;
+                    width: 100%;
+                    height: 100%;
+                    @include max(1023px) {
+                        flex-direction: column;
+                        height: auto;
+                    }
+                    @include max(576px) {
+                        padding: 0;
+                    }
+                }
+                :global(.MuiTabs-root) {
+                    background: transparent;
+                    max-width: 350px;
+                    border-start-start-radius: 0;
+                    border-end-start-radius: 0;
+                    width: 100%;
+                    // padding-block: 30px;
+                    border: none;
+                    @include max(1023px) {
+                        max-width: 100%;
+                        border-start-start-radius: 0;
+                        border-end-start-radius: 0;
+                        min-height: 100%;
+                        height: 100%;
+                    }
+                    :global(.MuiTabs-scroller) {
+                        :global(.MuiTabs-flexContainer) {
+                            gap: 15px;
+                            @include max(1023px) {
+                                flex-direction: row;
+                                // flex-wrap: wrap;
+                                overflow-x: auto;
+                                gap: 20px;
+                            }
+                            :global(.MuiButtonBase-root) {
+                                flex-direction: row;
+                                justify-content: flex-start;
+                                min-height: 50px;
+                                max-width: 100%;
+                                width: 100%;
+                                padding-inline: 0px 10px;
+                                gap: 20px;
+                                color: var(--clr_vzit_offer_text2);
+                                padding-block: 0px;
+                                text-align: left;
+                                text-transform: capitalize;
+                                font-size: 18px;
+                                font-weight: 700;
+                                transition: var(--transition_03);
+                                border: 1px solid hsl(var(--AppM_border_01));
+                                border-radius: rem(10);
+                                font-family: var(--fn_accent);
+
+                                img {
+                                    margin-bottom: 0;
+                                }
+
+                                :global(.MuiTab-iconWrapper) {
+                                    margin: 0;
+                                    min-width: rem(62);
+                                    min-height: rem(90);
+                                    @include displayFlex(column, center, center);
+                                    background: hsl(var(--AppM_clr_deep_blue_bg_primary));
+                                    border-radius: rem(10);
+                                    color: var(--clr_text_secondary);
+                                    font-size: rem(26);
+                                    @include max(1023px) {
+                                        min-height: rem(50);
+                                    }
+                                }
+
+                                @include max(1023px) {
+                                    width: fit-content;
+                                    padding: rem(10);
+                                    font-size: scaleValue(12px, 16px);
+                                    gap: 6px;
+                                }
+                                @include max(1023px) {
+                                    width: 40%;
+                                    margin-block-end: rem(10);
+                                    flex-direction: column;
+                                    text-align: center;
+                                }
+
+                                &:global(.Mui-selected) {
+                                    background: linear-gradient(90deg, #12aff2 0%, #1ec0b7 100%);
+                                    color: var(--clr_text_secondary);
+                                    border-radius: 10px;
+                                    img {
+                                        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
+                                            hue-rotate(152deg) brightness(103%) contrast(103%);
+                                    }
+                                    :global(.MuiTab-iconWrapper) {
+                                        background: hsla(0, 0%, 100%, 0.2);
+                                    }
+                                }
+
+                                &:hover {
+                                    background: linear-gradient(90deg, #12aff2 0%, #1ec0b7 100%);
+                                    color: var(--clr_text_secondary);
+                                    border-radius: 10px;
+                                    img {
+                                        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
+                                            hue-rotate(152deg) brightness(103%) contrast(103%);
+                                    }
+                                    :global(.MuiTab-iconWrapper) {
+                                        background: hsla(0, 0%, 100%, 0.2);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                :global(.MuiTabs-indicator) {
+                    background-color: var(--clr_new_sky_green);
+                    display: none;
+                    @include max(768px) {
+                        display: none;
+                    }
+                }
+
+                .tab_item {
+                    font-weight: var(--fw_medium);
+                    font-family: var(--fn_accent);
+                    color: var(--clr_text_new_gray_blue);
+                    text-transform: capitalize;
+                }
+
+                .panel_box {
+                    @include displayFlex(column, flex-start, flex-start);
+                    border-radius: 10px;
+                    overflow: hidden;
+                    background: hsl(var(--AppM_clr_deep_blue_bg_primary));
+                    position: relative;
+                    width: 100%;
+                    height: 100%;
+
+                    @include max(570px) {
+                        padding-inline: 0;
+                    }
+
+                    .image_box {
+                        position: relative;
+                        @include displayFlex(row, center, center);
+                        width: 100%;
+                        img {
+                            width: 100%;
+                            height: fit-content;
+                        }
+                    }
+
+                    .box {
+                        @include displayFlex(column, flex-start, space-between);
+                        padding: 0;
+                        width: 100%;
+                        position: relative;
+                        backdrop-filter: blur(20px);
+                        height: 100%;
+
+                        .content {
+                            z-index: 9;
+                            width: 100%;
+                            @include max(991px) {
+                                max-width: 100%;
+                            }
+                            .tabTitle {
+                                color: var(--clr_text_secondary);
+                                padding: rem(26) rem(34);
+                                padding-inline-end: rem(50);
+                            }
+                            p {
+                                font-weight: var(--fw_regular);
+                                color: var(--clr_text_secondary);
+                                font-size: 14px;
+                                line-height: 24px;
+                                padding-block: 15px 10px;
+                            }
+
+                            .number {
+                                position: absolute;
+                                top: 18px;
+                                right: 18px;
+                                font-size: 50px;
+                                line-height: 60px;
+                                font-weight: var(--fw_bold);
+                                @include textGradient(linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%));
+                            }
+                        }
+                        .techBox {
+                            width: 100%;
+                            padding: rem(26) rem(34);
+                            background: var(--clr_background_primary);
+                            border-radius: rem(12);
+
+                            ul {
+                                li {
+                                    font-weight: var(--fw_medium);
+                                    font-family: var(--fn_accent);
+                                    font-size: 16px;
+                                    line-height: 27px;
+                                    @include displayFlex(row, flex-start, flex-start);
+                                    gap: rem(10);
+                                    margin-block-start: rem(12);
+
+                                    &:first-child {
+                                        margin-block-start: 0;
+                                    }
+
+                                    h4 {
+                                        color: hsl(var(--AppM_clr_text_primary));
+                                        font-weight: var(--fw_bold);
+                                        font-family: var(--fn_accent);
+                                    }
+                                    p {
+                                        margin-block-start: rem(6);
+                                        color: hsl(var(--AppM_clr_text_para));
+                                        font-family: var(--fn_accent);
+                                        & > * {
+                                            color: hsl(var(--AppM_clr_text_para));
+                                        }
+                                    }
+                                    .icon {
+                                        color: #b9dfed;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/Compelling/Compelling.tsx

@@ -0,0 +1,171 @@
+import { ReactNode, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import global from 'theme/global/global.module.scss';
+import styles from './Compelling.module.scss';
+
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Box from '@mui/material/Box';
+import { FaCheckCircle } from 'react-icons/fa';
+import Image from 'next/image';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+
+interface TabPanelProps {
+    children?: ReactNode;
+    index: number;
+    value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+    const { children, value, index, ...other } = props;
+
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`vertical-tabpanel-${index}`}
+            aria-labelledby={`vertical-tab-${index}`}
+            {...other}
+        >
+            {value === index && <Box className={styles.panel_area}>{children}</Box>}
+        </div>
+    );
+}
+
+function a11yProps(index: number) {
+    return {
+        id: `vertical-tab-${index}`,
+        'aria-controls': `vertical-tabpanel-${index}`,
+    };
+}
+
+interface businessProspectsDataInterface {
+    // productivityData: ProductivityInterface;
+    extraClass?: string;
+    id: string;
+}
+
+const Compelling = ({ extraClass, id }: businessProspectsDataInterface) => {
+    const [value, setValue] = useState(0);
+
+    const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+        setValue(newValue);
+    };
+
+    return (
+        <>
+            <section
+                id={id}
+                className={`${styles.compelling_sec} ${global.section_padding} ${global.padding_block2}
+                 ${extraClass && styles[extraClass]}`}
+            >
+                <div className={`${styles.custom_container} ${global.container}`}>
+                    <div className={`${styles.inner_compelling}`}>
+                        <div className={styles.content_box}>
+                            <div className={styles.content}>
+                                <div className={styles.content_chip}>Build Your Very Own Custom booking app</div>
+                                <h2
+                                    className={`${global.heading1} ${styles.title}`}
+                                    style={
+                                        {
+                                            '--heading_color':
+                                                'linear-gradient(90deg, #a72844 0%, #0e5172 50%, #02bcb6 100%)',
+                                        } as React.CSSProperties as any
+                                    }
+                                >
+                                    Exclusive Features for Making Your TikTok like{' '}
+                                    <strong>Application Unique and Compelling</strong>
+                                </h2>
+                                <div className={`${global.details1} ${styles.para}`}>
+                                    <p>
+                                        The following is a list of other advanced features our ready-to-launch TikTok
+                                        clone application model includes:
+                                    </p>
+                                </div>
+                            </div>
+                            <Image
+                                src={UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_LOGO_BG}
+                                width={389}
+                                height={278}
+                                alt="logo"
+                                className={styles.logo_bg}
+                            />
+                        </div>
+
+                        <div className={styles.inner_content}>
+                            <Box sx={{ flexGrow: 1, bgcolor: 'background.paper', display: 'flex', height: 680 }}>
+                                <Tabs
+                                    orientation="vertical"
+                                    variant="scrollable"
+                                    value={value}
+                                    onChange={handleChange}
+                                    aria-label="Vertical tabs example"
+                                    sx={{ borderRight: 1, borderColor: 'divider' }}
+                                >
+                                    {[1, 2].map((tab, index) => (
+                                        <Tab
+                                            key={index}
+                                            label={'Advanced Features'}
+                                            icon={<span>{`0${index}`}</span>}
+                                            {...a11yProps(index)}
+                                        />
+                                    ))}
+                                </Tabs>
+
+                                {[1, 2].map((tab, index) => (
+                                    <TabPanel key={index} value={value} index={index}>
+                                        <div className={`${styles.panel_box}`}>
+                                            <div className={`${styles.box}`}>
+                                                <div className={`${styles.content}`}>
+                                                    <h2 className={`${global.head4} ${styles.tabTitle}`}>
+                                                        Advanced Features
+                                                    </h2>
+                                                    <div className={`${styles.number}`}>{index}</div>
+                                                </div>
+                                                <div key={index} className={`${styles.techBox}`}>
+                                                    <ul>
+                                                        <li>
+                                                            <i className={`${styles.icon}`}>
+                                                                <FaCheckCircle />
+                                                            </i>
+                                                            <div className={`${global.body1}`}>
+                                                                <h4>Easy Registration</h4>
+                                                                <p>
+                                                                    Allowing users to access the TikTok like application
+                                                                    with the “one-click login” feature with an easy and
+                                                                    simple registration process through the email
+                                                                    address and contact number.
+                                                                </p>
+                                                            </div>
+                                                        </li>
+                                                        <li>
+                                                            <i className={`${styles.icon}`}>
+                                                                <FaCheckCircle />
+                                                            </i>
+                                                            <div className={`${global.body1}`}>
+                                                                <h4>Easy Registration</h4>
+                                                                <p>
+                                                                    Allowing users to access the TikTok like application
+                                                                    with the “one-click login” feature with an easy and
+                                                                    simple registration process through the email
+                                                                    address and contact number.
+                                                                </p>
+                                                            </div>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </TabPanel>
+                                ))}
+                            </Box>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default Compelling;

components/MyAppLanding/component/Development/Development.module.scss

@@ -0,0 +1,347 @@
+@use 'theme/sass' as *;
+
+.compelling_sec {
+    width: 100%;
+    background: hsl(var(--AppM_clr_bg_primary));
+    // background: var(--clr_new_bg_dark_octagon_ocean);
+    .custom_container {
+        .inner_compelling {
+            width: 100%;
+            border-radius: rem(50);
+            overflow: hidden;
+            position: relative;
+            z-index: 0;
+            padding-block: scaleValue(50px, 80px);
+            padding-inline: scaleValue(20px, 70px);
+
+            .overlay {
+                position: absolute;
+                inset: 0;
+                margin: auto;
+                width: 100%;
+                height: 100%;
+                z-index: -1;
+                img {
+                    max-width: 100%;
+                }
+            }
+
+            .content_box {
+                width: 100%;
+                position: relative;
+                z-index: 0;
+                .content {
+                    width: 100%;
+                    text-align: center;
+                    .content_chip {
+                        width: fit-content;
+                        line-height: rem(24);
+                        background: var(--clr_background_primary);
+                        padding-block: rem(6);
+                        padding-inline: rem(16);
+                        border-radius: rem(20);
+                        min-height: rem(34);
+                        margin-inline: auto;
+                        @include displayFlex(row, center, center);
+                        color: hsl(var(--AppM_clr_deep_blue_chip));
+                        font-weight: var(--fw_semiBold);
+                        font-family: var(--fn_accent);
+                        text-align: center;
+                        & > * {
+                            color: hsl(var(--AppM_clr_deep_blue_chip));
+                            font-weight: var(--fw_medium);
+                            font-family: var(--fn_accent);
+                        }
+                    }
+                    .title {
+                        width: 100%;
+                        margin-block-start: rem(16);
+                        color: var(--clr_text_secondary);
+                        font-weight: var(--fw_bold);
+                        font-family: var(--fn_accent);
+                        & > * {
+                            color: var(--clr_text_secondary);
+                            font-weight: var(--fw_bold);
+                        }
+                        // strong {
+                        //     @include textGradient(var(--heading_color));
+                        // }
+                    }
+                    .para {
+                        width: 100%;
+                        margin-block-start: rem(24);
+                        color: var(--clr_text_secondary);
+                        & > * {
+                            color: var(--clr_text_secondary);
+                        }
+                    }
+                }
+                .logo_bg {
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    width: rem(389);
+                    height: rem(278);
+                    z-index: -1;
+                    @include max(575px) {
+                        width: 100%;
+                        height: rem(200);
+                    }
+                }
+            }
+
+            .inner_content {
+                width: 100%;
+                margin-block-start: rem(60);
+
+                div[role='tabpanel'] {
+                    width: 100%;
+                    flex: 1;
+                    border-radius: rem(30);
+                    overflow: hidden;
+                }
+                :global(.MuiBox-root) {
+                    gap: 30px;
+                    border-radius: 20px;
+                    background: transparent;
+                    padding: 0;
+                    width: 100%;
+                    height: 100%;
+                    @include max(1023px) {
+                        flex-direction: column;
+                        height: auto;
+                    }
+                    @include max(576px) {
+                        padding: 0;
+                    }
+                }
+                :global(.MuiTabs-root) {
+                    background: transparent;
+                    max-width: 350px;
+                    border-start-start-radius: 0;
+                    border-end-start-radius: 0;
+                    width: 100%;
+                    // padding-block: 30px;
+                    border: none;
+                    @include max(1023px) {
+                        max-width: 100%;
+                        border-start-start-radius: 0;
+                        border-end-start-radius: 0;
+                        min-height: 100%;
+                        height: 100%;
+                    }
+                    :global(.MuiTabs-scroller) {
+                        :global(.MuiTabs-flexContainer) {
+                            gap: 15px;
+                            @include max(1023px) {
+                                flex-direction: row;
+                                // flex-wrap: wrap;
+                                overflow-x: auto;
+                                gap: 20px;
+                            }
+                            :global(.MuiButtonBase-root) {
+                                flex-direction: row;
+                                justify-content: flex-start;
+                                gap: 16px;
+                                min-height: 50px;
+                                max-width: 100%;
+                                width: 100%;
+                                padding-inline: 20px 20px;
+                                color: var(--clr_vzit_offer_text2);
+                                padding-block: 0px;
+                                text-align: left;
+                                text-transform: capitalize;
+                                font-size: 18px;
+                                font-weight: 700;
+                                transition: var(--transition_03);
+                                border-radius: rem(20);
+                                font-family: var(--fn_accent);
+                                min-height: rem(72);
+                                min-width: rem(180);
+                                background: var(--clr_background_primary);
+
+                                img {
+                                    margin-bottom: 0;
+                                    width: rem(30);
+                                    height: rem(30);
+                                }
+                                .label {
+                                    @include displayFlex(row, center, space-between);
+                                    gap: 16px;
+                                    font-size: 16px;
+                                    .number {
+                                        color: #ededed;
+                                        font-size: 24px;
+                                        @include max(1023px) {
+                                            position: absolute;
+                                            top: 6px;
+                                            right: 10px;
+                                        }
+                                    }
+                                }
+
+                                @include max(1023px) {
+                                    width: fit-content;
+                                    padding: rem(10);
+                                    font-size: scaleValue(12px, 16px);
+                                    gap: 6px;
+                                }
+                                @include max(1023px) {
+                                    width: 40%;
+                                    margin-block-end: rem(10);
+                                    flex-direction: column;
+                                    text-align: center;
+                                }
+
+                                &:global(.Mui-selected) {
+                                    background: radial-gradient(
+                                        111.95% 3559.55% at 102.96% 0%,
+                                        rgba(1, 186, 181, 0.6336) 0%,
+                                        rgba(47, 173, 197, 0.99) 43.08%,
+                                        rgba(83, 152, 185, 0.99) 61.09%,
+                                        rgba(232, 116, 138, 0.99) 100%
+                                    );
+                                    color: var(--clr_text_secondary);
+                                    img {
+                                        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
+                                            hue-rotate(152deg) brightness(103%) contrast(103%);
+                                    }
+                                }
+
+                                &:hover {
+                                    background: radial-gradient(
+                                        111.95% 3559.55% at 102.96% 0%,
+                                        rgba(1, 186, 181, 0.6336) 0%,
+                                        rgba(47, 173, 197, 0.99) 43.08%,
+                                        rgba(83, 152, 185, 0.99) 61.09%,
+                                        rgba(232, 116, 138, 0.99) 100%
+                                    );
+                                    color: var(--clr_text_secondary);
+                                    border-radius: 10px;
+                                    img {
+                                        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
+                                            hue-rotate(152deg) brightness(103%) contrast(103%);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                :global(.MuiTabs-indicator) {
+                    background-color: var(--clr_new_sky_green);
+                    display: none;
+                    @include max(768px) {
+                        display: none;
+                    }
+                }
+
+                .tab_item {
+                    font-weight: var(--fw_medium);
+                    font-family: var(--fn_accent);
+                    color: var(--clr_text_new_gray_blue);
+                    text-transform: capitalize;
+                }
+
+                .panel_box {
+                    @include displayFlex(column, flex-start, flex-start);
+                    border-radius: rem(30);
+                    overflow: hidden;
+                    background: hsl(var(--AppM_clr_bg_black));
+                    position: relative;
+                    width: 100%;
+                    height: 100%;
+
+                    @include max(570px) {
+                        padding-inline: 0;
+                    }
+
+                    .image_box {
+                        position: relative;
+                        @include displayFlex(row, center, center);
+                        width: 100%;
+                        img {
+                            width: 100%;
+                            height: fit-content;
+                        }
+                    }
+
+                    .box {
+                        @include displayFlex(column, flex-start, space-between);
+                        padding: 0;
+                        width: 100%;
+                        position: relative;
+                        height: 100%;
+
+                        .content {
+                            z-index: 9;
+                            width: 100%;
+                            @include displayFlex(row, center, space-between);
+                            padding: rem(26) rem(34);
+
+                            @include max(991px) {
+                                max-width: 100%;
+                            }
+                            .tabTitle {
+                                color: var(--clr_text_secondary);
+                                padding-inline-end: rem(50);
+                            }
+                            p {
+                                font-weight: var(--fw_regular);
+                                color: var(--clr_text_secondary);
+                                font-size: 14px;
+                                line-height: 24px;
+                                padding-block: 15px 10px;
+                            }
+
+                            .number {
+                                font-size: 30px;
+                                line-height: 30px;
+                                font-weight: var(--fw_bold);
+                                color: var(--clr_text_secondary);
+                            }
+                        }
+                        .techBox {
+                            width: 100%;
+                            padding: rem(26) rem(34);
+                            background: var(--clr_background_primary);
+                            border-radius: rem(12);
+
+                            ul {
+                                li {
+                                    font-weight: var(--fw_medium);
+                                    font-family: var(--fn_accent);
+                                    font-size: 16px;
+                                    line-height: 27px;
+                                    @include displayFlex(row, flex-start, flex-start);
+                                    gap: rem(10);
+                                    margin-block-start: rem(12);
+
+                                    &:first-child {
+                                        margin-block-start: 0;
+                                    }
+
+                                    h4 {
+                                        color: hsl(var(--AppM_clr_text_primary));
+                                        font-weight: var(--fw_bold);
+                                        font-family: var(--fn_accent);
+                                    }
+                                    p {
+                                        margin-block-start: rem(6);
+                                        color: hsl(var(--AppM_clr_text_para));
+                                        font-family: var(--fn_accent);
+                                        & > * {
+                                            color: hsl(var(--AppM_clr_text_para));
+                                        }
+                                    }
+                                    .icon {
+                                        color: #b9dfed;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/Development/Development.tsx

@@ -0,0 +1,188 @@
+import { ReactNode, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import global from 'theme/global/global.module.scss';
+import styles from './Development.module.scss';
+
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Box from '@mui/material/Box';
+import { FaCheckCircle } from 'react-icons/fa';
+import Image from 'next/image';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+
+interface TabPanelProps {
+    children?: ReactNode;
+    index: number;
+    value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+    const { children, value, index, ...other } = props;
+
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`vertical-tabpanel-${index}`}
+            aria-labelledby={`vertical-tab-${index}`}
+            {...other}
+        >
+            {value === index && <Box className={styles.panel_area}>{children}</Box>}
+        </div>
+    );
+}
+
+function a11yProps(index: number) {
+    return {
+        id: `vertical-tab-${index}`,
+        'aria-controls': `vertical-tabpanel-${index}`,
+    };
+}
+
+interface businessProspectsDataInterface {
+    // productivityData: ProductivityInterface;
+    extraClass?: string;
+}
+
+const Development = ({ extraClass }: businessProspectsDataInterface) => {
+    const [value, setValue] = useState(0);
+
+    const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+        setValue(newValue);
+    };
+
+    return (
+        <>
+            <section
+                id="solutions"
+                className={`${styles.compelling_sec} ${global.section_padding} ${global.padding_block2}
+                 ${extraClass && styles[extraClass]}`}
+            >
+                <div className={`${styles.custom_container} ${global.container}`}>
+                    <div
+                        className={`${styles.inner_compelling}`}
+                        style={{
+                            background:
+                                'radial-gradient(97.93% 97.93% at 50% 2.07%, rgba(1, 186, 181, 0.6336) 0%, rgba(4, 114, 135, 0.99) 43.08%, rgba(15, 82, 114, 0.99) 61.09%, rgba(180, 36, 63, 0.99) 100%)',
+                        }}
+                    >
+                        <div className={`${styles.overlay}`}>
+                            <Image
+                                src={UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_box_bg}
+                                alt="overlay"
+                                width={1232}
+                                height={832}
+                            />
+                        </div>
+                        <div className={styles.content_box}>
+                            <div className={styles.content}>
+                                <div className={styles.content_chip}>Development Process</div>
+                                <h2
+                                    className={`${global.heading1} ${styles.title}`}
+                                    style={
+                                        {
+                                            '--heading_color':
+                                                'linear-gradient(90deg, #a72844 0%, #0e5172 50%, #02bcb6 100%)',
+                                        } as React.CSSProperties as any
+                                    }
+                                >
+                                    Steps We Follow to Develop a TikTok like Application for Your Needs
+                                </h2>
+                                <div className={`${global.details1} ${styles.para}`}>
+                                    <p>
+                                        At ConvexSol, we follow the below step-by-step TikTok clone app development
+                                        procedures to ensure a successful app launching with continual growth:
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className={styles.inner_content}>
+                            <Box sx={{ flexGrow: 1, bgcolor: 'background.paper', display: 'flex', height: 680 }}>
+                                <Tabs
+                                    orientation="vertical"
+                                    variant="scrollable"
+                                    value={value}
+                                    onChange={handleChange}
+                                    aria-label="Vertical tabs example"
+                                    sx={{ borderRight: 1, borderColor: 'divider' }}
+                                >
+                                    {[1, 2].map((tab, index) => (
+                                        <Tab
+                                            key={index}
+                                            label={
+                                                <span className={`${styles.label}`}>
+                                                    Learning Specific Client Requirements{' '}
+                                                    <span className={`${styles.number}`}>01</span>
+                                                </span>
+                                            }
+                                            icon={
+                                                <img
+                                                    src={UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_APPROVE}
+                                                    alt="icon"
+                                                    width={30}
+                                                    height={30}
+                                                />
+                                            }
+                                            {...a11yProps(index)}
+                                        />
+                                    ))}
+                                </Tabs>
+
+                                {[1, 2].map((tab, index) => (
+                                    <TabPanel key={index} value={value} index={index}>
+                                        <div className={`${styles.panel_box}`}>
+                                            <div className={`${styles.box}`}>
+                                                <div className={`${styles.content}`}>
+                                                    <h2 className={`${global.head4} ${styles.tabTitle}`}>
+                                                        Market Research and Analysis
+                                                    </h2>
+                                                    <div className={`${styles.number}`}>{index}</div>
+                                                </div>
+                                                <div key={index} className={`${styles.techBox}`}>
+                                                    <ul>
+                                                        <li>
+                                                            <i className={`${styles.icon}`}>
+                                                                <FaCheckCircle />
+                                                            </i>
+                                                            <div className={`${global.body1}`}>
+                                                                <h4>Easy Registration</h4>
+                                                                <p>
+                                                                    Allowing users to access the TikTok like application
+                                                                    with the “one-click login” feature with an easy and
+                                                                    simple registration process through the email
+                                                                    address and contact number.
+                                                                </p>
+                                                            </div>
+                                                        </li>
+                                                        <li>
+                                                            <i className={`${styles.icon}`}>
+                                                                <FaCheckCircle />
+                                                            </i>
+                                                            <div className={`${global.body1}`}>
+                                                                <h4>Easy Registration</h4>
+                                                                <p>
+                                                                    Allowing users to access the TikTok like application
+                                                                    with the “one-click login” feature with an easy and
+                                                                    simple registration process through the email
+                                                                    address and contact number.
+                                                                </p>
+                                                            </div>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </TabPanel>
+                                ))}
+                            </Box>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default Development;

components/MyAppLanding/component/DevelopmentFeatures/DevelopmentFeatures.tsx

@@ -0,0 +1,215 @@
+import React, { useEffect, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+import { SliderInterface } from '@/interfaces/microsoftPowerPage.interface';
+import ReactMarkdown from 'react-markdown';
+import { Autoplay, Navigation } from 'swiper';
+import global from 'theme/global/global.module.scss';
+import styles from './developmentFeatures.module.scss';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import Image from 'next/image';
+
+import { Header, KeyNote } from '@/interfaces/shared/shared';
+import CallToAction from '../callToAction/CallToAction';
+import rehypeRaw from 'rehype-raw';
+
+interface DevelopmentFeatureInterface {
+    header: Header;
+    notes: KeyNote[];
+}
+
+interface RequiredProps {
+    props: DevelopmentFeatureInterface;
+    extraClass?: string;
+    id: string;
+}
+
+const DevelopmentFeatures = ({ id, props }: RequiredProps) => {
+    const { header, notes } = props;
+    const [isActiveIndex, setIsActiveIndex] = useState(false);
+    const [isMobileDevice, setIsMobileDevice] = useState(false);
+    const getHeadingStyle = (): React.CSSProperties | undefined => {
+        const titleColor = header?.titleColor;
+
+        // Return undefined if no titleColor is provided
+        if (!titleColor || typeof titleColor !== 'string') {
+            return undefined;
+        }
+
+        const trimmed = titleColor.replace(/[;]\s*$/, '').trim();
+
+        // Return undefined if trimmed is empty
+        if (!trimmed) {
+            return undefined;
+        }
+
+        const normalized = trimmed.startsWith('--') ? `var(${trimmed.replace(/:$/, '')})` : trimmed;
+
+        return { ['--heading_color' as any]: normalized } as React.CSSProperties;
+    };
+    const getBackgroundStyle = (): React.CSSProperties => {
+        const background = header?.background;
+
+        if (!background || typeof background !== 'string') {
+            return {};
+        }
+
+        // Remove trailing semicolons and whitespace
+        const cleanBackground = background.replace(/[;]\s*$/, '').trim();
+
+        return cleanBackground ? { background: cleanBackground } : {};
+    };
+    const headingStyle = getHeadingStyle();
+    const backgroundStyle = getBackgroundStyle();
+    const handleClick = () => {
+        if (isMobileDevice) {
+            setIsActiveIndex(!isActiveIndex);
+        }
+    };
+    useEffect(() => {
+        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+        setIsMobileDevice(isMobile);
+    }, []);
+    const notesLen = notes?.length ?? 0;
+    const perView = Math.min(4, Math.max(1, notesLen));
+    const bps = {
+        320: { slidesPerView: Math.min(1, notesLen) },
+        640: { slidesPerView: Math.min(1, notesLen) },
+        768: { slidesPerView: Math.min(2, notesLen) },
+        1024: { slidesPerView: Math.min(3, notesLen) },
+        1300: { slidesPerView: Math.min(4, notesLen) },
+    };
+    return (
+        <>
+            <section
+                id={id}
+                className={`${styles.AppDevelopmentProcess_sec} ${global.section_padding}  ${global.padding_block2}`}
+            >
+                <div className={`${styles.grid_card} ${global.padding_block2}`} style={backgroundStyle}>
+                    <div className={`${styles.overlay}`}>
+                        <Image
+                            src={UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_box_bg}
+                            alt="overlay"
+                            width={1232}
+                            height={832}
+                        />
+                    </div>
+                    <div className={`${styles.custom_container} ${global.container}`}>
+                        <div className={`${styles.inner_auto_services} `}>
+                            <div className={styles.content_box} id="powerBannerLeft">
+                                <div className={styles.content}>
+                                    {header?.pageTitle && (
+                                        <div className={`${global.body1} ${styles.content_chip}`}>
+                                            {header?.pageTitle}
+                                        </div>
+                                    )}
+                                    {header?.title && (
+                                        <div className={`${global.heading7} ${styles.title}`} style={headingStyle}>
+                                            <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                                {header?.title || ''}
+                                            </ReactMarkdown>
+                                        </div>
+                                    )}
+                                    {header?.content && (
+                                        <div className={`${global.head44} ${styles.para}`}>
+                                            <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                                {header?.content || ''}
+                                            </ReactMarkdown>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Swiper
+                        slidesPerView={perView}
+                        spaceBetween={20}
+                        autoHeight
+                        loop={notesLen > 1}
+                        breakpoints={bps}
+                        navigation={false}
+                        autoplay={{
+                            delay: 2500,
+                            disableOnInteraction: false,
+                            pauseOnMouseEnter: true,
+                        }}
+                        speed={800}
+                        modules={[Autoplay, Navigation]}
+                        className={styles.swiper_box}
+                        onSlideChange={() => isMobileDevice && setIsActiveIndex(false)}
+                    >
+                        {notes?.map((item: KeyNote, i: number) => {
+                            const noteRaw = item.noteIconBg ?? '';
+                            const noteTrimmed =
+                                typeof noteRaw === 'string' ? noteRaw.replace(/[;]\s*$/, '').trim() : '';
+                            const noteNormalized = noteTrimmed.startsWith('--')
+                                ? `var(${noteTrimmed.replace(/:$/, '')})`
+                                : noteTrimmed;
+                            const noteIconBgStyle = noteNormalized
+                                ? ({ ['--bg_color' as any]: noteNormalized } as React.CSSProperties)
+                                : undefined;
+                            return (
+                                <SwiperSlide key={i}>
+                                    <div
+                                        className={`${styles.wrapper_box} ${
+                                            isMobileDevice ? (isActiveIndex ? styles.active : styles.non_active) : ''
+                                        }`}
+                                        onClick={handleClick}
+                                    >
+                                        <div className={styles.box}>
+                                            <div className={styles.front}>
+                                                <div className={styles.info}>
+                                                    <div className={styles.info_icon} style={noteIconBgStyle}>
+                                                        {item?.noteImage?.data?.attributes?.url && (
+                                                            <img
+                                                                src={item.noteImage?.data?.attributes.url}
+                                                                width={46}
+                                                                height={46}
+                                                                alt="MICROSOFT_choose"
+                                                            />
+                                                        )}
+                                                    </div>
+                                                    {item?.noteTitle && (
+                                                        <div className={`${global.head4} ${styles.para}`}>
+                                                            <ReactMarkdown
+                                                                rehypePlugins={[rehypeRaw as any]}
+                                                                skipHtml={false}
+                                                            >
+                                                                {item?.noteTitle || ''}
+                                                            </ReactMarkdown>
+                                                        </div>
+                                                    )}
+                                                    {item?.noteBody && (
+                                                        <div className={`${global.details1} ${styles.para_2}`}>
+                                                            <ReactMarkdown
+                                                                rehypePlugins={[rehypeRaw as any]}
+                                                                skipHtml={false}
+                                                            >
+                                                                {item?.noteBody || ''}
+                                                            </ReactMarkdown>
+                                                        </div>
+                                                    )}
+                                                </div>
+                                                <div className={styles.info_img}>
+                                                    {/* <img
+                                                src={`${process.env.NEXT_PUBLIC_API}${item.image?.data?.attributes.url}`}
+                                                alt="MICROSOFT_choose"
+                                            /> */}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </SwiperSlide>
+                            );
+                        })}
+                    </Swiper>
+                </div>
+            </section>
+        </>
+    );
+};
+export default DevelopmentFeatures;

components/MyAppLanding/component/DevelopmentFeatures/developmentFeatures.module.scss

@@ -0,0 +1,223 @@
+@use 'theme/sass' as *;
+
+.AppDevelopmentProcess_sec {
+    width: 100%;
+    background: var(--clr_background_primary);
+    position: relative;
+    z-index: 1;
+    &::before {
+        content: '';
+        position: absolute;
+        top: -25%;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100%;
+        max-width: 800px;
+        height: 600px;
+        border-radius: 50%;
+        background: radial-gradient(#fbfeff21, #ffffff4a);
+        filter: blur(127px);
+    }
+
+    .grid_card {
+        border-radius: rem(50);
+        overflow: hidden;
+        position: relative;
+        z-index: 0;
+        .overlay {
+            position: absolute;
+            inset: 0;
+            margin: auto;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            img {
+                max-width: 100%;
+                width: 100%;
+            }
+        }
+    }
+
+    .custom_container {
+        .inner_auto_services {
+            @include displayFlex(column, flex-start, flex-start);
+            gap: 20px;
+
+            .content_box {
+                width: 100%;
+                @include displayFlex(column, center, center);
+                padding-block-end: 40px;
+
+                .content {
+                    text-align: center;
+                    width: 100%;
+                    padding-inline: rem(20);
+
+                    .content_chip {
+                        width: fit-content;
+                        margin-inline: auto;
+                        line-height: rem(24);
+                        background: #ffffff3b;
+                        padding-block: rem(6);
+                        padding-inline: rem(16);
+                        border-radius: rem(20);
+                        min-height: rem(34);
+                        @include displayFlex(row, center, center);
+                        color: var(--clr_text_secondary);
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                        margin-block-end: rem(20);
+                        & > * {
+                            color: var(--clr_text_secondary);
+                            font-weight: var(--fw_medium);
+                            font-family: var(--fn_accent);
+                        }
+                    }
+
+                    .title {
+                        max-width: rem(804);
+                        margin-inline: auto;
+                        & > * {
+                            font-weight: var(--fw_bold);
+                            font-family: var(--fn_accent);
+                            color: var(--clr_text_secondary);
+                            margin-block-end: 25px;
+                            font-size: scaleValue(28px, 42px);
+                            line-height: scaleValue(40px, 50px);
+                            & > * {
+                                color: var(--clr_text_secondary);
+                                font-weight: var(--fw_bold);
+                            }
+                            strong {
+                                @include textGradient(var(--heading_color));
+                            }
+                        }
+                    }
+
+                    .para {
+                        width: min(100%, 960px);
+                        margin-inline: auto;
+                        font-weight: var(--fw_regular);
+                        color: var(--clr_text_secondary);
+                        & > * {
+                            color: var(--clr_text_secondary);
+                            font-weight: var(--fw_regular);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .swiper_box {
+        padding-block: 40px;
+        padding-inline: 10px;
+        & :global(.swiper-wrapper) {
+            align-items: stretch !important;
+            height: 100% !important;
+        }
+        :global(.swiper-slide) {
+            @include displayFlex(row, stretch, flex-start);
+            width: 300px;
+            height: auto;
+            @include max(639px) {
+                min-height: auto;
+                height: auto;
+            }
+        }
+        :global(.swiper-slide-active) {
+            .box {
+                height: 100%;
+                .listing {
+                    height: 100%;
+                    opacity: 1;
+                }
+            }
+        }
+    }
+    .wrapper_box {
+        width: 100%;
+        .box {
+            width: 100%;
+            height: 100%;
+            border-radius: 15px;
+            background: #ffffff1f;
+            backdrop-filter: blur(5px);
+            @include displayFlex(column, flex-start, space-between);
+            gap: 10px;
+            position: relative;
+            overflow: hidden;
+            transition: var(--transition_03);
+
+            .front {
+                width: 100%;
+                .info {
+                    width: 100%;
+                    padding-inline: 30px;
+                    padding-block: 30px;
+                    .info_icon {
+                        @include displayFlex(row, center, center);
+                        width: 90px;
+                        height: 90px;
+                        border-radius: 50%;
+                        background: #ffffff1f;
+                        img {
+                            width: rem(46);
+                            height: rem(46);
+                            object-fit: contain;
+                        }
+                    }
+                    .para {
+                        font-weight: var(--fw_semiBold);
+                        color: var(--clr_text_secondary);
+                        font-family: var(--font_primary);
+                        margin-block-start: 18px;
+                        & > * {
+                            color: var(--clr_text_secondary);
+                            font-weight: var(--fw_semiBold);
+                        }
+                    }
+                    .para_2 {
+                        font-weight: var(--fw_regular);
+                        color: var(--clr_text_secondary);
+                        font-family: var(--font_primary);
+                        margin-block-start: 10px;
+                        & > * {
+                            color: var(--clr_text_secondary);
+                            font-weight: var(--fw_regular);
+                        }
+                    }
+                }
+                .info_img {
+                    width: 100%;
+                    @include displayFlex(column, flex-end, flex-end);
+                    align-self: flex-end;
+                    flex: 1;
+                }
+            }
+        }
+        &:hover {
+            .box {
+                background: var(--clr_background_primary);
+                .front {
+                    .info {
+                        .para {
+                            color: hsl(var(--AppM_clr_text_primary));
+                            & > * {
+                                color: hsl(var(--AppM_clr_text_primary));
+                            }
+                        }
+                        .para_2 {
+                            color: hsl(var(--AppM_clr_text_para));
+                            & > * {
+                                color: hsl(var(--AppM_clr_text_para));
+                            }
+                        }
+                        .info_icon {
+                            background: var(--bg_color);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/Essential/Essential.module.scss

@@ -0,0 +1,154 @@
+@use 'theme/sass' as *;
+
+.Essential_sec {
+    width: 100%;
+    background: hsl(var(--AppM_clr_bg_primary));
+
+    .inner_auto_services {
+        width: 100%;
+        .content_box {
+            width: 100%;
+            .content {
+                width: 100%;
+                .content_chip {
+                    width: fit-content;
+                    line-height: rem(24);
+                    background: var(--clr_background_primary);
+                    padding-block: rem(6);
+                    padding-inline: rem(16);
+                    border-radius: rem(20);
+                    min-height: rem(34);
+                    @include displayFlex(row, center, center);
+                    color: hsl(var(--AppMobile_clr_text_chip));
+                    font-weight: var(--fw_medium);
+                    font-family: var(--fn_accent);
+                    border: 1px solid hsl(var(--AppM_border_09));
+                    box-shadow: 0px 5px 14px 0px #30b9f41f;
+                    & > * {
+                        color: hsl(var(--AppMobile_clr_text_chip));
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                    }
+                }
+                .title {
+                    width: min(100%, rem(680));
+                    margin-block-start: rem(16);
+                    color: hsl(var(--AppM_clr_text_primary));
+                    font-weight: var(--fw_bold);
+                    font-family: var(--fn_accent);
+                    & > * {
+                        color: hsl(var(--AppM_clr_text_primary));
+                        font-weight: var(--fw_bold);
+                    }
+                    strong {
+                        @include textGradient(var(--heading_color));
+                    }
+                }
+                .para {
+                    width: min(100%, rem(800));
+                    margin-block-start: rem(24);
+                    color: var(--clr_vzit_offer_text);
+                    & > * {
+                        color: var(--clr_vzit_offer_text);
+                    }
+                }
+            }
+        }
+
+        .overview_box_content {
+            width: 100%;
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: rem(32);
+            margin-block-start: rem(50);
+
+            @include max(767px) {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        .info_box {
+            width: 100%;
+            border-radius: rem(30);
+            overflow: hidden;
+            height: 100%;
+            position: relative;
+            padding: scaleValue(30px, 50px);
+            background: var(--clr_background_primary);
+            min-height: rem(440);
+            z-index: 0;
+            @include displayFlex(column, flex-start, space-between);
+            .images_box {
+                width: 100%;
+                border-radius: rem(30);
+                overflow: hidden;
+                height: 100%;
+                position: absolute;
+                inset: 0;
+                opacity: 0;
+                transition: all 0.3s ease-in-out;
+                z-index: -1;
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+                // &::after {
+                //     content: '';
+                //     position: absolute;
+                //     width: 100%;
+                //     height: 100%;
+                //     left: 0;
+                //     top: 0;
+                //     background: radial-gradient(
+                //         100% 100% at 48.25% 0%,
+                //         rgba(255, 255, 255, 0) 0%,
+                //         rgba(37, 243, 239, 0.79) 54.42%,
+                //         rgba(57, 151, 190, 0.85) 74.93%,
+                //         rgba(255, 53, 89, 0.67) 100%
+                //     );
+                //     opacity: 0.5;
+                // }
+            }
+            .para {
+                color: var(--clr_vzit_offer_text2);
+                font-family: var(--font_primary);
+                font-weight: var(--fw_regular);
+                transition: all 0.3s ease-in-out;
+                & > * {
+                    color: var(--clr_vzit_offer_text2);
+                    font-family: var(--font_primary);
+                    font-weight: var(--fw_regular);
+                }
+                p {
+                    &:last-child {
+                        margin-block-end: 0;
+                    }
+                }
+            }
+            .icon {
+                font-size: rem(34);
+                transition: all 0.3s ease-in-out;
+                color: hsl(var(--AppM_clr_bg_danger));
+            }
+
+            &:hover {
+                .images_box {
+                    opacity: 1;
+                }
+                .para {
+                    color: var(--clr_text_secondary);
+                    & > * {
+                        color: var(--clr_text_secondary);
+                    }
+                }
+                .icon {
+                    color: var(--clr_text_secondary);
+                    & > * {
+                        color: var(--clr_text_secondary);
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/Essential/Essential.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import global from 'theme/global/global.module.scss';
+import styles from './Essential.module.scss';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { FiPlus } from 'react-icons/fi';
+import CallToAction from '../callToAction/CallToAction';
+import { Header, KeyNote } from '@/interfaces/shared/shared';
+import rehypeRaw from 'rehype-raw';
+import ReactMarkdown from 'react-markdown';
+interface EssentialInterface {
+    extraClass?: string;
+    id?: string;
+    props: PropContent;
+}
+
+interface PropContent {
+    header: Header;
+    divNotes: KeyNote[];
+    divImage: any;
+}   
+
+const Essential = ({ extraClass, id, props }: EssentialInterface) => {
+    const { header, divNotes } = props;
+    const raw = header?.titleColor ? header?.titleColor : '';
+    const trimmed = typeof raw === 'string' ? raw.replace(/[;]\s*$/, '').trim() : '';
+        const normalized =
+            trimmed.startsWith('--') ? `var(${trimmed.replace(/:$/, '')})` : trimmed;
+    const style = normalized
+        ? ({ ['--heading_color' as any]: normalized } as React.CSSProperties)
+        : undefined;
+    return (
+        <section
+            id={id}
+            className={`${styles.Essential_sec} ${global.section_padding}  ${global.padding_block2} ${
+                extraClass && styles[extraClass]
+            }`}
+        >
+            <div className={`${styles.custom_container} ${global.container}`}>
+                <div className={`${styles.inner_auto_services} `}>
+                    <div className={styles.content_box}>
+                        <div className={styles.content}>
+                            {header?.pageTitle && (
+                                <div className={styles.content_chip}>{header?.pageTitle}</div>
+                            )}
+                            {header?.title && (
+                            <div
+                                className={`${global.heading1} ${styles.title}`}
+                                style={style}
+                            >
+                                <ReactMarkdown
+                                    rehypePlugins={[rehypeRaw as any]}
+                                    skipHtml={false}
+                                >
+                                    {header?.title || ''}
+                                </ReactMarkdown>
+                            </div>
+                            )}
+                            {header?.content && (
+                                <div className={`${global.details1} ${styles.para}`}>
+                                    <ReactMarkdown
+                                        rehypePlugins={[rehypeRaw as any]}
+                                        skipHtml={false}
+                                    >
+                                        {header?.content || ''}
+                                    </ReactMarkdown>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                    <div className={styles.overview_box_content}>
+                        {/* Loop info_box with dummy data */}
+                        {divNotes?.length && divNotes?.map((item: any, idx: number) => (
+                            <div className={styles.info_box} key={idx}>
+                                <div className={styles.images_box}>
+                                    <img src={item?.noteImage?.data?.attributes?.url} alt={'tabImage'} width={607} height={503} />
+                                </div>
+                                <i className={` ${styles.icon}`}>
+                                    <FiPlus />
+                                </i>
+                                <div className={`${global.heading22} ${styles.para}`}>
+                                    <ReactMarkdown
+                                        rehypePlugins={[rehypeRaw as any]}
+                                        skipHtml={false}
+                                    >
+                                        {item?.noteTitle || ''}
+                                    </ReactMarkdown>
+                                </div>
+                                {item?.noteBody && (
+                                <div className={`${global.details1} ${styles.para}`}>
+                                    <ReactMarkdown
+                                        rehypePlugins={[rehypeRaw as any]}
+                                        skipHtml={false}
+                                    >
+                                            {item?.noteBody || ''}
+                                        </ReactMarkdown>
+                                    </div>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+         
+        </section>
+    );
+};
+
+export default Essential;

components/MyAppLanding/component/EssentialFourGrid/EssentialFourGrid.module.scss

@@ -0,0 +1,165 @@
+@use 'theme/sass' as *;
+
+.Essential_sec {
+    width: 100%;
+    background: hsl(var(--AppM_clr_bg_primary));
+
+    .inner_auto_services {
+        width: 100%;
+        .content_box {
+            width: 100%;
+            .content {
+                width: 100%;
+                .content_chip {
+                    width: fit-content;
+                    line-height: rem(24);
+                    background: hsl(var(--AppM_clr_bg_blue_chip));
+                    padding-block: rem(6);
+                    padding-inline: rem(16);
+                    border-radius: rem(20);
+                    min-height: rem(34);
+                    @include displayFlex(row, center, flex-start);
+                    color: hsl(var(--AppMobile_clr_text_chip));
+                    font-weight: var(--fw_medium);
+                    font-family: var(--fn_accent);
+                    // margin: 0 auto 20px;
+                    & > * {
+                        color: hsl(var(--AppMobile_clr_text_chip));
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                    }
+                }
+                .title {
+                    width: min(100%, rem(680));
+                    margin-block-start: rem(16);
+                    color: hsl(var(--AppM_clr_text_primary));
+                    font-weight: var(--fw_bold);
+                    font-family: var(--fn_accent);
+                    & > * {
+                        color: hsl(var(--AppM_clr_text_primary));
+                        font-weight: var(--fw_bold);
+                    }
+                }
+                .para {
+                    width: min(100%, rem(800));
+                    margin-block-start: rem(24);
+                    color: var(--clr_vzit_offer_text);
+                    & > * {
+                        color: var(--clr_vzit_offer_text);
+                    }
+                }
+            }
+        }
+
+        .overview_box_content {
+            width: 100%;
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: rem(20);
+            margin-block-start: scaleValue(30px, 60px);
+            @include max(1024px) {
+                grid-template-columns: repeat(2, 1fr);
+            }
+            @include max(767px) {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        .info_box {
+            width: 100%;
+            border-radius: rem(30);
+            overflow: hidden;
+            height: 100%;
+            position: relative;
+            padding: scaleValue(20px, 27px) scaleValue(20px, 24px);
+            background: var(--clr_background_primary);
+            border: 1px solid #441c3630;
+            min-height: rem(440);
+            z-index: 0;
+            @include displayFlex(column, flex-start, space-between);
+            .images_box {
+                width: 100%;
+                border-radius: rem(30);
+                overflow: hidden;
+                height: 100%;
+                position: absolute;
+                inset: 0;
+                opacity: 0;
+                transition: all 0.3s ease-in-out;
+                z-index: -1;
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+                // &::after {
+                //     content: '';
+                //     position: absolute;
+                //     width: 100%;
+                //     height: 100%;
+                //     left: 0;
+                //     top: 0;
+                //     background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #1d3557 57.52%, #000000 100%);
+                // }
+            }
+            .content {
+                .title,
+                h4 {
+                    color: var(--clr_vzit_offer_text2);
+                    font-family: var(--fn_accent);
+                    font-weight: var(--fw_bold);
+                    margin-block-end: rem(15);
+                    min-height: rem(60);
+                    text-transform: capitalize;
+                    & > * {
+                        color: var(--clr_vzit_offer_text2);
+                        font-family: var(--fn_accent);
+                        font-weight: var(--fw_bold);
+                    }
+                }
+                .para,
+                p {
+                    color: hsl(var(--AppMobile_clr_text_01));
+                    font-weight: var(--fw_regular);
+                    transition: all 0.3s ease-in-out;
+                    & > * {
+                        color: hsl(var(--AppMobile_clr_text_01));
+                        font-weight: var(--fw_regular);
+                    }
+                    p {
+                        &:last-child {
+                            margin-block-end: 0;
+                        }
+                        strong {
+                            font-weight: var(--fw_bold);
+                        }
+                    }
+                }
+            }
+            .icon {
+                font-size: rem(34);
+                transition: all 0.3s ease-in-out;
+                color: hsl(var(--AppM_clr_bg_danger_01));
+            }
+
+            &:hover {
+                .images_box {
+                    opacity: 1;
+                }
+                .title,
+                .para {
+                    color: var(--clr_text_secondary);
+                    & > * {
+                        color: var(--clr_text_secondary);
+                    }
+                }
+                .icon {
+                    color: var(--clr_text_secondary);
+                    & > * {
+                        color: var(--clr_text_secondary);
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/EssentialFourGrid/EssentialFourGrid.tsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import global from 'theme/global/global.module.scss';
+import styles from './EssentialFourGrid.module.scss';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { FiPlus } from 'react-icons/fi';
+import { Header, Module } from '@/interfaces/shared/shared';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+interface EssentialInterface {
+    extraClass?: string;
+    id?: string;
+}
+
+// Dummy data array for info boxes
+const infoBoxData = [
+    {
+        img: UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_ESSENTIALGRID,
+        text: 'Enable service providers to pay for improved visibility within search results. These listings are visible at the top, increase the chances of being booked while also adding to the revenue of the app',
+    },
+    {
+        img: UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_ESSENTIALGRID,
+        text: 'US regular users are 170 million.',
+    },
+    {
+        img: UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_ESSENTIALGRID,
+        text: 'Monthly active users are 1.12 billion globally.',
+    },
+    {
+        img: UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_ESSENTIALGRID,
+        text: 'Monthly active users are 1.12 billion globally.',
+    },
+];
+
+interface EssentialFourGridInterface {
+    header: Header;
+    module: Module[];
+}
+
+interface RequiredProps {
+    props: EssentialFourGridInterface;
+    extraClass?: string;
+    id?: string;
+}
+
+const EssentialFourGrid = (props: RequiredProps) => {
+    const { header, module } = props.props;
+    const raw = header?.titleColor ?? '';
+    const trimmed = typeof raw === 'string' ? raw.replace(/[;]\s*$/, '').trim() : '';
+    const normalized =
+        trimmed.startsWith('--') ? `var(${trimmed.replace(/:$/, '')})` : trimmed;
+    const headingColor = normalized
+        ? ({ ['--heading_color' as any]: normalized } as React.CSSProperties)
+        : undefined;
+    const backgroundRaw = header?.background ?? '';
+    const backgroundTrimmed = typeof backgroundRaw === 'string' ? backgroundRaw.replace(/[;]\s*$/, '').trim() : '';
+    const backgroundNormalized =
+        backgroundTrimmed.startsWith('--') ? `var(${backgroundTrimmed.replace(/:$/, '')})` : backgroundTrimmed;
+        
+    const backgroundStyle = backgroundNormalized
+        ? ({ ['background' as any]: backgroundNormalized } as React.CSSProperties)
+        : undefined;
+    return (
+        <section
+            id={props?.id}
+            className={`${styles.Essential_sec} ${global.section_padding}  ${global.padding_block2} ${
+                props?.extraClass && styles[props?.extraClass]
+            }`}
+            style={backgroundStyle}
+        >
+            <div className={`${styles.custom_container} ${global.container}`}>
+                <div className={`${styles.inner_auto_services} `}>
+                    <div className={styles.content_box}>
+                        <div className={styles.content}>
+                        {header?.pageTitle && (
+                            <div className={styles.content_chip}>{header?.pageTitle}</div>
+                        )}
+                            {header?.title &&(
+                                <div className={`${global.heading1} ${styles.title}`}
+                                    style={headingColor}
+                                >
+                                    <ReactMarkdown
+                                        rehypePlugins={[rehypeRaw as any]}
+                                        skipHtml={false}
+                                    >
+                                        {header?.title || ''}
+                                    </ReactMarkdown>
+                                </div>
+                            )}
+                            <div className={`${global.details1} ${styles.para}`}>
+                                {header?.content && (
+                                    <ReactMarkdown
+                                        rehypePlugins={[rehypeRaw as any]}
+                                        skipHtml={false}
+                                    >
+                                        {header?.content || ''}
+                                    </ReactMarkdown>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                    <div className={styles.overview_box_content}>
+                        {/* Loop info_box with dummy data */}
+                        {module?.map((item: Module, idx: number) => (
+                            <div className={styles.info_box} key={idx}>
+                                {item?.moduleImage?.data?.attributes?.url && (
+                                <div className={styles.images_box}>
+                                    <img src={item?.moduleImage?.data?.attributes?.url} alt={'No Image'} width={607} height={503} />
+                                </div>
+                                )}
+                                <i className={` ${styles.icon}`}>
+                                    <FiPlus />
+                                </i>
+                                <div className={`${styles.content}`}>
+                                    <div className={`${global.head4} ${styles.title}`}>
+                                        <ReactMarkdown
+                                            rehypePlugins={[rehypeRaw as any]}
+                                            skipHtml={false}
+                                        >
+                                            {item?.moduleText || ''}
+                                        </ReactMarkdown>
+                                    </div>
+                                    {item?.moduleContent && (
+                                        <div className={`${global.body1} ${styles.para}`}>
+                                            <ReactMarkdown
+                                                rehypePlugins={[rehypeRaw as any]}
+                                                skipHtml={false}
+                                            >
+                                                {item?.moduleContent || ''}
+                                            </ReactMarkdown>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default EssentialFourGrid;

components/MyAppLanding/component/EssentialThreeGrid/EssentialThreeGrid.module.scss

@@ -0,0 +1,156 @@
+@use 'theme/sass' as *;
+
+.Essential_sec {
+    width: 100%;
+    background: hsl(var(--AppM_clr_bg_primary));
+
+    .inner_auto_services {
+        width: 100%;
+        .content_box {
+            width: 100%;
+            .content {
+                width: 100%;
+                .content_chip {
+                    width: fit-content;
+                    line-height: rem(24);
+                    background: hsl(var(--AppMobile_clr_chip));
+                    padding-block: rem(6);
+                    padding-inline: rem(16);
+                    border-radius: rem(20);
+                    min-height: rem(34);
+                    @include displayFlex(row, center, center);
+                    color: hsl(var(--AppMobile_clr_text_chip));
+                    font-weight: var(--fw_medium);
+                    font-family: var(--fn_accent);
+                    & > * {
+                        color: hsl(var(--AppMobile_clr_text_chip));
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                    }
+                }
+                .title {
+                    width: min(100%, rem(680));
+                    margin-block-start: rem(16);
+                    color: hsl(var(--AppM_clr_text_primary));
+                    font-weight: var(--fw_bold);
+                    font-family: var(--fn_accent);
+                    & > * {
+                        color: hsl(var(--AppM_clr_text_primary));
+                        font-weight: var(--fw_bold);
+                    }
+                    strong {
+                        @include textGradient(var(--heading_color));
+                    }
+                }
+                .para {
+                    width: min(100%, rem(800));
+                    margin-block-start: rem(24);
+                    color: var(--clr_vzit_offer_text);
+                    & > * {
+                        color: var(--clr_vzit_offer_text);
+                    }
+                }
+            }
+        }
+
+        .overview_box_content {
+            width: 100%;
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: rem(20);
+            margin-block-start: scaleValue(30px, 60px);
+            @include max(1024px) {
+                grid-template-columns: repeat(2, 1fr);
+            }
+            @include max(767px) {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        .info_box {
+            width: 100%;
+            border-radius: rem(30);
+            overflow: hidden;
+            height: 100%;
+            position: relative;
+            padding: scaleValue(20px, 36px);
+            background: var(--clr_background_primary);
+            border: 1px solid #441c3630;
+            min-height: rem(440);
+            z-index: 0;
+            @include displayFlex(column, flex-start, space-between);
+            .images_box {
+                width: 100%;
+                border-radius: rem(30);
+                overflow: hidden;
+                height: 100%;
+                position: absolute;
+                inset: 0;
+                opacity: 0;
+                transition: all 0.3s ease-in-out;
+                z-index: -1;
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+                // &::after {
+                //     content: '';
+                //     position: absolute;
+                //     width: 100%;
+                //     height: 100%;
+                //     left: 0;
+                //     top: 0;
+                //     background: linear-gradient(
+                //         180deg,
+                //         rgba(255, 255, 255, 0) 0%,
+                //         rgba(254, 140, 80, 0.76) 57.52%,
+                //         #e24484 100%
+                //     );
+                // }
+            }
+            .para {
+                color: var(--clr_vzit_offer_text2);
+                font-family: var(--fn_accent);
+                font-weight: var(--fw_medium);
+                transition: all 0.3s ease-in-out;
+                & > * {
+                    color: var(--clr_vzit_offer_text2);
+                    font-family: var(--fn_accent);
+                    font-weight: var(--fw_medium);
+                }
+                p {
+                    &:last-child {
+                        margin-block-end: 0;
+                    }
+                    strong {
+                        font-weight: var(--fw_bold);
+                    }
+                }
+            }
+            .icon {
+                font-size: rem(34);
+                transition: all 0.3s ease-in-out;
+                color: hsl(var(--AppM_clr_bg_danger));
+            }
+
+            &:hover {
+                .images_box {
+                    opacity: 1;
+                }
+                .para {
+                    color: var(--clr_text_secondary);
+                    & > * {
+                        color: var(--clr_text_secondary);
+                    }
+                }
+                .icon {
+                    color: var(--clr_text_secondary);
+                    & > * {
+                        color: var(--clr_text_secondary);
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/EssentialThreeGrid/EssentialThreeGrid.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import global from 'theme/global/global.module.scss';
+import styles from './EssentialThreeGrid.module.scss';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { FiPlus } from 'react-icons/fi';
+import CallToAction from '../callToAction/CallToAction';
+import { Header, KeyNote } from '@/interfaces/shared/shared';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+interface PropContent {
+    header: Header,
+    divNotes: KeyNote[],
+}
+
+interface EssentialInterface {
+    extraClass?: string;
+    id?: string;
+    props: PropContent;
+}
+
+
+
+
+const EssentialThreeGrid = ({ extraClass, id, props }: EssentialInterface) => {
+    const { header, divNotes } = props;
+    const raw = header?.titleColor ?? '';
+    const trimmed = typeof raw === 'string' ? raw.replace(/[;]\s*$/, '').trim() : '';
+    const normalized =
+        trimmed.startsWith('--') ? `var(${trimmed.replace(/:$/, '')})` : trimmed;
+    
+    const style = normalized
+        ? ({ ['--heading_color' as any]: normalized } as React.CSSProperties)
+        : undefined;
+
+    const backgroundRaw = props.header.background ?? '';
+    const backgroundTrimmed = typeof backgroundRaw === 'string' ? backgroundRaw.replace(/[;]\s*$/, '').trim() : '';
+    const backgroundNormalized =
+        backgroundTrimmed.startsWith('--') ? `var(${backgroundTrimmed.replace(/:$/, '')})` : backgroundTrimmed;
+    
+    const backgroundStyle = backgroundNormalized
+        ? ({ ['background' as any]: backgroundNormalized } as React.CSSProperties)
+        : undefined;
+    return (
+        <section
+            id={id}
+            className={`${styles.Essential_sec} ${global.section_padding}  ${global.padding_block2} ${
+                extraClass && styles[extraClass]
+            }`}
+            style={backgroundStyle}
+        >
+            <div className={`${styles.custom_container} ${global.container}`}>
+                <div className={`${styles.inner_auto_services} `}>
+                    <div className={styles.content_box}>
+                        <div className={styles.content}>
+                            <div className={styles.content_chip}>{header.pageTitle}</div>
+                            {header?.title && (
+                            <div
+                                className={`${global.heading1} ${styles.title}`}
+                                style={style}
+                            >
+                                <ReactMarkdown
+                                    rehypePlugins={[rehypeRaw as any]}
+                                    skipHtml={false}
+                                >
+                                    {header.title || ''}
+                                </ReactMarkdown>
+                            </div>
+                            )}
+                            {header?.content && (
+                            <div className={`${global.details1} ${styles.para}`}  >
+                                <ReactMarkdown
+                                    rehypePlugins={[rehypeRaw as any]}
+                                    skipHtml={false}
+                                >
+                                    {header.content || ''}
+                                </ReactMarkdown>
+                            </div>
+                            )}
+                        </div>
+                    </div>
+                    <div className={styles.overview_box_content}>
+                        {/* Loop info_box with dummy data */}
+                        {divNotes.map((item: any, idx: number) => (
+                            <div className={styles.info_box} key={idx}>
+                                <div className={styles.images_box}>
+                                    <img src={item.noteImage?.data?.attributes?.url} alt={'tabImage'} width={607} height={503} />
+                                </div>
+                                <i className={` ${styles.icon}`}>
+                                    <FiPlus />
+                                </i>
+                                <div className={`${global.heading22} ${styles.para}`}>
+                                        <ReactMarkdown
+                                        rehypePlugins={[rehypeRaw as any]}
+                                        skipHtml={false}
+                                    >
+                                        {item.noteTitle || ''}
+                                    </ReactMarkdown>
+                                </div>
+                                <div className={`${global.details1} ${styles.para}`}>
+                                    <ReactMarkdown
+                                        rehypePlugins={[rehypeRaw as any]}
+                                        skipHtml={false}
+                                    >
+                                        {item.noteBody || ''}
+                                    </ReactMarkdown>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+            
+        </section>
+    );
+};
+
+export default EssentialThreeGrid;

components/MyAppLanding/component/Features/Features.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+const Features = ({ props }: any) => (
+  <>
+  {(props?.length > 0) && (
+    <section>
+      <h2>Features Component</h2>
+      <pre>{JSON.stringify(props, null, 2)}</pre>
+    </section>
+  )}
+  </>
+);
+export default Features; 

components/MyAppLanding/component/HealthEfficiency/HealthEfficiency.tsx

@@ -0,0 +1,316 @@
+import React from 'react';
+import global from 'theme/global/global.module.scss';
+import styles from './healthEfficiency.module.scss';
+import { Box, Tab, Tabs } from '@mui/material';
+import ReactMarkdown from 'react-markdown';
+
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
+
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { HealthCareEfficiencyInterface } from '@/interfaces/healthCare.interface';
+import Image from 'next/image';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { Header, Module } from '@/interfaces/shared/shared';
+import rehypeRaw from 'rehype-raw';
+
+interface TabPanelProps {
+    children?: React.ReactNode;
+    index: number;
+    value: number;
+}
+
+function CustomTabPanel(props: TabPanelProps) {
+    const { children, value, index, ...other } = props;
+
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`simple-tabpanel-${index}`}
+            aria-labelledby={`simple-tab-${index}`}
+            {...other}
+            className={styles.tab_custom_panel}
+        >
+            {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+        </div>
+    );
+}
+function a11yProps(index: number) {
+    return {
+        id: `simple-tab-${index}`,
+        'aria-controls': `simple-tabpanel-${index}`,
+    };
+}
+interface TechniqueInterface {
+    header: Header;
+    module: Module[];
+}
+
+interface HealthEfficiencyPropsInterface {
+    extraClass?: string;
+    data: HealthCareEfficiencyInterface;
+    id?: string;
+    onOpen: () => void;
+    props: TechniqueInterface;
+}
+const HealthEfficiency = ({ extraClass, data, id, onOpen, props }: HealthEfficiencyPropsInterface) => {
+    const { header, module } = props;
+    const [value, setValue] = React.useState(0);
+    const [expanded, setExpanded] = React.useState<string | false>(false);
+    const handleAccordionChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+        setExpanded(isExpanded ? panel : false);
+    };
+    const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+        setValue(newValue);
+    };
+    const raw = header?.titleColor ?? '';
+    const trimmed = typeof raw === 'string' ? raw.replace(/[;]\s*$/, '').trim() : '';
+    const normalized =
+        trimmed.startsWith('--') ? `var(${trimmed.replace(/:$/, '')})` : trimmed;
+    
+    const style = normalized
+        ? ({ ['--heading_color' as any]: normalized } as React.CSSProperties)
+        : undefined;
+
+    const backgroundRaw = header?.background ?? '';
+    const backgroundTrimmed = typeof backgroundRaw === 'string' ? backgroundRaw.replace(/[;]\s*$/, '').trim() : '';
+    const backgroundNormalized =
+        backgroundTrimmed.startsWith('--') ? `var(${backgroundTrimmed.replace(/:$/, '')})` : backgroundTrimmed;
+    
+    const backgroundStyle = backgroundNormalized
+        ? ({ ['background' as any]: backgroundNormalized } as React.CSSProperties)
+        : undefined;
+    return (
+        <section
+            id={id}
+            className={`${styles.saasServices_sec} ${global.section_padding} ${global.padding_block} ${
+                extraClass && styles[extraClass]
+            }`}
+            style={backgroundStyle}
+        >
+            <div className={`${styles.custom_container} ${global.container}`}>
+                <div className={`${styles.inner_box}`}>
+                    <div className={styles.headerBlock}>
+                        {header?.title && (
+                            <div className={`${styles.title} ${global.manrope} ${global.heading1}`}>
+                                <div
+                                    style={style}
+                                >
+                                    <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                        {header?.title || ''}
+                                    </ReactMarkdown>
+                                </div>
+                            </div>
+                        )}
+                        {header?.content && (
+                            <div className={`${styles.para} ${global.details1}`}>
+                                <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                    {header?.content || ''}
+                                </ReactMarkdown>
+                            </div>
+                        )}
+                    </div>
+                    <div className={styles.tabBlock}>
+                        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                            <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
+                                {module?.length > 0 &&
+                                    module.map((item: any, index: number) => {
+                                        const tabBgRaw = item?.tabBg ?? '';
+                                        const tabBgTrimmed = typeof tabBgRaw === 'string' ? tabBgRaw.replace(/[;]\s*$/, '').trim() : '';
+                                        const tabBgNormalized =
+                                            tabBgTrimmed.startsWith('--') ? `var(${tabBgTrimmed.replace(/:$/, '')})` : tabBgTrimmed;
+                                        
+                                        const tabBgStyle = tabBgNormalized
+                                            ? ({ ['--active_bg' as any]: tabBgNormalized } as React.CSSProperties)
+                                            : undefined;
+                                        let activeTextColor = '#fff';
+                                        if (item?.tabBg === '#fff') {
+                                            activeTextColor = '#000';
+                                        }
+
+                                        return (
+                                            <Tab
+                                                style={
+                                                    {
+                                                        '--active_bg': item?.tabBg || '#0897F0',
+                                                    } as React.CSSProperties
+                                                }
+                                                key={index}
+                                                label={
+                                                    item?.moduleTextColor ? (
+                                                        <div
+                                                            className={styles.tabTitle}
+                                                            style={
+                                                                {
+                                                                    color: item?.moduleTextColor || '#C3C3C3',
+                                                                    '--bar-color': item?.moduleTextColor || '#C3C3C3',
+                                                                    '--text_col': activeTextColor,
+                                                                } as React.CSSProperties
+                                                            }
+                                                        >
+                                                            <span
+                                                                className={styles.grad}
+                                                                style={
+                                                                    {
+                                                                        color: item?.moduleTextColor || '#FFF',
+                                                                        '--active_bg':
+                                                                            item?.tabBg ||
+                                                                            '--clr_background_secondary52',
+                                                                        '--text_col':
+                                                                            item?.tabBg && item?.tabBg == '#fff'
+                                                                                ? '#000'
+                                                                                : '#fff',
+                                                                    } as React.CSSProperties
+                                                                }
+                                                            >
+                                                                {item?.moduleNumber}
+                                                            </span>
+                                                            <span className={styles.content_tab}>
+                                                                {item?.moduleText || ''}{' '}
+                                                            </span>
+                                                        </div>
+                                                    ) : (
+                                                        <div
+                                                            className={styles.tabTitle}
+                                                            style={
+                                                                {
+                                                                    '--bar-color': 'var(--clr_background_secondary52)',
+                                                                } as React.CSSProperties
+                                                            }
+                                                        >
+                                                            <span className={styles.grad}>{item?.moduleNumber}</span>
+                                                            <span>{item?.moduleText || ''} </span>
+                                                        </div>
+                                                    )
+                                                }
+                                                {...a11yProps(index)}
+                                            />
+                                        );
+                                    })}
+                            </Tabs>
+                        </Box>
+                        {module?.length > 0 &&
+                            module.map((item: any, index: number) => (
+                                <CustomTabPanel key={index} value={value} index={index}>
+                                    <div className={styles.itemBox}>
+                                        <div className={`${styles.detailGrid}`}>
+                                            <div className={styles.leftItem}>
+                                                <div className={`${styles.title} ${global.heading5}`}>
+                                                    <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                                        {item?.moduleText ? item?.moduleText : ''}
+                                                    </ReactMarkdown>
+                                                </div>
+                                            </div>
+
+                                            <div className={styles.icon}>
+                                                <div className={`${styles.count_title} ${global.heading2}`}>
+                                                    <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                                        {item?.tabContent || ''}
+                                                    </ReactMarkdown>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div className={`${styles.para}`}>
+                                            <div className={`${styles.para_content} ${global.details1}`}>
+                                                <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                                    {item?.moduleContent ? item?.moduleContent : ''}
+                                                </ReactMarkdown>
+                                            </div>
+                                            {item?.moduleImage?.data?.attributes?.url && (
+                                                <div className={`${styles.tabImg}`}>
+                                                    <Image
+                                                        src={item?.moduleImage?.data?.attributes?.url}
+                                                        width={item?.moduleImage?.data?.attributes?.width || 612}
+                                                        height={item?.moduleImage?.data?.attributes?.height || 222}
+                                                        alt={
+                                                            item?.moduleImage?.data?.attributes?.alternativeText ||
+                                                            'tab-image'
+                                                        }
+                                                    />
+                                                </div>
+                                            )}
+
+                                            {item?.modulePoints && (
+                                                <div className={styles.details}>
+                                                    <div className={`${styles.details_content} ${global.details1}`}>
+                                                        <ReactMarkdown
+                                                            rehypePlugins={[rehypeRaw as any]}
+                                                            skipHtml={false}
+                                                        >
+                                                            {item?.modulePoints ? item?.modulePoints : ''}
+                                                        </ReactMarkdown>
+                                                    </div>
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                </CustomTabPanel>
+                            ))}
+                        {/* Accordion */}
+                        <div className={styles.mobile_accordion}>
+                            {module?.length > 0 &&
+                                module?.map((item: any, index: number) => (
+                                    <Accordion
+                                        key={index}
+                                        expanded={expanded === `panel${index + 1}`}
+                                        onChange={handleAccordionChange(`panel${index + 1}`)}
+                                        className={styles.accodian}
+                                    >
+                                        <AccordionSummary
+                                            expandIcon={<ExpandMoreIcon />}
+                                            aria-controls={`panel${index + 1}bh-content`}
+                                            id={`panel${index + 1}bh-header`}
+                                        >
+                                            <div className={`${styles.detailGrid}`}>
+                                                <div
+                                                    className={`${styles.countText} ${global.manrope} ${global.heading1_1}`}
+                                                >
+                                                    <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                                        {item?.moduleNumber ? item?.moduleNumber : ''}
+                                                    </ReactMarkdown>
+                                                </div>
+                                                <div className={styles.leftItem}>
+                                                    <div
+                                                        className={`${styles.title} ${global.manrope} ${global.heading2}`}
+                                                    >
+                                                        <ReactMarkdown
+                                                            rehypePlugins={[rehypeRaw as any]}
+                                                            skipHtml={false}
+                                                        >
+                                                            {item?.moduleText ? item?.moduleText : ''}
+                                                        </ReactMarkdown>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </AccordionSummary>
+                                        <AccordionDetails>
+                                            <div className={`${styles.para} ${global.body1}`}>
+                                                <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                                    {item?.moduleContent ? item?.moduleContent : ''}
+                                                </ReactMarkdown>
+                                            </div>
+                                            {item?.moduleImage?.data?.attributes?.url && (
+                                                <Image
+                                                    src={item?.moduleImage?.data?.attributes?.url}
+                                                    width={item?.moduleImage?.data?.attributes?.width || 612}
+                                                    height={item?.moduleImage?.data?.attributes?.height || 222}
+                                                    alt={
+                                                        item?.moduleImage?.data?.attributes?.alternativeText ||
+                                                        'tab-image'
+                                                    }
+                                                />
+                                            )}
+                                        </AccordionDetails>
+                                    </Accordion>
+                                ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default HealthEfficiency;

components/MyAppLanding/component/HealthEfficiency/healthEfficiency.module.scss

@@ -0,0 +1,415 @@
+@use 'theme/sass' as *;
+
+.saasServices_sec {
+    width: 100%;
+    position: relative;
+    background-color: var(--clr_background_primary1_1);
+    z-index: 1;
+    .custom_container {
+        width: 100%;
+        .inner_box {
+            width: 100%;
+            .headerBlock {
+                width: 100%;
+                display: grid;
+                grid-template-columns: 52fr 45fr;
+                gap: scaleValue(15px, 80px);
+                @include max(991px) {
+                    grid-template-columns: 1fr;
+                    text-align: center;
+                    gap: rem(30);
+                }
+                .title {
+                    color: var(--clr_text_secondary);
+
+                    & > * {
+                        color: var(--clr_text_secondary);
+                        & > * {
+                            color: var(--clr_text_secondary);
+                            strong {
+                                background: var(--clr_text_green_blue_02);
+                                background-clip: text;
+                                -webkit-background-clip: text;
+                                -webkit-text-fill-color: transparent;
+                                & > * {
+                                    background: var(--clr_text_green_blue_02);
+                                    background-clip: text;
+                                    -webkit-background-clip: text;
+                                    -webkit-text-fill-color: transparent;
+                                }
+                            }
+                        }
+
+                        strong {
+                            background: var(--clr_text_green_blue_02);
+                            background-clip: text;
+                            -webkit-background-clip: text;
+                            -webkit-text-fill-color: transparent;
+                            & > * {
+                                background: var(--clr_text_green_blue_02);
+                                background-clip: text;
+                                -webkit-background-clip: text;
+                                -webkit-text-fill-color: transparent;
+                            }
+                        }
+                    }
+                }
+                .para {
+                    font-weight: var(--fw_regular);
+                    font-family: var(--font_primary);
+                    color: var(--clr_text_secondary);
+                    @include displayFlex(row, center, flex-end);
+
+                    & > * {
+                        color: var(--clr_text_secondary);
+                        font-weight: var(--fw_regular);
+                        font-family: var(--font_primary);
+                        max-width: rem(1000);
+                    }
+                }
+            }
+            .tabBlock {
+                width: 100%;
+                margin-block-start: rem(50);
+                display: grid;
+                grid-template-columns: 44fr 56fr;
+                gap: scaleValue(15px, 50px);
+                @include max(991px) {
+                    @include displayFlex(column, flex-start, flex-start);
+                }
+                & :global(.MuiBox-root) {
+                    width: 100%;
+                    border: none;
+                    padding: 0;
+                    height: 100%;
+                    & :global(.MuiTabs-root) {
+                        height: 100%;
+                        & :global(.MuiTabs-scroller) {
+                            overflow: auto !important;
+                            &::-webkit-scrollbar-track {
+                                background-color: transparent;
+                            }
+
+                            &::-webkit-scrollbar-thumb {
+                                background-color: var(--clr_background_secondary8);
+                                border-radius: 10px;
+                            }
+
+                            & :global(.MuiTabs-flexContainer) {
+                                justify-content: flex-start;
+                                flex-direction: column;
+                                gap: rem(22);
+                                @include max(991px) {
+                                    flex-direction: row;
+                                }
+                                & :global(.MuiButtonBase-root) {
+                                    color: var(--clr_text_sky_blue_02);
+                                    font-family: var(--font_primary);
+                                    font-weight: var(--fw_medium);
+                                    font-size: rem(18);
+                                    line-height: rem(30);
+                                    text-transform: capitalize;
+                                    width: 100%;
+                                    max-width: 100%;
+                                    padding: 0;
+                                    text-align: left;
+                                    min-height: rem(72);
+                                    @include displayFlex(row, center, flex-start);
+                                    gap: rem(10);
+                                    // & > * {
+                                    //     color: var(--clr_text_secondary);
+                                    // }
+                                    @include max(991px) {
+                                        padding: rem(20);
+                                    }
+                                    & .tabTitle {
+                                        width: 100%;
+                                        @include displayFlex(row, center, flex-start);
+                                        .grad {
+                                            color: var(--clr_text_sky_blue_02);
+                                            position: relative;
+                                            padding-inline-end: rem(15);
+                                            width: rem(130);
+                                            &::after {
+                                                content: '';
+                                                position: absolute;
+                                                left: 40%;
+                                                top: 50%;
+                                                width: rem(54);
+                                                height: rem(1);
+                                                background: var(--bar-color);
+                                            }
+                                            @include max(991px) {
+                                                width: rem(80);
+                                                &::after {
+                                                    width: rem(30);
+                                                }
+                                            }
+                                        }
+                                        .content_tab {
+                                            flex: 1;
+                                        }
+                                    }
+                                    @include max(991px) {
+                                        max-width: rem(280);
+                                    }
+
+                                    &:global(.Mui-selected) {
+                                        color: var(--text_col);
+                                        background: var(--active_bg);
+                                        align-items: center;
+                                        padding: rem(20);
+                                        border-radius: rem(16);
+                                        &:global(.MuiButtonBase-root) {
+                                            color: var(--text_col, #fff);
+                                            font-size: rem(22);
+
+                                            & .tabTitle {
+                                                color: var(--text_col, #fff) !important;
+                                                .grad {
+                                                    color: var(--text_col, #fff) !important;
+                                                    &::after {
+                                                        width: rem(40);
+                                                        background: var(--text_col, #fff);
+                                                    }
+                                                    @include max(991px) {
+                                                        width: rem(80);
+                                                        &::after {
+                                                            left: 44%;
+                                                            width: rem(20);
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                    &:last-child {
+                                        border-right: none;
+                                        margin-right: 0;
+                                    }
+                                }
+                            }
+                            & :global(.MuiTabs-indicator) {
+                                display: none;
+                            }
+                        }
+                    }
+                }
+                & .itemBox {
+                    background: var(--clr_background_primary);
+                    border-radius: rem(20);
+                    padding: rem(10);
+                    height: 100%;
+                    .detailGrid {
+                        @include displayFlex(row, center, space-between);
+                        gap: rem(20);
+                        background: hsl(var(--AppM_clr_bg_light_03));
+                        border-radius: rem(14);
+                        padding: scaleValue(10px, 20px) scaleValue(10px, 30px);
+
+                        @include max(991px) {
+                            grid-template-columns: 1fr;
+                        }
+                        .leftItem {
+                            width: 100%;
+                            max-width: rem(580);
+                            @include max(991px) {
+                                max-width: 100%;
+                            }
+                            & .title {
+                                color: var(--clr_vzit_offer_text2);
+                                text-transform: capitalize;
+                                font-weight: var(--fw_semiBold);
+
+                                & > * {
+                                    color: var(--clr_vzit_offer_text2);
+                                    font-weight: var(--fw_semiBold);
+                                }
+                            }
+                        }
+                        .icon {
+                            .count_title {
+                                color: var(--clr_vzit_offer_text2);
+                                & > * {
+                                    color: var(--clr_vzit_offer_text2);
+                                }
+                            }
+                            img {
+                                width: rem(33);
+                                height: rem(33);
+                                object-fit: contain;
+                                filter: brightness(0) saturate(100%) invert(35%) sepia(48%) saturate(4265%)
+                                    hue-rotate(183deg) brightness(98%) contrast(101%);
+                            }
+                        }
+                    }
+                    & .para {
+                        padding: scaleValue(15px, 20px) scaleValue(15px, 20px);
+                        .para_content {
+                            color: var(--clr_vzit_offer_text);
+                            font-weight: var(--fw_regular);
+                            padding-inline: rem(8);
+                            & > * {
+                                color: var(--clr_vzit_offer_text);
+                                font-weight: var(--fw_regular);
+                            }
+                            p {
+                                margin-block-end: rem(32);
+                            }
+                            p + p {
+                                font-size: rem(26);
+                                color: var(--clr_vzit_offer_text2);
+                                font-weight: var(--fw_semiBold);
+                            }
+                            ul {
+                                li {
+                                    font-weight: var(--fw_medium);
+                                    font-family: var(--fn_accent);
+                                    @include displayFlex(row, flex-start, flex-start);
+                                    gap: rem(10);
+                                    color: var(--clr_vzit_offer_text);
+                                    font-size: rem(16);
+                                    line-height: 1.3;
+                                    margin-block-start: rem(18);
+                                    position: relative;
+                                    padding-inline-start: rem(30);
+                                    line-height: 1.6;
+
+                                    &:first-child {
+                                        margin-block-start: 0;
+                                    }
+
+                                    & > * {
+                                        color: var(--clr_text_primary);
+                                        font-weight: var(--fw_bold);
+                                        font-family: var(--fn_accent);
+                                        line-height: 1.6;
+                                    }
+                                    & > * > span {
+                                        color: hsl(var(--AppM_clr_text_para));
+                                        font-family: var(--fn_accent);
+                                        font-weight: var(--fw_medium);
+
+                                        & > * {
+                                            color: hsl(var(--AppM_clr_text_para));
+                                        }
+                                    }
+                                    .icon {
+                                        color: #b9dfed;
+                                    }
+                                    &::before {
+                                        content: '';
+                                        position: absolute;
+                                        top: rem(5);
+                                        left: 0;
+                                        width: rem(15);
+                                        height: rem(15);
+                                        background: url('../../../../public/assets/images/myAppmobile/checked.png')
+                                            no-repeat center center;
+                                        filter: brightness(0) saturate(100%) invert(89%) sepia(11%) saturate(707%)
+                                            hue-rotate(162deg) brightness(95%) contrast(95%);
+                                    }
+                                }
+                            }
+                        }
+                        & > * {
+                            color: var(--clr_vzit_offer_text);
+                            font-weight: var(--fw_regular);
+                        }
+                        & .details {
+                            padding-inline: rem(8);
+                            margin-block-start: rem(24);
+                            .details_content {
+                                width: 100%;
+                                .bold_title,
+                                h3 {
+                                    font-size: rem(24);
+                                    color: var(--clr_vzit_offer_text2);
+                                    font-weight: var(--fw_semiBold);
+                                    & > * {
+                                        color: var(--clr_vzit_offer_text2);
+                                        font-weight: var(--fw_semiBold);
+                                    }
+                                }
+                                & ul {
+                                    width: 100%;
+                                    margin-block-start: rem(24);
+                                    li {
+                                        color: var(--clr_vzit_offer_text);
+                                        font-size: rem(18);
+                                        line-height: 1.3;
+                                        font-weight: var(--fw_regular);
+                                        margin-block-start: rem(18);
+                                        position: relative;
+                                        padding-inline-start: rem(35);
+                                        & > * {
+                                            color: var(--clr_vzit_offer_text);
+                                            font-weight: var(--fw_regular);
+                                        }
+                                        &:first-child {
+                                            margin-block-start: 0;
+                                        }
+                                        &::before {
+                                            content: '';
+                                            position: absolute;
+                                            top: rem(5);
+                                            left: 0;
+                                            width: rem(15);
+                                            height: rem(15);
+                                            background: url('../../../../public/assets/images/templateHealth/checked.png')
+                                                no-repeat center center;
+                                            filter: brightness(0) saturate(100%) invert(61%) sepia(91%) saturate(471%)
+                                                hue-rotate(165deg) brightness(97%) contrast(95%);
+                                        }
+                                    }
+                                }
+                            }
+                        }
+
+                        .tabImg {
+                            width: 100%;
+                            height: rem(222);
+                            margin-block-start: rem(24);
+                            border-radius: rem(10);
+                            overflow: hidden;
+                            img {
+                                width: 100%;
+                                height: 100%;
+                                object-fit: cover;
+                            }
+                        }
+                    }
+                }
+                .mobile_accordion {
+                    display: none;
+                }
+            }
+        }
+    }
+    // &.ewalletApp {
+    //     .custom_container {
+    //         .inner_box {
+    //             .tabBlock {
+    //                 & .itemBox {
+    //                     .detailGrid {
+    //                         padding: 0;
+    //                         background: transparent;
+    //                         .leftItem {
+    //                             display: none;
+    //                         }
+    //                         .icon {
+    //                             width: 100%;
+    //                             height: 100%;
+    //                             img {
+    //                                 width: 100%;
+    //                                 height: 100%;
+    //                                 object-fit: contain;
+    //                             }
+    //                         }
+    //                     }
+    //                 }
+    //             }
+    //         }
+    //     }
+    // }
+}

components/MyAppLanding/component/Industries/Industries.tsx

@@ -0,0 +1,147 @@
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import React from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import styles from './industries.module.scss';
+import global from 'theme/global/global.module.scss';
+import { Autoplay } from 'swiper';
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+import { Header,Module } from '@/interfaces/shared/shared';
+import rehypeRaw from 'rehype-raw';
+import ReactMarkdown from 'react-markdown';
+
+
+
+interface IndustriesModule {
+    header: Header;
+    module: Module[];
+}
+
+interface requiredProps{
+    props: IndustriesModule;
+    extraClass: string;
+    id: string;
+}
+
+const Industries = ({ extraClass, id, props }: requiredProps) => {
+    const { header, module } = props as IndustriesModule;
+
+    return (
+        <section
+            id={id}
+            className={`${styles.devicesWhyIos} ${global.padding_block2} ${extraClass && styles[extraClass]}`}
+        >
+            <div className={`${styles.customContainer} ${global.container}`}>
+                <div className={`${styles.inner_content} ${global.section_padding}`}>
+                    <div className={`${styles.textContent}`}>
+                        <div className={styles.content_chip}>{header.pageTitle}</div>
+                        <div
+                            className={`${global.heading1_1} ${styles.top_head}`}
+                            style={
+                                {
+                                    '--heading_color': header.titleColor ? header.titleColor : '',
+                                } as React.CSSProperties as any
+                            }
+                        >
+                            <ReactMarkdown
+                                rehypePlugins={[rehypeRaw as any]}
+                                skipHtml={false}
+                            >
+                                {header.title || ''}
+                            </ReactMarkdown>
+                        </div>
+
+                        <div
+                            className={`${global.details1} ${styles.sub_text}`}
+                          
+                        >
+                          <ReactMarkdown
+                                rehypePlugins={[rehypeRaw as any]}
+                                skipHtml={false}
+                            >
+                                {header.content || ''}
+                            </ReactMarkdown>
+                        </div>
+                    </div>
+                    <div className={styles.nexLogo}>
+                        <img
+                            src={UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_NEXGENLOGO}
+                            width={381}
+                            height={274}
+                        />
+                    </div>
+                </div>
+            </div>
+            <div className={`${styles.devices_whyIos_contentSlide}`}>
+                <Swiper
+                    slidesPerView={4}
+                    spaceBetween={20}
+                    loop
+                    autoplay={{
+                        delay: 2500,
+                        disableOnInteraction: true,
+                        pauseOnMouseEnter: true,
+                    }}
+                    observer={true}
+                    observeParents={true}
+                    navigation={false}
+                    modules={[Autoplay]}
+                    className={styles.swiper_box}
+                    breakpoints={{
+                        0: {
+                            slidesPerView: 1,
+                        },
+                        575: {
+                            slidesPerView: 2,
+                        },
+                        991: {
+                            slidesPerView: 3,
+                        },
+                        1024: {
+                            slidesPerView: 4,
+                        },
+                    }}
+                >
+                    {module &&
+                        [...module, ...module]?.map((item: Module, i: number) => (
+                            <SwiperSlide key={i}>
+                                <div className={styles.box}>
+                                    <div className={styles.image_box}>
+                                        <div className={styles.iconBox}>
+                                            <img
+                                                key={i}
+                                                src={item?.moduleImage?.data?.attributes?.url}
+                                                alt={'nexIcon'}
+                                                width={40}
+                                                height={40}
+                                            />
+                                        </div>
+                                    </div>
+                                    <div className={styles.details}>
+                                        <div className={`${global.heading5} ${styles.title}`}>
+                                            <ReactMarkdown
+                                                rehypePlugins={[rehypeRaw as any]}
+                                                skipHtml={false}
+                                            >
+                                                {item.moduleText || ''}
+                                            </ReactMarkdown>
+                                        </div>
+                                        <div className={`${global.body1} ${styles.para}`}>
+                                            <ReactMarkdown
+                                                rehypePlugins={[rehypeRaw as any]}
+                                                skipHtml={false}
+                                            >
+                                                {item.moduleContent || ''}
+                                            </ReactMarkdown>
+                                        </div>
+                                    </div>
+                                </div>
+                            </SwiperSlide>
+                        ))}
+                </Swiper>
+            </div>
+        </section>
+    );
+};
+export default Industries;

components/MyAppLanding/component/Industries/industries.module.scss

@@ -0,0 +1,206 @@
+@use 'theme/sass' as *;
+
+.devicesWhyIos {
+    width: 100%;
+    position: relative;
+    background-color: var(--clr_background_primary);
+    z-index: 1;
+
+    .customContainer {
+        position: relative;
+        z-index: 3;
+        .inner_content {
+            width: 100%;
+            position: relative;
+            .textContent {
+                width: 100%;
+                @include displayFlex(column, flex-start, flex-start);
+                gap: rem(12);
+                .content_chip {
+                    width: fit-content;
+                    line-height: rem(24);
+                    background: hsl(var(--AppM_clr_bg_blue_chip));
+                    padding-inline: rem(16);
+                    padding-block: rem(6);
+                    border-radius: rem(20);
+                    min-height: rem(34);
+                    @include displayFlex(row, center, center);
+                    color: hsl(var(--AppMobile_clr_text_chip));
+                    font-weight: var(--fw_medium);
+                    font-family: var(--fn_accent);
+                    margin-block-end: rem(10);
+                    & > * {
+                        color: hsl(var(--AppMobile_clr_text_chip));
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                    }
+                }
+                .top_head {
+                    color: var(--clr_vzit_offer_text2);
+                     
+                    max-width: rem(740);
+                    & > * {
+                        color: var(--clr_vzit_offer_text2);
+                         
+                        font-family: var(--fn_accent);
+                        strong {
+                            @include textGradient(var(--heading_color));
+                        }
+                    }
+                    strong {
+                        @include textGradient(var(--heading_color));
+                    }
+                }
+                .sub_text {
+                    max-width: rem(833);
+                    font-weight: var(--fw_regular);
+                    font-family: var(--font_primary);
+                    color: var(--clr_vzit_offer_text);
+
+                    & > * {
+                        color: var(--clr_vzit_offer_text);
+                        margin-block-start: rem(20);
+                        font-weight: var(--fw_regular);
+                        font-family: var(--font_primary);
+                        max-width: rem(1000);
+                    }
+                }
+            }
+            .nexLogo {
+                position: absolute;
+                top: 0;
+                z-index: -1;
+                right: 0;
+            }
+        }
+    }
+    .devices_whyIos_contentSlide {
+        margin-block-start: scaleValue(30px, 60px);
+        .swiper_box {
+            width: 100%;
+            padding-block-end: scaleValue(70px, 90px);
+            & :global(.swiper-wrapper) {
+                margin-inline-start: rem(20);
+                @include max(575px) {
+                    margin-inline-start: 0;
+                }
+                :global(.swiper-slide) {
+                    @include displayFlex(row, stretch, flex-start);
+                    height: auto;
+                }
+            }
+        }
+        .box {
+            background-color: hsl(var(--AppM_clr_bg_light_01));
+            border: 1px solid hsl(var(--AppM_border_04));
+            padding: scaleValue(18px, 25px) scaleValue(20px, 36px);
+            border-radius: rem(27);
+            border-top-right-radius: 0;
+            height: 100%;
+            width: 100%;
+            transition: var(--transition_02);
+            margin-block-start: rem(4);
+
+            .image_box {
+                position: absolute;
+                top: -8px;
+                right: 0;
+                border: 1px solid hsl(var(--AppM_border_04));
+                border-top: none;
+                border-right: none;
+                background: var(--clr_background_primary);
+                width: rem(90);
+                height: rem(90);
+                border-bottom-left-radius: 50%;
+                @include displayFlex(row, center, center);
+                z-index: 1;
+                &::before {
+                    position: absolute;
+                    content: '';
+                    top: 12px;
+                    left: -37px;
+                    transform: rotate(-90deg);
+                    background: none;
+                    width: 2.25rem;
+                    height: 2.25rem;
+                    border-top: 0;
+                    border-right: 1px solid hsl(var(--AppM_border_04));
+                    border-bottom: 1px solid hsl(var(--AppM_border_04));
+                    border-bottom-right-radius: 1.25rem;
+                    box-shadow: 0.313rem 0.313rem 0 0.313rem hsl(0deg 0% 100%);
+                    border-left: 0;
+                    z-index: 2;
+                }
+                &::after {
+                    position: absolute;
+                    content: '';
+                    bottom: -36px;
+                    right: 1px;
+                    transform: rotate(-90deg);
+                    background: none;
+                    width: 2.25rem;
+                    height: 2.25rem;
+                    border-bottom-right-radius: 1.25rem;
+                    box-shadow: 0.313rem 0.313rem 0 0.313rem #ffffff;
+                    border-right: 1px solid hsl(var(--AppM_border_04));
+                    border-bottom: 1px solid hsl(var(--AppM_border_04));
+                }
+
+                .iconBox {
+                    width: rem(70);
+                    height: rem(70);
+                    background: linear-gradient(180deg, #11aef1 0%, #1ec0b7 100%);
+                    border-radius: 50%;
+                    @include displayFlex(row, center, center);
+                    img {
+                        width: rem(40);
+                        height: rem(40);
+                        object-fit: contain;
+                    }
+                }
+            }
+            .details {
+                .title {
+                    margin-block-end: scaleValue(8px, 15px);
+                    color: var(--clr_vzit_offer_text2);
+                    max-width: calc(100% - 65px);
+                    overflow-wrap: break-word;
+                    word-break: break-word;
+                    white-space: normal;
+                    & > * {
+                        margin-block-end: scaleValue(8px, 15px);
+                        color: var(--clr_vzit_offer_text2);
+                    }
+                }
+                .para {
+                    margin-block-start: rem(28);
+                    color: var(--clr_vzit_offer_text);
+                    font-weight: var(--fw_regular);
+                    padding-inline-end: rem(20);
+                    font-family: var(--font_primary);
+                    & > * {
+                        color: var(--clr_vzit_offer_text);
+                        font-weight: var(--fw_regular);
+                        font-family: var(--font_primary);
+
+                        @include max(991px) {
+                            margin-block-start: rem(8);
+                        }
+                    }
+                    @include max(1199px) {
+                        padding-inline-end: 0;
+                    }
+                    @include max(575px) {
+                        max-width: rem(400);
+                    }
+                }
+            }
+            &:hover {
+                background-color: var(--sub_land_border_clr);
+                .image_box {
+                    background: var(--clr_background_primary);
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/InstagramConcept/InstagramConcept.module.scss

@@ -0,0 +1,180 @@
+@use 'theme/sass' as *;
+
+.advantages_sec {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    background: url('./../../../../public/assets/images/myAppmobile/Conceptbg.png') no-repeat center center;
+    background-size: cover;
+    padding-bottom: 0;
+    &::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: radial-gradient(88.07% 249.63% at 0% 9.99%, #ffffff 0%, #ffffff 35.47%, #ffffff 100%)
+            /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
+        background-blend-mode: lighten;
+        opacity: 0.5;
+        z-index: 0;
+        top: 0;
+        left: 0;
+    }
+
+    .custom_container {
+        .inner_auto_services {
+            @include displayFlex(column, flex-start, flex-start);
+            gap: 20px;
+            position: relative;
+
+            .content_box {
+                width: 100%;
+                @include displayFlex(column, center, center);
+                padding-block-end: 40px;
+
+                .content {
+                    text-align: center;
+                    width: 100%;
+
+                    .title {
+                        color: var(--clr_vzit_offer_text2);
+                        max-width: rem(650);
+                        margin-inline: auto;
+
+                        & > * {
+                            font-weight: var(--fw_semiBold);
+                            font-family: var(--fn_accent);
+                            color: var(--clr_vzit_offer_text2);
+                        }
+                        strong {
+                            @include textGradient(var(--heading_color));
+                        }
+                    }
+                    .text {
+                        color: hsl(var(--AppM_clr_text_para));
+                        font-weight: var(--fw_regular);
+                        font-family: var(--font_primary);
+                        max-width: 756px;
+                        width: 100%;
+                        margin: 30px auto;
+                        & > * {
+                            color: hsl(var(--AppM_clr_text_para));
+                            font-weight: var(--fw_regular);
+                            font-family: var(--font_primary);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .services_box_wrap {
+        width: 100%;
+        position: relative;
+        z-index: 1;
+        padding-block-start: rem(140);
+        // height: rem(785);
+        @include max(767px) {
+            padding-block-start: rem(0);
+        }
+        .mainImg {
+            position: absolute;
+            inset: 0;
+            top: auto;
+            width: 100%;
+            height: rem(550);
+            z-index: 2;
+            pointer-events: none;
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+            }
+            @include max(1359px) {
+                height: rem(534);
+            }
+            @include max(767px) {
+                display: none;
+            }
+        }
+        .details {
+            width: 100%;
+            padding-block: rem(59);
+            @include max(991px) {
+                position: relative;
+                top: 0;
+                transform: translateY(0%);
+            }
+            @include max(767px) {
+                padding-block-start: rem(0);
+            }
+            & :global(.swiper) {
+                & :global(.swiper-wrapper) {
+                    height: 100% !important;
+                    align-items: stretch;
+                    // position: relative;
+                    // top: 80px;
+                    & :global(.swiper-slide) {
+                        // height: 100%;
+                        .wrapper_box {
+                            width: 100%;
+                            height: 100%;
+                        }
+                        & .data_slide {
+                            width: min(100%, rem(390));
+                            height: 100%;
+                            margin-inline: auto;
+                            background: var(--clr_background_primary);
+                            box-shadow: 0px -1px 21px 0px #0000001c;
+                            border: 1px solid #fe00806e;
+                            border-radius: rem(26);
+                            padding: scaleValue(30px, 44px) scaleValue(20px, 38px);
+                            .para_2 {
+                                background: linear-gradient(180deg, #ca5a27 0%, #421b36 100%);
+                                -webkit-background-clip: text;
+                                -webkit-text-fill-color: transparent;
+                                font-weight: var(--fw_semiBold);
+                                font-family: var(--fn_accent);
+                                & > * {
+                                    background: linear-gradient(180deg, #ca5a27 0%, #421b36 100%);
+                                    -webkit-background-clip: text;
+                                    -webkit-text-fill-color: transparent;
+                                    font-weight: var(--fw_semiBold);
+                                    font-family: var(--fn_accent);
+                                }
+                            }
+                            @include min(1690px) {
+                                width: min(100%, rem(300));
+                            }
+                            @include max(1359px) {
+                                width: min(100%, rem(300));
+                            }
+                            @include max(767px) {
+                                width: 100%;
+                            }
+                        }
+                        &:global(.swiper-slide.swiper-slide-next) {
+                            transform: perspective(3000px) rotateY(-30deg) !important;
+                        }
+
+                        &:global(.swiper-slide.swiper-slide-prev) {
+                            transform: perspective(3000px) rotateY(30deg) !important;
+                        }
+
+                        &:global(.swiper-slide.swiper-slide-active) {
+                            transform: rotate(0) !important;
+                        }
+                        @include max(767px) {
+                            padding-inline: rem(20);
+                        }
+                    }
+                    :global(.swiper-slide.swiper-slide-next) + :global(.swiper-slide) {
+                        transform: perspective(3000px) rotateY(-30deg) !important;
+                    }
+                    :global(.swiper-slide) {
+                        transform: perspective(3000px) rotateY(30deg) !important;
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/InstagramConcept/InstagramConcept.tsx

@@ -0,0 +1,163 @@
+import React, { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import global from 'theme/global/global.module.scss';
+import styles from './InstagramConcept.module.scss';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Navigation, Pagination } from 'swiper';
+import Image from 'next/image';
+import { Header, Module } from '@/interfaces/shared/shared';
+import rehypeRaw from 'rehype-raw';
+
+interface InstagramConceptInterface {
+    header: Header;
+    module: Module[];
+}
+
+interface requiredProps {
+    props: InstagramConceptInterface;
+    id: string;
+}
+
+const InstagramConcept = (props: requiredProps, id: string) => {
+    const { header, module } = props.props;
+
+    const [isActiveIndex, setIsActiveIndex] = useState(false);
+    const [isMobileDevice, setIsMobileDevice] = useState(false);
+
+    const handleClick = () => {
+        if (isMobileDevice) {
+            setIsActiveIndex(!isActiveIndex);
+        }
+    };
+    useEffect(() => {
+        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+        setIsMobileDevice(isMobile);
+    }, []);
+
+    return (
+        <>
+            <section id={id} className={`${styles.advantages_sec} ${global.padding_block2}`}>
+                <div className={`${styles.custom_container} ${global.container}  ${global.section_padding}`}>
+                    <div className={`${styles.inner_auto_services} `}>
+                        <div className={styles.content_box}>
+                            <div className={styles.content}>
+                                {header?.title && (
+                                    <div
+                                        className={`${global.heading1_1} ${styles.title}`}
+                                        style={
+                                            {
+                                                '--heading_color': header?.titleColor ? header?.titleColor : '',
+                                            } as React.CSSProperties as any
+                                        }
+                                    >
+                                        <ReactMarkdown
+                                            rehypePlugins={[rehypeRaw as any]}
+                                            skipHtml={false}
+                                        >
+                                            {header?.title || ''}
+                                        </ReactMarkdown>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className={styles.services_box_wrap}>
+                    <div className={styles.details}>
+                        <div className={styles.mainImg}>
+                            {header?.backgroundImage?.data?.attributes?.url && (
+                                <Image
+                                    src={header?.backgroundImage?.data?.attributes?.url}
+                                    width={header?.backgroundImage?.data?.attributes?.width}
+                                    height={header?.backgroundImage?.data?.attributes?.height}
+                                    alt={header?.backgroundImage?.data?.attributes?.title || 'background-image'}
+                                />
+                            )}
+                        </div>
+                        <Swiper
+                            slidesPerView={5}
+                            spaceBetween={5}
+                            centeredSlides={true}
+                            autoplay={{
+                                delay: 2500,
+                                disableOnInteraction: false,
+                                pauseOnMouseEnter: true,
+                            }}
+                            observer={true}
+                            observeParents={true}
+                            modules={[Autoplay]}
+                            autoHeight={true}
+                            loop
+                            className={styles.swiper_box}
+                            onSlideChange={() => isMobileDevice && setIsActiveIndex(false)}
+                            breakpoints={{
+                                280: {
+                                    slidesPerView: 1,
+                                    spaceBetween: 20,
+                                },
+                                768: {
+                                    slidesPerView: 2,
+                                },
+                                900: {
+                                    slidesPerView: 3,
+                                },
+                                1360: {
+                                    slidesPerView: 5,
+                                },
+                            }}
+                        >
+                            {module?.length > 0 &&
+                                [...module, ...module]?.map((item: Module, i: number) => {
+                                    return (
+                                        <SwiperSlide key={i}>
+                                            <div
+                                                className={`${styles.wrapper_box} ${
+                                                    isMobileDevice
+                                                        ? isActiveIndex
+                                                            ? styles.active
+                                                            : styles.non_active
+                                                        : ''
+                                                }`}
+                                                onClick={handleClick}
+                                            >
+                                                <div className={styles.data_slide}>
+                                                    {item?.moduleText && (
+                                                        <div
+                                                            className={`${global.details1} ${styles.para_2}`}
+                                                            style={
+                                                                {
+                                                                    '--sub_heading_color': item?.moduleTextColor
+                                                                        ? item?.moduleTextColor
+                                                                        : '',
+                                                                } as React.CSSProperties as any
+                                                            }
+                                                        >
+                                                            {item?.moduleText && (
+                                                                <ReactMarkdown
+                                                                    rehypePlugins={[rehypeRaw as any]}
+                                                                    skipHtml={false}
+                                                                >
+                                                                    {(item?.moduleText?.length > 150
+                                                                        ? item.moduleText.slice(0, 150) + '...'
+                                                                        : item.moduleText) ?? ''}
+                                                                </ReactMarkdown>
+                                                            )}
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            </div>
+                                        </SwiperSlide>
+                                    );
+                                })}
+                        </Swiper>
+                        {/* <MobSlider /> */}
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default InstagramConcept;

components/MyAppLanding/component/InstagramConceptGrid/InstagramConceptGrid.module.scss

@@ -0,0 +1,295 @@
+@use 'theme/sass' as *;
+
+.advantages_sec {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    background: url('./../../../../public/assets/images/myAppmobile/Conceptbg.png') no-repeat center center;
+    background-size: cover;
+    padding-bottom: 0 !important;
+    &::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: radial-gradient(88.07% 249.63% at 0% 9.99%, #ffffff 0%, #ffffff 35.47%, #ffffff 100%)
+            /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
+        background-blend-mode: lighten;
+        opacity: 0.5;
+        z-index: 0;
+        top: 0;
+        left: 0;
+    }
+
+    .custom_container {
+        .inner_auto_services {
+            @include displayFlex(column, flex-start, flex-start);
+            gap: 20px;
+            position: relative;
+
+            .content_box {
+                width: 100%;
+                @include displayFlex(column, center, center);
+                padding-block-end: 40px;
+
+                .content {
+                    text-align: center;
+                    width: 100%;
+
+                    .title {
+                        color: var(--clr_vzit_offer_text2);
+                        max-width: rem(650);
+                        margin-inline: auto;
+
+                        & > * {
+                            font-weight: var(--fw_semiBold);
+                            font-family: var(--fn_accent);
+                            color: var(--clr_vzit_offer_text2);
+                        }
+                        strong {
+                            @include textGradient(var(--heading_color));
+                        }
+                    }
+                    .text {
+                        color: hsl(var(--AppM_clr_text_para));
+                        font-weight: var(--fw_regular);
+                        font-family: var(--font_primary);
+                        max-width: 756px;
+                        width: 100%;
+                        margin: 30px auto;
+                        & > * {
+                            color: hsl(var(--AppM_clr_text_para));
+                            font-weight: var(--fw_regular);
+                            font-family: var(--font_primary);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .services_box_wrap {
+        width: 100%;
+        position: relative;
+        z-index: 1;
+        padding-block-start: rem(140);
+
+        // height: rem(785);
+        // @include max(1400px) {
+        //     padding-block-start: rem(0);
+        // }
+        @include max(999px) {
+            padding-block-start: rem(0);
+        }
+
+        .mainImg {
+            position: absolute;
+            inset: 0;
+            top: auto;
+            width: 100%;
+            height: rem(550);
+            z-index: 2;
+            pointer-events: none;
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+            }
+            @include max(1359px) {
+                height: rem(534);
+            }
+            @include max(767px) {
+                display: none;
+            }
+        }
+        .details {
+            width: 100%;
+            // padding-block: rem(59);
+            @include max(991px) {
+                position: relative;
+                top: 0;
+                transform: translateY(0%);
+            }
+            @include max(767px) {
+                padding-block-start: rem(0);
+            }
+            .flex_box {
+                @include displayFlex(row, stretch, space-between);
+                gap: 10px;
+                height: 100%;
+                perspective: 3000px;
+                @include max(479px) {
+                    flex-wrap: wrap;
+                    perspective: 10000px;
+                    margin-block-end: scaleValue(40px, 60px);
+                }
+                .data_slide {
+                    width: min(100%, rem(390));
+                    // height: 100%;
+                    @include displayFlex(column, center, center);
+                    margin-inline: auto;
+                    background: var(--clr_background_primary);
+                    box-shadow: 0px -1px 21px 0px #0000001c;
+                    border: 1px solid #fe00806e;
+                    border-radius: rem(26);
+                    padding: scaleValue(30px, 44px) scaleValue(20px, 33px);
+                    min-height: rem(400);
+                    flex: 1;
+                    margin-inline: rem(20);
+                    margin-block: rem(60);
+
+                    &.white_box_left {
+                        margin-inline-start: -10%;
+                        transform: scale(1.05) rotateY(22deg);
+                        @include max(1199px) {
+                            margin-inline-start: -22%;
+                        }
+                        @include max(999px) {
+                            display: none;
+                        }
+                    }
+                    &.white_box_right {
+                        margin-inline-end: -10%;
+                        transform: scale(1.05) rotateY(-22deg);
+                        @include max(1199px) {
+                            margin-inline-end: -22%;
+                        }
+                        @include max(999px) {
+                            display: none;
+                        }
+                    }
+                    &.left_pers_box {
+                        transform: rotateY(10deg);
+                        .para_2 {
+                            @include max(1350px) {
+                                font-size: rem(18);
+                            }
+                        }
+                    }
+                    &.right_pers_box {
+                        transform: rotateY(-10deg);
+                        .para_2 {
+                            @include max(1350px) {
+                                font-size: rem(16);
+                                line-height: 1.6;
+                            }
+                        }
+                    }
+                    .para_2 {
+                        background: linear-gradient(180deg, #ca5a27 0%, #421b36 100%);
+                        -webkit-background-clip: text;
+                        -webkit-text-fill-color: transparent;
+                        font-weight: var(--fw_semiBold);
+                        font-family: var(--fn_accent);
+                        & > * {
+                            background: linear-gradient(180deg, #ca5a27 0%, #421b36 100%);
+                            -webkit-background-clip: text;
+                            -webkit-text-fill-color: transparent;
+                            font-weight: var(--fw_semiBold);
+                            font-family: var(--fn_accent);
+                        }
+                    }
+                    @include min(1690px) {
+                        width: min(100%, rem(300));
+                    }
+                    @include max(1600px) {
+                        margin-inline: rem(10);
+                    }
+                    @include max(1359px) {
+                        width: min(100%, rem(300));
+                    }
+                    @include max(1199px) {
+                        margin-block-end: 30px;
+                        padding: 30px 20px;
+                    }
+                    @include max(767px) {
+                        width: 100%;
+                        flex: auto;
+                        min-height: inherit;
+                    }
+                    @include max(575px) {
+                        margin-block-start: rem(10);
+                    }
+                    @include max(479px) {
+                        flex-wrap: wrap;
+                        margin-block: rem(10) !important;
+                    }
+                }
+                figure {
+                    // flex: 1;
+                    // height: rem(685);
+                    width: rem(480);
+                    position: relative;
+                    // top: rem(-60);
+                    margin-block-start: rem(-140);
+                    // align-self: flex-end;
+                    @include max(1199px) {
+                        width: rem(385);
+                    }
+                    @include max(999px) {
+                        width: rem(285);
+                        height: rem(485);
+                        margin-top: 0;
+                        align-self: flex-end;
+                    }
+                    @include max(700px) {
+                        width: rem(205);
+                        height: rem(305);
+                    }
+                    img {
+                        // position: absolute;
+                        // left: 50%;
+                        // transform: translateX(-50%);
+                        width: 100%;
+                        height: 100%;
+                        object-fit: cover;
+                    }
+                    @include max(767px) {
+                        display: none;
+                    }
+                }
+                @include max(999px) {
+                    gap: 0;
+                }
+                @include max(767px) {
+                    justify-content: center;
+                }
+            }
+            & :global(.swiper) {
+                & :global(.swiper-wrapper) {
+                    height: 100% !important;
+                    align-items: stretch;
+                    // position: relative;
+                    // top: 80px;
+                    & :global(.swiper-slide) {
+                        // height: 100%;
+                        .wrapper_box {
+                            width: 100%;
+                            height: 100%;
+                        }
+
+                        &:global(.swiper-slide.swiper-slide-next) {
+                            transform: perspective(3000px) rotateY(-30deg) !important;
+                        }
+
+                        &:global(.swiper-slide.swiper-slide-prev) {
+                            transform: perspective(3000px) rotateY(30deg) !important;
+                        }
+
+                        &:global(.swiper-slide.swiper-slide-active) {
+                            transform: rotate(0) !important;
+                        }
+                        @include max(767px) {
+                            padding-inline: rem(20);
+                        }
+                    }
+                    :global(.swiper-slide.swiper-slide-next) + :global(.swiper-slide) {
+                        transform: perspective(3000px) rotateY(-30deg) !important;
+                    }
+                    :global(.swiper-slide) {
+                        transform: perspective(3000px) rotateY(30deg) !important;
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/InstagramConceptGrid/InstagramConceptGrid.tsx

@@ -0,0 +1,195 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import global from 'theme/global/global.module.scss';
+import styles from './InstagramConceptGrid.module.scss';
+import Image from 'next/image';
+import { Header, KeyNote } from '@/interfaces/shared/shared';
+import rehypeRaw from 'rehype-raw';
+
+interface InstagramConceptInterface {
+    header: Header;
+    leftField: KeyNote;
+    rightField: KeyNote;
+}
+
+interface requiredProps {
+    props: InstagramConceptInterface;
+    id: string;
+}
+
+const InstagramConceptGrid = ({ id, props }: requiredProps) => {
+    const { header, leftField, rightField } = props;
+
+    return (
+        <>
+            <section id={id} className={`${styles.advantages_sec} ${global.padding_block2}`}>
+                <div className={`${styles.custom_container} ${global.container}  ${global.section_padding}`}>
+                    <div className={`${styles.inner_auto_services} `}>
+                        <div className={styles.content_box}>
+                            <div className={styles.content}>
+                                {header?.title && (
+                                    <div
+                                        className={`${global.heading1_1} ${styles.title}`}
+                                        style={
+                                            {
+                                                '--heading_color': header.titleColor,
+                                            } as React.CSSProperties as any
+                                        }
+                                    >
+                                        <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                            {header?.title || ''}
+                                        </ReactMarkdown>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className={styles.services_box_wrap}>
+                    <div className={styles.details}>
+                        <div className={styles.flex_box}>
+                            <div className={`${styles.data_slide} ${styles.white_box_left}`}></div>
+                            <div className={`${styles.data_slide} ${styles.left_pers_box}`}>
+                                <div
+                                    className={`${global.details2} ${styles.para_2}`}
+                                    style={
+                                        {
+                                            '--sub_heading_color': leftField?.noteTitleColor || '',
+                                        } as React.CSSProperties as any
+                                    }
+                                >
+                                    {leftField?.noteTitle && (
+                                        <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                            {(leftField?.noteTitle?.length > 250
+                                                ? leftField?.noteTitle.slice(0, 250) + '...'
+                                                : leftField?.noteTitle) ?? ''}
+                                        </ReactMarkdown>
+                                    )}
+                                </div>
+                            </div>
+                            {header?.backgroundImage.data?.attributes?.url && (
+                                <figure>
+                                    <Image
+                                        src={header?.backgroundImage.data?.attributes?.url}
+                                        width="487"
+                                        height="720"
+                                        alt="instagram-concept-grid"
+                                    />
+                                </figure>
+                            )}
+                            <div className={`${styles.data_slide} ${styles.right_pers_box}`}>
+                                <div
+                                    className={`${global.details1} ${styles.para_2}`}
+                                    style={
+                                        {
+                                            '--sub_heading_color': rightField?.noteTitleColor || '',
+                                        } as React.CSSProperties as any
+                                    }
+                                >
+                                    {rightField?.noteTitle && (
+                                        <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                            {(rightField?.noteTitle?.length > 250
+                                                ? rightField?.noteTitle.slice(0, 250) + '...'
+                                                : rightField?.noteTitle) ?? ''}
+                                        </ReactMarkdown>
+                                    )}
+                                </div>
+                            </div>
+                            <div className={`${styles.data_slide} ${styles.white_box_right}`}></div>
+                        </div>
+                        {/* <div className={styles.mainImg}> */}
+                        {/* {header?.backgroundImage?.data?.attributes?.url && ( */}
+                        {/* <Image
+                                    src={UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_MOBIMG}
+                                    width="1122"
+                                    height="785"
+                                    alt="instagram-concept-grid"
+                                /> */}
+                        {/* // )} */}
+                        {/* </div> */}
+                        {/* <Swiper
+                            slidesPerView={5}
+                            spaceBetween={5}
+                            centeredSlides={true}
+                            autoplay={{
+                                delay: 2500,
+                                disableOnInteraction: false,
+                                pauseOnMouseEnter: true,
+                            }}
+                            observer={true}
+                            observeParents={true}
+                            modules={[Autoplay]}
+                            autoHeight={true}
+                            loop
+                            className={styles.swiper_box}
+                            onSlideChange={() => isMobileDevice && setIsActiveIndex(false)}
+                            breakpoints={{
+                                280: {
+                                    slidesPerView: 1,
+                                    spaceBetween: 20,
+                                },
+                                768: {
+                                    slidesPerView: 2,
+                                },
+                                900: {
+                                    slidesPerView: 3,
+                                },
+                                1360: {
+                                    slidesPerView: 5,
+                                },
+                            }}
+                        >
+                            {module?.length > 0 &&
+                                [...module, ...module]?.map((item: Module, i: number) => {
+                                    return (
+                                        <SwiperSlide key={i}>
+                                            <div
+                                                className={`${styles.wrapper_box} ${
+                                                    isMobileDevice
+                                                        ? isActiveIndex
+                                                            ? styles.active
+                                                            : styles.non_active
+                                                        : ''
+                                                }`}
+                                                onClick={handleClick}
+                                            >
+                                                <div className={styles.data_slide}>
+                                                    {item?.moduleText && (
+                                                        <div
+                                                            className={`${global.details1} ${styles.para_2}`}
+                                                            style={
+                                                                {
+                                                                    '--sub_heading_color': item?.moduleTextColor
+                                                                        ? item?.moduleTextColor
+                                                                        : '',
+                                                                } as React.CSSProperties as any
+                                                            }
+                                                        >
+                                                            {item?.moduleText && (
+                                                                <ReactMarkdown
+                                                                    rehypePlugins={[rehypeRaw as any]}
+                                                                    skipHtml={false}
+                                                                >
+                                                                    {(item?.moduleText?.length > 150
+                                                                        ? item.moduleText.slice(0, 150) + '...'
+                                                                        : item.moduleText) ?? ''}
+                                                                </ReactMarkdown>
+                                                            )}
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            </div>
+                                        </SwiperSlide>
+                                    );
+                                })}
+                        </Swiper> */}
+                        {/* <MobSlider /> */}
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default InstagramConceptGrid;

components/MyAppLanding/component/Monetization/Monetization.module.scss

@@ -0,0 +1,226 @@
+@use 'theme/sass' as *;
+
+.monetization_sec {
+    width: 100%;
+    background: hsl(var(--AppM_clr_bg_primary));
+    position: relative;
+    z-index: 1;
+
+    .grid_card {
+        border-radius: rem(50);
+        overflow: hidden;
+        position: relative;
+        z-index: 0;
+    }
+
+    .custom_container {
+        .inner_auto_services {
+            @include displayFlex(column, flex-start, flex-start);
+            gap: 20px;
+
+            .content_box {
+                width: 100%;
+                @include displayFlex(column, center, center);
+                padding-block-end: 40px;
+
+                .content {
+                    text-align: center;
+                    width: 100%;
+                    padding-inline: rem(20);
+
+                    .title {
+                        h2 {
+                            max-width: rem(852);
+                            margin: 0 auto;
+                            font-weight: var(--fw_bold);
+                            font-family: var(--fn_accent);
+                            color: var(--AppM_clr_bg_black);
+                            margin-block-end: 25px;
+                            font-size: scaleValue(28px, 42px);
+                            line-height: scaleValue(40px, 50px);
+                            & > * {
+                                color: var(--AppM_clr_bg_black);
+                                font-weight: var(--fw_bold);
+                            }
+                            strong {
+                                @include textGradient(var(--heading_color));
+                            }
+                        }
+                    }
+
+                    .para {
+                        width: min(100%, 960px);
+                        margin-inline: auto;
+                        font-weight: var(--fw_regular);
+                        color: hsl(var(--AppM_clr_text_para));
+                        & > * {
+                            color: hsl(var(--AppM_clr_text_para));
+                            font-weight: var(--fw_regular);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .swiper_box {
+        padding-block: 40px;
+        padding-inline: 10px;
+        :global(.swiper-slide) {
+            @include displayFlex(row, stretch, flex-start);
+            width: 300px;
+            @include max(479px) {
+                width: 280px;
+            }
+        }
+        :global(.swiper-button-prev) {
+            bottom: 0;
+            top: inherit;
+            width: 30px;
+            height: 30px;
+            left: inherit;
+            right: 60px;
+            border-radius: 50%;
+            @include displayFlex(row, center, center);
+            border: 1px solid var(--clr_border_3);
+            &::after {
+                font-size: 14px;
+            }
+        }
+        :global(.swiper-button-next) {
+            bottom: 0;
+            top: inherit;
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            @include displayFlex(row, center, center);
+            border: 1px solid var(--clr_border_3);
+            &::after {
+                font-size: 14px;
+            }
+        }
+    }
+    .wrapper_box {
+        width: 100%;
+        position: relative;
+        .box {
+            width: 100%;
+            height: 100%;
+            border-radius: 15px;
+            background: #ffffff1f;
+            backdrop-filter: blur(5px);
+            @include displayFlex(column, flex-start, space-between);
+            gap: 10px;
+            position: relative;
+            overflow: hidden;
+            transition: var(--transition_03);
+            border: 1px solid #d0e6ed;
+            box-shadow: 0px 6px 10px 0px #ecf5f8;
+            padding: 10px;
+
+            .front {
+                width: 100%;
+                .info {
+                    width: 100%;
+                    .info_icon {
+                        @include displayFlex(row, center, center);
+                        width: 100%;
+                        height: 258px;
+                        border-radius: 10px;
+                        img {
+                            width: 100%;
+                            height: 258px;
+                            object-fit: cover;
+                            border-radius: 10px;
+                        }
+                    }
+                    .para_2 {
+                        font-weight: var(--fw_bold);
+                        color: var(--AppM_clr_bg_black);
+                        font-family: var(--fn_accent);
+                        margin-block: 22px 20px;
+                        padding-inline: rem(8);
+                        & > * {
+                            color: var(--AppM_clr_bg_black);
+                            font-weight: var(--fw_bold);
+                        }
+                    }
+                }
+                .info_img {
+                    width: 100%;
+                    @include displayFlex(column, flex-end, flex-end);
+                    align-self: flex-end;
+                    flex: 1;
+                }
+            }
+        }
+        .hover_content {
+            opacity: 0;
+            background: url('./../../../../public/assets/images/myAppmobile/card_back.png') no-repeat center center;
+            background-size: cover;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            transform: translateY(-100%);
+            transition: 0.4s ease-in-out;
+            padding: scaleValue(18px, 38px) scaleValue(18px, 32px);
+            &::after {
+                content: '';
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                left: 0;
+                top: 0;
+                background: #18b8cfe3;
+            }
+            & .heading_back {
+                font-weight: var(--fw_bold);
+                line-height: 1.4;
+                color: var(--clr_text_secondary);
+                position: relative;
+                z-index: 2;
+                max-width: rem(175);
+                font-family: var(--fn_accent);
+                padding-block-end: rem(16);
+                & > * {
+                    font-weight: var(--fw_bold);
+                    line-height: 1.4;
+                    color: var(--clr_text_secondary);
+                    font-family: var(--fn_accent);
+                }
+            }
+            & .para_2 {
+                margin-block-start: rem(20);
+                border-top: 1px solid var(--clr_border_secondary);
+                padding-block: rem(20);
+                font-weight: var(--fw_bold);
+                line-height: 1.6;
+                color: var(--clr_text_secondary);
+                position: relative;
+                z-index: 2;
+                max-width: rem(210);
+                font-family: var(--fn_accent);
+                display: -webkit-box;
+                -webkit-line-clamp: 6;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                max-height: 175px;
+
+                & > * {
+                    font-weight: var(--fw_bold);
+                    line-height: 1.4;
+                    color: var(--clr_text_secondary);
+                    font-family: var(--fn_accent);
+                }
+            }
+        }
+        &:hover {
+            .box .hover_content {
+                opacity: 1;
+                transform: translateY(00%);
+            }
+        }
+    }
+}

components/MyAppLanding/component/Monetization/Monetization.tsx

@@ -0,0 +1,135 @@
+import React, { useEffect, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+import { SliderInterface } from '@/interfaces/microsoftPowerPage.interface';
+import ReactMarkdown from 'react-markdown';
+import { Autoplay, Navigation } from 'swiper';
+import global from 'theme/global/global.module.scss';
+import styles from './Monetization.module.scss';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import Image from 'next/image';
+
+// interface AutomateIndustriesInterface {
+//     automateIndustriesData: SliderInterface;
+// }
+
+const Monetization = () => {
+    const [isActiveIndex, setIsActiveIndex] = useState(false);
+    const [isMobileDevice, setIsMobileDevice] = useState(false);
+
+    const handleClick = () => {
+        if (isMobileDevice) {
+            setIsActiveIndex(!isActiveIndex);
+        }
+    };
+    useEffect(() => {
+        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+        setIsMobileDevice(isMobile);
+    }, []);
+
+    return (
+        <>
+            <section id="industry" className={`${styles.monetization_sec}   ${global.padding_block_small}`}>
+                <div className={`${styles.grid_card} ${global.padding_block2}`}>
+                    <div className={`${global.section_padding}`}>
+                        <div className={`${styles.custom_container} ${global.container} `}>
+                            <div className={`${styles.inner_auto_services} `}>
+                                <div className={styles.content_box} id="powerBannerLeft">
+                                    <div className={styles.content}>
+                                        <div className={`${global.heading7} ${styles.title}`}>
+                                            <h2
+                                                style={
+                                                    {
+                                                        '--heading_color':
+                                                            'linear-gradient(90deg, #A72844 0%, #0E5172 50%, #02BCB6 100%);',
+                                                    } as React.CSSProperties as any
+                                                }
+                                            >
+                                                Monetization Model of <strong>Our TikTok Clone App</strong> – Generating
+                                                Revenues
+                                            </h2>
+                                        </div>
+                                        <div className={`${global.details1} ${styles.para}`}>
+                                            <p>
+                                                At ConvexSol, we ensure that your business gets enticing features in
+                                                your TikTok like application with our 10+ years of experience to keep
+                                                your users engaged for hours and enjoy a competitive advantage. They are
+                                                as follows:
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <Swiper
+                        slidesPerView={'auto'}
+                        spaceBetween={28}
+                        autoplay={{
+                            delay: 2500,
+                            disableOnInteraction: false,
+                            pauseOnMouseEnter: true,
+                        }}
+                        observer={true}
+                        observeParents={true}
+                        navigation={true}
+                        modules={[Autoplay, Navigation]}
+                        autoHeight={true}
+                        loop
+                        className={styles.swiper_box}
+                        onSlideChange={() => isMobileDevice && setIsActiveIndex(false)}
+                    >
+                        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 1, 1]?.map((item, i) => (
+                            <SwiperSlide key={i}>
+                                <div
+                                    className={`${styles.wrapper_box} ${
+                                        isMobileDevice ? (isActiveIndex ? styles.active : styles.non_active) : ''
+                                    }`}
+                                    onClick={handleClick}
+                                >
+                                    <div className={styles.box}>
+                                        <div className={styles.front}>
+                                            <div className={styles.info}>
+                                                <div className={styles.info_icon}>
+                                                    <img
+                                                        src={`${UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_ESSENTIAL}`}
+                                                        width={267}
+                                                        height={258}
+                                                        alt="MICROSOFT_choose"
+                                                    />
+                                                </div>
+                                                <p className={`${global.head44} ${styles.para_2}`}>
+                                                    Premium Live Streaming
+                                                </p>
+                                            </div>
+                                            <div className={styles.info_img}>
+                                                {/* <img
+                                                src={`${process.env.NEXT_PUBLIC_API}${item.image?.data?.attributes.url}`}
+                                                alt="MICROSOFT_choose"
+                                            /> */}
+                                            </div>
+                                        </div>
+                                        <div className={styles.hover_content}>
+                                            <h4 className={`${global.head44} ${styles.heading_back}`}>
+                                                Premium Live Streaming
+                                            </h4>
+                                            <p className={`${global.body1} ${styles.para_2}`}>
+                                                Realtime adjustment of rental prices depending on demand, competitor
+                                                rates and seasonality.
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </SwiperSlide>
+                        ))}
+                    </Swiper>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default Monetization;

components/MyAppLanding/component/MyAppOverview/MyAppOverview.module.scss

@@ -0,0 +1,137 @@
+@use 'theme/sass' as *;
+
+.myAppOverview_sec {
+    width: 100%;
+    background: var(--clr_background_primary);
+
+    .inner_auto_services {
+        width: 100%;
+        .content_box {
+            width: 100%;
+            .content {
+                width: 100%;
+                .content_chip {
+                    width: fit-content;
+                    line-height: rem(24);
+                    background: hsl(var(--AppMobile_clr_chip));
+                    padding-block: rem(6);
+                    padding-inline: rem(16);
+                    border-radius: rem(20);
+                    min-height: rem(34);
+                    @include displayFlex(row, center, center);
+                    color: hsl(var(--AppMobile_clr_text_chip));
+                    font-weight: var(--fw_medium);
+                    font-family: var(--fn_accent);
+                    & > * {
+                        color: hsl(var(--AppMobile_clr_text_chip));
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                    }
+                }
+                .title {
+                    width: min(100%, rem(730));
+                    margin-block-start: rem(16);
+                    color: hsl(var(--AppM_clr_text_primary));
+                    font-weight: var(--fw_bold);
+                    font-family: var(--fn_accent);
+                    & > * {
+                        color: hsl(var(--AppM_clr_text_primary));
+                        font-weight: var(--fw_bold);
+                    }
+                    strong {
+                        @include textGradient(var(--heading_color));
+                    }
+                }
+            }
+        }
+
+        .overview_box_content {
+            width: 100%;
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: rem(32);
+            margin-block-start: rem(50);
+
+            @include max(767px) {
+                grid-template-columns: 1fr;
+            }
+
+            .images_box {
+                width: 100%;
+                border-radius: rem(30);
+                overflow: hidden;
+                height: 100%;
+                position: relative;
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+            }
+        }
+
+        .info_box {
+            width: 100%;
+            border-radius: rem(30);
+            overflow: hidden;
+            height: 100%;
+            position: relative;
+            padding: scaleValue(30px, 50px);
+            .para {
+                color: var(--text_color);
+                font-family: var(--font_primary);
+                font-weight: var(--fw_regular);
+                line-height: 1.4;
+                & > * {
+                    color: var(--text_color);
+                    font-family: var(--font_primary);
+                    font-weight: var(--fw_regular);
+                }
+                p {
+                    margin-block-end: rem(20);
+                    &:last-child {
+                        margin-block-end: 0;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.skeletonOverview {
+    padding: 2rem;
+    background: #f6f6f6;
+    border-radius: 12px;
+    margin-bottom: 2rem;
+}
+.skeletonTitle {
+    width: 60%;
+    height: 2.5rem;
+    background: linear-gradient(90deg, #ececec 25%, #f3f3f3 50%, #ececec 75%);
+    border-radius: 8px;
+    margin-bottom: 1.5rem;
+    animation: skeleton-loading 1.2s infinite linear;
+}
+.skeletonParagraph {
+    width: 100%;
+    height: 1.2rem;
+    background: linear-gradient(90deg, #ececec 25%, #f3f3f3 50%, #ececec 75%);
+    border-radius: 6px;
+    margin-bottom: 1rem;
+    animation: skeleton-loading 1.2s infinite linear;
+}
+.skeletonImage {
+    width: 100%;
+    height: 200px;
+    background: linear-gradient(90deg, #ececec 25%, #f3f3f3 50%, #ececec 75%);
+    border-radius: 10px;
+    animation: skeleton-loading 1.2s infinite linear;
+}
+@keyframes skeleton-loading {
+    0% {
+        background-position: -200px 0;
+    }
+    100% {
+        background-position: calc(200px + 100%) 0;
+    }
+}

components/MyAppLanding/component/MyAppOverview/MyAppOverview.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import global from 'theme/global/global.module.scss';
+import styles from './MyAppOverview.module.scss';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { Header } from '@/interfaces/shared/shared';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+interface OverviewContent {
+    header: Header;
+    image: any;
+    imageContent: string | null | undefined;
+}
+interface MyAppOverviewInterface {
+    extraClass?: string;
+    id?: string;
+    props?: any;
+}
+
+const MyAppOverview = ({ extraClass, id, props }: MyAppOverviewInterface) => {
+    const { header, image, imageContent } = props as OverviewContent;
+    // Fixed the style handling to prevent hydration mismatch
+    const getHeadingStyle = (): React.CSSProperties | undefined => {
+        const titleColor = header?.titleColor;
+        
+        // Return undefined if no titleColor is provided
+        if (!titleColor || typeof titleColor !== 'string') {
+            return undefined;
+        }
+
+        const trimmed = titleColor.replace(/[;]\s*$/, '').trim();
+        
+        // Return undefined if trimmed is empty
+        if (!trimmed) {
+            return undefined;
+        }
+
+        const normalized = trimmed.startsWith('--') 
+            ? `var(${trimmed.replace(/:$/, '')})` 
+            : trimmed;
+
+        return { ['--heading_color' as any]: normalized } as React.CSSProperties;
+    };
+
+    // Fixed background style to remove semicolons
+    const getBackgroundStyle = (): React.CSSProperties => {
+        const background = header?.background;
+        
+        if (!background || typeof background !== 'string') {
+            return {};
+        }
+
+        // Remove trailing semicolons and whitespace
+        const cleanBackground = background.replace(/[;]\s*$/, '').trim();
+        
+        return cleanBackground ? { background: cleanBackground } : {};
+    };
+
+    const headingStyle = getHeadingStyle();
+    const backgroundStyle = getBackgroundStyle();
+    return (
+        <section
+            id={id}
+            className={`${styles.myAppOverview_sec} ${global.section_padding}  ${global.padding_block2} ${
+                extraClass && styles[extraClass]
+            }`}
+        >
+            <div className={`${styles.custom_container} ${global.container}`}>
+                <div className={`${styles.inner_auto_services} `}>
+                    <div className={styles.content_box}>
+                        <div className={styles.content}>
+                            <div className={styles.content_chip}>{header.pageTitle}</div>
+                          
+                            {header?.title &&(
+                                <div
+                                    className={`${global.heading1} ${styles.title}`}
+                                    style={headingStyle}
+                                    
+                                >
+                                     
+                                    <ReactMarkdown
+                                        rehypePlugins={[rehypeRaw as any]}
+                                        skipHtml={false}
+                                    >
+                                        {header?.title || ''}
+                                    </ReactMarkdown>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                    <div className={styles.overview_box_content}>
+                        {image?.data?.attributes?.url && (
+                            <div className={styles.images_box} >
+                                <img
+                                    src={
+                                        image?.data?.attributes?.url ||
+                                        UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_OVERVIEW
+                                    }
+                                    alt={'tabImage'}
+                                    width={607}
+                                    height={503}
+                                />
+                            </div>
+                        )}
+                        <div
+                            className={styles.info_box}
+                            style={backgroundStyle}
+                        >
+                            {imageContent &&(
+                                <div
+                                    className={`${global.head44} ${styles.para}`}
+                                    
+                                    style={
+                                        {
+                                            '--text_color': '#EBEBEB',
+                                        } as React.CSSProperties as any
+                                    }
+                                >
+                                    <ReactMarkdown
+                                        rehypePlugins={[rehypeRaw as any]}
+                                        skipHtml={false}
+                                    >
+                                        {imageContent || ''}
+                                    </ReactMarkdown>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default MyAppOverview;

components/MyAppLanding/component/MyAppOverview/SkeletonOverview.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import styles from './MyAppOverview.module.scss';
+
+const SkeletonOverview = () => (
+  <div className={styles.skeletonOverview}>
+    <div className={styles.skeletonTitle} />
+    <div className={styles.skeletonParagraph} />
+    <div className={styles.skeletonImage} />
+  </div>
+);
+
+export default SkeletonOverview; 

components/MyAppLanding/component/PaidAddOn/PaidAddOn.module.scss

@@ -0,0 +1,301 @@
+@use 'theme/sass' as *;
+
+.custom_container {
+    position: relative;
+    z-index: 2;
+    @include displayFlex(row-reverse, flex-start, space-between);
+    gap: scaleValue(40px, 60px);
+    border: 1px solid #00000021;
+    background: var(--clr_background_primary);
+    border-radius: 30px;
+    padding: rem(30);
+    @include max(991px) {
+        @include displayFlex(column, center, space-between);
+    }
+}
+
+.content_box {
+    width: 100%;
+    padding-block-end: rem(50);
+    .content {
+        width: 100%;
+        text-align: center;
+        .content_chip {
+            width: fit-content;
+            margin-inline: auto;
+            line-height: rem(24);
+            background: var(--clr_background_primary);
+            padding-block: rem(6);
+            padding-inline: rem(16);
+            border-radius: rem(20);
+            min-height: rem(34);
+            @include displayFlex(row, center, center);
+            color: hsl(var(--AppMobile_clr_text_chip));
+            font-weight: var(--fw_medium);
+            font-family: var(--fn_accent);
+            & > * {
+                color: hsl(var(--AppMobile_clr_text_chip));
+                font-weight: var(--fw_medium);
+                font-family: var(--fn_accent);
+            }
+        }
+        .title {
+            width: min(100%, rem(880));
+            margin-inline: auto;
+            margin-block-start: rem(16);
+            color: hsl(var(--AppM_clr_text_primary));
+            font-weight: var(--fw_bold);
+            font-family: var(--fn_accent);
+            & > * {
+                color: hsl(var(--AppM_clr_text_primary));
+                font-weight: var(--fw_bold);
+            }
+            strong {
+                @include textGradient(var(--heading_color));
+            }
+        }
+        .para {
+            width: min(100%, rem(800));
+            margin-inline: auto;
+            margin-block-start: rem(24);
+            color: var(--clr_vzit_offer_text);
+            & > * {
+                color: var(--clr_vzit_offer_text);
+            }
+        }
+    }
+}
+
+.paidAddOn_sec {
+    background-color: var(--AppM_clr_bg_primary);
+    height: auto;
+    position: relative;
+    overflow-x: hidden;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 10%;
+        left: 20%;
+        background: var(--grad_bg_112);
+        filter: blur(127px);
+        width: 32.5rem;
+        height: 32.5rem;
+        border-radius: 100%;
+        z-index: 2;
+    }
+
+    .tab_row {
+        @include displayFlex(column, center, space-between);
+        width: 100%;
+        gap: 10px;
+        padding-inline: 0 10px;
+
+        @include max(991px) {
+            padding-inline: 0;
+        }
+
+        @include max(480px) {
+            padding-inline: 16px;
+        }
+        .content_wrp {
+            width: 100%;
+            padding-block-end: 40px;
+            @include displayFlex(column, flex-start, flex-start);
+            gap: 15px;
+            @include max(991px) {
+                grid-column: span 2;
+            }
+            .tab_hed {
+                font-weight: var(--fw_medium);
+                color: var(--clr-heading);
+                font-family: var(--fn_accent);
+            }
+            .tab_para {
+                font-weight: var(--fw_normal);
+                color: var(--clr-para);
+            }
+        }
+
+        .tab_col {
+            width: 100%;
+            padding-inline-end: 0px;
+
+            .tab_colbox {
+                cursor: pointer;
+                background: transparent;
+                min-height: 82px;
+                @include displayFlex(row, center, flex-start);
+                border-radius: 18px;
+                padding-inline: 10px;
+                position: relative;
+                overflow: hidden;
+
+                &.active {
+                    background: #f5f9fe52;
+                    border: 1px solid #a8e1ff;
+                    // .tab_box {
+                    :global(.MuiPaper-root) {
+                        :global(.MuiButtonBase-root) {
+                            min-height: 37px;
+                            padding-block: 10px;
+                        }
+                    }
+                    // }
+                }
+                // .tab_box {
+                //     @include displayFlex(row, center, flex-start);
+                :global(.MuiPaper-root) {
+                    box-shadow: none;
+                    border: none;
+                    border-top-left-radius: 18px;
+                    border-top-right-radius: 18px;
+                    background-color: transparent;
+                    margin: 0;
+                    :global(.MuiAccordionSummary-root) {
+                        @include max(415px) {
+                            padding: 0;
+                        }
+                    }
+                    :global(.MuiAccordionSummary-content) {
+                        gap: 20px;
+                        margin: 0;
+                        align-items: center;
+                        @include max(415px) {
+                            gap: 10px;
+                        }
+                        .title {
+                            font-size: 18px;
+                            font-weight: var(--fw_semiBold);
+                            font-family: var(--fn_accent);
+                            @include max(375px) {
+                                font-size: 16px;
+                            }
+                        }
+                    }
+                    .sub_text {
+                        font-size: 16px;
+                        line-height: 1.4;
+                        font-weight: var(--fw_normal);
+                        color: var(--clr-para);
+                        width: 100%;
+                        @include min(992px) {
+                            padding-inline-start: 55px;
+                        }
+                    }
+
+                    :global(.MuiAccordionSummary-expandIconWrapper) {
+                        display: none;
+                    }
+                }
+                .tab_icon {
+                    @include displayFlex(row, center, center);
+                    @include max(380px) {
+                        margin-inline-start: 10px;
+                    }
+                }
+                .tab_heading {
+                    margin-inline-start: 20px;
+                    max-width: 130px;
+
+                    .heading4 {
+                        color: var(--clr-accent);
+                        font-size: 16px;
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                        @include max(991px) {
+                            font-weight: var(--fw_bold);
+                        }
+                    }
+                }
+                // }
+
+                .progress_bar {
+                    width: 100%;
+                    height: 5px;
+                    border-bottom-left-radius: 10px;
+                    border-top-left-radius: 10px;
+                    background-color: transparent;
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+
+                    :global(.MuiLinearProgress-bar) {
+                        background: var(--grad_bg_85);
+                        height: 2px;
+                        top: 3px;
+                    }
+                }
+
+                &.active .progress_bar::before {
+                    width: 78px;
+                }
+            }
+        }
+    }
+
+    :global(.swiper-horizontal) {
+        display: block;
+        width: 100%;
+    }
+    .work_sec {
+        @include max(991px) {
+            width: 100%;
+            margin-inline: auto;
+            padding-block-start: 0;
+        }
+        @include max(767px) {
+            width: 100%;
+        }
+        @include max(575px) {
+            width: 100%;
+        }
+
+        .work_sec_desktop {
+            display: block;
+        }
+
+        .custom2_row {
+            @include displayFlex(row, flex-start, flex-start);
+            gap: 44px;
+            width: 100%;
+            @include max(991px) {
+                @include displayFlex(row, center, space-between);
+                flex-wrap: wrap;
+            }
+            @include max(768px) {
+                width: 100%;
+                gap: 28px;
+            }
+            @include max(575px) {
+                @include displayFlex(column, flex-start, flex-start);
+            }
+
+            .work1 {
+                width: 100%;
+                .work_img {
+                    margin: auto;
+                    text-align: center;
+                    border-radius: 22px;
+                    overflow: hidden;
+                    width: 100%;
+                    &.animationOff {
+                        &:hover {
+                            img {
+                                transform: none;
+                            }
+                        }
+                    }
+                    img {
+                        transition: var(--transition);
+                        width: 100%;
+                        object-fit: cover;
+                        @include max(991px) {
+                            width: 100%;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/PaidAddOn/PaidAddOn.tsx

@@ -0,0 +1,229 @@
+import { Fragment, useEffect, useRef, useState } from 'react';
+import { LinearProgress } from '@mui/material';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/css';
+import global from 'theme/global/global.module.scss';
+import styles from './PaidAddOn.module.scss';
+
+import { DigitalAllyInterface } from '@/interfaces/home.interface';
+
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Image from 'next/image';
+import { CustomImageElement } from '@/helpers/utilities/imageUtil';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+interface DigitalAllyPropsInterface {
+    digitalAllyData: DigitalAllyInterface;
+}
+
+export default function PaidAddOn({ digitalAllyData }: DigitalAllyPropsInterface) {
+    const timerRef = useRef<any>(null);
+    const [progress, setProgress] = useState(0);
+    const [counter, setCounter] = useState(0);
+    const [isPause, setIsPause] = useState<boolean>(false);
+    const [swiper, setSwiper] = useState<any>(null);
+    const [clickedIndex, setClickedIndex] = useState<number | undefined>(undefined);
+    const [expanded, setExpanded] = useState<number | false>(false);
+    const [isVisible, setIsVisible] = useState(false);
+    const digitalAllyRef = useRef(null);
+
+    const slideTo = (index: number) => swiper?.slideTo(index);
+
+    const handleChange = (panel: number) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+        if (isExpanded) {
+            setExpanded(panel);
+        } else {
+            setExpanded(false);
+        }
+    };
+
+    useEffect(() => {
+        if (clickedIndex !== undefined) {
+            setCounter(clickedIndex);
+            setProgress(0);
+            return setClickedIndex(undefined);
+        }
+        if (progress >= 100) {
+            if (counter >= digitalAllyData?.content?.length - 1) {
+                setCounter(0);
+                setExpanded(0);
+            } else {
+                setCounter((prev) => prev + 1);
+            }
+            setProgress(0);
+        } else if (!isPause) setTimeout(() => setProgress((prev) => prev + 1), 50);
+        setExpanded(counter);
+
+        return () => clearTimeout(timerRef.current);
+    }, [progress, isPause, clickedIndex]);
+
+    useEffect(() => {
+        if (counter >= digitalAllyData?.content.length + 1) setCounter(0);
+        slideTo(counter);
+    }, [counter]);
+
+    useEffect(() => {
+        const options = {
+            root: null,
+            rootMargin: '0px',
+            threshold: 0.3,
+        };
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                setIsVisible(entry.isIntersecting);
+            });
+        }, options);
+
+        if (digitalAllyRef.current) {
+            observer.observe(digitalAllyRef.current);
+        }
+
+        return () => {
+            if (digitalAllyRef.current) {
+                observer.unobserve(digitalAllyRef.current);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (isVisible) {
+            setCounter(0);
+        }
+    }, [isVisible]);
+
+    return (
+        <section
+            ref={digitalAllyRef}
+            className={`${styles.paidAddOn_sec} ${global.section_padding} ${global.padding_block2}`}
+        >
+            <div className={` ${global.container}`}>
+                <div className={styles.content_box}>
+                    <div className={styles.content}>
+                        <div className={styles.content_chip}>Why it’s essential</div>
+                        <h2
+                            className={`${global.heading1} ${styles.title}`}
+                            style={
+                                {
+                                    '--heading_color': 'linear-gradient(90deg, #A72844 0%, #0E5172 50%, #02BCB6 100%)',
+                                } as React.CSSProperties as any
+                            }
+                        >
+                            How Does Our <strong>TikTok Clone App Work?</strong>
+                        </h2>
+                        <div className={`${global.details1} ${styles.para}`}>
+                            <p>
+                                You can provide an extensive list of services with the help of Urban Company clone app
+                                development provided ConvexSol. The service providers can easily include these services
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className={`${styles.custom_container} ${global.container}`}>
+                <div className={`${styles.tab_row} ${global.row}`}>
+                    {[1, 2, 3, 4].map((singleItem, index) => (
+                        <div key={index} className={`${styles.tab_col}`}>
+                            <div
+                                className={`${styles.tab_colbox} ${counter === index ? styles.active : ''}`}
+                                onMouseOver={() => {
+                                    counter === index && setIsPause(true);
+                                }}
+                                onMouseLeave={() => {
+                                    counter === index && setIsPause(false);
+                                }}
+                                onClick={() => {
+                                    setClickedIndex(index);
+                                }}
+                            >
+                                <Accordion
+                                    expanded={expanded === index}
+                                    onChange={handleChange(index)}
+                                    onClick={() => {
+                                        setClickedIndex(index);
+                                    }}
+                                >
+                                    <AccordionSummary
+                                        aria-controls={`panel1bh-content-${index}`}
+                                        id={`panel1bh-header-${index}`}
+                                    >
+                                        <div className={`${styles.tab_icon} ${counter === index ? styles.active : ''}`}>
+                                            {/* <CustomImageElement attributes={122} /> */}
+                                            <img
+                                                src={UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_SETTING}
+                                                alt="expand icon"
+                                                width={34}
+                                                height={34}
+                                            />
+                                        </div>
+                                        <h3 className={styles.title} style={{ color: '#436288' }}>
+                                            Offline Content Availability with Premium
+                                        </h3>
+                                    </AccordionSummary>
+                                    {counter === index && (
+                                        <AccordionDetails>
+                                            <p className={styles.sub_text}>
+                                                Provide a seamless booking experience via intuitive navigation, instant
+                                                confirmations, advanced search filters and secure transactions. A
+                                                user-friendly interface assures that both the guests and the hosts can
+                                                handle bookings easily, improving satisfaction and retention.{' '}
+                                            </p>
+                                        </AccordionDetails>
+                                    )}
+                                </Accordion>
+
+                                <div className={`${styles.tab_progress}`}>
+                                    <LinearProgress
+                                        aria-label={`progress-${index}`}
+                                        className={`${styles.progress_bar}`}
+                                        variant="determinate"
+                                        value={counter === index ? progress : 0}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+
+                <Swiper allowTouchMove={false} onSwiper={setSwiper}>
+                    {digitalAllyData?.content?.length &&
+                        digitalAllyData?.content.map((item, index) => {
+                            return (
+                                <SwiperSlide key={index}>
+                                    <Fragment>
+                                        <div className={`${styles.work_sec} ${styles.work_sec_desktop}`}>
+                                            <div className={`${styles.custom2_row}`}>
+                                                <div key={index} className={`${styles.work1}`}>
+                                                    <div className={`${styles.work_img} `}>
+                                                        {/* <CustomImageElement
+                                                            attributes={
+                                                                UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE
+                                                                    .MY_APP_MOBILE_LOGO_BG
+                                                            }
+                                                        /> */}
+                                                        <Image
+                                                            src={
+                                                                UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE
+                                                                    .MY_APP_MOBILE_OVERVIEW
+                                                            }
+                                                            alt={item?.title}
+                                                            width={500}
+                                                            height={500}
+                                                            className={`${styles.work_img_desktop}`}
+                                                        />
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </Fragment>
+                                </SwiperSlide>
+                            );
+                        })}
+                </Swiper>
+            </div>
+        </section>
+    );
+}

components/MyAppLanding/component/PaidAddOn/tabCarouselData.ts

@@ -0,0 +1,30 @@
+import {
+    aiMachineLearningIcon,
+    digitalTransformationIcon,
+    eCommerceIcon,
+    mobileDevelopmentIcon,
+    webDevelopmentIcon,
+} from '@/constants/svgConstant';
+
+export const carouselItems = [
+    {
+        title: 'Web Development',
+        icon: webDevelopmentIcon(),
+    },
+    {
+        title: 'Mobile Development',
+        icon: mobileDevelopmentIcon(),
+    },
+    {
+        title: 'Business Analytics',
+        icon: digitalTransformationIcon(),
+    },
+    {
+        title: 'AI & Machine Learning',
+        icon: aiMachineLearningIcon(),
+    },
+    {
+        title: 'E-Commerce',
+        icon: eCommerceIcon(),
+    },
+];

components/MyAppLanding/component/RevenueModels/RevenueModels.tsx

@@ -0,0 +1,159 @@
+import React, { useEffect, useState } from 'react';
+import { SwiperSlide } from 'swiper/react';
+
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+import { Swiper, Autoplay, Navigation } from 'swiper';
+import global from 'theme/global/global.module.scss';
+import styles from './revenueModels.module.scss';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { Header, KeyNote } from '@/interfaces/shared/shared';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+interface RevenueModelsInterface {
+    header: Header;
+    models: KeyNote[];
+}
+
+interface RequiredProps{
+    props: RevenueModelsInterface;
+    id: string;
+}
+
+const RevenueModels = ({ props, id }: RequiredProps) => {
+    const { header, models } = props;
+    const [isActiveIndex, setIsActiveIndex] = useState(false);
+    const [isMobileDevice, setIsMobileDevice] = useState(false);
+    const [open, setOpen] = useState(false);
+
+    const handleClick = () => {
+        if (isMobileDevice) {
+            setIsActiveIndex(!isActiveIndex);
+        }
+    };
+    useEffect(() => {
+        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+        setIsMobileDevice(isMobile);
+    }, []);
+
+    return (
+        <>
+            <section id={id} className={`${styles.revenueModels_sec}`} style={{
+                background: header.background || '#fff'
+            }}>
+                <div className={`${styles.grid_card} ${global.padding_block2}`}>
+                    <div className={`${styles.custom_container} ${global.container} ${global.section_padding} `}>
+                        <div className={`${styles.inner_auto_services} `}>
+                            <div className={styles.content_box} id="powerBannerLeft">
+                                <div className={styles.content}>
+                                        {header?.pageTitle && (
+                                            <div className={`${styles.content_chip} ${global.body1}`}>
+                                                {header?.pageTitle}
+                                            </div>
+                                        )}
+                                    <div className={`${global.heading7} ${styles.title}`}>
+                                        {header?.title && (
+                                        <div
+                                            style={
+                                                {
+                                                    '--heading_color': header?.titleColor,
+                                                } as React.CSSProperties as any
+                                            }
+                                        >
+                                            <ReactMarkdown
+                                                rehypePlugins={[rehypeRaw as any]}
+                                                skipHtml={false}
+                                            >
+                                                {header?.title || ''}
+                                            </ReactMarkdown>
+                                        </div>
+                                        )}
+                                    </div>
+                                    {header?.content && (
+                                        <div className={`${global.details1} ${styles.para}`}>
+                                            <ReactMarkdown
+                                                rehypePlugins={[rehypeRaw as any]}
+                                                skipHtml={false}
+                                            >
+                                                {header?.content || ''}
+                                            </ReactMarkdown>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className={styles.revenueModels_card_container}>
+                            {models?.map((item: KeyNote, i: number) => (
+                                <div key={i} className={styles.revenueModels_card}>
+                                    <div
+                                        className={`${styles.wrapper_box} ${
+                                            isMobileDevice ? (isActiveIndex ? styles.active : styles.non_active) : ''
+                                        }`}
+                                        onClick={handleClick}
+                                    >
+                                        <div className={styles.box}>
+                                            <div className={styles.front}>
+                                                <div className={styles.info}>
+                                                    <div className={styles.info_icon}>
+                                                        <img
+                                                            src={
+                                                                item?.noteImage?.data?.attributes?.url ||
+                                                                UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE
+                                                                    .MY_APP_MOBILE_ESSENTIAL
+                                                            }
+                                                            width={267}
+                                                            height={258}
+                                                            alt="MICROSOFT_choose"
+                                                        />
+                                                    </div>
+                                                    <div className={`${global.head44} ${styles.para_2}`}>
+                                                        <ReactMarkdown
+                                                            rehypePlugins={[rehypeRaw as any]}
+                                                            skipHtml={false}
+                                                        >
+                                                            {item?.noteTitle || ''}
+                                                        </ReactMarkdown>
+                                                    </div>
+                                                </div>
+                                                {/* <div className={styles.info_img}>
+                                                <img
+                                                src={item?.noteImage?.data?.attributes?.url || UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_ESSENTIAL}
+                                                alt="MICROSOFT_choose"
+                                            />
+                                            </div> */}
+                                            </div>
+                                            <div className={styles.hover_content}>
+                                                <div className={`${global.head44} ${styles.heading_back}`}>
+                                                    <ReactMarkdown
+                                                        rehypePlugins={[rehypeRaw as any]}
+                                                        skipHtml={false}
+                                                    >
+                                                        {item?.noteTitle || ''}
+                                                    </ReactMarkdown>
+                                                </div>
+                                                {item?.noteBody && (
+                                                    <div className={`${global.body1} ${styles.para_2}`}>
+                                                        <ReactMarkdown
+                                                            rehypePlugins={[rehypeRaw as any]}
+                                                            skipHtml={false}
+                                                        >
+                                                            {item?.noteBody || ''}
+                                                        </ReactMarkdown>
+                                                    </div>
+                                                )}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+};
+export default RevenueModels;

components/MyAppLanding/component/RevenueModels/revenueModels.module.scss

@@ -0,0 +1,219 @@
+@use 'theme/sass' as *;
+
+.revenueModels_sec {
+    width: 100%;
+    background: hsl(var(--AppM_clr_bg_primary));
+    position: relative;
+    z-index: 1;
+
+    .grid_card {
+        border-radius: rem(50);
+        overflow: hidden;
+        position: relative;
+        z-index: 0;
+        .revenueModels_card_container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+            gap: rem(24);
+            .revenueModels_card {
+                width: 100%;
+            }
+        }
+    }
+
+    .custom_container {
+        .inner_auto_services {
+            @include displayFlex(column, flex-start, flex-start);
+            gap: 20px;
+
+            .content_box {
+                width: 100%;
+                @include displayFlex(column, center, center);
+                padding-block-end: 40px;
+
+                .content {
+                    text-align: center;
+                    width: 100%;
+                    padding-inline: rem(20);
+                    .content_chip {
+                        width: fit-content;
+                        line-height: rem(24);
+                        background: hsl(var(--AppM_clr_bg_blue_chip));
+                        padding-block: rem(6);
+                        padding-inline: rem(16);
+                        border-radius: rem(20);
+                        min-height: rem(34);
+                        @include displayFlex(row, center, center);
+                        color: hsl(var(--AppMobile_clr_text_chip));
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                        margin-block-end: rem(20);
+                        margin-inline: auto;
+                        & > * {
+                            color: hsl(var(--AppMobile_clr_text_chip));
+                            font-weight: var(--fw_medium);
+                            font-family: var(--fn_accent);
+                        }
+                    }
+
+                    .title {
+                        & > * {
+                            max-width: rem(852);
+                            margin: 0 auto;
+                            font-weight: var(--fw_bold);
+                            font-family: var(--fn_accent);
+                            color: var(--AppM_clr_bg_black);
+                            margin-block-end: 25px;
+                            font-size: scaleValue(28px, 42px);
+                            line-height: scaleValue(40px, 50px);
+                            & > * {
+                                color: var(--AppM_clr_bg_black);
+                                font-weight: var(--fw_bold);
+                            }
+                            strong {
+                                @include textGradient(var(--heading_color));
+                            }
+                        }
+                    }
+
+                    .para {
+                        width: min(100%, 960px);
+                        margin-inline: auto;
+                        font-weight: var(--fw_regular);
+                        color: hsl(var(--AppM_clr_text_para));
+                        & > * {
+                            color: hsl(var(--AppM_clr_text_para));
+                            font-weight: var(--fw_regular);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .wrapper_box {
+        width: 100%;
+        position: relative;
+        height: 100%;
+        .box {
+            width: 100%;
+            height: 100%;
+            border-radius: 15px;
+            background: #ffffff1f;
+            backdrop-filter: blur(5px);
+            @include displayFlex(column, flex-start, space-between);
+            gap: 10px;
+            position: relative;
+            overflow: hidden;
+            transition: var(--transition_03);
+            border: 1px solid #d0e6ed;
+            box-shadow: 0px 6px 10px 0px #ecf5f8;
+            padding: 10px;
+
+            .front {
+                width: 100%;
+                .info {
+                    width: 100%;
+                    .info_icon {
+                        @include displayFlex(row, center, center);
+                        width: 100%;
+                        height: 258px;
+                        border-radius: 10px;
+                        img {
+                            width: 100%;
+                            height: 258px;
+                            object-fit: cover;
+                            border-radius: 10px;
+                        }
+                    }
+                    .para_2 {
+                        font-weight: var(--fw_bold);
+                        color: var(--AppM_clr_bg_black);
+                        font-family: var(--fn_accent);
+                        margin-block: 22px 20px;
+                        padding-inline: rem(8);
+                        & > * {
+                            color: var(--AppM_clr_bg_black);
+                            font-weight: var(--fw_bold);
+                        }
+                    }
+                }
+                .info_img {
+                    width: 100%;
+                    @include displayFlex(column, flex-end, flex-end);
+                    align-self: flex-end;
+                    flex: 1;
+                }
+            }
+        }
+        .hover_content {
+            opacity: 0;
+            background: url('./../../../../public/assets/images/myAppmobile/card_back.png') no-repeat center center;
+            background-size: cover;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            transform: translateY(-100%);
+            transition: 0.4s ease-in-out;
+            padding: scaleValue(18px, 38px) scaleValue(18px, 32px);
+            &::after {
+                content: '';
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                left: 0;
+                top: 0;
+                background: #18b8cfe3;
+            }
+            & .heading_back {
+                font-weight: var(--fw_bold);
+                line-height: 1.4;
+                color: var(--clr_text_secondary);
+                position: relative;
+                z-index: 2;
+                max-width: rem(175);
+                font-family: var(--fn_accent);
+                padding-block-end: rem(16);
+                & > * {
+                    font-weight: var(--fw_bold);
+                    line-height: 1.4;
+                    color: var(--clr_text_secondary);
+                    font-family: var(--fn_accent);
+                }
+            }
+            & .para_2 {
+                margin-block-start: rem(20);
+                border-top: 1px solid var(--clr_border_secondary);
+                padding-block: rem(20);
+                font-weight: var(--fw_bold);
+                line-height: 1.6;
+                color: var(--clr_text_secondary);
+                position: relative;
+                z-index: 2;
+                max-width: rem(210);
+                font-family: var(--fn_accent);
+                display: -webkit-box;
+                -webkit-line-clamp: 6;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                max-height: 175px;
+
+                & > * {
+                    font-weight: var(--fw_bold);
+                    line-height: 1.4;
+                    color: var(--clr_text_secondary);
+                    font-family: var(--fn_accent);
+                }
+            }
+        }
+        &:hover {
+            .box .hover_content {
+                opacity: 1;
+                transform: translateY(00%);
+            }
+        }
+    }
+}

components/MyAppLanding/component/SecondaryAboutApp/SecondaryAboutApp.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import global from 'theme/global/global.module.scss';
+import styles from '../netflixGenFeature/NetflixGenFeature.module.scss';
+import { Box, Tab, Tabs } from '@mui/material';
+import { DevelopmentProcessInterface } from '@/interfaces/eCommerceDevelopment.interface';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import SecondaryFeatures from './SecondaryFeatures';
+import { Header, KeyNote } from '@/interfaces/shared/shared';
+
+interface TabPanelProps {
+    children?: React.ReactNode;
+    index: number;
+    value: number;
+}
+function CustomTabPanel(props: TabPanelProps) {
+    const { children, value, index, ...other } = props;
+
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`simple-tabpanel-${index}`}
+            aria-labelledby={`simple-tab-${index}`}
+            {...other}
+        >
+            {value === index && (
+                <Box className={styles.panel_box} sx={{ p: 3 }}>
+                    {children}
+                </Box>
+            )}
+        </div>
+    );
+}
+
+interface SecondaryAboutAppInterface {
+    Header: Header;
+    notes: KeyNote[];
+}
+
+interface requiredProps{
+    props: SecondaryAboutAppInterface;
+    id: string;
+}
+
+const SecondaryAboutApp = ({ props, id }: requiredProps) => {
+    const [value, setValue] = React.useState(0);
+    const header = props?.Header || {};
+    const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+        setValue(newValue);
+    };
+
+    return (
+        <section id={id} className={`${styles.devicesWhyIos} ${global.section_padding} ${global.padding_block2}`}>
+            <div className={`${styles.customContainer} ${global.container}`}>
+                <div className={`${styles.inner_content}`}>
+                    <div className={`${styles.textContent}`}>
+                        {header?.pageTitle && (
+                            <div className={styles.content_chip}>{header?.pageTitle}</div>
+                        )}
+                        {header?.title && (
+                        <div
+                            className={`${global.heading1_1} ${styles.top_head}`}
+                            style={
+                                {
+                                    '--heading_color': header.titleColor ? header.titleColor : 'red',
+                                } as React.CSSProperties as any
+                            }
+                            
+                        >
+                            <ReactMarkdown
+                                rehypePlugins={[rehypeRaw as any]}
+                                skipHtml={false}
+                            >
+                                {header.title || ''}
+                            </ReactMarkdown>
+                          
+                        </div>
+                        )}
+                        {header?.content && (
+                        <div className={`${global.heading6} ${styles.sub_text}`} >
+                            <ReactMarkdown>{header?.content}</ReactMarkdown>
+                        </div>
+                        )}
+                    </div>
+                    <div className={styles.nexLogo}>
+                        {header?.backgroundImage?.data?.attributes?.url && (
+                        <img
+                            src={header?.backgroundImage?.data?.attributes?.url}
+                                width={381}
+                                height={274}
+                            />
+                        )}
+                    </div>
+                </div>
+              
+            </div>
+            <SecondaryFeatures props={props.notes} />
+        </section>
+    );
+};
+
+export default SecondaryAboutApp;

components/MyAppLanding/component/SecondaryAboutApp/SecondaryFeatures.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import global from 'theme/global/global.module.scss';
+import styles from './secondaryFeature.module.scss';
+import { Autoplay, Navigation } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+const decodeHTMLEntities = (text: string) => {
+    return text.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&#039;/g, "'");
+};
+
+const SecondaryFeatures = ({ props }: any) => {
+    return (
+      
+        <div className={styles.devices_whyIos_contentSlide}>
+            <Swiper
+                    slidesPerView={4}
+                    spaceBetween={20}
+                    loop
+                    // autoplay={{
+                    //     delay: 2500,
+                    //     disableOnInteraction: true,
+                    //     pauseOnMouseEnter: true,
+                    // }}
+                    observer={true}
+                    observeParents={true}
+                    navigation={false}
+                    modules={[Autoplay]}
+                    className={styles.swiper_box}
+                    breakpoints={{
+                        0: {
+                            slidesPerView: 1,
+                        },
+                        575: {
+                            slidesPerView: 2,
+                        },
+                        768: {
+                            slidesPerView: 3,
+                        },
+                        1024: {
+                            slidesPerView: 4,
+                        },
+                    }}
+                >
+                    {props?.map((item: any, i: number) => (
+                        <SwiperSlide key={i}>
+                            <div className={styles.box}>
+                                <div className={styles.image_box}>
+                                    <div className={styles.iconBox}>
+                                        {item?.noteImage?.data?.attributes?.url ? (
+                                            <img src={item?.noteImage?.data?.attributes?.url} alt={item?.noteTitle} />
+                                        ) : (
+                                            <div className={styles.icon} >
+                                                <ReactMarkdown
+                                                    rehypePlugins={[rehypeRaw as any]}
+                                                    skipHtml={false}
+                                                >
+                                                    {item.noteIcon || ''}
+                                                </ReactMarkdown>
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+                                <div className={styles.details}>
+                                    <h3 className={`${global.heading5} ${styles.title}`}>{item?.noteTitle}</h3>
+                                    <p className={`${global.body1} ${styles.para}`}>
+                                        {item?.noteBody}
+                                    </p>
+                                </div>
+                            </div>
+                        </SwiperSlide>
+                    ))}
+                </Swiper>
+        </div>
+        
+    );
+};
+
+export default SecondaryFeatures;

components/MyAppLanding/component/SecondaryAboutApp/secondaryFeature.module.scss

@@ -0,0 +1,118 @@
+@use 'theme/sass' as *;
+.devices_whyIos_contentSlide {
+    margin-block-start: scaleValue(30px, 60px);
+    .swiper_box {
+        width: 100%;
+        padding-block-end: scaleValue(70px, 90px);
+        & :global(.swiper-wrapper) {
+            margin-inline-start: rem(20);
+            @include max(575px) {
+                margin-inline-start: 0;
+            }
+            :global(.swiper-slide) {
+                @include displayFlex(row, stretch, flex-start);
+                height: auto;
+            }
+        }
+    }
+    .box {
+        background-color: hsl(var(--AppM_clr_bg_light_01));
+        border: 1px solid hsl(var(--AppM_border_04));
+        padding: scaleValue(18px, 25px) scaleValue(20px, 36px);
+        border-radius: rem(27);
+        border-top-right-radius: 0;
+        height: 100%;
+        width: 100%;
+        transition: var(--transition_02);
+        margin-block-start: rem(4);
+
+        .image_box {
+            position: absolute;
+            top: -8px;
+            right: 0;
+            border: 1px solid hsl(var(--AppM_border_04));
+            border-top: none;
+            border-right: none;
+            background: var(--clr_background_primary);
+            width: rem(90);
+            height: rem(90);
+            border-bottom-left-radius: 50%;
+            @include displayFlex(row, center, center);
+            z-index: 1;
+            &::before {
+                position: absolute;
+                content: '';
+                top: 12px;
+                left: -37px;
+                transform: rotate(-90deg);
+                background: none;
+                width: 2.25rem;
+                height: 2.25rem;
+                border-top: 0;
+                border-right: 1px solid hsl(var(--AppM_border_04));
+                border-bottom: 1px solid hsl(var(--AppM_border_04));
+                border-bottom-right-radius: 1.25rem;
+                box-shadow: 0.313rem 0.313rem 0 0.313rem hsl(0deg 0% 100%);
+                border-left: 0;
+                z-index: 2;
+            }
+            &::after {
+                position: absolute;
+                content: '';
+                bottom: -36px;
+                right: 1px;
+                transform: rotate(-90deg);
+                background: none;
+                width: 2.25rem;
+                height: 2.25rem;
+                border-bottom-right-radius: 1.25rem;
+                box-shadow: 0.313rem 0.313rem 0 0.313rem #ffffff;
+                border-right: 1px solid hsl(var(--AppM_border_04));
+                border-bottom: 1px solid hsl(var(--AppM_border_04));
+            }
+
+            .iconBox {
+                width: rem(70);
+                height: rem(70);
+                background: linear-gradient(180deg, #11aef1 0%, #1ec0b7 100%);
+                border-radius: 50%;
+                @include displayFlex(row, center, center);
+            }
+        }
+        .details {
+            .title {
+                margin-block-end: scaleValue(8px, 15px);
+                color: var(--clr_vzit_offer_text2);
+                max-width: rem(200);
+                & > * {
+                    margin-block-end: scaleValue(8px, 15px);
+                    color: var(--clr_vzit_offer_text2);
+                }
+            }
+            .para {
+                margin-block-start: rem(10);
+                color: var(--clr_vzit_offer_text);
+                font-weight: var(--fw_regular);
+                font-family: var(--font_primary);
+                & > * {
+                    color: var(--clr_vzit_offer_text);
+                    font-weight: var(--fw_regular);
+                    font-family: var(--font_primary);
+
+                    @include max(991px) {
+                        margin-block-start: rem(8);
+                    }
+                }
+                @include max(575px) {
+                    max-width: rem(400);
+                }
+            }
+        }
+        &:hover {
+            background-color: var(--sub_land_border_clr);
+            .image_box {
+                background: var(--clr_background_primary);
+            }
+        }
+    }
+}

components/MyAppLanding/component/Seo/Seo.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+const Seo = ({ props }: any) => (
+  <section>
+    <h2>Seo Component</h2>
+    <pre>{JSON.stringify(props, null, 2)}</pre>
+  </section>
+);
+export default Seo; 

components/MyAppLanding/component/Services/Services.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+const Services = ({ props }: any) => (
+  <section>
+    <h2>Services Component</h2>
+    <pre>{JSON.stringify(props, null, 2)}</pre>
+  </section>
+);
+export default Services; 

components/MyAppLanding/component/TechStackBrandLogo/TechStackBrandLogo.module.scss

@@ -0,0 +1,209 @@
+@use 'theme/sass' as *;
+
+.brand_sec {
+    background: var(--clr_background_primary);
+    height: auto;
+    position: relative;
+    &.MyAppLandingGlobal {
+        background: var(--clr_background_primary);
+        .header_content {
+            max-width: rem(1200);
+            .title {
+                font-family: var(--fn_accent) !important;
+                font-size: scaleValue(28px, 42px);
+                line-height: 1.2;
+                letter-spacing: 0;
+                font-weight: var(--fw_bold);
+                color: var(--clr_vzit_offer_text2);
+                & > * {
+                    font-family: var(--fn_accent) !important;
+                    font-size: scaleValue(28px, 42px);
+                    line-height: 1.2;
+                    letter-spacing: 0;
+                    font-weight: var(--fw_bold);
+                    color: var(--clr_vzit_offer_text2);
+                }
+            }
+            .sub_brand_heading {
+                color: var(--clr-para);
+                margin-block-start: rem(20);
+                max-width: rem(866);
+                margin-inline: auto;
+                & > * {
+                    color: var(--clr-para);
+                }
+            }
+        }
+    }
+    .header_content {
+        width: 100%;
+        max-width: rem(1100);
+        margin-inline: auto;
+        .content_chip {
+            width: fit-content;
+            line-height: rem(24);
+            background: hsl(var(--AppMobile_clr_chip));
+            padding-block: rem(6);
+            padding-inline: rem(16);
+            border-radius: rem(20);
+            min-height: rem(34);
+            @include displayFlex(row, center, center);
+            color: hsl(var(--AppMobile_clr_text_chip));
+            font-weight: var(--fw_medium);
+            font-family: var(--fn_accent);
+            margin: 0 auto 20px;
+            & > * {
+                color: hsl(var(--AppMobile_clr_text_chip));
+                font-weight: var(--fw_medium);
+                font-family: var(--fn_accent);
+            }
+        }
+        .title {
+            text-align: center;
+            & > * {
+                text-align: center;
+                color: var(--lnd2_clr_text_black);
+                margin-block-end: 10px;
+                font-size: scaleValue(26px, 44px);
+                strong {
+                    @include textGradient(var(--heading_color));
+                }
+            }
+            strong {
+                @include textGradient(var(--heading_color));
+            }
+        }
+    }
+
+    .sub_brand_heading {
+        text-align: center;
+        text-transform: capitalize;
+        & > * {
+            font-family: var(--font_primary);
+            color: var(--lnd2_clr_text_gray);
+        }
+    }
+
+    //for others page
+    .home_brand_heading {
+        p {
+            font-weight: var(--fw_regular);
+            color: var(--clr-para);
+        }
+    }
+    .brand {
+        width: 100%;
+        margin-inline: auto;
+        text-align: center;
+
+        .brand_logo {
+            @include displayFlex(row, center, center);
+            flex-wrap: wrap;
+            margin: auto;
+            text-align: center;
+            gap: 45px;
+            width: 100%;
+            margin-block-start: scaleValue(30px, 80px);
+            @include max(991px) {
+                gap: 28px;
+            }
+            @include max(767px) {
+                gap: 40px;
+            }
+            @include max(639px) {
+                gap: 28px;
+            }
+            :global(.swiper) {
+                width: 100%;
+                :global(.swiper-wrapper) {
+                    -webkit-transition-timing-function: linear !important;
+                    -o-transition-timing-function: linear !important;
+                    transition-timing-function: linear !important;
+                    align-items: stretch !important;
+                    :global(.swiper-slide) {
+                        & .brandItem {
+                            & .TechBrand_LogoBox {
+                                width: rem(138);
+                                height: rem(138);
+                                margin: 0 auto;
+                                @include displayFlex(row, center, center);
+                                box-shadow: 0px 6px 10px 0px #ecf5f8;
+                                border: 1.68px solid #455a6408;
+                                border-radius: rem(32);
+                                background: var(--clr_background_primary);
+                                @include max(575px) {
+                                    width: rem(108);
+                                    height: rem(108);
+                                    border-radius: rem(26);
+                                }
+                                @include max(390px) {
+                                    width: rem(90);
+                                    height: rem(90);
+                                    border-radius: rem(18);
+                                }
+                                img {
+                                    width: 100%;
+                                    height: 100%;
+                                    object-fit: contain;
+                                    max-height: rem(45);
+                                    @include max(991px) {
+                                        max-height: rem(33);
+                                    }
+                                    @include max(767px) {
+                                        max-height: rem(45);
+                                    }
+                                    @include max(639px) {
+                                        max-height: rem(28);
+                                    }
+                                }
+                            }
+
+                            .itemLabel {
+                                color: var(--clr-para);
+                                font-weight: var(--fw_semiBold);
+                                margin-block-start: 0.75rem;
+                                text-align: center;
+                                line-height: 1.8;
+
+                                & > * {
+                                    color: var(--clr-para);
+                                    font-weight: var(--fw_semiBold);
+                                }
+                                @include max(575px) {
+                                    font-size: rem(16);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .brand_logo_mobile {
+            @include max(576px) {
+                display: none;
+            }
+        }
+    }
+    .gradient_btn {
+        @include displayFlex(row, center, center);
+        .primary_btn {
+            margin-block-start: scaleValue(40px, 60px);
+            width: fit-content;
+            min-width: 136px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            flex-direction: row;
+            justify-content: space-between;
+            gap: 10px;
+            font-size: 18px;
+            line-height: 1;
+            text-transform: capitalize;
+            font-weight: var(--fw_bold);
+            font-family: var(--fn_accent);
+            .box_text {
+                color: var(--clr_text_secondary);
+            }
+        }
+    }
+}

components/MyAppLanding/component/TechStackBrandLogo/TechStackBrandLogo.tsx

@@ -0,0 +1,237 @@
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+import 'swiper/css/autoplay';
+import { Autoplay } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import global from 'theme/global/global.module.scss';
+import styles from './TechStackBrandLogo.module.scss';
+
+import { LandingTwoBrandLogosInterface } from '@/interfaces/secondLanding.interface';
+import ReactMarkdown from 'react-markdown';
+import Image from 'next/image';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { PhoneRings } from '@/constants/svgConstant';
+
+import CallToAction from '../callToAction/CallToAction';
+import { Header } from '@/interfaces/shared/shared';
+import rehypeRaw from 'rehype-raw';
+
+interface TechStackInterface {
+    header: Header;
+    technologies: any;
+}
+
+interface TechStackBrandLogoInterface {
+    extraClass: string | null | undefined;
+    props: TechStackInterface;
+    onOpen: () => void;
+    id: string;
+}
+
+const TechStackBrandLogo = ({ extraClass, props, onOpen, id }: TechStackBrandLogoInterface) => {
+    const { header, technologies } = props;
+    return (
+        <section id={id} className={`${styles.brand_sec} ${global.padding_block2} ${extraClass && styles[extraClass]}`}>
+            <div className={`${styles.custom_container} `}>
+                <div className={`${styles.header_content} ${global.section_padding}`}>
+                    {header?.pageTitle && (
+                        <div className={styles.content_chip}>{header?.pageTitle}</div>
+                    )}
+                    {header?.title && (
+                        <div
+                            className={`${styles.title} ${global.mona_sans_heading1}`}
+                            style={
+                                {
+                                    '--heading_color': header.titleColor ? header.titleColor : '',
+                                } as React.CSSProperties as any
+                            }
+                        >
+                            <ReactMarkdown
+                                rehypePlugins={[rehypeRaw as any]}
+                                skipHtml={false}
+                            >
+                                {header.title || ''}
+                            </ReactMarkdown>
+                        </div>
+                    )}
+                    {header?.content && (
+                        <div
+                            className={`${styles.sub_brand_heading} ${global.head44} 
+                                }`}
+                        >
+                            <ReactMarkdown
+                                rehypePlugins={[rehypeRaw as any]}
+                                skipHtml={false}
+                            >
+                                {header.content || ''}
+                            </ReactMarkdown>
+                        </div>
+                    )}
+                </div>
+                <div className={`${styles.brand}`}>
+                    <div className={`${styles.brand_logo}`}>
+                        <Swiper
+                            slidesPerView={8}
+                            spaceBetween={30}
+                            autoplay={{
+                                delay: 0,
+                                disableOnInteraction: false,
+                            }}
+                            breakpoints={{
+                                280: {
+                                    slidesPerView: 3,
+                                    spaceBetween: 20,
+                                },
+                                640: {
+                                    slidesPerView: 3,
+                                },
+                                768: {
+                                    slidesPerView: 5,
+                                },
+                                1024: {
+                                    slidesPerView: 6,
+                                },
+                                1200: {
+                                    slidesPerView: 7,
+                                },
+                                1360: {
+                                    slidesPerView: 8,
+                                },
+                            }}
+                            loop
+                            speed={2000}
+                            modules={[Autoplay]}
+                        >
+                            {[...technologies?.data, ...technologies?.data]?.map((item: any, i: number) => (
+                                <SwiperSlide key={i}>
+                                    <div className={styles.brandItem}>
+                                        <div className={`${styles.TechBrand_LogoBox}`}>
+                                            {item.attributes?.icon?.data?.attributes?.url ? (
+                                                <Image
+                                                    height={33}
+                                                    width={200}
+                                                    src={item.attributes?.icon?.data?.attributes?.url}
+                                                    alt={item?.attributes?.name}
+                                                    loading="lazy"
+                                                />
+                                            ) : (
+                                                <div className={styles.TechBrand_LogoBox}>
+                                                    <div
+                                                        className={styles.TechBrand_LogoBox}
+
+                                                    >
+                                                        <ReactMarkdown
+                                                            rehypePlugins={[rehypeRaw as any]}
+                                                            skipHtml={false}
+                                                        >
+                                                            {item.noteIcon || ''}
+                                                        </ReactMarkdown>
+                                                    </div>
+                                                </div>
+                                            )}
+                                        </div>
+
+                                        <div className={`${styles.itemLabel} ${global.details1}`}>
+                                            <ReactMarkdown
+                                                rehypePlugins={[rehypeRaw as any]}
+                                                skipHtml={false}
+                                            >
+                                                {item?.attributes?.name}
+                                            </ReactMarkdown>
+                                        </div>
+                                    </div>
+                                </SwiperSlide>
+                            ))}
+                        </Swiper>
+                        <Swiper
+                            slidesPerView={8}
+                            spaceBetween={30}
+                            autoplay={{
+                                delay: 0,
+                                disableOnInteraction: false,
+                                reverseDirection: true,
+                            }}
+                            breakpoints={{
+                                280: {
+                                    slidesPerView: 3,
+                                    spaceBetween: 20,
+                                },
+                                640: {
+                                    slidesPerView: 3,
+                                },
+                                768: {
+                                    slidesPerView: 5,
+                                },
+                                1024: {
+                                    slidesPerView: 6,
+                                },
+                                1200: {
+                                    slidesPerView: 7,
+                                },
+                                1360: {
+                                    slidesPerView: 8,
+                                },
+                            }}
+                            loop
+                            speed={2000}
+                            modules={[Autoplay]}
+                        >
+                            {[...technologies.data, ...technologies.data]
+                                ?.slice()
+                                .reverse()
+                                .map((item: any, i: number) => (
+                                    <SwiperSlide key={i}>
+                                        <div className={styles.brandItem}>
+                                            <div className={`${styles.TechBrand_LogoBox}`}>
+                                                {item.attributes?.icon?.data?.attributes?.url ? (
+                                                    <Image
+                                                        height={33}
+                                                        width={200}
+                                                        src={item.attributes?.icon?.data?.attributes?.url}
+                                                        alt={item?.attributes?.name}
+                                                        loading="lazy"
+                                                    />
+                                                ) : (
+                                                    <div className={styles.TechBrand_LogoBox}>
+                                                        <div
+                                                            className={styles.TechBrand_LogoBox}
+                                                        >
+                                                            <ReactMarkdown
+                                                                rehypePlugins={[rehypeRaw as any]}
+                                                                skipHtml={false}
+                                                            >
+                                                                {item.noteIcon || ''}
+                                                            </ReactMarkdown>
+                                                        </div>
+                                                    </div>
+                                                )}
+                                            </div>
+
+                                            <div className={`${styles.itemLabel} ${global.details1}`}>
+                                                <ReactMarkdown
+                                                    rehypePlugins={[rehypeRaw as any]}
+                                                    skipHtml={false}
+                                                >
+                                                {item?.attributes?.name}
+                                            </ReactMarkdown>
+                                            </div>
+                                        </div>
+                                    </SwiperSlide>
+                                ))}
+                        </Swiper>
+                    </div>
+                </div>
+                <div className={styles.gradient_btn}>
+                    <button className={`${styles.primary_btn} ${global.all_btn}`} onClick={() => onOpen()}>
+                        <PhoneRings />
+                        Contact With Us
+                    </button>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default TechStackBrandLogo;

components/MyAppLanding/component/Technologies/Technologies.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+const Technologies = ({ props }: any) => (
+  <section>
+    <h2>Technologies Component</h2>
+    <pre>{JSON.stringify(props, null, 2)}</pre>
+  </section>
+);
+export default Technologies; 

components/MyAppLanding/component/TrackPerformance/TrackPerformance.tsx

@@ -0,0 +1,212 @@
+import React, { useEffect, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+import { Autoplay, Navigation } from 'swiper';
+import global from 'theme/global/global.module.scss';
+import styles from './trackPerformance.module.scss';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import Image from 'next/image';
+import CallToAction from '../callToAction/CallToAction';
+import { Header, KeyNote } from '@/interfaces/shared/shared';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+interface TrackPerformanceInterface {
+    header: Header;
+    notes: KeyNote[];
+}
+
+interface RequiredProps{
+    props: TrackPerformanceInterface;
+    extraClass?: string;
+    id: string;
+}
+
+const TrackPerformance = ({ extraClass, props, id }: RequiredProps) => {
+    const { header, notes } = props;
+    const [isActiveIndex, setIsActiveIndex] = useState(false);
+    const [isMobileDevice, setIsMobileDevice] = useState(false);
+    const notesLen = notes?.length;
+    const perView = Math.min(5,Math.max(1, notesLen));
+
+    const handleClick = () => {
+        if (isMobileDevice) {
+            setIsActiveIndex(!isActiveIndex);
+        }
+    };
+    useEffect(() => {
+        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+        setIsMobileDevice(isMobile);
+    }, []);
+    const getHeadingStyle = (): React.CSSProperties | undefined => {
+        const titleColor = header?.titleColor;
+        
+        // Return undefined if no titleColor is provided
+        if (!titleColor || typeof titleColor !== 'string') {
+            return undefined;
+        }
+
+        const trimmed = titleColor.replace(/[;]\s*$/, '').trim();
+        
+        // Return undefined if trimmed is empty
+        if (!trimmed) {
+            return undefined;
+        }
+
+        const normalized = trimmed.startsWith('--') 
+            ? `var(${trimmed.replace(/:$/, '')})` 
+            : trimmed;
+
+        return { ['--heading_color' as any]: normalized } as React.CSSProperties;
+    };
+
+    // Fixed background style to remove semicolons
+    const getBackgroundStyle = (): React.CSSProperties => {
+        const background = header?.background;
+        
+        if (!background || typeof background !== 'string') {
+            return {};
+        }
+
+        // Remove trailing semicolons and whitespace
+        const cleanBackground = background.replace(/[;]\s*$/, '').trim();
+        
+        return cleanBackground ? { background: cleanBackground } : {};
+    };
+    const headingStyle = getHeadingStyle();
+    const backgroundStyle = getBackgroundStyle();
+
+    return (
+        <>
+            <section id={id} className={`${styles.monetization_sec}`}
+            style={backgroundStyle}
+            >
+                <div className={`${styles.grid_card} ${global.padding_block2}`}>
+                    <div className={`${global.section_padding}`}>
+                        <div className={`${styles.custom_container} ${global.container} `}>
+                            <div className={`${styles.inner_auto_services} `}>
+                                <div className={styles.content_box} id="powerBannerLeft">
+                                    <div className={styles.content}>
+                                        {header?.pageTitle && (
+                                                <div className={`${styles.content_chip} ${global.body1}`}>
+                                                    {header?.pageTitle}
+                                                </div>
+                                            )}
+                                        <div className={`${global.heading7} ${styles.title}`}>
+                                            
+                                            {header?.title && (
+                                            <div
+                                                style={headingStyle}
+                                            >
+                                                    <ReactMarkdown
+                                                    rehypePlugins={[rehypeRaw as any]}
+                                                    skipHtml={false}
+                                                    >
+                                                        {header?.title || ''}
+                                                    </ReactMarkdown>
+                                            </div>
+                                            )}
+                                        </div>
+                                        {header?.content && (
+                                            <div className={`${global.details1} ${styles.para}`}>
+                                                <ReactMarkdown
+                                                rehypePlugins={[rehypeRaw as any]}
+                                                skipHtml={false}
+                                                >
+                                                    {header?.content || ''}
+                                                </ReactMarkdown>
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <Swiper
+                        slidesPerView={perView}
+                        spaceBetween={28}
+                        autoplay={{
+                            delay: 2500,
+                            disableOnInteraction: false,
+                            pauseOnMouseEnter: true,
+                        }}
+                        observer={true}
+                        observeParents={true}
+                        navigation={false}
+                        modules={[Autoplay, Navigation]}
+                        autoHeight={true}
+                        loop
+                        className={styles.swiper_box}
+                        onSlideChange={() => isMobileDevice && setIsActiveIndex(false)}
+                    >
+                        {[...notes,...notes]?.map((item: any, i: number) => (
+                            <SwiperSlide key={i}>
+                                <div
+                                    className={`${styles.wrapper_box} ${
+                                        isMobileDevice ? (isActiveIndex ? styles.active : styles.non_active) : ''
+                                    }`}
+                                    onClick={handleClick}
+                                >
+                                    <div className={styles.box}>
+                                        <div className={styles.front}>
+                                            <div className={styles.info}>
+                                                <div className={styles.info_icon}>
+                                                    <img
+                                                        src={
+                                                            item?.noteImage?.data?.attributes?.url ||
+                                                            UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE
+                                                                .MY_APP_MOBILE_ESSENTIAL
+                                                        }
+                                                        width={267}
+                                                        height={258}
+                                                        alt="MICROSOFT_choose"
+                                                    />
+                                                </div>
+                                                <div className={`${global.head44} ${styles.para_2}`}>
+                                                    <ReactMarkdown
+                                                        rehypePlugins={[rehypeRaw as any]}
+                                                        skipHtml={false}
+                                                    >
+                                                        {item?.noteTitle || ''}
+                                                    </ReactMarkdown>
+                                                </div>
+                                            </div>
+                                            {/* <div className={styles.info_img}>
+                                                <img
+                                                src={item?.noteImage?.data?.attributes?.url || UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_ESSENTIAL}
+                                                alt="MICROSOFT_choose"
+                                            />
+                                            </div> */}
+                                        </div>
+                                        <div className={styles.hover_content}>
+                                            <div className={`${global.head44} ${styles.heading_back}`}>
+                                                <ReactMarkdown
+                                                    rehypePlugins={[rehypeRaw as any]}
+                                                    skipHtml={false}
+                                                >
+                                                    {item?.noteTitle || ''}
+                                                </ReactMarkdown>
+                                            </div>
+                                            <div className={`${global.body1} ${styles.para_2}`}>
+                                                <ReactMarkdown
+                                                    rehypePlugins={[rehypeRaw as any]}
+                                                    skipHtml={false}
+                                                >
+                                                    {item?.noteBody || ''}
+                                                </ReactMarkdown>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </SwiperSlide>
+                        ))}
+                    </Swiper>
+                </div>
+            </section>
+        </>
+    );
+};
+export default TrackPerformance;

components/MyAppLanding/component/TrackPerformance/trackPerformance.module.scss

@@ -0,0 +1,253 @@
+@use 'theme/sass' as *;
+
+.monetization_sec {
+    width: 100%;
+    background: hsl(var(--AppM_clr_bg_primary));
+    position: relative;
+    z-index: 1;
+
+    .grid_card {
+        border-radius: rem(50);
+        overflow: hidden;
+        position: relative;
+        z-index: 0;
+    }
+
+    .custom_container {
+        .inner_auto_services {
+            @include displayFlex(column, flex-start, flex-start);
+            gap: 20px;
+
+            .content_box {
+                width: 100%;
+                @include displayFlex(column, center, center);
+                padding-block-end: 40px;
+
+                .content {
+                    text-align: center;
+                    width: 100%;
+                    padding-inline: rem(20);
+                    .content_chip {
+                        width: fit-content;
+                        line-height: rem(24);
+                        background: hsl(var(--AppM_clr_bg_blue_chip));
+                        padding-block: rem(6);
+                        padding-inline: rem(16);
+                        border-radius: rem(20);
+                        min-height: rem(34);
+                        @include displayFlex(row, center, center);
+                        color: hsl(var(--AppMobile_clr_text_chip));
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                        margin-block-end: rem(20);
+                        margin-inline: auto;
+                        & > * {
+                            color: hsl(var(--AppMobile_clr_text_chip));
+                            font-weight: var(--fw_medium);
+                            font-family: var(--fn_accent);
+                        }
+                    }
+
+                    .title {
+                        & > * {
+                            max-width: rem(852);
+                            margin: 0 auto;
+                            font-weight: var(--fw_bold);
+                            font-family: var(--fn_accent);
+                            color: var(--AppM_clr_bg_black);
+                            margin-block-end: 25px;
+                            font-size: scaleValue(28px, 42px);
+                            line-height: scaleValue(40px, 50px);
+                            & > * {
+                                color: var(--AppM_clr_bg_black);
+                                font-weight: var(--fw_bold);
+                                strong {
+                                    @include textGradient(var(--heading_color));
+                                }
+                            }
+                            strong {
+                                @include textGradient(var(--heading_color));
+                            }
+                        }
+                    }
+
+                    .para {
+                        width: min(100%, 960px);
+                        margin-inline: auto;
+                        font-weight: var(--fw_regular);
+                        color: hsl(var(--AppM_clr_text_para));
+                        & > * {
+                            color: hsl(var(--AppM_clr_text_para));
+                            font-weight: var(--fw_regular);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .swiper_box {
+        padding-inline: 10px;
+        & :global(.swiper-wrapper) {
+            height: 100% !important;
+            align-items: stretch !important;
+        }
+        :global(.swiper-slide) {
+            @include displayFlex(row, stretch, flex-start);
+            width: 300px !important;
+            height: auto !important;
+            @include max(479px) {
+                width: 280px !important;
+            }
+        }
+        :global(.swiper-button-prev) {
+            bottom: 0;
+            top: inherit;
+            width: 30px;
+            height: 30px;
+            left: inherit;
+            right: 60px;
+            border-radius: 50%;
+            @include displayFlex(row, center, center);
+            border: 1px solid var(--clr_border_3);
+            &::after {
+                font-size: 14px;
+            }
+        }
+        :global(.swiper-button-next) {
+            bottom: 0;
+            top: inherit;
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            @include displayFlex(row, center, center);
+            border: 1px solid var(--clr_border_3);
+            &::after {
+                font-size: 14px;
+            }
+        }
+    }
+    .wrapper_box {
+        width: 100%;
+        position: relative;
+        .box {
+            width: 100%;
+            height: 100%;
+            border-radius: 15px;
+            background: #ffffff1f;
+            backdrop-filter: blur(5px);
+            @include displayFlex(column, flex-start, space-between);
+            gap: 10px;
+            position: relative;
+            overflow: hidden;
+            transition: var(--transition_03);
+            border: 1px solid #d0e6ed;
+            box-shadow: 0px 6px 10px 0px #ecf5f8;
+            padding: 10px;
+
+            .front {
+                width: 100%;
+                .info {
+                    width: 100%;
+                    .info_icon {
+                        @include displayFlex(row, center, center);
+                        width: 100%;
+                        height: 258px;
+                        border-radius: 10px;
+                        img {
+                            width: 100%;
+                            height: 258px;
+                            object-fit: cover;
+                            border-radius: 10px;
+                        }
+                    }
+                    .para_2 {
+                        font-weight: var(--fw_bold);
+                        color: var(--AppM_clr_bg_black);
+                        font-family: var(--fn_accent);
+                        margin-block: 22px 20px;
+                        padding-inline: rem(8);
+                        & > * {
+                            color: var(--AppM_clr_bg_black);
+                            font-weight: var(--fw_bold);
+                        }
+                    }
+                }
+                .info_img {
+                    width: 100%;
+                    @include displayFlex(column, flex-end, flex-end);
+                    align-self: flex-end;
+                    flex: 1;
+                }
+            }
+        }
+        .hover_content {
+            opacity: 0;
+            background: url('./../../../../public/assets/images/myAppmobile/card_back.png') no-repeat center center;
+            background-size: cover;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            transform: translateY(-100%);
+            transition: 0.4s ease-in-out;
+            padding: scaleValue(18px, 38px) scaleValue(18px, 32px);
+            &::after {
+                content: '';
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                left: 0;
+                top: 0;
+                background: #18b8cfe3;
+            }
+            & .heading_back {
+                font-weight: var(--fw_bold);
+                line-height: 1.4;
+                color: var(--clr_text_secondary);
+                position: relative;
+                z-index: 2;
+                max-width: rem(175);
+                font-family: var(--fn_accent);
+                padding-block-end: rem(16);
+                & > * {
+                    font-weight: var(--fw_bold);
+                    line-height: 1.4;
+                    color: var(--clr_text_secondary);
+                    font-family: var(--fn_accent);
+                }
+            }
+            & .para_2 {
+                margin-block-start: rem(20);
+                border-top: 1px solid var(--clr_border_secondary);
+                padding-block: rem(20);
+                font-weight: var(--fw_bold);
+                line-height: 1.6;
+                color: var(--clr_text_secondary);
+                position: relative;
+                z-index: 2;
+                max-width: rem(210);
+                font-family: var(--fn_accent);
+                display: -webkit-box;
+                -webkit-line-clamp: 6;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                max-height: 175px;
+
+                & > * {
+                    font-weight: var(--fw_bold);
+                    line-height: 1.4;
+                    color: var(--clr_text_secondary);
+                    font-family: var(--fn_accent);
+                }
+            }
+        }
+        &:hover {
+            .box .hover_content {
+                opacity: 1;
+                transform: translateY(00%);
+            }
+        }
+    }
+}

components/MyAppLanding/component/UrbanClapNeed/UrbanClapNeed.module.scss

@@ -0,0 +1,161 @@
+@use 'theme/sass' as *;
+
+.advantages_sec {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    background-color: hsl(var(--AppM_clr_bg_primary));
+
+    .custom_container {
+        .inner_auto_services {
+            @include displayFlex(column, flex-start, flex-start);
+            gap: 20px;
+            position: relative;
+
+            .content_box {
+                width: 100%;
+                @include displayFlex(column, center, center);
+                padding-block-end: 40px;
+
+                @include max(768px) {
+                    padding-block-end: 0;
+                }
+                .sideIcon {
+                    display: none;
+                    width: rem(316);
+                    height: rem(197);
+                    & img.sideIcon_Saas {
+                        width: 100%;
+                        height: 100%;
+                        object-fit: contain;
+                    }
+                }
+                .content {
+                    text-align: center;
+                    width: 100%;
+                    .high_light {
+                        background: linear-gradient(95.01deg, #017ed0 1.54%, rgba(148, 221, 255, 0.7) 97.01%);
+                        border-radius: 10px;
+                        padding: 1px;
+                        width: fit-content;
+                        margin: auto;
+
+                        .text_high_light {
+                            font-weight: 600;
+                            font-size: 18px;
+                            border-radius: 10px;
+                            background: var(--clr_background_secondary48);
+                            font-weight: 600;
+                            font-size: 18px;
+                            border-radius: 10px;
+                        }
+                    }
+                    .title {
+                        color: var(--clr_vzit_offer_text2);
+                        max-width: rem(797);
+                        margin-inline: auto;
+
+                        & > * {
+                            font-weight: var(--fw_semiBold);
+                            font-family: var(--fn_accent);
+                            color: var(--clr_vzit_offer_text2);
+                        }
+                        strong {
+                            @include textGradient(var(--heading_color));
+                        }
+                    }
+                    .text {
+                        color: hsl(var(--AppM_clr_text_para));
+                        font-weight: var(--fw_regular);
+                        font-family: var(--font_primary);
+                        max-width: 756px;
+                        width: 100%;
+                        margin: 30px auto;
+                        & > * {
+                            color: hsl(var(--AppM_clr_text_para));
+                            font-weight: var(--fw_regular);
+                            font-family: var(--font_primary);
+                        }
+                    }
+                }
+            }
+            .services_box_wrap {
+                border: 4px solid #00000042;
+                background: linear-gradient(180deg, #ffffff 0%, #daeaff 100%);
+                border-radius: scaleValue(40px, 75px);
+                @include displayFlex(row, flex-start, space-between);
+                gap: 20px;
+                width: 100%;
+                margin-block-start: rem(20);
+                padding: scaleValue(25px, 40px);
+                @include max(767px) {
+                    @include displayFlex(column, flex-start, flex-start);
+                }
+                .services_box_content {
+                    width: 100%;
+                    .mainImg {
+                        width: 100%;
+                        max-width: rem(1160);
+                        height: 100%;
+                        max-height: rem(720);
+                        img {
+                            width: 100%;
+                            height: 100%;
+                            object-fit: contain;
+                        }
+                    }
+                    .details {
+                        padding: scaleValue(20px, 48px) scaleValue(15px, 70px);
+                        box-shadow: 0px 2px 8px 0px #00000040;
+                        background: linear-gradient(355.27deg, #1d3557 -30.45%, #000000 89.17%);
+                        border-radius: scaleValue(25px, 43px);
+                        margin-block-start: -120px;
+                        position: relative;
+                        z-index: 2;
+                        @include max(767px) {
+                            margin-block-start: -70px;
+                        }
+                        @include max(575px) {
+                            margin-block-start: -40px;
+                        }
+                        @include max(415px) {
+                            margin-block-start: -30px;
+                        }
+                        & :global(.swiper) {
+                            & :global(.swiper-wrapper) {
+                                & :global(.swiper-slide) {
+                                    & .data_slide {
+                                        width: 100%;
+                                        .para_2 {
+                                            font-weight: var(--fw_regular);
+                                            color: var(--clr_text_secondary);
+                                            line-height: 1.6;
+                                            text-align: center;
+                                            & > * {
+                                                font-weight: var(--fw_regular);
+                                                color: var(--clr_text_secondary);
+                                                line-height: 1.6;
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                            & :global(.swiper-pagination) {
+                                margin-block-start: 50px;
+                                position: relative !important;
+                                & :global(.swiper-pagination-bullet-active) {
+                                    width: 34px;
+                                    border-radius: 6px;
+                                    background: var(--clr_background_primary) !important;
+                                }
+                                & :global(.swiper-pagination-bullet) {
+                                    background: #ffffff52;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/UrbanClapNeed/UrbanClapNeed.tsx

@@ -0,0 +1,129 @@
+import React, { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import global from 'theme/global/global.module.scss';
+import styles from './UrbanClapNeed.module.scss';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Navigation, Pagination } from 'swiper';
+import CallToAction from '../callToAction/CallToAction';
+import { Header, KeyNote } from '@/interfaces/shared/shared';
+import rehypeRaw from 'rehype-raw';
+
+interface whyYouNeedInterface {
+    header: Header;
+    notes: KeyNote[];
+}
+interface ComponentStructure {
+    props: whyYouNeedInterface;
+    id: string;
+}
+const UrbanClapNeed = ({props, id}: ComponentStructure) => {
+    const [isActiveIndex, setIsActiveIndex] = useState(false);
+    const [isMobileDevice, setIsMobileDevice] = useState(false);
+
+    const handleClick = () => {
+        if (isMobileDevice) {
+            setIsActiveIndex(!isActiveIndex);
+        }
+    };
+    useEffect(() => {
+        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+        setIsMobileDevice(isMobile);
+    }, []);
+
+    return (
+        <>
+            <section id={id} className={`${styles.advantages_sec} ${global.section_padding}  ${global.padding_block2} `}>
+                <div className={`${styles.custom_container} ${global.container}`}>
+                    <div className={`${styles.inner_auto_services} `}>
+                        <div className={styles.content_box}>
+                            <div className={styles.content}>
+                                {props?.header?.title && (
+                                <div
+                                    className={`${global.heading1_1} ${styles.title}`}
+                                    style={
+                                        {
+                                            '--heading_color': props?.header?.titleColor,
+                                        } as React.CSSProperties as any
+                                    }
+                                >
+                                    <ReactMarkdown
+                                        rehypePlugins={[rehypeRaw as any]}
+                                        skipHtml={false}
+                                    >
+                                        {props?.header?.title || ''}
+                                    </ReactMarkdown>
+                                </div>
+                                )}
+                            </div>
+                        </div>
+                        <div className={styles.services_box_wrap}>
+                            <div className={styles.services_box_content}>
+                                <div className={styles.mainImg}>
+                                    {props?.header?.backgroundImage?.data?.attributes?.url && (
+                                        <img
+                                        src={props?.header?.backgroundImage?.data?.attributes?.url}
+                                        width={1160}
+                                            height={720}
+                                        />
+                                    )}
+                                </div>
+                                <div className={styles.details}>
+                                    <Swiper
+                                        slidesPerView={1}
+                                        spaceBetween={28}
+                                        autoplay={{
+                                            delay: 2500,
+                                            disableOnInteraction: false,
+                                            pauseOnMouseEnter: true,
+                                        }}
+                                        observer={true}
+                                        observeParents={true}
+                                        navigation={false}
+                                        modules={[Autoplay, Navigation, Pagination]}
+                                        autoHeight={true}
+                                        pagination={true}
+                                        loop
+                                        className={styles.swiper_box}
+                                        onSlideChange={() => isMobileDevice && setIsActiveIndex(false)}
+                                    >
+                                        {props?.notes?.map((item: any, i: number) => (
+                                            <SwiperSlide key={i}>
+                                                <div
+                                                    className={`${styles.wrapper_box} ${
+                                                        isMobileDevice
+                                                            ? isActiveIndex
+                                                                ? styles.active
+                                                                : styles.non_active
+                                                            : ''
+                                                    }`}
+                                                    onClick={handleClick}
+                                                >
+                                                    <div className={styles.box}>
+                                                        <div className={styles.data_slide}>
+                                                            <div className={`${global.head44} ${styles.para_2}`}>
+                                                                <ReactMarkdown
+                                                                    rehypePlugins={[rehypeRaw as any]}
+                                                                    skipHtml={false}
+                                                                >
+                                                                    {item?.noteBody || ''}
+                                                                </ReactMarkdown>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </SwiperSlide>
+                                        ))}
+                                    </Swiper>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default UrbanClapNeed;

components/MyAppLanding/component/UrbanService/UrbanService.module.scss

@@ -0,0 +1,139 @@
+@use 'theme/sass' as *;
+
+.fintechInsurance_sec {
+    width: 100%;
+    position: relative;
+    background: hsl(var(--AppM_clr_bg_primary));
+
+    .custom_container {
+        width: 100%;
+        .inner_Block {
+            width: 100%;
+            .header_block {
+                width: 100%;
+                max-width: rem(1048);
+                margin: 0 auto;
+                text-align: center;
+                .content_chip {
+                    width: fit-content;
+                    line-height: rem(24);
+                    background: var(--clr_background_primary);
+                    padding-block: rem(6);
+                    padding-inline: rem(16);
+                    border-radius: rem(20);
+                    min-height: rem(34);
+                    @include displayFlex(row, center, center);
+                    color: hsl(var(--AppMobile_clr_text_chip));
+                    font-weight: var(--fw_medium);
+                    font-family: var(--fn_accent);
+                    margin: 0 auto 20px;
+                    & > * {
+                        color: hsl(var(--AppMobile_clr_text_chip));
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                    }
+                }
+                .title {
+                    color: var(--clr_vzit_offer_text2);
+                    font-weight: var(--fw_semiBold);
+                    & > * {
+                        color: var(--clr_vzit_offer_text2);
+                        font-weight: var(--fw_semiBold);
+                        strong {
+                            @include textGradient(var(--heading_color));
+                        }
+                    }
+                    strong {
+                        @include textGradient(var(--heading_color));
+                    }
+                }
+                .sub_title {
+                    margin-block-start: rem(20);
+                    color: var(--clr-para);
+                    font-weight: var(--fw_regular);
+                    & > * {
+                        color: var(--clr-para);
+                        font-weight: var(--fw_regular);
+                    }
+                }
+            }
+
+            .accordion_grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fit, minmax(rem(300), 1fr));
+                gap: rem(20);
+                margin-block-start: rem(42);
+                .accordion {
+                    border: 1px solid #e4e4e4;
+                    width: 100%;
+                    border-radius: rem(10);
+                    overflow: hidden;
+                    padding: rem(24) rem(32);
+                    transition: var(--transition);
+                    .tab_header {
+                        @include displayFlex(row, center, space-between);
+                        gap: rem(16);
+                        flex-wrap: wrap;
+                        .tabIcon_number {
+                            position: relative;
+                            right: rem(-32);
+                            padding: rem(14);
+                            color: var(--clr_vzit_offer_text2);
+                            font-weight: var(--fw_medium);
+                            border-radius: rem(10) 0 0 rem(10);
+                            font-size: rem(24);
+                            color: hsl(var(--AppM_clr_deep_blue_chip_01));
+                            transition: var(--transition);
+                        }
+                    }
+                    .tabIcon {
+                        position: relative;
+                        isolation: isolate;
+                        .cycle {
+                            position: absolute;
+                            right: -6px;
+                            bottom: -6px;
+                            border-radius: 50%;
+                            width: rem(40);
+                            height: rem(40);
+                            background: var(--bg_color);
+                            z-index: -1;
+                        }
+                    }
+
+                    .accordion_content {
+                        width: 100%;
+                        margin-block-start: rem(20);
+                        .tabData {
+                            font-size: rem(20);
+                            font-weight: var(--fw_semiBold);
+                            font-family: var(--fn_accent);
+                            color: var(--AppM_clr_bg_black);
+                            & > * {
+                                font-weight: var(--fw_semiBold);
+                                font-family: var(--fn_accent);
+                                color: var(--AppM_clr_bg_black);
+                            }
+                        }
+                        .para {
+                            margin-block-start: rem(10);
+                            color: hsl(var(--AppM_clr_text_para_02));
+                            & > * {
+                                color: hsl(var(--AppM_clr_text_para_02));
+                            }
+                        }
+                    }
+
+                    &:hover {
+                        background: var(--clr_background_primary);
+                        .tab_header {
+                            .tabIcon_number {
+                                background-color: var(--bg_color);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/UrbanService/UrbanService.tsx

@@ -0,0 +1,163 @@
+import global from 'theme/global/global.module.scss';
+import styles from './UrbanService.module.scss';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import React from 'react';
+import Image from 'next/image';
+import ReactMarkdown from 'react-markdown';
+import { CustomServiceInterface } from '@/interfaces/finTech.interface';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { Header, KeyNote } from '@/interfaces/shared/shared';
+import rehypeRaw from 'rehype-raw';
+// interface FinTechInsurancePropsInterface {
+//     id?: string;
+//     data: CustomServiceInterface;
+//     onOpen: () => void;
+// }
+interface AdvertiseInterface {
+    header: Header;
+    notes: KeyNote[];
+}
+interface UrbanService {
+    extraClasses?: string;
+    props: AdvertiseInterface;
+    id: string;
+}
+const UrbanService = ({ extraClasses, props, id }: UrbanService) => {
+    const [expanded, setExpanded] = React.useState<string>('panel1');
+
+    const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+        setExpanded(isExpanded ? panel : expanded);
+    };
+    // Fixed the style handling to prevent hydration mismatch
+    const getHeadingStyle = (): React.CSSProperties | undefined => {
+        const titleColor = props?.header?.titleColor;
+        
+        // Return undefined if no titleColor is provided
+        if (!titleColor || typeof titleColor !== 'string') {
+            return undefined;
+        }
+
+        const trimmed = titleColor.replace(/[;]\s*$/, '').trim();
+        
+        // Return undefined if trimmed is empty
+        if (!trimmed) {
+            return undefined;
+        }
+
+        const normalized = trimmed.startsWith('--') 
+            ? `var(${trimmed.replace(/:$/, '')})` 
+            : trimmed;
+
+        return { ['--heading_color' as any]: normalized } as React.CSSProperties;
+    };
+
+    const style = getHeadingStyle();
+
+    function decodeHTMLEntities(text: string) {
+        return text
+            .replace(/&amp;/g, '&')
+            .replace(/&lt;/g, '<')
+            .replace(/&gt;/g, '>')
+            .replace(/&quot;/g, '"')
+            .replace(/&#039;/g, "'");
+    }
+
+    return (
+        <section
+            id={id}
+            className={`${styles.fintechInsurance_sec} ${global.section_padding}  ${global.padding_block2} ${
+                extraClasses && styles[extraClasses]
+            }`}
+        >
+            <div className={`${styles.custom_container} ${global.container}`}>
+                <div className={`${styles.inner_Block} `}>
+                    <div className={`${styles.header_block} `}>
+                        <div className={styles.content_chip}>{props?.header?.pageTitle || 'Services'}</div>
+                        {props?.header?.title && (
+                        <div
+                            className={`${styles.title} ${global.heading1_1} ${global.manrope}`}
+                            style={style}
+                                >
+                                    <ReactMarkdown
+                                        rehypePlugins={[rehypeRaw as any]}
+                                        skipHtml={false}
+                                >
+                                    {props?.header?.title || ''}
+                                </ReactMarkdown>
+                            </div>
+                        )}
+                        {props?.header?.content && (
+                            <div className={`${styles.sub_title} ${global.head44}`}>
+                                <ReactMarkdown
+                                    rehypePlugins={[rehypeRaw as any]}
+                                    skipHtml={false}
+                                >
+                                    {props?.header?.content || ''}
+                                </ReactMarkdown>
+                            </div>
+                        )}
+                    </div>
+                    <div className={styles.accordion_grid}>
+                        
+                        {props?.notes?.map((item: any, i: number) => {
+                            return <div key={i} className={styles.accordion}>
+                                <div className={`${global.head4_4} ${global.manrope} ${styles.tab_header}`}>
+                                    <span className={styles.tabIcon}>
+                                        {item?.noteImage?.data?.attributes?.url ? (
+                                            <img src={item?.noteImage?.data?.attributes?.url} alt="tab-icon" />
+                                        ) : (
+                                            <div
+                                                className={styles.icon}
+                                            >
+                                                <ReactMarkdown
+                                                    rehypePlugins={[rehypeRaw as any]}
+                                                    skipHtml={false}
+                                                >
+                                                    {item?.noteIcon || ''}
+                                                </ReactMarkdown>
+                                            </div>
+                                        )}
+                                        <div
+                                            className={`${styles.cycle}`}
+                                            style={
+                                                {
+                                                    '--bg_color': 'hsla(188, 79%, 46%, 0.096)',
+                                                } as React.CSSProperties as any
+                                            }
+                                        ></div>
+                                    </span>
+                                    <div
+                                        className={styles.tabIcon_number}
+                                        style={
+                                            {
+                                                '--bg_color': '#E8F8FA',
+                                            } as React.CSSProperties as any
+                                        }
+                                    >
+                                        0{i + 1}
+                                    </div>
+                                </div>
+                                <div className={styles.accordion_content}>
+                                    <span className={styles.tabData}>{item?.noteTitle || ''}</span>
+                                    <div className={`${global.body1} ${styles.para}`}>
+                                        <ReactMarkdown
+                                            rehypePlugins={[rehypeRaw as any]}
+                                            skipHtml={false}
+                                        >
+                                            {item?.noteBody || ''}
+                                        </ReactMarkdown>
+                                    </div>
+                                </div>
+                            </div>
+                        })}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default UrbanService;

components/MyAppLanding/component/UrbanService2/UrbanService2.tsx

@@ -0,0 +1,156 @@
+import global from 'theme/global/global.module.scss';
+import styles from './urbanService2.module.scss';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import React from 'react';
+import Image from 'next/image';
+import ReactMarkdown from 'react-markdown';
+import { CustomServiceInterface } from '@/interfaces/finTech.interface';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { Header, TabContent, Module } from '@/interfaces/shared/shared';
+import rehypeRaw from 'rehype-raw';
+// interface FinTechInsurancePropsInterface {
+//     id?: string;
+//     data: CustomServiceInterface;
+//     onOpen: () => void;
+// }
+interface UrbanServiceInterface {
+    header: Header;
+    module: Module[];
+    tabContent: TabContent[];
+    tabRequired: boolean;
+}
+interface UrbanService {
+    extraClasses?: string;
+    props: UrbanServiceInterface;
+    id: string;
+}
+const UrbanService = ({ extraClasses, props, id }: UrbanService) => {
+    const { header, module, tabContent, tabRequired } = props;
+    const [expanded, setExpanded] = React.useState<string>('panel1');
+
+    const raw = props?.header?.titleColor ?? '';
+    const trimmed = typeof raw === 'string' ? raw.replace(/[;]\s*$/, '').trim() : '';
+    const normalized =
+        trimmed.startsWith('--') ? `var(${trimmed.replace(/:$/, '')})` : trimmed;
+    const headingColor = normalized
+        ? ({ ['--heading_color' as any]: normalized } as React.CSSProperties)
+        : undefined;
+    const backgroundRaw = header?.background ?? '';
+    const backgroundTrimmed = typeof backgroundRaw === 'string' ? backgroundRaw.replace(/[;]\s*$/, '').trim() : '';
+    const backgroundNormalized =
+        backgroundTrimmed.startsWith('--') ? `var(${backgroundTrimmed.replace(/:$/, '')})` : backgroundTrimmed;
+        
+    const backgroundStyle = backgroundNormalized
+        ? ({ ['background' as any]: backgroundNormalized } as React.CSSProperties)
+        : undefined;
+
+    const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+        setExpanded(isExpanded ? panel : expanded);
+    };
+
+    return (
+        <section
+            id={id}
+            className={`${styles.fintechInsurance_sec} ${global.section_padding}  ${global.padding_block2} ${
+                extraClasses && styles[extraClasses]
+            }`}
+            style={backgroundStyle}
+        >
+            <div className={`${styles.custom_container} ${global.container}`}>
+                <div className={`${styles.inner_Block} `}>
+                    <div className={`${styles.header_block} `}>
+                        {header?.pageTitle && <div className={styles.content_chip}>{header?.pageTitle}</div>}
+                        {header?.title && (
+                            <div
+                                className={`${styles.title} ${global.heading1_1} ${global.manrope}`}
+                                style={headingColor}
+                            >
+                                <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                    {header?.title || ''}
+                                </ReactMarkdown>
+                            </div>
+                        )}
+                        {header?.content && (
+                            <div className={`${styles.sub_title} ${global.head44}`}>
+                                <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                    {header?.content || ''}
+                                </ReactMarkdown>
+                            </div>
+                        )}
+                    </div>
+                    <div className={`${styles.card_sec}`}>
+                        <div className={styles.accordion_grid}>
+                            {module?.map((item: Module, i: number) => (
+                                <Accordion
+                                    key={i}
+                                    expanded={expanded === `panel${i + 1}`}
+                                    onChange={handleChange(`panel${i + 1}`)}
+                                    className={styles.accordion}
+                                >
+                                    <AccordionSummary
+                                        expandIcon={<ExpandMoreIcon />}
+                                        aria-controls="panel1-content"
+                                        id="panel1-header"
+                                        className={`${global.head4_4} ${global.manrope}`}
+                                    >
+                                        <div className={styles.tabIcon}>
+                                            <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                                {item?.moduleNumber || ''}
+                                            </ReactMarkdown>
+                                        </div>
+                                        <span className={styles.tabData}>
+                                            <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                                {item?.moduleText || ''}
+                                            </ReactMarkdown>
+                                        </span>
+                                    </AccordionSummary>
+                                    <AccordionDetails>
+                                        {item?.moduleContent && (
+                                            <div className={`${global.body1}`}>
+                                                <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                                    {item?.moduleContent || ''}
+                                                </ReactMarkdown>
+                                            </div>
+                                        )}
+                                        <div className={styles.tabImg}>
+                                            {item?.moduleImage?.data?.attributes?.url && (
+                                                <Image
+                                                    src={item?.moduleImage?.data?.attributes?.url}
+                                                    width={586}
+                                                    height={751}
+                                                    alt={'tab-image'}
+                                                />
+                                            )}
+                                            <div className={styles.imgChips}>
+                                                {item?.tabRequired &&
+                                                    [item?.tab1, item?.tab2, item?.tab3, item?.tab4, item?.tab5]?.map((item: any, i: number) => {
+                                                        if(item){
+                                                        return (
+                                                        <div key={i} className={`${styles.content_chip} ${global.body2}`}>
+                                                            <ReactMarkdown  
+                                                                rehypePlugins={[rehypeRaw as any]}
+                                                                skipHtml={false}
+                                                            >
+                                                                        {item || ''}
+                                                                </ReactMarkdown>
+                                                            </div>
+                                                        )
+                                                    }
+                                                })}
+                                            </div>
+                                        </div>
+                                    </AccordionDetails>
+                                </Accordion>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default UrbanService;

components/MyAppLanding/component/UrbanService2/urbanService2.module.scss

@@ -0,0 +1,482 @@
+@use 'theme/sass' as *;
+
+.fintechInsurance_sec {
+    width: 100%;
+    position: relative;
+    background: var(--AppM_clr_bg_primary);
+
+    .custom_container {
+        width: 100%;
+        .inner_Block {
+            width: 100%;
+            .header_block {
+                width: 100%;
+                max-width: rem(1048);
+                margin: 0 auto;
+                text-align: center;
+                .content_chip {
+                    width: fit-content;
+                    background: var(--clr_background_primary);
+                    padding-inline: rem(16);
+                    padding-block: rem(6);
+                    border-radius: rem(20);
+                    min-height: rem(34);
+                    @include displayFlex(row, center, center);
+                    color: hsl(var(--AppMobile_clr_text_chip));
+                    font-weight: var(--fw_medium);
+                    font-family: var(--fn_accent);
+                    margin: 0 auto 20px;
+                    & > * {
+                        color: hsl(var(--AppMobile_clr_text_chip));
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                    }
+                }
+                .title {
+                    color: var(--clr_vzit_offer_text2);
+                    font-weight: var(--fw_semiBold);
+                    & > * {
+                        color: var(--clr_vzit_offer_text2);
+                        font-weight: var(--fw_semiBold);
+                        strong {
+                            @include textGradient(var(--heading_color));
+                        }
+                    }
+                    strong {
+                        @include textGradient(var(--heading_color));
+                    }
+                }
+                .sub_title {
+                    margin-block-start: rem(20);
+                    color: var(--clr-para);
+                    font-weight: var(--fw_regular);
+                    & > * {
+                        color: var(--clr-para);
+                        font-weight: var(--fw_regular);
+                    }
+                }
+            }
+            .card_sec {
+                margin-block-start: scaleValue(40px, 90px);
+                width: 100%;
+                display: grid;
+                grid-template-columns: 50fr 48fr;
+                gap: scaleValue(20px, 46px);
+                border: 1px solid #00000021;
+                background: var(--clr_background_primary);
+                padding: rem(20);
+                border-radius: rem(23);
+                position: relative;
+                direction: rtl;
+                @include max(1024px) {
+                    grid-template-columns: 1fr;
+                    gap: 0;
+                }
+                .accordion_grid {
+                    @include displayFlex(column, flex-start, flex-start);
+                    gap: rem(14);
+                    height: 100%;
+                    height: rem(650);
+                    overflow: auto;
+
+                    &::-webkit-scrollbar-track {
+                        border-radius: rem(2);
+                        background-color: #ffffff38;
+                    }
+
+                    &::-webkit-scrollbar {
+                        width: rem(2);
+                        border-radius: rem(2);
+                        background-color: var(--clr_background_primary);
+                    }
+
+                    &::-webkit-scrollbar-thumb {
+                        border-radius: rem(2);
+                        background-color: var(--bg_clr_light_shade_blue_03);
+                    }
+                    & :global(.MuiAccordion-root) {
+                        padding: scaleValue(15px, 20px) scaleValue(15px, 35px);
+                        width: 100%;
+                        border-radius: rem(20);
+                        border: 1.04px solid #ffffff85;
+                        box-shadow: none;
+                        position: inherit !important;
+                        &::before {
+                            display: none;
+                        }
+
+                        &:global(.Mui-expanded) {
+                            background: #ffffff24;
+                            box-shadow: none;
+                            margin: 0;
+                            border: 1.08px solid var(--InLand_border_05);
+                            @include displayFlex(column, flex-end, flex-start);
+                            & :global(.MuiButtonBase-root) {
+                                min-height: 48px !important;
+                            }
+                            :global(.MuiAccordionSummary-root) {
+                                color: var(--clr_new_power_dark_blue2);
+                                width: 100%;
+                                :global(.MuiAccordionSummary-content) {
+                                    color: var(--clr_new_power_dark_blue2);
+                                    text-align: left;
+                                    .tabIcon {
+                                        background: #ffffff30;
+                                    }
+                                }
+                            }
+                        }
+                        :global(.MuiAccordionSummary-root) {
+                            padding: 0;
+                            flex-direction: row-reverse;
+                            justify-content: space-between;
+                            width: 100%;
+                            :global(.MuiAccordionSummary-content) {
+                                font-weight: var(--fw_semiBold);
+                                color: var(--clr_new_power_dark_blue2);
+                                font-family: var(--fn_accent);
+                                margin: 0;
+                                @include displayFlex(row-reverse, center, flex-start);
+                                gap: rem(30);
+                                @include max(575px) {
+                                    gap: rem(15);
+                                }
+                                .tabIcon {
+                                    width: rem(40);
+                                    height: rem(40);
+                                    @include displayFlex(row, center, center);
+                                    img {
+                                        width: 100%;
+                                        height: 100%;
+                                        object-fit: contain;
+                                        filter: brightness(0) saturate(100%) invert(0%) sepia(8%) saturate(7500%)
+                                            hue-rotate(215deg) brightness(109%) contrast(95%);
+                                    }
+                                }
+                                .tabData {
+                                    flex: 1;
+                                    text-align: left;
+                                    font-size: scaleValue(18px, 22px);
+                                    word-break: break-word;
+                                    @include max(575px) {
+                                        font-size: scaleValue(15px, 20px);
+                                    }
+                                }
+                            }
+                            :global(.MuiAccordionSummary-expandIconWrapper) {
+                                display: none;
+                                svg {
+                                    fill: var(--clr_vzit_offer_text2);
+                                }
+                            }
+                        }
+                        :global(.MuiCollapse-root) {
+                            width: 100%;
+                            text-align: left;
+                            :global(.MuiCollapse-wrapper) {
+                                padding-inline-end: rem(0);
+                                @include max(1023px) {
+                                    padding-inline-end: 0;
+                                    :global(.MuiAccordionDetails-root) {
+                                        .tabImg {
+                                            margin-block-start: rem(30);
+                                        }
+                                    }
+                                }
+                                :global(.MuiCollapse-wrapperInner) {
+                                    padding-block-start: rem(0);
+
+                                    :global(.MuiAccordionDetails-root) {
+                                        padding: 0px 0px !important;
+                                        direction: ltr;
+                                        & > * {
+                                            color: var(--clr_new_power_dark_blue2);
+                                            line-height: 1.5;
+                                            position: relative;
+
+                                            & > * {
+                                                color: var(--clr_new_power_dark_blue2);
+                                                line-height: 1.5;
+                                                font-weight: var(--fw_regular);
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                    @include max(1024px) {
+                        height: auto;
+                    }
+                }
+                .tabImg {
+                    width: 100%;
+                    max-width: rem(550);
+                    height: rem(650);
+                    display: block;
+                    position: absolute !important;
+                    left: rem(20);
+                    top: rem(20);
+                    background: transparent !important;
+                    padding: 0 !important;
+                    overflow: hidden;
+                    border-radius: rem(20);
+                    @include max(1279px) {
+                        max-width: rem(450);
+                    }
+                    @include max(1024px) {
+                        width: 100%;
+                        max-width: 100%;
+                        position: relative !important;
+                        overflow: hidden;
+                        height: rem(300);
+                        top: 0;
+                        left: 0;
+                        margin: rem(15) auto 0;
+                    }
+                    img {
+                        width: 100%;
+                        height: 100%;
+                        object-fit: cover;
+                    }
+                }
+            }
+        }
+    }
+    &.urbanClap {
+        .custom_container {
+            width: 100%;
+            .inner_Block {
+                width: 100%;
+                .card_sec {
+                    margin-block-start: scaleValue(40px, 90px);
+                    width: 100%;
+                    display: grid;
+                    grid-template-columns: 50fr 48fr;
+                    gap: scaleValue(20px, 46px);
+                    border: 1px solid #00000021;
+                    padding: rem(16);
+                    border-radius: rem(23);
+                    position: relative;
+                    direction: rtl;
+                    background: var(--clr_background_primary);
+                    @include max(1024px) {
+                        grid-template-columns: 1fr;
+                        gap: 0;
+                    }
+                    .accordion_grid {
+                        @include displayFlex(column, flex-start, flex-start);
+                        gap: rem(14);
+                        height: 100%;
+                        height: rem(650);
+                        overflow: auto;
+
+                        &::-webkit-scrollbar-track {
+                            border-radius: rem(2);
+                            background-color: #ffffff38;
+                        }
+
+                        &::-webkit-scrollbar {
+                            width: rem(2);
+                            border-radius: rem(2);
+                            background-color: var(--clr_background_primary);
+                        }
+
+                        &::-webkit-scrollbar-thumb {
+                            border-radius: rem(2);
+                            background-color: var(--bg_clr_light_shade_blue_03);
+                        }
+                        & :global(.MuiAccordion-root) {
+                            padding: scaleValue(15px, 20px) scaleValue(15px, 35px);
+                            width: 100%;
+                            border-radius: rem(20);
+                            border: 1.04px solid #ffffff85;
+                            box-shadow: none;
+                            position: inherit !important;
+                            &::before {
+                                display: none;
+                            }
+
+                            &:global(.Mui-expanded) {
+                                background: #ffffff24;
+                                box-shadow: none;
+                                margin: 0;
+                                border: 1.08px solid var(--InLand_border_05);
+                                @include displayFlex(column, flex-end, flex-start);
+                                :global(.MuiAccordionSummary-root) {
+                                    color: var(--clr_new_power_dark_blue2);
+                                    width: 100%;
+                                    :global(.MuiAccordionSummary-content) {
+                                        color: var(--clr_new_power_dark_blue2);
+                                        text-align: left;
+                                        .tabIcon {
+                                            background: #ffffff30;
+                                        }
+                                    }
+                                    :global(.MuiAccordionSummary-expandIconWrapper) {
+                                        // svg {
+                                        //     fill: var(--clr_text_secondary);
+                                        // }
+                                    }
+                                }
+                            }
+                            :global(.MuiAccordionSummary-root) {
+                                padding: 0;
+                                flex-direction: row-reverse;
+                                justify-content: space-between;
+                                width: 100%;
+                                :global(.MuiAccordionSummary-content) {
+                                    font-weight: var(--fw_semiBold);
+                                    color: var(--clr_new_power_dark_blue2);
+                                    font-family: var(--fn_accent);
+                                    margin: 0;
+                                    @include displayFlex(row-reverse, center, flex-start);
+                                    gap: rem(30);
+                                    @include max(575px) {
+                                        gap: rem(15);
+                                    }
+                                    .tabIcon {
+                                        width: rem(40);
+                                        height: rem(40);
+                                        @include displayFlex(row, center, center);
+                                        img {
+                                            width: 100%;
+                                            height: 100%;
+                                            object-fit: contain;
+                                        }
+                                    }
+                                    .tabData {
+                                        flex: 1;
+                                        text-align: left;
+                                        font-size: scaleValue(18px, 22px);
+                                        word-break: break-word;
+                                        @include max(575px) {
+                                            font-size: scaleValue(15px, 20px);
+                                        }
+                                    }
+                                }
+                                :global(.MuiAccordionSummary-expandIconWrapper) {
+                                    svg {
+                                        fill: var(--clr_vzit_offer_text2);
+                                    }
+                                }
+                            }
+                            :global(.MuiCollapse-root) {
+                                width: 100%;
+                                text-align: left;
+                                :global(.MuiCollapse-wrapper) {
+                                    padding-inline-end: rem(72);
+                                    @include max(1023px) {
+                                        padding-inline-end: 0;
+                                        :global(.MuiAccordionDetails-root) {
+                                            .tabImg {
+                                                margin-block-start: rem(30);
+                                            }
+                                        }
+                                    }
+                                    :global(.MuiCollapse-wrapperInner) {
+                                        padding-block-start: rem(20);
+
+                                        :global(.MuiAccordionDetails-root) {
+                                            padding: 0px 0 10px !important;
+                                            direction: ltr;
+                                            & > * {
+                                                color: var(--clr_new_power_dark_blue2);
+                                                line-height: 1.5;
+                                                position: relative;
+
+                                                & > * {
+                                                    color: var(--clr_new_power_dark_blue2);
+                                                    line-height: 1.5;
+                                                    font-weight: var(--fw_regular);
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+
+                        @include max(1024px) {
+                            height: auto;
+                        }
+                    }
+                    .tabImg {
+                        width: 100%;
+                        max-width: rem(562);
+                        height: 100%;
+                        max-height: rem(649);
+                        display: block;
+                        position: absolute !important;
+                        left: rem(16);
+                        top: rem(16);
+                        background: transparent !important;
+                        padding: 0 !important;
+                        overflow: hidden;
+                        border-radius: rem(18);
+                        @include max(1279px) {
+                            max-width: rem(420);
+                        }
+                        @include max(1024px) {
+                            width: 100%;
+                            max-width: 100%;
+                            position: relative !important;
+                            overflow: hidden;
+                            height: rem(500);
+                            top: 0;
+                            left: 0;
+                            margin: rem(15) auto 0;
+                        }
+                        @include max(1024px) {
+                            height: rem(400);
+                        }
+                        img {
+                            width: 100%;
+                            height: 100%;
+                            object-fit: cover;
+                        }
+                        &::after {
+                            content: '';
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            width: 100%;
+                            height: 100%;
+                            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.imgChips {
+    position: absolute;
+    z-index: 11;
+    padding: rem(20);
+    bottom: 0;
+    left: 0;
+    @include displayFlex(row, center, flex-start);
+    gap: rem(12);
+    flex-wrap: wrap;
+    width: 100%;
+    .content_chip {
+        width: fit-content;
+        background: var(--clr_background_primary);
+        padding-block: rem(8);
+        padding-inline: rem(16);
+        border-radius: rem(20);
+        min-height: rem(34);
+        @include displayFlex(row, center, center);
+        color: var(--clr_vzit_offer_text2);
+        font-weight: var(--fw_bold);
+        font-family: var(--fn_accent);
+        & > * {
+            color: var(--clr_vzit_offer_text2);
+            font-weight: var(--fw_bold);
+            font-family: var(--fn_accent);
+        }
+    }
+}

components/MyAppLanding/component/WalmartScript/WalmartScript.tsx

@@ -0,0 +1,161 @@
+import React, { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import global from 'theme/global/global.module.scss';
+import styles from './walmartScript.module.scss';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { Header, KeyNote } from '@/interfaces/shared/shared';
+import rehypeRaw from 'rehype-raw';
+
+interface WalmartScriptInterface {
+    header: Header;
+    note: KeyNote[];
+}
+interface RequiredProps {
+    props: WalmartScriptInterface;
+    id: string;
+}
+const WalmartScript = ({ props, id }: RequiredProps) => {
+    // Defensive: support both { header, note } and { props: { header, note } }
+    const { header, note } = props;
+    const [isActiveIndex, setIsActiveIndex] = useState(false);
+    const [isMobileDevice, setIsMobileDevice] = useState(false);
+
+    const handleClick = () => {
+        if (isMobileDevice) {
+            setIsActiveIndex(!isActiveIndex);
+        }
+    };
+    useEffect(() => {
+        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+        setIsMobileDevice(isMobile);
+    }, []);
+    const getHeadingStyle = (): React.CSSProperties | undefined => {
+        const titleColor = header?.titleColor;
+        
+        // Return undefined if no titleColor is provided
+        if (!titleColor || typeof titleColor !== 'string') {
+            return undefined;
+        }
+
+        const trimmed = titleColor.replace(/[;]\s*$/, '').trim();
+        
+        // Return undefined if trimmed is empty
+        if (!trimmed) {
+            return undefined;
+        }
+
+        const normalized = trimmed.startsWith('--') 
+            ? `var(${trimmed.replace(/:$/, '')})` 
+            : trimmed;
+
+        return { ['--heading_color' as any]: normalized } as React.CSSProperties;
+    };
+
+    // Fixed background style to remove semicolons
+    const getBackgroundStyle = (): React.CSSProperties => {
+        const background = header?.background;
+        
+        if (!background || typeof background !== 'string') {
+            return {};
+        }
+
+        // Remove trailing semicolons and whitespace
+        const cleanBackground = background.replace(/[;]\s*$/, '').trim();
+        
+        return cleanBackground ? { background: cleanBackground } : {};
+    };
+    const headingStyle = getHeadingStyle();
+    const backgroundStyle = getBackgroundStyle();
+    return (
+        <>
+            <section
+                id={id}
+                className={`${styles.advantages_sec} ${global.section_padding}  ${global.padding_block2} `}
+                style={backgroundStyle}
+            >
+                <div className={`${styles.custom_container} ${global.container}`}>
+                    <div className={`${styles.inner_auto_services} `}>
+                        <div className={styles.content_box}>
+                            <div className={styles.content}>
+                                {header?.title && (
+                                    <div
+                                        className={`${global.heading1_1} ${styles.title}`}
+                                        style={headingStyle}
+                                    >
+                                        <ReactMarkdown
+                                            rehypePlugins={[rehypeRaw as any]}
+                                            skipHtml={false}
+                                        >
+                                            {header?.title || ''}
+                                        </ReactMarkdown>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                        <div className={styles.services_box_wrap}>
+                            {Array.isArray(note) && note.length > 0 &&
+                                note.map((item: KeyNote, i: number) => {
+                                    const getNoteColorStyle = (): React.CSSProperties => {
+                                        const noteColor = item?.noteColor;
+                                        if (!noteColor || typeof noteColor !== 'string') {
+                                            return {};
+                                        }
+                                        return { '--bg_color': noteColor } as React.CSSProperties;
+                                    };
+                                    const noteColorStyle = getNoteColorStyle();
+                                    return <div
+                                        className={styles.content}
+                                        key={item?.id || i}
+                                        style={noteColorStyle}
+                                    >
+                                        <div
+                                            className={` ${global.heading5} ${styles.para}`}
+                                        >
+                                            {item?.noteBody && (
+                                                <ReactMarkdown
+                                                    rehypePlugins={[rehypeRaw as any]}
+                                                    skipHtml={false}
+                                                >
+                                                    {item?.noteBody || ''}
+                                                </ReactMarkdown>
+                                            )}
+                                        </div>
+                                        <div
+                                            className={` ${global.heading5} ${styles.para}`}
+                                        >
+                                            <ReactMarkdown
+                                                rehypePlugins={[rehypeRaw as any]}
+                                                skipHtml={false}
+                                            >
+                                                {item?.notePoints || ''}
+                                            </ReactMarkdown>
+                                        </div>
+                                    </div>
+})}
+                            <div className={styles.mainImg}>
+                                {header?.backgroundImage?.data?.attributes?.url ? (
+                                    <img
+                                        src={header.backgroundImage.data.attributes.url}
+                                        width={header.backgroundImage.data.attributes.width || 1225}
+                                        height={header.backgroundImage.data.attributes.height || 955}
+                                        alt={header.backgroundImage.data.attributes.title || 'script_img'}
+                                    />
+                                ) : (
+                                    <img
+                                        src={UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_OVERVIEW}
+                                        width={1225}
+                                        height={955}
+                                        alt={'script_img'}
+                                    />
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default WalmartScript;

components/MyAppLanding/component/WalmartScript/walmartScript.module.scss

@@ -0,0 +1,135 @@
+@use 'theme/sass' as *;
+
+.advantages_sec {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    background-color: hsl(var(--AppM_clr_bg_primary));
+
+    .custom_container {
+        .inner_auto_services {
+            position: relative;
+
+            .content_box {
+                width: 100%;
+                @include displayFlex(column, center, center);
+
+                .content {
+                    text-align: center;
+                    width: 100%;
+                    .high_light {
+                        background: linear-gradient(95.01deg, #017ed0 1.54%, rgba(148, 221, 255, 0.7) 97.01%);
+                        border-radius: 10px;
+                        padding: 1px;
+                        width: fit-content;
+                        margin: auto;
+
+                        .text_high_light {
+                            font-weight: 600;
+                            font-size: 18px;
+                            border-radius: 10px;
+                            background: var(--clr_background_secondary48);
+                            font-weight: 600;
+                            font-size: 18px;
+                            border-radius: 10px;
+                        }
+                    }
+                    .title {
+                        color: var(--clr_vzit_offer_text2);
+                        max-width: rem(797);
+                        margin-inline: auto;
+
+                        & > * {
+                            font-weight: var(--fw_semiBold);
+                            font-family: var(--fn_accent);
+                            color: var(--clr_vzit_offer_text2);
+                        }
+                        strong {
+                            @include textGradient(var(--heading_color));
+                        }
+                    }
+                    .text {
+                        color: hsl(var(--AppM_clr_text_para));
+                        font-weight: var(--fw_regular);
+                        font-family: var(--font_primary);
+                        max-width: 756px;
+                        width: 100%;
+                        margin: 30px auto;
+                        & > * {
+                            color: hsl(var(--AppM_clr_text_para));
+                            font-weight: var(--fw_regular);
+                            font-family: var(--font_primary);
+                        }
+                    }
+                }
+            }
+            .services_box_wrap {
+                margin-block-start: scaleValue(30px, 60px);
+                background: linear-gradient(180deg, #ffffff 0%, #daeaff 100%);
+                border-radius: scaleValue(20px, 30px);
+                border: 1px solid #00000021;
+                width: 100%;
+                position: relative;
+                overflow: hidden;
+
+                .content {
+                    width: 100%;
+                    padding: scaleValue(10px, 60px) scaleValue(10px, 80px) !important;
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    text-align: center;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    @include max(415px) {
+                        padding: rem(30) rem(20) !important;
+                    }
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        width: 100%;
+                        height: 100%;
+                        left: 0;
+                        top: 0;
+                        background: linear-gradient(174.89deg, #3992b5ed 0, #429ebd 29.44%, #48a4c30a 52.09%);
+                        z-index: -1;
+                        @include max(1023px) {
+                            background: linear-gradient(
+                                174.89deg,
+                                #3992b5 36.1% 32.1%,
+                                #429ebd61 57.44%,
+                                #48a4c34d 72.09%
+                            );
+                        }
+                    }
+
+                    .para {
+                        font-weight: var(--fw_semiBold);
+                        font-family: var(--fn_accent);
+                        color: var(--clr_text_secondary);
+                        & > * {
+                            font-weight: var(--fw_semiBold);
+                            font-family: var(--fn_accent);
+                            color: var(--clr_text_secondary);
+                        }
+                        &:last-child {
+                            margin-block-start: rem(25);
+                        }
+                    }
+                }
+                .mainImg {
+                    width: 100%;
+                    max-width: rem(1500);
+                    height: rem(955);
+                    padding-block-start: rem(215);
+                    img {
+                        width: 100%;
+                        height: 100%;
+                        object-fit: cover;
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/WalmartStreamline/WalmartStreamline.module.scss

@@ -0,0 +1,166 @@
+@use 'theme/sass' as *;
+
+.custom_sec {
+    width: 100%;
+    position: relative;
+    background-color: var(--clr_background_primary);
+    z-index: 1;
+    .custom_container {
+        position: relative;
+        z-index: 3;
+        .inner_box {
+            width: 100%;
+            .head_title {
+                text-align: center;
+                width: 100%;
+
+                max-width: 62.5rem;
+                margin-inline: auto;
+                .title {
+                    color: var(--clr_vzit_offer_text2);
+                    strong {
+                        @include textGradient(var(--heading_color));
+                    }
+                    & > * {
+                        color: var(--clr_vzit_offer_text2);
+
+                        strong {
+                            @include textGradient(var(--heading_color));
+                        }
+                    }
+                }
+                .sub_title {
+                    color: var(--clr-para);
+                    margin-block-start: rem(20);
+                    & > * {
+                        color: var(--clr-para);
+                    }
+                }
+            }
+            .streamline_overview_content {
+                width: 100%;
+                // background-color: var(--clr_background_primary);
+                margin-block-start: scaleValue(20px, 50px);
+                & > * {
+                    width: 100%;
+                    border: 1px solid #441c3630;
+                    border-radius: rem(28);
+                    padding: rem(17);
+                    & :global(.MuiBox-root) {
+                        border: none;
+                        padding: 0;
+                        & :global(.MuiTabs-root) {
+                            background: hsl(var(--AppM_clr_bg_light_02));
+                            border-radius: rem(25);
+                            border: 1px solid hsl(var(--AppM_border_08));
+                            & :global(.MuiTabs-scroller) {
+                                overflow: auto !important;
+                                & :global(.MuiTabs-flexContainer) {
+                                    justify-content: space-between;
+                                    margin-block: rem(8);
+                                    padding: rem(16) rem(20);
+
+                                    :global(.MuiButtonBase-root) {
+                                        font-size: scaleValue(16px, 18px);
+                                        font-weight: var(--fw_bold);
+                                        color: var(--AppMobile_clr_text_02);
+                                        font-family: var(--fn_accent);
+                                        width: 100%;
+                                        max-width: rem(250);
+                                        text-transform: capitalize;
+                                        padding: rem(16) rem(25);
+                                        &:global(.Mui-selected) {
+                                            background: var(--clr_background_primary);
+                                            box-shadow: 0px 4px 40px 0px #0000001a;
+                                            border-radius: rem(18);
+                                            padding: rem(16) rem(25);
+                                        }
+                                        @include max(767px) {
+                                            max-width: fit-content;
+                                            min-width: rem(150);
+                                        }
+                                    }
+                                }
+                                & :global(.MuiTabs-indicator) {
+                                    display: none;
+                                }
+                            }
+                        }
+                    }
+                    .devices_overview_content {
+                        width: 100%;
+                        background-color: var(--clr_background_primary);
+                        margin-block-start: scaleValue(20px, 50px);
+                        border-radius: 25px;
+                        border: 1px solid var(--clr_background_secondary25);
+                        overflow: hidden;
+                        @include displayFlex(row, stretch, flex-start);
+                        @include max(1023px) {
+                            flex-direction: column;
+                            padding: 0;
+                        }
+                        .devices_overview_img {
+                            display: flex;
+                            width: 100%;
+                            max-width: rem(538);
+                            min-height: rem(500);
+                            @include max(1023px) {
+                                max-width: 100%;
+                                height: scaleValue(400px, 600px);
+                            }
+                            img {
+                                width: 100%;
+                                height: 100%;
+                                object-fit: cover;
+                            }
+                            @include max(767px) {
+                                min-height: 0;
+                                aspect-ratio: 1/1;
+                            }
+                        }
+                        .devices_overview_data {
+                            flex: 1;
+                            padding: scaleValue(20px, 45px);
+                            @include displayFlex(column, start, flex-start);
+                            gap: rem(22);
+
+                            @include max(1023px) {
+                                margin-inline-end: 0;
+                            }
+                            & .itemList {
+                                @include displayFlex(row, start, flex-start);
+                                gap: rem(18);
+                                .correctIcon {
+                                    width: rem(21);
+                                    height: rem(21);
+                                    margin-block-start: rem(3);
+                                }
+                                .title_text {
+                                    font-weight: var(--fw_bold);
+                                    font-family: var(--fn_accent);
+                                    color: var(--clr_text_primary);
+
+                                    & > * {
+                                        color: var(--clr_text_primary);
+                                    }
+                                }
+                                .sub_ul {
+                                    margin-block-start: rem(8);
+                                    font-family: var(--fn_accent);
+                                    color: var(--clr_vzit_offer_text);
+                                    font-weight: var(--fw_medium);
+
+                                    & > * {
+                                        color: var(--clr_vzit_offer_text);
+                                        line-height: 1.6;
+                                        font-weight: var(--fw_medium);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/WalmartStreamline/WalmartStreamline.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import global from 'theme/global/global.module.scss';
+import styles from './WalmartStreamline.module.scss';
+import { Box, Tab, Tabs } from '@mui/material';
+import { DevelopmentProcessInterface } from '@/interfaces/eCommerceDevelopment.interface';
+import ReactMarkdown from 'react-markdown';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { CORRECT_ICON } from '@/constants/svgConstant';
+import HealthEfficiency from './healthEfficiency/HealthEfficiency';
+import rehypeRaw from 'rehype-raw';
+
+interface TabPanelProps {
+    children?: React.ReactNode;
+    index: number;
+    value: number;
+}
+function CustomTabPanel(props: TabPanelProps) {
+    const { children, value, index, ...other } = props;
+
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`simple-tabpanel-${index}`}
+            aria-labelledby={`simple-tab-${index}`}
+            {...other}
+        >
+            {value === index && (
+                <Box className={styles.panel_box} sx={{ p: 3 }}>
+                    {children}
+                </Box>
+            )}
+        </div>
+    );
+}
+
+const WalmartStreamline = ({props, id}: any) => {
+    const {header, tab1, tab, tab3, tab4} = props;
+    const getHeadingStyle = (): React.CSSProperties | undefined => {
+        const titleColor = header?.titleColor;
+        
+        // Return undefined if no titleColor is provided
+        if (!titleColor || typeof titleColor !== 'string') {
+            return undefined;
+        }
+
+        const trimmed = titleColor.replace(/[;]\s*$/, '').trim();
+        
+        // Return undefined if trimmed is empty
+        if (!trimmed) {
+            return undefined;
+        }
+
+        const normalized = trimmed.startsWith('--') 
+            ? `var(${trimmed.replace(/:$/, '')})` 
+            : trimmed;
+
+        return { ['--heading_color' as any]: normalized } as React.CSSProperties;
+    };
+
+    // Fixed background style to remove semicolons
+    const getBackgroundStyle = (): React.CSSProperties => {
+        const background = header?.background;
+        
+        if (!background || typeof background !== 'string') {
+            return {};
+        }
+
+        // Remove trailing semicolons and whitespace
+        const cleanBackground = background.replace(/[;]\s*$/, '').trim();
+        
+        return cleanBackground ? { background: cleanBackground } : {};
+    };
+    const headingStyle = getHeadingStyle();
+    const backgroundStyle = getBackgroundStyle();
+
+    const [value, setValue] = React.useState(0);
+    let allTab = [];
+    if(tab1 && typeof tab1 === 'object'){
+        allTab.push(tab1);
+    }
+    if(tab && typeof tab === 'object'){
+        allTab.push(tab);
+    }
+    if(tab3 && typeof tab3 === 'object'){
+        allTab.push(tab3);
+    }
+    if(tab4 && typeof tab4 === 'object'){
+        allTab.push(tab4);
+    }
+    const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+        setValue(newValue);
+    };
+    return (
+        
+        <section id={id} className={`${styles.custom_sec} ${global.section_padding} ${global.padding_block}`}
+            style={backgroundStyle}
+        >
+            <div className={`${styles.custom_container} ${global.container}`}>
+                <div className={`${styles.inner_box}`}>
+                    <div className={styles.head_title}>
+                        <div
+                            className={`${styles.title} ${global.manrope} ${global.heading1_1}`}
+                            style={headingStyle}
+                        >
+                            <ReactMarkdown
+                                rehypePlugins={[rehypeRaw as any]}
+                                skipHtml={false}
+                            >
+                                {header?.title || ''}
+                            </ReactMarkdown>
+                        </div>
+                        <div className={`${styles.sub_title} ${global.head44}`}>
+                            <ReactMarkdown
+                                rehypePlugins={[rehypeRaw as any]}
+                                skipHtml={false}
+                            >
+                                {header?.content || ''}
+                            </ReactMarkdown>
+                        </div>
+                    </div>
+                    <div className={`${styles.streamline_overview_content}`}>
+                        <div className={styles.tech_wrapper}>
+                            <Box className={`${styles.next_tab} `} sx={{ width: '100%' }}>
+                                <Box
+                                    className={`${styles.next_tabitem}`}
+                                    sx={{ borderBottom: 1, borderColor: 'divider' }}
+                                >
+                                    <Tabs value={value} onChange={handleChange} aria-label="wrapped label tabs example">
+                                        {allTab?.map((item, i) => (
+                                            <Tab key={i} label={item?.name} wrapped />
+                                        ))}
+                                    </Tabs>
+                                </Box>
+                                {allTab?.map((item, i) => {
+                                    
+                                    return <CustomTabPanel key={i} value={value} index={i}>
+                                        <HealthEfficiency
+                                            data={item.verticalComponent}
+                                            onOpen={function (): void {
+                                                throw new Error('Function not implemented.');
+                                            }}
+                                        />
+                                    </CustomTabPanel>
+                                })}
+                            </Box>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default WalmartStreamline;

components/MyAppLanding/component/WalmartStreamline/healthEfficiency/HealthEfficiency.module.scss

@@ -0,0 +1,303 @@
+@use 'theme/sass' as *;
+
+.saasServices_sec {
+    width: 100%;
+    position: relative;
+    background-color: var(--clr_background_primary);
+    z-index: 1;
+    .custom_container {
+        width: 100%;
+        .inner_box {
+            width: 100%;
+            .headerBlock {
+                width: 100%;
+                display: grid;
+                grid-template-columns: 52fr 48fr;
+                gap: 80px;
+                @include max(991px) {
+                    grid-template-columns: 1fr;
+                    text-align: center;
+                    gap: 10px;
+                }
+                .title {
+                    color: var(--clr_text_secondary);
+
+                    & > * {
+                        color: var(--clr_text_secondary);
+
+                        strong {
+                            background: var(--clr_text_green_blue_02);
+                            background-clip: text;
+                            -webkit-background-clip: text;
+                            -webkit-text-fill-color: transparent;
+                            & > * {
+                                background: var(--clr_text_green_blue_02);
+                                background-clip: text;
+                                -webkit-background-clip: text;
+                                -webkit-text-fill-color: transparent;
+                            }
+                        }
+                    }
+                }
+                .para {
+                    font-weight: var(--fw_regular);
+                    font-family: var(--font_primary);
+                    color: var(--clr_text_secondary);
+
+                    & > * {
+                        color: var(--clr_text_secondary);
+                        font-weight: var(--fw_regular);
+                        font-family: var(--font_primary);
+                        max-width: rem(1000);
+                    }
+                }
+            }
+            .tabBlock {
+                width: 100%;
+                margin-block-start: rem(29);
+                display: grid;
+                grid-template-columns: 30fr 70fr;
+                gap: scaleValue(18px, 20px);
+                @include max(991px) {
+                    @include displayFlex(column, flex-start, flex-start);
+                }
+                & > * {
+                    width: 100%;
+                }
+                & :global(.MuiBox-root) {
+                    width: 100%;
+                    border: none;
+                    padding: 0;
+                    height: 100%;
+                    & :global(.MuiTabs-root) {
+                        height: 100%;
+                        background: transparent;
+                        border-radius: 0;
+                        border: none;
+                        & :global(.MuiTabs-scroller) {
+                            overflow: auto !important;
+                            &::-webkit-scrollbar-track {
+                                background-color: transparent;
+                            }
+
+                            &::-webkit-scrollbar-thumb {
+                                background-color: var(--clr_background_secondary8);
+                                border-radius: 10px;
+                            }
+
+                            & :global(.MuiTabs-flexContainer) {
+                                justify-content: flex-start;
+                                flex-direction: column;
+                                gap: rem(22);
+                                padding: rem(5);
+                                margin: 0;
+                                @include max(991px) {
+                                    flex-direction: row;
+                                }
+                                & :global(.MuiButtonBase-root) {
+                                    color: hsl(var(--AppM_clr_dark_secondary_01));
+                                    padding: rem(20);
+                                    border-radius: rem(16);
+                                    font-family: var(--fn_accent);
+                                    border: 1px solid #9a9a9a63;
+                                    font-weight: var(--fw_bold);
+                                    font-size: rem(22);
+                                    line-height: rem(30);
+                                    text-transform: capitalize;
+                                    width: 100%;
+                                    max-width: 100%;
+                                    text-align: left;
+                                    min-height: rem(72);
+                                    @include displayFlex(row, center, flex-start);
+                                    gap: rem(10);
+                                    // & > * {
+                                    //     color: var(--clr_text_secondary);
+                                    // }
+                                    @include max(991px) {
+                                        padding: rem(20);
+                                    }
+
+                                    & .tabTitle {
+                                        width: 100%;
+                                        max-width: rem(278);
+                                        position: relative;
+                                        z-index: 1;
+                                        @include displayFlex(row, center, flex-start);
+
+                                        .grad {
+                                            color: hsl(var(--AppM_clr_dark_secondary_01));
+                                            position: relative;
+                                            padding-inline-end: rem(15);
+                                            min-width: rem(50);
+                                        }
+                                    }
+                                    @include max(991px) {
+                                        max-width: rem(280);
+                                    }
+                                    @include max(767px) {
+                                        max-width: fit-content;
+                                        min-width: rem(150);
+                                    }
+
+                                    &:global(.Mui-selected) {
+                                        color: var(--clr_para_02);
+                                        align-items: center;
+                                        background: (var(--bg_color));
+
+                                        &:global(.MuiButtonBase-root) {
+                                            color: var(--clr_text_secondary);
+                                            font-size: rem(20);
+                                            position: relative;
+                                            z-index: 1;
+
+                                            & .tabTitle {
+                                                .grad {
+                                                    color: var(--clr_text_secondary);
+                                                    &::after {
+                                                        width: rem(40);
+                                                        background: var(--clr_background_primary);
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                    &:last-child {
+                                        margin-right: 0;
+                                    }
+                                }
+                            }
+                            & :global(.MuiTabs-indicator) {
+                                display: none;
+                            }
+                        }
+                    }
+                }
+                & .itemBox {
+                    background: var(--clr_background_primary);
+                    border-radius: rem(20);
+                    padding: rem(10);
+                    height: 100%;
+                    border: 1px solid hsl(var(--AppM_border_08));
+                    .detailGrid {
+                        background: var(--clr_background_primary);
+                        border-radius: rem(10);
+                        overflow: hidden;
+                        width: 100%;
+                        height: rem(182);
+                        img {
+                            width: 100%;
+                            height: 100%;
+                            object-fit: cover;
+                        }
+
+                        .leftItem {
+                            width: 100%;
+                            max-width: rem(580);
+                            @include max(991px) {
+                                max-width: 100%;
+                            }
+                            & .title {
+                                color: var(--clr_background_primary1_1);
+                                text-transform: capitalize;
+                                font-weight: var(--fw_medium);
+
+                                & > * {
+                                    color: var(--clr_background_primary1_1);
+                                    font-weight: var(--fw_medium);
+                                }
+                            }
+                        }
+                        .icon {
+                            width: rem(41);
+                            height: rem(41);
+                            img {
+                                width: 100%;
+                                height: 100%;
+                                object-fit: contain;
+                            }
+                        }
+                    }
+                    & .para {
+                        padding: scaleValue(15px, 25px) rem(15);
+                        .itemList {
+                            @include displayFlex(row, start, flex-start);
+                            gap: rem(18);
+                            margin-block-end: rem(20);
+                            &:last-child {
+                                margin-block-end: 0;
+                            }
+
+                            .correctIcon {
+                                width: rem(21);
+                                height: rem(21);
+                                margin-block-start: rem(3);
+                                svg {
+                                    filter: brightness(0) saturate(100%) invert(48%) sepia(39%) saturate(595%)
+                                        hue-rotate(150deg) brightness(94%) contrast(96%);
+                                }
+                            }
+                            .title_text {
+                                font-weight: var(--fw_bold);
+                                font-family: var(--fn_accent);
+                                color: var(--clr_text_primary);
+
+                                & > * {
+                                    color: var(--clr_text_primary);
+                                }
+                                ul {
+                                    li {
+                                        position: relative;
+                                        padding-inline-start: rem(30);
+                                        margin-block-start: rem(18);
+                                        line-height: 1.6;
+
+                                        &:first-child {
+                                            margin-block-start: 0;
+                                        }
+
+                                        & > * {
+                                            font-weight: var(--fw_bold);
+                                            font-family: var(--fn_accent);
+                                            color: var(--clr_text_primary);
+                                            span {
+                                                font-weight: var(--fw_medium);
+                                                color: var(--clr_vzit_offer_text);
+                                            }
+                                        }
+                                        &::before {
+                                            content: '';
+                                            position: absolute;
+                                            top: rem(5);
+                                            left: 0;
+                                            width: rem(15);
+                                            height: rem(15);
+                                            background: url('../../../../../public/assets/images/myAppmobile//checked.png')
+                                                no-repeat center center;
+                                            filter: brightness(0) saturate(100%) invert(50%) sepia(33%) saturate(759%)
+                                                hue-rotate(150deg) brightness(90%) contrast(88%);
+                                        }
+                                    }
+                                }
+                            }
+                            .sub_ul {
+                                margin-block-start: rem(8);
+                                font-family: var(--fn_accent);
+                                color: var(--clr_vzit_offer_text);
+                                font-weight: var(--fw_medium);
+
+                                & > * {
+                                    color: var(--clr_vzit_offer_text);
+                                    line-height: 1.6;
+                                    font-weight: var(--fw_medium);
+                                }
+                            }
+                        }
+                    }
+                }
+                .mobile_accordion {
+                    display: none;
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/WalmartStreamline/healthEfficiency/HealthEfficiency.tsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import global from 'theme/global/global.module.scss';
+import styles from './HealthEfficiency.module.scss';
+import { Box, Tab, Tabs } from '@mui/material';
+import ReactMarkdown from 'react-markdown';
+
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
+
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { HealthCareEfficiencyInterface } from '@/interfaces/healthCare.interface';
+import Image from 'next/image';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { CORRECT_ICON } from '@/constants/svgConstant';
+import rehypeRaw from 'rehype-raw';
+
+interface TabPanelProps {
+    children?: React.ReactNode;
+    index: number;
+    value: number;
+}
+
+function CustomTabPanel(props: TabPanelProps) {
+    const { children, value, index, ...other } = props;
+
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`simple-tabpanel-${index}`}
+            aria-labelledby={`simple-tab-${index}`}
+            {...other}
+            className={styles.tab_custom_panel}
+        >
+            {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+        </div>
+    );
+}
+function a11yProps(index: number) {
+    return {
+        id: `simple-tab-${index}`,
+        'aria-controls': `simple-tabpanel-${index}`,
+    };
+}
+
+interface HealthEfficiencyPropsInterface {
+    extraClass?: string;
+    data: any;
+    id?: string;
+    onOpen: () => void;
+}
+const HealthEfficiency = ({ extraClass, data, id, onOpen }: HealthEfficiencyPropsInterface) => {
+    const [value, setValue] = React.useState(0);
+    const [expanded, setExpanded] = React.useState<string | false>(false);
+    const handleAccordionChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+        setExpanded(isExpanded ? panel : false);
+    };
+    const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+        setValue(newValue);
+    };
+    return (
+        <section id={id} className={`${styles.saasServices_sec}  ${extraClass && styles[extraClass]}`}>
+            <div className={`${styles.custom_container} ${global.container}`}>
+                <div className={`${styles.inner_box}`}>
+                    <div className={styles.tabBlock}>
+                        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                            <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
+                                {data?.map((item: any, i: any) => (
+                                    <Tab
+                                        key={i}
+                                        label={
+                                            <span className={styles.tabTitle}>
+                                                <span className={styles.grad}>{`${i + 1}. ${item?.moduleText}`}</span>
+                                                {item?.name}
+                                            </span>
+                                        }
+                                        {...a11yProps(i)}
+                                        style={
+                                            {
+                                                '--bg_color': '#3CAEFF',
+                                            } as React.CSSProperties as any
+                                        }
+                                    />
+                                ))}
+                            </Tabs>
+                        </Box>
+                        {data?.map((item: any, i: any) => (
+                            <CustomTabPanel key={i} value={value} index={i}>
+                                <div className={styles.itemBox}>
+                                    <div className={`${styles.detailGrid}`}>
+                                        {item?.moduleImage?.data?.attributes?.url && (
+                                            <img
+                                                src={item?.moduleImage?.data?.attributes?.url}
+                                                width={739}
+                                                height={182}
+                                            />
+                                        )}
+                                    </div>
+                                    <div className={styles.para}>
+                                        <div className={styles.itemList}>
+                                            <div className={styles.details}>
+                                                <div
+                                                    className={`${global.body1} ${global.manrope} ${styles.title_text}`}
+                                                >
+                                                    <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                                        {item?.moduleContent || ''}
+                                                    </ReactMarkdown>
+                                                </div>
+                                                <div className={`${global.body1} ${global.manrope} ${styles.sub_ul}`}>
+                                                    <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                                        {item?.modulePoints || ''}
+                                                    </ReactMarkdown>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </CustomTabPanel>
+                        ))}
+                        {/* Accordion */}
+                        <div className={styles.mobile_accordion}>
+                            {data?.tabs?.length > 0 &&
+                                data?.tabs?.map((item: any, index: any) => (
+                                    <Accordion
+                                        key={index}
+                                        expanded={expanded === `panel${index + 1}`}
+                                        onChange={handleAccordionChange(`panel${index + 1}`)}
+                                        className={styles.accodian}
+                                    >
+                                        <AccordionSummary
+                                            expandIcon={<ExpandMoreIcon />}
+                                            aria-controls={`panel${index + 1}bh-content`}
+                                            id={`panel${index + 1}bh-header`}
+                                        >
+                                            <div className={`${styles.detailGrid}`}>
+                                                <div
+                                                    className={`${styles.countText} ${global.manrope} ${global.heading1_1}`}
+                                                >
+                                                    <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                                        {item?.number ? item?.number : ''}
+                                                    </ReactMarkdown>
+                                                </div>
+                                                <div className={styles.leftItem}>
+                                                    <div
+                                                        className={`${styles.title} ${global.manrope} ${global.heading2}`}
+                                                    >
+                                                        <ReactMarkdown
+                                                            rehypePlugins={[rehypeRaw as any]}
+                                                            skipHtml={false}
+                                                        >
+                                                            {item?.title ? item?.title : ''}
+                                                        </ReactMarkdown>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </AccordionSummary>
+                                        <AccordionDetails>
+                                            <div className={`${styles.para} ${global.body1}`}>
+                                                <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                                    {item?.details ? item?.details : ''}
+                                                </ReactMarkdown>
+                                            </div>
+                                        </AccordionDetails>
+                                    </Accordion>
+                                ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default HealthEfficiency;

components/MyAppLanding/component/WhyItsEssential/WhyItsEssential.tsx

@@ -0,0 +1,166 @@
+import global from 'theme/global/global.module.scss';
+import styles from './whyItsEssential.module.scss';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import React from 'react';
+import Image from 'next/image';
+import ReactMarkdown from 'react-markdown';
+import { CustomServiceInterface } from '@/interfaces/finTech.interface';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import CallToAction from '../callToAction/CallToAction';
+import { Header, KeyNote } from '@/interfaces/shared/shared';
+import rehypeRaw from 'rehype-raw';
+
+interface EssentialInterface {
+    header: Header;
+    divNotes: KeyNote[];
+}
+
+interface RequiredProps {
+    extraClass?: string;
+    id?: string;
+    props: EssentialInterface;
+}
+
+
+const WhyItsEssential = ({ extraClass, id, props }: RequiredProps) => {
+    const [expanded, setExpanded] = React.useState<string|boolean>('panel1');
+    const raw = props?.header?.titleColor ?? '';
+    const trimmed = typeof raw === 'string' ? raw.replace(/[;]\s*$/, '').trim() : '';
+    const normalized =
+        trimmed.startsWith('--') ? `var(${trimmed.replace(/:$/, '')})` : trimmed;
+    const style = normalized
+        ? ({ ['--heading_color' as any]: normalized } as React.CSSProperties)
+        : undefined;
+    const backgroundRaw = props?.header?.background ?? '';
+    const backgrounTrimmed = typeof backgroundRaw === 'string' ? backgroundRaw.replace(/[;]\s*$/, '').trim() : '';
+    const backgroundNormalized =
+        trimmed.startsWith('--') ? `var(${backgrounTrimmed.replace(/:$/, '')})` : backgrounTrimmed;
+    
+    const backgroundStyle = backgroundNormalized
+        ? ({ ['background' as any]: backgroundNormalized } as React.CSSProperties)
+        : undefined;
+    const handleChange =
+        (panel: string) =>
+        (_e: React.SyntheticEvent, isExpanded: boolean) => {
+          setExpanded(isExpanded ? panel : false);   // ← toggle close on second click
+    };
+
+    function decodeHTMLEntities(text: string) {
+        return text
+            .replace(/&amp;/g, '&')
+            .replace(/&lt;/g, '<')
+            .replace(/&gt;/g, '>')
+            .replace(/&quot;/g, '"')
+            .replace(/&#039;/g, "'");
+    }
+
+    return (
+        <section
+            id={id}
+            className={`${styles.fintechInsurance_sec} ${global.section_padding}  ${global.padding_block2} ${
+                extraClass && styles[extraClass]
+            }`}
+            style={backgroundStyle}
+        >
+            <div className={`${styles.custom_container} ${global.container} `}>
+                <div className={`${styles.inner_Block} `}>
+                    <div className={`${styles.header_block} `}>
+                        {props?.header?.pageTitle && (
+                            <div className={styles.content_chip}>{props?.header?.pageTitle}</div>
+                        )}
+                        
+                        {props?.header?.title && (
+                            
+                            <div
+                            className={`${global.heading1_1} ${styles.top_head} ${styles.title}`}
+                            style={style}
+                            >
+                                <ReactMarkdown
+                                    rehypePlugins={[rehypeRaw as any]}
+                                    skipHtml={false}
+                                >
+                                    {props?.header?.title || ''}
+                                </ReactMarkdown>
+                            </div>
+                        )}
+                        {props?.header?.content && (
+                        <div className={`${styles.sub_title} ${global.head44}`}>
+                            <ReactMarkdown
+                                rehypePlugins={[rehypeRaw as any]}
+                                skipHtml={false}
+                            >
+                                {props?.header?.content || ''}
+                            </ReactMarkdown>
+                        </div>)}
+                    </div>
+                    <div className={`${styles.card_sec}`}>
+                        <div className={styles.accordion_grid}>
+                            {props?.divNotes?.map((item: any, i: number) => (
+                                <Accordion
+                                    key={i}
+                                    expanded={expanded === `panel${i + 1}`}
+                                    onChange={handleChange(`panel${i + 1}`)}
+                                    className={styles.accordion}
+                                >
+                                    <AccordionSummary
+                                        expandIcon={<ExpandMoreIcon />}
+                                        aria-controls="panel1-content"
+                                        id="panel1-header"
+                                        className={`${global.head4_4} ${global.manrope}`}
+                                    >
+                                        <span className={styles.tabIcon}>
+                                            <div
+                                                className={styles.icon}
+                                            >
+                                                <ReactMarkdown
+                                                rehypePlugins={[rehypeRaw as any]}
+                                                skipHtml={false}
+                                                >
+                                                    {item?.noteIcon || ''}
+                                                </ReactMarkdown>
+                                            </div>
+                                        </span>
+                                        <span className={styles.tabData}>{item?.noteTitle}</span>
+                                    </AccordionSummary>
+                                    <AccordionDetails>
+                                        <div className={`${global.body1}`}>
+                                            <ReactMarkdown
+                                                rehypePlugins={[rehypeRaw as any]}
+                                                skipHtml={false}
+                                            >
+                                                {item?.noteBody || ''}
+                                            </ReactMarkdown>
+                                        </div>
+                                        <div className={styles.tabImg}>
+                                            <Image
+                                                src={
+                                                    item?.noteImage?.data?.attributes?.url ||
+                                                    UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_SERVICEIMG
+                                                }
+                                                width={586}
+                                                height={751}
+                                                alt={'tab-image'}
+                                            />
+                                            <div className={styles.ImgChips}>
+                                                <div className={`${styles.content_chip} ${global.body2}`}>
+                                                    Electrical
+                                                </div>
+                                                <div className={`${styles.content_chip} ${global.body2}`}>
+                                                    Plumbing{' '}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </AccordionDetails>
+                                </Accordion>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+export default WhyItsEssential;

components/MyAppLanding/component/WhyItsEssential/whyItsEssential.module.scss

@@ -0,0 +1,491 @@
+@use 'theme/sass' as *;
+
+.fintechInsurance_sec {
+    width: 100%;
+    position: relative;
+    background: var(--AppM_clr_bg_primary);
+
+    .custom_container {
+        width: 100%;
+        .inner_Block {
+            width: 100%;
+            .header_block {
+                width: 100%;
+                max-width: rem(1048);
+                margin: 0 auto;
+                text-align: center;
+                .content_chip {
+                    width: fit-content;
+                    line-height: rem(24);
+                    background: var(--clr_background_primary);
+                    padding-block: rem(6);
+                    padding-inline: rem(16);
+                    border-radius: rem(20);
+                    min-height: rem(34);
+                    @include displayFlex(row, center, center);
+                    color: hsl(var(--AppMobile_clr_text_chip));
+                    font-weight: var(--fw_medium);
+                    font-family: var(--fn_accent);
+                    border: 1px solid hsl(var(--AppM_border_09));
+                    box-shadow: 0px 5px 14px 0px #30b9f41f;
+                    margin: 0 auto 20px;
+                    & > * {
+                        color: hsl(var(--AppMobile_clr_text_chip));
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                    }
+                }
+                .title {
+                    color: var(--clr_vzit_offer_text2);
+                    font-weight: var(--fw_semiBold);
+                    & > * {
+                        color: var(--clr_vzit_offer_text2);
+                        font-weight: var(--fw_semiBold);
+                        strong {
+                            @include textGradient(var(--heading_color));
+                        }
+                    }
+                    strong {
+                        @include textGradient(var(--heading_color));
+                    }
+                }
+                .sub_title {
+                    margin-block-start: rem(20);
+                    color: var(--clr-para);
+                    font-weight: var(--fw_regular);
+                    & > * {
+                        color: var(--clr-para);
+                        font-weight: var(--fw_regular);
+                    }
+                }
+            }
+            .card_sec {
+                margin-block-start: scaleValue(40px, 90px);
+                background: var(--clr_background_primary);
+                width: 100%;
+                display: grid;
+                grid-template-columns: 50fr 48fr;
+                gap: scaleValue(20px, 46px);
+                border: 1px solid #00000021;
+                padding: scaleValue(20px, 44px) scaleValue(20px, 35px);
+                border-radius: rem(23);
+                position: relative;
+                direction: rtl;
+                @include max(1024px) {
+                    grid-template-columns: 1fr;
+                    gap: 0;
+                }
+                .accordion_grid {
+                    direction: ltr;
+                    @include displayFlex(column, flex-start, flex-start);
+                    gap: rem(14);
+                    height: 100%;
+                    height: rem(650);
+                    overflow: auto;
+                    padding-inline-end: rem(10);
+                    margin-inline-end: -10px;
+
+                    &::-webkit-scrollbar-track {
+                        border-radius: rem(2);
+                        background-color: #ffffff38;
+                    }
+
+                    &::-webkit-scrollbar {
+                        width: rem(2);
+                        border-radius: rem(2);
+                        background-color: var(--clr_background_primary);
+                    }
+
+                    &::-webkit-scrollbar-thumb {
+                        border-radius: rem(2);
+                        background-color: var(--bg_clr_light_shade_blue_03);
+                    }
+                    & :global(.MuiAccordion-root) {
+                        direction: rtl;
+                        padding: scaleValue(15px, 20px) scaleValue(15px, 35px);
+                        width: 100%;
+                        border-radius: rem(20);
+                        border: 1.04px solid #ffffff85;
+                        box-shadow: none;
+                        position: inherit !important;
+                        &::before {
+                            display: none;
+                        }
+
+                        &:global(.Mui-expanded) {
+                            background: #ffffff24;
+                            box-shadow: none;
+                            margin: 0;
+                            border: 1.08px solid var(--InLand_border_05);
+                            @include displayFlex(column, flex-end, flex-start);
+                            :global(.MuiAccordionSummary-root) {
+                                color: var(--clr_new_power_dark_blue2);
+                                width: 100%;
+                                :global(.MuiAccordionSummary-content) {
+                                    color: var(--clr_new_power_dark_blue2);
+                                    text-align: left;
+                                    .tabIcon {
+                                        background: #ffffff30;
+                                    }
+                                }
+                                :global(.MuiAccordionSummary-expandIconWrapper) {
+                                    // svg {
+                                    //     fill: var(--clr_text_secondary);
+                                    // }
+                                }
+                            }
+                        }
+                        :global(.MuiAccordionSummary-root) {
+                            padding: 0;
+                            flex-direction: row-reverse;
+                            justify-content: space-between;
+                            width: 100%;
+                            :global(.MuiAccordionSummary-content) {
+                                font-weight: var(--fw_semiBold);
+                                color: var(--clr_new_power_dark_blue2);
+                                font-family: var(--fn_accent);
+                                margin: 0;
+                                @include displayFlex(row-reverse, center, flex-start);
+                                gap: rem(30);
+                                @include max(575px) {
+                                    gap: rem(15);
+                                }
+                                .tabIcon {
+                                    width: rem(40);
+                                    height: rem(40);
+                                    @include displayFlex(row, center, center);
+                                    img {
+                                        width: 100%;
+                                        height: 100%;
+                                        object-fit: contain;
+                                    }
+                                }
+                                .tabData {
+                                    flex: 1;
+                                    text-align: left;
+                                    font-size: scaleValue(18px, 22px);
+                                    word-break: break-word;
+                                    @include max(575px) {
+                                        font-size: scaleValue(15px, 20px);
+                                    }
+                                }
+                            }
+                            :global(.MuiAccordionSummary-expandIconWrapper) {
+                                svg {
+                                    fill: var(--clr_vzit_offer_text2);
+                                }
+                            }
+                        }
+                        :global(.MuiCollapse-root) {
+                            width: 100%;
+                            text-align: left;
+                            :global(.MuiCollapse-wrapper) {
+                                padding-inline-end: rem(72);
+                                @include max(1023px) {
+                                    padding-inline-end: 0;
+                                    :global(.MuiAccordionDetails-root) {
+                                        .tabImg {
+                                            margin-block-start: rem(30);
+                                        }
+                                    }
+                                }
+                                :global(.MuiCollapse-wrapperInner) {
+                                    padding-block-start: rem(20);
+
+                                    :global(.MuiAccordionDetails-root) {
+                                        padding: 0px 0 10px !important;
+                                        direction: ltr;
+                                        & > * {
+                                            color: var(--clr_new_power_dark_blue2);
+                                            line-height: 1.5;
+                                            position: relative;
+
+                                            & > * {
+                                                color: var(--clr_new_power_dark_blue2);
+                                                line-height: 1.5;
+                                                font-weight: var(--fw_regular);
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                    @include max(1024px) {
+                        height: auto;
+                    }
+                }
+                .tabImg {
+                    width: 100%;
+                    max-width: rem(550);
+                    height: rem(650);
+                    display: block;
+                    position: absolute !important;
+                    left: rem(30);
+                    top: scaleValue(20px, 44px);
+                    background: transparent !important;
+                    padding: 0 !important;
+                    overflow: hidden;
+                    border-radius: rem(20);
+                    @include max(1360px) {
+                        max-width: rem(520);
+                    }
+                    @include max(1279px) {
+                        max-width: rem(440);
+                    }
+                    @include max(1024px) {
+                        width: 100%;
+                        max-width: 100%;
+                        position: relative !important;
+                        overflow: hidden;
+                        height: rem(300);
+                        top: 0;
+                        left: 0;
+                        margin: rem(15) auto 0;
+                    }
+                    img {
+                        width: 100%;
+                        height: 100%;
+                        object-fit: cover;
+                    }
+                }
+            }
+        }
+    }
+    &.urbanClap {
+        .custom_container {
+            width: 100%;
+            .inner_Block {
+                width: 100%;
+                .card_sec {
+                    margin-block-start: scaleValue(40px, 90px);
+                    width: 100%;
+                    display: grid;
+                    grid-template-columns: 50fr 48fr;
+                    gap: scaleValue(20px, 46px);
+                    border: 1px solid #00000021;
+                    padding: rem(16);
+                    border-radius: rem(23);
+                    position: relative;
+                    direction: rtl;
+                    background: var(--clr_background_primary);
+                    @include max(1024px) {
+                        grid-template-columns: 1fr;
+                        gap: 0;
+                    }
+                    .accordion_grid {
+                        @include displayFlex(column, flex-start, flex-start);
+                        gap: rem(14);
+                        height: 100%;
+                        height: rem(650);
+                        overflow: auto;
+
+                        &::-webkit-scrollbar-track {
+                            border-radius: rem(2);
+                            background-color: #ffffff38;
+                        }
+
+                        &::-webkit-scrollbar {
+                            width: rem(2);
+                            border-radius: rem(2);
+                            background-color: var(--clr_background_primary);
+                        }
+
+                        &::-webkit-scrollbar-thumb {
+                            border-radius: rem(2);
+                            background-color: var(--bg_clr_light_shade_blue_03);
+                        }
+                        & :global(.MuiAccordion-root) {
+                            padding: scaleValue(15px, 20px) scaleValue(15px, 35px);
+                            width: 100%;
+                            border-radius: rem(20);
+                            border: 1.04px solid #ffffff85;
+                            box-shadow: none;
+                            position: inherit !important;
+                            &::before {
+                                display: none;
+                            }
+
+                            &:global(.Mui-expanded) {
+                                background: #ffffff24;
+                                box-shadow: none;
+                                margin: 0;
+                                border: 1.08px solid var(--InLand_border_05);
+                                @include displayFlex(column, flex-end, flex-start);
+                                :global(.MuiAccordionSummary-root) {
+                                    color: var(--clr_new_power_dark_blue2);
+                                    width: 100%;
+                                    :global(.MuiAccordionSummary-content) {
+                                        color: var(--clr_new_power_dark_blue2);
+                                        text-align: left;
+                                        .tabIcon {
+                                            background: #ffffff30;
+                                        }
+                                    }
+                                    :global(.MuiAccordionSummary-expandIconWrapper) {
+                                        // svg {
+                                        //     fill: var(--clr_text_secondary);
+                                        // }
+                                    }
+                                }
+                            }
+                            :global(.MuiAccordionSummary-root) {
+                                padding: 0;
+                                flex-direction: row-reverse;
+                                justify-content: space-between;
+                                width: 100%;
+                                :global(.MuiAccordionSummary-content) {
+                                    font-weight: var(--fw_semiBold);
+                                    color: var(--clr_new_power_dark_blue2);
+                                    font-family: var(--fn_accent);
+                                    margin: 0;
+                                    @include displayFlex(row-reverse, center, flex-start);
+                                    gap: rem(30);
+                                    @include max(575px) {
+                                        gap: rem(15);
+                                    }
+                                    .tabIcon {
+                                        width: rem(40);
+                                        height: rem(40);
+                                        @include displayFlex(row, center, center);
+                                        img {
+                                            width: 100%;
+                                            height: 100%;
+                                            object-fit: contain;
+                                        }
+                                    }
+                                    .tabData {
+                                        flex: 1;
+                                        text-align: left;
+                                        font-size: scaleValue(18px, 22px);
+                                        word-break: break-word;
+                                        @include max(575px) {
+                                            font-size: scaleValue(15px, 20px);
+                                        }
+                                    }
+                                }
+                                :global(.MuiAccordionSummary-expandIconWrapper) {
+                                    svg {
+                                        fill: var(--clr_vzit_offer_text2);
+                                    }
+                                }
+                            }
+                            :global(.MuiCollapse-root) {
+                                width: 100%;
+                                text-align: left;
+                                :global(.MuiCollapse-wrapper) {
+                                    padding-inline-end: rem(72);
+                                    @include max(1023px) {
+                                        padding-inline-end: 0;
+                                        :global(.MuiAccordionDetails-root) {
+                                            .tabImg {
+                                                margin-block-start: rem(30);
+                                            }
+                                        }
+                                    }
+                                    :global(.MuiCollapse-wrapperInner) {
+                                        padding-block-start: rem(20);
+
+                                        :global(.MuiAccordionDetails-root) {
+                                            padding: 0px 0 10px !important;
+                                            direction: ltr;
+                                            & > * {
+                                                color: var(--clr_new_power_dark_blue2);
+                                                line-height: 1.5;
+                                                position: relative;
+
+                                                & > * {
+                                                    color: var(--clr_new_power_dark_blue2);
+                                                    line-height: 1.5;
+                                                    font-weight: var(--fw_regular);
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+
+                        @include max(1024px) {
+                            height: auto;
+                        }
+                    }
+                    .tabImg {
+                        width: 100%;
+                        max-width: rem(562);
+                        height: 100%;
+                        max-height: rem(649);
+                        display: block;
+                        position: absolute !important;
+                        left: rem(16);
+                        top: rem(16);
+                        background: transparent !important;
+                        padding: 0 !important;
+                        overflow: hidden;
+                        border-radius: rem(18);
+                        @include max(1279px) {
+                            max-width: rem(420);
+                        }
+                        @include max(1024px) {
+                            width: 100%;
+                            max-width: 100%;
+                            position: relative !important;
+                            overflow: hidden;
+                            height: rem(500);
+                            top: 0;
+                            left: 0;
+                            margin: rem(15) auto 0;
+                        }
+                        @include max(1024px) {
+                            height: rem(400);
+                        }
+                        img {
+                            width: 100%;
+                            height: 100%;
+                            object-fit: cover;
+                        }
+                        &::after {
+                            content: '';
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            width: 100%;
+                            height: 100%;
+                            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
+                        }
+                        .ImgChips {
+                            position: absolute;
+                            z-index: 1;
+                            padding: rem(20);
+                            bottom: 0;
+                            left: 0;
+                            @include displayFlex(row, center, flex-start);
+                            gap: rem(12);
+                            flex-wrap: wrap;
+                            width: 100%;
+                            .content_chip {
+                                width: fit-content;
+                                line-height: rem(24);
+                                background: var(--clr_background_primary);
+                                padding-block: rem(6);
+                                padding-inline: rem(16);
+                                border-radius: rem(20);
+                                min-height: rem(34);
+                                @include displayFlex(row, center, center);
+                                color: var(--clr_vzit_offer_text2);
+                                font-weight: var(--fw_bold);
+                                font-family: var(--fn_accent);
+                                & > * {
+                                    color: var(--clr_vzit_offer_text2);
+                                    font-weight: var(--fw_bold);
+                                    font-family: var(--fn_accent);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/WhyNeed/WhyNeed.module.scss

@@ -0,0 +1,219 @@
+@use 'theme/sass' as *;
+
+.Essential_sec {
+    width: 100%;
+    background: hsl(var(--AppM_clr_bg_primary));
+
+    .inner_auto_services {
+        width: 100%;
+        .content_box {
+            width: 100%;
+            .content {
+                width: 100%;
+                text-align: center;
+                .content_chip {
+                    width: fit-content;
+                    background: var(--clr_background_primary);
+                    padding-block: rem(6);
+                    padding-inline: rem(16);
+                    border-radius: rem(20);
+                    line-height: rem(24);
+                    min-height: rem(34);
+                    margin-inline: auto;
+                    @include displayFlex(row, center, center);
+                    color: hsl(var(--AppMobile_clr_text_chip));
+                    font-weight: var(--fw_medium);
+                    font-family: var(--fn_accent);
+                    border: 1px solid hsl(var(--AppM_border_09));
+                    box-shadow: 0px 5px 14px 0px #30b9f41f;
+                    & > * {
+                        color: hsl(var(--AppMobile_clr_text_chip));
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                    }
+                }
+                .title {
+                    width: min(100%, rem(1000));
+                    margin-inline: auto;
+                    margin-block-start: rem(16);
+                    color: hsl(var(--AppM_clr_text_primary));
+                    font-weight: var(--fw_bold);
+                    font-family: var(--fn_accent);
+                    & > * {
+                        color: hsl(var(--AppM_clr_text_primary));
+                        font-weight: var(--fw_bold);
+                    }
+                    strong {
+                        @include textGradient(var(--heading_color));
+                    }
+                }
+                .para {
+                    width: min(100%, rem(800));
+                    margin-block-start: rem(24);
+                    color: var(--clr_vzit_offer_text);
+                    & > * {
+                        color: var(--clr_vzit_offer_text);
+                    }
+                }
+            }
+        }
+
+        .overview_box_content {
+            width: 100%;
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: rem(20);
+            margin-block-start: scaleValue(50px, 90px);
+            position: relative;
+            z-index: 1;
+            @include max(1024px) {
+                grid-template-columns: 1fr;
+                gap: rem(40);
+            }
+            &::after {
+                content: '';
+                position: absolute;
+                width: 60%;
+                height: 100%;
+                left: 50%;
+                transform: translateX(-50%);
+                top: 0;
+                z-index: -1;
+                background: url('./../../../../public/assets/images/myAppmobile/bg_vector.png') no-repeat center center;
+                @include max(1199px) {
+                    display: none;
+                }
+            }
+        }
+
+        .info_box {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            @include displayFlex(column, flex-start, space-between);
+            gap: scaleValue(20px, 40px);
+            z-index: 0;
+            @include max(1024px) {
+                justify-content: flex-start;
+            }
+            .images_box {
+                margin-inline: auto;
+                width: rem(141);
+                height: rem(141);
+                border-radius: 50%;
+                transition: all 0.3s ease-in-out;
+                border: 1px solid hsl(var(--AppM_border_02));
+                @include displayFlex(row, center, center);
+                .icon_need {
+                    width: rem(112);
+                    height: rem(112);
+                    border-radius: 50%;
+                    background: hsl(var(--AppM_border_02));
+                    @include displayFlex(row, center, center);
+                    box-shadow: 0px 5px 13px 0px #00000040;
+                }
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+            }
+            .box_para {
+                border: 1px solid #ff7c7c33;
+                background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(251, 80, 82, 0.26) 100%);
+                padding: scaleValue(20px, 39px) scaleValue(20px, 31px);
+                font-family: var(--fn_accent);
+                font-weight: var(--fw_semiBold);
+                transition: all 0.3s ease-in-out;
+                border-radius: scaleValue(20px, 32px);
+                .title {
+                    font-family: var(--fn_accent);
+                    font-weight: var(--fw_medium);
+                    & > * {
+                        font-family: var(--fn_accent);
+                        font-weight: var(--fw_medium);
+                    }
+                }
+                p {
+                    @include textGradient(var(--noteTitleColor));
+                    & > * {
+                        font-family: var(--fn_accent);
+                        font-weight: var(--fw_medium);
+                        @include textGradient(var(--heading_color));
+                    }
+                    &:last-child {
+                        margin-block-end: 0;
+                    }
+                    strong {
+                        font-weight: var(--fw_bold);
+                    }
+                }
+            }
+            .icon {
+                font-size: rem(34);
+                transition: all 0.3s ease-in-out;
+                color: hsl(var(--AppM_clr_bg_danger));
+            }
+            &:first-child {
+                z-index: 1;
+            }
+            &:last-child {
+                z-index: 1;
+                flex-direction: column-reverse;
+
+                @include max(1024px) {
+                    flex-direction: column;
+                    .box_para {
+                        margin-inline-start: 0;
+                    }
+                }
+            }
+            & .center_img {
+                width: 100%;
+                height: 100%;
+                max-width: rem(466);
+                max-height: rem(527);
+                position: relative;
+                bottom: -66px;
+                margin-inline: auto;
+                overflow: hidden;
+                @include max(1023px) {
+                    bottom: 0;
+                }
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: contain;
+                }
+                &::before {
+                    content: '';
+                    position: absolute;
+                    bottom: -11%;
+                    right: -14%;
+                    left: auto;
+                    background: linear-gradient(0deg, #f8f8f8 0% 100%), #f8f8f8;
+                    filter: blur(28px);
+                    width: 275px;
+                    height: 161px;
+                    border-radius: 165px;
+                    z-index: 1;
+                    transform: translateX(14%) translateY(11%) rotate(-18deg);
+                    @include max(1023px) {
+                        bottom: -10%;
+                        right: -12%;
+                        filter: blur(24px);
+                        width: 294px;
+                        border-radius: 50%;
+                        transform: translateX(12%) translateY(10% 10%) rotate(-18deg);
+                    }
+                }
+            }
+            & .images_box.images_boxTwo {
+                border: 1px solid hsl(var(--AppM_border_03)) !important;
+                & .icon_needTWo {
+                    background: hsl(var(--AppM_border_03)) !important;
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/WhyNeed/WhyNeed.tsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import global from 'theme/global/global.module.scss';
+import styles from './WhyNeed.module.scss';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { FiPlus } from 'react-icons/fi';
+import { TINDER_NEED_ICON1, TINDER_NEED_ICON2 } from '@/constants/svgConstant';
+import CallToAction from '../callToAction/CallToAction';
+import { Header, KeyNote } from '@/interfaces/shared/shared';
+import rehypeRaw from 'rehype-raw';
+import ReactMarkdown from 'react-markdown';
+interface EssentialInterface {
+    extraClass?: string;
+    id?: string;
+    props: PropContent;
+}
+
+interface PropContent {
+    header: Header;
+    divNotes: KeyNote[];
+    divImage: any; 
+}
+
+
+const WhyNeed = ({ extraClass, id, props }: EssentialInterface) => {
+    const { header, divNotes, divImage } = props;
+    const raw = header?.titleColor ?? '';
+    const trimmed = typeof raw === 'string' ? raw.replace(/[;]\s*$/, '').trim() : '';
+    const normalized =
+        trimmed.startsWith('--') ? `var(${trimmed.replace(/:$/, '')})` : trimmed;
+    
+    const style = normalized
+        ? ({ ['--heading_color' as any]: normalized } as React.CSSProperties)
+        : undefined;
+    //setup noteTitleColor
+    const noteTitleColorRaw = divNotes[0]?.noteTitleColor ?? '';
+    const noteTitleColorTrimmed = typeof noteTitleColorRaw === 'string' ? noteTitleColorRaw.replace(/[;]\s*$/, '').trim() : '';
+    const noteTitleColorNormalized =
+        noteTitleColorTrimmed.startsWith('--') ? `var(${noteTitleColorTrimmed.replace(/:$/, '')})` : noteTitleColorTrimmed;
+    
+    const noteTitleColorStyle = noteTitleColorNormalized
+        ? ({ ['--noteTitleColor' as any]: noteTitleColorNormalized } as React.CSSProperties)
+        : undefined;
+
+    //setup noteTitleColor
+    const noteTitleColorRawTwo = divNotes[1]?.noteTitleColor ?? '';
+    const noteTitleColorTrimmedTwo = typeof noteTitleColorRawTwo === 'string' ? noteTitleColorRawTwo.replace(/[;]\s*$/, '').trim() : '';
+    const noteTitleColorNormalizedTwo =
+        noteTitleColorTrimmedTwo.startsWith('--') ? `var(${noteTitleColorTrimmedTwo.replace(/:$/, '')})` : noteTitleColorTrimmedTwo;
+    
+    const noteTitleColorStyleTwo = noteTitleColorNormalizedTwo
+        ? ({ ['--noteTitleColor' as any]: noteTitleColorNormalizedTwo } as React.CSSProperties)
+        : undefined;
+    return (
+        <section
+            id={id}
+            className={`${styles.Essential_sec} ${global.section_padding}  ${global.padding_block_start} ${
+                extraClass && styles[extraClass]
+            }`}
+        >
+            <div className={`${styles.custom_container} ${global.container}`}>
+                <div className={`${styles.inner_auto_services} ${global.padding_block_end}`}>
+                    <div className={styles.content_box}>
+                        <div className={styles.content}>
+                            {header?.pageTitle && (
+                                <div className={styles.content_chip}>{header.pageTitle}</div>
+                            )}
+                            {header?.title && (
+                            <div
+                                className={`${global.heading1} ${styles.title}`}
+                                style={style}
+                                >
+                                    <ReactMarkdown
+                                        rehypePlugins={[rehypeRaw as any]}
+                                        skipHtml={false}
+                                    >
+                                        {header.title || ''}
+                                    </ReactMarkdown>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                    <div className={styles.overview_box_content}>
+                        <div className={styles.info_box}>
+                            <div className={styles.images_box}>
+                                <div className={styles.icon_need}>
+                                    <TINDER_NEED_ICON1 />
+                                </div>
+                            </div>
+                            {divNotes && divNotes[0] && (
+                                <div className={`${global.heading22} ${styles.box_para}`}>
+                                    {divNotes[0]?.noteTitle && (
+                                    <div
+                                        className={`${global.heading6}`}
+                                        style={noteTitleColorStyle}
+                                    >
+                                        <ReactMarkdown
+                                            rehypePlugins={[rehypeRaw as any]}
+                                            skipHtml={false}
+                                        >
+                                            {divNotes[0].noteTitle || ''}
+                                        </ReactMarkdown>
+                                    </div>
+                                    )}
+                                </div>
+                            )}
+                        </div>
+                        <div className={styles.info_box}>
+                            <div className={styles.center_img}>
+                                <img src={divImage?.data?.attributes?.url} width={466} height={639} />
+                            </div>
+                        </div>
+                        <div className={styles.info_box}>
+                            <div className={`${styles.images_box} ${styles.images_boxTwo}`}>
+                                <div className={`${styles.icon_need} ${styles.icon_needTWo}`}>
+                                    <TINDER_NEED_ICON2 />
+                                </div>
+                            </div>
+                            {divNotes && divNotes[1] && (
+                                <div className={`${global.heading22} ${styles.box_para}`}>
+                                    {divNotes[1]?.noteTitle && (
+                                    <div
+                                        className={`${global.heading6}`}
+                                        style={noteTitleColorStyleTwo}
+                                    >
+                                        <ReactMarkdown
+                                            rehypePlugins={[rehypeRaw as any]}
+                                            skipHtml={false}
+                                        >
+                                            {divNotes[1].noteTitle || ''}
+                                        </ReactMarkdown>
+                                    </div>
+                                    )}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default WhyNeed;

components/MyAppLanding/component/Workflow/Workflow.module.scss

@@ -0,0 +1,68 @@
+@use 'theme/sass' as *;
+
+.brand_sec {
+    background: var(--clr_background_primary);
+    height: auto;
+    position: relative;
+    .header_content {
+        max-width: rem(720);
+        margin: 0 auto;
+        text-align: center;
+        .content_chip {
+            width: fit-content;
+            background: hsl(var(--AppMobile_clr_chip));
+            padding-block: rem(6);
+            line-height: rem(24);
+            padding-inline: rem(16);
+            border-radius: rem(20);
+            min-height: rem(34);
+            @include displayFlex(row, center, center);
+            color: hsl(var(--AppMobile_clr_text_chip));
+            font-weight: var(--fw_medium);
+            font-family: var(--fn_accent);
+            margin: 0 auto 20px;
+            & > * {
+                color: hsl(var(--AppMobile_clr_text_chip));
+                font-weight: var(--fw_medium);
+                font-family: var(--fn_accent);
+            }
+        }
+        .title {
+            font-family: var(--fn_accent) !important;
+            font-size: scaleValue(28px, 42px);
+            line-height: 1.2;
+            letter-spacing: 0;
+            font-weight: var(--fw_bold);
+            color: var(--clr_vzit_offer_text2);
+            & > * {
+                font-family: var(--fn_accent) !important;
+                font-size: scaleValue(28px, 42px);
+                line-height: 1.2;
+                letter-spacing: 0;
+                font-weight: var(--fw_bold);
+                color: var(--clr_vzit_offer_text2);
+            }
+            strong {
+                @include textGradient(var(--heading_color));
+            }
+        }
+    }
+    .brand {
+        width: 100%;
+        .center_image {
+            width: 100%;
+            max-width: rem(1284);
+            height: 100%;
+            max-height: rem(927);
+            margin-inline: auto;
+            margin-block-start: scaleValue(40px, 100px);
+            margin-block-end: scaleValue(20px, 40px);
+
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+            }
+        }
+    }
+}

components/MyAppLanding/component/Workflow/Workflow.tsx

@@ -0,0 +1,59 @@
+import global from 'theme/global/global.module.scss';
+import styles from './Workflow.module.scss';
+import { Header } from '@/interfaces/shared/shared';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+interface WorkflowInterface {
+    header: Header;
+    backgroundImage: any;
+}
+
+interface requiredProps{
+    id: string;
+    props: WorkflowInterface;
+}
+
+const Workflow = ({id,props}: requiredProps) => {
+    return (
+        <section id={id} className={`${styles.brand_sec} ${global.padding_block2}`}>
+            <div className={`${styles.custom_container}  ${global.section_padding}`}>
+                <div className={`${styles.header_content}`}>
+                    <div className={styles.content_chip}>{props?.header?.pageTitle || 'How Airbnb Clone work'}</div>
+                    {props?.header?.title && (
+                    <div
+                        className={`${styles.title} ${global.mona_sans_heading1}`}
+                        style={
+                            {
+                                '--heading_color': props?.header?.titleColor,
+                            } as React.CSSProperties as any
+                        }
+                      
+                        >
+                            <ReactMarkdown
+                                rehypePlugins={[rehypeRaw as any]}
+                                skipHtml={false}
+                            >
+                                {props?.header?.title || ''}
+                            </ReactMarkdown>
+                        </div>
+                    )}
+                </div>
+                <div className={`${styles.brand}`}>
+                    <div className={`${styles.center_image}`}>
+                        {props?.backgroundImage?.data?.attributes?.url && (
+                        <img
+                            src={props?.backgroundImage?.data?.attributes?.url}
+                            alt={'cloneBanner'}
+                                width={1284}
+                                height={927}
+                            />
+                        )}
+                    </div>
+                </div>
+            </div>
+            </section>
+        );
+    };
+
+    export default Workflow;

components/MyAppLanding/component/callToAction/CallToAction.tsx

@@ -0,0 +1,117 @@
+import Image from 'next/image';
+
+import global from 'theme/global/global.module.scss';
+import styles from './callToAction.module.scss';
+
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { CtaInterface } from '@/interfaces/mobileAppSubPages';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+interface CTAInterface{
+    contentBody: string | null | undefined;
+    buttonText: string | null | undefined;
+    backgroundImage: any;
+    background: string | null | undefined;
+    sectionBg: string | null | undefined;
+}
+
+interface CallToActionInterface {
+    extraClass?: string;
+    // data: CtaInterface;
+    // onOpen: () => void;
+    props: CTAInterface;
+    onOpen: () => void;
+    id: string;
+}
+
+const CallToAction = ({ extraClass, props, onOpen, id }: CallToActionInterface) => {
+    const { contentBody, buttonText, backgroundImage } = props;
+    const getBackgroundStyle = (): React.CSSProperties => {
+        const background = props?.background ?? '';
+        
+        if (!background || typeof background !== 'string') {
+            return {};
+        }
+
+        // Remove trailing semicolons and whitespace
+        const cleanBackground = background.replace(/[;]\s*$/, '').trim();
+        
+        return cleanBackground ? { background: cleanBackground } : {};
+    };
+    const getSectionBgStyle = (): React.CSSProperties => {
+        const sectionBg = props?.sectionBg ?? '';
+        if (!sectionBg || typeof sectionBg !== 'string') {
+            return {};
+        }
+        return { '--bg_color': sectionBg } as React.CSSProperties;
+    };
+    const backgroundStyle = getBackgroundStyle();
+    const sectionBgStyle = getSectionBgStyle();
+    return (
+        <>
+            <section
+                id={id}
+                className={`${styles.call_to_action_sec} ${global.section_padding} ${global.padding_block2} ${
+                    extraClass && styles[extraClass]
+                }
+                `}
+                style={sectionBgStyle}
+            >
+                <div className={`${styles.custom_container} ${global.container}`}>
+                    <div className={`${styles.inner_hiring_modal}`}>
+                        <div
+                            className={`${styles.content_area}`}
+                            style={backgroundStyle}
+                        >
+                            {backgroundImage?.data?.attributes?.url && (
+                                <div className={styles.overlay_bg}>
+                                    <img src={backgroundImage?.data?.attributes?.url} alt="bg" />
+                                </div>
+                            )}
+                            <div className={`${styles.content_left_side}`}>
+                                <div className={`${styles.action_title} ${global.head4}`}>
+                                    {contentBody && (
+                                        <ReactMarkdown
+                                            rehypePlugins={[rehypeRaw as any]}
+                                            skipHtml={false}
+                                        >
+                                            {contentBody || ''}
+                                        </ReactMarkdown>
+                                    )}
+                                </div>
+                            </div>
+                            <div className={`${styles.content_right_side}`}>
+                                <div className={styles.animate_arrow}>
+                                    <Image
+                                        src={UTILITY_CONSTANTS.IMAGE.MICROSOFT.ANIMATE_ARROW}
+                                        alt="arrow"
+                                        width={126}
+                                        height={65}
+                                    />
+                                </div>
+                                <div className={styles.call_box}>
+                                    <button
+                                        onClick={() => onOpen()}
+                                        className={`${global.heading5} ${global.whiteOutline_btn} ${styles.call_btn}`}
+                                    >
+                                        {buttonText && (
+                                            <ReactMarkdown
+                                                rehypePlugins={[rehypeRaw as any]}
+                                                skipHtml={false}
+                                            >
+                                                {buttonText || ''}
+                                            </ReactMarkdown>
+                                        )}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default CallToAction;

components/MyAppLanding/component/callToAction/callToAction.module.scss

@@ -0,0 +1,180 @@
+@use 'theme/sass' as *;
+
+.call_to_action_sec {
+    width: 100%;
+    position: relative;
+    background: var(--bg_color);
+
+    .custom_container {
+        width: 100%;
+        .inner_hiring_modal {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+
+            .content_area {
+                position: relative;
+                background: var(--grad_bg_016);
+                padding-block: 60px;
+                padding-inline: scaleValue(20px, 50px);
+                border-radius: 20px;
+                width: 100%;
+                @include displayFlex(row, center, space-between);
+                gap: 20px;
+                align-items: center;
+                z-index: 0;
+
+                .overlay_bg {
+                    text-align: center;
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    opacity: 1;
+                    z-index: -1;
+                }
+
+                @include max(991px) {
+                    @include displayFlex(column, center, center);
+                    padding-block: 40px 80px;
+                }
+                .content_left_side {
+                    width: 100%;
+                    max-width: rem(630);
+                    @include max(1025px) {
+                        max-width: 400px;
+                    }
+                    @include max(991px) {
+                        max-width: 100%;
+                        text-align: center;
+                    }
+                    .action_title {
+                        font-family: var(--fn_accent);
+                        font-weight: var(--fw_bold);
+                        color: var(--clr_text_secondary);
+                        & * {
+                            color: var(--clr_text_secondary);
+                            text-transform: capitalize;
+                            font-weight: var(--fw_bold);
+
+                            @include max(768px) {
+                                text-align: center;
+                                font-size: 22px;
+                            }
+                            @include max(576px) {
+                                font-size: 18px;
+                            }
+                        }
+                    }
+                    .sub_title {
+                        color: var(--clr_text_secondary);
+                        margin-block-start: 10px;
+                        @include max(768px) {
+                            text-align: center;
+                        }
+                    }
+                }
+
+                .content_right_side {
+                    width: 100%;
+                    height: 100%;
+                    text-align: end;
+                    @include displayFlex(row, center, center);
+                    @include max(991px) {
+                        padding-block-start: 50px;
+                        text-align: center;
+                        @include displayFlex(row, center, center);
+                    }
+
+                    @include max(576px) {
+                        text-align: center;
+                        @include displayFlex(row, center, center);
+                    }
+                    .animate_arrow {
+                        @include displayFlex(row, center, center);
+                        width: 100%;
+                        @include max(991px) {
+                            display: none;
+                        }
+                        img {
+                            animation: 2s ease 0s infinite normal none running animateArrow;
+                            position: relative;
+                        }
+                        @keyframes animateArrow {
+                            0% {
+                                transform: translateX(0px);
+                            }
+                            50% {
+                                transform: translateX(-10px);
+                            }
+                        }
+                    }
+                    .call_box {
+                        @include displayFlex(row, center, flex-end);
+                        width: 100%;
+                        @include max(991px) {
+                            max-width: 320px;
+                        }
+                        .call_btn {
+                            position: relative;
+                            border-radius: 8px;
+                            color: var(--clr_footer_background);
+                            width: 100%;
+                            max-width: 100%;
+                            margin-inline-start: auto;
+                            & > * {
+                                color: var(--clr_footer_background);
+                            }
+
+                            &:hover {
+                                color: var(--clr_text_secondary);
+                                & > * {
+                                    color: var(--clr_text_secondary);
+                                }
+                                &::before {
+                                    transform: scale(1.05) translateY(-5px);
+                                }
+                                &::after {
+                                    transform: scale(1.05) translateY(5px);
+                                }
+                            }
+                            &::before {
+                                content: '';
+                                background: url('../../../../public/assets/images/microsoft/animation1.svg');
+                                position: absolute;
+                                top: -44px;
+                                left: 0;
+                                width: 103px;
+                                height: 33px;
+                                display: block;
+                                margin: 0px auto;
+                                transition: all 0.3s ease 0s;
+                                right: 0;
+                                pointer-events: none;
+                            }
+                            &::after {
+                                content: '';
+                                background: url('../../../../public/assets/images/microsoft/animation2.svg');
+                                position: absolute;
+                                bottom: -44px;
+                                width: 103px;
+                                height: 33px;
+                                display: block;
+                                margin: 0px auto;
+                                transition: all 0.3s ease 0s;
+                                left: 0;
+                                right: 0;
+                                pointer-events: none;
+                            }
+                        }
+                    }
+                }
+                @include max(768px) {
+                    grid-template-columns: 1fr;
+                    gap: 40px;
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/devicesTechStacks/DevicesTechStacks.module.scss

@@ -0,0 +1,168 @@
+@use 'theme/sass' as *;
+
+.DevicesTechStacks {
+    width: 100%;
+    position: relative;
+    background-color: var(--clr_background_primary);
+    z-index: 1;
+    padding-block-end: scaleValue(40px, 60px);
+    overflow: hidden;
+    .customContainer {
+        position: relative;
+        z-index: 3;
+        .inner_content {
+            width: 100%;
+            .textContent {
+                width: 100%;
+                text-align: center;
+                max-width: rem(1000);
+                margin-inline: auto;
+                .content_chip {
+                    width: fit-content;
+                    line-height: rem(24);
+                    background: var(--clr_case_border2);
+                    padding-block: rem(6);
+                    padding-inline: rem(16);
+                    border-radius: rem(20);
+                    min-height: rem(34);
+                    @include displayFlex(row, center, center);
+                    color: var(--clr_text_primary);
+                    font-weight: var(--fw_medium);
+                    font-family: var(--fn_accent);
+                    margin: 0 auto 20px;
+                    & > * {
+                        color: var(--clr_text_primary);
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                    }
+                }
+                .top_head {
+                    color: var(--clr_vzit_offer_text2);
+
+                    font-family: var(--fn_accent);
+                    & > * {
+                        color: var(--clr_vzit_offer_text2);
+
+                        font-family: var(--fn_accent);
+                        strong {
+                            @include textGradient(var(--heading_color));
+                        }
+                    }
+                    strong {
+                        @include textGradient(var(--heading_color));
+                    }
+                }
+                .sub_text {
+                    color: var(--clr-para);
+                    font-weight: var(--fw_regular);
+                    margin-block-start: rem(20);
+                    & > * {
+                        color: var(--clr-para);
+                        font-weight: var(--fw_regular);
+                        font-family: var(--fn_accent);
+                        max-width: rem(1000);
+                        margin-inline: auto;
+                    }
+                }
+            }
+            .devices_techStacks_content {
+                width: 100%;
+                margin-block-start: scaleValue(20px, 50px);
+                .next_tab {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 20px;
+
+                    & > .next_tabitem {
+                        // background-color: var(--clr_text_secondary);
+                        & :global(.MuiTabs-root) {
+                            min-height: 60px;
+                            overflow: visible !important;
+                            & :global(.MuiTabs-scroller) {
+                                overflow: visible !important;
+                                & :global(.MuiTabs-flexContainer) {
+                                    justify-content: space-between !important;
+                                    overflow: auto;
+                                    // padding-block-end: 10px;
+                                    & :global(.MuiButtonBase-root) {
+                                        font-size: rem(20);
+                                        line-height: 1.4;
+                                        font-weight: var(--fw_medium) !important;
+                                        padding-block: 30px !important;
+                                        text-transform: none;
+                                        color: var(--clr_para_06);
+                                        &:global(.Mui-selected) {
+                                            color: var(--clr_text_primary);
+                                            font-weight: var(--fw_semiBold);
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                // .panel_box {
+                //     overflow: auto;
+                // }
+
+                .frame_tabicon {
+                    position: relative;
+                    @include displayFlex(row, center, center);
+                    ul {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        gap: 32px;
+                        width: fit-content;
+                        flex-wrap: wrap;
+                        @include max(440px) {
+                            gap: rem(10);
+                            display: grid;
+                            grid-template-columns: repeat(2, 1fr);
+                        }
+                        li {
+                            padding: 15px;
+                            text-align: center;
+                            min-width: 115px;
+                            .icon {
+                                width: 120px;
+                                height: 120px;
+                                background: var(--clr_background_primary);
+                                box-shadow: 0px 8px 30px 0px #00000014;
+                                border: 1.68px solid #455a6408;
+                                padding: 15px;
+                                margin: 0 auto;
+                                border-radius: 20px;
+                                img {
+                                    width: 100%;
+                                    height: 100%;
+                                    object-fit: contain;
+                                }
+                                @include max(575px) {
+                                    width: 70px;
+                                    height: 70px;
+                                    padding: 10px;
+                                    border-radius: 10px;
+                                }
+                            }
+                            .txt_title {
+                                margin-block-start: scaleValue(10px, 30px);
+                                line-height: 22px !important;
+                                font-weight: var(--fw_semiBold) !important;
+                                color: var(--clr-para);
+                                font-size: rem(18);
+                                & > * {
+                                    margin-block-start: scaleValue(10px, 30px);
+                                    line-height: 22px !important;
+                                    font-weight: var(--fw_semiBold) !important;
+                                    color: var(--clr-para);
+                                    font-size: rem(18);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/devicesTechStacks/DevicesTechStacks.tsx

@@ -0,0 +1,181 @@
+import React from 'react';
+
+import global from 'theme/global/global.module.scss';
+import styles from './DevicesTechStacks.module.scss';
+import { Technologies } from '@/interfaces/mobileAppSubPages';
+import ReactMarkdown from 'react-markdown';
+import { TechLearningInterface } from '@/interfaces/saasDevelopment.interface';
+import TechLearning from '@/components/saasDevelopment/component/techLearning/TechLearning';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Box from '@mui/material/Box';
+import { ToolInterface } from '@/interfaces/mobileAppSubPages';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import { Header,TechInterface, TechnologyData } from '@/interfaces/shared/shared';
+import rehypeRaw from 'rehype-raw';
+interface TabPanelProps {
+    children?: React.ReactNode;
+    index: number;
+    value: number;
+
+}
+
+function CustomTabPanel(props: TabPanelProps) {
+    const { children, value, index, ...other } = props;
+
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`simple-tabpanel-${index}`}
+            aria-labelledby={`simple-tab-${index}`}
+            {...other}
+        >
+            {value === index && (
+                <Box className={styles.panel_box} sx={{ p: 3 }}>
+                    {children}
+                </Box>
+            )}
+        </div>
+    );
+}
+
+function a11yProps(index: number) {
+    return {
+        id: `simple-tab-${index}`,
+        'aria-controls': `simple-tabpanel-${index}`,
+    };
+}
+interface TechStackInterface {
+    header: Header;
+    tech: TechInterface[];
+}
+interface RequiredProps {
+    props: TechStackInterface;
+    id: string;
+}
+const DevicesTechStacks = ({ props, id }: RequiredProps) => {
+    const [value, setValue] = React.useState(0);
+    const { header, tech } = props;
+
+    const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+        setValue(newValue);
+    };
+
+    const raw = props?.header?.titleColor ?? '';
+    const trimmed = typeof raw === 'string' ? raw.replace(/[;]\s*$/, '').trim() : '';
+    const normalized =
+        trimmed.startsWith('--') ? `var(${trimmed.replace(/:$/, '')})` : trimmed;
+    const headingColor = normalized
+        ? ({ ['--heading_color' as any]: normalized } as React.CSSProperties)
+        : undefined;
+    const backgroundRaw = header?.background ?? '';
+    const backgroundTrimmed = typeof backgroundRaw === 'string' ? backgroundRaw.replace(/[;]\s*$/, '').trim() : '';
+    const backgroundNormalized =
+        backgroundTrimmed.startsWith('--') ? `var(${backgroundTrimmed.replace(/:$/, '')})` : backgroundTrimmed;
+        
+    const backgroundStyle = backgroundNormalized
+        ? ({ ['background' as any]: backgroundNormalized } as React.CSSProperties)
+        : undefined;
+
+    // const hasTitle = techData?.some((data) => data?.title);
+    return (
+        <section
+            id={id}
+            className={`${styles.DevicesTechStacks} ${global.padding_block2} ${global.section_padding} `}
+            style={backgroundStyle}
+        >
+            <div className={`${styles.customContainer} ${global.container}`}>
+                <div className={`${styles.inner_content}`}>
+                    <div className={`${styles.textContent}`}>
+                        {header?.pageTitle && (
+                            <div className={styles.content_chip}>{header?.pageTitle}</div>
+                        )}
+                        {header?.title && (
+                        <div
+                            className={`${global.heading1_1} ${styles.top_head}`}
+                            style={headingColor}
+                        >
+                            <ReactMarkdown
+                                rehypePlugins={[rehypeRaw as any]}
+                                skipHtml={false}
+                            >
+                                {header?.title || ''}
+                            </ReactMarkdown>
+                        </div>
+                        )}
+                        {header?.content && (
+                            <div className={`${global.heading6} ${styles.sub_text}`}>
+                                <ReactMarkdown
+                                    rehypePlugins={[rehypeRaw as any]}
+                                    skipHtml={false}
+                                >
+                                    {header?.content || ''}
+                                </ReactMarkdown>
+                            </div>
+                        )}
+                    </div>
+                    <div className={`${styles.devices_techStacks_content}`}>
+                        <Box className={`${styles.next_tab} `} sx={{ width: '100%' }}>
+                            {/* {hasTitle && (
+                                <Box
+                                    className={`${styles.next_tabitem}`}
+                                    sx={{ borderBottom: 1, borderColor: 'divider' }}
+                                >
+                                    <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
+                                        {[1, 2, 3].map((data, index) => (
+                                            <Tab key={index} {...a11yProps(index)} />
+                                        ))}
+                                    </Tabs>
+                                </Box>
+                            )} */}
+                            <Box className={`${styles.next_tabitem}`} sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                                <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
+                                    {tech?.map((item: TechInterface, i: number) => (
+                                        <Tab key={i} {...a11yProps(i)} label={item?.name} />
+                                    ))}
+                                </Tabs>
+                            </Box>
+                            {tech?.map((item: TechInterface, index: number) => (
+                                <CustomTabPanel value={value} index={index} key={index}>
+                                    <div className={`${styles.frame_tabicon}`}>
+                                        <ul className={styles.item_list}>
+                                            {item?.technologies?.data?.map((listItem: TechnologyData, index: number) => {
+                                                return (
+                                                    <li key={index} className={styles.item}>
+                                                        <div className={styles.icon}>
+                                                            {listItem?.attributes?.icon?.data?.attributes?.url && (
+                                                                <img
+                                                                    src={listItem?.attributes?.icon?.data?.attributes?.url}
+                                                                    width={90}
+                                                                    height={90}
+                                                                    alt={'icon'}
+                                                                    className={styles.next_img}
+                                                                />
+                                                            )}
+                                                        </div>
+                                                        <div className={`${styles.txt_title} ${global.body1}`}>
+                                                            <ReactMarkdown
+                                                                rehypePlugins={[rehypeRaw as any]}
+                                                                skipHtml={false}
+                                                            >
+                                                                {listItem?.attributes?.name || ''}
+                                                            </ReactMarkdown>
+                                                        </div>
+                                                    </li>
+                                                );
+                                            })}
+                                        </ul>
+                                    </div>
+                                </CustomTabPanel>
+                            ))}
+                        </Box>
+                    </div>
+                </div>
+            </div>
+            {/* {techLearning && techLearning?.length > 0 && <TechLearning data={techLearning} />} */}
+        </section>
+    );
+};
+
+export default DevicesTechStacks;

components/MyAppLanding/component/endToEndService/EndToEndService.module.scss

@@ -0,0 +1,214 @@
+@use 'theme/sass' as *;
+
+.advantages_sec {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    background-color: hsl(var(--AppM_clr_bg_primary));
+
+    .custom_container {
+        .inner_auto_services {
+            @include displayFlex(column, flex-start, flex-start);
+            gap: 20px;
+            position: relative;
+
+            .content_box {
+                width: 100%;
+                @include displayFlex(column, center, center);
+
+                @include max(768px) {
+                    padding-block-end: 0;
+                }
+                .sideIcon {
+                    display: none;
+                    width: rem(316);
+                    height: rem(197);
+                    & img.sideIcon_Saas {
+                        width: 100%;
+                        height: 100%;
+                        object-fit: contain;
+                    }
+                }
+                .content {
+                    text-align: center;
+                    width: 100%;
+                    .content_chip {
+                        width: fit-content;
+                        line-height: rem(24);
+                        background: hsl(var(--AppMobile_clr_chip));
+                        padding-block: rem(6);
+                        padding-inline: rem(16);
+                        border-radius: rem(20);
+                        min-height: rem(34);
+                        @include displayFlex(row, center, center);
+                        color: hsl(var(--AppMobile_clr_text_chip));
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                        margin: 0 auto 20px;
+                        & > * {
+                            color: hsl(var(--AppMobile_clr_text_chip));
+                            font-weight: var(--fw_medium);
+                            font-family: var(--fn_accent);
+                        }
+                    }
+                    .high_light {
+                        background: linear-gradient(95.01deg, #017ed0 1.54%, rgba(148, 221, 255, 0.7) 97.01%);
+                        border-radius: 10px;
+                        padding: 1px;
+                        width: fit-content;
+                        margin: auto;
+
+                        .text_high_light {
+                            font-weight: 600;
+                            font-size: 18px;
+                            border-radius: 10px;
+                            background: var(--clr_background_secondary48);
+                            font-weight: 600;
+                            font-size: 18px;
+                            border-radius: 10px;
+                        }
+                    }
+                    .title {
+                        color: var(--clr_vzit_offer_text2);
+                        max-width: rem(797);
+                        margin-inline: auto;
+
+                        & > * {
+                            font-weight: var(--fw_bold);
+                            font-family: var(--fn_accent);
+                            color: var(--clr_vzit_offer_text2);
+                        }
+                        strong {
+                            @include textGradient(var(--heading_color));
+                        }
+                    }
+                    .text {
+                        color: hsl(var(--AppM_clr_text_para));
+                        font-weight: var(--fw_regular);
+                        font-family: var(--font_primary);
+                        max-width: rem(848);
+                        width: 100%;
+                        margin: 30px auto;
+                        & > * {
+                            color: hsl(var(--AppM_clr_text_para));
+                            font-weight: var(--fw_regular);
+                            font-family: var(--font_primary);
+                        }
+                    }
+                }
+            }
+            .services_box_wrap {
+                @include displayFlex(row, flex-start, space-between);
+                gap: 20px;
+                width: 100%;
+                @include max(767px) {
+                    @include displayFlex(column, flex-start, flex-start);
+                }
+                .services_box_content {
+                    // display: grid;
+                    // grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
+                    @include displayFlex(column, flex-start, flex-start);
+                    gap: 20px;
+                    width: 100%;
+
+                    :global(.MuiPaper-root) {
+                        width: 100%;
+                        box-shadow: none;
+                        border: none;
+                        border-radius: 15px;
+                        padding-inline: 20px;
+                        padding-block: 20px;
+                        background: var(--bg_color, #F8F8F8);
+
+                        &::before {
+                            display: none;
+                        }
+                        img {
+                            width: rem(32);
+                            height: rem(32);
+                            object-fit: contain;
+                        }
+                        .title {
+                            font-weight: var(--fw_semiBold);
+                            font-family: var(--fn_accent);
+                            color: var(--clr_new_power_dark_blue2);
+                            margin-block-end: 0;
+                            & > * {
+                                font-weight: var(--fw_semiBold);
+                                font-family: var(--fn_accent);
+                                color: var(--clr_new_power_dark_blue2);
+                                margin-block-end: 0;
+                            }
+                        }
+                        .para {
+                            font-weight: var(--fw_regular);
+                            font-family: var(--font_primary);
+                        }
+                        &:global(.Mui-expanded) {
+                            background: var(--clr_background_secondary45);
+                            margin: 0;
+                            .title {
+                                color: var(--clr_text_secondary);
+                                & > * {
+                                    color: var(--clr_text_secondary);
+                                }
+                            }
+                            img {
+                                filter: brightness(0) saturate(100%) invert(99%) sepia(59%) saturate(0%)
+                                    hue-rotate(198deg) brightness(120%) contrast(100%);
+                            }
+                            .para {
+                                color: var(--clr_text_secondary);
+                                & > * {
+                                    color: var(--clr_text_secondary);
+                                }
+                            }
+                            // img {
+                            //     filter: invert(1) grayscale(1) brightness(2);
+                            // }
+                            :global(.MuiAccordionSummary-content) {
+                                .expanded_icon {
+                                    display: block;
+                                    color: var(--clr_text_secondary);
+                                }
+                                .icon {
+                                    display: none;
+                                }
+                            }
+                            :global(.MuiCollapse-root) {
+                                max-width: 645px;
+                                width: 100%;
+                                margin-block-start: 10px;
+                            }
+                            :global(.MuiAccordionSummary-content) {
+                                svg {
+                                    color: var(--clr_text_secondary);
+                                }
+                            }
+                            :global(.MuiSvgIcon-root) {
+                                fill: var(--clr_text_secondary);
+                            }
+                        }
+                        & :global(.MuiAccordionSummary-expandIconWrapper) {
+                            svg {
+                                fill: var(--clr_new_power_dark_blue2);
+                            }
+                        }
+                        :global(.MuiAccordionSummary-content) {
+                            margin-block: 0;
+                            justify-content: flex-start;
+                            align-items: center;
+                            gap: 20px;
+                            svg {
+                                color: var(--clr_new_power_dark_blue2);
+                            }
+                        }
+                        :global(.MuiButtonBase-root) {
+                            min-height: 50px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/endToEndService/EndToEndService.tsx

@@ -0,0 +1,202 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+import global from 'theme/global/global.module.scss';
+import styles from './EndToEndService.module.scss';
+
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+import { ServiceAccordionInterface } from '@/interfaces/eCommerceDevelopment.interface';
+import { Header, KeyNote } from '@/interfaces/shared/shared';
+import { Diversity1 } from '@mui/icons-material';
+
+interface EndToEndServiceInterface {
+    header: Header;
+    models: KeyNote[];
+}
+interface serviceAccordionDataInterface {
+    serviceAccordionData: ServiceAccordionInterface;
+    id?: string;
+    extraClass?: string;
+    props: EndToEndServiceInterface;
+}
+
+const EndToEndService = ({ serviceAccordionData, id, extraClass, props }: serviceAccordionDataInterface) => {
+    const { header, models } = props;
+    const [expanded, setExpanded] = React.useState<string | false>(false);
+    const raw = header.titleColor ?? '';
+    const trimmed = typeof raw === 'string' ? raw.replace(/[;]\s*$/, '').trim() : '';
+    const normalized = trimmed.startsWith('--') 
+        ? `var(${trimmed.replace(/:$/, '')})` 
+        : trimmed;
+    const titleColorStyle = normalized
+        ? ({ ['--heading_color' as any]: normalized } as React.CSSProperties)
+        : undefined;
+
+    const backgroundRaw = header.background ?? '';
+    const backgroundTrimmed = typeof backgroundRaw === 'string' ? backgroundRaw.replace(/[;]\s*$/, '').trim() : '';
+    const backgroundNormalized = backgroundTrimmed.startsWith('--') 
+        ? `var(${backgroundTrimmed.replace(/:$/, '')})` 
+        : backgroundTrimmed;
+    const backgroundStyle = backgroundNormalized
+        ? ({ ['background' as any]: backgroundNormalized } as React.CSSProperties)
+        : undefined;
+
+    const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+        setExpanded(isExpanded ? panel : false);
+    };
+
+    const halfLength = Math.ceil(models?.length / 2);
+
+    return (
+        <>
+            <section
+                id={id}
+                className={`${styles.advantages_sec} ${global.section_padding}  ${global.padding_block2} ${
+                    extraClass && styles[extraClass]
+                }`}
+                style={backgroundStyle}
+            >
+                <div className={`${styles.custom_container} ${global.container}`}>
+                    <div className={`${styles.inner_auto_services} `}>
+                        <div className={styles.content_box}>
+                            <div className={styles.content}>
+                                {header?.pageTitle && <div className={styles.content_chip}>{header?.pageTitle}</div>}
+                                {header?.title && (
+                                    <div
+                                        className={`${global.heading1_1} ${styles.title}`}
+                                        style={titleColorStyle}
+                                    >
+                                        <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                            {header?.title || ''}
+                                        </ReactMarkdown>
+                                    </div>
+                                )}
+                                {header?.content && (
+                                    <div className={`${styles.text} ${global.details1}`}>
+                                        {header?.content && (
+                                            <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                                {header?.content || ''}
+                                            </ReactMarkdown>
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                        <div className={styles.services_box_wrap}>
+                            <div className={styles.services_box_content}>
+                                {models?.length &&
+                                    models?.slice(0, halfLength).map((item: KeyNote, i: number) => {
+                                        const noteRaw = item.noteIconBg ?? '';
+                                        const noteTrimmed = typeof noteRaw === 'string' ? noteRaw.replace(/[;]\s*$/, '').trim() : '';
+                                        const noteNormalized = noteTrimmed.startsWith('--') 
+                                            ? `var(${noteTrimmed.replace(/:$/, '')})` 
+                                            : noteTrimmed;
+                                        const noteIconBgStyle = noteNormalized
+                                            ? ({ ['--bg_color' as any]: noteNormalized } as React.CSSProperties)
+                                            : undefined;
+                                        return (
+                                        <Accordion
+                                            key={i}
+                                            expanded={expanded === `panelLeft${i}`}
+                                            onChange={handleChange(`panelLeft${i}`)}
+                                            style={noteIconBgStyle}
+                                        >
+                                            <AccordionSummary
+                                                expandIcon={<ExpandMoreIcon />}
+                                                aria-controls={`panelLeft${i}bh-content`}
+                                                id={`panelLeft${i}bh-header`}
+                                            >
+                                                <img
+                                                    src={item.noteImage?.data?.attributes?.url}
+                                                    width={32}
+                                                    height={32}
+                                                    alt={'icon'}
+                                                />
+                                                <div className={`${global.heading6} ${styles.title}`}>
+                                                    <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                                        {item?.noteTitle || ''}
+                                                    </ReactMarkdown>
+                                                </div>
+                                            </AccordionSummary>
+                                            <AccordionDetails>
+                                                <div className={`${global.body1} ${styles.para}`}>
+                                                    {item.noteBody && (
+                                                        <ReactMarkdown
+                                                            rehypePlugins={[rehypeRaw as any]}
+                                                            skipHtml={false}
+                                                        >
+                                                            {item.noteBody}
+                                                        </ReactMarkdown>
+                                                    )}
+                                                </div>
+                                            </AccordionDetails>
+                                        </Accordion>
+                                    )
+                                })}
+                            </div>
+                            <div className={styles.services_box_content}>
+                                {models?.length &&
+                                    models?.slice(halfLength, models?.length).map((item: KeyNote, i: number) => {
+                                        const noteRaw = item.noteIconBg ?? '';
+                                        const noteTrimmed = typeof noteRaw === 'string' ? noteRaw.replace(/[;]\s*$/, '').trim() : '';
+                                        const noteNormalized = noteTrimmed.startsWith('--') 
+                                            ? `var(${noteTrimmed.replace(/:$/, '')})` 
+                                            : noteTrimmed;
+                                        const noteIconBgStyle = noteNormalized
+                                            ? ({ ['--bg_color' as any]: noteNormalized } as React.CSSProperties)
+                                            : undefined;
+                                        return (
+                                        <Accordion
+                                            key={i + halfLength}
+                                            expanded={expanded === `panelRight${i}`}
+                                            onChange={handleChange(`panelRight${i}`)}
+                                            style={noteIconBgStyle}
+                                        >
+                                            <AccordionSummary
+                                                expandIcon={<ExpandMoreIcon />}
+                                                aria-controls={`panelRight${i}bh-content`}
+                                                id={`panelRight${i}bh-header`}
+                                            >
+                                                <img
+                                                    src={item.noteImage?.data?.attributes?.url}
+                                                    alt={'icon'}
+                                                    width={32}
+                                                    height={32}
+                                                />
+                                                <div className={`${global.heading6} ${styles.title}`}>
+                                                    <ReactMarkdown rehypePlugins={[rehypeRaw as any]} skipHtml={false}>
+                                                        {item?.noteTitle || ''}
+                                                    </ReactMarkdown>
+                                                </div>
+                                            </AccordionSummary>
+                                            <AccordionDetails>
+                                                <div className={`${global.body1} ${styles.para}`}>
+                                                    {item.noteBody && (
+                                                        <ReactMarkdown
+                                                            rehypePlugins={[rehypeRaw as any]}
+                                                            skipHtml={false}
+                                                        >
+                                                            {item.noteBody}
+                                                        </ReactMarkdown>
+                                                    )}
+                                                </div>
+                                            </AccordionDetails>
+                                        </Accordion>
+                                    )
+                                })}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default EndToEndService;

components/MyAppLanding/component/howItWorks/howItWorks.module.scss

@@ -0,0 +1,189 @@
+@use 'theme/sass' as *;
+
+.devicesWhyIos {
+    width: 100%;
+    position: relative;
+    background: hsl(var(--AppM_clr_bg_dark_secondary));
+    z-index: 1;
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100%;
+        height: 100%;
+        max-width: rem(1232);
+        max-height: rem(843);
+        background: url('../../../../public/assets/images/myAppmobile/nex-work-bg.png') no-repeat center center;
+    }
+    &::before {
+        content: '';
+        position: absolute;
+        top: -25%;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100%;
+        max-width: 800px;
+        height: 600px;
+        border-radius: 50%;
+        background: radial-gradient(#fbfeff21, #ffffff4a);
+        filter: blur(127px);
+    }
+    .customContainer {
+        position: relative;
+        z-index: 3;
+        .inner_content {
+            width: 100%;
+            position: relative;
+            .textContent {
+                width: 100%;
+                @include displayFlex(column, center, flex-start);
+                gap: rem(12);
+                max-width: rem(915);
+                margin: 0 auto;
+                text-align: center;
+
+                .content_chip {
+                    width: fit-content;
+                    line-height: rem(24);
+                    // background: var(--clr_background_primary);
+                    background: #ffffff21;
+                    -webkit-backdrop-filter: blur(38.05px);
+                    backdrop-filter: blur(38.05px);
+                    padding-inline: rem(16);
+                    padding-block: rem(6);
+                    border-radius: rem(20);
+                    min-height: rem(34);
+                    @include displayFlex(row, center, center);
+                    color: var(--clr_text_secondary);
+                    font-weight: var(--fw_medium);
+                    font-family: var(--fn_accent);
+                    margin-block-end: rem(10);
+                    & > * {
+                        color: var(--clr_text_secondary);
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                    }
+                }
+                .top_head {
+                    color: var(--clr_text_secondary);
+
+                    & > * {
+                        color: var(--clr_text_secondary);
+
+                        font-family: var(--fn_accent);
+                        strong {
+                            @include textGradient(var(--heading_color));
+                        }
+                    }
+                    strong {
+                        @include textGradient(var(--heading_color));
+                    }
+                }
+                .sub_text {
+                    max-width: rem(833);
+                    font-weight: var(--fw_regular);
+                    font-family: var(--font_primary);
+                    color: var(--lnd2_clr_shade_sky_01);
+
+                    & > * {
+                        color: var(--lnd2_clr_shade_sky_01);
+                        margin-block-start: rem(20);
+                        font-weight: var(--fw_regular);
+                        font-family: var(--font_primary);
+                        max-width: rem(1000);
+                    }
+                }
+            }
+            .devices_whyIos_contentSlide {
+                margin-block-start: scaleValue(30px, 60px);
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                gap: rem(36);
+                @include max(991px) {
+                    grid-template-columns: repeat(2, 1fr);
+                }
+                @include max(575px) {
+                    grid-template-columns: 1fr;
+                }
+                .box {
+                    height: 100%;
+                    width: 100%;
+                    transition: var(--transition_02);
+                    text-align: center;
+                    padding-inline: scaleValue(0px, 20px);
+                    .image_box {
+                        margin: 0 auto;
+                        border-top: none;
+                        border-right: none;
+                        width: rem(260);
+                        height: rem(260);
+                        @include displayFlex(row, center, center);
+                        z-index: 1;
+                        position: relative;
+                        @include max(991px) {
+                            width: rem(200);
+                            height: rem(200);
+                            margin-bottom: rem(20);
+                        }
+                        &::after {
+                            content: '';
+                            position: absolute;
+                            top: 0;
+                            left: 50%;
+                            transform: translateX(-50%);
+                            max-width: rem(240);
+                            max-height: rem(240);
+                            width: 100%;
+                            height: 100%;
+                            background: url('../../../../public/assets/images/myAppmobile/box-arrow.png') no-repeat
+                                center center;
+                            background-size: contain;
+                        }
+
+                        .iconBox {
+                            width: rem(70);
+                            height: rem(70);
+                            background: linear-gradient(180deg, #11aef1 0%, #1ec0b7 100%);
+                            border-radius: 50%;
+                            @include displayFlex(row, center, center);
+                        }
+                    }
+                    .details {
+                        text-align: center;
+
+                        .title {
+                            margin-block-end: scaleValue(8px, 15px);
+                            color: var(--clr_text_secondary);
+                            & > * {
+                                margin-block-end: scaleValue(8px, 15px);
+                                color: var(--clr_text_secondary);
+                            }
+                        }
+                        .para {
+                            margin-block-start: rem(10);
+                            color: var(--lnd2_clr_shade_sky_01);
+                            font-weight: var(--fw_regular);
+                            font-family: var(--font_primary);
+                            & > * {
+                                color: var(--lnd2_clr_shade_sky_01);
+                                font-weight: var(--fw_regular);
+                                font-family: var(--font_primary);
+
+                                @include max(991px) {
+                                    margin-block-start: rem(8);
+                                }
+                            }
+                        }
+                    }
+                    &:nth-child(2) .image_box::after,
+                    &:nth-child(5) .image_box::after,
+                    &:nth-child(8) .image_box::after {
+                        transform: translateX(-50%) rotate(180deg) scaleX(-1);
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/howItWorks/howItWorks.tsx

@@ -0,0 +1,111 @@
+
+import { useState } from 'react';
+import styles from './howItWorks.module.scss';
+import global from 'theme/global/global.module.scss';
+import Image from 'next/image';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Box from '@mui/material/Box';
+import { FaCheckCircle } from 'react-icons/fa';
+import { Header, KeyNote } from '@/interfaces/shared/shared';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+interface RequiredProps{
+    props: HowItWorksInterface;
+    extraClass?: string;
+    id: string;
+}
+
+interface HowItWorksInterface {
+    header: Header;
+    details: KeyNote[];
+    tabs: string;
+}
+
+const howItWorks = ({ extraClass, props, id }: RequiredProps) => {
+    const { header, details, tabs } = props;
+    const [value, setValue] = useState(0);
+    const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+        setValue(newValue);
+    };
+
+    return (
+        <section id={id} className={`${styles.devicesWhyIos} ${global.padding_block2} ${global.section_padding}`}>
+            <div className={`${styles.customContainer} ${global.container}`}>
+                <div className={`${styles.inner_content} `}>
+                    <div className={`${styles.textContent}`}>
+                        {header?.pageTitle && (
+                            <div className={styles.content_chip}>{header?.pageTitle}</div>
+                        )}
+                        {header?.title && (
+                        <div
+                            className={`${global.heading1_1} ${styles.top_head}`}
+                            style={
+                                {
+                                    '--heading_color': header.titleColor
+                                        ? header.titleColor
+                                        : 'linear-gradient(90deg, #11AEF1 15.54%, #1EC0B7 77.61%)',
+                                } as React.CSSProperties as any
+                            }
+                        >
+                            <ReactMarkdown
+                                rehypePlugins={[rehypeRaw as any]}
+                                skipHtml={false}
+                            >
+                                {header?.title || ''}
+                            </ReactMarkdown>
+                        </div>
+                        )}
+                        {header?.content && (
+                            <div className={`${global.details1} ${styles.sub_text}`}>
+                                <ReactMarkdown
+                                    rehypePlugins={[rehypeRaw as any]}
+                                    skipHtml={false}
+                                >
+                                    {header?.content || ''}
+                                </ReactMarkdown>
+                            </div>
+                        )}
+                    </div>
+                    <div className={`${styles.devices_whyIos_contentSlide}`}>
+                        {details?.map((item: KeyNote, i: number) => (
+                            <div key={i} className={styles.box}>
+                                <div className={styles.image_box}>
+                                    {item?.noteImage?.data?.attributes?.url && (
+                                        <img key={i} src={item.noteImage?.data?.attributes?.url} alt={item.noteTitle || ''} />
+                                    )}
+                                </div>
+                                <div className={styles.details}>
+                                    {item?.noteTitle && (
+                                        <div className={`${global.heading5} ${styles.title}`}>
+                                            <ReactMarkdown
+                                                rehypePlugins={[rehypeRaw as any]}
+                                                skipHtml={false}
+                                            >
+                                                {item?.noteTitle || ''}
+                                            </ReactMarkdown>
+                                        </div>
+                                    )}
+                                    {item?.noteBody && (
+                                        <div className={`${global.body1} ${styles.para}`}>
+                                            <ReactMarkdown
+                                                rehypePlugins={[rehypeRaw as any]}
+                                                skipHtml={false}
+                                            >
+                                                {item?.noteBody || ''}
+                                            </ReactMarkdown>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default howItWorks;

components/MyAppLanding/component/netflixBenefit/NetflixBenefit.module.scss

@@ -0,0 +1,174 @@
+@use 'theme/sass' as *;
+
+.devicesWhyIos {
+    width: 100%;
+    position: relative;
+    // background: url('./../../../../public/assets/images/myAppmobile/nex-work-gradient-bg.png') no-repeat center center;
+    // background-size: cover;
+    background: hsl(var(--AppM_clr_bg_primary));
+    z-index: 1;
+
+    .customContainer {
+        position: relative;
+        z-index: 3;
+        .inner_content {
+            width: 100%;
+            position: relative;
+            .textContent {
+                width: 100%;
+                @include displayFlex(column, center, flex-start);
+                gap: rem(12);
+                max-width: rem(915);
+                margin: 0 auto;
+                text-align: center;
+
+                .content_chip {
+                    width: fit-content;
+                    line-height: rem(24);
+                    background: var(--clr_background_primary);
+                    padding-inline: rem(16);
+                    padding-block: rem(6);
+                    border-radius: rem(20);
+                    min-height: rem(34);
+                    @include displayFlex(row, center, center);
+                    color: hsl(var(--AppMobile_clr_text_chip));
+                    font-weight: var(--fw_medium);
+                    font-family: var(--fn_accent);
+                    margin-block-end: rem(10);
+                    & > * {
+                        color: hsl(var(--AppMobile_clr_text_chip));
+                        font-weight: var(--fw_medium);
+                        font-family: var(--fn_accent);
+                    }
+                }
+                .top_head {
+                    color: var(--clr_vzit_offer_text2);
+                     
+                    & > * {
+                        color: var(--clr_vzit_offer_text2);
+                         
+                        font-family: var(--fn_accent);
+                        strong {
+                            @include textGradient(var(--heading_color));
+                        }
+                    }
+                    strong {
+                        @include textGradient(var(--heading_color));
+                    }
+                }
+                .sub_text {
+                    max-width: rem(833);
+                    font-weight: var(--fw_regular);
+                    font-family: var(--font_primary);
+                    color: var(--clr_vzit_offer_text);
+
+                    & > * {
+                        color: var(--clr_vzit_offer_text);
+                        margin-block-start: rem(20);
+                        font-weight: var(--fw_regular);
+                        font-family: var(--font_primary);
+                        max-width: rem(1000);
+                    }
+                }
+            }
+            .devices_whyIos_contentSlide {
+                margin-block-start: scaleValue(30px, 60px);
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                gap: rem(19);
+                @include max(991px) {
+                    grid-template-columns: repeat(2, 1fr);
+                }
+                @include max(575px) {
+                    grid-template-columns: 1fr;
+                }
+                .box {
+                    height: 100%;
+                    width: 100%;
+                    transition: var(--transition_02);
+                    border: 1px solid hsl(var(--AppM_border_01));
+                    padding-block: rem(24);
+                    padding-inline-start: scaleValue(20px, 34px);
+                    border-radius: rem(10);
+                    &:hover {
+                        background: var(--clr_background_primary);
+                        border-color: var(--clr_border_secondary);
+                        & .upperBlk {
+                            .boxCount {
+                                position: relative;
+                                right: -1px;
+                                background: hsl(var(--AppM_clr_bg_light_blue_chip_01));
+                            }
+                        }
+                    }
+                    .upperBlk {
+                        @include displayFlex(row, center, space-between);
+                        .image_box {
+                            border-top: none;
+                            border-right: none;
+                            width: rem(60);
+                            height: rem(60);
+                            @include displayFlex(row, center, center);
+                            z-index: 1;
+                            position: relative;
+                            margin-block-end: rem(8);
+
+                            &::after {
+                                content: '';
+                                position: absolute;
+                                bottom: -10px;
+                                right: -20%;
+                                transform: translateX(0%);
+                                width: rem(43);
+                                height: rem(43);
+                                border-radius: 50%;
+                                background: hsl(var(--AppM_clr_bg_blue_chip_01));
+                                opacity: 0.1;
+                            }
+                        }
+                        .boxCount {
+                            padding: rem(8) rem(12);
+                            border-top-left-radius: rem(6);
+                            border-bottom-left-radius: rem(6);
+                            @include displayFlex(row, center, center);
+                            background: transparent;
+                            .text_count {
+                                font-family: var(--font_primary);
+                                font-weight: var(--fw_medium);
+                                color: hsl(var(--AppM_clr_deep_blue_chip_01));
+                                & > * {
+                                    font-family: var(--font_primary);
+                                    font-weight: var(--fw_medium);
+                                    color: hsl(var(--AppM_clr_deep_blue_chip_01));
+                                }
+                            }
+                        }
+                    }
+
+                    .details {
+                        padding-inline-end: rem(10);
+                        .title {
+                            margin-block: scaleValue(8px, 15px);
+                            color: var(--clr_vzit_offer_text2);
+                            font-family: var(--fn_accent);
+                            font-weight: var(--fw_bold);
+                            & > * {
+                                color: var(--clr_vzit_offer_text2);
+                            }
+                        }
+                        .para {
+                            color: var(--clr-para);
+                            font-weight: var(--fw_regular);
+                            font-family: var(--font_primary);
+                            & > * {
+                                color: var(--clr-para);
+                                font-weight: var(--fw_regular);
+                                font-family: var(--font_primary);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

components/MyAppLanding/component/netflixBenefit/NetflixBenefit.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import global from 'theme/global/global.module.scss';
+import styles from './NetflixBenefit.module.scss';
+import { BusinessSliderInterface } from '@/interfaces/mobileAppSubPages';
+import { UTILITY_CONSTANTS } from '@/constants/utilityConstants';
+
+const NetflixBenefit = () => {
+    return (
+        <section className={`${styles.devicesWhyIos} ${global.padding_block2} ${global.section_padding}`}>
+            <div className={`${styles.customContainer} ${global.container}`}>
+                <div className={`${styles.inner_content} `}>
+                    <div className={`${styles.textContent}`}>
+                        <div className={styles.content_chip}>
+                            Cutting-Edge Technologies for Your Netflix-Like Application
+                        </div>
+                        <h2
+                            className={`${global.heading1_1} ${styles.top_head}`}
+                            style={
+                                {
+                                    '--heading_color': 'linear-gradient(180deg, #E50914 21.19%, #FF8288 76.27%)',
+                                } as React.CSSProperties as any
+                            }
+                        >
+                            Benefits of <strong>Netflix </strong>Clone App Development 
+                        </h2>
+                        <p className={`${global.heading6} ${styles.sub_text}`}>
+                            Now is the perfect time to tap into the booming video streaming market. With the need for
+                            on-demand content skyrocketing, ConvexSol’s experienced experts are here to help you create
+                            an advanced and scalable solution.
+                        </p>
+                    </div>
+                    <div className={`${styles.devices_whyIos_contentSlide}`}>
+                        {[1, 2, 3, 4, 5, 6]?.map((item, i) => (
+                            <div className={styles.box}>
+                                <div className={styles.upperBlk}>
+                                    <div className={styles.image_box}>
+                                        <img
+                                            key={i}
+                                            src={UTILITY_CONSTANTS.IMAGE.MY_APP_MOBILE.MY_APP_MOBILE_NEXBENEFITICON}
+                                            width={59}
+                                            height={59}
+                                            alt={'nexIcon'}
+                                        />
+                                    </div>
+                                    <div className={styles.boxCount}>
+                                        <h4 className={`${global.heading5} ${styles.text_count}`}>01</h4>
+                                    </div>
+                                </div>
+                                <div className={styles.details}>
+                                    <h4 className={`${global.head44} ${styles.title}`}>Customization </h4>
+                                    <p className={`${global.body1} ${styles.para}`}>
+                                        Developing video streaming apps like Netflix can help you stand out from the
+                                        competition by tailoring your streaming platform to your brand. With our clone
+                                        app development, you can add unique features that reflect your vision and
+                                        needs. 
+                                    </p>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default NetflixBenefit;

components/MyAppLanding/component/netflixGenFeature/FeatureCard/FeatureCard.module.scss

@@ -0,0 +1,294 @@
+@use 'theme/sass' as *;
+
+.streamline_overview_content {
+    width: 100%;
+    // background-color: var(--clr_background_primary);
+    margin-block-start: scaleValue(20px, 50px);
+    // background: var(--AppM_clr_bg_light_blue_chip);
+    // border-radius: rem(40);
+
+    & :global(.MuiBox-root) {
+        border: none;
+        padding: 0;
+
+        & :global(.MuiTabs-root) {
+            clip-path: polygon(0 0, 100% 0, 100% 0, 90% 100%, 0 100%);
+            position: absolute;
+            z-index: 2;
+            background: var(--clr_background_primary);
+            max-width: 800px;
+            width: 100%;
+            border-bottom: 1px solid hsl(var(--AppM_border_06));
+            &::after {
+                content: '';
+                position: absolute;
+                right: 34px;
+                bottom: -18px;
+                width: 2px;
+                height: 8.125rem;
+                background: hsl(var(--AppM_border_06));
+                transform: rotate(44deg);
+            }
+            @include max(1023px) {
+                position: relative;
+                border: 1px solid hsl(var(--AppM_border_06));
+                border-radius: rem(32);
+                clip-path: none;
+                padding: rem(20) rem(18) 0;
+                max-width: 100%;
+                &::after {
+                    display: none;
+                }
+            }
+            & :global(.MuiTabs-scroller) {
+                overflow: auto !important;
+                margin-inline-end: 55px;
+                @include max(991px) {
+                    margin-inline-end: 0;
+                }
+                & :global(.MuiTabs-flexContainer) {
+                    justify-content: flex-start;
+                    gap: rem(16);
+                    margin-block-end: rem(20);
+
+                    :global(.MuiButtonBase-root) {
+                        font-size: rem(18);
+                        font-weight: var(--fw_semiBold);
+                        color: var(--clr_vzit_bg);
+                        font-family: var(--fn_accent);
+                        width: 100%;
+                        max-width: rem(170);
+                        margin: 0;
+                        text-transform: capitalize;
+                        padding: rem(8) rem(8);
+                        border-radius: rem(50);
+                        border: 1px solid hsl(var(--AppM_border_05));
+                        @include displayFlex(row, center, flex-start);
+                        &:global(.Mui-selected) {
+                            // box-shadow: 0px 4px 40px 0px #0000001a;
+                            background: linear-gradient(180deg, #1ec0b7 0%, #11aef1 100%);
+                            & .tab_label {
+                                color: var(--clr_text_secondary);
+                                & > * {
+                                    color: var(--clr_text_secondary);
+                                }
+                            }
+                            & .iconTab > * {
+                                background: var(--clr_background_primary);
+                                border-radius: 50%;
+                                @include displayFlex(row, center, center);
+                                // img{
+                                //     filter: brightness(1) invert(1) ;
+                                // }
+                                & svg {
+                                    fill: var(--clr_vzit_offer_text2);
+                                    color: var(--clr_vzit_offer_text2);
+                                    filter: brightness(0) saturate(100%) invert(12%) sepia(19%) saturate(17%)
+                                        hue-rotate(329deg) brightness(99%) contrast(85%);
+                                }
+                            }
+                        }
+
+                        & .iconTab > * {
+                            border-radius: 50%;
+                            width: rem(44);
+                            height: rem(44);
+                            background: hsl(var(--AppM_border_05));
+                            @include displayFlex(row, center, center);
+                            p {
+                                @include displayFlex(row, center, center);
+                            }
+                            img {
+                                width: rem(24);
+                                height: rem(24);
+                            }
+                            & svg {
+                                width: rem(24);
+                                height: rem(24);
+                                position: relative;
+                                filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%)
+                                    hue-rotate(288deg) brightness(102%) contrast(102%);
+                            }
+                        }
+                        & .tab_label {
+                            color: var(--clr_vzit_offer_text2);
+                            font-weight: var(--fw_bold);
+                            font-family: var(--fn_accent);
+                            & > * {
+                                color: var(--clr_vzit_offer_text2);
+                                font-weight: var(--fw_bold);
+                                font-family: var(--fn_accent);
+                            }
+                        }
+                    }
+                }
+                & :global(.MuiTabs-indicator) {
+                    display: none;
+                }
+            }
+        }
+        & :global(.MuiPaper-root) {
+            background: var(--AppM_clr_bg_light_blue_chip);
+            padding: rem(14);
+            padding-block-start: rem(85);
+            border: 1px solid hsl(var(--AppM_border_06));
+            border-radius: rem(40);
+            @include max(1023px) {
+                padding-block-start: rem(14);
+            }
+            & .tabContent_title {
+                color: var(--clr_vzit_offer_text2);
+                font-weight: var(--fw_semiBold);
+                font-family: var(--font_primary);
+                padding-inline-start: rem(24);
+                padding-block: rem(14);
+                & > * {
+                    color: var(--clr_vzit_offer_text2);
+                    font-weight: var(--fw_semiBold);
+                    font-family: var(--font_primary);
+                }
+            }
+            & .tabContent {
+                background: var(--clr_background_primary);
+                border-radius: rem(40);
+                padding: scaleValue(12px, 24px) scaleValue(12px, 20px);
+                & :global(.MuiListItemText-root) {
+                    margin: 0;
+                }
+                & .title {
+                    font-weight: var(--fw_bold);
+                    font-family: var(--font_primary);
+                    color: var(--clr_vzit_offer_text2);
+                    & > * {
+                        font-weight: var(--fw_bold);
+                        font-family: var(--font_primary);
+                        color: var(--clr_vzit_offer_text2);
+                    }
+                }
+                & .details {
+                    font-weight: var(--fw_regular);
+                    font-family: var(--font_primary);
+                    color: var(--clr_vzit_offer_text);
+                    & > * {
+                        font-weight: var(--fw_regular);
+                        font-family: var(--font_primary);
+                        color: var(--clr_vzit_offer_text);
+                    }
+                    ul {
+                        width: 100%;
+                        li {
+                            color: var(--clr_vzit_offer_text);
+                            font-size: rem(18);
+                            line-height: 1.3;
+                            font-weight: var(--fw_regular);
+                            margin-block-start: rem(18);
+                            position: relative;
+                            padding-inline-start: rem(35);
+                            &:first-child {
+                                margin-block-start: 0;
+                            }
+                            & > * {
+                                font-weight: var(--fw_regular);
+                                font-family: var(--font_primary);
+                                color: var(--clr_vzit_offer_text);
+                                font-size: rem(18);
+                                line-height: 1.4;
+                                strong {
+                                    font-weight: var(--fw_bold);
+                                    color: var(--clr_vzit_offer_text2);
+                                    & > * {
+                                        font-weight: var(--fw_bold);
+                                        color: var(--clr_vzit_offer_text2);
+                                    }
+                                }
+                            }
+                            & > * > h4,
+                            strong {
+                                font-weight: var(--fw_bold);
+                                color: var(--clr_vzit_offer_text2);
+                                & > * {
+                                    font-weight: var(--fw_bold);
+                                    color: var(--clr_vzit_offer_text2);
+                                }
+                            }
+                            & > * > * {
+                                color: var(--clr_vzit_offer_text);
+                                font-size: rem(18);
+                                line-height: 1.4;
+                                font-weight: var(--fw_regular);
+                            }
+                            &::before {
+                                content: '';
+                                position: absolute;
+                                top: rem(5);
+                                left: 0;
+                                width: rem(15);
+                                height: rem(15);
+                                background: url('../../../../../public/assets/images/myAppmobile/checked.png') no-repeat
+                                    center center;
+                                filter: brightness(0) saturate(100%) invert(89%) sepia(11%) saturate(707%)
+                                    hue-rotate(162deg) brightness(95%) contrast(95%);
+                            }
+                        }
+                    }
+                }
+            }
+            & .logoIcon {
+                position: absolute;
+                top: rem(15);
+                right: rem(20);
+                width: 100%;
+                max-width: rem(352);
+                position: absolute;
+
+                .logoTitle {
+                    @include textGradient(var(--heading_color));
+                    font-size: scaleValue(40px, 90px);
+                    font-weight: var(--fw_semiBold);
+                    position: relative;
+                    .logoIcon {
+                        position: absolute;
+                        top: 0;
+                        left: 50%;
+                        transform: translateX(-50%);
+                        background-size: contain;
+                        width: 100%;
+                        height: 100%;
+                        max-width: rem(104);
+                        max-height: rem(104);
+                        img {
+                            width: 100%;
+                            height: 100%;
+                            max-width: rem(104);
+                            max-height: rem(104);
+                        }
+                    }
+                    // &::after {
+                    //     content: '';
+                    //     position: absolute;
+                    //     top: 0;
+                    //     left: 50%;
+                    //     transform: translateX(-50%);
+                    //     background: url('./../../../../../public/assets/images/myAppmobile/browser.png') no-repeat
+                    //         center center;
+                    //     background-size: contain;
+                    //     width: 100%;
+                    //     height: 100%;
+                    //     max-width: rem(104);
+                    //     max-height: rem(104);
+                    // }
+                }
+                & svg {
+                    position: absolute;
+                    right: 50%;
+                    transform: translateX(-50%);
+                    top: 0% !important;
+                    z-index: 2;
+                }
+                @include max(1023px) {
+                    display: none;
+                }
+            }
+        }
+    }
+}