From ed6342ea3c52eb7df51ea73cec9220941a8d357b Mon Sep 17 00:00:00 2001
From: Krystex <5840423+Krystex@users.noreply.github.com>
Date: Mon, 6 May 2024 19:59:13 +0200
Subject: [PATCH] Explanation box for circle of fifth page

---
 src/App.jsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/App.jsx b/src/App.jsx
index 300ea6f..52b5f8d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -143,6 +143,18 @@ const CircleOfFifthsPage = () => {
 
   return (
     <div className="flex justify-center flex-col m-20">
+      <Box>
+        Here you can see how the circle of fifths works together with the fretboard. <br/>
+        Simply hover over the <b>fretboard</b>, the <b>circle of fifths </b> 
+        or the <b>chromatic circle</b> and you will see how that note translates to the other formats.
+
+        <br/> <br />
+        In standard tuning, you will encounter the following behaviour: <br/>
+        When you stay on one string and <b>move up or down a fret</b>, you are walking up or down the chromatic circle.
+        <br />
+        When you stay on one fret and <b>move up or down a string</b>, you are walking up or down the circle of fifths,
+        because the guitar is tuned in fourths.
+      </Box>
       <svg width="800" height="200">
         <Fretboard width={800} board={board}
           noteFunc={(note) => Note.eq(cofNote, note)} colorFunc={colorFunc}