Skip to content

Prototype alt redesign: FAQ debunks, 3-tier pricing, engagement path #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
ZylkaGreger wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Prototype alt redesign: FAQ debunks, 3-tier pricing, engagement path #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
189 changes: 189 additions & 0 deletions src/components/EngagementPath.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
import { ArrowRight, Compass, Wrench, TrendingUp } from "lucide-react";
import { useScrollReveal } from "@/hooks/useScrollReveal";

type Tier = {
id: string;
label: string;
icon: typeof Compass;
duration: string;
headline: string;
description: string;
highlights: string[];
price: string;
cta: { label: string; href: string };
recommended?: boolean;
};

const TIERS: Tier[] = [
{
id: "assess",
label: "Assess",
icon: Compass,
duration: "Half-day → 1 week",
headline: "See where you stand today.",
description:
"Start with your real data, not generic playbooks. A focused diagnostic that surfaces the constraints in your flow and the one or two things worth changing first.",
highlights: [
"Flow Health Check — fast report on team or portfolio health",
"Flow Clarity Assessment — deep analysis with prioritised recommendations",
"Built on your historical data, not interviews and opinions",
],
price: "From CHF 200",
cta: { label: "Get your assessment", href: "mailto:contact@letpeople.work?subject=Flow%20Health%20Check" },
},
{
id: "implement",
label: "Implement",
icon: Wrench,
duration: "1–2 weeks",
headline: "Run the pilot. Get the first forecast.",
description:
"We work with your team on your real data — set up Lighthouse, configure flow metrics, run probabilistic forecasts your team can defend. You walk away with a working pilot, not slides.",
highlights: [
"Bring-Your-Own-Data Workshop with your actual delivery history",
"Lighthouse configured to your workflow and tracker",
"Your team knows how to maintain and extend it",
],
price: "CHF 3,500",
cta: { label: "Plan your pilot", href: "mailto:contact@letpeople.work?subject=BYOD%20Workshop%20%2B%20Lighthouse%20Pilot" },
recommended: true,
},
{
id: "transform",
label: "Transform",
icon: TrendingUp,
duration: "1 quarter +",
headline: "Roll it out. Make it stick.",
description:
"Assessment plus implementation plus the year of Lighthouse Premium it takes to embed the change. We pair with you across the quarter — from first forecast to predictable cadence.",
highlights: [
"Flow Clarity Assessment + BYOD Workshop bundled",
"Annual Lighthouse Premium license included",
"Designed for portfolios — multiple teams, one coherent view",
],
price: "From CHF 6,000",
cta: { label: "Design your rollout", href: "mailto:contact@letpeople.work?subject=Flow%20Transformation%20Package" },
},
];

function TierCard({ tier, index }: { tier: Tier; index: number }) {
const { ref, revealed } = useScrollReveal<HTMLDivElement>();
const Icon = tier.icon;

return (
<div
ref={ref}
style={{ transitionDelay: revealed ? `${index * 90}ms` : "0ms" }}
className={`
relative flex flex-col rounded-3xl border bg-white p-8 md:p-10
transition-all duration-700 ease-out
${revealed ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"}
${tier.recommended
? "border-primary/40 shadow-medium md:scale-[1.02] md:-translate-y-1"
: "border-border hover:border-primary/20 hover:shadow-soft"
}
`}
>
{tier.recommended && (
<span className="absolute -top-3 right-6 text-[11px] font-bold uppercase tracking-[0.15em] bg-primary text-primary-foreground px-3 py-1 rounded-full shadow-soft">
Recommended
</span>
)}

<div className="flex items-center gap-3 mb-6">
<div className="w-11 h-11 rounded-2xl bg-accent flex items-center justify-center">
<Icon className="w-5 h-5 text-primary" />
</div>
<div>
<div className="text-xs font-semibold uppercase tracking-[0.15em] text-primary">
{tier.label}
</div>
<div className="text-xs text-muted-foreground mt-0.5">
{tier.duration}
</div>
</div>
</div>

<h3 className="text-2xl md:text-3xl font-bold text-foreground tracking-tight leading-tight mb-3">
{tier.headline}
</h3>

<p className="text-base text-muted-foreground leading-relaxed mb-6">
{tier.description}
</p>

<ul className="space-y-2.5 mb-8 flex-1">
{tier.highlights.map((h, i) => (
<li key={i} className="flex items-start gap-2 text-[15px] text-foreground/80 leading-relaxed">
<span className="text-primary mt-1.5 shrink-0">·</span>
<span>{h}</span>
</li>
))}
</ul>

<div className="border-t border-border pt-6 flex flex-col gap-4">
<div className="text-3xl md:text-4xl font-semibold text-foreground tracking-tight">
{tier.price}
</div>
<a
href={tier.cta.href}
className={`
inline-flex items-center justify-center gap-2 px-6 py-3 rounded-full font-semibold text-sm
transition-all duration-200 no-underline group
${tier.recommended
? "bg-primary text-primary-foreground hover:bg-primary-hover shadow-soft hover:shadow-medium hover:-translate-y-0.5"
: "bg-foreground/5 text-foreground hover:bg-foreground/10"
}
`}
>
{tier.cta.label}
<ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
</a>
</div>
</div>
);
}

