polish(marketing): favicon, scroll-reveal nav, Google button, font + hovers

- 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>
2026-05-26 00:05:10 +05:30 · 2026-05-26 00:05:10 +05:30 · 2b8312efef
commit 2b8312efef
parent 2a09c027fa
5 changed files with 92 additions and 51 deletions
--- 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>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <text y=".9em" font-size="88">🌸</text>
+</svg>
--- 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>

--- 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"/>
--- a/src/components/marketing/MarketingNav.tsx
+++ 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>
+  );
+}
--- 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>
+  );
+}