feat: inheritance plan card UI

packages/ui/package.json

@@ -18,7 +18,7 @@
     "build:icons": "svgr icons --out-dir ./src/assets/icons/generated --no-svgo",
     "prebuild": "pnpm clean:icons && pnpm build:icons",
     "clean": "rimraf dist",
-    "clean:icons": "rimraf ./src/assets/icons/generated/*",
+    "clean:icons": "rimraf ./src/assets/icons/generated",
     "test": "jest",
     "pre-commit": "lint-staged",
     "storybook": "storybook dev -p 6006",

packages/ui/src/components/molecules/PlanCard.tsx

@@ -0,0 +1,166 @@
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
+
+import { Check, CrossIcon } from '../../assets';
+import { Button, Flex, Typography } from '../atoms';
+import { WidthProps, width } from '../utils';
+
+export type PlanType = 'silver' | 'gold';
+
+export interface PlanCardProps extends WidthProps {
+  planType: PlanType;
+  heading: string;
+  tagline: string;
+  description: string;
+  price: string;
+  duration: string;
+  buttonText: string;
+  popularTagText: string;
+  features: { text: string; available: boolean }[];
+}
+
+const PlanContainer = styled.div<{ planType: PlanType } & WidthProps>`
+  position: relative;
+  display: flex;
+  width: 400px;
+  padding: 40px 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 32px;
+  border-radius: 16px;
+  background: ${({ planType, theme }) =>
+    planType === 'silver'
+      ? theme.palette.background.slateLight
+      : theme.palette.background.plan};
+  box-shadow: 4px 4px 30px 0px ${({ theme }) => theme.palette.border.darkSlate};
+  border: ${({ planType, theme }) =>
+    planType === 'gold' && `1px solid ${theme.palette.background.golden}`};
+  ${width}
+`;
+const PopularTag = styled.div`
+  position: absolute;
+  top: 0.5px;
+  right: 32px;
+  background: ${({ theme }) => theme.palette.golden};
+  z-index: 1;
+  border-radius: 0px 0px 6px 6px;
+  padding: 8px 15px 8px 17px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+export const PlanCard: React.FC<PlanCardProps> = ({
+  planType,
+  heading,
+  tagline,
+  description,
+  price,
+  features,
+  duration,
+  buttonText,
+  popularTagText,
+  ...restProps
+}) => {
+  const theme = useTheme();
+  return (
+    <PlanContainer planType={planType} {...restProps}>
+      {planType === 'gold' && (
+        <PopularTag>
+          <Typography
+            $fontFamily="normal"
+            $fontWeight="semibold"
+            $fontSize={14}
+            color="black"
+          >
+            {popularTagText}
+          </Typography>
+        </PopularTag>
+      )}
+      <Flex direction="column" gap={0} $fontFamily="normal" align="flex-start">
+        <Typography
+          color={planType === 'silver' ? 'silver' : 'gold'}
+          $fontSize={30}
+          $fontWeight="bold"
+        >
+          {heading}
+        </Typography>
+        <Typography $fontWeight="normal" $fontSize={20} color="muted">
+          {tagline}
+        </Typography>
+      </Flex>
+      <Flex align="flex-end" gap={16}>
+        <Typography
+          color="white"
+          $fontWeight="bold"
+          $fontFamily="normal"
+          $fontSize={48}
+        >
+          {price}
+        </Typography>
+
+        <Typography
+          $fontSize={16}
+          $fontFamily="normal"
+          $fontWeight="normal"
+          color="normal"
+          pb="14px"
+        >
+          {duration}
+        </Typography>
+      </Flex>
+
+      <Typography
+        color="muted"
+        $fontFamily="normal"
+        $fontWeight="normal"
+        $fontSize={16}
+      >
+        {description}
+      </Typography>
+      <Flex height={1} $bgColor="headlineLight" $alignSelf="stretch" />
+      <Flex direction="column" gap={32} mb="32px" justify="center">
+        {features.map((feature, index) => (
+          <Flex key={`${index + 1}`} align="center" gap={24}>
+            {feature.available ? (
+              <Check
+                stroke={theme?.palette.text.greenStroke}
+                strokeWidth="3.5 px"
+                height={20}
+                width={24}
+              />
+            ) : (
+              <CrossIcon
+                stroke={theme?.palette.text.redStroke}
+                strokeWidth="3.5 px"
+                height={20}
+                width={24}
+              />
+            )}
+            <Typography
+              color="white"
+              $fontSize={20}
+              $fontFamily="normal"
+              $fontWeight="normal"
+            >
+              {feature.text}
+            </Typography>
+          </Flex>
+        ))}
+      </Flex>
+      <Button
+        variant={planType === 'silver' ? 'silver' : 'primary'}
+        display="flex"
+        $alignSelf="stretch"
+        align="center"
+        justify="center"
+        $borderRadius="8px"
+        $fontSize={16}
+        $fontWeight="medium"
+        $fontFamily="normal"
+        height={48}
+      >
+        {buttonText}
+      </Button>
+    </PlanContainer>
+  );
+};

packages/ui/src/components/molecules/index.ts

@@ -46,3 +46,4 @@ export * from './Accordion';
 export * from './SimpleJsonView';
 export * from './OTPInput';
 export * from './OneInMany';
+export * from './PlanCard';

packages/ui/src/components/utils/bgColor.styled.ts

@@ -24,6 +24,7 @@ export type BgColor =
   | 'calendar'
   | 'container'
   | 'slate'
+  | 'headlineLight'
   | 'error';
 export interface BgColorProps {
   $bgColor?: BgColor;
@@ -65,6 +66,11 @@ export const bgColor = css<BgColorProps>`
     props.$bgColor === 'separatorSecondary' &&
     css`
       background: ${({ theme }) => theme.palette.background.separatorSecondary};
+    `}
+      ${props =>
+    props.$bgColor === 'headlineLight' &&
+    css`
+      background: ${({ theme }) => theme.palette.background.headlineLight};
     `}
     ${props =>
     props.$bgColor === 'slate' &&

packages/ui/src/stories/molecules/PlanCard.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { PlanCard } from '../../components';
+
+const meta: Meta<typeof PlanCard> = {
+  component: PlanCard,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const SilverPlan: Story = {
+  args: {
+    planType: 'silver',
+    heading: 'Silver',
+    tagline: 'PIN Recovery',
+    description:
+      'Secure your wallet PIN with us and easily recover it if forgotten, ensuring continuous access to your crypto assets.',
+    price: '$25',
+    features: [
+      { text: 'No KYC required', available: true },
+      { text: 'Multi-Chain', available: true },
+      { text: 'PIN Recovery', available: true },
+      { text: 'Estate Recovery', available: false },
+    ],
+    duration: '/Wallet/Year',
+    buttonText: 'SELECT',
+    popularTagText: 'MOST POPULAR',
+  },
+};
+
+export const GoldPlan: Story = {
+  args: {
+    planType: 'gold',
+    heading: 'Gold',
+    tagline: 'Non-Custodial Estate Recovery',
+    description:
+      'Ensure your crypto assets are inherited by loved ones effortlessly, bypassing complex legal restrictions for smooth transfers.',
+    price: '$100',
+    features: [
+      { text: 'No KYC required', available: true },
+      { text: 'Multi-Chain', available: true },
+      { text: 'PIN Recovery', available: true },
+      { text: 'Estate Recovery', available: true },
+    ],
+    duration: '/Wallet/Year',
+    buttonText: 'SELECT',
+    popularTagText: 'MOST POPULAR',
+  },
+};

packages/ui/src/themes/color.styled.ts

@@ -22,6 +22,7 @@ export const colors = {
     cardHover:
       'linear-gradient(105deg, rgba(96, 58, 23, 0.20) 0%, rgba(0, 0, 0, 0.00) 60.65%), #332F2D',
     title: `linear-gradient(90deg,#e9b873 0.19%,#fedd8f 37.17%,#b78d51 100.19%)`,
+    plan: 'linear-gradient(90deg, rgba(224, 187, 117, 0.10) 0%, rgba(39, 35, 32, 0.00) 100%)',
   },
   info: {
     main: '#F1AE4A',
@@ -57,6 +58,8 @@ export const colors = {
     divider: '#333130',
     dialog: '#2B2420',
     separator: '#39322C',
+    greenStroke: '#00FF75',
+    redStroke: '#FF0202',
   },
   boxShadow: {
     selected: '#1B1813',
@@ -94,8 +97,11 @@ export const colors = {
     slate: '#312d2a',
     cardDisabled: '#282522',
     cardSelected: '#2A2827',
+    slateLight: '#302C29',
+    headlineLight: '#655F53',
   },
   border: {
+    darkSlate: '#030303',
     popup: '#2C2520',
     list: '#2C2824',
     input: '#3C3937',

packages/ui/src/themes/theme.styled.ts

@@ -80,6 +80,7 @@ export const theme = {
       disabled: colors.disabled.background,
       bar: colors.background.bar,
       gold: colors.gradients.golden,
+      plan: colors.gradients.plan,
       golden: colors.background.gold,
       success: colors.success.main,
       successSecondary: colors.success.secondary,
@@ -99,6 +100,7 @@ export const theme = {
       message: colors.background.message,
       breadcrumbSeparator: colors.background.breadcrumbSeparator,
       batchTransactionBody: colors.background.batchTransactionBody,
+      slateLight: colors.background.slateLight,
       filterItem: colors.background.filterItem,
       calendar: colors.background.calendar,
       calendarHeader: colors.background.calendarHeader,
@@ -108,6 +110,7 @@ export const theme = {
       slate: colors.background.slate,
       cardSelected: colors.background.cardSelected,
       cardDisabled: colors.background.cardDisabled,
+      headlineLight: colors.background.headlineLight,
     },
     border: {
       popup: colors.border.popup,
@@ -121,6 +124,7 @@ export const theme = {
       danger: colors.border.danger,
       bar: colors.border.bar,
       white: colors.border.white,
+      darkSlate: colors.border.darkSlate,
       table: {
         title: colors.border.table.title,
         row: colors.border.table.row,