export default function EngagementPath() {
const { ref, revealed } = useScrollReveal<HTMLDivElement>();

return (
<section id="engagement-path" className="bg-gradient-subtle py-24 md:py-32">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div
ref={ref}
className={`text-center max-w-3xl mx-auto mb-16 md:mb-20 transition-all duration-700 ease-out ${
revealed ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
}`}
>
<span className="text-xs font-semibold uppercase tracking-[0.18em] text-primary mb-5 block">
How we work with you
</span>
{/* TODO(peter): replace headline with final wording — 3-5 candidates to draft */}
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground tracking-tight leading-[1.05]">
Three ways to work with us.
<br />
<span className="text-primary font-light">All grounded in your real flow.</span>
</h2>
<p className="text-lg md:text-xl text-muted-foreground font-light leading-relaxed mt-6">
From a half-day check-in to a quarter-long transformation — every path starts with your data, not our slides.
</p>
</div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8 items-stretch">
{TIERS.map((tier, i) => (
<TierCard key={tier.id} tier={tier} index={i} />
))}
</div>

<p className="text-center text-sm text-muted-foreground mt-12 md:mt-16">
Want the full catalogue of certifications, workshops, and consulting?{" "}
<a href="#workshops" className="text-primary underline underline-offset-4 hover:text-primary-hover">
See every offering below
</a>
.
</p>
</div>
</section>
);
}
165 changes: 13 additions & 152 deletions src/components/ExpertiseAndServices.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { useState } from "react";
import { ChevronDown, MessageSquare, GraduationCap, Zap, Search as SearchIcon, CheckCircle2 } from "lucide-react";
import { ChevronDown, MessageSquare, GraduationCap, Zap, Search as SearchIcon } from "lucide-react";
import PeterImage from '../assets/Peter.png';
import BenjiImage from '../assets/Benji.png';
import EngagementPath from './EngagementPath';

// ─── DATA ────────────────────────────────────────────────────────────────────

Expand Down Expand Up @@ -141,32 +142,6 @@ const CATEGORIES: Record<string, Category> = {
},
};

