From 8bc27bb8a14b1f13cc713d516c46ec0d5a02c439 Mon Sep 17 00:00:00 2001
From: gosangam <sangam4742@gmail.com>
Date: Sat, 11 Jul 2026 00:45:51 +0530
Subject: [PATCH] feat: add daily vani

---
 app/(app)/page.tsx                      |  5 ++--
 components/vani/vani-of-the-day-cta.tsx | 33 +++++++++++++++++++------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/app/(app)/page.tsx b/app/(app)/page.tsx
index 1857efc5..13f0f3f5 100644
--- a/app/(app)/page.tsx
+++ b/app/(app)/page.tsx
@@ -87,9 +87,10 @@ export default function HomePage() {
           — it&apos;s free.
         </p>
 
-        {/* Daily sādhana streak — a simple entry point for visitors. */}
-        <div className="mt-6 w-full max-w-md">
+        {/* Daily sādhana streak + Vāṇī of the day — entry points for visitors. */}
+        <div className="mt-6 w-full max-w-md flex flex-col gap-3">
           <SadhnaStreakCTA />
+          <VaniOfTheDayCTA />
         </div>
       </div>
     </main>
diff --git a/components/vani/vani-of-the-day-cta.tsx b/components/vani/vani-of-the-day-cta.tsx
index 5378a6a6..75b91951 100644
--- a/components/vani/vani-of-the-day-cta.tsx
+++ b/components/vani/vani-of-the-day-cta.tsx
@@ -10,9 +10,24 @@
 
 import { useEffect, useState } from "react";
 import Link from "next/link";
-import { ChevronRight, Quote } from "lucide-react";
+import { ChevronRight } from "lucide-react";
 import { getVaniOfTheDay, type Vani } from "@/lib/vani";
 
+/** Quote-marks glyph (svgrepo). Inherits color via `currentColor`. */
+function QuotesIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 32 32"
+      fill="currentColor"
+      className={className}
+      aria-hidden
+    >
+      <path d="M13,11c0.6,0,1-0.4,1-1s-0.4-1-1-1c-5,0-9,4-9,9c0,2.8,2.2,5,5,5s5-2.2,5-5s-2.2-5-5-5c-0.3,0-0.7,0-1,0.1C9.3,11.8,11,11,13,11z" />
+      <path d="M23,13c-0.3,0-0.7,0-1,0.1c1.3-1.3,3-2.1,5-2.1c0.6,0,1-0.4,1-1s-0.4-1-1-1c-5,0-9,4-9,9c0,2.8,2.2,5,5,5s5-2.2,5-5S25.8,13,23,13z" />
+    </svg>
+  );
+}
+
 export function VaniOfTheDayCTA() {
   const [vani, setVani] = useState<Vani | null>(null);
 
@@ -32,27 +47,29 @@ export function VaniOfTheDayCTA() {
 
   if (!vani) return null;
 
+  // Third line: the book name for a verse/chapter, or the label ("Lecture" /
+  // "Conversation") for a transcript.
+  const source =
+    vani.kind === "transcript" ? vani.label : vani.book_title || vani.label;
+
   return (
     <Link
       href={vani.href}
       className="group flex w-full max-w-md items-center gap-3.5 rounded-2xl border border-border bg-card p-4 text-left transition-colors hover:border-primary/40 hover:bg-muted/40"
     >
       <span className="inline-flex size-12 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
-        <Quote className="size-6" />
+        <QuotesIcon className="size-6" />
       </span>
       <div className="min-w-0 flex-1">
-        <p className="flex items-center gap-1.5 text-[0.7rem] font-medium uppercase tracking-[0.14em] text-primary">
+        <p className="text-[0.7rem] font-medium uppercase tracking-[0.14em] text-primary">
           Vāṇī of the day
-          <span className="rounded bg-muted px-1.5 py-0.5 text-[0.65rem] tracking-normal text-muted-foreground">
-            {vani.label}
-          </span>
         </p>
         <p className="mt-0.5 truncate text-base font-semibold text-foreground leading-snug">
           {vani.title}
         </p>
-        {vani.subtitle ? (
+        {source ? (
           <p className="truncate text-sm text-muted-foreground leading-snug">
-            {vani.subtitle}
+            {source}
           </p>
         ) : null}
       </div>