Spaces:

W3cgymnott
/

nftreceipt

Running

App Files Files Community

W3cgymnott commited on Apr 26, 2025

Commit

d5ba038

verified ·

1 Parent(s): 4f0893b

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +1020 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Nftreceipt
-emoji: 🐨
 colorFrom: pink
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: nftreceipt
+emoji: 🐳
 colorFrom: pink
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1020 @@
-<!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>PayMint | Turn Payments into NFTs</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Space Grotesk', sans-serif;
+            background-color: #0a0b0e;
+            color: #e2e8f0;
+            overflow-x: hidden;
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .glow-box {
+            box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
+            transition: all 0.3s ease;
+        }
+        .glow-box:hover {
+            box-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
+            transform: translateY(-2px);
+        }
+        .nft-card {
+            perspective: 1000px;
+        }
+        .nft-card-inner {
+            transition: transform 0.6s;
+            transform-style: preserve-3d;
+        }
+        .nft-card:hover .nft-card-inner {
+            transform: rotateY(180deg);
+        }
+        .nft-card-front, .nft-card-back {
+            backface-visibility: hidden;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+        .nft-card-back {
+            transform: rotateY(180deg);
+        }
+        .animated-bg {
+            background: linear-gradient(-45deg, #0f172a, #1e293b, #334155, #475569);
+            background-size: 400% 400%;
+            animation: gradient 15s ease infinite;
+        }
+        @keyframes gradient {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+    </style>
+</head>
+<body>
+    <!-- Floating particles -->
+    <div id="particles-js" class="fixed inset-0 -z-10 opacity-20"></div>
+    <!-- Navbar -->
+    <nav class="border-b border-gray-800 backdrop-blur-md fixed w-full z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0">
+                        <span class="text-2xl font-bold gradient-text">PayMint</span>
+                    </div>
+                    <div class="hidden md:block">
+                        <div class="ml-10 flex items-baseline space-x-4">
+                            <a href="#features" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Features</a>
+                            <a href="#how-it-works" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">How It Works</a>
+                            <a href="#use-cases" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Use Cases</a>
+                            <a href="#demo" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Demo</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-4 flex items-center md:ml-6">
+                        <button class="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-6 py-2 rounded-full text-sm font-medium transition-all duration-300 transform hover:scale-105">
+                            Connect Wallet
+                        </button>
+                    </div>
+                </div>
+                <div class="-mr-2 flex md:hidden">
+                    <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
+                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Mobile menu -->
+        <div id="mobile-menu" class="hidden md:hidden bg-gray-900">
+            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+                <a href="#features" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Features</a>
+                <a href="#how-it-works" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">How It Works</a>
+                <a href="#use-cases" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Use Cases</a>
+                <a href="#demo" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Demo</a>
+                <button class="w-full bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-6 py-2 rounded-full text-sm font-medium mt-2">
+                    Connect Wallet
+                </button>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+        <div class="flex flex-col md:flex-row items-center">
+            <div class="md:w-1/2 mb-10 md:mb-0">
+                <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
+                    <span class="gradient-text">Turn Payments</span><br>
+                    Into <span class="gradient-text">Digital Memories</span>
+                </h1>
+                <p class="text-lg text-gray-400 mb-8 max-w-lg">
+                    PayMint automatically transforms your crypto transactions into verifiable NFT receipts with AI-generated metadata, creating a new dimension for financial interactions.
+                </p>
+                <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                    <button class="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-8 py-3 rounded-full text-lg font-medium transition-all duration-300 transform hover:scale-105 flex items-center justify-center">
+                        <i class="fas fa-rocket mr-2"></i> Start Minting
+                    </button>
+                    <button class="border border-gray-700 hover:border-gray-600 text-white px-8 py-3 rounded-full text-lg font-medium transition-all duration-300 hover:bg-gray-800/50 flex items-center justify-center">
+                        <i class="fas fa-play-circle mr-2"></i> Watch Demo
+                    </button>
+                </div>
+                <div class="mt-8 flex items-center space-x-4">
+                    <div class="flex -space-x-2">
+                        <img class="w-10 h-10 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
+                        <img class="w-10 h-10 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
+                        <img class="w-10 h-10 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-400">Trusted by <span class="font-bold text-white">5000+</span> users</p>
+                        <div class="flex items-center">
+                            <i class="fas fa-star text-yellow-400 mr-1"></i>
+                            <i class="fas fa-star text-yellow-400 mr-1"></i>
+                            <i class="fas fa-star text-yellow-400 mr-1"></i>
+                            <i class="fas fa-star text-yellow-400 mr-1"></i>
+                            <i class="fas fa-star text-yellow-400 mr-1"></i>
+                            <span class="text-sm text-gray-400 ml-1">4.9/5.0</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="md:w-1/2 relative">
+                <div class="relative max-w-md mx-auto">
+                    <div class="absolute -top-10 -left-10 w-32 h-32 bg-purple-600 rounded-full filter blur-3xl opacity-30"></div>
+                    <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-blue-600 rounded-full filter blur-3xl opacity-30"></div>
+                    <div class="relative glow-box bg-gray-900 rounded-2xl overflow-hidden border border-gray-800">
+                        <div class="p-6">
+                            <div class="flex justify-between items-center mb-4">
+                                <div>
+                                    <p class="text-gray-400 text-sm">Transaction NFT</p>
+                                    <h3 class="text-xl font-bold">Dinner with Friends</h3>
+                                </div>
+                                <div class="text-right">
+                                    <p class="text-gray-400 text-sm">Value</p>
+                                    <h3 class="text-xl font-bold">15.00 USDC</h3>
+                                </div>
+                            </div>
+                            <div class="mb-6">
+                                <div class="h-48 bg-gradient-to-br from-purple-900 to-blue-800 rounded-xl flex items-center justify-center">
+                                    <div class="text-center p-4">
+                                        <i class="fas fa-utensils text-4xl mb-2 text-white"></i>
+                                        <p class="text-white font-medium">"Great dinner with Alice and Brayo - good times!"</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="grid grid-cols-3 gap-4 mb-6">
+                                <div>
+                                    <p class="text-gray-400 text-xs">Date</p>
+                                    <p class="text-sm font-medium">May 15, 2023</p>
+                                </div>
+                                <div>
+                                    <p class="text-gray-400 text-xs">From</p>
+                                    <p class="text-sm font-medium truncate">0x7f...3a4b</p>
+                                </div>
+                                <div>
+                                    <p class="text-gray-400 text-xs">To</p>
+                                    <p class="text-sm font-medium truncate">0x9d...7c2e</p>
+                                </div>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <div class="flex items-center">
+                                    <img src="https://cryptologos.cc/logos/usd-coin-usdc-logo.png" class="w-6 h-6 mr-2" alt="USDC">
+                                    <span class="text-sm">Base Network</span>
+                                </div>
+                                <button class="text-xs bg-gray-800 hover:bg-gray-700 px-3 py-1 rounded-full flex items-center">
+                                    <i class="fas fa-external-link-alt mr-1"></i> View TX
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section id="features" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+        <div class="text-center mb-16">
+            <h2 class="text-3xl md:text-4xl font-bold mb-4">Why <span class="gradient-text">PayMint</span> is Unique</h2>
+            <p class="text-lg text-gray-400 max-w-3xl mx-auto">Transform your everyday crypto transactions into meaningful digital artifacts with our innovative platform.</p>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div class="glow-box bg-gray-900 rounded-xl p-6 border border-gray-800">
+                <div class="w-12 h-12 bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
+                    <i class="fas fa-fingerprint text-blue-400 text-xl"></i>
+                </div>
+                <h3 class="text-xl font-bold mb-3">Verifiable Proof</h3>
+                <p class="text-gray-400">Most crypto payments leave no meaningful trail except TX hashes. PayMint turns that into verifiable memories.</p>
+            </div>
+            <div class="glow-box bg-gray-900 rounded-xl p-6 border border-gray-800">
+                <div class="w-12 h-12 bg-purple-900/30 rounded-lg flex items-center justify-center mb-4">
+                    <i class="fas fa-robot text-purple-400 text-xl"></i>
+                </div>
+                <h3 class="text-xl font-bold mb-3">AI-Powered Metadata</h3>
+                <p class="text-gray-400">Our AI generates rich descriptions and visuals for your transactions, adding context to every payment.</p>
+            </div>
+            <div class="glow-box bg-gray-900 rounded-xl p-6 border border-gray-800">
+                <div class="w-12 h-12 bg-pink-900/30 rounded-lg flex items-center justify-center mb-4">
+                    <i class="fas fa-shield-alt text-pink-400 text-xl"></i>
+                </div>
+                <h3 class="text-xl font-bold mb-3">On-Chain Integrity</h3>
+                <p class="text-gray-400">All receipts are minted as NFTs with immutable records on Base chain, ensuring permanent verification.</p>
+            </div>
+        </div>
+    </section>
+    <!-- How It Works Section -->
+    <section id="how-it-works" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto animated-bg">
+        <div class="text-center mb-16">
+            <h2 class="text-3xl md:text-4xl font-bold mb-4">How <span class="gradient-text">PayMint</span> Works</h2>
+            <p class="text-lg text-gray-300 max-w-3xl mx-auto">A seamless process that transforms your crypto payments into valuable NFTs in just a few steps.</p>
+        </div>
+        <div class="relative">
+            <!-- Timeline line -->
+            <div class="hidden md:block absolute left-1/2 h-full w-1 bg-gradient-to-b from-blue-500 to-purple-600 -ml-0.5"></div>
+            <!-- Steps -->
+            <div class="space-y-8 md:space-y-16">
+                <!-- Step 1 -->
+                <div class="relative flex flex-col md:flex-row items-center">
+                    <div class="flex-1 md:pr-16 mb-8 md:mb-0 md:text-right">
+                        <h3 class="text-2xl font-bold mb-2">1. Initiate Payment</h3>
+                        <p class="text-gray-300">Send USDC or another stablecoin via our dApp or integrated wallet.</p>
+                    </div>
+                    <div class="w-16 h-16 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold text-xl border-4 border-gray-900 z-10">
+                        1
+                    </div>
+                    <div class="flex-1 md:pl-16 mt-8 md:mt-0">
+                        <div class="glow-box bg-gray-900 rounded-xl p-6 border border-gray-800">
+                            <div class="flex items-center mb-4">
+                                <img src="https://cryptologos.cc/logos/usd-coin-usdc-logo.png" class="w-8 h-8 mr-3" alt="USDC">
+                                <div>
+                                    <p class="text-sm text-gray-400">Sending</p>
+                                    <p class="font-medium">15.00 USDC</p>
+                                </div>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <div>
+                                    <p class="text-xs text-gray-400">To</p>
+                                    <p class="text-sm font-medium truncate">0x9d...7c2e</p>
+                                </div>
+                                <button class="text-xs bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded-full">
+                                    Confirm
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Step 2 -->
+                <div class="relative flex flex-col md:flex-row items-center">
+                    <div class="flex-1 md:pr-16 mb-8 md:mb-0 md:text-right order-2 md:order-1">
+                        <div class="glow-box bg-gray-900 rounded-xl p-6 border border-gray-800">
+                            <div class="flex items-center mb-4">
+                                <i class="fas fa-cube text-purple-400 text-2xl mr-3"></i>
+                                <div>
+                                    <p class="text-sm text-gray-400">Minting NFT</p>
+                                    <p class="font-medium">Transaction Receipt</p>
+                                </div>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <div>
+                                    <p class="text-xs text-gray-400">TX Hash</p>
+                                    <p class="text-sm font-medium truncate">0x4a...9e2f</p>
+                                </div>
+                                <div class="text-xs text-gray-400">Processing...</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="w-16 h-16 rounded-full bg-purple-600 flex items-center justify-center text-white font-bold text-xl border-4 border-gray-900 z-10 order-1 md:order-2">
+                        2
+                    </div>
+                    <div class="flex-1 md:pl-16 mt-8 md:mt-0 order-3">
+                        <h3 class="text-2xl font-bold mb-2">2. Automatic NFT Mint</h3>
+                        <p class="text-gray-300">Our smart contract automatically mints a dynamic NFT as proof of your payment.</p>
+                    </div>
+                </div>
+                <!-- Step 3 -->
+                <div class="relative flex flex-col md:flex-row items-center">
+                    <div class="flex-1 md:pr-16 mb-8 md:mb-0 md:text-right">
+                        <h3 class="text-2xl font-bold mb-2">3. AI Customization</h3>
+                        <p class="text-gray-300">NFT is enriched with AI-generated name, description, and contextual metadata.</p>
+                    </div>
+                    <div class="w-16 h-16 rounded-full bg-pink-600 flex items-center justify-center text-white font-bold text-xl border-4 border-gray-900 z-10">
+                        3
+                    </div>
+                    <div class="flex-1 md:pl-16 mt-8 md:mt-0">
+                        <div class="glow-box bg-gray-900 rounded-xl p-6 border border-gray-800">
+                            <div class="flex items-center mb-4">
+                                <i class="fas fa-brain text-pink-400 text-2xl mr-3"></i>
+                                <div>
+                                    <p class="text-sm text-gray-400">AI Generating</p>
+                                    <p class="font-medium">NFT Metadata</p>
+                                </div>
+                            </div>
+                            <div class="bg-gray-800 rounded p-3 text-sm">
+                                <p>"Dinner at XYZ, split 3 ways, great vibes 🌮🍷"</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Step 4 -->
+                <div class="relative flex flex-col md:flex-row items-center">
+                    <div class="flex-1 md:pr-16 mb-8 md:mb-0 md:text-right order-2 md:order-1">
+                        <div class="glow-box bg-gray-900 rounded-xl p-6 border border-gray-800">
+                            <div class="flex items-center justify-between mb-4">
+                                <div class="flex items-center">
+                                    <i class="fas fa-check-circle text-green-400 text-xl mr-3"></i>
+                                    <div>
+                                        <p class="text-sm text-gray-400">NFT Minted</p>
+                                        <p class="font-medium">Ready to Use</p>
+                                    </div>
+                                </div>
+                                <i class="fas fa-ellipsis-h text-gray-400"></i>
+                            </div>
+                            <div class="grid grid-cols-3 gap-2 text-center">
+                                <button class="text-xs bg-gray-800 hover:bg-gray-700 px-2 py-1 rounded">
+                                    <i class="fas fa-share-alt mr-1"></i> Share
+                                </button>
+                                <button class="text-xs bg-gray-800 hover:bg-gray-700 px-2 py-1 rounded">
+                                    <i class="fas fa-chart-line mr-1"></i> Track
+                                </button>
+                                <button class="text-xs bg-gray-800 hover:bg-gray-700 px-2 py-1 rounded">
+                                    <i class="fas fa-gift mr-1"></i> Redeem
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="w-16 h-16 rounded-full bg-green-600 flex items-center justify-center text-white font-bold text-xl border-4 border-gray-900 z-10 order-1 md:order-2">
+                        4
+                    </div>
+                    <div class="flex-1 md:pl-16 mt-8 md:mt-0 order-3">
+                        <h3 class="text-2xl font-bold mb-2">4. Utility & Analytics</h3>
+                        <p class="text-gray-300">Your NFT becomes redeemable, tradable, or used for financial analytics and memories.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Use Cases Section -->
+    <section id="use-cases" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+        <div class="text-center mb-16">
+            <h2 class="text-3xl md:text-4xl font-bold mb-4"><span class="gradient-text">Use Cases</span></h2>
+            <p class="text-lg text-gray-400 max-w-3xl mx-auto">PayMint transforms payments across multiple scenarios, adding value to every transaction.</p>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <!-- Use Case 1 -->
+            <div class="nft-card h-full">
+                <div class="nft-card-inner h-full">
+                    <div class="nft-card-front glow-box bg-gray-900 rounded-xl p-6 border border-gray-800 h-full">
+                        <div class="w-14 h-14 bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
+                            <i class="fas fa-file-invoice-dollar text-blue-400 text-2xl"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-3">Freelance Proof</h3>
+                        <p class="text-gray-400 mb-4">Create verifiable proof-of-payment for invoices or freelance work with immutable records.</p>
+                        <div class="mt-auto">
+                            <span class="inline-block bg-blue-900/30 text-blue-400 text-xs px-3 py-1 rounded-full">Business</span>
+                        </div>
+                    </div>
+                    <div class="nft-card-back glow-box bg-gradient-to-br from-blue-900 to-gray-900 rounded-xl p-6 border border-blue-800 h-full flex flex-col justify-center">
+                        <h3 class="text-xl font-bold mb-3 text-white">How It Helps</h3>
+                        <ul class="text-gray-300 space-y-2 text-sm">
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i>
+                                <span>Dispute resolution with permanent records</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i>
+                                <span>Automated tax documentation</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-blue-400 mt-1 mr-2"></i>
+                                <span>Professional payment verification</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <!-- Use Case 2 -->
+            <div class="nft-card h-full">
+                <div class="nft-card-inner h-full">
+                    <div class="nft-card-front glow-box bg-gray-900 rounded-xl p-6 border border-gray-800 h-full">
+                        <div class="w-14 h-14 bg-purple-900/30 rounded-lg flex items-center justify-center mb-4">
+                            <i class="fas fa-heart text-purple-400 text-2xl"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-3">Charity Badges</h3>
+                        <p class="text-gray-400 mb-4">"Proof of Support" NFTs for donations that donors can collect and showcase.</p>
+                        <div class="mt-auto">
+                            <span class="inline-block bg-purple-900/30 text-purple-400 text-xs px-3 py-1 rounded-full">Social Good</span>
+                        </div>
+                    </div>
+                    <div class="nft-card-back glow-box bg-gradient-to-br from-purple-900 to-gray-900 rounded-xl p-6 border border-purple-800 h-full flex flex-col justify-center">
+                        <h3 class="text-xl font-bold mb-3 text-white">How It Helps</h3>
+                        <ul class="text-gray-300 space-y-2 text-sm">
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
+                                <span>Transparent donation tracking</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
+                                <span>Donor engagement through collectibles</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
+                                <span>Verifiable impact proof</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <!-- Use Case 3 -->
+            <div class="nft-card h-full">
+                <div class="nft-card-inner h-full">
+                    <div class="nft-card-front glow-box bg-gray-900 rounded-xl p-6 border border-gray-800 h-full">
+                        <div class="w-14 h-14 bg-pink-900/30 rounded-lg flex items-center justify-center mb-4">
+                            <i class="fas fa-users text-pink-400 text-2xl"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-3">Shared Memories</h3>
+                        <p class="text-gray-400 mb-4">Turn shared expenses with friends or partners into memorable digital artifacts.</p>
+                        <div class="mt-auto">
+                            <span class="inline-block bg-pink-900/30 text-pink-400 text-xs px-3 py-1 rounded-full">Social</span>
+                        </div>
+                    </div>
+                    <div class="nft-card-back glow-box bg-gradient-to-br from-pink-900 to-gray-900 rounded-xl p-6 border border-pink-800 h-full flex flex-col justify-center">
+                        <h3 class="text-xl font-bold mb-3 text-white">How It Helps</h3>
+                        <ul class="text-gray-300 space-y-2 text-sm">
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-pink-400 mt-1 mr-2"></i>
+                                <span>Capture moments around payments</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-pink-400 mt-1 mr-2"></i>
+                                <span>Split expenses with verifiable records</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-pink-400 mt-1 mr-2"></i>
+                                <span>Create a timeline of shared experiences</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <!-- Use Case 4 -->
+            <div class="nft-card h-full">
+                <div class="nft-card-inner h-full">
+                    <div class="nft-card-front glow-box bg-gray-900 rounded-xl p-6 border border-gray-800 h-full">
+                        <div class="w-14 h-14 bg-yellow-900/30 rounded-lg flex items-center justify-center mb-4">
+                            <i class="fas fa-medal text-yellow-400 text-2xl"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-3">Loyalty Rewards</h3>
+                        <p class="text-gray-400 mb-4">Every payment = 1 point = 1 NFT that can be redeemed for perks and discounts.</p>
+                        <div class="mt-auto">
+                            <span class="inline-block bg-yellow-900/30 text-yellow-400 text-xs px-3 py-1 rounded-full">Retail</span>
+                        </div>
+                    </div>
+                    <div class="nft-card-back glow-box bg-gradient-to-br from-yellow-900 to-gray-900 rounded-xl p-6 border border-yellow-800 h-full flex flex-col justify-center">
+                        <h3 class="text-xl font-bold mb-3 text-white">How It Helps</h3>
+                        <ul class="text-gray-300 space-y-2 text-sm">
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-yellow-400 mt-1 mr-2"></i>
+                                <span>Gamified customer engagement</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-yellow-400 mt-1 mr-2"></i>
+                                <span>Transparent reward system</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-yellow-400 mt-1 mr-2"></i>
+                                <span>Customer-owned loyalty points</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <!-- Use Case 5 -->
+            <div class="nft-card h-full">
+                <div class="nft-card-inner h-full">
+                    <div class="nft-card-front glow-box bg-gray-900 rounded-xl p-6 border border-gray-800 h-full">
+                        <div class="w-14 h-14 bg-green-900/30 rounded-lg flex items-center justify-center mb-4">
+                            <i class="fas fa-receipt text-green-400 text-2xl"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-3">Tax Tracking</h3>
+                        <p class="text-gray-400 mb-4">Personal finance NFTs for tax documentation, budgeting, and expense tracking.</p>
+                        <div class="mt-auto">
+                            <span class="inline-block bg-green-900/30 text-green-400 text-xs px-3 py-1 rounded-full">Finance</span>
+                        </div>
+                    </div>
+                    <div class="nft-card-back glow-box bg-gradient-to-br from-green-900 to-gray-900 rounded-xl p-6 border border-green-800 h-full flex flex-col justify-center">
+                        <h3 class="text-xl font-bold mb-3 text-white">How It Helps</h3>
+                        <ul class="text-gray-300 space-y-2 text-sm">
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
+                                <span>Automated expense categorization</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
+                                <span>Immutable tax records</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
+                                <span>Exportable financial reports</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <!-- Use Case 6 -->
+            <div class="nft-card h-full">
+                <div class="nft-card-inner h-full">
+                    <div class="nft-card-front glow-box bg-gray-900 rounded-xl p-6 border border-gray-800 h-full">
+                        <div class="w-14 h-14 bg-red-900/30 rounded-lg flex items-center justify-center mb-4">
+                            <i class="fas fa-id-card text-red-400 text-2xl"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-3">Memberships</h3>
+                        <p class="text-gray-400 mb-4">NFTs as subscription status indicators that update with each payment.</p>
+                        <div class="mt-auto">
+                            <span class="inline-block bg-red-900/30 text-red-400 text-xs px-3 py-1 rounded-full">SaaS</span>
+                        </div>
+                    </div>
+                    <div class="nft-card-back glow-box bg-gradient-to-br from-red-900 to-gray-900 rounded-xl p-6 border border-red-800 h-full flex flex-col justify-center">
+                        <h3 class="text-xl font-bold mb-3 text-white">How It Helps</h3>
+                        <ul class="text-gray-300 space-y-2 text-sm">
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-red-400 mt-1 mr-2"></i>
+                                <span>Automated membership verification</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-red-400 mt-1 mr-2"></i>
+                                <span>User-owned access credentials</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check-circle text-red-400 mt-1 mr-2"></i>
+                                <span>Flexible subscription management</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Demo Section -->
+    <section id="demo" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+        <div class="text-center mb-16">
+            <h2 class="text-3xl md:text-4xl font-bold mb-4">Try <span class="gradient-text">PayMint</span> Demo</h2>
+            <p class="text-lg text-gray-400 max-w-3xl mx-auto">Experience how PayMint transforms your payments into valuable NFTs.</p>
+        </div>
+        <div class="glow-box bg-gray-900 rounded-2xl overflow-hidden border border-gray-800 max-w-4xl mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-2">
+                <!-- Demo Form -->
+                <div class="p-8">
+                    <h3 class="text-xl font-bold mb-6">Create Payment NFT</h3>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-400 mb-1">Payment Amount</label>
+                            <div class="relative">
+                                <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="0.00">
+                                <div class="absolute inset-y-0 right-0 flex items-center pr-3">
+                                    <select class="bg-gray-800 text-sm rounded-r-lg border-l border-gray-700 px-2 py-1 focus:outline-none">
+                                        <option>USDC</option>
+                                        <option>DAI</option>
+                                        <option>USDT</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-400 mb-1">Recipient Address</label>
+                            <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="0x...">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-400 mb-1">Payment Purpose</label>
+                            <select id="purpose-select" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                <option value="">Select a purpose</option>
+                                <option value="dinner">Dinner with friends</option>
+                                <option value="freelance">Freelance payment</option>
+                                <option value="donation">Charity donation</option>
+                                <option value="subscription">Subscription payment</option>
+                                <option value="other">Other</option>
+                            </select>
+                        </div>
+                        <div id="custom-purpose" class="hidden">
+                            <label class="block text-sm font-medium text-gray-400 mb-1">Custom Description</label>
+                            <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Describe this payment">
+                        </div>
+                        <div class="pt-2">
+                            <button id="generate-btn" class="w-full bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 transform hover:scale-[1.02] flex items-center justify-center">
+                                <i class="fas fa-magic mr-2"></i> Generate Payment NFT
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Demo Preview -->
+                <div class="bg-gray-800 p-8 flex items-center justify-center">
+                    <div id="nft-preview" class="glow-box bg-gray-900 rounded-xl p-6 border border-gray-700 w-full max-w-xs transition-all duration-300">
+                        <div class="text-center mb-1">
+                            <i class="fas fa-wallet text-3xl text-gray-500"></i>
+                        </div>
+                        <div class="text-center">
+                            <h4 class="text-lg font-bold mb-1">Your Payment NFT</h4>
+                            <p class="text-sm text-gray-400">Complete the form to preview</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+        <div class="glow-box bg-gradient-to-br from-gray-900 to-gray-800 rounded-2xl p-8 md:p-12 text-center border border-gray-700">
+            <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Payments?</h2>
+            <p class="text-lg text-gray-300 max-w-3xl mx-auto mb-8">Join thousands of users who are turning their everyday transactions into valuable digital artifacts with PayMint.</p>
+            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
+                <button class="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-8 py-4 rounded-full text-lg font-medium transition-all duration-300 transform hover:scale-105 flex items-center justify-center">
+                    <i class="fas fa-rocket mr-2"></i> Get Started Now
+                </button>
+                <button class="border border-gray-600 hover:border-gray-500 text-white px-8 py-4 rounded-full text-lg font-medium transition-all duration-300 hover:bg-gray-800/50 flex items-center justify-center">
+                    <i class="fas fa-book mr-2"></i> Read Documentation
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="border-t border-gray-800 py-12 px-4 sm:px-6 lg:px-8">
+        <div class="max-w-7xl mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-xl font-bold gradient-text inline-block">PayMint</h3>
+                    <p class="text-gray-400 mt-4">Turning payments into proof and memories with blockchain technology.</p>
+                    <div class="flex space-x-4 mt-6">
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i class="fab fa-discord"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i class="fab fa-github"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i class="fab fa-telegram"></i>
+                        </a>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Product</h4>
+                    <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">API</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Integrations</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Resources</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Guides</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">Support</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Company</h4>
+                    <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">Privacy</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-400 text-sm">© 2023 PayMint. All rights reserved.</p>
+                <div class="flex space-x-6 mt-4 md:mt-0">
+                    <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
+                    <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
+                    <a href="#" class="text-gray-400 hover:text-white text-sm">Cookies</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Mobile menu toggle
+        document.getElementById('mobile-menu-button').addEventListener('click', function() {
+            document.getElementById('mobile-menu').classList.toggle('hidden');
+        });
+        // Demo form interactivity
+        document.getElementById('purpose-select').addEventListener('change', function() {
+            const customPurpose = document.getElementById('custom-purpose');
+            if (this.value === 'other') {
+                customPurpose.classList.remove('hidden');
+            } else {
+                customPurpose.classList.add('hidden');
+            }
+        });
+        // Generate NFT preview
+        document.getElementById('generate-btn').addEventListener('click', function() {
+            const purpose = document.getElementById('purpose-select').value;
+            const nftPreview = document.getElementById('nft-preview');
+            if (!purpose) {
+                alert('Please select a payment purpose');
+                return;
+            }
+            // Show loading state
+            nftPreview.innerHTML = `
+                <div class="text-center py-8">
+                    <i class="fas fa-spinner fa-spin text-3xl text-blue-400 mb-4"></i>
+                    <p class="text-sm text-gray-400">Generating your NFT...</p>
+                </div>
+            `;
+            // Simulate generation after delay
+            setTimeout(() => {
+                let title, description, icon, color;
+                switch(purpose) {
+                    case 'dinner':
+                        title = "Dinner with Friends";
+                        description = "Great dinner at XYZ restaurant with Alice and Brayo - good times!";
+                        icon = "utensils";
+                        color = "purple";
+                        break;
+                    case 'freelance':
+                        title = "Freelance Payment";
+                        description = "Payment for completed design work. Project: Website Redesign";
+                        icon = "file-invoice-dollar";
+                        color = "blue";
+                        break;
+                    case 'donation':
+                        title = "Charity Donation";
+                        description = "Supporting education for underprivileged children. Thank you!";
+                        icon = "heart";
+                        color = "pink";
+                        break;
+                    case 'subscription':
+                        title = "Subscription Renewal";
+                        description = "Monthly premium subscription for PayMint Pro features";
+                        icon = "id-card";
+                        color = "red";
+                        break;
+                    default:
+                        title = "Payment Receipt";
+                        description = document.querySelector('#custom-purpose input').value || "Payment completed successfully";
+                        icon = "receipt";
+                        color = "green";
+                }
+                nftPreview.innerHTML = `
+                    <div class="flex justify-between items-center mb-4">
+                        <div>
+                            <p class="text-gray-400 text-sm">Transaction NFT</p>
+                            <h3 class="text-xl font-bold">${title}</h3>
+                        </div>
+                        <div class="text-right">
+                            <p class="text-gray-400 text-sm">Value</p>
+                            <h3 class="text-xl font-bold">15.00 USDC</h3>
+                        </div>
+                    </div>
+                    <div class="mb-6">
+                        <div class="h-48 bg-gradient-to-br from-${color}-900 to-${color}-800 rounded-xl flex items-center justify-center">
+                            <div class="text-center p-4">
+                                <i class="fas fa-${icon} text-4xl mb-2 text-white"></i>
+                                <p class="text-white font-medium">"${description}"</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-3 gap-4 mb-6">
+                        <div>
+                            <p class="text-gray-400 text-xs">Date</p>
+                            <p class="text-sm font-medium">${new Date().toLocaleDateString()}</p>
+                        </div>
+                        <div>
+                            <p class="text-gray-400 text-xs">From</p>
+                            <p class="text-sm font-medium truncate">0x7f...3a4b</p>
+                        </div>
+                        <div>
+                            <p class="text-gray-400 text-xs">To</p>
+                            <p class="text-sm font-medium truncate">0x9d...7c2e</p>
+                        </div>
+                    </div>
+                    <div class="flex justify-between items-center">
+                        <div class="flex items-center">
+                            <img src="https://cryptologos.cc/logos/usd-coin-usdc-logo.png" class="w-6 h-6 mr-2" alt="USDC">
+                            <span class="text-sm">Base Network</span>
+                        </div>
+                        <button class="text-xs bg-gray-800 hover:bg-gray-700 px-3 py-1 rounded-full flex items-center">
+                            <i class="fas fa-external-link-alt mr-1"></i> View TX
+                        </button>
+                    </div>
+                `;
+                // Add pulse animation to celebrate
+                nftPreview.classList.add('pulse');
+                setTimeout(() => {
+                    nftPreview.classList.remove('pulse');
+                }, 2000);
+            }, 1500);
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+                // Close mobile menu if open
+                if (!document.getElementById('mobile-menu').classList.contains('hidden')) {
+                    document.getElementById('mobile-menu').classList.add('hidden');
+                }
+            });
+        });
+    </script>
+    <!-- Particles.js for background effect -->
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+    <script>
+        // Initialize particles.js if loaded
+        if (typeof particlesJS !== 'undefined') {
+            particlesJS('particles-js', {
+                "particles": {
+                    "number": {
+                        "value": 80,
+                        "density": {
+                            "enable": true,
+                            "value_area": 800
+                        }
+                    },
+                    "color": {
+                        "value": "#3b82f6"
+                    },
+                    "shape": {
+                        "type": "circle",
+                        "stroke": {
+                            "width": 0,
+                            "color": "#000000"
+                        },
+                        "polygon": {
+                            "nb_sides": 5
+                        }
+                    },
+                    "opacity": {
+                        "value": 0.3,
+                        "random": false,
+                        "anim": {
+                            "enable": false,
+                            "speed": 1,
+                            "opacity_min": 0.1,
+                            "sync": false
+                        }
+                    },
+                    "size": {
+                        "value": 3,
+                        "random": true,
+                        "anim": {
+                            "enable": false,
+                            "speed": 40,
+                            "size_min": 0.1,
+                            "sync": false
+                        }
+                    },
+                    "line_linked": {
+                        "enable": true,
+                        "distance": 150,
+                        "color": "#3b82f6",
+                        "opacity": 0.2,
+                        "width": 1
+                    },
+                    "move": {
+                        "enable": true,
+                        "speed": 2,
+                        "direction": "none",
+                        "random": false,
+                        "straight": false,
+                        "out_mode": "out",
+                        "bounce": false,
+                        "attract": {
+                            "enable": false,
+                            "rotateX": 600,
+                            "rotateY": 1200
+                        }
+                    }
+                },
+                "interactivity": {
+                    "detect_on": "canvas",
+                    "events": {
+                        "onhover": {
+                            "enable": true,
+                            "mode": "grab"
+                        },
+                        "onclick": {
+                            "enable": true,
+                            "mode": "push"
+                        },
+                        "resize": true
+                    },
+                    "modes": {
+                        "grab": {
+                            "distance": 140,
+                            "line_linked": {
+                                "opacity": 1
+                            }
+                        },
+                        "bubble": {
+                            "distance": 400,
+                            "size": 40,
+                            "duration": 2,
+                            "opacity": 8,
+                            "speed": 3
+                        },
+                        "repulse": {
+                            "distance": 200,
+                            "duration": 0.4
+                        },
+                        "push": {
+                            "particles_nb": 4
+                        },
+                        "remove": {
+                            "particles_nb": 2
+                        }
+                    }
+                },
+                "retina_detect": true
+            });
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=W3cgymnott/nftreceipt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ create futuristic website for this "🔥 Alright — fresh slate, no CryptoDot, no predictable AI tools, no time capsules. You want something unique, with tech depth, real-world relevance, builder-friendly, and ideally not something every other dev will show up with. Let’s do this. --- 💡 New Idea: "PayMint" — Mint NFTs from Real-World Payments --- 🚀 The Concept: > A system that automatically mints NFTs as proof of payment whenever a user sends crypto (especially stablecoins) on Base — turning everyday transactions into receipts, collectibles, memberships, or loyalty stamps. --- 🧠 Why It’s Unique: - Most crypto payments leave no meaningful trail except TX hashes. - You’re turning that payment into a verifiable memory or utility token. - Combine with AI metadata generation to describe the transaction: > "Dinner at XYZ, split 3 ways, great vibes 🌮🍷" --- 🔗 How It Works: | Step | Action | |------|--------| | 1️⃣ | User sends USDC or another stablecoin via your dApp | | 2️⃣ | Smart contract mints a dynamic NFT (ERC-721 or 1155) | | 3️⃣ | NFT is customized: name, value, timestamp, payer/payee, purpose | | 4️⃣ | NFT becomes redeemable, tradable, or used for analytics | --- 🌐 Use Cases: - Proof-of-payment for invoices or freelance work - Personal finance NFTs — tax tracking, budgeting, - Loyalty/Rewards — every payment = 1 point = 1 NFT - Couples/friends — turn shared expenses into memories - Charity — “Proof of Support” badges - Subscriptions — NFT = membership status --- ⚙ Optional AI Layer: - Use AI to generate a visual or description of the transaction - Imagine: you send 15 USDC → get an NFT with a smart caption: > “You just paid your designer. Lookin' clean.” or > “Dinner with Brayo and Alice — good times!” --- 🛠 Tools/Tech Stack: - Base (cheap, fast stablecoin transactions) - NFTs: ERC-721 or 1155 dynamic metadata - AI (optional): for summarizing/generating image/descriptions - IPFS or onchain metadata - Optional dashboard or mini-app --- 🧲 Why It Wins: | Track | Fit? | Why | |--------------|------|-----| | Stablecoins | ✅ | Core of the product — trackable, tokenized payments | | AI | ✅ | Adds personalization & automation | | Entertainment| ✅ | Makes payments fun and collectible | | Mini-apps | ✅ | Feed-based “who paid what” with visual NFTs | | Vibe Coding | ✅ | Super vibey UX — receipts with meaning | --- 🤑 Monetization Options: - Charge per NFT minted (micropayments) - White-label for wallets & DAO treasuries - Enterprise billing NFTs, - Premium features (custom NFT visuals, business receipts, etc.) --- 💥 Tagline Options: - “Turn your payments into proof.” - “Every transaction deserves a memory.” - “Pay. Mint. Remember.” --- Want a demo flow, a clean GitHub starter, or a visual sketch for this? Or want me to throw one last truly left-field idea at you?"