From ecc78258c6d861d0ddbddcf9959b6c3e0ccb7ed8 Mon Sep 17 00:00:00 2001
From: maxw06 <58760380+maxw06@users.noreply.github.com>
Date: Wed, 8 Jul 2026 23:00:49 +0800
Subject: [PATCH] Refresh landing page product flow

---
 app/layout.tsx              |   4 +-
 app/page.tsx                |   4 +
 components/cta.tsx          |   7 +-
 components/faq.tsx          |  20 +++--
 components/footer.tsx       |   2 +-
 components/hero.tsx         |  26 ++++---
 components/logo-list.tsx    |  40 +++++++---
 components/looking-for.tsx  |  42 +++++-----
 components/mobile-app.tsx   | 149 ++++++++++++++++++++++++++++++++++++
 components/nav.tsx          |   4 +-
 components/product-flow.tsx |  94 +++++++++++++++++++++++
 components/testimonial.tsx  |   4 +-
 lib/site-config.ts          |   4 +-
 13 files changed, 337 insertions(+), 63 deletions(-)
 create mode 100644 components/mobile-app.tsx
 create mode 100644 components/product-flow.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index be9a6b9..be268e8 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -11,9 +11,9 @@ export async function generateMetadata(
   parent: ResolvingMetadata
 ): Promise<Metadata> {
   return {
-    title: "Gibwork | Find Talent, Find Work",
+    title: "Gibwork | Onchain Work Marketplace",
     description:
-      "Gibwork connects skilled professionals with freelance work opportunities, offering seamless integration with all Solana tokens for secure and efficient transactions.",
+      "Gibwork connects teams and builders through paid tasks, open-source bounties, services, and wallet-based payouts on Solana.",
     openGraph: {
       images: [`https://cdn.gib.work/metadata/default.png`],
     },
diff --git a/app/page.tsx b/app/page.tsx
index 3b9c101..db3f487 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -6,6 +6,8 @@ import { CTA } from "@/components/cta";
 import { Footer } from "@/components/footer";
 import { Testimonial } from "@/components/testimonial";
 import { Faq } from "@/components/faq";
+import { ProductFlow } from "@/components/product-flow";
+import { MobileApp } from "@/components/mobile-app";
 
 export default function Home() {
   return (
@@ -13,6 +15,8 @@ export default function Home() {
       <Nav />
       <Hero />
       <LogoList />
+      <MobileApp />
+      <ProductFlow />
       <LookingFor />
       <Testimonial />
       <CTA />
diff --git a/components/cta.tsx b/components/cta.tsx
index 28d88ca..5aa1e10 100644
--- a/components/cta.tsx
+++ b/components/cta.tsx
@@ -28,19 +28,20 @@ export function CTA() {
         variants={FADE_UP_ANIMATION_VARIANTS}
         className="font-semibold text-3xl sm:text-4xl text-center"
       >
-        Start exploring
+        Start with live work
       </motion.h2>
       <motion.p
         variants={FADE_UP_ANIMATION_VARIANTS}
         className="text-center mt-2 text-muted-foreground"
       >
-        Check out gibwork and create or complete your very first work.
+        Browse funded tasks, create a bounty, or submit completed work from web
+        or mobile.
       </motion.p>
 
       <motion.div variants={FADE_UP_ANIMATION_VARIANTS}>
         <Button asChild className="mt-8 group">
           <Link href={siteConfig.appUrl} target="_blank">
-            Get Started
+            Open Gibwork
             <ArrowRight className="size-0 group-hover:size-5 transition-all -ml-2 group-hover:ml-0" />
           </Link>
         </Button>
diff --git a/components/faq.tsx b/components/faq.tsx
index 5e4acab..3dcaaf6 100644
--- a/components/faq.tsx
+++ b/components/faq.tsx
@@ -41,9 +41,10 @@ export function Faq() {
           <AccordionItem value="item-6">
             <AccordionTrigger>How do I create Work on Gibwork?</AccordionTrigger>
             <AccordionContent>
-              Under the earnings display on the apps home page, click the
-              &quot;Create&quot; buttons for creating Open Source Bounties and Task. These buttons guide you through the process of creating and posting jobs on the
-              platform.
+              Open the app, choose the create flow, then pick the right work
+              type: task, open-source bounty, or service. Add the deliverables,
+              deadline, reward, and submission requirements so contributors know
+              exactly what to complete.
             </AccordionContent>
           </AccordionItem>
           <AccordionItem value="item-1">
@@ -51,21 +52,24 @@ export function Faq() {
               What&apos;s the difference between a bounty and a task?
             </AccordionTrigger>
             <AccordionContent>
-              A bounty is a Github issue with a monetary reward.  A task is a
-              specific, often smaller job that needs to be completed.
+              A bounty is tied to a GitHub issue or pull request. A task is a
+              standalone job such as research, QA, content, design, or product
+              feedback. Both can be funded with token rewards.
             </AccordionContent>
           </AccordionItem>
           <AccordionItem value="item-2">
             <AccordionTrigger>How do I get paid for completed work?</AccordionTrigger>
             <AccordionContent>
-              Once your work is approved by the creator, the funds will be released to your noncustodial wallet.
+              Submit the required proof of work through Gibwork. Once the
+              creator reviews and approves it, the reward is released to your
+              noncustodial wallet.
             </AccordionContent>
           </AccordionItem>
           <AccordionItem value="item-3">
             <AccordionTrigger>What payment methods does gibwork support?</AccordionTrigger>
             <AccordionContent>
-              We only support wallet transactions, i.e., depositing the winning amount directly to
-              your wallet in the form of crypto or stablecoins.
+              Gibwork supports wallet-based payouts with Solana tokens,
+              including stablecoins such as USDC when a task is funded that way.
             </AccordionContent>
           </AccordionItem>
           {/* <AccordionItem value="item-4">
diff --git a/components/footer.tsx b/components/footer.tsx
index 9d6a3da..5737dd4 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -16,7 +16,7 @@ export function Footer() {
         <div className="flex items-start gap-4 w-full justify-between gap-x-40 md:flex-row flex-col gap-y-12">
           <div className="flex items-start flex-col">
             <div className="flex items-center gap-2">
-              <Image alt="" src={logo} className="size-10 rounded-md bg-muted" />
+              <Image alt="" src={logo} className="h-10 w-10 rounded-md bg-muted" />
               <p className="font-bold text-2xl">gibwork</p>
             </div>
             <h2 className="font-semibold text-2xl sm:text-3xl mt-4">Join our community</h2>
diff --git a/components/hero.tsx b/components/hero.tsx
index a85820f..8ca4c0f 100644
--- a/components/hero.tsx
+++ b/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, Download } from "lucide-react";
 import Image from "next/image";
 import dashboard from "@/public/dashboard-2.png";
 import { Badge } from "@/components/ui/badge";
@@ -11,7 +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() {
@@ -33,14 +32,14 @@ export function Hero() {
       <motion.div variants={FADE_UP_ANIMATION_VARIANTS}>
         <Badge variant={"secondary"}>
           <div className="size-1 rounded-full bg-muted-foreground mr-2" />
-          Introducing gibwork
+          Onchain work marketplace
           <div className="size-1 rounded-full bg-muted-foreground ml-2" />
         </Badge>
       </motion.div>
 
       <motion.div variants={FADE_UP_ANIMATION_VARIANTS} className="relative z-0">
         <SparklesText
-          text="Find Talent, Find Work"
+          text="Work. Get Paid Instantly."
           className="font-semibold text-5xl sm:text-6xl mt-4"
         />
       </motion.div>
@@ -49,17 +48,26 @@ export function Hero() {
         variants={FADE_UP_ANIMATION_VARIANTS}
         className="max-w-2xl mt-4 w-full sm:text-lg text-muted-foreground"
       >
-        Whether you&apos;re searching for your next gig or seeking skilled individuals, our platform
-        connects you with the perfect match.
+        Work from anywhere, create funded tasks, and get paid in USDC or
+        Solana tokens through reviewable on-chain settlement.
       </motion.p>
 
-      <motion.div variants={FADE_UP_ANIMATION_VARIANTS}>
-        <Button className="group mt-8" asChild>
+      <motion.div
+        variants={FADE_UP_ANIMATION_VARIANTS}
+        className="mt-8 flex flex-col gap-3 sm:flex-row"
+      >
+        <Button className="group" asChild>
           <Link href={siteConfig.appUrl} target="_blank">
-            Get Started For Free
+            Explore Live Work
             <ArrowRight className="size-0 group-hover:size-5 transition-all -ml-2 group-hover:ml-0" />
           </Link>
         </Button>
+        <Button variant="outline" className="gap-2" asChild>
+          <Link href="#mobile-app">
+            <Download className="size-4" />
+            Download the App
+          </Link>
+        </Button>
       </motion.div>
 
       <motion.div
diff --git a/components/logo-list.tsx b/components/logo-list.tsx
index 9c242f7..d426aa8 100644
--- a/components/logo-list.tsx
+++ b/components/logo-list.tsx
@@ -59,21 +59,39 @@ export function LogoList() {
 
       <motion.div
         variants={FADE_UP_ANIMATION_VARIANTS}
-        className="relative mt-16 flex w-full flex-col items-center justify-center overflow-hidden"
+        className="mt-10 flex flex-wrap items-center justify-center gap-x-8 gap-y-6 sm:hidden"
+      >
+        <Image alt="Solana Foundation" src={solanaFoundation} className="h-7 w-auto max-w-36 object-contain" />
+        <Image alt="send" src={send} className="h-7 w-auto max-w-28 object-contain" />
+        <Image alt="alldomains" src={alldomains} className="h-7 w-auto max-w-36 object-contain" />
+        <div className="text-xl font-medium">
+          <Image alt="deansList" src={deansList} className="h-7 w-7 object-contain inline" /> Dean&apos;s List
+        </div>
+        <Image alt="magic" src={magic} className="h-7 w-auto max-w-36 object-contain" />
+        <Image alt="blinksgg" src={blinksGG} className="h-7 w-auto max-w-28 object-contain" />
+        <Image alt="realms" src={realms} className="h-7 w-auto max-w-28 object-contain" />
+        <Image alt="zircon" src={zircon} className="h-7 w-auto max-w-28 object-contain" />
+        <Image alt="decaf" src={decaf} className="h-7 w-auto max-w-28 object-contain" />
+        <Image alt="pubkey" src={pubkey} className="h-7 w-auto max-w-28 object-contain" />
+      </motion.div>
+
+      <motion.div
+        variants={FADE_UP_ANIMATION_VARIANTS}
+        className="relative mt-16 hidden w-full flex-col items-center justify-center overflow-hidden sm:flex"
       >
         <Marquee pauseOnHover className="[--duration:20s]">
-          <Image alt="Solana Foundation" src={solanaFoundation} className="h-8 w-auto px-6" />
-          <Image alt="send" src={send} className="h-8 w-auto px-4" />
-          <Image alt="alldomains" src={alldomains} className="h-8 w-auto px-4" />
+          <Image alt="Solana Foundation" src={solanaFoundation} className="h-8 w-auto max-w-44 object-contain px-6" />
+          <Image alt="send" src={send} className="h-8 w-auto max-w-36 object-contain px-4" />
+          <Image alt="alldomains" src={alldomains} className="h-8 w-auto max-w-44 object-contain 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-8 object-contain inline" /> Dean'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" />
-          <Image alt="realms" src={realms} className="h-8 w-auto px-6" />
-          <Image alt="zircon" src={zircon} className="h-8 w-auto px-6" />
-          <Image alt="decaf" src={decaf} className="h-8 w-auto px-6" />
-          <Image alt="pubkey" src={pubkey} className="h-8 w-auto px-6" />
+          <Image alt="magic" src={magic} className="h-8 w-auto max-w-44 object-contain px-6" />
+          <Image alt="blinksgg" src={blinksGG} className="h-8 w-auto max-w-36 object-contain px-6" />
+          <Image alt="realms" src={realms} className="h-8 w-auto max-w-36 object-contain px-6" />
+          <Image alt="zircon" src={zircon} className="h-8 w-auto max-w-36 object-contain px-6" />
+          <Image alt="decaf" src={decaf} className="h-8 w-auto max-w-36 object-contain px-6" />
+          <Image alt="pubkey" src={pubkey} className="h-8 w-auto max-w-36 object-contain px-6" />
 
         </Marquee>
 
diff --git a/components/looking-for.tsx b/components/looking-for.tsx
index 360463c..9481d6f 100644
--- a/components/looking-for.tsx
+++ b/components/looking-for.tsx
@@ -12,30 +12,22 @@ import { motion } from "framer-motion";
 import { FADE_UP_ANIMATION_VARIANTS } from "@/lib/framer-variants";
 
 const workDetails = [
-  // { image: "/tasks/image-04.png", title: "Create a FAQ list for gibwork", amount: 1, token: "sol" },
-
   {
     image: "/tasks/image-01.png",
-    title: "Design gibwork's new landing page",
-    amount: 500,
+    title: "Improve the Gibwork landing page",
+    amount: 350,
     token: "usdc",
   },
   {
     image: "/tasks/image-02.png",
-    title: "Create developer challenges for Zircon",
-    amount: 500,
+    title: "Create a product walkthrough",
+    amount: 300,
     token: "usdc",
   },
-  // {
-  //   image: "/tasks/image-04.png",
-  //   title: "Share a link to your most used dApp",
-  //   amount: 100,
-  //   token: "usdc",
-  // },
   {
     image: "/tasks/image-03.png",
-    title: "Use slug- to share a set of links on X or Reddit",
-    amount: 100,
+    title: "Submit a verified GitHub enhancement",
+    amount: 175,
     token: "usdc",
   },
 ];
@@ -78,15 +70,15 @@ export function LookingFor() {
               variants={FADE_UP_ANIMATION_VARIANTS}
               className="text-3xl sm:text-4xl text-center font-semibold"
             >
-              Get help from an expert
+              Any skill. Any task. Paid on-chain.
             </motion.h2>
 
             <motion.p
               variants={FADE_UP_ANIMATION_VARIANTS}
               className="text-center mt-2 text-muted-foreground"
             >
-              Create work for others to complete and get the support you need to
-              achieve your goals.
+              Post tasks, services, or GitHub bounties with clear deliverables,
+              deadlines, and wallet-backed rewards.
             </motion.p>
 
             <motion.div
@@ -114,7 +106,8 @@ export function LookingFor() {
                 <CardHeader className="border-t">
                   <CardTitle className="text-lg">Open Source Bounty</CardTitle>
                   <CardDescription>
-                    Incentivize a pull request made from a Github issue.
+                    Fund GitHub issues and accept pull requests with reviewable
+                    proof of work.
                   </CardDescription>
                 </CardHeader>
               </Card>
@@ -130,7 +123,8 @@ export function LookingFor() {
                 <CardHeader className="border-t">
                   <CardTitle className="text-lg">Simple Task</CardTitle>
                   <CardDescription>
-                    Small tasks achievable in a few hours.
+                    Create focused work such as product feedback, content,
+                    QA, and research.
                   </CardDescription>
                 </CardHeader>
               </Card>
@@ -145,8 +139,8 @@ export function LookingFor() {
                 <CardHeader className="border-t">
                   <CardTitle className="text-lg">Services</CardTitle>
                   <CardDescription>
-                    Offer your skills and connect with users for custom
-                    services.
+                    Hire verified builders for custom work and release payment
+                    after approval.
                   </CardDescription>
                 </CardHeader>
               </Card>
@@ -172,14 +166,14 @@ export function LookingFor() {
               variants={FADE_UP_ANIMATION_VARIANTS}
               className="text-3xl sm:text-4xl text-center font-semibold"
             >
-              Get paid for your expertise
+              Find work you can complete
             </motion.h2>
             <motion.p
               variants={FADE_UP_ANIMATION_VARIANTS}
               className="text-center mt-2 text-muted-foreground"
             >
-              Discover work opportunities that you could do, complete the work,
-              and start earning.
+              Browse live opportunities, submit proof through Gibwork, and
+              receive approved rewards in your wallet.
             </motion.p>
 
             <motion.div
diff --git a/components/mobile-app.tsx b/components/mobile-app.tsx
new file mode 100644
index 0000000..1f38bb3
--- /dev/null
+++ b/components/mobile-app.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { siteConfig } from "@/lib/site-config";
+import { FADE_UP_ANIMATION_VARIANTS } from "@/lib/framer-variants";
+import { motion } from "framer-motion";
+import {
+  Apple,
+  CheckCircle2,
+  ExternalLink,
+  Play,
+  Smartphone,
+} from "lucide-react";
+import Link from "next/link";
+
+const appHighlights = [
+  "Browse live bounties, tasks, services, and social work from one feed.",
+  "Submit proof, links, files, and updates without waiting for desktop time.",
+  "Track approved rewards and wallet payouts wherever you are working.",
+];
+
+export function MobileApp() {
+  return (
+    <motion.section
+      id="mobile-app"
+      initial="hidden"
+      whileInView="show"
+      viewport={{ once: true }}
+      variants={{
+        hidden: {},
+        show: {
+          transition: {
+            staggerChildren: 0.15,
+          },
+        },
+      }}
+      className="w-full border-y bg-muted/30"
+    >
+      <div className="mx-auto grid w-full max-w-7xl items-center gap-10 px-4 py-16 sm:px-6 sm:py-24 lg:grid-cols-[1fr_0.9fr]">
+        <div className="mx-auto max-w-2xl text-center lg:mx-0 lg:text-left">
+          <motion.div
+            variants={FADE_UP_ANIMATION_VARIANTS}
+            className="mx-auto mb-4 flex size-12 items-center justify-center rounded-md bg-primary/10 text-primary lg:mx-0"
+          >
+            <Smartphone className="size-6" />
+          </motion.div>
+
+          <motion.h2
+            variants={FADE_UP_ANIMATION_VARIANTS}
+            className="text-3xl font-semibold sm:text-4xl"
+          >
+            Your work, one place.
+          </motion.h2>
+
+          <motion.p
+            variants={FADE_UP_ANIMATION_VARIANTS}
+            className="mt-3 text-muted-foreground"
+          >
+            Browse bounties, submit work, and track earnings from anywhere with
+            Gibwork on iOS, Android, and web.
+          </motion.p>
+
+          <motion.ul
+            variants={FADE_UP_ANIMATION_VARIANTS}
+            className="mt-6 grid gap-3 text-left"
+          >
+            {appHighlights.map((highlight) => (
+              <li key={highlight} className="flex gap-3">
+                <CheckCircle2 className="mt-0.5 size-5 shrink-0 text-primary" />
+                <span>{highlight}</span>
+              </li>
+            ))}
+          </motion.ul>
+
+          <motion.div
+            variants={FADE_UP_ANIMATION_VARIANTS}
+            className="mt-8 flex flex-col gap-3 sm:flex-row sm:justify-center lg:justify-start"
+          >
+            <Button asChild size="lg" className="gap-2">
+              <Link href={siteConfig.appStoreUrl} target="_blank">
+                <Apple className="size-5" />
+                App Store
+                <ExternalLink className="size-4" />
+              </Link>
+            </Button>
+            <Button asChild size="lg" variant="outline" className="gap-2">
+              <Link href={siteConfig.googlePlayUrl} target="_blank">
+                <Play className="size-5" />
+                Google Play
+                <ExternalLink className="size-4" />
+              </Link>
+            </Button>
+          </motion.div>
+        </div>
+
+        <motion.div
+          variants={FADE_UP_ANIMATION_VARIANTS}
+          className="relative mx-auto h-[30rem] w-full max-w-md overflow-hidden"
+        >
+          <div className="absolute left-4 top-14 h-[24rem] w-[12rem] -rotate-6 rounded-[2rem] border bg-background p-3 shadow-xl sm:left-10">
+            <div className="h-full rounded-[1.45rem] border bg-muted/60 p-4">
+              <div className="mb-5 h-5 w-20 rounded-full bg-foreground/10" />
+              <div className="space-y-3">
+                <div className="rounded-md bg-background p-3 shadow-sm">
+                  <p className="text-xs font-medium text-muted-foreground">
+                    Open bounty
+                  </p>
+                  <p className="mt-1 text-sm font-semibold">
+                    Landing page refresh
+                  </p>
+                  <p className="mt-2 text-xs text-primary">350 USDC</p>
+                </div>
+                <div className="rounded-md bg-background p-3 shadow-sm">
+                  <p className="text-xs font-medium text-muted-foreground">
+                    Simple task
+                  </p>
+                  <p className="mt-1 text-sm font-semibold">
+                    Product walkthrough
+                  </p>
+                  <p className="mt-2 text-xs text-primary">300 USDC</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="absolute right-4 top-4 h-[27rem] w-[13rem] rotate-3 rounded-[2.25rem] border bg-background p-3 shadow-2xl sm:right-10">
+            <div className="h-full rounded-[1.65rem] border bg-muted/50 p-4">
+              <div className="mx-auto mb-5 h-1.5 w-16 rounded-full bg-foreground/20" />
+              <div className="rounded-md bg-background p-4 shadow-sm">
+                <p className="text-xs font-medium text-muted-foreground">
+                  Submission
+                </p>
+                <p className="mt-1 text-sm font-semibold">
+                  PR and mobile screenshots attached
+                </p>
+              </div>
+              <div className="mt-4 rounded-md bg-primary/10 p-4 text-primary">
+                <p className="text-xs font-medium">Ready for review</p>
+                <p className="mt-1 text-sm font-semibold">
+                  Release reward after approval
+                </p>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </motion.section>
+  );
+}
diff --git a/components/nav.tsx b/components/nav.tsx
index fe8bcef..ab0e45e 100644
--- a/components/nav.tsx
+++ b/components/nav.tsx
@@ -29,7 +29,7 @@ export function Nav() {
         >
           <div className="flex items-center gap-2">
             <Link href={"/"} className="flex items-center gap-2">
-              <Image alt="" src={logo} className="size-10 rounded-md" />
+              <Image alt="" src={logo} className="h-10 w-10 rounded-md" />
               <p className="font-bold text-3xl min-[420px]:block hidden">gibwork</p>
             </Link>
 
@@ -103,7 +103,7 @@ export function Nav() {
             <div className="flex flex-col">
               <div className="sm:px-6 px-4 h-16 flex justify-between items-center">
                 <Link href={"/"} className="flex items-center gap-2">
-                  <Image alt="" src={logo} className="size-10 rounded-md" />
+                  <Image alt="" src={logo} className="h-10 w-10 rounded-md" />
                   <p className="font-bold text-xl min-[420px]:block hidden">gibwork</p>
                 </Link>
 
diff --git a/components/product-flow.tsx b/components/product-flow.tsx
new file mode 100644
index 0000000..74da0bd
--- /dev/null
+++ b/components/product-flow.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import {
+  ClipboardList,
+  GitPullRequestArrow,
+  ShieldCheck,
+  Wallet,
+} from "lucide-react";
+import { motion } from "framer-motion";
+import { FADE_UP_ANIMATION_VARIANTS } from "@/lib/framer-variants";
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+const flowSteps = [
+  {
+    icon: ClipboardList,
+    title: "Create funded work",
+    description:
+      "Post a task, service request, or open-source bounty with clear deliverables and reward terms.",
+  },
+  {
+    icon: GitPullRequestArrow,
+    title: "Submit proof",
+    description:
+      "Builders attach PRs, links, screenshots, or files so creators can review the completed work.",
+  },
+  {
+    icon: ShieldCheck,
+    title: "Review submissions",
+    description:
+      "Creators compare the submitted proof against the scope before approving the winning work.",
+  },
+  {
+    icon: Wallet,
+    title: "Release rewards",
+    description:
+      "Approved contributors receive token rewards directly in their noncustodial wallets.",
+  },
+];
+
+export function ProductFlow() {
+  return (
+    <motion.section
+      initial="hidden"
+      whileInView="show"
+      viewport={{ once: true }}
+      variants={{
+        hidden: {},
+        show: {
+          transition: {
+            staggerChildren: 0.15,
+          },
+        },
+      }}
+      className="w-full max-w-7xl mx-auto px-4 sm:px-6 py-16 sm:py-24"
+    >
+      <motion.div
+        variants={FADE_UP_ANIMATION_VARIANTS}
+        className="mx-auto max-w-2xl text-center"
+      >
+        <h2 className="text-3xl sm:text-4xl font-semibold">
+          One flow across web and mobile
+        </h2>
+        <p className="mt-2 text-muted-foreground">
+          Gibwork connects funded opportunities, verified work submissions, and
+          wallet payouts in a single review flow.
+        </p>
+        <p className="mt-4 text-sm font-medium text-primary">
+          Funds sit in smart-contract escrow and settle on-chain in seconds.
+        </p>
+      </motion.div>
+
+      <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {flowSteps.map((step) => (
+          <motion.div key={step.title} variants={FADE_UP_ANIMATION_VARIANTS}>
+            <Card className="h-full">
+              <CardHeader>
+                <div className="mb-4 flex size-10 items-center justify-center rounded-md bg-primary/10 text-primary">
+                  <step.icon className="size-5" />
+                </div>
+                <CardTitle className="text-lg">{step.title}</CardTitle>
+                <CardDescription>{step.description}</CardDescription>
+              </CardHeader>
+            </Card>
+          </motion.div>
+        ))}
+      </div>
+    </motion.section>
+  );
+}
diff --git a/components/testimonial.tsx b/components/testimonial.tsx
index 47819ec..0a3d7a1 100644
--- a/components/testimonial.tsx
+++ b/components/testimonial.tsx
@@ -65,13 +65,13 @@ export function Testimonial() {
           </motion.p>
         </motion.div>
 
-        <div className="overflow-auto flex items-start gap-2 pb-4 sm:hidden">
+        <div className="flex w-full max-w-full snap-x snap-mandatory items-start gap-3 overflow-x-auto overscroll-x-contain pb-4 sm:hidden">
           {[...leftTweetIds, ...rightTweetIds].map((id) => {
             return (
               <ClientTweetCard
                 key={id}
                 id={id}
-                className="shrink-0 max-w-[calc(100vw-96px)]"
+                className="w-[min(22rem,calc(100vw-3rem))] shrink-0 snap-start"
               />
             );
           })}
diff --git a/lib/site-config.ts b/lib/site-config.ts
index c69be15..e265109 100644
--- a/lib/site-config.ts
+++ b/lib/site-config.ts
@@ -1,13 +1,15 @@
 export const siteConfig = {
   name: "gibwork",
   description:
-    "Join a community-driven platform for crypto bounties and paid Q&A. Discover talent, get answers, and drive your crypto initiatives forward.",
+    "Create and complete paid tasks, open-source bounties, and services with noncustodial wallet payouts on Solana.",
   creator: "gibwork",
   baseUrl: "https://gib.work/",
   discordUrl: "https://discord.gg/TNXJjpRvqN",
   youtubeUrl: "https://www.youtube.com/@gibwork_",
   xUrl: "https://twitter.com/intent/follow?screen_name=gib_work",
   appUrl: "https://app.gib.work/",
+  appStoreUrl: "https://apps.apple.com/us/app/gibwork/id6757281508",
+  googlePlayUrl: "https://play.google.com/store/apps/details?id=com.gibwork.app",
   xHandle: "gib_work",
   themeColor: "#ffffff",
 };