Refresh landing page positioning and mobile app section

app/layout.tsx

@@ -11,9 +11,9 @@ export async function generateMetadata(
   parent: ResolvingMetadata
 ): Promise<Metadata> {
   return {
-    title: "Gibwork | Find Talent, Find Work",
+    title: "Gibwork | Find bounties. Get paid.",
     description:
-      "Gibwork connects skilled professionals with freelance work opportunities, offering seamless integration with all Solana tokens for secure and efficient transactions.",
+      "Discover paid bounties, submit completed work, and get paid in USDC or Solana tokens from your wallet.",
     openGraph: {
       images: [`https://cdn.gib.work/metadata/default.png`],
     },

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 { MobileApp } from "@/components/mobile-app";
 
 export default function Home() {
   return (
@@ -14,6 +15,7 @@ export default function Home() {
       <Hero />
       <LogoList />
       <LookingFor />
+      <MobileApp />
       <Testimonial />
       <CTA />
       <Faq />

components/faq.tsx

@@ -41,8 +41,8 @@ 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
+              Under the earnings display on the app home page, click the
+              &quot;Create&quot; buttons for creating open source bounties and tasks. These buttons guide you through the process of creating and posting jobs on the
               platform.
             </AccordionContent>
           </AccordionItem>
@@ -51,8 +51,16 @@ 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 a GitHub issue with a monetary reward. A task is a
+              specific, often smaller job with instructions, deliverables, and a
+              visible payout.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="item-7">
+            <AccordionTrigger>How are winners selected?</AccordionTrigger>
+            <AccordionContent>
+              Creators review submissions against the task requirements and
+              approve the contribution that best completes the work.
             </AccordionContent>
           </AccordionItem>
           <AccordionItem value="item-2">
@@ -64,8 +72,9 @@ export function Faq() {
           <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 transactions, depositing the winning
+              amount directly to your wallet in crypto or stablecoins such as
+              USDC.
             </AccordionContent>
           </AccordionItem>
           {/* <AccordionItem value="item-4">

components/footer.tsx

@@ -43,6 +43,13 @@ export function Footer() {
                 Testimonial
                 <ArrowRight className="inline-block size-4 group-hover:scale-100 scale-0 transition-all ml-1" />
               </Link>
+              <Link
+                href={"/#mobile"}
+                className="text-muted-foreground transition-all hover:text-foreground group"
+              >
+                Mobile App
+                <ArrowRight className="inline-block size-4 group-hover:scale-100 scale-0 transition-all ml-1" />
+              </Link>
               {/* <Link
                 href={"/#team"}
                 className="text-muted-foreground transition-all hover:text-foreground group"
@@ -59,7 +66,7 @@ export function Footer() {
               </Link>
               <Link
                 href={"https://docs.gib.work/"}
-                 target="_blank"
+                target="_blank"
                 className="text-muted-foreground transition-all hover:text-foreground group"
               >
                 Docs
@@ -71,7 +78,7 @@ export function Footer() {
               <p className="font-semibold">Resources</p>
               <Link
                 href={"https://legal.gib.work/privacy-policy.pdf"}
-                 target="_blank"
+                target="_blank"
                 className="text-muted-foreground transition-all hover:text-foreground group"
               >
                 Privacy Policy

components/hero.tsx

@@ -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 task 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="Find bounties. Get paid."
           className="font-semibold text-5xl sm:text-6xl mt-4"
         />
       </motion.div>
@@ -49,17 +48,25 @@ 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.
+        Browse active bounties, complete clear tasks, and submit your work for
+        USDC or Solana token payouts when creators approve your contribution.
       </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 sm:flex-row items-center justify-center gap-3"
+      >
+        <Button className="group" asChild>
           <Link href={siteConfig.appUrl} target="_blank">
-            Get Started For Free
+            Browse Open Tasks
             <ArrowRight className="size-0 group-hover:size-5 transition-all -ml-2 group-hover:ml-0" />
           </Link>
         </Button>
+        <Button variant={"outline"} asChild>
+          <Link href={siteConfig.mobileAppUrl} target="_blank">
+            Download iPhone App
+          </Link>
+        </Button>
       </motion.div>
 
       <motion.div

components/looking-for.tsx

@@ -16,13 +16,13 @@ const workDetails = [
 
   {
     image: "/tasks/image-01.png",
-    title: "Design gibwork's new landing page",
-    amount: 500,
+    title: "Improve a product landing page",
+    amount: 350,
     token: "usdc",
   },
   {
     image: "/tasks/image-02.png",
-    title: "Create developer challenges for Zircon",
+    title: "Ship an open source bounty fix",
     amount: 500,
     token: "usdc",
   },
@@ -34,15 +34,15 @@ const workDetails = [
   // },
   {
     image: "/tasks/image-03.png",
-    title: "Use slug- to share a set of links on X or Reddit",
+    title: "Submit product feedback and UX notes",
     amount: 100,
     token: "usdc",
   },
 ];
 
 export function LookingFor() {
   return (
-    <section className="relative max-w-5xl mx-auto w-full py-16 sm:py-24 px-4 sm:px-6">
+    <section id="about" className="relative max-w-5xl mx-auto w-full py-16 sm:py-24 px-4 sm:px-6">
       <Tabs defaultValue="1" className="w-full flex flex-col items-center">
         <motion.div
           variants={FADE_UP_ANIMATION_VARIANTS}
@@ -86,7 +86,7 @@ export function LookingFor() {
               className="text-center mt-2 text-muted-foreground"
             >
               Create work for others to complete and get the support you need to
-              achieve your goals.
+              ship faster.
             </motion.p>
 
             <motion.div
@@ -114,7 +114,7 @@ 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.
+                    Incentivize pull requests from GitHub issues.
                   </CardDescription>
                 </CardHeader>
               </Card>
@@ -130,7 +130,7 @@ export function LookingFor() {
                 <CardHeader className="border-t">
                   <CardTitle className="text-lg">Simple Task</CardTitle>
                   <CardDescription>
-                    Small tasks achievable in a few hours.
+                    Post focused tasks with clear deliverables and rewards.
                   </CardDescription>
                 </CardHeader>
               </Card>
@@ -179,7 +179,7 @@ export function LookingFor() {
               className="text-center mt-2 text-muted-foreground"
             >
               Discover work opportunities that you could do, complete the work,
-              and start earning.
+              submit proof, and track progress from review to payout.
             </motion.p>
 
             <motion.div

components/mobile-app.tsx

@@ -0,0 +1,95 @@
+"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 { ArrowRight, ClipboardCheck, Smartphone, WalletCards } from "lucide-react";
+import Link from "next/link";
+
+const highlights = [
+  {
+    title: "Browse bounties",
+    description: "Find active opportunities across content, design, testing, research, and more.",
+    icon: ClipboardCheck,
+  },
+  {
+    title: "Submit from anywhere",
+    description: "Review the requirements, complete the work, and send your submission in the app.",
+    icon: Smartphone,
+  },
+  {
+    title: "Track payouts",
+    description: "Follow submissions from review to approval and manage earnings in one place.",
+    icon: WalletCards,
+  },
+];
+
+export function MobileApp() {
+  return (
+    <motion.section
+      id="mobile"
+      initial="hidden"
+      whileInView="show"
+      viewport={{ once: true }}
+      variants={{
+        hidden: {},
+        show: {
+          transition: {
+            staggerChildren: 0.15,
+          },
+        },
+      }}
+      className="relative w-full bg-muted/20 border-y"
+    >
+      <div className="max-w-7xl mx-auto grid lg:grid-cols-[0.9fr_1.1fr] gap-8 lg:gap-12 items-center py-16 sm:py-24 px-4 sm:px-6">
+        <motion.div variants={FADE_UP_ANIMATION_VARIANTS}>
+          <p className="text-sm font-semibold uppercase text-muted-foreground">
+            Now on iPhone
+          </p>
+          <h2 className="mt-3 text-3xl sm:text-4xl font-semibold">
+            Find paid work from your phone
+          </h2>
+          <p className="mt-4 text-muted-foreground">
+            Gibwork&apos;s iPhone app helps contributors browse bounties,
+            submit completed work, track status updates, and manage payouts
+            without leaving the task flow.
+          </p>
+
+          <Button className="group mt-6" asChild>
+            <Link href={siteConfig.mobileAppUrl} target="_blank">
+              Download on App Store
+              <ArrowRight className="size-0 group-hover:size-5 transition-all -ml-2 group-hover:ml-0" />
+            </Link>
+          </Button>
+        </motion.div>
+
+        <motion.div
+          variants={FADE_UP_ANIMATION_VARIANTS}
+          className="grid sm:grid-cols-3 lg:grid-cols-1 gap-3"
+        >
+          {highlights.map((highlight) => {
+            const Icon = highlight.icon;
+
+            return (
+              <div
+                key={highlight.title}
+                className="rounded-lg border bg-background p-4 flex gap-3"
+              >
+                <div className="size-10 rounded-md bg-primary text-primary-foreground flex items-center justify-center shrink-0">
+                  <Icon className="size-5" />
+                </div>
+                <div>
+                  <h3 className="font-semibold">{highlight.title}</h3>
+                  <p className="mt-1 text-sm text-muted-foreground">
+                    {highlight.description}
+                  </p>
+                </div>
+              </div>
+            );
+          })}
+        </motion.div>
+      </div>
+    </motion.section>
+  );
+}

components/nav.tsx

@@ -40,6 +40,9 @@ export function Nav() {
               <Button asChild variant={"ghost"} className="text-muted-foreground text-xs">
                 <Link href={"/#testimonial"}>Testimonial</Link>
               </Button>
+              <Button asChild variant={"ghost"} className="text-muted-foreground text-xs">
+                <Link href={"/#mobile"}>Mobile App</Link>
+              </Button>
               {/* <Button asChild variant={"ghost"} className="text-muted-foreground text-xs">
                 <Link href={"https://jup.ag/swap/SOL-F7Hwf8ib5DVCoiuyGr618Y3gon429Rnd1r5F9R5upump"} target="_blank">Token</Link>
               </Button> */}
@@ -138,6 +141,14 @@ export function Nav() {
                 >
                   <Link href={"/#testimonial"}>Testimonial</Link>
                 </Button>
+                <Button
+                  asChild
+                  variant={"ghost"}
+                  onClick={() => setIsOpen(false)}
+                  className="text-muted-foreground uppercase"
+                >
+                  <Link href={"/#mobile"}>Mobile App</Link>
+                </Button>
                 {/* <Button
                   asChild
                   variant={"ghost"}

lib/site-config.ts

@@ -1,13 +1,14 @@
 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.",
+    "Discover paid bounties, submit completed work, and get paid in USDC or Solana tokens from your wallet.",
   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/",
+  mobileAppUrl: "https://apps.apple.com/us/app/gibwork/id6757281508",
   xHandle: "gib_work",
   themeColor: "#ffffff",
 };