import React from "react";
export default function LetsStayTogetherLandingPage() {
const merchItems = [
{
name: "LST Signature Crewneck",
price: "$68",
detail: "Premium everyday sweatshirt with the signature monogram mark.",
},
{
name: "Heart Lock Tee",
price: "$38",
detail: "Soft cotton statement tee made for couples and love culture.",
},
{
name: "Forever Connected Hat",
price: "$32",
detail: "Clean embroidered cap with a minimal relationship-inspired emblem.",
},
];
const episodes = [
"Love, growth, and choosing each other daily",
"Building real connection without losing yourself",
"The conversations couples usually avoid",
];
return (
Real love.
Real talks.
View Full Shop
);
}
const styles = {
page: {
minHeight: "100vh",
background: "#0B0B0B",
color: "#FFFFFF",
fontFamily: "Inter, Arial, sans-serif",
overflowX: "hidden",
},
heroWrap: {
position: "relative",
padding: "24px",
background: "#0B0B0B",
overflow: "hidden",
},
glowOne: {
position: "absolute",
top: "-120px",
right: "-120px",
width: "420px",
height: "420px",
borderRadius: "999px",
background: "rgba(196,154,108,0.34)",
filter: "blur(58px)",
animation: "pulseGlow 5s ease-in-out infinite",
},
glowTwo: {
position: "absolute",
bottom: "120px",
left: "-180px",
width: "380px",
height: "380px",
borderRadius: "999px",
background: "rgba(255,255,255,0.10)",
filter: "blur(70px)",
animation: "pulseGlow 7s ease-in-out infinite",
},
gridOverlay: {
position: "absolute",
inset: 0,
backgroundImage: "linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px)",
backgroundSize: "52px 52px",
maskImage: "linear-gradient(to bottom, black, transparent 82%)",
},
nav: {
position: "relative",
zIndex: 5,
maxWidth: "1200px",
margin: "0 auto",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: "20px",
border: "1px solid rgba(255,255,255,0.12)",
background: "rgba(255,255,255,0.07)",
borderRadius: "999px",
padding: "16px 20px",
backdropFilter: "blur(14px)",
boxShadow: "0 18px 50px rgba(0,0,0,0.28)",
},
logoGroup: { display: "flex", alignItems: "center", gap: "12px" },
logoIcon: {
width: "40px",
height: "40px",
borderRadius: "999px",
background: "linear-gradient(135deg, #fff, #C49A6C)",
color: "#000",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "18px",
boxShadow: "0 0 24px rgba(196,154,108,0.65)",
},
logoText: { fontSize: "13px", fontWeight: 700, letterSpacing: "0.22em", textTransform: "uppercase" },
navLinks: { display: "flex", gap: "28px" },
navLink: { color: "rgba(255,255,255,0.72)", fontSize: "14px" },
navButton: {
background: "#FFFFFF",
color: "#000000",
padding: "12px 18px",
borderRadius: "999px",
fontSize: "14px",
fontWeight: 700,
boxShadow: "0 0 28px rgba(255,255,255,0.18)",
},
hero: {
position: "relative",
zIndex: 2,
maxWidth: "1200px",
margin: "0 auto",
display: "grid",
gridTemplateColumns: "1.05fr 0.95fr",
gap: "60px",
alignItems: "center",
padding: "90px 0 105px",
},
heroContent: { maxWidth: "760px" },
badge: {
display: "inline-flex",
alignItems: "center",
border: "1px solid rgba(196,154,108,0.45)",
background: "rgba(196,154,108,0.12)",
color: "#E8C59B",
padding: "10px 16px",
borderRadius: "999px",
fontSize: "14px",
marginBottom: "24px",
boxShadow: "0 0 30px rgba(196,154,108,0.14)",
},
heroTitle: {
fontSize: "clamp(54px, 8vw, 96px)",
lineHeight: "0.9",
letterSpacing: "-0.075em",
margin: 0,
fontWeight: 800,
},
goldText: {
color: "#C49A6C",
textShadow: "0 0 34px rgba(196,154,108,0.35)",
},
heroText: {
marginTop: "28px",
maxWidth: "650px",
color: "rgba(255,255,255,0.72)",
fontSize: "20px",
lineHeight: 1.7,
},
buttonRow: { marginTop: "36px", display: "flex", gap: "16px", flexWrap: "wrap" },
primaryButton: {
background: "linear-gradient(135deg, #F1D4AA, #C49A6C)",
color: "#000000",
padding: "18px 30px",
borderRadius: "999px",
fontWeight: 800,
boxShadow: "0 18px 42px rgba(196,154,108,0.24)",
},
secondaryButton: {
border: "1px solid rgba(255,255,255,0.25)",
color: "#FFFFFF",
padding: "18px 30px",
borderRadius: "999px",
fontWeight: 800,
background: "rgba(255,255,255,0.04)",
},
statsRow: {
marginTop: "38px",
display: "grid",
gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
gap: "14px",
maxWidth: "560px",
},
statBox: {
border: "1px solid rgba(255,255,255,0.1)",
background: "rgba(255,255,255,0.055)",
borderRadius: "22px",
padding: "18px",
},
statNumber: { display: "block", color: "#C49A6C", fontSize: "22px" },
statLabel: { display: "block", color: "rgba(255,255,255,0.65)", fontSize: "14px", marginTop: "6px", lineHeight: 1.5 },
visualStage: { position: "relative", minHeight: "640px" },
orbitCircle: {
position: "absolute",
inset: "34px",
border: "1px solid rgba(196,154,108,0.24)",
borderRadius: "999px",
transform: "rotate(-18deg)",
},
featureCard: {
position: "relative",
overflow: "hidden",
borderRadius: "34px",
border: "1px solid rgba(255,255,255,0.16)",
background: "linear-gradient(145deg, #1B1B1B, #0B0B0B 48%, #C49A6C)",
padding: "32px",
minHeight: "560px",
boxShadow: "0 40px 100px rgba(0,0,0,0.58)",
animation: "floatSlow 6s ease-in-out infinite",
},
shineBar: {
position: "absolute",
top: "-60px",
left: 0,
width: "90px",
height: "750px",
background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent)",
animation: "shine 5.5s ease-in-out infinite",
},
featureInner: {
position: "relative",
height: "100%",
minHeight: "496px",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
border: "1px solid rgba(255,255,255,0.15)",
background: "rgba(0,0,0,0.30)",
borderRadius: "26px",
padding: "28px",
},
micIcon: {
width: "64px",
height: "64px",
background: "#FFFFFF",
color: "#000000",
borderRadius: "18px",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "30px",
marginBottom: "24px",
},
kicker: { color: "#E8C59B", letterSpacing: "0.32em", textTransform: "uppercase", fontSize: "13px" },
featureTitle: { fontSize: "42px", lineHeight: 1.08, margin: "18px 0 0" },
nowStreamingBox: { background: "#FFFFFF", color: "#000000", borderRadius: "22px", padding: "22px" },
smallMuted: { color: "rgba(0,0,0,0.55)", margin: 0, fontSize: "14px" },
streamRow: { marginTop: "12px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: "18px", fontSize: "18px" },
circleButton: {
width: "44px",
height: "44px",
borderRadius: "999px",
background: "#000000",
color: "#FFFFFF",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "22px",
},
floatingCardOne: {
position: "absolute",
left: "-34px",
top: "95px",
width: "210px",
border: "1px solid rgba(255,255,255,0.14)",
background: "rgba(255,255,255,0.1)",
backdropFilter: "blur(18px)",
borderRadius: "24px",
padding: "18px",
display: "flex",
gap: "12px",
boxShadow: "0 24px 70px rgba(0,0,0,0.35)",
},
floatingCardTwo: {
position: "absolute",
right: "-18px",
bottom: "90px",
width: "230px",
border: "1px solid rgba(255,255,255,0.14)",
background: "rgba(196,154,108,0.18)",
backdropFilter: "blur(18px)",
borderRadius: "24px",
padding: "18px",
display: "flex",
gap: "12px",
boxShadow: "0 24px 70px rgba(0,0,0,0.35)",
},
floatIcon: { color: "#C49A6C", fontSize: "24px" },
floatIconDark: { color: "#000", background: "#C49A6C", padding: "8px", borderRadius: "12px", fontWeight: 900, height: "fit-content" },
floatText: { margin: "6px 0 0", color: "rgba(255,255,255,0.62)", fontSize: "13px", lineHeight: 1.4 },
marqueeWrap: {
overflow: "hidden",
background: "#C49A6C",
color: "#000",
padding: "16px 0",
transform: "rotate(-1.2deg) scale(1.03)",
marginTop: "-24px",
boxShadow: "0 18px 60px rgba(0,0,0,0.35)",
},
marqueeTrack: {
display: "flex",
gap: "44px",
width: "max-content",
animation: "marquee 18s linear infinite",
fontWeight: 900,
letterSpacing: "0.18em",
whiteSpace: "nowrap",
},
sectionAlt: {
borderTop: "1px solid rgba(255,255,255,0.1)",
borderBottom: "1px solid rgba(255,255,255,0.1)",
background: "linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015))",
padding: "105px 24px 80px",
},
section: { padding: "95px 24px" },
sectionBottom: { padding: "0 24px 90px" },
container: { maxWidth: "1200px", margin: "0 auto" },
twoCol: { maxWidth: "1200px", margin: "0 auto", display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: "48px" },
goldKicker: { color: "#C49A6C", textTransform: "uppercase", letterSpacing: "0.32em", fontSize: "13px", margin: 0, fontWeight: 800 },
sectionTitle: { fontSize: "clamp(38px, 5vw, 58px)", lineHeight: 1.02, letterSpacing: "-0.055em", margin: "16px 0 0" },
sectionText: { marginTop: "20px", color: "rgba(255,255,255,0.65)", lineHeight: 1.8, fontSize: "17px" },
episodeList: { display: "grid", gap: "16px" },
episodeCard: {
border: "1px solid rgba(255,255,255,0.12)",
background: "linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025))",
borderRadius: "26px",
padding: "22px",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: "20px",
boxShadow: "0 20px 60px rgba(0,0,0,0.22)",
},
episodeLeft: { display: "flex", alignItems: "center", gap: "18px" },
numberCircle: {
width: "48px",
height: "48px",
borderRadius: "999px",
background: "#C49A6C",
color: "#000000",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontWeight: 800,
boxShadow: "0 0 28px rgba(196,154,108,0.35)",
},
episodeTitle: { fontSize: "18px", fontWeight: 600, margin: 0 },
playIcon: { color: "rgba(255,255,255,0.55)" },
sectionHeader: { display: "flex", justifyContent: "space-between", alignItems: "end", gap: "24px", marginBottom: "60px" },
whiteButton: { background: "#FFFFFF", color: "#000000", padding: "16px 24px", borderRadius: "999px", fontWeight: 800, whiteSpace: "nowrap" },
merchGrid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "24px" },
merchCard: {
border: "1px solid rgba(255,255,255,0.12)",
background: "linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025))",
borderRadius: "30px",
padding: "20px",
boxShadow: "0 24px 80px rgba(0,0,0,0.28)",
},
productImage: {
position: "relative",
overflow: "hidden",
aspectRatio: "1 / 1",
borderRadius: "24px",
background: "radial-gradient(circle at top, rgba(255,255,255,0.22), transparent 32%), linear-gradient(135deg, rgba(255,255,255,0.15), rgba(196,154,108,0.34))",
display: "flex",
alignItems: "center",
justifyContent: "center",
marginBottom: "24px",
},
productGlow: {
position: "absolute",
width: "180px",
height: "180px",
borderRadius: "999px",
background: "rgba(196,154,108,0.32)",
filter: "blur(34px)",
},
productLogo: { position: "relative", border: "1px solid rgba(255,255,255,0.22)", borderRadius: "999px", padding: "26px 34px", textAlign: "center", background: "rgba(0,0,0,0.22)" },
productLogoMain: { fontSize: "34px", fontWeight: 900, letterSpacing: "-0.04em" },
productLogoSmall: { marginTop: "4px", color: "rgba(255,255,255,0.6)", fontSize: "11px", letterSpacing: "0.3em", textTransform: "uppercase" },
productInfoRow: { display: "flex", justifyContent: "space-between", gap: "16px" },
productName: { margin: 0, fontSize: "21px", lineHeight: 1.2 },
price: { color: "#E8C59B", fontWeight: 800 },
productDetail: { color: "rgba(255,255,255,0.62)", lineHeight: 1.7, fontSize: "14px" },
ctaBox: {
maxWidth: "1200px",
margin: "0 auto",
borderRadius: "40px",
background: "linear-gradient(135deg, #E8C59B, #C49A6C 52%, #9E774D)",
color: "#000000",
padding: "56px",
display: "grid",
gridTemplateColumns: "1fr 0.82fr",
gap: "36px",
alignItems: "center",
boxShadow: "0 30px 100px rgba(196,154,108,0.22)",
},
blackKicker: { color: "rgba(0,0,0,0.55)", textTransform: "uppercase", letterSpacing: "0.32em", fontSize: "13px", fontWeight: 800, margin: 0 },
ctaTitle: { fontSize: "clamp(38px, 5vw, 62px)", lineHeight: 1.02, letterSpacing: "-0.05em", margin: "16px 0 0" },
signupBox: { background: "#000000", color: "#FFFFFF", borderRadius: "30px", padding: "28px", boxShadow: "0 24px 70px rgba(0,0,0,0.28)" },
signupText: { color: "rgba(255,255,255,0.72)", lineHeight: 1.75, margin: 0 },
signupRow: { marginTop: "24px", display: "flex", gap: "12px" },
input: { flex: 1, minHeight: "54px", borderRadius: "999px", border: "none", outline: "none", padding: "0 20px", fontSize: "15px" },
signupButton: { minHeight: "54px", borderRadius: "999px", border: "none", background: "#C49A6C", color: "#000000", padding: "0 24px", fontWeight: 800, cursor: "pointer" },
footer: { maxWidth: "1200px", margin: "0 auto", padding: "30px 24px", borderTop: "1px solid rgba(255,255,255,0.1)", color: "rgba(255,255,255,0.55)", display: "flex", justifyContent: "space-between", gap: "20px", flexWrap: "wrap", fontSize: "14px" },
};
Podcast • Merch • Love Culture
Real love.
Real talks.
Real connection.
Let’s Stay Together Co. is a relationship-centered brand built around honest conversations, intentional love, and statement merch made for couples who choose each other every day.
01
Podcast for real conversations
02
Merch for love culture
🎙
Featured Episode
Choosing each other, even when life gets loud.
Now streaming
Let’s Stay Together Podcast
→
♥
Love Notes
Weekly prompts for deeper connection.
LST
Merch Drop
Signature pieces coming soon.
LOVE CULTUREREAL CONVERSATIONSCOUPLES MERCHSTAYING TOGETHER
LOVE CULTUREREAL CONVERSATIONSCOUPLES MERCHSTAYING TOGETHER
The Podcast
Conversations that keep love intentional.
A space for couples, singles, and anyone building healthier connection. Each episode opens the door to truth, accountability, softness, and growth.
{episodes.map((episode, index) => (
▶
))}
{index + 1}
{episode}
The Merch
Wear the message.
{merchItems.map((item, index) => (
))}
LST
Co.
{item.name}
{item.price}{item.detail}
Join the movement
Love is a choice. Staying together is the culture.
Get new episode drops, merch releases, couple prompts, and brand updates straight to your inbox.