Approach Diagram - Copy this React, Tailwind Component to your project

1. Top left Circle (Business Strategy 事業戦略): Position: This circle is located in the top left corner of the circle diagram, making it the first stage in the process. Design: It has a thin black border and a white background. Inside the circle, there is Japanese text that reads "事業戦略" (Business Strategy). Arrow: A thin black arrow points downwards to the next circle (Growth Foundation), slightly curved to maintain the flow of the circular layout. 2. Bottom left Circle (Growth Foundation 成長基盤構築): Position: This circle is located in the bottom left section of the circle diagram, directly below the Business Strategy circle. Design: Similar to the other circles, it has a black border with a white background. Inside, it contains the text "成長基盤構築" (Growth Foundation) in Japanese. Arrow: A curved black arrow moves from this circle towards the bottom right circle (Experience Design), indicating the next stage in the process. 3. Bottom right Circle (Experience Design 体験設計): Position: This circle is positioned in the bottom right part of the circle diagram, connected to the Growth Foundation circle. Design: Like the others, it has a black border and a white background with Japanese text "体験設計" (Experience Design) at its center. Arrow: A curved black arrow moves from this circle upwards, leading to the top right circle (Development). 4. Top right Circle (Development 開発): Position: This circle is placed in the top right corner of the diagram, directly above the Experience Design circle, completing the loop. Design: It shares the same design elements with the other circles, including a black border and a white background, and the text inside reads "開発" (Development) in Japanese. Arrow: The final curved arrow connects this circle back to the top left circle (Business Strategy), completing the cyclical flow of the process. 5. Right side Vertical List: Position: The vertical list is located to the right of the circular diagram, aligned in a clean and straight vertical line. Design: Each stage in the list is written in Japanese, paired with numbers (01–04) and aligned horizontally next to each other. A thin black horizontal line separates each stage. There is a small black arrow pointing to the right at the end of each line, suggesting a possible interaction or link to more information. The four stages in the list correspond to the four circles in the diagram: 01 事業戦略 (Business Strategy) 02 体験設計 (Experience Design) 03 開発 (Development) 04 成長基盤構築 (Growth Foundation) 6. Heading and Text: Position: The word “Approach” is written at the top left corner of the page, just above the circle diagram. Design: The font size is relatively small, and the color is a subtle dark grey, almost black. Just below the heading, there is a short paragraph of explanatory text written in Japanese, positioned just above the vertical list. This text explains the cyclical nature of the process shown in the diagram. 7. Background and Layout: The background of the entire layout is a plain white color, providing plenty of whitespace around each element for a minimalist and clean design. The diagram and the vertical list are aligned side by side, with the circular flow on the left and the text list on the right. This layout balances the content and makes the flow easy to understand at a glance. Overall, the positions of the elements are thoughtfully arranged to convey a sense of process and flow, with the arrows reinforcing the continuous nature of the cycle. The minimalist use of colors (black, white, grey) ensures that the focus remains on the content and its structure.