feat: update UI text and styles for improved user experience

Author: tkxkd0159

app/(protected)/layout.tsx

@@ -16,7 +16,11 @@ export default async function ProtectedLayout({ children }: Props.Layout) {
         <header className="relative z-40 overflow-visible border-b border-(--border) bg-(--surface-strong)/90 backdrop-blur">
           <div className="mx-auto flex w-full max-w-6xl flex-wrap items-center justify-between gap-3 px-4 py-4 sm:px-6 lg:px-8">
             <div className="flex items-center gap-2">
-              <Link href="/books/search" className="text-lg font-semibold">
+              <Link
+                href="/books/search"
+                className="text-4xl leading-none text-foreground"
+                style={{ fontFamily: '"Romanesco", cursive' }}
+              >
                 Book by Book
               </Link>
             </div>

app/globals.css

@@ -1,3 +1,4 @@
+@import url("https://fonts.googleapis.com/css2?family=Romanesco&display=swap");
 @import "tailwindcss";
 
 :root {

app/page.tsx

@@ -23,48 +23,48 @@ export default async function Page() {
         Book by Book
       </p>
       <h1 className="max-w-3xl text-4xl font-semibold leading-tight sm:text-5xl">
-        Build your reading life with social clubs and personal shelves.
+        A social home for your reading life.
       </h1>
       <p className="mt-5 max-w-2xl text-lg text-(--muted)">
-        Sign in, discover books from our vast catalog, and start shaping your
-        next reads.
+        Discover books, organize them on personal shelves, read together in
+        clubs, and leave reviews and discussions that stay tied to each title.
       </p>
 
       <div className="mt-8">
         <Link href="/signin" className={buttonStyles({ size: "lg" })}>
-          Let the fun begin!
+          Start your reading life
         </Link>
       </div>
 
       <div className="mt-14 grid w-full gap-4 md:grid-cols-3">
         <Card>
           <CardHeader>
-            <CardTitle>Search Fast</CardTitle>
-            <CardDescription>Google Books-backed discovery</CardDescription>
+            <CardTitle>Read together in clubs</CardTitle>
+            <CardDescription>Shared boards and book threads</CardDescription>
           </CardHeader>
           <CardContent className="text-sm text-(--muted)">
-            Find titles by author, title, or ISBN and add them directly to the
-            clubs you manage.
+            Track what your club wants to read, is reading, and has finished,
+            then keep every discussion anchored to the book itself.
           </CardContent>
         </Card>
         <Card>
           <CardHeader>
-            <CardTitle>Cache Reliable</CardTitle>
-            <CardDescription>Local database copy</CardDescription>
+            <CardTitle>Build personal shelves</CardTitle>
+            <CardDescription>Private or public reading lists</CardDescription>
           </CardHeader>
           <CardContent className="text-sm text-(--muted)">
-            Books added to your clubs are cached in Postgres and reused for
-            book detail rendering.
+            Create custom shelves for themes, moods, and reading projects, add
+            notes, and share the lists you want others to browse.
           </CardContent>
         </Card>
         <Card>
           <CardHeader>
-            <CardTitle>Milestone Ready</CardTitle>
-            <CardDescription>Foundation for clubs</CardDescription>
+            <CardTitle>Review books, not just lists</CardTitle>
+            <CardDescription>Ratings that stay with the book</CardDescription>
           </CardHeader>
           <CardContent className="text-sm text-(--muted)">
-            Auth and books are in place so clubs, threads, shelves, and reviews
-            can layer on next.
+            Leave your take on the book detail page, build a reviewed history,
+            and see how other readers responded to the same title.
           </CardContent>
         </Card>
       </div>

app/signin/page.tsx

@@ -45,10 +45,7 @@ export default async function SignInPage({ searchParams }: Props.Page) {
       <Card className="w-full border-2 bg-(--surface-strong)">
         <CardHeader>
           <CardTitle className="text-3xl">Sign in to Book by Book</CardTitle>
-          <CardDescription>
-            Google login is required for milestone 1 and ready for future
-            provider extensions.
-          </CardDescription>
+          <CardDescription></CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           {errorMessage ? (

components/auth/sign-in-google-button.tsx

@@ -54,7 +54,7 @@ export default function SignInGoogleButton({
             </svg>
           </span>
           <span className="google-signin-contents">
-            {isPending ? "Redirecting..." : "Sign in with Google"}
+            {isPending ? "Redirecting..." : "Continue with Google"}
           </span>
         </span>
       </button>
@@ -90,7 +90,10 @@ export default function SignInGoogleButton({
           padding: 0;
           position: relative;
           text-align: center;
-          transition: transform 0.18s ease, box-shadow 0.2s ease, filter 0.2s ease;
+          transition:
+            transform 0.18s ease,
+            box-shadow 0.2s ease,
+            filter 0.2s ease;
           vertical-align: middle;
           white-space: nowrap;
           width: 100%;

components/ui/flash-toast.tsx

@@ -43,7 +43,7 @@ function buildToastItems(message: string | null, error: string | null) {
 export function FlashToast({
   message = null,
   error = null,
-  durationMs = 2000,
+  durationMs = 1500,
 }: FlashToastProps) {
   const router = useRouter();
   const pathname = usePathname();