Cycle Diagram

A circular diagram showing the stages of your process as a repeating loop. Use it to convey an iterative way of working where steps feed back in.

import { ArrowRightIcon } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';

const cycleSteps = [
  {
    id: 1,
    name: 'Discover',
    description: 'Understanding the problem and gathering requirements',
    icon: '🔍',
    color: 'bg-blue-500/10 border-blue-500 text-blue-500',
  },
  {
    id: 2,
    name: 'Define',
    description: 'Clarifying goals and setting project parameters',
    icon: '📋',
    color: 'bg-purple-500/10 border-purple-500 text-purple-500',
  },
  {
    id: 3,
    name: 'Design',
    description: 'Creating solutions and planning implementation',
    icon: '🎨',
    color: 'bg-amber-500/10 border-amber-500 text-amber-500',
  },
  {
    id: 4,
    name: 'Develop',
    description: 'Building and implementing the solution',
    icon: '💻',
    color: 'bg-green-500/10 border-green-500 text-green-500',
  },
  {
    id: 5,
    name: 'Test',
    description: 'Validating functionality and fixing issues',
    icon: '🧪',
    color: 'bg-red-500/10 border-red-500 text-red-500',
  },
  {
    id: 6,
    name: 'Deploy',
    description: 'Launching and integrating the solution',
    icon: '🚀',
    color: 'bg-indigo-500/10 border-indigo-500 text-indigo-500',
  },
];

export default function CycleDiagram() {
  return (
    <section className="bg-background w-full py-12 md:py-24 lg:py-32">
      <div className="container mx-auto px-4 md:px-6">
        <div className="mb-12 flex flex-col items-center justify-center space-y-4 text-center">
          <div className="space-y-2">
            <Badge className="px-3 py-1" variant="outline">
              My Approach
            </Badge>
            <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
              Iterative Process
            </h2>
            <p className="text-muted-foreground max-w-[900px] md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
              I follow an agile, cyclical approach that allows for continuous
              improvement and adaptation throughout your project.
            </p>
          </div>
        </div>

        <div className="mx-auto max-w-4xl">
          {/* Mobile view - vertical cards */}
          <div className="space-y-4 md:hidden">
            {cycleSteps.map((step) => (
              <Card key={step.id} className={`border-2 ${step.color}`}>
                <CardContent className="flex items-center p-4">
                  <div className="mr-4 text-2xl">{step.icon}</div>
                  <div>
                    <h3 className="font-bold">{step.name}</h3>
                    <p className="text-muted-foreground text-sm">
                      {step.description}
                    </p>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

          {/* Desktop view - circular diagram */}
          <div className="hidden md:block">
            {/* Large circle in the center */}
            <div className="border-muted-foreground/20 relative mx-auto flex h-[500px] w-[500px] items-center justify-center rounded-full border-4 border-dashed">
              <div className="bg-primary/10 border-primary flex h-32 w-32 items-center justify-center rounded-full border-2">
                <div className="text-center">
                  <div className="mb-1 text-3xl">🔄</div>
                  <div className="text-sm font-bold">
                    Continuous
                    <br />
                    Improvement
                  </div>
                </div>
              </div>

              {/* Circular positioned nodes */}
              {cycleSteps.map((step, index) => {
                // Calculate position on the circle
                const angle =
                  (index * (360 / cycleSteps.length) * Math.PI) / 180;
                const radius = 237.5; // Distance from center
                const left = Math.cos(angle) * radius + 250 - 60; // 250 is half of container, 60 is half of node width
                const top = Math.sin(angle) * radius + 250 - 60;

                return (
                  <div
                    key={step.id}
                    className={`absolute z-10 flex h-32 w-32 items-center justify-center rounded-full border-2`}
                    style={{ left: `${left}px`, top: `${top}px` }}
                  >
                    {/* Solid background circle to mask the dashed border */}
                    <div className="bg-background absolute inset-0 rounded-full"></div>
                    {/* Colored background with proper z-index */}
                    <div
                      className={`absolute inset-0 ${step.color} z-[1] rounded-full`}
                    ></div>
                    <div className="relative z-[2] p-2 text-center">
                      <div className="mb-1 text-2xl">{step.icon}</div>
                      <div className="text-sm font-bold">{step.name}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        <div className="mt-12 flex flex-col items-center justify-center space-y-4 text-center">
          <div className="flex flex-col gap-2 min-[400px]:flex-row">
            <Button asChild>
              <a href="#">Start a Project</a>
            </Button>
            <Button variant="outline" asChild>
              <a href="#">
                Learn More
                <ArrowRightIcon className="ml-2 h-4 w-4" />
              </a>
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}

About this block

Cycle Diagram opens with a centered heading and a short paragraph beneath an outline badge that reads "My Approach." Below that sits the diagram itself. On desktop it renders as a fixed 500px circle with a dashed border, six color-coded nodes placed evenly around the circumference, and a filled center circle labeled "Continuous Improvement." Each outer node shows an icon and a single step name from Discover through Deploy. On mobile the six nodes collapse into a vertical stack of bordered cards, each carrying the icon, the step name, and a one-line description. The section closes with two buttons, a primary "Start a Project" and an outlined "Learn More."

The heading, badge text, and body copy are all independent strings you can rewrite without touching the layout. The number of cycle steps is driven by an array, so you can add or remove steps and the nodes reposition themselves around the ring automatically. The two footer buttons can be retargeted or hidden without affecting the diagram above.

When to use

Reach for this block when you need to communicate that your process is not a one-way pipeline but a feedback loop. It suits an AI assistant product portfolio where the iterative cycle of training, evaluating, refining, and redeploying a model is core to how the work unfolds. Clients and stakeholders who are new to that kind of product respond well to a visual that shows steps feeding back into one another rather than ending at a finish line.

A natural flow around it on a Portfolio page:

Before

Hero Showcases to introduce who you are before diving into how you work
About And Skills to give context on your background so the process feels grounded

After

Case Studies to show the cycle in action on a real project
Stacked Cards if you want to follow up with a phase-by-phase breakdown in prose

What you can display

The block works for any iterative process you want a client to grasp quickly. A few directions worth considering:

A product development loop. Map stages like research, prototype, test, and iterate so stakeholders see that shipping is never a one-off event.
A consulting engagement cycle. Show how discovery feeds design, design feeds delivery, and delivery feeds the next discovery round to reassure clients the work keeps improving.
A model training pipeline. Label each node for a step in your AI workflow, such as collect, label, train, evaluate, and deploy, so technical and non-technical audiences both see the rhythm at a glance.

Tip: keep step names to one word each so the node labels stay legible at the fixed circle size on desktop without truncating.

About this block

When to use

A natural flow around it on a Portfolio page:

Before

Hero Showcases to introduce who you are before diving into how you work
About And Skills to give context on your background so the process feels grounded

After

Case Studies to show the cycle in action on a real project
Stacked Cards if you want to follow up with a phase-by-phase breakdown in prose

What you can display

The block works for any iterative process you want a client to grasp quickly. A few directions worth considering:

A product development loop. Map stages like research, prototype, test, and iterate so stakeholders see that shipping is never a one-off event.
A consulting engagement cycle. Show how discovery feeds design, design feeds delivery, and delivery feeds the next discovery round to reassure clients the work keeps improving.
A model training pipeline. Label each node for a step in your AI workflow, such as collect, label, train, evaluate, and deploy, so technical and non-technical audiences both see the rhythm at a glance.

Tip: keep step names to one word each so the node labels stay legible at the fixed circle size on desktop without truncating.

Cycle Diagram

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display