Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: highlight features of alby account #701

Merged
merged 3 commits into from
Sep 24, 2024
Merged

feat: highlight features of alby account #701

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7034204
feat: highlight features of alby account
reneaaron Sep 24, 2024
c876295
fix: update copy
reneaaron Sep 24, 2024
7152318
fix: replace backup with support card
reneaaron Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 97 additions & 23 deletions frontend/src/screens/ConnectAlbyAccount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we add a "coming soon" here? we're not good enough, yet.

</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>
);
}
Loading