industries/app/(marketing)/examples/_client.tsx

"use client";

import { motion } from "framer-motion";
import { cn } from "@/lib/utils";
import { Code2, Terminal, FileCode, Package, Rocket, BookOpen, Cpu, Lock, Users, Zap, Globe } from "lucide-react";

export default function PageClient() {
  const examples = [
    {
      title: "Quick Start: Zoo Cloud API",
      icon: Rocket,
      language: "bash",
      code: `# Install Zoo Python SDK
pip install zooai

# Set your API key
export ZOO_API_KEY="zk-your-api-key"

# Quick test with curl
curl https://api.zoo.network/v1/chat/completions \\
  -H "Authorization: Bearer $ZOO_API_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{"model": "zen5", "messages": [{"role": "user", "content": "Hello, Zen!"}]}'`,
      description: "Get started with Zoo Industries in minutes — every new account gets $5 free credit"
    },
    {
      title: "Python SDK: Chat Completions",
      icon: Code2,
      language: "python",
      code: `from zooai import Zoo

# Initialize the client
client = Zoo(api_key="zk-your-api-key")

# Generate a response with zen5
response = client.chat.completions.create(
    model="zen5",
    messages=[
        {"role": "system", "content": "You are a helpful assistant."},
        {"role": "user", "content": "Explain quantum computing in simple terms"}
    ],
    temperature=0.7,
    max_tokens=200,
)

print(response.choices[0].message.content)`,
      description: "Generate text using the official Zoo Python SDK (OpenAI + Claude compatible)"
    },
    {
      title: "TypeScript SDK: Streaming",
      icon: Cpu,
      language: "typescript",
      code: `import Zoo from "zooai";

const client = new Zoo({ apiKey: "zk-your-api-key" });

// Stream a response from zen5-coder
const stream = await client.chat.completions.create({
  model: "zen5-coder",
  messages: [{ role: "user", content: "Write a Go HTTP server with graceful shutdown" }],
  stream: true,
});

for await (const chunk of stream) {
  const content = chunk.choices[0]?.delta?.content;
  if (content) process.stdout.write(content);
}`,
      description: "Stream AI responses in real-time with the TypeScript SDK"
    },
    {
      title: "Vision: Image Understanding",
      icon: Lock,
      language: "python",
      code: `from zooai import Zoo

client = Zoo(api_key="zk-your-api-key")

# Analyze an image with zen3-vl (vision-language model)
response = client.chat.completions.create(
    model="zen3-vl",
    messages=[{
        "role": "user",
        "content": [
            {"type": "text", "text": "What's in this image? Describe in detail."},
            {"type": "image_url", "image_url": {"url": "https://example.com/photo.jpg"}}
        ]
    }],
)

print(response.choices[0].message.content)`,
      description: "Use zen3-vl or zen3-omni for multimodal vision understanding"
    },
    {
      title: "Embeddings & RAG",
      icon: Users,
      language: "python",
      code: `from zooai import Zoo

client = Zoo(api_key="zk-your-api-key")

# Generate embeddings with zen3-embedding (3072 dimensions)
response = client.embeddings.create(
    model="zen3-embedding",
    input=["Quantum computing uses qubits", "Machine learning trains models"]
)

# Use embeddings for semantic search / RAG
for i, embedding in enumerate(response.data):
    print(f"Vector {i}: {len(embedding.embedding)} dimensions")

# Combine with chat for RAG pipeline
context = "Retrieved context from vector search..."
answer = client.chat.completions.create(
    model="zen5",
    messages=[
        {"role": "system", "content": f"Answer based on: {context}"},
        {"role": "user", "content": "What is quantum computing?"}
    ],
)`,
      description: "Build retrieval-augmented generation with zen3-embedding"
    },
    {
      title: "Local Inference: Open Weights",
      icon: Zap,
      language: "python",
      code: `# Run Zen models locally with transformers
from transformers import AutoModelForCausalLM, AutoTokenizer
import torch

model_id = "zenlm/zen-eco-4b-instruct"
tokenizer = AutoTokenizer.from_pretrained(model_id)
model = AutoModelForCausalLM.from_pretrained(
    model_id, torch_dtype=torch.bfloat16, device_map="auto"
)

messages = [{"role": "user", "content": "Write a binary search in Python"}]
inputs = tokenizer.apply_chat_template(messages, tokenize=True,
    add_generation_prompt=True, return_tensors="pt")
outputs = model.generate(inputs.to(model.device), max_new_tokens=512)
print(tokenizer.decode(outputs[0], skip_special_tokens=True))

# Also available in GGUF, MLX, and ONNX formats
# All open weights on huggingface.co/zenlm`,
      description: "Run any Zen open-weight model locally — Apache 2.0 licensed"
    }
  ];

  const integrations = [
    {
      name: "REST API",
      description: "RESTful API for all platforms",
      icon: Globe,
      link: "https://docs.zoo.ngo/api"
    },
    {
      name: "Python SDK",
      description: "Native Python integration",
      icon: Code2,
      link: "https://github.com/zooai/python-sdk"
    },
    {
      name: "JavaScript/TypeScript",
      description: "Full TypeScript support",
      icon: FileCode,
      link: "https://github.com/zooai/js-sdk"
    },
    {
      name: "Go SDK",
      description: "High-performance Go client",
      icon: Terminal,
      link: "https://github.com/zooai/go-sdk"
    },
    {
      name: "Rust SDK",
      description: "Memory-safe Rust integration",
      icon: Package,
      link: "https://github.com/zooai/rust-sdk"
    },
    {
      name: "Documentation",
      description: "Comprehensive guides",
      icon: BookOpen,
      link: "https://docs.zoo.ngo"
    }
  ];

  return (
    <div className={cn("min-h-screen transition-colors duration-300", "bg-background text-foreground")}>
      <main className="pt-32 pb-16 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          {/* Hero Section */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="text-center mb-16"
          >
            <h1 className="text-5xl sm:text-6xl font-bold mb-6">
              Code Examples
            </h1>
            <p className={cn("text-xl sm:text-2xl max-w-3xl mx-auto", "text-muted-foreground")}>
              Ready-to-use code examples to accelerate your AI development
            </p>
          </motion.div>

          {/* Quick Links */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-16"
          >
            {integrations.map((integration, index) => {
              const Icon = integration.icon;
              return (
                <a
                  key={integration.name}
                  href={integration.link}
                  target="_blank"
                  rel="noopener noreferrer"
                  className={cn(
                    "p-4 rounded-lg border transition-colors text-center",
                    "bg-foreground/5 border-border hover:border-border"
                  )}
                >
                  <Icon className="w-8 h-8 mx-auto mb-2" />
                  <div className="text-sm font-medium">{integration.name}</div>
                </a>
              );
            })}
          </motion.div>

          {/* Code Examples */}
          <div className="space-y-12">
            {examples.map((example, index) => {
              const Icon = example.icon;
              return (
                <motion.div
                  key={example.title}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  className={cn(
                    "border rounded-lg overflow-hidden",
                    "bg-foreground/5 border-border"
                  )}
                >
                  <div className={cn("p-6 border-b", "border-border")}>
                    <div className="flex items-center space-x-3">
                      <Icon className="w-6 h-6" />
                      <h3 className="text-xl font-semibold">{example.title}</h3>
                    </div>
                    <p className={cn("mt-2", "text-muted-foreground")}>{example.description}</p>
                  </div>

                  <div className="relative">
                    <div className="absolute top-4 right-4">
                      <span className={cn(
                        "text-xs px-2 py-1 rounded",
                        "text-muted-foreground bg-foreground/10"
                      )}>
                        {example.language}
                      </span>
                    </div>
                    <pre className="p-6 overflow-x-auto">
                      <code className={cn("text-sm whitespace-pre", "text-muted-foreground")}>
                        {example.code}
                      </code>
                    </pre>
                  </div>
                </motion.div>
              );
            })}
          </div>

          {/* Resources Section */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className={cn(
              "mt-20 p-12 rounded-lg border",
              "bg-gradient-to-r from-white/5 to-transparent border-border"
            )}
          >
            <h2 className="text-3xl font-bold mb-8 text-center">Developer Resources</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
              <div>
                <Terminal className="w-12 h-12 mx-auto mb-4" />
                <h3 className="text-xl font-semibold mb-2">Interactive Playground</h3>
                <p className={cn("mb-4", "text-muted-foreground")}>Test our APIs in your browser</p>
                <a href="https://playground.zoo.ngo" className={cn("text-foreground hover:text-muted-foreground")}>
                  Try Playground →
                </a>
              </div>
              <div>
                <BookOpen className="w-12 h-12 mx-auto mb-4" />
                <h3 className="text-xl font-semibold mb-2">API Reference</h3>
                <p className={cn("mb-4", "text-muted-foreground")}>Complete API documentation</p>
                <a href="https://docs.zoo.ngo/api" className={cn("text-foreground hover:text-muted-foreground")}>
                  View Docs →
                </a>
              </div>
              <div>
                <Users className="w-12 h-12 mx-auto mb-4" />
                <h3 className="text-xl font-semibold mb-2">Community</h3>
                <p className={cn("mb-4", "text-muted-foreground")}>Join our developer community</p>
                <a href="https://community.zoo.ngo" className={cn("text-foreground hover:text-muted-foreground")}>
                  Join Discord →
                </a>
              </div>
            </div>
          </motion.div>

          {/* CTA Section */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="mt-20 text-center"
          >
            <h2 className="text-3xl font-bold mb-6">
              Ready to Build?
            </h2>
            <p className={cn("text-xl mb-8 max-w-2xl mx-auto", "text-muted-foreground")}>
              Start building with Zoo Industries today
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <a
                href="https://console.zoo.ngo/signup"
                className={cn(
                  "inline-block px-8 py-4 rounded-lg font-semibold transition-colors",
                  "bg-primary text-primary-foreground hover:bg-primary/90"
                )}
              >
                Get API Key
              </a>
              <a
                href="https://github.com/zooai"
                target="_blank"
                rel="noopener noreferrer"
                className={cn(
                  "inline-block border px-8 py-4 rounded-lg font-semibold transition-colors",
                  "border-primary text-foreground hover:bg-primary hover:text-primary-foreground"
                )}
              >
                View on GitHub
              </a>
            </div>
          </motion.div>
        </div>
      </main>
    </div>
  );
}