# Arandu — Landing Page (create from scratch)

Create a single-page landing site for **Arandu**, an open-source Python SDK that gives AI agents long-term memory. The name comes from the Guarani word meaning "wisdom acquired through experience" — literally "listening to time."

This is a Brazilian project. The visual identity should celebrate that.

---

## CREATIVE DIRECTION: "Amazon at Noon"

The previous version was too dark and generic. This time the vibe is **daytime Amazon rainforest** — think bright sunlight filtering through a lush green canopy, warm golden light, the sound of birds, a river reflecting the sky. It should feel alive, warm, optimistic, and distinctly Brazilian.

**NOT a dark SaaS template.** NOT a generic developer tool page. This is a page that makes you feel like you're standing in a sunlit clearing in the rainforest, looking up through the canopy at blue sky and golden light.

### Color palette

- **Background:** warm off-white with a very subtle green tint (#F7FAF5, #EFF5EB)
- **Surface cards:** white with soft green shadows (#FFFFFF with box-shadow using rgba(30, 100, 60, 0.08))
- **Primary green:** lush, vibrant forest green (#1A6B3C, #228B4A) — like healthy leaves in sunlight
- **Accent gold:** warm sunlight amber (#D4960A, #E8A817) — like sun rays through the canopy
- **Text primary:** deep jungle dark (#1A2E1A, #0D1F0D)
- **Text secondary:** muted forest (#4A6B4A, #5C7A5C)
- **Accent blue:** clear sky / river blue (#2E86AB, #1B6B93) — for links and interactive elements
- **Code blocks:** deep green-black (#0A1F14) with green-tinted syntax highlighting — the ONE dark element, like looking into a shaded hollow

### Visual feel

- Light mode. Bright. Airy. The page should breathe.
- Soft, organic shadows (never harsh or gray — always green-tinted)
- Generous whitespace — let the content breathe like a clearing in the forest
- Rounded corners everywhere (nature has no sharp edges)
- Subtle paper/organic texture in the background (very faint noise pattern)

### Typography

- Headings: **Plus Jakarta Sans** (bold, tight tracking) — modern but warm
- Body: **Inter** — clean and readable
- Code: **JetBrains Mono** — in dark code blocks

---

## BRAZILIAN FAUNA — SVG ILLUSTRATIONS (This is critical!)

The page MUST feature Brazilian animals as inline SVG illustrations. These are the soul of the page. They should be stylized but recognizable — think elegant silhouettes with a few color accents, like high-quality editorial illustrations. NOT cartoonish, NOT clipart. Elegant, minimal, beautiful.

### Hero section — Tucano (Toucan)

A toucan perched on a branch in the upper-right area of the hero. Rendered as a detailed SVG silhouette in dark green (#1A2E1A) with the iconic orange/yellow beak in the accent gold (#E8A817). The toucan should have a subtle CSS animation: gentle head tilt (rotate ±3deg) every 4 seconds with ease-in-out. Size: roughly 120-160px tall.

### Hero section — Araras (Macaws) in flight

2-3 macaw silhouettes flying across the hero background at different heights. Colors: one in accent gold, one in primary green, one in sky blue. They should be semi-transparent (opacity 0.15-0.25) and animate slowly across the screen (translateX, 30-50 seconds, infinite loop, alternating directions). Add a slight vertical sine-wave oscillation (±8px) so the flight looks organic. These are atmospheric — background decoration, not foreground elements.

### Section dividers — Tropical leaves

Between major sections, add decorative SVG strips of tropical foliage: monstera leaves, palm fronds, fern shapes. Rendered in varying shades of green (light to dark). Very subtle sway animation (rotate ±2deg, 6-8s cycle). These act as organic visual dividers instead of boring horizontal lines.

### Hero background — Floating particles

15-20 tiny circles (2-4px) floating gently upward across the hero section. Colors: primary green and accent gold at very low opacity (0.08-0.15). Different speeds (10-25s), random positions. Like pollen or seeds drifting in warm air.

### Architecture section — Small birds

2-3 tiny bird silhouettes (simple V-shapes or small arara outlines) in the background of the architecture section. Very low opacity (0.08), slow lazy flight. Just adding life.

### Footer — Vine decoration

A thin SVG vine/branch running along the top edge of the footer. Primary green at 20% opacity. Organic curves with small leaves.

---

## PAGE STRUCTURE & CONTENT

### Navigation (fixed top, glass effect)

- Logo: "Arandu" with a small leaf/eco icon in primary green
- Links: About | How it Works | Docs | GitHub
- CTA button: "Get Started" (primary green, white text)
- The nav should be white/frosted glass with backdrop-blur on scroll
- Links:
  - About → #about (anchor scroll)
  - How it Works → #how-it-works (anchor scroll)
  - Docs → https://pe-menezes.github.io/arandu/
  - GitHub → https://github.com/pe-menezes/arandu (new tab)
  - Get Started → https://pe-menezes.github.io/arandu/getting-started/

### 1. Hero Section

- Install badge: `pip install arandu` with a copy-to-clipboard button (add a small JS snippet for this)
- Big headline: **"Arandu"** with a gradient text effect (green → gold)
- Subtitle: **"Long-term memory for AI agents — wisdom acquired through experience"**
- Poetic line: *"From the Guarani: to listen to time. Give your AI the gift of remembering."*
- Two CTA buttons:
  - "Get Started" (solid primary green) → https://pe-menezes.github.io/arandu/getting-started/
  - "View on GitHub" (outlined) → https://github.com/pe-menezes/arandu (new tab)
- Background: soft gradient with green tints, golden light leak from upper-right, floating particles, the toucan perched, macaws flying

### 2. What is Arandu? (id="about")

Two columns: text left, visual right.

**Left column:**
- Tag: "Persistence"
- Heading: "Structured memory that grows with your agent."
- Paragraph 1: "Most AI agents are stateless — they forget everything between sessions. Arandu gives your agent a persistent, structured memory that grows smarter over time. It treats every interaction as a seed for growth."
- Paragraph 2: "Using an advanced extraction and reconciliation pipeline, Arandu resolves conflicting information automatically — ensuring your AI maintains a consistent, evolving understanding of the world."

**Right column:**
- A card showing the pipeline flow: Message → Extract → Resolve → Reconcile → Remember
- Visualize this as a flowing diagram with icons and connecting lines/arrows
- Use green gradient accents

### 3. The Lifecycle of a Memory (id="how-it-works")

Three cards in a row:

**Card 1 — Write Pipeline 🌱**
Icon: seedling/plant
"Send a message, get structured knowledge. Arandu extracts facts, resolves entities, and reconciles with what it already knows — automatically."

**Card 2 — Read Pipeline 🦜**
Icon: bird/search
"Ask a question, get relevant context. Semantic search, keyword matching, graph traversal, and recency scoring work together to find what matters."

**Card 3 — Background Jobs 🌙**
Icon: moon/night
"Like a brain consolidating memories during sleep. Clustering, consolidation, and importance scoring keep memory organized and fresh."

### 4. Code Example

A beautiful dark code block (this is the ONE dark element on the page — like peering into a shaded forest hollow). Style it as a terminal/editor window with the macOS traffic light dots.

File tab label: `quickstart.py`

Use this EXACT code with proper syntax highlighting:

```python
from arandu import MemoryClient
from arandu.providers.openai import OpenAIProvider

provider = OpenAIProvider(api_key="sk-...")
memory = MemoryClient(
    database_url="postgresql+psycopg://user:pass@localhost/mydb",
    llm=provider,
    embeddings=provider,
)
await memory.initialize()

# Write — extracts facts automatically
await memory.write(
    user_id="user_123",
    message="I live in São Paulo with my wife Ana.",
)

# Retrieve — semantic search + keyword + reranking
result = await memory.retrieve(
    user_id="user_123",
    query="where does the user live?",
)
print(result.context)
# "Lives in São Paulo, Married to Ana..."
```

### 5. Key Features (grid, 2x3 or 3x2)

Six feature cards, each with an icon and short description:

1. **Auto Fact Extraction** — LLM-powered, zero manual tagging. Automatically distills conversations into structured atomic facts.
2. **3-Phase Entity Resolution** — Exact → fuzzy → LLM. "My wife Ana" and "Ana" always resolve to the same entity.
3. **Knowledge Reconciliation** — ADD, UPDATE, DELETE decisions. No duplicates, no stale data. Memory stays consistent.
4. **Multi-Signal Retrieval** — Semantic + keyword + graph + recency. Multiple signals combined for high-precision recall.
5. **Provider Agnostic** — Bring your own LLM via Python protocols. OpenAI provider included, or implement your own.
6. **Built on PostgreSQL** — Battle-tested infrastructure with pgvector. No proprietary black boxes.

### 6. Memory Flow Architecture

Visual diagram showing both pipelines:

**Write (top row):** Message → Extract → Resolve → Reconcile → The Lake (highlighted)
**Read (bottom row):** Query → Plan → Retrieve → Rerank → Context (highlighted)

Connect them visually through "The Lake" as the central storage. Use a "river" metaphor — a flowing green/blue line connecting the elements.

### 7. Open Source Section

- Heading: "Built in Brazil, shared with the world 🇧🇷"
- Subtext: "Arandu is MIT licensed and open source. Intelligence should have a memory that belongs to everyone."
- Three badges:
  - MIT Licensed (with a license icon)
  - v0.6.7 (with a package icon)
  - Python 3.11+ (with a Python icon)

### 8. Footer

- Logo: Arandu + leaf icon
- "Made with 💚 in Brazil"
- Links: Documentation (https://pe-menezes.github.io/arandu/) | GitHub (https://github.com/pe-menezes/arandu) | PyPI (https://pypi.org/project/arandu/)
- Copyright: © 2025 Arandu Project
- Subtle vine SVG decoration along the top edge

---

## TECHNICAL REQUIREMENTS

- Single HTML file with everything inline (CSS, JS, SVGs)
- Use Tailwind CSS via CDN
- Google Fonts: Plus Jakarta Sans, Inter, JetBrains Mono
- Material Symbols Outlined for icons (load only once!)
- `scroll-behavior: smooth` on html element
- All SVG fauna must be inline — no external images or files
- All animations must be CSS-only (no JS libraries)
- Use `will-change: transform` on animated SVGs for performance
- Responsive: mobile-first, works on all screen sizes
- No external image dependencies — everything is CSS gradients + inline SVGs
- The "pip install" badge should copy to clipboard on click (small vanilla JS)

---

## TONE

Confident but warm. Technical but accessible. Brazilian — welcoming, not corporate. The page should make a developer think "this is beautiful AND I want to use this SDK."
