From 94a67e9af47b291307fac6fe8ae4142fb7af62cb Mon Sep 17 00:00:00 2001
From: genaaredes-ui <genaaredes-ui@users.noreply.github.com>
Date: Sat, 1 Aug 2026 23:37:45 -0300
Subject: [PATCH 1/2] feat: explain the funded work proof loop

---
 app/page.tsx              |  2 +
 components/proof-loop.tsx | 86 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 88 insertions(+)
 create mode 100644 components/proof-loop.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 3b9c101..5344ed4 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -6,6 +6,7 @@ import { CTA } from "@/components/cta";
 import { Footer } from "@/components/footer";
 import { Testimonial } from "@/components/testimonial";
 import { Faq } from "@/components/faq";
+import { ProofLoop } from "@/components/proof-loop";
 
 export default function Home() {
   return (
@@ -14,6 +15,7 @@ export default function Home() {
       <Hero />
       <LogoList />
       <LookingFor />
+      <ProofLoop />
       <Testimonial />
       <CTA />
       <Faq />
diff --git a/components/proof-loop.tsx b/components/proof-loop.tsx
new file mode 100644
index 0000000..3aeba63
--- /dev/null
+++ b/components/proof-loop.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import { FileCheck2, ListChecks, WalletCards } from "lucide-react";
+import { motion } from "framer-motion";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { FADE_UP_ANIMATION_VARIANTS } from "@/lib/framer-variants";
+
+const steps = [
+  {
+    icon: ListChecks,
+    eyebrow: "1. Define acceptance",
+    title: "Make the outcome clear",
+    description:
+      "Describe the exact deliverable, proof format, due date, reward asset, and approval criteria before work begins.",
+  },
+  {
+    icon: FileCheck2,
+    eyebrow: "2. Submit evidence",
+    title: "Show the work, not just a promise",
+    description:
+      "Attach a public PR, URL, demo, or reproducible notes so the creator can review the result against the brief.",
+  },
+  {
+    icon: WalletCards,
+    eyebrow: "3. Review and pay",
+    title: "Approval unlocks payout",
+    description:
+      "Creators review openly and approve the submission. Once approved, the funded reward is released to the worker's wallet.",
+  },
+];
+
+export function ProofLoop() {
+  return (
+    <motion.section
+      initial="hidden"
+      whileInView="show"
+      viewport={{ once: true, margin: "-80px" }}
+      variants={{
+        hidden: {},
+        show: { transition: { staggerChildren: 0.12 } },
+      }}
+      aria-labelledby="proof-loop-title"
+      className="relative max-w-7xl mx-auto w-full py-16 sm:py-24 px-4 sm:px-6"
+    >
+      <motion.div variants={FADE_UP_ANIMATION_VARIANTS} className="text-center max-w-2xl mx-auto">
+        <p className="text-sm font-medium text-primary">A clearer path from work to payout</p>
+        <h2 id="proof-loop-title" className="font-semibold text-3xl sm:text-4xl mt-2">
+          Funded work moves faster when proof is easy to review
+        </h2>
+        <p className="text-muted-foreground mt-3">
+          Align the brief, the evidence, and the review cadence so everyone knows what happens next.
+        </p>
+      </motion.div>
+
+      <motion.div
+        variants={FADE_UP_ANIMATION_VARIANTS}
+        className="grid md:grid-cols-3 gap-4 mt-10"
+      >
+        {steps.map(({ icon: Icon, eyebrow, title, description }) => (
+          <Card key={eyebrow} className="h-full bg-background/80">
+            <CardHeader>
+              <div className="flex items-center gap-3">
+                <span className="flex size-10 items-center justify-center rounded-full bg-primary/10 text-primary">
+                  <Icon aria-hidden="true" className="size-5" />
+                </span>
+                <p className="text-sm font-medium text-muted-foreground">{eyebrow}</p>
+              </div>
+              <CardTitle className="text-xl mt-4">{title}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm leading-6 text-muted-foreground">{description}</p>
+            </CardContent>
+          </Card>
+        ))}
+      </motion.div>
+
+      <motion.p
+        variants={FADE_UP_ANIMATION_VARIANTS}
+        className="text-center text-sm text-muted-foreground mt-6"
+      >
+        Rewards are released after the creator approves qualifying work; submitting alone does not guarantee payment.
+      </motion.p>
+    </motion.section>
+  );
+}

From 36a5b180f7c6614ae69c5b1b5ee797e3aecfe655 Mon Sep 17 00:00:00 2001
From: genaaredes-ui <genaaredes-ui@users.noreply.github.com>
Date: Sun, 2 Aug 2026 02:43:17 -0300
Subject: [PATCH 2/2] feat: clarify mobile proof and payout flow

---
 components/proof-loop.tsx  |  2 +-
 docs/landing-proof-loop.md | 17 +++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 docs/landing-proof-loop.md

diff --git a/components/proof-loop.tsx b/components/proof-loop.tsx
index 3aeba63..f22f4c2 100644
--- a/components/proof-loop.tsx
+++ b/components/proof-loop.tsx
@@ -49,7 +49,7 @@ export function ProofLoop() {
           Funded work moves faster when proof is easy to review
         </h2>
         <p className="text-muted-foreground mt-3">
-          Align the brief, the evidence, and the review cadence so everyone knows what happens next.
+          Align the brief, the evidence, and the review cadence so creators and workers know what happens next on desktop or mobile.
         </p>
       </motion.div>
 
diff --git a/docs/landing-proof-loop.md b/docs/landing-proof-loop.md
new file mode 100644
index 0000000..6dfe96b
--- /dev/null
+++ b/docs/landing-proof-loop.md
@@ -0,0 +1,17 @@
+# Landing page proof loop
+
+## What changed
+
+The landing page now explains the path from a funded work brief to an approved payout:
+
+1. Define the deliverable and acceptance criteria.
+2. Submit a public, reviewable proof of the work.
+3. Review the result and release the funded reward.
+
+The section is responsive, uses the existing card and motion primitives, and explicitly notes that the workflow can be reviewed from desktop or mobile. The copy also makes the approval condition clear: submitting work alone does not guarantee payment.
+
+## Verification
+
+- `node_modules/next/dist/bin/next build`
+- TypeScript and Next.js lint checks completed during the production build.
+- Local landing page inspected at `/` after the production build.