From 5ec0bab5912040e1fcc9c405d66a170f629eadde Mon Sep 17 00:00:00 2001 From: jhislop-design Date: Fri, 3 Jul 2026 10:49:11 -0600 Subject: [PATCH 1/2] Add Lovable Gold-partner page Build out /partners/lovable as a dedicated, SEO/conversion-focused partner page, mirroring the structure of the existing Railway page (partners.railway.tsx) with Lovable's own product data. - Reuses site components (Card, Button, Collapsible, CodeBlock, PartnerImage), Tailwind conventions, dark mode, and analytics tracking (partner_viewed / partner_clicked). - Framing: Lovable generates TanStack Start apps from a prompt and ships them to Lovable Cloud (deploy/hosting angle). - Real product data: 8M+ builders, 25M+ apps, credit-based pricing (Free $0 / Pro $25 / Business $50 / Enterprise custom). - Social-proof section uses verifiable aggregate stats rather than attributed testimonials. - SEO: seo() meta (title, description, keywords, OG, Twitter) plus JSON-LD WebPage (partner) + FAQPage (6 Q&As) for rich results and AI search agents. - All outbound links carry ?utm_medium=sponsor&utm_source=tanstack&utm_campaign=partner-page. A static /partners/lovable route auto-overrides the dynamic $partner fallback; routeTree.gen.ts regenerated accordingly. Co-Authored-By: Claude Opus 4.8 --- src/routeTree.gen.ts | 21 + src/routes/partners.lovable.tsx | 776 ++++++++++++++++++++++++++++++++ 2 files changed, 797 insertions(+) create mode 100644 src/routes/partners.lovable.tsx diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts index fc3a7200d..0ea3c6226 100644 --- a/src/routeTree.gen.ts +++ b/src/routeTree.gen.ts @@ -57,6 +57,7 @@ import { Route as ShopSearchRouteImport } from './routes/shop.search' import { Route as ShopCartRouteImport } from './routes/shop.cart' import { Route as ShopHandleRouteImport } from './routes/shop.$handle' import { Route as PartnersRailwayRouteImport } from './routes/partners.railway' +import { Route as PartnersLovableRouteImport } from './routes/partners.lovable' import { Route as PartnersPartnerRouteImport } from './routes/partners.$partner' import { Route as OauthTokenRouteImport } from './routes/oauth/token' import { Route as OauthRegisterRouteImport } from './routes/oauth/register' @@ -402,6 +403,11 @@ const PartnersRailwayRoute = PartnersRailwayRouteImport.update({ path: '/railway', getParentRoute: () => PartnersRoute, } as any) +const PartnersLovableRoute = PartnersLovableRouteImport.update({ + id: '/lovable', + path: '/lovable', + getParentRoute: () => PartnersRoute, +} as any) const PartnersPartnerRoute = PartnersPartnerRouteImport.update({ id: '/$partner', path: '/$partner', @@ -1029,6 +1035,7 @@ export interface FileRoutesByFullPath { '/oauth/register': typeof OauthRegisterRoute '/oauth/token': typeof OauthTokenRoute '/partners/$partner': typeof PartnersPartnerRoute + '/partners/lovable': typeof PartnersLovableRoute '/partners/railway': typeof PartnersRailwayRoute '/shop/$handle': typeof ShopHandleRoute '/shop/cart': typeof ShopCartRoute @@ -1176,6 +1183,7 @@ export interface FileRoutesByTo { '/oauth/register': typeof OauthRegisterRoute '/oauth/token': typeof OauthTokenRoute '/partners/$partner': typeof PartnersPartnerRoute + '/partners/lovable': typeof PartnersLovableRoute '/partners/railway': typeof PartnersRailwayRoute '/shop/$handle': typeof ShopHandleRoute '/shop/cart': typeof ShopCartRoute @@ -1329,6 +1337,7 @@ export interface FileRoutesById { '/oauth/register': typeof OauthRegisterRoute '/oauth/token': typeof OauthTokenRoute '/partners/$partner': typeof PartnersPartnerRoute + '/partners/lovable': typeof PartnersLovableRoute '/partners/railway': typeof PartnersRailwayRoute '/shop/$handle': typeof ShopHandleRoute '/shop/cart': typeof ShopCartRoute @@ -1485,6 +1494,7 @@ export interface FileRouteTypes { | '/oauth/register' | '/oauth/token' | '/partners/$partner' + | '/partners/lovable' | '/partners/railway' | '/shop/$handle' | '/shop/cart' @@ -1632,6 +1642,7 @@ export interface FileRouteTypes { | '/oauth/register' | '/oauth/token' | '/partners/$partner' + | '/partners/lovable' | '/partners/railway' | '/shop/$handle' | '/shop/cart' @@ -1784,6 +1795,7 @@ export interface FileRouteTypes { | '/oauth/register' | '/oauth/token' | '/partners/$partner' + | '/partners/lovable' | '/partners/railway' | '/shop/$handle' | '/shop/cart' @@ -2301,6 +2313,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof PartnersRailwayRouteImport parentRoute: typeof PartnersRoute } + '/partners/lovable': { + id: '/partners/lovable' + path: '/lovable' + fullPath: '/partners/lovable' + preLoaderRoute: typeof PartnersLovableRouteImport + parentRoute: typeof PartnersRoute + } '/partners/$partner': { id: '/partners/$partner' path: '/$partner' @@ -3267,12 +3286,14 @@ const BuilderRouteWithChildren = interface PartnersRouteChildren { PartnersPartnerRoute: typeof PartnersPartnerRoute + PartnersLovableRoute: typeof PartnersLovableRoute PartnersRailwayRoute: typeof PartnersRailwayRoute PartnersIndexRoute: typeof PartnersIndexRoute } const PartnersRouteChildren: PartnersRouteChildren = { PartnersPartnerRoute: PartnersPartnerRoute, + PartnersLovableRoute: PartnersLovableRoute, PartnersRailwayRoute: PartnersRailwayRoute, PartnersIndexRoute: PartnersIndexRoute, } diff --git a/src/routes/partners.lovable.tsx b/src/routes/partners.lovable.tsx new file mode 100644 index 000000000..34b4e0e27 --- /dev/null +++ b/src/routes/partners.lovable.tsx @@ -0,0 +1,776 @@ +import * as React from 'react' +import { Link, createFileRoute } from '@tanstack/react-router' +import { + ArrowUpRight, + Blocks, + Check, + Cloud, + Database, + GitBranch, + Globe, + MousePointerClick, + Plus, + Puzzle, + Sparkles, +} from 'lucide-react' +import { twMerge } from 'tailwind-merge' +import { Footer } from '~/components/Footer' +import { Card } from '~/components/Card' +import { Button } from '~/ui' +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from '~/components/Collapsible' +import { CodeBlock } from '~/components/markdown/CodeBlock' +import { seo } from '~/utils/seo' +import { getPartnerById, PartnerImage } from '~/utils/partners' +import { getPartnerJsonLd } from '~/utils/partner-pages' +import { trackEvent } from '~/utils/analytics' + +const UTM = '?utm_medium=sponsor&utm_source=tanstack&utm_campaign=partner-page' +const LOVABLE_HREF = `https://lovable.dev/${UTM}` +const LOVABLE_DOCS_HREF = `https://docs.lovable.dev/${UTM}` +const LOVABLE_HOME_HREF = `https://lovable.dev/${UTM}` +const LOVABLE_PRICING_HREF = `https://lovable.dev/pricing${UTM}` + +const PROMPT_SNIPPET = `Build a TanStack Start app for tracking gym workouts. +Use TanStack Router for the pages and TanStack Query for +data. Add email auth and a Postgres database, then deploy +it to Lovable Cloud when it's ready.` + +const GENERATED_SNIPPET = `my-app/ +├─ src/ +│ ├─ routes/ # TanStack Router file routes +│ ├─ router.tsx # TanStack Start + Router setup +│ └─ server/ # server functions +├─ vite.config.ts # tanstackStart() plugin +└─ package.json # deploys to Lovable Cloud` + +type FeatureIcon = React.ComponentType<{ className?: string }> + +const features: Array<{ Icon: FeatureIcon; title: string; desc: string }> = [ + { + Icon: Sparkles, + title: 'Prompt to app', + desc: 'Describe your app in plain English and Lovable generates a working TanStack Start project — routing, SSR, and UI scaffolded for you.', + }, + { + Icon: Blocks, + title: 'TanStack Start foundation', + desc: 'New Lovable projects are built on TanStack Start, so generated apps keep first-class routing, SSR, server functions, and end-to-end type safety.', + }, + { + Icon: Cloud, + title: 'One-click Lovable Cloud hosting', + desc: 'Ship the generated app to Lovable Cloud with a single click. Managed hosting with a live URL — no infrastructure to configure.', + }, + { + Icon: GitBranch, + title: 'Two-way GitHub sync', + desc: 'Lovable syncs both ways with GitHub. You own the code, can edit it locally, and keep building in Lovable — no lock-in.', + }, + { + Icon: MousePointerClick, + title: 'Visual editing', + desc: 'Tweak layout, copy, and styles visually. Lovable writes the underlying React and TanStack code for you as you go.', + }, + { + Icon: Database, + title: 'Built-in backend', + desc: "Add auth, database, and storage through Lovable Cloud's managed backend — wired into your TanStack app automatically.", + }, + { + Icon: Globe, + title: 'Instant preview URLs', + desc: 'Every project gets a live preview URL as you build. Share work-in-progress and gather feedback before you ship.', + }, + { + Icon: Puzzle, + title: 'Integrations from the prompt', + desc: 'Connect Stripe, analytics, and other services by asking for them. Lovable wires up the integration — no boilerplate glue code.', + }, +] + +const steps: Array<{ num: string; title: string; code: string }> = [ + { num: '01', title: 'Describe your app', code: '"Build a TanStack Start dashboard with auth"' }, + { num: '02', title: 'Lovable generates it', code: 'TanStack Start + Router + Query' }, + { num: '03', title: 'Refine visually or in code', code: 'edit in Lovable or push to GitHub' }, + { num: '04', title: 'Deploy to Lovable Cloud', code: 'one-click publish' }, +] + +const pricing: Array<{ + plan: string + price: string + note: string + features: Array + highlight?: boolean +}> = [ + { + plan: 'Free', + price: '$0', + note: '5 build credits per day', + features: [ + 'Up to 30 credits / month', + 'Public projects', + 'Up to 5 deployment subdomains', + 'No credit card required', + ], + }, + { + plan: 'Pro', + price: '$25', + note: '/month · 100 monthly credits', + features: [ + 'Private projects', + 'Custom domains', + 'Remove the Lovable badge', + 'Higher rate limits', + ], + highlight: true, + }, + { + plan: 'Business', + price: '$50', + note: '/month · per member', + features: [ + 'Everything in Pro', + 'SSO', + 'Data opt-out (no training)', + 'Centralized billing', + ], + }, + { + plan: 'Enterprise', + price: 'Custom', + note: 'for teams at scale', + features: [ + 'Custom credit volumes', + 'Dedicated support', + 'Advanced security & compliance', + 'Onboarding & SLAs', + ], + }, +] + +const creditCosts: Array<[string, string]> = [ + ['Style change', '~0.5 credits'], + ['New feature', '~1.2 credits'], + ['Free tier', '5 credits / day'], +] + +const libraries = [ + 'Start', + 'Router', + 'Query', + 'Table', + 'Form', + 'DB', + 'Store', + 'Devtools', +] + +const libDetails: Array<{ label: string; desc: string }> = [ + { + label: 'TanStack Start', + desc: 'Every new Lovable project is generated as a TanStack Start app, with SSR, server functions, and streaming ready out of the box.', + }, + { + label: 'TanStack Router', + desc: 'Generated apps use file-based routing, so the pages Lovable creates are fully typed and easy to extend by hand.', + }, + { + label: 'TanStack Query', + desc: 'Data fetching in generated apps is wired through TanStack Query, with caching and mutations already set up for you.', + }, + { + label: 'TanStack Form', + desc: 'Forms Lovable builds use TanStack Form for type-safe validation and state, ready to customize.', + }, +] + +const stats: Array<{ value: string; label: string }> = [ + { value: '$500M', label: 'Annual recurring revenue (2026)' }, + { value: '8M+', label: 'Builders on Lovable' }, + { value: '80%', label: 'of builders are non-technical' }, +] + +const faqs: Array<{ q: string; a: string }> = [ + { + q: 'Does Lovable build apps on TanStack Start?', + a: 'Yes. New Lovable projects are generated as TanStack Start apps, so you get file-based routing, SSR, server functions, and end-to-end type safety from the very first prompt.', + }, + { + q: 'Can I export the code and keep building by hand?', + a: 'Yes. Lovable syncs two-way with GitHub. You own the generated code and can edit it locally in any editor, then keep iterating in Lovable — there is no lock-in.', + }, + { + q: 'How does Lovable pricing work?', + a: 'Lovable runs on credits. The free plan gives 5 build credits per day (up to 30 a month). Pro is $25/month for 100 credits, and Business is $50/month with SSO and data opt-out. Most edits cost roughly 0.5–1.2 credits each.', + }, + { + q: 'Where do Lovable apps get hosted?', + a: 'Generated apps deploy to Lovable Cloud with one click, giving you a live URL and managed hosting. You can connect a custom domain on paid plans, or take the code to your own host through GitHub.', + }, + { + q: 'Can I add a database and authentication?', + a: "Yes. Lovable Cloud provides a managed backend with auth, database, and storage that Lovable wires into your TanStack app automatically as you build — just ask for it in the prompt.", + }, + { + q: 'What kinds of apps can I build with Lovable?', + a: 'Everything from internal tools and dashboards to full SaaS products and marketing sites. Because generated apps are built on TanStack Start, they scale from a prototype to production without a rewrite.', + }, +] + +const PAGE_TITLE = 'Build & Deploy TanStack Apps with Lovable — Official Gold Partner' +const PAGE_DESCRIPTION = + 'Lovable is the AI app builder that generates production TanStack Start apps from a prompt — file-based routing, SSR, and type safety included — then deploys them to Lovable Cloud with one click. Trusted by 8M+ builders.' + +function getFaqJsonLd() { + return { + '@context': 'https://schema.org', + '@type': 'FAQPage', + mainEntity: faqs.map((faq) => ({ + '@type': 'Question', + name: faq.q, + acceptedAnswer: { + '@type': 'Answer', + text: faq.a, + }, + })), + } +} + +export const Route = createFileRoute('/partners/lovable')({ + head: () => { + const partner = getPartnerById('lovable') + + return { + meta: seo({ + title: PAGE_TITLE, + description: PAGE_DESCRIPTION, + keywords: + 'lovable tanstack, build tanstack app with ai, lovable ai app builder, deploy tanstack lovable cloud, tanstack start lovable, lovable gold sponsor', + image: 'https://tanstack.com/og.png', + }), + scripts: [ + ...(partner + ? [ + { + type: 'application/ld+json', + children: JSON.stringify(getPartnerJsonLd(partner)), + }, + ] + : []), + { + type: 'application/ld+json', + children: JSON.stringify(getFaqJsonLd()), + }, + ], + } + }, + component: LovablePartnerPage, +}) + +function CheckBadge() { + return ( + + + + ) +} + +function trackLovableClick() { + trackEvent('partner_clicked', { + partner_id: 'lovable', + placement: 'detail', + destination: 'external', + destination_host: 'lovable.dev', + }) +} + +function LovableCodeExample({ + code, + lang, + title, +}: { + code: string + lang: string + title: string +}) { + return ( + + {code} + + ) +} + +function LovablePartnerPage() { + const [openFaq, setOpenFaq] = React.useState(null) + + React.useEffect(() => { + trackEvent('partner_viewed', { + partner_id: 'lovable', + placement: 'detail', + }) + }, []) + + const partner = getPartnerById('lovable') + + return ( +
+
+ + + {/* Hero */} +
+
+ {partner ? ( +
+ +
+ ) : null} +
+ + Gold Sponsor · AI App Builder & Hosting + +
+ + + New Lovable projects are powered by TanStack Start + +
+
+
+ +