const PACKAGE = {
name: "Complete Flow Transformation Package",
subtitle: "End-to-End: Assessment + Implementation + Sustaining Capability",
description: "The complete journey from understanding your delivery system's current state to implementing a working solution that provides ongoing visibility. This package combines diagnostic assessment with hands-on implementation and sustained capability through Lighthouse Premium.",
savings: "You get the strategic insight of the Flow Clarity Assessment combined with the practical implementation of the BYOD Workshop, plus the ongoing capability to maintain visibility into your delivery system. This is 25% less than purchasing separately, the most comprehensive and cost-effective way to transform your delivery predictability.",
scope: [
"Two-phase engagement: Assessment followed by Implementation",
"Remote or on-site delivery options",
"Analysis of your historical data (3–6 months)",
"Private 1-day implementation workshop with your team",
"Uses your actual business data and workflows",
],
deliverables: [
{ title: "Complete diagnostic report", detail: "Flow constraints, WIP patterns, aging trends, and predictability indicators from your historical data" },
{ title: "Lighthouse Premium configured to your workflows", detail: "Custom configuration matching your team structures and processes" },
{ title: "Your historical data integrated and validated", detail: "Real data from your systems, cleaned and ready for ongoing analysis" },
{ title: "Immediate visibility into flow metrics", detail: "Answer the questions you're constantly being asked with live data" },
{ title: "A production-ready system your teams can use immediately", detail: "Walk away with both understanding and capability to sustain it" },
{ title: "60-minute diagnostic debrief + full-day implementation workshop", detail: "Comprehensive engagement from assessment to working solution" },
],
priceOnsite: "CHF 7,000",
priceRemote: "CHF 6,000",
includes: "Flow Clarity Assessment + BYOD Workshop + 1 Annual Lighthouse Premium License (Save 25%)",
};


// ─── COMPONENTS ──────────────────────────────────────────────────────────────

