@npm_leadtech/legal-lib-components 7.63.11 → 7.65.0

package/dist/src/components/molecules/StickyPlanBar/StickyPlanBar.styled.js

@@ -0,0 +1,69 @@
+import { size } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const StickyPlanBarStyled = styled.div `
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 100;
+  padding: 1rem;
+  gap: 1rem;
+
+  background-color: #ffffff;
+  border-radius: 1rem 1rem 0 0;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: center;
+
+  transform: translateY(100%);
+  transition: transform 0.3s ease-in-out;
+
+  &.visible {
+    transform: translateY(0);
+  }
+
+  @media (min-width: ${size.sm}) {
+    display: none;
+  }
+`;
+export const StickyPlanContent = styled.div `
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+
+  .sticky-plan-name {
+    padding: 0.25rem 0.5rem;
+    background-color: var(--primary-main-light-5);
+    color: var(--primary-main-dark-1);
+    font-size: 12px;
+    font-weight: 700;
+    border-radius: 8px;
+  }
+
+  .sticky-plan-pricing {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .sticky-plan-price {
+    font-size: 12px;
+    font-weight: 700;
+  }
+  .sticky-plan-priceLabel {
+    font-size: 12px;
+  }
+`;
+export const StickySelectButton = styled.button `
+  background-color: var(--primary-main-light-1);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 0.68rem 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  width: 100%;
+`;

package/dist/src/components/molecules/StickyPlanBar/StickyPlanBar.styled.ts

