makestx-frontend 1.0.0

package/src/pages/auto-mint.tsx

@@ -0,0 +1,286 @@
+import Head from 'next/head';
+import { useState, useRef } from 'react';
+import {
+  makeContractCall,
+  broadcastTransaction,
+  AnchorMode,
+  PostConditionMode,
+  principalCV,
+} from '@stacks/transactions';
+import { generateWallet, getStxAddress } from '@stacks/wallet-sdk';
+import { TransactionVersion } from '@stacks/transactions';
+import { network, CONTRACT_ADDRESS, CONTRACT_NAME } from '@/hooks/useWallet';
+import Navbar from '@/components/Navbar';
+import { Terminal, Play, Square, AlertTriangle, CheckCircle2, XCircle, Clock } from 'lucide-react';
+
+interface LogEntry {
+  time: string;
+  msg: string;
+  type: 'ok' | 'err' | 'info';
+}
+
+export default function AutoMint() {
+  const [mnemonic, setMnemonic]   = useState('');
+  const [totalTx, setTotalTx]     = useState(100);
+  const [delay, setDelay]         = useState(200);
+  const [recipient, setRecipient] = useState('');
+  const [running, setRunning]     = useState(false);
+  const [logs, setLogs]           = useState<LogEntry[]>([]);
+  const [sent, setSent]           = useState(0);
+  const [ok, setOk]               = useState(0);
+  const [err, setErr]             = useState(0);
+  const [eta, setEta]             = useState('—');
+  const [progress, setProgress]   = useState(0);
+  const stopFlag = useRef(false);
+  const logRef   = useRef<HTMLDivElement>(null);
+
+  const addLog = (msg: string, type: LogEntry['type'] = 'info') => {
+    const time = new Date().toLocaleTimeString('tr-TR');
+    setLogs(prev => [...prev, { time, msg, type }].slice(-300));
+    setTimeout(() => {
+      if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;
+    }, 10);
+  };
+
+  const fmtETA = (ms: number) => {
+    if (!ms || ms < 0) return '—';
+    const s = Math.round(ms / 1000);
+    if (s < 60) return `${s}s`;
+    const m = Math.floor(s / 60);
+    return m < 60 ? `${m}m ${s % 60}s` : `${Math.floor(m / 60)}h ${m % 60}m`;
+  };
+
+  const sleep = (ms: number) => new Promise(r => setTimeout(r, ms));
+
+  const getNonce = async (address: string) => {
+    const res = await fetch(`https://api.mainnet.hiro.so/v2/accounts/${address}?unanchored=true`);
+    if (!res.ok) throw new Error('HTTP ' + res.status);
+    return parseInt((await res.json()).nonce);
+  };
+
+  const deriveAccount = async (mn: string) => {
+    const words = mn.trim().split(/\s+/);
+    if (words.length !== 12 && words.length !== 24) throw new Error('12 or 24 words required');
+    const wallet = await generateWallet({ secretKey: mn.trim(), password: '' });
+    const account = wallet.accounts[0];
+    return {
+      privateKey: account.stxPrivateKey,
+      address: getStxAddress({ account, transactionVersion: TransactionVersion.Mainnet }),
+    };
+  };
+
+  const mintOne = async (privateKey: string, to: string, nonce: number) => {
+    const tx = await makeContractCall({
+      contractAddress: CONTRACT_ADDRESS,
+      contractName:    CONTRACT_NAME,
+      functionName:    'mint',
+      functionArgs:    [principalCV(to)],
+      senderKey: privateKey,
+      network,
+      nonce: BigInt(nonce),
+      anchorMode:        AnchorMode.Any,
+      postConditionMode: PostConditionMode.Allow,
+      fee: BigInt(2000),
+    });
+    const result = await broadcastTransaction(tx, network);
+    if (result.error) throw new Error(result.error + (result.reason ? ` (${result.reason})` : ''));
+    return result.txid;
+  };
+
+  const startMint = async () => {
+    if (running) return;
+    if (!mnemonic.trim()) { addLog('ERROR: Seed phrase is empty', 'err'); return; }
+
+    stopFlag.current = false;
+    setRunning(true);
+    setLogs([]);
+    setSent(0); setOk(0); setErr(0); setProgress(0); setEta('—');
+
+    let privateKey: string, address: string;
+    try {
+      ({ privateKey, address } = await deriveAccount(mnemonic));
+      addLog(`WALLET: ${address}`, 'ok');
+    } catch (e: any) {
+      addLog('ERR: ' + e.message, 'err');
+      setRunning(false); return;
+    }
+
+    const to = recipient.trim() || address;
+    addLog(`RECIPIENT: ${to}`, 'info');
+
+    let nonce: number;
+    try {
+      nonce = await getNonce(address);
+      addLog(`NONCE: ${nonce} | TOTAL TX: ${totalTx}`, 'info');
+    } catch (e: any) {
+      addLog('NONCE_ERR: ' + e.message, 'err');
+      setRunning(false); return;
+    }
+
+    let okCount = 0, errCount = 0;
+    const startTime = Date.now();
+
+    for (let i = 0; i < totalTx; i++) {
+      if (stopFlag.current) { addLog('// PROCESS TERMINATED BY USER', 'info'); break; }
+
+      try {
+        const txid = await mintOne(privateKey, to, nonce + i);
+        okCount++;
+        addLog(`TX_${String(i + 1).padStart(4,'0')} SUCCESS · ${txid.slice(0, 20)}...`, 'ok');
+      } catch (e: any) {
+        errCount++;
+        addLog(`TX_${String(i + 1).padStart(4,'0')} FAILED  · ${e.message}`, 'err');
+      }
+
+      const s       = i + 1;
+      const elapsed = Date.now() - startTime;
+      const etaMs   = (elapsed / s) * (totalTx - s);
+      setSent(s); setOk(okCount); setErr(errCount);
+      setProgress(Math.round((s / totalTx) * 100));
+      setEta(fmtETA(etaMs));
+
+      if (i < totalTx - 1 && !stopFlag.current) await sleep(delay);
+    }
+
+    const total = Date.now() - startTime;
+    addLog(`// COMPLETE · ${okCount} OK · ${errCount} FAILED · ${fmtETA(total)}`, okCount > 0 ? 'ok' : 'err');
+    setRunning(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>Auto Mint — MakeSTX</title>
+      </Head>
+      <div className="min-h-screen bg-ms-bg grid-bg">
+        <Navbar />
+
+        <main className="pt-28 pb-16 px-4 max-w-xl mx-auto">
+
+          {/* Header */}
+          <div className="mb-8">
+            <p className="font-mono text-xs text-ms-muted tracking-widest mb-1">// auto_mint_v1.js</p>
+            <h1 className="font-display font-black text-3xl text-ms-text tracking-tight">
+              AUTO <span className="text-ms-cyan">MINT</span>
+            </h1>
+            <p className="font-mono text-xs text-ms-muted mt-1">
+              {CONTRACT_ADDRESS.slice(0, 10)}...{CONTRACT_ADDRESS.slice(-6)}.{CONTRACT_NAME}
+            </p>
+          </div>
+
+          {/* Warning */}
+          <div className="flex gap-2 p-3 mb-5 bg-yellow-500/5 border border-yellow-500/30">
+            <AlertTriangle size={14} className="text-yellow-400 shrink-0 mt-0.5" />
+            <p className="text-xs font-mono text-yellow-400/80">
+              SEED PHRASE NEVER LEAVES YOUR BROWSER. USE A DEDICATED MINT WALLET.
+            </p>
+          </div>
+
+          {/* Seed phrase */}
+          <div className="card-dark p-4 mb-3">
+            <label className="block text-xs font-mono text-ms-muted tracking-widest mb-2">
+              // SEED_PHRASE (12 OR 24 WORDS)
+            </label>
+            <input
+              type="password"
+              value={mnemonic}
+              onChange={e => setMnemonic(e.target.value)}
+              placeholder="word1 word2 word3 ..."
+              disabled={running}
+              className="w-full bg-ms-bg border border-ms-border px-3 py-2 text-xs font-mono text-ms-text placeholder-ms-muted focus:outline-none focus:border-ms-cyan disabled:opacity-40 tracking-wider"
+            />
+          </div>
+
+          {/* Config */}
+          <div className="card-dark p-4 mb-4">
+            <div className="grid grid-cols-2 gap-3 mb-3">
+              <div>
+                <label className="block text-xs font-mono text-ms-muted tracking-widest mb-2">TOTAL_TX</label>
+                <input type="number" value={totalTx} onChange={e => setTotalTx(parseInt(e.target.value))}
+                  min={1} max={10000} disabled={running}
+                  className="w-full bg-ms-bg border border-ms-border px-3 py-2 text-xs font-mono text-ms-text focus:outline-none focus:border-ms-cyan disabled:opacity-40" />
+              </div>
+              <div>
+                <label className="block text-xs font-mono text-ms-muted tracking-widest mb-2">DELAY_MS</label>
+                <input type="number" value={delay} onChange={e => setDelay(parseInt(e.target.value))}
+                  min={50} disabled={running}
+                  className="w-full bg-ms-bg border border-ms-border px-3 py-2 text-xs font-mono text-ms-text focus:outline-none focus:border-ms-cyan disabled:opacity-40" />
+              </div>
+            </div>
+            <div>
+              <label className="block text-xs font-mono text-ms-muted tracking-widest mb-2">RECIPIENT (OPTIONAL)</label>
+              <input type="text" value={recipient} onChange={e => setRecipient(e.target.value)}
+                placeholder="SP... (default: sender)" disabled={running}
+                className="w-full bg-ms-bg border border-ms-border px-3 py-2 text-xs font-mono text-ms-text placeholder-ms-muted focus:outline-none focus:border-ms-cyan disabled:opacity-40" />
+            </div>
+          </div>
+
+          {/* Stats */}
+          <div className="grid grid-cols-4 gap-2 mb-3">
+            {[
+              { label: 'SENT', value: sent, icon: <Clock size={11} />, color: 'text-ms-cyan' },
+              { label: 'OK',   value: ok,   icon: <CheckCircle2 size={11} />, color: 'text-green-400' },
+              { label: 'FAIL', value: err,  icon: <XCircle size={11} />,    color: 'text-red-400' },
+              { label: 'ETA',  value: eta,  icon: <Terminal size={11} />,   color: 'text-ms-muted' },
+            ].map(({ label, value, icon, color }) => (
+              <div key={label} className="card-dark p-3">
+                <div className={`flex items-center gap-1 ${color} mb-1`}>{icon}<span className="font-mono text-xs text-ms-muted">{label}</span></div>
+                <div className={`text-lg font-display font-bold ${color}`}>{value}</div>
+              </div>
+            ))}
+          </div>
+
+          {/* Progress */}
+          <div className="mb-4">
+            <div className="h-px bg-ms-surface overflow-hidden mb-1">
+              <div
+                className="h-full bg-ms-cyan transition-all duration-200"
+                style={{ width: `${progress}%`, boxShadow: '0 0 8px #00f5ff' }}
+              />
+            </div>
+            <div className="flex items-center justify-between font-mono text-xs text-ms-muted">
+              <span>{sent} / {totalTx} TX</span>
+              <span>{progress}%</span>
+            </div>
+          </div>
+
+          {/* Log terminal */}
+          <div
+            ref={logRef}
+            className="h-52 overflow-y-auto bg-ms-bg border border-ms-border p-3 font-mono text-xs mb-4"
+            style={{ fontFamily: "'Share Tech Mono', monospace" }}
+          >
+            <div className="text-ms-muted mb-2">MakeSTX Auto-Mint Terminal v1.0</div>
+            <div className="text-ms-muted mb-2 border-b border-ms-border pb-2">{'>'} Awaiting input...</div>
+            {logs.map((l, i) => (
+              <div key={i} className={
+                l.type === 'ok'  ? 'text-green-400' :
+                l.type === 'err' ? 'text-red-400' :
+                'text-ms-muted'
+              }>
+                <span className="text-ms-border">[{l.time}]</span> {l.msg}
+              </div>
+            ))}
+            {running && <div className="text-ms-cyan animate-pulse mt-1">▋</div>}
+          </div>
+
+          {/* Button */}
+          {!running ? (
+            <button onClick={startMint} className="btn-primary w-full py-4 text-sm flex items-center justify-center gap-2">
+              <Play size={14} />
+              <span>START AUTO MINT</span>
+            </button>
+          ) : (
+            <button
+              onClick={() => { stopFlag.current = true; }}
+              className="w-full py-4 border border-red-500 text-red-400 font-mono text-xs tracking-widest hover:bg-red-500/10 transition-all flex items-center justify-center gap-2"
+            >
+              <Square size={12} fill="currentColor" />
+              TERMINATE PROCESS
+            </button>
+          )}
+        </main>
+      </div>
+    </>
+  );
+}

package/src/pages/explore.tsx

@@ -0,0 +1,107 @@
+import Head from 'next/head';
+import { useState } from 'react';
+import Navbar from '@/components/Navbar';
+import NFTCard from '@/components/NFTCard';
+import { Search, SlidersHorizontal } from 'lucide-react';
+
+const MOCK_NFTS = Array.from({ length: 24 }, (_, i) => ({
+  tokenId: i + 1,
+  name:    `MakeSTX #${String(i + 1).padStart(4, '0')}`,
+  image:   `https://api.dicebear.com/8.x/pixel-art/svg?seed=mkstx${i + 1}&backgroundColor=030308&colorful=true`,
+  owner:   `SP${Math.random().toString(36).slice(2, 10).toUpperCase()}ABCDEF`,
+  price:   Math.random() > 0.4 ? Math.floor((Math.random() * 100 + 1) * 1_000_000) : undefined,
+  isListed: Math.random() > 0.4,
+}));
+
+const SORT_OPTIONS = ['RECENTLY LISTED', 'PRICE: LOW → HIGH', 'PRICE: HIGH → LOW', 'TOKEN ID'];
+
+export default function Explore() {
+  const [search, setSearch]           = useState('');
+  const [sort, setSort]               = useState('RECENTLY LISTED');
+  const [filterListed, setFilterListed] = useState(false);
+
+  const filtered = MOCK_NFTS
+    .filter(n => {
+      if (filterListed && !n.isListed) return false;
+      if (search && !n.name.toLowerCase().includes(search.toLowerCase())) return false;
+      return true;
+    })
+    .sort((a, b) => {
+      if (sort === 'PRICE: LOW → HIGH')  return (a.price || 0) - (b.price || 0);
+      if (sort === 'PRICE: HIGH → LOW')  return (b.price || 0) - (a.price || 0);
+      if (sort === 'TOKEN ID')            return a.tokenId - b.tokenId;
+      return b.tokenId - a.tokenId;
+    });
+
+  return (
+    <>
+      <Head>
+        <title>Explore — MakeSTX</title>
+        <meta name="description" content="Browse MakeSTX Cyberpunk NFTs." />
+      </Head>
+
+      <div className="min-h-screen bg-ms-bg">
+        <Navbar />
+
+        <main className="pt-24 pb-16 px-4 max-w-7xl mx-auto">
+          <div className="mb-8">
+            <p className="font-mono text-xs text-ms-muted tracking-widest mb-1">// explore_collection.tsx</p>
+            <h1 className="font-display font-black text-4xl text-ms-text tracking-tight">
+              EXPLORE <span className="text-ms-cyan">COLLECTION</span>
+            </h1>
+            <p className="font-mono text-xs text-ms-muted mt-2">
+              {filtered.length} NFTs · {MOCK_NFTS.filter(n => n.isListed).length} LISTED
+            </p>
+          </div>
+
+          {/* Filters */}
+          <div className="flex flex-col sm:flex-row gap-3 mb-8">
+            <div className="relative flex-1">
+              <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-ms-muted" />
+              <input
+                type="text"
+                placeholder="SEARCH BY NAME OR ID..."
+                value={search}
+                onChange={e => setSearch(e.target.value)}
+                className="w-full bg-ms-surface border border-ms-border pl-9 pr-4 py-2.5 text-xs font-mono text-ms-text placeholder-ms-muted focus:outline-none focus:border-ms-cyan transition-colors tracking-widest"
+              />
+            </div>
+
+            <select
+              value={sort}
+              onChange={e => setSort(e.target.value)}
+              className="bg-ms-surface border border-ms-border px-4 py-2.5 text-xs font-mono text-ms-text focus:outline-none focus:border-ms-cyan tracking-widest"
+            >
+              {SORT_OPTIONS.map(o => <option key={o}>{o}</option>)}
+            </select>
+
+            <button
+              onClick={() => setFilterListed(!filterListed)}
+              className={`flex items-center gap-2 px-4 py-2.5 text-xs font-mono tracking-widest border transition-all ${
+                filterListed
+                  ? 'border-ms-cyan text-ms-cyan bg-ms-cyan/10'
+                  : 'border-ms-border text-ms-muted hover:border-ms-cyan hover:text-ms-cyan'
+              }`}
+            >
+              <SlidersHorizontal size={13} />
+              LISTED ONLY
+            </button>
+          </div>
+
+          {/* Grid */}
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+            {filtered.map(nft => (
+              <NFTCard key={nft.tokenId} {...nft} />
+            ))}
+          </div>
+
+          {filtered.length === 0 && (
+            <div className="text-center py-24">
+              <p className="font-mono text-ms-muted text-sm tracking-widest">// NO_RESULTS_FOUND</p>
+            </div>
+          )}
+        </main>
+      </div>
+    </>
+  );
+}

package/src/pages/index.tsx

@@ -0,0 +1,241 @@
+import Head from 'next/head';
+import Link from 'next/link';
+import Navbar from '@/components/Navbar';
+import NFTCard from '@/components/NFTCard';
+import { useWallet } from '@/hooks/useWallet';
+import { ArrowRight, Zap, Shield, TrendingUp, Terminal, Activity } from 'lucide-react';
+
+const STATS = [
+  { label: 'TOTAL MINTED',  value: '0',          unit: '/ 10,000' },
+  { label: 'TOTAL VOLUME',  value: '0',          unit: 'STX' },
+  { label: 'HOLDERS',       value: '0',          unit: 'wallets' },
+  { label: 'TRANSACTIONS',  value: '0',          unit: 'tx' },
+];
+
+const FEATURES = [
+  {
+    icon: Zap,
+    title: 'FREE MINT',
+    desc: 'Gas fee only. No whitelist, no presale. Just connect and mint.',
+    color: 'text-ms-cyan',
+    border: 'border-ms-cyan/30',
+  },
+  {
+    icon: Shield,
+    title: 'BITCOIN SECURED',
+    desc: 'Every transaction settled on Bitcoin through the Stacks layer.',
+    color: 'text-ms-magenta',
+    border: 'border-ms-magenta/30',
+  },
+  {
+    icon: TrendingUp,
+    title: '5% ROYALTIES',
+    desc: 'Creator royalties enforced on-chain via smart contract.',
+    color: 'text-purple-400',
+    border: 'border-purple-400/30',
+  },
+];
+
+const FEATURED = Array.from({ length: 6 }, (_, i) => ({
+  tokenId: i + 1,
+  name:    `MakeSTX #${String(i + 1).padStart(4, '0')}`,
+  image:   `https://api.dicebear.com/8.x/pixel-art/svg?seed=makestx${i + 100}&backgroundColor=030308&colorful=true`,
+  price:   Math.floor((Math.random() * 80 + 5) * 1_000_000),
+  isListed: Math.random() > 0.4,
+}));
+
+export default function Home() {
+  const { isConnected, connect } = useWallet();
+
+  return (
+    <>
+      <Head>
+        <title>MakeSTX — Cyberpunk NFT Collection on Stacks</title>
+        <meta name="description" content="10,000 cyberpunk NFTs. Free mint. Bitcoin-secured via Stacks blockchain." />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <div className="min-h-screen bg-ms-bg grid-bg">
+        <Navbar />
+
+        {/* ── HERO ──────────────────────────────────────────────── */}
+        <section className="relative pt-36 pb-28 px-4 overflow-hidden">
+          {/* Glowing orbs */}
+          <div className="absolute top-20 left-1/4 w-96 h-96 rounded-full bg-ms-cyan/5 blur-3xl pointer-events-none" />
+          <div className="absolute top-40 right-1/4 w-80 h-80 rounded-full bg-ms-magenta/5 blur-3xl pointer-events-none" />
+          <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-full h-px bg-gradient-to-r from-transparent via-ms-cyan/30 to-transparent" />
+
+          <div className="relative max-w-5xl mx-auto text-center">
+            {/* Badge */}
+            <div className="inline-flex items-center gap-2 tag tag-cyan mb-8">
+              <Terminal size={10} />
+              STACKS MAINNET · CYBERPUNK COLLECTION · 10,000 SUPPLY
+            </div>
+
+            {/* Headline */}
+            <h1 className="font-display font-black leading-none mb-6">
+              <span className="block text-6xl md:text-8xl text-ms-text tracking-tight">
+                MAKE
+              </span>
+              <span className="block text-6xl md:text-8xl gradient-text tracking-tight flicker">
+                STX
+              </span>
+              <span className="block text-xl md:text-2xl text-ms-muted tracking-[0.3em] mt-2 font-normal">
+                CYBERPUNK NFT COLLECTION
+              </span>
+            </h1>
+
+            <p className="text-ms-muted text-base md:text-lg max-w-xl mx-auto mb-12 leading-relaxed font-light tracking-wide">
+              10,000 unique cyberpunk NFTs living on the Stacks blockchain.
+              Free mint. No gas wars. Secured by Bitcoin.
+            </p>
+
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Link
+                href="/mint"
+                className="btn-primary inline-flex items-center justify-center gap-2 px-10 py-4 text-sm neon-pulse"
+              >
+                <span>MINT FREE NFT</span>
+                <ArrowRight size={16} />
+              </Link>
+              <Link
+                href="/explore"
+                className="btn-outline inline-flex items-center justify-center gap-2 px-10 py-4 text-sm font-mono tracking-widest text-ms-muted"
+              >
+                EXPLORE COLLECTION
+              </Link>
+            </div>
+
+            {/* Supply bar */}
+            <div className="mt-16 max-w-md mx-auto">
+              <div className="flex items-center justify-between text-xs font-mono text-ms-muted mb-2">
+                <span>MINTED</span>
+                <span>0 / 10,000</span>
+              </div>
+              <div className="h-1 bg-ms-surface border border-ms-border overflow-hidden">
+                <div className="h-full bg-ms-cyan w-0 transition-all duration-1000" style={{ boxShadow: '0 0 8px #00f5ff' }} />
+              </div>
+              <p className="text-xs font-mono text-ms-muted mt-2 text-center">10,000 REMAINING</p>
+            </div>
+          </div>
+        </section>
+
+        {/* ── STATS ─────────────────────────────────────────────── */}
+        <section className="py-12 border-y border-ms-border bg-ms-surface/30">
+          <div className="max-w-5xl mx-auto px-4">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+              {STATS.map((s) => (
+                <div key={s.label} className="text-center">
+                  <p className="text-3xl md:text-4xl font-display font-black gradient-text-cyan">{s.value}</p>
+                  <p className="text-xs font-mono text-ms-muted mt-1 tracking-widest">{s.label}</p>
+                  <p className="text-xs font-mono text-ms-muted/50">{s.unit}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* ── FEATURED NFTs ─────────────────────────────────────── */}
+        <section className="py-24 px-4">
+          <div className="max-w-7xl mx-auto">
+            <div className="flex items-center justify-between mb-10">
+              <div>
+                <h2 className="text-2xl font-display font-bold text-ms-text tracking-widest">
+                  COLLECTION <span className="text-ms-cyan">PREVIEW</span>
+                </h2>
+                <p className="text-ms-muted text-sm font-mono mt-1">// cyberpunk_series_001</p>
+              </div>
+              <Link href="/explore" className="btn-outline px-4 py-2 text-xs font-mono flex items-center gap-2">
+                VIEW ALL <ArrowRight size={12} />
+              </Link>
+            </div>
+
+            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
+              {FEATURED.map((nft) => (
+                <NFTCard key={nft.tokenId} {...nft} />
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* ── FEATURES ──────────────────────────────────────────── */}
+        <section className="py-20 px-4 border-t border-ms-border">
+          <div className="max-w-5xl mx-auto">
+            <div className="text-center mb-14">
+              <h2 className="text-2xl font-display font-bold text-ms-text tracking-widest">
+                WHY <span className="gradient-text">MAKESTX</span>?
+              </h2>
+              <p className="text-ms-muted font-mono text-sm mt-2">// built_different.clar</p>
+            </div>
+            <div className="grid md:grid-cols-3 gap-6">
+              {FEATURES.map((f) => (
+                <div key={f.title} className={`card-cyber p-6 rounded-none hover:${f.border} transition-colors`}>
+                  <div className={`w-10 h-10 border ${f.border} flex items-center justify-center mb-4 ${f.color}`}>
+                    <f.icon size={20} />
+                  </div>
+                  <h3 className="font-display font-bold text-ms-text text-sm tracking-widest mb-2">{f.title}</h3>
+                  <p className="text-ms-muted text-sm leading-relaxed">{f.desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* ── CTA ───────────────────────────────────────────────── */}
+        <section className="py-24 px-4">
+          <div className="max-w-2xl mx-auto text-center">
+            <div className="card-cyber p-12 relative overflow-hidden">
+              <div className="absolute inset-0 bg-gradient-to-br from-ms-cyan/5 to-ms-magenta/5 pointer-events-none" />
+              <Activity size={32} className="text-ms-cyan mx-auto mb-4 relative" />
+              <h2 className="text-2xl font-display font-bold text-ms-text mb-3 relative tracking-widest">
+                READY TO MINT?
+              </h2>
+              <p className="text-ms-muted mb-8 relative font-mono text-sm">
+                Connect your Stacks wallet. Pay only gas. Own a piece of the cyberpunk universe.
+              </p>
+              <div className="flex flex-col sm:flex-row gap-3 justify-center relative">
+                {!isConnected ? (
+                  <button onClick={connect} className="btn-primary px-10 py-4 text-sm neon-pulse">
+                    <span>CONNECT &amp; MINT</span>
+                  </button>
+                ) : (
+                  <Link href="/mint" className="btn-primary px-10 py-4 text-sm">
+                    <span>MINT NOW — FREE</span>
+                  </Link>
+                )}
+                <Link href="/multi-mint" className="btn-magenta px-10 py-4 text-xs">
+                  ⚡ MULTI MINT
+                </Link>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* ── FOOTER ────────────────────────────────────────────── */}
+        <footer className="border-t border-ms-border py-8 px-4 bg-ms-surface/30">
+          <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
+            <div className="flex items-center gap-2">
+              <span className="font-display font-black text-sm tracking-widest">
+                MAKE<span className="text-ms-cyan">STX</span>
+              </span>
+              <span className="text-ms-muted font-mono text-xs">© 2025</span>
+            </div>
+            <div className="flex items-center gap-6 text-xs font-mono text-ms-muted">
+              {[
+                { href: '/explore',   label: 'EXPLORE' },
+                { href: '/mint',      label: 'MINT' },
+                { href: '/multi-mint',label: 'MULTI MINT' },
+                { href: 'https://stacks.co', label: 'STACKS', ext: true },
+              ].map(({ href, label, ext }) => (
+                <a key={label} href={href} target={ext ? '_blank' : undefined} rel={ext ? 'noopener noreferrer' : undefined}
+                   className="hover:text-ms-cyan transition-colors tracking-widest">
+                  {label}
+                </a>
+              ))}
+            </div>
+          </div>
+        </footer>
+      </div>
+    </>
+  );
+}