-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: highlight features of alby account (#701)
* feat: highlight features of alby account * fix: update copy * fix: replace backup with support card
- Loading branch information
Showing
1 changed file
with
90 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |