← back to IWasCute
src/app/page.tsx
285 lines
'use client'
import Link from 'next/link'
import { motion } from 'framer-motion'
import { ArrowRight, Moon, Layers, Camera } from 'lucide-react'
const VERSIONS = [
{
path: '/v1',
label: 'Dark Split',
icon: Moon,
accent: '#1a1d2e',
accentText: '#FFB5A7',
desc: 'Professional dark panel with warm photo grid. Built for licensees and AI buyers.',
colors: ['#1a1d2e', '#FFB5A7', '#B5D5C5'],
tag: 'Business',
},
{
path: '/v2',
label: 'Glassmorphism',
icon: Layers,
accent: 'rgba(255,255,255,0.5)',
accentText: 'var(--color-brown)',
desc: 'Frosted glass over animated gradients. Modern, clean, Apple-inspired aesthetic.',
colors: ['#FFB5A7', '#B5D5C5', '#FFE0CB'],
tag: 'Modern',
},
{
path: '/v3',
label: 'Polaroid',
icon: Camera,
accent: 'var(--color-cream)',
accentText: 'var(--color-brown)',
desc: 'Scattered vintage photo frames with handwritten captions. Warm and nostalgic.',
colors: ['#FFB5A7', '#8BBCAA', '#F4846F'],
tag: 'Nostalgic',
},
]
function VersionCard({
version,
index,
}: {
version: (typeof VERSIONS)[number]
index: number
}) {
const Icon = version.icon
const isDark = index === 0
return (
<motion.div
whileHover={{ y: -8, scale: 1.02 }}
whileTap={{ scale: 0.98 }}
className="relative group"
>
<Link href={version.path} className="block no-underline">
<div
className="rounded-3xl overflow-hidden transition-shadow duration-300 group-hover:shadow-2xl"
style={{
border: isDark ? '1px solid rgba(255,255,255,0.1)' : '1px solid var(--color-cream-dark)',
}}
>
{/* Preview header — simulates the page's vibe */}
<div
className="relative h-56 flex flex-col items-center justify-center gap-3 px-6"
style={{
background: isDark
? 'linear-gradient(135deg, #1a1d2e 0%, #2a2d3e 100%)'
: index === 1
? `linear-gradient(135deg, ${version.colors[0]}44, ${version.colors[1]}44, ${version.colors[2]}44)`
: 'var(--color-cream)',
}}
>
{/* Decorative elements per version */}
{index === 1 && (
<>
<div
className="absolute top-4 left-4 w-24 h-24 rounded-full blur-2xl opacity-40"
style={{ background: version.colors[0] }}
/>
<div
className="absolute bottom-4 right-4 w-20 h-20 rounded-full blur-2xl opacity-30"
style={{ background: version.colors[1] }}
/>
{/* Glass card preview */}
<div
className="relative z-10 w-4/5 rounded-2xl px-5 py-4"
style={{
background: 'rgba(255,255,255,0.45)',
backdropFilter: 'blur(12px)',
border: '1px solid rgba(255,255,255,0.3)',
}}
>
<p className="text-xl font-black tracking-tighter" style={{ color: 'var(--color-brown)' }}>
i was <span style={{ color: 'var(--color-peach-dark)' }}>cute</span>
</p>
<p className="text-[10px] mt-1" style={{ color: 'var(--color-warm-gray)' }}>
Your childhood photos, legally licensed
</p>
</div>
</>
)}
{index === 0 && (
<div className="flex w-full gap-2 h-full py-4">
{/* Dark text side */}
<div className="flex-1 flex flex-col justify-center gap-2 px-3">
<p className="text-lg font-black tracking-tighter" style={{ color: 'white' }}>
Your childhood photos,{' '}
<span style={{ color: '#FFB5A7' }}>legally</span> licensed.
</p>
<div
className="self-start px-3 py-1.5 rounded-full text-[9px] font-bold"
style={{ background: '#FFB5A7', color: '#1a1d2e' }}
>
Start Uploading →
</div>
</div>
{/* Photo grid side */}
<div className="w-1/3 grid grid-cols-2 gap-1">
{version.colors.map((c, i) => (
<div key={i} className="rounded-lg" style={{ background: c === '#1a1d2e' ? '#FFE0CB' : c }} />
))}
<div className="rounded-lg" style={{ background: '#FFE0CB' }} />
</div>
</div>
)}
{index === 2 && (
<div className="relative w-full h-full flex items-center justify-center">
{/* Scattered mini polaroids */}
{[
{ x: '10%', y: '15%', rot: -8, color: version.colors[0] },
{ x: '65%', y: '10%', rot: 5, color: version.colors[1] },
{ x: '25%', y: '55%', rot: -4, color: version.colors[2] },
{ x: '60%', y: '50%', rot: 10, color: version.colors[0] },
].map((p, i) => (
<div
key={i}
className="absolute w-14 h-16 bg-white rounded-sm shadow-md p-1 pb-3"
style={{
left: p.x,
top: p.y,
transform: `rotate(${p.rot}deg)`,
}}
>
<div className="w-full h-full rounded-sm" style={{ background: p.color }} />
</div>
))}
{/* Center text */}
<p
className="relative z-10 text-2xl font-bold italic"
style={{ fontFamily: 'Georgia, serif', color: 'var(--color-brown)' }}
>
i was cute
</p>
</div>
)}
</div>
{/* Card body */}
<div
className="px-6 py-5"
style={{
background: isDark ? '#1a1d2e' : 'white',
}}
>
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<div
className="w-8 h-8 rounded-xl flex items-center justify-center"
style={{
background: isDark ? 'rgba(255,181,167,0.15)' : 'var(--color-cream-dark)',
}}
>
<Icon size={16} style={{ color: isDark ? '#FFB5A7' : 'var(--color-brown)' }} />
</div>
<h3
className="text-base font-bold"
style={{ color: isDark ? 'white' : 'var(--color-brown)' }}
>
{version.label}
</h3>
</div>
<span
className="text-[10px] font-bold tracking-widest uppercase px-2.5 py-1 rounded-full"
style={{
background: isDark ? 'rgba(255,181,167,0.12)' : 'var(--color-cream-dark)',
color: isDark ? '#FFB5A7' : 'var(--color-warm-gray)',
}}
>
{version.tag}
</span>
</div>
<p
className="text-sm leading-relaxed mb-4"
style={{ color: isDark ? 'rgba(255,255,255,0.5)' : 'var(--color-warm-gray)' }}
>
{version.desc}
</p>
{/* Color dots */}
<div className="flex items-center justify-between">
<div className="flex gap-1.5">
{version.colors.map((c, i) => (
<div
key={i}
className="w-4 h-4 rounded-full"
style={{ background: c, border: '2px solid rgba(255,255,255,0.2)' }}
/>
))}
</div>
<span
className="flex items-center gap-1 text-xs font-semibold"
style={{ color: isDark ? '#FFB5A7' : 'var(--color-peach-dark)' }}
>
Enter
<ArrowRight size={12} />
</span>
</div>
</div>
</div>
</Link>
</motion.div>
)
}
export default function HomePage() {
return (
<main
className="min-h-screen flex flex-col items-center px-4 py-12 md:py-20 overflow-x-hidden"
style={{ background: 'var(--color-cream)' }}
>
{/* Decorative blobs */}
<div
className="absolute -top-32 -left-32 w-96 h-96 rounded-full opacity-20 blur-3xl pointer-events-none"
style={{ background: 'var(--color-peach)' }}
/>
<div
className="absolute -bottom-40 -right-32 w-[30rem] h-[30rem] rounded-full opacity-15 blur-3xl pointer-events-none"
style={{ background: 'var(--color-sage)' }}
/>
{/* Header */}
<div className="relative z-10 text-center mb-12 md:mb-16 max-w-2xl">
<h1
className="text-5xl md:text-7xl font-black tracking-tighter leading-[0.9]"
style={{ color: 'var(--color-brown)' }}
>
i was{' '}
<span style={{ color: 'var(--color-peach-dark)' }}>cute</span>
</h1>
<p
className="mt-4 text-lg md:text-xl font-light"
style={{ color: 'var(--color-warm-gray)' }}
>
Choose your experience
</p>
<p
className="mt-2 text-sm max-w-md mx-auto"
style={{ color: 'var(--color-warm-gray)' }}
>
Three unique designs, one marketplace. Pick the vibe that speaks to you.
</p>
</div>
{/* Version cards */}
<div className="relative z-10 grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl w-full">
{VERSIONS.map((v, i) => (
<VersionCard key={v.path} version={v} index={i} />
))}
</div>
{/* Footer */}
<p
className="relative z-10 mt-12 text-xs"
style={{ color: 'var(--color-warm-gray)' }}
>
Your childhood photos, legally licensed. © 2025 I was Cute.
</p>
</main>
)
}