function CategoryAccordion({
Expand Down Expand Up @@ -302,29 +277,20 @@ export default function ExpertiseAndServices() {

return (
<section id="services" className="bg-background">
{/* ── Section Header ── */}
<div className="text-center max-w-4xl mx-auto px-4 pt-20 pb-8 md:pt-28 md:pb-10">
<span className="text-xs font-semibold uppercase tracking-[0.15em] text-primary mb-5 block">
How we help
</span>
<h2 className="text-3xl md:text-4xl lg:text-[44px] font-bold leading-tight tracking-tight">
<span className="text-foreground">Your team shouldn't have to guess.</span>
<br />
<span className="text-primary">We replace gut feel with flow data and help you identify improvements you can actually measure.</span>
</h2>
<p className="text-base md:text-lg text-muted-foreground mt-5 leading-relaxed max-w-xl mx-auto">
We bring both the tool and the expertise to make it work — from official certifications to deep diagnostic assessments.
</p>
</div>
{/* ── Quick-start: 3-tier engagement path ── */}
<EngagementPath />

{/* ── Full Catalogue ── */}
<div id="workshops" className="max-w-5xl mx-auto px-4 py-10 md:py-14">
{/* ── Full Catalogue (Depth view) ── */}
<div id="workshops" className="max-w-5xl mx-auto px-4 pt-20 md:pt-28 pb-10 md:pb-14">
<div className="text-center mb-10 md:mb-14">
<h3 className="text-2xl md:text-3xl font-bold text-foreground tracking-tight">
Where to Start
<span className="text-xs font-semibold uppercase tracking-[0.18em] text-primary mb-4 block">
The full catalogue
</span>
<h3 className="text-3xl md:text-4xl lg:text-5xl font-bold text-foreground tracking-tight">
Workshops, certifications, consulting.
</h3>
<p className="text-sm md:text-base text-muted-foreground mt-3 max-w-lg mx-auto">
Every engagement delivered by two practitioners, two perspectives, one coherent outcome.
<p className="text-base md:text-lg text-muted-foreground mt-4 max-w-xl mx-auto font-light leading-relaxed">
Every engagement delivered by two practitioners. Two perspectives, one coherent outcome.
</p>
</div>

Expand All @@ -350,111 +316,6 @@ export default function ExpertiseAndServices() {
</div>
</div>

{/* ── Divider ── */}
<div className="max-w-5xl mx-auto px-4">
<div className="h-px bg-gradient-to-r from-transparent via-border to-transparent" />
</div>

{/* ── Featured Package ── */}
<div className="max-w-5xl mx-auto px-4 py-16 md:py-20">
<div className="rounded-2xl border-2 border-primary/20 bg-gradient-to-br from-white to-accent/30 p-6 md:p-10 lg:p-12 relative overflow-hidden">
{/* Subtle glow */}
<div className="absolute -top-20 -right-20 w-60 h-60 bg-primary/5 rounded-full blur-3xl pointer-events-none" />

<div className="relative">
{/* Badges */}
<div className="flex items-center gap-2 mb-4">
<span className="text-[11px] font-bold uppercase tracking-wider bg-primary text-primary-foreground px-3 py-1 rounded-full">
Best Value
</span>
<span className="text-[11px] font-semibold uppercase tracking-wider bg-accent text-primary px-3 py-1 rounded-full">
Save 25%
</span>
<span className="text-[11px] font-medium uppercase tracking-wider bg-muted text-muted-foreground px-3 py-1 rounded-full">
Popular
</span>
</div>

<h3 className="text-2xl md:text-3xl font-bold text-foreground tracking-tight mb-1">
{PACKAGE.name}
</h3>
<div className="text-sm md:text-base font-medium text-primary mb-5">
{PACKAGE.subtitle}
</div>

<p className="text-sm md:text-[15px] text-muted-foreground leading-relaxed max-w-2xl mb-4">
Six months from now, your team walks into any steering committee meeting with a forecast range built from real data, not gut feeling. And you'll know which parts of your delivery system to fix to make the next one even better. This package is how you get there.
</p>
<p className="text-sm md:text-[15px] text-muted-foreground leading-relaxed max-w-2xl mb-8">
{PACKAGE.savings}
</p>

{/* Scope & Deliverables */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-10">
<div>
<h4 className="text-xs font-semibold uppercase tracking-wider text-primary mb-4">
Scope
</h4>
<div className="space-y-2.5">
{PACKAGE.scope.map((item, i) => (
<div key={i} className="flex items-start gap-2.5 text-sm text-muted-foreground">
<CheckCircle2 className="w-4 h-4 text-primary shrink-0 mt-0.5" />
<span>{item}</span>
</div>
))}
</div>
</div>

<div>
<h4 className="text-xs font-semibold uppercase tracking-wider text-primary mb-4">
What You Receive
</h4>
<div className="space-y-3">
{PACKAGE.deliverables.map((item, i) => (
<div key={i} className="flex items-start gap-2.5">
<CheckCircle2 className="w-4 h-4 text-primary shrink-0 mt-0.5" />
<div>
<div className="text-sm font-semibold text-foreground">{item.title}</div>
<div className="text-[13px] text-muted-foreground">{item.detail}</div>
</div>
</div>
))}
</div>
</div>
</div>

{/* Pricing + CTA */}
<div className="border-t border-border pt-8">
<div className="text-xs font-semibold uppercase tracking-wider text-primary mb-4">
Investment
</div>
<div className="flex flex-col sm:flex-row items-start sm:items-end justify-between gap-6">
<div className="flex items-end gap-6 md:gap-10">
<div>
<div className="text-xs text-muted-foreground uppercase tracking-wider mb-1">On-Site</div>
<div className="text-3xl md:text-4xl font-bold text-foreground">{PACKAGE.priceOnsite}</div>
</div>
<div>
<div className="text-xs text-muted-foreground uppercase tracking-wider mb-1">Remote</div>
<div className="text-3xl md:text-4xl font-bold text-foreground">{PACKAGE.priceRemote}</div>
</div>
</div>

<a
href={`mailto:contact@letpeople.work?subject=Request for ${encodeURIComponent(PACKAGE.name)}`}
className="bg-primary hover:bg-primary-hover text-primary-foreground font-semibold text-sm md:text-base px-7 py-3.5 rounded-lg shadow-soft hover:shadow-medium transition-all duration-200 hover:-translate-y-0.5 cursor-pointer whitespace-nowrap no-underline"
>
Schedule Workshop →
</a>
</div>
<div className="text-[13px] text-muted-foreground mt-3">
{PACKAGE.includes}
</div>
</div>
</div>
</div>
</div>

{/* ── Custom / Tailored ── */}
<div id="custom-events" className="max-w-5xl mx-auto px-4 pb-20 md:pb-28">
<div className="rounded-xl border border-border bg-white p-8 md:p-12 text-center">
Expand Down
Loading