PRESENCE EVENTS PRESS INVEST ABOUT GET REPRESENTED BOOK TALENT

LAVISH THE LABEL — SIGNATURE SILKS

You Are What You Spend Your Money On.

Every Lavish the Label piece and every Lavish ticket sends a percentage to the Lavish Entrepreneurs Foundation — self-investment that invests in Miami's next founders and creatives.

Preorder Yours

LAVISH THE LABEL — SIGNATURE SILKS

Wear the Investment.

Slow luxury, made to order in pure silk with partnered US tailors — colorways drawn from the Italian landscape, with copper and gold threading running through every piece. Two signatures open the house.

The Signature Silk Skirt

for her.

Preorder $333

The Italian outside — made to order in three colorways.

Sunshine

Turquoise

Lavender

The Signature Silk Pant

for him.

Preorder $444

The Italian built world — made to order in three colorways.

Espresso

Stone

Sage

PREORDER PRICING · PRICES RISE AT RELEASE

Preorder Yours

THE FOUNDATION

Where the Percentage Goes.

The Lavish Entrepreneurs Foundation backs local and small brands with opportunities, showcases, and community — from Fireside Chats to creator castings. Built in Miami, felt anywhere lavish is dreamed.

A % of every purchase

Every ticket counts

Lavish Dreams to Lavish Realities.

Preorder the Signature Silks

PURCHASES IN USD & CRYPTO

// InvestPage — /invest — Lavish the Label investor page

// Rewrite around: “you are what you spend your money on,” with signature silks preorder + foundation impact.

import { useState, useEffect, startTransition } from "react"

import { addPropertyControls, ControlType } from "framer"

const BG = "#0A0A08"

const SURFACE = "#0A0A08"

const DEEP = "#0A0A08"

const GOLD = "#D4AF37"

const CREAM = "#F5F0E6"

const MUTED = "rgba(245,240,230,0.8)"

const serif = "'Cormorant Garamond', Georgia, serif"

const sans = "Poppins, sans-serif"

const LINEN =

"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%230A0A08'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23ffffff' opacity='0.03'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23ffffff' opacity='0.03'/%3E%3C/svg%3E\")"

function GoldLabel({ children }: { children: React.ReactNode }) {

return (

style={{

fontFamily: sans,

fontSize: 10,

fontWeight: 600,

letterSpacing: "0.18em",

color: GOLD,

textTransform: "uppercase" as const,

marginBottom: 14,

}}

{children}

</p>

)

}

function BtnGold({

href,

children,

}: {

href: string

children: React.ReactNode

}) {

return (

href={href}

style={{

display: "inline-block",

padding: "14px 32px",

background: GOLD,

color: "#000",

fontFamily: sans,

fontSize: 11,

fontWeight: 600,

letterSpacing: "0.12em",

textTransform: "uppercase" as const,

textDecoration: "none",

cursor: "pointer",

borderRadius: 999,

}}

{children}

</a>

)

}

function useIsMobile() {

const [isMobile, setIsMobile] = useState(false)

useEffect(() => {

if (typeof window === "undefined") return

const check = () => setIsMobile(window.innerWidth < 768)

check()

window.addEventListener("resize", check)

return () => window.removeEventListener("resize", check)

}, [])

return isMobile

}

/**

* @framerSupportedLayoutWidth any

* @framerSupportedLayoutHeight any

export default function InvestPage({ skirtImage = "", pantImage = "" }) {

const isMobile = useIsMobile()

// Form state

const [form, setForm] = useState({

name: "",

email: "",

piece: "",

colorway: "",

size: "",

notes: "",

})

const [submitted, setSubmitted] = useState(false)

const [sending, setSending] = useState(false)

const [listEmail, setListEmail] = useState("")

const [listJoined, setListJoined] = useState(false)

function handleChange(

e: React.ChangeEvent<

HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement

) {

const { name, value } = e.target

startTransition(() => {

setForm((prev) => ({ ...prev, [name]: value }))

})

}

async function handleSubmit(e: React.FormEvent) {

e.preventDefault()

startTransition(() => setSending(true))

try {

await fetch(

"https://script.google.com/macros/s/AKfycbwtFrkvVud0RgJB69D9A9c5Kbl2OTeV-4o0mXZf5H1SmiP0HDUqhNxJ1SuJQiQL8R3nqQ/exec",

{

method: "POST",

mode: "no-cors",

headers: { "Content-Type": "application/json" },

body: JSON.stringify({

type: "signature_silk_preorder",

...form,

timestamp: new Date().toISOString(),

}),

}

)

} catch {}

startTransition(() => {

setSending(false)

setSubmitted(true)

})

}

function handleListSubmit(e: React.FormEvent) {

e.preventDefault()

startTransition(() => setListJoined(true))

}

const inputStyle: React.CSSProperties = {

width: "100%",

padding: "14px 16px",

background: "#0A0A08",

border: `1px solid ${GOLD}44`,

color: CREAM,

fontFamily: sans,

fontSize: 14,

outline: "none",

boxSizing: "border-box" as const,

marginBottom: 16,

borderRadius: 12,

}

return (

<div

style={{

position: "relative",

background: BG,

minHeight: "100vh",

color: CREAM,

fontFamily: sans,

backgroundImage:

"radial-gradient(circle at 50% 0%, rgba(212,175,55,0.06), transparent 55%), radial-gradient(circle at 50% 120%, rgba(0,0,0,0.45), rgba(0,0,0,0.85) 70%)",

}}

{/* ── HERO ────────────────────────────────────────────────────── */}

