heroes /
Cmillworks Hero (Walnut Luxury Craftsman)
Premium dark-luxury craftsman hero. Walnut wood bg with deep gradient overlay, two bronze blob filters glowing, Playfair Display italic em headline, bronze + outline CTAs, 3 trust-badge pills. Right side: 4-tile masonry grid with 3 floating testimonial cards (top-right star quote, mid-left insurance pill, bottom-right star quote). 3-layer wave divider at bottom. From cmillworks.com.
Preview
Source
tsx
import { Shield, Phone, ArrowRight, Search, Check } from "lucide-react";
interface CmillTrustPill {
label: string;
}
interface CmillFloatCard {
title: string;
quote: string;
author: string;
}
interface CmillMasonryTile {
src: string;
alt: string;
/** "tall-left" | "top-right" | "tall-right" | "bottom-left" — controls grid position */
position: "tall-left" | "top-right" | "tall-right" | "bottom-left";
}
export interface CmillworksHeroProps {
badgeLabel?: string;
headlinePart1?: string;
italicHighlight?: string;
headlinePart2?: string;
description?: string;
primaryCta?: { label: string; href: string };
phoneCta?: { phoneFormatted: string; phoneHref: string };
trustPills?: CmillTrustPill[];
floatCardOne?: CmillFloatCard;
floatCardThree?: CmillFloatCard;
floatPillTitle?: string;
floatPillSub?: string;
masonryTiles?: CmillMasonryTile[];
bgImageSrc?: string;
/** Default = Cmillworks black #0A0908 */
blackColor?: string;
/** Default = Cmillworks bronze #A17647 */
bronzeColor?: string;
/** Default = Cmillworks bronze-light #D6B07A */
bronzeLight?: string;
/** Default = Cmillworks bronze dark #6B4C2C */
bronzeDark?: string;
}
const positionToGrid: Record<CmillMasonryTile["position"], React.CSSProperties> = {
"tall-left": { gridColumn: 1, gridRow: "1 / span 2" },
"top-right": { gridColumn: 2, gridRow: 1 },
"tall-right": { gridColumn: 2, gridRow: "2 / span 2" },
"bottom-left": { gridColumn: 1, gridRow: 3 },
};
export default function CmillworksHero({
badgeLabel = "Master Craftsmen Since 1986",
headlinePart1 = "Masters in",
italicHighlight = "craftsmanship",
headlinePart2 = " since 1986.",
description = "Classic Millworks crafts custom hardwood stairs, precision-matched flooring, and digitally-templated millwork for Phoenix's finest builders, designers, and homeowners. Three generations of craftsmanship. One shop. No subcontractors.",
primaryCta = { label: "Request a Quote", href: "#contact" },
phoneCta = { phoneFormatted: "602 · 944 · 6969", phoneHref: "tel:6029446969" },
trustPills = [
{ label: "38+ Years in Phoenix" },
{ label: "Family Owned & Operated" },
{ label: "Leica 3D Disto Precision" },
],
floatCardOne = {
title: "38 Years of Trust",
quote: "Our floors look amazing. Quick, clean, and friendly.",
author: "Ray Rivera",
},
floatCardThree = {
title: "30+ Years High-End",
quote: "Consistently meets our most demanding clients' expectations.",
author: "Ray Saucedo",
},
floatPillTitle = "Fully Insured",
floatPillSub = "Bonded · Phoenix, AZ",
masonryTiles = [
{
src: "https://www.cmillworks.com/wp-content/uploads/2023/04/Sire-Stiars-New.jpg",
alt: "Custom iron and hardwood staircase",
position: "tall-left",
},
{
src: "https://www.cmillworks.com/wp-content/uploads/2023/05/Scott-Read-Sunburst-copy.jpg",
alt: "Sunburst hardwood floor",
position: "top-right",
},
{
src: "https://www.cmillworks.com/wp-content/uploads/2023/04/Wood-stairs.jpg",
alt: "Custom hardwood spiral staircase",
position: "tall-right",
},
{
src: "https://www.cmillworks.com/wp-content/uploads/2023/04/Sire-Stiars-New.jpg",
alt: "Detail of custom staircase",
position: "bottom-left",
},
],
bgImageSrc = "/heroes/cmillworks/walnut.webp",
blackColor = "#0A0908",
bronzeColor = "#A17647",
bronzeLight = "#D6B07A",
bronzeDark = "#6B4C2C",
}: CmillworksHeroProps) {
return (
<>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Jost:wght@300;400;500;600;700&display=swap"
/>
<section
className="relative min-h-screen overflow-hidden pt-24 pb-32"
style={{
background: `linear-gradient(rgba(10,9,8,0.80), rgba(10,9,8,0.86)), url('${bgImageSrc}') center/cover no-repeat, ${blackColor}`,
fontFamily: "'Jost', sans-serif",
}}
>
{/* Decorative blob filters */}
<div
aria-hidden
className="pointer-events-none absolute"
style={{
top: "4rem",
right: "4rem",
width: "24rem",
height: "24rem",
borderRadius: "50%",
filter: "blur(80px)",
opacity: 0.18,
background: bronzeColor,
}}
/>
<div
aria-hidden
className="pointer-events-none absolute"
style={{
bottom: "4rem",
left: "4rem",
width: "18rem",
height: "18rem",
borderRadius: "50%",
filter: "blur(80px)",
opacity: 0.18,
background: bronzeLight,
}}
/>
<div className="relative z-[2] mx-auto max-w-7xl px-6 lg:px-12">
<div className="flex flex-col items-center gap-12 lg:flex-row lg:items-center lg:gap-16">
{/* LEFT: copy */}
<div className="flex-1 max-w-2xl">
{/* Badge pill */}
<div
className="mb-6 inline-flex items-center gap-2 rounded-full border px-4 py-1.5 text-xs font-medium uppercase tracking-[0.18em]"
style={{
background: "rgba(214, 176, 122, 0.15)",
borderColor: "rgba(214, 176, 122, 0.4)",
color: bronzeLight,
}}
>
<Shield className="h-3.5 w-3.5" />
{badgeLabel}
</div>
{/* Headline */}
<h1
className="mb-6"
style={{
fontFamily: "'Playfair Display', Georgia, serif",
fontWeight: 500,
fontSize: "clamp(2.5rem, 6vw, 4.5rem)",
lineHeight: 1.05,
color: "#FBF8F3",
letterSpacing: "-0.01em",
}}
>
{headlinePart1}{" "}
<em
style={{
fontStyle: "italic",
color: bronzeLight,
fontWeight: 400,
}}
>
{italicHighlight}
</em>
{headlinePart2}
</h1>
{/* Sub */}
<p
className="mb-8"
style={{
color: "rgba(246,242,236,0.85)",
fontSize: "1.1rem",
lineHeight: 1.7,
fontWeight: 400,
}}
>
{description}
</p>
{/* CTAs */}
<div className="flex flex-wrap items-center gap-4">
<a
href={primaryCta.href}
className="inline-flex items-center gap-2.5 px-6 py-4 text-xs font-semibold uppercase tracking-[0.18em] transition-colors"
style={{
background: bronzeColor,
color: "#FBF8F3",
border: `1px solid ${bronzeColor}`,
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = bronzeDark;
e.currentTarget.style.borderColor = bronzeDark;
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = bronzeColor;
e.currentTarget.style.borderColor = bronzeColor;
}}
>
{primaryCta.label}
<ArrowRight className="h-4 w-4" />
</a>
<a
href={phoneCta.phoneHref}
className="inline-flex items-center gap-2.5 border px-6 py-4 text-xs font-medium uppercase tracking-[0.18em] transition-all"
style={{
background: "transparent",
color: "#FBF8F3",
borderColor: "rgba(246,242,236,0.4)",
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = "rgba(246,242,236,0.08)";
e.currentTarget.style.borderColor = "rgba(246,242,236,0.7)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = "transparent";
e.currentTarget.style.borderColor = "rgba(246,242,236,0.4)";
}}
>
<Phone className="h-4 w-4" />
{phoneCta.phoneFormatted}
</a>
</div>
{/* Trust pills */}
<div className="mt-10 flex flex-wrap gap-2.5">
{trustPills.map((p) => (
<span
key={p.label}
className="inline-flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs font-medium"
style={{
background: "rgba(255,255,255,0.06)",
border: "1px solid rgba(255,255,255,0.1)",
backdropFilter: "blur(10px)",
color: "#F6F2EC",
}}
>
<Check className="h-3.5 w-3.5" style={{ color: bronzeLight }} />
{p.label}
</span>
))}
</div>
</div>
{/* RIGHT: visual — masonry + floating cards */}
<div
className="relative w-full flex-shrink-0 lg:w-[28rem]"
style={{ maxWidth: "28rem" }}
>
{/* Masonry grid */}
<div
className="relative"
style={{
display: "grid",
gridTemplateColumns: "1fr 1fr",
gridTemplateRows: "200px 200px 200px",
gap: "10px",
width: "100%",
aspectRatio: "4 / 5",
}}
>
{masonryTiles.map((tile, i) => (
<a
key={i}
href="#"
className="group relative block overflow-hidden"
style={{
...positionToGrid[tile.position],
boxShadow: "0 14px 30px -12px rgba(0,0,0,0.5)",
}}
>
<img
src={tile.src}
alt={tile.alt}
className="h-full w-full transition-transform duration-500 group-hover:scale-105"
style={{ objectFit: "cover", filter: "saturate(0.95)" }}
loading={i < 2 ? "eager" : "lazy"}
decoding="async"
/>
<span
className="absolute right-3 top-3 z-[2] flex h-8 w-8 items-center justify-center rounded-full opacity-0 transition-opacity group-hover:opacity-100"
style={{
background: "rgba(255,255,255,0.95)",
color: bronzeDark,
}}
>
<Search className="h-3.5 w-3.5" strokeWidth={2.5} />
</span>
</a>
))}
</div>
{/* Floating cards — desktop only */}
<div className="hidden lg:block">
{/* Card 1: top-right */}
<div
className="absolute z-[5] rounded-[14px] bg-white px-4 py-3.5"
style={{
top: "-1rem",
right: "-1rem",
maxWidth: 220,
boxShadow: "0 14px 32px -10px rgba(10,9,8,0.35)",
}}
>
<h4
className="mb-1"
style={{
fontFamily: "'Playfair Display', serif",
fontWeight: 600,
fontSize: "0.95rem",
color: "#15120E",
}}
>
{floatCardOne.title}
</h4>
<FiveStars />
<p
className="m-0 mb-1"
style={{
fontSize: "0.72rem",
lineHeight: 1.5,
color: "#5F564B",
fontStyle: "italic",
}}
>
"{floatCardOne.quote}"
</p>
<p className="m-0" style={{ fontSize: "0.65rem", color: "#999", fontWeight: 500 }}>
— {floatCardOne.author}
</p>
</div>
{/* Card 2: mid-left pill */}
<div
className="absolute z-[5] flex items-center gap-2 rounded-[14px] bg-white px-4 py-2.5"
style={{
top: "30%",
left: "-2.5rem",
boxShadow: "0 14px 32px -10px rgba(10,9,8,0.35)",
}}
>
<Shield
className="h-5 w-5 flex-shrink-0"
style={{ color: "#7E5A34" }}
/>
<span className="flex flex-col leading-[1.15]">
<strong style={{ fontSize: "0.78rem", fontWeight: 600, color: "#15120E" }}>
{floatPillTitle}
</strong>
<small style={{ fontSize: "0.62rem", color: "#999", fontWeight: 500 }}>
{floatPillSub}
</small>
</span>
</div>
{/* Card 3: bottom-right */}
<div
className="absolute z-[5] rounded-[14px] bg-white px-4 py-3.5"
style={{
bottom: "1rem",
right: "-1.5rem",
maxWidth: 220,
boxShadow: "0 14px 32px -10px rgba(10,9,8,0.35)",
}}
>
<h4
className="mb-1"
style={{
fontFamily: "'Playfair Display', serif",
fontWeight: 600,
fontSize: "0.95rem",
color: "#15120E",
}}
>
{floatCardThree.title}
</h4>
<FiveStars />
<p
className="m-0 mb-1"
style={{
fontSize: "0.72rem",
lineHeight: 1.5,
color: "#5F564B",
fontStyle: "italic",
}}
>
"{floatCardThree.quote}"
</p>
<p className="m-0" style={{ fontSize: "0.65rem", color: "#999", fontWeight: 500 }}>
— {floatCardThree.author}
</p>
</div>
</div>
</div>
</div>
</div>
{/* Layered multi-wave divider */}
<div
className="absolute left-0 right-0 z-[3]"
style={{ bottom: -1, pointerEvents: "none", height: 140 }}
>
<svg
viewBox="0 0 1440 100"
preserveAspectRatio="none"
style={{ position: "absolute", left: 0, right: 0, bottom: 24, width: "100%", height: 130, opacity: 0.25, display: "block" }}
>
<path d="M0,100 L0,40 Q240,5 480,38 T960,38 T1440,30 L1440,100 Z" fill="#FBF8F3" />
</svg>
<svg
viewBox="0 0 1440 100"
preserveAspectRatio="none"
style={{ position: "absolute", left: 0, right: 0, bottom: 12, width: "100%", height: 120, opacity: 0.5, display: "block" }}
>
<path d="M0,100 L0,55 Q360,15 720,42 T1440,42 L1440,100 Z" fill="#FBF8F3" />
</svg>
<svg
viewBox="0 0 1440 100"
preserveAspectRatio="none"
style={{ position: "absolute", left: 0, right: 0, bottom: 0, width: "100%", height: 110, opacity: 1, display: "block" }}
>
<path d="M0,100 L0,40 Q360,8 720,40 T1440,40 L1440,100 Z" fill="#FBF8F3" />
</svg>
</div>
</section>
</>
);
}
function FiveStars() {
return (
<div className="mb-1.5 flex gap-px">
{[...Array(5)].map((_, i) => (
<svg key={i} viewBox="0 0 24 24" style={{ width: 10, height: 10, fill: "#F4B400" }}>
<polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" />
</svg>
))}
</div>
);
}Claude Code Instructions
CLI Install
npx innovations add cmillworks-heroWhere to use it
Use this for premium trades, custom builders, high-end craftsmen, luxury services — anywhere the brand IS the craftsmanship.
In Astro:
---
import CmillworksHero from '../components/innovations/heroes/cmillworks-hero';
---
<CmillworksHero />
In Next.js:
import CmillworksHero from '@/components/innovations/heroes/cmillworks-hero';
No client:* required — server-renderable.
CUSTOMIZATION:
<CmillworksHero
badgeLabel="Master Craftsmen Since 1986"
headlinePart1="Words"
italicHighlight="italic-bronze-word"
headlinePart2=" closing words."
description="..."
primaryCta={{ label: "Request a Quote", href: "/contact" }}
phoneCta={{ phoneFormatted: "555 · 123 · 4567", phoneHref: "tel:5551234567" }}
trustPills={[{ label: "Year 1" }, { label: "Year 2" }, { label: "Year 3" }]}
masonryTiles={[
{ src: "/your-1.jpg", alt: "...", position: "tall-left" },
{ src: "/your-2.jpg", alt: "...", position: "top-right" },
{ src: "/your-3.jpg", alt: "...", position: "tall-right" },
{ src: "/your-4.jpg", alt: "...", position: "bottom-left" },
]}
bgImageSrc="/your-bg.webp"
bronzeColor="#A17647"
/>
MASONRY positions: 4 tiles in a 2x3 grid. "tall-left" + "top-right" + "tall-right" + "bottom-left" creates the asymmetric staircase pattern. Don't reorder — the named positions are coupled to the grid CSS.
FLOATING CARDS hide on mobile (<lg). Three positions are hardcoded (top-right of visual, mid-left, bottom-right). Edit the JSX to reposition.
PALETTE: walnut + bronze + cream. Hard-coded with overrides exposed as props (bronzeColor, bronzeLight, bronzeDark, blackColor).
FONT: Playfair Display (serif headline) + Jost (sans body) shipped via baked-in Google Fonts <link>.
NOTE: default masonry tiles use cmillworks.com CDN URLs — they'll render against any deploy. Replace with your own when shipping in a real client project.