Skip to content

enhanced landing page with all updates #138

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

enhanced landing page with all updates #138

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
12 changes: 11 additions & 1 deletion app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,24 @@ import { CTA } from "@/components/cta";
import { Footer } from "@/components/footer";
import { Testimonial } from "@/components/testimonial";
import { Faq } from "@/components/faq";
import HowItWorks from "@/components/hiw";
import MobileApp from "@/components/mobileapp";
import Features from "@/components/features";
import ReferralSection from "@/components/referral-section";
import MembershipSection from "@/components/membership-section";

export default function Home() {
return (
<div className="flex flex-col z-0 relative">
<Nav />
<Hero />
<LogoList />
<LookingFor />
{/* <LookingFor /> */}
<Features/>
<HowItWorks/>
<MobileApp/>
<ReferralSection/>
<MembershipSection/>
<Testimonial />
<CTA />
<Faq />
Expand Down
9 changes: 9 additions & 0 deletions components/faq.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
} from "@/components/ui/accordion";
import { motion } from "framer-motion";
import { FADE_UP_ANIMATION_VARIANTS } from "@/lib/framer-variants";
import Link from "next/link";

export function Faq() {
return (
Expand Down Expand Up @@ -68,6 +69,14 @@ export function Faq() {
your wallet in the form of crypto or stablecoins.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-4">
<AccordionTrigger>Other query?</AccordionTrigger>
<AccordionContent>
<Link href="https://discord.com/invite/TNXJjpRvqN" target="_blank" className="text-violet-600 underline">
Join our Discord
</Link>
</AccordionContent>
</AccordionItem>
{/* <AccordionItem value="item-4">
<AccordionTrigger>Are there any fees for using gibwork?</AccordionTrigger>
<AccordionContent>
Expand Down
97 changes: 97 additions & 0 deletions components/features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
"use client";

import { Link2, Crown, Headphones, Gift, Users } from "lucide-react";

const cards = [
{
icon: Link2,
tag: "Transparency",
title: "On-chain transparent txns",
pill: "Solana · 0.4s",

},
{
icon: Users,
tag: "Community",
title: "10k+ active freelancers",
pill: "Growing daily",

},
{
icon: Users,
tag: "Opportunity",
title: "$12000+ worth tasks completed",
pill: "Growing daily",

},
{
icon: Headphones,
tag: "Support",
title: "24×7 human support",
pill: "Always online",
},
{
icon: Crown,
tag: "Premium",
title: "Verified premium users",
pill: "Exclusive access",

}
];

export default function Features() {
return (
<section id="features" className="bg-white py-20 lg:py-28 px-6 font-sans">
<div className="mx-auto max-w-4xl lg:max-w-5xl">

{/* heading */}
<div className="text-center mb-14">
<p className="text-[11px] font-semibold uppercase tracking-widest text-violet-600 mb-3">
Why Gibwork
</p>
<h2 className="text-4xl lg:text-5xl font-bold tracking-tight leading-[1.1] text-black mb-4">
Built for trust.<br />Designed for speed.
</h2>
<p className="text-base lg:text-lg text-neutral-500 leading-relaxed max-w-md mx-auto">
Everything you need to work, earn, and grow — backed by the blockchain.
</p>
</div>

{/* 5 cards grid */}
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 lg:gap-4">
{cards.map((card) => {
const Icon = card.icon;
return (
<div
key={card.title}
className="border border-neutral-200 rounded-2xl p-6 bg-white hover:border-violet-300 transition-colors duration-200 flex flex-col"
>
<div
className={[
"w-10 h-10 rounded-xl flex items-center justify-center mb-4 bg-violet-50 border border-violet-100"
].join(" ")}
>
<Icon className={["w-5 h-5 text-violet-600"].join(" ")} />
</div>
<p className={["text-[10px] font-semibold uppercase tracking-widest mb-2 text-violet-500"].join(" ")}>
{card.tag}
</p>
<h3 className="text-sm font-semibold text-black leading-snug flex-1">
{card.title}
</h3>
<div
className={[
"inline-flex items-center gap-1.5 mt-5 rounded-full px-3 py-1.5 bg-violet-50 border border-violet-100"].join(" ")}
>
<span className={["text-[11px] font-semibold text-violet-700"].join(" ")}>
{card.pill}
</span>
</div>
</div>
);
})}
</div>
</div>
</section>
);
}
53 changes: 48 additions & 5 deletions components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ import { ArrowRight, ExternalLink } from "lucide-react";
import { YoutubeLogoMark } from "./logo/youtube";
import { DiscordLogoMark } from "./logo/discord";
import { TwitterLogoMark } from "./logo/twitter";
import { TelegramLogoMark } from "./logo/telegram";
import { RedditLogoMark } from "./logo/reddit";
import { TikTokLogoMark } from "./logo/tiktok";

export function Footer() {
return (
Expand Down Expand Up @@ -36,6 +39,28 @@ export function Footer() {
<ArrowRight className="inline-block size-4 group-hover:scale-100 scale-0 transition-all ml-1" />
</Link>

<Link
href={"/#features"}
className="text-muted-foreground transition-all hover:text-foreground group"
>
Why Us
<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>
<Link
href={"/#mobileapp"}
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={"/#testimonial"}
className="text-muted-foreground transition-all hover:text-foreground group"
Expand All @@ -57,18 +82,18 @@ export function Footer() {
FAQ
<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://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" />
<ExternalLink 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"
Expand All @@ -77,6 +102,15 @@ export function Footer() {
Privacy Policy
<ExternalLink className="inline-block size-4 group-hover:scale-100 scale-0 transition-all ml-1" />
</Link>
<Link
href={"https://app.gib.work/terms"}
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
href={"#"}
Expand Down Expand Up @@ -108,6 +142,15 @@ export function Footer() {
<Link href={siteConfig.xUrl} target="_blank" className="hover:scale-105 transition-all">
<TwitterLogoMark className="size-5" />
</Link>
<Link href={siteConfig.telegramUrl} target="_blank" className="hover:scale-105 transition-all">
<TelegramLogoMark className="size-5" />
</Link>
<Link href={siteConfig.redditUrl} target="_blank" className="hover:scale-105 transition-all">
<RedditLogoMark className="size-5" />
</Link>
<Link href={siteConfig.tiktokUrl} target="_blank" className="hover:scale-105 transition-all">
<TikTokLogoMark className="size-5" />
</Link>
</div>

<p className="text-xs text-muted-foreground">Made with ♥ by gibwork</p>
Expand Down
25 changes: 18 additions & 7 deletions components/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

import { SolanaLogoType } from "@/components/logo/solana";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
import { ArrowRight, Laptop , Smartphone} from "lucide-react";
import Image from "next/image";
import dashboard from "@/public/dashboard-2.png";
import dashboard from "@/public/v3homepage.png";
import { Badge } from "@/components/ui/badge";
import Link from "next/link";
import { siteConfig } from "@/lib/site-config";
Expand Down Expand Up @@ -33,7 +33,7 @@ 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
Introducing gibwork V3
<div className="size-1 rounded-full bg-muted-foreground ml-2" />
</Badge>
</motion.div>
Expand All @@ -49,19 +49,30 @@ 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.
Connect with freelancers, creators, and businesses worldwide to complete tasks, hire talent, and build faster with Web3.
</motion.p>

<motion.div variants={FADE_UP_ANIMATION_VARIANTS}>
<div className="flex items-center gap-2 text-sm mt-4">
<motion.div variants={FADE_UP_ANIMATION_VARIANTS}>
<Button className="group mt-8" asChild>
<Link href={siteConfig.appUrl} target="_blank">
Get Started For Free
<Laptop/>Start Earning
<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}>
<Button className="group mt-8" asChild>
<Link href={"/#mobileapp"}>
<Smartphone/> Download App
<ArrowRight className="size-0 group-hover:size-5 transition-all -ml-2 group-hover:ml-0" />
</Link>
</Button>
</motion.div>

</div>


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