<section

style={{

padding: isMobile ? "100px 24px 80px" : "72px 40px 100px",

backgroundImage: LINEN,

backgroundSize: "4px 4px",

textAlign: "center",

}}

<GoldLabel>LAVISH THE LABEL — SIGNATURE SILKS</GoldLabel>

<h1

style={{

fontFamily: serif,

fontStyle: "normal",

fontWeight: 700,

fontSize: isMobile ? 34 : 46,

lineHeight: 1.15,

color: CREAM,

marginBottom: 28,

}}

You Are What You Spend Your Money On.

</h1>

style={{

fontFamily: sans,

fontSize: isMobile ? 14 : 15,

fontWeight: 300,

color: MUTED,

lineHeight: 1.9,

maxWidth: 600,

margin: "0 auto 44px",

}}

Every Lavish the Label piece and every Lavish ticket

sends a percentage to the Lavish Entrepreneurs

Foundation — self-investment that invests in Miami's

next founders and creatives.

</p>

<BtnGold href="#order-form">Preorder Yours</BtnGold>

</div>

</section>

{/* ── LAVISH THE LABEL — SIGNATURE SILKS ─────────────────────── */}

<section

style={{

background: SURFACE,

padding: isMobile ? "70px 24px" : "90px 40px",

borderTop: `1px solid ${GOLD}22`,

borderBottom: `1px solid ${GOLD}22`,

}}

<GoldLabel>LAVISH THE LABEL — SIGNATURE SILKS</GoldLabel>

<h2

style={{

fontFamily: serif,

fontStyle: "normal",

fontWeight: 700,

fontSize: isMobile ? 30 : 44,

color: CREAM,

marginBottom: 48,

lineHeight: 1.25,

}}

Wear the Investment.

</h2>

style={{

fontFamily: sans,

fontSize: isMobile ? 14 : 15,

fontWeight: 300,

color: MUTED,

lineHeight: 1.9,

maxWidth: 860,

marginBottom: 44,

marginLeft: "auto",

marginRight: "auto",

}}

Slow luxury, made to order in pure silk with partnered

US tailors — colorways drawn from the Italian landscape,

with copper and gold threading running through every

piece. Two signatures open the house.

</p>

</div>

<div

style={{

display: "grid",

gridTemplateColumns: isMobile

? "1fr"

: "repeat(2, 1fr)",

gap: 24,

marginBottom: 36,

}}

