manohar/tia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
- 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>
This commit is contained in:
Manohar Gupta 2026-05-26 00:05:10 +05:30
parent 2a09c027fa
commit 2b8312efef
5 changed files with 92 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
public/icon.svg
View file

@ -1,6 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="16" cy="16" r="15" fill="#fb7185"/> <text y=".9em" font-size="88">🌸</text>
<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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 289 B

After

Width:  |  Height:  |  Size: 114 B

42
src/app/(marketing)/layout.tsx
View file

@ -1,6 +1,6 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import Link from "next/link"; import Link from "next/link";
import { NavAuthButton } from "@/components/marketing/NavAuthButton"; import { MarketingNav } from "@/components/marketing/MarketingNav";
import Script from "next/script"; import Script from "next/script";
export const metadata: Metadata = { export const metadata: Metadata = {
@ -40,48 +40,32 @@ export default function MarketingLayout({
strategy="afterInteractive" strategy="afterInteractive"
/> />
{/* Top nav */} {/* Scroll-reveal nav — appears after scrolling past hero */}
<header className="sticky top-0 z-50 bg-white/90 backdrop-blur-sm border-b border-rose-100"> <MarketingNav />
<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>
<main>{children}</main> <main>{children}</main>
{/* Footer */} {/* Footer */}
<footer className="bg-gray-50 border-t border-gray-100 mt-20"> <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 className="flex flex-col sm:flex-row justify-between items-start gap-8">
<div> <div>
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-3">
<span className="text-xl">🌸</span> <span className="text-2xl">🌸</span>
<span className="text-base font-bold text-gray-900" style={{ fontFamily: "var(--font-caveat)" }}> <span className="text-xl font-bold text-gray-900" style={{ fontFamily: "var(--font-caveat)" }}>
Tia Tia
</span> </span>
</div> </div>
<p className="text-sm text-gray-500 max-w-xs"> <p className="text-sm text-gray-500 max-w-xs leading-relaxed">
A digital heirloom for your baby. Every moment, preserved. A digital heirloom for your baby.<br />Every moment, preserved.
</p> </p>
</div> </div>
<div className="flex flex-col gap-2 text-sm"> <div className="flex flex-col gap-2 text-sm">
<p className="font-semibold text-gray-700 mb-1">Pages</p> <p className="font-semibold text-gray-700 mb-1">Links</p>
<Link href="/pricing" className="text-gray-500 hover:text-rose-600 transition-colors">Pricing</Link> <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">Privacy Policy</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">Terms of Service</Link> <Link href="/terms" className="text-gray-500 hover:text-rose-600 transition-colors duration-150">Terms of Service</Link>
</div> </div>
</div> </div>

24
src/app/(marketing)/page.tsx
View file

@ -23,7 +23,7 @@ function Hero() {
</span> </span>
</h1> </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 Tia is a digital heirloom — not just a tracker. Every feed, every first
word, every vaccination, archived in one private place your child will word, every vaccination, archived in one private place your child will
one day look back on. one day look back on.
@ -31,13 +31,13 @@ function Hero() {
<Link <Link
href="/login" 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"> <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="#fff" fillOpacity=".9"/> <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="#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="#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="#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="#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="#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="#EA4335"/>
</svg> </svg>
Continue with Google Continue with Google
</Link> </Link>
@ -148,9 +148,9 @@ function Features() {
<div className="space-y-4"> <div className="space-y-4">
{FEATURES.map(f => ( {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"> <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> <div>
<h3 className="font-bold text-gray-900 text-lg mb-2">{f.title}</h3> <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 }} /> <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.", desc: "Your data is yours. Export everything at any time. The heirloom is portable.",
}, },
].map(item => ( ].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> <span className="text-2xl mb-3 block">{item.icon}</span>
<h3 className="font-bold text-gray-900 mb-1">{item.title}</h3> <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 }} /> <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.", desc: "We don&apos;t store passwords. Authentication is handled by Google — the same account you already trust for everything else.",
}, },
].map(item => ( ].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> <span className="text-xl flex-shrink-0 mt-0.5">{item.icon}</span>
<div> <div>
<p className="font-semibold text-gray-900 text-sm">{item.title}</p> <p className="font-semibold text-gray-900 text-sm">{item.title}</p>
@ -374,7 +374,7 @@ function FinalCTA() {
<Link <Link
href="/login" 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"> <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"/> <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"/>

47
src/components/marketing/MarketingNav.tsx Normal file
View file

@ -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>
);
}

21
src/components/marketing/NavAuthButton.tsx
View file

@ -16,9 +16,10 @@ export function NavAuthButton() {
return ( return (
<Link <Link
href="/home" 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> </Link>
); );
} }
@ -26,9 +27,21 @@ export function NavAuthButton() {
return ( return (
<Link <Link
href="/login" 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> </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>
);
}