From ff417c4f1ebfc81f2cf3d5cb6baa60ceef714517 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?=
 <100827540+reneaaron@users.noreply.github.com>
Date: Tue, 24 Sep 2024 17:52:54 +0200
Subject: [PATCH] feat: highlight features of alby account (#701)

* feat: highlight features of alby account

* fix: update copy

* fix: replace backup with support card
---
 frontend/src/screens/ConnectAlbyAccount.tsx | 113 ++++++++++++++++----
 1 file changed, 90 insertions(+), 23 deletions(-)

diff --git a/frontend/src/screens/ConnectAlbyAccount.tsx b/frontend/src/screens/ConnectAlbyAccount.tsx
index 06548386..e1e367df 100644
--- a/frontend/src/screens/ConnectAlbyAccount.tsx
+++ b/frontend/src/screens/ConnectAlbyAccount.tsx
@@ -1,32 +1,99 @@
+import {
+  CreditCard,
+  Headphones,
+  LifeBuoy,
+  Mail,
+  PartyPopper,
+  Zap,
+} from "lucide-react";
+import Container from "src/components/Container";
+import TwoColumnLayoutHeader from "src/components/TwoColumnLayoutHeader";
 import { LinkButton } from "src/components/ui/button";
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "src/components/ui/card";
 
 export function ConnectAlbyAccount() {
   return (
     <div className="w-full h-full flex flex-col items-center justify-center gap-5">
-      <h1 className="text-2xl font-semibold">Connect Your Alby Account</h1>
-      <div className="w-full max-w-screen-sm">
-        <img
-          src="/images/illustrations/alby-account-dark.svg"
-          className="w-full hidden dark:block"
+      <Container>
+        <TwoColumnLayoutHeader
+          title="Connect Your Alby Account"
+          description="Alby Account brings several benefits to your Alby Hub"
         />
-        <img
-          src="/images/illustrations/alby-account-light.svg"
-          className="w-full dark:hidden"
-        />
-      </div>
-      <p className="max-w-sm md:max-w-lg text-muted-foreground text-center">
-        Your Alby Account gives your hub a lightning address, Nostr address and
-        zaps, email notifications, fiat topups, priority support, automatic
-        channel backups, access to podcasting apps & more.
-      </p>
-      <div className="flex flex-col items-center justify-center mt-5 gap-5">
-        <LinkButton to="/alby/auth" size="lg">
-          Connect now
-        </LinkButton>
-        <LinkButton variant="link" to="/" className="text-muted-foreground">
-          Maybe later
-        </LinkButton>
-      </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 w-full gap-2 mt-5">
+          <Card className="w-full">
+            <CardHeader className="flex flex-col justify-center items-center text-center p-4">
+              <Zap className="w-6 h-6" />
+              <CardTitle className="text-sm">Lightning Address</CardTitle>
+              <CardDescription className="text-xs">
+                Personalized lightning address to receive payments
+              </CardDescription>
+            </CardHeader>
+          </Card>
+          <Card className="w-full">
+            <CardHeader className="flex flex-col justify-center items-center text-center p-4">
+              <Mail className="w-6 h-6" />
+              <CardTitle className="text-sm">Email Notifications</CardTitle>
+              <CardDescription className="text-xs">
+                Instant notifications about incoming transactions and more
+              </CardDescription>
+            </CardHeader>
+          </Card>
+          <Card className="w-full">
+            <CardHeader className="flex flex-col justify-center items-center text-center p-4">
+              <LifeBuoy className="w-6 h-6" />
+              <CardTitle className="text-sm">Support</CardTitle>
+              <CardDescription className="text-xs">
+                Human support via live chat when you need a helping hand
+              </CardDescription>
+            </CardHeader>
+          </Card>
+          <Card className="w-full">
+            <CardHeader className="flex flex-col justify-center items-center text-center p-4">
+              <CreditCard className="w-6 h-6" />
+              <CardTitle className="text-sm">Fiat Topups</CardTitle>
+              <CardDescription className="text-xs">
+                Top up with fiat and get Bitcoin delivered to your Alby Hub
+              </CardDescription>
+            </CardHeader>
+          </Card>
+          <Card className="w-full">
+            <CardHeader className="flex flex-col justify-center items-center text-center p-4">
+              <Headphones className="w-6 h-6" />
+              <CardTitle className="text-sm">Podcasting 2.0</CardTitle>
+              <CardDescription className="text-xs">
+                Support your favorite creators by streaming sats
+              </CardDescription>
+            </CardHeader>
+          </Card>
+          <Card className="w-full">
+            <CardHeader className="flex flex-col justify-center items-center text-center p-4">
+              <PartyPopper className="w-6 h-6" />
+              <CardTitle className="text-sm">and there's more...</CardTitle>
+              <CardDescription className="text-xs">
+                Claim your Nostr address, discover apps, etc
+              </CardDescription>
+            </CardHeader>
+          </Card>
+        </div>
+        <div className="flex flex-col items-center justify-center mt-8 gap-2">
+          <LinkButton to="/alby/auth" size="lg">
+            Connect now
+          </LinkButton>
+          <LinkButton
+            size="sm"
+            variant="link"
+            to="/"
+            className="text-muted-foreground"
+          >
+            Maybe later
+          </LinkButton>
+        </div>
+      </Container>
     </div>
   );
 }