Improve landing page clarity and mobile discovery

AI_DISCLOSURE.md

@@ -0,0 +1,3 @@
+# AI disclosure
+
+This contribution was created with AI assistance using OpenAI Codex. The changes were reviewed, tested locally, and checked against the task requirements by the submitting contributor.

app/layout.tsx

@@ -1,27 +1,40 @@
-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";
 
 const inter = Inter({ subsets: ["latin"] });
 
-export async function generateMetadata(
-  { params, searchParams }: any,
-  parent: ResolvingMetadata
-): Promise<Metadata> {
-  return {
-    title: "Gibwork | Find Talent, Find Work",
+export const metadata: Metadata = {
+  metadataBase: new URL("https://gib.work"),
+  title: "Gibwork | Find Talent, Find Work",
+  description:
+    "Post work, fund it in escrow, and pay on approval. Gibwork connects builders, designers, and creators with paid tasks and open-source bounties on Solana.",
+  alternates: {
+    canonical: "/",
+  },
+  openGraph: {
+    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`],
-    },
-  };
-}
+      "Post work, fund it in escrow, and pay on approval. Find paid tasks and open-source bounties on Gibwork.",
+    url: "https://gib.work/",
+    images: ["https://cdn.gib.work/metadata/default.png"],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Gibwork — find talent, find work",
+    description:
+      "Post work, fund it in escrow, and pay on approval. Find paid tasks and open-source bounties on Gibwork.",
+    images: ["https://cdn.gib.work/metadata/default.png"],
+  },
+};
 
 export const viewport: Viewport = {
-  themeColor: "#ffffff",
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "#ffffff" },
+    { media: "(prefers-color-scheme: dark)", color: "#0a0a0a" },
+  ],
 };
 
 export default function RootLayout({

components/faq.tsx

@@ -41,9 +41,7 @@ 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.
+              From the home page, choose Create to post an open-source bounty or a task. The guided flow helps you describe the work, set the reward, and publish it for contributors.
             </AccordionContent>
           </AccordionItem>
           <AccordionItem value="item-1">
@@ -58,23 +56,28 @@ export function Faq() {
           <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.
+              Once the creator approves your completed work, the reward is released to your Gibwork balance. Work is funded in escrow before you start, so the reward is available for release when the work is accepted.
             </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.
+              Work is funded and paid in SPL tokens on Solana. USDC and SOL are common options, and you can connect a wallet when you are ready to manage on-chain funds.
             </AccordionContent>
           </AccordionItem>
-          {/* <AccordionItem value="item-4">
+          <AccordionItem value="item-4">
+            <AccordionTrigger>Do I need a crypto wallet to get started?</AccordionTrigger>
+            <AccordionContent>
+              No. You can sign up with email or a supported social sign-in without bringing a wallet. You can connect a wallet later if you want to manage on-chain funds directly.
+            </AccordionContent>
+          </AccordionItem>
+          {/* <AccordionItem value="item-5">
             <AccordionTrigger>Are there any fees for using gibwork?</AccordionTrigger>
             <AccordionContent>
               Gibwork charges a 5% service fee on transactions, the lowest in the industry!
             </AccordionContent>
           </AccordionItem> */}
-          {/* <AccordionItem value="item-5">
+          {/* <AccordionItem value="item-7">
             <AccordionTrigger>What is the purpose of the $WORK token?</AccordionTrigger>
             <AccordionContent>
               The $WORK Token provide access to a range of utilities within the platform, which could include community voting rights and participation in allocation of rewards funded by operational revenue.

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, Smartphone } from "lucide-react";
 import Image from "next/image";
 import dashboard from "@/public/dashboard-2.png";
 import { Badge } from "@/components/ui/badge";
@@ -40,6 +40,7 @@ export function Hero() {
 
       <motion.div variants={FADE_UP_ANIMATION_VARIANTS} className="relative z-0">
         <SparklesText
+          as="h1"
           text="Find Talent, Find Work"
           className="font-semibold text-5xl sm:text-6xl mt-4"
         />
@@ -53,13 +54,22 @@ export function Hero() {
         connects you with the perfect match.
       </motion.p>
 
-      <motion.div variants={FADE_UP_ANIMATION_VARIANTS}>
-        <Button className="group mt-8" asChild>
-          <Link href={siteConfig.appUrl} target="_blank">
+      <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" rel="noreferrer">
             Get Started For Free
             <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.iosAppUrl} target="_blank" rel="noreferrer">
+            <Smartphone className="size-4" aria-hidden="true" />
+            Get the iOS app
+          </Link>
+        </Button>
       </motion.div>
 
       <motion.div

components/ui/sparkles-text.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { CSSProperties, ReactElement, useEffect, useState } from "react";
+import { CSSProperties, useEffect, useState } from "react";
 import { motion } from "framer-motion";
 
 import { cn } from "@/lib/utils";
@@ -18,11 +18,11 @@ interface Sparkle {
 interface SparklesTextProps {
   /**
    * @default <div />
-   * @type ReactElement
+   * @type keyof JSX.IntrinsicElements
    * @description
    * The component to be rendered as the text
    * */
-  as?: ReactElement;
+  as?: keyof JSX.IntrinsicElements;
 
   /**
    * @default ""
@@ -65,6 +65,7 @@ const SparklesText: React.FC<SparklesTextProps> = ({
   colors = { first: "#9E7AFF", second: "#FE8BBB" },
   className,
   sparklesCount = 10,
+  as = "div",
   ...props
 }) => {
   const [sparkles, setSparkles] = useState<Sparkle[]>([]);
@@ -102,10 +103,12 @@ const SparklesText: React.FC<SparklesTextProps> = ({
     const interval = setInterval(updateStars, 100);
 
     return () => clearInterval(interval);
-  }, [colors.first, colors.second]);
+  }, [colors.first, colors.second, sparklesCount]);
+
+  const Component = as;
 
   return (
-    <div
+    <Component
       className={cn("text-6xl font-bold", className)}
       {...props}
       style={
@@ -121,7 +124,7 @@ const SparklesText: React.FC<SparklesTextProps> = ({
         ))}
         <strong>{text}</strong>
       </span>
-    </div>
+    </Component>
   );
 };
 

lib/site-config.ts

@@ -8,6 +8,7 @@ export const siteConfig = {
   youtubeUrl: "https://www.youtube.com/@gibwork_",
   xUrl: "https://twitter.com/intent/follow?screen_name=gib_work",
   appUrl: "https://app.gib.work/",
+  iosAppUrl: "https://apps.apple.com/us/app/gibwork/id6757281508",
   xHandle: "gib_work",
   themeColor: "#ffffff",
 };