diff --git a/web/index.html b/web/index.html index 66f978ef..232a4514 100644 --- a/web/index.html +++ b/web/index.html @@ -45,7 +45,7 @@ /> - +
diff --git a/web/src/components/auth/UserMenu.tsx b/web/src/components/auth/UserMenu.tsx index f8e63c0b..e7c8a8d1 100644 --- a/web/src/components/auth/UserMenu.tsx +++ b/web/src/components/auth/UserMenu.tsx @@ -23,7 +23,9 @@ export function UserMenu({ className }: UserMenuProps) { if (!data?.me) { return ( - + ); } diff --git a/web/src/components/subscription/Price.tsx b/web/src/components/subscription/Price.tsx index 30e337ab..c10d2bf2 100644 --- a/web/src/components/subscription/Price.tsx +++ b/web/src/components/subscription/Price.tsx @@ -5,9 +5,25 @@ export interface PriceProps { } export function Price({ value, currency, ...rest }: PriceProps) { + const currencySymbol = + currencySymbols[currency?.toUpperCase() ?? 'USD'] ?? '$'; return ( - {((value ?? 0) / 100).toFixed(2)} {currency} / month + {currencySymbol} + {((value ?? 0) / 100).toFixed(2)} / month ); } + +const currencySymbols: Record = { + USD: '$', + EUR: '€', + GBP: '£', + YEN: '¥', + INR: '₹', + AUD: 'A$', + CAD: 'C$', + CHF: 'CHF', + SEK: 'kr', + NZD: 'NZ$', +}; diff --git a/web/src/main.css b/web/src/main.css new file mode 100644 index 00000000..8c72a416 --- /dev/null +++ b/web/src/main.css @@ -0,0 +1,5 @@ +h1, +h2, +h3 { + font-family: 'VC Henrietta Trial', 'Noto Serif', serif; +} diff --git a/web/src/main.tsx b/web/src/main.tsx index 6743290c..66f79d62 100644 --- a/web/src/main.tsx +++ b/web/src/main.tsx @@ -1,4 +1,5 @@ import 'uno.css'; +import './main.css'; import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import { Pages } from './pages/index.jsx'; diff --git a/web/src/pages/HomePage.tsx b/web/src/pages/HomePage.tsx index a7d5bee9..37daf3c3 100644 --- a/web/src/pages/HomePage.tsx +++ b/web/src/pages/HomePage.tsx @@ -17,7 +17,7 @@ const innerProps = { export default function HomePage() { return ( - + @@ -28,7 +28,7 @@ export default function HomePage() { className={classNames( '[font-family:"VC_Henrietta_Trial","Noto_Serif",serif]', 'text-[5vmin] m-0 font-normal text-primary-dark text-shadow', - 'bg-primary p-2 rounded-lg leading-none', + 'bg-primary-wash p-2 rounded-lg leading-none', )} > Biscuits @@ -75,7 +75,7 @@ function Background() { c 14.109208,6.556587 28.71589,-4.334327 40.138713,5.166369 11.422824,9.500696 -0.04547,17.716434 5.50578,29.604545 6.792338,14.54591 13.568365,19.601822 34.23552,25.635865 l -0.52988,-95.90900901 z`} - className="fill-primary-light" + className="fill-primary-light opacity-20" /> ); diff --git a/web/src/pages/JoinPage.tsx b/web/src/pages/JoinPage.tsx index 47c1408a..df059c7f 100644 --- a/web/src/pages/JoinPage.tsx +++ b/web/src/pages/JoinPage.tsx @@ -1,7 +1,92 @@ +import { + PageContent, + PageFixedArea, + PageRoot, + PageSection, + PageSectionGrid, +} from '@a-type/ui/components/layouts'; +import { Button } from '@a-type/ui/components/button'; +import { Icon } from '@a-type/ui/components/icon'; +import { graphql, useLocalStorage, useQuery } from '@biscuits/client'; +import { Link, useNavigate } from '@verdant-web/react-router'; +import { useEffect } from 'react'; +import classNames from 'classnames'; +import { Price } from '@/components/subscription/Price.jsx'; + export interface JoinPageProps {} +const startingPriceQuery = graphql(` + query StartingPrice { + productInfo(lookupKey: "for_two") { + price + currency + } + } +`); + export function JoinPage({}: JoinPageProps) { - return
TODO: join page
; + const [seen] = useLocalStorage('seenBefore', false); + const navigate = useNavigate(); + useEffect(() => { + if (seen) { + navigate(`/login`); + } + }, [seen, navigate]); + + return ( + + +
+

+ Join Biscuits to unlock features and collaboration in every app +

+

+ Biscuits apps are always free to use, but members can sync and share + data with family or friends. Plans start at . +

+ + + + + +

Gnocchi

+

+ Your personal cooking app becomes a family groceries list and + recipe box. +

+ +
TODO: screenshots
+ + + +

Trip Tick

+

+ Now everyone can be on the same page when packing. Plus, get a + weather forecast and more powerful trip planning tools. +

+ +
+ + + ); } +const StartingPrice = () => { + const [{ data }] = useQuery({ query: startingPriceQuery }); + return ( + + ); +}; + export default JoinPage; diff --git a/web/src/pages/LoginPage.tsx b/web/src/pages/LoginPage.tsx index a5d18033..5a6527c4 100644 --- a/web/src/pages/LoginPage.tsx +++ b/web/src/pages/LoginPage.tsx @@ -17,14 +17,14 @@ export default function LoginPage() { const activeTab = searchParams.get('tab') ?? 'signin'; return ( -
+
-

+

Join the club -

+ { + if (hasAccount) setSeen(true); + }, [setSeen, hasAccount]); + const navigate = useNavigate(); useEffect(() => { - if (!result.fetching && !result.data?.me) { + if (!result.fetching && !hasAccount) { const search = window.location.search; const path = window.location.pathname; const returnTo = encodeURIComponent(path + search); navigate(`/login?returnTo=${returnTo}`); } - }, [result, navigate]); + }, [result, navigate, hasAccount]); return (