mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 1 Wiki Activity

feat: care offer for websites, with its price and its limits

Browse Source 
What happens after a website is live was one vague sentence about a monthly
fee to be agreed. It is now one clear offer in the website case and in the
questions: 89 EUR per month, cancel monthly, the site runs on servers in
Germany, small changes by email are included, no editing system and no login.
The limits are said as plainly as what is included: the first three months
are part of the project price, anything bigger gets a price first, replies
within two working days, no on-call, and the client can leave with everything.

The decision and the parts that are not on the website (the larger variant,
CMS as an exception, how the sites are served) are in the concept.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
mmintel
2026-10-05 12:21:46 +02:00
co-authored by Claude Opus 5.5
parent 7a71296e6d
commit af66f61c26
6 changed files with 129 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/home/PathPicker.tsx
+48 -1
View File
@@ -153,7 +153,7 @@ export const PathPicker: React.FC<{
pricing: "offer" | "estimate";
}> = ({ ids, pricing }) => {
const { services } = useContent();
const { estimate } = services;
const { estimate, care } = services;
const paths = ids.flatMap((id) =>
services.paths.filter((path) => path.id === id),
);
@@ -251,6 +251,53 @@ export const PathPicker: React.FC<{
<PathStory path={path} active={selected} />
</div>
{pricing === "offer" && path.id === "website" && (
<div className="mt-12 rounded-3xl border border-slate-200 p-6 md:mt-16 md:p-10">
<p className={`${MONO} m-0`}>{care.label}</p>
<div className="mt-6 grid grid-cols-1 gap-10 md:grid-cols-12 md:gap-12">
<div className="md:col-span-7">
<p className="m-0 font-sans text-2xl font-bold leading-tight tracking-tight text-slate-900 md:text-4xl">
{care.title}
</p>
<p className="m-0 mt-4 max-w-2xl font-sans text-base leading-relaxed text-slate-500 md:text-lg">
{care.text}
</p>
</div>
<div className="md:col-span-5">
<p className="m-0 font-sans text-base text-slate-500 md:text-lg">
{care.price.label}
</p>
<p className="m-0 mt-2 font-sans text-3xl font-black tracking-tighter text-slate-900 md:text-5xl">
{care.price.amount}
</p>
<p className={`${MONO} m-0 mt-2`}>{care.price.note}</p>
</div>
</div>
<div className="mt-10 grid grid-cols-1 gap-10 border-t border-slate-200 pt-8 md:grid-cols-2 md:gap-12">
{[
{ title: care.includedLabel, items: care.included },
{ title: care.termsLabel, items: care.terms },
].map((group) => (
<div key={group.title}>
<p className="m-0 font-sans text-lg font-bold tracking-tight text-slate-900 md:text-xl">
{group.title}
</p>
<ul className="m-0 mt-3 list-none p-0">
{group.items.map((item) => (
<li
key={item}
className="border-b border-slate-100 py-3 font-sans text-base leading-relaxed text-slate-600 md:text-lg"
>
{item}
</li>
))}
</ul>
</div>
))}
</div>
</div>
)}
{pricing === "offer" ? (
<div className="mt-12 flex flex-col gap-8 rounded-3xl bg-slate-50 p-6 md:mt-16 md:flex-row md:items-center md:justify-between md:gap-12 md:p-10">
<div className="max-w-2xl">