strade-stx 1.0.0

package/frontend/src/app/help/page.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import TestnetBanner from '@/components/TestnetBanner';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { HelpCircle, Shield, Wallet, ShoppingCart, AlertTriangle } from 'lucide-react';
+
+export default function HelpPage() {
+  const faqs = [
+    {
+      question: 'What is Strade?',
+      answer: 'Strade is a decentralized marketplace built on the Stacks blockchain. It allows users to buy and sell goods securely using smart contracts, without the need for intermediaries.',
+    },
+    {
+      question: 'How do I connect my wallet?',
+      answer: 'Click the "Connect Wallet" button in the header. You\'ll need a Stacks wallet like Hiro Wallet or Leather to interact with the marketplace.',
+    },
+    {
+      question: 'How do I create a listing?',
+      answer: 'Once your wallet is connected, click the "Create Listing" button on the marketplace page. Fill in the item details including name, description, price (in STX), and duration (in days). You can also upload an image to make your listing more attractive.',
+    },
+    {
+      question: 'How do purchases work?',
+      answer: 'When you click "Purchase" on a listing, a transaction will be initiated through your wallet. The STX amount will be transferred directly from your wallet to the seller. Once confirmed on the blockchain, the listing status will update to "sold".',
+    },
+    {
+      question: 'Can I cancel my listing?',
+      answer: 'Yes! If you\'re the seller and your listing is still active, you can cancel it from the "My Listings" page. Click the "Cancel Listing" button and confirm the transaction in your wallet.',
+    },
+    {
+      question: 'What happens when a listing expires?',
+      answer: 'Listings have a duration set by the seller. When this time passes, the listing automatically expires and can no longer be purchased. Expired listings can be viewed in the seller\'s "My Listings" page.',
+    },
+    {
+      question: 'Is this real money?',
+      answer: 'Currently, Strade is running on the Stacks testnet. The STX tokens used have no real value and are only for testing purposes. DO NOT use real assets on the testnet.',
+    },
+    {
+      question: 'What are gas fees?',
+      answer: 'Gas fees are transaction costs paid to process your transaction on the blockchain. These fees go to network miners, not to Strade. Your wallet will show you the estimated fee before you confirm any transaction.',
+    },
+  ];
+
+  const safetyTips = [
+    'Always verify the seller\'s address before making a purchase',
+    'Check the listing expiration date to ensure sufficient time for transaction',
+    'Make sure you have enough STX balance including gas fees',
+    'Never share your private keys or seed phrase with anyone',
+    'Double-check all transaction details before confirming in your wallet',
+    'This is a testnet - never send real STX or valuable assets',
+  ];
+
+  return (
+    <div className="min-h-screen bg-slate-50 flex flex-col">
+      <TestnetBanner />
+      <Header />
+
+      <main className="flex-1 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full">
+        <div className="mb-8">
+          <div className="flex items-center gap-3 mb-2">
+            <HelpCircle className="h-8 w-8 text-slate-900" />
+            <h1 className="text-3xl font-bold text-slate-900">Help & FAQ</h1>
+          </div>
+          <p className="text-slate-600">
+            Everything you need to know about using Strade marketplace
+          </p>
+        </div>
+
+        {/* Safety Tips */}
+        <Card className="mb-8 border-orange-200 bg-orange-50">
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <AlertTriangle className="h-5 w-5 text-orange-600" />
+              <CardTitle className="text-orange-900">Safety Tips</CardTitle>
+            </div>
+            <CardDescription className="text-orange-700">
+              Important reminders for safe marketplace usage
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ul className="space-y-2">
+              {safetyTips.map((tip, index) => (
+                <li key={index} className="flex items-start gap-2 text-sm text-orange-800">
+                  <Shield className="h-4 w-4 mt-0.5 flex-shrink-0" />
+                  <span>{tip}</span>
+                </li>
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
+
+        {/* Quick Guides */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+          <Card>
+            <CardHeader>
+              <div className="flex items-center gap-2">
+                <Wallet className="h-5 w-5 text-blue-600" />
+                <CardTitle>For Sellers</CardTitle>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-2 text-sm text-slate-600">
+              <p><strong>1.</strong> Connect your Stacks wallet</p>
+              <p><strong>2.</strong> Click "Create Listing"</p>
+              <p><strong>3.</strong> Fill in item details and set price</p>
+              <p><strong>4.</strong> Confirm transaction in wallet</p>
+              <p><strong>5.</strong> Manage listings in "My Listings"</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <div className="flex items-center gap-2">
+                <ShoppingCart className="h-5 w-5 text-green-600" />
+                <CardTitle>For Buyers</CardTitle>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-2 text-sm text-slate-600">
+              <p><strong>1.</strong> Connect your Stacks wallet</p>
+              <p><strong>2.</strong> Browse available listings</p>
+              <p><strong>3.</strong> Check price and seller details</p>
+              <p><strong>4.</strong> Click "Purchase" and confirm</p>
+              <p><strong>5.</strong> Wait for blockchain confirmation</p>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* FAQs */}
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold text-slate-900 mb-4">
+            Frequently Asked Questions
+          </h2>
+          {faqs.map((faq, index) => (
+            <Card key={index}>
+              <CardHeader>
+                <CardTitle className="text-lg">{faq.question}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-slate-600">{faq.answer}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        {/* Contact */}
+        <Card className="mt-8">
+          <CardHeader>
+            <CardTitle>Still need help?</CardTitle>
+            <CardDescription>
+              We're here to help you get the most out of Strade
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm text-slate-600">
+            <p>For technical issues or questions not covered here:</p>
+            <ul className="list-disc list-inside space-y-1 ml-2">
+              <li>Check the Stacks blockchain explorer for transaction status</li>
+              <li>Visit our GitHub repository for technical documentation</li>
+              <li>Join our community Discord for support</li>
+            </ul>
+          </CardContent>
+        </Card>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}

package/frontend/src/app/how-it-works/page.tsx

@@ -0,0 +1,274 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import TestnetBanner from '@/components/TestnetBanner';
+import { 
+  Wallet, 
+  List, 
+  ShoppingCart, 
+  Shield, 
+  MessageSquare,
+  CheckCircle,
+  ArrowRight 
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
+
+const fadeInUp = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.5 }
+};
+
+const steps = [
+  {
+    icon: Wallet,
+    title: 'Connect Your Wallet',
+    description: 'Connect your Leather wallet or any Stacks-compatible wallet to get started. No sign-up required.',
+    details: [
+      'Install Leather wallet extension',
+      'Create or import your wallet',
+      'Connect to Strade with one click',
+      'Your wallet, your keys, your control'
+    ]
+  },
+  {
+    icon: List,
+    title: 'Create a Listing',
+    description: 'List your items with detailed descriptions, prices, and durations. All transactions are protected by smart contracts.',
+    details: [
+      'Add item name and description',
+      'Set your price in STX',
+      'Choose listing duration',
+      'Submit transaction to blockchain'
+    ]
+  },
+  {
+    icon: ShoppingCart,
+    title: 'Browse & Purchase',
+    description: 'Discover items from sellers worldwide. Purchase securely with automatic escrow protection.',
+    details: [
+      'Search and filter listings',
+      'Review seller reputation',
+      'Purchase with one transaction',
+      'Funds held in smart contract escrow'
+    ]
+  },
+  {
+    icon: Shield,
+    title: 'Escrow Protection',
+    description: 'All purchases are protected by automatic escrow. Funds are only released when conditions are met.',
+    details: [
+      'Buyer sends STX to escrow',
+      'Seller ships the item',
+      'Buyer confirms receipt',
+      'Funds automatically released to seller'
+    ]
+  },
+  {
+    icon: MessageSquare,
+    title: 'Dispute Resolution',
+    description: 'If issues arise, our community arbitration system ensures fair resolution for all parties.',
+    details: [
+      'Raise a dispute if needed',
+      'Community arbitrators review',
+      'Vote on fair resolution',
+      'Automated execution of decision'
+    ]
+  },
+  {
+    icon: CheckCircle,
+    title: 'Build Reputation',
+    description: 'Rate transactions and build your on-chain reputation. Trust is earned and transparent.',
+    details: [
+      'Rate each transaction',
+      'Receive ratings from others',
+      'Reputation stored on-chain',
+      'Build trust with the community'
+    ]
+  }
+];
+
+export default function HowItWorksPage() {
+  return (
+    <div className="min-h-screen flex flex-col bg-white dark:bg-black">
+      <TestnetBanner />
+      <Header />
+
+      <main className="flex-1">
+        {/* Hero Section */}
+        <section className="py-24 border-b border-gray-200 dark:border-gray-800">
+          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <motion.div
+              initial="initial"
+              animate="animate"
+              variants={fadeInUp}
+            >
+              <h1 className="text-4xl sm:text-5xl font-bold text-black dark:text-white mb-6">
+                How Strade Works
+              </h1>
+              <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
+                Trading on Strade is simple, secure, and completely decentralized.
+                Here's everything you need to know.
+              </p>
+            </motion.div>
+          </div>
+        </section>
+
+        {/* Steps Section */}
+        <section className="py-24">
+          <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="space-y-24">
+              {steps.map((step, index) => (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                  className="relative"
+                >
+                  <div className="flex flex-col md:flex-row gap-8 items-start">
+                    {/* Step Number & Icon */}
+                    <div className="flex-shrink-0">
+                      <div className="flex items-center gap-4">
+                        <div className="text-6xl font-bold text-gray-200 dark:text-gray-800">
+                          {String(index + 1).padStart(2, '0')}
+                        </div>
+                        <div className="w-16 h-16 rounded-full bg-black dark:bg-white flex items-center justify-center">
+                          <step.icon className="h-8 w-8 text-white dark:text-black" />
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Content */}
+                    <div className="flex-1">
+                      <h3 className="text-2xl font-bold text-black dark:text-white mb-3">
+                        {step.title}
+                      </h3>
+                      <p className="text-gray-600 dark:text-gray-400 mb-6">
+                        {step.description}
+                      </p>
+
+                      {/* Details List */}
+                      <ul className="space-y-3">
+                        {step.details.map((detail, detailIndex) => (
+                          <li
+                            key={detailIndex}
+                            className="flex items-start gap-3 text-gray-700 dark:text-gray-300"
+                          >
+                            <ArrowRight className="h-5 w-5 flex-shrink-0 mt-0.5" />
+                            <span>{detail}</span>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  </div>
+
+                  {/* Connector Line */}
+                  {index < steps.length - 1 && (
+                    <div className="hidden md:block absolute left-8 top-24 bottom-0 w-px bg-gray-200 dark:bg-gray-800 -mb-24" />
+                  )}
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Smart Contract Benefits */}
+        <section className="py-24 bg-gray-50 dark:bg-gray-950 border-y border-gray-200 dark:border-gray-800">
+          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5 }}
+              className="text-center mb-12"
+            >
+              <h2 className="text-3xl font-bold text-black dark:text-white mb-4">
+                Why Smart Contracts Matter
+              </h2>
+              <p className="text-gray-600 dark:text-gray-400">
+                Traditional marketplaces require you to trust a middleman.
+                Strade eliminates this need entirely.
+              </p>
+            </motion.div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+              {[
+                {
+                  title: 'Automated Escrow',
+                  description: 'No need to trust the other party. Smart contracts hold funds until conditions are met.'
+                },
+                {
+                  title: 'No Middlemen',
+                  description: 'Trade directly with other users. No platform fees, no censorship, no data collection.'
+                },
+                {
+                  title: 'Transparent Rules',
+                  description: 'All contract logic is visible on-chain. Everyone plays by the same rules.'
+                },
+                {
+                  title: 'Immutable Records',
+                  description: 'All transactions are permanently recorded on the blockchain. Complete audit trail.'
+                }
+              ].map((benefit, index) => (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                  className="p-6 bg-white dark:bg-black border border-gray-200 dark:border-gray-800 rounded-lg"
+                >
+                  <h3 className="text-xl font-semibold text-black dark:text-white mb-2">
+                    {benefit.title}
+                  </h3>
+                  <p className="text-gray-600 dark:text-gray-400">
+                    {benefit.description}
+                  </p>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* CTA Section */}
+        <section className="py-24">
+          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5 }}
+            >
+              <h2 className="text-3xl font-bold text-black dark:text-white mb-4">
+                Ready to Get Started?
+              </h2>
+              <p className="text-gray-600 dark:text-gray-400 mb-8">
+                Join the decentralized marketplace revolution today
+              </p>
+              <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                <Link href="/marketplace">
+                  <Button size="lg" className="bg-black hover:bg-gray-800 dark:bg-white dark:hover:bg-gray-200 text-white dark:text-black px-8">
+                    Start Trading
+                    <ArrowRight className="ml-2 h-4 w-4" />
+                  </Button>
+                </Link>
+                <Link href="/about">
+                  <Button size="lg" variant="outline" className="border-black dark:border-white text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-900 px-8">
+                    Learn More
+                  </Button>
+                </Link>
+              </div>
+            </motion.div>
+          </div>
+        </section>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}

package/frontend/src/app/layout.tsx

@@ -0,0 +1,55 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { Toaster } from "@/components/ui/sonner";
+import { ThemeProvider } from "@/components/providers/ThemeProvider";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Strade - Decentralized Marketplace on Stacks",
+  description: "Buy and sell goods securely on the blockchain. A decentralized marketplace with escrow, dispute resolution, and reputation system built on Stacks.",
+  keywords: ["blockchain", "marketplace", "stacks", "bitcoin", "decentralized", "web3", "crypto"],
+  authors: [{ name: "Strade Team" }],
+  openGraph: {
+    title: "Strade - Decentralized Marketplace",
+    description: "Buy and sell goods securely on the blockchain",
+    type: "website",
+  },
+  other: {
+    "talentapp:project_verification": "66a114e9792693ac64380fd0db52b2aaaf7f519b7ef40f198de9954371a889f410db07108ca9f99b923094c081c3a30a6ae887a5eca5b6f152d84c9442cea343"
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="h-full" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased h-full`}
+      >
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+          <Toaster position="top-right" richColors />
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}
+// NotificationPanel