commit 7e1540085bfa1fac5800ecc0f886718832b4b996 Author: Arindam Date: Tue Dec 2 11:02:00 2025 +0530 new setup diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..321bcd0 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,6 @@ +{ + "extends": "next/core-web-vitals", + "rules": { + "@next/next/no-img-element": "off" + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..8d93461 --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..252802b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "use-tabs": true, + "tabWidth": 4, + "printWidth": 120, + "singleQuote": true, + "trailingComma": "all", + "bracketSpacing": true +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..d6d113c --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ +# convex_sol + diff --git a/ai_convo_context.md b/ai_convo_context.md new file mode 100644 index 0000000..a0a13dc --- /dev/null +++ b/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.* \ No newline at end of file diff --git a/components/MyAppLanding/MyAppWrapper.tsx b/components/MyAppLanding/MyAppWrapper.tsx new file mode 100644 index 0000000..6268fe5 --- /dev/null +++ b/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 = { + 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 setIsBookCallModalOpen(true)} />; + })} + + {orderedSections.map(({ key, value }) => { + const Component = COMPONENT_MAP[key]; + if (!Component) return null; + return setIsBookCallModalOpen(true)} />; + })} + {/* */} + + + + + setIsBookCallModalOpen(false)} + popUpData={pageData?.popUp} + /> + + ); +}; + +export default MyAppWrapper; diff --git a/components/MyAppLanding/component/AboutCloneApp/AboutCloneApp.tsx b/components/MyAppLanding/component/AboutCloneApp/AboutCloneApp.tsx new file mode 100644 index 0000000..f2a51c6 --- /dev/null +++ b/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 ( + <> +
+ +
+
+ overlay +
+
+
+
+
+ {Header?.pageTitle && ( +
{Header.pageTitle}
+ )} + {Header?.title && ( +
+ + + {Header.title || ''} + +
+ )} + {Header?.content && ( +
+ + {Header.content || ''} + +
+ )} +
+
+
+
+ + 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) => ( + +
+
+
+
+
+ {item?.noteImage?.data?.attributes?.url && ( + MICROSOFT_choose + )} +
+ {item?.noteTitle && ( +
+ + {item.noteTitle || ''} + +
+ )} + {item?.noteBody && ( +
+ + {item.noteBody || ''} + +
+ )} +
+
+ {/* MICROSOFT_choose */} +
+
+
+
+ + ))} + +
+ +
+ + ); +}; +export default AboutCloneApp; diff --git a/components/MyAppLanding/component/AboutCloneApp/aboutCloneApp.module.scss b/components/MyAppLanding/component/AboutCloneApp/aboutCloneApp.module.scss new file mode 100644 index 0000000..852b0be --- /dev/null +++ b/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); + } + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/AdditionalFeatures/AdditionalFeatures.tsx b/components/MyAppLanding/component/AdditionalFeatures/AdditionalFeatures.tsx new file mode 100644 index 0000000..2efc302 --- /dev/null +++ b/components/MyAppLanding/component/AdditionalFeatures/AdditionalFeatures.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +const AdditionalFeatures = ({ props }: any) => ( +
+

Industries2 Component

+ 
{JSON.stringify(props, null, 2)}
+
+); +export default AdditionalFeatures; \ No newline at end of file diff --git a/components/MyAppLanding/component/AdvanceFeatures/AdvanceFeatures.module.scss b/components/MyAppLanding/component/AdvanceFeatures/AdvanceFeatures.module.scss new file mode 100644 index 0000000..7181c5b --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/components/MyAppLanding/component/AdvanceFeatures/AdvanceFeatures.tsx b/components/MyAppLanding/component/AdvanceFeatures/AdvanceFeatures.tsx new file mode 100644 index 0000000..3e4bbb1 --- /dev/null +++ b/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(/</g, '<') + .replace(/>/g, '>') + .replace(/"/g, '"') + .replace(/'/g, "'"); +} + + +const AdvanceFeatures = ({ props }: { props: AdvanceFeaturesProps }) => { + + console.log('props ...........................', props); + const header = props?.header || { title: 'Power-Packed Features to Elevate Your Netflix Clone App', subtitle: 'Take your Netflix clone to the next level with these advanced, must-have features.' }; + const features = props?.modules || []; + + return ( +
+
+
+ + {header.title || ''} + +
+
+ + {header.subtitle || ''} + +
+
+
+ {features.map((feature: Module, idx: number) => ( +
+
+ + {feature.moduleIcon || ''} + +
+
{feature.moduleText}
+
+ + {feature.moduleContent || ''} + +
+
+ ))} +
+
+ ); +}; + +export default AdvanceFeatures; \ No newline at end of file diff --git a/components/MyAppLanding/component/AdvertiseSection/AdvertiseSection.module.scss b/components/MyAppLanding/component/AdvertiseSection/AdvertiseSection.module.scss new file mode 100644 index 0000000..83c070d --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/components/MyAppLanding/component/AdvertiseSection/AdvertiseSection.tsx b/components/MyAppLanding/component/AdvertiseSection/AdvertiseSection.tsx new file mode 100644 index 0000000..ddc6703 --- /dev/null +++ b/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(/</g, '<') + .replace(/>/g, '>') + .replace(/"/g, '"') + .replace(/'/g, "'"); +} + +const AdvertiseSection: React.FC = ({ props, extraClass, id }) => { + const header = props?.header || {}; + const notes = props?.notes || []; + const additionalSecton = props?.additionalSecton || {}; + + return ( +
+
+ {/* Top Section */} +
+
+ +
+ + {header.title || ''} + +
+ {header.content && ( +
+ + {header.content || ''} + +
+ )} +
+
+ {notes.length > 0 ? ( + notes.map((feature: FeatureCard, idx: number) => ( +
+ {feature.noteImage?.data?.attributes?.url ? ( + {feature.noteTitle} + ) : ( +
+ + {(feature.noteIcon as string) || ''} + +
+ )} +
+

{feature.noteTitle || ''}

+

{feature.noteBody || ''}

+
+
{String(idx + 1).padStart(2, '0')}
+
+ )) + ) : ( +
+
+
+

Feature Title

+

Feature description.

+
+
01
+
+ )} +
+
+
+ {/* Additional Section */} + {additionalSecton && ( +
+
+
Netflix Clone Feature
+
+ + {additionalSecton.header.title || ''} + +
+
+ + {additionalSecton.header.content || ''} + +
+
+
+ {additionalSecton.notes && + additionalSecton.notes.map((feature: FeatureCard, idx: number) => ( +
+ {feature.noteImage ? ( + {feature.noteTitle} + ) : ( +
+ + {(feature.noteIcon as string) || ''} + +
+ )} +
+

{feature.noteTitle}

+

{feature.noteBody}

+
+
+ ))} +
+
+ )} +
+ ); +}; + +export default AdvertiseSection; diff --git a/components/MyAppLanding/component/AiUberStreamline/AiUberStreamline.module.scss b/components/MyAppLanding/component/AiUberStreamline/AiUberStreamline.module.scss new file mode 100644 index 0000000..26e43e7 --- /dev/null +++ b/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; + } + } + } + } + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/AiUberStreamline/AiUberStreamline.tsx b/components/MyAppLanding/component/AiUberStreamline/AiUberStreamline.tsx new file mode 100644 index 0000000..692974f --- /dev/null +++ b/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 ( + + ); +} + +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 ( +
+
+
+
+ {header?.title && ( +
+ + {header?.title || ''} + +
+ )} + {header?.content && ( +
+ + {header?.content || ''} + +
+ )} +
+
+
+ + + + {module?.length && + module?.map((item: any, i: number) => ( + + ))} + + + {module?.length && + module?.map((item: Module, i: number) => ( + +
+
+
+
+ + {item?.moduleText || ''} + +
+ {item?.moduleContent && ( +
+ + {item?.moduleContent || ''} + +
+ )} +
+
+ +
+ {item?.moduleImage?.data?.attributes?.url && ( + {'tabImg'} + )} +
+
+ + ))} + +
+
+
+
+
+ ); +}; + +export default AiUberStreamline; diff --git a/components/MyAppLanding/component/AppBanner/AppBanner.module.scss b/components/MyAppLanding/component/AppBanner/AppBanner.module.scss new file mode 100644 index 0000000..096830c --- /dev/null +++ b/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; + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/AppBanner/AppBanner.tsx b/components/MyAppLanding/component/AppBanner/AppBanner.tsx new file mode 100644 index 0000000..735fd2c --- /dev/null +++ b/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 ( +
+
+
+
+
+
+ + {header?.title || ''} + +
+ {header?.content && ( +
+ + {header?.content || ''} + +
+ )} +
+ +
+
+
+
+
+ {props?.bannerImage?.data?.attributes?.url && ( + {'cloneBanner'} + )} +
+
+
+
+
+ ); +}; + +export default AppBanner; diff --git a/components/MyAppLanding/component/AppDevelopmentProcess/AppDevelopmentProcess.module.scss b/components/MyAppLanding/component/AppDevelopmentProcess/AppDevelopmentProcess.module.scss new file mode 100644 index 0000000..0e4ff25 --- /dev/null +++ b/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%); + } + } + } + } + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/AppDevelopmentProcess/AppDevelopmentProcess.tsx b/components/MyAppLanding/component/AppDevelopmentProcess/AppDevelopmentProcess.tsx new file mode 100644 index 0000000..c3c2a4f --- /dev/null +++ b/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(/</g, '<') + .replace(/>/g, '>') + .replace(/"/g, '"') + .replace(/'/g, "'"); +}; + +interface TabPanelProps { + children?: ReactNode; + index: number; + value: number; +} + +function TabPanel(props: TabPanelProps) { + const { children, value, index, ...other } = props; + + return ( + + ); +} + +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 ( + <> +
+
+
+
+ overlay +
+
+
+ {header?.pageTitle && ( +
+ {header?.pageTitle} +
+ )} + {header?.title && ( +
+ + {header.title || ''} + +
+ )} + {header?.content && ( +
+ + {header.content || ''} + +
+ )} +
+
+ +
+ + + {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.moduleText && ( + + {tab.moduleText || ''} + + )} +
+ {tab.moduleNumber && ( + + {tab.moduleNumber || `${index + 1}`} + + )} +
+
+ } + icon={ + tab.moduleImage?.data?.attributes?.url ? ( + icon + ) : ( +
+ + {tab.moduleIcon || ''} + +
+ ) + } + {...a11yProps(index)} + /> + ) + })} + + + {module?.length > 0 && + module?.map((tab: Module, index: number) => ( + +
+
+
+
+ {tab.moduleText && ( + + {tab.moduleText || ''} + + )} +
+ {tab.moduleNumber && ( +
+ + {tab.moduleNumber || `${index + 1}`} + +
+ )} +
+
+ {tab.moduleContent && ( + + {tab.moduleContent || ''} + + )} + {/*
    +
  • + + + +
    +

    {tab.moduleText}

    +
    + +
    +
    +
    • +
*/} +
+
+
+ + ))} + +
+
+ +
+ + ); +}; + +export default AppDevelopmentProcess; diff --git a/components/MyAppLanding/component/AppWork/AppWork.module.scss b/components/MyAppLanding/component/AppWork/AppWork.module.scss new file mode 100644 index 0000000..0094304 --- /dev/null +++ b/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%; + } + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/AppWork/AppWork.tsx b/components/MyAppLanding/component/AppWork/AppWork.tsx new file mode 100644 index 0000000..9fc8cd2 --- /dev/null +++ b/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(null); + const [progress, setProgress] = useState(0); + const [counter, setCounter] = useState(0); + const [isPause, setIsPause] = useState(false); + const [swiper, setSwiper] = useState(null); + const [clickedIndex, setClickedIndex] = useState(undefined); + const [expanded, setExpanded] = useState(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 ( +
+
+
+
+

+ How Does Our TikTok Clone App Work? +

+
+

+ 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 +

+
+
+
+
+
+
+ {[1, 2, 3, 4].map((singleItem, index) => ( +
+
{ + counter === index && setIsPause(true); + }} + onMouseLeave={() => { + counter === index && setIsPause(false); + }} + onClick={() => { + setClickedIndex(index); + }} + > + { + setClickedIndex(index); + }} + > + +
+ {/* */} + expand icon +
+

+ Offline Content Availability with Premium +

+ + {/* {counter === index && ( + +

dggb ghh fh

+ + )} */} + + +
+ +
+
+
+ ))} +
+ + + {digitalAllyData?.content?.length && + digitalAllyData?.content.map((item, index) => { + return ( + + +
+
+
+
+ {/* */} + {item?.title} +
+
+
+
+ + + ); + })} + +
+
+ ); +} diff --git a/components/MyAppLanding/component/AppWork/tabCarouselData.ts b/components/MyAppLanding/component/AppWork/tabCarouselData.ts new file mode 100644 index 0000000..9cc18f0 --- /dev/null +++ b/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(), + }, +]; diff --git a/components/MyAppLanding/component/BrandLogo/BrandLogo.module.scss b/components/MyAppLanding/component/BrandLogo/BrandLogo.module.scss new file mode 100644 index 0000000..8cda5c5 --- /dev/null +++ b/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; + } + } + } +} diff --git a/components/MyAppLanding/component/BrandLogo/BrandLogo.tsx b/components/MyAppLanding/component/BrandLogo/BrandLogo.tsx new file mode 100644 index 0000000..db7c39c --- /dev/null +++ b/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([]); + + 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 ( +
+
+
+
Clients
+
+ + {header?.title || ''} + +
+
+
+ Loading brand logos... +
+
+
+ ); + } + + return ( +
+
+
+
Clients
+
+ + {header?.title || ''} + +
+
+
+
+ {/* Row 1 - Reverse direction */} + + {brandsData.map((logo: any, i: number) => { + const key = logoKey(logo, i); + const src = toLogoSrc(logo?.logo?.data?.attributes?.url); + + return ( + +
+ {'brandLogo'} +
+ + ); + })} + + + {/* Row 2 - Normal direction */} + + {[...brandsData].reverse().map((logo: any, i: number) => { + const key = logoKey(logo, i); + const src = toLogoSrc(logo?.logo?.data?.attributes?.url); + + return ( + +
+ {'brandLogo'} +
+ + ); + })} + + + {/* Row 3 - Reverse direction */} + + {brandsData.map((logo: any, i: number) => { + const key = logoKey(logo, i); + const src = toLogoSrc(logo?.logo?.data?.attributes?.url); + + return ( + +
+ {'brandLogo'} +
+ + ); + })} + +
+
+
+
+ ); +}; + +export default BrandLogo; \ No newline at end of file diff --git a/components/MyAppLanding/component/BuildCustomizedApp/BuildCustomizedApp.tsx b/components/MyAppLanding/component/BuildCustomizedApp/BuildCustomizedApp.tsx new file mode 100644 index 0000000..841188c --- /dev/null +++ b/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 ( + + ); +} + +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 ( + <> +
+
+
+
+
+ {header?.pageTitle && ( +
+ {header?.pageTitle || 'Build Your Very Own Custom booking app'} +
+ )} + {header?.title && ( +
+ + {header?.title || ''} + +
+ )} + {header?.content && ( +
+ + {header?.content} + +
+ )} +
+ logo +
+ +
+ + + {module?.map((tab: Module, index: number) => ( + {`${tab?.moduleNumber}`}} + {...a11yProps(index)} + style={ + { + '--bg_color': tab.tabBg || '#F8F8F8 ', + '--bg_pre_color': '#035D87', + } as React.CSSProperties as any + } + /> + ))} + + + {module?.map((tab: Module, index: number) => ( + +
+
+
+ {tab?.moduleText && ( +
+ + {tab?.moduleText || ''} + +
+ )} +
{tab?.moduleNumber}
+
+
+ {tab?.moduleContent && ( +
+ + + {tab?.moduleContent} + +
+ )} +
+ {/*
+
+
    +
  • + + + +
    +

    Easy Registration

    +

    + 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. +

    +
    +
    • +
  • + + + +
    +

    Easy Registration

    +

    + 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. +

    +
    +
    • +
+
+
*/} +
+
+ + ))} + +
+
+
+ +
+ + ); +}; +export default BuildCustomizedApp; diff --git a/components/MyAppLanding/component/BuildCustomizedApp/buildCustomizedApp.module.scss b/components/MyAppLanding/component/BuildCustomizedApp/buildCustomizedApp.module.scss new file mode 100644 index 0000000..57e37d5 --- /dev/null +++ b/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%); + } + } + } + } + } + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/CaseStudy/CaseStudy.tsx b/components/MyAppLanding/component/CaseStudy/CaseStudy.tsx new file mode 100644 index 0000000..89f4310 --- /dev/null +++ b/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(/</g, '<') + .replace(/>/g, '>') + .replace(/"/g, '"') + .replace(/'/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 ( +
+
+
+
+ {header?.pageTitle && ( +
{header?.pageTitle}
+ )} + {header?.title && ( +
+ + {header.title || ''} + +
)} + {header?.content && ( +
+ + {header?.content || ''} + +
)} +
+
+ {caseStudy?.length > 0 && + caseStudy?.map((item: CaseStudyData, index: number) => { + return ( + +
+ + {item?.attributes?.cardImage?.data?.attributes?.url && ( + {item?.attributes?.seo?.ogTitle + + )} +
+
+
+ {item?.attributes?.projectName && ( +
+ + {item?.attributes?.projectName || ''} + +
+ )} + {item?.attributes?.shortDetails && ( +
+ + {item?.attributes?.shortDetails || ''} + +
+ )} +
+
+

View More

+ + + +
+
+ + ) + })} +
+
+ + Read more + +
+
+
+
+ ); +}; + +export default CaseStudy; diff --git a/components/MyAppLanding/component/CaseStudy/caseStudy.module.scss b/components/MyAppLanding/component/CaseStudy/caseStudy.module.scss new file mode 100644 index 0000000..db684a0 --- /dev/null +++ b/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); + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/ClientTestimonials/ClientTestimonials.tsx b/components/MyAppLanding/component/ClientTestimonials/ClientTestimonials.tsx new file mode 100644 index 0000000..746251b --- /dev/null +++ b/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 ; + })} + + ); +} + +export default function ClientTestimonials({ extraClass, props, id }: RequiredProps) { + const { header, video, notes } = props; + const videoRef = useRef(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 ( +
+
+
+
+ {header?.pageTitle && ( +
{header?.pageTitle}
+ )} + {header?.title && ( + +
+ + {header.title || ''} + +
+ )} +
+
+
+
+ {video?.video?.data?.attributes?.url && ( + +
+
+ +
+ {notes?.map((item: KeyNote, i: number) => ( + +
+
+
+ + {item.noteBody || ''} + +
+
+
+ +
+
+ {item?.noteTitle && ( +

{item.noteTitle.split(" ")[0]}

+ )} + {item?.noteTitle && ( +
+

{item.noteTitle.split(" ")[1]}, {item.noteTitle.split(" ")[2]}

+
+ )} +
+
+ {/*
+ + +
*/} +
+
+ ))} +
+
+
+
+
+ ); +} \ No newline at end of file diff --git a/components/MyAppLanding/component/ClientTestimonials/clientTestimonials.module.scss b/components/MyAppLanding/component/ClientTestimonials/clientTestimonials.module.scss new file mode 100644 index 0000000..1087ba9 --- /dev/null +++ b/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); + } + } + } + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/Compelling/Compelling.module.scss b/components/MyAppLanding/component/Compelling/Compelling.module.scss new file mode 100644 index 0000000..7ceef44 --- /dev/null +++ b/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; + } + } + } + } + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/Compelling/Compelling.tsx b/components/MyAppLanding/component/Compelling/Compelling.tsx new file mode 100644 index 0000000..61f4f74 --- /dev/null +++ b/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 ( + + ); +} + +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 ( + <> +
+
+
+
+
+
Build Your Very Own Custom booking app
+

+ Exclusive Features for Making Your TikTok like{' '} + Application Unique and Compelling +

+
+

+ The following is a list of other advanced features our ready-to-launch TikTok + clone application model includes: +

+
+
+ logo +
+ +
+ + + {[1, 2].map((tab, index) => ( + {`0${index}`}} + {...a11yProps(index)} + /> + ))} + + + {[1, 2].map((tab, index) => ( + +
+
+
+

+ Advanced Features +

+
{index}
+
+
+
    +
  • + + + +
    +

    Easy Registration

    +

    + 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. +

    +
    +
    • +
  • + + + +
    +

    Easy Registration

    +

    + 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. +

    +
    +
    • +
+
+
+
+ + ))} + +
+
+
+
+ + ); +}; + +export default Compelling; diff --git a/components/MyAppLanding/component/Development/Development.module.scss b/components/MyAppLanding/component/Development/Development.module.scss new file mode 100644 index 0000000..7008e12 --- /dev/null +++ b/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; + } + } + } + } + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/Development/Development.tsx b/components/MyAppLanding/component/Development/Development.tsx new file mode 100644 index 0000000..c718254 --- /dev/null +++ b/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 ( + + ); +} + +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 ( + <> +
+
+
+
+ overlay +
+
+
+
Development Process
+

+ Steps We Follow to Develop a TikTok like Application for Your Needs +

+
+

+ At ConvexSol, we follow the below step-by-step TikTok clone app development + procedures to ensure a successful app launching with continual growth: +

+
+
+
+ +
+ + + {[1, 2].map((tab, index) => ( + + Learning Specific Client Requirements{' '} + 01 + + } + icon={ + icon + } + {...a11yProps(index)} + /> + ))} + + + {[1, 2].map((tab, index) => ( + +
+
+
+

+ Market Research and Analysis +

+
{index}
+
+
+
    +
  • + + + +
    +

    Easy Registration

    +

    + 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. +

    +
    +
    • +
  • + + + +
    +

    Easy Registration

    +

    + 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. +

    +
    +
    • +
+
+
+
+ + ))} + +
+
+
+
+ + ); +}; + +export default Development; diff --git a/components/MyAppLanding/component/DevelopmentFeatures/DevelopmentFeatures.tsx b/components/MyAppLanding/component/DevelopmentFeatures/DevelopmentFeatures.tsx new file mode 100644 index 0000000..03c3c2a --- /dev/null +++ b/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 ( + <> +
+
+
+ overlay +
+
+
+
+
+ {header?.pageTitle && ( +
+ {header?.pageTitle} +
+ )} + {header?.title && ( +
+ + {header?.title || ''} + +
+ )} + {header?.content && ( +
+ + {header?.content || ''} + +
+ )} +
+
+
+
+ + 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 ( + +
+
+
+
+
+ {item?.noteImage?.data?.attributes?.url && ( + MICROSOFT_choose + )} +
+ {item?.noteTitle && ( +
+ + {item?.noteTitle || ''} + +
+ )} + {item?.noteBody && ( +
+ + {item?.noteBody || ''} + +
+ )} +
+
+ {/* MICROSOFT_choose */} +
+
+
+
+ + ); + })} + +
+
+ + ); +}; +export default DevelopmentFeatures; diff --git a/components/MyAppLanding/component/DevelopmentFeatures/developmentFeatures.module.scss b/components/MyAppLanding/component/DevelopmentFeatures/developmentFeatures.module.scss new file mode 100644 index 0000000..8f5f52c --- /dev/null +++ b/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); + } + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/Essential/Essential.module.scss b/components/MyAppLanding/component/Essential/Essential.module.scss new file mode 100644 index 0000000..3be51ab --- /dev/null +++ b/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); + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/Essential/Essential.tsx b/components/MyAppLanding/component/Essential/Essential.tsx new file mode 100644 index 0000000..da9986c --- /dev/null +++ b/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 ( +
+
+
+
+
+ {header?.pageTitle && ( +
{header?.pageTitle}
+ )} + {header?.title && ( +
+ + {header?.title || ''} + +
+ )} + {header?.content && ( +
+ + {header?.content || ''} + +
+ )} +
+
+
+ {/* Loop info_box with dummy data */} + {divNotes?.length && divNotes?.map((item: any, idx: number) => ( +
+
+ {'tabImage'} +
+ + + +
+ + {item?.noteTitle || ''} + +
+ {item?.noteBody && ( +
+ + {item?.noteBody || ''} + +
+ )} +
+ ))} +
+
+
+ +
+ ); +}; + +export default Essential; diff --git a/components/MyAppLanding/component/EssentialFourGrid/EssentialFourGrid.module.scss b/components/MyAppLanding/component/EssentialFourGrid/EssentialFourGrid.module.scss new file mode 100644 index 0000000..ac302af --- /dev/null +++ b/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); + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/EssentialFourGrid/EssentialFourGrid.tsx b/components/MyAppLanding/component/EssentialFourGrid/EssentialFourGrid.tsx new file mode 100644 index 0000000..c92e627 --- /dev/null +++ b/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 ( +
+
+
+
+
+ {header?.pageTitle && ( +
{header?.pageTitle}
+ )} + {header?.title &&( +
+ + {header?.title || ''} + +
+ )} +
+ {header?.content && ( + + {header?.content || ''} + + )} +
+
+
+
+ {/* Loop info_box with dummy data */} + {module?.map((item: Module, idx: number) => ( +
+ {item?.moduleImage?.data?.attributes?.url && ( +
+ {'No +
+ )} + + + +
+
+ + {item?.moduleText || ''} + +
+ {item?.moduleContent && ( +
+ + {item?.moduleContent || ''} + +
+ )} +
+
+ ))} +
+
+
+
+ ); +}; + +export default EssentialFourGrid; diff --git a/components/MyAppLanding/component/EssentialThreeGrid/EssentialThreeGrid.module.scss b/components/MyAppLanding/component/EssentialThreeGrid/EssentialThreeGrid.module.scss new file mode 100644 index 0000000..79bf8e6 --- /dev/null +++ b/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); + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/EssentialThreeGrid/EssentialThreeGrid.tsx b/components/MyAppLanding/component/EssentialThreeGrid/EssentialThreeGrid.tsx new file mode 100644 index 0000000..a95c92f --- /dev/null +++ b/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 ( +
+
+
+
+
+
{header.pageTitle}
+ {header?.title && ( +
+ + {header.title || ''} + +
+ )} + {header?.content && ( +
+ + {header.content || ''} + +
+ )} +
+
+
+ {/* Loop info_box with dummy data */} + {divNotes.map((item: any, idx: number) => ( +
+
+ {'tabImage'} +
+ + + +
+ + {item.noteTitle || ''} + +
+
+ + {item.noteBody || ''} + +
+
+ ))} +
+
+
+ +
+ ); +}; + +export default EssentialThreeGrid; diff --git a/components/MyAppLanding/component/Features/Features.tsx b/components/MyAppLanding/component/Features/Features.tsx new file mode 100644 index 0000000..2a205ab --- /dev/null +++ b/components/MyAppLanding/component/Features/Features.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +const Features = ({ props }: any) => ( + <> + {(props?.length > 0) && ( +
+

Features Component

+ 
{JSON.stringify(props, null, 2)}
+
+ )} + +); +export default Features; \ No newline at end of file diff --git a/components/MyAppLanding/component/HealthEfficiency/HealthEfficiency.tsx b/components/MyAppLanding/component/HealthEfficiency/HealthEfficiency.tsx new file mode 100644 index 0000000..fd28f4f --- /dev/null +++ b/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 ( + + ); +} +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(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 ( +
+
+
+
+ {header?.title && ( +
+
+ + {header?.title || ''} + +
+
+ )} + {header?.content && ( +
+ + {header?.content || ''} + +
+ )} +
+
+ + + {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 ( + + + {item?.moduleNumber} + + + {item?.moduleText || ''}{' '} + +
+ ) : ( +
+ {item?.moduleNumber} + {item?.moduleText || ''} +
+ ) + } + {...a11yProps(index)} + /> + ); + })} + + + {module?.length > 0 && + module.map((item: any, index: number) => ( + +
+
+
+
+ + {item?.moduleText ? item?.moduleText : ''} + +
+
+ +
+
+ + {item?.tabContent || ''} + +
+
+
+
+
+ + {item?.moduleContent ? item?.moduleContent : ''} + +
+ {item?.moduleImage?.data?.attributes?.url && ( +
+ { +
+ )} + + {item?.modulePoints && ( +
+
+ + {item?.modulePoints ? item?.modulePoints : ''} + +
+
+ )} +
+
+ + ))} + {/* Accordion */} +
+ {module?.length > 0 && + module?.map((item: any, index: number) => ( + + } + aria-controls={`panel${index + 1}bh-content`} + id={`panel${index + 1}bh-header`} + > +
+
+ + {item?.moduleNumber ? item?.moduleNumber : ''} + +
+
+
+ + {item?.moduleText ? item?.moduleText : ''} + +
+
+
+ + +
+ + {item?.moduleContent ? item?.moduleContent : ''} + +
+ {item?.moduleImage?.data?.attributes?.url && ( + { + )} + + + ))} +
+
+
+ +
+ ); +}; + +export default HealthEfficiency; diff --git a/components/MyAppLanding/component/HealthEfficiency/healthEfficiency.module.scss b/components/MyAppLanding/component/HealthEfficiency/healthEfficiency.module.scss new file mode 100644 index 0000000..16adad1 --- /dev/null +++ b/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; + // } + // } + // } + // } + // } + // } + // } + // } +} diff --git a/components/MyAppLanding/component/Industries/Industries.tsx b/components/MyAppLanding/component/Industries/Industries.tsx new file mode 100644 index 0000000..065f0f6 --- /dev/null +++ b/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 ( +
+
+
+
+
{header.pageTitle}
+
+ + {header.title || ''} + +
+ +
+ + {header.content || ''} + +
+
+
+ +
+
+
+
+ + {module && + [...module, ...module]?.map((item: Module, i: number) => ( + +
+
+
+ {'nexIcon'} +
+
+
+
+ + {item.moduleText || ''} + +
+
+ + {item.moduleContent || ''} + +
+
+
+ + ))} + +
+
+ ); +}; +export default Industries; diff --git a/components/MyAppLanding/component/Industries/industries.module.scss b/components/MyAppLanding/component/Industries/industries.module.scss new file mode 100644 index 0000000..f50666f --- /dev/null +++ b/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); + } + } + } + } +} diff --git a/components/MyAppLanding/component/InstagramConcept/InstagramConcept.module.scss b/components/MyAppLanding/component/InstagramConcept/InstagramConcept.module.scss new file mode 100644 index 0000000..a361ee0 --- /dev/null +++ b/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; + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/InstagramConcept/InstagramConcept.tsx b/components/MyAppLanding/component/InstagramConcept/InstagramConcept.tsx new file mode 100644 index 0000000..97670d0 --- /dev/null +++ b/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 ( + <> +
+
+
+
+
+ {header?.title && ( +
+ + {header?.title || ''} + +
+ )} +
+
+
+
+
+
+
+ {header?.backgroundImage?.data?.attributes?.url && ( + {header?.backgroundImage?.data?.attributes?.title + )} +
+ 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 ( + +
+
+ {item?.moduleText && ( +
+ {item?.moduleText && ( + + {(item?.moduleText?.length > 150 + ? item.moduleText.slice(0, 150) + '...' + : item.moduleText) ?? ''} + + )} +
+ )} +
+
+ + ); + })} + + {/* */} +
+
+
+ + ); +}; + +export default InstagramConcept; diff --git a/components/MyAppLanding/component/InstagramConceptGrid/InstagramConceptGrid.module.scss b/components/MyAppLanding/component/InstagramConceptGrid/InstagramConceptGrid.module.scss new file mode 100644 index 0000000..9b31941 --- /dev/null +++ b/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; + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/InstagramConceptGrid/InstagramConceptGrid.tsx b/components/MyAppLanding/component/InstagramConceptGrid/InstagramConceptGrid.tsx new file mode 100644 index 0000000..7163d3e --- /dev/null +++ b/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 ( + <> +
+
+
+
+
+ {header?.title && ( +
+ + {header?.title || ''} + +
+ )} +
+
+
+
+
+
+
+
+
+
+ {leftField?.noteTitle && ( + + {(leftField?.noteTitle?.length > 250 + ? leftField?.noteTitle.slice(0, 250) + '...' + : leftField?.noteTitle) ?? ''} + + )} +
+
+ {header?.backgroundImage.data?.attributes?.url && ( +
+ instagram-concept-grid +
+ )} +
+
+ {rightField?.noteTitle && ( + + {(rightField?.noteTitle?.length > 250 + ? rightField?.noteTitle.slice(0, 250) + '...' + : rightField?.noteTitle) ?? ''} + + )} +
+
+
+
+ {/*
*/} + {/* {header?.backgroundImage?.data?.attributes?.url && ( */} + {/* instagram-concept-grid */} + {/* // )} */} + {/*
*/} + {/* 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 ( + +
+
+ {item?.moduleText && ( +
+ {item?.moduleText && ( + + {(item?.moduleText?.length > 150 + ? item.moduleText.slice(0, 150) + '...' + : item.moduleText) ?? ''} + + )} +
+ )} +
+
+ + ); + })} + */} + {/* */} +
+
+
+ + ); +}; + +export default InstagramConceptGrid; diff --git a/components/MyAppLanding/component/Monetization/Monetization.module.scss b/components/MyAppLanding/component/Monetization/Monetization.module.scss new file mode 100644 index 0000000..17d44ab --- /dev/null +++ b/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%); + } + } + } +} diff --git a/components/MyAppLanding/component/Monetization/Monetization.tsx b/components/MyAppLanding/component/Monetization/Monetization.tsx new file mode 100644 index 0000000..1ff366c --- /dev/null +++ b/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 ( + <> +
+
+
+
+
+
+
+
+

+ Monetization Model of Our TikTok Clone App – Generating + Revenues +

+
+
+

+ 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: +

+
+
+
+
+
+
+ isMobileDevice && setIsActiveIndex(false)} + > + {[1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 1, 1]?.map((item, i) => ( + +
+
+
+
+
+ MICROSOFT_choose +
+

+ Premium Live Streaming +

+
+
+ {/* MICROSOFT_choose */} +
+
+
+

+ Premium Live Streaming +

+

+ Realtime adjustment of rental prices depending on demand, competitor + rates and seasonality. +

+
+
+
+ + ))} + +
+
+ + ); +}; + +export default Monetization; diff --git a/components/MyAppLanding/component/MyAppOverview/MyAppOverview.module.scss b/components/MyAppLanding/component/MyAppOverview/MyAppOverview.module.scss new file mode 100644 index 0000000..b2ea150 --- /dev/null +++ b/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; + } +} diff --git a/components/MyAppLanding/component/MyAppOverview/MyAppOverview.tsx b/components/MyAppLanding/component/MyAppOverview/MyAppOverview.tsx new file mode 100644 index 0000000..b56bf1c --- /dev/null +++ b/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 ( +
+
+
+
+
+
{header.pageTitle}
+ + {header?.title &&( +
+ + + {header?.title || ''} + +
+ )} +
+
+
+ {image?.data?.attributes?.url && ( +
+ {'tabImage'} +
+ )} +
+ {imageContent &&( +
+ + {imageContent || ''} + +
+ )} +
+
+
+
+
+ ); +}; + +export default MyAppOverview; diff --git a/components/MyAppLanding/component/MyAppOverview/SkeletonOverview.tsx b/components/MyAppLanding/component/MyAppOverview/SkeletonOverview.tsx new file mode 100644 index 0000000..c40ae15 --- /dev/null +++ b/components/MyAppLanding/component/MyAppOverview/SkeletonOverview.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import styles from './MyAppOverview.module.scss'; + +const SkeletonOverview = () => ( +
+
+
+
+
+); + +export default SkeletonOverview; \ No newline at end of file diff --git a/components/MyAppLanding/component/PaidAddOn/PaidAddOn.module.scss b/components/MyAppLanding/component/PaidAddOn/PaidAddOn.module.scss new file mode 100644 index 0000000..9386f69 --- /dev/null +++ b/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%; + } + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/PaidAddOn/PaidAddOn.tsx b/components/MyAppLanding/component/PaidAddOn/PaidAddOn.tsx new file mode 100644 index 0000000..f2bad47 --- /dev/null +++ b/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(null); + const [progress, setProgress] = useState(0); + const [counter, setCounter] = useState(0); + const [isPause, setIsPause] = useState(false); + const [swiper, setSwiper] = useState(null); + const [clickedIndex, setClickedIndex] = useState(undefined); + const [expanded, setExpanded] = useState(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 ( +
+
+
+
+
Why it’s essential
+

+ How Does Our TikTok Clone App Work? +

+
+

+ 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 +

+
+
+
+
+
+
+ {[1, 2, 3, 4].map((singleItem, index) => ( +
+
{ + counter === index && setIsPause(true); + }} + onMouseLeave={() => { + counter === index && setIsPause(false); + }} + onClick={() => { + setClickedIndex(index); + }} + > + { + setClickedIndex(index); + }} + > + +
+ {/* */} + expand icon +
+

+ Offline Content Availability with Premium +

+ + {counter === index && ( + +

+ 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.{' '} +

+ + )} + + +
+ +
+
+
+ ))} +
+ + + {digitalAllyData?.content?.length && + digitalAllyData?.content.map((item, index) => { + return ( + + +
+
+
+
+ {/* */} + {item?.title} +
+
+
+
+ + + ); + })} + +
+
+ ); +} diff --git a/components/MyAppLanding/component/PaidAddOn/tabCarouselData.ts b/components/MyAppLanding/component/PaidAddOn/tabCarouselData.ts new file mode 100644 index 0000000..9cc18f0 --- /dev/null +++ b/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(), + }, +]; diff --git a/components/MyAppLanding/component/RevenueModels/RevenueModels.tsx b/components/MyAppLanding/component/RevenueModels/RevenueModels.tsx new file mode 100644 index 0000000..bed591b --- /dev/null +++ b/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 ( + <> +
+
+
+
+
+
+ {header?.pageTitle && ( +
+ {header?.pageTitle} +
+ )} +
+ {header?.title && ( +
+ + {header?.title || ''} + +
+ )} +
+ {header?.content && ( +
+ + {header?.content || ''} + +
+ )} +
+
+
+ +
+ {models?.map((item: KeyNote, i: number) => ( +
+
+
+
+
+
+ MICROSOFT_choose +
+
+ + {item?.noteTitle || ''} + +
+
+ {/*
+ MICROSOFT_choose +
*/} +
+
+
+ + {item?.noteTitle || ''} + +
+ {item?.noteBody && ( +
+ + {item?.noteBody || ''} + +
+ )} +
+
+
+
+ ))} +
+
+
+
+ + ); +}; +export default RevenueModels; diff --git a/components/MyAppLanding/component/RevenueModels/revenueModels.module.scss b/components/MyAppLanding/component/RevenueModels/revenueModels.module.scss new file mode 100644 index 0000000..dcf58e4 --- /dev/null +++ b/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%); + } + } + } +} diff --git a/components/MyAppLanding/component/SecondaryAboutApp/SecondaryAboutApp.tsx b/components/MyAppLanding/component/SecondaryAboutApp/SecondaryAboutApp.tsx new file mode 100644 index 0000000..ecbbf74 --- /dev/null +++ b/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 ( + + ); +} + +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 ( +
+
+
+
+ {header?.pageTitle && ( +
{header?.pageTitle}
+ )} + {header?.title && ( +
+ + {header.title || ''} + + +
+ )} + {header?.content && ( +
+ {header?.content} +
+ )} +
+
+ {header?.backgroundImage?.data?.attributes?.url && ( + + )} +
+
+ +
+ +
+ ); +}; + +export default SecondaryAboutApp; diff --git a/components/MyAppLanding/component/SecondaryAboutApp/SecondaryFeatures.tsx b/components/MyAppLanding/component/SecondaryAboutApp/SecondaryFeatures.tsx new file mode 100644 index 0000000..c7685f8 --- /dev/null +++ b/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(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, "'"); +}; + +const SecondaryFeatures = ({ props }: any) => { + return ( + +
+ + {props?.map((item: any, i: number) => ( + +
+
+
+ {item?.noteImage?.data?.attributes?.url ? ( + {item?.noteTitle} + ) : ( +
+ + {item.noteIcon || ''} + +
+ )} +
+
+
+

{item?.noteTitle}

+

+ {item?.noteBody} +

+
+
+ + ))} + +
+ + ); +}; + +export default SecondaryFeatures; diff --git a/components/MyAppLanding/component/SecondaryAboutApp/secondaryFeature.module.scss b/components/MyAppLanding/component/SecondaryAboutApp/secondaryFeature.module.scss new file mode 100644 index 0000000..c9aab2c --- /dev/null +++ b/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); + } + } + } +} diff --git a/components/MyAppLanding/component/Seo/Seo.tsx b/components/MyAppLanding/component/Seo/Seo.tsx new file mode 100644 index 0000000..b9906b5 --- /dev/null +++ b/components/MyAppLanding/component/Seo/Seo.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +const Seo = ({ props }: any) => ( +
+

Seo Component

+ 
{JSON.stringify(props, null, 2)}
+
+); +export default Seo; \ No newline at end of file diff --git a/components/MyAppLanding/component/Services/Services.tsx b/components/MyAppLanding/component/Services/Services.tsx new file mode 100644 index 0000000..625c2e5 --- /dev/null +++ b/components/MyAppLanding/component/Services/Services.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +const Services = ({ props }: any) => ( +
+

Services Component

+ 
{JSON.stringify(props, null, 2)}
+
+); +export default Services; \ No newline at end of file diff --git a/components/MyAppLanding/component/TechStackBrandLogo/TechStackBrandLogo.module.scss b/components/MyAppLanding/component/TechStackBrandLogo/TechStackBrandLogo.module.scss new file mode 100644 index 0000000..06d0671 --- /dev/null +++ b/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); + } + } + } +} diff --git a/components/MyAppLanding/component/TechStackBrandLogo/TechStackBrandLogo.tsx b/components/MyAppLanding/component/TechStackBrandLogo/TechStackBrandLogo.tsx new file mode 100644 index 0000000..688f037 --- /dev/null +++ b/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 ( +
+
+
+ {header?.pageTitle && ( +
{header?.pageTitle}
+ )} + {header?.title && ( +
+ + {header.title || ''} + +
+ )} + {header?.content && ( +
+ + {header.content || ''} + +
+ )} +
+
+
+ + {[...technologies?.data, ...technologies?.data]?.map((item: any, i: number) => ( + +
+
+ {item.attributes?.icon?.data?.attributes?.url ? ( + {item?.attributes?.name} + ) : ( +
+
+ + {item.noteIcon || ''} + +
+
+ )} +
+ +
+ + {item?.attributes?.name} + +
+
+ + ))} + + + {[...technologies.data, ...technologies.data] + ?.slice() + .reverse() + .map((item: any, i: number) => ( + +
+
+ {item.attributes?.icon?.data?.attributes?.url ? ( + {item?.attributes?.name} + ) : ( +
+
+ + {item.noteIcon || ''} + +
+
+ )} +
+ +
+ + {item?.attributes?.name} + +
+
+ + ))} + +
+
+
+ +
+
+
+ ); +}; + +export default TechStackBrandLogo; diff --git a/components/MyAppLanding/component/Technologies/Technologies.tsx b/components/MyAppLanding/component/Technologies/Technologies.tsx new file mode 100644 index 0000000..5153509 --- /dev/null +++ b/components/MyAppLanding/component/Technologies/Technologies.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +const Technologies = ({ props }: any) => ( +
+

Technologies Component

+ 
{JSON.stringify(props, null, 2)}
+
+); +export default Technologies; \ No newline at end of file diff --git a/components/MyAppLanding/component/TrackPerformance/TrackPerformance.tsx b/components/MyAppLanding/component/TrackPerformance/TrackPerformance.tsx new file mode 100644 index 0000000..ce13a58 --- /dev/null +++ b/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 ( + <> +
+
+
+
+
+
+
+ {header?.pageTitle && ( +
+ {header?.pageTitle} +
+ )} +
+ + {header?.title && ( +
+ + {header?.title || ''} + +
+ )} +
+ {header?.content && ( +
+ + {header?.content || ''} + +
+ )} +
+
+
+
+
+ isMobileDevice && setIsActiveIndex(false)} + > + {[...notes,...notes]?.map((item: any, i: number) => ( + +
+
+
+
+
+ MICROSOFT_choose +
+
+ + {item?.noteTitle || ''} + +
+
+ {/*
+ MICROSOFT_choose +
*/} +
+
+
+ + {item?.noteTitle || ''} + +
+
+ + {item?.noteBody || ''} + +
+
+
+
+ + ))} + +
+
+ + ); +}; +export default TrackPerformance; diff --git a/components/MyAppLanding/component/TrackPerformance/trackPerformance.module.scss b/components/MyAppLanding/component/TrackPerformance/trackPerformance.module.scss new file mode 100644 index 0000000..e3297d4 --- /dev/null +++ b/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%); + } + } + } +} diff --git a/components/MyAppLanding/component/UrbanClapNeed/UrbanClapNeed.module.scss b/components/MyAppLanding/component/UrbanClapNeed/UrbanClapNeed.module.scss new file mode 100644 index 0000000..9723e28 --- /dev/null +++ b/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; + } + } + } + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/UrbanClapNeed/UrbanClapNeed.tsx b/components/MyAppLanding/component/UrbanClapNeed/UrbanClapNeed.tsx new file mode 100644 index 0000000..cad7123 --- /dev/null +++ b/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 ( + <> +
+
+
+
+
+ {props?.header?.title && ( +
+ + {props?.header?.title || ''} + +
+ )} +
+
+
+
+
+ {props?.header?.backgroundImage?.data?.attributes?.url && ( + + )} +
+
+ isMobileDevice && setIsActiveIndex(false)} + > + {props?.notes?.map((item: any, i: number) => ( + +
+
+
+
+ + {item?.noteBody || ''} + +
+
+
+
+ + ))} + +
+
+
+
+
+
+ + ); +}; + +export default UrbanClapNeed; diff --git a/components/MyAppLanding/component/UrbanService/UrbanService.module.scss b/components/MyAppLanding/component/UrbanService/UrbanService.module.scss new file mode 100644 index 0000000..ad15fba --- /dev/null +++ b/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); + } + } + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/UrbanService/UrbanService.tsx b/components/MyAppLanding/component/UrbanService/UrbanService.tsx new file mode 100644 index 0000000..47f63dc --- /dev/null +++ b/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('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(/&/g, '&') + .replace(/</g, '<') + .replace(/>/g, '>') + .replace(/"/g, '"') + .replace(/'/g, "'"); + } + + return ( +
+
+
+
+
{props?.header?.pageTitle || 'Services'}
+ {props?.header?.title && ( +
+ + {props?.header?.title || ''} + +
+ )} + {props?.header?.content && ( +
+ + {props?.header?.content || ''} + +
+ )} +
+
+ + {props?.notes?.map((item: any, i: number) => { + return
+
+ + {item?.noteImage?.data?.attributes?.url ? ( + tab-icon + ) : ( +
+ + {item?.noteIcon || ''} + +
+ )} +
+ +
+ 0{i + 1} +
+
+
+ {item?.noteTitle || ''} +
+ + {item?.noteBody || ''} + +
+
+
+ })} +
+
+
+
+ ); +}; + +export default UrbanService; diff --git a/components/MyAppLanding/component/UrbanService2/UrbanService2.tsx b/components/MyAppLanding/component/UrbanService2/UrbanService2.tsx new file mode 100644 index 0000000..8131846 --- /dev/null +++ b/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('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 ( +
+
+
+
+ {header?.pageTitle &&
{header?.pageTitle}
} + {header?.title && ( +
+ + {header?.title || ''} + +
+ )} + {header?.content && ( +
+ + {header?.content || ''} + +
+ )} +
+
+
+ {module?.map((item: Module, i: number) => ( + + } + aria-controls="panel1-content" + id="panel1-header" + className={`${global.head4_4} ${global.manrope}`} + > +
+ + {item?.moduleNumber || ''} + +
+ + + {item?.moduleText || ''} + + + + + {item?.moduleContent && ( +
+ + {item?.moduleContent || ''} + +
+ )} +
+ {item?.moduleImage?.data?.attributes?.url && ( + {'tab-image'} + )} +
+ {item?.tabRequired && + [item?.tab1, item?.tab2, item?.tab3, item?.tab4, item?.tab5]?.map((item: any, i: number) => { + if(item){ + return ( +
+ + {item || ''} + +
+ ) + } + })} +
+
+ + + ))} +
+
+
+
+
+ ); +}; + +export default UrbanService; diff --git a/components/MyAppLanding/component/UrbanService2/urbanService2.module.scss b/components/MyAppLanding/component/UrbanService2/urbanService2.module.scss new file mode 100644 index 0000000..7290072 --- /dev/null +++ b/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); + } + } +} diff --git a/components/MyAppLanding/component/WalmartScript/WalmartScript.tsx b/components/MyAppLanding/component/WalmartScript/WalmartScript.tsx new file mode 100644 index 0000000..7dcf95a --- /dev/null +++ b/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 ( + <> +
+
+
+
+
+ {header?.title && ( +
+ + {header?.title || ''} + +
+ )} +
+
+
+ {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
+
+ {item?.noteBody && ( + + {item?.noteBody || ''} + + )} +
+
+ + {item?.notePoints || ''} + +
+
+})} +
+ {header?.backgroundImage?.data?.attributes?.url ? ( + {header.backgroundImage.data.attributes.title + ) : ( + {'script_img'} + )} +
+
+
+
+
+ + ); +}; + +export default WalmartScript; diff --git a/components/MyAppLanding/component/WalmartScript/walmartScript.module.scss b/components/MyAppLanding/component/WalmartScript/walmartScript.module.scss new file mode 100644 index 0000000..8dac7a6 --- /dev/null +++ b/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; + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/WalmartStreamline/WalmartStreamline.module.scss b/components/MyAppLanding/component/WalmartStreamline/WalmartStreamline.module.scss new file mode 100644 index 0000000..2124207 --- /dev/null +++ b/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); + } + } + } + } + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/WalmartStreamline/WalmartStreamline.tsx b/components/MyAppLanding/component/WalmartStreamline/WalmartStreamline.tsx new file mode 100644 index 0000000..91c92b2 --- /dev/null +++ b/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 ( + + ); +} + +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 ( + +
+
+
+
+
+ + {header?.title || ''} + +
+
+ + {header?.content || ''} + +
+
+
+
+ + + + {allTab?.map((item, i) => ( + + ))} + + + {allTab?.map((item, i) => { + + return + + + })} + +
+
+
+
+
+ ); +}; + +export default WalmartStreamline; diff --git a/components/MyAppLanding/component/WalmartStreamline/healthEfficiency/HealthEfficiency.module.scss b/components/MyAppLanding/component/WalmartStreamline/healthEfficiency/HealthEfficiency.module.scss new file mode 100644 index 0000000..e0f7b8e --- /dev/null +++ b/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; + } + } + } + } +} diff --git a/components/MyAppLanding/component/WalmartStreamline/healthEfficiency/HealthEfficiency.tsx b/components/MyAppLanding/component/WalmartStreamline/healthEfficiency/HealthEfficiency.tsx new file mode 100644 index 0000000..b448f0a --- /dev/null +++ b/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 ( + + ); +} +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(false); + const handleAccordionChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => { + setExpanded(isExpanded ? panel : false); + }; + const handleChange = (event: React.SyntheticEvent, newValue: number) => { + setValue(newValue); + }; + return ( +
+
+
+
+ + + {data?.map((item: any, i: any) => ( + + {`${i + 1}. ${item?.moduleText}`} + {item?.name} + + } + {...a11yProps(i)} + style={ + { + '--bg_color': '#3CAEFF', + } as React.CSSProperties as any + } + /> + ))} + + + {data?.map((item: any, i: any) => ( + +
+
+ {item?.moduleImage?.data?.attributes?.url && ( + + )} +
+
+
+
+
+ + {item?.moduleContent || ''} + +
+
+ + {item?.modulePoints || ''} + +
+
+
+
+
+ + ))} + {/* Accordion */} +
+ {data?.tabs?.length > 0 && + data?.tabs?.map((item: any, index: any) => ( + + } + aria-controls={`panel${index + 1}bh-content`} + id={`panel${index + 1}bh-header`} + > +
+
+ + {item?.number ? item?.number : ''} + +
+
+
+ + {item?.title ? item?.title : ''} + +
+
+
+ + +
+ + {item?.details ? item?.details : ''} + +
+ + + ))} +
+
+
+
+
+ ); +}; + +export default HealthEfficiency; diff --git a/components/MyAppLanding/component/WhyItsEssential/WhyItsEssential.tsx b/components/MyAppLanding/component/WhyItsEssential/WhyItsEssential.tsx new file mode 100644 index 0000000..4a8d0a7 --- /dev/null +++ b/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('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(/&/g, '&') + .replace(/</g, '<') + .replace(/>/g, '>') + .replace(/"/g, '"') + .replace(/'/g, "'"); + } + + return ( +
+
+
+
+ {props?.header?.pageTitle && ( +
{props?.header?.pageTitle}
+ )} + + {props?.header?.title && ( + +
+ + {props?.header?.title || ''} + +
+ )} + {props?.header?.content && ( +
+ + {props?.header?.content || ''} + +
)} +
+
+
+ {props?.divNotes?.map((item: any, i: number) => ( + + } + aria-controls="panel1-content" + id="panel1-header" + className={`${global.head4_4} ${global.manrope}`} + > + +
+ + {item?.noteIcon || ''} + +
+ + {item?.noteTitle} + + +
+ + {item?.noteBody || ''} + +
+
+ {'tab-image'} +
+
+ Electrical +
+
+ Plumbing{' '} +
+
+
+ + + ))} +
+
+
+
+
+ ); +}; +export default WhyItsEssential; diff --git a/components/MyAppLanding/component/WhyItsEssential/whyItsEssential.module.scss b/components/MyAppLanding/component/WhyItsEssential/whyItsEssential.module.scss new file mode 100644 index 0000000..38d886d --- /dev/null +++ b/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); + } + } + } + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/WhyNeed/WhyNeed.module.scss b/components/MyAppLanding/component/WhyNeed/WhyNeed.module.scss new file mode 100644 index 0000000..f9d01ce --- /dev/null +++ b/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; + } + } + } + } +} diff --git a/components/MyAppLanding/component/WhyNeed/WhyNeed.tsx b/components/MyAppLanding/component/WhyNeed/WhyNeed.tsx new file mode 100644 index 0000000..43c9f22 --- /dev/null +++ b/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 ( +
+
+
+
+
+ {header?.pageTitle && ( +
{header.pageTitle}
+ )} + {header?.title && ( +
+ + {header.title || ''} + +
+ )} +
+
+
+
+
+
+ +
+
+ {divNotes && divNotes[0] && ( +
+ {divNotes[0]?.noteTitle && ( +
+ + {divNotes[0].noteTitle || ''} + +
+ )} +
+ )} +
+
+
+ +
+
+
+
+
+ +
+
+ {divNotes && divNotes[1] && ( +
+ {divNotes[1]?.noteTitle && ( +
+ + {divNotes[1].noteTitle || ''} + +
+ )} +
+ )} +
+
+
+
+
+ ); +}; + +export default WhyNeed; diff --git a/components/MyAppLanding/component/Workflow/Workflow.module.scss b/components/MyAppLanding/component/Workflow/Workflow.module.scss new file mode 100644 index 0000000..d3f73ba --- /dev/null +++ b/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; + } + } + } +} diff --git a/components/MyAppLanding/component/Workflow/Workflow.tsx b/components/MyAppLanding/component/Workflow/Workflow.tsx new file mode 100644 index 0000000..5e290de --- /dev/null +++ b/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 ( +
+
+
+
{props?.header?.pageTitle || 'How Airbnb Clone work'}
+ {props?.header?.title && ( +
+ + {props?.header?.title || ''} + +
+ )} +
+
+
+ {props?.backgroundImage?.data?.attributes?.url && ( + {'cloneBanner'} + )} +
+
+
+
+ ); + }; + + export default Workflow; diff --git a/components/MyAppLanding/component/callToAction/CallToAction.tsx b/components/MyAppLanding/component/callToAction/CallToAction.tsx new file mode 100644 index 0000000..69b5c56 --- /dev/null +++ b/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 ( + <> +
+
+
+
+ {backgroundImage?.data?.attributes?.url && ( +
+ bg +
+ )} +
+
+ {contentBody && ( + + {contentBody || ''} + + )} +
+
+
+
+ arrow +
+
+ +
+
+
+
+
+
+ + ); +}; + +export default CallToAction; diff --git a/components/MyAppLanding/component/callToAction/callToAction.module.scss b/components/MyAppLanding/component/callToAction/callToAction.module.scss new file mode 100644 index 0000000..27800dc --- /dev/null +++ b/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; + } + } + } + } +} diff --git a/components/MyAppLanding/component/devicesTechStacks/DevicesTechStacks.module.scss b/components/MyAppLanding/component/devicesTechStacks/DevicesTechStacks.module.scss new file mode 100644 index 0000000..732cdd3 --- /dev/null +++ b/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); + } + } + } + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/devicesTechStacks/DevicesTechStacks.tsx b/components/MyAppLanding/component/devicesTechStacks/DevicesTechStacks.tsx new file mode 100644 index 0000000..dff5421 --- /dev/null +++ b/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 ( + + ); +} + +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 ( +
+
+
+
+ {header?.pageTitle && ( +
{header?.pageTitle}
+ )} + {header?.title && ( +
+ + {header?.title || ''} + +
+ )} + {header?.content && ( +
+ + {header?.content || ''} + +
+ )} +
+
+ + {/* {hasTitle && ( + + + {[1, 2, 3].map((data, index) => ( + + ))} + + + )} */} + + + {tech?.map((item: TechInterface, i: number) => ( + + ))} + + + {tech?.map((item: TechInterface, index: number) => ( + +
+
    + {item?.technologies?.data?.map((listItem: TechnologyData, index: number) => { + return ( +
  • +
    + {listItem?.attributes?.icon?.data?.attributes?.url && ( + {'icon'} + )} +
    +
    + + {listItem?.attributes?.name || ''} + +
    +
    • + ); + })} +
+
+ + ))} + +
+
+
+ {/* {techLearning && techLearning?.length > 0 && } */} +
+ ); +}; + +export default DevicesTechStacks; diff --git a/components/MyAppLanding/component/endToEndService/EndToEndService.module.scss b/components/MyAppLanding/component/endToEndService/EndToEndService.module.scss new file mode 100644 index 0000000..1a312e8 --- /dev/null +++ b/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; + } + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/endToEndService/EndToEndService.tsx b/components/MyAppLanding/component/endToEndService/EndToEndService.tsx new file mode 100644 index 0000000..91c2db3 --- /dev/null +++ b/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(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 ( + <> +
+
+
+
+
+ {header?.pageTitle &&
{header?.pageTitle}
} + {header?.title && ( +
+ + {header?.title || ''} + +
+ )} + {header?.content && ( +
+ {header?.content && ( + + {header?.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 ( + + } + aria-controls={`panelLeft${i}bh-content`} + id={`panelLeft${i}bh-header`} + > + {'icon'} +
+ + {item?.noteTitle || ''} + +
+ + +
+ {item.noteBody && ( + + {item.noteBody} + + )} +
+ + + ) + })} +
+
+ {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 ( + + } + aria-controls={`panelRight${i}bh-content`} + id={`panelRight${i}bh-header`} + > + {'icon'} +
+ + {item?.noteTitle || ''} + +
+ + +
+ {item.noteBody && ( + + {item.noteBody} + + )} +
+ + + ) + })} +
+
+
+
+
+ + ); +}; + +export default EndToEndService; diff --git a/components/MyAppLanding/component/howItWorks/howItWorks.module.scss b/components/MyAppLanding/component/howItWorks/howItWorks.module.scss new file mode 100644 index 0000000..2e1402d --- /dev/null +++ b/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); + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/howItWorks/howItWorks.tsx b/components/MyAppLanding/component/howItWorks/howItWorks.tsx new file mode 100644 index 0000000..0f170a9 --- /dev/null +++ b/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 ( +
+
+
+
+ {header?.pageTitle && ( +
{header?.pageTitle}
+ )} + {header?.title && ( +
+ + {header?.title || ''} + +
+ )} + {header?.content && ( +
+ + {header?.content || ''} + +
+ )} +
+
+ {details?.map((item: KeyNote, i: number) => ( +
+
+ {item?.noteImage?.data?.attributes?.url && ( + {item.noteTitle + )} +
+
+ {item?.noteTitle && ( +
+ + {item?.noteTitle || ''} + +
+ )} + {item?.noteBody && ( +
+ + {item?.noteBody || ''} + +
+ )} +
+
+ ))} +
+
+
+
+ ); +}; + +export default howItWorks; diff --git a/components/MyAppLanding/component/netflixBenefit/NetflixBenefit.module.scss b/components/MyAppLanding/component/netflixBenefit/NetflixBenefit.module.scss new file mode 100644 index 0000000..06ebc01 --- /dev/null +++ b/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); + } + } + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/netflixBenefit/NetflixBenefit.tsx b/components/MyAppLanding/component/netflixBenefit/NetflixBenefit.tsx new file mode 100644 index 0000000..545ccd5 --- /dev/null +++ b/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 ( +
+
+
+
+
+ Cutting-Edge Technologies for Your Netflix-Like Application +
+

+ Benefits of Netflix Clone App Development  +

+

+ 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. +

+
+
+ {[1, 2, 3, 4, 5, 6]?.map((item, i) => ( +
+
+
+ {'nexIcon'} +
+
+

01

+
+
+
+

Customization 

+

+ 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.  +

+
+
+ ))} +
+
+
+
+ ); +}; + +export default NetflixBenefit; diff --git a/components/MyAppLanding/component/netflixGenFeature/FeatureCard/FeatureCard.module.scss b/components/MyAppLanding/component/netflixGenFeature/FeatureCard/FeatureCard.module.scss new file mode 100644 index 0000000..950cf74 --- /dev/null +++ b/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; + } + } + } + } +} diff --git a/components/MyAppLanding/component/netflixGenFeature/FeatureCard/FeatureCard.tsx b/components/MyAppLanding/component/netflixGenFeature/FeatureCard/FeatureCard.tsx new file mode 100644 index 0000000..c56f3e4 --- /dev/null +++ b/components/MyAppLanding/component/netflixGenFeature/FeatureCard/FeatureCard.tsx @@ -0,0 +1,221 @@ +import React, { FC, SyntheticEvent, useState } from 'react'; +import global from 'theme/global/global.module.scss'; +import styles from './FeatureCard.module.scss'; +import { + Box, + Typography, + Tabs, + Tab, + Paper, + List, + ListItem, + ListItemIcon, + ListItemText, + styled, + useTheme, +} from '@mui/material'; +import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; +import WebAssetIcon from '@mui/icons-material/WebAsset'; +import TvIcon from '@mui/icons-material/Tv'; +import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings'; +import PhoneAndroidIcon from '@mui/icons-material/PhoneAndroid'; +import { CORRECT_ICON, TINDER_NEED_ICON2 } from '@/constants/svgConstant'; +import ReactMarkdown from 'react-markdown'; +import rehypeRaw from 'rehype-raw'; +import { Diversity1 } from '@mui/icons-material'; + +// Type for feature item +interface FeatureItem { + title: string; + description: string; +} + +const icons = [, , , ]; + +const IconCircle = styled('div')({ + backgroundColor: '#e5f8ff', + borderRadius: '50%', + padding: 6, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + marginRight: 8, +}); + +// Gradient background for active tab +const GradientTab = styled(Tab)(({ theme }) => ({ + textTransform: 'none', + borderRadius: '9999px', + border: '1px solid #bce9ff', + minHeight: '40px', + minWidth: 120, + padding: '6px 16px', + margin: '0 6px', + fontWeight: 500, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + '&.Mui-selected': { + background: 'linear-gradient(90deg, #00c6ff 0%, #0072ff 100%)', + color: '#fff', + fontWeight: 600, + border: 'none', + }, +})); + +const FeatureCard = ({ props }: any) => { + const [value, setValue] = useState(0); // Website tab active by default + + const handleChange = (event: SyntheticEvent, newValue: number) => { + setValue(newValue); + }; + + // Defensive: fallback if no props or features + const currentTab = props?.[value] || {}; + const features: FeatureItem[] = currentTab.features || []; + const tabLabel = currentTab.moduleText || ''; + const tabContent = currentTab.moduleContent || ''; + const fadedIcon = icons[value] || ; + + const tabs = [ + { + label: 'App', + icon: , + }, + { + label: 'Website', + icon: , + }, + { + label: 'Admin', + icon: , + }, + { + label: 'TV OS', + icon: , + }, + ]; + + return ( +
+ + {/* Tabs */} + + {props?.map((item: any, index: number) => ( + + + +
+ + {item?.moduleNumber || ''} + +
+ + +
+ + {item?.moduleText || ''} + +
+ + } + value={index} + /> + ))} + + + {/* Card */} + + {/* Faded Background Icon */} +
+
+ + {currentTab.moduleText || ''} + + +
+ + {currentTab.moduleNumber || ''} + +
+ +
+
+ +
+ + {currentTab.moduleText || ''} + +
+ + + + + {/* + + */} + + // {currentTab.moduleText + ': '} + // + // } + secondary={ +
+ + {currentTab.moduleContent || ''} + +
+ } + /> + + + + + +
+ ); +}; + +export default FeatureCard; diff --git a/components/MyAppLanding/component/netflixGenFeature/NetflixGenFeature.module.scss b/components/MyAppLanding/component/netflixGenFeature/NetflixGenFeature.module.scss new file mode 100644 index 0000000..b9d02e0 --- /dev/null +++ b/components/MyAppLanding/component/netflixGenFeature/NetflixGenFeature.module.scss @@ -0,0 +1,196 @@ +@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(872); + & > * { + color: var(--clr_vzit_offer_text2); + + font-family: var(--fn_accent); + strong { + @include textGradient(var(--heading_color)); + } + } + .grad_color { + @include textGradient(var(--heading__grad_color)); + } + strong { + @include textGradient(var(--heading_color)); + } + } + .sub_text { + 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; + } + } + .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_secondary25); + border-radius: rem(25); + padding: rem(18); + padding-block-end: rem(10); + & :global(.MuiTabs-scroller) { + overflow: auto !important; + & :global(.MuiTabs-flexContainer) { + justify-content: space-between; + margin-block-end: rem(8); + + :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(250); + text-transform: capitalize; + padding: rem(16) rem(25); + &:global(.Mui-selected) { + // box-shadow: 0px 4px 40px 0px #0000001a; + background: var(--clr_background_primary); + border-radius: rem(18); + padding: rem(16) rem(25); + } + } + } + & :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); + } + } + } + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/netflixGenFeature/NetflixGenFeature.tsx b/components/MyAppLanding/component/netflixGenFeature/NetflixGenFeature.tsx new file mode 100644 index 0000000..67dde44 --- /dev/null +++ b/components/MyAppLanding/component/netflixGenFeature/NetflixGenFeature.tsx @@ -0,0 +1,108 @@ +import React from 'react'; +import global from 'theme/global/global.module.scss'; +import styles from './NetflixGenFeature.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 FeatureCard from './FeatureCard/FeatureCard'; +import CallToAction from '../callToAction/CallToAction'; +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 ( + + ); +} + +interface NetflixGenFeatureInterface { + header: Header; + modules: Module[]; +} + +interface requiredProps{ + props: NetflixGenFeatureInterface; + id: string; +} + +const NetflixGenFeature = ({ props, id }: requiredProps) => { + const [value, setValue] = React.useState(0); + const header = props?.header || {}; + const handleChange = (event: React.SyntheticEvent, newValue: number) => { + setValue(newValue); + }; + return ( +
+
+
+
+ {header?.pageTitle && ( +
{header?.pageTitle}
+ )} + {header?.title && ( +
+ + {header.title || ''} + +
+ )} + {header?.content && ( +
+ + {header?.content || ''} + +
)} +
+
+ +
+
+ +
+ +
+ ); +}; + +export default NetflixGenFeature; diff --git a/components/MyAppLanding/component/netflixGenTech/NetflixGenTech.module.scss b/components/MyAppLanding/component/netflixGenTech/NetflixGenTech.module.scss new file mode 100644 index 0000000..85a10e5 --- /dev/null +++ b/components/MyAppLanding/component/netflixGenTech/NetflixGenTech.module.scss @@ -0,0 +1,195 @@ +@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); + } + } + .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); + max-width: rem(260); + 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); + } + } + } + } +} diff --git a/components/MyAppLanding/component/netflixGenTech/NetflixGenTech.tsx b/components/MyAppLanding/component/netflixGenTech/NetflixGenTech.tsx new file mode 100644 index 0000000..a90902f --- /dev/null +++ b/components/MyAppLanding/component/netflixGenTech/NetflixGenTech.tsx @@ -0,0 +1,120 @@ +import React from 'react'; +import global from 'theme/global/global.module.scss'; +import styles from './NetflixGenTech.module.scss'; +import 'swiper/css'; +import 'swiper/css/pagination'; +import 'swiper/css/navigation'; +import { Autoplay, Navigation } from 'swiper'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import { PhoneRings } from '@/constants/svgConstant'; +import { BusinessSliderInterface } from '@/interfaces/mobileAppSubPages'; +import ReactMarkdown from 'react-markdown'; +import { UTILITY_CONSTANTS } from '@/constants/utilityConstants'; + +interface DevicesWhyIos { + extraClass?: string; + data: BusinessSliderInterface; + id?: string; + onOpen?: () => void; +} +const NetflixGenTech = ({ id, extraClass, data, onOpen }: DevicesWhyIos) => { + return ( +
+
+
+
+
+ Cutting-Edge Technologies for Your Netflix-Like Application +
+

+ Powering Your Netflix-Like App with Nex-Gen Technologies  +

+

+ With years of experience and in-depth knowledge, our dedicated team integrates cutting-edge + technologies into your video streaming platform. This integration enhances security, + functionality, and user experience, ensuring your app remains competitive in the evolving + market.  +

+
+
+ +
+
+
+
+ + {[1, 2, 3, 4, 5, 6, 7, 8]?.map((item, i) => ( + +
+
+
+ {'nexIcon'} +
+
+
+

+ AI/ML
Algorithms  +

+

+ We integrate AI and ML to personalize content recommendations for users and + optimize video compression. This ensures users stay engaged with appropriate + content and your platform runs efficiently, adapting to viewing behaviors in + real-time.  +

+
+
+ + ))} + +
+
+ ); +}; + +export default NetflixGenTech; diff --git a/components/MyAppLanding/component/netflixWork/NetflixWork.module.scss b/components/MyAppLanding/component/netflixWork/NetflixWork.module.scss new file mode 100644 index 0000000..3d54f38 --- /dev/null +++ b/components/MyAppLanding/component/netflixWork/NetflixWork.module.scss @@ -0,0 +1,192 @@ +@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; + 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: 0; + left: 50%; + transform: translateX(-50%); + width: 100%; + height: 100%; + background: hsl(var(--AppM_clr_bg_dark_secondary)); + } + .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; + + .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); + } + } + } + } + // &:hover { + // background-color: var(--sub_land_border_clr); + // .image_box { + // background: var(--clr_background_primary); + // } + // } + &:nth-child(2) .image_box::after, + &:nth-child(5) .image_box::after { + transform: translateX(-50%) rotate(180deg); + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/netflixWork/NetflixWork.tsx b/components/MyAppLanding/component/netflixWork/NetflixWork.tsx new file mode 100644 index 0000000..c7438dd --- /dev/null +++ b/components/MyAppLanding/component/netflixWork/NetflixWork.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import global from 'theme/global/global.module.scss'; +import styles from './NetflixWork.module.scss'; +import { BusinessSliderInterface } from '@/interfaces/mobileAppSubPages'; +import { UTILITY_CONSTANTS } from '@/constants/utilityConstants'; + +const NetflixWork = () => { + return ( +
+
+
+
+
+ Cutting-Edge Technologies for Your Netflix-Like Application +
+

