← back to IWasCute
src/app/page.tsx
415 lines
'use client'
import { motion } from 'framer-motion'
import { ArrowRight, Upload, ShieldCheck, FileSignature, DollarSign } from 'lucide-react'
import Link from 'next/link'
// Polaroid data — position, rotation, color swatch, caption
type PolaroidData = {
id: number
top: string
left?: string
right?: string
rotate: number
color: string
caption: string
}
const POLAROIDS: PolaroidData[] = [
{ id: 1, top: '4%', left: '2%', rotate: -11, color: '#FFB5A7', caption: "Summer '92" },
{ id: 2, top: '2%', right: '3%', rotate: 9, color: '#B5D5C5', caption: 'Birthday party' },
{ id: 3, top: '28%', left: '0%', rotate: -7, color: '#FFE0CB', caption: 'Beach vacation' },
{ id: 4, top: '30%', right: '1%', rotate: 12, color: '#FFB5A7', caption: "Halloween '88" },
{ id: 5, top: '58%', left: '3%', rotate: 5, color: '#B5D5C5', caption: 'First day of school' },
{ id: 6, top: '60%', right: '2%', rotate: -9, color: '#FFE0CB', caption: 'Family road trip' },
{ id: 7, top: '82%', left: '6%', rotate: 8, color: '#F4846F', caption: "Grandma's house" },
{ id: 8, top: '84%', right: '5%', rotate: -6, color: '#8BBCAA', caption: 'Little league' },
]
const HOW_IT_WORKS = [
{
step: 1,
icon: Upload,
title: 'Upload',
desc: 'Drag & drop your childhood photos — prints, scans, or phone shots',
accent: '#FFB5A7',
},
{
step: 2,
icon: ShieldCheck,
title: 'Copyright Check',
desc: "We verify who holds the copyright — you, a family member, or the photographer",
accent: '#B5D5C5',
},
{
step: 3,
icon: FileSignature,
title: 'Likeness Release',
desc: 'Sign a simple digital release so buyers can license legally',
accent: '#FFE0CB',
},
{
step: 4,
icon: DollarSign,
title: 'Earn',
desc: 'Royalties are paid out to your account every time a license is sold',
accent: '#F4846F',
},
]
function Polaroid({ polaroid }: { polaroid: PolaroidData }) {
const posStyle: React.CSSProperties = {
position: 'absolute',
top: polaroid.top,
left: polaroid.left,
right: polaroid.right,
transform: `rotate(${polaroid.rotate}deg)`,
zIndex: 1,
}
return (
<motion.div
style={posStyle}
whileHover={{ scale: 1.08, rotate: 0, zIndex: 20 }}
transition={{ type: 'spring', stiffness: 260, damping: 20 }}
className="w-28 md:w-36 bg-white p-2 pb-8 shadow-lg cursor-default select-none"
>
{/* Photo placeholder */}
<div
className="w-full aspect-square"
style={{ background: polaroid.color, opacity: 0.85 }}
aria-hidden="true"
/>
{/* Caption */}
<p
className="mt-2 text-center text-xs leading-tight"
style={{
fontFamily: 'Georgia, "Times New Roman", serif',
fontStyle: 'italic',
color: '#6B705C',
}}
>
{polaroid.caption}
</p>
</motion.div>
)
}
export default function HomePage() {
return (
<main
className="min-h-screen flex flex-col overflow-x-hidden"
style={{ background: 'var(--color-cream)' }}
>
{/* ── NAV ─────────────────────────────────────────── */}
<nav className="relative z-50 flex items-center justify-between px-6 py-5 md:px-12">
<span
className="text-2xl"
style={{
fontFamily: 'Georgia, "Times New Roman", serif',
fontStyle: 'italic',
fontWeight: 700,
color: 'var(--color-brown)',
}}
>
i was cute
</span>
<div
className="flex gap-5 text-sm font-medium"
style={{ color: 'var(--color-warm-gray)' }}
>
<Link href="/browse" className="hover:opacity-70 transition-opacity">
Browse
</Link>
<Link href="/about" className="hover:opacity-70 transition-opacity">
About
</Link>
<Link href="/contact" className="hover:opacity-70 transition-opacity">
Contact
</Link>
<Link
href="/licensor"
className="hover:opacity-70 transition-opacity"
style={{ color: 'var(--color-brown)' }}
>
Upload
</Link>
</div>
</nav>
{/* ── HERO + POLAROID COLLAGE ──────────────────────── */}
<section
className="relative flex-1 flex flex-col items-center justify-center text-center px-6 py-28 md:py-40 overflow-hidden"
style={{ minHeight: '90vh' }}
>
{/* Scattered polaroids */}
{POLAROIDS.map((p) => (
<Polaroid key={p.id} polaroid={p} />
))}
{/* Soft vignette behind copy so text stays readable */}
<div
aria-hidden="true"
className="absolute inset-0 pointer-events-none z-10"
style={{
background:
'radial-gradient(ellipse 60% 55% at 50% 50%, rgba(255,241,230,0.92) 40%, transparent 100%)',
}}
/>
{/* Center copy */}
<div className="relative z-30 flex flex-col items-center gap-6 max-w-2xl mx-auto">
{/* Wordmark */}
<h1
className="leading-none select-none"
style={{
fontFamily: 'Georgia, "Times New Roman", serif',
fontStyle: 'italic',
fontWeight: 700,
fontSize: 'clamp(4rem, 14vw, 9rem)',
color: 'var(--color-brown)',
textShadow: '2px 3px 0px rgba(61,64,91,0.08)',
}}
>
i was cute
</h1>
{/* Tagline */}
<p
className="text-lg md:text-xl font-light tracking-wide"
style={{ color: 'var(--color-warm-gray)' }}
>
Your childhood photos, legally licensed
</p>
{/* Description */}
<p
className="text-base md:text-lg leading-relaxed max-w-lg"
style={{ color: 'var(--color-warm-gray)' }}
>
Remember when you were adorable? So does the internet. I was Cute helps
you upload your childhood photos, verify who holds the copyright and
likeness rights, and license the results to advertisers, publishers,
filmmakers, and AI companies — with royalties paid to you, not a
stranger who found the photo on the internet.
</p>
{/* CTAs */}
<div className="flex flex-col sm:flex-row gap-4 mt-2">
<motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.97 }}>
<Link
href="/licensor"
className="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-full text-base font-semibold tracking-wide"
style={{
background: 'var(--color-peach)',
color: 'var(--color-brown)',
boxShadow: '3px 4px 0px #F4846F',
}}
>
Start Uploading
<ArrowRight size={18} />
</Link>
</motion.div>
<motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.97 }}>
<Link
href="#how-it-works"
className="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-full text-base font-semibold tracking-wide border-2 transition-colors hover:bg-white/60"
style={{
borderColor: 'var(--color-sage-dark)',
color: 'var(--color-warm-gray)',
}}
>
See How It Works
</Link>
</motion.div>
</div>
</div>
</section>
{/* ── HOW IT WORKS ────────────────────────────────── */}
<section
id="how-it-works"
className="py-20 px-6"
style={{ background: 'var(--color-cream-dark)' }}
>
<div className="max-w-5xl mx-auto">
<h2
className="text-center text-3xl md:text-4xl mb-14"
style={{
fontFamily: 'Georgia, "Times New Roman", serif',
fontStyle: 'italic',
fontWeight: 700,
color: 'var(--color-brown)',
}}
>
How it works
</h2>
{/* Timeline row */}
<div className="relative grid grid-cols-1 md:grid-cols-4 gap-6">
{/* Connector line — desktop only */}
<div
aria-hidden="true"
className="hidden md:block absolute top-8 left-[12.5%] right-[12.5%] h-px"
style={{
borderTop: '2px dashed #B5D5C5',
zIndex: 0,
}}
/>
{HOW_IT_WORKS.map(({ step, icon: Icon, title, desc, accent }) => (
<motion.div
key={step}
whileHover={{ y: -4 }}
transition={{ type: 'spring', stiffness: 300, damping: 22 }}
className="relative flex flex-col items-center text-center bg-white rounded-2xl px-5 pt-0 pb-7 shadow-sm"
style={{
borderTop: `4px solid ${accent}`,
zIndex: 1,
}}
>
{/* Step badge */}
<div
className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold -mt-5 mb-4 shadow-md"
style={{
background: accent,
color: 'var(--color-brown)',
}}
>
{step}
</div>
<Icon
size={28}
strokeWidth={1.5}
style={{ color: 'var(--color-warm-gray)' }}
className="mb-3"
/>
<h3
className="text-base font-bold mb-2"
style={{ color: 'var(--color-brown)' }}
>
{title}
</h3>
<p
className="text-sm leading-relaxed"
style={{ color: 'var(--color-warm-gray)' }}
>
{desc}
</p>
</motion.div>
))}
</div>
</div>
</section>
{/* ── WHY IT MATTERS ──────────────────────────────── */}
<section
className="py-20 px-6"
style={{ background: 'var(--color-cream)' }}
>
<div className="max-w-3xl mx-auto">
<h2
className="text-center text-2xl md:text-3xl mb-8"
style={{
fontFamily: 'Georgia, "Times New Roman", serif',
fontStyle: 'italic',
fontWeight: 700,
color: 'var(--color-brown)',
}}
>
Why licensing (not just sharing) matters
</h2>
<div
className="flex flex-col gap-4 text-base leading-relaxed"
style={{ color: 'var(--color-warm-gray)' }}
>
<p>
Old family photos are being scanned, uploaded, and reused every day —
in stock libraries, nostalgia feeds, and increasingly as training data
for AI image models. Most of the time nobody asks first, and nobody
gets paid. Two different rights are usually in play: the{' '}
<strong style={{ color: 'var(--color-brown)' }}>copyright</strong> in
the photograph itself (which belongs to whoever took the picture,
often a parent or a studio photographer) and the{' '}
<strong style={{ color: 'var(--color-brown)' }}>likeness</strong> of
the person or people pictured. Both usually need to be cleared before
a photo can be licensed responsibly.
</p>
<p>
I was Cute walks you through both. During upload we ask who took the
photo and whether you have permission to represent it, then we ask
the person (or people) pictured — or their guardian, for childhood
photos — to sign a plain-language likeness release specifying how the
image may be used: editorial, commercial, or AI training. Only photos
that clear both checks are eligible to be licensed through the
marketplace, and every sale pays a royalty back to the rights holder.
</p>
<p>
We're a small, pre-launch project — the license marketplace is still
being built out (see{' '}
<Link href="/browse" className="underline" style={{ color: 'var(--color-brown)' }}>
Browse
</Link>
), and the review queue is handled by hand while volume is low. If
you have questions before you upload anything, read our{' '}
<Link href="/privacy" className="underline" style={{ color: 'var(--color-brown)' }}>
Privacy Policy
</Link>{' '}
or{' '}
<Link href="/contact" className="underline" style={{ color: 'var(--color-brown)' }}>
get in touch
</Link>
.
</p>
</div>
</div>
</section>
{/* ── MINI CTA STRIP ──────────────────────────────── */}
<section
className="py-16 px-6 text-center"
style={{ background: 'var(--color-peach)', opacity: 0.92 }}
>
<h2
className="text-2xl md:text-3xl mb-3"
style={{
fontFamily: 'Georgia, "Times New Roman", serif',
fontStyle: 'italic',
fontWeight: 700,
color: 'var(--color-brown)',
}}
>
Those photos deserve more than a dusty drawer.
</h2>
<p
className="text-base mb-8"
style={{ color: 'var(--color-brown)', opacity: 0.75 }}
>
Upload one, clear the rights, and see what a license is worth.
</p>
<motion.div
className="inline-block"
whileHover={{ scale: 1.06 }}
whileTap={{ scale: 0.96 }}
>
<Link
href="/licensor"
className="inline-flex items-center gap-2 px-9 py-4 rounded-full text-base font-semibold"
style={{
background: 'var(--color-brown)',
color: 'var(--color-cream)',
boxShadow: '3px 4px 0px rgba(61,64,91,0.3)',
}}
>
Get Started — it's free
<ArrowRight size={18} />
</Link>
</motion.div>
</section>
</main>
)
}