Add push notification as feature in landing page (#6)

README.md

@@ -1,4 +1,3 @@
-
 <p align="center" style="margin-top: 12px">
   <a href="https://splitpro.app">
   <img width="100px"  style="border-radius: 50%;" src="https://splitpro.app/logo_circle.png" alt="SplitPro Logo">
@@ -8,15 +7,14 @@
   <h2 align="center">An open source alternative to Splitwise</h2>
 
 <p align="center">
-    <a href="https://splitpro.app"><strong>To our Website & App »</strong></a>
+    <a href="https://splitpro.app"><strong>To our App »</strong></a>
     <br />
     <br />
   </p>
 </p>
 
-
-
 ## About
+
 SplitPro aims to provide an open-source way to share expenses with your friends.
 
 It's meant to be a complete replacement for Splitwise.
@@ -29,10 +27,10 @@ It currently has most of the important features.
 - Upload expense bills
 - PWA support
 - Split expense unequally (share, percentage, exact amounts)
+- Push notification
 
 **More features coming every day**
 
-
 ---
 
 ## Why
@@ -49,8 +47,8 @@ I managed to find a good app [spliit.app](https://spliit.app/) by [Sebastien Cas
 
 _That's when I decided to work on this_
 
-
 ## Tech stack
+
 - [NextJS](https://nextjs.org/)
 - [Tailwind](https://tailwindcss.com/)
 - [tRPC](https://trpc.io/)
@@ -59,15 +57,16 @@ _That's when I decided to work on this_
 - [Postgres](https://www.postgresql.org/)
 - [NextAuth](https://next-auth.js.org/)
 
-
 ## Getting started.
 
 ### Prerequisites
+
 - Node.js (Version: >=18.x)
 - PostgreSQL
 - pnpm (recommended)
 
 ### Run locally
+
 - Copy .env.example to .env and add the required env variables
 - Run `pnpm install`
 - Run `pnpm db:push` or `pnpm prisma:prod` to populate db migrations

src/pages/index.tsx

@@ -1,17 +1,7 @@
 import Head from 'next/head';
 import Link from 'next/link';
 import { Button } from '~/components/ui/button';
-import {
-  ArrowRight,
-  Ban,
-  Banknote,
-  FileUp,
-  GitFork,
-  Globe,
-  Sigma,
-  Split,
-  Users,
-} from 'lucide-react';
+import { ArrowRight, Banknote, Bell, FileUp, GitFork, Globe, Split, Users } from 'lucide-react';
 import Image from 'next/image';
 import { BackgroundGradient } from '~/components/ui/background-gradient';
 
@@ -132,6 +122,18 @@ export default function Home() {
                   </p>
                 </div>
               </div>
+              <div className="flex flex-col gap-20 lg:flex-row lg:gap-8">
+                <div className="flex flex-col gap-1 lg:w-1/2">
+                  <div className="flex flex-row justify-center gap-1 lg:flex-col">
+                    <Bell className="h-6 w-6 text-primary" />
+                    <p className="text-lg font-medium">Push notification</p>
+                  </div>
+                  <p className="px-4 text-gray-400 lg:px-0">
+                    Never miss important notifications. Get notified when someone adds an expense or
+                    settles up
+                  </p>
+                </div>
+              </div>
             </div>
 
             <div className="mb-20 mt-24 flex flex-col gap-8 text-center lg:text-left">