tanstack_start_ts 1.0.0

package/src/routes/affiliate-disclosure.tsx

@@ -0,0 +1,35 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Prose } from "./about";
+
+export const Route = createFileRoute("/affiliate-disclosure")({
+  head: () => ({
+    meta: [
+      { title: "Affiliate Disclosure · Scrollsy" },
+      { name: "description", content: "How Scrollsy makes money — full affiliate disclosure." },
+    ],
+  }),
+  component: () => (
+    <Prose title="Affiliate Disclosure" subtitle="Full transparency, always.">
+      <p>
+        <strong>Scrollsy may earn commissions from purchases made through affiliate links.</strong>
+      </p>
+      <p>
+        When you click "View Deal" on a product, you'll be sent to a partner retailer — for example
+        AliExpress, Amazon, Temu or Kilimall. If you buy something during that visit, Scrollsy may
+        receive a small commission from the retailer.
+      </p>
+      <h2>Does this cost you anything?</h2>
+      <p>
+        Nope. Affiliate commissions are paid by the retailer out of their margin. You pay the same
+        price you would have paid going to the retailer directly.
+      </p>
+      <h2>Does it influence what we feature?</h2>
+      <p>
+        We feature products based on virality, quality and price — not commission rate. Our
+        editorial picks stay independent of any merchant relationship.
+      </p>
+      <h2>Want to learn more?</h2>
+      <p>Email us at affiliates@scrollsy.app.</p>
+    </Prose>
+  ),
+});

package/src/routes/categories.tsx

