\n {linkText && (\n \n {linkText}\n \n \n )}\n \n \n ))}\n \n \n \n \n );\n};\n","import React from \"react\";\nimport tw from \"twin.macro\";\nimport styled from \"styled-components\";\nimport Paul from \"images/team/paul.jpeg\"\nimport Bethan from \"images/team/Bethan.jpg\"\nimport Sandy from \"images/team/Dr-Sandy-Willmott-prof.jpg\"\nimport George from \"images/team/George-Williams.jpg\"\nimport Hayley from \"images/team/Hayley-Green.jpg\"\nimport Helen from \"images/team/Helen-Morris.jpg\"\nimport Armstrong from \"images/team/Kai-Armstrong-prof.png\"\nimport LeiZhang from \"images/team/Lei-Zhang.png\"\nimport MaryWilliams from \"images/team/Mary-Williams.jpg\"\nimport Xujiong from \"images/team/Xujiong.jpg\"\nimport Yan from \"images/team/yan.jpg\"\nimport Sally from \"images/team/Sally-Edwards.jpg\"\nimport Nikki from \"images/team/Nikki-Travis.jpg\"\nimport {Container, ContentWithPaddingXl} from \"components/misc/Layouts.js\";\nimport {SectionHeading, Subheading as SubheadingBase} from \"components/misc/Headings\";\nimport {PrimaryButton as PrimaryButtonBase} from \"../misc/Buttons\";\n\nconst HeadingContainer = tw.div``\nconst Heading = tw(SectionHeading)``\nconst Subheading = tw(SubheadingBase)`text-center mb-3`\nconst Description = tw.p`mt-4 text-sm md:text-base lg:text-lg font-medium leading-relaxed text-secondary-100 max-w-xl text-center`;\n\nconst Cards = tw.div`flex flex-wrap flex-row justify-center sm:max-w-2xl lg:max-w-5xl mx-auto`\nconst Card = tw.div`mt-24 w-full sm:w-1/2 lg:w-1/3 flex flex-col min-h-full items-center`\nconst CardImage = styled.img`\n ${tw`w-64 h-64 bg-contain bg-center rounded`}\n`\nconst CardContent = styled.div`\n ${tw`flex flex-col items-center mt-6`}\n .position {\n ${tw`uppercase font-bold tracking-widest text-xs text-primary-500`}\n }\n .name {\n ${tw`mt-1 text-xl font-medium text-gray-900`}\n }\n .description {\n ${tw`mt-2 text-base font-normal text-gray-700`}\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 4; /* Number of lines to show */\n -webkit-box-orient: vertical;\n }\n`\nconst Button = styled(PrimaryButtonBase)`\n ${tw`rounded-full mt-10 uppercase tracking-wider py-4 text-sm hover:shadow-xl transform hocus:translate-x-px hocus:-translate-y-px focus:shadow-outline`}\n`;\n\nexport default ({\n heading = \"Meet These Fine Folks\",\n subheading = \"Our Team\",\n description = \"\",\n cards = [\n {\n name: \"Prof. Paul Lee\",\n title: \"Medical Director\",\n description: \"Prof. Lee is a leading orthopaedic consultant surgeon with a deep understanding of musculoskeletal conditions and…\",\n image: Paul,\n profileLink: \"https://maimotion.com/prof-paul-lee/\"\n },\n {\n name: \"Prof. Xujiong Ye\",\n title: \"Professor of Computer Vision\",\n description: \"Prof. Ye is renowned for her groundbreaking work in computer vision and medical imaging. With deep expertise…\",\n image: Xujiong,\n profileLink: \"https://maimotion.com/prof-xujiong-ye/\"\n },\n {\n name: \"Dr. Lei Zhang\",\n title: \"AI research scientist\",\n description: \"Dr. Zhang serves as the Principal AI Research Scientist at MSK Doctors and is a distinguished expert in Multimodal AI and Causal AI. His research…\",\n image: LeiZhang,\n profileLink: \"https://maimotion.com/dr-lei-zhang/\"\n },\n {\n name: \"Dr. Bethan Whiting\",\n title: \"Governance and CQC Registered Manager\",\n description: \"With a rich background in healthcare governance and a commitment to high-quality medical service provision,…\",\n image: Bethan,\n profileLink: \"https://maimotion.com/dr-bethan-whiting/\"\n },\n {\n name: \"Mrs. Helen Morris\",\n title: \"Senior Physiotherapist\",\n description: \"Mrs. Morris brings over 20 years of hands-on experience to the MAI-Motion project. As a highly qualified First Contact Practitioner…\",\n image: Helen,\n profileLink: \"https://maimotion.com/mrs-helen-morris/\"\n },\n {\n name: \"Sis. Nikki Travis\",\n title: \"Senior Sister Royal College of Nursing\",\n description: \"Sister Travis is a cornerstone of the MAI-Motion project, lending over 40 years of extensive hands-on clinical…\",\n image: Nikki,\n profileLink: \"https://maimotion.com/sis-nikki-travis/\"\n },\n {\n name: \"Dr. Yan Wen\",\n title: \"Knowledge Transfer Partnership Data Scientist\",\n description: \"Dr. Wen brings her expertise in data science to process and interpret the voluminous and complex datasets generated from the…\",\n image: Yan,\n profileLink: \"https://maimotion.com/dr-yan-wen/\"\n },\n {\n name: \"Mr. George Williams\",\n title: \"Senior Software Developer\",\n description: \"Mr. Williams, with his strong background in software development, is pivotal in the execution and implementation of…\",\n image: George,\n profileLink: \"https://maimotion.com/mr-george-williams/\"\n },\n {\n name: \"Mr. Kai Armstrong\",\n title: \"Senior MAI-Motion Data Scientist\",\n description: \"Mr. Armstrong’s expertise lies in meticulously extracting and deciphering valuable motion data from MAI-Motion…\",\n image: Armstrong,\n profileLink: \"https://maimotion.com/kai-armstrong/\"\n },\n {\n name: \"Ms. Mary Williams\",\n title: \"Junior MRI Technician\",\n description: \"Ms. Williams forms a vital part of the team, lending her skills to MRI data extraction, management, and preparation…\",\n image: MaryWilliams,\n profileLink: \"https://maimotion.com/ms-mary-williams/\"\n },\n {\n name: \"Mrs. Hayley Green\",\n title: \"Research Admin Support\",\n description: \"Mrs. Green serves as the administrative backbone of the MAI-Motion project, orchestrating logistics and streamlining…\",\n image: Hayley,\n profileLink: \"https://maimotion.com/mrs-hayley-green/\"\n },\n {\n name: \"Ms. Sally Edwards\",\n title: \"Senior Research Scientist\",\n description: \"Ms. Edwards provides critical scientific research support and helps in advancing the project’s research goals…\",\n image: Sally,\n profileLink: \"https://maimotion.com/ms-sally-edwards/\"\n },\n {\n name: \"Dr. Sandy Willmott\",\n title: \"Associate Professor\",\n description: \"Dr Willmott teaches biomechanics and research modules at both the undergraduate and postgraduate level…\",\n image: Sandy,\n profileLink: \"https://maimotion.com/ms-sally-edwards/\"\n }\n ]\n}) => {\n return (\n \n \n \n {subheading && {subheading}}\n {heading && {heading} }\n {description && {description} }\n \n \n {cards.map((card, index) => (\n \n \n \n {card.title}\n {card.name}\n {card.description}\n \n \n \n ))}\n \n \n \n );\n};\n","var _g;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport React from \"react\";\nconst SvgSvgDecoratorBlob9 = _ref => {\n let {\n svgRef,\n title,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n viewBox: \"0 0 600 600\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n transform: \"translate(300,300)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M153.6,-239C199.1,-209.8,236,-167.2,258.4,-118C280.9,-68.9,288.9,-13.1,281.2,40.4C273.5,93.9,250.1,145.2,214.7,186.1C179.3,226.9,131.9,257.4,80,272.6C28.2,287.8,-28.2,287.8,-80,272.6C-131.9,257.4,-179.3,226.9,-214.7,186.1C-250.1,145.2,-273.5,93.9,-281.2,40.4C-288.9,-13.1,-280.9,-68.9,-258.4,-118C-236,-167.2,-199.1,-209.8,-153.6,-239C-108.1,-268.3,-54.1,-284.1,0,-284.1C54.1,-284.1,108.1,-268.3,153.6,-239Z\",\n fill: \"currentColor\"\n }))));\n};\nconst ForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(SvgSvgDecoratorBlob9, _extends({\n svgRef: ref\n}, props)));\nexport default __webpack_public_path__ + \"static/media/svg-decorator-blob-9.06b7e929.svg\";\nexport { ForwardRef as ReactComponent };","import React from \"react\";\nimport styled from \"styled-components\"; //eslint-disable-line\nimport tw from \"twin.macro\";\nimport { css } from \"styled-components/macro\"; //eslint-disable-line\nimport { ReactComponent as SvgDecoratorBlob1 } from \"images/svg-decorator-blob-9.svg\";\nimport { ContentWithPaddingXl, Container } from \"components/misc/Layouts\";\n\nconst PrimaryBackgroundContainer = tw.div`py-20 lg:py-24 bg-secondary-500 rounded-lg relative`\nconst Row = tw.div`px-8 mx-auto flex items-center relative z-10 flex-col lg:flex-row text-center`;\n\nconst ColumnContainer = tw.div`lg:w-full mx-auto`\nconst TextContainer = tw(ColumnContainer)``;\nconst Text = tw.h5`text-gray-100 text-2xl sm:text-3xl font-bold`;\n\nconst HighlightedText = tw.span`text-primary-500`;\nconst Description = tw.p`mt-4 text-center text-sm md:text-base lg:text-lg font-medium leading-relaxed text-white`;\n\nconst DecoratorBlobContainer = tw.div`absolute inset-0 overflow-hidden rounded-lg`\nconst DecoratorBlob1 = tw(SvgDecoratorBlob1)`absolute bottom-0 left-0 w-80 h-80 transform -translate-x-20 translate-y-32 text-secondary-700 opacity-50`\nconst DecoratorBlob2 = tw(SvgDecoratorBlob1)`absolute top-0 right-0 w-80 h-80 transform translate-x-20 -translate-y-64 text-secondary-700 opacity-50`\nexport default ({\n pushDownFooter = true\n}) => {\n return (\n \n \n \n \n \n \n Welcome to the future of musculoskeletal health\n \n \n Explore our site to learn more about our technology, see it in action, or get in touch with us.\n \n \n \n \n \n \n \n \n \n \n );\n};\n","import React from \"react\";\nimport AnimationRevealPage from \"helpers/AnimationRevealPage.js\";\nimport tw from \"twin.macro\";\nimport Header from \"components/headers/light.js\";\nimport Footer from \"components/footers/FiveColumnWithInputForm.js\";\nimport MainFeature1 from \"components/features/TwoColWithButton.js\";\nimport Features from \"components/features/ThreeColSimple.js\";\nimport TeamCardGrid from \"components/cards/ProfileThreeColGrid.js\";\n\nimport OurTeam from \"images/team/our-team.png\";\nimport AboutUseImage1 from \"images/team/about-us-image.png\";\nimport Layer_1 from \"images/team/Layer_1.png\";\nimport Layer_11 from \"images/team/Layer_1-1.png\";\nimport Layer_12 from \"images/team/Layer_1-2.png\";\nimport Layer_13 from \"images/team/Layer_1-3.png\";\nimport WhyWeDeveloped from \"images/team/why-we-developed.png\";\nimport GetStarted from \"../components/cta/GetStarted\";\nimport MainFeature from \"../components/features/TwoColWithButton\";\nimport Logo from \"../images/full-logo.png\";\nimport HeroBgImage from \"../images/hero-bg-img.png\";\n\nconst Subheading = tw.span`uppercase tracking-wider text-sm`;\nconst HighlightedText = tw.span`text-primary-500`;\n\nexport default () => {\n return (\n \n \n \n \n Our Vision\n \n }\n imageSrc={Logo}\n description=\"We believe in a world where motion analysis goes beyond the surface, capturing not just visible movements, but also the intricate interplay of anatomical structures beneath. Ourgoal is to redefine motion analysis, delivering precise, comprehensive, and clinically relevantinsights to enhance patient outcomes in the field of musculoskeletal health.\"\n hideButton\n bgImage={HeroBgImage}\n textOnLeft={false}\n />\n \n Our Team\n \n }\n buttonRounded={false}\n hideButton\n description=\"Our multidisciplinary team brings together a diverse array of experts. Each member plays apivotal role, contributing their unique knowledge and skills to the development of MAI-Motion.\"\n subdescription=\"Our orthopaedic surgeons provide a deep understanding of musculoskeletal conditions andthe clinical needs of patients and healthcare professionals. Our computer vision scientistsshape the advanced algorithms and artificial intelligence behind our innovative technology.Our biomechanics academics ensure the rigorous scientific underpinning of our approach,contributing a wealth of research and expertise in the field of human movement.\"\n imageSrc={OurTeam}\n textOnLeft\n showImageOverlay\n />\n \n Our Team}\n />\n \n Why We Developed MAI-Motion\n \n }\n hideButton\n description=\"We developed MAI-Motion to bridge a gap we saw in the field of musculoskeletal health: theneed for a holistic understanding of human movement. Traditional motion analysis toolssimply couldn’t provide the detailed, accurate insights we knew were possible.By integrating advanced 3D mesh technology with 3D volumetric MRI object detection,we’ve created a solution that delivers unprecedented insights into human movement and itsunderlying anatomical structures. Our technology is set to transform the diagnosis andtreatment of musculoskeletal conditions, aiding in everything from injury prevention tosurgical planning and rehabilitation.\"\n subdescription=\"We are excited about the possibilities MAI-Motion offers to healthcare professionals,researchers, athletes, and anyone seeking to understand and optimise their movement. Webelieve our technology has the potential to drive major advancements in the field ofmusculoskeletal health, and we’re proud to be leading the way.\"\n imageSrc={WhyWeDeveloped}\n textOnLeft\n />\n \n Supported by Innovate UK KTP Project\n \n }\n hideButton\n description=\"MAI-Motion is proud to have received support and funding from Innovate UK’s KnowledgeTransfer Partnership (KTP) project. This prestigious collaboration has allowed us to leveragecutting-edge research and expertise from leading academic institutions, including the University of Lincoln.\"\n subdescription=\"Through the KTP project, we have been able to translate scientificadvancements into practical solutions, enabling us to develop MAI-Motion and revolutionisethe field of musculoskeletal motion analysis. We are grateful for the support and recognitionfrom Innovate UK, which has been instrumental in our journey to create a clinically relevantand user-friendly technology.\"\n imageSrc=\"https://images.unsplash.com/3/doctype-hi-res.jpg?ixlib=rb-1.2.1&auto=format&fit=crop&w=768&q=80\"\n textOnLeft={false}\n />\n \n\n \n \n );\n};\n","import React, {useMemo, useState} from \"react\";\nimport {Container, ContentWithPaddingXl} from \"components/misc/Layouts\";\nimport tw from \"twin.macro\";\nimport styled from \"styled-components\";\nimport {css} from \"styled-components/macro\";\nimport Header from \"components/headers/light.js\";\nimport Footer from \"components/footers/FiveColumnWithInputForm.js\";\nimport {SectionHeading} from \"components/misc/Headings\";\nimport {PrimaryButton} from \"components/misc/Buttons\";\n\nimport bloglist from \"../blogList.json\"\nimport {StyledLayout} from \"../helpers/AnimationRevealPage\";\n\nconst HeadingRow = tw.div`flex`;\nconst Heading = tw(SectionHeading)`text-gray-900`;\nconst Posts = tw.div`mt-6 sm:-mr-8 flex flex-wrap`;\nconst PostContainer = styled.div`\n ${tw`mt-10 w-full sm:w-1/2 lg:w-1/3 sm:pr-8`}\n ${props =>\n props.featured &&\n css`\n ${tw`w-full!`}\n ${Post} {\n ${tw`sm:flex-row! h-full sm:pr-4`}\n }\n ${Image} {\n ${tw`sm:h-96 sm:min-h-full sm:w-1/2 lg:w-2/3 sm:rounded-t-none sm:rounded-l-lg`}\n }\n ${Info} {\n ${tw`sm:-mr-4 sm:pl-8 sm:flex-1 sm:rounded-none sm:rounded-r-lg sm:border-t-2 sm:border-l-0`}\n }\n ${Description} {\n ${tw`text-sm mt-3 leading-loose text-gray-600 font-medium`}\n }\n `}\n`;\nconst Post = tw.div`cursor-pointer flex flex-col bg-gray-100 rounded-lg border-2 rounded-lg h-full`;\nconst ImageOverlay = tw.div`w-full absolute right-0 bottom-0 h-full bg-primary-500 opacity-25`;\nconst Image = styled.div`\n ${props => css`background-image: url(\"${props.image}\");`}\n ${tw`h-64 w-full bg-cover bg-center relative rounded-t-md`}\n`;\nconst Info = tw.div`p-8`;\nconst Category = tw.div`uppercase text-primary-500 text-xs font-bold tracking-widest leading-loose after:content after:block after:border-b-2 after:border-primary-500 after:w-8`;\nconst CreationDate = tw.div`mt-4 uppercase text-gray-600 italic font-semibold text-xs`;\nconst Title = tw.div`mt-1 font-semibold mb-3 text-2xl text-gray-900 group-hover:text-primary-500 transition duration-300`;\nconst Description = tw.div``;\n\nconst ButtonContainer = tw.div`flex justify-center`;\nconst LoadMoreButton = tw(PrimaryButton)`mt-16 mx-auto`;\n\nexport default ({\n headingText = \"Blogs\",\n }) => {\n const [visible, setVisible] = useState(7);\n const onLoadMoreClick = () => {\n setVisible(v => v + 6);\n };\n\n const blogs = useMemo(() => bloglist.sort((a, b) => new Date(b.date) - new Date(a.date)), []);\n\n return (\n \n \n \n \n \n {headingText}\n \n \n {blogs.slice(0, visible).map((post, index) => (\n \n \n \n \n \n \n {post.category && {post.category}}\n {new Date(post.date).toLocaleDateString(\"en-GB\")}\n {post.title}\n {post.shortDescription && {post.shortDescription}}\n \n \n \n ))}\n \n {visible < blogs.length && (\n \n Load More\n \n )}\n \n \n \n \n );\n};","import React from \"react\";\nimport AnimationRevealPage from \"helpers/AnimationRevealPage.js\";\nimport {useParams} from \"react-router-dom\";\nimport {Container} from \"components/misc/Layouts\";\nimport tw from \"twin.macro\";\nimport Header from \"components/headers/light.js\";\nimport Footer from \"components/footers/FiveColumnWithInputForm.js\";\nimport {SectionHeading} from \"components/misc/Headings\";\n\nimport blogs from \"../blogList.json\"\nimport styled from \"styled-components\";\nimport {Helmet} from \"react-helmet\";\n\nconst ContentWithPaddingLg = tw.div`max-w-screen-lg mx-auto py-20 lg:py-24`;\nconst HeadingRow = tw.div`flex`;\nconst Heading = tw(SectionHeading)`text-gray-900`;\nconst Description = styled.div`\n${tw`mt-6 text-left text-sm md:text-base lg:text-lg font-medium leading-relaxed text-secondary-100`}\n p{\n font-size: 1rem;\n }\n li{\n font-size: 1rem;\n }\n h2{\n font-size: 1.25rem;\n }\n ol, ul{\n padding-top: 10px;\n }\n li span{\n font-size: 1.125rem;\n }\n`;\nconst CreationDate = tw.div`mt-4 uppercase text-right text-gray-600 italic font-semibold text-base`;\nconst ImageOverlay = tw.div`w-full absolute right-0 bottom-0 h-full bg-primary-500 opacity-25`;\n\nexport default () => {\n\n const {slug} = useParams();\n\n const post = blogs.find(a => a.slug === slug);\n\n if (!post) {\n return \n 404 Blog not found\"\n \n }\n return (\n <>\n \n {post.title}\n \n \n \n \n \n \n \n \n \n \n \n {post.title}\n \n \n Date Created: {new Date(post.date).toLocaleDateString(\"en-GB\")}\n \n
\n \n \n
\n \n \n \n \n \n \n \n \n\n );\n};","var _g;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport React from \"react\";\nconst SvgSvgDecoratorBlob1 = _ref => {\n let {\n svgRef,\n title,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 600,\n height: 600,\n viewBox: \"0 0 600 600\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n transform: \"translate(300,300)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M176.2,-106.9C208.7,-45.5,201.8,33.5,165.8,99.4C129.9,165.3,65,218.2,-9.2,223.5C-83.4,228.8,-166.9,186.7,-201.6,121.4C-236.4,56.2,-222.6,-32.2,-180.9,-98.9C-139.1,-165.7,-69.6,-210.8,1.2,-211.5C71.9,-212.2,143.8,-168.3,176.2,-106.9Z\",\n fill: \"#6415ff\"\n }))));\n};\nconst ForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(SvgSvgDecoratorBlob1, _extends({\n svgRef: ref\n}, props)));\nexport default __webpack_public_path__ + \"static/media/svg-decorator-blob-1.ec52da39.svg\";\nexport { ForwardRef as ReactComponent };","import React from \"react\";\nimport styled from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport Header from \"../headers/light.js\";\n\nimport {ReactComponent as SvgDecoratorBlob1} from \"images/svg-decorator-blob-1.svg\";\nimport HeroBgImage from \"images/hero-bg-img.png\";\nimport JeffGIF from \"images/jef-video.gif\";\nimport Innovate from \"images/innovate.png\";\nimport MskDoctors from \"images/msk-doctors.png\";\nimport RegenMan from \"images/regen-man.png\";\nimport UniversityOfLincoln from \"images/university-of-lincoln.png\";\nimport {PrimaryButton as PrimaryButtonBase} from \"../misc/Buttons\";\n\nconst Container = tw.div`relative`;\nconst TwoColumn = tw.div`flex flex-col lg:flex-row lg:items-center max-w-screen-xl mx-auto py-20 md:py-24`;\nconst LeftColumn = tw.div`relative lg:w-1/2 text-center max-w-lg mx-auto lg:max-w-none lg:text-left`;\nconst RightColumn = tw.div`relative mt-12 lg:mt-0 flex-1 flex flex-col justify-center lg:self-end`;\n\nconst Button = styled(PrimaryButtonBase)`\n ${tw`rounded-full uppercase tracking-wider py-4 text-sm hover:shadow-xl transform hocus:translate-x-px hocus:-translate-y-px focus:shadow-outline`}\n `;\nconst Heading = tw.h1`font-bold text-3xl md:text-3xl lg:text-4xl xl:text-5xl leading-tight`;\nconst Paragraph = tw.p`my-5 lg:my-8 text-base xl:text-lg`;\n\nconst IllustrationContainer = styled.div`${tw`flex justify-center lg:justify-end items-center relative`} \n.hero-img{\n${tw`min-w-0 w-full max-w-lg xl:max-w-3xl absolute opacity-10 left-1/2`}\n}\n.bg-img{\n${tw`min-w-0 w-full max-w-lg xl:max-w-3xl z-20`}\n}\n`;\n\n\n// Random Decorator Blobs (shapes that you see in background)\nconst DecoratorBlob1 = styled(SvgDecoratorBlob1)`\n ${tw`pointer-events-none opacity-5 absolute left-0 bottom-0 h-64 w-64 transform -translate-x-2/3 -z-10`}\n`;\n\nconst CustomersLogoStrip = styled.div`\n ${tw`mt-12 lg:mt-20`}\n p {\n ${tw`uppercase text-sm lg:text-sm tracking-wider font-semibold text-gray-600`}\n }\n .images{\n ${tw`flex items-center flex-wrap justify-center md:-ml-4 md:justify-start`}\n }\n img {\n ${tw`w-1/2 md:w-1/3 p-2 md:p-4 opacity-50`}\n filter: brightness(20%) contrast(200%)\n }\n`;\nconst HighlightedText = tw.span`text-primary-500`;\n\nexport default ({roundedHeaderButton}) => {\n return (\n <>\n \n \n \n \n \n Transforming Musculoskeletal Health\n \n \n Integrating Advanced 3D Mesh Technology with 3D Volumetric MRI for Unprecedented Insights\n into Human Motion.\n \n \n \n
Supported By
\n
\n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n","import React from \"react\";\nimport tw from \"twin.macro\";\nimport styled from \"styled-components\";\nimport { css } from \"styled-components/macro\"; //eslint-disable-line\nimport { SectionHeading, Subheading as SubheadingBase } from \"components/misc/Headings.js\";\nimport { PrimaryButton as PrimaryButtonBase } from \"components/misc/Buttons.js\";\nimport TeamIllustrationSrc from \"images/team-illustration-2.svg\";\nimport { ReactComponent as SvgDotPattern } from \"images/dot-pattern.svg\";\nimport { ReactComponent as RadioIcon } from \"feather-icons/dist/icons/radio.svg\";\nimport { ReactComponent as ServerIcon } from \"feather-icons/dist/icons/server.svg\";\n\nconst Container = tw.div`relative`;\nconst TwoColumn = tw.div`flex flex-col md:flex-row justify-between max-w-screen-xl mx-auto py-20 md:py-24 items-center`;\nconst Column = tw.div`w-full max-w-md mx-auto md:max-w-none md:mx-0`;\nconst ImageColumn = tw(Column)`md:w-6/12 flex-shrink-0 relative`;\nconst TextColumn = styled(Column)(props => [\n tw`md:w-6/12 mt-16 md:mt-0`,\n props.textOnLeft ? tw`md:mr-12 lg:mr-16 md:order-first` : tw`md:ml-12 lg:ml-16 md:order-last`\n]);\nconst ImageOverlay = tw.div`w-full absolute right-0 bottom-0 h-full bg-primary-500 opacity-40`;\n\nconst Image = styled.img(props => [\n props.imageRounded && tw`rounded`,\n props.imageBorder && tw`border`,\n props.imageShadow && tw`shadow`\n]);\n\nconst DecoratorBlob = tw(\n SvgDotPattern\n)`w-20 h-20 absolute right-0 bottom-0 transform translate-x-1/2 translate-y-1/2 fill-current text-primary-500 -z-10`;\n\nconst TextContent = tw.div`lg:py-8 text-center md:text-left`;\n\nconst Subheading = tw(SubheadingBase)`text-center md:text-left`;\nconst Heading = tw(\n SectionHeading\n)`mt-4 font-black text-left text-3xl sm:text-4xl lg:text-5xl text-center md:text-left leading-tight`;\nconst Description = tw.p`mt-8 text-center md:text-left text-sm md:text-base lg:text-lg font-medium leading-relaxed text-secondary-100`;\n\nconst Features = tw.div`mx-auto md:mx-0 flex flex-col lg:flex-row max-w-xs lg:max-w-none`;\nconst Feature = tw.div`mt-10 lg:mt-8 flex items-center md:items-start flex-col md:mr-8 last:mr-0`;\n\nconst FeatureHeadingContainer = tw.div`flex items-center`;\nconst FeatureIconContainer = styled.div`\n ${tw`mx-auto inline-block border border-primary-500 text-primary-500 text-center rounded p-2 flex-shrink-0`}\n ${props => [\n props.iconRoundedFull && tw`rounded-full`,\n props.iconFilled && tw`border-0 bg-primary-500 text-gray-100`\n ]}\n svg {\n ${tw`w-5 h-5`}\n }\n`;\nconst FeatureHeading = tw.div`ml-3 font-bold text-xl`;\n\nconst FeatureDescription = tw.div`mt-4 text-center md:text-left text-gray-600 leading-relaxed`;\n\nconst PrimaryButton = styled(PrimaryButtonBase)(props => [\n tw`mt-12 text-sm inline-block mx-auto md:mx-0`,\n props.buttonRounded && tw`rounded-full`\n]);\n\nexport default ({\n subheading = \"Our Expertise\",\n heading = (\n <>\n Designed & Developed by Professionals.\n \n ),\n description = \"\",\n primaryButtonText = \"Learn More\",\n primaryButtonUrl = \"https://timerse.com\",\n imageSrc = TeamIllustrationSrc,\n buttonRounded = true,\n imageRounded = true,\n imageBorder = false,\n imageShadow = false,\n showDecoratorBlob = false,\n textOnLeft = true,\n features = null,\n iconRoundedFull = true,\n iconFilled = true,\n iconContainerCss = null,\n showImageOverlay = false\n}) => {\n\n const defaultFeatures = [\n {\n Icon: RadioIcon,\n title: \"Professionalism\",\n description: \"We have the best professional marketing people across the globe just to work with you.\",\n iconContainerCss: tw`bg-blue-900 text-white`\n },\n {\n Icon: ServerIcon,\n title: \"Affordable\",\n description: \"We promise to offer you the best rate we can - at par with the industry standard.\",\n iconContainerCss: tw`bg-blue-900 text-white`\n }\n ];\n\n if (!features) features = defaultFeatures;\n\n return (\n \n \n \n {showImageOverlay ? : null}\n \n {showDecoratorBlob && }\n \n \n \n {subheading}\n {heading}\n {description}\n \n {features.map((feature, index) => (\n \n \n \n {}\n \n {feature.title}\n \n {feature.description}\n \n ))}\n \n\n \n {primaryButtonText}\n \n \n \n \n \n );\n};\n","var _g;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport React from \"react\";\nconst SvgSvgDecoratorBlob6 = _ref => {\n let {\n svgRef,\n title,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 600,\n height: 600,\n viewBox: \"0 0 600 600\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n transform: \"translate(300,300)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M82,-98.3C129.8,-57.7,208.2,-54.1,229.6,-26.6C251.1,1,215.6,52.5,172.9,74.9C130.2,97.2,80.3,90.4,37.8,107.5C-4.8,124.7,-40,165.7,-63.3,162.3C-86.5,158.8,-97.8,110.9,-109.3,72.2C-120.7,33.5,-132.2,4.1,-140.1,-37.4C-147.9,-79,-152.1,-132.6,-128.1,-177.3C-104.1,-222.1,-52.1,-258,-17.5,-237.2C17.1,-216.4,34.3,-138.9,82,-98.3Z\",\n fill: \"#FFB4BC\"\n }))));\n};\nconst ForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(SvgSvgDecoratorBlob6, _extends({\n svgRef: ref\n}, props)));\nexport default __webpack_public_path__ + \"static/media/svg-decorator-blob-6.5b0723ee.svg\";\nexport { ForwardRef as ReactComponent };","var _g;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport React from \"react\";\nconst SvgSvgDecoratorBlob7 = _ref => {\n let {\n svgRef,\n title,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n viewBox: \"0 0 600 600\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n transform: \"translate(300,300)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M103.9,-95.2C140.4,-67.4,179.7,-33.7,191.6,11.9C203.5,57.5,188,115,151.5,150.2C115,185.4,57.5,198.2,-5.4,203.6C-68.4,209,-136.7,207,-183.4,171.9C-230,136.7,-255,68.4,-233.5,21.6C-211.9,-25.2,-143.8,-50.4,-97.1,-78.3C-50.4,-106.1,-25.2,-136.6,4.2,-140.8C33.7,-145,67.4,-123.1,103.9,-95.2Z\",\n fill: \"currentColor\"\n }))));\n};\nconst ForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(SvgSvgDecoratorBlob7, _extends({\n svgRef: ref\n}, props)));\nexport default __webpack_public_path__ + \"static/media/svg-decorator-blob-7.c86fb21a.svg\";\nexport { ForwardRef as ReactComponent };","import React, {useState} from \"react\";\nimport tw from \"twin.macro\";\nimport styled from \"styled-components\";\nimport {css} from \"styled-components/macro\"; //eslint-disable-line\nimport {SectionHeading} from \"components/misc/Headings.js\";\nimport {SectionDescription} from \"components/misc/Typography.js\";\nimport {PrimaryButton as PrimaryButtonBase} from \"components/misc/Buttons.js\";\nimport {Container, ContentWithPaddingXl} from \"components/misc/Layouts.js\";\nimport {ReactComponent as SvgDecoratorBlob1} from \"images/svg-decorator-blob-6.svg\";\nimport {ReactComponent as SvgDecoratorBlob2} from \"images/svg-decorator-blob-7.svg\";\n\n\nconst PlanDurationSwitcher = tw.div`block w-full max-w-xs sm:inline-block sm:w-auto border-2 rounded-full px-1 py-1 mt-8`;\nconst SwitchButton = styled.button`\n ${tw`w-1/2 sm:w-32 px-4 sm:px-8 py-3 rounded-full focus:outline-none text-sm font-bold text-gray-700 transition duration-300`}\n ${props => props.active && tw`bg-primary-500 text-gray-100`}\n`;\n\nconst HeaderContainer = tw.div`mt-10 w-full flex flex-col items-center`;\nconst Heading = tw(SectionHeading)`w-full`;\nconst Description = tw(SectionDescription)`w-full text-center`;\n\nconst PlansContainer = tw.div`flex justify-between flex-col lg:flex-row items-center lg:items-stretch relative`;\nconst Plan = styled.div`\n ${tw`w-full max-w-sm mt-16 lg:mr-8 lg:last:mr-0 text-center px-8 rounded-lg shadow relative pt-2 text-gray-900 bg-white flex flex-col`}\n .planHighlight {\n ${tw`rounded-t-lg absolute top-0 inset-x-0 h-2`}\n }\n\n ${props =>\n props.featured &&\n css`\n background: rgb(100,21,255);\n background: linear-gradient(135deg, #C7942D 0%, rgba(128,64,252,1) 100%);\nbackground: rgb(85,60,154);\nbackground: linear-gradient(135deg, rgba(85,60,154,1) 0%, rgba(128,90,213,1) 100%);\nbackground: rgb(76,81,191);\nbackground: linear-gradient(135deg, #C7942D 0%, #DC9F5A 100%);\n ${tw`bg-primary-500 text-gray-100`}\n .planHighlight {\n ${tw`hidden`}\n }\n .duration {\n ${tw`text-gray-200!`}\n }\n ${PlanFeatures} {\n ${tw`border-indigo-500`}\n }\n .feature:not(.mainFeature) {\n ${tw`text-gray-300!`}\n }\n ${BuyNowButton} {\n ${tw`bg-gray-100 text-primary-500 hocus:bg-gray-300 hocus:text-primary-800`}\n `}\n`;\n\nconst PlanHeader = styled.div`\n ${tw`flex flex-col uppercase leading-relaxed py-8`}\n .name {\n ${tw`font-bold text-xl`}\n }\n .price {\n ${tw`font-bold text-4xl sm:text-5xl my-1`}\n }\n .duration {\n ${tw`text-gray-500 font-bold tracking-widest`}\n }\n`;\nconst PlanFeatures = styled.div`\n ${tw`flex flex-col -mx-8 px-8 py-8 flex-1`}\n .feature {\n ${tw`mt-5 first:mt-0 font-medium`}\n &:not(.mainFeature) {\n ${tw`text-gray-600`}\n }\n }\n\n`;\n\nconst PlanAction = tw.div`px-4 sm:px-8 xl:px-16 py-8`;\nconst BuyNowButton = styled(PrimaryButtonBase)`\n ${tw`rounded-full uppercase tracking-wider py-4 w-full text-sm hover:shadow-xl transform hocus:translate-x-px hocus:-translate-y-px focus:shadow-outline`}\n`;\n\nconst DecoratorBlob1 = styled(SvgDecoratorBlob1)`\n ${tw`pointer-events-none -z-20 absolute left-0 bottom-0 h-64 w-64 opacity-25 transform -translate-x-2/3 -translate-y-1/2`}\n`;\nconst DecoratorBlob2 = styled(SvgDecoratorBlob2)`\n ${tw`pointer-events-none -z-20 absolute right-0 top-0 h-64 w-64 opacity-25 transform translate-x-2/3 translate-y-1/2 fill-current text-teal-300`}\n`;\n\nexport default ({\n heading = \"Flexible Plans\",\n description = \"\",\n plans = null,\n primaryButtonText = \"Buy Now\",\n planDurations = [\n {\n text: \"Month\",\n switcherText: \"Monthly\",\n },\n {\n text: \"Year\",\n switcherText: \"Yearly\",\n }\n ]\n}) => {\n const defaultPlans = [\n {\n name: \"Standard Plan\",\n durationPrices: [\"£9.99\",\"£99.99\"],\n plan: \"STANDARD\",\n features: [\n \"MAI - Full control\",\n \"Dashboard\",\n \"PROMS - knee , shoulder, hip\",\n \"Can access historical data\",\n \"Max 20/mo Detailed Reports\",\n ],\n },\n {\n name: \"Standard +\",\n durationPrices: [\"£9.99\",\"£99.99\"],\n plan: \"STANDARD\",\n features: [\n \"MAI - Full control\",\n \"Dashboard\",\n \"PROMS(Mandatory) - knee , shoulder, hip\",\n \"Can access historical data\",\n \"Dynamometer\",\n \"Unlimited Detailed Reports\"\n ],\n featured: true\n },\n {\n name: \"Advanced Plan\",\n plan: \"ADVANCED\",\n durationPrices: [\"£159.99\",\"£1599.99\"],\n features: [\n \"MAI - advanced comparison function\",\n \"Dashboard\",\n \"PROMS - knee , shoulder, hip\",\n \"Can access historical data\",\n \"Digital Body Bank\",\n \"Dynamometer\",\n \"Unlimited Detailed Reports\"\n ]\n }\n ];\n\n if (!plans) plans = defaultPlans;\n\n const [activeDurationIndex, setActiveDurationIndex] = useState(0);\n\n return (\n \n \n \n {heading}\n {description && {description}}\n \n {planDurations.map((planDuration, index) => (\n setActiveDurationIndex(index)}>{planDuration.switcherText}\n ))}\n \n \n \n {plans.map((plan, index) => (\n \n \n \n {plan.durationPrices[activeDurationIndex]}\n / \n {planDurations[activeDurationIndex].text}\n \n {plan.name}\n \n \n {plan.features.map((feature, index) => (\n \n {feature}\n \n ))}\n \n \n window.open(plan.plan === \"BASIC\" ? `https://app.maimotion.com/register` :\n `https://app.maimotion.com/buy-plan?plan=${plan.plan}&periodIndex=${activeDurationIndex}`)}\n >\n {plan.plan === \"BASIC\" ? \"Register Now\" : \"Buy Now\"}\n \n \n \n ))}\n \n \n \n \n \n );\n};\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport React from \"react\";\nconst SvgStarIcon = _ref => {\n let {\n svgRef,\n title,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n viewBox: \"0 0 1792 1792\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5T1385 1619q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5T365 1569q0-6 2-20l86-500L89 695q-25-27-25-48 0-37 56-46l502-73L847 73q19-41 49-41t49 41l225 455 502 73q56 9 56 46z\"\n })));\n};\nconst ForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(SvgStarIcon, _extends({\n svgRef: ref\n}, props)));\nexport default __webpack_public_path__ + \"static/media/star-icon.5d0ff9bc.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport React from \"react\";\nconst SvgArrowLeft3Icon = _ref => {\n let {\n svgRef,\n title,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n fill: \"none\",\n stroke: \"currentColor\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n strokeWidth: 2,\n viewBox: \"0 0 24 24\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10 19l-7-7m0 0l7-7m-7 7h18\"\n })));\n};\nconst ForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(SvgArrowLeft3Icon, _extends({\n svgRef: ref\n}, props)));\nexport default __webpack_public_path__ + \"static/media/arrow-left-3-icon.41406a77.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport React from \"react\";\nconst SvgArrowRight3Icon = _ref => {\n let {\n svgRef,\n title,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n fill: \"none\",\n stroke: \"currentColor\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n strokeWidth: 2,\n viewBox: \"0 0 24 24\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M14 5l7 7m0 0l-7 7m7-7H3\"\n })));\n};\nconst ForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(SvgArrowRight3Icon, _extends({\n svgRef: ref\n}, props)));\nexport default __webpack_public_path__ + \"static/media/arrow-right-3-icon.e5cd3c02.svg\";\nexport { ForwardRef as ReactComponent };","import \"slick-carousel/slick/slick.css\";\nimport React, {useState} from \"react\";\nimport Slider from \"react-slick\";\nimport tw from \"twin.macro\";\nimport styled from \"styled-components\";\nimport {SectionHeading, Subheading as SubheadingBase} from \"components/misc/Headings.js\";\nimport {Container, ContentWithPaddingXl} from \"components/misc/Layouts.js\";\nimport loveIllustrationImageSrc from \"images/love-illustration.svg\";\nimport {ReactComponent as StarIconBase} from \"images/star-icon.svg\";\nimport {ReactComponent as ArrowLeftIcon} from \"images/arrow-left-3-icon.svg\";\nimport {ReactComponent as ArrowRightIcon} from \"images/arrow-right-3-icon.svg\";\n\nconst Row = tw.div`flex flex-col md:flex-row justify-between items-center`;\nconst Column = tw.div`w-full max-w-md mx-auto md:max-w-none md:mx-0`;\nconst ImageColumn = tw(Column)`md:w-5/12 xl:w-6/12 flex-shrink-0 relative`;\nconst TextColumn = styled(Column)(props => [\n tw`md:w-7/12 xl:w-6/12 mt-16 md:mt-0`,\n props.textOnLeft ? tw`md:pr-12 lg:pr-16 md:order-first` : tw`md:pl-12 lg:pl-16 md:order-last`\n]);\n\nconst Image = styled.img(props => [\n props.imageRounded && tw`rounded`,\n props.imageBorder && tw`border`,\n props.imageShadow && tw`shadow`\n]);\n\nconst Subheading = tw(SubheadingBase)`text-center md:text-left`;\nconst Heading = tw(\n SectionHeading\n)`mt-4 font-black text-left text-3xl sm:text-4xl lg:text-5xl text-center md:text-left leading-tight`;\nconst Description = tw.p`mt-6 text-center md:text-left text-sm md:text-base lg:text-lg font-medium leading-relaxed text-secondary-100`;\n\nconst TestimonialSlider = styled(Slider)`\n ${tw`w-full mt-10 text-center md:text-left`}\n .slick-track {\n ${tw`flex`}\n }\n .slick-slide {\n ${tw`h-auto flex justify-center mb-1`}\n }\n`;\n\nconst Testimonial = tw.div`outline-none h-full flex! flex-col`;\nconst StarsContainer = styled.div``;\nconst StarIcon = tw(StarIconBase)`inline-block w-5 h-5 text-orange-400 fill-current mr-1 last:mr-0`;\nconst TestimonialHeading = tw.div`mt-4 text-xl font-bold`;\nconst Quote = tw.blockquote`mt-4 mb-8 sm:mb-10 leading-relaxed font-medium text-gray-700`;\n\nconst CustomerInfoAndControlsContainer = tw.div`mt-auto flex justify-between items-center flex-col sm:flex-row`;\n\nconst CustomerInfo = tw.div`flex flex-col sm:flex-row items-center justify-center lg:justify-start`;\nconst CustomerProfilePicture = tw.img`rounded-full w-16 h-16 sm:w-20 sm:h-20`;\nconst CustomerTextInfo = tw.div`text-center md:text-left sm:ml-6 mt-2 sm:mt-0`;\nconst CustomerName = tw.h5`font-bold text-xl`;\n\nconst Controls = styled.div`\n ${tw`flex mt-8 sm:mt-0`}\n .divider {\n ${tw`my-3 border-r`}\n }\n`;\nconst ControlButton = styled.button`\n ${tw`mx-3 p-4 rounded-full transition duration-300 bg-gray-200 hover:bg-gray-300 text-primary-500 hover:text-primary-700 focus:outline-none focus:shadow-outline`}\n svg {\n ${tw`w-4 h-4 stroke-3`}\n }\n`;\n\nexport default ({\n imageSrc = loveIllustrationImageSrc,\n imageRounded = true,\n imageBorder = false,\n imageShadow = false,\n subheading = \"Testimonials\",\n heading = \"Our Clients Love Us.\",\n description = \"Explore the Reasons Behind Our Clients' Satisfaction. Hear Their Stories. Learn about the experiences of our clients and why they value our services.\",\n textOnLeft = false,\n testimonials = [\n {\n stars: 5,\n profileImageSrc:\n \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3.25&w=512&h=512&q=80\",\n heading: \"Amazing User Experience\",\n quote:\n \"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.\",\n customerName: \"Charlotte Hale\",\n },\n {\n stars: 5,\n profileImageSrc:\n \"https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=512&h=512&q=80\",\n heading: \"Love the Developer Experience and Design Principles !\",\n quote:\n \"Sinor Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.\",\n customerName: \"Adam Cuppy\",\n }\n ]\n}) => {\n const [sliderRef, setSliderRef] = useState(null);\n\n return (\n \n \n \n \n \n \n \n {subheading}\n {heading}\n {description}\n \n {testimonials.map((testimonial, index) => (\n \n \n {Array.from({ length: testimonial.stars }).map((_,indexIcon) => (\n \n ))}\n \n {testimonial.heading}\n {testimonial.quote}\n \n \n \n \n {testimonial.customerName}\n \n \n \n \n \n \n \n \n \n \n \n \n \n ))}\n \n \n \n \n \n );\n};\n","var _g;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport React from \"react\";\nconst SvgSvgDecoratorBlob8 = _ref => {\n let {\n svgRef,\n title,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n viewBox: \"0 0 600 600\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n transform: \"translate(300,300)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M134.6,-126.1C171.1,-98.1,195,-49,182.7,-12.4C170.3,24.3,121.6,48.6,85.1,84.6C48.6,120.6,24.3,168.3,-21.9,190.2C-68.1,212.1,-136.2,208.2,-181.1,172.2C-225.9,136.2,-247.5,68.1,-229.7,17.8C-211.9,-32.5,-154.7,-65.1,-109.9,-93.1C-65.1,-121.1,-32.5,-144.5,8.2,-152.8C49,-161,98.1,-154.1,134.6,-126.1Z\",\n fill: \"currentColor\"\n }))));\n};\nconst ForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(SvgSvgDecoratorBlob8, _extends({\n svgRef: ref\n}, props)));\nexport default __webpack_public_path__ + \"static/media/svg-decorator-blob-8.19df9c1d.svg\";\nexport { ForwardRef as ReactComponent };","import React, { useState } from \"react\";\n\nimport styled from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { css } from \"styled-components/macro\"; //eslint-disable-line\nimport { SectionHeading, Subheading as SubheadingBase } from \"components/misc/Headings.js\";\nimport { SectionDescription } from \"components/misc/Typography.js\";\nimport { Container, ContentWithPaddingXl } from \"components/misc/Layouts.js\";\nimport { ReactComponent as ChevronDownIcon } from \"feather-icons/dist/icons/chevron-down.svg\";\nimport { ReactComponent as SvgDecoratorBlob1 } from \"images/svg-decorator-blob-7.svg\";\nimport { ReactComponent as SvgDecoratorBlob2 } from \"images/svg-decorator-blob-8.svg\";\n\nconst Subheading = tw(SubheadingBase)`mb-4 text-center`;\nconst Heading = tw(SectionHeading)`w-full`;\nconst Description = tw(SectionDescription)`w-full text-center`;\n\nconst Column = tw.div`flex flex-col items-center`;\nconst HeaderContent = tw.div``;\n\nconst FAQSContainer = tw.dl`mt-12 max-w-4xl relative`;\nconst FAQ = tw.div`cursor-pointer select-none mt-5 px-8 sm:px-10 py-5 sm:py-4 rounded-lg text-gray-800 hover:text-gray-900 bg-gray-200 hover:bg-gray-300 transition duration-300`;\nconst Question = tw.dt`flex justify-between items-center`;\nconst QuestionText = tw.span`text-lg lg:text-xl font-semibold`;\nconst QuestionToggleIcon = styled.span`\n ${tw`ml-2 transition duration-300`}\n svg {\n ${tw`w-6 h-6`}\n }\n`;\nconst Answer = tw.dd`pointer-events-none text-sm sm:text-base leading-relaxed`;\n\nconst DecoratorBlob1 = styled(SvgDecoratorBlob1)`\n ${tw`pointer-events-none -z-20 absolute right-0 top-0 h-56 w-56 opacity-15 transform translate-x-2/3 -translate-y-12 text-teal-400`}\n`;\nconst DecoratorBlob2 = styled(SvgDecoratorBlob2)`\n ${tw`pointer-events-none -z-20 absolute left-0 bottom-0 h-64 w-64 opacity-15 transform -translate-x-2/3 text-primary-500`}\n`;\nconst HighlightedText = tw.span`text-primary-500`;\n\nexport default ({\n subheading = FAQS,\n heading =\n <>\n You have Questions ?\n \n ,\n description = \"And we have got answers to all of them.\",\n faqs = [\n {\n question: \"What is the current status of MAI-Motion?\",\n answer:\n \"MAI-Motion is currently in the research stage and is not yet available for commercial use. Our dedicated team of researchers and developers is actively working on refining and enhancing the technology to ensure its accuracy, reliability, and usability.\"\n },\n {\n question: \"When can we expect MAI-Motion to be released for commercial use?\",\n answer: \"We are committed to delivering a high-quality and effective product. While we do not have an exact release date at this time, we are making significant progress in the development of MAI-Motion. We anticipate that it will be available for commercial use in the near future. Please stay tuned for updates and announcements.\"\n },\n {\n question: \"Can I participate in the research or beta testing of MAI-Motion?\",\n answer: \"We appreciate your interest in contributing to the development of MAI-Motion. At this time, we are not actively seeking external participation in the research or beta testing phase. However, we value collaboration and would be happy to discuss potential partnerships or research opportunities. Please reach out to us with your inquiries.\"\n },\n {\n question: \"Will there be a notification or waiting list for the release of MAI-Motion?\",\n answer: \"Yes, we understand the anticipation surrounding the release of MAI-Motion. To ensure that you receive updates and notifications about its availability, we encourage you to subscribe to our mailing list. By doing so, you will be among the first to be notified when MAI-Motion is released for commercial use.\"\n },\n {\n question: \"How can I stay informed about the progress of MAI-Motion?\",\n answer: \"To stay informed about the latest developments and updates regarding MAI-Motion, we recommend visiting our website regularly. Additionally, subscribing to our newsletter and following our social media channels will provide you with timely information and insights into the advancements of MAI-Motion.\"\n },\n {\n question: \"Are there any plans for future expansions or additional modules within MAI-Motion?\",\n answer: \"As part of our commitment to advancing musculoskeletal motion analysis, we are continuously exploring opportunities for expansion and the development of additional modules within the MAI-Motion framework. While specific plans are yet to be announced, we remain dedicated to expanding the capabilities and applications of this innovative technology.\",\n answer1: \"If you have any further questions or would like to inquire about research collaborations or partnerships, please don’t hesitate to contact us. We appreciate your interest in MAI-Motion and look forward to sharing more updates with you as we progress towards its commercial release.\"\n },\n {\n question: \"How does MAI-Motion work?\",\n answer: \"MAI-Motion utilises computer vision, deep learning algorithms, and advanced imaging techniques to capture and analyse motion data. It creates a detailed 3D mesh of the joints, integrates it with 3D volumetric MRI imaging, and applies AI-driven decision support to enhance diagnosis and treatment planning.\"\n },\n {\n question: \"How is MAI-Motion used in clinical settings?\",\n answer: \"MAI-Motion is versatile and can be used in various clinical settings, including physiotherapy, sports medicine, orthopaedics, and occupational health. It aids in the assessment of musculoskeletal disorders, monitoring progress during rehabilitation, optimising sports performance, and providing valuable data for medical legal reporting.\"\n },\n {\n question: \"Is MAI-Motion suitable for all age groups and conditions?\",\n answer: \"Yes, MAI-Motion is designed to benefit individuals of all age groups and can be used for a wide range of musculoskeletal conditions. From paediatric patients to seniors, MAI-Motion offers personalised solutions for accurate assessment and effective treatment.\"\n },\n {\n question: \"Is MAI-Motion user-friendly?\",\n answer: \"Yes, MAI-Motion is designed with user-friendliness in mind. The technology is intuitive, and the software interface is easy to navigate. Healthcare professionals can quickly capture and analyse motion data, providing efficient and effective care to their patients.\"\n },\n {\n question: \"Is MAI-Motion supported by scientific evidence?\",\n answer: \"Yes, MAI-Motion is backed by extensive research and development. The technology has undergone rigorous testing and validation to ensure its accuracy and reliability. Published studies and case reports demonstrate the effectiveness of MAI-Motion in improving musculoskeletal assessment and patient outcomes.\"\n },\n ]\n}) => {\n const [activeQuestionIndex, setActiveQuestionIndex] = useState(null);\n\n const toggleQuestion = questionIndex => {\n if (activeQuestionIndex === questionIndex) setActiveQuestionIndex(null);\n else setActiveQuestionIndex(questionIndex);\n };\n\n return (\n \n \n \n \n {subheading && {subheading}}\n {heading}\n {description && {description}}\n \n \n {faqs.map((faq, index) => (\n {\n toggleQuestion(index);\n }}\n className=\"group\"\n >\n \n {faq.question}\n \n \n \n \n \n {faq.answer}\n \n {faq.answer1 ? \n {faq.answer1}\n : null}\n \n ))}\n \n \n \n \n \n \n );\n};\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport React from \"react\";\nconst SvgAnywhereIcon = _ref => {\n let {\n svgRef,\n title,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 92,\n height: 92,\n viewBox: \"0 0 92 92\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M84.505 50.4083C75.2514 41.1625 60.2798 41.0329 50.857 50.0196L41.4849 40.6554C50.4792 31.2462 50.3495 16.2872 41.0958 7.03578C31.7068 -2.34526 16.4307 -2.34526 7.04173 7.03578C-2.34724 16.4168 -2.34724 31.68 7.04173 41.0611C11.739 45.7544 17.9025 48.0983 24.0716 48.0983C30.2407 48.0983 36.0489 45.8784 40.6898 41.4499L50.0618 50.814C41.0676 60.2232 41.1973 75.1822 50.4509 84.4336C55.1483 89.127 61.3117 91.4708 67.4808 91.4708C73.6499 91.4708 79.8134 89.127 84.5107 84.4336C93.8997 75.0526 93.8997 59.7894 84.5107 50.4083H84.505ZM24.0716 2.24666C29.9023 2.24666 35.3835 4.51727 39.5056 8.63591C47.8796 17.0028 48.0093 30.5363 39.8947 39.0666L9.04922 8.24715C13.1206 4.37641 18.4326 2.24666 24.0716 2.24666ZM8.63759 39.4722C4.51546 35.3536 2.24292 29.8771 2.24292 24.0513C2.24292 18.2254 4.37448 13.1095 8.24849 9.04158L39.094 39.861C30.5565 47.9687 17.0115 47.8391 8.63759 39.4722ZM52.0468 82.8448C43.6728 74.4779 43.5488 60.9444 51.6577 52.4141L82.5032 83.2335C73.9657 91.3412 60.4207 91.2116 52.0468 82.8448ZM83.2983 82.4391L52.4528 51.6197C56.6539 47.6306 62.0617 45.6305 67.4752 45.6305C72.8886 45.6305 78.6517 47.7546 82.9092 52.0085C91.2831 60.3753 91.4072 73.9088 83.2983 82.4391Z\",\n fill: \"white\"\n })));\n};\nconst ForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(SvgAnywhereIcon, _extends({\n svgRef: ref\n}, props)));\nexport default __webpack_public_path__ + \"static/media/anywhereIcon.7538dabf.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport React from \"react\";\nconst SvgKinetic = _ref => {\n let {\n svgRef,\n title,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 103,\n height: 102,\n viewBox: \"0 0 103 102\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M102.066 49.8632H79.7584C79.1776 34.9155 67.1213 22.8695 52.161 22.2891V0L0 52.1169H22.308C22.8888 67.0646 34.945 79.1107 49.9054 79.691V101.98L102.066 49.8632ZM52.161 96.5431V52.1169H96.6247L52.161 96.5431ZM78.6306 49.8632H52.161V23.416C66.501 23.9963 78.0554 35.5409 78.6306 49.8632ZM49.9054 5.43707V49.8632H5.44166L49.9054 5.43707ZM23.4358 52.1169H49.9054V78.5641C35.5653 77.9838 24.011 66.4392 23.4358 52.1169Z\",\n fill: \"white\"\n })));\n};\nconst ForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(SvgKinetic, _extends({\n svgRef: ref\n}, props)));\nexport default __webpack_public_path__ + \"static/media/kinetic.3dd9f68a.svg\";\nexport { ForwardRef as ReactComponent };","import React from \"react\";\nimport tw from \"twin.macro\";\nimport styled from \"styled-components\";\nimport { Container, ContentWithPaddingXl } from \"components/misc/Layouts.js\";\nimport {\n SectionHeading,\n Subheading as SubheadingBase,\n} from \"components/misc/Headings\";\n\nconst HeadingContainer = tw.div``;\nconst Heading = tw(SectionHeading)``;\nconst Subheading = tw(SubheadingBase)`text-center mb-3`;\nconst Description = tw.p`mt-4 text-sm md:text-base lg:text-lg font-medium leading-relaxed text-secondary-100 max-w-xl text-center`;\n\nconst Cards = tw.div`mt-16 flex flex-wrap flex-row justify-center sm:max-w-2xl lg:max-w-5xl mx-auto`;\nconst Card = tw.div`p-8 min-h-full bg-gray-200`;\nconst CardContainer = tw.div`w-full sm:w-1/2 lg:w-1/2 flex flex-col min-h-full p-2`;\nconst CardContent = styled.div`\n ${tw`flex flex-col mt-6`}\n .imageContainer {\n ${tw`text-center rounded-full pb-4`}\n img {\n ${tw`w-16 mx-auto`}\n }\n }\n .name {\n ${tw`mt-1 text-xl font-medium text-gray-900`}\n }\n .description {\n ${tw`mt-2 text-base font-normal text-gray-700`}\n }\n`;\nexport default ({\n heading = \"Meet These Fine Folks\",\n subheading = \"\",\n description = \"\",\n cards = [],\n}) => {\n return (\n \n \n \n {subheading && {subheading}}\n {heading && {heading}}\n {description && {description}}\n \n \n {cards.map((card, index) => (\n \n \n \n {card.subtitle ? {card.subtitle} : null}\n {card.image ? \n \n : null}\n {card.title}\n {card.description}\n \n \n \n ))}\n \n \n \n );\n};\n","import React from \"react\";\nimport tw from \"twin.macro\";\nimport AnimationRevealPage from \"helpers/AnimationRevealPage.js\";\nimport Hero from \"components/hero/TwoColumnWithInput.js\";\nimport MainFeature from \"components/features/TwoColWithButton.js\";\nimport MainFeature2 from \"components/features/TwoColWithTwoHorizontalFeaturesAndButton.js\";\nimport Pricing from \"components/pricing/TwoPlansWithDurationSwitcher.js\";\nimport Testimonial from \"components/testimonials/TwoColumnWithImageAndRating.js\";\nimport FAQ from \"components/faqs/SingleCol.js\";\nimport GetStarted from \"components/cta/GetStarted\";\nimport heroScreenshotImageSrc from \"images/landing-image-1.png\";\nimport teamImageSrc from \"images/team-illustration-2.png\";\nimport motionLifeImageSrc from \"images/motion-life.gif\";\nimport radarChartSrc from \"images/radar-chart.png\";\nimport C1 from \"images/pillars/c1.png\";\nimport C2 from \"images/pillars/c2.png\";\nimport C3 from \"images/pillars/c3.png\";\nimport C4 from \"images/pillars/c4.png\";\nimport HeroBgImage from \"images/hero-bg-img.png\";\n\n\nimport {ReactComponent as AnywhereIcon} from \"images/anywhereIcon.svg\";\nimport {ReactComponent as KineticIcon} from \"images/kinetic.svg\";\nimport Footer from \"./components/footers/FiveColumnWithInputForm\";\nimport TwoColGrid from \"./components/features/TwoColGrid\";\n\nconst Subheading = tw.span`uppercase tracking-widest font-bold text-primary-500`;\nconst HighlightedText = tw.span`text-primary-500`;\n\n\nexport default () => {\n return (\n \n \n \n Quality Work}\n imageSrc={motionLifeImageSrc}\n imageBorder={true}\n imageDecoratorBlob={true}\n description= \"At MAI-Motion, we’ve harnessed the power of advanced 3D mesh technology and integrated it with 3D volumetric MRI object detection. Our tool is designed to provide comprehensive, nuanced, and accurate insights into human motion, underlying anatomical structures, and muscle coordination.\"\n subdescription= \"We’re shifting the paradigm of musculoskeletal health by providing a holistic view, combining the external dynamics of movement with the internal mechanics of the musculoskeletal system.\"\n hideButton\n textOnLeft={false}\n />\n VALUES}\n heading={\n <>\n Our Unique Approach\n \n }\n description=\"At MAI-Motion, we’re not just improving upon existing motion analysis systems; we’re pioneering a whole new approach. We integrate 3D motion mesh data with 3D volumetricMRI object detection for human anatomy, offering a holistic view of musculoskeletal health.This integration is an industry first, pushing the boundaries of what’s possible in motion analysis and MRI.\"\n imageSrc={radarChartSrc}\n showDecoratorBlob={false}\n primaryButtonUrl=\"https://app.maimotion.com\"\n primaryButtonText=\"GET STARTED\"\n features={[\n {\n Icon: AnywhereIcon,\n title: \"Available Anywhere\",\n description: \"We promise to offer you the best rate we can - at par with the industry standard.\",\n iconContainerCss: tw`bg-blue-900`\n },\n {\n Icon: KineticIcon,\n title: \"Kinetic Analysis\",\n description: \"We assure you that our templates are designed and created by professional designers.\",\n iconContainerCss: tw`bg-blue-900`\n }\n ]}\n />\n\n Benefits}\n imageSrc={heroScreenshotImageSrc}\n imageBorder={true}\n imageDecoratorBlob={true}\n heading={ <>\n The Benefits\n }\n description= \"With MAI-Motion, healthcare providers can gain a deep understanding of each patient’s unique movement patterns, joint dynamics, and muscle coordination. Our solution enables more accurate diagnoses, more effective treatment plans, and better patient outcomes.\"\n subdescription= \"MAI-Motion gives clinicians, researchers, and patients a deep understanding of motion health like never before. Our tool helps clinicians diagnose and manage musculoskeletal conditions more effectively. Researchers can glean new insights into human movement,while patients gain access to more accurate and personalised treatment.\"\n hideButton\n textOnLeft={false}\n />\n \n Reasonable & Flexible Plans.\n \n }\n />\n Experts}\n imageSrc={teamImageSrc}\n imageBorder={true}\n imageDecoratorBlob={true}\n heading={ <>\n Designed by Leading Experts\n }\n description= \"Our technology was designed in collaboration between top orthopaedic surgeons, leading professors in computer vision, and renowned academics in bio mechanics. This blend of expertise ensures that MAI-Motion is medically relevant, technologically advanced, and scientifically robust.\"\n hideButton\n bgImage={HeroBgImage}\n />\n\n Testimonials}\n heading={\n <>\n Our Clients Love Us.\n \n }\n testimonials={[\n {\n \"stars\": 5,\n \"profileImageSrc\": \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3.25&w=512&h=512&q=80\",\n \"heading\": \"Transformative Experience with MAI Motion!\",\n \"quote\": \"Using the MAI Motion App has been truly life-changing. The integration of advanced 3D mesh technology with 3D volumetric MRI provided me with unprecedented insights into my hip motion. The experience with the MAI Motion App throughout my recovery was phenomenal, and the care provided was exceptional. I can't thank the MAI Motion team enough for their outstanding support and expertise.\",\n \"customerName\": \"Charlotte Hale\",\n },\n {\n \"stars\": 5,\n \"profileImageSrc\": \"https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=512&h=512&q=80\",\n \"heading\": \"Exceptional Recovery with MAI Motion!\",\n \"quote\": \"The MAI Motion App has transformed my recovery journey. By integrating advanced 3D mesh technology with 3D volumetric MRI, it gave me incredible insights into my knee motion. The entire experience with the app was seamless, and the care I received was outstanding. I'm incredibly grateful to the MAI Motion team for their exceptional support and innovative approach.\",\n \"customerName\": \"Adam Cuppy\",\n }\n ]}\n />\n \n \n \n \n );\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { css } from \"styled-components/macro\"; //eslint-disable-line\nimport { ContentWithPaddingXl, Container } from \"components/misc/Layouts.js\";\nimport { SectionHeading as Heading, Subheading as SubheadingBase } from \"components/misc/Headings.js\";\nimport { ReactComponent as SvgDecoratorBlob1 } from \"images/svg-decorator-blob-7.svg\";\nimport { ReactComponent as SvgDecoratorBlob2 } from \"images/svg-decorator-blob-8.svg\";\n\nconst Subheading = tw(SubheadingBase)`text-center`;\nconst Testimonials = tw.div`flex flex-col lg:flex-row items-center lg:items-stretch`;\nconst TestimonialContainer = tw.div`mt-16 lg:w-1/3`;\nconst Testimonial = tw.div`px-4 text-center max-w-xs mx-auto flex flex-col items-center`;\nconst Image = tw.img`w-20 h-20 rounded-full`;\nconst Quote = tw.blockquote`mt-5 text-gray-600 font-medium leading-loose`;\nconst CustomerName = tw.p`mt-5 text-gray-900 font-semibold uppercase text-sm tracking-wide`;\n\nconst DecoratorBlob1 = styled(SvgDecoratorBlob1)`\n ${tw`pointer-events-none -z-20 absolute left-0 top-0 h-56 w-56 opacity-15 transform -translate-x-2/3 -translate-y-12 text-teal-400`}\n`;\nconst DecoratorBlob2 = styled(SvgDecoratorBlob2)`\n ${tw`pointer-events-none -z-20 absolute right-0 bottom-0 h-64 w-64 opacity-15 transform translate-x-2/3 text-yellow-500`}\n`;\n\nexport default ({\n subheading = \"Testimonials\",\n heading = \"Customer's Review\",\n testimonials = [\n {\n imageSrc:\n \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3.25&w=512&h=512&q=80\",\n quote:\n \"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.\",\n customerName: \"Charlotte Hale\"\n },\n {\n imageSrc:\n \"https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=512&h=512&q=80\",\n quote:\n \"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.\",\n customerName: \"Adam Cuppy\"\n },\n {\n imageSrc:\n \"https://images.unsplash.com/photo-1580852300654-03c803a14e24?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4.25&w=512&h=512&q=80\",\n quote:\n \"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.\",\n customerName: \"Steven Marcetti\"\n }\n ]\n}) => {\n return (\n \n \n {subheading && {subheading}}\n {heading}\n \n {testimonials.map((testimonial, index) => (\n \n \n \n \"{testimonial.quote}\"\n - {testimonial.customerName}\n \n \n ))}\n \n \n\n \n \n \n );\n};\n","import React from \"react\";\nimport AnimationRevealPage from \"helpers/AnimationRevealPage.js\";\nimport Header from \"components/headers/light.js\";\nimport Pricing from \"components/pricing/TwoPlansWithDurationSwitcher.js\";\nimport Testimonial from \"components/testimonials/ThreeColumnWithProfileImage.js\";\nimport Footer from \"components/footers/FiveColumnWithInputForm.js\";\nimport GetStarted from \"../components/cta/GetStarted\";\n\nexport default () => {\n return (\n \n \n \n \n \n \n \n );\n};\n","import React, { useState } from \"react\";\nimport tw from \"twin.macro\";\nimport styled from \"styled-components\";\nimport { css } from \"styled-components/macro\"; //eslint-disable-line\nimport { SectionHeading, Subheading as SubheadingBase } from \"components/misc/Headings.js\";\nimport { PrimaryButton as PrimaryButtonBase } from \"components/misc/Buttons.js\";\nimport EmailIllustrationSrc from \"images/email-illustration.svg\";\n\nconst Container = tw.div`relative`;\nconst TwoColumn = tw.div`flex flex-col md:flex-row justify-between max-w-screen-xl mx-auto py-20 md:py-24`;\nconst Column = tw.div`w-full max-w-md mx-auto md:max-w-none md:mx-0`;\nconst ImageColumn = tw(Column)`md:w-5/12 flex-shrink-0 h-80 md:h-auto`;\nconst TextColumn = styled(Column)(props => [\n tw`md:w-7/12 mt-16 md:mt-0`,\n props.textOnLeft ? tw`md:mr-12 lg:mr-16 md:order-first` : tw`md:ml-12 lg:ml-16 md:order-last`\n]);\n\nconst Image = styled.div(props => [\n `background-image: url(\"${props.imageSrc}\");`,\n tw`rounded bg-contain bg-no-repeat bg-center h-full`,\n]);\nconst TextContent = tw.div`lg:py-8 text-center md:text-left`;\n\nconst Subheading = tw(SubheadingBase)`text-center md:text-left`;\nconst Heading = tw(SectionHeading)`mt-4 font-black text-left text-3xl sm:text-4xl lg:text-5xl text-center md:text-left leading-tight`;\nconst Description = tw.p`mt-4 text-center md:text-left text-sm md:text-base lg:text-lg font-medium leading-relaxed text-secondary-100`;\nconst SuccessMessage = tw.p`mt-4 text-center text-sm md:text-base lg:text-lg font-medium leading-relaxed text-green-500`;\n\nconst Form = tw.form`mt-8 md:mt-10 text-sm flex flex-col max-w-sm mx-auto md:mx-0`;\nconst Input = tw.input`mt-6 first:mt-0 border-b-2 py-3 focus:outline-none font-medium transition duration-300 hocus:border-primary-500`;\nconst Textarea = styled(Input).attrs({as: \"textarea\"})`\n ${tw`h-24`}\n`;\n\nconst SubmitButton = tw(PrimaryButtonBase)`inline-block mt-8`;\n\nexport default ({\n subheading = \"Contact Us\",\n heading = <>Inquire by filling up the form,\n description = \"We appreciate your interest in MAI-Motion. For any inquiries, support, related questions, please feel free to reach out to us using the contact information provided below. Our team is dedicated to providing prompt and helpful assistance.\",\n submitButtonText = \"Send\",\n textOnLeft = true,\n }) => {\n const [success, setSuccess] = useState(\"\");\n const [formValues, setFormValues] = useState({\n email: '',\n name: '',\n subject: '',\n description: ''\n });\n\n const handleChange = (e) => {\n const { name, value } = e.target;\n setFormValues({\n ...formValues,\n [name]: value\n });\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n // API call to submit the form data\n fetch(`${process.env.REACT_APP_HTTP_DOMAIN}/contact-us`, {\n method: \"POST\",\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(formValues),\n })\n .then(response => response.json())\n .then(data => {\n setSuccess(data.message);\n setTimeout(() =>{\n const elem = document.getElementById(\"success_id\");\n if(elem){\n elem.scrollIntoView({ behavior: \"smooth\", block: \"center\" })\n }\n },100)\n setFormValues({\n email: '',\n name: '',\n subject: '',\n description: ''\n })\n })\n .catch((error) => {\n console.error('Error:', error);\n });\n };\n\n return (\n \n \n \n \n \n \n \n {subheading && {subheading}}\n {heading}\n {description && {description}}\n \n {success ? \n {success}\n : null}\n \n \n \n \n );\n};\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport tw from \"twin.macro\";\n//eslint-disable-next-line\nimport { css } from \"styled-components/macro\";\nimport { SectionHeading, Subheading as SubheadingBase } from \"components/misc/Headings.js\";\nimport { SectionDescription } from \"components/misc/Typography.js\";\n\nimport defaultCardImage from \"images/shield-icon.svg\";\n\nimport { ReactComponent as SvgDecoratorBlob3 } from \"images/svg-decorator-blob-3.svg\";\n\nimport SupportIconImage from \"images/support-icon.svg\";\nimport ShieldIconImage from \"images/shield-icon.svg\";\nimport CustomizeIconImage from \"images/customize-icon.svg\";\nimport FastIconImage from \"images/fast-icon.svg\";\nimport ReliableIconImage from \"images/reliable-icon.svg\";\nimport SimpleIconImage from \"images/simple-icon.svg\";\n\nconst Container = tw.div`relative`;\n\nconst ThreeColumnContainer = styled.div`\n ${tw`flex flex-col items-center md:items-stretch md:flex-row flex-wrap md:justify-center max-w-screen-lg mx-auto py-20 md:py-24`}\n`;\nconst Subheading = tw(SubheadingBase)`mb-4`;\nconst Heading = tw(SectionHeading)`w-full`;\nconst Description = tw(SectionDescription)`w-full text-center`;\n\nconst VerticalSpacer = tw.div`mt-10 w-full`\n\nconst Column = styled.div`\n ${tw`md:w-1/2 lg:w-1/3 max-w-sm`}\n`;\n\nconst Card = styled.div`\n ${tw`flex flex-col sm:flex-row items-center sm:items-start text-center sm:text-left h-full mx-4 px-2 py-8`}\n .imageContainer {\n ${tw`border text-center rounded-full p-5 flex-shrink-0`}\n img {\n ${tw`w-6 h-6`}\n }\n }\n\n .textContainer {\n ${tw`sm:ml-4 mt-4 sm:mt-2`}\n }\n\n .title {\n ${tw`mt-4 tracking-wide font-bold text-2xl leading-none`}\n }\n\n .description {\n ${tw`mt-1 sm:mt-4 font-medium text-secondary-100 leading-loose`}\n }\n`;\n\nconst DecoratorBlob = styled(SvgDecoratorBlob3)`\n ${tw`pointer-events-none absolute right-0 bottom-0 w-64 opacity-25 transform translate-x-32 translate-y-48 `}\n`;\n\nexport default ({ cards = null, heading = \"Amazing Features\", subheading = \"Features\", description = \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\" }) => {\n /*\n * This componets has an array of object denoting the cards defined below. Each object in the cards array can have the key (Change it according to your need, you can also add more objects to have more cards in this feature component) or you can directly pass this using the cards prop:\n * 1) imageSrc - the image shown at the top of the card\n * 2) title - the title of the card\n * 3) description - the description of the card\n * If a key for a particular card is not provided, a default value is used\n */\n\n const defaultCards = [\n {\n imageSrc: ShieldIconImage,\n title: \"Secure\",\n description: \"We strictly only deal with vendors that provide top notch security.\"\n },\n { imageSrc: SupportIconImage, title: \"24/7 Support\" },\n { imageSrc: CustomizeIconImage, title: \"Customizable\" },\n { imageSrc: ReliableIconImage, title: \"Reliable\" },\n { imageSrc: FastIconImage, title: \"Fast\" },\n { imageSrc: SimpleIconImage, title: \"Easy\" }\n ];\n\n if (!cards) cards = defaultCards;\n\n return (\n \n \n {subheading && {subheading}}\n {heading}\n {description && {description}}\n \n {cards.map((card, i) => (\n \n \n \n \n \n \n {card.title || \"Fully Secure\"}\n
\n {card.description || \"Lorem ipsum donor amet siti ceali ut enim ad minim veniam, quis nostrud.\"}\n
\n \n \n \n ))}\n \n \n \n );\n};\n","import React from \"react\";\nimport AnimationRevealPage from \"helpers/AnimationRevealPage.js\";\nimport tw from \"twin.macro\";\nimport Header from \"components/headers/light.js\";\nimport Footer from \"components/footers/FiveColumnWithInputForm.js\";\nimport ContactUsForm from \"components/forms/TwoColContactUsWithIllustrationFullForm.js\";\nimport Features from \"../components/features/ThreeColWithSideImage\";\nimport GetStarted from \"../components/cta/GetStarted\";\nimport CPUIcon from \"images/cpu.svg\";\nimport LayerIcon from \"images/layers.svg\";\nimport WindIcon from \"images/wind.svg\";\n\nconst Subheading = tw.span`uppercase tracking-widest font-bold text-primary-500`;\nconst HighlightedText = tw.span`text-primary-500`;\n\n\nexport default () => {\n return (\n \n \n Support}\n heading={\n <>\n Contact Us\n \n }\n description=\"If you require assistance or have any technical questions regarding MAI-Motion,our customer support team is ready to assist you. Please email us at move@mai-motion.com\"\n cards={\n [{\n imageSrc: CPUIcon,\n title: \"Support\",\n description: \"If you require assistance or have any technical questions regarding MAI-Motion,our customer support team is ready to assist you. Please email us at move@mai-motion.com\"\n },{\n imageSrc: LayerIcon,\n title: \"Media Inquiries\",\n description: \"If you are a member of the media and would like to request information,schedule an interview, or discuss potential collaborations, please reach out to our mediarelations team at move@mai-motion.com\"\n },{\n imageSrc: WindIcon,\n title: \"General Inquiries\",\n description: \"For any general inquiries or if you have a question that does not fall underthe above categories, please send us a message using the contact form below. We will makeevery effort to respond to your inquiry in a timely manner.\"\n }]\n }\n />\n \n \n \n \n );\n};\n","import React from \"react\";\nimport AnimationRevealPage from \"helpers/AnimationRevealPage.js\";\nimport FAQ from \"components/faqs/SingleCol.js\";\nimport GetStarted from \"components/cta/GetStarted\";\nimport Footer from \"../components/footers/FiveColumnWithInputForm\";\nimport Header from \"../components/headers/light\";\n\nexport default () => {\n return (\n \n \n \n \n \n \n );\n}\n","import React from \"react\";\nimport tw from \"twin.macro\";\nimport styled from \"styled-components\";\nimport {SectionHeading, Subheading as SubheadingBase} from \"components/misc/Headings.js\";\n\nconst Container = tw.div`relative`;\nconst TwoColumn = tw.div`flex flex-col md:flex-row justify-between max-w-screen-xl mx-auto py-20 md:py-24 items-center`;\nconst Column = tw.div`w-full max-w-md mx-auto md:max-w-none md:mx-0`;\nconst TextColumn = styled(Column)(props => [\n tw`md:w-6/12 mt-16 md:mt-0`,\n props.textOnLeft ? tw`md:mr-12 lg:mr-16 md:order-first` : tw`md:ml-12 lg:ml-16 md:order-last`\n]);\n\nconst TextContent = tw.div`lg:py-8 text-center md:text-left`;\n\nconst Subheading = tw(SubheadingBase)`text-center md:text-left`;\nconst Heading = tw(\n SectionHeading\n)`mt-4 font-black text-left text-3xl sm:text-4xl lg:text-5xl text-center md:text-left leading-tight`;\nconst Description = tw.p`mt-4 text-center md:text-left text-sm md:text-base lg:text-lg font-medium leading-relaxed text-secondary-100`;\n\n\nexport default ({\n leftSubheading = \"Our Expertise\",\n leftHeading = (\n <>\n Connecting Motion to Life\n \n ),\n leftDescription = \"\",\n leftSubDescription = \"\",\n rightSubheading = \"Our Expertise\",\n rightHeading = (\n <>\n Connecting Motion to Life\n \n ),\n rightDescription = \"\",\n rightSubDescription = \"\",\n}) => {\n // The textOnLeft boolean prop can be used to display either the text on left or right side of the image.\n\n return (\n \n \n \n \n {leftSubheading}\n {leftHeading}\n {leftDescription}\n {leftSubDescription ? {leftSubDescription} : null}\n \n \n \n \n {rightSubheading}\n {rightHeading}\n {rightDescription}\n {rightSubDescription ? {rightSubDescription} : null}\n \n \n \n \n );\n};\n","import React from \"react\";\nimport tw from \"twin.macro\";\nimport AnimationRevealPage from \"helpers/AnimationRevealPage.js\";\nimport MainFeature from \"components/features/TwoColWithButton.js\";\nimport MainFeature2 from \"components/features/TwoColWithTwoHorizontalFeaturesAndButton.js\";\nimport GetStarted from \"components/cta/GetStarted\";\n\nimport UseCase1 from \"images/usecases/use-case-1.jpg\";\nimport UseCase2 from \"images/usecases/use-case-2.jpg\";\nimport UseCase3 from \"images/usecases/use-case-3.png\";\nimport UseCase4 from \"images/usecases/use-case-4.jpg\";\nimport UseCase5 from \"images/usecases/use-case-5.jpg\";\nimport UseCase6 from \"images/usecases/use-case-6.jpg\";\nimport UseCase7 from \"images/usecases/use-case-7.jpg\";\nimport UseCase8 from \"images/usecases/use-case-8.jpg\";\nimport UseCase9 from \"images/usecases/use-case-9.jpg\";\nimport UseCase10 from \"images/usecases/use-case-10.jpg\";\nimport UseCase11 from \"images/usecases/use-case-11.jpg\";\nimport UseCase12 from \"images/usecases/use-case-12.jpg\";\nimport UseCase13 from \"images/usecases/use-case-13.png\";\nimport Footer from \"../components/footers/FiveColumnWithInputForm\";\nimport TwoColWithTextsOnly from \"../components/features/TwoColWithTextsOnly\";\nimport Header from \"../components/headers/light\";\n\nconst HighlightedText = tw.span`text-primary-500`;\n\n\nexport default () => {\n return (\n \n \n \n \n Orthopaedics\n \n }\n description=\"Orthopaedic surgeons rely on MAI-Motion to evaluate joint function and surgical outcomes. It assists in preoperative planning by simulating joint movements and predicting postoperative range of motion. This information guides surgical decision-making and improves patient outcomes.\"\n imageSrc={UseCase1}\n showDecoratorBlob={false}\n />\n\n \n Sports Medicine\n }\n description=\"MAI-Motion is utilised by sports medicine professionals to assess athletes’ biomechanics during training or competition. It helps identify movement patterns, muscle imbalances, and potential injury risks, allowing for personalised training programs and injury prevention strategies.\"\n />\n \n Biomechanics Research\n }\n description=\"MAI-Motion is a valuable asset in biomechanics research, enabling scientists to study human movement in various contexts. Researchers can analyse gait patterns, joint kinetics, and muscle coordination, contributing to advancements in understanding musculoskeletal disorders and developing innovative treatment approaches.\"\n />\n \n Telehealth Physiotherapy\n }\n description= \"MAI-Motion enables remote physiotherapy sessions by capturing patients’ motion data through video analysis. Patients can perform exercises at home while their movements are monitored in real-time by their physiotherapist. This remote monitoring ensures proper form and technique, allowing for accurate assessment and adjustment of the exercise program.\"\n />\n\n \n\n \n Home Exercise Programs\n }\n description=\"MAI-Motion is utilised in designing and monitoring home exercise programs for patients who require ongoing rehabilitation. Physiotherapists create personalised exercise plans and provide instructional videos. Patients perform the exercises while recording their movements with MAI-Motion, ensuring proper execution and progress tracking.\"\n />\n \n \n Initial Musculoskeletal Screening\n }\n hideButton\n subdescription=\"“As a fitness trainer, I use MAI-Motion as a quick assessment tool for my clients. It helps me identify any movement limitations or asymmetries, allowing me to tailor their training programs and address any potential issues before they escalate.”\"\n description= \"MAI-Motion can be used as a quick assessment tool for initial screenings invarious settings, such as clinics, sports facilities, or workplace healthprograms. By analysing a person’s motion data, MAI-Motion providesvaluable insights into their musculoskeletal condition, identifying anypotential areas of concern or imbalances.\"\n />\n \n Self-Assessment Home\n }\n subdescription=\"\"\n description= \"Individuals can utilise MAI-Motion for self-assessment at home, providing them with peace of mind and a better understanding of their musculoskeletal health. By following the guided instructions and recording their movements, they can receive instant feedback on their range of motion, posture, and overall movement quality.\"\n />\n \n Quick Evaluation in Sports\n }\n subdescription=\"\"\n description= \"MAI-Motion is a valuable tool in sports settings, where quick assessments of athletes’ movements are essential. Coaches and trainers can use MAI-Motion to evaluate athletes’ performance, identify areas for improvement, and make data-driven decisions for training and injury prevention strategies.\"\n />\n\n\n \n Objective Assessment \n }\n subdescription=\"\"\n description= \"MAI-Motion provides an objective and quantifiable assessment of a patient’s musculoskeletal condition, making it an ideal tool for medical legal reporting. By analysing the patient’s motion data, MAI-Motion can provide comprehensive information on range of motion, joint stability, and movement patterns, which can be valuable in legal cases involving personal injury, workplace accidents, or medical negligence.\"\n />\n \n Pre- and Post-Injury Comparisons \n }\n subdescription=\"\"\n description= \"MAI-Motion allows for pre- and post-injury comparisons, enabling a clear understanding of the impact of an accident or incident on an individual’s musculoskeletal health. By comparing motion data before and after the incident, MAI-Motion provides a visual representation of any changes or limitations, aiding in the assessment of damages and potential long-term implications.\"\n />\n\n \n Documentation of Functional Limitations\n }\n subdescription=\"\"\n description= \"MAI-Motion can help document and quantify functional limitations resulting from an injury or medical condition. By analysing the patient’s movements, MAI-Motion provides a comprehensive assessment of their ability to perform specific tasks or activities, which is crucial in determining the extent of their functional impairments and their impact on daily life.\"\n />\n \n Comparison to Normal Range \n }\n subdescription=\"\"\n description= \"MAI-Motion allows for a comparison of a patient’s motion data to established normal ranges, providing a reference point for assessing the extent of their impairment or disability. This comparison helps provide an objective assessment of the patient’s condition and can be crucial in determining the impact of an injury on their ability to perform daily activities or return to work.\"\n />\n\n \n\n \n \n \n );\n}\n","import React from \"react\";\nimport GlobalStyles from 'styles/GlobalStyles';\nimport {Helmet} from 'react-helmet';\n\nimport {BrowserRouter as Router, Route, Routes} from \"react-router-dom\";\nimport AboutUs from \"./pages/AboutUs\";\nimport Blogs from \"./pages/Blogs\";\nimport BlogViewPage from \"./pages/BlogViewPage\";\nimport LandingPage from \"./LandingPage\";\nimport Pricing from \"./pages/Pricing\";\nimport ContactUs from \"./pages/ContactUs\";\nimport FAQs from \"./pages/FAQs\";\nimport UseCases from \"./pages/UseCases\";\n\nexport default function App() {\n // If you want to disable the animation just use the disabled `prop` like below on your page's component\n // return xxxxxxxxxx;\n const routes = [\n {path: \"/about-us\", component: AboutUs, title: \"Mai Motion - At MAI-Motion, we’re pioneering a revolutionary approach to understanding human movement, bringing together a unique blend of expertise across medical, technological, and scientific disciplines.\"},\n {path: \"/contact-us\", component: ContactUs, title: \"Mai Motion - Contact Us\"},\n {path: \"/blogs/:slug\", component: BlogViewPage},\n {path: \"/blogs\", component: Blogs, title: \"Mai Motion - A Systematic Approach to Regeneration\"},\n {path: \"/pricing\", component: Pricing, title: \"Mai Motion - Find the perfect plan for your needs by comparing the features included in each. Whether you're an individual patient, a doctor managing a practice, or an administrator overseeing a clinic, we have tailored plans to suit your requirements.\"},\n {path: \"/faqs\", component: FAQs, title: \"Mai Motion - You have Questions ? And we have got answers to all of them.\"},\n {path: \"/use-cases\", component: UseCases, title: \"Mai Motion - In rehabilitation settings, MAI-Motion plays a crucial role in assessing patients’ functional movements after surgery or injury. It provides objective data on range of motion, joint stability, and muscle activation, enabling therapists to tailor rehabilitation programs and track progress effectively.\"},\n {path: \"/\", component: LandingPage, title: \"MAI Motion - Capturing Movement, Enhancing Health\"},\n ];\n\n return (\n <>\n \n \n \n {routes.map(({path, component: Component, title}, index) => (\n \n {title ?\n {title}\n \n \n \n \n \n \n : null}\n \n \n }/>\n ))}\n \n \n \n );\n}\n","import React from \"react\";\nimport { createRoot } from 'react-dom/client';\nimport App from \"./App\";\nimport \"./styles/global.css\"\nimport Modal from \"react-modal\";\n\nModal.setAppElement(\"#root\");\n\nconst container = document.getElementById('root');\nconst root = createRoot(container);\nroot.render();"],"sourceRoot":""}