diff --git a/src/components/blocked-email.css b/src/components/blocked-email.css index 37fa48a..735fce5 100644 --- a/src/components/blocked-email.css +++ b/src/components/blocked-email.css @@ -94,3 +94,440 @@ transform: scale(1.02); transition: transform 0.3s; } + +/* Hero Section */ +.deposit-page .hero-section { + text-align: center; + margin-bottom: 1.5rem; + padding: 1.5rem 1rem; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + border-radius: 12px; +} + +.deposit-page .hero-subtitle { + font-size: 1.25rem; + margin-top: 1rem; +} + +/* Status Card */ +.status-card { + background: #f8f9fa; + padding: 1rem; + border-radius: 8px; + margin-bottom: 1rem; + border-left: 4px solid #1188E6; + color: #333; +} + +/* Steps */ +.how-it-works { + margin: 1rem 0; +} + +.steps { + display: flex; + flex-direction: column; + gap: 1rem; + margin-top: 1rem; +} + +.step { + display: flex; + gap: 1rem; + align-items: flex-start; +} + +.step-number { + background: #1188E6; + color: white; + width: 36px; + height: 36px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + flex-shrink: 0; +} + +.step-content strong { + display: block; + margin-bottom: 0.5rem; + color: #2c3e50; +} + +.step-content p { + margin: 0; + color: #666; +} + +/* Guarantee Box */ +.guarantee-box { + background: #d4edda; + border: 2px solid #28a745; + padding: 1rem; + border-radius: 8px; + margin: 1rem 0; +} + +.guarantee-box h4 { + margin-top: 0; + color: #155724; +} + +/* Why This Works */ +.why-this-works { + background: #e7f3ff; + padding: 1rem; + border-radius: 8px; + margin: 1rem 0; +} + +/* CTA Section */ +.cta-section { + background: #f8f9fa; + padding: 1.5rem; + border-radius: 12px; + text-align: center; + margin: 1.5rem 0; +} + +.cta-buttons { + display: flex; + gap: 1rem; + justify-content: center; + margin: 1rem 0; + flex-direction: row; +} + +.learn-more-btn.primary { + background: #1188E6; + color: white; + font-size: 1.1rem; + padding: 1rem 2rem; + min-width: 200px; + flex: 1; + max-width: 250px; +} + +.learn-more-btn.secondary { + background: #6c757d; + color: white; + font-size: 1.1rem; + padding: 1rem 2rem; + min-width: 200px; + flex: 1; + max-width: 250px; +} + +.refund-reminder { + color: #28a745; + font-size: 0.95rem; + margin-top: 1rem; +} + +/* Trust Section */ +.trust-section { + margin: 1.5rem 0; + padding: 1.5rem; + background: white; + border-radius: 8px; +} + +.trust-points { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + margin-top: 1rem; +} + +.trust-point { + text-align: center; +} + +.trust-point .icon { + font-size: 2.5rem; + display: block; + margin-bottom: 0.5rem; +} + +.trust-point strong { + display: block; + margin-bottom: 0.5rem; + color: #2c3e50; +} + +.trust-point p { + color: #666; + font-size: 0.9rem; + margin: 0; +} + +/* Inspiration Section */ +.inspiration-section { + background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); + color: white; + padding: 1.5rem; + border-radius: 12px; + margin: 1.5rem 0; +} + +.inspiration-section a { + color: white; + text-decoration: underline; + font-weight: bold; +} + +/* Success Message */ +.success-message { + background: #d4edda; + border: 2px solid #28a745; + padding: 1.5rem; + border-radius: 12px; + text-align: center; + margin: 1.5rem 0; +} + +.success-message h3 { + color: #155724; + margin-top: 0; +} + +@media (max-width: 768px) { + .cta-buttons { + flex-direction: column; + align-items: center; + } + + .learn-more-btn.primary, + .learn-more-btn.secondary { + min-width: 280px; + max-width: 100%; + flex: none; + } + + .trust-points { + grid-template-columns: 1fr; + } +} + +/* Dark Mode Support */ +@media (prefers-color-scheme: dark) { + .status-card { + background: var(--color-background); + color: var(--color-text); + border-left-color: var(--fyncom-blue); + } + + .how-it-works h3, + .status-card h3 { + color: var(--color-text); + } + + .step-content strong { + color: var(--color-text); + } + + .step-content p { + color: var(--color-text); + opacity: 0.8; + } + + .guarantee-box { + background: var(--fyncom-darkest-cyan); + border-color: var(--karmacall-green); + color: var(--color-text); + } + + .guarantee-box h4 { + color: var(--karmacall-green); + } + + .why-this-works { + background: var(--fyncom-darkest-cyan); + color: var(--color-text); + } + + .why-this-works h4 { + color: var(--color-text); + } + + .cta-section { + background: var(--color-background); + color: var(--color-text); + } + + .cta-section h3 { + color: var(--color-text); + } + + .trust-section { + background: var(--color-background); + color: var(--color-text); + } + + .trust-section h3 { + color: var(--color-text); + } + + .trust-point strong { + color: var(--color-text); + } + + .trust-point p { + color: var(--color-text); + opacity: 0.8; + } + + .success-message { + background: var(--fyncom-darkest-cyan); + border-color: var(--karmacall-green); + color: var(--color-text); + } + + .success-message h3 { + color: var(--karmacall-green); + } +} + +/* Manual Dark Mode Support */ +:root[data-theme="dark"] .status-card { + background: var(--color-background); + color: var(--color-text); + border-left-color: var(--fyncom-blue); +} + +:root[data-theme="dark"] .how-it-works h3, +:root[data-theme="dark"] .status-card h3 { + color: var(--color-text); +} + +:root[data-theme="dark"] .step-content strong { + color: var(--color-text); +} + +:root[data-theme="dark"] .step-content p { + color: var(--color-text); + opacity: 0.8; +} + +:root[data-theme="dark"] .guarantee-box { + background: var(--fyncom-darkest-cyan); + border-color: var(--karmacall-green); + color: var(--color-text); +} + +:root[data-theme="dark"] .guarantee-box h4 { + color: var(--karmacall-green); +} + +:root[data-theme="dark"] .why-this-works { + background: var(--fyncom-darkest-cyan); + color: var(--color-text); +} + +:root[data-theme="dark"] .why-this-works h4 { + color: var(--color-text); +} + +:root[data-theme="dark"] .cta-section { + background: var(--color-background); + color: var(--color-text); +} + +:root[data-theme="dark"] .cta-section h3 { + color: var(--color-text); +} + +:root[data-theme="dark"] .trust-section { + background: var(--color-background); + color: var(--color-text); +} + +:root[data-theme="dark"] .trust-section h3 { + color: var(--color-text); +} + +:root[data-theme="dark"] .trust-point strong { + color: var(--color-text); +} + +:root[data-theme="dark"] .trust-point p { + color: var(--color-text); + opacity: 0.8; +} + +:root[data-theme="dark"] .success-message { + background: var(--fyncom-darkest-cyan); + border-color: var(--karmacall-green); + color: var(--color-text); +} + +:root[data-theme="dark"] .success-message h3 { + color: var(--karmacall-green); +} + +/* Badge styling for v2 */ +.badge { + display: inline-flex; + align-items: center; + padding: 0.5rem 1rem; + background: var(--color-background); + color: var(--color-text); + border: 1px solid var(--color-bar); + border-radius: 20px; + font-size: 0.875rem; + font-weight: 500; +} +/* FAQ Section */ +.faq-section { + margin-top: 2rem; + padding: 1.5rem; + background: #f8f9fa; + border-radius: 8px; +} +.faq-content { + margin-top: 1rem; +} +.faq-item { + margin-bottom: 1rem; +} +.faq-question { + font-weight: bold; + cursor: pointer; +} +.faq-answer { + margin-top: 0.5rem; + padding-left: 1rem; +} +@media (prefers-color-scheme: dark) { + .faq-section { + background: var(--color-background); + color: var(--color-text); + } + .faq-section h3 { + color: var(--color-text); + } + .faq-question { + color: var(--color-text); + } + .faq-answer { + color: var(--color-text); + opacity: 0.85; + } +} +:root[data-theme="dark"] .faq-section { + background: var(--color-background); + color: var(--color-text); +} +:root[data-theme="dark"] .faq-section h3 { + color: var(--color-text); +} +:root[data-theme="dark"] .faq-question { + color: var(--color-text); +} +:root[data-theme="dark"] .faq-answer { + color: var(--color-text); + opacity: 0.85; +} \ No newline at end of file diff --git a/src/pages/make-a-deposit-v2.js b/src/pages/make-a-deposit-v2.js new file mode 100644 index 0000000..8e2b485 --- /dev/null +++ b/src/pages/make-a-deposit-v2.js @@ -0,0 +1,314 @@ +import React, { useEffect, useMemo, useState } from "react" +import Header from "../components/header" +import Footer from "../components/footer" +import Seo from "../components/seo" +import "../components/blocked-email.css" +import { MakeADepositModal } from "../components/Modal" +import { logEvent } from "../utils/analytics" + +/** + * MakeADepositV2 – a UX-focused redesign for your refundable deposit page. + * + * Highlights + * - Clear hero + promise + * - Smart empty-state (no backend data) with explainer + self-serve input + * - Data-present state with rich summary, trust copy, and strong CTAs + * - Inline FAQ and "How it works" with visual steps + * - Subtle motion + modern card layout + * - Handles loading, error, and edge cases + */ + +const API_URL = process.env.GATSBY_API_URL + +export default function MakeADepositV2() { + const [details, setDetails] = useState(null) + const [loading, setLoading] = useState(true) + const [error, setError] = useState(null) + const [isModalOpen, setIsModalOpen] = useState(false) + const [manualId, setManualId] = useState("") + + // Parse depositId from URL on first load + useEffect(() => { + const search = new URLSearchParams(window.location.search) + const id = search.get("depositId") + if (id) fetchDetails(id) + else setLoading(false) + }, []) + + async function fetchDetails(id) { + try { + setLoading(true) + const res = await fetch(`${API_URL}email/blocked/${id}`) + if (!res.ok) throw new Error("Failed to fetch deposit details") + const data = await res.json() + setDetails(data) + setError(null) + } catch (e) { + setError(e?.message ?? "Something went wrong") + setDetails(null) + } finally { + setLoading(false) + } + } + + const stripeUrl = useMemo(() => { + if (!details) return "https://buy.stripe.com/fZe5obgilbJa5lm001" // default checkout + const email = encodeURIComponent(details.senderEmailRaw || details.senderEmail || "") + const ref = encodeURIComponent(details.blockedEmailLogId || "") + return `https://buy.stripe.com/fZe5obgilbJa5lm001?prefilled_email=${email}&client_reference_id=${ref}` + }, [details]) + + const minDeposit = details?.recipientMin + ? Number(details.recipientMin) >= 0.01 + ? Number(details.recipientMin).toFixed(2) + : Number(details.recipientMin).toFixed(5) + : "0.00" + const deadlineDays = details?.daysDeadline ?? 30 + const labelName = details?.labelName || "INBOX" + const secondaryLabel = details?.emailLabel || "FynFiltered" + + function handleNano() { + setIsModalOpen(true) + } + + return ( +
+ Unknown senders stake a tiny deposit to reach the main inbox. If the recipient engages, the sender gets it back. If not, the user keeps it. Simple. +
+Fetching your deposit details…
+{error}
++ From {details.senderEmail} to {details.recipientEmail} +
+Pay the deposit to move this email to the recipient's {labelName} immediately.
++ If they respond within {deadlineDays} days, your deposit is automatically refunded. +
+If there's no response, the recipient keeps a portion as a reward for their time.
++ Remember: Full refund if they respond within {deadlineDays} days +
+ {isModalOpen &&It's an economic good‑faith signal that discourages spam. If the recipient engages, you're refunded automatically.
++ Paste your depositId from the link to see your sender/recipient details and complete a deposit. No worries—if they reply, + you're refunded. +
+ +Stake a small, refundable amount to signal good faith.
+Your email moves to the main inbox instantly.
+If they respond within the window, you get it back.
++ Spam is cheap to send. A refundable deposit flips the economics—only serious senders stake it. If it's not useful, the user keeps a portion. +
+ +Prefer crypto? Use Nano (XNO) via the app wallet.
+Processed through Stripe & Nano crypto
+Your email moves to their inbox immediately
+Tiny amounts that prove you're real
++ Tired of spam in your own inbox? You can use this same system! Sign up at app.fyncom.com to + filter your emails and earn rewards when genuine senders reach out to you. +
++ If there's no response in the refund window, the recipient keeps a portion of the deposit as a reward for their time. +
+Known contacts are automatically whitelisted—no deposit needed.
+Deposits are processed through trusted providers, and refunds are automatic based on recipient engagement.
++ Unknown senders stake a tiny deposit to reach the main inbox. If the recipient engages, the sender gets it back. If not, the user keeps it. Simple. +
+Fetching your deposit details…
+{error}
++ From {details.senderEmail} to {details.recipientEmail} +
+Pay the deposit to move this email to the recipient's {labelName} immediately.
++ If they respond within {deadlineDays} days, your deposit is automatically refunded. +
+If there's no response, the recipient keeps a portion as a reward for their time.
++ Remember: Full refund if they respond within {deadlineDays} days +
+ {isModalOpen &&It's an economic good‑faith signal that discourages spam. If the recipient engages, you're refunded automatically.
++ Paste your depositId from the link to see your sender/recipient details and complete a deposit. No worries—if they reply, + you're refunded. +
+ +Stake a small, refundable amount to signal good faith.
+Your email moves to the main inbox instantly.
+If they respond within the window, you get it back.
++ Spam is cheap to send. A refundable deposit flips the economics—only serious senders stake it. If it's not useful, the user keeps a portion. +
+ +Prefer crypto? Use Nano (XNO) via the app wallet.
+Processed through Stripe & Nano crypto
+Your email moves to their inbox immediately
+Tiny amounts that prove you're real
++ Tired of spam in your own inbox? You can use this same system! Sign up at app.fyncom.com to + filter your emails and earn rewards when genuine senders reach out to you. +
++ If there's no response in the refund window, the recipient keeps a portion of the deposit as a reward for their time. +
+Known contacts are automatically whitelisted—no deposit needed.
++ Deposits are processed through trusted providers, and refunds are automatic based on recipient engagement. +
+Your email (${data.senderEmail}) to ${data.recipientEmail} landed in their - ${data.labelName}, but was moved to a secondary inbox, ${secondaryLabel}, - because they don't know you. -
-${data.recipientEmail} requires a $${data.recipientMin} - refundable deposit for your email to move to their main inbox and be marked as ${fynMail}. If you pay - this deposit, ${data.recipientEmail} will be notified and they will immediately see your email. If - ${data.recipientEmail} responds to your FynMail within ${data.daysDeadline} days, - you will get your deposit back. Then you may manage your deposit refund by accessing app.fyncom.com. -
` + ? `` + : `Your email from ${data.senderEmail} to ${data.recipientEmail} was automatically filtered.
+This moves your email to their main inbox instantly
+Your message goes to the top of their inbox
+If they respond within ${data.daysDeadline} days, you pay nothing
+You only pay if ${data.recipientEmail} doesn't respond within ${data.daysDeadline} days. + Most people respond within 24-48 hours, so you'll likely get your full deposit back.
+This micro-deposit proves you're a real person with a genuine message, not spam. It helps ${data.recipientEmail} + prioritize legitimate emails while earning a small reward for managing their inbox effectively.
++ Remember: Full refund if they respond within {blockedEmailDetails.daysDeadline} days +
{isModalOpen &&Loading email details...
++ Make a tiny deposit. Get immediate attention. Pay nothing if they respond. +
++ You're here because someone is using FynCom's email filtering system. Your message was automatically moved to a secondary folder, but you can + get it prioritized! +
+This moves your email to their main inbox instantly
+Your message goes to the top of their inbox
+If they respond within their deadline, you pay nothing
++ You only pay if the recipient doesn't respond within their specified timeframe. Most people respond within 24-48 hours, so you'll likely get + your full deposit back. +
++ This micro-deposit proves you're a real person with a genuine message, not spam. It helps email recipients prioritize legitimate messages while + earning a small reward for managing their inbox effectively. +
+- Still here? Why not read something interesting? Ever get annoying calls? Emails? DMs? Read below to find out how we're helping fix that problem by - getting people paid to block scam / spam and respond to good messages. -
-...and how can I stop scams, but get useful outreach?
-
- That's the thought that started FynCom on a journey of exploring an emerging market based in "communications + currency" to create trust between
- strangers with shared interests. Here's our paper we wrote to record our thought process - it later became{" "}
- our 1st patent, app, and is the basis for how we
- came to be. Thanks for reading!
- - Team FynCom
-
Processed through Stripe & Nano crypto
+Your email moves to their inbox immediately
+Tiny amounts that prove you're real
++ Tired of spam in your own inbox? You can use this same system! Sign up at app.fyncom.com to + filter your emails and earn rewards when genuine senders reach out to you. +
+We asked ourselves this question and built a solution. Here's how we're fixing communication for everyone.
++ Our approach creates trust between strangers with shared interests using tiny "proof-of-intent" deposits. Read our original white paper that became{" "} + our first patent, powers our KarmaCall app, and + forms the foundation of FynCom. +
+