From 2b8312efef83b4bdd154606a6c88f9d217ba0f0a Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Tue, 26 May 2026 00:05:10 +0530
Subject: [PATCH] polish(marketing): favicon, scroll-reveal nav, Google button,
 font + hovers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Favicon → 🌸 cherry blossom SVG (replaces smiley)
- Nav: removed Pricing/Privacy links; nav is now invisible at top and
  slides in after scrolling 75% past the hero (scroll-reveal client component)
- Hero CTA: white background + proper 4-color Google G (matches login page)
- Hero subtitle: font-light, text-xl, leading-loose for a more editorial feel
- Feature cards: hover border highlight + emoji scale on group-hover
- Heirloom vision cards: hover border on hover
- Privacy items: bg-rose-50 on hover
- Final CTA button: hover shadow lift + active:scale-95

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/icon.svg                            |  9 ++---
 src/app/(marketing)/layout.tsx             | 42 ++++++-------------
 src/app/(marketing)/page.tsx               | 24 +++++------
 src/components/marketing/MarketingNav.tsx  | 47 ++++++++++++++++++++++
 src/components/marketing/NavAuthButton.tsx | 21 ++++++++--
 5 files changed, 92 insertions(+), 51 deletions(-)
 create mode 100644 src/components/marketing/MarketingNav.tsx

