Build dylanmazzei.com redesign as a static multi-page site
Eight pages (home, about, portfolio, consulting, marketing, business setup, contact, press) with copy taken verbatim from the content documents, a shared layout, and a zero-dependency Node build ready for Vercel. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Veras
@@ -0,0 +1,224 @@
|
||||
import { icon, eyebrow, btn, textLink, paras, faq, SITE } from '../layout.mjs';
|
||||
|
||||
const steps = [
|
||||
['Business Diagnostic', ['We go inside the business to examine operations, financials, technology, marketing, and the places where growth is creating friction.', 'The goal is simple: find what deserves attention first.']],
|
||||
['Roadmap Delivery', ['You receive a documented, prioritised roadmap built around what we found.', 'What needs to change. What can wait. What your team can handle. And where outside execution may actually help.']],
|
||||
['Execution Sprint or Advisory', ['If it makes sense to keep working together, we move into a focused 90-day sprint or an ongoing advisory engagement.', 'If your team can take it from there, they do.']],
|
||||
];
|
||||
|
||||
const plans = [
|
||||
{
|
||||
name: 'Business Diagnostic', h: 'Know What You’re Solving.', p: 'The mandatory starting point for every engagement.', fee: 'Fixed fee, quoted at booking',
|
||||
items: ['Comprehensive operational audit', 'Marketing and visibility analysis', 'Cost structure review', 'Prioritised strategic roadmap', '45-minute strategy debrief'],
|
||||
cta: 'BOOK YOUR DIAGNOSTIC', featured: true,
|
||||
},
|
||||
{
|
||||
name: '90-Day Sprint', h: 'Turn the Roadmap Into Movement.', p: 'Hands-on execution around a defined problem, with a clear scope and enough time to make meaningful progress.', fee: 'Fixed scope, fixed fee',
|
||||
items: ['Everything in the Diagnostic', 'Execution by Dylan’s specialist teams', 'System setup and automation', 'Vendor and talent vetting', 'Weekly progress check-ins'],
|
||||
cta: 'APPLY FOR A 90-DAY SPRINT',
|
||||
},
|
||||
{
|
||||
name: 'Advisory Retainer', h: 'Keep an Operator in the Room.', p: 'Ongoing strategic involvement for founders and internal teams who need another experienced perspective as the business moves.', fee: 'Monthly engagement',
|
||||
items: ['Monthly strategic roadmapping', 'Bi-weekly advisory calls', 'Direct access for urgent blocks', 'Quarterly P&L reviews', 'Priority access to Dylan’s operating teams'],
|
||||
cta: 'REQUEST ADVISORY',
|
||||
},
|
||||
];
|
||||
|
||||
const services = [
|
||||
{ id: 'marketing', icon: 'search', name: 'Marketing & AI Search', h: 'Get Found Where Attention Is Moving.', p: ['SEO, AI search visibility, paid media, and funnel strategy grounded in what people actually discover, click, and choose.', 'Marketing has been part of my operating world for years, and it remains one of the areas where technology keeps changing the answer.'], cta: 'EXPLORE MARKETING & AI SEARCH', href: '/consulting/marketing/' },
|
||||
{ id: 'business-setup', icon: 'building', name: 'Business Setup', h: 'Start With Fewer Expensive Mistakes.', p: ['Entity and state selection, licensing, banking architecture, and the practical decisions that turn an idea into an operating business.', 'I’ve started enough companies to know that early decisions have a habit of following you. I unpack more of that thinking in The Business Launch Playbook.'], cta: 'EXPLORE BUSINESS SETUP', href: '/consulting/business-setup/' },
|
||||
{ id: 'optimization', icon: 'gauge', name: 'Business Optimization', h: 'Find What Growth Made Messy.', p: ['Growth creates opportunity.', 'It also creates workarounds, extra steps, unnecessary costs, unclear ownership, and processes nobody remembers choosing.', 'The job is to find what the business has outgrown and make it work for where the company is going next.'], cta: 'EXPLORE BUSINESS OPTIMIZATION', href: SITE.pending },
|
||||
{ id: 'supply-chain', icon: 'truck', name: 'Supply Chain', h: 'Know What Happens Before It Reaches the Customer.', p: ['Sourcing, supplier vetting, logistics planning, and landed-cost analysis for businesses where products have to move through the real world.', 'My work across consumer products and e-commerce has taught me that what happens before the sale can determine whether the sale makes sense.'], cta: 'EXPLORE SUPPLY CHAIN', href: SITE.pending },
|
||||
{ id: 'cybersecurity', icon: 'shield', name: 'Cybersecurity', h: 'Find the Exposure Before Someone Else Does.', p: ['Security posture assessments, vulnerability reviews, and compliance readiness grounded in how the business actually operates.', 'The goal isn’t security theatre.', 'It’s understanding where the business is exposed and what deserves attention first.'], cta: 'EXPLORE CYBERSECURITY', href: SITE.pending },
|
||||
{ id: 'education', icon: 'edu', name: 'Education', h: 'Make the Strategy Survive the Classroom.', p: ['EdTech product strategy, institutional technology adoption, and market-entry thinking shaped around the realities of schools, educators, and implementation.', 'A product can make perfect sense in a meeting and still fail the people expected to use it.', 'The classroom gets the final vote.'], cta: 'EXPLORE EDUCATION CONSULTING', href: SITE.pending },
|
||||
];
|
||||
|
||||
const faqs = [
|
||||
['What services does Dylan Mazzei offer?', ['My consulting work spans business diagnostics, 90-day execution sprints, ongoing advisory, fractional leadership, marketing and AI search, business setup and optimisation, supply chain, cybersecurity, and education strategy.', 'Every engagement starts by understanding the business before deciding which, if any, of those services make sense.']],
|
||||
['How do I book a consultation?', ['Start by booking the Business Diagnostic.', 'We’ll review the business, identify the areas that deserve attention, and use those findings to determine the most useful next step.']],
|
||||
['What is the pricing structure?', ['The Business Diagnostic is a fixed fee quoted at booking.', '90-day sprints are fixed-scope, fixed-fee engagements. Advisory and fractional leadership are structured around the level of ongoing involvement required.']],
|
||||
['What happens after the diagnostic?', ['You receive a prioritised roadmap outlining what needs attention, what should happen first, and where execution may be needed.', 'You can take that roadmap to your own team or continue working with mine.']],
|
||||
['Do you work with businesses outside the US?', ['Yes. I operate across the US and Dubai and can work with businesses in other markets when the engagement is a good fit.']],
|
||||
['Do I have to continue after the diagnostic?', ['No. The diagnostic is designed to be useful on its own.', 'If your team can execute the roadmap internally, you leave with a clearer direction and a place to start.']],
|
||||
];
|
||||
|
||||
export default {
|
||||
path: '/consulting/',
|
||||
title: 'Business Consulting for Founders | Dylan Mazzei',
|
||||
description: 'Work with Dylan Mazzei through diagnostic-first business consulting, execution sprints, advisory, and fractional leadership built for founders.',
|
||||
schema: [
|
||||
{ '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faqs.map(([q, a]) => ({ '@type': 'Question', name: q, acceptedAnswer: { '@type': 'Answer', text: a.join(' ') } })) },
|
||||
],
|
||||
body: `
|
||||
<section class="page-hero" aria-labelledby="c-hero">
|
||||
<div class="wrap page-hero-grid">
|
||||
<div class="stack anim">
|
||||
${eyebrow('OPERATOR-LED CONSULTING')}
|
||||
<h1 id="c-hero" class="h-display-lg">Find the Real Problem. Then Fix the Right One.</h1>
|
||||
<p class="lead">Most founders know when something in the business isn’t working. The harder part is knowing why.</p>
|
||||
<div class="prose">
|
||||
<p>I start there. Before recommending a strategy, service, or solution, I look inside the business, find what is actually creating friction, and put the priorities in order.</p>
|
||||
<p>It’s the same approach I use across the companies I operate today. Understand what is happening first. Decide what deserves attention second.</p>
|
||||
<p class="statement">Then move.</p>
|
||||
</div>
|
||||
<div class="btn-row">${btn('BOOK YOUR DIAGNOSTIC', '/contact/')}</div>
|
||||
</div>
|
||||
<div class="panel panel-dark anim" aria-hidden="true">
|
||||
<div class="panel-bar"><span class="lights"><i></i><i></i><i></i></span><span class="file">${icon('brace')}diagnostic.log</span></div>
|
||||
<pre class="code-pre"><span class="ln"><span class="p">$</span> <span class="k">look</span> inside the business</span><span class="ln"><span class="s">✓</span> operations</span><span class="ln"><span class="s">✓</span> financials</span><span class="ln"><span class="s">✓</span> technology</span><span class="ln"><span class="s">✓</span> marketing</span><span class="ln"><span class="p">$</span> <span class="k">find</span> friction</span><span class="ln"><span class="n">→</span> what deserves attention first</span><span class="ln"><span class="p">$</span> <span class="k">put</span> the priorities in order</span><span class="ln"><span class="p">$</span> <span class="k">move</span><span class="cursor"></span></span></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="how">
|
||||
<div class="wrap">
|
||||
<div class="sec-head reveal">
|
||||
<div class="stack-sm">${eyebrow('HOW IT WORKS')}<h2 id="how" class="h-display">Diagnosis Before Prescription.</h2></div>
|
||||
<div class="prose"><p>The loudest problem isn’t always the one holding the business back.</p><p class="body-ink">So we find the cause before we start fixing the symptoms.</p></div>
|
||||
</div>
|
||||
<div class="process reveal">
|
||||
${steps.map(([h, p], i) => `<article class="process-step"><span class="num">${i + 1}</span><h3 class="h-md">${h}</h3><div class="prose">${paras(p)}</div></article>`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="engagements" aria-labelledby="eng">
|
||||
<div class="wrap">
|
||||
<div class="sec-head reveal">
|
||||
<div class="stack-sm">${eyebrow('ENGAGEMENT OPTIONS')}<h2 id="eng" class="h-display">Different Problems Need Different Levels of Involvement.</h2></div>
|
||||
<div class="prose"><p class="body-ink">Start with the diagnostic.</p><p>What comes after depends on what the business actually needs.</p></div>
|
||||
</div>
|
||||
<div class="plans reveal">
|
||||
${plans
|
||||
.map(
|
||||
(pl) => `<article class="plan${pl.featured ? ' plan-featured' : ''}">
|
||||
<div class="plan-name"><span>${pl.name}</span>${pl.featured ? `<span class="dot"></span>` : ''}</div>
|
||||
<h3>${pl.h}</h3>
|
||||
<p>${pl.p}</p>
|
||||
<div class="fee">${pl.fee}</div>
|
||||
<ul>${pl.items.map((it) => `<li>${icon('check')}${it}</li>`).join('')}</ul>
|
||||
${btn(pl.cta, '/contact/', pl.featured ? 'primary' : 'ghost')}
|
||||
</article>`
|
||||
)
|
||||
.join('')}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section band" aria-labelledby="frac">
|
||||
<div class="wrap">
|
||||
<div class="showcase" style="background:transparent;padding:0">
|
||||
<div class="stack reveal">
|
||||
${eyebrow('FRACTIONAL LEADERSHIP')}
|
||||
<h2 id="frac" class="h-display">When the Business Needs an Owner, Not Another Recommendation.</h2>
|
||||
<div class="prose">
|
||||
<p>Some problems don’t need another project.</p>
|
||||
<p style="color:var(--porcelain)">They need someone accountable for the function.</p>
|
||||
<p>I can step into the business as a fractional CMO, COO, CISO, or Chief AI Officer, bringing the same operator mindset that shapes my current ventures into a defined leadership role.</p>
|
||||
</div>
|
||||
<p class="statement">Strategy gets more useful when someone owns what happens next.</p>
|
||||
<div class="btn-row">${btn('EXPLORE FRACTIONAL ROLES', SITE.pending, 'light')}</div>
|
||||
</div>
|
||||
<div class="roles reveal" aria-hidden="true">
|
||||
<div class="role"><span class="index">FRACTIONAL</span><b>CMO</b></div>
|
||||
<div class="role"><span class="index">FRACTIONAL</span><b>COO</b></div>
|
||||
<div class="role"><span class="index">FRACTIONAL</span><b>CISO</b></div>
|
||||
<div class="role"><span class="index">FRACTIONAL</span><b>Chief AI Officer</b></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="services" aria-labelledby="svc">
|
||||
<div class="wrap">
|
||||
<div class="sec-head reveal">
|
||||
<div class="stack-sm">${eyebrow('SERVICE LINES')}<h2 id="svc" class="h-display">Where Operating Experience Becomes Useful.</h2></div>
|
||||
<div class="prose"><p>I stay close to areas where my teams and I are already doing the work.</p><p>Not because every business needs the same solution, but because experience is more useful when it comes from solving real versions of the problem.</p></div>
|
||||
</div>
|
||||
<div class="tabs reveal" data-tabs>
|
||||
<div class="tab-list" role="tablist" aria-label="Service lines">
|
||||
${services.map((s, i) => `<button class="tab-btn" role="tab" id="tab-${s.id}" aria-controls="${s.id}" aria-selected="${i === 0}"${i ? ' tabindex="-1"' : ''} type="button"><span class="ic">${icon(s.icon)}</span><span>${s.name}</span>${icon('arrow', 'arr')}</button>`).join('')}
|
||||
</div>
|
||||
<div class="tab-panels">
|
||||
${services
|
||||
.map(
|
||||
(s) => `<article class="tab-panel" role="tabpanel" id="${s.id}" aria-labelledby="tab-${s.id}">
|
||||
<span class="tp-title">${s.name}</span>
|
||||
<h3 class="h-display">${s.h}</h3>
|
||||
<div class="prose">${paras(s.p)}</div>
|
||||
<div class="btn-row">${btn(s.cta, s.href)}</div>
|
||||
</article>`
|
||||
)
|
||||
.join('')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="why">
|
||||
<div class="wrap">
|
||||
<div class="sec-head reveal">
|
||||
<div class="stack-sm">${eyebrow('WHY DYLAN')}<h2 id="why" class="h-display">I’ve Been on the Other Side of the Invoice.</h2></div>
|
||||
<div class="prose">
|
||||
<p>I’ve spent more than eight years operating businesses across different industries.</p>
|
||||
<p>Along the way, I’ve hired consultants, agencies, specialists, vendors, and teams. I’ve made investments that worked and others that looked considerably better in the proposal.</p>
|
||||
<p class="body-ink">I’ve also taken four companies through successful exits.</p>
|
||||
<p>That changes how I look at someone else’s time and money.</p>
|
||||
<p>I know the difference between a recommendation that sounds impressive and one that survives contact with the actual business.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="principles reveal">
|
||||
<article class="principle"><span class="index">01</span><h3 class="h-md">Understand Before Recommending</h3><div class="prose"><p>I don’t need to arrive with the answer.</p><p>I need to ask enough of the right questions to find it.</p></div></article>
|
||||
<article class="principle"><span class="index">02</span><h3 class="h-md">Make the Tradeoffs Visible</h3><div class="prose"><p>Every meaningful decision costs something.</p><p class="ink">Money. Time. Focus. Speed. Flexibility.</p><p>A useful strategy tells you what you’re choosing and what you’re giving up.</p></div></article>
|
||||
<article class="principle"><span class="index">03</span><h3 class="h-md">Stay for the Result</h3><div class="prose"><p>A strategy deck is not the finish line.</p><p>If we move into execution, I care about what changed because we did.</p></div></article>
|
||||
</div>
|
||||
<div class="sec-foot reveal" style="justify-content:flex-end;margin-top:40px">${textLink('GET TO KNOW DYLAN', '/about/')}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="behind">
|
||||
<div class="wrap">
|
||||
<div class="showcase reveal">
|
||||
<div class="stack">
|
||||
${eyebrow('THE OPERATOR BEHIND THE WORK')}
|
||||
<h2 id="behind" class="h-display">The Consulting Came After the Companies.</h2>
|
||||
<div class="prose">
|
||||
<p>I didn’t start in consulting and eventually decide to operate businesses.</p>
|
||||
<p class="body-ink">It happened the other way around.</p>
|
||||
<p>Consulting grew out of the decisions, mistakes, patterns, and results of running companies across different industries.</p>
|
||||
<p>You can read the full story or explore the businesses and exits that shaped it.</p>
|
||||
</div>
|
||||
<div class="btn-row">${btn('EXPLORE DYLAN’S VENTURES', '/portfolio/')}</div>
|
||||
</div>
|
||||
<div class="visual portrait">
|
||||
<img src="/assets/dylan-portrait.jpg" alt="Dylan Mazzei" width="900" height="900" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="faq-h">
|
||||
<div class="wrap faq-layout">
|
||||
<div class="stack-sm sticky reveal">${eyebrow('FREQUENTLY ASKED QUESTIONS')}<h2 id="faq-h" class="h-display">Questions Founders Usually Ask Before We Start.</h2></div>
|
||||
<div class="reveal">${faq(faqs)}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="clarity">
|
||||
<div class="wrap">
|
||||
<div class="closing closing-dark reveal">
|
||||
<div class="closing-inner">
|
||||
${eyebrow('START WITH CLARITY')}
|
||||
<h2 id="clarity" class="h-display-lg">Stop Spending Money on the Wrong Problem.</h2>
|
||||
<div class="prose">
|
||||
<p>You don’t need to know exactly what is wrong before we talk.</p>
|
||||
<p>Bring me the bottleneck, the stalled growth, the messy operation, or simply the feeling that the business should be working better than it is.</p>
|
||||
<p style="color:var(--porcelain)">We’ll figure out what deserves your attention before you spend more time or money trying to fix it.</p>
|
||||
</div>
|
||||
<div class="btn-row">${btn('BOOK YOUR DIAGNOSTIC', '/contact/')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
`,
|
||||
};
|
||||
Reference in New Issue
Block a user