MASTER PROMPT — BUILD CONVOSPHERE (FULL PRODUCT SPEC, PRODUCTION READY)

Build a production-ready, cross-platform mobile and web app named ConvoSphere. This product connects people who want perspective, advice, or just a fresh conversation across curated topic categories. The goal: the safest, most trustworthy, and highest-quality per-call advice / conversation marketplace on the market — not a shallow chat app. Ship an MVP fast, but design for scale, safety, and monetization from day one.
OVERVIEW & PURPOSE
Tagline: Real Talk. Real People. Real Perspective.
Purpose: Connect Seekers (people looking for opinions/support) to Advisors (people offering advice/perspectives) in one-on-one sessions (text / voice / video) organized by topic categories. Combat loneliness and surface high-signal human connection.
Product positioning: Premium per-call, moderated, trust-first conversation marketplace (pay-per-call, no subscriptions as default).
USER ROLES & ENTITIES
Seeker — creates a profile, chooses topics, purchases calls, can choose anonymity, leaves ratings/reviews.
Advisor — creates a verified profile, lists categories, sets per-call rate (>= platform minimum), receives payouts to PayPal wallet. Can be individual or organization.
Admin / Moderator — human ops team with dashboard for disputes, appeals, and content moderation.
System — AI moderation services, matching engine, analytics, billing engine.
CORE FEATURE LIST (MUST HAVE)
Signup & Auth
Email, phone number (OTP), Google/Apple sign-in.
KYC flow for Advisors (ID upload, selfie verification, optional professional credentials).
2FA option for accounts.
Profiles
Advisors: display name (or pseudonym), short bio, verified badge (after KYC), hourly/per-call rate, topics, languages, availability, response time, portfolio/badges, sample intro clip (optional).
Seekers: name/pseudonym, selected topics, optional short “what I want” note, payment methods.
Categories
Include the provided list of 20 categories (exact phrasing included).
Each category has sub-tags, suggested prompts, and safety flags.
Discovery & Matching
Smart matching engine: match by selected categories, Advisor rating, language, availability, price, and past performance.
Quick match (auto-pair with best available advisor) and manual browse (filter by rating, price, language, region).
Conversation Types
Text chat (real-time), voice call, video call.
Option for audio-only for low bandwidth.
In-chat “conversation starters” shown when a session begins.
Booking & Live Sessions
Instant sessions (on-demand) and scheduled sessions (calendar + timezone handling).
Pre-call short form: Seeker can fill a 1–3 sentence context to prep Advisor.
Session timer visible to both parties.
Payments & Wallets
Pay-per-call model. Seekers pay before session starts; Advisors paid after session completes and after a short dispute window.
Integrations: Stripe (cards) + PayPal (checkout + payouts). Support PayPal payouts for Advisors (primary). Also allow UPI/Paytm optional region integrations later.
Platform commission: 15% by default. Advisors set rate >= $5 (or local-currency equivalent).
Example: Advisor sets $10 → Seeker pays $10 → Platform retains $1.50 → Advisor receives $8.50 (minus any payment gateway fees).
Adjustable commission admin setting.
Refunds & Disputes
Auto-refund if: call failed to connect due to platform error (100% refund).
Partial refund policy:
If call < 2 minutes and Seeker disputes: full refund after review.
If call between 2–10 minutes and dispute: 50% refund pending moderator review.
If call >= 10 minutes, generally no refund unless evidence of misconduct or platform failure.
Dispute flow: Seeker files dispute → snapshot of logs (timestamps, duration, transcript if enabled) → auto-escrow triggers review → moderator decision with 48-hour SLA → payout/refund settlement.
Chargeback handling: Admin dashboard to supply evidence; keep logs for 180 days.
Ratings & Reviews
5-star rating + mandatory category-specific quick tags (e.g., “empathetic”, “practical”, “too short”).
Reviews visible on Advisor profile after moderation (auto-filter for protected info).
Safety & Moderation
AI moderation: real-time profanity/hate/sexual content detector; automated warnings + temp mutes.
Human moderation: review queue for flagged content, appeals system for Advisors/Seekers.
Safety features: emergency resource list, “End session” and “Report” buttons always visible.
Mandatory display of crisis helplines by region; session flows for Crisis & Safety category should redirect to professional hotlines and show mandatory disclaimers.
Behavioral rules: zero tolerance for sexual exploitation, illegal activity, minors, etc.
Anonymous mode: Seekers can hide name/photo; Advisors must be verified to handle sensitive categories (Trauma, Crisis, Mental Health).
Data & Privacy
End-to-end encryption for messages and calls (at minimum TLS in transit + encryption at rest; E2E for future roadmap).
GDPR & CCPA compliance, privacy policy, and clear data-retention period (logs retained for 180 days; transcripts kept only if user opts in).
Advisors cannot view Seeker payment details.
Session Tools
In-call note-taking for Advisors (private). Seeker journaling (optional; private).
“Flag/Bookmark” part of the conversation.
Auto-transcription (opt-in) with download.
Onboarding & Quality
Advisor onboarding: sample mini-session test (recorded), guidelines, best-practices checklist, quality quiz for category-specific competency. Advisors must pass KYC and a basic community standards quiz to unlock public listing.
Seeker onboarding: clear expectation setting, how refunds & safety work, how to use anonymity, selecting topics.
Gamification & Retention
Badges for Advisors (Top-Rated, 100 Calls, Empathy Badge, Verified Professional).
Streaks & points for Seekers to encourage return visits.
Optional loyalty credits: e.g., first-call discount, referral credits (both get credit when referred friend pays).
Admin Dashboard
User management, payouts, disputes, reports, manual adjustments, content moderation queue, billing overview, metrics, fraud alerts.
Analytics
Track: daily active users, conversion (signup → paid session), retention (D1/D7/D30), ARPU, LTV, avg session length, dispute rates, NPS, MRR from in-app purchases.
Localization & Accessibility
Multi-language support (UI + category labels + auto-translate chat option).
WCAG AA accessibility: screen-reader support, high-contrast UI, captions for video, large-font mode.
Marketing / Growth Essentials
Referral program, campus ambassador flow, ads creatives library, sample onboarding email templates, SEO-ready landing page, App Store + Play Store metadata.
Legal & Compliance
Terms of Service, Privacy Policy, Age restrictions (18+ for advisory categories by default). For minors, require guardian consent and restrict categories.
Mandatory disclaimers: Not a replacement for licensed mental health care; Crisis & Safety category will show immediate hotline info and recommend contacting local professionals.
PCI compliance for payment handling (via Stripe/PayPal).
Performance & Scalability
Use microservices and serverless where possible. Recommended infra: AWS (Cognito, API Gateway, Lambda, ECS/Fargate, RDS, S3, CloudFront) or Firebase (Auth, Firestore, Cloud Functions) for faster MVP.
Use WebRTC for voice/video; scale with TURN/STUN servers (e.g., Coturn). Autoscaling, horizontal DB read replicas, CDN for assets.
Testing / QA
Unit tests, E2E tests (Cypress), load testing (k6), chaos testing on critical paths (payments, matching).
Logging & Monitoring
Use Sentry for error tracking, Datadog/CloudWatch for metrics, real-time dashboards for ops.
Roadmap (MVP → 6 months → 12 months)
MVP (4–8 weeks): Core signup, category selection, basic Advisor profile/KYC, instant text chat, pay-per-call checkout, admin dashboard, basic AI moderation, ratings, refund/dispute logging.
v1 (3–6 months): Voice & video calls (WebRTC), PayPal payouts integration, scheduled sessions, auto-transcription, in-depth analytics, multi-language UI.
v2 (6–12 months): E2E encryption, advanced matching (NLP + collaborative filtering), influencer/advisor partnerships, API for enterprise customers (e.g., universities), offline journaling sync, monetization expansions.
Edge Cases & Fraud Prevention
Bots/fake profiles detection with 3rd-party device fingerprinting + rate limits.
Anti-fraud: monitor suspicious refund patterns, chargeback rates; require manual KYC for Advisors with many flags.
Protect minors: auto-detect underage accounts, require parental consent flow if allowed at all.
Design System
Atomic components, light/dark themes, responsive layout. Mobile-first, but web parity required.
Provide sample Figma spec (colors, typography, UI kit).
Developer Handoff
Deliverables: Postman collection for APIs, OpenAPI spec, database ERD, deployment scripts, CI/CD (GitHub Actions), infra-as-code (Terraform/CloudFormation), README with runbook for incidents.
Monetization Add-ons
Boosts for Advisors (pay to be featured), marketplace for premium conversation prompts, sponsored rooms/events, enterprise licensing to colleges/corporates.
Community & Partnerships
Partnership pipeline: mental health NGOs, universities, student unions, corporate EAPs. Create a B2B offering (white-label or API).
DETAILED PAYMENT & SETTLEMENT FLOW (IMPLEMENT EXACTLY)
Seeker starts purchase → platform creates payment intent (Stripe/PayPal); Seeker pays full amount. Payment held in platform escrow account. Show receipt.
When session completes and passes dispute window (default 24 hours after session end), funds are released to Advisor minus platform commission (15%) and payment gateway fees.
If a dispute is filed, the payout is held pending resolution. Admin handles within 48 hours for first response; final resolution within 7 business days.
Payout schedule: Advisors can request instant payout (extra fee) or weekly auto-payout to PayPal. Provide payout history & CSV export.
Fees & taxes: Platform does not calculate income tax liability for Advisors; however, provide tax report export per region. Optionally implement tax withholding for specific jurisdic

