mirror of
https://github.com/streetwriters/notesnook.git
synced 2026-09-01 19:49:54 +02:00
web: add cta footer & cancel card in plans page
Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>
This commit is contained in:
01zulfi
128
apps/web/src/assets/plans-footer.svg
Normal file
128
apps/web/src/assets/plans-footer.svg
Normal file
@@ -0,0 +1,128 @@
|
||||
<svg width="643" height="642" viewBox="0 0 643 642" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.25" filter="url(#filter0_d_4196_57521)">
|
||||
<g clip-path="url(#clip0_4196_57521)">
|
||||
<path opacity="0.8" d="M642.963 113V630.688H145.186C125.275 590.866 105.364 551.044 135.23 501.266C165.097 451.488 244.741 421.622 274.608 371.844C304.474 322.066 294.519 252.378 324.385 202.6C354.252 152.822 443.852 122.956 503.585 113H642.963Z" fill="url(#paint0_linear_4196_57521)"/>
|
||||
<path d="M642.962 391.755C603.14 411.666 543.407 421.621 493.629 441.533C423.941 466.421 364.207 491.31 314.43 531.132C284.563 553.035 264.652 578.919 234.785 600.821C204.919 620.732 175.052 630.688 145.186 630.688H642.962V391.755Z" fill="url(#paint1_linear_4196_57521)"/>
|
||||
<path d="M423.941 113C453.808 142.867 473.719 182.689 463.763 222.511C453.808 262.333 423.941 287.222 404.03 322.066C384.119 356.911 374.163 391.755 384.119 431.577C394.074 466.422 413.985 491.31 404.03 531.133C394.074 565.977 364.208 588.875 344.297 620.732L304.475 630.688C324.386 600.821 344.297 570.955 339.319 531.133C334.341 491.31 309.452 461.444 304.475 421.622C299.497 381.8 314.43 346.955 334.341 307.133C354.252 267.311 384.119 237.444 389.097 197.622C394.074 162.778 374.163 132.911 364.208 113H423.941Z" fill="url(#paint2_linear_4196_57521)"/>
|
||||
<path d="M642.963 113C613.096 127.933 583.23 152.822 553.363 182.689C513.541 222.511 483.674 267.311 463.763 312.111C443.852 356.911 438.874 401.711 443.852 446.511C448.83 486.333 463.763 521.177 453.808 560.999C443.852 595.844 413.986 618.741 384.119 630.688L344.297 620.732C369.186 608.786 392.083 588.875 402.039 562.99C411.995 536.11 404.03 503.257 392.083 469.408C380.137 433.568 366.199 393.746 374.163 351.933C382.128 310.12 404.03 275.275 423.941 237.444C443.852 199.613 468.741 167.755 493.63 137.889C508.563 120.964 523.497 113 543.408 113H642.963Z" fill="url(#paint3_linear_4196_57521)"/>
|
||||
<path d="M642.962 113H543.407C513.54 117.978 488.651 134.902 463.762 160.787C428.918 197.622 404.029 242.422 389.096 290.209C374.162 337 372.171 384.786 382.127 429.586C389.096 459.453 402.038 484.342 404.029 516.199C406.02 541.088 394.074 562.99 379.14 580.91C364.207 598.83 344.296 610.777 324.385 620.732L384.118 630.688C411.994 618.741 443.851 595.844 455.798 562.99C465.753 533.124 455.798 501.266 443.851 469.408C431.905 437.551 419.958 401.711 421.949 363.88C423.94 326.049 441.86 292.2 461.771 260.342C481.682 228.484 505.576 202.6 531.46 176.715C555.353 152.822 588.207 130.92 613.095 117.978L642.962 113Z" fill="url(#paint4_linear_4196_57521)"/>
|
||||
<path d="M642.961 172.733C613.095 167.756 588.206 177.711 563.317 200.609C533.45 227.489 515.53 262.333 505.575 300.164C495.619 337.995 499.601 375.826 505.575 411.666C511.548 443.524 523.495 471.399 518.517 503.257C513.539 531.133 493.628 553.035 473.717 570.955C453.806 588.875 431.904 600.821 409.006 610.777L384.117 630.688H423.939C443.85 620.733 465.753 605.799 485.664 586.884C505.575 567.968 521.504 543.079 528.472 515.204C535.441 485.337 527.477 453.479 518.517 423.613C509.557 391.755 501.593 359.897 507.566 326.049C513.539 292.2 531.459 262.333 555.352 236.449C575.264 214.547 601.148 197.622 625.041 184.68L642.961 177.711V172.733Z" fill="url(#paint5_linear_4196_57521)"/>
|
||||
<path opacity="0.9" d="M642.963 242.422C625.043 240.431 609.114 252.377 595.176 270.297C575.265 294.191 563.319 324.057 559.336 355.915C555.354 387.773 563.319 417.639 567.301 447.506C571.283 475.382 571.283 501.266 561.328 525.159C551.372 549.053 533.452 565.977 513.541 578.919C493.63 591.861 471.728 598.83 448.83 602.812L409.008 610.777C431.906 600.821 453.808 588.875 473.719 570.955C493.63 553.035 511.55 531.133 518.519 505.248C525.488 479.364 519.514 451.488 511.55 423.613C503.585 395.737 493.63 365.871 497.612 334.013C501.594 302.155 515.532 274.28 535.443 250.386C553.363 228.484 577.256 210.564 601.15 198.618L642.963 177.711V242.422Z" fill="url(#paint6_linear_4196_57521)"/>
|
||||
<path opacity="0.85" d="M642.962 242.422C619.069 237.444 599.158 250.386 583.229 270.297C563.318 294.191 551.371 324.057 547.389 355.915C543.407 385.782 549.38 413.657 553.362 441.533C557.345 467.417 558.34 493.301 549.38 517.195C541.416 539.097 523.496 557.017 505.576 570.955C487.656 584.892 465.754 593.852 443.852 600.821L448.829 602.812C471.727 598.83 495.62 590.866 515.531 576.928C535.443 562.99 551.371 544.075 561.327 521.177C571.282 496.288 571.282 469.408 567.3 441.533C563.318 413.657 555.354 383.791 559.336 353.924C563.318 324.057 577.256 296.182 595.176 272.289C609.113 252.377 627.033 240.431 642.962 242.422Z" fill="url(#paint7_linear_4196_57521)"/>
|
||||
<path opacity="0.95" d="M642.962 302.155C621.06 300.164 605.131 310.12 591.194 327.044C573.274 347.951 563.318 374.831 561.327 401.711C559.336 427.595 567.3 451.489 569.291 475.382C571.282 497.284 565.309 517.195 553.362 533.124C541.416 549.053 523.496 559.008 505.576 566.973L443.852 600.822C465.754 593.853 487.656 584.893 505.576 570.955C523.496 557.017 541.416 539.097 549.38 517.195C557.345 495.293 557.345 469.408 553.362 443.524C549.38 417.64 543.407 389.764 547.389 361.889C551.371 334.013 563.318 309.124 583.229 288.218C599.158 270.298 619.069 260.342 642.962 262.333V302.155Z" fill="url(#paint8_linear_4196_57521)"/>
|
||||
<path opacity="0.9" d="M642.962 113C613.095 122.956 588.207 140.876 563.318 166.76C551.371 180.698 541.416 192.644 533.451 194.635C525.487 196.627 519.513 190.653 527.478 180.698C538.429 167.755 558.34 150.831 583.229 132.911C601.149 119.969 621.06 113 642.962 113Z" fill="url(#paint9_linear_4196_57521)"/>
|
||||
<path opacity="0.75" d="M642.962 172.733C621.06 174.725 601.149 187.667 583.229 204.591C571.282 216.538 563.318 224.502 569.291 228.484C573.273 230.476 583.229 224.502 598.162 212.556C613.095 200.609 629.024 184.68 642.962 180.698V172.733Z" fill="url(#paint10_linear_4196_57521)"/>
|
||||
<g opacity="0.9" filter="url(#filter1_f_4196_57521)">
|
||||
<path d="M642.961 113C603.139 124.947 563.317 152.822 533.45 187.667C511.548 212.555 498.606 240.431 488.65 270.298" stroke="url(#paint11_linear_4196_57521)" stroke-width="2.48888"/>
|
||||
</g>
|
||||
<g filter="url(#filter2_f_4196_57521)">
|
||||
<path d="M642.962 174.724C615.087 180.697 591.193 196.626 571.282 220.52C557.344 236.448 549.38 254.368 551.371 270.297" stroke="#AAFFCC" stroke-opacity="0.5" stroke-width="1.19466"/>
|
||||
</g>
|
||||
<g filter="url(#filter3_f_4196_57521)">
|
||||
<path d="M642.961 244.413C619.068 248.395 599.157 264.324 583.228 284.235C571.281 300.164 565.308 318.084 567.299 334.013" stroke="#55FFAA" stroke-opacity="0.4" stroke-width="0.995554"/>
|
||||
</g>
|
||||
<g opacity="0.6" filter="url(#filter4_f_4196_57521)">
|
||||
<path d="M602.162 221.3C642.027 202.711 665.868 169.463 655.411 147.039C644.955 124.614 604.161 121.506 564.296 140.095C524.43 158.685 500.59 191.933 511.047 214.357C521.503 236.781 562.297 239.89 602.162 221.3Z" fill="url(#paint12_radial_4196_57521)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_4196_57521" x="-49.0371" y="0" width="812" height="685" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="60"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.533333 0 0 0 0 0.2 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4196_57521"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4196_57521" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_f_4196_57521" x="485.877" y="110.215" width="159.034" height="162.069" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.796443" result="effect1_foregroundBlur_4196_57521"/>
|
||||
</filter>
|
||||
<filter id="filter2_f_4196_57521" x="548.878" y="172.547" width="95.802" height="99.4172" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.796443" result="effect1_foregroundBlur_4196_57521"/>
|
||||
</filter>
|
||||
<filter id="filter3_f_4196_57521" x="564.831" y="242.329" width="79.8049" height="93.3386" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="0.796443" result="effect1_foregroundBlur_4196_57521"/>
|
||||
</filter>
|
||||
<filter id="filter4_f_4196_57521" x="504.605" y="123.974" width="157.249" height="113.447" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="1.99111" result="effect1_foregroundBlur_4196_57521"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_4196_57521" x1="120" y1="113" x2="637.661" y2="635.936" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#001A0A"/>
|
||||
<stop offset="1" stop-color="#002D12"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_4196_57521" x1="145.186" y1="391.755" x2="145.186" y2="630.688" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#003318"/>
|
||||
<stop offset="1" stop-color="#000F06"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_4196_57521" x1="466.353" y1="113" x2="169.991" y2="206.223" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#001A0A"/>
|
||||
<stop offset="0.6" stop-color="#004422"/>
|
||||
<stop offset="1" stop-color="#006633"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_4196_57521" x1="344.297" y1="113" x2="792.462" y2="371.557" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#004D20"/>
|
||||
<stop offset="0.5" stop-color="#008833"/>
|
||||
<stop offset="1" stop-color="#005522"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_4196_57521" x1="324.385" y1="113" x2="676.3" y2="473.939" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#00BB55"/>
|
||||
<stop offset="0.3" stop-color="#009944"/>
|
||||
<stop offset="0.7" stop-color="#007733"/>
|
||||
<stop offset="1" stop-color="#003D1A"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_4196_57521" x1="384.117" y1="630.688" x2="776.981" y2="409.241" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#006628"/>
|
||||
<stop offset="0.4" stop-color="#00AA44"/>
|
||||
<stop offset="0.75" stop-color="#00CC55"/>
|
||||
<stop offset="1" stop-color="#00FF77" stop-opacity="0.6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear_4196_57521" x1="642.963" y1="177.711" x2="280.761" y2="373.383" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#001A0A"/>
|
||||
<stop offset="0.6" stop-color="#004422"/>
|
||||
<stop offset="1" stop-color="#006633"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear_4196_57521" x1="443.852" y1="602.812" x2="749.368" y2="434.518" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#006628"/>
|
||||
<stop offset="0.4" stop-color="#00AA44"/>
|
||||
<stop offset="0.75" stop-color="#00CC55"/>
|
||||
<stop offset="1" stop-color="#00FF77" stop-opacity="0.6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint8_linear_4196_57521" x1="443.852" y1="262.082" x2="443.852" y2="600.822" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#003318"/>
|
||||
<stop offset="1" stop-color="#000F06"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint9_linear_4196_57521" x1="523.717" y1="113" x2="600.307" y2="224.355" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#AAFFCC" stop-opacity="0.9"/>
|
||||
<stop offset="0.4" stop-color="#55FFAA" stop-opacity="0.5"/>
|
||||
<stop offset="1" stop-color="#00CC55" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint10_linear_4196_57521" x1="567.26" y1="172.733" x2="620.967" y2="245.17" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#AAFFCC" stop-opacity="0.9"/>
|
||||
<stop offset="0.4" stop-color="#55FFAA" stop-opacity="0.5"/>
|
||||
<stop offset="1" stop-color="#00CC55" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint11_linear_4196_57521" x1="488.65" y1="113" x2="642.961" y2="113" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#00FF88" stop-opacity="0.8"/>
|
||||
<stop offset="0.5" stop-color="#00CC55" stop-opacity="0.4"/>
|
||||
<stop offset="1" stop-color="#008833" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="paint12_radial_4196_57521" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(597.31 154.359) rotate(-25) scale(63.7154 35.8399)">
|
||||
<stop stop-color="#66FFAA" stop-opacity="0.7"/>
|
||||
<stop offset="0.5" stop-color="#00CC55" stop-opacity="0.2"/>
|
||||
<stop offset="1" stop-color="#008833" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<clipPath id="clip0_4196_57521">
|
||||
<rect width="572" height="445" fill="white" transform="translate(70.9629 120)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 13 KiB |
@@ -60,7 +60,7 @@ export const THEME_LIGHT: any = {
|
||||
paragraph: "#858585",
|
||||
background: "#F7F7F7",
|
||||
border: "#EFEFEF",
|
||||
heading: "#4B4B4B",
|
||||
heading: "#6F6F6F",
|
||||
icon: "#666666",
|
||||
separator: "#E8E8E8",
|
||||
placeholder: "#999999",
|
||||
|
||||
@@ -226,7 +226,6 @@ import {
|
||||
mdiHistory,
|
||||
mdiArrowCollapseRight,
|
||||
mdiNoteEditOutline,
|
||||
mdiArrowUp,
|
||||
mdiInbox,
|
||||
mdiConsoleLine,
|
||||
mdiSpellcheck,
|
||||
@@ -260,6 +259,12 @@ import BoxArrowDownIcon from "@notesnook/icons/box-arrow-down.svg?react";
|
||||
import DownloadIcon from "@notesnook/icons/download-simple.svg?react";
|
||||
import FloppyDiskIcon from "@notesnook/icons/floppy-disk.svg?react";
|
||||
import CheckSvg from "@notesnook/icons/check.svg?react";
|
||||
import ShieldCheckSvg from "@notesnook/icons/shield-check.svg?react";
|
||||
import CalendarBlankSvg from "@notesnook/icons/calendar-blank.svg?react";
|
||||
import ProhibitSvg from "@notesnook/icons/prohibit.svg?react";
|
||||
import HandCoinsSvg from "@notesnook/icons/hand-coins.svg?react";
|
||||
import ArrowUpSvg from "@notesnook/icons/arrow-up.svg?react";
|
||||
import LightningSvg from "@notesnook/icons/lightning.svg?react";
|
||||
|
||||
type MDIIconWrapperProps = {
|
||||
title?: string;
|
||||
@@ -625,7 +630,6 @@ export const SessionHistory = createIcon(mdiHistory);
|
||||
export const ColorRemove = createIcon(mdiCloseCircleOutline);
|
||||
export const ExpandSidebar = createIcon(mdiArrowCollapseRight);
|
||||
export const HamburgerMenu = createIcon(mdiMenu);
|
||||
export const ArrowUp = createIcon(mdiArrowUp);
|
||||
export const Inbox = createIcon(mdiInbox);
|
||||
export const SpellCheck = createIcon(mdiSpellcheck);
|
||||
export const ClearTrash = createIcon(mdiDeleteSweepOutline);
|
||||
@@ -654,3 +658,9 @@ export const Copy = createSvgIcon(CopyIcon);
|
||||
export const BoxArrowDown = createSvgIcon(BoxArrowDownIcon);
|
||||
export const Download = createSvgIcon(DownloadIcon);
|
||||
export const FloppyDisk = createSvgIcon(FloppyDiskIcon);
|
||||
export const ShieldCheck = createSvgIcon(ShieldCheckSvg);
|
||||
export const CalendarBlank = createSvgIcon(CalendarBlankSvg);
|
||||
export const Prohibit = createSvgIcon(ProhibitSvg);
|
||||
export const HandCoins = createSvgIcon(HandCoinsSvg);
|
||||
export const ArrowUp = createSvgIcon(ArrowUpSvg);
|
||||
export const Lightning = createSvgIcon(LightningSvg);
|
||||
|
||||
@@ -25,7 +25,12 @@ import {
|
||||
FileDoc,
|
||||
Picture,
|
||||
CheckSvgIcon,
|
||||
ArrowRightSvgIcon
|
||||
ArrowRightSvgIcon,
|
||||
ShieldCheck,
|
||||
CaretDown,
|
||||
CalendarBlank,
|
||||
Prohibit,
|
||||
HandCoins
|
||||
} from "../../components/icons";
|
||||
import { Plan } from "./types";
|
||||
import { PERIOD_METADATA, PLAN_METADATA, usePlans } from "./plans";
|
||||
@@ -52,6 +57,8 @@ import Accordion from "../../components/accordion";
|
||||
import { useStore as useUserStore } from "../../stores/user-store";
|
||||
import { getCurrencySymbol } from "../../common/currencies";
|
||||
import Star from "../../assets/star.svg";
|
||||
import { DialogManager } from "../../common/dialog-manager";
|
||||
import Dialog from "../../components/dialog";
|
||||
|
||||
const PLAN_CARD_FEATURES = [
|
||||
getFeature("storage"),
|
||||
@@ -200,208 +207,274 @@ export function PlansList(props: PlansListProps) {
|
||||
</Button>
|
||||
))}
|
||||
</Flex>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: ["column", "row"],
|
||||
gap: "spacing8",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "100%"
|
||||
}}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loading />
|
||||
) : (
|
||||
plans
|
||||
.filter(
|
||||
(p) =>
|
||||
p.plan !== SubscriptionPlan.EDUCATION &&
|
||||
p.period === selectedPeriod
|
||||
)
|
||||
.map((plan) => {
|
||||
const metadata = PLAN_METADATA[plan.plan];
|
||||
const isRecommended = recommendedPlan === plan.plan;
|
||||
return (
|
||||
<Flex
|
||||
key={plan.id}
|
||||
data-test-id={`checkout-plan`}
|
||||
sx={{
|
||||
bg: isRecommended ? "background-selected" : "background",
|
||||
border: isRecommended
|
||||
? "1px solid var(--accent)"
|
||||
: "1px solid var(--border-secondary)",
|
||||
borderRadius: "radius4",
|
||||
flexDirection: "column",
|
||||
gap: "spacing11",
|
||||
px: "spacing7",
|
||||
py: "spacing11",
|
||||
flex: "1 0 0",
|
||||
maxWidth: "500px",
|
||||
boxShadow: isRecommended
|
||||
? "0px 0px 12.5px rgba(0,0,0,0.12)"
|
||||
: "0px 0px 12.5px rgba(0,0,0,0.08)"
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: ["column", "row"],
|
||||
gap: "spacing8",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "100%"
|
||||
}}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loading />
|
||||
) : (
|
||||
plans
|
||||
.filter(
|
||||
(p) =>
|
||||
p.plan !== SubscriptionPlan.EDUCATION &&
|
||||
p.period === selectedPeriod
|
||||
)
|
||||
.map((plan) => {
|
||||
const metadata = PLAN_METADATA[plan.plan];
|
||||
const isRecommended = recommendedPlan === plan.plan;
|
||||
return (
|
||||
<Flex
|
||||
key={plan.id}
|
||||
data-test-id={`checkout-plan`}
|
||||
sx={{
|
||||
bg: isRecommended ? "background-selected" : "background",
|
||||
border: isRecommended
|
||||
? "1px solid var(--accent)"
|
||||
: "1px solid var(--border-secondary)",
|
||||
borderRadius: "radius4",
|
||||
flexDirection: "column",
|
||||
gap: "32px",
|
||||
width: "100%"
|
||||
gap: "spacing11",
|
||||
p: "spacing7",
|
||||
flex: "1 0 0",
|
||||
maxWidth: "500px",
|
||||
boxShadow: isRecommended
|
||||
? "0px 0px 12.5px rgba(0,0,0,0.12)"
|
||||
: "0px 0px 12.5px rgba(0,0,0,0.08)"
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
gap: "12px"
|
||||
gap: "32px",
|
||||
width: "100%"
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center"
|
||||
flexDirection: "column",
|
||||
gap: "12px"
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
variant="heading"
|
||||
sx={{ fontSize: "2xl" }}
|
||||
data-test-id="title"
|
||||
<Flex
|
||||
sx={{
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center"
|
||||
}}
|
||||
>
|
||||
{metadata.title}
|
||||
</Text>
|
||||
{isRecommended && (
|
||||
<Flex
|
||||
sx={{
|
||||
bg: "accent",
|
||||
borderRadius: "50px",
|
||||
px: "8px",
|
||||
py: "4px"
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
variant="subBody"
|
||||
sx={{
|
||||
color: "accentForeground",
|
||||
fontSize: "md",
|
||||
fontWeight: 500,
|
||||
lineHeight: "1"
|
||||
}}
|
||||
>
|
||||
Recommended
|
||||
</Text>
|
||||
</Flex>
|
||||
)}
|
||||
</Flex>
|
||||
<Text
|
||||
sx={{
|
||||
fontSize: "sm",
|
||||
color: "paragraph",
|
||||
fontWeight: "normal"
|
||||
}}
|
||||
>
|
||||
{metadata.subtitle}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex sx={{ flexDirection: "column" }}>
|
||||
{plan.recurring ? (
|
||||
<RecurringPricing plan={plan} />
|
||||
) : (
|
||||
<OneTimePricing plan={plan} />
|
||||
)}
|
||||
</Flex>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
gap: "16px"
|
||||
}}
|
||||
>
|
||||
{PLAN_CARD_FEATURES.map((feature, index) => {
|
||||
const caption =
|
||||
feature.availability[planToAvailability(plan.plan)]
|
||||
.caption;
|
||||
return (
|
||||
<Flex
|
||||
key={feature.id}
|
||||
sx={{ flexDirection: "column", gap: "16px" }}
|
||||
<Text
|
||||
variant="heading"
|
||||
sx={{ fontSize: "2xl" }}
|
||||
data-test-id="title"
|
||||
>
|
||||
{metadata.title}
|
||||
</Text>
|
||||
{isRecommended && (
|
||||
<Flex
|
||||
sx={{
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center"
|
||||
bg: "accent",
|
||||
borderRadius: "50px",
|
||||
px: "8px",
|
||||
py: "4px"
|
||||
}}
|
||||
>
|
||||
<Flex sx={{ gap: "12px", alignItems: "center" }}>
|
||||
<FeatureIcon id={feature.id} />
|
||||
<Text
|
||||
sx={{
|
||||
fontSize: "18px",
|
||||
color: "paragraph",
|
||||
fontWeight: "normal"
|
||||
}}
|
||||
>
|
||||
{feature.title}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Text
|
||||
variant="subBody"
|
||||
sx={{
|
||||
fontSize: "title",
|
||||
fontWeight: "bold",
|
||||
color: "paragraph"
|
||||
color: "accentForeground",
|
||||
fontSize: "md",
|
||||
fontWeight: 500,
|
||||
lineHeight: "1"
|
||||
}}
|
||||
>
|
||||
<FeatureCaption caption={caption} />
|
||||
Recommended
|
||||
</Text>
|
||||
</Flex>
|
||||
{index < PLAN_CARD_FEATURES.length - 1 && (
|
||||
<Box
|
||||
)}
|
||||
</Flex>
|
||||
<Text
|
||||
sx={{
|
||||
fontSize: "sm",
|
||||
color: "paragraph",
|
||||
fontWeight: "normal"
|
||||
}}
|
||||
>
|
||||
{metadata.subtitle}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex sx={{ flexDirection: "column" }}>
|
||||
{plan.recurring ? (
|
||||
<RecurringPricing plan={plan} />
|
||||
) : (
|
||||
<OneTimePricing plan={plan} />
|
||||
)}
|
||||
</Flex>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
gap: "16px"
|
||||
}}
|
||||
>
|
||||
{PLAN_CARD_FEATURES.map((feature, index) => {
|
||||
const caption =
|
||||
feature.availability[planToAvailability(plan.plan)]
|
||||
.caption;
|
||||
return (
|
||||
<Flex
|
||||
key={feature.id}
|
||||
sx={{ flexDirection: "column", gap: "16px" }}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
borderTop:
|
||||
"1px solid var(--border-secondary)",
|
||||
width: "100%"
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center"
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Flex>
|
||||
);
|
||||
})}
|
||||
>
|
||||
<Flex
|
||||
sx={{ gap: "12px", alignItems: "center" }}
|
||||
>
|
||||
<FeatureIcon id={feature.id} />
|
||||
<Text
|
||||
sx={{
|
||||
fontSize: "18px",
|
||||
color: "paragraph",
|
||||
fontWeight: "normal"
|
||||
}}
|
||||
>
|
||||
{feature.title}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Text
|
||||
sx={{
|
||||
fontSize: "title",
|
||||
fontWeight: "bold",
|
||||
color: "paragraph"
|
||||
}}
|
||||
>
|
||||
<FeatureCaption caption={caption} />
|
||||
</Text>
|
||||
</Flex>
|
||||
{index < PLAN_CARD_FEATURES.length - 1 && (
|
||||
<Box
|
||||
sx={{
|
||||
borderTop:
|
||||
"1px solid var(--border-secondary)",
|
||||
width: "100%"
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Flex>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
</Flex>
|
||||
{selectedPlan === plan.id ? (
|
||||
<Flex sx={{ alignItems: "center", gap: 1 }}>
|
||||
<CheckCircleOutline color="accent" size={16} />
|
||||
<Text variant="subBody">You are on this plan.</Text>
|
||||
</Flex>
|
||||
) : (
|
||||
<Button
|
||||
variant={isRecommended ? "new_accent" : "new_secondary"}
|
||||
onClick={() => onPlanSelected(plan)}
|
||||
sx={{
|
||||
width: "100%"
|
||||
}}
|
||||
>
|
||||
Select Plan
|
||||
</Button>
|
||||
)}
|
||||
</Flex>
|
||||
{selectedPlan === plan.id ? (
|
||||
<Flex sx={{ alignItems: "center", gap: 1 }}>
|
||||
<CheckCircleOutline color="accent" size={16} />
|
||||
<Text variant="subBody">You are on this plan.</Text>
|
||||
</Flex>
|
||||
) : (
|
||||
<Button
|
||||
variant={isRecommended ? "new_accent" : "new_secondary"}
|
||||
onClick={() => onPlanSelected(plan)}
|
||||
sx={{
|
||||
width: "100%"
|
||||
}}
|
||||
>
|
||||
Select Plan
|
||||
</Button>
|
||||
)}
|
||||
</Flex>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
{/* <Text variant="body" sx={{ alignSelf: "center", mt: 2 }}> */}
|
||||
{/* Cancel anytime. {PERIOD_METADATA[selectedPeriod].refundDays}-day */}
|
||||
{/* money-back guarantee. */}
|
||||
{/* </Text> */}
|
||||
{/* <Button
|
||||
variant="tertiary"
|
||||
sx={{ alignSelf: "center", mt: 25 }}
|
||||
onClick={() =>
|
||||
document
|
||||
.getElementById("compare-plans")
|
||||
?.scrollIntoView({ behavior: "smooth" })
|
||||
}
|
||||
>
|
||||
Compare all plans
|
||||
</Button> */}
|
||||
);
|
||||
})
|
||||
)}
|
||||
</Flex>
|
||||
<Flex
|
||||
sx={{
|
||||
mt: "spacing7",
|
||||
width: "100%",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
p: "spacing6",
|
||||
bg: "background",
|
||||
border: "1px solid",
|
||||
borderColor: "border",
|
||||
borderRadius: "radius2"
|
||||
}}
|
||||
>
|
||||
<Flex sx={{ alignItems: "flex-start", gap: "spacing6" }}>
|
||||
<Flex
|
||||
sx={{
|
||||
width: "30px",
|
||||
height: "30px",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
bg: "background-secondary",
|
||||
borderRadius: "radius1",
|
||||
flexShrink: 0
|
||||
}}
|
||||
>
|
||||
<ShieldCheck size={20} color="icon" />
|
||||
</Flex>
|
||||
<Flex sx={{ flexDirection: "column", gap: "spacing3" }}>
|
||||
<Text
|
||||
sx={{
|
||||
color: "heading",
|
||||
fontSize: "lg",
|
||||
fontWeight: 600,
|
||||
lineHeight: 1
|
||||
}}
|
||||
>
|
||||
Cancel anytime
|
||||
</Text>
|
||||
<Text
|
||||
sx={{
|
||||
color: "paragraph",
|
||||
fontSize: "sm",
|
||||
fontWeight: 400,
|
||||
lineHeight: 1
|
||||
}}
|
||||
>
|
||||
14-day money back guarantee
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Button
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: "spacing3"
|
||||
}}
|
||||
onClick={() => CancelInfoDialog.show({})}
|
||||
>
|
||||
<Text
|
||||
sx={{
|
||||
color: "heading-secondary",
|
||||
fontSize: "sm",
|
||||
fontWeight: 600,
|
||||
lineHeight: 1,
|
||||
whiteSpace: "nowrap"
|
||||
}}
|
||||
>
|
||||
Learn more
|
||||
</Text>
|
||||
<CaretDown
|
||||
sx={{
|
||||
rotate: "-90deg"
|
||||
}}
|
||||
size={15}
|
||||
color="icon-secondary"
|
||||
/>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -621,7 +694,7 @@ function RecurringPricing(props: PricingProps) {
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
/Month
|
||||
/ Month
|
||||
</Text>
|
||||
)}
|
||||
</Text>
|
||||
@@ -1216,3 +1289,122 @@ function toMonthlyPrice(price: number, period: Period) {
|
||||
? (price / (12 * 5)).toFixed(2)
|
||||
: (price / 12).toFixed(2);
|
||||
}
|
||||
|
||||
const CancelInfoDialog = DialogManager.register(function CancelInfoDialog(
|
||||
props
|
||||
) {
|
||||
return (
|
||||
<Dialog
|
||||
isOpen={true}
|
||||
title="Cancel anytime, hassle-free"
|
||||
description="You're in control. Cancel at anytime, no cancellation fees, no penalties ever. "
|
||||
showCloseButton={true}
|
||||
onClose={() => props.onClose(false)}
|
||||
width={550}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
my: "spacing7",
|
||||
flexDirection: "column",
|
||||
gap: "spacing4",
|
||||
width: "100%"
|
||||
}}
|
||||
>
|
||||
<CancelInfoCard
|
||||
icon={CalendarBlank}
|
||||
title="Cancel anytime"
|
||||
description="Your subscription will remain active until the end of your current billing period. You won't be charged again unless you renew."
|
||||
/>
|
||||
<CancelInfoCard
|
||||
icon={Prohibit}
|
||||
title="No cancellation fees"
|
||||
description="We don't charge any fees for canceling your plan. You only pay for the subscription period you've already purchased."
|
||||
/>
|
||||
<CancelInfoCard
|
||||
icon={HandCoins}
|
||||
title="Refund policy"
|
||||
description="If you're not satisfied, you can request a refund by contacting our support team within 14 days of your purchase, subject to our refund policy."
|
||||
/>
|
||||
</Flex>
|
||||
</Dialog>
|
||||
);
|
||||
});
|
||||
|
||||
type CancelInfoCardProps = {
|
||||
icon: React.ComponentType<{ size: number; color?: string }>;
|
||||
title: string;
|
||||
description: string;
|
||||
};
|
||||
|
||||
function CancelInfoCard(props: CancelInfoCardProps) {
|
||||
const Icon = props.icon;
|
||||
|
||||
return (
|
||||
<Flex
|
||||
sx={{
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
px: "spacing3",
|
||||
py: "spacing4",
|
||||
bg: "background-secondary",
|
||||
borderRadius: "12px"
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center",
|
||||
gap: "spacing3",
|
||||
flex: 1,
|
||||
minWidth: 0
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "32px",
|
||||
height: "32px",
|
||||
bg: "background-tertiary",
|
||||
borderRadius: "radius1",
|
||||
flexShrink: 0
|
||||
}}
|
||||
>
|
||||
<Icon size={15} color="icon" />
|
||||
</Flex>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
gap: "spacing3",
|
||||
alignItems: "flex-start",
|
||||
flex: 1,
|
||||
minWidth: 0
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
sx={{
|
||||
color: "heading",
|
||||
fontSize: "sm",
|
||||
fontWeight: 500,
|
||||
lineHeight: 1,
|
||||
whiteSpace: "nowrap"
|
||||
}}
|
||||
>
|
||||
{props.title}
|
||||
</Text>
|
||||
<Text
|
||||
sx={{
|
||||
color: "paragraph",
|
||||
fontSize: "xs",
|
||||
fontWeight: 400,
|
||||
lineHeight: 1.4
|
||||
}}
|
||||
>
|
||||
{props.description}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -28,11 +28,13 @@ import {
|
||||
import { FlexScrollContainer } from "../components/scroll-container";
|
||||
import { Flex, Text, Button, Image, Box } from "@notesnook/ui";
|
||||
import { useStore as useUserStore } from "../stores/user-store";
|
||||
import { useStore as useThemeStore } from "../stores/theme-store";
|
||||
import { useEffect } from "react";
|
||||
import { getQueryParams, hardNavigate } from "../navigation";
|
||||
import { isUserSubscribed } from "../hooks/use-is-user-premium";
|
||||
import { ChevronLeft } from "../components/icons";
|
||||
import { ArrowUp, ChevronLeft, Lightning } from "../components/icons";
|
||||
import Star from "../assets/star.svg";
|
||||
import PlansFooter from "../assets/plans-footer.svg";
|
||||
|
||||
function Plans() {
|
||||
const user = useUserStore((store) => store.user);
|
||||
@@ -173,12 +175,236 @@ function Plans() {
|
||||
<ComparePlans />
|
||||
<TestimonialsCarousel />
|
||||
<Footer />
|
||||
<PlansCTA />
|
||||
</Flex>
|
||||
</FlexScrollContainer>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
function PlansCTA() {
|
||||
const colorScheme = useThemeStore((store) => store.colorScheme);
|
||||
const darkTheme = useThemeStore((store) => store.darkTheme);
|
||||
const lightTheme = useThemeStore((store) => store.lightTheme);
|
||||
const inverseBackground =
|
||||
colorScheme === "dark"
|
||||
? lightTheme.scopes.base.primary.background
|
||||
: darkTheme.scopes.base.primary.background;
|
||||
const inverseHeading =
|
||||
colorScheme === "dark"
|
||||
? lightTheme.scopes.base.primary.heading
|
||||
: darkTheme.scopes.base.primary.heading;
|
||||
const inverseParagraph =
|
||||
colorScheme === "dark"
|
||||
? lightTheme.scopes.base.primary.paragraph
|
||||
: darkTheme.scopes.base.primary.paragraph;
|
||||
const inverseBackgroundSecondary =
|
||||
colorScheme === "dark"
|
||||
? lightTheme.scopes.base.secondary.background
|
||||
: darkTheme.scopes.base.secondary.background;
|
||||
const inverseAccentForeground =
|
||||
colorScheme === "dark"
|
||||
? lightTheme.scopes.base.primary.accentForeground
|
||||
: darkTheme.scopes.base.primary.accentForeground;
|
||||
const inverseBorder =
|
||||
colorScheme === "dark"
|
||||
? lightTheme.scopes.base.primary.border
|
||||
: darkTheme.scopes.base.primary.border;
|
||||
const inverseParagraphSecondary =
|
||||
colorScheme === "dark"
|
||||
? lightTheme.scopes.base.secondary.paragraph
|
||||
: darkTheme.scopes.base.secondary.paragraph;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex
|
||||
sx={{
|
||||
position: "relative",
|
||||
overflow: "hidden",
|
||||
background: inverseBackground,
|
||||
px: "spacing14",
|
||||
py: "70px"
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={PlansFooter}
|
||||
alt=""
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
right: 100,
|
||||
scale: 1.6,
|
||||
width: "572",
|
||||
height: "100%",
|
||||
display: ["none", "block"]
|
||||
}}
|
||||
/>
|
||||
<Flex
|
||||
sx={{
|
||||
position: "relative",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center",
|
||||
gap: "spacing7",
|
||||
zIndex: 1
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
alignItems: "center",
|
||||
gap: "spacing4",
|
||||
bg: inverseBackgroundSecondary,
|
||||
borderRadius: "radius2",
|
||||
p: "spacing3"
|
||||
}}
|
||||
>
|
||||
<Lightning size={15} color={inverseAccentForeground} />
|
||||
<Text
|
||||
sx={{
|
||||
color: inverseAccentForeground,
|
||||
fontSize: "sm",
|
||||
lineHeight: 1,
|
||||
whiteSpace: "nowrap"
|
||||
}}
|
||||
>
|
||||
UNLOCK THE FULL POWER OF NOTESNOOK
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
gap: "spacing9"
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
gap: "spacing3"
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
sx={{
|
||||
fontSize: "4xl",
|
||||
lineHeight: 1.2,
|
||||
fontWeight: 600,
|
||||
color: inverseHeading
|
||||
}}
|
||||
>
|
||||
Your notes deserve more than basic storage
|
||||
</Text>
|
||||
<Text
|
||||
sx={{
|
||||
color: inverseParagraph,
|
||||
fontSize: "sm",
|
||||
lineHeight: 1.5
|
||||
}}
|
||||
>
|
||||
Unlock encrypted syncing, larger storage, premium productivity
|
||||
features, and everything you need to write with confidence.
|
||||
</Text>
|
||||
</Flex>
|
||||
<Button
|
||||
onClick={() =>
|
||||
document
|
||||
.getElementById("select-plan")
|
||||
?.scrollIntoView({ behavior: "smooth" })
|
||||
}
|
||||
variant="new_accent"
|
||||
sx={{
|
||||
alignSelf: "flex-start",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: "spacing3"
|
||||
}}
|
||||
>
|
||||
Choose your plan
|
||||
<ArrowUp size={15} color="accentForeground" />
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex
|
||||
sx={{
|
||||
alignItems: "flex-start",
|
||||
borderTop: "1px solid",
|
||||
borderColor: inverseBorder,
|
||||
flexDirection: "column",
|
||||
gap: "spacing11",
|
||||
px: "spacing14",
|
||||
py: "spacing9",
|
||||
bg: inverseBackground
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
width: "100%"
|
||||
}}
|
||||
>
|
||||
<Flex sx={{ alignItems: "center", gap: "spacing4" }}>
|
||||
<Text
|
||||
aria-hidden="true"
|
||||
sx={{
|
||||
color: inverseParagraphSecondary,
|
||||
fontSize: "sm",
|
||||
lineHeight: 1
|
||||
}}
|
||||
>
|
||||
©
|
||||
</Text>
|
||||
<Text
|
||||
sx={{
|
||||
color: inverseParagraphSecondary,
|
||||
fontSize: "sm",
|
||||
lineHeight: 1,
|
||||
whiteSpace: "nowrap"
|
||||
}}
|
||||
>
|
||||
2026 Streetwriters (Private) Ltd.
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex sx={{ gap: "spacing7" }}>
|
||||
<Text
|
||||
as="a"
|
||||
href="https://notesnook.com/privacy"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
sx={{
|
||||
color: inverseParagraph,
|
||||
fontSize: "sm",
|
||||
lineHeight: 1,
|
||||
textDecoration: "none",
|
||||
whiteSpace: "nowrap"
|
||||
}}
|
||||
>
|
||||
Privacy policy
|
||||
</Text>
|
||||
<Text
|
||||
as="a"
|
||||
href="https://notesnook.com/terms"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
sx={{
|
||||
color: inverseParagraph,
|
||||
fontSize: "sm",
|
||||
lineHeight: 1,
|
||||
textDecoration: "none",
|
||||
whiteSpace: "nowrap"
|
||||
}}
|
||||
>
|
||||
Terms of service
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Plans;
|
||||
|
||||
function openURL(url: string) {
|
||||
|
||||
5
packages/icons/svgs/arrow-up.svg
Normal file
5
packages/icons/svgs/arrow-up.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="ArrowUp">
|
||||
<path id="Vector" d="M12.2162 7.05996C12.1509 7.12551 12.0733 7.17752 11.9878 7.21301C11.9023 7.2485 11.8107 7.26677 11.7182 7.26677C11.6256 7.26677 11.534 7.2485 11.4485 7.21301C11.3631 7.17752 11.2854 7.12551 11.2201 7.05996L8.20313 4.04297V12.6563C8.20313 12.8427 8.12905 13.0216 7.99718 13.1534C7.86532 13.2853 7.68648 13.3594 7.5 13.3594C7.31352 13.3594 7.13468 13.2853 7.00282 13.1534C6.87095 13.0216 6.79688 12.8427 6.79688 12.6563V4.04297L3.77871 7.05996C3.64662 7.19205 3.46747 7.26626 3.28066 7.26626C3.09386 7.26626 2.91471 7.19205 2.78262 7.05996C2.65053 6.92787 2.57632 6.74872 2.57632 6.56191C2.57632 6.37511 2.65053 6.19596 2.78262 6.06387L7.00137 1.84512C7.06669 1.77957 7.14431 1.72756 7.22978 1.69207C7.31524 1.65658 7.40687 1.63831 7.49941 1.63831C7.59196 1.63831 7.68359 1.65658 7.76905 1.69207C7.85452 1.72756 7.93214 1.77957 7.99746 1.84512L12.2162 6.06387C12.2818 6.12919 12.3338 6.20681 12.3693 6.29228C12.4047 6.37774 12.423 6.46937 12.423 6.56191C12.423 6.65446 12.4047 6.74609 12.3693 6.83155C12.3338 6.91702 12.2818 6.99464 12.2162 7.05996Z" fill="currentColor"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
3
packages/icons/svgs/calendar-blank.svg
Normal file
3
packages/icons/svgs/calendar-blank.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.1875 1.875H10.7812V1.40625C10.7812 1.28193 10.7319 1.1627 10.644 1.07479C10.556 0.986886 10.4368 0.9375 10.3125 0.9375C10.1882 0.9375 10.069 0.986886 9.98104 1.07479C9.89314 1.1627 9.84375 1.28193 9.84375 1.40625V1.875H5.15625V1.40625C5.15625 1.28193 5.10686 1.1627 5.01896 1.07479C4.93105 0.986886 4.81182 0.9375 4.6875 0.9375C4.56318 0.9375 4.44395 0.986886 4.35604 1.07479C4.26814 1.1627 4.21875 1.28193 4.21875 1.40625V1.875H2.8125C2.56386 1.875 2.3254 1.97377 2.14959 2.14959C1.97377 2.3254 1.875 2.56386 1.875 2.8125V12.1875C1.875 12.4361 1.97377 12.6746 2.14959 12.8504C2.3254 13.0262 2.56386 13.125 2.8125 13.125H12.1875C12.4361 13.125 12.6746 13.0262 13.125 12.1875V2.8125C13.125 2.56386 13.0262 2.3254 12.8504 2.14959C12.6746 1.97377 12.4361 1.875 12.1875 1.875ZM4.21875 2.8125V3.28125C4.21875 3.40557 4.26814 3.5248 4.35604 3.61271C4.44395 3.70061 4.56318 3.75 4.6875 3.75C4.81182 3.75 4.93105 3.70061 5.01896 3.61271C5.10686 3.5248 5.15625 3.40557 5.15625 3.28125V2.8125H9.84375V3.28125C9.84375 3.40557 9.89314 3.5248 9.98104 3.61271C10.069 3.70061 10.1882 3.75 10.3125 3.75C10.4368 3.75 10.556 3.70061 10.644 3.61271C10.7319 3.5248 10.7812 3.40557 10.7812 3.28125V2.8125H12.1875V4.6875H2.8125V2.8125H4.21875ZM12.1875 12.1875H2.8125V5.625H12.1875V12.1875Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
3
packages/icons/svgs/hand-coins.svg
Normal file
3
packages/icons/svgs/hand-coins.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.4959 8.26523C13.3215 8.13103 13.1184 8.03885 12.9026 7.99587C12.6868 7.95288 12.4639 7.96024 12.2514 8.01738L9.7998 8.58105C9.85684 8.34011 9.8586 8.08939 9.80496 7.84767C9.75131 7.60595 9.64365 7.3795 9.49004 7.18531C9.33644 6.99112 9.14087 6.83421 8.91799 6.72635C8.69512 6.61849 8.45073 6.56247 8.20312 6.5625H5.26992C5.02359 6.56188 4.77958 6.61008 4.55199 6.70432C4.3244 6.79855 4.11774 6.93695 3.94394 7.11152L2.61855 8.4375H0.9375C0.688859 8.4375 0.450403 8.53627 0.274587 8.71209C0.098772 8.8879 0 9.12636 0 9.375L0 11.7187C0 11.9674 0.098772 12.2058 0.274587 12.3817C0.450403 12.5575 0.688859 12.6562 0.9375 12.6562H7.03125C7.06958 12.6563 7.10776 12.6515 7.14492 12.6422L10.8949 11.7047C10.9188 11.699 10.9422 11.6912 10.9646 11.6812L13.2422 10.7121L13.268 10.7004C13.4869 10.591 13.6743 10.4277 13.8126 10.2259C13.951 10.024 14.0356 9.7903 14.0587 9.5467C14.0817 9.30309 14.0423 9.05763 13.9443 8.83343C13.8463 8.60924 13.6927 8.4137 13.4982 8.26523H13.4959ZM0.9375 9.375H2.34375V11.7187H0.9375V9.375ZM12.8572 9.85606L10.6307 10.8041L6.97266 11.7187H3.28125V9.1002L4.60723 7.7748C4.69397 7.68737 4.79722 7.61805 4.91099 7.57087C5.02475 7.5237 5.14676 7.49961 5.26992 7.5H8.20312C8.3896 7.5 8.56845 7.57408 8.70031 7.70594C8.83217 7.8378 8.90625 8.01664 8.90625 8.20312C8.90625 8.38961 8.83217 8.56845 8.70031 8.70031C8.56845 8.83217 8.3896 8.90625 8.20312H6.5625C6.43818 8.90625 6.31895 8.95564 6.23104 9.04354C6.14314 9.13145 6.09375 9.25068 6.09375 9.375C6.09375 9.49932 6.14314 9.61855 6.23104 9.70646C6.31895 9.79436 6.43818 9.84375 6.5625 9.84375H8.4375C8.47278 9.84365 8.50795 9.83972 8.54238 9.83203L12.4682 8.9291L12.4863 8.92441C12.6062 8.89114 12.7341 8.90337 12.8455 8.95874C12.9568 9.01411 13.0438 9.10871 13.0896 9.22434C13.1354 9.33996 13.1368 9.46845 13.0936 9.58507C13.0504 9.7017 12.9656 9.79821 12.8555 9.85606H12.8572ZM9.60937 5.625C9.72519 5.62513 9.84081 5.61572 9.95508 5.59687C10.0836 5.97864 10.3188 6.31562 10.6327 6.56798C10.9467 6.82033 11.3264 6.97751 11.7268 7.02093C12.1273 7.06434 12.5318 6.99218 12.8926 6.81298C13.2534 6.63377 13.5553 6.35502 13.7626 6.00967C13.97 5.66432 14.0741 5.26682 14.0627 4.86416C14.0513 4.4615 13.9249 4.07053 13.6983 3.73746C13.4718 3.40439 13.1546 3.14316 12.7843 2.98465C12.4139 2.82613 12.006 2.77697 11.6086 2.84297C11.4848 2.47514 11.262 2.14859 10.9646 1.89924C10.6672 1.6499 10.3068 1.48743 9.92306 1.42971C9.53929 1.37199 9.14703 1.42126 8.78946 1.57211C8.43189 1.72295 8.12287 1.96951 7.89639 2.28467C7.66992 2.59982 7.53478 2.97134 7.50584 3.35834C7.4769 3.74535 7.55529 4.13284 7.73238 4.47816C7.90947 4.82349 8.1784 5.11327 8.50956 5.31561C8.84072 5.51795 9.22129 5.62501 9.60937 5.625ZM13.125 4.92187C13.125 5.15365 13.0563 5.38022 12.9275 5.57293C12.7987 5.76565 12.6157 5.91585 12.4016 6.00455C12.1874 6.09324 11.9518 6.11645 11.7245 6.07123C11.4972 6.02602 11.2884 5.91441 11.1245 5.75052C10.9606 5.58663 10.849 5.37782 10.8038 5.1505C10.7585 4.92318 10.7818 4.68755 10.8705 4.47342C10.9591 4.25929 11.1094 4.07626 11.3021 3.9475C11.4948 3.81873 11.7213 3.75 11.9531 3.75C12.2639 3.75 12.562 3.87346 12.7818 4.09323C13.0015 4.313 13.125 4.61107 13.125 4.92187ZM9.60937 2.34375C9.86502 2.34388 10.1136 2.4276 10.3173 2.58216C10.5209 2.73671 10.6684 2.95362 10.7373 3.1998C10.4972 3.36873 10.2951 3.5859 10.1437 3.83743C9.99237 4.08896 9.89519 4.36931 9.8584 4.66055C9.77656 4.67822 9.6931 4.68725 9.60937 4.6875C9.29857 4.6875 9.0005 4.56403 8.78073 4.34427C8.56096 4.1245 8.4375 3.82643 8.4375 3.51562C8.4375 3.20482 8.56096 2.90675 8.78073 2.68698C9.0005 2.46721 9.29857 2.34375 9.60937 2.34375Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
5
packages/icons/svgs/lightning.svg
Normal file
5
packages/icons/svgs/lightning.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Lightning">
|
||||
<path id="Vector" d="M12.6439 6.92402C12.6262 6.84889 12.5902 6.77931 12.5391 6.72146C12.4879 6.6636 12.4233 6.61926 12.351 6.59238L8.97539 5.32617L9.83437 1.02949C9.85383 0.929661 9.84028 0.826212 9.79578 0.734755C9.75128 0.643298 9.67824 0.568797 9.58768 0.522493C9.49712 0.476189 9.39396 0.460595 9.29376 0.478065C9.19357 0.495534 9.10177 0.545119 9.03223 0.619336L2.46973 7.65059C2.41643 7.70675 2.37787 7.77524 2.3575 7.84994C2.33713 7.92464 2.33558 8.00322 2.35299 8.07867C2.3704 8.15411 2.40623 8.22407 2.45727 8.28229C2.50832 8.34051 2.57299 8.38518 2.64551 8.41231L6.02227 9.67852L5.16563 13.9705C5.14617 14.0703 5.15972 14.1738 5.20422 14.2652C5.24872 14.3567 5.32176 14.4312 5.41232 14.4775C5.50288 14.5238 5.60604 14.5394 5.70624 14.5219C5.80643 14.5045 5.89823 14.4549 5.96777 14.3807L12.5303 7.34941C12.5826 7.29324 12.6203 7.22507 12.6402 7.1509C12.66 7.07672 12.6613 6.99882 12.6439 6.92402ZM6.4084 12.5391L7.02187 9.46992C7.04383 9.36107 7.02643 9.24796 6.97278 9.15075C6.91913 9.05353 6.8327 8.97851 6.72891 8.93906L3.63281 7.77598L8.59102 2.46387L7.97813 5.53301C7.95617 5.64186 7.97357 5.75497 8.02722 5.85218C8.08087 5.9494 8.1673 6.02442 8.27109 6.06387L11.3648 7.22402L6.4084 12.5391Z" fill="currentColor"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
3
packages/icons/svgs/prohibit.svg
Normal file
3
packages/icons/svgs/prohibit.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.5 1.40625C6.29477 1.40625 5.11661 1.76364 4.11449 2.43323C3.11238 3.10282 2.33133 4.05454 1.87011 5.16802C1.40889 6.28151 1.28821 7.50676 1.52334 8.68883C1.75847 9.8709 2.33884 10.9567 3.19107 11.8089C4.04329 12.6612 5.1291 13.2415 6.31117 13.4767C7.49324 13.7118 8.71849 13.5911 9.83198 13.1299C10.9455 12.6687 11.8972 11.8876 12.5668 10.8855C13.2364 9.88339 13.5937 8.70523 13.5937 7.5C13.592 5.88436 12.9495 4.33538 11.807 3.19295C10.6646 2.05052 9.11564 1.40796 7.5 1.40625ZM12.6562 7.5C12.6574 8.70559 12.2341 9.87309 11.4604 10.7977L4.20234 3.53906C4.95527 2.91268 5.87103 2.5137 6.84245 2.3888C7.81386 2.26389 8.80076 2.41824 9.68766 2.83378C10.5746 3.24932 11.3248 3.90886 11.8505 4.73522C12.3762 5.56159 12.6557 6.52058 12.6562 7.5ZM2.34375 7.5C2.34255 6.29441 2.76595 5.12691 3.53965 4.20234L10.7977 11.4609C10.0447 12.0873 9.12897 12.4863 8.15755 12.6112C7.18614 12.7361 6.19924 12.5818 5.31234 12.1662C4.42545 11.7507 3.67524 11.0911 3.14952 10.2648C2.6238 9.43841 2.34431 8.47941 2.34375 7.5Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -1,3 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13 2.5H3C2.73478 2.5 2.48043 2.60536 2.29289 2.79289C2.10536 2.98043 2 3.23478 2 3.5V7C2 10.295 3.595 12.2919 4.93313 13.3869C6.37437 14.5656 7.80813 14.9656 7.87063 14.9825C7.95656 15.0059 8.04719 15.0059 8.13313 14.9825C8.19563 14.9656 9.6275 14.5656 11.0706 13.3869C12.405 12.2919 14 10.295 14 7V3.5C14 3.23478 13.8946 2.98043 13.7071 2.79289C13.5196 2.60536 13.2652 2.5 13 2.5ZM13 7C13 9.31687 12.1462 11.1975 10.4625 12.5887C9.72955 13.1923 8.89597 13.662 8 13.9762C7.11576 13.6675 6.29247 13.2061 5.5675 12.6131C3.86375 11.2194 3 9.33125 3 7V3.5H13V7ZM5.14625 8.85375C5.05243 8.75993 4.99972 8.63268 4.99972 8.5C4.99972 8.36732 5.05243 8.24007 5.14625 8.14625C5.24007 8.05243 5.36732 7.99972 5.5 7.99972C5.63268 7.99972 5.75993 8.05243 5.85375 8.14625L7 9.29313L10.1462 6.14625C10.1927 6.09979 10.2479 6.06294 10.3086 6.0378C10.3692 6.01266 10.4343 5.99972 10.5 5.99972C10.5657 5.99972 10.6308 6.01266 10.6914 6.0378C10.7521 6.06294 10.8073 6.09979 10.8538 6.14625C10.9002 6.1927 10.9371 6.24786 10.9622 6.30855C10.9873 6.36925 11.0003 6.4343 11.0003 6.5C11.0003 6.5657 10.9873 6.63075 10.9622 6.69145C10.9371 6.75214 10.9002 6.8073 10.8538 6.85375L7.35375 10.3538C7.30731 10.4002 7.25217 10.4371 7.19147 10.4623C7.13077 10.4874 7.06571 10.5004 7 10.5004C6.93429 10.5004 6.86923 10.4874 6.80853 10.4623C6.74783 10.4371 6.69269 10.4002 6.64625 10.3538L5.14625 8.85375Z" fill="#181818"/>
|
||||
<path d="M13 2.5H3C2.73478 2.5 2.48043 2.60536 2.29289 2.79289C2.10536 2.98043 2 3.23478 2 3.5V7C2 10.295 3.595 12.2919 4.93313 13.3869C6.37437 14.5656 7.80813 14.9656 7.87063 14.9825C7.95656 15.0059 8.04719 15.0059 8.13313 14.9825C8.19563 14.9656 9.6275 14.5656 11.0706 13.3869C12.405 12.2919 14 10.295 14 7V3.5C14 3.23478 13.8946 2.98043 13.7071 2.79289C13.5196 2.60536 13.2652 2.5 13 2.5ZM13 7C13 9.31687 12.1462 11.1975 10.4625 12.5887C9.72955 13.1923 8.89597 13.662 8 13.9762C7.11576 13.6675 6.29247 13.2061 5.5675 12.6131C3.86375 11.2194 3 9.33125 3 7V3.5H13V7ZM5.14625 8.85375C5.05243 8.75993 4.99972 8.63268 4.99972 8.5C4.99972 8.36732 5.05243 8.24007 5.14625 8.14625C5.24007 8.05243 5.36732 7.99972 5.5 7.99972C5.63268 7.99972 5.75993 8.05243 5.85375 8.14625L7 9.29313L10.1462 6.14625C10.1927 6.09979 10.2479 6.06294 10.3086 6.0378C10.3692 6.01266 10.4343 5.99972 10.5 5.99972C10.5657 5.99972 10.6308 6.01266 10.6914 6.0378C10.7521 6.06294 10.8073 6.09979 10.8538 6.14625C10.9002 6.1927 10.9371 6.24786 10.9622 6.30855C10.9873 6.36925 11.0003 6.4343 11.0003 6.5C11.0003 6.5657 10.9873 6.63075 10.9622 6.69145C10.9371 6.75214 10.9002 6.8073 10.8538 6.85375L7.35375 10.3538C7.30731 10.4002 7.25217 10.4371 7.19147 10.4623C7.13077 10.4874 7.06571 10.5004 7 10.5004C6.93429 10.5004 6.86923 10.4874 6.80853 10.4623C6.74783 10.4371 6.69269 10.4002 6.64625 10.3538L5.14625 8.85375Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
@@ -42,6 +42,7 @@ export type Theme = {
|
||||
spacing11: number;
|
||||
spacing12: number;
|
||||
spacing13: number;
|
||||
spacing14: number;
|
||||
};
|
||||
sizes: { full: "100%"; half: "50%" };
|
||||
radii: {
|
||||
@@ -89,6 +90,7 @@ export class ThemeFactory {
|
||||
spacing11: 40,
|
||||
spacing12: 45,
|
||||
spacing13: 50,
|
||||
spacing14: 80,
|
||||
auto: "auto"
|
||||
}),
|
||||
sizes: { full: "100%", half: "50%" },
|
||||
|
||||
Reference in New Issue
Block a user