+ Build and deploy TanStack apps +
+ by chatting with Lovable +

+ +

+ Lovable is the AI app builder trusted by 8M+ builders. Describe your + app and Lovable generates a production TanStack Start project — then + deploys it to Lovable Cloud in one click. +

+ +

+ New Lovable projects are powered by TanStack Start, so the app you + generate keeps first-class routing, SSR, and end-to-end type safety. +

+ +
+ + +
+

+ No credit card required. 5 free build credits every day. +

+
+ + {/* Stats */} +
+ {[ + ['8M+', 'Builders on Lovable'], + ['25M+', 'Apps built'], + ['100k+', 'New projects / day'], + ['$0', 'To get started'], + ].map(([value, label]) => ( +
+
{value}
+
+ {label} +
+
+ ))} +
+ + {/* Features */} +
+

+ Why TanStack teams choose Lovable +

+

+ Lovable turns an idea into a working, deployable TanStack app in + minutes. Here's what makes it the right fit for TanStack developers. +

+
+ {features.map(({ Icon, title, desc }) => ( + + +
{title}
+

+ {desc} +

+ + ))} +
+
+ + {/* How it works */} +
+

+ From prompt to deployed in 4 steps +

+

+ Lovable generates a TanStack Start app from your description, then + ships it to Lovable Cloud. Refine it visually or push to GitHub and + keep coding. +