@@ -0,0 +1,72 @@
+import { size } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const StickyPlanBarStyled = styled.div`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 100;
+  padding: 1rem;
+  gap: 1rem;
+
+  background-color: #ffffff;
+  border-radius: 1rem 1rem 0 0;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: center;
+
+  transform: translateY(100%);
+  transition: transform 0.3s ease-in-out;
+
+  &.visible {
+    transform: translateY(0);
+  }
+
+  @media (min-width: ${size.sm}) {
+    display: none;
+  }
+`
+
+export const StickyPlanContent = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+
+  .sticky-plan-name {
+    padding: 0.25rem 0.5rem;
+    background-color: var(--primary-main-light-5);
+    color: var(--primary-main-dark-1);
+    font-size: 12px;
+    font-weight: 700;
+    border-radius: 8px;
+  }
+
+  .sticky-plan-pricing {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .sticky-plan-price {
+    font-size: 12px;
+    font-weight: 700;
+  }
+  .sticky-plan-priceLabel {
+    font-size: 12px;
+  }
+`
+
+export const StickySelectButton = styled.button`
+  background-color: var(--primary-main-light-1);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 0.68rem 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  width: 100%;
+`

package/dist/src/components/molecules/StickyPlanBar/StickyPlanBar.tsx

@@ -0,0 +1,23 @@
+import { StickyPlanBarStyled, StickyPlanContent, StickySelectButton } from './StickyPlanBar.styled'
+import React from 'react'
+import { StickyPlanBarProps } from './StickyPlanBarProps'
+
+export const StickyPlanBar: React.FC<StickyPlanBarProps> = ({ activePlan, showStickyBar, onPlanSelect }) => {
+  return (
+    <StickyPlanBarStyled className={`sticky-plan-bar ${showStickyBar ? 'visible' : ''}`}>
+      <StickyPlanContent className='sticky-plan-info'>
+        <span className='sticky-plan-name'>{activePlan.subscription_type?.name}</span>
+        <div className='sticky-plan-pricing'>
+          <span className='sticky-plan-price'>{activePlan.pricing}</span>
+          <span className='sticky-plan-priceLabel'>{activePlan.pricingLabel}</span>
+        </div>
+      </StickyPlanContent>
+      <StickySelectButton
+        className='sticky-select-button'
+        onClick={() => (onPlanSelect ? onPlanSelect(activePlan?.subscription_type?.sku ?? '') : undefined)}
+      >
+        Select
+      </StickySelectButton>
+    </StickyPlanBarStyled>
+  )
+}

package/dist/src/components/molecules/StickyPlanBar/StickyPlanBarProps.d.ts

@@ -0,0 +1,6 @@
+import { SubscriptionPlan } from '../../../components/atoms';
+export interface StickyPlanBarProps {
+    activePlan: SubscriptionPlan;
+    showStickyBar: boolean;
+    onPlanSelect?: (sku: string) => void;
+}

package/dist/src/components/molecules/StickyPlanBar/StickyPlanBarProps.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/molecules/StickyPlanBar/StickyPlanBarProps.ts

@@ -0,0 +1,7 @@
+import { SubscriptionPlan } from '../../../components/atoms'
+
+export interface StickyPlanBarProps {
+  activePlan: SubscriptionPlan
+  showStickyBar: boolean
+  onPlanSelect?: (sku: string) => void
+}

package/dist/src/components/molecules/StickyPlanBar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './StickyPlanBar';
+export * from './StickyPlanBarProps';

package/dist/src/components/molecules/StickyPlanBar/index.js

@@ -0,0 +1,2 @@
+export * from './StickyPlanBar';
+export * from './StickyPlanBarProps';

package/dist/src/components/molecules/StickyPlanBar/index.ts

@@ -0,0 +1,2 @@
+export * from './StickyPlanBar'
+export * from './StickyPlanBarProps'

package/dist/src/components/molecules/index.d.ts

@@ -58,3 +58,4 @@ export * from './WarningBox';
 export * from './InfoBarFooter';
 export * from './HelpSection';
 export * from './HelpPanelList';
+export * from './StickyPlanBar';

package/dist/src/components/molecules/index.js

@@ -58,3 +58,4 @@ export * from './WarningBox';
 export * from './InfoBarFooter';
 export * from './HelpSection';
 export * from './HelpPanelList';
+export * from './StickyPlanBar';

package/dist/src/components/molecules/index.ts

@@ -58,3 +58,4 @@ export * from './WarningBox'
 export * from './InfoBarFooter'
 export * from './HelpSection'
 export * from './HelpPanelList'
+export * from './StickyPlanBar'

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeader.d.ts

@@ -0,0 +1,3 @@
+import { PricingHeaderProps } from './PricingPageHeaderProps';
+import React from 'react';
+export declare const PricingPageHeader: React.FC<PricingHeaderProps>;

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeader.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PhoneButtonStyled, PhoneNumberStyled, PricingHeaderStyled } from './PricingPageHeader.styled';
+import { Logo } from '../../atoms';
+import { PhoneIcon } from '../../../../images/componentsSvg/PhoneIcon';
+export const PricingPageHeader = ({ siteName = 'Legalfinity', phoneNumber }) => {
+    return (_jsxs(PricingHeaderStyled, { children: [_jsx(Logo, { siteName: siteName, width: '150', height: '26' }), _jsxs(PhoneNumberStyled, { children: [_jsx(PhoneIcon, { width: 16, height: 16, fill: '#6d7275' }), _jsx("strong", { children: phoneNumber })] }), _jsxs(PhoneButtonStyled, { href: `tel:${phoneNumber}`, target: '__self', children: [_jsx(PhoneIcon, { width: 24, height: 24, fill: 'currentColor' }), _jsx("strong", { children: 'Call Us' })] })] }));
+};

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeader.styled.d.ts

@@ -0,0 +1,3 @@
+export declare const PricingHeaderStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const PhoneButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
+export declare const PhoneNumberStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeader.styled.js

@@ -0,0 +1,35 @@
+import { size } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const PricingHeaderStyled = styled.header `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+`;
+export const PhoneButtonStyled = styled.a `
+  display: none;
+  align-items: center;
+  gap: 0.25rem;
+  height: 2.5rem;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  text-decoration: none;
+  cursor: pointer;
+  border: 1px solid var(--neutral-neutral-4);
+  font-size: 14px;
+  color: var(--primary-main);
+  @media (max-width: ${size.tab}) {
+    display: flex;
+  }
+`;
+export const PhoneNumberStyled = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--neutral-neutral-2);
+  height: 2.5rem;
+
+  @media (max-width: ${size.tab}) {
+    display: none;
+  }
+`;

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeader.styled.tsx

@@ -0,0 +1,38 @@
+import { size } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const PricingHeaderStyled = styled.header`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+`
+
+export const PhoneButtonStyled = styled.a`
+  display: none;
+  align-items: center;
+  gap: 0.25rem;
+  height: 2.5rem;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  text-decoration: none;
+  cursor: pointer;
+  border: 1px solid var(--neutral-neutral-4);
+  font-size: 14px;
+  color: var(--primary-main);
+  @media (max-width: ${size.tab}) {
+    display: flex;
+  }
+`
+
+export const PhoneNumberStyled = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--neutral-neutral-2);
+  height: 2.5rem;
+
+  @media (max-width: ${size.tab}) {
+    display: none;
+  }
+`

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeader.tsx

@@ -0,0 +1,21 @@
+import { PhoneButtonStyled, PhoneNumberStyled, PricingHeaderStyled } from './PricingPageHeader.styled'
+import { Logo } from '../../atoms'
+import { PhoneIcon } from '../../../../images/componentsSvg/PhoneIcon'
+import { PricingHeaderProps } from './PricingPageHeaderProps'
+import React from 'react'
+
+export const PricingPageHeader: React.FC<PricingHeaderProps> = ({ siteName = 'Legalfinity', phoneNumber }) => {
+  return (
+    <PricingHeaderStyled>
+      <Logo siteName={siteName} width='150' height='26' />
+      <PhoneNumberStyled>
+        <PhoneIcon width={16} height={16} fill='#6d7275' />
+        <strong>{phoneNumber}</strong>
+      </PhoneNumberStyled>
+      <PhoneButtonStyled href={`tel:${phoneNumber}`} target='__self'>
+        <PhoneIcon width={24} height={24} fill='currentColor' />
+        <strong>{'Call Us'}</strong>
+      </PhoneButtonStyled>
+    </PricingHeaderStyled>
+  )
+}

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeaderProps.d.ts

@@ -0,0 +1,4 @@
+export interface PricingHeaderProps {
+    siteName?: string;
+    phoneNumber?: string;
+}

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeaderProps.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeaderProps.ts

@@ -0,0 +1,4 @@
+export interface PricingHeaderProps {
+  siteName?: string
+  phoneNumber?: string
+}

package/dist/src/components/organisms/PricingPageHeader/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PricingPageHeader';
+export * from './PricingPageHeaderProps';

package/dist/src/components/organisms/PricingPageHeader/index.js

@@ -0,0 +1,2 @@
+export * from './PricingPageHeader';
+export * from './PricingPageHeaderProps';

package/dist/src/components/organisms/PricingPageHeader/index.ts

@@ -0,0 +1,2 @@
+export * from './PricingPageHeader'
+export * from './PricingPageHeaderProps'

package/dist/src/components/organisms/index.d.ts

@@ -36,3 +36,4 @@ export * from './MobileMenu';
 export * from './MobilePanel';
 export * from './DesktopMenu';
 export * from './VisibleEnvVariables';
+export * from './PricingPageHeader';

package/dist/src/components/organisms/index.js

@@ -36,3 +36,4 @@ export * from './MobileMenu';
 export * from './MobilePanel';
 export * from './DesktopMenu';
 export * from './VisibleEnvVariables';
+export * from './PricingPageHeader';

package/dist/src/components/organisms/index.ts

@@ -36,3 +36,4 @@ export * from './MobileMenu'
 export * from './MobilePanel'
 export * from './DesktopMenu'
 export * from './VisibleEnvVariables'
+export * from './PricingPageHeader'

package/dist/src/components/pages/PricingPlansPage/PricingPlansPage.d.ts

@@ -0,0 +1,3 @@
+import { PricingPlansPageProps } from './PricingPlansPageProps';
+import React from 'react';
+export declare const PricingPlansPage: React.FC<PricingPlansPageProps>;

package/dist/src/components/pages/PricingPlansPage/PricingPlansPage.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { FeatureItem, PlanCard } from '../../atoms';
+import { FeaturesGrid, FeaturesSection, PlanSelector, PlanWrapper, PlansWrapper, PricingContainerStyled, SelectorButton } from './PricingPlansPage.styled';
+import { PricingPageHeader } from '../../organisms';
+import React from 'react';
+import { StickyPlanBar } from '../../molecules/StickyPlanBar';
+import { throttle } from '../../../utils/throttle';
+export const PricingPlansPage = ({ subscriptionPlans, features, onPlanSelect, headerDivider, siteName = 'Legalfinity', phoneNumber }) => {
+    const [activePlanIndex, setActivePlanIndex] = React.useState(0);
+    const plansWrapperRef = React.useRef(null);
+    const lastScrollYRef = React.useRef(0);
+    const [showStickyBar, setShowStickyBar] = React.useState(false);
+    const activePlan = subscriptionPlans[activePlanIndex];
+    React.useEffect(() => {
+        const handleScroll = () => {
+            if (!plansWrapperRef.current)
+                return;
+            const currentScrollY = window.scrollY;
+            const isMobile = window.innerWidth < 720;
+            if (!isMobile) {
+                if (showStickyBar) {
+                    setShowStickyBar(false);
+                }
+                return;
+            }
+            const isScrollingUp = currentScrollY < lastScrollYRef.current - 10 ? 'up' : null;
+            const scrollDirection = currentScrollY > lastScrollYRef.current + 10 ? 'down' : isScrollingUp;
+            if (!scrollDirection)
+                return;
+            const targetRect = plansWrapperRef.current.getBoundingClientRect();
+            const isPastWrapper = targetRect.bottom < 400;
+            if (scrollDirection === 'down' && isPastWrapper) {
+                if (!showStickyBar) {
+                    setShowStickyBar(true);
+                }
+            }
+            else if (scrollDirection === 'up' || !isPastWrapper) {
+                if (showStickyBar && !isPastWrapper) {
+                    setShowStickyBar(false);
+                }
+            }
+            lastScrollYRef.current = currentScrollY;
+        };
+        const handleResize = () => {
+            if (window.innerWidth >= 720) {
+                setShowStickyBar(false);
+            }
+        };
+        const throttledHandleScroll = throttle(handleScroll, 100);
+        window.addEventListener('scroll', throttledHandleScroll);
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('scroll', throttledHandleScroll);
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [showStickyBar]);
+    return (_jsxs(_Fragment, { children: [_jsx(PricingPageHeader, { siteName: siteName, phoneNumber: phoneNumber }), headerDivider, subscriptionPlans?.length > 0 && (_jsxs(PricingContainerStyled, { children: [_jsx(PlanSelector, { children: subscriptionPlans.map((plan, index) => (_jsx(SelectorButton, { isActive: index === activePlanIndex, onClick: () => setActivePlanIndex(index), dataQa: `selector-${plan.subscription_type?.name.replaceAll(' ', '')}`, children: plan?.subscription_type?.name }, `selector-${plan?.pricingLabel}`))) }), _jsx(PlansWrapper, { ref: plansWrapperRef, children: subscriptionPlans.map((plan, index) => (_jsx(PlanWrapper, { isHighlighted: plan.highlightPlan, isActive: index === activePlanIndex, className: `pricing-plan__element-container ${plan?.highlightPlan ? 'highlight' : ''} ${index === activePlanIndex ? 'active' : ''}`, children: _jsx(PlanCard, { onSelect: onPlanSelect ?? (() => { }), plan: plan }) }, plan.pricingLabel))) }), features && features.length > 0 && (_jsx(FeaturesSection, { children: _jsx(FeaturesGrid, { children: features.map((feature) => (_jsx(FeatureItem, { feature: feature }, feature.description))) }) })), _jsx(StickyPlanBar, { activePlan: activePlan, showStickyBar: showStickyBar, onPlanSelect: onPlanSelect })] }))] }));
+};

package/dist/src/components/pages/PricingPlansPage/PricingPlansPage.styled.d.ts

@@ -0,0 +1,16 @@
+type PlanWrapperProps = {
+    isActive: boolean;
+    isHighlighted?: boolean;
+};
+type SelectorButton = {
+    isActive: boolean;
+    dataQa: string;
+};
+export declare const PricingContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const PlanSelector: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SelectorButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, SelectorButton>> & string;
+export declare const PlansWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PlanWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PlanWrapperProps>> & string;
+export declare const FeaturesSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FeaturesGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export {};

package/dist/src/components/pages/PricingPlansPage/PricingPlansPage.styled.js

@@ -0,0 +1,88 @@
+import styled, { css } from 'styled-components';
+import { size } from '../../../globalStyles/breakpoints';
+export const PricingContainerStyled = styled.section `
+  margin: 0 auto 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: 996px;
+  gap: 1.5rem;
+  margin-bottom: 3rem;
+  padding: 0 1.5rem;
+`;
+export const PlanSelector = styled.div `
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: 1rem;
+  padding: 0.5rem;
+
+  @media (min-width: ${size.sm}) {
+    display: none;
+  }
+`;
+export const SelectorButton = styled.button `
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  border: none;
+  outline: inherit;
+  flex: 1;
+  font-size: 12px;
+  font-weight: 700;
+  background-color: var(--neutral-neutral-4);
+  color: var(--neutral-neutral-1);
+  cursor: pointer;
+  transition: background-color 0.3s;
+
+  ${({ isActive }) => isActive &&
+    css `
+      background-color: var(--primary-main);
+      color: white;
+    `}
+`;
+export const PlansWrapper = styled.div `
+  display: flex;
+  height: 100%;
+  gap: 1rem;
+  width: 100%;
+  max-width: 327px;
+
+  @media (min-width: ${size.sm}) {
+    max-width: none;
+    gap: 20px;
+  }
+`;
+export const PlanWrapper = styled.div `
+  max-width: 327px;
+  border-radius: 1rem;
+  flex: 1;
+  display: ${({ isActive }) => (isActive ? 'block' : 'none')};
+  background-color: white;
+
+  ${({ isHighlighted }) => isHighlighted &&
+    css `
+      border: 2px solid var(--primary-main);
+    `}
+
+  @media (min-width: ${size.sm}) {
+    display: block;
+    max-width: none;
+  }
+`;
+export const FeaturesSection = styled.div `
+  width: 100%;
+`;
+export const FeaturesGrid = styled.ul `
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  @media (min-width: ${size.sm}) {
+    display: flex;
+    justify-content: center;
+  }
+`;

package/dist/src/components/pages/PricingPlansPage/PricingPlansPage.styled.ts

@@ -0,0 +1,107 @@
+import styled, { css } from 'styled-components'
+import { size } from '../../../globalStyles/breakpoints'
+
+type PlanWrapperProps = {
+  isActive: boolean
+  isHighlighted?: boolean
+}
+
+type SelectorButton = {
+  isActive: boolean
+  dataQa: string
+}
+
+export const PricingContainerStyled = styled.section`
+  margin: 0 auto 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: 996px;
+  gap: 1.5rem;
+  margin-bottom: 3rem;
+  padding: 0 1.5rem;
+`
+
+export const PlanSelector = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: 1rem;
+  padding: 0.5rem;
+
+  @media (min-width: ${size.sm}) {
+    display: none;
+  }
+`
+
+export const SelectorButton = styled.button<SelectorButton>`
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  border: none;
+  outline: inherit;
+  flex: 1;
+  font-size: 12px;
+  font-weight: 700;
+  background-color: var(--neutral-neutral-4);
+  color: var(--neutral-neutral-1);
+  cursor: pointer;
+  transition: background-color 0.3s;
+
+  ${({ isActive }) =>
+    isActive &&
+    css`
+      background-color: var(--primary-main);
+      color: white;
+    `}
+`
+
+export const PlansWrapper = styled.div`
+  display: flex;
+  height: 100%;
+  gap: 1rem;
+  width: 100%;
+  max-width: 327px;
+
+  @media (min-width: ${size.sm}) {
+    max-width: none;
+    gap: 20px;
+  }
+`
+
+export const PlanWrapper = styled.div<PlanWrapperProps>`
+  max-width: 327px;
+  border-radius: 1rem;
+  flex: 1;
+  display: ${({ isActive }) => (isActive ? 'block' : 'none')};
+  background-color: white;
+
+  ${({ isHighlighted }) =>
+    isHighlighted &&
+    css`
+      border: 2px solid var(--primary-main);
+    `}
+
+  @media (min-width: ${size.sm}) {
+    display: block;
+    max-width: none;
+  }
+`
+
+export const FeaturesSection = styled.div`
+  width: 100%;
+`
+
+export const FeaturesGrid = styled.ul`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  @media (min-width: ${size.sm}) {
+    display: flex;
+    justify-content: center;
+  }
+`