← back to IWasCute
src/app/v3/page.tsx
418 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 hit 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 V3Page() {
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="/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. Upload your
childhood photos, verify the rights, and earn royalties every time
they're licensed.
</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>
{/* ── TESTIMONIAL ─────────────────────────────────── */}
<section
className="py-20 px-6 flex flex-col items-center text-center"
style={{ background: 'var(--color-cream)' }}
>
<div className="max-w-2xl mx-auto relative">
{/* Decorative open quote */}
<span
aria-hidden="true"
className="absolute -top-6 -left-4 text-8xl leading-none pointer-events-none select-none"
style={{ color: 'var(--color-peach)', opacity: 0.6, fontFamily: 'Georgia, serif' }}
>
“
</span>
<blockquote>
<p
className="text-xl md:text-2xl leading-relaxed mb-6 relative z-10"
style={{
fontFamily: 'Georgia, "Times New Roman", serif',
fontStyle: 'italic',
color: 'var(--color-brown)',
}}
>
I uploaded my baby photos and earned $47 in the first month!
Honestly I wasn't even sure it would work — now I check my
dashboard every morning like it's a slot machine.
</p>
<footer
className="text-sm font-semibold tracking-wide"
style={{ color: 'var(--color-warm-gray)' }}
>
— Jessica T., uploaded 34 photos in March
</footer>
</blockquote>
{/* Decorative close quote */}
<span
aria-hidden="true"
className="absolute -bottom-10 -right-4 text-8xl leading-none pointer-events-none select-none"
style={{ color: 'var(--color-sage)', opacity: 0.6, fontFamily: 'Georgia, serif' }}
>
”
</span>
</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 }}
>
Join hundreds of people already earning from their childhood memories.
</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>
{/* ── FOOTER ──────────────────────────────────────── */}
<footer
className="py-8 px-6 text-center text-sm flex flex-col items-center gap-2"
style={{ color: 'var(--color-warm-gray)', background: 'var(--color-cream-dark)' }}
>
<span
style={{
fontFamily: 'Georgia, "Times New Roman", serif',
fontStyle: 'italic',
fontWeight: 700,
color: 'var(--color-brown)',
fontSize: '1.1rem',
}}
>
i was cute
</span>
<div className="flex gap-5 text-xs">
<Link href="#" className="hover:opacity-70 transition-opacity">Privacy</Link>
<Link href="#" className="hover:opacity-70 transition-opacity">Terms</Link>
<Link href="#" className="hover:opacity-70 transition-opacity">Help</Link>
<Link href="/browse" className="hover:opacity-70 transition-opacity">Browse</Link>
</div>
<p className="text-xs opacity-60 mt-1">
© 2025 I was Cute. All rights reserved. Your memories, your royalties.
</p>
</footer>
</main>
)
}