feat(landing): task requirement badges and payout flow

app/page.tsx

@@ -2,6 +2,8 @@ import { Nav } from "@/components/nav";
 import { LookingFor } from "@/components/looking-for";
 import { Hero } from "@/components/hero";
 import { LogoList } from "@/components/logo-list";
+import { TaskRequirements } from "@/components/task-requirements";
+import { PayoutFlow } from "@/components/payout-flow";
 import { CTA } from "@/components/cta";
 import { Footer } from "@/components/footer";
 import { Testimonial } from "@/components/testimonial";
@@ -14,6 +16,8 @@ export default function Home() {
       <Hero />
       <LogoList />
       <LookingFor />
+      <TaskRequirements />
+      <PayoutFlow />
       <Testimonial />
       <CTA />
       <Faq />

components/cta.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { ArrowRight } from "lucide-react";
+import { ArrowRight, HelpCircle, PlusCircle, Search } from "lucide-react";
 import Ripple from "./ui/ripple";
 import { motion } from "framer-motion";
 import { FADE_UP_ANIMATION_VARIANTS } from "@/lib/framer-variants";
@@ -34,14 +34,32 @@ export function CTA() {
         variants={FADE_UP_ANIMATION_VARIANTS}
         className="text-center mt-2 text-muted-foreground"
       >
-        Check out gibwork and create or complete your very first work.
+        Check out gibwork to browse active bounties, post tasks, or learn how payments work.
       </motion.p>
 
-      <motion.div variants={FADE_UP_ANIMATION_VARIANTS}>
-        <Button asChild className="mt-8 group">
+      <motion.div
+        variants={FADE_UP_ANIMATION_VARIANTS}
+        className="flex flex-wrap items-center justify-center gap-3 sm:gap-4 mt-8 z-10"
+      >
+        <Button className="group" asChild>
           <Link href={siteConfig.appUrl} target="_blank">
-            Get Started
-            <ArrowRight className="size-0 group-hover:size-5 transition-all -ml-2 group-hover:ml-0" />
+            <Search className="size-4 mr-2" />
+            Browse Tasks
+            <ArrowRight className="size-4 ml-1 opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all" />
+          </Link>
+        </Button>
+
+        <Button variant="secondary" className="group" asChild>
+          <Link href={siteConfig.appUrl} target="_blank">
+            <PlusCircle className="size-4 mr-2" />
+            Post a Task
+          </Link>
+        </Button>
+
+        <Button variant="outline" className="group" asChild>
+          <Link href="#how-payments-work">
+            <HelpCircle className="size-4 mr-2" />
+            Learn How Payments Work
           </Link>
         </Button>
       </motion.div>

components/hero.tsx

@@ -2,7 +2,7 @@
 
 import { SolanaLogoType } from "@/components/logo/solana";
 import { Button } from "@/components/ui/button";
-import { ArrowRight } from "lucide-react";
+import { ArrowRight, HelpCircle, PlusCircle, Search } from "lucide-react";
 import Image from "next/image";
 import dashboard from "@/public/dashboard-2.png";
 import { Badge } from "@/components/ui/badge";
@@ -11,8 +11,6 @@ import { siteConfig } from "@/lib/site-config";
 import SparklesText from "./ui/sparkles-text";
 import { motion } from "framer-motion";
 import { FADE_UP_ANIMATION_VARIANTS } from "@/lib/framer-variants";
-import { Clipboard } from "flowbite-react"
-
 
 export function Hero() {
   return (
@@ -53,20 +51,38 @@ export function Hero() {
         connects you with the perfect match.
       </motion.p>
 
-      <motion.div variants={FADE_UP_ANIMATION_VARIANTS}>
-        <Button className="group mt-8" asChild>
+      {/* 3-split CTA buttons */}
+      <motion.div
+        variants={FADE_UP_ANIMATION_VARIANTS}
+        className="flex flex-wrap items-center justify-center gap-3 sm:gap-4 mt-8"
+      >
+        <Button className="group" asChild>
+          <Link href={siteConfig.appUrl} target="_blank">
+            <Search className="size-4 mr-2" />
+            Browse Tasks
+            <ArrowRight className="size-4 ml-1 opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all" />
+          </Link>
+        </Button>
+
+        <Button variant="secondary" className="group" asChild>
           <Link href={siteConfig.appUrl} target="_blank">
-            Get Started For Free
-            <ArrowRight className="size-0 group-hover:size-5 transition-all -ml-2 group-hover:ml-0" />
+            <PlusCircle className="size-4 mr-2" />
+            Post a Task
+          </Link>
+        </Button>
+
+        <Button variant="outline" className="group" asChild>
+          <Link href="#how-payments-work">
+            <HelpCircle className="size-4 mr-2" />
+            Learn How Payments Work
           </Link>
         </Button>
       </motion.div>
 
       <motion.div
         variants={FADE_UP_ANIMATION_VARIANTS}
-        className="flex items-center gap-2 text-sm mt-4"
+        className="flex items-center gap-2 text-sm mt-6"
       >
-
         <span className="opacity-80">powered by</span>
         <Link
           href={"https://solana.com/"}
@@ -77,32 +93,6 @@ export function Hero() {
         </Link>
       </motion.div>
 
-      {/* <motion.div
-        variants={FADE_UP_ANIMATION_VARIANTS}
-        className="flex items-center gap-2 text-sm mt-4 p-1 font-light"
-      >
-        <div className="flex relative flex-row bg-stone-100 rounded-sm">
-          <div className="flex justify-center align-middle pt-2 mb-2 px-1">
-            <img src="https://media.gib.work/work-logo.png" className="rounded-full w-5" />
-            <span className="ms-2 opacity-80 font-medium md:visible hidden">CA</span>
-          </div>
-          <div className="md:flex hidden pt-2">
-            F7Hwf8ib5DVCoiuyGr618Y3gon429Rnd1r5F9R5upump
-          </div>
-          <div className="flex md:hidden pt-2">
-            F7Hwf8ib5D.....d1r5F9R5upump
-          </div>
-          <div className="bg-stone-100 hidden md:flex items-center w-16 py-1 justify-center border-s-2 border-white ms-1 rounded-e-lg">
-            <Clipboard.WithIconText className="bg-stone-50 border-none p-0 px-1 text-black hover:text-black"
-              valueToCopy="F7Hwf8ib5DVCoiuyGr618Y3gon429Rnd1r5F9R5upump" />
-          </div>
-          <div className="bg-stone-100 block w-16 md:hidden items-center justify-start border-s-2 border-white ms-1 rounded-e-lg">
-            <Clipboard.WithIconText className="bg-stone-100 border-none p-0 pt-2 px-1 flex text-black hover:text-black"
-              valueToCopy="F7Hwf8ib5DVCoiuyGr618Y3gon429Rnd1r5F9R5upump" />
-          </div>
-        </div>
-      </motion.div> */}
-
       <motion.div variants={FADE_UP_ANIMATION_VARIANTS} className="mt-16 sm:mt-24 relative z-0">
         <div className="rounded-t-lg bg-foreground/5 h-3 mx-12" />
         <div className="rounded-t-lg bg-foreground/10 h-3 mx-6" />

components/logo-list.tsx

@@ -66,7 +66,7 @@ export function LogoList() {
           <Image alt="send" src={send} className="h-8 w-auto px-4" />
           <Image alt="alldomains" src={alldomains} className="h-8 w-auto px-4" />
           <div className=" px-6 text-2xl font-medium">
-            <Image alt="deansList" src={deansList} className="h-8 w-auto inline" /> Dean's List
+            <Image alt="deansList" src={deansList} className="h-8 w-auto inline" /> Dean&apos;s List
           </div>
           <Image alt="magic" src={magic} className="h-8 w-auto px-6" />
           <Image alt="blinksgg" src={blinksGG} className="h-8 w-auto px-6" />

components/looking-for.tsx

@@ -112,7 +112,7 @@ export function LookingFor() {
                   height={100}
                 />
                 <CardHeader className="border-t">
-                  <CardTitle className="text-lg">Open Source Bounty</CardTitle>
+                  <CardTitle className="text-lg">Open-Source Bounties</CardTitle>
                   <CardDescription>
                     Incentivize a pull request made from a Github issue.
                   </CardDescription>

components/payout-flow.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { FADE_UP_ANIMATION_VARIANTS } from "@/lib/framer-variants";
+import { Coins, FileCheck, SearchCheck, ArrowRightLeft, GitBranch, Code2, ArrowRight } from "lucide-react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { siteConfig } from "@/lib/site-config";
+
+export const payoutSteps = [
+  {
+    step: "01",
+    title: "Escrow Deposit",
+    description: "Client creates task/bounty and funds escrow upfront on Solana.",
+    icon: Coins,
+  },
+  {
+    step: "02",
+    title: "Check & Submit",
+    description: "Developer claims task and submits required deliverables or GitHub PR.",
+    icon: FileCheck,
+  },
+  {
+    step: "03",
+    title: "Sponsor Review",
+    description: "Sponsor inspects submission details and verifies code or proof.",
+    icon: SearchCheck,
+  },
+  {
+    step: "04",
+    title: "Approved Payout",
+    description: "Approved work releases SOL/USDC instantly to developer wallet.",
+    icon: ArrowRightLeft,
+  },
+];
+
+export function PayoutFlow() {
+  return (
+    <motion.section
+      id="how-payments-work"
+      initial="hidden"
+      whileInView="show"
+      viewport={{ once: true }}
+      variants={{
+        hidden: {},
+        show: {
+          transition: {
+            staggerChildren: 0.12,
+          },
+        },
+      }}
+      className="py-20 sm:py-28 px-4 sm:px-6 w-full max-w-7xl mx-auto border-t scroll-mt-20"
+    >
+      <div className="text-center max-w-3xl mx-auto">
+        <motion.h2
+          variants={FADE_UP_ANIMATION_VARIANTS}
+          className="font-semibold text-3xl sm:text-4xl tracking-tight"
+        >
+          From task to payout
+        </motion.h2>
+        <motion.p
+          variants={FADE_UP_ANIMATION_VARIANTS}
+          className="mt-4 text-base sm:text-lg text-muted-foreground leading-relaxed"
+        >
+          Transparent workflow from escrow funding to sponsor review and secure payout release.
+          Approved work gets paid directly from escrow upon sponsor confirmation.
+        </motion.p>
+      </div>
+
+      {/* Payout Steps */}
+      <div className="mt-12 sm:mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {payoutSteps.map((stepItem, idx) => {
+          const Icon = stepItem.icon;
+          return (
+            <motion.div
+              key={idx}
+              variants={FADE_UP_ANIMATION_VARIANTS}
+              className="relative p-6 rounded-xl border bg-card/60 backdrop-blur-sm flex flex-col justify-between"
+            >
+              <div>
+                <div className="flex items-center justify-between mb-4">
+                  <div className="size-10 rounded-lg bg-primary/10 text-primary flex items-center justify-center">
+                    <Icon className="size-5" />
+                  </div>
+                  <span className="text-xs font-mono font-bold text-muted-foreground/60 bg-muted px-2.5 py-1 rounded-full">
+                    STEP {stepItem.step}
+                  </span>
+                </div>
+                <h3 className="font-semibold text-lg">{stepItem.title}</h3>
+                <p className="text-sm text-muted-foreground mt-2 leading-relaxed">
+                  {stepItem.description}
+                </p>
+              </div>
+            </motion.div>
+          );
+        })}
+      </div>
+
+      {/* Developer / Open-Source Card */}
+      <motion.div
+        variants={FADE_UP_ANIMATION_VARIANTS}
+        className="mt-12 p-6 sm:p-8 rounded-2xl border bg-gradient-to-r from-primary/5 via-card to-background flex flex-col md:flex-row items-start md:items-center justify-between gap-6"
+      >
+        <div className="flex items-start gap-4">
+          <div className="size-12 rounded-xl bg-primary text-primary-foreground flex items-center justify-center shrink-0 mt-1 sm:mt-0">
+            <Code2 className="size-6" />
+          </div>
+          <div>
+            <div className="flex items-center gap-2">
+              <span className="text-xs font-semibold uppercase tracking-wider text-primary bg-primary/10 px-2.5 py-0.5 rounded-full">
+                Open-Source Bounties
+              </span>
+            </div>
+            <h3 className="font-semibold text-xl mt-2">
+              Developer Workflow & GitHub Contributions
+            </h3>
+            <p className="text-sm text-muted-foreground mt-2 max-w-3xl leading-relaxed">
+              For open-source bounties, review the linked GitHub issue, work in a dedicated branch,
+              open a clear PR, and submit the PR through Gibwork for sponsor review.
+            </p>
+          </div>
+        </div>
+        <Button asChild variant="outline" className="shrink-0 group">
+          <Link href={siteConfig.appUrl} target="_blank">
+            Explore Open-Source Tasks
+            <ArrowRight className="size-4 ml-2 group-hover:translate-x-1 transition-transform" />
+          </Link>
+        </Button>
+      </motion.div>
+    </motion.section>
+  );
+}