Add GlobalCard marketing website with pricing, blog, and legal pages

[thomaslovaslokoy-ui]

Summary

This PR adds a complete marketing website for GlobalCard, a card issuing infrastructure platform. The site includes pricing tiers, blog posts, customer reviews, company information, and legal documentation.

Key Changes

Core Pages Added:

• Homepage with hero section, feature highlights, and CTA
• Pricing page with 8 tiered plans ($0-$2,499/mo) with feature comparisons
• Blog with dynamic slug-based routing and two full-length articles on virtual cards and tokenization
• About page with company stats and core values
• Reviews page with customer testimonials
• Contact page with form and company information
• Careers page with open positions
• Legal pages: Privacy Policy, Terms of Service, and Cookie Policy

Components:

• SiteNav - Fixed header navigation with mobile menu support
• SiteFooter - Footer with links organized by category
• PricingSection - Reusable pricing cards component with feature lists

Infrastructure:

• Next.js 14 app router with TypeScript
• Tailwind CSS for styling with custom color scheme
• SEO metadata for all pages (title, description, OG tags)
• Sitemap and robots.txt for search engines
• Dynamic OG image generation
• 404 error page
• Environment configuration for Stripe and Resend integration

Styling:

• Custom Tailwind theme with CSS variables for colors
• Responsive design with mobile-first approach
• Lucide React icons throughout

Notable Implementation Details

• Blog posts are stored as a record with JSX content, allowing for rich formatting without a CMS
• Contact form uses mailto: links for email submission (client-side only)
• Pricing component highlights the "Business" tier as the recommended option
• All pages include proper metadata for SEO and social sharing
• Navigation includes both desktop and mobile-responsive menus
• Footer organized into Product, Company, and Legal sections with appropriate links

https://claude.ai/code/session_013ZR6h28v12WmGz9HKLJT4A

[thomaslovaslokoy-ui]

AI COST PROTECTION — MANDATORY ON EVERY AI APP

Anthropic Console (One-time setup)

• Set hard monthly spend cap at console.anthropic.com → Billing → Usage Limits
• Create ONE separate API key per app (so you can see which app costs what)

Tiered Limits — implement in EVERY app with AI

Tier	Model	Msg/day	max_tokens	Context window
FREE	Haiku	5	300	Last 3 msgs
PRO (149kr+)	Sonnet	100	1500	Last 20 msgs
ENTERPRISE	Sonnet/Opus	∞	4000	Full history

Required in every /api/chat route:

// 1. Always set max_tokens — NEVER omit
const model = isPro ? 'claude-sonnet-4-20250514' : 'claude-haiku-4-5-20251001'
const maxTokens = isPro ? 1500 : 300

// 2. Slice context by tier
const contextWindow = isPro ? messages.slice(-20) : messages.slice(-3)

// 3. Rate limiter — 20 req/hr per IP, all tiers
const requests = rateLimiter.get(ip) ?? []
const recent = requests.filter(t => Date.now() - t < 3_600_000)
if (recent.length >= 20) return new Response('Rate limited', { status: 429 })

// 4. Daily message count from DB/session — hard stop by tier
const dailyLimit = tier === 'free' ? 5 : tier === 'pro' ? 100 : Infinity
if (userMsgCount >= dailyLimit) return new Response('Limit reached', { status: 429 })

You are deploying ALL NorwegianSpark projects to production. Work through each one sequentially. Do not stop between projects. Fix any errors inline — never ask for permission.

GLOBAL RULES (apply to every project)

• npm install -g vercel if not installed
• Every project must build clean before deploy
• vercel --prod for every project
• After each deploy: git add . && git commit -m "deploy: production" && git push
• Print the live URL after each deploy
• Never ask questions — fix errors and continue

AI COST PROTECTION — verify or add to every project that has AI

Check if /app/api/chat/route.ts or equivalent exists. If it does, ensure:

1. max_tokens is always set (FREE=300, PRO=1500, ENTERPRISE=4000)
2. Model by tier: FREE=claude-haiku-4-5-20251001, PRO/PAID=claude-sonnet-4-20250514
3. Rate limiter: max 20 req/hr per IP using in-memory Map
4. Daily message limits: FREE=5msg/day, PRO=100msg/day
5. Context window slicing: FREE=last 3 msgs, PRO=last 20 msgs
6. Separate ANTHROPIC_API_KEY per project in .env.example

If any of these are missing — add them before deploying.

---

PROJECT 1 — ToppAgent

cd ~/projects/toppagent (or wherever the repo lives — find it with: find ~ -name "package.json" -path "/toppagent/" | head -1)
npm install
npm run build

Fix any build errors inline

vercel link --yes
vercel --prod
git add . && git commit -m "deploy: toppagent production" && git push
echo "✅ ToppAgent live at:"

---

PROJECT 2 — YieldNav

cd ~/projects/yieldnav (find with: find ~ -name "package.json" -path "/yieldnav/" | head -1)
npm install
npm run build

Fix any build errors inline

vercel link --yes
vercel --prod
git add . && git commit -m "deploy: yieldnav production" && git push
echo "✅ YieldNav live at:"

---

PROJECT 3 — Component Studio

cd ~/projects/component-studio (find with: find ~ -name "package.json" -path "/componentstudio*" | head -1)
npm install
npm run build

Fix any build errors inline

vercel link --yes
vercel --prod
git add . && git commit -m "deploy: component-studio production" && git push
echo "✅ Component Studio live at:"

---

PROJECT 4 — NorwegianSparkHub (if repo exists)

find ~ -name "package.json" -path "norwegiansparkhub*" | head -1

If found: cd into it, build, deploy same pattern as above

---

AFTER ALL DEPLOYS — print summary:

echo "=== NORWEGIANSPARK DEPLOY SUMMARY ==="
echo "All live URLs:"

list all URLs

echo ""
echo "⚠️ REMINDERS:"
echo "1. Go to console.anthropic.com → set monthly hard cap"
echo "2. Verify each project has its own API key"
echo "3. Submit sitemaps at search.google.com/search-console for any new domains"

[thomaslovaslokoy-ui]

// 1. Always set max_tokens — NEVER omit
const model = isPro ? 'claude-sonnet-4-20250514' : 'claude-haiku-4-5-20251001'
const maxTokens = isPro ? 1500 : 300

// 2. Slice context by tier
const contextWindow = isPro ? messages.slice(-20) : messages.slice(-3)

// 3. Rate limiter — 20 req/hr per IP, all tiers
const requests = rateLimiter.get(ip) ?? []
const recent = requests.filter(t => Date.now() - t < 3_600_000)
if (recent.length >= 20) return new Response('Rate limited', { status: 429 })

// 4. Daily message count from DB/session — hard stop by tier
const dailyLimit = tier === 'free' ? 5 : tier === 'pro' ? 100 : Infinity
if (userMsgCount >= dailyLimit) return new Response('Limit reached', { status: 429 })

[thomaslovaslokoy-ui]

web-design-reviewer.zip

[thomaslovaslokoy-ui]

brainloop-advisor/src/app/privacy/page.tsx

[thomaslovaslokoy-ui]

ff9acae