@nordsym/apiclaw 1.1.2 → 1.1.4

package/landing/src/app/earn/page.tsx

@@ -0,0 +1,305 @@
+'use client';
+
+import Link from 'next/link';
+import { useState, useEffect } from 'react';
+import { Star, Twitter, Mail, Users, Sun, Moon, ArrowRight, Copy, Check, Sparkles } from 'lucide-react';
+
+const EARN_CHANNELS = [
+  {
+    id: 'github',
+    iconName: 'star',
+    title: 'Star on GitHub',
+    description: 'Show some love on GitHub',
+    credits: 500,
+    cta: 'Star Repository',
+    href: 'https://github.com/nordsym/apiclaw',
+    color: 'from-amber-500/20 to-yellow-500/10',
+    borderColor: 'hover:border-amber-500/50',
+    iconColor: 'text-amber-500',
+  },
+  {
+    id: 'twitter',
+    iconName: 'twitter',
+    title: 'Follow @NordSym',
+    description: 'Stay updated on X/Twitter',
+    credits: 250,
+    cta: 'Follow Us',
+    href: 'https://x.com/NordSym',
+    color: 'from-sky-500/20 to-sky-600/10',
+    borderColor: 'hover:border-sky-500/50',
+    iconColor: 'text-sky-500',
+  },
+  {
+    id: 'newsletter',
+    iconName: 'mail',
+    title: 'Join Newsletter',
+    description: 'Get weekly updates & tips',
+    credits: 100,
+    cta: 'Subscribe',
+    href: '#newsletter',
+    color: 'from-emerald-500/20 to-emerald-600/10',
+    borderColor: 'hover:border-emerald-500/50',
+    iconColor: 'text-emerald-500',
+  },
+  {
+    id: 'referral',
+    iconName: 'users',
+    title: 'Invite Friends',
+    description: 'Earn for each friend who joins',
+    credits: 500,
+    perUnit: 'per friend',
+    cta: 'Copy Link',
+    color: 'from-orange-500/20 to-red-500/10',
+    borderColor: 'hover:border-orange-500/50',
+    iconColor: 'text-orange-500',
+    isReferral: true,
+  },
+];
+
+const IconMap: Record<string, React.ComponentType<{ className?: string }>> = {
+  star: Star,
+  twitter: Twitter,
+  mail: Mail,
+  users: Users,
+};
+
+function generateReferralCode() {
+  return 'CLAW-' + Math.random().toString(36).substring(2, 8).toUpperCase();
+}
+
+export default function EarnPage() {
+  const [referralCode] = useState(() => generateReferralCode());
+  const [copied, setCopied] = useState(false);
+  const [email, setEmail] = useState('');
+  const [subscribed, setSubscribed] = useState(false);
+  const [totalCredits] = useState(1350); // Demo value
+  const [theme, setTheme] = useState<'light' | 'dark'>('dark');
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('apiclaw-theme') as 'light' | 'dark' | null;
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    const initialTheme = savedTheme || systemTheme;
+    setTheme(initialTheme);
+    document.documentElement.classList.toggle('dark', initialTheme === 'dark');
+  }, []);
+
+  const toggleTheme = () => {
+    const newTheme = theme === 'dark' ? 'light' : 'dark';
+    setTheme(newTheme);
+    localStorage.setItem('apiclaw-theme', newTheme);
+    document.documentElement.classList.toggle('dark', newTheme === 'dark');
+  };
+
+  const copyReferralLink = () => {
+    const link = `https://apiclaw.com/join?ref=${referralCode}`;
+    navigator.clipboard.writeText(link);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleSubscribe = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (email) {
+      setSubscribed(true);
+      // Would hit API here
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[var(--background)] text-[var(--text-primary)]">
+      {/* Header */}
+      <header className="border-b border-[var(--border)] bg-[var(--background)]/80 backdrop-blur-xl sticky top-0 z-50">
+        <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
+          <Link href="/" className="flex items-center gap-3 group">
+            <span className="text-2xl">🦞</span>
+            <span className="text-xl font-bold gradient-text-static">
+              APIClaw
+            </span>
+          </Link>
+          <nav className="flex items-center gap-6">
+            <Link href="/" className="text-[var(--text-secondary)] hover:text-[var(--accent)] transition-colors">
+              Home
+            </Link>
+            <Link href="/docs" className="text-[var(--text-secondary)] hover:text-[var(--accent)] transition-colors">
+              Docs
+            </Link>
+            <Link href="/providers" className="text-[var(--text-secondary)] hover:text-[var(--accent)] transition-colors">
+              Providers
+            </Link>
+            <button
+              onClick={toggleTheme}
+              className="p-2 rounded-lg bg-[var(--surface)] border border-[var(--border)] hover:border-[var(--accent)]/50 transition-colors"
+              aria-label="Toggle theme"
+            >
+              {theme === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+            </button>
+          </nav>
+        </div>
+      </header>
+
+      <main className="max-w-5xl mx-auto px-6 py-16">
+        {/* Hero */}
+        <div className="text-center mb-16">
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--accent)]/10 border border-[var(--accent)]/20 text-[var(--accent)] text-sm font-medium mb-6">
+            <Sparkles className="w-4 h-4 animate-pulse" />
+            Free API Credits
+          </div>
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-4">
+            <span className="gradient-text">Earn Free Credits</span>
+          </h1>
+          <p className="text-xl text-[var(--text-secondary)] max-w-2xl mx-auto">
+            Complete simple tasks to earn API credits. Use them for SMS, search, AI, and more.
+          </p>
+        </div>
+
+        {/* Credits Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
+          {EARN_CHANNELS.map((channel) => (
+            <div
+              key={channel.id}
+              className={`relative overflow-hidden rounded-2xl border border-[var(--border)] bg-gradient-to-br ${channel.color} p-8 transition-all duration-300 ${channel.borderColor} hover:translate-y-[-4px] hover:shadow-xl`}
+            >
+              {/* Icon */}
+              <div className="mb-4">
+                {(() => {
+                  const IconComponent = IconMap[channel.iconName];
+                  return IconComponent ? <IconComponent className={`w-12 h-12 ${channel.iconColor}`} /> : null;
+                })()}
+              </div>
+
+              {/* Content */}
+              <h3 className="text-xl font-bold mb-1">{channel.title}</h3>
+              <p className="text-[var(--text-secondary)] text-sm mb-4">
+                {channel.description}
+              </p>
+
+              {/* Credits Amount */}
+              <div className="flex items-baseline gap-1 mb-6">
+                <span className="text-3xl font-bold gradient-text-static">
+                  +{channel.credits}
+                </span>
+                <span className="text-[var(--text-muted)] text-sm">
+                  credits {channel.perUnit || ''}
+                </span>
+              </div>
+
+              {/* CTA Button */}
+              {channel.isReferral ? (
+                <button
+                  onClick={copyReferralLink}
+                  className="w-full py-3 px-6 rounded-xl bg-[var(--accent)] text-white font-semibold hover:bg-[#dc2626] transition-all flex items-center justify-center gap-2"
+                >
+                  {copied ? (
+                    <>
+                      <Check className="w-5 h-5" /> Copied!
+                    </>
+                  ) : (
+                    <>
+                      <Copy className="w-5 h-5" /> {channel.cta}
+                    </>
+                  )}
+                </button>
+              ) : channel.id === 'newsletter' ? (
+                subscribed ? (
+                  <div className="w-full py-3 px-6 rounded-xl bg-emerald-500/20 text-emerald-400 font-semibold text-center border border-emerald-500/30 flex items-center justify-center gap-2">
+                    <Check className="w-5 h-5" /> Subscribed!
+                  </div>
+                ) : (
+                  <form onSubmit={handleSubscribe} className="flex gap-2">
+                    <input
+                      type="email"
+                      placeholder="your@email.com"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      className="flex-1 py-3 px-4 rounded-xl bg-[var(--surface)] border border-[var(--border)] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent)] focus:outline-none transition-colors"
+                    />
+                    <button
+                      type="submit"
+                      className="py-3 px-6 rounded-xl bg-[var(--accent)] text-white font-semibold hover:bg-[#dc2626] transition-all"
+                    >
+                      <ArrowRight className="w-5 h-5" />
+                    </button>
+                  </form>
+                )
+              ) : (
+                <a
+                  href={channel.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="w-full py-3 px-6 rounded-xl bg-[var(--accent)] text-white font-semibold hover:bg-[#dc2626] transition-all flex items-center justify-center gap-2"
+                >
+                  {channel.cta} <ArrowRight className="w-5 h-5" />
+                </a>
+              )}
+
+              {/* Referral Code Display */}
+              {channel.isReferral && (
+                <div className="mt-4 p-3 rounded-lg bg-[var(--surface)]/50 border border-[var(--border)]">
+                  <p className="text-xs text-[var(--text-muted)] mb-1">Your referral code:</p>
+                  <code className="text-sm font-mono text-[var(--accent)]">{referralCode}</code>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        {/* Total Credits Display */}
+        <div className="text-center py-12 border-t border-[var(--border)]">
+          <p className="text-[var(--text-muted)] text-sm uppercase tracking-widest mb-2">
+            Your Balance
+          </p>
+          <div className="flex items-center justify-center gap-3">
+            <span className="text-5xl md:text-6xl font-bold gradient-text">
+              {totalCredits.toLocaleString()}
+            </span>
+            <span className="text-2xl text-[var(--text-secondary)]">credits</span>
+          </div>
+          <p className="text-[var(--text-muted)] mt-4">
+            Credits refresh monthly • No expiration
+          </p>
+        </div>
+
+        {/* How it works */}
+        <div className="mt-16 p-8 rounded-2xl bg-[var(--surface)] border border-[var(--border)]">
+          <h2 className="text-2xl font-bold mb-6 text-center">How Credits Work</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div className="text-center">
+              <div className="w-12 h-12 rounded-full bg-[var(--accent)]/10 text-[var(--accent)] flex items-center justify-center mx-auto mb-4 text-xl font-bold">
+                1
+              </div>
+              <h3 className="font-semibold mb-2">Earn</h3>
+              <p className="text-[var(--text-secondary)] text-sm">
+                Complete tasks above to earn free API credits
+              </p>
+            </div>
+            <div className="text-center">
+              <div className="w-12 h-12 rounded-full bg-[var(--accent)]/10 text-[var(--accent)] flex items-center justify-center mx-auto mb-4 text-xl font-bold">
+                2
+              </div>
+              <h3 className="font-semibold mb-2">Use</h3>
+              <p className="text-[var(--text-secondary)] text-sm">
+                Spend credits on API calls — SMS, search, AI, and more
+              </p>
+            </div>
+            <div className="text-center">
+              <div className="w-12 h-12 rounded-full bg-[var(--accent)]/10 text-[var(--accent)] flex items-center justify-center mx-auto mb-4 text-xl font-bold">
+                3
+              </div>
+              <h3 className="font-semibold mb-2">Share</h3>
+              <p className="text-[var(--text-secondary)] text-sm">
+                Invite friends and earn 500 credits for each signup
+              </p>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      {/* Footer */}
+      <footer className="border-t border-[var(--border)] py-8 mt-16">
+        <div className="max-w-6xl mx-auto px-6 text-center text-[var(--text-muted)]">
+          <p>🦞 APIClaw by <a href="https://nordsym.com" className="text-[var(--accent)] hover:underline">NordSym</a></p>
+        </div>
+      </footer>
+    </div>
+  );
+}

package/landing/src/app/page.tsx

@@ -33,11 +33,11 @@ const howItWorks = [
     icon: Search,
     codeJsx: (
       <>
-        <span className="text-gray-500">{"// Agent needs to send transactional email"}</span>{"\n"}
+        <span className="text-gray-500">{"// Agent needs to send SMS in Sweden"}</span>{"\n"}
         <span className="text-blue-400">mcp</span>.<span className="text-yellow-400">call</span>(<span className="text-green-400">"apiclaw"</span>, {"{"}{"\n"}
-        {"  "}<span className="text-red-400">capability</span>: <span className="text-green-400">"email"</span>,{"\n"}
-        {"  "}<span className="text-red-400">type</span>: <span className="text-green-400">"transactional"</span>,{"\n"}
-        {"  "}<span className="text-red-400">maxPrice</span>: <span className="text-green-400">"$0.001/email"</span>{"\n"}
+        {"  "}<span className="text-red-400">capability</span>: <span className="text-green-400">"sms"</span>,{"\n"}
+        {"  "}<span className="text-red-400">region</span>: <span className="text-green-400">"sweden"</span>,{"\n"}
+        {"  "}<span className="text-red-400">maxPrice</span>: <span className="text-green-400">"€0.10/sms"</span>{"\n"}
         {"}"})
       </>
     ),
@@ -52,10 +52,10 @@ const howItWorks = [
         <span className="text-gray-500">{"// Structured response"}</span>{"\n"}
         {"{"}{"\n"}
         {"  "}<span className="text-red-400">"matches"</span>: [{"\n"}
-        {"    "}{"{ "}<span className="text-red-400">"name"</span>: <span className="text-green-400">"Resend"</span>, <span className="text-red-400">"price"</span>: <span className="text-yellow-400">"$0.0005"</span>{" },"}{"\n"}
-        {"    "}{"{ "}<span className="text-red-400">"name"</span>: <span className="text-green-400">"SendGrid"</span>, <span className="text-red-400">"price"</span>: <span className="text-yellow-400">"$0.001"</span>{" }"}{"\n"}
+        {"    "}{"{ "}<span className="text-red-400">"name"</span>: <span className="text-green-400">"46elks"</span>, <span className="text-red-400">"price"</span>: <span className="text-yellow-400">"€0.05"</span>{" },"}{"\n"}
+        {"    "}{"{ "}<span className="text-red-400">"name"</span>: <span className="text-green-400">"Twilio"</span>, <span className="text-red-400">"price"</span>: <span className="text-yellow-400">"€0.08"</span>{" }"}{"\n"}
         {"  "}],{"\n"}
-        {"  "}<span className="text-red-400">"bestMatch"</span>: <span className="text-green-400">"Resend"</span>{"\n"}
+        {"  "}<span className="text-red-400">"bestMatch"</span>: <span className="text-green-400">"46elks"</span>{"\n"}
         {"}"}
       </>
     ),
@@ -70,7 +70,7 @@ const howItWorks = [
         <span className="text-gray-500">{"// Get full API spec"}</span>{"\n"}
         <span className="text-purple-400">const</span> <span className="text-blue-400">spec</span> = <span className="text-purple-400">await</span> <span className="text-blue-400">mcp</span>.<span className="text-yellow-400">call</span>(<span className="text-green-400">"apiclaw"</span>, {"{"}{"\n"}
         {"  "}<span className="text-red-400">action</span>: <span className="text-green-400">"get_spec"</span>,{"\n"}
-        {"  "}<span className="text-red-400">api</span>: <span className="text-green-400">"Resend"</span>{"\n"}
+        {"  "}<span className="text-red-400">api</span>: <span className="text-green-400">"46elks"</span>{"\n"}
         {"}"}){"\n"}
         <span className="text-gray-500">{"// → docs, auth, endpoints, examples"}</span>
       </>
@@ -686,9 +686,14 @@ export default function Home() {
                   Unified billing
                 </li>
               </ul>
-              <button className="btn-secondary w-full justify-center opacity-50 cursor-not-allowed" disabled>
+              <a 
+                href="https://t.me/Symbot_apiclaw_bot?start=waitlist" 
+                target="_blank"
+                rel="noopener noreferrer"
+                className="btn-secondary w-full justify-center hover:bg-surface-elevated transition-colors"
+              >
                 Join Waitlist
-              </button>
+              </a>
             </div>
           </div>
         </div>
@@ -810,7 +815,7 @@ export default function Home() {
 
       {/* Telegram Chat Bubble */}
       <a
-        href="https://t.me/SymbotAPI_bot"
+        href="https://t.me/Symbot_apiclaw_bot"
         target="_blank"
         rel="noopener noreferrer"
         className="fixed bottom-6 right-6 z-50 group"