109 lines
4.0 KiB
JavaScript
109 lines
4.0 KiB
JavaScript
import React from 'react';
|
|
import { Box, Text, HStack, Image, Checkbox, List, ListItem, ListIcon } from '@chakra-ui/react';
|
|
import { MdCheckCircle } from 'react-icons/md';
|
|
import oBenefits from "../../assets/o-benefits.svg";
|
|
import oExpense from "../../assets/o-expense.svg";
|
|
import oGift from "../../assets/o-gift.svg";
|
|
|
|
const packages = [
|
|
{
|
|
id: 1,
|
|
img: oExpense,
|
|
title: "OptiFii Expense",
|
|
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
|
|
benefits: [
|
|
"Lorem ipsum dolor sit amet",
|
|
"Lorem ipsum dolor sit amet",
|
|
"Lorem ipsum dolor sit amet",
|
|
"Lorem ipsum dolor sit amet"
|
|
]
|
|
},
|
|
{
|
|
id: 2,
|
|
img: oBenefits,
|
|
title: "OptiFii Benefits",
|
|
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
|
|
benefits: [
|
|
"Lorem ipsum dolor sit amet",
|
|
"Lorem ipsum dolor sit amet",
|
|
"Lorem ipsum dolor sit amet",
|
|
"Lorem ipsum dolor sit amet"
|
|
]
|
|
},
|
|
{
|
|
id: 3,
|
|
img: oGift,
|
|
title: "OptiFii Gift & Vouchers",
|
|
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
|
|
benefits: [
|
|
"Lorem ipsum dolor sit amet",
|
|
"Lorem ipsum dolor sit amet",
|
|
"Lorem ipsum dolor sit amet",
|
|
"Lorem ipsum dolor sit amet"
|
|
]
|
|
}
|
|
];
|
|
|
|
const OnboardingSelectPackage = () => {
|
|
|
|
return (
|
|
<Box>
|
|
<Text color={'#49475A'} fontWeight={500} fontSize={'sm'} mb={1}>
|
|
Select package
|
|
</Text>
|
|
<Text color={'#49475A'} fontWeight={500} fontSize={'xs'}>
|
|
Lorem ipsum dolor sit amet, adipiscing elit.
|
|
</Text>
|
|
|
|
<HStack spacing={4} flexWrap={"wrap"} my={12}>
|
|
{packages.map((pkg) => (
|
|
<Box
|
|
key={pkg.id}
|
|
bg={"linear-gradient(158.69deg, #C33FAD 1.29%, #0A006B 98.23%)"}
|
|
p={4}
|
|
borderRadius={"md"}
|
|
maxW={"260px"}
|
|
>
|
|
<HStack justifyContent={"space-between"} alignItems={"start"}>
|
|
<Image src={pkg.img} alt={`${pkg.title} image`} />
|
|
<Checkbox colorScheme='white'></Checkbox>
|
|
</HStack>
|
|
<Text
|
|
fontSize={"sm"}
|
|
fontWeight={500}
|
|
color={"#fff"}
|
|
mb={0}
|
|
mt={2}
|
|
>
|
|
{pkg.title}
|
|
</Text>
|
|
<Text fontSize={"xs"} color={"#e7d4ea"}>
|
|
{pkg.description}
|
|
</Text>
|
|
<Text fontSize={"xs"} color={"#e8d5eb"} mb={2}>
|
|
This plan gets
|
|
</Text>
|
|
<Box bg={"#fff"} borderRadius={"md"} p={4}>
|
|
<List spacing={3} pl={0} mb={0}>
|
|
{pkg.benefits.map((benefit, index) => (
|
|
<ListItem
|
|
key={index}
|
|
fontSize={"xs"}
|
|
color={"#434343"}
|
|
fontWeight={500}
|
|
>
|
|
<ListIcon as={MdCheckCircle} color='#3725EA' />
|
|
{benefit}
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</HStack>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default OnboardingSelectPackage;
|