@@ -0,0 +1,57 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
+import { getCategories } from "@/lib/products.functions";
+
+export const Route = createFileRoute("/categories")({
+  head: () => ({
+    meta: [
+      { title: "Categories · Scrollsy" },
+      {
+        name: "description",
+        content:
+          "Browse Scrollsy product categories — tech, fashion, smart home, gaming, viral finds and more.",
+      },
+    ],
+    links: [{ rel: "canonical", href: "/categories" }],
+  }),
+  component: Categories,
+});
+
+function Categories() {
+  const { data } = useQuery({ queryKey: ["cats"], queryFn: () => getCategories() });
+  return (
+    <div className="px-4 max-w-7xl mx-auto pt-10">
+      <h1 className="font-display text-4xl md:text-5xl font-bold tracking-tight">
+        Explore <span className="text-gradient">categories</span>
+      </h1>
+      <p className="text-muted-foreground mt-2">
+        Every aesthetic. Every obsession. One scroll away.
+      </p>
+
+      <div className="mt-10 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        {(data ?? []).map((c, i) => (
+          <Link
+            key={c.id}
+            to="/category/$slug"
+            params={{ slug: c.slug }}
+            className="group glass rounded-3xl p-6 aspect-square flex flex-col justify-between hover:scale-[1.03] transition-transform relative overflow-hidden"
+          >
+            <div
+              className="absolute -top-10 -right-10 w-40 h-40 rounded-full opacity-40 group-hover:opacity-70 transition-opacity blur-2xl"
+              style={{
+                background: `conic-gradient(from ${i * 40}deg, #ff6b35, #e84393, #6c5ce7, #ff6b35)`,
+              }}
+            />
+            <div className="relative">
+              <div className="text-xs text-muted-foreground uppercase tracking-wider">Category</div>
+              <div className="font-display text-2xl font-bold mt-2">{c.name}</div>
+            </div>
+            <div className="relative text-xs text-muted-foreground group-hover:text-foreground transition-colors">
+              Explore →
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/routes/category.$slug.tsx

@@ -0,0 +1,51 @@
+import { createFileRoute, Link, notFound } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
+import { getProductsByCategory } from "@/lib/products.functions";
+import { ProductCard } from "@/components/scrollsy/ProductCard";
+import { ChevronLeft } from "lucide-react";
+
+export const Route = createFileRoute("/category/$slug")({
+  head: ({ params }) => ({
+    meta: [
+      { title: `${params.slug.replace(/-/g, " ")} · Scrollsy` },
+      {
+        name: "description",
+        content: `Browse trending ${params.slug.replace(/-/g, " ")} finds on Scrollsy.`,
+      },
+    ],
+  }),
+  component: CategoryPage,
+});
+
+function CategoryPage() {
+  const { slug } = Route.useParams();
+  const { data, isLoading } = useQuery({
+    queryKey: ["cat", slug],
+    queryFn: () => getProductsByCategory({ data: { slug } }),
+  });
+
+  if (!isLoading && !data?.category) throw notFound();
+
+  return (
+    <div className="px-4 max-w-7xl mx-auto pt-10">
+      <Link
+        to="/categories"
+        className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
+      >
+        <ChevronLeft className="w-4 h-4" /> All categories
+      </Link>
+      <h1 className="mt-3 font-display text-4xl md:text-5xl font-bold tracking-tight">
+        {data?.category?.name ?? "…"}
+      </h1>
+      <p className="text-muted-foreground mt-1">
+        {data?.products.length ?? 0} trending finds in this drop
+      </p>
+
+      <div className="mt-8 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        {(data?.products ?? []).map((p) => (
+          <ProductCard key={p.id} product={p} aspect="tall" />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/routes/contact.tsx

@@ -0,0 +1,69 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Prose } from "./about";
+import { useState } from "react";
+import { Mail, Send } from "lucide-react";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/contact")({
+  head: () => ({
+    meta: [
+      { title: "Contact · Scrollsy" },
+      {
+        name: "description",
+        content:
+          "Get in touch with the Scrollsy team — partnerships, press, support and creator collabs.",
+      },
+    ],
+  }),
+  component: Contact,
+});
+
+function Contact() {
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState("");
+
+  const send = (e: React.FormEvent) => {
+    e.preventDefault();
+    toast.success("Thanks! We'll be in touch soon.");
+    setEmail("");
+    setMessage("");
+  };
+
+  return (
+    <Prose
+      title="Get in touch"
+      subtitle="Partnerships, press, support or creator collabs — we'd love to hear from you."
+    >
+      <form onSubmit={send} className="not-prose mt-8 space-y-3">
+        <label className="flex items-center gap-2 glass rounded-xl px-3 py-2.5">
+          <Mail className="w-4 h-4 text-muted-foreground" />
+          <input
+            required
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="Your email"
+            className="flex-1 bg-transparent outline-none text-sm"
+          />
+        </label>
+        <textarea
+          required
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          placeholder="How can we help?"
+          rows={5}
+          className="w-full glass rounded-xl px-3 py-2.5 text-sm bg-transparent outline-none resize-none"
+        />
+        <button className="btn-glow rounded-full px-6 py-3 font-semibold text-sm inline-flex items-center gap-2">
+          <Send className="w-4 h-4" /> Send message
+        </button>
+      </form>
+      <p className="text-sm mt-6">
+        Or email us directly at{" "}
+        <a href="mailto:hello@scrollsy.app" className="text-gradient font-semibold">
+          hello@scrollsy.app
+        </a>
+      </p>
+    </Prose>
+  );
+}

package/src/routes/faq.tsx

@@ -0,0 +1,63 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Prose } from "./about";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+const faqs = [
+  {
+    q: "What is Scrollsy?",
+    a: "Scrollsy is a visual product discovery platform that surfaces trending gadgets, viral finds and the best deals from across the web.",
+  },
+  {
+    q: "Does Scrollsy sell products directly?",
+    a: "No — when you tap 'View Deal' we send you to the retailer (AliExpress, Amazon, Temu, Kilimall, etc.) where you complete your purchase as normal.",
+  },
+  {
+    q: "How do you earn money?",
+    a: "Scrollsy may earn a small commission from purchases made through our affiliate links. It costs you nothing extra and keeps Scrollsy free to use.",
+  },
+  { q: "Is Scrollsy free?", a: "Yes — totally free for shoppers. Always." },
+  {
+    q: "How do I save products?",
+    a: "Tap the heart on any product card. Saved items live in your Saved page (you'll need a free account).",
+  },
+  {
+    q: "How are trending products selected?",
+    a: "Our team curates each drop based on virality signals (TikTok, Pinterest, social shares) plus real shopper engagement on Scrollsy.",
+  },
+  {
+    q: "Are the deals real?",
+    a: "Yes. We verify discount pricing at the time of curation, but stock and pricing on third-party retailers can change without notice.",
+  },
+];
+
+export const Route = createFileRoute("/faq")({
+  head: () => ({
+    meta: [
+      { title: "FAQ · Scrollsy" },
+      {
+        name: "description",
+        content:
+          "Frequently asked questions about Scrollsy — affiliate links, deals, accounts and more.",
+      },
+    ],
+  }),
+  component: () => (
+    <Prose title="Questions, answered" subtitle="Everything you might want to know about Scrollsy.">
+      <Accordion type="single" collapsible className="not-prose mt-6 space-y-2">
+        {faqs.map((f, i) => (
+          <AccordionItem key={i} value={`f${i}`} className="glass rounded-2xl px-4 border-none">
+            <AccordionTrigger className="text-left font-display font-semibold hover:no-underline">
+              {f.q}
+            </AccordionTrigger>
+            <AccordionContent className="text-muted-foreground">{f.a}</AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </Prose>
+  ),
+});

package/src/routes/index.tsx

@@ -0,0 +1,269 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
+import { Search, Sparkles, TrendingUp, Flame, Zap, ArrowRight } from "lucide-react";
+import { getHomeData } from "@/lib/products.functions";
+import { ProductCard } from "@/components/scrollsy/ProductCard";
+import { LiveTicker } from "@/components/scrollsy/LiveTicker";
+import heroBg from "@/assets/hero-bg.jpg";
+import { useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({
+  head: () => ({
+    meta: [
+      { title: "Scrollsy — Scroll. Discover. Save." },
+      {
+        name: "description",
+        content:
+          "Discover viral gadgets, trending finds and hidden deals on Scrollsy — the visual marketplace built for endless scrolling.",
+      },
+      { property: "og:title", content: "Scrollsy — Scroll. Discover. Save." },
+      { property: "og:image", content: heroBg },
+    ],
+    links: [{ rel: "canonical", href: "/" }],
+  }),
+  component: Home,
+});
+
+function Home() {
+  const { data } = useQuery({ queryKey: ["home"], queryFn: () => getHomeData() });
+  const [q, setQ] = useState("");
+  const nav = useNavigate();
+
+  const featured = data?.featured ?? [];
+  const trending = data?.trending ?? [];
+  const recent = data?.recent ?? [];
+  const categories = data?.categories ?? [];
+
+  return (
+    <div className="px-4">
+      {/* HERO */}
+      <section className="relative max-w-7xl mx-auto rounded-[2rem] overflow-hidden mt-4 border border-white/5">
+        <img
+          src={heroBg}
+          alt=""
+          className="absolute inset-0 w-full h-full object-cover opacity-60"
+          width={1920}
+          height={1080}
+        />
+        <div className="absolute inset-0 bg-gradient-to-b from-background/30 via-background/40 to-background" />
+        <div className="absolute inset-0 bg-gradient-radial" />
+
+        <div className="relative z-10 px-6 md:px-14 py-20 md:py-28 max-w-4xl">
+          <div className="mb-6">
+            <LiveTicker />
+          </div>
+
+          <h1 className="font-display text-5xl md:text-7xl font-bold leading-[1.02] tracking-tight">
+            Scroll. Discover. <span className="text-gradient animate-gradient">Save.</span>
+          </h1>
+          <p className="mt-5 text-lg md:text-xl text-muted-foreground max-w-xl">
+            The visual marketplace of the internet's hidden gems. Viral gadgets, smart finds and
+            trending deals — curated for endless scrolling.
+          </p>
+
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              nav({ to: "/search", search: { q } });
+            }}
+            className="mt-8 max-w-xl flex glass-strong rounded-2xl p-1.5 shadow-elevated"
+          >
+            <div className="flex items-center gap-2 px-3 text-muted-foreground">
+              <Search className="w-5 h-5" />
+            </div>
+            <input
+              value={q}
+              onChange={(e) => setQ(e.target.value)}
+              placeholder="Search products, gadgets, viral finds…"
+              className="flex-1 bg-transparent outline-none text-sm placeholder:text-muted-foreground py-3"
+            />
+            <button
+              type="submit"
+              className="btn-glow rounded-xl px-5 py-2.5 text-sm font-semibold inline-flex items-center gap-1.5"
+            >
+              <Sparkles className="w-4 h-4" /> Discover
+            </button>
+          </form>
+
+          <div className="mt-8 flex flex-wrap gap-2">
+            {categories.slice(0, 8).map((c) => (
+              <Link
+                key={c.id}
+                to="/category/$slug"
+                params={{ slug: c.slug }}
+                className="glass rounded-full px-3.5 py-1.5 text-xs font-medium hover:bg-white/10 transition"
+              >
+                {c.name}
+              </Link>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* FEATURED BENTO */}
+      {featured.length > 0 && (
+        <Section
+          eyebrow={
+            <>
+              <Zap className="w-3.5 h-3.5" /> Featured today
+            </>
+          }
+          title="Most popular right now"
+          subtitle="Hand-picked finds the community is loving"
+          href="/search"
+        >
+          <BentoGrid products={featured} />
+        </Section>
+      )}
+
+      {/* CATEGORY SLIDER */}
+      <Section title="Shop by mood" eyebrow={<>Categories</>}>
+        <div className="flex gap-3 overflow-x-auto pb-3 -mx-4 px-4 snap-x">
+          {categories.map((c, i) => (
+            <Link
+              key={c.id}
+              to="/category/$slug"
+              params={{ slug: c.slug }}
+              className="snap-start shrink-0 glass rounded-2xl px-5 py-4 hover:scale-105 transition-transform min-w-[140px]"
+              style={{
+                background: `linear-gradient(135deg, hsl(${(i * 27) % 360} 80% 55% / 0.18), transparent)`,
+              }}
+            >
+              <div className="text-xs text-muted-foreground">Category</div>
+              <div className="text-base font-display font-semibold mt-1">{c.name}</div>
+            </Link>
+          ))}
+        </div>
+      </Section>
+
+      {/* TRENDING */}
+      {trending.length > 0 && (
+        <Section
+          eyebrow={
+            <>
+              <TrendingUp className="w-3.5 h-3.5" /> Trending
+            </>
+          }
+          title="Trending on TikTok"
+          subtitle="Going viral right now"
+          href="/search"
+        >
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            {trending.slice(0, 8).map((p) => (
+              <ProductCard key={p.id} product={p} aspect="tall" />
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* BEST DEALS BANNER */}
+      <section className="max-w-7xl mx-auto mt-16 rounded-3xl overflow-hidden relative border border-white/5">
+        <div className="bg-gradient-brand animate-gradient p-8 md:p-12">
+          <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+            <div>
+              <span className="inline-flex items-center gap-1.5 text-xs font-semibold bg-black/30 rounded-full px-3 py-1">
+                <Flame className="w-3.5 h-3.5" /> Hot deals
+              </span>
+              <h2 className="font-display text-3xl md:text-4xl font-bold mt-3 text-white">
+                Up to 70% off · today only
+              </h2>
+              <p className="text-white/90 mt-2 max-w-md">
+                Limited drops curated from across the web. When they're gone, they're gone.
+              </p>
+            </div>
+            <Link
+              to="/search"
+              search={{ q: "" }}
+              className="bg-black text-white rounded-full px-5 py-3 font-semibold text-sm inline-flex items-center gap-2 hover:bg-black/80 transition"
+            >
+              Shop deals <ArrowRight className="w-4 h-4" />
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* MASONRY FEED */}
+      {recent.length > 0 && (
+        <Section
+          eyebrow={<>Fresh drops</>}
+          title="Recently added"
+          subtitle="The newest finds, just in"
+        >
+          <div className="columns-2 md:columns-3 lg:columns-4 gap-4 space-y-4 [&>*]:break-inside-avoid">
+            {recent.map((p, i) => (
+              <ProductCard
+                key={p.id}
+                product={p}
+                aspect={(["tall", "square", "wide", "tall"] as const)[i % 4]}
+              />
+            ))}
+          </div>
+        </Section>
+      )}
+    </div>
+  );
+}
+
+function Section({
+  title,
+  subtitle,
+  eyebrow,
+  href,
+  children,
+}: {
+  title: string;
+  subtitle?: string;
+  eyebrow?: React.ReactNode;
+  href?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="max-w-7xl mx-auto mt-16 animate-fade-up">
+      <div className="flex items-end justify-between mb-6">
+        <div>
+          {eyebrow && (
+            <div className="inline-flex items-center gap-1.5 text-xs font-semibold text-brand-magenta bg-brand-magenta/10 rounded-full px-3 py-1 mb-2">
+              {eyebrow}
+            </div>
+          )}
+          <h2 className="font-display text-2xl md:text-3xl font-bold tracking-tight">{title}</h2>
+          {subtitle && <p className="text-sm text-muted-foreground mt-1">{subtitle}</p>}
+        </div>
+        {href && (
+          <Link
+            to={href}
+            className="text-xs text-muted-foreground hover:text-foreground inline-flex items-center gap-1"
+          >
+            View all <ArrowRight className="w-3.5 h-3.5" />
+          </Link>
+        )}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+function BentoGrid({ products }: { products: any[] }) {
+  // 8 products into bento layout
+  if (products.length < 4) {
+    return (
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {products.map((p) => (
+          <ProductCard key={p.id} product={p} aspect="square" />
+        ))}
+      </div>
+    );
+  }
+  const [big, ...rest] = products;
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 grid-rows-2 gap-4 md:h-[640px]">
+      <div className="col-span-2 row-span-2 md:row-span-2">
+        <ProductCard product={big} aspect="auto" className="h-full" priority />
+      </div>
+      {rest.slice(0, 4).map((p) => (
+        <ProductCard key={p.id} product={p} aspect="auto" className="h-full" />
+      ))}
+    </div>
+  );
+}