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:
213
dmtp/client/app/page.tsx
Normal file
213
dmtp/client/app/page.tsx
Normal file
@@ -0,0 +1,213 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { motion } from "framer-motion";
|
||||
import { ArrowRight, ChevronDown } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { FeatureShowcase } from "./_sections/feature-showcase";
|
||||
import { HeroSection } from "./_sections/hero-section";
|
||||
import { HowItWorks } from "./_sections/how-it-works";
|
||||
import { IntegrationsSection } from "./_sections/integrations-section";
|
||||
import { StatsSection } from "./_sections/stats-section";
|
||||
import { TaskExamples } from "./_sections/task-examples";
|
||||
import { Testimonials } from "./_sections/testimonials";
|
||||
|
||||
export default function Home() {
|
||||
const [expandedFaq, setExpandedFaq] = useState<number | null>(null);
|
||||
|
||||
const faqItems = [
|
||||
{
|
||||
q: "How much can I earn?",
|
||||
a: "Earnings vary by task complexity. Most workers earn $200-500/month.",
|
||||
},
|
||||
{
|
||||
q: "How long does verification take?",
|
||||
a: "AI verification is instant. Most tasks are approved within seconds.",
|
||||
},
|
||||
{
|
||||
q: "When do I get paid?",
|
||||
a: "Payments are instant to your Celo wallet. No waiting periods.",
|
||||
},
|
||||
{
|
||||
q: "Is there a minimum withdrawal?",
|
||||
a: "No minimum. Withdraw any amount anytime to your wallet.",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-white">
|
||||
<HeroSection />
|
||||
<StatsSection />
|
||||
<FeatureShowcase />
|
||||
<TaskExamples />
|
||||
<HowItWorks />
|
||||
<Testimonials />
|
||||
<IntegrationsSection />
|
||||
|
||||
{/* Security & Trust Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50 border-y-2 border-gray-200">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<motion.div
|
||||
className="text-center mb-12"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold mb-4 text-gray-900">
|
||||
Secure &{" "}
|
||||
<span className="text-primary">
|
||||
Transparent
|
||||
</span>
|
||||
</h2>
|
||||
<p className="text-base text-gray-600">
|
||||
Your earnings and data are protected with blockchain technology
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{[
|
||||
{
|
||||
title: "Smart Contract Verified",
|
||||
desc: "All payments verified on-chain",
|
||||
},
|
||||
{
|
||||
title: "Zero Hidden Fees",
|
||||
desc: "100% transparent pricing model",
|
||||
},
|
||||
{
|
||||
title: "Instant Withdrawals",
|
||||
desc: "Access your earnings anytime",
|
||||
},
|
||||
].map((item, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="bg-white border-2 border-gray-200 p-6 h-full hover:border-primary transition-colors"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: i * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<h3 className="text-lg font-bold mb-2 text-gray-900">{item.title}</h3>
|
||||
<p className="text-gray-600 text-sm">{item.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<motion.div
|
||||
className="text-center mb-12"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold mb-4 text-gray-900">
|
||||
Frequently Asked{" "}
|
||||
<span className="text-primary">
|
||||
Questions
|
||||
</span>
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{faqItems.map((item, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="bg-white border-2 border-gray-200 overflow-hidden hover:border-primary transition-colors"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.5, delay: i * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<button
|
||||
onClick={() => setExpandedFaq(expandedFaq === i ? null : i)}
|
||||
className="w-full p-5 flex items-center justify-between hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<h3 className="font-bold text-base text-left text-gray-900">{item.q}</h3>
|
||||
<motion.div
|
||||
animate={{ rotate: expandedFaq === i ? 180 : 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="flex-shrink-0 ml-4"
|
||||
>
|
||||
<ChevronDown className="w-5 h-5 text-primary" />
|
||||
</motion.div>
|
||||
</button>
|
||||
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{
|
||||
height: expandedFaq === i ? "auto" : 0,
|
||||
opacity: expandedFaq === i ? 1 : 0,
|
||||
}}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="px-5 pb-5 text-gray-600 text-sm border-t-2 border-gray-100 pt-4">
|
||||
{item.a}
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final CTA Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50 border-t-2 border-gray-200">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<motion.h2
|
||||
className="text-3xl sm:text-4xl font-bold mb-6 text-gray-900"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
Ready to start{" "}
|
||||
<span className="text-primary">
|
||||
earning
|
||||
</span>
|
||||
?
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
className="text-base text-gray-600 mb-8"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
Join thousands of workers completing AI-verified tasks on Celo
|
||||
Sepolia
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
className="flex flex-col sm:flex-row gap-4 justify-center"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Button
|
||||
size="lg"
|
||||
className="font-semibold"
|
||||
>
|
||||
Get Started <ArrowRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
>
|
||||
Try Demo
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user