fix(web): clickable links in cart bio + legible hero text on any cover

- Bio now auto-links http(s) URLs (clickable) on the public cart page.
- Hero title/bio/handle were cream over a weak scrim → invisible on light
  covers (in the preview and on mobile). Strengthen the bottom scrim
  (ink/90→ink/10) and add a text shadow so they stay readable on any cover;
  same fix in the editor live preview.

Author: mayur-tolexo

web/app/(public)/c/[slug]/page.tsx

@@ -6,6 +6,7 @@ import { ProductCard } from "@/components/product-card";
 import { RevealOnScroll } from "@/components/reveal-on-scroll";
 import { StickyShareBar } from "@/components/sticky-share-bar";
 import { CartCover } from "@/components/cart-cover";
+import { linkify } from "@/lib/linkify";
 
 export const dynamic = "force-dynamic";
 
@@ -40,14 +41,15 @@ export default async function PublicCartPage({ params }: { params: { slug: strin
           priority
           sizes="100vw"
         />
-        <div className="absolute inset-0 bg-gradient-to-t from-ink/80 via-ink/30 to-transparent" />
-        <div className="absolute inset-x-0 bottom-0 px-5 sm:px-6 pb-6 sm:pb-10 max-w-3xl mx-auto text-cream">
+        {/* Stronger bottom scrim so cream text stays legible on light covers. */}
+        <div className="absolute inset-0 bg-gradient-to-t from-ink/90 via-ink/55 to-ink/10" />
+        <div className="absolute inset-x-0 bottom-0 px-5 sm:px-6 pb-6 sm:pb-10 max-w-3xl mx-auto text-cream [text-shadow:0_1px_10px_rgba(0,0,0,0.55)]">
           <div className="flex items-center gap-2 mb-2 sm:mb-3">
-            <Image src={cart.ownerAvatarUrl} alt="" width={32} height={32} className="rounded-full border border-cream/30" unoptimized />
-            <span className="text-sm opacity-90">@{cart.ownerHandle}</span>
+            <Image src={cart.ownerAvatarUrl} alt="" width={32} height={32} className="rounded-full border border-cream/40" unoptimized />
+            <span className="text-sm font-medium">@{cart.ownerHandle}</span>
           </div>
           <h1 className="font-serif text-3xl sm:text-5xl leading-[1.05] mb-2 sm:mb-3">{cart.title}</h1>
-          {cart.bio && <p className="text-sm sm:text-base opacity-90 max-w-xl leading-relaxed">{cart.bio}</p>}
+          {cart.bio && <p className="text-sm sm:text-base text-cream/95 max-w-xl leading-relaxed">{linkify(cart.bio)}</p>}
         </div>
       </section>
 

web/app/dashboard/carts/[id]/editor.tsx

@@ -352,9 +352,9 @@ function PreviewCartPage({ cart }: { cart: Cart }) {
     <div style={{ ["--accent" as string]: cart.accentHex } as React.CSSProperties}>
       <div className="relative aspect-[5/4]">
         <CartCover coverImageUrl={cart.coverImageUrl} accentHex={cart.accentHex} title={cart.title} />
-        <div className="absolute inset-0 bg-gradient-to-t from-ink/70 via-ink/20 to-transparent" />
-        <div className="absolute bottom-3 left-3 right-3 text-cream">
-          <p className="text-xs opacity-90">@{cart.ownerHandle}</p>
+        <div className="absolute inset-0 bg-gradient-to-t from-ink/90 via-ink/55 to-ink/10" />
+        <div className="absolute bottom-3 left-3 right-3 text-cream [text-shadow:0_1px_8px_rgba(0,0,0,0.55)]">
+          <p className="text-xs font-medium">@{cart.ownerHandle}</p>
           <p className="font-serif text-xl leading-tight">{cart.title}</p>
         </div>
       </div>

web/lib/linkify.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+const URL_RE = /(https?:\/\/[^\s]+)/g;
+
+// Render free text with any http(s) URLs turned into clickable links.
+// Safe inside server components; not for use inside another <a>.
+export function linkify(text: string): React.ReactNode[] {
+  return text.split(URL_RE).map((part, i) =>
+    /^https?:\/\//.test(part) ? (
+      <a
+        key={i}
+        href={part}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="underline underline-offset-2 break-words hover:opacity-80"
+      >
+        {part}
+      </a>
+    ) : (
+      <React.Fragment key={i}>{part}</React.Fragment>
+    ),
+  );
+}