From daf6b34281c9822867e742489bc2f827407ea499 Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Fri, 29 May 2026 10:23:28 +0530
Subject: [PATCH] feat(marketing): CTA pulse animation + breadcrumb
 repositioned below hero
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Homepage:
- Wrap "Continue with Google" in a relative group; add rose-300 pulse
  ring (animate-cta-pulse) that fades out smoothly on hover
- @keyframes cta-pulse added to globals.css (2.6s, scale 1→1.22, opacity 0.45→0)

Blog listing (/blog):
- Remove breadcrumb from above the hero header
- Place it in a pt-5 strip directly above the 3-column content grid
  so it reads as "you are here" navigation rather than floating chrome

Blog post (/blog/[slug]):
- Remove breadcrumb from inside the hero gradient section
- Place it in the same pt-5 strip between hero and 3-col grid for
  consistent placement across listing + post pages

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/(marketing)/blog/[slug]/page.tsx | 26 ++++++++++++------------
 src/app/(marketing)/blog/page.tsx        | 14 ++++++-------
 src/app/(marketing)/page.tsx             | 18 +++++++++-------
 src/app/globals.css                      | 11 ++++++++++
 4 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/src/app/(marketing)/blog/[slug]/page.tsx b/src/app/(marketing)/blog/[slug]/page.tsx
index 4d1c441..80a5ff2 100644
--- a/src/app/(marketing)/blog/[slug]/page.tsx
+++ b/src/app/(marketing)/blog/[slug]/page.tsx
@@ -54,18 +54,7 @@ export default async function BlogPostPage({
     <div className="min-h-screen bg-white">
       {/* Post hero / header */}
       <div className="bg-gradient-to-br from-rose-50 to-pink-50 border-b border-rose-100">
-        <div className="max-w-6xl mx-auto px-5 pt-5 pb-10">
-          {/* Breadcrumb */}
-          <div className="mb-8">
-            <Breadcrumb
-              items={[
-                { label: "Home", href: "/" },
-                { label: "Blog", href: "/blog" },
-                { label: post.title },
-              ]}
-            />
-          </div>
-
+        <div className="max-w-6xl mx-auto px-5 pt-10 pb-10">
           <div className="max-w-2xl">
             <div className="flex flex-wrap items-center gap-2 mb-5">
               <span className={`text-xs font-semibold px-2.5 py-0.5 rounded-full ${post.categoryColor}`}>
@@ -88,8 +77,19 @@ export default async function BlogPostPage({
         </div>
       </div>
 
+      {/* Breadcrumb — between hero and content */}
+      <div className="max-w-6xl mx-auto px-5 pt-5 pb-1">
+        <Breadcrumb
+          items={[
+            { label: "Home", href: "/" },
+            { label: "Blog", href: "/blog" },
+            { label: post.title },
+          ]}
+        />
+      </div>
+
       {/* 3-column body */}
-      <div className="max-w-6xl mx-auto px-5 py-10">
+      <div className="max-w-6xl mx-auto px-5 py-6">
         <div className="grid grid-cols-1 lg:grid-cols-[220px_minmax(0,1fr)_200px] gap-10">
 
           {/* ── LEFT SIDEBAR: Table of Contents ── */}
diff --git a/src/app/(marketing)/blog/page.tsx b/src/app/(marketing)/blog/page.tsx
index 6c445a4..47f6c9a 100644
--- a/src/app/(marketing)/blog/page.tsx
+++ b/src/app/(marketing)/blog/page.tsx
@@ -23,13 +23,8 @@ const CATEGORIES = Object.values(
 export default function BlogPage() {
   return (
     <div className="min-h-screen bg-white">
-      {/* Breadcrumb */}
-      <div className="max-w-6xl mx-auto px-5 pt-5">
-        <Breadcrumb items={[{ label: "Home", href: "/" }, { label: "Blog" }]} />
-      </div>
-
       {/* Page header */}
-      <div className="bg-gradient-to-br from-rose-50 to-pink-50 border-b border-rose-100 mt-4">
+      <div className="bg-gradient-to-br from-rose-50 to-pink-50 border-b border-rose-100">
         <div className="max-w-6xl mx-auto px-5 py-12 text-center">
           <div className="mb-2 text-sm font-medium text-rose-500 uppercase tracking-widest">Journal</div>
           <h1 className="text-4xl font-bold text-gray-900 mb-3 leading-tight">The Tia Blog</h1>
@@ -39,8 +34,13 @@ export default function BlogPage() {
         </div>
       </div>
 
+      {/* Breadcrumb — sits right above the content grid */}
+      <div className="max-w-6xl mx-auto px-5 pt-5 pb-1">
+        <Breadcrumb items={[{ label: "Home", href: "/" }, { label: "Blog" }]} />
+      </div>
+
       {/* 3-column layout */}
-      <div className="max-w-6xl mx-auto px-5 py-10">
+      <div className="max-w-6xl mx-auto px-5 py-6">
         <div className="grid grid-cols-1 lg:grid-cols-[220px_minmax(0,1fr)_200px] gap-10">
 
           {/* ── LEFT SIDEBAR: timeline ── */}
diff --git a/src/app/(marketing)/page.tsx b/src/app/(marketing)/page.tsx
index 3e0b4a2..a03f55c 100644
--- a/src/app/(marketing)/page.tsx
+++ b/src/app/(marketing)/page.tsx
@@ -44,13 +44,17 @@ function Hero() {
             one day look back on.
           </p>
 
-          <Link
-            href="/login"
-            className="inline-flex items-center gap-2.5 bg-white hover:bg-rose-50 border border-gray-200 hover:border-rose-300 text-gray-700 font-semibold px-7 py-3.5 rounded-full text-base transition-all duration-200 shadow-md hover:shadow-lg active:scale-95"
-          >
-            <GoogleG />
-            Continue with Google
-          </Link>
+          {/* Pulse-ring wrapper — fades ring on hover */}
+          <div className="relative inline-flex group">
+            <span className="absolute inset-0 rounded-full bg-rose-300 animate-cta-pulse group-hover:opacity-0 transition-opacity duration-300 pointer-events-none" />
+            <Link
+              href="/login"
+              className="relative inline-flex items-center gap-2.5 bg-white hover:bg-rose-50 border border-gray-200 hover:border-rose-300 text-gray-700 font-semibold px-7 py-3.5 rounded-full text-base transition-all duration-200 shadow-md hover:shadow-lg active:scale-95"
+            >
+              <GoogleG />
+              Continue with Google
+            </Link>
+          </div>
 
           <p className="mt-4 text-xs text-gray-400">No credit card. No setup fee. Your data is yours.</p>
         </div>
diff --git a/src/app/globals.css b/src/app/globals.css
index b22465d..11fff64 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -45,6 +45,17 @@
   animation: marquee 20s linear infinite;
 }
 
+/* ── CTA button pulse ring ── */
+@keyframes cta-pulse {
+  0%   { transform: scale(1);    opacity: 0.45; }
+  60%  { transform: scale(1.18); opacity: 0.1; }
+  100% { transform: scale(1.22); opacity: 0; }
+}
+
+.animate-cta-pulse {
+  animation: cta-pulse 2.6s ease-out infinite;
+}
+
 /* hide scrollbar but keep scroll */
 .scrollbar-hide {
   scrollbar-width: none;