Medplum

// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors // SPDX-License-Identifier: Apache-2.0 import { AppShell, Box, Button, Container, Group, Stack, Text, Title, useMantineTheme } from '@mantine/core'; import cx from 'clsx'; import type { JSX } from 'react'; import { Footer } from '../../components/Footer'; import DoctorImage from '../../img/landingPage/doctor.jpg'; import EngineeringImage from '../../img/landingPage/engineering.jpg'; import LabImage from '../../img/landingPage/laboratory.jpg'; import WorkingEnvironmentImage from '../../img/landingPage/working-environment.jpg'; import { Header } from './Header'; import classes from './index.module.css'; const features = [ { title: 'Comprehsive Care Plans', description: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.', }, { title: 'No hidden fees', description: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.', }, { title: '24/7 Messaging', description: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.', }, { title: 'Clinically rigorous', description: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.', }, ]; export function LandingPage(): JSX.Element { const theme = useMantineTheme(); return ( <AppShell className={classes.outer} header={{ height: 100 }}> <Header /> <AppShell.Main className={classes.outer}> <img className={classes.heroImage1} src={WorkingEnvironmentImage} alt="Working Environment" /> <Container> <div className={classes.inner}> <div className={classes.content}> <Title className={classes.title}> An extraordinary <br /> <span className={classes.highlight}>doctor&apos;s office</span> </Title> <Text size="lg" c="dimmed" mt="md"> This is not actually a medical practice, this is a sample open source application for developers to clone, customize and run. </Text> <Group mt={30}> <Button radius="xl" size="md" className={classes.control}> Get started </Button> <Button variant="default" radius="xl" size="md" className={classes.control}> Source code </Button> </Group> </div> <img className={classes.heroImage2} src={DoctorImage} alt="Doctor" /> </div> </Container> <Container> <div className={classes.inner}> <div style={{ width: 500 }}> <Title order={3} fw={500} c={theme.primaryColor} mb="lg"> Healthcare </Title> <Title order={1} fw={500} mb="md"> A better way to get care </Title> <Text size="xl" c="gray"> Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum cupiditate veritatis in accusamus quisquam. </Text> </div> <img className={classes.heroImage3} src={LabImage} alt="Laboratory" /> </div> </Container> <Container> <div className={cx(classes.inner, classes.featureSection)}> <Stack align="flex-end"> {features.map((feature, index) => ( <Box key={`feature-${index}`} className={classes.featureBox}> <Text className={classes.featureTitle}>{feature.title}</Text> <Text className={classes.featureDescription}>{feature.description}</Text> </Box> ))} </Stack> <img className={classes.heroImage4} src={EngineeringImage} alt="Laboratory" /> </div> </Container> </AppShell.Main> <Footer /> </AppShell> ); }