+ +
+ {steps.map(({ num, title, code }) => ( + +
+ {num} +
+
+
{title}
+ + {code} + +
+ + ))} +
+ +
+ + +
+ +
+ + +
+
+ + {/* Library fit */} +
+

+ Built on the TanStack you already know +

+

+ Lovable generates apps on TanStack Start, so the routing, data, and + forms it scaffolds use the libraries your team already owns. +

+ +
+ {libraries.map((lib) => ( + + {lib} + + ))} +
+ +
+ {libDetails.map(({ label, desc }) => ( + +
+ + {label} +
+

+ {desc} +

+ + ))} +
+
+ + {/* Pricing */} +
+

+ Pricing that scales with you +

+

+ Lovable runs on credits — you spend them as you build. Start free + with 5 build credits a day, then upgrade when your project grows. +

+ +
+ {pricing.map(({ plan, price, note, features: pf, highlight }) => ( + + {highlight ? ( + + Most popular + + ) : null} +
{plan}
+
+ {price} +
+
+ {note} +
+
    + {pf.map((feat) => ( +
  • + + {feat} +
    • + ))} +
+ + ))} +
+ +
+ {creditCosts.map(([key, value]) => ( +
+
+ {key} +
+
+ {value} +
+
+ ))} +
+ +
+ + +
+
+ + {/* Social proof */} +
+