diff --git a/public/icon.svg b/public/icon.svg
index d9b4d36..3888dfe 100644
--- a/public/icon.svg
+++ b/public/icon.svg
@@ -1,6 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <circle cx="16" cy="16" r="15" fill="#fb7185"/>
-  <circle cx="12" cy="12" r="3" fill="white"/>
-  <circle cx="20" cy="12" r="3" fill="white"/>
-  <path d="M10 20 Q16 26 22 20" stroke="white" stroke-width="2" fill="none"/>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <text y=".9em" font-size="88">🌸</text>
+</svg>
diff --git a/src/app/(marketing)/layout.tsx b/src/app/(marketing)/layout.tsx
index f4f358b..e94b269 100644
--- a/src/app/(marketing)/layout.tsx
+++ b/src/app/(marketing)/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { NavAuthButton } from "@/components/marketing/NavAuthButton";
+import { MarketingNav } from "@/components/marketing/MarketingNav";
 import Script from "next/script";
 
 export const metadata: Metadata = {
@@ -40,48 +40,32 @@ export default function MarketingLayout({
         strategy="afterInteractive"
       />
 
-      {/* Top nav */}
-      <header className="sticky top-0 z-50 bg-white/90 backdrop-blur-sm border-b border-rose-100">
-        <div className="max-w-5xl mx-auto px-4 py-3 flex items-center justify-between">
-          <Link href="/" className="flex items-center gap-2">
-            <span className="text-2xl">🌸</span>
-            <span className="text-lg font-bold text-gray-900" style={{ fontFamily: "var(--font-caveat)" }}>
-              Tia
-            </span>
-          </Link>
-
-          <nav className="hidden sm:flex items-center gap-6 text-sm text-gray-600">
-            <Link href="/pricing" className="hover:text-rose-600 transition-colors">Pricing</Link>
-            <Link href="/privacy" className="hover:text-rose-600 transition-colors">Privacy</Link>
-          </nav>
-
-          <NavAuthButton />
-        </div>
-      </header>
+      {/* Scroll-reveal nav — appears after scrolling past hero */}
+      <MarketingNav />
 
       <main>{children}</main>
 
       {/* Footer */}
       <footer className="bg-gray-50 border-t border-gray-100 mt-20">
-        <div className="max-w-5xl mx-auto px-4 py-12">
+        <div className="max-w-5xl mx-auto px-5 py-12">
           <div className="flex flex-col sm:flex-row justify-between items-start gap-8">
             <div>
-              <div className="flex items-center gap-2 mb-2">
-                <span className="text-xl">🌸</span>
-                <span className="text-base font-bold text-gray-900" style={{ fontFamily: "var(--font-caveat)" }}>
+              <div className="flex items-center gap-2 mb-3">
+                <span className="text-2xl">🌸</span>
+                <span className="text-xl font-bold text-gray-900" style={{ fontFamily: "var(--font-caveat)" }}>
                   Tia
                 </span>
               </div>
-              <p className="text-sm text-gray-500 max-w-xs">
-                A digital heirloom for your baby. Every moment, preserved.
+              <p className="text-sm text-gray-500 max-w-xs leading-relaxed">
+                A digital heirloom for your baby.<br />Every moment, preserved.
               </p>
             </div>
 
             <div className="flex flex-col gap-2 text-sm">
-              <p className="font-semibold text-gray-700 mb-1">Pages</p>
-              <Link href="/pricing" className="text-gray-500 hover:text-rose-600 transition-colors">Pricing</Link>
-              <Link href="/privacy" className="text-gray-500 hover:text-rose-600 transition-colors">Privacy Policy</Link>
-              <Link href="/terms" className="text-gray-500 hover:text-rose-600 transition-colors">Terms of Service</Link>
+              <p className="font-semibold text-gray-700 mb-1">Links</p>
+              <Link href="/pricing" className="text-gray-500 hover:text-rose-600 transition-colors duration-150">Pricing</Link>
+              <Link href="/privacy" className="text-gray-500 hover:text-rose-600 transition-colors duration-150">Privacy Policy</Link>
+              <Link href="/terms" className="text-gray-500 hover:text-rose-600 transition-colors duration-150">Terms of Service</Link>
             </div>
           </div>
 
diff --git a/src/app/(marketing)/page.tsx b/src/app/(marketing)/page.tsx
index 75a1daa..42a4c36 100644
--- a/src/app/(marketing)/page.tsx
+++ b/src/app/(marketing)/page.tsx
@@ -23,7 +23,7 @@ function Hero() {
           </span>
         </h1>
 
-        <p className="text-lg text-gray-600 leading-relaxed mb-8 max-w-xl mx-auto">
+        <p className="text-xl font-light text-gray-500 leading-loose mb-8 max-w-xl mx-auto">
           Tia is a digital heirloom — not just a tracker. Every feed, every first
           word, every vaccination, archived in one private place your child will
           one day look back on.
@@ -31,13 +31,13 @@ function Hero() {
 
         <Link
           href="/login"
-          className="inline-flex items-center gap-2 bg-rose-500 hover:bg-rose-600 text-white font-semibold px-7 py-3.5 rounded-full text-base transition-colors shadow-md shadow-rose-200"
+          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"
         >
-          <svg className="w-5 h-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#fff" fillOpacity=".9"/>
-            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#fff" fillOpacity=".9"/>
-            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#fff" fillOpacity=".9"/>
-            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#fff" fillOpacity=".9"/>
+          <svg className="w-5 h-5 flex-shrink-0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
+            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/>
+            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
           </svg>
           Continue with Google
         </Link>
@@ -148,9 +148,9 @@ function Features() {
 
         <div className="space-y-4">
           {FEATURES.map(f => (
-            <div key={f.title} className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
+            <div key={f.title} className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:border-rose-200 hover:shadow-md transition-all duration-200 group">
               <div className="flex items-start gap-4">
-                <span className="text-3xl flex-shrink-0">{f.icon}</span>
+                <span className="text-3xl flex-shrink-0 transition-transform duration-200 group-hover:scale-110">{f.icon}</span>
                 <div>
                   <h3 className="font-bold text-gray-900 text-lg mb-2">{f.title}</h3>
                   <p className="text-gray-600 text-sm leading-relaxed mb-3" dangerouslySetInnerHTML={{ __html: f.body }} />
@@ -257,7 +257,7 @@ function HeirloomVision() {
               desc: "Your data is yours. Export everything at any time. The heirloom is portable.",
             },
           ].map(item => (
-            <div key={item.title} className="bg-white/80 rounded-2xl p-5 border border-rose-100">
+            <div key={item.title} className="bg-white/80 rounded-2xl p-5 border border-rose-100 hover:border-rose-300 hover:shadow-sm transition-all duration-200">
               <span className="text-2xl mb-3 block">{item.icon}</span>
               <h3 className="font-bold text-gray-900 mb-1">{item.title}</h3>
               <p className="text-sm text-gray-600 leading-relaxed" dangerouslySetInnerHTML={{ __html: item.desc }} />
@@ -309,7 +309,7 @@ function Privacy() {
               desc: "We don&apos;t store passwords. Authentication is handled by Google — the same account you already trust for everything else.",
             },
           ].map(item => (
-            <div key={item.title} className="flex items-start gap-4 p-4 bg-gray-50 rounded-xl">
+            <div key={item.title} className="flex items-start gap-4 p-4 bg-gray-50 hover:bg-rose-50 rounded-xl transition-colors duration-150">
               <span className="text-xl flex-shrink-0 mt-0.5">{item.icon}</span>
               <div>
                 <p className="font-semibold text-gray-900 text-sm">{item.title}</p>
@@ -374,7 +374,7 @@ function FinalCTA() {
 
         <Link
           href="/login"
-          className="inline-flex items-center gap-2 bg-white text-rose-600 font-bold px-8 py-4 rounded-full text-base hover:bg-rose-50 transition-colors shadow-lg"
+          className="inline-flex items-center gap-2.5 bg-white text-rose-600 font-bold px-8 py-4 rounded-full text-base hover:bg-rose-50 hover:shadow-xl active:scale-95 transition-all duration-200 shadow-lg"
         >
           <svg className="w-5 h-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
             <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
diff --git a/src/components/marketing/MarketingNav.tsx b/src/components/marketing/MarketingNav.tsx
new file mode 100644
index 0000000..c4c54d9
--- /dev/null
+++ b/src/components/marketing/MarketingNav.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { NavAuthButton } from "./NavAuthButton";
+
+export function MarketingNav() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => {
+      // Show nav after scrolling ~80% of the viewport height (past hero)
+      setVisible(window.scrollY > window.innerHeight * 0.75);
+    };
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  return (
+    <header
+      className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ease-in-out ${
+        visible
+          ? "bg-white/95 backdrop-blur-md border-b border-rose-100 shadow-sm translate-y-0 opacity-100"
+          : "-translate-y-full opacity-0 pointer-events-none"
+      }`}
+    >
+      <div className="max-w-5xl mx-auto px-5 py-3.5 flex items-center justify-between">
+        {/* Logo */}
+        <Link
+          href="/"
+          className="flex items-center gap-2 group"
+        >
+          <span className="text-2xl transition-transform duration-200 group-hover:scale-110">🌸</span>
+          <span
+            className="text-xl font-bold text-gray-900 tracking-tight"
+            style={{ fontFamily: "var(--font-caveat)" }}
+          >
+            Tia
+          </span>
+        </Link>
+
+        {/* CTA */}
+        <NavAuthButton />
+      </div>
+    </header>
+  );
+}
diff --git a/src/components/marketing/NavAuthButton.tsx b/src/components/marketing/NavAuthButton.tsx
index d89b8e6..21139fa 100644
--- a/src/components/marketing/NavAuthButton.tsx
+++ b/src/components/marketing/NavAuthButton.tsx
@@ -16,9 +16,10 @@ export function NavAuthButton() {
     return (
       <Link
         href="/home"
-        className="px-4 py-2 bg-rose-500 text-white rounded-full text-sm font-semibold hover:bg-rose-600 transition-colors"
+        className="inline-flex items-center gap-1.5 bg-rose-500 text-white text-sm font-semibold px-4 py-2 rounded-full hover:bg-rose-600 active:scale-95 transition-all duration-150 shadow-sm hover:shadow-md"
       >
-        Open Tia →
+        Open Tia
+        <span className="text-rose-200">→</span>
       </Link>
     );
   }
@@ -26,9 +27,21 @@ export function NavAuthButton() {
   return (
     <Link
       href="/login"
-      className="px-4 py-2 bg-rose-500 text-white rounded-full text-sm font-semibold hover:bg-rose-600 transition-colors"
+      className="inline-flex items-center gap-2 bg-white border border-gray-200 text-gray-700 text-sm font-medium px-4 py-2 rounded-full hover:border-rose-300 hover:text-rose-600 hover:shadow-sm active:scale-95 transition-all duration-150"
     >
-      Continue with Google
+      <GoogleG />
+      Sign in
     </Link>
   );
 }
+
+function GoogleG() {
+  return (
+    <svg className="w-4 h-4 flex-shrink-0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
+      <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+      <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/>
+      <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+    </svg>
+  );
+}