Feat/pro waitlist

.env

@@ -1,3 +1,4 @@
 VITE_SUPABASE_PROJECT_ID="bdeotnzldfnqwbdymscp"
 VITE_SUPABASE_PUBLISHABLE_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJkZW90bnpsZGZucXdiZHltc2NwIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjYxMzE2ODUsImV4cCI6MjA4MTcwNzY4NX0.W9R1AmVKUfmY9Ze9TyswlkbTNrEYSD2Qa_1TBzYRiIQ"
 VITE_SUPABASE_URL="https://bdeotnzldfnqwbdymscp.supabase.co"
+VITE_SUPPORT_URL="https://ko-fi.com/trainofthoughts"

.env.example

@@ -0,0 +1,16 @@
+# Public-facing config — copy this file to `.env` locally, fill in real values.
+# For production, set the same keys in Lovable's environment config.
+
+# Supabase project (PUBLIC anon key is safe to ship in bundle)
+VITE_SUPABASE_PROJECT_ID=""
+VITE_SUPABASE_PUBLISHABLE_KEY=""
+VITE_SUPABASE_URL=""
+
+# Optional: tip / support page URL. When set, a "Support this app" card
+# appears on HomeScreen and opens this URL in a new tab. Leave blank to
+# hide the card entirely (the dev experience stays clean).
+# Examples:
+#   VITE_SUPPORT_URL="https://ko-fi.com/yourname"
+#   VITE_SUPPORT_URL="https://paypal.me/yourname"
+#   VITE_SUPPORT_URL="https://buy.stripe.com/abc123"
+VITE_SUPPORT_URL=""

src/components/journal/HomeScreen.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip';
-import { Feather, CheckCircle2, Zap, Sprout, LogOut, Flame, CalendarDays, Mountain, PenLine, Trophy, Hourglass, Target, ListChecks, ChevronDown, ChevronUp, FlaskConical, Activity, LayoutGrid } from 'lucide-react';
+import { Feather, CheckCircle2, Zap, Sprout, LogOut, Flame, CalendarDays, Mountain, PenLine, Trophy, Hourglass, Target, ListChecks, ChevronDown, ChevronUp, FlaskConical, Activity, LayoutGrid, Sparkles, Heart } from 'lucide-react';
 import { useState } from 'react';
 import { BADGES } from '@/types/journal';
 import { useLanguage } from '@/contexts/LanguageContext';
@@ -12,6 +12,7 @@ import { languageNameFor } from '@/lib/languageNames';
 import { SelfCompassionSeed } from './SelfCompassionSeed';
 import { EmotionFrequencyNudge } from './EmotionFrequencyNudge';
 import { Badge } from '@/types/journal';
+import { useProWaitlist } from '@/hooks/useProWaitlist';
 
 interface HomeScreenProps {
   hasJournaledToday: boolean;
@@ -39,6 +40,7 @@ interface HomeScreenProps {
 }
 
 export function HomeScreen({ hasJournaledToday, streak, totalDays, totalWords, earnedBadges, onStartJournal, onStartFreeWrite, onViewProgress, onOpenChat, onOpenBrainDump, onOpenSmallWins, onOpenThoughtGarden, onOpenZenGarden, onOpenSandTimer, onOpenFocusPlan, onOpenTodoList, onOpenTinyExperiment, onOpenBodyScan, onOpenQuadrants, onOpenLanguageSettings, onOpenVocabulary, onOpenProWaitlist }: HomeScreenProps) {
+  const { submitted: proWaitlistSubmitted } = useProWaitlist();
   const { bilingual, t, targetLang } = useLanguage();
   const isFr = targetLang === 'fr';
   const isEs = targetLang === 'es';
@@ -318,13 +320,50 @@ export function HomeScreen({ hasJournaledToday, streak, totalDays, totalWords, e
             {t({ fr: 'Une ou deux phrases suffisent.', en: 'One or two sentences is enough.', es: 'Una o dos frases bastan.', ja: '一文か二文で十分です。', 'zh-Hans': '一两句话就够了。', 'zh-Hant': '一兩句話就夠了。' }).primary}
           </p>
 
-          <button
-            data-testid="home-pro-waitlist-cta"
-            onClick={onOpenProWaitlist}
-            className="block mx-auto mt-3 text-xs text-muted-foreground/70 hover:text-foreground transition-colors underline decoration-dotted underline-offset-4"
-          >
-            {t({ fr: 'Aidez à façonner Pro', en: 'Help shape Pro', es: 'Ayuda a dar forma a Pro', ja: 'Pro を一緒に形作る', 'zh-Hans': '一起塑造 Pro', 'zh-Hant': '一起塑造 Pro' }).primary}
-          </button>
+          {!proWaitlistSubmitted && (
+            <button
+              data-testid="home-pro-waitlist-cta"
+              onClick={onOpenProWaitlist}
+              className="w-full mt-2 rounded-xl border border-primary/30 bg-primary/5 hover:bg-primary/10 px-4 py-3 transition-colors cursor-pointer text-left flex items-center gap-3 group"
+            >
+              <div className="rounded-full bg-primary/15 p-2 group-hover:bg-primary/25 transition-colors">
+                <Sparkles className="w-4 h-4 text-primary" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm text-foreground font-medium">
+                  {t({ fr: 'Aidez à façonner Pro', en: 'Help shape Pro', es: 'Ayuda a dar forma a Pro', ja: 'Pro を一緒に形作る', 'zh-Hans': '一起塑造 Pro', 'zh-Hant': '一起塑造 Pro' }).primary}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {t({ fr: 'Dites-nous ce qui rendrait Pro utile.', en: 'Tell us what would make Pro worth it.', es: 'Cuéntanos qué haría Pro valga la pena.', ja: 'Pro を価値あるものにする要素を教えてください。', 'zh-Hans': '告诉我们什么会让 Pro 值得。', 'zh-Hant': '告訴我們什麼會讓 Pro 值得。' }).primary}
+                </p>
+              </div>
+            </button>
+          )}
+
+          {/* Support link — opens the user-configured tip URL in a new tab. */}
+          {/* If VITE_SUPPORT_URL is not set at build time, the link is hidden — */}
+          {/* this keeps the dev environment clean while letting prod show it. */}
+          {import.meta.env.VITE_SUPPORT_URL && (
+            <a
+              data-testid="home-support-cta"
+              href={import.meta.env.VITE_SUPPORT_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="w-full mt-2 rounded-xl border border-accent/30 bg-accent/5 hover:bg-accent/10 px-4 py-3 transition-colors cursor-pointer text-left flex items-center gap-3 group"
+            >
+              <div className="rounded-full bg-accent/15 p-2 group-hover:bg-accent/25 transition-colors">
+                <Heart className="w-4 h-4 text-accent" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm text-foreground font-medium">
+                  {t({ fr: 'Soutenir cette appli', en: 'Support this app', es: 'Apoyar esta app', ja: 'このアプリを支援する', 'zh-Hans': '支持这个应用', 'zh-Hant': '支持這個應用' }).primary}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {t({ fr: 'Si ça vous aide, offrez un café. Merci.', en: 'If it helps you, buy a coffee. Thanks.', es: 'Si te ayuda, invita un café. Gracias.', ja: '役に立ったら、コーヒーをご馳走してください。', 'zh-Hans': '如果它帮到你，请我喝杯咖啡，谢谢。', 'zh-Hant': '如果它幫到你，請我喝杯咖啡，謝謝。' }).primary}
+                </p>
+              </div>
+            </a>
+          )}
         </div>
 
       </div>