Skip to content

Refresh landing page positioning for current Gibwork product #95

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
asddda121 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Refresh landing page positioning for current Gibwork product #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 15 additions & 5 deletions components/cta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
import { ArrowRight, Smartphone } from "lucide-react";
import Ripple from "./ui/ripple";
import { motion } from "framer-motion";
import { FADE_UP_ANIMATION_VARIANTS } from "@/lib/framer-variants";
Expand All @@ -28,22 +28,32 @@ export function CTA() {
variants={FADE_UP_ANIMATION_VARIANTS}
className="font-semibold text-3xl sm:text-4xl text-center"
>
Start exploring
Start from web or iPhone
</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.
Create paid work, browse bounties, submit deliverables, and follow
approvals from one place.
</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 items-center justify-center gap-3 sm:flex-row"
>
<Button asChild className="group">
<Link href={siteConfig.appUrl} target="_blank">
Get Started
<ArrowRight className="size-0 group-hover:size-5 transition-all -ml-2 group-hover:ml-0" />
</Link>
</Button>
<Button asChild variant="outline" className="group">
<Link href={siteConfig.appStoreUrl} target="_blank">
<Smartphone className="size-4" />
Download iOS App
</Link>
</Button>
</motion.div>

<Ripple mainCircleSize={320} numCircles={8} mainCircleOpacity={0.2} />
Expand Down
20 changes: 12 additions & 8 deletions components/faq.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
In the app, use the create flow to post an open-source bounty,
simple task, or service request. Add clear instructions, proof
requirements, and the reward so contributors know exactly what to
submit.
</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 usually tied to a GitHub issue or pull request. A task
is a smaller, self-contained job such as feedback, content,
testing, research, or a one-off deliverable.
</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.
Once the creator approves your submission, escrowed funds are
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 transactions and stablecoin rewards
such as USDC, with funds paid directly to the worker&apos;s wallet
after approval.
</AccordionContent>
</AccordionItem>
{/* <AccordionItem value="item-4">
Expand Down
48 changes: 38 additions & 10 deletions components/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import { SolanaLogoType } from "@/components/logo/solana";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
import { ArrowRight, ShieldCheck, Smartphone, Wallet } from "lucide-react";
import Image from "next/image";
import dashboard from "@/public/dashboard-2.png";
import { Badge } from "@/components/ui/badge";
Expand All @@ -11,10 +11,14 @@ 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() {
const proofPoints = [
{ icon: ShieldCheck, label: "Escrow-backed tasks" },
{ icon: Wallet, label: "Stablecoin payouts" },
{ icon: Smartphone, label: "Submit from iPhone" },
];

return (
<motion.section
initial="hidden"
Expand All @@ -33,14 +37,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="Tasks, bounties, and payouts in one workflow"
className="font-semibold text-5xl sm:text-6xl mt-4"
/>
</motion.div>
Expand All @@ -49,17 +53,41 @@ 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.
Post paid work, complete clear submissions, and track approvals through escrowed
stablecoin payouts on web or 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 items-center justify-center gap-3 sm:flex-row"
>
<Button className="group" asChild>
<Link href={siteConfig.appUrl} target="_blank">
Get Started For Free
Open App
<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">
<Smartphone className="size-4" />
Download iOS App
</Link>
</Button>
</motion.div>

<motion.div
variants={FADE_UP_ANIMATION_VARIANTS}
className="mt-6 flex max-w-3xl flex-wrap items-center justify-center gap-2 text-sm text-muted-foreground"
>
{proofPoints.map((item) => (
<div
key={item.label}
className="flex items-center gap-2 rounded-full border bg-background px-3 py-1.5"
>
<item.icon className="size-4 text-foreground" />
{item.label}
</div>
))}
</motion.div>

<motion.div
Expand Down
22 changes: 11 additions & 11 deletions components/looking-for.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const workDetails = [
// },
{
image: "/tasks/image-03.png",
title: "Use slug- to share a set of links on X or Reddit",
title: "Review a product flow and submit UX feedback",
amount: 100,
token: "usdc",
},
Expand Down Expand Up @@ -78,15 +78,15 @@ export function LookingFor() {
variants={FADE_UP_ANIMATION_VARIANTS}
className="text-3xl sm:text-4xl text-center font-semibold"
>
Get help from an expert
Get work done with clear deliverables
</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.
Create bounties, tasks, or services with instructions, review
submissions, and release payment when the work is approved.
</motion.p>

<motion.div
Expand Down Expand Up @@ -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 a pull request tied to a GitHub issue.
</CardDescription>
</CardHeader>
</Card>
Expand All @@ -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.
Define small, reviewable tasks with clear proof requirements.
</CardDescription>
</CardHeader>
</Card>
Expand All @@ -145,8 +145,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 ongoing help for design, growth, research, support, and
other custom services.
</CardDescription>
</CardHeader>
</Card>
Expand All @@ -172,14 +172,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 anywhere
</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, understand the submission requirements,
and track your progress from claim to payout.
</motion.p>

<motion.div
Expand Down
3 changes: 2 additions & 1 deletion lib/site-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.",
"Gibwork is an onchain freelance marketplace for tasks, GitHub bounties, stablecoin payouts, and mobile-first work submissions.",
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/app/gibwork/id6757281508",
xHandle: "gib_work",
themeColor: "#ffffff",
};