feat: the homepage speaks to people who commission a result
Owner: the homepage is for people who need a website or process automation
and have no app of their own; companies that book by the hour belong on the
freelance page.
Homepage: two cases instead of three (automation, website). The price box
with its steps and figures is replaced by one box: you get an offer before
anything costs money. No rates or weekly prices there any more.
Freelance page: gets the developer case and "make an app reliable" with
their steps and prices, and the section on how working together goes.
Headlines the owner called unclear are rewritten: the automation section
("Your tools do the routine work. Nobody retypes anything.") and the
working section ("How working together goes. Direct and easy to follow.").
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -2,8 +2,10 @@ import type { Metadata } from "next";
|
||||
import { DecodeText } from "@/src/components/bits/DecodeText";
|
||||
import { Block } from "@/src/components/home/Block";
|
||||
import { ClosingCta } from "@/src/components/home/ClosingCta";
|
||||
import { PathStory } from "@/src/components/home/PathPicker";
|
||||
import { BitAura } from "@/src/components/bits/BitAura";
|
||||
import { PathPicker } from "@/src/components/home/PathPicker";
|
||||
import { TopicButton } from "@/src/components/home/TopicButton";
|
||||
import { ContactDiagram } from "@/src/components/illustrations/ContactDiagram";
|
||||
import { PipelineRun } from "@/src/components/illustrations/PipelineRun";
|
||||
import { Reveal } from "@/src/components/Reveal";
|
||||
import { SwipeRow } from "@/src/components/SwipeRow";
|
||||
@@ -40,7 +42,7 @@ export default async function FreelancePage({ params }: Props) {
|
||||
const { freelance, technology } = content;
|
||||
const { booking } = freelance;
|
||||
const { services } = content;
|
||||
const teamPath = services.paths.find((path) => path.id === "developer");
|
||||
const { working } = content;
|
||||
|
||||
return (
|
||||
<div className="relative flex flex-col bg-white">
|
||||
@@ -127,6 +129,21 @@ export default async function FreelancePage({ params }: Props) {
|
||||
|
||||
<Block
|
||||
index="02"
|
||||
label={services.label}
|
||||
title={
|
||||
<>
|
||||
{freelance.cases.lead}{" "}
|
||||
<span className={MUTED}>{freelance.cases.rest}</span>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<Reveal>
|
||||
<PathPicker ids={["developer", "rescue"]} pricing="estimate" />
|
||||
</Reveal>
|
||||
</Block>
|
||||
|
||||
<Block
|
||||
index="03"
|
||||
label={freelance.pipelineLabel}
|
||||
title={technology.pipelineTitle}
|
||||
>
|
||||
@@ -140,19 +157,39 @@ export default async function FreelancePage({ params }: Props) {
|
||||
</Reveal>
|
||||
</Block>
|
||||
|
||||
{teamPath && (
|
||||
<Block index="03" label={services.howItRuns} title={teamPath.headline}>
|
||||
<Reveal>
|
||||
<p className={`${BODY} mb-12 max-w-3xl`}>{teamPath.intro}</p>
|
||||
</Reveal>
|
||||
<Reveal>
|
||||
<PathStory path={teamPath} active />
|
||||
</Reveal>
|
||||
</Block>
|
||||
)}
|
||||
|
||||
<Block
|
||||
index="04"
|
||||
label={working.label}
|
||||
title={
|
||||
<>
|
||||
{working.title.lead}{" "}
|
||||
<span className={MUTED}>{working.title.rest}</span>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<Reveal>
|
||||
<BitAura source="bottom" tone="light" className="mb-16 md:mb-24">
|
||||
<div className="overflow-hidden rounded-3xl bg-slate-900 p-4 md:p-10">
|
||||
<ContactDiagram />
|
||||
</div>
|
||||
</BitAura>
|
||||
</Reveal>
|
||||
<SwipeRow className="grid grid-cols-1 gap-x-12 gap-y-12 md:grid-cols-2 md:gap-y-16">
|
||||
{working.principles.map((item, i) => (
|
||||
<Reveal key={item.title} delay={0.08 * i}>
|
||||
<div className="border-t border-slate-900 pt-6">
|
||||
<h3 className="m-0 font-sans text-3xl font-bold tracking-tight text-slate-900 md:text-4xl">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className={`${BODY} mt-4`}>{item.text}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
</SwipeRow>
|
||||
</Block>
|
||||
|
||||
<Block
|
||||
index="05"
|
||||
label={booking.label}
|
||||
title={
|
||||
<>
|
||||
|
||||
@@ -11,7 +11,6 @@ import { PortraitSection } from "@/src/components/home/PortraitSection";
|
||||
import { StickyBook } from "@/src/components/home/StickyBook";
|
||||
import { AutomationFlow } from "@/src/components/illustrations/AutomationFlow";
|
||||
import { CareerLine } from "@/src/components/illustrations/CareerLine";
|
||||
import { ContactDiagram } from "@/src/components/illustrations/ContactDiagram";
|
||||
import {
|
||||
PresentationCompare,
|
||||
ReasonDrawing,
|
||||
@@ -64,7 +63,6 @@ export default async function LandingPage({ params }: Props) {
|
||||
presentations,
|
||||
story,
|
||||
freelance,
|
||||
working,
|
||||
work,
|
||||
faq,
|
||||
} = content;
|
||||
@@ -112,7 +110,31 @@ export default async function LandingPage({ params }: Props) {
|
||||
title={<Title title={services.title} />}
|
||||
>
|
||||
<Reveal>
|
||||
<PathPicker />
|
||||
<PathPicker ids={["automation", "website"]} pricing="offer" />
|
||||
</Reveal>
|
||||
<Reveal>
|
||||
<Link
|
||||
href={pathFor("freelance", locale)}
|
||||
className="group mt-14 flex flex-col gap-5 rounded-3xl bg-slate-50 p-6 no-underline transition-colors duration-300 hover:bg-slate-100 md:mt-24 md:flex-row md:items-center md:justify-between md:p-10"
|
||||
>
|
||||
<span className="block max-w-2xl">
|
||||
<span className="block font-sans text-2xl font-bold tracking-tight text-slate-900 md:text-3xl">
|
||||
{freelance.teaser.title}
|
||||
</span>
|
||||
<span className="mt-3 block font-sans text-base leading-relaxed text-slate-500 md:text-lg">
|
||||
{freelance.teaser.text}
|
||||
</span>
|
||||
</span>
|
||||
<span className="inline-flex shrink-0 items-center gap-3 self-start rounded-full bg-slate-900 px-6 py-3 font-sans text-[11px] font-bold uppercase tracking-[0.15em] text-white md:self-auto">
|
||||
{freelance.teaser.cta}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="transition-transform duration-300 group-hover:translate-x-1"
|
||||
>
|
||||
→
|
||||
</span>
|
||||
</span>
|
||||
</Link>
|
||||
</Reveal>
|
||||
</Block>
|
||||
|
||||
@@ -224,59 +246,8 @@ export default async function LandingPage({ params }: Props) {
|
||||
|
||||
<Block
|
||||
index="05"
|
||||
label={working.label}
|
||||
chapter={{ line: story.working, figure: "circle", flip: true }}
|
||||
title={<Title title={working.title} />}
|
||||
>
|
||||
<Reveal>
|
||||
<BitAura source="bottom" tone="light" className="mb-16 md:mb-24">
|
||||
<div className="overflow-hidden rounded-3xl bg-slate-900 p-4 md:p-10">
|
||||
<ContactDiagram />
|
||||
</div>
|
||||
</BitAura>
|
||||
</Reveal>
|
||||
<SwipeRow className="grid grid-cols-1 gap-x-12 gap-y-12 md:grid-cols-2 md:gap-y-16">
|
||||
{working.principles.map((item, i) => (
|
||||
<Reveal key={item.title} delay={0.08 * i}>
|
||||
<div className="border-t border-slate-900 pt-6">
|
||||
<h3 className="m-0 font-sans text-3xl font-bold tracking-tight text-slate-900 md:text-4xl">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className={`${BODY} mt-4`}>{item.text}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
</SwipeRow>
|
||||
<Reveal>
|
||||
<Link
|
||||
href={pathFor("freelance", locale)}
|
||||
className="group mt-14 flex flex-col gap-5 rounded-3xl bg-slate-50 p-6 no-underline transition-colors duration-300 hover:bg-slate-100 md:mt-24 md:flex-row md:items-center md:justify-between md:p-10"
|
||||
>
|
||||
<span className="block max-w-2xl">
|
||||
<span className="block font-sans text-2xl font-bold tracking-tight text-slate-900 md:text-3xl">
|
||||
{freelance.teaser.title}
|
||||
</span>
|
||||
<span className="mt-3 block font-sans text-base leading-relaxed text-slate-500 md:text-lg">
|
||||
{freelance.teaser.text}
|
||||
</span>
|
||||
</span>
|
||||
<span className="inline-flex shrink-0 items-center gap-3 self-start rounded-full bg-slate-900 px-6 py-3 font-sans text-[11px] font-bold uppercase tracking-[0.15em] text-white md:self-auto">
|
||||
{freelance.teaser.cta}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="transition-transform duration-300 group-hover:translate-x-1"
|
||||
>
|
||||
→
|
||||
</span>
|
||||
</span>
|
||||
</Link>
|
||||
</Reveal>
|
||||
</Block>
|
||||
|
||||
<Block
|
||||
index="06"
|
||||
label={work.label}
|
||||
chapter={{ line: story.work, figure: "square", flip: false }}
|
||||
chapter={{ line: story.work, figure: "square", flip: true }}
|
||||
tone="dark"
|
||||
title={<Title title={work.title} muted="text-slate-500" />}
|
||||
>
|
||||
@@ -289,9 +260,9 @@ export default async function LandingPage({ params }: Props) {
|
||||
</Block>
|
||||
|
||||
<Block
|
||||
index="07"
|
||||
index="06"
|
||||
label={faq.label}
|
||||
chapter={{ line: story.faq, figure: "triangle", flip: true }}
|
||||
chapter={{ line: story.faq, figure: "triangle", flip: false }}
|
||||
title={<Title title={faq.title} />}
|
||||
>
|
||||
<Reveal>
|
||||
|
||||
Reference in New Issue
Block a user