README.md

@@ -1,10 +1,14 @@
 ---
-title: Undefined
-emoji: 📚
-colorFrom: red
-colorTo: green
+title: undefined
+colorFrom: pink
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).
+      

index.html

@@ -1,19 +1,173 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ConvoSphere - Real Talk. Real People. Real Perspective.</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        .gradient-bg { background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <nav class="bg-white shadow-sm">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0 flex items-center">
+                        <svg class="h-8 w-8 text-indigo-600" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" />
+                        </svg>
+                        <span class="ml-2 text-xl font-bold text-gray-900">ConvoSphere</span>
+                    </div>
+                </div>
+                <div class="flex items-center">
+                    <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-900 hover:text-indigo-600">For Seekers</a>
+                    <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-900 hover:text-indigo-600">For Advisors</a>
+                    <a href="#" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-indigo-600 bg-indigo-100 hover:bg-indigo-200">Sign In</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main>
+        <div class="gradient-bg py-20 px-4 sm:px-6 lg:px-8">
+            <div class="max-w-7xl mx-auto text-center">
+                <h1 class="text-4xl md:text-5xl font-extrabold text-white mb-6">Find the perfect conversation</h1>
+                <p class="text-xl text-indigo-100 max-w-3xl mx-auto mb-10">Connect with verified advisors for meaningful conversations across 20+ topics. Safe, secure, and satisfaction guaranteed.</p>
+                <div class="flex flex-col sm:flex-row justify-center gap-4">
+                    <a href="#" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-gray-100 md:py-4 md:text-lg md:px-10">
+                        I need advice
+                    </a>
+                    <a href="#" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-800 bg-opacity-60 hover:bg-opacity-80 md:py-4 md:text-lg md:px-10">
+                        I offer advice
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl font-extrabold text-gray-900">How ConvoSphere works</h2>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="bg-white p-6 rounded-lg shadow-sm">
+                    <div class="flex justify-center mb-4">
+                        <div class="bg-indigo-100 p-3 rounded-full">
+                            <svg class="h-8 w-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                            </svg>
+                        </div>
+                    </div>
+                    <h3 class="text-lg font-medium text-center mb-2">1. Choose your topic</h3>
+                    <p class="text-gray-600 text-center">Browse through 20+ categories to find the perfect advisor for your needs.</p>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-sm">
+                    <div class="flex justify-center mb-4">
+                        <div class="bg-indigo-100 p-3 rounded-full">
+                            <svg class="h-8 w-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                            </svg>
+                        </div>
+                    </div>
+                    <h3 class="text-lg font-medium text-center mb-2">2. Connect instantly</h3>
+                    <p class="text-gray-600 text-center">Start a text, voice, or video conversation with your matched advisor.</p>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-sm">
+                    <div class="flex justify-center mb-4">
+                        <div class="bg-indigo-100 p-3 rounded-full">
+                            <svg class="h-8 w-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                        </div>
+                    </div>
+                    <h3 class="text-lg font-medium text-center mb-2">3. Get perspective</h3>
+                    <p class="text-gray-600 text-center">Gain valuable insights and leave a rating to help improve our community.</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-gray-100 py-16 px-4 sm:px-6 lg:px-8">
+            <div class="max-w-7xl mx-auto">
+                <div class="text-center mb-16">
+                    <h2 class="text-3xl font-extrabold text-gray-900">Popular conversation categories</h2>
+                </div>
+                <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
+                        <h3 class="text-lg font-medium mb-2">Career Guidance</h3>
+                        <p class="text-gray-600">Resume reviews, interview prep, career transitions</p>
+                    </div>
+                    <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
+                        <h3 class="text-lg font-medium mb-2">Relationships</h3>
+                        <p class="text-gray-600">Dating advice, family matters, communication skills</p>
+                    </div>
+                    <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
+                        <h3 class="text-lg font-medium mb-2">Mental Wellness</h3>
+                        <p class="text-gray-600">Stress management, mindfulness, emotional support</p>
+                    </div>
+                    <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
+                        <h3 class="text-lg font-medium mb-2">Personal Finance</h3>
+                        <p class="text-gray-600">Budgeting, investing, debt management strategies</p>
+                    </div>
+                </div>
+                <div class="text-center mt-10">
+                    <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800">Browse all categories →</a>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <footer class="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
+        <div class="max-w-7xl mx-auto">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Product</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Categories</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Safety</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Company</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Partners</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Resources</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Community</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Webinars</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Legal</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="mt-12 pt-8 border-t border-gray-800">
+                <p class="text-gray-400 text-sm text-center">&copy; 2023 ConvoSphere. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>