[docs] update index page

ananthakumaran · Jan 15, 2024 · 946644b · 946644b
1 parent 4557b10
commit 946644b
Show file tree

Hide file tree

Showing 3 changed files with 267 additions and 16 deletions.
diff --git a/docs/index.md b/docs/index.md
@@ -66,23 +66,23 @@ hide:
     ```
 
 
-<p style="text-align: center; margin-bottom: 50px">
+<p style="text-align: center; margin-bottom: 3rem">
   <a class="md-button md-button--primary" style="margin-right: 50px;" href="/getting-started/installation/">Install</a>
   <a class="md-button md-button--primary" href="https://demo.paisa.fyi">Demo</a>
 </p>
 
-
 <div class="features-container" markdown>
 <div class="features" markdown>
 - :fontawesome-regular-file-lines: Builds on top of the **[ledger](https://www.ledger-cli.org/)** double entry accounting tool.
-- :simple-gnuprivacyguard: Your financial **data** never leaves your system.
+- :octicons-shield-lock-16: Your financial **data** never leaves your system.
 - :simple-git: The journal and configuration information are stored in **plain text** files
   that can be easily version controlled. You can collaborate with
   others by giving access to the files.
 - :octicons-graph-24: Track the latest market **price** of your Mutual Fund, NPS Fund
   and Stock holdings.
 - :fontawesome-regular-credit-card: Track and **budget** your **Expenses**.
 - :material-microsoft-excel: **Convert** CSV, Excel and PDF files to Ledger journal.
+- :fontawesome-solid-calculator: **Calculate** your taxes, emis, etc using **[sheets](./reference/sheets.md)**.
 - :octicons-goal-16: Track your **goals**.
 - :material-timer-sync: View your **recurring** transactions.
 - :material-beach: Plan your **retirement**.
@@ -97,3 +97,138 @@ hide:
 </div>
 </div>
 </div>
+
+
+
+<div class="feature-card" markdown>
+<div class="feature-card-left" markdown>
+# Plain Text
+
+All your financial data is stored in plain text files. Of course, we
+will not ask you to draw a picture on blank canvas. We provide
+enough guard rails to make data entry easy and error free. The editor
+comes with syntax highlighting, auto completion, error checking and
+auto formatting.
+</div>
+
+<div class="feature-card-right feature-card-icon feature-card-icon-logo" markdown>
+:fontawesome-regular-file-lines:{ .feature-card-icon }
+</div>
+</div>
+
+
+<div class="feature-card" markdown>
+<div class="feature-card-left feature-card-icon feature-card-icon-equity" markdown>
+:octicons-shield-lock-16:{ .feature-card-icon }
+</div>
+
+<div class="feature-card-right" markdown>
+# Privacy
+
+Selling your data is not the indirect goal of the app. The app will
+never collect or send any data to any server. All your data is stored
+in your system. Checkout the [manifesto](./manifesto.md) for more.
+</div>
+</div>
+
+<div class="feature-card" markdown>
+<div class="feature-card-left" markdown>
+# Price Tracking
+
+Paisa supports various [price](./reference/commodities.md) data providers, so it can keep track of
+the latest price of all your assets. It also allows the user to enter
+the price manually, so you can use it to revalue your assets like
+house, car, land, etc.
+</div>
+
+<div class="feature-card-right feature-card-icon feature-card-icon-asset" markdown>
+:octicons-graph-24:{ .feature-card-icon }
+</div>
+</div>
+
+
+<div class="feature-card" markdown>
+<div class="feature-card-left feature-card-icon feature-card-icon-expense" markdown>
+:fontawesome-regular-credit-card:{ .feature-card-icon }
+</div>
+
+<div class="feature-card-right" markdown>
+# Budget and Expenses
+
+Paisa allows you to track your expenses at the granularity of your
+choice. You can customize the categories and subcategories to suit
+your needs, even icon is customizable. If you are tight on money,
+don't worry, paisa got you covered. You can set a [budget](./reference/budget.md) for each
+category and make sure you don't overspend.
+
+</div>
+</div>
+
+<div class="feature-card" markdown>
+<div class="feature-card-left" markdown>
+# Data Import
+
+You don't have to sit and manually enter all your transactions. You
+can get the account statements from your bank or credit card provider
+and import them into paisa. Paisa [import](./reference/import.md) system is flexible
+enough to handle most of the formats out there in the wild. Once you
+setup the import template, it will hardly take 5 minutes to import and
+categorize all your transactions each month.
+</div>
+
+<div class="feature-card-right feature-card-icon feature-card-icon-income" markdown>
+:material-microsoft-excel:{ .feature-card-icon }
+</div>
+</div>
+
+
+<div class="feature-card" markdown>
+<div class="feature-card-left feature-card-icon feature-card-icon-liability" markdown>
+:fontawesome-solid-calculator:{ .feature-card-icon }
+</div>
+
+<div class="feature-card-right" markdown>
+# Sheets
+
+Ever wanted to calculate your taxes, emis, etc? Paisa comes with a
+notepad calculator called [sheet](./reference/sheets.md) that can do all the calculations
+with the data from your ledger. The sheets are live and interactive,
+and will update automatically when you change the data in your ledger.
+
+</div>
+</div>
+
+<div class="feature-card" markdown>
+<div class="feature-card-left" markdown>
+# Goals
+
+Want to know how much you need to save for your next vacation? or how
+long it will take to buy a new car? Paisa can help you with planning
+and tracking your [goals](./reference/goals/index.md). If you know how much you can afford to
+save each month, paisa can tell you when you can achieve your goal. On
+the other hand, if you have a deadline, paisa can tell you how much
+you need to save each month to achieve your goal.
+</div>
+
+<div class="feature-card-right feature-card-icon feature-card-icon-logo" markdown>
+:octicons-goal-16:{ .feature-card-icon }
+</div>
+</div>
+
+<div class="feature-card" markdown>
+<div class="feature-card-left feature-card-icon feature-card-icon-expense" markdown>
+:material-timer-sync:{ .feature-card-icon }
+</div>
+
+<div class="feature-card-right" markdown>
+# Bills
+
+Paisa can help you track your recurring transactions like rent, emi,
+credit card bills, etc. The calendar view will show you all the bills
+that are due in the current month. You can set the recurring period of
+the transaction, which is flexible enough to handle any kind of
+schedule like weekly, monthly, quarterly, last day of the month, last
+day of the quarter, etc.
+
+</div>
+</div>
diff --git a/docs/manifesto.md b/docs/manifesto.md
@@ -14,7 +14,7 @@ possible by choosing open standards and formats.
 
 > [Ledger](https://ledger-cli.org/) text format is used to store all the transaction data.
 
-## 2. Privacy :simple-gnuprivacyguard:
+## 2. Privacy :octicons-shield-lock-16:
 
 User's data is private. Paisa will not collect or send any data to any
 server[^1]. Paisa will not use any third party analytics or tracking on

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
@@ -14,6 +14,23 @@
   --md-code-hl-variable-color: #718c00;
 }
 
+:root {
+  --logo-color-background: rgb(179, 136, 255, 0.1);
+  --logo-color: #b388ff;
+  --logo-color-dark: #9971e5;
+  --logo-color-darker: #351982;
+  --account-color-asset-background: rgb(0, 176, 255, 0.1);
+  --account-color-asset: #00b0ff;
+  --account-color-expense-background: rgb(255, 23, 68, 0.1);
+  --account-color-expense: #ff1744;
+  --account-color-liability-background: rgb(255, 171, 0, 0.1);
+  --account-color-liability: #ffab00;
+  --account-color-equity-background: rgb(213, 0, 249, 0.1);
+  --account-color-equity: #d500f9;
+  --account-color-income-background: rgb(174, 234, 0, 0.1);
+  --account-color-income: #aeea00;
+}
+
 .highlight .m {
   font-weight: bold;
 }
@@ -37,21 +54,26 @@
 }
 
 .hero {
-  margin-top: 0px;
-  margin-bottom: 20px;
+  margin-top: 2rem;
+  margin-bottom: 3rem;
 }
 
 .hero h1 {
   text-align: center;
   color: inherit;
   font-weight: 700;
-  color: #b388ff;
+  color: var(--logo-color);
   margin-bottom: 0;
   margin-top: -30px;
+  font-size: 3rem;
+}
+
+.hero h1 a {
+  display: none !important;
 }
 
 .md-header__topic:first-child {
-  color: #b388ff;
+  color: var(--logo-color);
 }
 
 .hero p {
@@ -65,7 +87,7 @@
 
 .home .tabbed-set {
   max-width: 510px;
-  margin: 0px auto 50px auto !important;
+  margin: 0px auto 3rem auto !important;
 }
 
 .home ul li {
@@ -77,6 +99,20 @@
   margin-left: 0 !important;
 }
 
+.home .md-button--primary {
+  background-color: var(--logo-color);
+  border-color: var(--logo-color);
+  color: var(--logo-color-darker);
+  border-radius: 30px;
+  padding: 0.325em 1.5em;
+}
+
+.home .md-button--primary:hover {
+  background-color: var(--logo-color-dark);
+  border-color: var(--logo-color-dark);
+  color: var(--logo-color-darker);
+}
+
 .features-container {
   display: flex;
   gap: 20px;
@@ -89,8 +125,8 @@
 .thumbnail-container {
   flex-basis: 50%;
   box-shadow:
-    0 0 10px rgba(0, 0, 0, 0.1),
-    0 0 30px rgb(0, 0, 0, 0.05);
+    0 50px 100px -20px rgba(50, 50, 93, 0.25),
+    0 30px 60px -30px rgba(0, 0, 0, 0.3);
 }
 
 .split-codeview {
@@ -182,21 +218,101 @@
 }
 
 .assets-color {
-  color: #00b0ff;
+  color: var(--account-color-asset);
 }
 
 .expenses-color {
-  color: #ff1744;
+  color: var(--account-color-expense);
 }
 
 .liabilities-color {
-  color: #ffab00;
+  color: var(--account-color-liability);
 }
 
 .equity-color {
-  color: #d500f9;
+  color: var(--account-color-equity);
 }
 
 .income-color {
-  color: #aeea00;
+  color: var(--account-color-income);
+}
+
+.feature-card {
+  display: flex;
+  margin: 7rem 0;
+}
+
+.feature-card p {
+  max-width: 22rem;
+  text-align: justify;
+}
+
+.feature-card-left {
+  width: 50%;
+}
+
+.feature-card-right {
+  width: 50%;
+}
+
+@media screen and (max-width: 1275px) {
+  .feature-card-left,
+  .feature-card-right {
+    width: 70%;
+  }
+
+  .feature-card-left.feature-card-icon,
+  .feature-card-right.feature-card-icon {
+    width: 30%;
+  }
+}
+
+.feature-card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 1.5rem;
+}
+
+.feature-card-icon .twemoji {
+  height: 100%;
+  border-radius: 50%;
+  padding: 0.75rem;
+}
+
+.feature-card-icon svg {
+  --card-icon-size: 2rem;
+  width: var(--card-icon-size) !important;
+  height: var(--card-icon-size) !important;
+  max-height: var(--card-icon-size) !important;
+}
+
+.feature-card-icon-logo .twemoji {
+  background-color: var(--logo-color-background);
+  color: var(--logo-color);
+}
+
+.feature-card-icon-asset .twemoji {
+  background-color: var(--account-color-asset-background);
+  color: var(--account-color-asset);
+}
+
+.feature-card-icon-expense .twemoji {
+  background-color: var(--account-color-expense-background);
+  color: var(--account-color-expense);
+}
+
+.feature-card-icon-liability .twemoji {
+  background-color: var(--account-color-liability-background);
+  color: var(--account-color-liability);
+}
+
+.feature-card-icon-equity .twemoji {
+  background-color: var(--account-color-equity-background);
+  color: var(--account-color-equity);
+}
+
+.feature-card-icon-income .twemoji {
+  background-color: var(--account-color-income-background);
+  color: var(--account-color-income);
 }