feat(web): public roadmap page + feature-request email CTA

A /roadmap page showcasing what's next (public/private carts, uploads,
share-with-select, discover/follow creators, feed, wishlists, reviews,
earnings, collections, price alerts; extension in beta) with a prominent
'Request a feature' mailto to mayur.das4@gmail.com. Linked from the footer
and a landing teaser.

Author: mayur-tolexo

web/app/(public)/page.tsx

@@ -201,6 +201,12 @@ export default async function LandingPage() {
             >
               Start free <ArrowRight size={16} />
             </Link>
+            <p className="mt-6 text-sm text-muted">
+              Curious what&apos;s coming?{" "}
+              <Link href="/roadmap" className="text-accent underline underline-offset-4 hover:opacity-80">
+                See the roadmap
+              </Link>
+            </p>
           </div>
         </section>
       </main>

web/app/(public)/roadmap/page.tsx

@@ -0,0 +1,131 @@
+import type { Metadata } from "next";
+import { NavBar } from "@/components/nav-bar";
+import { Footer } from "@/components/footer";
+import { RevealOnScroll } from "@/components/reveal-on-scroll";
+import {
+  Lock, ImageUp, UsersRound, Search, Rss, Heart, Star,
+  Wallet, BellRing, FolderHeart, Puzzle, Mail, ArrowRight,
+} from "lucide-react";
+
+export const metadata: Metadata = {
+  title: "Roadmap · shoplit",
+  description: "What's shipping next on shoplit — and tell us what to build.",
+};
+
+const FEEDBACK_EMAIL = "mayur.das4@gmail.com";
+const mailto =
+  `mailto:${FEEDBACK_EMAIL}` +
+  `?subject=${encodeURIComponent("shoplit feature request")}` +
+  `&body=${encodeURIComponent("Hi! I'd love shoplit to have:\n\n")}`;
+
+type Status = "Beta" | "Soon" | "Planned" | "Exploring";
+
+const STATUS_STYLE: Record<Status, string> = {
+  Beta: "bg-accent text-cream",
+  Soon: "bg-accent/15 text-accent",
+  Planned: "bg-ink/10 text-ink",
+  Exploring: "border border-rule text-muted",
+};
+
+interface Item {
+  icon: React.ReactNode;
+  title: string;
+  body: string;
+  status: Status;
+}
+
+const ITEMS: Item[] = [
+  { icon: <Puzzle size={20} />, title: "Browser extension", status: "Beta",
+    body: "Add products to your cart in one click from Amazon, Myntra, Nykaa, Flipkart & AJIO — straight from the product page." },
+  { icon: <Lock size={20} />, title: "Public & private carts", status: "Soon",
+    body: "Decide who can see each cart — keep some public, others just for you until you're ready to share." },
+  { icon: <ImageUp size={20} />, title: "Upload your own cover", status: "Soon",
+    body: "Drag-and-drop your own cover images, not just paste a URL — make every cart unmistakably yours." },
+  { icon: <UsersRound size={20} />, title: "Share with select people", status: "Soon",
+    body: "Private links you can share with a chosen few — perfect for client edits or close-friends drops." },
+  { icon: <Wallet size={20} />, title: "Earnings dashboard", status: "Planned",
+    body: "See clicks, conversions and affiliate earnings per cart and product — know what's working." },
+  { icon: <Search size={20} />, title: "Discover creators", status: "Exploring",
+    body: "Search creators and browse their carts — a place to find taste you trust before you shop." },
+  { icon: <UsersRound size={20} />, title: "Follow creators", status: "Exploring",
+    body: "Follow your favourites and get notified when they drop a new cart or product." },
+  { icon: <Rss size={20} />, title: "Your feed", status: "Exploring",
+    body: "A home feed of fresh carts and finds from the creators you follow." },
+  { icon: <Heart size={20} />, title: "Wishlists", status: "Exploring",
+    body: "Save products you love from any cart into your own wishlist to shop later." },
+  { icon: <Star size={20} />, title: "Reviews & ratings", status: "Exploring",
+    body: "Creators and shoppers rate products, so recommendations come with real signal." },
+  { icon: <FolderHeart size={20} />, title: "Collections", status: "Exploring",
+    body: "Group carts into themed collections on your profile — \"Skincare\", \"Diwali\", \"Desk setup\"." },
+  { icon: <BellRing size={20} />, title: "Price-drop alerts", status: "Exploring",
+    body: "Get pinged when a product you saved drops in price." },
+];
+
+export default function RoadmapPage() {
+  return (
+    <>
+      <NavBar variant="marketing" />
+      <main className="mx-auto max-w-6xl px-4 sm:px-6">
+        {/* HERO */}
+        <section className="pt-16 pb-10 sm:pt-24 sm:pb-14 text-center max-w-2xl mx-auto">
+          <p className="text-sm text-accent uppercase tracking-widest font-medium mb-3">Roadmap</p>
+          <h1 className="font-serif text-4xl sm:text-5xl leading-[1.05] mb-4">Where shoplit is headed</h1>
+          <p className="text-muted text-lg leading-relaxed mb-8">
+            shoplit is just getting started. Here&apos;s what we&apos;re building next — and the
+            single best way to shape it is to tell us what you want.
+          </p>
+          <a
+            href={mailto}
+            className="inline-flex items-center gap-2 rounded-full bg-ink text-cream px-6 py-3 font-medium hover:opacity-90 transition-opacity"
+          >
+            <Mail size={16} /> Request a feature
+          </a>
+        </section>
+
+        {/* GRID */}
+        <section className="pb-16">
+          <div className="grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
+            {ITEMS.map((it, i) => (
+              <RevealOnScroll key={it.title} index={i}>
+                <article className="h-full rounded-2xl border border-rule bg-cream p-5 sm:p-6 transition-all hover:shadow-md hover:-translate-y-0.5">
+                  <div className="flex items-center justify-between mb-3">
+                    <span
+                      className="grid place-items-center size-10 rounded-xl text-accent"
+                      style={{ backgroundColor: "color-mix(in srgb, var(--accent) 12%, transparent)" }}
+                    >
+                      {it.icon}
+                    </span>
+                    <span className={`text-[11px] font-medium uppercase tracking-wider rounded-full px-2.5 py-1 ${STATUS_STYLE[it.status]}`}>
+                      {it.status}
+                    </span>
+                  </div>
+                  <h3 className="font-serif text-xl mb-1.5">{it.title}</h3>
+                  <p className="text-sm text-muted leading-relaxed">{it.body}</p>
+                </article>
+              </RevealOnScroll>
+            ))}
+          </div>
+        </section>
+
+        {/* CLOSING CTA */}
+        <section className="pb-24">
+          <div className="rounded-2xl bg-ink text-cream px-6 sm:px-10 py-10 sm:py-14 text-center">
+            <h2 className="font-serif text-3xl sm:text-4xl mb-3">Got an idea? We&apos;re listening.</h2>
+            <p className="text-cream/80 max-w-xl mx-auto mb-7 leading-relaxed">
+              Every feature here started as a creator&apos;s request. Tell us what would make
+              shoplit indispensable for you — we read every email.
+            </p>
+            <a
+              href={mailto}
+              className="inline-flex items-center gap-2 rounded-full bg-accent text-cream px-6 py-3 font-medium hover:opacity-90 transition-opacity"
+            >
+              Email us your idea <ArrowRight size={16} />
+            </a>
+            <p className="text-cream/60 text-sm mt-4">{FEEDBACK_EMAIL}</p>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  );
+}

web/components/footer.tsx

@@ -5,7 +5,14 @@ export function Footer({ minimal = false }: { minimal?: boolean }) {
     <footer className="border-t border-rule mt-16">
       <div className="mx-auto max-w-6xl px-4 sm:px-6 py-8 text-sm text-muted flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <p className="font-serif text-base text-ink">shoplit</p>
-        <nav className="flex items-center gap-5">
+        <nav className="flex flex-wrap items-center gap-5">
+          <Link href="/roadmap" className="hover:text-ink transition-colors">Roadmap</Link>
+          <a
+            href="mailto:mayur.das4@gmail.com?subject=shoplit%20feature%20request"
+            className="hover:text-ink transition-colors"
+          >
+            Request a feature
+          </a>
           <Link href="/legal/privacy" className="hover:text-ink transition-colors">Privacy</Link>
           <Link href="/legal/terms" className="hover:text-ink transition-colors">Terms</Link>
           {!minimal && (