Align landing page with the current mobile bounty experience

app/globals.css

@@ -72,3 +72,18 @@
     @apply bg-background text-foreground;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}

app/layout.tsx

@@ -1,24 +1,37 @@
-import type { Metadata, ResolvingMetadata, Viewport } from "next";
+import type { Metadata, Viewport } from "next";
 import { Inter } from "next/font/google";
 import { cn } from "@/lib/utils";
 import { Providers } from "@/components/providers/providers";
 import "./globals.css";
+import { siteConfig } from "@/lib/site-config";
 
 const inter = Inter({ subsets: ["latin"] });
 
-export async function generateMetadata(
-  { params, searchParams }: any,
-  parent: ResolvingMetadata
-): Promise<Metadata> {
-  return {
-    title: "Gibwork | Find Talent, Find Work",
-    description:
-      "Gibwork connects skilled professionals with freelance work opportunities, offering seamless integration with all Solana tokens for secure and efficient transactions.",
-    openGraph: {
-      images: [`https://cdn.gib.work/metadata/default.png`],
-    },
-  };
-}
+export const metadata: Metadata = {
+  metadataBase: new URL(siteConfig.baseUrl),
+  title: "Gibwork | Find bounties. Get paid.",
+  description: siteConfig.description,
+  alternates: { canonical: "/" },
+  appleWebApp: { capable: true, title: siteConfig.name },
+  other: {
+    "apple-itunes-app": `app-id=${siteConfig.appStoreId}`,
+  },
+  openGraph: {
+    title: "Gibwork | Find bounties. Get paid.",
+    description: siteConfig.description,
+    url: "/",
+    siteName: siteConfig.name,
+    type: "website",
+    images: ["https://cdn.gib.work/metadata/default.png"],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Gibwork | Find bounties. Get paid.",
+    description: siteConfig.description,
+    creator: `@${siteConfig.xHandle}`,
+    images: ["https://cdn.gib.work/metadata/default.png"],
+  },
+};
 
 export const viewport: Viewport = {
   themeColor: "#ffffff",

app/page.tsx

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

components/cta.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { ArrowRight } from "lucide-react";
+import { ArrowRight, Apple } from "lucide-react";
 import Ripple from "./ui/ripple";
 import { motion } from "framer-motion";
 import { FADE_UP_ANIMATION_VARIANTS } from "@/lib/framer-variants";
@@ -28,22 +28,31 @@ export function CTA() {
         variants={FADE_UP_ANIMATION_VARIANTS}
         className="font-semibold text-3xl sm:text-4xl text-center"
       >
-        Start exploring
+        Ready to find your next opportunity?
       </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 work on the web or take Gibwork with you on iPhone.
       </motion.p>
 
-      <motion.div variants={FADE_UP_ANIMATION_VARIANTS}>
-        <Button asChild className="mt-8 group">
+      <motion.div
+        variants={FADE_UP_ANIMATION_VARIANTS}
+        className="mt-8 flex flex-col gap-3 sm:flex-row"
+      >
+        <Button asChild className="group">
           <Link href={siteConfig.appUrl} target="_blank">
-            Get Started
+            Browse active work
             <ArrowRight className="size-0 group-hover:size-5 transition-all -ml-2 group-hover:ml-0" />
           </Link>
         </Button>
+        <Button asChild variant="outline">
+          <Link href={siteConfig.appStoreUrl} target="_blank">
+            <Apple className="size-4" aria-hidden="true" />
+            Download for iPhone
+          </Link>
+        </Button>
       </motion.div>
 
       <Ripple mainCircleSize={320} numCircles={8} mainCircleOpacity={0.2} />

components/faq.tsx

@@ -1,8 +1,5 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
-import { ArrowRight } from "lucide-react";
-import Ripple from "./ui/ripple";
 import {
   Accordion,
   AccordionContent,
@@ -39,33 +36,51 @@ export function Faq() {
       <motion.div variants={FADE_UP_ANIMATION_VARIANTS} className="grow lg:max-w-3xl">
         <Accordion type="single" collapsible>
           <AccordionItem value="item-6">
-            <AccordionTrigger>How do I create Work on Gibwork?</AccordionTrigger>
+            <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 web app, choose Create, then select the type of work you
+              want to fund. Add clear requirements, a deadline, review criteria,
+              and the reward so contributors know exactly what success looks like.
             </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.
+              An open-source bounty connects a funded reward to a GitHub issue
+              and pull request. A task can cover any clearly defined deliverable,
+              including design, content, research, growth, or product feedback.
             </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 requested evidence before the deadline. Once the creator
+              approves your work, the funded reward is released to the wallet
+              connected to your Gibwork account.
             </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.
+              Rewards are funded and paid through wallet transactions, including
+              supported crypto assets and stablecoins such as USDC.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="item-mobile">
+            <AccordionTrigger>What can I do in the iPhone app?</AccordionTrigger>
+            <AccordionContent>
+              Browse active opportunities, review requirements, submit completed
+              work, track decisions, and manage your earnings from your phone.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="item-approval">
+            <AccordionTrigger>How do I improve my chance of approval?</AccordionTrigger>
+            <AccordionContent>
+              Read every requirement before starting, show evidence for each one,
+              submit only original work, and include links or screenshots that make
+              the result easy for the creator to verify.
             </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-app"}
+                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"
@@ -70,21 +77,30 @@ export function Footer() {
             <div className="text-sm flex flex-col gap-2 items-start">
               <p className="font-semibold">Resources</p>
               <Link
-                href={"https://legal.gib.work/privacy-policy.pdf"}
+                href={siteConfig.privacyUrl}
                  target="_blank"
                 className="text-muted-foreground transition-all hover:text-foreground group"
               >
                 Privacy Policy
                 <ExternalLink className="inline-block size-4 group-hover:scale-100 scale-0 transition-all ml-1" />
               </Link>
 
-              {/* <Link
-                href={"#"}
+              <Link
+                href={siteConfig.termsUrl}
+                target="_blank"
                 className="text-muted-foreground transition-all hover:text-foreground group"
               >
                 Terms of Use
                 <ExternalLink className="inline-block size-4 group-hover:scale-100 scale-0 transition-all ml-1" />
-              </Link> */}
+              </Link>
+              <Link
+                href={siteConfig.appStoreUrl}
+                target="_blank"
+                className="text-muted-foreground transition-all hover:text-foreground group"
+              >
+                iPhone App
+                <ExternalLink className="inline-block size-4 group-hover:scale-100 scale-0 transition-all ml-1" />
+              </Link>
             </div>
           </div>
         </div>
@@ -95,17 +111,24 @@ export function Footer() {
               href={siteConfig.youtubeUrl}
               target="_blank"
               className="hover:scale-105 transition-all"
+              aria-label="Gibwork on YouTube"
             >
               <YoutubeLogoMark className="size-5" />
             </Link>
             <Link
               href={siteConfig.discordUrl}
               target="_blank"
               className="hover:scale-105 transition-all"
+              aria-label="Join Gibwork on Discord"
             >
               <DiscordLogoMark className="size-5" />
             </Link>
-            <Link href={siteConfig.xUrl} target="_blank" className="hover:scale-105 transition-all">
+            <Link
+              href={siteConfig.xUrl}
+              target="_blank"
+              className="hover:scale-105 transition-all"
+              aria-label="Follow Gibwork on X"
+            >
               <TwitterLogoMark className="size-5" />
             </Link>
           </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, CheckCircle2, Download } from "lucide-react";
 import Image from "next/image";
 import dashboard from "@/public/dashboard-2.png";
 import { Badge } from "@/components/ui/badge";
@@ -11,8 +11,7 @@ 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"
-
+const proofPoints = ["Funded opportunities", "Clear requirements", "Track every submission"];
 
 export function Hero() {
   return (
@@ -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
+          Work from anywhere
           <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,19 +48,40 @@ 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.
+        Discover funded work, understand exactly what is required, and submit
+        from the web or the Gibwork app for iPhone.
       </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
+            Browse active work
             <ArrowRight className="size-0 group-hover:size-5 transition-all -ml-2 group-hover:ml-0" />
           </Link>
         </Button>
+        <Button variant="outline" className="group" asChild>
+          <Link href={siteConfig.appStoreUrl} target="_blank">
+            <Download className="size-4" />
+            Download for iPhone
+          </Link>
+        </Button>
       </motion.div>
 
+      <motion.ul
+        variants={FADE_UP_ANIMATION_VARIANTS}
+        className="mt-5 flex flex-wrap justify-center gap-x-5 gap-y-2 text-sm text-muted-foreground"
+      >
+        {proofPoints.map((point) => (
+          <li key={point} className="flex items-center gap-1.5">
+            <CheckCircle2 className="size-4 text-primary" aria-hidden="true" />
+            {point}
+          </li>
+        ))}
+      </motion.ul>
+
       <motion.div
         variants={FADE_UP_ANIMATION_VARIANTS}
         className="flex items-center gap-2 text-sm mt-4"
@@ -107,7 +127,11 @@ export function Hero() {
         <div className="rounded-t-lg bg-foreground/5 h-3 mx-12" />
         <div className="rounded-t-lg bg-foreground/10 h-3 mx-6" />
         <div className="rounded-lg overflow-hidden border bg-muted w-full">
-          <Image alt="" src={dashboard} />
+          <Image
+            alt="Gibwork dashboard showing funded opportunities and earnings"
+            src={dashboard}
+            priority
+          />
         </div>
         <div className="absolute inset-0 bg-gradient-to-t from-background via-background/60" />
       </motion.div>