Heritage
{/* LEFT */}
Made to
{/* small tag card */}
);
}
const primaryBtn = {background:'var(--ink)',color:'var(--cream)',padding:'16px 24px',fontFamily:'Archivo',fontSize:12,fontWeight:700,letterSpacing:'.15em',textTransform:'uppercase',display:'inline-flex',alignItems:'center',gap:10,borderRadius:999,transition:'all .2s'};
const ghostBtn = {background:'transparent',color:'var(--ink)',padding:'16px 18px',fontFamily:'Archivo',fontSize:12,fontWeight:700,letterSpacing:'.15em',textTransform:'uppercase',borderBottom:'1px solid var(--ink)',borderRadius:0};
function Stat({k,l}){return(
);}
/* -------------------------------------------------------------------------- */
/* Marquee */
/* -------------------------------------------------------------------------- */
function Marquee(){
const words = ['RAW DENIM','HEAVY CANVAS','BRASS HARDWARE','SELVEDGE','HAND-CUT','LIFETIME REPAIRS','MADE IN USA'];
return (
);
}
/* -------------------------------------------------------------------------- */
/* Story */
/* -------------------------------------------------------------------------- */
function Story(){
return (
{/* timeline */}
);
}
/* -------------------------------------------------------------------------- */
/* Shop */
/* -------------------------------------------------------------------------- */
function Shop({ onAdd, onView, wishlist, onWish, scrollRef }){
const [cat,setCat]=useState('All');
const [sort,setSort]=useState('featured');
const [onlySale,setOnlySale]=useState(false);
const list = useMemo(()=>{
let l = PRODUCTS.slice();
if(cat!=='All') l = l.filter(p=>p.category===cat);
if(onlySale) l = l.filter(p=>p.sale);
if(sort==='price-low') l.sort((a,b)=>(a.sale||a.price)-(b.sale||b.price));
if(sort==='price-high') l.sort((a,b)=>(b.sale||b.price)-(a.sale||a.price));
if(sort==='year') l.sort((a,b)=>a.year-b.year);
return l;
},[cat,sort,onlySale]);
return (
{/* filters */}
{/* grid */}
);
}
function ProductCard({ p, onAdd, onView, wished, onWish }){
const [hover,setHover]=useState(false);
const sale = p.sale;
return (
);
}
/* -------------------------------------------------------------------------- */
/* Sale Banner */
/* -------------------------------------------------------------------------- */
function Sale({ onShop }){
const [t,setT]=useState({d:3,h:14,m:27,s:41});
useEffect(()=>{
const i=setInterval(()=>{
setT(x=>{
let {d,h,m,s}=x; s--;
if(s<0){s=59;m--}
if(m<0){m=59;h--}
if(h<0){h=23;d--}
if(d<0){d=0;h=0;m=0;s=0}
return {d,h,m,s};
});
},1000);
return ()=>clearInterval(i);
},[]);
const cell = (n,l)=>(
);
return (
40% off
);
}
/* -------------------------------------------------------------------------- */
/* Instagram */
/* -------------------------------------------------------------------------- */
function Instagram(){
return (
Follow on Instagram
);
}
/* -------------------------------------------------------------------------- */
/* Cart Drawer */
/* -------------------------------------------------------------------------- */
function CartDrawer({ open, onClose, items, setItems }){
const subtotal = items.reduce((s,i)=>s+(i.p.sale||i.p.price)*i.qty,0);
const updateQty = (id,d)=>setItems(items.map(i=>i.id===id?{...i,qty:Math.max(1,i.qty+d)}:i));
const remove = (id)=>setItems(items.filter(i=>i.id!==id));
return (
<>
);
}
/* -------------------------------------------------------------------------- */
/* Footer */
/* -------------------------------------------------------------------------- */
function Footer(){
const [email,setEmail]=useState('');
const [sent,setSent]=useState(false);
const submit = (e)=>{e.preventDefault(); if(email.includes('@')){setSent(true); setTimeout(()=>{setSent(false);setEmail('')},2500)}};
return (
);
}
/* -------------------------------------------------------------------------- */
/* App */
/* -------------------------------------------------------------------------- */
function App(){
const [cart,setCart] = useState([]);
const [wish,setWish] = useState([]);
const [cartOpen,setCartOpen] = useState(false);
const [modal,setModal] = useState(null);
const [toast,setToast] = useState(null);
const shopRef = useRef(null);
const onAdd = (p,size,color,qty=1)=>{
const id = `${p.id}-${size}-${color}`;
setCart(c=>{
const ex = c.find(i=>i.id===id);
if(ex) return c.map(i=>i.id===id?{...i,qty:i.qty+qty}:i);
return [...c,{id,p,size,color,qty}];
});
setToast(`${p.name} — added to bag`);
setTimeout(()=>setToast(null),2200);
};
const toggleWish = (id)=>setWish(w=>w.includes(id)?w.filter(x=>x!==id):[...w,id]);
const scrollToShop = ()=>{
const el = shopRef.current;
if(!el) return;
const y = el.getBoundingClientRect().top + window.scrollY - 40;
window.scrollTo({top:y,behavior:'smooth'});
};
const cartCount = cart.reduce((s,i)=>s+i.qty,0);
return (
<>
setCartOpen(true)} onWish={()=>{}} onShop={scrollToShop}/>
setCartOpen(false)} items={cart} setItems={setCart}/>
setModal(null)} onAdd={onAdd} wished={modal?wish.includes(modal.id):false} onWish={toggleWish}/>
{toast && (
Vol. 07 · Autumn Collection '26
Made to
outlast the
decade.
Rugged American garments built on the same patterns we drafted in a Pasadena basement in 1952. Raw denim, heavy canvas, real brass. No seasons — just stories.
{/* film-style marks */}
{/* floating stamp */}
LV · 07 — 26
ISO 400 f/2.8
PHOTO 04 / 12
Featured
"Ranchero" denim jacket
$168 · indigo selvedge
{k}
{l}
{[...Array(4)].map((_,i)=>(
{words.map((w,j)=>({w}✦))}
))}
— Our Story
Three generations of the same cutting table.
In 1952, Clyde Harlan started stitching workshirts in his mother's garage in Pasadena. The pattern for the Ranchero jacket he drafted that August is still pinned to the wall of our cutting room today — yellowed at the edges, but otherwise untouched.
We still cut fabric by hand. We still rivet by hand. We still repair any garment we've ever made, for as long as you own it.
Wendell Harlan
Third generation · Master cutter
{[
['1952','Garage in Pasadena. First dozen shirts.'],
['1961','The Ranchero jacket is patterned.'],
['1978','Second workshop opens in Portland.'],
['1999','Lifetime repair program begins.'],
['2026','Still on the same cutting table.']
].map(([y,t])=>(
))}
{y}
{t}
— Shop the collection
The Autumn catalog
{list.length} items
{CATEGORIES.map(c=>(
))}
{list.map(p=>(
))}
setHover(true)} onMouseLeave={()=>setHover(false)} style={{position:'relative'}}>
);
}
/* -------------------------------------------------------------------------- */
/* Product Modal */
/* -------------------------------------------------------------------------- */
function ProductModal({ p, onClose, onAdd, wished, onWish }){
const [size,setSize]=useState(p?.sizes[Math.floor(p.sizes.length/2)]);
const [color,setColor]=useState(p?.colors[0]);
const [qty,setQty]=useState(1);
useEffect(()=>{
if(!p) return;
setSize(p.sizes[Math.floor(p.sizes.length/2)]);
setColor(p.colors[0]); setQty(1);
const esc=(e)=>e.key==='Escape' && onClose();
window.addEventListener('keydown',esc); return ()=>window.removeEventListener('keydown',esc);
},[p]);
if(!p) return null;
const price = p.sale||p.price;
return (
onView(p)} style={{
aspectRatio:'3/4',overflow:'hidden',position:'relative',cursor:'pointer',
background:'var(--cream)',marginBottom:14
}}>
{/* badges */}
{p.tag && (
{p.tag}
)}
{/* quick add */}
{p.category} · {p.year}
{p.name}
{p.colors.map(c=>(
))}
{sale ? (
<>
${sale}
${p.price}
) : (
${p.price}
)}
e.stopPropagation()} style={{background:'var(--cream)',maxWidth:1100,width:'100%',maxHeight:'92vh',overflow:'auto',display:'grid',gridTemplateColumns:'1fr 1fr',position:'relative'}}>
{p.category} · Est. {p.year}
{p.name}
{p.sale ? (
<>
${p.sale}
${p.price}
SAVE ${p.price-p.sale}
) : ${p.price}}
Built on our original {p.year} pattern. 14oz cone-mills selvedge denim, copper rivets, triple-stitched seams. Hand-finished at our Portland workshop.
{/* COLOR */}Color — {color}
{p.colors.map(c=>(
Size
Size guide →
{p.sizes.map(s=>(
))}
{qty}
✦ Free U.S. shipping over $120
✦ Lifetime repair guarantee
✦ 60-day returns
✦ Ships in 2 business days
{String(n).padStart(2,'0')}
{l}
— End-of-season clearance
40% off
selected goods.
Every season, we retire a handful of styles to make way for the next. Take them home at cost. Once they're gone, that's all of them.
Sale ends in
{cell(t.d,'days')}{cell(t.h,'hrs')}{cell(t.m,'min')}{cell(t.s,'sec')}
— @livingvintage.co
Worn by people, not models.
{INSTAGRAM.map((src,i)=>(
))}
✓ {toast}
)}
);
}
ReactDOM.createRoot(document.getElementById('root')).render(