costhawk 1.0.0

package/costcanary/app/(marketing)/page.tsx

@@ -0,0 +1,90 @@
+import { Metadata } from "next"
+import { Hero } from "@/components/landing/Hero"
+import { DashboardPreview } from "@/components/landing/DashboardPreview"
+import { Features } from "@/components/landing/Features"
+import { Pricing } from "@/components/landing/Pricing"
+import { Testimonials } from "@/components/landing/Testimonials"
+import { Footer } from "@/components/landing/Footer"
+
+export const metadata: Metadata = {
+  title: "CostHawk - Track Your LLM API Costs and Avoid Surprise Bills",
+  description:
+    "Tired of unpredictable LLM API bills? CostHawk gives you the tools to monitor your AI spending in real-time, so you can build innovative applications without worrying about surprise costs. Track OpenAI, Anthropic, and more.",
+  keywords: [
+    "LLM cost monitoring",
+    "AI API costs",
+    "OpenAI cost tracking",
+    "Anthropic billing",
+    "API cost management",
+    "developer tools for AI",
+    "avoid surprise bills",
+    "AI cost optimization",
+  ],
+  authors: [{ name: "CostHawk" }],
+  creator: "CostHawk",
+  publisher: "CostHawk",
+  formatDetection: {
+    email: false,
+    address: false,
+    telephone: false,
+  },
+  metadataBase: new URL("https://costcanary.com"),
+  alternates: {
+    canonical: "/",
+  },
+  openGraph: {
+    title: "CostHawk - Track Your LLM API Costs and Avoid Surprise Bills",
+    description:
+      "Monitor and optimize your AI API costs across all providers. Real-time tracking, intelligent alerts, and powerful analytics to prevent surprise bills.",
+    url: "https://costcanary.com",
+    siteName: "CostHawk",
+    images: [
+      {
+        url: "/og-image.png",
+        width: 1200,
+        height: 630,
+        alt: "CostHawk - LLM API Cost Monitoring Platform",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "CostHawk - Track Your LLM API Costs and Avoid Surprise Bills",
+    description:
+      "Tired of unpredictable LLM API bills? Monitor your AI spending in real-time and avoid surprise costs. Start free today.",
+    images: ["/og-image.png"],
+    creator: "@costhawk",
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      "max-video-preview": -1,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+    },
+  },
+  icons: {
+    icon: "/favicon.ico",
+    shortcut: "/favicon-16x16.png",
+    apple: "/apple-touch-icon.png",
+  },
+  manifest: "/site.webmanifest",
+}
+
+export default function HomePage() {
+  return (
+    <main className="min-h-screen bg-slate-950">
+      <Hero />
+      <DashboardPreview />
+      <Features />
+      <Testimonials />
+      <Pricing />
+      <Footer />
+    </main>
+  )
+}

package/costcanary/app/(marketing)/pricing/page.tsx

@@ -0,0 +1,272 @@
+'use client';
+
+import { useState } from 'react';
+import { Check, Zap, Shield, TrendingUp, Sparkles } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import { motion } from 'framer-motion';
+import { useAuth } from '@clerk/nextjs';
+import { useRouter } from 'next/navigation';
+import { PRICING_TIERS } from '@/lib/stripe-client';
+
+export default function PricingPage() {
+  const [isAnnual, setIsAnnual] = useState(false);
+  const { isSignedIn } = useAuth();
+  const router = useRouter();
+  const [loading, setLoading] = useState<string | null>(null);
+
+  const handleSubscribe = async (tier: typeof PRICING_TIERS[0]) => {
+    if (tier.id === 'free') {
+      if (!isSignedIn) {
+        router.push('/sign-up');
+      } else {
+        router.push('/dashboard');
+      }
+      return;
+    }
+
+    if (!isSignedIn) {
+      router.push(`/sign-up?redirect=/pricing&plan=${tier.id}`);
+      return;
+    }
+
+    setLoading(tier.id);
+    try {
+      const response = await fetch('/api/stripe/checkout', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          tierId: tier.id,
+          returnUrl: window.location.href,
+        }),
+      });
+
+      const data = await response.json();
+      
+      if (data.url) {
+        window.location.href = data.url;
+      } else {
+        console.error('No checkout URL returned');
+      }
+    } catch (error) {
+      console.error('Subscription error:', error);
+    } finally {
+      setLoading(null);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-black text-white">
+      {/* Hero Section */}
+      <section className="relative py-20 px-4">
+        <div className="absolute inset-0 bg-gradient-to-b from-purple-900/20 to-transparent" />
+        
+        <div className="container mx-auto max-w-6xl relative z-10">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="text-center mb-12"
+          >
+            <div className="inline-flex items-center gap-2 bg-purple-500/10 border border-purple-500/20 rounded-full px-4 py-2 mb-6">
+              <Sparkles className="w-4 h-4 text-purple-400" />
+              <span className="text-sm text-purple-300">Save 20% with annual billing</span>
+            </div>
+            
+            <h1 className="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white to-purple-400 bg-clip-text text-transparent">
+              Simple, Transparent Pricing
+            </h1>
+            
+            <p className="text-xl text-gray-300 max-w-2xl mx-auto mb-8">
+              Start free, upgrade when you need more. No hidden fees, no surprises.
+            </p>
+
+            {/* Billing Toggle */}
+            <div className="flex items-center justify-center gap-3 mb-12">
+              <span className={!isAnnual ? 'text-white' : 'text-gray-500'}>Monthly</span>
+              <Switch checked={isAnnual} onCheckedChange={setIsAnnual} />
+              <span className={isAnnual ? 'text-white' : 'text-gray-500'}>
+                Annual
+                <span className="ml-2 text-green-400 text-sm">Save 20%</span>
+              </span>
+            </div>
+
+            {/* Trust Badges */}
+            <div className="flex items-center justify-center gap-8 mb-12">
+              <div className="flex items-center gap-2">
+                <Shield className="w-5 h-5 text-green-400" />
+                <span className="text-sm text-gray-300">Bank-level encryption</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Zap className="w-5 h-5 text-yellow-400" />
+                <span className="text-sm text-gray-300">Instant setup</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <TrendingUp className="w-5 h-5 text-blue-400" />
+                <span className="text-sm text-gray-300">Save 30%+ on API costs</span>
+              </div>
+            </div>
+          </motion.div>
+
+          {/* Pricing Cards */}
+          <div className="grid md:grid-cols-3 gap-8">
+            {PRICING_TIERS.map((tier, index) => {
+              const price = isAnnual && tier.price > 0 
+                ? Math.floor(tier.price * 0.8) 
+                : tier.price;
+              
+              const isPopular = tier.id === 'pro';
+              
+              return (
+                <motion.div
+                  key={tier.id}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: index * 0.1 }}
+                  className={`relative ${isPopular ? 'scale-105' : ''}`}
+                >
+                  {isPopular && (
+                    <div className="absolute -top-4 left-1/2 -translate-x-1/2 z-10">
+                      <div className="bg-gradient-to-r from-purple-500 to-pink-500 text-white text-sm font-bold px-4 py-1 rounded-full">
+                        MOST POPULAR
+                      </div>
+                    </div>
+                  )}
+                  
+                  <div className={`
+                    h-full rounded-2xl p-8 backdrop-blur-sm
+                    ${isPopular 
+                      ? 'bg-gradient-to-b from-purple-900/40 to-purple-900/20 border-2 border-purple-500' 
+                      : 'bg-white/5 border border-white/10'
+                    }
+                  `}>
+                    <div className="mb-8">
+                      <h3 className="text-2xl font-bold mb-2">{tier.name}</h3>
+                      
+                      <div className="flex items-baseline gap-2 mb-4">
+                        <span className="text-5xl font-bold">
+                          ${price}
+                        </span>
+                        {tier.price > 0 && (
+                          <span className="text-gray-400">
+                            /{isAnnual ? 'year' : 'month'}
+                          </span>
+                        )}
+                      </div>
+
+                      {tier.id === 'pro' && (
+                        <div className="text-sm text-green-400 mb-2">
+                          14-day free trial
+                        </div>
+                      )}
+                    </div>
+
+                    <ul className="space-y-4 mb-8">
+                      {tier.features.map((feature, i) => (
+                        <li key={i} className="flex items-start gap-3">
+                          <Check className="w-5 h-5 text-green-400 flex-shrink-0 mt-0.5" />
+                          <span className="text-sm text-gray-300">{feature}</span>
+                        </li>
+                      ))}
+                    </ul>
+
+                    <Button
+                      onClick={() => handleSubscribe(tier)}
+                      disabled={loading !== null}
+                      className={`
+                        w-full py-6 text-lg font-semibold rounded-xl transition-all
+                        ${isPopular
+                          ? 'bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600'
+                          : tier.id === 'free'
+                          ? 'bg-white/10 hover:bg-white/20'
+                          : 'bg-white text-black hover:bg-gray-200'
+                        }
+                      `}
+                    >
+                      {loading === tier.id ? (
+                        <span className="flex items-center gap-2">
+                          <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
+                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                          </svg>
+                          Processing...
+                        </span>
+                      ) : (
+                        tier.id === 'free' ? 'Start Free' : 'Get Started'
+                      )}
+                    </Button>
+                  </div>
+                </motion.div>
+              );
+            })}
+          </div>
+
+          {/* Social Proof */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.5 }}
+            className="text-center mt-16"
+          >
+            <p className="text-gray-400 mb-4">Trusted by developers at</p>
+            <div className="flex items-center justify-center gap-8 opacity-50">
+              {['YC', 'ProductHunt', 'TechStars', 'AngelList', '500 Startups'].map((company) => (
+                <div key={company} className="text-xl font-bold">{company}</div>
+              ))}
+            </div>
+          </motion.div>
+
+          {/* FAQ Section */}
+          <div className="mt-20">
+            <h2 className="text-3xl font-bold text-center mb-12">Frequently Asked Questions</h2>
+            
+            <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+              <div>
+                <h3 className="text-xl font-semibold mb-3">Can I change plans anytime?</h3>
+                <p className="text-gray-400">Yes! Upgrade or downgrade anytime. Changes take effect immediately, with prorated billing.</p>
+              </div>
+              
+              <div>
+                <h3 className="text-xl font-semibold mb-3">What happens if I exceed my limit?</h3>
+                <p className="text-gray-400">We&apos;ll notify you at 80% usage. At 100%, tracking pauses until you upgrade or the next billing cycle.</p>
+              </div>
+              
+              <div>
+                <h3 className="text-xl font-semibold mb-3">Do you offer refunds?</h3>
+                <p className="text-gray-400">Yes! 30-day money-back guarantee. If you&apos;re not saving money, we&apos;ll refund you.</p>
+              </div>
+              
+              <div>
+                <h3 className="text-xl font-semibold mb-3">Is my data secure?</h3>
+                <p className="text-gray-400">Absolutely. AES-256 encryption, SOC2 compliant infrastructure, and we never store raw API keys.</p>
+              </div>
+            </div>
+          </div>
+
+          {/* ROI Calculator CTA */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.7 }}
+            className="mt-20 text-center bg-gradient-to-r from-purple-900/40 to-pink-900/40 rounded-2xl p-12"
+          >
+            <h2 className="text-3xl font-bold mb-4">
+              Calculate Your Potential Savings
+            </h2>
+            <p className="text-xl text-gray-300 mb-8">
+              Most teams save 30-50% on their AI API costs within the first month
+            </p>
+            <Button
+              onClick={() => router.push('/#roi-calculator')}
+              size="lg"
+              className="bg-white text-black hover:bg-gray-200 px-8 py-6 text-lg rounded-xl"
+            >
+              Try ROI Calculator
+            </Button>
+          </motion.div>
+        </div>
+      </section>
+    </div>
+  );
+}