Refresh landing page product flow

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`],
     },

app/page.tsx

@@ -6,13 +6,17 @@ 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 (
     <div className="flex flex-col z-0 relative">
       <Nav />
       <Hero />
       <LogoList />
+      <MobileApp />
+      <ProductFlow />
       <LookingFor />
       <Testimonial />
       <CTA />

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>

components/faq.tsx

@@ -41,31 +41,35 @@ 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">
             <AccordionTrigger>
               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">

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>

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

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>
 

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