← back to IWasCute
src/app/v1/page.tsx
260 lines
'use client'
import Link from 'next/link'
import { motion } from 'framer-motion'
import {
ArrowRight,
Shield,
Camera,
DollarSign,
Sparkles,
Upload,
Scale,
Heart,
} from 'lucide-react'
/* ------------------------------------------------------------------ */
/* V1 — Dark Split-Screen */
/* Left: dark panel with text + CTAs. Right: warm photo grid collage. */
/* Completely different aesthetic from V2 (glass) and V3 (polaroid). */
/* ------------------------------------------------------------------ */
const GRID_ITEMS = [
{ color: '#FFB5A7', size: 'row-span-2', label: 'Age 3' },
{ color: '#B5D5C5', size: '', label: 'Age 7' },
{ color: '#FFE0CB', size: '', label: 'Age 5' },
{ color: '#F4846F', size: 'col-span-2', label: 'Age 1' },
{ color: '#8BBCAA', size: '', label: 'Age 9' },
{ color: '#FFB5A7', size: 'row-span-2', label: 'Age 4' },
{ color: '#FFE0CB', size: '', label: 'Age 6' },
{ color: '#B5D5C5', size: '', label: 'Age 2' },
]
function PhotoGrid() {
return (
<div className="grid grid-cols-3 grid-rows-4 gap-2 h-full p-4">
{GRID_ITEMS.map((item, i) => (
<motion.div
key={i}
whileHover={{ scale: 1.04, zIndex: 10 }}
className={`rounded-2xl overflow-hidden relative cursor-pointer transition-shadow hover:shadow-2xl ${item.size}`}
style={{ background: item.color }}
>
<div className="absolute inset-0 flex items-end p-3">
<span
className="text-xs font-semibold px-2 py-1 rounded-lg"
style={{ background: 'rgba(0,0,0,0.35)', color: 'white' }}
>
{item.label}
</span>
</div>
</motion.div>
))}
</div>
)
}
function StatPill({ icon: Icon, label }: { icon: typeof Shield; label: string }) {
return (
<div
className="flex items-center gap-2 px-4 py-2.5 rounded-full"
style={{ background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.1)' }}
>
<Icon size={13} style={{ color: '#FFB5A7' }} />
<span className="text-xs font-medium" style={{ color: 'rgba(255,255,255,0.7)' }}>
{label}
</span>
</div>
)
}
function StepCard({
number,
title,
desc,
icon: Icon,
}: {
number: string
title: string
desc: string
icon: typeof Upload
}) {
return (
<motion.div
whileHover={{ y: -4 }}
className="flex gap-4 p-5 rounded-2xl transition-all"
style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)' }}
>
<div
className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0"
style={{ background: 'rgba(255, 181, 167, 0.15)' }}
>
<Icon size={18} style={{ color: '#FFB5A7' }} />
</div>
<div>
<p className="text-sm font-bold" style={{ color: 'rgba(255,255,255,0.9)' }}>
<span style={{ color: '#FFB5A7' }}>{number}.</span> {title}
</p>
<p className="text-xs mt-1 leading-relaxed" style={{ color: 'rgba(255,255,255,0.45)' }}>
{desc}
</p>
</div>
</motion.div>
)
}
export default function V1Page() {
return (
<div className="min-h-screen flex flex-col lg:flex-row">
{/* Left panel — dark */}
<div
className="flex-1 flex flex-col justify-between px-8 py-10 md:px-16 md:py-14 lg:max-w-[55%]"
style={{ background: '#1a1d2e' }}
>
{/* Nav */}
<div className="flex items-center justify-between">
<span className="text-lg font-black tracking-tighter" style={{ color: 'white' }}>
i was cute
</span>
<div className="flex items-center gap-4 text-xs font-medium" style={{ color: 'rgba(255,255,255,0.5)' }}>
<Link href="/browse" className="hover:text-white transition-colors">Browse</Link>
<Link href="/licensor" className="hover:text-white transition-colors">Upload</Link>
<Link
href="/login"
className="flex items-center gap-1.5 px-4 py-2 rounded-full transition-all hover:scale-105"
style={{ background: '#FFB5A7', color: '#1a1d2e' }}
>
Sign In
</Link>
</div>
</div>
{/* Hero content */}
<div className="flex flex-col gap-8 my-12 lg:my-0">
{/* Badge */}
<div
className="inline-flex items-center gap-2 self-start px-3 py-1.5 rounded-full"
style={{ background: 'rgba(255, 181, 167, 0.12)', border: '1px solid rgba(255, 181, 167, 0.2)' }}
>
<Sparkles size={12} style={{ color: '#FFB5A7' }} />
<span className="text-xs font-semibold" style={{ color: '#FFB5A7' }}>
Dual-rights photo marketplace
</span>
</div>
{/* Headline */}
<div>
<h1
className="text-5xl md:text-7xl font-black tracking-tighter leading-[0.9]"
style={{ color: 'white' }}
>
Your childhood
<br />
photos,{' '}
<span style={{ color: '#FFB5A7' }}>legally</span>
<br />
licensed.
</h1>
<p
className="mt-6 text-base md:text-lg leading-relaxed max-w-md"
style={{ color: 'rgba(255,255,255,0.5)' }}
>
Upload your most precious memories. We verify copyright and likeness rights,
then connect you with advertisers, filmmakers, and AI companies who pay royalties.
</p>
</div>
{/* CTAs */}
<div className="flex flex-wrap gap-3">
<motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.97 }}>
<Link
href="/licensor"
className="inline-flex items-center gap-2 px-8 py-4 rounded-full text-sm font-bold tracking-wide transition-all"
style={{ background: '#FFB5A7', color: '#1a1d2e' }}
>
Start Uploading
<ArrowRight size={16} />
</Link>
</motion.div>
<motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.97 }}>
<Link
href="/browse"
className="inline-flex items-center gap-2 px-8 py-4 rounded-full text-sm font-semibold tracking-wide transition-all"
style={{
background: 'transparent',
color: 'rgba(255,255,255,0.7)',
border: '1px solid rgba(255,255,255,0.15)',
}}
>
Browse Library
</Link>
</motion.div>
</div>
{/* Trust pills */}
<div className="flex flex-wrap gap-2">
<StatPill icon={Shield} label="Dual-rights verified" />
<StatPill icon={Camera} label="AI training ready" />
<StatPill icon={DollarSign} label="Instant royalties" />
</div>
</div>
{/* Bottom stats */}
<div
className="flex items-center gap-8 pt-6"
style={{ borderTop: '1px solid rgba(255,255,255,0.08)' }}
>
{[
{ value: '10K+', label: 'Photos' },
{ value: '500+', label: 'Licensors' },
{ value: '100%', label: 'Verified' },
].map(({ value, label }) => (
<div key={label}>
<p className="text-2xl font-black" style={{ color: '#FFB5A7' }}>{value}</p>
<p className="text-xs" style={{ color: 'rgba(255,255,255,0.4)' }}>{label}</p>
</div>
))}
</div>
</div>
{/* Right panel — warm photo grid */}
<div
className="flex-1 hidden lg:flex flex-col"
style={{ background: 'var(--color-cream)' }}
>
<PhotoGrid />
</div>
{/* Mobile-only: photo grid preview + how it works */}
<div className="lg:hidden" style={{ background: 'var(--color-cream)' }}>
<div className="grid grid-cols-3 gap-2 p-4" style={{ height: '200px' }}>
{GRID_ITEMS.slice(0, 3).map((item, i) => (
<div
key={i}
className="rounded-xl"
style={{ background: item.color }}
/>
))}
</div>
</div>
<div
className="lg:hidden px-8 py-12"
style={{ background: '#1a1d2e' }}
>
<h2
className="text-xl font-bold mb-6"
style={{ color: 'rgba(255,255,255,0.9)' }}
>
How it works
</h2>
<div className="flex flex-col gap-3">
<StepCard number="1" title="Upload your photos" desc="Drag entire folders. We extract EXIF metadata automatically." icon={Upload} />
<StepCard number="2" title="Clear the rights" desc="Verify copyright (photographer) and likeness (you) in our guided wizard." icon={Scale} />
<StepCard number="3" title="Earn royalties" desc="Every license generates royalties deposited directly to your account." icon={Heart} />
</div>
</div>
</div>
)
}