From 5bbc447deba0a18360df9bf927cf4d3ea2152d97 Mon Sep 17 00:00:00 2001 From: thecodrr Date: Mon, 15 Feb 2021 19:38:52 +0500 Subject: [PATCH] feat: add carousel in buy dialog --- apps/web/package.json | 1 + apps/web/src/assets/sync.svg | 38 +---- apps/web/src/assets/vault.svg | 69 +------- apps/web/src/components/dialogs/buydialog.js | 170 +++++++++++++++---- apps/web/src/components/dialogs/dialog.js | 2 +- apps/web/src/index.css | 9 + apps/web/yarn.lock | 18 +- 7 files changed, 167 insertions(+), 140 deletions(-) diff --git a/apps/web/package.json b/apps/web/package.json index bdce47679..c7ad48125 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -29,6 +29,7 @@ "react-dom": "^17.0.1", "react-modal": "^3.12.1", "react-qrcode-logo": "^2.2.1", + "react-responsive-carousel": "^3.2.12", "react-scripts": "4.0.2", "react-scrollbars-custom": "^4.0.25", "react-virtualized-auto-sizer": "^1.0.4", diff --git a/apps/web/src/assets/sync.svg b/apps/web/src/assets/sync.svg index fde595a51..70ae74178 100644 --- a/apps/web/src/assets/sync.svg +++ b/apps/web/src/assets/sync.svg @@ -1,37 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/apps/web/src/assets/vault.svg b/apps/web/src/assets/vault.svg index 90287ca34..b64fe1557 100644 --- a/apps/web/src/assets/vault.svg +++ b/apps/web/src/assets/vault.svg @@ -1,68 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +N \ No newline at end of file diff --git a/apps/web/src/components/dialogs/buydialog.js b/apps/web/src/components/dialogs/buydialog.js index 92b97f18e..8d8c01359 100644 --- a/apps/web/src/components/dialogs/buydialog.js +++ b/apps/web/src/components/dialogs/buydialog.js @@ -1,71 +1,174 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { Text, Flex, Button } from "rebass"; import Dialog, { showDialog } from "./dialog"; import * as Icon from "../icons"; import { useStore as useUserStore } from "../../stores/user-store"; +import { useStore as useThemeStore } from "../../stores/theme-store"; import { upgrade } from "../../common/upgrade"; import { showSignUpDialog } from "./signupdialog"; +import { ReactComponent as Personalization } from "../../assets/accent.svg"; +import { ReactComponent as Backups } from "../../assets/backup.svg"; +import { ReactComponent as Export } from "../../assets/export.svg"; +import { ReactComponent as Organize } from "../../assets/organize.svg"; +import { ReactComponent as RichText } from "../../assets/richtext.svg"; +import { ReactComponent as Sync } from "../../assets/sync.svg"; +import { ReactComponent as Vault } from "../../assets/vault.svg"; +import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader +import { Carousel } from "react-responsive-carousel"; +import { changeSvgTheme } from "../../utils/css"; const premiumDetails = [ { - title: "Cross Platfrom Sync", - description: - "Securely sync your notes on any device, Android, iOS, Windows, MacOS, Linux and Web!", + title: "Automatic syncing", + description: "Your notes will be automatically synced to all your devices.", + illustration: { + icon: Sync, + width: "40%", + }, }, { - title: "Zero Knowledge", + title: "Unlimited organization", description: - "No sneaking, no stealing. We give all the keys for your data to you. Privacy is not just a word to us. We use industry-grade XChaChaPoly1305 and Argon2 which is miles ahead other solutions making sure your data is secure and private even a million years from now.", + "Make unlimited notebooks and tags, and assign colors to your notes for quick access.", + illustration: { + icon: Organize, + width: "40%", + }, }, { - title: "Organize Notes Like Never Before", + title: "Secure vault", description: - "Organize your notes using notebooks, tags and colors. Add notes to favorites for quick access. Pin most important notes and notebooks on top for quick access. You can also pin notes and notebooks to quickly access them!", + "Lock any note with a password and keep sensitive data under lock and key.", + illustration: { + icon: Vault, + width: "35%", + }, }, { - title: "Full Rich Text Editor with Markdown", + title: "Full rich text editor", description: - "Unleash the power of a complete Rich Text Editor in your notes app. You can add images, links and even embed videos! We have even added full markdown support too!", + "Add images, links, tables and lists to your notes, and use markdown for fast editing.", + illustration: { + icon: RichText, + width: "50%", + }, }, { - title: "Export Notes", - description: - "You can export your notes as PDF, Markdown, Plain text or HTML file.", + title: "Multi-format exports", + description: "Export your notes in PDF, Markdown, or HTML formats.", + illustration: { + icon: Export, + width: "25%", + }, }, { - title: "Backup and Restore", + title: "Automatic & encrypted backups", + description: "Enable daily or weekly backups with automatic encryption.", + illustration: { + icon: Backups, + width: "25%", + }, + }, + { + title: "Customize Notesnook", + description: "Change app colors and turn on automatic theme switching.", + illustration: { + icon: Personalization, + width: "50%", + }, + }, + { + title: "Get the pro badge on Discord", description: - "Backup and restore your notes anytime into your phone storage. You can encrypt all your backups if required!", + "Pro users get access to special channels and priority support on our Discord server.", + illustration: { + icon: Personalization, + width: "50%", + }, }, ]; function BuyDialog(props) { const isLoggedIn = useUserStore((store) => store.isLoggedIn); const user = useUserStore((store) => store.user); + const accent = useThemeStore((store) => store.accent); + useEffect(() => { + changeSvgTheme(accent); + }, [accent]); + const [slideIndex, setSlideIndex] = useState(0); return ( - - - - {premiumDetails.map((detail) => ( - - + + ( + + )} + renderArrowPrev={(click, hasPrev) => ( + + )} + > + {premiumDetails.map((item) => ( + + + + {item.title} + + + {item.description} ))} - + {isLoggedIn ? "Upgrade now" : "Try it Now"} diff --git a/apps/web/src/components/dialogs/dialog.js b/apps/web/src/components/dialogs/dialog.js index 097ee3e86..8600efe35 100644 --- a/apps/web/src/components/dialogs/dialog.js +++ b/apps/web/src/components/dialogs/dialog.js @@ -54,7 +54,7 @@ function Dialog(props) {