+ How Does Netflix Clone App Work? +

+

+ Ready to bring the world of entertainment to life? Stream your favorite movies and TV shows + effortlessly. Our video streaming app provides a sleek interface and personalized + recommendations, allowing users to access their accounts anytime, anywhere. s +

+
+
+ {[1, 2, 3, 4, 5, 6]?.map((item, i) => ( +
+
+ {'nexIcon'} +
+
+

Sign Up 

+

+ Users are required to sign up for the Netflix clone app with the help of their + phone number, email ID, or social media account.  +

+
+
+ ))} +
+
+
+
+ ); +}; + +export default NetflixWork; diff --git a/components/MyAppLanding/component/secondWhyChoose/SecondWhyChoose.module.scss b/components/MyAppLanding/component/secondWhyChoose/SecondWhyChoose.module.scss new file mode 100644 index 0000000..99ce561 --- /dev/null +++ b/components/MyAppLanding/component/secondWhyChoose/SecondWhyChoose.module.scss @@ -0,0 +1,238 @@ +@use 'theme/sass' as *; + +.whyUsSec { + width: 100%; + background: var(--AppM_clr_bg_light_blue_chip); + .customContainer { + width: 100%; + display: grid; + grid-template-columns: 50fr 45fr; + gap: scaleValue(20px, 80px); + @include max(767px) { + grid-template-columns: 1fr; + } + @include max(575px) { + display: block; + } + .leftBox { + width: 100%; + @include displayFlex(column, flex-start, space-between); + gap: rem(30); + .innerBoxDetails { + 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; + margin: 0 0 20px; + & > * { + color: hsl(var(--AppMobile_clr_text_chip)); + font-weight: var(--fw_medium); + font-family: var(--fn_accent); + } + } + .heading { + color: var(--clr_vzit_offer_text2); + text-transform: capitalize; + font-weight: var(--fw_bold); + letter-spacing: 0; + + & > * { + color: var(--clr_vzit_offer_text2); + font-weight: var(--fw_bold); + } + strong { + @include textGradient(var(--heading_color)); + } + } + .description { + color: var(--clr-para); + margin-block-start: rem(20); + & > * { + color: var(--clr-para); + } + } + } + .ctaContainer { + width: 100%; + background: linear-gradient(214.49deg, #e6f6ff 12.93%, #aae8fe 83.11%); + border-radius: rem(30); + margin-block-start: scaleValue(30px, 56px); + border: 2px solid; + border-image-source: linear-gradient(233.17deg, #d9f2ff 22.55%, #44bde9 79.67%); + padding-block: scaleValue(20px, 40px); + padding-inline: scaleValue(20px, 50px); + position: relative; + z-index: 1; + .ctaTitle { + color: var(--clr_vzit_offer_text2); + text-transform: capitalize; + margin-block-end: rem(50); + font-family: var(--fn_accent); + font-weight: var(--fw_bold); + line-height: 1.6 !important; + + & > * { + color: var(--clr_vzit_offer_text2); + } + strong { + color: var(--clr_sky_dark_blue); + & > * { + color: var(--clr_sky_dark_blue); + } + } + } + .ctaBtn { + border-radius: rem(12); + cursor: pointer; + width: rem(238); + height: rem(73); + @include displayFlex(row, center, center); + font-family: var(--fn_accent); + font-weight: var(--fw_regular); + font-size: rem(21); + @include max(479px) { + width: 100%; + } + } + .aiSupport { + position: absolute; + width: rem(127); + height: rem(127); + bottom: rem(45); + right: rem(52); + z-index: -1; + img { + width: 100%; + height: 100%; + object-fit: contain; + } + } + } + } + .rightBox { + width: 100%; + @include max(575px) { + margin-block-start: rem(20); + } + .swiper_box { + height: rem(780); /* Adjust based on your layout */ + overflow-y: auto; + padding-inline-end: scaleValue(10px, 30px); + &::-webkit-scrollbar-track { + background-color: #aacee2; + } + + &::-webkit-scrollbar { + width: 2px; + } + + &::-webkit-scrollbar-thumb { + background-color: var(--clr_sky_dark_blue); + } + + :global(.swiper-slide) { + height: fit-content !important; + // @include max(1023px) { + // height: 300px; + // } + // @include max(991px) { + // height: 310px; + // margin-block-end: rem(10); + // } + // @include max(767px) { + // height: 230px; + // } + // @include max(575px) { + // height: 270px; + // } + // @include max(375px) { + // height: 290px; + // } + } + + .cardItem { + padding: scaleValue(10px, 25px) scaleValue(8px, 36px); + overflow: hidden; + border-radius: rem(20); + transition: var(--transition_1s); + &:hover { + background: linear-gradient(101.01deg, #11b0ea 2.01%, #a8e2fd 100%); + box-shadow: 0px 4px 60px 0px #0000000d; + + & .titleBox { + .title { + color: var(--clr_text_secondary); + text-transform: capitalize; + & > * { + color: var(--clr_text_secondary); + } + } + .cardImg { + img { + filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) + hue-rotate(288deg) brightness(102%) contrast(102%); + } + } + } + .para { + color: var(--clr_text_secondary); + font-weight: var(--fw_medium); + & > * { + color: var(--clr_text_secondary); + font-weight: var(--fw_medium); + } + } + } + .titleBox { + width: 100%; + @include displayFlex(row, flex-start, space-between); + gap: rem(20); + .title { + width: 100%; + color: var(--clr_vzit_offer_text2); + font-family: var(--fn_accent); + font-weight: var(--fw_bold); + & > * { + color: var(--clr_vzit_offer_text2); + } + } + .cardImg { + flex-shrink: 0; + width: rem(48); + height: rem(48); + img { + width: 100%; + height: 100%; + object-fit: contain; + } + } + } + .para { + margin-block-start: rem(20); + color: var(--clr-para); + width: 100%; + max-width: rem(390); + & > * { + color: var(--clr-para); + } + } + } + + @include max(767px) { + height: rem(400); + } + } + } + } +} diff --git a/components/MyAppLanding/component/secondWhyChoose/SecondWhyChoose.tsx b/components/MyAppLanding/component/secondWhyChoose/SecondWhyChoose.tsx new file mode 100644 index 0000000..73abde8 --- /dev/null +++ b/components/MyAppLanding/component/secondWhyChoose/SecondWhyChoose.tsx @@ -0,0 +1,172 @@ +import global from 'theme/global/global.module.scss'; +import styles from './SecondWhyChoose.module.scss'; +import 'swiper/css'; +import 'swiper/css/pagination'; +import 'swiper/css/navigation'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import { Autoplay } from 'swiper'; +import { useState } from 'react'; +import Image from 'next/image'; +import { UTILITY_CONSTANTS } from '@/constants/utilityConstants'; +import { Footer } from '@/interfaces/whyChooseUs.interface'; +import { Header, KeyNote as Notes } from '@/interfaces/shared/shared'; +import CallToAction from '../callToAction/CallToAction'; +import ReactMarkdown from 'react-markdown'; +import rehypeRaw from 'rehype-raw'; + +interface SecondWhyChooseInterface { + extraClass: string; + props: PropsContent; + onOpen: () => void; + id: string; +} + +interface PropsContent { + header: Header; + notes: Notes[]; + footer: Footer; +} + +const SecondWhyChoose = ({ extraClass, props, onOpen, id }: SecondWhyChooseInterface) => { + const { header, notes, footer } = props; + 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 = 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 notesLen = notes?.length; + const count = notes?.length ?? 0; + const perView = Math.min(3, Math.max(1, count)); + const canLoop = count > perView + 2; // need extra slides when looping vertically + return ( +
+
+
+
+ {header?.pageTitle &&
{header?.pageTitle}
} + + {header.title && ( +
+ + {header.title || ''} + +
+ )} +
+ + {header.content || ''} + +
+
+ {footer && ( +
+
+ + {footer?.contentBody || ''} + +
+ + + {footer?.backgroundImage?.data?.attributes?.url && ( +
+ AI_SUPPORT +
+ )} +
+ )} +
+
+ { + // TS-safe way to set internal params that smooth looping + sw.params.loopedSlides = Math.min(10, count); + // @ts-expect-error not in React types but supported by core + sw.params.loopAdditionalSlides = 5; + }} + onSlideChangeTransitionEnd={() => { + // do any state updates here, NOT during drag + }} + > + {[...notes, ...notes]?.map((item: Notes, i: number) => { + const base = + item.id ?? + item.noteImage?.data?.id ?? + (item.noteTitle ? item.noteTitle.trim().toLowerCase().replace(/\s+/g, '-') : 'note'); + const key = `${base}-${i}`; // add `-${rowId}` if needed + return ( + +
+
+
+ + {item.noteTitle || ''} + +
+
+ {item.noteImage?.data?.attributes?.url ? ( + {'card + ) : ( +
+ + {item.noteIcon || ''} + +
+ )} +
+
+

+ {item.noteBody ? item.noteBody : ''} +

+
+ + ); + })} + +
+
+
+ ); +}; + +export default SecondWhyChoose; diff --git a/components/MyAppLanding/component/streamline/Streamline.module.scss b/components/MyAppLanding/component/streamline/Streamline.module.scss new file mode 100644 index 0000000..ff45e44 --- /dev/null +++ b/components/MyAppLanding/component/streamline/Streamline.module.scss @@ -0,0 +1,224 @@ +@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; + .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: 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); + strong { + @include textGradient(var(--heading_color)); + } + & > * { + color: var(--clr_vzit_offer_text2); + + strong { + @include textGradient(var(--heading_color)); + } + } + } + .sub_title { + font-weight: var(--fw_medium); + color: var(--clr-para); + margin-block-start: rem(20); + & > * { + font-weight: var(--fw_medium); + color: var(--clr-para); + } + } + } + .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_secondary25); + border-radius: rem(25); + padding: rem(18); + padding-block-end: rem(10); + & :global(.MuiTabs-scroller) { + overflow: auto !important; + & :global(.MuiTabs-flexContainer) { + justify-content: flex-start; + margin-block-end: rem(8); + + :global(.MuiButtonBase-root) { + font-size: rem(18); + font-weight: var(--fw_semiBold); + color: var(--clr_vzit_bg); + font-family: var(--fn_accent); + width: 100%; + flex: 1; + min-width: rem(200); + text-transform: capitalize; + padding: rem(16) rem(25); + &:global(.Mui-selected) { + // box-shadow: 0px 4px 40px 0px #0000001a; + background: var(--clr_background_primary); + 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_text2); + line-height: 1.6; + font-weight: var(--fw_medium); + } + ul{ + li{ + padding-inline-start: rem(35); + margin-block-start: rem(8); + font-family: var(--fn_accent); + color: var(--clr_vzit_offer_text2); + font-weight: var(--fw_bold); + position: relative; + + & > * { + color: var(--clr_vzit_offer_text2); + line-height: 1.6; + font-weight: var(--fw_bold); + 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(89%) sepia(11%) saturate(707%) + hue-rotate(162deg) brightness(95%) contrast(95%); + } + + &:first-child { + margin-block-start: 0; + } + + } + } + } + } + } + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/streamline/Streamline.tsx b/components/MyAppLanding/component/streamline/Streamline.tsx new file mode 100644 index 0000000..5dc586d --- /dev/null +++ b/components/MyAppLanding/component/streamline/Streamline.tsx @@ -0,0 +1,152 @@ +import React from 'react'; +import global from 'theme/global/global.module.scss'; +import styles from './Streamline.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, KeyNote } 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 ( + + ); +} + +interface StreamlineInterface { + header: Header; + details: KeyNote[]; +} + +interface RequiredProps { + props: StreamlineInterface; + id: string; +} + +const Streamline = (props: RequiredProps) => { + const { header, details } = props.props; + + const [value, setValue] = React.useState(0); + 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 handleChange = (event: React.SyntheticEvent, newValue: number) => { + setValue(newValue); + }; + return ( +
+
+
+
+ {header?.pageTitle && ( +
{header?.pageTitle}
+ )} + {header?.title && ( +
+ + {header?.title || ''} + +
+ )} + {header?.content && ( +
+ + {header?.content || ''} + +
+ )} +
+
+
+ + + + {details?.map((item: any, i: number) => ( + + ))} + + + {details?.map((item: KeyNote, i: number) => ( + +
+
+
+ {/*
+ +
*/} +
+
+ {item?.noteBody && ( + + {item?.noteBody || ''} + + )} +
+ +
+
+
+ {item.noteImage && ( +
+ {'tabImg'} +
+ )} +
+ + ))} + +
+
+
+
+
+ ); +}; + +export default Streamline; diff --git a/components/MyAppLanding/component/subLandingQuestions/SubLandingQuestions.module.scss b/components/MyAppLanding/component/subLandingQuestions/SubLandingQuestions.module.scss new file mode 100644 index 0000000..28b6a92 --- /dev/null +++ b/components/MyAppLanding/component/subLandingQuestions/SubLandingQuestions.module.scss @@ -0,0 +1,102 @@ +@use 'theme/sass' as *; + +.questions_sec { + width: 100%; + background: var(--clr_background_secondary29); + position: relative; + overflow: hidden; + + &.sub_landing_faQ { + background: var(--clr_background_primary); + + &::after { + content: ''; + border-radius: 1250px; + background: var(--clr_new_power_blue2); + opacity: 0.6; + width: 200px; + height: 200px; + filter: blur(100px); + position: absolute; + left: -8%; + top: 27%; + z-index: 0; + } + } + .custom_container { + position: relative; + z-index: 1; + .inner_auto_services { + @include displayFlex(column, flex-start, flex-start); + gap: 20px; + + .content_box { + width: 100%; + @include displayFlex(column, center, center); + padding-block-end: scaleValue(20px, 60px); + + .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); + } + } + .faq_title { + font-family: var(--fn_accent); + color: var(--clr_vzit_offer_text2); + font-weight: var((--fw_semiBold)); + font-size: scaleValue(28px, 42px); + line-height: scaleValue(36px, 50px); + strong { + @include textGradient(var(--new_gradient27)); + } + & > * { + font-family: var(--fn_accent); + color: var(--clr_vzit_offer_text2); + font-weight: var((--fw_semiBold)); + font-size: scaleValue(28px, 42px); + line-height: scaleValue(36px, 50px); + strong { + @include textGradient(var(--new_gradient27)); + } + } + } + .text { + color: var(--clr-para); + font-weight: var(--fw_medium); + font-family: var(--font_primary); + max-width: rem(955); + margin-block-start: scaleValue(15px, 30px); + margin-inline: auto; + & * { + color: var(--clr-para); + font-weight: var(--fw_medium); + font-family: var(--font_primary); + max-width: rem(955); + margin-block-start: scaleValue(15px, 30px); + } + } + } + } + .accordion { + width: 100%; + } + } + } +} diff --git a/components/MyAppLanding/component/subLandingQuestions/SubLandingQuestions.tsx b/components/MyAppLanding/component/subLandingQuestions/SubLandingQuestions.tsx new file mode 100644 index 0000000..b65903d --- /dev/null +++ b/components/MyAppLanding/component/subLandingQuestions/SubLandingQuestions.tsx @@ -0,0 +1,108 @@ +import ReactMarkdown from 'react-markdown'; +import global from 'theme/global/global.module.scss'; +import styles from './SubLandingQuestions.module.scss'; +import { FaqInterface } from '@/interfaces/mobileAppSubPages'; +import { Header } from '@/interfaces/shared/shared'; +import CustomAccordion from './customAccordion/CustomAccordion'; +import rehypeRaw from 'rehype-raw'; +interface FAQInterface { + header: Header; + faq: any[]; +} +interface SubLandingFAQInterface { + faqData: FaqInterface; + id?: string; + extraClass?: string; + props: FAQInterface; +} + +const SubLandingQuestions = ({ faqData, extraClass,props, id }: SubLandingFAQInterface) => { + const { header, faq } = props; + const solidTitleColor = header?.titleColor?.replace?.(/;$/, '') || undefined; + 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 ( + <> +
+
+
+
+
+ {header?.pageTitle && ( +
{header?.pageTitle}
+ )} + {header?.title && ( +
+ + {header?.title || ''} + +
+ )} + {header?.content && ( +
+ + {header?.content || ''} + +
)} +
+
+
+ +
+
+
+
+ + ); +}; + +export default SubLandingQuestions; diff --git a/components/MyAppLanding/component/subLandingQuestions/customAccordion/CustomAccordion.module.scss b/components/MyAppLanding/component/subLandingQuestions/customAccordion/CustomAccordion.module.scss new file mode 100644 index 0000000..1a019de --- /dev/null +++ b/components/MyAppLanding/component/subLandingQuestions/customAccordion/CustomAccordion.module.scss @@ -0,0 +1,136 @@ +@use 'theme/sass' as *; + +.custom_accordion { + width: 100%; + @include displayFlex(column, flex-start, flex-start); + gap: 20px; + + .title { + font-weight: var(--fw_bold); + font-family: var(--fn_accent); + color: var(--clr-para); + } + .para { + p { + color: var(--clr_conver); + font-weight: var(--fw_regular); + font-family: var(--fn_accent); + strong { + color: var(--clr_text_secondary); + font-family: var(--font_primary); + font-weight: var(--fw_bold); + margin-block-start: 20px; + font-size: 16px; + line-height: 26px; + } + } + } + .expanded_icon { + display: none; + } + &.healthCareFaQ { + :global(.MuiPaper-root) { + &:global(.Mui-expanded) { + background: var(--clr_health_faq_bg); + } + } + } + :global(.MuiAccordion-root) { + background: transparent; + } + :global(.MuiPaper-root) { + width: 100%; + box-shadow: none; + border: none; + padding: 0; + border-radius: 25px !important; + padding-inline: scaleValue(20px, 45px); + padding-block: 20px; + margin: 0 !important; + + &::before { + display: none; + } + &:global(.Mui-expanded) { + background: var(--clr_health_faq_bg); + .title { + color: var(--clr_text_secondary); + font-weight: var(--fw_bold); + } + .para { + color: var(--clr_text_secondary); + max-width: rem(1050); + line-height: 1.6; + } + p { + font-weight: var(--fw_medium); + color: var(--clr_text_secondary); + font-family: var(--fn_accent); + } + & :global(.MuiAccordionDetails-root) { + @include max(575px) { + padding-inline: 0; + } + } + ul { + @include displayFlex(column, flex-start, flex-start); + gap: 15px; + padding-inline-start: 16px; + margin-block-start: 15px; + li { + font-weight: var(--fw_medium); + color: var(--clr_text_secondary); + font-family: var(--fn_accent); + list-style-type: disc; + } + } + ol { + @include displayFlex(column, flex-start, flex-start); + gap: 15px; + padding-inline-start: 16px; + margin-block-start: 15px; + + li { + font-weight: var(--fw_medium); + color: var(--clr_text_secondary); + font-family: var(--fn_accent); + list-style-type: decimal; + } + } + :global(.MuiAccordionSummary-content) { + .expanded_icon { + display: block; + color: var(--clr_text_secondary); + } + .icon { + display: none; + } + } + :global(.MuiCollapse-root) { + width: 100%; + margin-block-start: 10px; + } + } + :global(.MuiAccordionSummary-content) { + margin-block: 0; + justify-content: space-between; + align-items: center; + gap: 10px; + svg { + font-size: 25px; + flex-shrink: 0; + } + } + :global(.MuiButtonBase-root) { + min-height: 20px; + @include max(575px) { + padding: 0; + } + :global(.MuiAccordionSummary-expandIconWrapper) { + svg { + display: none; + } + } + } + } +} diff --git a/components/MyAppLanding/component/subLandingQuestions/customAccordion/CustomAccordion.tsx b/components/MyAppLanding/component/subLandingQuestions/customAccordion/CustomAccordion.tsx new file mode 100644 index 0000000..c0655e9 --- /dev/null +++ b/components/MyAppLanding/component/subLandingQuestions/customAccordion/CustomAccordion.tsx @@ -0,0 +1,67 @@ +import * as React from 'react'; +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 { TbCirclePlus, TbCircleMinus } from 'react-icons/tb'; + +import global from 'theme/global/global.module.scss'; +import styles from './CustomAccordion.module.scss'; +import ReactMarkdown from 'react-markdown'; +import rehypeRaw from 'rehype-raw'; +interface AccordionSummaryInterface { + question: string; + answer: string; +} + +interface CustomAccordionInterface { + // accordionContent: AccordionSummaryInterface[]; + extraClass?: string; + props: any; +} + +const CustomAccordion = ({ extraClass,props }: CustomAccordionInterface) => { + const [expanded, setExpanded] = React.useState(false); + + const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => { + setExpanded(isExpanded ? panel : false); + }; + + return ( +
+ {props?.map((item:any, i:number) => ( + + } + aria-controls={`panel${i + 1}bh-content`} + id={`panel${i + 1}bh-header`} + > +
+ + {item?.question || ''} + +
+ + + + +
+ + {item?.answer || ''} + +
+ + + ))} +
+ ); +}; + +export default CustomAccordion; diff --git a/components/MyAppLanding/component/testimonialLanding/testimonialLanding.module.scss b/components/MyAppLanding/component/testimonialLanding/testimonialLanding.module.scss new file mode 100644 index 0000000..a42d788 --- /dev/null +++ b/components/MyAppLanding/component/testimonialLanding/testimonialLanding.module.scss @@ -0,0 +1,252 @@ +@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% - 524px); + 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; + + video, + img { + width: 100%; + height: 100%; + @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); + } + .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); + } + } + } + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/testimonialLanding/testimonialLanding.tsx b/components/MyAppLanding/component/testimonialLanding/testimonialLanding.tsx new file mode 100644 index 0000000..d2b3148 --- /dev/null +++ b/components/MyAppLanding/component/testimonialLanding/testimonialLanding.tsx @@ -0,0 +1,139 @@ +import React, { useState } from 'react'; +import global from 'theme/global/global.module.scss'; +import styles from './testimonialLanding.module.scss'; +import { UTILITY_CONSTANTS } from '@/constants/utilityConstants'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import { Autoplay, Navigation, Pagination } from 'swiper'; + +import { TestimonialInterface } from '@/interfaces/about.interface'; +import { useEffect, useRef } from 'react'; +import ReactMarkdown from 'react-markdown'; +import { PLAY_ICON, STAR_RATING, TESTIMONIAL_ARROW_LEFT, TESTIMONIAL_ARROW_RIGHT } from '@/constants/svgConstant'; +import { ClientTestimonialInterface } from '@/interfaces/LandingInterface'; + +interface starInterface { + stars: number; +} +function RenderStarRating({ stars }: starInterface) { + const arr = new Array(stars); + return ( + <> + {arr.map((_, i) => { + return ; + })} + + ); +} + +const TestimonialLanding = () => { + const videoRef = useRef(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 ( +
+
+
+
+
Client Testimonial 
+ +

+ What Our Happy Clients Are Saying About Our Custom TikTok like Application +

+
+
+
+
+ + {/*
+
+ +
+ {[1, 2, 3, 4]?.map((item, i) => ( +
+
+

+ “They're very willing to assemble the team that we ask for if we have + certain preferences.It is impressive how easy it was to work with them." +

+
+
+ +
+
+

James Burke

+
+

Consensus Interactive Dubai, UAE

+
+
+
+ {/*
+ + +
*/} +
+
+ ))} +
+
+
+
+
+ ); +}; + +export default TestimonialLanding; diff --git a/components/MyAppLanding/component/testimonialLanding2/testimonialLanding2.module.scss b/components/MyAppLanding/component/testimonialLanding2/testimonialLanding2.module.scss new file mode 100644 index 0000000..bcbd710 --- /dev/null +++ b/components/MyAppLanding/component/testimonialLanding2/testimonialLanding2.module.scss @@ -0,0 +1,189 @@ +@use 'theme/sass' as *; + +.two_card_testimonials_sec { + overflow-x: hidden; + background: var(--clr_background_secondary29); + height: auto; + position: relative; + padding-inline: 25px; + height: 100%; + @include max(991px) { + padding-block: 40px; + padding-inline: 30px; + } + @include max(576px) { + padding-block: 40px; + } + .custom_container { + height: 100%; + display: flex; + flex-direction: column; + + .custom_row { + position: relative; + width: 100%; + height: 100%; + &::before { + content: ''; + position: absolute; + top: -25%; + right: -7.3%; + height: 182px; + width: 182px; + @include max(767px) { + display: none; + } + } + :global(.swiper) { + width: 100%; + height: 100%; + :global(.swiper-wrapper) { + align-items: stretch; + :global(.swiper-slide) { + height: auto; + } + } + :global(.swiper-pagination) { + position: relative; + transform: none; + width: 100% !important; + @include displayFlex(row, center, center); + bottom: inherit; + left: inherit; + top: inherit; + padding-block-start: scaleValue(30px, 60px); + :global(.swiper-pagination-bullet) { + width: 28px; + height: 3px; + background: var(--clr_background_secondary9); + border-radius: 4px; + transform: scale(1) !important; + opacity: 1; + &:global(.swiper-pagination-bullet-active) { + background: var(--clr_active); + } + } + } + } + } + + .tes_content { + text-align: center; + padding-block-end: 60px; + position: relative; + z-index: 2; + max-width: rem(1100); + margin-inline: auto; + @include max(767px) { + padding-block-end: 30px; + } + .content_chip { + width: fit-content; + line-height: rem(24); + background: hsl(var(--AppM_clr_bg_blue_chip)); + 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; + margin: 0 auto 20px; + & > * { + color: hsl(var(--AppMobile_clr_text_chip)); + font-weight: var(--fw_medium); + font-family: var(--fn_accent); + } + } + + h3, + .testimonial_heading { + & > * { + color: var(--lnd2_clr_text_black); + strong { + color: var(--clr_form_color); + } + } + } + } + + .testimonials_box { + width: 100%; + height: 100%; + position: relative; + z-index: 2; + .item { + @include displayFlex(column, center, flex-start); + width: 100%; + gap: 30px; + background-color: var(--clr_background_primary); + border-radius: 17px; + padding: scaleValue(20px, 40px) scaleValue(20px, 35px); + width: 100%; + max-width: 600px; + margin: 0 auto; + height: 100%; + border: 1px solid var(--clr_border_4); + + .content { + width: 100%; + height: 100%; + color: var(--clr_vzit_offer_text); + font-family: var(--fn_accent); + letter-spacing: 0; + line-height: 1.6; + + p { + font-weight: var(--fw_medium); + color: var(--clr_vzit_offer_text); + font-family: var(--fn_accent); + letter-spacing: 0; + line-height: 1.6; + } + } + + .profile { + @include displayFlex(row, center, flex-start); + gap: 20px; + width: 100%; + .pro_img { + width: 70px; + height: 70px; + img { + width: 100%; + height: 100%; + border-radius: 100%; + object-fit: cover; + } + } + + .info { + width: calc(100% - 90px); + + .name { + font-weight: var(--lnd2_fw_bold); + color: var(--lnd2_clr_text_navy_blue); + & > * { + font-weight: var(--lnd2_fw_bold); + color: var(--lnd2_clr_text_navy_blue); + } + } + + .designation { + font-weight: var(--fw_regular); + color: var(--lnd2_clr_text_navy_blue); + font-size: 13px; + & > * { + font-weight: var(--fw_regular); + color: var(--lnd2_clr_text_navy_blue); + font-size: 13px; + } + } + } + } + } + } + } +} diff --git a/components/MyAppLanding/component/testimonialLanding2/testimonialLanding2.tsx b/components/MyAppLanding/component/testimonialLanding2/testimonialLanding2.tsx new file mode 100644 index 0000000..c7b3bd7 --- /dev/null +++ b/components/MyAppLanding/component/testimonialLanding2/testimonialLanding2.tsx @@ -0,0 +1,118 @@ +import global from 'theme/global/global.module.scss'; +import styles from './testimonialLanding2.module.scss'; + +import { Swiper, SwiperSlide } from 'swiper/react'; +import { Autoplay, Pagination } from 'swiper'; + +import { Header, Testimonies } from '@/interfaces/shared/shared'; + +import ReactMarkdown from 'react-markdown'; +import rehypeRaw from 'rehype-raw'; + +interface SecondLandingTestimonialsInterface { + header: Header; + testimonies: Testimonies; +} + +interface TwoCardTestimonialInterface { + props: SecondLandingTestimonialsInterface; + extraClass?: string; + id: string; +} +const TestimonialLanding2 = ({ id, extraClass, props }: TwoCardTestimonialInterface) => { + const { header, testimonies } = props; + return ( +
+
+
+ {header?.pageTitle &&
{header.pageTitle}
} + {header?.title && ( +
+ + {header?.title || ''} + +
+ )} +
+
+ + {testimonies?.data.length > 0 && + [...testimonies?.data, ...testimonies?.data].map((singleTestimonial, index) => ( + +
+
+ + {singleTestimonial?.attributes?.message} + +
+
+ { +
+
+ + {singleTestimonial?.attributes?.name} + + + {singleTestimonial?.attributes?.designation} + + {/*

QMI Doors

*/} +
+
+
+
+ + ))} + +
+
+
+ ); +}; + +export default TestimonialLanding2; diff --git a/components/ThankYou/ThankYou.module.scss b/components/ThankYou/ThankYou.module.scss new file mode 100644 index 0000000..76c3d6b --- /dev/null +++ b/components/ThankYou/ThankYou.module.scss @@ -0,0 +1,140 @@ +@use 'theme/sass' as *; + +.error_sec { + width: 100%; + background: var(--clr_background_primary); + isolation: isolate; + overflow: hidden; + + .error_container { + width: 100%; + .error_inner_content { + position: relative; + width: 100%; + z-index: 1; + isolation: isolate; + + .error_content { + width: 100%; + // max-width: 740px; + margin-inline: auto; + @include displayFlex(row, center, center); + gap: 60px; + padding-block-start: 70px; + // padding-block-end: 300px; + @include max(768px) { + flex-direction: column; + gap: 0; + padding-block-start: 170px; + } + @include max(673px) { + padding-block-start: 100px; + } + & .thank_details { + width: calc(100% - 50%); + @include max(768px) { + width: 100%; + } + } + & .item_img { + padding-inline: 100px; + position: relative; + .thank_page_logo { + position: absolute; + background: var(--new_radial_bg_100); + width: 150px; + height: 150px; + border-radius: 100%; + left: 50%; + top: 15%; + display: flex; + transform: translateX(-50%); + align-items: center; + justify-content: center; + @include max(673px) { + top: 5%; + } + } + .thank_page_bgitem { + position: relative; + @include max(673px) { + margin-block-start: -70px; + } + img { + position: relative; + left: 50%; + transform: translateX(-50%); + } + &::after { + content: ''; + position: absolute; + bottom: -25%; + left: 0px; + background: var(--clr_text_secondary); + filter: blur(50px); + width: 100%; + height: 40%; + border-radius: 0; + z-index: 0; + opacity: 0.7; + transform: rotateZ(-10deg); + } + } + } + .error_txt { + .error_title { + & > * { + color: var(--clr-heading); + font-size: scaleValue(40px, 60px); + line-height: scaleValue(46px, 66px); + font-family: var(--fn_accent); + font-weight: var(--fw_semiBold); + + strong { + color: var(--clr_sky_light_blue); + } + } + } + + .error_para { + & > * { + font-weight: var(--fw_regular); + color: var(--text_paragraph_2); + margin-block: 30px; + font-family: var(--font_primary); + } + } + & .back_link { + text-decoration: none; + } + .homeLink { + @include displayFlex(row, center, flex-start); + gap: 10px; + font-weight: var(--fw_semiBold); + font-family: var(--fw_accent); + color: var(--clr_vzit_text_sky); + text-decoration: underline; + text-decoration: none; + } + } + } + &::before { + content: ''; + position: absolute; + border-radius: 406px; + background: rgba(70, 195, 255, 0.65); + filter: blur(169.5px); + top: 30%; + right: -20%; + width: 366px; + height: 406px; + border-radius: 100%; + z-index: -1; + opacity: 0.8; + @include max(1023px) { + right: -60%; + } + } + } + } +} diff --git a/components/ThankYou/ThankYou.tsx b/components/ThankYou/ThankYou.tsx new file mode 100644 index 0000000..e3f1af9 --- /dev/null +++ b/components/ThankYou/ThankYou.tsx @@ -0,0 +1,58 @@ +import Link from 'next/link'; +import styles from './ThankYou.module.scss'; +import global from 'theme/global/global.module.scss'; +import { UTILITY_CONSTANTS } from '@/constants/utilityConstants'; +import { THANK_INNER_LOGO, THANK_PAGE_Arrow } from '@/constants/svgConstant'; +import ContactForm from '../common/contactForm/ContactForm'; +import ReactMarkdown from 'react-markdown'; + +interface ThankYouPropsInterface { + data: { + content: { + heading: string; + description: string; + btnText: string; + }; + }; +} + +const ThankYou = ({ data }: ThankYouPropsInterface) => { + return ( +
+
+
+
+ {/*
+ error +
*/} +
+ + {data?.content?.heading} + + + {data?.content?.description} + + {data?.content?.btnText && ( +
+ + {data?.content?.btnText} + +
+ )} +
+
+
+ +
+
+ THANKYOU_ITEM +
+
+
+
+
+
+ ); +}; + +export default ThankYou; diff --git a/components/blogCatageroy/BlogCatageroy.tsx b/components/blogCatageroy/BlogCatageroy.tsx new file mode 100644 index 0000000..560575c --- /dev/null +++ b/components/blogCatageroy/BlogCatageroy.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import dynamic from 'next/dynamic'; + +const BlogList = dynamic(() => import('./component/BlogList')); + +import { BlogCardInterface } from '@/interfaces/blog.interface'; + +interface CategoryInterface { + cardDetails: BlogCardInterface; +} + +const BlogCatageroy = ({ cardDetails }: CategoryInterface) => { + return ( + <> + + + ); +}; + +export default BlogCatageroy; diff --git a/components/blogCatageroy/component/BlogList.tsx b/components/blogCatageroy/component/BlogList.tsx new file mode 100644 index 0000000..7e6100f --- /dev/null +++ b/components/blogCatageroy/component/BlogList.tsx @@ -0,0 +1,39 @@ +import Link from 'next/link'; + +import global from 'theme/global/global.module.scss'; +import styles from './blogList.module.scss'; + +import { BlogCardInterface } from '@/interfaces/blog.interface'; +import { CustomImageElement } from '@/helpers/utilities/imageUtil'; + +interface BlogListInterface { + cardDetails: BlogCardInterface; +} + +const BlogList = ({ cardDetails }: BlogListInterface) => { + return ( + <> + +
+
+ +
+
+

{cardDetails?.title}

+
+ + {cardDetails?.updatedAt.split('T')[0]} + +
+
+
+ + + ); +}; + +export default BlogList; diff --git a/components/blogCatageroy/component/blogList.module.scss b/components/blogCatageroy/component/blogList.module.scss new file mode 100644 index 0000000..75ea57e --- /dev/null +++ b/components/blogCatageroy/component/blogList.module.scss @@ -0,0 +1,83 @@ +@use 'theme/sass' as *; + +.blog_card { + cursor: pointer; + width: 100%; + height: 100%; + @include displayFlex(column, center, center); + @include max(1199px) { + @include displayFlex(row, center, center); + } + .blog_box { + width: 100%; + height: 100%; + background-color: var(--clr_background_primary); + border-radius: 10px; + overflow: hidden; + @include displayFlex(row, stretch, flex-start); + @include max(1199px) { + @include displayFlex(column, flex-start, flex-start); + } + .bx_img { + width: 50%; + @include displayFlex(row, center, center); + @include max(1199px) { + width: 100%; + } + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + .bx_content { + width: 60%; + padding-block: 18px; + padding-inline: 20px; + @include max(1199px) { + width: 100%; + } + .top_highlight { + width: 100%; + @include displayFlex(row, center, space-between); + gap: 8px; + flex-wrap: wrap; + .date { + width: auto; + color: var(--text_paragraph_2); + word-wrap: break-all; + } + .chip { + width: fit-content; + min-height: 28px; + @include displayFlex(row, center, center); + padding-inline: 17px; + border-radius: 20px; + color: var(--clr_conver); + background: var(--clr_bg_light_gray); + } + } + .bx_title { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + color: var(--clr_conver); + font-weight: var(--fw_bold); + margin-block-end: 10px; + font-family: var(--fn_accent); + } + .bx_para { + color: var(--clr-para); + margin-block-start: 10px; + line-height: 1.4; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + } + } + } +} diff --git a/components/blogpage/BlogPage.tsx b/components/blogpage/BlogPage.tsx new file mode 100644 index 0000000..c2717bc --- /dev/null +++ b/components/blogpage/BlogPage.tsx @@ -0,0 +1,73 @@ +import BlogList from './components/BlogList'; + +import { + BlogCategoryListInterface, + BlogHomePageDataInterface, + BlogIndustryListInterface, + BlogPageInterface, +} from '@/interfaces/blog.interface'; +import BlogHeading from './components/BlogHeading'; +import BlogBanner from './components/BlogBanner'; +import BlogFilter from './components/BlogFilter'; +import { useRouter } from 'next/router'; + +interface BlogsDataInterface { + categoryData: BlogCategoryListInterface; + data: BlogPageInterface[]; + currentPage: number; + totalPages: number; + industryData: BlogIndustryListInterface; + latestBlog: BlogPageInterface | null; + homeData: BlogHomePageDataInterface; +} + +const BlogPage = ({ + categoryData, + data, + currentPage, + totalPages, + industryData, + latestBlog, + homeData, +}: BlogsDataInterface) => { + const router = useRouter(); + const handlePageChange = (pageNumber: number) => { + const { category, industry, search } = router.query; + const params = new URLSearchParams(); + + params.set('page', pageNumber.toString()); + if (category) params.set('category', category as string); + if (industry) params.set('industry', industry as string); + if (search) params.set('search', search as string); + + router.push(`/blog?${params.toString()}`); + }; + + const sortedBlogData = data?.sort((a, b) => { + const dateA = new Date(a.attributes.updatedAt).getTime(); + const dateB = new Date(b.attributes.updatedAt).getTime(); + return dateB - dateA; + }); + + const gridBlogData = sortedBlogData?.filter((b) => { + if (!latestBlog) return true; + const latestIsPinned = (latestBlog as any)?.attributes?.isPin; + return latestIsPinned ? true : b.id !== latestBlog.id; + }); + + return ( + <> + + + + + + ); +}; + +export default BlogPage; diff --git a/components/blogpage/blogDetailsPage/BlogDetailsPage.tsx b/components/blogpage/blogDetailsPage/BlogDetailsPage.tsx new file mode 100644 index 0000000..0059825 --- /dev/null +++ b/components/blogpage/blogDetailsPage/BlogDetailsPage.tsx @@ -0,0 +1,27 @@ + +import dynamic from 'next/dynamic'; + +const ContactForm = dynamic(() => import('@/components/common/contactForm/ContactForm')); +const BlogSingleDetails = dynamic(() => import('./components/BlogSingleDetails')); +import ScrollTop from '@/components/common/scrollTop/ScrollTop'; + +import { BlogCardInterface, BlogPageInterface } from '@/interfaces/blog.interface'; + +interface SingleBlogPageInterface { + selectedBlogId: number; + singleBlogData: BlogCardInterface + blogPageData: BlogPageInterface[] +} + +const BlogDetailsPage = ({ selectedBlogId, singleBlogData, blogPageData }: SingleBlogPageInterface) => { + + return ( + <> + + + + + ); +}; + +export default BlogDetailsPage; diff --git a/components/blogpage/blogDetailsPage/components/BlogSingleDetails.tsx b/components/blogpage/blogDetailsPage/components/BlogSingleDetails.tsx new file mode 100644 index 0000000..909373d --- /dev/null +++ b/components/blogpage/blogDetailsPage/components/BlogSingleDetails.tsx @@ -0,0 +1,178 @@ +import React, { useEffect, useState } from 'react'; +import ReactMarkdown from 'react-markdown'; +import dynamic from 'next/dynamic'; + +import global from 'theme/global/global.module.scss'; +import styles from './blogSingleDetails.module.scss'; + +const BlogCatageroy = dynamic(() => import('@/components/blogCatageroy/BlogCatageroy')); + +import { BlogCardInterface, BlogPageInterface } from '@/interfaces/blog.interface'; +import PowerBiQuestions from '@/components/microsoftPowerTools/component/powerBiQuestions/PowerBiQuestions'; +import { CustomImageElement } from '@/helpers/utilities/imageUtil'; +import BlogSpeech from './BlogSpeech'; +import MarkdownContent from './markDownText/MarkDownText'; +interface BlogSingleInterface { + selectedBlogId: number; + detailsData: BlogCardInterface; + cardBlogData: BlogPageInterface[]; +} + +const BlogSingleDetails = ({ selectedBlogId, detailsData, cardBlogData }: BlogSingleInterface) => { + const filteredBlogPageData = cardBlogData?.filter( + (data) => data.id !== selectedBlogId, + // && data.attributes.category === singleBlogData?.category, + ); + + const sortedBlogData = filteredBlogPageData?.sort((a, b) => { + const dateA = new Date(a.attributes.createdAt).getTime(); + const dateB = new Date(b.attributes.createdAt).getTime(); + return dateB - dateA; + }); + const [toc, setToc] = useState<{ text: string; id: string }[]>([]); + + // Function to generate unique IDs and create TOC + const generateToc = (text: string) => { + const tocData: { text: string; id: string }[] = []; + const lines = text.split('\n'); + + lines.forEach((line) => { + const trimmedLine = line.trim(); + + if (trimmedLine.startsWith('## ') || trimmedLine.startsWith('### ')) { + const headingText = trimmedLine.replace(/^#+/, '').trim(); + const id = headingText.toLowerCase().replace(/\s+/g, '-'); + tocData.push({ text: headingText, id }); + } + }); + + setToc(tocData); + }; + + useEffect(() => { + generateToc(detailsData?.bodyText || ''); // Generate TOC when detailsData?.bodyText changes + }, [detailsData?.bodyText]); + + const handleScroll = (id: string) => { + const element = document.getElementById(id); + if (element) { + element.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + }; + return ( + <> +
+
+
+
+
+
+
    + {detailsData?.category && ( +
  • + {detailsData.category} +
    • + )} +
  • + {detailsData?.updatedAt.split('T')[0]} +
    • +
+
+
+

{detailsData?.title}

+
+
+ {detailsData?.bodyImage?.data && ( +
+ +
+ )} + {/*
+ {detailsData?.bodySubTitle && ( +
+

+ {detailsData.bodySubTitle} +

+
+ )} + {detailsData?.details && ( + + {detailsData.details} + + )} +
*/} + {detailsData?.title && ( + + )} + {/* Table of Contents */} +
+

Table of Contents

+
    + {toc.map((item, idx) => ( +
  • + +
    • + ))} +
+
+ {/* Table of Contents */} +
+ {detailsData?.bodyText && ( + // + // {detailsData.bodyText} + // + + )} +
+ {detailsData?.faq && } +
+
+ {/* Table of Contents */} + {toc.length > 0 && ( +
+

Table of Contents

+
    + {toc.map((item, idx) => ( +
  • + +
    • + ))} +
+
+ )} + {/* Table of Contents */} + +

Latest Blogs

+
+ {sortedBlogData?.slice(0, 2).map((singleBlog, index) => ( + + ))} +
+
+
+
+
+ + ); +}; + +export default BlogSingleDetails; diff --git a/components/blogpage/blogDetailsPage/components/BlogSpeech.tsx b/components/blogpage/blogDetailsPage/components/BlogSpeech.tsx new file mode 100644 index 0000000..38555c9 --- /dev/null +++ b/components/blogpage/blogDetailsPage/components/BlogSpeech.tsx @@ -0,0 +1,205 @@ +import { Slider } from '@mui/material'; +import React, { useState, useEffect, useRef } from 'react'; +import styles from './blogSingleDetails.module.scss'; +import global from 'theme/global/global.module.scss'; +import { FaPlay } from 'react-icons/fa6'; +import { FaPause } from 'react-icons/fa6'; +import { FaBackward } from 'react-icons/fa6'; +import { FaForward } from 'react-icons/fa6'; +import { FaRegStopCircle } from 'react-icons/fa'; + +interface BlogSpeechInterface { + text: string; + blogTitle: string; +} + +const BlogSpeech = ({ text, blogTitle }: BlogSpeechInterface) => { + if (!text) return null; + const [speechStatus, setSpeechStatus] = useState<'stopped' | 'started' | 'paused'>('stopped'); + const [progress, setProgress] = useState(0); + const utteranceRef = useRef(null); + const [voice, setVoice] = useState(null); + + const cleanedText = + blogTitle + + '. ' + + text + .replace(/#+/g, '') // Remove all occurrences of #, ##, ###, ####, #####, ###### + .replace(/\!\[.*?\]\(https?:\/\/[^\s]+\)/g, '') // Remove image alt & url + .replace(/https?:\/\/[^\s]+/g, '') // Remove plain URLs + .replace(/\(\/[^\s]+\)/g, '') // Remove links starting with '/' + .replace(/:/g, ''); + + useEffect(() => { + const loadVoices = () => { + const availableVoices = window.speechSynthesis.getVoices(); + if (availableVoices.length > 0 && !voice) { + setVoice(availableVoices[2]); // Set default voice + } + }; + + loadVoices(); + if (window.speechSynthesis.onvoiceschanged !== undefined) { + window.speechSynthesis.onvoiceschanged = loadVoices; + } + + return () => { + // Clean up on unmount + window.speechSynthesis.cancel(); + }; + }, [voice]); + + const startSpeech = () => { + if (speechStatus === 'paused') { + window.speechSynthesis.resume(); + setSpeechStatus('started'); + } else { + stopSpeech(); // Ensure no overlapping utterances + const utterance = new SpeechSynthesisUtterance(cleanedText); + utterance.voice = voice; // Set the selected voice + utterance.onstart = () => setSpeechStatus('started'); + utterance.onend = () => { + setSpeechStatus('stopped'); + setProgress(100); + }; + utterance.onpause = () => setSpeechStatus('paused'); + utterance.onresume = () => setSpeechStatus('started'); + utterance.onboundary = (event) => { + const charIndex = event.charIndex; + if (charIndex > 0) { + const percentage = (charIndex / cleanedText.length) * 100; + setProgress(Math.min(percentage, 100)); + } + }; + + utteranceRef.current = utterance; + window.speechSynthesis.speak(utterance); + } + }; + + const pauseSpeech = () => { + window.speechSynthesis.pause(); + setSpeechStatus('paused'); + }; + + const stopSpeech = () => { + window.speechSynthesis.cancel(); + setSpeechStatus('stopped'); + setProgress(0); + utteranceRef.current = null; + }; + + const handleSeek = (event: Event, newValue: number | number[]) => { + const newProgress = Array.isArray(newValue) ? newValue[0] : newValue; + setProgress(newProgress); + + // Calculate the new starting character index + const charIndex = Math.floor((newProgress / 100) * cleanedText.length); + + // Stop any current speech + window.speechSynthesis.cancel(); + + // Create and start a new utterance from the seek position + const newUtterance = new SpeechSynthesisUtterance(cleanedText.slice(charIndex)); + newUtterance.voice = voice; // Set the selected voice + newUtterance.onstart = () => setSpeechStatus('started'); + newUtterance.onend = () => { + setSpeechStatus('stopped'); + setProgress(100); + }; + newUtterance.onboundary = (event) => { + const percentage = ((event.charIndex + charIndex) / cleanedText.length) * 100; + setProgress(Math.min(percentage, 100)); + }; + + utteranceRef.current = newUtterance; + window.speechSynthesis.speak(newUtterance); + }; + + const forwardTenSeconds = () => { + if (utteranceRef.current && speechStatus === 'started') { + const currentCharIndex = Math.floor((progress / 100) * cleanedText.length); + const newCharIndex = Math.min(currentCharIndex + 20, cleanedText.length - 1); + + setProgress((newCharIndex / cleanedText.length) * 100); + window.speechSynthesis.cancel(); + + const newUtterance = new SpeechSynthesisUtterance(cleanedText.slice(newCharIndex)); + newUtterance.voice = voice; // Set the selected voice + newUtterance.onstart = () => setSpeechStatus('started'); + newUtterance.onend = () => { + setSpeechStatus('stopped'); + setProgress(100); + }; + newUtterance.onboundary = (event) => { + const percentage = ((event.charIndex + newCharIndex) / cleanedText.length) * 100; + setProgress(Math.min(percentage, 100)); + }; + + utteranceRef.current = newUtterance; + window.speechSynthesis.speak(newUtterance); + } + }; + + const backwardTenSeconds = () => { + if (utteranceRef.current && speechStatus === 'started') { + const currentCharIndex = Math.floor((progress / 100) * cleanedText.length); + const newCharIndex = Math.max(currentCharIndex - 40, 0); + + setProgress((newCharIndex / cleanedText.length) * 100); + window.speechSynthesis.cancel(); + + const newUtterance = new SpeechSynthesisUtterance(cleanedText.slice(newCharIndex)); + newUtterance.voice = voice; // Set the selected voice + newUtterance.onstart = () => setSpeechStatus('started'); + newUtterance.onend = () => { + setSpeechStatus('stopped'); + setProgress(100); + }; + newUtterance.onboundary = (event) => { + const percentage = ((event.charIndex + newCharIndex) / cleanedText.length) * 100; + setProgress(Math.min(percentage, 100)); + }; + + utteranceRef.current = newUtterance; + window.speechSynthesis.speak(newUtterance); + } + }; + + return ( +
+

Audio Track

+
+ +
+
+ + {speechStatus !== 'started' ? ( + + ) : ( + + )} + + +
+
+ ); +}; + +export default BlogSpeech; diff --git a/components/blogpage/blogDetailsPage/components/blogSingleDetails.module.scss b/components/blogpage/blogDetailsPage/components/blogSingleDetails.module.scss new file mode 100644 index 0000000..e5e3733 --- /dev/null +++ b/components/blogpage/blogDetailsPage/components/blogSingleDetails.module.scss @@ -0,0 +1,428 @@ +@use 'theme/sass' as *; + +.blog_sec { + width: 100%; + background: var(--clr_background_secondary29); + position: relative; + z-index: 2; + .custom_container { + width: 100%; + .blog_top_content { + width: 100%; + overflow: hidden; + .listing { + width: 100%; + padding-block-start: 0px; + .blog_list { + @include displayFlex(row, center, flex-start); + gap: 20px; + .itemList { + font-weight: var(--fw_regular); + color: var(--clr_text_light_gray200); + font-family: var(--fn_accent); + &:first-child { + width: fit-content; + padding-inline: 20px; + padding-block: 10px; + flex-shrink: 0; + border-radius: 16.5px; + background: var(--clr_background_primary); + @include displayFlex(row, center, center); + } + } + } + } + .details_title { + padding-block-start: 16px; + max-width: 877px; + width: 100%; + .title { + color: var(--clr_vzit_offer_text2); + font-family: var(--fn_accent); + } + } + } + + .inner_blog { + width: 100%; + display: grid; + grid-template-columns: minmax(20px, 800px) 1fr; + gap: 40px; + padding-block-start: scaleValue(60px, 80px); + + .blog_content { + width: 100%; + + .box_img { + @include displayFlex(row, center, center); + width: 100%; + border-radius: 17px; + margin-block-start: 30px; + position: relative; + isolation: isolate; + aspect-ratio: 16/9; + img { + width: 100%; + height: 100%; + border-radius: 17px; + object-fit: cover; + } + &::before { + content: ''; + width: 420px; + height: 420px; + background: var(--grad_bg_07); + filter: blur(127px); + position: absolute; + top: 40%; + right: 0; + z-index: -1; + opacity: 0.4; + } + } + .inner_content { + padding-block-start: 40px; + .title_box { + max-width: 1080px; + width: 100%; + .custom_details { + color: var(--clr_conver); + font-family: var(--font_primary); + font-weight: var(--fw_semiBold); + } + } + .custom_details_text { + width: 100%; + & > * { + text-wrap: auto; + &:first-child { + margin: 0; + padding: 0; + } + } + p { + color: var(--clr-para); + font-family: var(--font_primary); + font-weight: var(--fw_regular); + margin-block-start: 20px; + font-size: 16px; + line-height: 26px; + } + strong { + color: var(--clr-para); + font-family: var(--font_primary); + font-weight: var(--fw_bold); + margin-block-start: 20px; + font-size: 16px; + line-height: 26px; + } + h2 { + font-size: 28px; + line-height: 1.3; + font-weight: var(--fw_semiBold); + color: var(--clr_vzit_offer_text2); + font-family: var(--fn_accent); + font-family: var(--fw_bold); + margin-block-start: 26px; + } + h3 { + font-size: 24px; + line-height: 1.3; + font-weight: var(--fw_semiBold); + color: var(--clr_vzit_offer_text2); + font-family: var(--fw_bold); + margin-block-start: 20px; + position: relative; + } + h4 { + font-size: 22px; + line-height: 1.3; + font-weight: var(--fw_semiBold); + color: var(--clr_vzit_offer_text2); + font-family: var(--fw_bold); + margin-block-start: 26px; + } + h5 { + font-size: 20px; + line-height: 1.3; + font-weight: var(--fw_semiBold); + color: var(--clr_vzit_offer_text2); + font-family: var(--fw_bold); + margin-block-start: 26px; + } + ul { + margin-block-start: 26px; + padding-inline-start: 20px; + li { + color: var(--clr-para); + font-family: var(--font_primary); + font-weight: var(--fw_regular); + margin-block-start: 6px; + font-size: 16px; + line-height: 1.4; + list-style: disc; + } + } + em { + font-weight: var(--fw_medium); + } + img { + margin-block-start: 20px; + max-width: 100%; + width: fit-content; + } + blockquote { + color: #666; + margin: 0; + padding-left: 3em; + border-left: 0.5em #eee solid; + font-style: italic; + } + + :global(.responsive-table) { + overflow-x: auto; + width: 100%; + } + + table { + width: 100%; + border-collapse: collapse; + border-radius: rem(12); + overflow: hidden; + box-shadow: 2px -1px 17px #1130564d; + background-color: var(--clr_background_primary); + margin-block-start: rem(26); + thead { + background: var(--clr_table_thead); + th { + text-align: center; + color: var(--clr_background_primary); + padding: rem(10) rem(15); + font-weight: var(--fw_semiBold); + font-size: rem(16); + border-right: 1px solid var(--clr_table_td_bdr_right); + &:last-child { + border-right: none; + } + &:first-child { + background: var(--clr_table_th); + // box-shadow: 5px 5px 18px #1130563d; + } + } + } + + tbody { + tr { + border-bottom: 1px solid var(--clr_background_primary); + &:last-child { + border-bottom: none; + } + &:nth-child(odd) { + background: var(--clr_table_tr_odd); + } + + &:nth-child(even) { + background-color: var(--clr_background_primary); + } + + td { + padding: 1rem 1.5rem; + vertical-align: top; + line-height: 1.6; + font-size: rem(16); + border-right: 1px solid var(--clr_table_td_bdr_right); + color: var(--clr_table_tr_txt); + min-width: 200px; + strong { + color: var(--clr_table_tr_txt); + } + &:last-child { + border-right: none; + } + &:first-child { + font-weight: var(--fw_semiBold); + color: var(--clr_table_td_first_txt); + background: var(--clr_table_td_bg); + min-width: 120px; + } + } + } + } + } + } + .heading { + color: var(--clr_conver); + font-family: var(--fn_accent); + font-family: var(--fw_bold); + } + } + } + .blog_listing { + width: 100%; + padding-block-start: 0px; + position: sticky; + top: rem(95); + height: fit-content; + .ct_title { + color: var(--clr_vzit_offer_text2); + font-family: var(--fn_accent); + margin-block-end: 30px; + } + .grid { + width: 100%; + gap: 30px; + @include displayFlex(column, flex-start, flex-start); + gap: 20px; + @include max(1199px) { + display: grid; + grid-template-columns: repeat(3, 1fr); + } + @include max(758px) { + display: grid; + grid-template-columns: repeat(2, 1fr); + } + @include max(576px) { + display: grid; + grid-template-columns: repeat(1, 1fr); + } + } + } + @include max(1199px) { + display: flex; + flex-direction: column; + } + .tableContent { + margin-block-start: rem(0); + + & ul { + max-height: rem(216); + overflow-y: scroll; + margin-block-end: rem(30); + @include displayFlex(column, flex-start, flex-start); + gap: rem(10); + li { + & .blogData { + color: var(--clr-para); + text-align: left; + background: none; + border: none; + text-decoration: none; + font-weight: var(--fw_regular); + cursor: pointer; + position: relative; + padding-inline-start: rem(20); + &:after { + position: absolute; + left: 0; + top: rem(0); + content: ''; + display: block; + width: rem(10); + height: rem(10); + background: var(--clr_darkblue); + margin-block-start: rem(10); + border-radius: 50%; + font-weight: var(--fw_medium); + } + &:hover, + &:focus, + &:active { + color: var(--clr_darkblue); + } + } + } + } + } + } + .audioSlide { + margin-block: rem(36) rem(0); + width: 100%; + background-color: var(--clr_background_primary); + padding: rem(30) rem(30); + border-radius: rem(14); + position: relative; + z-index: 11; + .as_title { + font-weight: var(--fw_semiBold); + margin-block-end: rem(10); + } + .audioProgress { + width: 100%; + padding-inline: rem(10) 0; + } + + :global(.MuiSlider-rail) { + width: 100%; + } + // & :global(.MuiSlider-track) { + // left: rem(20) !important; + // } + // & :global(.MuiSlider-thumb) { + // left: rem(20) !important; + // } + } + .audioBtn { + width: 100%; + @include displayFlex(row, center, flex-start); + gap: rem(12); + margin-block-start: rem(10); + + .primary_btn { + width: fit-content; + min-width: rem(40); + min-height: rem(40); + border-radius: 50%; + background-color: var(--clr_background_secondary); + color: var(--clr_background_primary); + cursor: pointer; + font-size: rem(20); + @include displayFlex(row, center, center); + } + .secondary_btn { + width: fit-content; + min-width: rem(40); + min-height: rem(40); + border-radius: 50%; + background-color: var(--clr_background_primary); + color: var(--clr_background_secondary); + cursor: pointer; + font-size: rem(20); + @include displayFlex(row, center, center); + } + .stop_btn { + @include displayFlex(row, center, center); + width: fit-content; + min-width: rem(40); + min-height: rem(40); + border-radius: 50%; + background-color: #ff68686e; + color: var(--clr_text_danger); + cursor: pointer; + font-size: rem(20); + margin-inline-start: auto; + } + } + & a { + color: var(--clr_darkblue); + } + & .deskTableContent { + display: block; + @include max(1199px) { + display: none; + } + } + & .mobTableContent { + display: none; + margin-block-start: rem(30) !important; + .ct_title { + margin-block-end: rem(30); + } + ul { + margin-block-end: 0; + } + @include max(1199px) { + display: block; + } + } + } +} diff --git a/components/blogpage/blogDetailsPage/components/markDownText/MarkDownText.tsx b/components/blogpage/blogDetailsPage/components/markDownText/MarkDownText.tsx new file mode 100644 index 0000000..8bd9cd8 --- /dev/null +++ b/components/blogpage/blogDetailsPage/components/markDownText/MarkDownText.tsx @@ -0,0 +1,59 @@ +import ReactMarkdown, { Components } from 'react-markdown'; +import remarkGfm from 'remark-gfm'; + +const MarkdownContent = ({ content, className }: { content: string; className: string }) => { + // Custom renderers for ReactMarkdown + const renderers: Components = { + // h1: ({ node, children }) => { + // const text = String(children).trim(); + // const id = text.toLowerCase().replace(/\s+/g, '-'); + // return ( + //

+ // {children} + //

+ // ); + // }, + h2: ({ node, children }) => { + const text = String(children).trim(); + const id = text.toLowerCase().replace(/\s+/g, '-'); + return

{children}

; + }, + h3: ({ node, children }) => { + const text = String(children).trim(); + const id = text.toLowerCase().replace(/\s+/g, '-'); + return

{children}

; + }, + // h4: ({ node, children }) => { + // const text = String(children).trim(); + // const id = text.toLowerCase().replace(/\s+/g, '-'); + // return

{children}

; + // }, + // h5: ({ node, children }) => { + // const text = String(children).trim(); + // const id = text.toLowerCase().replace(/\s+/g, '-'); + // return
{children}
; + // }, + // h6: ({ node, children }) => { + // const text = String(children).trim(); + // const id = text.toLowerCase().replace(/\s+/g, '-'); + // return
{children}
; + // }, + table: ({ node, ...props }) => ( +
+ + + ), + }; + + return ( + <> + {/* Markdown Content */} + + + {content} + + + ); +}; + +export default MarkdownContent; diff --git a/components/blogpage/components/BlogBanner.module.scss b/components/blogpage/components/BlogBanner.module.scss new file mode 100644 index 0000000..c4f7a36 --- /dev/null +++ b/components/blogpage/components/BlogBanner.module.scss @@ -0,0 +1,83 @@ +@use 'theme/sass' as *; + +.blogBannerSection { + width: 100%; + background: var(--clr_background_secondary29); + overflow: hidden; + padding-block-end: 45px; + .custom_container { + width: 100%; + .inner_blogBannerSection { + width: 100%; + .content_area { + @include displayFlex(row, space-between, center); + background: var(--clr_background_primary); + border-radius: rem(20); + overflow: hidden; + flex-wrap: wrap; + .image_area { + width: 70%; + line-height: 0; + img { + width: 100%; + } + @include max(1100px) { + width: 100%; + } + } + .image_description_area { + @include displayFlex(column, flex-start, space-between); + width: 30%; + font-family: var(--fn_accent); + padding-inline: scaleValue(20px, 46px); + padding-block-end: scaleValue(20px, 50px); + @include max(1100px) { + width: 100%; + } + .latest_blog { + background: #209ef3; + color: var(--clr_text_secondary); + font-weight: var(--fw_bold); + padding: 13px 20px; + border-radius: 0 0 9px 9px; + align-self: flex-end; + } + .bgText { + border-radius: 50px; + margin-block: 12px; + background: #eef0f9; + padding: 8px 20px; + & > * { + color: #3a5269; + font-weight: var(--fw_bold); + } + } + .title { + & > * { + font-weight: var(--fw_bold); + color: #1c4062; + } + } + .date { + color: #017dd0; + font-weight: var(--fw_bold); + font-family: var(--fn_accent); + } + .description { + margin-block-end: 16px; + display: -webkit-box; + -webkit-line-clamp: 5; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + & > * { + color: #3a5269; + font-family: var(--fn_accent); + line-height: 1.5; + } + } + } + } + } + } +} diff --git a/components/blogpage/components/BlogBanner.tsx b/components/blogpage/components/BlogBanner.tsx new file mode 100644 index 0000000..97b509a --- /dev/null +++ b/components/blogpage/components/BlogBanner.tsx @@ -0,0 +1,57 @@ +import global from 'theme/global/global.module.scss'; +import styles from './BlogBanner.module.scss'; +import { BlogPageInterface } from '@/interfaces/blog.interface'; +import ReactMarkdown from 'react-markdown'; +import dayjs from 'dayjs'; +import Link from 'next/link'; + +interface BlogBannerInterface { + data: BlogPageInterface | null; +} +const BlogBanner = ({ data }: BlogBannerInterface) => { + if (!data) return null; + + const formatDate = (isoString: string) => { + return dayjs(isoString).format('ddd DD MMMM, YYYY'); + }; + + return ( +
+
+
+ +
+
+ { +
+
+ + {data?.attributes?.isPin ? 'Pinned Blog' : 'Latest Blog'} + + + {data?.attributes?.category} + + + {data?.attributes?.title} + + + {data?.attributes?.details} + +
+ {formatDate(data?.attributes?.updatedAt)} +
+
+
+ +
+
+
+ ); +}; + +export default BlogBanner; diff --git a/components/blogpage/components/BlogFilter.module.scss b/components/blogpage/components/BlogFilter.module.scss new file mode 100644 index 0000000..552b7d4 --- /dev/null +++ b/components/blogpage/components/BlogFilter.module.scss @@ -0,0 +1,67 @@ +@use 'theme/sass' as *; + +.content_area { + // margin-block-end: scaleValue(50px, 120px); + .filter_area { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: rem(120); + @include max(991px) { + grid-template-columns: 100%; + row-gap: rem(20); + } + + .filter_blog { + display: flex; + gap: rem(20); + flex-wrap: wrap; + .filter_input { + flex: 1; + @include displayFlex(column, flex-start, flex-start); + gap: rem(13); + font-family: var(--fn_accent); + label { + color: #6c7e8e; + font-weight: var(--fw_medium); + } + :global(.MuiSelect-select){ + @include displayFlex(row, flex-start, flex-start); + gap: 10px; + } + :global(.MuiFormControl-root) { + width: 100%; + :global(.MuiInputBase-root) { + background: var(--clr_background_primary); + border-color: transparent; + border-radius: 12px; + color: var(--clr_text_primary); + fieldset { + border-color: transparent; + border-radius: 12px; + } + svg { + color: var(--clr_text_primary); + width: rem(20); + height: rem(20); + } + :global(.MuiButtonBase-root) { + border-radius: 100px; + border: 1px solid #8dd1f1; + background: #1086be; + color: var(--clr_text_secondary); + :global(.MuiSvgIcon-root) { + color: var(--clr_text_secondary); + } + } + } + input[type='search' i]::-webkit-search-cancel-button { + display: none; + } + } + @include max(767px) { + flex: 1 1 100%; + } + } + } + } +} diff --git a/components/blogpage/components/BlogFilter.tsx b/components/blogpage/components/BlogFilter.tsx new file mode 100644 index 0000000..ea14a72 --- /dev/null +++ b/components/blogpage/components/BlogFilter.tsx @@ -0,0 +1,281 @@ +import React, { useEffect, useState } from 'react'; +import global from 'theme/global/global.module.scss'; +import styles from './BlogFilter.module.scss'; +import { Theme, useTheme } from '@mui/material/styles'; +import Box from '@mui/material/Box'; +import OutlinedInput from '@mui/material/OutlinedInput'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Chip from '@mui/material/Chip'; +import TextField from '@mui/material/TextField'; +import { SearchIcon } from '@/constants/svgConstant'; +import { InputAdornment } from '@mui/material'; +import { BlogCategoryListInterface, BlogIndustryListInterface } from '@/interfaces/blog.interface'; +import { useSearchParams } from 'next/navigation'; +import { useRouter } from 'next/router'; +import { RxCross2 } from 'react-icons/rx'; + +interface BlogFilterPropsInterface { + categoryData: BlogCategoryListInterface; + industryData: BlogIndustryListInterface; +} + +function getStyles(name: string, personName: readonly string[], theme: Theme) { + return { + fontWeight: personName.includes(name) ? theme.typography.fontWeightMedium : theme.typography.fontWeightRegular, + }; +} +const BlogFilter = ({ categoryData, industryData }: BlogFilterPropsInterface) => { + const theme = useTheme(); + const [industry, setIndustry] = useState([]); + const searchParams = useSearchParams(); + const router = useRouter(); + const categoryParam = searchParams.get('category') || ''; + const industryParam = searchParams.get('industry') || ''; + const searchParam = searchParams.get('search') || ''; + const categoryTerms = categoryParam ? categoryParam.split(',') : []; + const industryTerms = industryParam ? industryParam.split(',') : []; + const [searchTerm, setSearchTerm] = useState(searchParam); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + + const buildRoute = (type: 'category' | 'industry', value: string) => { + let updatedCategories = [...categoryTerms]; + let updatedIndustries = [...industryTerms]; + + if (type === 'category') { + updatedCategories = value === '' ? [] : [value]; + } else if (type === 'industry') { + if (value === '') { + updatedIndustries = []; + } else if (industryTerms.includes(value)) { + updatedIndustries = industryTerms.filter((term) => term !== value); + } else if (!industryParam) { + updatedIndustries = [value]; + } else { + updatedIndustries = [...industryTerms, value]; + } + } + + const params = []; + if (updatedCategories.length > 0) { + params.push(`category=${updatedCategories.join(',')}`); + } + if (updatedIndustries.length > 0) { + params.push(`industry=${updatedIndustries.join(',')}`); + } + if (searchParam) { + params.push(`search=${encodeURIComponent(searchParam)}`); + } + + return params.length > 0 ? `?${params.join('&')}` : ''; + }; + + const handleSearch = (e: React.FormEvent) => { + e.preventDefault(); + const params = []; + if (categoryParam) params.push(`category=${categoryParam}`); + if (industryParam) params.push(`industry=${industryParam}`); + if (searchTerm) params.push(`search=${encodeURIComponent(searchTerm)}`); + + const queryString = params.length > 0 ? `?${params.join('&')}` : ''; + router.push(`/blog${queryString}`); + }; + + const handleClearSearch = () => { + setSearchTerm(''); + const params = []; + if (categoryParam) params.push(`category=${categoryParam}`); + if (industryParam) params.push(`industry=${industryParam}`); + + const queryString = params.length > 0 ? `?${params.join('&')}` : ''; + router.push(`/blog${queryString}`); + }; + + function getItemValue(value: string | null) { + if (value && value.trim()) { + return value.trim(); + } + return ''; + } + + const getHref = (type: 'category' | 'industry', value: string | null) => { + const itemValue = getItemValue(value); + return `/blog${buildRoute(type, itemValue)}`; + }; + + const handleCategoryChange = (event: SelectChangeEvent) => { + const value = event.target.value; + const href = getHref('category', value); + router.push(href); + }; + + const handleIndustryChipDelete = (value: string) => { + const newSelected = industryTerms.filter((term) => term !== value); + setIndustry(newSelected); + const href = `/blog${buildRoute('industry', value)}`; + router.push(href); + }; + + const handleIndustryChange = (event: SelectChangeEvent) => { + const { value } = event.target; + const selectedIndustries = typeof value === 'string' ? value.split(',') : value; + + setIndustry(selectedIndustries); + + const params = [] as string[]; + if (categoryParam) params.push(`category=${categoryParam}`); + if (selectedIndustries.length > 0) params.push(`industry=${selectedIndustries.join(',')}`); + if (searchParam) params.push(`search=${encodeURIComponent(searchParam)}`); + + const queryString = params.length > 0 ? `?${params.join('&')}` : ''; + router.push(`/blog${queryString}`); + setIsDropdownOpen(false); + }; + + useEffect(() => { + setSearchTerm(searchParam); + }, [searchParam]); + + return ( + <> +
+
+
+
+
+
+
+ +
+ setSearchTerm(e.target.value)} + InputProps={{ + startAdornment: ( + + + + ), + endAdornment: searchTerm && ( + + + + ), + }} + /> + +
+
+ + + Select Category + + +
+
+
+
+ + + Select Industries + + +
+
+
+
+
+
+
+ + ); +}; + +export default BlogFilter; diff --git a/components/blogpage/components/BlogHeading.module.scss b/components/blogpage/components/BlogHeading.module.scss new file mode 100644 index 0000000..ce828b7 --- /dev/null +++ b/components/blogpage/components/BlogHeading.module.scss @@ -0,0 +1,60 @@ +@use 'theme/sass' as *; + +.blogSection { + width: 100%; + background: var(--clr_background_secondary29); + overflow: hidden; + padding-block-end: 45px; + .custom_container { + width: 100%; + .inner_blogSection { + width: 100%; + .content_area { + width: 100%; + max-width: 590px; + @include displayFlex(column, flex-start, flex-start); + gap: 16px; + > div { + width: fit-content; + font-family: var(--fn_accent); + > div{ + border: 2px solid #035d87; + padding: 7px 20px; + border-radius: 100px; + a { + color: #035d87; + font-weight: var(--fw_bold); + } + } + } + .heading { + width: 100%; + letter-spacing: -1.4px; + text-transform: capitalize; + @include max(576px) { + margin-block-start: 10px; + } + .title { + border: 0px solid #035d87; + padding: 0px; + border-radius: 0px; + & > * { + color: var(--clr_vzit_offer_text2); + font-family: var(--fn_accent); + } + } + } + .details1 { + & > * { + color: #787878; + font-weight: 200; + } + } + } + } + } +} + +.select_category{ + width: 100%; +} \ No newline at end of file diff --git a/components/blogpage/components/BlogHeading.tsx b/components/blogpage/components/BlogHeading.tsx new file mode 100644 index 0000000..0de1a10 --- /dev/null +++ b/components/blogpage/components/BlogHeading.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import dynamic from 'next/dynamic'; +import { BlogHomePageDataInterface } from '@/interfaces/blog.interface'; +import ReactMarkdown from 'react-markdown'; +const BreadCrumbs = dynamic(() => import('@/components/common/BreadCrumbs/BreadCrumbs')); +import global from 'theme/global/global.module.scss'; +import styles from './BlogHeading.module.scss'; + +interface BlogHeadingProps { + homeData: BlogHomePageDataInterface; +} +const BlogHeading = ({ homeData }: BlogHeadingProps) => { + return ( + <> +
+
+
+
+ +
+ + {homeData?.attributes?.heading} + +
+ + {homeData?.attributes?.description} + +
+
+
+
+ + ); +}; + +export default BlogHeading; diff --git a/components/blogpage/components/BlogList.module.scss b/components/blogpage/components/BlogList.module.scss new file mode 100644 index 0000000..2ab6900 --- /dev/null +++ b/components/blogpage/components/BlogList.module.scss @@ -0,0 +1,69 @@ +@use 'theme/sass' as *; + +.blogSection { + width: 100%; + background: var(--clr_background_secondary29); + overflow: hidden; + padding-block-end: 45px; + .custom_container { + width: 100%; + .inner_blogSection { + width: 100%; + .content_area { + width: 100%; + .title { + margin-block-start: rem(40); + text-align: center; + font-weight: var(--fw_bold); + color: #1c4062; + } + + .heading { + width: 100%; + margin-block-start: 20px; + text-align: center; + @include max(576px) { + margin-block-start: 10px; + } + .title { + color: var(--clr_vzit_offer_text2); + font-family: var(--fn_accent); + } + } + .grid { + width: 100%; + margin-block-start: scaleValue(20px, 90px); + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 40px; + @include max(1023px) { + grid-template-columns: repeat(2, 1fr); + gap: 30px 20px; + } + @include max(639px) { + grid-template-columns: repeat(1, 1fr); + gap: 20px; + } + } + } + .nav_btn { + width: 100%; + margin-block-start: scaleValue(40px, 100px); + .primary_btn { + @include displayFlex(row, center, center); + cursor: pointer; + width: 100%; + font-size: 14px; + font-weight: var(--fw_bold); + font-family: var(--fn_accent); + max-width: 230px; + margin-inline: auto; + &:disabled { + cursor: default; + opacity: 0.5; + } + } + } + } + } +} diff --git a/components/blogpage/components/BlogList.tsx b/components/blogpage/components/BlogList.tsx new file mode 100644 index 0000000..57883f5 --- /dev/null +++ b/components/blogpage/components/BlogList.tsx @@ -0,0 +1,52 @@ +import dynamic from 'next/dynamic'; + +import global from 'theme/global/global.module.scss'; +import styles from './BlogList.module.scss'; + +const BlogSingleCard = dynamic(() => import('./BlogSingleCard')); +const Pagination = dynamic(() => import('@/components/common/pagination/Pagination')); + +import { BlogPageInterface } from '@/interfaces/blog.interface'; + +type TFutureReady = { + extraClasses?: string; + blogData: BlogPageInterface[]; + currentPage: number; + totalPages: number; + handlePageChange(pageNumber: number): void; +}; + +const BlogList = ({ extraClasses, blogData, currentPage, totalPages, handlePageChange }: TFutureReady) => { + return ( + <> +
+
+
+
+ {blogData?.length === 0 ? ( +

No blogs found

+ ) : ( +
+ {blogData?.map((singleBlog, index) => ( + + ))} +
+ )} +
+ {totalPages > 1 && ( + + )} +
+
+
+ + ); +}; + +export default BlogList; diff --git a/components/blogpage/components/BlogSingleCard.module.scss b/components/blogpage/components/BlogSingleCard.module.scss new file mode 100644 index 0000000..5665bed --- /dev/null +++ b/components/blogpage/components/BlogSingleCard.module.scss @@ -0,0 +1,121 @@ +@use 'theme/sass' as *; + +.blog_card { + cursor: pointer; + width: 100%; + height: 100%; + @include displayFlex(column, center, center); + text-decoration: none; + .blog_box { + width: 100%; + height: 100%; + background-color: var(--clr_background_primary); + border-radius: 16px; + overflow: hidden; + @include displayFlex(column, flex-start, flex-start); + .bx_img { + width: 100%; + display: flex; + height: 240px; + img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: left; + } + } + .bx_content { + width: 100%; + padding-block: 18px; + padding-inline: scaleValue(16px, 32px); + .top_highlight { + width: 100%; + @include displayFlex(row, center, space-between); + gap: 8px; + flex-wrap: wrap; + @include max(415px) { + flex-direction: column; + align-items: flex-start; + } + .date { + width: auto; + color: var(--text_paragraph_2); + } + .chip { + width: fit-content; + min-height: 38px; + @include displayFlex(row, center, center); + padding: 4px 16px; + border-radius: 20px; + color: #3a5269; + font-weight: var(--fw_bold); + font-family: var(--fn_accent) !important; + background: var(--clr_bg_light_gray); + } + } + .bx_title { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + color: var(--clr_conver); + font-weight: var(--fw_bold); + margin-block-start: 14px; + font-family: var(--fn_accent); + } + .bx_para { + p { + color: var(--clr-para); + margin-block-start: 10px; + line-height: 1.4; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + &:not(:first-child) { + display: none; + } + } + em { + font-weight: var(--fw_semiBold); + } + } + .linked_blog { + margin-block-start: 14px; + width: 100%; + @include displayFlex(row, center, space-between); + gap: 8px; + font-family: var(--fn_accent) !important; + transition: 0.4s ease-in-out; + .date { + color: #017dd0; + font-weight: var(--fw_bold); + transition: 0.4s ease-in-out; + font-family: var(--fn_accent); + } + .linked_blog_link { + color: var(--clr_text_primary); + font-weight: var(--fw_bold); + svg { + color: #017dd0; + width: rem(40); + height: rem(40); + transition: 0.4s ease-in-out; + } + } + &:hover { + .date { + color: #3a5269; + } + // .linked_blog_link { + // svg { + // transform: rotate(-40deg); + // } + // } + } + } + } + } +} diff --git a/components/blogpage/components/BlogSingleCard.tsx b/components/blogpage/components/BlogSingleCard.tsx new file mode 100644 index 0000000..4c5adb3 --- /dev/null +++ b/components/blogpage/components/BlogSingleCard.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import Link from '@mui/material/Link'; +import ReactMarkdown from 'react-markdown'; + +import global from 'theme/global/global.module.scss'; +import styles from './BlogSingleCard.module.scss'; + +import { BlogCardInterface } from '@/interfaces/blog.interface'; +import { CustomImageElement } from '@/helpers/utilities/imageUtil'; +import TrendingFlatIcon from '@mui/icons-material/TrendingFlat'; + +interface SingleCardInterface { + cardDetails: BlogCardInterface; +} + +const BlogSingleCard = ({ cardDetails }: SingleCardInterface) => { + return ( + +
+
+ +
+
+
+ {cardDetails?.category && ( +
{cardDetails?.category}
+ )} +
+

{cardDetails?.title}

+ {cardDetails?.details && ( + + {cardDetails?.details} + + )}{' '} +
+ {cardDetails?.updatedAt.split('T')[0]} + + + +
+
+
+ + ); +}; + +export default BlogSingleCard; diff --git a/components/casestudies-details/CaseStudiesDetails.tsx b/components/casestudies-details/CaseStudiesDetails.tsx new file mode 100644 index 0000000..5380c21 --- /dev/null +++ b/components/casestudies-details/CaseStudiesDetails.tsx @@ -0,0 +1,43 @@ +import dynamic from 'next/dynamic'; + +const ContactForm = dynamic(() => import('../common/contactForm/ContactForm')); +import ScrollTop from '@/components/common/scrollTop/ScrollTop'; + +import CaseStudyDetailsBanner from './components/caseStudyDetailsBanner/CaseStudyDetailsBanner'; +import Thoughts from './components/thoughts/Thoughts'; +import Explore from '../newCaseStudy/explore/Explore'; +import ClientsVision from './components/clientsVision/ClientsVision'; +import Technology from './components/technology/Technology'; +import { CaseStudiesPageInterface, SingleCaseStudyInterface } from '@/interfaces/newCaseStudies.interface'; +import Goals from './components/Goals/Goals'; +const CaseStudyInnerContent = dynamic(() => import('./components/caseStudyInnerContent/CaseStudyInnerContent')); + +interface CaseStudiesDetailsDataInterface { + allCaseData: CaseStudiesPageInterface[]; + singleCaseData: SingleCaseStudyInterface; + selectedCaseId: number; +} + +export default function CaseStudiesDetails({ + allCaseData, + singleCaseData, + selectedCaseId, +}: CaseStudiesDetailsDataInterface) { + const filteredCasePageData = allCaseData?.filter( + (data) => data.id !== selectedCaseId, + // && data.attributes.category === singleBlogData?.category, + ); + return ( + <> + + + + + + {singleCaseData?.goals && } + + + + + ); +} diff --git a/components/casestudies-details/components/Goals/Goals.module.scss b/components/casestudies-details/components/Goals/Goals.module.scss new file mode 100644 index 0000000..1386cda --- /dev/null +++ b/components/casestudies-details/components/Goals/Goals.module.scss @@ -0,0 +1,254 @@ +@use 'theme/sass' as *; + +.caseStudy_content_sec { + width: 100%; + background: var(--clr_light_sky); + position: relative; + z-index: 2; + .custom_container { + .inner_wrap { + width: 100%; + position: relative; + z-index: 2; + padding-block-end: scaleValue(0px, 80px); + &::after { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 455px; + height: 451px; + border-radius: 50%; + background-color: var(--clr_vzit_side_bg); + filter: blur(200px); + z-index: -1; + } + &:last-child { + &::after { + top: 50%; + } + } + @include max(767px) { + padding-block-end: 0; + } + + .top_text { + @include displayFlex(column, flex-start, flex-start); + gap: 20px; + .sub_title { + color: var(--clr_about_text2); + font-weight: var(--fw_black); + font-family: var(--fn_accent); + font-size: 32px; + } + img { + width: 32px; + height: 32px; + object-fit: contain; + } + } + .content_box { + width: 100%; + padding-block-start: 40px; + position: relative; + + .content { + @include displayFlex(column, flex-start, flex-start); + width: 100%; + top: 100px; + height: fit-content; + } + .inner_details { + width: 100%; + position: relative; + + .inner_info { + width: 100%; + border-block-end: 1px solid var(--clr_case_border4); + padding-block: 40px; + &:last-child { + border: none; + } + h2 { + font-size: scaleValue(20px, 38px); + line-height: scaleValue(36px, 46px); + font-weight: var(--fw_semiBold); + font-family: var(--fn_accent); + margin-block-start: 20px; + color: var(--clr_case_text10); + } + h3 { + font-size: scaleValue(18px, 30px); + line-height: scaleValue(36px, 38px); + font-weight: var(--fw_semiBold); + font-family: var(--fn_accent); + margin-block-start: 20px; + color: var(--clr_case_text10); + } + h4 { + font-size: scaleValue(16px, 24px); + line-height: scaleValue(24px, 30px); + font-weight: var(--fw_semiBold); + font-family: var(--fn_accent); + margin-block-start: 20px; + color: var(--clr_case_text10); + position: relative; + padding-inline-start: 20px; + &:after { + content: ''; + position: absolute; + top: 12px; + left: 0; + margin-block: auto; + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--clr_case_text10); + } + } + h5 { + font-size: scaleValue(16px, 22px); + line-height: scaleValue(28px, 30px); + font-weight: var(--fw_semiBold); + font-family: var(--fn_accent); + margin-block-start: 20px; + color: var(--clr_case_text10); + } + h6 { + font-size: 16px; + line-height: 20px; + font-weight: var(--fw_semiBold); + font-family: var(--fn_accent); + margin-block-start: 20px; + color: var(--clr_case_text10); + } + p { + font-size: 18px; + line-height: 26px; + font-weight: var(--fw_medium); + font-family: var(--fn_accent); + color: var(--clr_case_text11); + margin-block-start: 20px; + } + ul { + @include displayFlex(column, flex-start, flex-start); + gap: 30px; + padding-left: 15px; + li { + font-size: 18px; + line-height: 26px; + font-weight: var(--fw_medium); + font-family: var(--fn_accent); + color: var(--clr_case_text11); + gap: 10px; + list-style-type: disc; + } + } + img { + margin-block-start: 20px; + max-width: 100%; + width: fit-content; + margin-inline: auto; + display: block; + } + .inner_table { + width: 70%; + margin-inline: auto; + padding-block-start: 40px; + @include max(767px) { + width: 100%; + } + table { + font-family: arial, sans-serif; + border-collapse: collapse; + width: 100%; + } + th { + background: var(--clr_footer_background); + color: var(--clr_text_secondary); + padding-block: 10px; + padding-inline: 25px; + text-align: left; + font-size: 16px; + line-height: 20px; + font-weight: var(--fw_medium); + font-family: var(--fn_accent); + &:last-child { + text-align: center; + } + } + + td { + text-align: left; + padding-block: 8px; + padding-inline: 25px; + font-size: 14px; + line-height: 20px; + font-weight: var(--fw_medium); + font-family: var(--fn_accent); + } + td:last-child { + text-align: center; + } + tr:nth-child(odd) { + background-color: var(--clr_case_bg3); + } + } + .inner_card { + margin-block-start: 20px; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + width: 100%; + gap: 30px 0; + .card_item { + width: 100%; + @include displayFlex(column, flex-start, flex-start); + padding: 15px; + border-inline-end: 1px solid var(--clr_case_border4); + .imgBX { + width: 100%; + @include displayFlex(row, center, center); + max-width: 217px; + margin-inline: auto; + } + .textBX { + width: 100%; + max-width: 217px; + margin-inline: auto; + height: 100%; + @include displayFlex(column, flex-start, space-between); + .titleBX { + width: 100%; + @include displayFlex(row, center, center); + gap: 15px; + padding-block: 25px 15px; + } + .card_title { + margin-block-start: 0; + flex: 1; + } + .arrow { + width: fit-content; + } + .card_para { + font-weight: var(--fw_semiBold); + text-align: center; + } + } + &:last-child { + border-inline-end: none; + } + @include max(567px) { + border-inline-end: none; + } + } + @include max(567px) { + grid-template-columns: 1fr; + } + } + } + } + } + } + } +} diff --git a/components/casestudies-details/components/Goals/Goals.tsx b/components/casestudies-details/components/Goals/Goals.tsx new file mode 100644 index 0000000..ac91986 --- /dev/null +++ b/components/casestudies-details/components/Goals/Goals.tsx @@ -0,0 +1,96 @@ +import global from 'theme/global/global.module.scss'; +import styles from './Goals.module.scss'; + +import { GoalInterface } from '@/interfaces/newCaseStudies.interface'; +import ReactMarkdown from 'react-markdown'; +import { CaseStudyArrowUpIcon } from '@/constants/svgConstant'; +import { CustomImageElement } from '@/helpers/utilities/imageUtil'; + +interface GoalsPropsDataInterface { + goalData: GoalInterface; +} + +const Goals = ({ goalData }: GoalsPropsDataInterface) => { + return ( +
+
+
+
+
+
+ {goalData?.icon?.data && ( + + )} +

{goalData?.title}

+
+
+
+ {goalData?.details.length > 0 && + goalData?.details.map((singleItem, index) => ( +
+ + {singleItem.description} + + {singleItem?.tHead && ( +
+
+ + + {singleItem?.tHead?.map((title, index) => ( + + ))} + + + + {singleItem?.tData?.map((data, index) => ( + + + + + ))} + +
{title}
{data.col0}{data.col1}
+
+ )} + {singleItem?.card.length > 0 && ( +
+ {singleItem?.card.map((cardItem, index) => ( +
+
+ +
+
+
+

+ {cardItem.title} +

+
+ {' '} + +
+
+

+ {cardItem.details} +

+
+
+ ))} +
+ )} +
+ ))} +
+
+ + + + ); +}; + +export default Goals; diff --git a/components/casestudies-details/components/caseStudyDetailsBanner/CaseStudyDetailsBanner.module.scss b/components/casestudies-details/components/caseStudyDetailsBanner/CaseStudyDetailsBanner.module.scss new file mode 100644 index 0000000..adfe55e --- /dev/null +++ b/components/casestudies-details/components/caseStudyDetailsBanner/CaseStudyDetailsBanner.module.scss @@ -0,0 +1,70 @@ +@use 'theme/sass' as *; + +.caseStudy_sec { + width: 100%; + position: relative; + overflow: hidden; + isolation: isolate; + &::after { + content: ''; + position: absolute; + top: 0; + right: -25%; + width: 455px; + height: 451px; + border-radius: 50%; + background-color: var(--clr_case_bg4); + filter: blur(130px); + z-index: -1; + } + .custom_container { + .inner_about_hero { + width: 100%; + z-index: 3; + position: relative; + .content_box { + width: 100%; + @include displayFlex(column, flex-start, flex-start); + .content { + width: 100%; + max-width: 950px; + margin-inline: auto; + text-align: center; + @include displayFlex(column, center, center); + gap: 20px; + padding-block-end: 50px; + .top_text { + background: var(--clr_case_bg5); + border: 1px solid var(--clr_case_border2); + border-radius: 100px; + min-height: 40px; + padding-inline: 24px; + @include displayFlex(row, center, center); + .sub_title { + color: var(--clr_new_indigo500); + font-weight: var(--fw_medium); + font-family: var(--fn_accent); + } + } + .title { + font-weight: var(--fw_semiBold); + font-family: var(--fn_accent); + color: var(--clr_case_text7); + } + } + .inner_banner { + width: 100%; + height: auto; + border-radius: 15px; + + .case_img { + width: 100%; + height: 100%; + object-fit: contain; + border-radius: 15px; + } + } + } + } + } +} diff --git a/components/casestudies-details/components/caseStudyDetailsBanner/CaseStudyDetailsBanner.tsx b/components/casestudies-details/components/caseStudyDetailsBanner/CaseStudyDetailsBanner.tsx new file mode 100644 index 0000000..b0d7b03 --- /dev/null +++ b/components/casestudies-details/components/caseStudyDetailsBanner/CaseStudyDetailsBanner.tsx @@ -0,0 +1,39 @@ +import global from 'theme/global/global.module.scss'; +import styles from './CaseStudyDetailsBanner.module.scss'; +import { BannerInterface } from '@/interfaces/newCaseStudies.interface'; +import { CustomImageElement } from '@/helpers/utilities/imageUtil'; + +interface BannerDataInterface { + bannerData: BannerInterface; +} + +const CaseStudyDetailsBanner = ({ bannerData }: BannerDataInterface) => { + return ( + <> +
+
+
+
+
+
+ Case Study +
+

{bannerData?.title}

+
+
+ +
+
+
+
+
+ + ); +}; + +export default CaseStudyDetailsBanner; diff --git a/components/casestudies-details/components/caseStudyInnerContent/CaseStudyInnerContent.module.scss b/components/casestudies-details/components/caseStudyInnerContent/CaseStudyInnerContent.module.scss new file mode 100644 index 0000000..7a6d9fd --- /dev/null +++ b/components/casestudies-details/components/caseStudyInnerContent/CaseStudyInnerContent.module.scss @@ -0,0 +1,285 @@ +@use 'theme/sass' as *; + +.caseStudy_content_sec { + width: 100%; + position: relative; + z-index: 2; + + .custom_container { + .inner_wrap { + width: 100%; + position: relative; + z-index: 2; + padding-block-end: scaleValue(30px, 80px); + + &::after { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 455px; + height: 451px; + border-radius: 50%; + background-color: var(--clr_vzit_side_bg); + filter: blur(200px); + z-index: -1; + } + &:last-child { + &::after { + top: 50%; + } + .inner_img { + left: -13%; + } + } + @include max(767px) { + padding-block-end: 0; + } + .inner_img { + position: absolute; + left: -20%; + top: 10%; + @include max(767px) { + left: 0; + } + img { + width: 80%; + height: auto; + object-fit: contain; + } + } + .top_text { + @include displayFlex(column, flex-start, flex-start); + gap: 20px; + padding-block-end: 30px; + .sub_title { + color: var(--clr_about_text2); + font-weight: var(--fw_medium); + font-family: var(--fn_accent); + text-transform: capitalize; + } + img { + width: 32px; + height: 32px; + object-fit: contain; + } + } + .content_box { + width: 100%; + display: grid; + grid-template-columns: minmax(20px, 400px) 1fr; + gap: 40px; + padding-block-end: 100px; + padding-block-start: 40px; + position: relative; + border-block-end: 1px solid var(--clr_case_border4); + + @include max(1023px) { + grid-template-columns: repeat(1, 1fr); + padding-block-end: 60px; + } + .content { + @include displayFlex(column, flex-start, flex-start); + width: 100%; + position: sticky; + top: 100px; + height: fit-content; + z-index: 9; + + @include max(1023px) { + background: rgb(255 255 255 / 80%); + padding-block: 20px; + -webkit-backdrop-filter: blur(30px); + backdrop-filter: blur(60px); + top: 0px; + position: relative; + padding-inline: 30px; + border-radius: 10px; + } + &::before { + content: ''; + position: absolute; + top: -80px; + height: calc(100% + 150px); + width: 560px; + background: rgba(255, 255, 255, 0.3607843137); + backdrop-filter: blur(30px); + left: -36%; + z-index: -1; + @include max(1023px) { + display: none; + } + } + .tab_title { + border-inline-start: 5px solid var(--clr_case_border3); + padding-inline-start: 30px; + position: relative; + @include displayFlex(column, flex-start, flex-start); + gap: 15px; + .link { + font-weight: var(--fw_medium); + font-family: var(--fn_accent); + color: var(--clr_case_text8); + display: block; + position: relative; + text-transform: capitalize; + &.active { + &::after { + opacity: 1; + } + } + &::after { + content: ''; + position: absolute; + top: 0; + left: -35px; + right: 0; + background: var(--clr_border_info); + width: 5px; + height: 30px; + border-radius: 100px; + opacity: 0; + } + } + } + } + .inner_details { + width: 100%; + position: relative; + + @include max(1023px) { + background: rgba(255, 255, 255, 0.3607843137); + backdrop-filter: blur(30px); + padding-block-start: 0; + border-radius: 10px; + } + .inner_info { + width: 100%; + border-block-end: 1px solid var(--clr_case_border4); + padding-inline: rem(30); + &:last-child { + border: none; + } + h2 { + font-size: scaleValue(20px, 38px); + line-height: scaleValue(36px, 46px); + font-weight: var(--fw_semiBold); + font-family: var(--fn_accent); + margin-block-start: 20px; + color: var(--clr_case_text10); + } + h3 { + font-size: scaleValue(18px, 30px); + line-height: scaleValue(36px, 38px); + font-weight: var(--fw_semiBold); + font-family: var(--fn_accent); + margin-block-start: 20px; + color: var(--clr_case_text10); + } + h4 { + font-size: scaleValue(16px, 26px); + line-height: scaleValue(24px, 30px); + font-weight: var(--fw_semiBold); + font-family: var(--fn_accent); + margin-block-start: rem(20); + color: var(--clr_case_text10); + position: relative; + padding-inline-start: rem(20); + text-transform: capitalize; + &:after { + content: ''; + position: absolute; + top: 0; + left: 0; + bottom: 0; + margin-block: auto; + width: rem(8); + height: rem(8); + border-radius: 50%; + background: var(--clr_case_text10); + } + } + h5 { + font-size: scaleValue(16px, 22px); + line-height: scaleValue(28px, 30px); + font-weight: var(--fw_semiBold); + font-family: var(--fn_accent); + margin-block-start: 20px; + color: var(--clr_case_text10); + } + h6 { + font-size: 18px; + line-height: 20px; + font-weight: var(--fw_semiBold); + font-family: var(--fn_accent); + margin-block-start: 20px; + color: var(--clr_case_text10); + } + p { + font-size: scaleValue(18px, 20px); + line-height: 27px; + color: var(--clr_case_text11); + margin-block-start: 20px; + } + ul { + @include displayFlex(column, flex-start, flex-start); + gap: 30px; + padding-left: 15px; + li { + font-size: scaleValue(18px, 20px); + line-height: 27px; + color: var(--clr_case_text11); + gap: 10px; + list-style-type: disc; + } + } + img { + margin-block-start: 20px; + max-width: 100%; + width: fit-content; + margin-inline: auto; + display: block; + } + .inner_table { + width: 100%; + padding-block-start: 40px; + table { + font-family: arial, sans-serif; + border-collapse: collapse; + width: 100%; + } + th { + background: var(--clr_footer_background); + color: var(--clr_text_secondary); + padding-block: 10px; + padding-inline: 25px; + text-align: left; + font-size: 16px; + line-height: 20px; + font-weight: var(--fw_medium); + font-family: var(--fn_accent); + } + + td { + text-align: left; + padding-block: 8px; + padding-inline: 25px; + font-size: 14px; + line-height: 20px; + font-weight: var(--fw_medium); + font-family: var(--fn_accent); + } + + tr:nth-child(odd) { + background-color: var(--clr_case_bg3); + } + } + } + } + } + &:last-child { + padding-block-end: scaleValue(00px, 70px); + } + } + } +} diff --git a/components/casestudies-details/components/caseStudyInnerContent/CaseStudyInnerContent.tsx b/components/casestudies-details/components/caseStudyInnerContent/CaseStudyInnerContent.tsx new file mode 100644 index 0000000..245ecb7 --- /dev/null +++ b/components/casestudies-details/components/caseStudyInnerContent/CaseStudyInnerContent.tsx @@ -0,0 +1,161 @@ +import global from 'theme/global/global.module.scss'; +import styles from './CaseStudyInnerContent.module.scss'; +import { UTILITY_CONSTANTS } from '@/constants/utilityConstants'; +import { ChallengeSolutionInterface } from '@/interfaces/newCaseStudies.interface'; +import ReactMarkdown from 'react-markdown'; +import Link from 'next/link'; +import { useEffect, useState } from 'react'; +import { CustomImageElement } from '@/helpers/utilities/imageUtil'; + +interface CaseStudyInnerDataInterface { + challengeData: ChallengeSolutionInterface; + solutionData: ChallengeSolutionInterface; +} +const CaseStudyInnerContent = ({ challengeData, solutionData }: CaseStudyInnerDataInterface) => { + const [active, setActive] = useState(''); + + useEffect(() => { + const handleScroll = () => { + const sections = document.querySelectorAll('.detail_section'); + const scrollPosition = window.scrollY + 150; + + sections.forEach((section) => { + const sectionTop = section.getBoundingClientRect().top + window.scrollY; + + if (scrollPosition >= sectionTop && scrollPosition < sectionTop + section.clientHeight) { + setActive(section.id); + } + }); + }; + + window.addEventListener('scroll', handleScroll); + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, []); + + return ( + <> +
+
+
+
+ CASE_INNER_IMG +
+
+
+
+ {challengeData?.icon?.data && ( + + )} +

{challengeData?.title}

+
+
+ {challengeData?.details.length > 0 && + challengeData?.details.map((singleItem, index) => ( + { + e.preventDefault(); + const targetElement = document.getElementById(`section-${index}`); + if (targetElement) { + targetElement.scrollIntoView({ + behavior: 'smooth', + block: 'start', + }); + } + }} + className={`${global.details1} ${styles.link} ${ + active === `section-${index}` && styles.active + }`} + > + {singleItem.title} + + ))} +
+
+
+ {challengeData?.details.length > 0 && + challengeData?.details.map((singleItem, index) => ( +
+ + {singleItem.description} + +
+ ))} +
+
+
+
+
+ CASE_INNER_IMG3 +
+
+
+
+ {solutionData?.icon?.data && ( + + )} +

{solutionData?.title}

+
+
+ {solutionData?.details.length > 0 && + solutionData?.details.map((singleSolution, index) => ( + { + e.preventDefault(); + const targetElement = document.getElementById(`section2-${index}`); + if (targetElement) { + targetElement.scrollIntoView({ + behavior: 'smooth', + block: 'start', + }); + } + }} + className={`${global.details1} ${styles.link} ${ + active === `section2-${index}` && styles.active + }`} + > + {singleSolution.title} + + ))} +
+
+
+ {solutionData?.details.length > 0 && + solutionData?.details.map((singleSolution, index) => ( +
+ + {singleSolution.description} + +
+ ))} +
+
+
+
+
+ + ); +}; + +export default CaseStudyInnerContent; diff --git a/components/casestudies-details/components/clientsVision/ClientsVision.module.scss b/components/casestudies-details/components/clientsVision/ClientsVision.module.scss new file mode 100644 index 0000000..86834a6 --- /dev/null +++ b/components/casestudies-details/components/clientsVision/ClientsVision.module.scss @@ -0,0 +1,72 @@ +@use 'theme/sass' as *; + +.clientsVision_sec { + width: 100%; + .custom_container { + .inner_about_hero { + width: 100%; + + .content_box { + width: 100%; + @include displayFlex(column, flex-start, flex-start); + padding-block-end: scaleValue(60px, 120px); + .inner_wrap { + width: 100%; + @include displayFlex(row, flex-start, flex-start); + gap: 20px; + @include max(767px) { + flex-direction: column; + } + .content { + width: 100%; + text-align: center; + @include displayFlex(column, flex-start, flex-start); + gap: 20px; + max-width: 390px; + .title { + font-weight: var(--fw_semiBold); + font-family: var(--fn_accent); + color: var(--clr_about_text2); + } + .icon { + width: 32px; + height: 32px; + img { + width: 100%; + height: 100%; + object-fit: contain; + } + } + } + .inner_text { + background: var(--clr_vzit_text_sky); + width: 100%; + border-radius: 15px; + padding: 30px; + .para { + p { + font-weight: var(--fw_medium); + font-family: var(--fn_accent); + color: var(--clr_text_secondary); + text-align: start; + margin-block-end: 5px; + } + ul { + padding-left: 30px; + li { + font-size: 16px; + line-height: 26px; + font-weight: var(--fw_medium); + font-family: var(--fn_accent); + color: var(--clr_text_secondary); + gap: 10px; + list-style-type: disc; + } + } + } + } + } + } + } + } +} diff --git a/components/casestudies-details/components/clientsVision/ClientsVision.tsx b/components/casestudies-details/components/clientsVision/ClientsVision.tsx new file mode 100644 index 0000000..f118392 --- /dev/null +++ b/components/casestudies-details/components/clientsVision/ClientsVision.tsx @@ -0,0 +1,46 @@ +import global from 'theme/global/global.module.scss'; +import styles from './ClientsVision.module.scss'; +import { ClientInterface } from '@/interfaces/newCaseStudies.interface'; +import ReactMarkdown from 'react-markdown'; +import { CustomImageElement } from '@/helpers/utilities/imageUtil'; + +interface ClientDataInterface { + clientData: ClientInterface; +} +const ClientsVision = ({ clientData }: ClientDataInterface) => { + return ( + <> +
+
+
+
+
+
+
+ {clientData?.icon?.data && ( + + )} +
+

{clientData?.title}

+
+ {clientData?.details && ( +
+ + {clientData?.details} + +
+ )} +
+
+
+
+
+ + ); +}; + +export default ClientsVision; diff --git a/components/casestudies-details/components/technology/Technology.module.scss b/components/casestudies-details/components/technology/Technology.module.scss new file mode 100644 index 0000000..6ca37d7 --- /dev/null +++ b/components/casestudies-details/components/technology/Technology.module.scss @@ -0,0 +1,86 @@ +@use 'theme/sass' as *; + +.technology_sec { + width: 100%; + padding-block: 0 scaleValue(40px, 54px); + .custom_container { + .inner_about_hero { + width: 100%; + + .content_box { + width: 100%; + @include displayFlex(column, flex-start, flex-start); + border-block-end: 1px solid var(--clr_case_border4); + padding-block-end: 40px; + .inner_wrap { + width: 100%; + @include displayFlex(row, center, flex-start); + gap: 40px; + @include max(767px) { + flex-direction: column; + } + & > * { + flex: 1; + } + .content { + width: 100%; + text-align: center; + @include displayFlex(column, flex-start, flex-start); + gap: 20px; + .para { + p { + font-weight: var(--fw_regular); + color: var(--clr_text_new_darkGray); + text-align: start; + } + ul { + text-align: start; + padding-left: 30px; + padding-block-start: 15px; + li { + font-size: 16px; + line-height: 26px; + font-weight: var(--fw_medium); + font-family: var(--fn_accent); + color: var(--clr_text_new_darkGray); + gap: 10px; + list-style-type: disc; + } + } + } + } + .inner_text { + width: 100%; + + .title { + font-weight: var(--fw_semiBold); + font-family: var(--fn_accent); + color: var(--clr_about_text2); + } + .technology { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 20px; + padding-block-start: 35px; + .box { + @include displayFlex(row, center, flex-start); + gap: 20px; + .img { + width: 41px; + height: 41px; + background: var(--clr_background_primary); + @include displayFlex(row, center, center); + border-radius: 10px; + } + .logo_title { + font-weight: var(--fw_medium); + color: var(--clr_text_new_darkGray); + } + } + } + } + } + } + } + } +} diff --git a/components/casestudies-details/components/technology/Technology.tsx b/components/casestudies-details/components/technology/Technology.tsx new file mode 100644 index 0000000..1a8530a --- /dev/null +++ b/components/casestudies-details/components/technology/Technology.tsx @@ -0,0 +1,59 @@ +import global from 'theme/global/global.module.scss'; +import styles from './Technology.module.scss'; +import ReactMarkdown from 'react-markdown'; +import { BannerInterface } from '@/interfaces/newCaseStudies.interface'; +import { CustomImageElement } from '@/helpers/utilities/imageUtil'; + +interface BannerDataInterface { + bannerData: BannerInterface; +} + +const Technology = ({ bannerData }: BannerDataInterface) => { + return ( + <> +
+
+
+
+
+
+ {bannerData?.details && ( + + {bannerData.details} + + )} +
+ {bannerData?.techStack.length > 0 && ( +
+

Technology Stack

+
+ {bannerData?.techStack.length > 0 && + bannerData?.techStack.map((item, i) => ( +
+
+ +
+
+
+ {item.techName} +
+
+
+ ))} +
+
+ )} +
+
+
+
+
+ + ); +}; + +export default Technology; diff --git a/components/casestudies-details/components/thoughts/Thoughts.module.scss b/components/casestudies-details/components/thoughts/Thoughts.module.scss new file mode 100644 index 0000000..ab7f172 --- /dev/null +++ b/components/casestudies-details/components/thoughts/Thoughts.module.scss @@ -0,0 +1,90 @@ +@use 'theme/sass' as *; + +.thoughts_sec { + width: 100%; + + .custom_container { + .inner_about_hero { + width: 100%; + z-index: 3; + position: relative; + padding-block-end: 40px; + .content_box { + width: 100%; + @include displayFlex(column, flex-start, flex-start); + position: relative; + isolation: isolate; + + .inner_banner { + width: 100%; + position: relative; + border-radius: 15px; + padding-inline: scaleValue(00px, 60px); + @include displayFlex(row, center, flex-start); + gap: 20px; + isolation: isolate; + background: linear-gradient(99deg, rgba(0, 147, 202, 0.72) 0.71%, rgba(29, 190, 190, 0.72) 116.79%); + + @include max(1023px) { + padding-inline: 30px; + @include displayFlex(column, center, flex-start); + } + + &::after { + content: ''; + position: absolute; + inset: 0; + width: 100%; + height: 100%; + background: url('../../../../public/assets/images/convex/bg_box.webp') repeat center center; + z-index: -1; + opacity: 0.4; + } + + .inner_img { + @include displayFlex(row, flex-end, flex-end); + flex: 1; + width: scaleValue(0px, 500px); + align-self: flex-end; + img { + max-width: 100%; + } + @include max(1023px) { + width: 100%; + text-align: center; + @include displayFlex(row, center, center); + } + } + + .content { + width: 100%; + flex: 1; + padding-block: 50px; + text-align: center; + @include displayFlex(column, flex-start, flex-start); + gap: 20px; + @include max(1023px) { + max-width: 100%; + padding-block: 50px 0; + } + + .title { + font-weight: var(--fw_semiBold); + font-family: var(--fn_accent); + color: var(--clr_text_secondary); + } + + .para { + p { + font-weight: var(--fw_medium); + font-family: var(--fn_accent); + color: var(--clr_text_secondary); + text-align: start; + } + } + } + } + } + } + } +} diff --git a/components/casestudies-details/components/thoughts/Thoughts.tsx b/components/casestudies-details/components/thoughts/Thoughts.tsx new file mode 100644 index 0000000..bb14a96 --- /dev/null +++ b/components/casestudies-details/components/thoughts/Thoughts.tsx @@ -0,0 +1,36 @@ +import global from 'theme/global/global.module.scss'; +import styles from './Thoughts.module.scss'; +import { ThoughtInterface } from '@/interfaces/newCaseStudies.interface'; +import { UTILITY_CONSTANTS } from '@/constants/utilityConstants'; +import ReactMarkdown from 'react-markdown'; + +interface ThoughtsDataInterface { + thoughtData: ThoughtInterface +} +const Thoughts = ({ thoughtData }: ThoughtsDataInterface) => { + return ( + <> +
+
+
+
+
+
+

{thoughtData?.title}

+ + {thoughtData?.details} + +
+
+ logo +
+
+
+
+
+
+ + ); +}; + +export default Thoughts; diff --git a/components/common/Alert/Alert.tsx b/components/common/Alert/Alert.tsx new file mode 100644 index 0000000..59b6d0a --- /dev/null +++ b/components/common/Alert/Alert.tsx @@ -0,0 +1,8 @@ +import MuiAlert, { AlertProps } from '@mui/material/Alert'; +import { forwardRef } from 'react'; + +const Alert = forwardRef(function Alert(props, ref) { + return ; +}); + +export default Alert \ No newline at end of file diff --git a/components/common/BreadCrumbs/BreadCrumbs.module.scss b/components/common/BreadCrumbs/BreadCrumbs.module.scss new file mode 100644 index 0000000..a9d0571 --- /dev/null +++ b/components/common/BreadCrumbs/BreadCrumbs.module.scss @@ -0,0 +1,47 @@ +@use 'theme/sass' as *; + +.breadCrumb_sec { + width: 100%; + text-align: center; + padding-block-start: scaleValue(60px, 100px); + .breadCrumb_list { + width: 100%; + @include displayFlex(row, center, center); + gap: 20px; + .link { + color: var(--clr_text_primary_02); + font-weight: var(--fw_semiBold); + cursor: pointer; + position: relative; + &::after { + content: '/'; + position: absolute; + inset: 0 -13px 0 auto; + font-size: 20px; + line-height: 22px; + font-weight: var(--fw_regular); + } + + &:last-child { + &::after { + display: none; + } + } + &:hover { + text-decoration: underline; + } + } + } + + &.leftAlign { + padding-block-start: 0px; + padding-block-end: 25px; + background: var(--grad_bg_01); + .breadCrumb_list { + justify-content: flex-start; + } + } + &.blogBreadCrumb { + padding-block-start: scaleValue(20px, 100px); + } +} diff --git a/components/common/BreadCrumbs/BreadCrumbs.tsx b/components/common/BreadCrumbs/BreadCrumbs.tsx new file mode 100644 index 0000000..877bcfd --- /dev/null +++ b/components/common/BreadCrumbs/BreadCrumbs.tsx @@ -0,0 +1,22 @@ +import Link from 'next/link'; + +import styles from './BreadCrumbs.module.scss'; + +import { IBreadCrumbs } from '@/interfaces/breadcrumbs.interface'; + +const BreadCrumbs = (props: IBreadCrumbs) => { + return ( +
+
+ + Home + + + {props.page} + +
+
+ ); +}; + +export default BreadCrumbs; diff --git a/components/common/CustomUiUxEfficiency/CustomUiUxEfficiency.module.scss b/components/common/CustomUiUxEfficiency/CustomUiUxEfficiency.module.scss new file mode 100644 index 0000000..e08db8a --- /dev/null +++ b/components/common/CustomUiUxEfficiency/CustomUiUxEfficiency.module.scss @@ -0,0 +1,113 @@ +@use 'theme/sass' as *; + +.webdev_sec { + width: 100%; + background: var(--clr_background_primary); + position: relative; + &::before { + content: ''; + position: absolute; + top: 0; + right: 0; + background: var(--grad_bg_114); + width: 100%; + height: 100%; + border-radius: 0; + z-index: 0; + } + + .custom_container { + width: 100%; + .web_inner_content { + position: relative; + width: 100%; + isolation: isolate; + margin-inline: auto; + padding-block: 80px 120px; + display: flex; + gap: 50px; + .web_content { + width: 100%; + max-width: 920px; + margin: 0 auto; + text-align: left; + @include max(1200px) { + max-width: 100%; + } + @include max(575px) { + grid-column: 1; + } + .web_title { + margin-bottom: 30px; + color: var(--clr_vzit_offer_text2); + font-family: var(--fn_accent); + } + .webpro_para { + color: var(--clr-para); + font-family: var(--font_primary); + font-weight: 400; + padding-block-start: 20px; + } + } + .web_grid { + width: 100%; + margin-block-end: scaleValue(34px, 78px); + .web_grid_inner { + width: 100%; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 15px; + + @include max(575px) { + grid-template-columns: 1fr; + } + .web_grid_item { + background: var(--clr_background_primary); + border-radius: 20px; + overflow: hidden; + + .web_grid_icon img { + position: relative; + bottom: 0; + height: 100px; + width: auto; + object-fit: contain; + @include max(768px) { + height: auto; + width: 100px; + } + } + .txt_title { + color: var(--clr-heading); + margin-block-end: scaleValue(10px, 15px); + padding-block-start: 15px; + + @include max(768px) { + font-size: 18px !important; + line-height: 20px !important; + padding-top: 20px; + } + } + .web_grid_txt { + width: 100%; + padding: scaleValue(6px, 36px); + } + } + } + } + .txt_para { + color: var(--clr-para); + font-weight: var(--fw_regular) !important; + overflow: hidden; + white-space: pre-wrap; + @include max(575px) { + margin-block-end: 20px; + } + } + .book_btn { + width: 100%; + margin-block-start: 50px; + } + } + } +} diff --git a/components/common/CustomUiUxEfficiency/CustomUiUxEfficiency.tsx b/components/common/CustomUiUxEfficiency/CustomUiUxEfficiency.tsx new file mode 100644 index 0000000..cac1c63 --- /dev/null +++ b/components/common/CustomUiUxEfficiency/CustomUiUxEfficiency.tsx @@ -0,0 +1,89 @@ +import styles from './CustomUiUxEfficiency.module.scss'; +import global from 'theme/global/global.module.scss'; +import { + CallIcon, + CUSTOM_ICON_DEVICE, + CUSTOM_ICON_GOGGLES, + CUSTOM_ICON_SMARTWATCH, + CUSTOM_ICON_WIREFRAME, +} from '@/constants/svgConstant'; +import { DevelopmentServiceInterface } from '@/interfaces/serviceDetails.interface'; +interface IWebDevelopmentInterface { + webServiceData: DevelopmentServiceInterface; + buttonText: string; + onOpen: Function; +} + +const CustomUiUxEfficiency = ({ webServiceData, buttonText, onOpen }: IWebDevelopmentInterface) => { + const items = [ + { + id: 1, + iconSrc: , + title: 'Cross-Platform UI Development', + description: + 'Our technical experts create adaptable designs that work flawlessly both on desktop and mobile. With a uniform look and feel, we help your brand provide users a cohesive and engaging experience.', + }, + { + id: 2, + iconSrc: , + title: 'Wearable', + description: + 'Be it fitness trackers, smart watches or wearable tech, we are focused on delivering a user-friendly and stunning interface allowing keeps users engaged. Our sleek functional interfaces are customized to help you go the extra mile. ', + }, + { + id: 3, + iconSrc: , + title: 'AR-VR', + description: + 'Our expert UI/UX designers ensure AR/VR applications are interactive, impressive and user-centric solutions offering an unappalled experience. We are focused on delivering captivating and engaging experiences ensuring users enjoy lasting impressions. ', + }, + { + id: 4, + iconSrc: , + title: 'Wireframing', + description: + 'We create a detailed wireframe that defines the structure and functionality of the app or website. Our designs are focused on structure, functionality and user flow ensuring flawless transition from design to final product delivery. ', + }, + ]; + return ( +
+
+
+
+

+ Leveraging Efficiency with comprehensive UI/UX design{' '} +

+

+ With market-ready expertise, our UI/UX team has successfully designed an array of interfaces + both for web and mobile applications. We encourage a solution-based approach to solve + complexities and consistently deliver optimistic results. +

+
+ +
+
+
+
+ {items.map((item) => ( +
+
+
{item.iconSrc}
+

{item.title}

+

{item.description}

+
+
+ ))} +
+
+
+
+
+ ); +}; + +export default CustomUiUxEfficiency; diff --git a/components/common/CustomUiUxOverview/CustomUiUxOverview.module.scss b/components/common/CustomUiUxOverview/CustomUiUxOverview.module.scss new file mode 100644 index 0000000..42fb83f --- /dev/null +++ b/components/common/CustomUiUxOverview/CustomUiUxOverview.module.scss @@ -0,0 +1,114 @@ +@use 'theme/sass' as *; + +.webdev_sec { + width: 100%; + background: var(--clr_background_primary); + + .custom_container { + width: 100%; + .web_inner_content { + position: relative; + width: 100%; + isolation: isolate; + margin-inline: auto; + .web_content { + width: 100%; + max-width: 750px; + text-align: left; + grid-column: 1 / 3; + @include max(1200px) { + max-width: 100%; + padding-block-end: 20px; + } + @include max(575px) { + grid-column: 1; + } + .web_title { + h1 { + margin-bottom: 30px; + color: var(--clr_vzit_offer_text2); + font-family: var(--fn_accent); + font-size: clamp(28px, 28px + 1.2844036697vw, 42px); + line-height: clamp(40px, 40px + 0.9174311927vw, 50px); + font-weight: var(--fw_semiBold); + } + } + } + .txt_para { + color: var(--clr-para); + font-weight: var(--fw_regular) !important; + overflow: hidden; + white-space: pre-wrap; + } + .web_grid { + width: 100%; + margin-block-end: scaleValue(0px, 60px); + .web_grid_inner { + width: 100%; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 15px; + @include max(1200px) { + grid-template-columns: repeat(2, 1fr); + } + @include max(575px) { + grid-template-columns: 1fr; + } + .web_grid_item { + background: var(--clr_background_secondary6); + border-radius: 20px; + overflow: hidden; + @include max(575px) { + height: 280px; + } + .web_grid_upper { + background: var(--grad_bg_05); + padding: scaleValue(6px, 36px); + @include displayFlex(row, stretch, flex-start); + gap: 50px; + padding-bottom: 0; + position: relative; + height: 130px; + @include max(575px) { + height: 120px; + } + } + + .web_grid_icon img { + position: absolute; + bottom: 0; + height: 100px; + width: auto; + object-fit: contain; + @include max(768px) { + height: auto; + width: 100px; + } + } + .txt_title { + color: var(--clr-heading); + margin-block-end: scaleValue(10px, 22px); + padding-inline-start: 100px; + @include max(1200px) { + padding-inline-start: 80px; + } + @include max(768px) { + font-size: 18px !important; + line-height: 20px !important; + padding-top: 20px; + } + } + .web_grid_txt { + width: 100%; + padding: scaleValue(6px, 36px); + } + } + } + } + } + } + + &.customUiUx_app { + padding-block-end: scaleValue(20px, 20px); + } +} diff --git a/components/common/CustomUiUxOverview/CustomUiUxOverview.tsx b/components/common/CustomUiUxOverview/CustomUiUxOverview.tsx new file mode 100644 index 0000000..e8bd18d --- /dev/null +++ b/components/common/CustomUiUxOverview/CustomUiUxOverview.tsx @@ -0,0 +1,80 @@ +import ReactMarkdown from 'react-markdown'; + +import styles from './CustomUiUxOverview.module.scss'; +import global from 'theme/global/global.module.scss'; + +import { DevelopmentServiceInterface } from '@/interfaces/serviceDetails.interface'; + +interface IWebDevelopmentInterface { + webServiceData: DevelopmentServiceInterface; + buttonText: string; + onOpen: Function; + extraClass?: string; +} + +const CustomUiUxOverview = ({ webServiceData, extraClass }: IWebDevelopmentInterface) => { + return ( +
+
+
+
+
+
+ + {webServiceData?.title} + +

{webServiceData?.description}

+
+ {webServiceData?.service?.length && + webServiceData.service.map((item, index) => ( +
+
+
+ {item?.logo?.data?.attributes?.alternativeText} +
+

{item.heading}

+
+
+

{item.details}

+
+
+ ))} + {/* {webServiceData?.service?.length && + webServiceData.service.map((service, index) => { + return ( +
+
+ webService +
+
+

+ {service.heading} +

+

+ {service.details} +

+
+
+ ); + })} */} +
+
+
+
+
+ ); +}; + +export default CustomUiUxOverview; diff --git a/components/common/CustomUiUxProcess/customUiUxprocess.module.scss b/components/common/CustomUiUxProcess/customUiUxprocess.module.scss new file mode 100644 index 0000000..550eb22 --- /dev/null +++ b/components/common/CustomUiUxProcess/customUiUxprocess.module.scss @@ -0,0 +1,184 @@ +@use 'theme/sass' as *; + +.webpro_sec { + width: 100%; + background: var(--clr_background_primary); + position: relative; + + .custom_container { + width: 100%; + position: relative; + z-index: 1; + .webpro_inner_content { + position: relative; + width: 100%; + max-width: 100%; + margin-inline: auto; + padding-block: 80px 120px; + + @include max(767px) { + width: 100%; + max-width: inherit; + padding-block: 80px; + height: auto; + } + + .webpro_content { + width: 100%; + max-width: 100%; + margin-inline: auto; + text-align: center; + .webpro_title { + margin-bottom: 10px; + color: var(--clr_vzit_offer_text2); + font-family: var(--fn_accent); + span { + color: var(--clr_text_new_blue_green400); + } + } + .webpro_txt_para { + color: var(--clr-para); + font-weight: var(--fw_regular) !important; + overflow: hidden; + white-space: pre-wrap; + @include max(575px) { + margin-block-end: 20px; + } + } + } + + .custom_row { + --gap: 180px; + width: 100%; + @include displayFlex(column, flex-start, space-between); + gap: var(--gap); + position: relative; + margin-top: 50px; + + .upper_col { + flex: 1; + position: relative; + @include displayFlex(row, normal, space-between); + gap: 15px; + width: 100%; + .left_item { + width: 100%; + max-width: 100%; + text-align: start; + background: var(--clr_background_primary); + position: relative; + display: flex; + flex-direction: column; + gap: 50px; + & .process_icon { + position: relative; + background: var(--clr_background_secondary11); + width: 112px; + height: 112px; + margin: 0 auto; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + border-radius: 50%; + top: 0; + color: var(--clr_text_secondary); + font-size: 20px; + font-weight: var(--fw_semiBold); + transition: var(--transition_02); + @include max(1023px) { + width: 80px; + height: 80px; + } + @include max(673px) { + width: 60px; + height: 60px; + img { + width: 40px; + height: 30px; + } + } + } + .process_icon_box { + @include max(1023px) { + flex: 1; + } + .txt_title { + color: var(--clr-heading); + margin-block-end: 14px; + font-size: 20px; + line-height: 26px; + } + .txt_para { + color: var(--clr-para); + } + } + &.left_item:hover .process_icon { + background: var(--clr_vzit_text_sky); + & > img { + filter: brightness(0) saturate(100%) invert(100%) sepia(74%) saturate(115%) + hue-rotate(2deg) brightness(108%) contrast(101%) !important; + } + } + } + .left_item:nth-child(1), + .left_item:nth-child(3), + .left_item:nth-child(5) { + justify-content: end; + align-items: center; + height: 100%; + max-height: 100%; + @include max(1023px) { + display: flex; + flex-direction: row; + justify-content: flex-start; + } + & .process_icon { + @include max(1023px) { + position: relative; + left: 0; + transform: translateX(0); + } + } + } + .left_item:nth-child(2), + .left_item:nth-child(4), + .left_item:nth-child(6) { + flex-direction: column-reverse; + @include max(1023px) { + flex-direction: row; + } + & .process_icon { + @include max(1023px) { + position: relative; + top: 0; + left: 0; + transform: translateX(0); + } + } + } + } + + @include max(1023px) { + .upper_col { + flex: 1; + position: relative; + @include displayFlex(column, flex-start, flex-start); + gap: 0px; + & .left_item { + max-width: 100%; + width: 100%; + text-align: start; + padding: 25px; + background: var(--clr_background_primary); + position: relative; + display: flex; + align-items: center; + gap: 25px; + } + } + } + } + } + } +} diff --git a/components/common/CustomUiUxProcess/customUiUxprocess.tsx b/components/common/CustomUiUxProcess/customUiUxprocess.tsx new file mode 100644 index 0000000..e0eeceb --- /dev/null +++ b/components/common/CustomUiUxProcess/customUiUxprocess.tsx @@ -0,0 +1,50 @@ +import styles from './customUiUxprocess.module.scss'; +import global from 'theme/global/global.module.scss'; + +import { CUSTOM_UIUX_PROCESS_ONE, CUSTOM_UIUX_PROCESS_TWO } from '@/constants/svgConstant'; +import { ProcessInterface } from '@/interfaces/uiux.interface'; + +interface ProcessDataInterface { + processData: ProcessInterface; +} +const CustomUiUxProcess = ({ processData }: ProcessDataInterface) => { + const { service = [] } = processData; + + return ( +
+
+
+
+

{processData?.title}

+

{processData?.description}

+
+
+
+
+ {service?.length > 0 && + service.map((item, index) => ( +
+
+ {item?.logo?.data?.attributes?.alternativeText} +
+
+

+ {item.heading} +

+

{item.details}

+
+
+ ))} +
+
+
+
+
+
+ ); +}; + +export default CustomUiUxProcess; diff --git a/components/common/CustomUiUxProjects/CustomUiUxProjects.module.scss b/components/common/CustomUiUxProjects/CustomUiUxProjects.module.scss new file mode 100644 index 0000000..5c93b71 --- /dev/null +++ b/components/common/CustomUiUxProjects/CustomUiUxProjects.module.scss @@ -0,0 +1,157 @@ +@use 'theme/sass' as *; + +.webdev_sec { + width: 100%; + background: var(--clr_background_primary); + position: relative; + + &::before { + content: ''; + position: absolute; + top: -9px; + bottom: 0; + right: 0; + transform: rotate(180deg); + background: var(--grad_bg_03); + filter: blur(200px); + width: 90%; + height: 100%; + border-radius: 0; + z-index: 0; + } + + .custom_container { + width: 100%; + .web_inner_content { + position: relative; + width: 100%; + isolation: isolate; + margin-inline: auto; + padding-block: 80px 120px; + .web_content { + width: 100%; + @include displayFlex(row, flex-start, space-between); + gap: 20px; + @include max(991px) { + flex-direction: column; + gap: 0; + } + .web_title { + margin-bottom: 30px; + color: var(--clr_vzit_offer_text2); + font-family: var(--fn_accent); + } + .txt_para { + text-align: right; + flex: 1; + @include max(991px) { + text-align: left; + } + } + } + .web_grid { + width: 100%; + .web_grid_inner { + width: 100%; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 15px; + margin-block-end: scaleValue(34px, 78px); + padding-block-start: 50px; + @include max(1023px) { + grid-template-columns: repeat(2, 1fr); + } + @include max(575px) { + grid-template-columns: 1fr; + } + .web_grid_item { + background: var(--clr_background_primary); + border-radius: 40px; + overflow: hidden; + cursor: pointer; + .web_grid_icon { + transition: var(--transition_02); + &:hover { + transform: scale(1.05); + } + img { + position: relative; + bottom: 0; + height: 100%; + width: 100%; + object-fit: contain; + border-radius: 32px; + overflow: hidden; + } + } + .box_detail { + padding: scaleValue(10px, 20px); + .txt_title { + color: var(--clr_vzit_text_sky); + padding-block-start: 8px; + font-weight: var(--fw_semiBold) !important; + font-family: var(--fn_accent); + + @include max(768px) { + font-size: 18px !important; + line-height: 20px !important; + padding-top: scaleValue(10px, 20px); + } + } + .txt_para { + padding-block-start: 8px; + font-family: var(--fn_accent); + color: var(--clr_text_primary); + font-weight: var(--fw_semiBold) !important; + @include max(575px) { + margin-block-end: 0px; + } + } + } + + .web_grid_txt { + width: 100%; + height: 100%; + padding: 15px; + } + } + } + .grid_more { + @include displayFlex(row, center, center); + text-align: center; + padding-block-end: scaleValue(40px, 80px); + .customButton { + gap: 20px; + cursor: pointer; + padding-inline-start: 15px; + .arrow2 { + transform: rotate(135deg); + &.up { + transform: rotate(-45deg); + } + } + } + } + } + .txt_para { + color: var(--clr-para); + font-weight: var(--fw_regular) !important; + overflow: hidden; + white-space: pre-wrap; + @include max(575px) { + margin-block-end: 20px; + } + } + .book_btn { + width: 100%; + text-align: center; + .btn_call { + margin-inline: auto; + @include max(767px) { + margin-inline: auto; + } + } + } + } + } +} diff --git a/components/common/CustomUiUxProjects/CustomUiUxProjects.tsx b/components/common/CustomUiUxProjects/CustomUiUxProjects.tsx new file mode 100644 index 0000000..62a292d --- /dev/null +++ b/components/common/CustomUiUxProjects/CustomUiUxProjects.tsx @@ -0,0 +1,86 @@ +import { useState } from 'react'; + +import styles from './CustomUiUxProjects.module.scss'; +import global from 'theme/global/global.module.scss'; + +import { caseStudiesArrow } from '@/constants/svgConstant'; +import CallToAction from '../callToAction/CallToAction'; +import { PortfolioInterface } from '@/interfaces/uiux.interface'; + +interface CustomUIUXProjectsInterface { + portfolio: PortfolioInterface[]; +} +interface PortFolioChildInterface { + index: number; + item: PortfolioInterface; + isViewMore: boolean; +} +const CustomUiUxProjects = ({ portfolio = [] }: CustomUIUXProjectsInterface) => { + const [isViewMore, setIsViewMore] = useState(false); + + function handleViewMore() { + setIsViewMore(!isViewMore); + } + return ( +
+
+
+
+

Our Successful Projects

+

+ We create aesthetically appealing UI/UX designs offering optimized user experience, + streamlining projects striving for enhanced results. +

+
+
+
+ {portfolio.map((item, index) => ( + + ))} +
+
+ +
+
+ +
+
+
+ ); +}; + +function PortFolioChild({ index, item, isViewMore }: PortFolioChildInterface) { + if (!isViewMore && index > 2) return <>; + + return ( +
+
+
+ {item?.image?.data?.attributes?.alternativeText} +
+
+

{item.category}

+

{item.title}

+
+
+
+ ); +} + +export default CustomUiUxProjects; diff --git a/components/common/CustomUiUxService/CustomUiUxService.module.scss b/components/common/CustomUiUxService/CustomUiUxService.module.scss new file mode 100644 index 0000000..f4d22e6 --- /dev/null +++ b/components/common/CustomUiUxService/CustomUiUxService.module.scss @@ -0,0 +1,115 @@ +@use 'theme/sass' as *; + +.webdev_sec { + width: 100%; + background: var(--clr_background_primary); + + .custom_container { + width: 100%; + .web_inner_content { + position: relative; + width: 100%; + isolation: isolate; + margin-inline: auto; + .web_content { + width: 100%; + max-width: 920px; + margin: 0 auto; + text-align: center; + @include max(1200px) { + max-width: 100%; + } + @include max(575px) { + grid-column: 1; + } + .web_title { + margin-bottom: 30px; + color: var(--clr_vzit_offer_text2); + font-family: var(--fn_accent); + } + } + .web_grid { + width: 100%; + margin-block-end: scaleValue(34px, 78px); + padding-block-start: 50px; + .web_grid_inner { + width: 100%; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 15px; + + @include max(415px) { + grid-template-columns: 1fr; + } + .web_grid_item { + background: var(--clr_background_secondary6); + border-radius: 20px; + overflow: hidden; + + .web_grid_icon img { + position: relative; + bottom: 0; + height: 100px; + width: auto; + object-fit: contain; + @include max(768px) { + height: auto; + width: 100px; + } + @include max(673px) { + width: 70px; + } + @include max(673px) { + width: 50px; + } + } + .txt_title { + color: var(--clr-heading); + margin-block-end: scaleValue(10px, 15px); + padding-block-start: 15px; + + @include max(768px) { + font-size: 18px !important; + line-height: 22px !important; + padding-top: 20px; + } + @include max(673px) { + font-size: 16px !important; + line-height: 20px !important; + padding-top: 10px; + } + } + .web_grid_txt { + width: 100%; + padding: scaleValue(6px, 36px); + @include max(673px) { + padding: scaleValue(6px, 20px); + } + } + } + } + } + .txt_para { + color: var(--clr-para); + font-weight: var(--fw_regular) !important; + overflow: hidden; + white-space: pre-wrap; + @include max(575px) { + font-size: 12px !important; + line-height: 18px !important; + margin-block-end: 10px; + } + } + .book_btn { + width: 100%; + text-align: center; + .btn_call { + margin-inline: auto; + @include max(767px) { + margin-inline: auto; + } + } + } + } + } +} diff --git a/components/common/CustomUiUxService/CustomUiUxService.tsx b/components/common/CustomUiUxService/CustomUiUxService.tsx new file mode 100644 index 0000000..dcb382a --- /dev/null +++ b/components/common/CustomUiUxService/CustomUiUxService.tsx @@ -0,0 +1,54 @@ +import styles from './CustomUiUxService.module.scss'; +import global from 'theme/global/global.module.scss'; +import { CallIcon } from '@/constants/svgConstant'; +import { DevelopmentServiceInterface } from '@/interfaces/serviceDetails.interface'; + +interface IWebDevelopmentInterface { + advanceService: DevelopmentServiceInterface; + buttonText: string; + onOpen: Function; +} + +const CustomUiUxService = ({ buttonText, onOpen, advanceService }: IWebDevelopmentInterface) => { + return ( +
+
+
+
+

{advanceService.title}

+

{advanceService.description}

+
+
+
+ {advanceService?.service?.length && + advanceService.service.map((item, index) => ( +
+
+
+ {item?.logo?.data?.attributes?.alternativeText} +
+

{item.heading}

+

{item.details}

+
+
+ ))} +
+
+
+ +
+
+
+
+ ); +}; + +export default CustomUiUxService; diff --git a/components/common/bookCallModal/BookCallModal.module.scss b/components/common/bookCallModal/BookCallModal.module.scss new file mode 100644 index 0000000..9583ae7 --- /dev/null +++ b/components/common/bookCallModal/BookCallModal.module.scss @@ -0,0 +1,288 @@ +@use 'theme/sass' as *; +.contact_box { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + + .contact_frm { + width: 100%; + max-width: 600px; + margin-inline: auto; + background: var(--grad_bg_04); + border-radius: 20px; + position: relative; + overflow: hidden; + @include max(767px) { + max-width: 500px; + } + @include max(576px) { + max-width: 400px; + } + @include max(480px) { + max-width: 340px; + } + @include max(360px) { + max-width: 280px; + } + + .contact_img { + background: url(../../../public/assets/images/contact_us/banner-1.webp); + height: fit-content; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + + .cancel_img { + position: absolute; + top: 20px; + right: 20px; + width: 34px; + height: 34px; + border-radius: 50%; + background: var(--clr_background_secondary6); + cursor: pointer; + + @include max(576px) { + top: 10px; + right: 10px; + width: 24px; + height: 24px; + } + + img { + width: 100%; + padding: scaleValue(5px, 10px); + } + } + .contact_banner_img { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + padding: scaleValue(10px, 30px) scaleValue(10px, 50px); + gap: scaleValue(4px, 18px); + .contact_txt { + @include displayFlex(row, center, flex-start); + gap: 16px; + width: 100%; + + @include max(576px) { + margin-block-end: 0; + } + .call_img { + width: 30px; + height: 30px; + @include max(576px) { + width: 24px; + height: 24px; + } + } + .frm_title { + color: var(--clr_text_secondary); + font-weight: var(--fw_bold); + @include max(576px) { + font-size: scaleValue(16px, 22px); + } + } + } + .frm_para { + color: var(--clr_text_secondary); + width: 100%; + max-width: 480px; + font-weight: 300; + line-height: 1.5; + @include max(576px) { + line-height: 16px; + font-size: 12px; + } + } + } + } + + .frm_sec { + padding: scaleValue(16px, 36px); + background: rgb(160, 225, 252); + background: linear-gradient( + 301deg, + rgba(160, 225, 252, 0.5626422444) 0%, + rgb(255, 255, 255) 67%, + rgb(247, 249, 254) 100% + ); + max-height: 70vh; + overflow-y: auto; + + .frm_title { + font-weight: var(--fw_bold); + margin-block-end: 20px; + } + + .input_bx { + width: 100%; + display: grid; + grid-template-columns: repeat(2, 1fr); + padding-block-start: 16px; + gap: 16px; + @include max(767px) { + @include displayFlex(column, center, space-between); + } + &:first-child { + padding-block-start: 0; + } + &:last-child { + padding-block-start: 36px; + } + .input_bx_item { + width: 100%; + &:last-child { + grid-column: 1 / 2 span; + } + &:nth-last-child(2) { + grid-column: 1 / 2 span; + } + .input_title { + text-align: start; + color: var(--text_paragraph); + margin-block-end: 12px; + } + .error { + color: var(--clr_text_danger); + font-size: 12px; + } + + :global(.MuiFormControl-root) { + width: 100%; + + :global(.MuiInputBase-root) { + width: 100%; + background: var(--clr_background_primary); + border-radius: 8px; + & :global(.MuiInputBase-input) { + padding: scaleValue(6px, 10px) 10px; + + &:global(.MuiInputBase-input-MuiOutlinedInput-input) { + border-color: var(--clr_border_1); + } + } + :global(.MuiOutlinedInput-notchedOutline) { + border-color: var(--clr_border_1); + } + &:global(.Mui-focused) { + :global(.MuiOutlinedInput-notchedOutline) { + border-color: var(--clr_border_1); + } + } + &:global(.Mui-error) { + :global(.MuiOutlinedInput-notchedOutline) { + border-color: var(--clr_text_danger); + } + color: var(--clr_text_danger); + } + } + } + + :global(.MuiTextarea-root) { + padding: 0; + &:before { + box-shadow: none; + } + &:global(.MuiTextarea-colorDanger) { + color: var(--clr_text_danger); + border-color: var(--clr_text_danger); + } + &:global(.MuiTextarea-colorNeutral) { + border: 1px solid var(--clr_border_1); + border-color: var(--clr_border_1); + } + :global(.MuiTextarea-textarea) { + padding: scaleValue(6px, 10px) 10px; + height: 90px !important; + overflow: auto !important; + border-radius: 8px; + } + &:global(.Mui-error) { + color: var(--clr_text_danger); + border-color: var(--clr_text_danger); + } + } + & :global(.react-tel-input) { + :global(.form-control) { + width: 100%; + padding: rem(10) rem(14); + color: var(--text_clr_dark_blue); + border: 1px solid var(--clr_border_1); + height: rem(43); + border-radius: rem(8); + padding-inline-start: rem(42); + &::placeholder { + color: var(--lnd2_clr_text_gray); + } + } + :global(.flag-dropdown) { + background: transparent; + border: none; + &:global(.open) { + :global(.selected-flag) { + background: transparent; + } + } + :global(.selected-flag) { + padding-inline-start: rem(14); + &:hover { + background: transparent; + } + &:focus { + background: transparent; + } + } + } + } + } + .get_btn { + width: 100%; + grid-column: 1 / 2 span; + .btn { + margin-inline: auto; + padding-inline: 22px; + @include displayFlex(row, center, center); + min-height: 62px; + margin-block-end: 0; + width: 100%; + &:disabled { + cursor: default; + opacity: 0.5; + } + } + } + } + } + } +} + +.captureBx { + width: 100%; + margin-block-start: 25px; + &.left { + & > div { + width: 100%; + & > div { + align-items: center; + justify-content: center; + } + } + } + & > div { + width: 100%; + & > div { + width: 100%; + @include displayFlex(column, center, center); + & > div { + width: 100% !important; + max-width: 306px; + } + } + } + @include max(480px) { + scale: 0.7; + } +} diff --git a/components/common/bookCallModal/BookCallModal.tsx b/components/common/bookCallModal/BookCallModal.tsx new file mode 100644 index 0000000..35d4f6f --- /dev/null +++ b/components/common/bookCallModal/BookCallModal.tsx @@ -0,0 +1,212 @@ +import React, { useEffect, useRef, useState } from 'react'; +import { useForm, SubmitHandler, Controller } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; +import ReCAPTCHA from 'react-google-recaptcha'; + +import global from 'theme/global/global.module.scss'; +import styles from './BookCallModal.module.scss'; + +import { Box, Modal, Snackbar, TextField } from '@mui/material'; +import Textarea from '@mui/joy/Textarea'; + +import { UTILITY_CONSTANTS } from '@/constants/utilityConstants'; + +import Alert from '../Alert/Alert'; +import { schema } from './formValidation'; +import { inputFields } from './bookCallData'; + +import { ContactDataInterface } from '@/interfaces/contact.interface'; +import { contactFormSubmit } from '@/helpers/utilities/contactSubmit.util'; +import PhoneInput from 'react-phone-input-2'; +import 'react-phone-input-2/lib/style.css'; +import useDefaultCountry from '@/helpers/customHooks/useDefaultCountry'; +import { contactFormSQSSubmit } from '@/helpers/utilities/contactSQS'; + +interface BookCallModalInterface { + isBookCallModalOpen: boolean; + onClose: Function; + notificationText: string; +} + +export default function BookCallModal({ isBookCallModalOpen, onClose, notificationText }: BookCallModalInterface) { + const [message, setMessage] = useState<{ status?: boolean; message?: string }>({}); + const [isAlertOpen, setIsAlertOpen] = useState(false); + const [isCaptchaVerified, setIsCaptchaVerified] = useState(false); + const reCaptchaRef = useRef(null); + + const defaultCountry = useDefaultCountry(); + + const handleCaptureChange = () => { + setIsCaptchaVerified(true); + }; + const handleReCaptchaExpired = () => { + setIsCaptchaVerified(false); + }; + + const handleClose = (event?: React.SyntheticEvent | Event, reason?: string) => { + if (reason === 'clickaway') return; + setIsAlertOpen(false); + }; + + const { + register, + handleSubmit, + reset, + control, + setValue, + formState: { errors }, + } = useForm({ + resolver: zodResolver(schema), + }); + + const onSubmit: SubmitHandler = async (data) => { + await contactFormSQSSubmit({ + data, + isCaptchaVerified, + onSuccess: () => { + window.location.href = '/thank-you'; + onClose(); + reset(); + }, + onError: () => { + setIsAlertOpen(true); + setMessage({ status: false, message: 'Oops! Something went wrong. Please try again later.' }); + }, + }); + }; + + useEffect(() => { + if (!isBookCallModalOpen) { + reset(); + setIsCaptchaVerified(false); + if (reCaptchaRef.current) { + reCaptchaRef.current.reset(); + } + } + }, [isBookCallModalOpen]); + + return ( + <> + + +
+
+
+ call onClose()} + /> +
+
+
+ cross +

Let’s Schedule A Call

+
+

+ {/* Get a free quote for web design and development, mobile app creation, or get resumes + of handpicked developers based on your needs. */} + {notificationText} +

+
+
+ +
+
+
+ {inputFields.map((field, index) => ( +
+

+ {field.label}{' '} + {index === 0 || index === 2 || index === 3 ? ( + * + ) : null} +

+ {field.name === 'mobile' ? ( + ( + { + onChange(phone); // Updates the value with the full number including dial code + setValue('mobile', phone); // Store full number in form data + }} + inputProps={{ + name: 'mobile', + }} + /> + )} + /> + ) : field.type === 'textarea' ? ( +