| title | Reloops Documentation |
|---|---|
| description | Guides for organizing, reviewing, and sharing creative work — from first upload to final approval. |
| mode | frame |
<p className="text-balance text-base leading-relaxed tracking-tight text-gray-600 dark:text-gray-400">
Guides for organizing, reviewing, and sharing creative work — from first upload to final approval.
</p>
Get Started} icon="rocket" href="/introduction" className="product-guide-feature-card" size={64}>
Set up your workspace, create a project, and upload your first asset.
<a href="/projects/assets-overview" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="folder-open" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Projects & Assets</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Upload files, track progress, and manage creative assets across projects.
</span>
</div>
</a>
<a href="/review/asset-review" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="message-circle" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Review & Sharing</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Comment, annotate, approve, and share assets with your team or clients.
</span>
</div>
</a>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<a href="/workspace/workspaces" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="building-2" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Set up a workspace</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Create or join a workspace to organize your projects and team.
</span>
</div>
</a>
<a href="/projects/upload-assets" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="upload" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Upload assets</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Drag and drop images and videos into a project to start reviewing.
</span>
</div>
</a>
<a href="/review/leave-comments" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="message-square" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Leave feedback</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Add timestamped comments and visual annotations directly on media.
</span>
</div>
</a>
<a href="/review/share-links" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="share-2" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Share an asset</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Send a secure share link to an external reviewer without adding them to the workspace.
</span>
</div>
</a>
<a href="/projects/kanban-status-workflow" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="kanban" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Track review status</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Use the Kanban board to see which assets need review, are in progress, or are approved.
</span>
</div>
</a>
<a href="/collections/collections-overview" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="layout-grid" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Build a collection</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Create a curated gallery for client presentations without moving source files.
</span>
</div>
</a>
</div>
<p className="text-balance text-base leading-relaxed tracking-tight text-gray-600 dark:text-gray-400">
Guides for organizing, reviewing, and sharing creative work — from first upload to final approval.
</p>
Get Started} icon="rocket" href="/introduction" className="product-guide-feature-card" size={64}>
Set up your workspace, create a project, and upload your first asset.
<a href="/projects/assets-overview" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="folder-open" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Projects & Assets</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Upload files, track progress, and manage creative assets across projects.
</span>
</div>
</a>
<a href="/review/asset-review" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="message-circle" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Review & Sharing</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Comment, annotate, approve, and share assets with your team or clients.
</span>
</div>
</a>
<a href="/ai/ai-search" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="sparkles" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">AI & DAM</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Search assets by meaning, review Smart Metadata, and use workspace-wide results.
</span>
</div>
</a>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<a href="/workspace/workspaces" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="building-2" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Set up a workspace</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Create or join a workspace to organize your projects and team.
</span>
</div>
</a>
<a href="/projects/upload-assets" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="upload" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Upload assets</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Drag and drop images and videos into a project to start reviewing.
</span>
</div>
</a>
<a href="/review/leave-comments" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="message-square" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Leave feedback</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Add timestamped comments and visual annotations directly on media.
</span>
</div>
</a>
<a href="/review/share-links" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="share-2" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Share an asset</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Send a secure share link to an external reviewer without adding them to the workspace.
</span>
</div>
</a>
<a href="/projects/kanban-status-workflow" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="kanban" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Track review status</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Use the Kanban board to see which assets need review, are in progress, or are approved.
</span>
</div>
</a>
<a href="/collections/collections-overview" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="layout-grid" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Build a collection</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Create a curated gallery for client presentations without moving source files.
</span>
</div>
</a>
<a href="/developers/ai-agents-and-developer-keys" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="bot" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Create an AI agent key</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Add an agent identity, copy a developer key, and automate assigned work.
</span>
</div>
</a>
</div>
<p className="text-balance text-base leading-relaxed tracking-tight text-gray-600 dark:text-gray-400">
Guides for organizing, reviewing, and sharing creative work — from first upload to final approval.
</p>
Get Started} icon="rocket" href="/introduction" className="product-guide-feature-card" size={64}>
Set up your workspace, create a project, and upload your first asset.
<a href="/projects/assets-overview" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="folder-open" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Projects & Assets</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Upload files, track progress, and manage creative assets across projects.
</span>
</div>
</a>
<a href="/review/asset-review" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="message-circle" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Review & Sharing</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Comment, annotate, approve, and share assets with your team or clients.
</span>
</div>
</a>
<a href="/ai/ai-search" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="sparkles" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">AI & DAM</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Search assets by meaning, review Smart Metadata, and use workspace-wide results.
</span>
</div>
</a>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<a href="/workspace/workspaces" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="building-2" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Set up a workspace</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Create or join a workspace to organize your projects and team.
</span>
</div>
</a>
<a href="/projects/upload-assets" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="upload" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Upload assets</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Drag and drop images and videos into a project to start reviewing.
</span>
</div>
</a>
<a href="/review/leave-comments" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="message-square" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Leave feedback</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Add timestamped comments and visual annotations directly on media.
</span>
</div>
</a>
<a href="/review/website-review" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="globe" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Review a website</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Capture a live URL and collect pinned comments on the page snapshot.
</span>
</div>
</a>
<a href="/review/share-links" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="share-2" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Share an asset</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Send a secure share link to an external reviewer without adding them to the workspace.
</span>
</div>
</a>
<a href="/projects/kanban-status-workflow" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="kanban" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Track review status</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Use the Kanban board to see which assets need review, are in progress, or are approved.
</span>
</div>
</a>
<a href="/collections/collections-overview" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="layout-grid" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Build a collection</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Create a curated gallery for client presentations without moving source files.
</span>
</div>
</a>
<a href="/developers/ai-agents-and-developer-keys" className="rounded-2xl flex flex-col gap-4 border bg-gray-50 p-4 outline-none shadow-sm shadow-gray-950/5 transition hover:border-primary hover:shadow-md dark:bg-gray-950 dark:shadow-black/20 dark:hover:border-primary">
<Icon icon="bot" color="rgb(var(--primary))" size={18} className="shrink-0" />
<div className="flex flex-col gap-1">
<span className="font-serif text-base font-medium text-gray-900 dark:text-gray-50">Create an AI agent key</span>
<span className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
Add an agent identity, copy a developer key, and automate assigned work.
</span>
</div>
</a>
</div>