{[

{

title: "The Signature Silk Skirt",

image: skirtImage,

forLine: "for her.",

price: "Preorder $333",

body: "The Italian outside — made to order in three colorways.",

swatches: [

{ name: "Sunshine", color: "#E5BF4B" },

{ name: "Turquoise", color: "#3AB5C8" },

{ name: "Lavender", color: "#B6A2D8" },

{

title: "The Signature Silk Pant",

image: pantImage,

forLine: "for him.",

price: "Preorder $444",

body: "The Italian built world — made to order in three colorways.",

swatches: [

{ name: "Espresso", color: "#4A2D1F" },

{ name: "Stone", color: "#C5B69A" },

{ name: "Sage", color: "#81937B" },

].map(

({

title,

forLine,

price,

body,

swatches,

image,

}) => (

<div

key={title}

style={{

border: `1px solid ${GOLD}`,

borderRadius: 12,

padding: isMobile ? 24 : 32,

background: DEEP,

}}

<div

style={{

width: "100%",

aspectRatio: "3 / 4",

border: `1px solid ${GOLD}AA`,

borderRadius: 10,

marginBottom: 22,

display: "flex",

alignItems: "center",

justifyContent: "center",

background:

"linear-gradient(150deg, rgba(16,16,12,0.8), rgba(10,10,8,1))",

}}

{image ? (

<img

src={image}

alt={title}

style={{

width: "100%",

height: "100%",

objectFit: "cover",

borderRadius: 10,

}}

) : (

style={{

margin: 0,

fontFamily: sans,

fontSize: 11,

letterSpacing: "0.16em",

textTransform: "uppercase",

color: GOLD,

}}

Photo coming

</p>

)}

</div>

style={{

fontFamily: serif,

fontStyle: "normal",

fontWeight: 700,

fontSize: isMobile ? 18 : 20,

color: CREAM,

marginBottom: 8,

lineHeight: 1.4,

}}

{title}

</p>

style={{

fontFamily: sans,

fontSize: 12,

color: GOLD,

textTransform: "uppercase",

letterSpacing: "0.08em",

marginBottom: 8,

}}

{forLine}

</p>

style={{

fontFamily: sans,

fontSize: 14,

color: GOLD,

fontWeight: 600,

marginBottom: 12,

}}

{price}

</p>

style={{

fontFamily: sans,

fontSize: 13,

color: MUTED,

lineHeight: 1.8,

marginBottom: 18,

}}

{body}

</p>

<div

style={{

display: "flex",

alignItems: "center",

gap: 12,

flexWrap: "wrap",

}}

{swatches.map((swatch) => (

<div

key={swatch.name}

style={{

display: "flex",

alignItems: "center",

gap: 6,

}}

<span

aria-hidden="true"

style={{

width: 10,

height: 10,

borderRadius: "50%",

background:

swatch.color,

border: `1px solid ${GOLD}66`,

display: "inline-block",

}}

<span

style={{

fontFamily: sans,

fontSize: 11,

color: MUTED,

}}

{swatch.name}

</span>

</div>

))}

</div>

)

)}

</div>

style={{

fontFamily: sans,

fontSize: 10,

fontWeight: 600,

letterSpacing: "0.16em",

color: GOLD,

textAlign: "center",

textTransform: "uppercase",

marginBottom: 20,

}}

PREORDER PRICING · PRICES RISE AT RELEASE

</p>

<BtnGold href="#order-form">Preorder Yours</BtnGold>

</div>

<div

id="order-form"

style={{

maxWidth: 620,

margin: "0 auto",

scrollMarginTop: 96,

}}

{submitted ? (

<div

style={{

border: `1px solid ${GOLD}55`,

borderRadius: 12,

padding: "40px 32px",

textAlign: "center",

}}

style={{

fontFamily: serif,

fontStyle: "italic",

fontSize: 24,

color: CREAM,

marginBottom: 12,

}}

Your preorder request is received.

</p>

style={{

fontFamily: sans,

fontSize: 13,

color: MUTED,

}}

We’ll follow up personally to confirm

details and next steps.

</p>

</div>

) : (

<input

aria-label="Name"

name="name"

type="text"

placeholder="Name"

required

value={form.name}

onChange={handleChange}

style={inputStyle}

<input

aria-label="Email"

name="email"

type="email"

placeholder="Email"

required

value={form.email}

onChange={handleChange}

style={inputStyle}

<select

aria-label="Piece"

name="piece"

required

value={form.piece}

onChange={handleChange}

style={{

...inputStyle,

appearance: "none" as const,

cursor: "pointer",

color: form.piece ? CREAM : MUTED,

}}

Select piece

</option>

Silk Skirt

</option>

Silk Drawstring Pant

</option>

</select>

<select

aria-label="Colorway"

name="colorway"

required

value={form.colorway}

onChange={handleChange}

style={{

...inputStyle,

appearance: "none" as const,

cursor: "pointer",

color: form.colorway ? CREAM : MUTED,

}}

Select colorway

</option>

<option value="Sunshine">Sunshine</option>

<option value="Turquoise">Turquoise</option>

<option value="Lavender">Lavender</option>

<option value="Espresso">Espresso</option>

<option value="Stone">Stone</option>

</select>

<input

aria-label="Size"

name="size"

type="text"

placeholder="Size"

required

value={form.size}

onChange={handleChange}

style={inputStyle}

<textarea

aria-label="Notes"

name="notes"

placeholder="Notes"

rows={4}

value={form.notes}

onChange={handleChange}

style={{

...inputStyle,

resize: "vertical" as const,

}}

<button

type="submit"

disabled={sending}

style={{

width: "100%",

padding: "16px",

background: sending ? MUTED : GOLD,

color: "#000",

border: "none",

fontFamily: sans,

fontSize: 11,

fontWeight: 600,

letterSpacing: "0.12em",

textTransform: "uppercase" as const,

cursor: sending

? "not-allowed"

: "pointer",

transition: "background 0.2s",

borderRadius: 999,

}}

{sending ? "Sending…" : "Reserve My Piece"}

</button>

style={{

fontFamily: sans,

fontSize: 10,

letterSpacing: "0.16em",

color: GOLD,

textAlign: "center",

textTransform: "uppercase",

marginTop: 14,

}}

MADE TO ORDER · USD & CRYPTO ACCEPTED

</p>

</form>

)}

</div>

<form

onSubmit={handleListSubmit}

style={{

maxWidth: 620,

margin: "24px auto 0",

display: "grid",

gridTemplateColumns: isMobile

? "1fr"

: "minmax(0, 1fr) auto",

gap: 12,

alignItems: "center",

}}

style={{

gridColumn: "1 / -1",

margin: 0,

fontFamily: sans,

fontSize: 13,

color: MUTED,

}}

The full collection is coming — be first to see it.

</p>

<input

aria-label="Collection waitlist email"

name="listEmail"

type="email"

placeholder="Email address"

required

value={listEmail}

onChange={(e) =>

startTransition(() =>

setListEmail(e.target.value)

)

}

style={{ ...inputStyle, marginBottom: 0 }}

<button

type="submit"

style={{

padding: "14px 24px",

background: "transparent",

border: `1px solid ${GOLD}66`,

color: CREAM,

fontFamily: sans,

fontSize: 11,

fontWeight: 600,

letterSpacing: "0.12em",

textTransform: "uppercase" as const,

borderRadius: 999,

cursor: "pointer",

minHeight: 48,

}}

Join the List

</button>

{listJoined ? (

style={{

gridColumn: "1 / -1",

margin: 0,

fontFamily: sans,

fontSize: 12,

color: GOLD,

}}

You’re on the list.

</p>

) : null}

</form>

</div>

</section>

{/* ── THE FOUNDATION ───────────────────────────────────────────── */}

<section

style={{

padding: isMobile ? "70px 24px" : "90px 40px",

}}

<GoldLabel>THE FOUNDATION</GoldLabel>

<h2

style={{

fontFamily: serif,

fontStyle: "normal",

fontWeight: 700,

fontSize: isMobile ? 30 : 44,

color: CREAM,

marginBottom: 32,

lineHeight: 1.25,

}}

Where the Percentage Goes.

</h2>

style={{

fontFamily: sans,

fontSize: isMobile ? 14 : 15,

fontWeight: 300,

color: MUTED,

lineHeight: 1.9,

maxWidth: 780,

marginBottom: 34,

}}

The Lavish Entrepreneurs Foundation backs local and

small brands with opportunities, showcases, and

community — from Fireside Chats to creator castings.

Built in Miami, felt anywhere lavish is dreamed.

</p>

<div

style={{

display: "grid",

gridTemplateColumns: isMobile

? "1fr"

: "repeat(2, 1fr)",

gap: 18,

}}

{["A % of every purchase", "Every ticket counts"].map(

(item) => (

<div

key={item}

style={{

border: `1px solid ${GOLD}66`,

borderRadius: 12,

background: DEEP,

padding: isMobile ? 24 : 28,

}}

style={{

margin: 0,

fontFamily: serif,

fontStyle: "normal",

fontWeight: 700,

fontSize: isMobile ? 23 : 28,

color: CREAM,

lineHeight: 1.25,

}}

{item}

</p>

</div>

)

)}

</div>

</section>

{/* ── CLOSING ─────────────────────────────────────────────────── */}

<section

style={{

padding: isMobile ? "56px 24px 86px" : "70px 40px 110px",

borderTop: `1px solid ${GOLD}22`,

textAlign: "center",

backgroundImage: LINEN,

backgroundSize: "4px 4px",

}}

<h2

style={{

fontFamily: serif,

fontStyle: "normal",

fontWeight: 700,

fontSize: isMobile ? 32 : 46,

color: CREAM,

marginBottom: 30,

lineHeight: 1.15,

}}

Lavish Dreams to Lavish Realities.

</h2>

Preorder the Signature Silks

</BtnGold>

style={{

marginTop: 18,

fontFamily: sans,

fontSize: 10,

fontWeight: 600,

letterSpacing: "0.16em",

color: GOLD,

textTransform: "uppercase",

}}

PURCHASES IN USD & CRYPTO

</p>

</div>

</section>

</div>

)

}

InvestPage.displayName = "InvestPage"

addPropertyControls(InvestPage, {

skirtImage: {

type: ControlType.Image,

title: "Skirt Image",

pantImage: {

type: ControlType.Image,

title: "Pant Image",

})