Skip to content

feat: landing page enhancements — mobile app section, how it works, updated hero/nav/footer #85

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
oluwafemi83 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: landing page enhancements — mobile app section, how it works, updated hero/nav/footer #85

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
4 changes: 4 additions & 0 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,18 @@ import { CTA } from "@/components/cta";
import { Footer } from "@/components/footer";
import { Testimonial } from "@/components/testimonial";
import { Faq } from "@/components/faq";
import { HowItWorks } from "@/components/how-it-works";
import { MobileApp } from "@/components/mobile-app";

export default function Home() {
return (
<div className="flex flex-col z-0 relative">
<Nav />
<Hero />
<LogoList />
<HowItWorks />
<LookingFor />
<MobileApp />
<Testimonial />
<CTA />
<Faq />
Expand Down
33 changes: 23 additions & 10 deletions components/cta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,33 +17,46 @@ export function CTA() {
variants={{
hidden: {},
show: {
transition: {
staggerChildren: 0.15,
},
transition: { staggerChildren: 0.15 },
},
}}
className="relative py-24 sm:py-32 border-y px-4 sm:px-6 flex items-center w-full max-w-7xl mx-auto justify-center flex-col overflow-hidden"
>
<motion.p
variants={FADE_UP_ANIMATION_VARIANTS}
className="text-primary font-semibold text-sm"
>
GET STARTED TODAY
</motion.p>
<motion.h2
variants={FADE_UP_ANIMATION_VARIANTS}
className="font-semibold text-3xl sm:text-4xl text-center"
className="font-semibold text-3xl sm:text-4xl text-center mt-2"
>
Start exploring
Ready to earn your first crypto payment?
</motion.h2>
<motion.p
variants={FADE_UP_ANIMATION_VARIANTS}
className="text-center mt-2 text-muted-foreground"
className="text-center mt-3 text-muted-foreground max-w-md"
>
Check out gibwork and create or complete your very first work.
Join thousands of contributors and hundreds of Web3 projects. Connect your wallet and
start in minutes — no fees, no middlemen.
</motion.p>

<motion.div variants={FADE_UP_ANIMATION_VARIANTS}>
<Button asChild className="mt-8 group">
<motion.div
variants={FADE_UP_ANIMATION_VARIANTS}
className="flex items-center gap-3 mt-8 flex-wrap justify-center"
>
<Button asChild className="group">
<Link href={siteConfig.appUrl} target="_blank">
Get Started
Get Started Free
<ArrowRight className="size-0 group-hover:size-5 transition-all -ml-2 group-hover:ml-0" />
</Link>
</Button>
<Button asChild variant="outline">
<Link href="https://docs.gib.work/" target="_blank">
Read the Docs
</Link>
</Button>
</motion.div>

<Ripple mainCircleSize={320} numCircles={8} mainCircleOpacity={0.2} />
Expand Down
126 changes: 52 additions & 74 deletions components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,103 +14,81 @@ export function Footer() {
<footer className="relative w-full sm:pb-12 sm:px-6">
<div className="w-full max-w-7xl mx-auto p-4 sm:p-8 shadow-sm sm:border border-0 border-t sm:rounded-lg rounded-none flex flex-col">
<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-start flex-col max-w-xs">
<div className="flex items-center gap-2">
<Image alt="" src={logo} className="size-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>
<p className="text-muted-foreground sm:text-base text-sm">
Meet like-minded people and find work opportunities easily.
<p className="text-muted-foreground text-sm mt-4 leading-relaxed">
The Web3-native marketplace for crypto bounties, open-source contributions,
and skilled work — powered by Solana.
</p>
<div className="flex items-center gap-4 mt-6">
<Link href={siteConfig.youtubeUrl} target="_blank" className="hover:scale-105 transition-all">
<YoutubeLogoMark className="size-5" />
</Link>
<Link href={siteConfig.discordUrl} target="_blank" className="hover:scale-105 transition-all">
<DiscordLogoMark className="size-5" />
</Link>
<Link href={siteConfig.xUrl} target="_blank" className="hover:scale-105 transition-all">
<TwitterLogoMark className="size-5" />
</Link>
</div>
</div>

<div className="grid grid-cols-2 gap-24">
<div className="grid grid-cols-3 gap-12 sm:gap-20">
<div className="text-sm flex flex-col gap-2 items-start">
<p className="font-semibold">Quick links</p>
<Link
href={"/#about"}
className="text-muted-foreground transition-all hover:text-foreground group"
>
About
<ArrowRight className="inline-block size-4 group-hover:scale-100 scale-0 transition-all ml-1" />
<p className="font-semibold">Product</p>
<Link href={siteConfig.appUrl} target="_blank" className="text-muted-foreground transition-all hover:text-foreground group">
Browse Tasks <ArrowRight className="inline-block size-4 group-hover:scale-100 scale-0 transition-all ml-1" />
</Link>
<Link href={siteConfig.appUrl} target="_blank" className="text-muted-foreground transition-all hover:text-foreground group">
Post a Task <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="/#how-it-works" className="text-muted-foreground transition-all hover:text-foreground group">
How It Works <ArrowRight className="inline-block size-4 group-hover:scale-100 scale-0 transition-all ml-1" />
</Link>
</div>

<Link
href={"/#testimonial"}
className="text-muted-foreground transition-all hover:text-foreground group"
>
Testimonial
<ArrowRight className="inline-block size-4 group-hover:scale-100 scale-0 transition-all ml-1" />
<div className="text-sm flex flex-col gap-2 items-start">
<p className="font-semibold">Quick Links</p>
<Link href="/#about" className="text-muted-foreground transition-all hover:text-foreground group">
About <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"
>
Team
<ArrowRight className="inline-block size-4 group-hover:scale-100 scale-0 transition-all ml-1" />
</Link> */}
<Link
href={"/#faq"}
className="text-muted-foreground transition-all hover:text-foreground group"
>
FAQ
<ArrowRight className="inline-block size-4 group-hover:scale-100 scale-0 transition-all ml-1" />
<Link href="/#testimonial" className="text-muted-foreground transition-all hover:text-foreground group">
Testimonials <ArrowRight className="inline-block size-4 group-hover:scale-100 scale-0 transition-all ml-1" />
</Link>
<Link
href={"https://docs.gib.work/"}
target="_blank"
className="text-muted-foreground transition-all hover:text-foreground group"
>
Docs
<ArrowRight className="inline-block size-4 group-hover:scale-100 scale-0 transition-all ml-1" />
<Link href="/#faq" className="text-muted-foreground transition-all hover:text-foreground group">
FAQ <ArrowRight className="inline-block size-4 group-hover:scale-100 scale-0 transition-all ml-1" />
</Link>
<Link href="https://docs.gib.work/" target="_blank" className="text-muted-foreground transition-all hover:text-foreground group">
Docs <ArrowRight className="inline-block size-4 group-hover:scale-100 scale-0 transition-all ml-1" />
</Link>
</div>

<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"}
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 href="https://legal.gib.work/privacy-policy.pdf" 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="https://docs.gib.work/" target="_blank" className="text-muted-foreground transition-all hover:text-foreground group">
API Docs <ExternalLink className="inline-block size-4 group-hover:scale-100 scale-0 transition-all ml-1" />
</Link>
<Link href={siteConfig.discordUrl} target="_blank" className="text-muted-foreground transition-all hover:text-foreground group">
Community <ExternalLink className="inline-block size-4 group-hover:scale-100 scale-0 transition-all ml-1" />
</Link>

{/* <Link
href={"#"}
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> */}
</div>
</div>
</div>

<div className="flex sm:items-end justify-between mt-12 w-full sm:flex-row flex-col gap-4">
<div className="flex items-center gap-4">
<Link
href={siteConfig.youtubeUrl}
target="_blank"
className="hover:scale-105 transition-all"
>
<YoutubeLogoMark className="size-5" />
</Link>
<Link
href={siteConfig.discordUrl}
target="_blank"
className="hover:scale-105 transition-all"
>
<DiscordLogoMark className="size-5" />
</Link>
<Link href={siteConfig.xUrl} target="_blank" className="hover:scale-105 transition-all">
<TwitterLogoMark className="size-5" />
</Link>
<div className="flex sm:items-end justify-between mt-12 w-full sm:flex-row flex-col gap-4 border-t pt-6">
<p className="text-xs text-muted-foreground">© 2024 gibwork. All rights reserved. Made with ♥ by the gibwork team.</p>
<div className="flex items-center gap-1 text-xs text-muted-foreground">
Powered by <span className="font-semibold ml-1">◎ Solana</span>
</div>

<p className="text-xs text-muted-foreground">Made with ♥ by gibwork</p>
</div>
</div>
</footer>
Expand Down
82 changes: 38 additions & 44 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, Smartphone } from "lucide-react";
import Image from "next/image";
import dashboard from "@/public/dashboard-2.png";
import { Badge } from "@/components/ui/badge";
Expand All @@ -11,8 +11,13 @@ 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 stats = [
{ value: "5,000+", label: "Tasks Completed" },
{ value: "$2M+", label: "Paid to Contributors" },
{ value: "3,200+", label: "Active Members" },
{ value: "48h", label: "Avg. Completion" },
];

export function Hero() {
return (
Expand All @@ -23,24 +28,22 @@ export function Hero() {
variants={{
hidden: {},
show: {
transition: {
staggerChildren: 0.15,
},
transition: { staggerChildren: 0.15 },
},
}}
className="relative flex pt-16 sm:pt-24 pb-24 sm:pb-32 text-center flex-col justify-center items-center px-4 sm:px-6 w-full mx-auto max-w-7xl"
className="relative flex pt-16 sm:pt-24 pb-12 sm:pb-20 text-center flex-col justify-center items-center px-4 sm:px-6 w-full mx-auto max-w-7xl"
>
<motion.div variants={FADE_UP_ANIMATION_VARIANTS}>
<Badge variant={"secondary"}>
<div className="size-1 rounded-full bg-muted-foreground mr-2" />
Introducing gibwork
<div className="size-1.5 rounded-full bg-green-500 mr-2 animate-pulse" />
Now live on Solana — earn crypto for real work
<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="Earn Crypto. Find Talent."
className="font-semibold text-5xl sm:text-6xl mt-4"
/>
</motion.div>
Expand All @@ -49,65 +52,56 @@ 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.
gibwork is the Web3-native marketplace where skilled contributors complete real tasks
and get paid instantly in USDC, SOL, and any Solana SPL token.
</motion.p>

<motion.div variants={FADE_UP_ANIMATION_VARIANTS}>
<Button className="group mt-8" asChild>
<motion.div
variants={FADE_UP_ANIMATION_VARIANTS}
className="flex items-center gap-3 mt-8 flex-wrap justify-center"
>
<Button className="group" asChild>
<Link href={siteConfig.appUrl} target="_blank">
Get Started For Free
Start Earning Free
<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="#mobile-app">
<Smartphone className="size-4 mr-1" />
Get the Mobile App
</Link>
</Button>
</motion.div>

<motion.div
variants={FADE_UP_ANIMATION_VARIANTS}
className="flex items-center gap-2 text-sm mt-4"
>

<span className="opacity-80">powered by</span>
<Link
href={"https://solana.com/"}
target="_blank"
className="hover:scale-105 transition-all"
>
<Link href={"https://solana.com/"} target="_blank" className="hover:scale-105 transition-all">
<SolanaLogoType className="w-20 fill-foreground" />
</Link>
</motion.div>

{/* <motion.div
{/* Stats Row */}
<motion.div
variants={FADE_UP_ANIMATION_VARIANTS}
className="flex items-center gap-2 text-sm mt-4 p-1 font-light"
className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-12 w-full max-w-3xl"
>
<div className="flex relative flex-row bg-stone-100 rounded-sm">
<div className="flex justify-center align-middle pt-2 mb-2 px-1">
<img src="https://media.gib.work/work-logo.png" className="rounded-full w-5" />
<span className="ms-2 opacity-80 font-medium md:visible hidden">CA</span>
</div>
<div className="md:flex hidden pt-2">
F7Hwf8ib5DVCoiuyGr618Y3gon429Rnd1r5F9R5upump
</div>
<div className="flex md:hidden pt-2">
F7Hwf8ib5D.....d1r5F9R5upump
</div>
<div className="bg-stone-100 hidden md:flex items-center w-16 py-1 justify-center border-s-2 border-white ms-1 rounded-e-lg">
<Clipboard.WithIconText className="bg-stone-50 border-none p-0 px-1 text-black hover:text-black"
valueToCopy="F7Hwf8ib5DVCoiuyGr618Y3gon429Rnd1r5F9R5upump" />
{stats.map((stat) => (
<div key={stat.label} className="flex flex-col items-center p-4 rounded-xl bg-muted/50 border">
<span className="text-2xl font-bold text-primary">{stat.value}</span>
<span className="text-xs text-muted-foreground mt-1">{stat.label}</span>
</div>
<div className="bg-stone-100 block w-16 md:hidden items-center justify-start border-s-2 border-white ms-1 rounded-e-lg">
<Clipboard.WithIconText className="bg-stone-100 border-none p-0 pt-2 px-1 flex text-black hover:text-black"
valueToCopy="F7Hwf8ib5DVCoiuyGr618Y3gon429Rnd1r5F9R5upump" />
</div>
</div>
</motion.div> */}
))}
</motion.div>

<motion.div variants={FADE_UP_ANIMATION_VARIANTS} className="mt-16 sm:mt-24 relative z-0">
<motion.div variants={FADE_UP_ANIMATION_VARIANTS} className="mt-14 sm:mt-20 relative z-0">
<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" src={dashboard} />
</div>
<div className="absolute inset-0 bg-gradient-to-t from-background via-background/60" />
</motion.div>
Expand Down
Loading