From 70342047264c889535bdc59e85915035f14b4cb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Tue, 24 Sep 2024 11:26:25 +0200
Subject: [PATCH 1/3] feat: highlight features of alby account

---
 frontend/src/screens/ConnectAlbyAccount.tsx | 120 ++++++++++++++++----
 1 file changed, 97 insertions(+), 23 deletions(-)

diff --git a/frontend/src/screens/ConnectAlbyAccount.tsx b/frontend/src/screens/ConnectAlbyAccount.tsx
index 06548386..570fe96c 100644
--- a/frontend/src/screens/ConnectAlbyAccount.tsx
+++ b/frontend/src/screens/ConnectAlbyAccount.tsx
@@ -1,32 +1,106 @@
+import {
+  CreditCard,
+  DatabaseBackup,
+  Headphones,
+  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 straight into
+                your Hub
+              </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">
+                Stay updated! Get instant emails about incoming transactions and
+                important updates.
+              </CardDescription>
+            </CardHeader>
+          </Card>
+          <Card className="w-full">
+            <CardHeader className="flex flex-col justify-center items-center text-center p-4">
+              <DatabaseBackup className="w-6 h-6" />
+              <CardTitle className="text-sm">Encrypted Backups</CardTitle>
+              <CardDescription className="text-xs">
+                Enjoy peace of mind with automated backups of your <br />
+                Alby Hub.
+              </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 straight into your{" "}
+                <br />
+                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 while you enjoy
+                their content.
+              </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 new apps and explore what's
+                coming next.
+              </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>
   );
 }

From c87629568e9925d25cece64cbd67db2a7f7a000e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Tue, 24 Sep 2024 17:23:23 +0200
Subject: [PATCH 2/3] fix: update copy

---
 frontend/src/screens/ConnectAlbyAccount.tsx | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/frontend/src/screens/ConnectAlbyAccount.tsx b/frontend/src/screens/ConnectAlbyAccount.tsx
index 570fe96c..379e5490 100644
--- a/frontend/src/screens/ConnectAlbyAccount.tsx
+++ b/frontend/src/screens/ConnectAlbyAccount.tsx
@@ -30,8 +30,7 @@ export function ConnectAlbyAccount() {
               <Zap className="w-6 h-6" />
               <CardTitle className="text-sm">Lightning Address</CardTitle>
               <CardDescription className="text-xs">
-                Personalized lightning address to receive payments straight into
-                your Hub
+                Personalized lightning address to receive payments
               </CardDescription>
             </CardHeader>
           </Card>
@@ -40,8 +39,7 @@ export function ConnectAlbyAccount() {
               <Mail className="w-6 h-6" />
               <CardTitle className="text-sm">Email Notifications</CardTitle>
               <CardDescription className="text-xs">
-                Stay updated! Get instant emails about incoming transactions and
-                important updates.
+                Instant notifications about incoming transactions and more
               </CardDescription>
             </CardHeader>
           </Card>
@@ -50,8 +48,7 @@ export function ConnectAlbyAccount() {
               <DatabaseBackup className="w-6 h-6" />
               <CardTitle className="text-sm">Encrypted Backups</CardTitle>
               <CardDescription className="text-xs">
-                Enjoy peace of mind with automated backups of your <br />
-                Alby Hub.
+                Enjoy peace of mind with automated backups
               </CardDescription>
             </CardHeader>
           </Card>
@@ -60,9 +57,7 @@ export function ConnectAlbyAccount() {
               <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 straight into your{" "}
-                <br />
-                Alby Hub.
+                Top up with fiat and get Bitcoin delivered to your Alby Hub
               </CardDescription>
             </CardHeader>
           </Card>
@@ -71,8 +66,7 @@ export function ConnectAlbyAccount() {
               <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 while you enjoy
-                their content.
+                Support your favorite creators by streaming sats
               </CardDescription>
             </CardHeader>
           </Card>
@@ -81,8 +75,7 @@ export function ConnectAlbyAccount() {
               <PartyPopper className="w-6 h-6" />
               <CardTitle className="text-sm">and there's more...</CardTitle>
               <CardDescription className="text-xs">
-                Claim your Nostr address, discover new apps and explore what's
-                coming next.
+                Claim your Nostr address, discover apps, etc
               </CardDescription>
             </CardHeader>
           </Card>

From 715231857c34f7533beddb4902ef56f2a2fa3d14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Tue, 24 Sep 2024 17:34:11 +0200
Subject: [PATCH 3/3] fix: replace backup with support card

---
 frontend/src/screens/ConnectAlbyAccount.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/screens/ConnectAlbyAccount.tsx b/frontend/src/screens/ConnectAlbyAccount.tsx
index 379e5490..e1e367df 100644
--- a/frontend/src/screens/ConnectAlbyAccount.tsx
+++ b/frontend/src/screens/ConnectAlbyAccount.tsx
@@ -1,7 +1,7 @@
 import {
   CreditCard,
-  DatabaseBackup,
   Headphones,
+  LifeBuoy,
   Mail,
   PartyPopper,
   Zap,
@@ -45,10 +45,10 @@ export function ConnectAlbyAccount() {
           </Card>
           <Card className="w-full">
             <CardHeader className="flex flex-col justify-center items-center text-center p-4">
-              <DatabaseBackup className="w-6 h-6" />
-              <CardTitle className="text-sm">Encrypted Backups</CardTitle>
+              <LifeBuoy className="w-6 h-6" />
+              <CardTitle className="text-sm">Support</CardTitle>
               <CardDescription className="text-xs">
-                Enjoy peace of mind with automated backups
+                Human support via live chat when you need a helping hand
               </CardDescription>
             </CardHeader>
           </Card>