heroes /
Quantum Soft Hero (3-Column Editorial Card)
Exact replica of the Quantum Reality Creators /soft hero. Cream textured bg, Cormorant Garamond italic serif headline with each line as its own ivory pill, sage CTA, social proof avatars + count. 3-column grid: copy left, tall main photo card with floating badge + bottom tag strip center, side heading + secondary photo with carousel dots right. From quantumrealitycreators.com/soft.
Preview
Source
tsx
export interface QuantumSoftHeroProps {
brand?: string;
navItems?: { label: string; href: string }[];
navCta?: { label: string; href: string };
ratingLabel?: string;
ratingDescription?: string;
/** Headline lines — each renders as its own ivory pill. Use <em> for italic sage emphasis. */
headlineLines?: string[];
subtext?: string;
primaryCta?: { label: string; href: string };
socialAvatars?: { src: string; alt: string }[];
socialCount?: string; // e.g. "500+"
socialNote?: string; // text after the count
mainImageSrc?: string;
mainImageAlt?: string;
floatingBadge?: string;
tags?: { icon: string; label: string }[];
sideHeading?: string;
sideDesc?: string;
howItWorksLink?: { label: string; href: string };
secondImageSrc?: string;
secondImageAlt?: string;
}
const defaultAvatars = [
{ src: "/heroes/quantum-soft/LindaDellett.webp", alt: "Linda" },
{ src: "/heroes/quantum-soft/JamesOrsulak.webp", alt: "James" },
{ src: "/heroes/quantum-soft/AshleyVernick.webp", alt: "Ashley" },
{ src: "/heroes/quantum-soft/AngelaLegh.webp", alt: "Angela" },
];
const defaultHeadline = [
"You Were Born",
"to Break Through.",
"<em>Your Quantum</em>",
"Shift Begins Here.",
];
const defaultTags = [
{ icon: "⚡", label: "Identity Expansion" },
{ icon: "✓", label: "Built on Trust" },
{ icon: "→", label: "Begin Transforming" },
{ icon: "✨", label: "Awaken" },
];
export default function QuantumSoftHero({
brand = "Quantum Reality",
navItems = [
{ label: "Home", href: "/" },
{ label: "All Pages ▾", href: "#" },
{ label: "About", href: "/about" },
{ label: "Programs", href: "/programs" },
{ label: "Free Session", href: "/gift" },
],
navCta = { label: "Book a Session", href: "/gift" },
ratingLabel = "★ 4.9 Rated",
ratingDescription = "By Transformed Clients",
headlineLines = defaultHeadline,
subtext = "We offer personalized, quantum-guided identity transformation to help you break through invisible ceilings and start creating from a completely new frequency.",
primaryCta = { label: "Book a Free Session", href: "/gift" },
socialAvatars = defaultAvatars,
socialCount = "500+",
socialNote = "Entrepreneurs who have transformed with Oz & Mazíx",
mainImageSrc = "/heroes/quantum-soft/main.webp",
mainImageAlt = "Oz & Mazíx — Quantum Reality Creators",
floatingBadge = "Quantum Shift",
tags = defaultTags,
sideHeading = "You Are\nReady Now",
sideDesc = "We offer deep, personalized quantum-guided transformation for entrepreneurs and visionaries.",
howItWorksLink = { label: "How it works", href: "/programs" },
secondImageSrc = "/heroes/quantum-soft/second.webp",
secondImageAlt = "Oz & Mazíx transformation mentors",
}: QuantumSoftHeroProps) {
return (
<>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400..700;1,400..700&family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&display=swap"
/>
<style>{`
@keyframes qsoft-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
`}</style>
<div
className="qsoft-page relative min-h-screen overflow-x-hidden"
style={{
backgroundColor: "#fcfaf7",
fontFamily: "'DM Sans', sans-serif",
}}
>
{/* NAV */}
<nav className="flex items-center justify-between px-5 py-5 sm:px-12 sm:py-5">
<a href="/" className="flex items-center gap-2 no-underline">
<span style={{ color: "#e1937e", fontSize: "1rem", lineHeight: 1 }}>✦</span>
<span
className="font-semibold tracking-wide"
style={{
fontFamily: "'Cormorant Garamond', serif",
fontSize: "1.05rem",
color: "#1A1209",
}}
>
{brand}
</span>
</a>
<ul className="hidden items-center gap-7 lg:flex" style={{ listStyle: "none", padding: 0, margin: 0 }}>
{navItems.map((item) => (
<li key={item.label}>
<a
href={item.href}
className="no-underline transition-colors hover:opacity-70"
style={{ fontSize: "0.875rem", color: "#3A3020", fontWeight: 400 }}
>
{item.label}
</a>
</li>
))}
</ul>
<a
href={navCta.href}
className="inline-flex rounded-full px-5 py-2.5 text-sm font-medium no-underline transition-all hover:-translate-y-0.5"
style={{
backgroundColor: "#8e9868",
color: "#F4EFE3",
whiteSpace: "nowrap",
}}
>
{navCta.label}
</a>
</nav>
{/* HERO GRID */}
<section
className="qsoft-hero mx-auto"
style={{
display: "grid",
gridTemplateColumns: "1fr 420px 300px",
gap: 0,
padding: "2rem 3rem 3rem",
maxWidth: 1300,
alignItems: "stretch",
}}
>
{/* LEFT */}
<div
className="relative z-[2]"
style={{
paddingTop: "1.5rem",
paddingRight: "2.5rem",
alignSelf: "start",
animation: "qsoft-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both",
}}
>
{/* Rating pill */}
<div
className="mb-6 inline-flex items-center"
style={{
gap: "0.55rem",
background: "#DDD3B8",
borderRadius: 999,
padding: "0.38rem 0.9rem 0.38rem 0.5rem",
}}
>
<span
style={{
background: "#C9A84C",
color: "#fff",
fontSize: "0.75rem",
fontWeight: 700,
padding: "0.18rem 0.55rem",
borderRadius: 999,
letterSpacing: "0.02em",
}}
>
{ratingLabel}
</span>
<span style={{ fontSize: "0.8rem", color: "#6B5535", fontWeight: 400 }}>
{ratingDescription}
</span>
</div>
{/* Headline — each line gets its own ivory pill */}
<h1
className="relative z-[3] m-0 mb-5 flex flex-col items-start"
style={{
fontFamily: "'Cormorant Garamond', serif",
fontSize: "clamp(3rem, 4.2vw, 4.4rem)",
fontWeight: 700,
lineHeight: 1,
color: "#1A1209",
letterSpacing: "-0.025em",
}}
>
{headlineLines.map((line, i) => (
<span
key={i}
className="inline-block whitespace-nowrap"
style={{
background: "#fcfaf7",
padding: "0.18em 1.5rem 0.18em 0",
borderRadius: "0 16px 16px 0",
marginBottom: -15,
fontStyle: line.includes("<em>") ? undefined : undefined,
}}
dangerouslySetInnerHTML={{
__html: line.replace(
/<em>(.*?)<\/em>/g,
'<em style="font-style:italic;font-weight:400;color:#8e9868;">$1</em>'
),
}}
/>
))}
</h1>
{/* Subtext */}
<p
className="m-0 mb-7"
style={{
fontSize: "0.93rem",
lineHeight: 1.7,
color: "#5C4A30",
maxWidth: 370,
}}
>
{subtext}
</p>
{/* CTA */}
<a
href={primaryCta.href}
className="mb-9 inline-block rounded-full no-underline transition-all hover:-translate-y-0.5"
style={{
backgroundColor: "#8e9868",
color: "#F4EFE3",
padding: "0.85rem 1.8rem",
fontSize: "0.9rem",
fontWeight: 500,
boxShadow: "0 4px 20px rgba(142, 152, 104, 0.28)",
}}
>
{primaryCta.label}
</a>
{/* Social proof */}
<div className="flex items-center gap-4">
<div className="flex flex-shrink-0">
{socialAvatars.map((a, i) => (
<img
key={i}
src={a.src}
alt={a.alt}
width={36}
height={36}
style={{
width: 36,
height: 36,
borderRadius: "50%",
objectFit: "cover",
border: "2.5px solid #fcfaf7",
marginLeft: i === 0 ? 0 : -10,
display: "block",
}}
/>
))}
</div>
<p
className="m-0"
style={{
fontSize: "0.78rem",
lineHeight: 1.5,
color: "#5C4A30",
}}
>
<strong style={{ fontWeight: 700, color: "#3A2E18" }}>{socialCount}</strong>{" "}
{socialNote}
</p>
</div>
</div>
{/* CENTER — main tall image card with floating badge + bottom tag strip */}
<div
className="qsoft-center relative z-[1]"
style={{
alignSelf: "stretch",
marginLeft: -30,
animation: "qsoft-fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both",
}}
>
<div
className="relative h-full overflow-hidden"
style={{
minHeight: 560,
borderRadius: 26,
boxShadow:
"0 2px 4px rgba(60, 38, 8, 0.06), 0 12px 40px rgba(60, 38, 8, 0.12), 0 40px 80px rgba(60, 38, 8, 0.08)",
}}
>
<img
src={mainImageSrc}
alt={mainImageAlt}
width={420}
height={560}
loading="eager"
fetchPriority="high"
decoding="async"
style={{
width: "100%",
height: "100%",
objectFit: "cover",
display: "block",
}}
/>
{/* Top floating badge */}
<div
className="absolute"
style={{
top: 16,
right: 16,
display: "flex",
alignItems: "center",
gap: "0.35rem",
background: "rgba(237, 230, 212, 0.94)",
backdropFilter: "blur(12px)",
WebkitBackdropFilter: "blur(12px)",
borderRadius: 999,
padding: "0.38rem 0.85rem",
fontSize: "0.78rem",
fontWeight: 600,
color: "#3A2E18",
border: "1px solid rgba(255,255,255,0.6)",
}}
>
<span style={{ color: "#e1937e", fontSize: "0.85rem" }}>✦</span>
<span>{floatingBadge}</span>
</div>
{/* Bottom tag strip */}
<div
className="absolute bottom-0 left-0 right-0 flex flex-wrap"
style={{
padding: "2rem 1rem 1rem",
background:
"linear-gradient(to top, rgba(25, 16, 5, 0.6) 0%, transparent 100%)",
gap: "0.4rem",
}}
>
{tags.map((t) => (
<span
key={t.label}
className="inline-flex items-center"
style={{
gap: "0.3rem",
background: "rgba(237, 230, 212, 0.92)",
backdropFilter: "blur(10px)",
WebkitBackdropFilter: "blur(10px)",
borderRadius: 999,
padding: "0.3rem 0.7rem",
fontSize: "0.73rem",
fontWeight: 500,
color: "#2A2010",
whiteSpace: "nowrap",
border: "1px solid rgba(255,255,255,0.5)",
}}
>
<span style={{ fontSize: "0.8rem", opacity: 0.8 }}>{t.icon}</span>
{t.label}
</span>
))}
</div>
</div>
</div>
{/* RIGHT — side text + secondary card */}
<div
className="qsoft-right flex flex-col"
style={{
paddingLeft: "1.5rem",
minHeight: 560,
animation: "qsoft-fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both",
}}
>
<div style={{ padding: "0.75rem 0.25rem 0" }}>
<h2
className="m-0"
style={{
fontFamily: "'Cormorant Garamond', serif",
fontSize: "2rem",
fontWeight: 700,
lineHeight: 1.15,
color: "#1A1209",
marginBottom: "0.65rem",
letterSpacing: "-0.02em",
whiteSpace: "pre-line",
}}
>
{sideHeading}
</h2>
<p
className="m-0 mb-4"
style={{
fontSize: "0.82rem",
lineHeight: 1.65,
color: "#6B5535",
}}
>
{sideDesc}
</p>
<a
href={howItWorksLink.href}
className="inline-flex items-center no-underline transition-all"
style={{
gap: "0.6rem",
color: "#3A2E18",
fontSize: "0.875rem",
fontWeight: 600,
}}
>
<span
className="flex items-center justify-center flex-shrink-0"
style={{
width: 30,
height: 30,
borderRadius: "50%",
background: "#e1937e",
color: "#fff",
fontSize: "0.65rem",
paddingLeft: 2,
boxShadow: "0 4px 12px rgba(225, 147, 126, 0.35)",
}}
>
▶
</span>
{howItWorksLink.label}
</a>
</div>
{/* Second card */}
<div
className="relative overflow-hidden"
style={{
borderRadius: 20,
flex: 1,
minHeight: 190,
marginTop: "1.25rem",
boxShadow:
"0 4px 16px rgba(60, 38, 8, 0.1), 0 20px 48px rgba(60, 38, 8, 0.08)",
}}
>
<img
src={secondImageSrc}
alt={secondImageAlt}
width={240}
height={190}
loading="lazy"
decoding="async"
style={{
width: "100%",
height: "100%",
objectFit: "cover",
display: "block",
}}
/>
{/* Carousel dots */}
<div
className="absolute flex items-center"
style={{ bottom: 12, right: 14, gap: 5 }}
>
<span
style={{
width: 7,
height: 7,
borderRadius: "50%",
background: "#e1937e",
display: "block",
}}
/>
<span
style={{
width: 6,
height: 6,
borderRadius: "50%",
background: "rgba(255, 255, 255, 0.45)",
display: "block",
}}
/>
<span
style={{
width: 6,
height: 6,
borderRadius: "50%",
background: "rgba(255, 255, 255, 0.45)",
display: "block",
}}
/>
</div>
</div>
</div>
</section>
{/* Responsive overrides */}
<style>{`
@media (max-width: 1024px) {
.qsoft-hero { grid-template-columns: 1fr 360px !important; }
.qsoft-right { display: none !important; }
}
@media (max-width: 768px) {
.qsoft-hero { grid-template-columns: 1fr !important; padding: 1.5rem 1.25rem 2.5rem !important; }
.qsoft-center { display: none !important; }
}
`}</style>
</div>
</>
);
}Claude Code Instructions
CLI Install
npx innovations add quantum-softWhere to use it
Production-grade hero from the Quantum Reality Creators /soft page. Best for personal-brand transformation businesses (coaches, healers, somatic practitioners, identity work) where the offer is depth + sophistication.
In Astro:
---
import QuantumSoftHero from '../components/innovations/heroes/quantum-soft';
---
<QuantumSoftHero />
No client:* needed — server-renderable.
In Next.js:
import QuantumSoftHero from '@/components/innovations/heroes/quantum-soft';
ASSETS:
Default images and avatars live at /heroes/quantum-soft/. Copy main.webp + second.webp + 4 avatar WebPs into your project's public/heroes/quantum-soft/ directory, OR override via mainImageSrc / secondImageSrc / socialAvatars props.
CUSTOMIZATION:
<QuantumSoftHero
brand="Your Brand"
headlineLines={[
"First line",
"Second line",
"<em>Italicized line</em>",
"Closing line.",
]}
primaryCta={{ label: "Book a Call", href: "/contact" }}
socialCount="500+"
socialNote="Clients transformed"
mainImageSrc="/your-tall-photo.webp"
secondImageSrc="/your-second-photo.webp"
floatingBadge="Featured Service"
tags={[
{ icon: "⚡", label: "Tag One" },
{ icon: "✓", label: "Tag Two" },
]}
sideHeading={"Two\\nLines Here"}
howItWorksLink={{ label: "How it works", href: "/how" }}
/>
HEADLINE: each item in headlineLines becomes its own ivory pill. Use <em>...</em> inside any line for the sage italic emphasis treatment.
PALETTE: cream + dark brown + sage + peach + gold rating chip. Hard-coded throughout — search/replace these hex codes if rebranding:
#fcfaf7 cream bg | #1A1209 dark text base
#8e9868 sage (CTA + accent) | #e1937e peach (icons + play btn)
#C9A84C gold (rating chip) | #DDD3B8 rating pill bg
#5C4A30 / #6B5535 body greys
FONTS: Cormorant Garamond + DM Sans, shipped via baked-in Google Fonts <link>.
RESPONSIVE: at <1024px the right side panel hides. At <768px the center main card hides too — only the left copy remains.