Shortened the title, change on load

The title of a web page also appears in the tab, which we would like to be shorter. Client-side change is used with useEffect to just set it to "ChordSeqAI". The original title was also shortened to make it easier to digest.

src/app/layout.tsx

@@ -27,7 +27,7 @@ const jsonLd = {
 
 export const metadata: Metadata = {
   metadataBase: new URL("https://chordseqai.com"),
-  title: "ChordSeqAI: Your Open-Source Chord Progression AI Copilot",
+  title: "ChordSeqAI: Your Chord Progression AI Copilot",
   description:
     "Compose beautiful chord progressions in your browser, with the help of AI, for free. Open-source project, code available on GitHub.",
   manifest: "/manifest.json",

src/components/landing_page/quick_buttons.tsx

@@ -7,6 +7,7 @@ export default function QuickButtons() {
   const [isMobile, setIsMobile] = useState(false);
 
   useEffect(() => {
+    document.title = "ChordSeqAI"; // Change the title when the page loads
     const userAgent = navigator.userAgent;
     const selectors = getSelectorsByUserAgent(userAgent);
     setIsMobile(selectors.isMobile);