GlcoinCore/alby-hub
1
0
Fork 0
mirror of https://github.com/getAlby/hub.git synced 2026-08-13 12:33:39 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat: highlight features of alby account (#701)

Browse source 
* feat: highlight features of alby account

* fix: update copy

* fix: replace backup with support card
This commit is contained in:
René Aaron 2024-09-24 17:52:54 +02:00 • committed by GitHub
parent b092f32439
commit ff417c4f1e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 90 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

113
frontend/src/screens/ConnectAlbyAccount.tsx
View file

@ -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>
);
}