mirror of
https://github.com/arkorty/B.Tech-Project-III.git
synced 2026-04-19 12:41:48 +00:00
init
This commit is contained in:
150
dmtp/client/app/_sections/hero-section.tsx
Normal file
150
dmtp/client/app/_sections/hero-section.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { useCUSDBalance } from "@/hooks/useCUSDBalance";
|
||||
import { useWalletConnection } from "@/hooks/useWalletConnection";
|
||||
import { motion } from "framer-motion"
|
||||
import { ArrowRight, CheckCircle } from "lucide-react"
|
||||
import { useState } from "react";
|
||||
|
||||
export function HeroSection() {
|
||||
const { address, isConnected, isConnecting, connect, disconnect, chainId } = useWalletConnection();
|
||||
const { authenticate, isAuthenticating, clearAuth, isAuthenticated } = useAuth();
|
||||
const { data: balance } = useCUSDBalance(address);
|
||||
const [showNetworkModal, setShowNetworkModal] = useState(false);
|
||||
|
||||
const expectedChainId = parseInt(process.env.NEXT_PUBLIC_CHAIN_ID || '11142220');
|
||||
const isWrongNetwork = isConnected && chainId !== expectedChainId;
|
||||
|
||||
const handleConnect = async () => {
|
||||
try {
|
||||
// Step 1: Connect wallet
|
||||
await connect();
|
||||
|
||||
// Step 2: Authenticate
|
||||
await authenticate();
|
||||
} catch (error) {
|
||||
console.error('Connection/Authentication error:', error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="relative min-h-[600px] flex items-center justify-center overflow-hidden px-4 sm:px-6 lg:px-8 py-20 pt-24 bg-white border-b-2 border-gray-200">
|
||||
{/* Green accent border on top */}
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-primary" />
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 max-w-5xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Left Column - Main Content */}
|
||||
<div>
|
||||
<motion.div
|
||||
className="inline-flex items-center gap-2 mb-6 px-3 py-1.5 border-2 border-primary bg-green-50"
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<CheckCircle className="w-4 h-4 text-primary" />
|
||||
<span className="text-sm font-semibold text-primary">
|
||||
AI-Powered Verification
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
>
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 leading-tight text-gray-900">
|
||||
Complete tasks.{" "}
|
||||
<span className="text-primary">
|
||||
Get verified by AI.
|
||||
</span>{" "}
|
||||
<span className="text-gray-900">Earn instantly.</span>
|
||||
</h1>
|
||||
</motion.div>
|
||||
|
||||
<motion.p
|
||||
className="text-lg text-gray-600 mb-8 leading-relaxed"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
>
|
||||
Join the AI-powered microtask marketplace on Celo Sepolia. Complete data labeling, surveys, and content
|
||||
moderation tasks. Get paid in cUSD instantly.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
className="flex flex-col sm:flex-row gap-4 mb-8"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.3 }}
|
||||
>
|
||||
<Button
|
||||
onClick={handleConnect}
|
||||
size="lg"
|
||||
className="font-semibold"
|
||||
>
|
||||
Connect Wallet <ArrowRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
>
|
||||
Try Demo
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
{/* Feature Pills */}
|
||||
<motion.div
|
||||
className="flex flex-wrap items-center gap-4 text-sm text-gray-600"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.4 }}
|
||||
>
|
||||
{[
|
||||
{ label: "Powered by Gemini AI" },
|
||||
{ label: "Built on Celo Sepolia" },
|
||||
{ label: "Instant Payments" },
|
||||
].map((item, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 border border-gray-200"
|
||||
>
|
||||
<div className="w-1.5 h-1.5 bg-primary " />
|
||||
{item.label}
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Stats Box */}
|
||||
<motion.div
|
||||
className="bg-gray-50 border-2 border-gray-200 p-8"
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
>
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-6 pb-3 border-b-2 border-gray-200">Platform Statistics</h3>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<div className="text-3xl font-bold text-primary mb-1">2,847</div>
|
||||
<div className="text-sm text-gray-600">Active Tasks</div>
|
||||
</div>
|
||||
<div className="border-t border-gray-200 pt-6">
|
||||
<div className="text-3xl font-bold text-primary mb-1">$24,392</div>
|
||||
<div className="text-sm text-gray-600">Paid This Week</div>
|
||||
</div>
|
||||
<div className="border-t border-gray-200 pt-6">
|
||||
<div className="text-3xl font-bold text-primary mb-1">15,234</div>
|
||||
<div className="text-sm text-gray-600">Verified Workers</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user