+ Trusted by millions of builders +

+

+ Lovable is one of the fastest-growing AI development platforms — and + most of the people shipping on it aren't traditional engineers. +

+
+ {stats.map(({ value, label }) => ( + +
+ {value} +
+

+ {label} +

+ + ))} +
+ +
+ + + + Powered by TanStack Start · no credit card required + +
+
+ + {/* FAQ */} +
+

+ Frequently asked questions +

+

+ Common questions from TanStack developers evaluating Lovable. +

+ +
+ {faqs.map(({ q, a }, i) => { + const isOpen = openFaq === i + return ( + setOpenFaq(next ? i : null)} + className="border-b border-gray-200 dark:border-gray-800" + > + + + {q} + + + + +

+ {a} +

+ + + ) + })} +
+
+ + {/* CTA */} +
+
+ New projects powered by TanStack Start +
+

+ Ready to build your next TanStack app? +

+

+ No credit card required. Start with 5 free build credits every day. +

+

+ From prompt to deployed app in minutes. +

+ +
+ + +
+
+ +

+ Lovable is a Gold-tier TanStack sponsor.{' '} + + Browse all TanStack partners + + .{' '} + + lovable.dev + +

+
+ +
+
+ ) +} From 31b37283c2e4d44a5053f5b5aa1c38f4e934ad7c Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 3 Jul 2026 16:55:17 +0000 Subject: [PATCH 2/2] ci: apply automated fixes --- src/routes/partners.lovable.tsx | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/src/routes/partners.lovable.tsx b/src/routes/partners.lovable.tsx index 34b4e0e27..c8ca9f423 100644 --- a/src/routes/partners.lovable.tsx +++ b/src/routes/partners.lovable.tsx @@ -93,9 +93,21 @@ const features: Array<{ Icon: FeatureIcon; title: string; desc: string }> = [ ] const steps: Array<{ num: string; title: string; code: string }> = [ - { num: '01', title: 'Describe your app', code: '"Build a TanStack Start dashboard with auth"' }, - { num: '02', title: 'Lovable generates it', code: 'TanStack Start + Router + Query' }, - { num: '03', title: 'Refine visually or in code', code: 'edit in Lovable or push to GitHub' }, + { + num: '01', + title: 'Describe your app', + code: '"Build a TanStack Start dashboard with auth"', + }, + { + num: '02', + title: 'Lovable generates it', + code: 'TanStack Start + Router + Query', + }, + { + num: '03', + title: 'Refine visually or in code', + code: 'edit in Lovable or push to GitHub', + }, { num: '04', title: 'Deploy to Lovable Cloud', code: 'one-click publish' }, ] @@ -214,7 +226,7 @@ const faqs: Array<{ q: string; a: string }> = [ }, { q: 'Can I add a database and authentication?', - a: "Yes. Lovable Cloud provides a managed backend with auth, database, and storage that Lovable wires into your TanStack app automatically as you build — just ask for it in the prompt.", + a: 'Yes. Lovable Cloud provides a managed backend with auth, database, and storage that Lovable wires into your TanStack app automatically as you build — just ask for it in the prompt.', }, { q: 'What kinds of apps can I build with Lovable?', @@ -222,7 +234,8 @@ const faqs: Array<{ q: string; a: string }> = [ }, ] -const PAGE_TITLE = 'Build & Deploy TanStack Apps with Lovable — Official Gold Partner' +const PAGE_TITLE = + 'Build & Deploy TanStack Apps with Lovable — Official Gold Partner' const PAGE_DESCRIPTION = 'Lovable is the AI app builder that generates production TanStack Start apps from a prompt — file-based routing, SSR, and type safety included — then deploys them to Lovable Cloud with one click. Trusted by 8M+ builders.' @@ -321,7 +334,10 @@ function LovablePartnerPage() {