feat: Improve IPFS demo integration and display

- Removed the unnecessary `handleDemoButtonClick` function.
- Improved the layout and presentation of the IPFS demo section.
- Updated the styling of the error message in MarkdownContent.
- Changed the text color of the markdown content to green.

sweb/src/components/Home.svelte

@@ -10,28 +10,36 @@
 
     // Flag to show IPFS demo
     let showIPFSDemo = false;
-
-    function handleDemoButtonClick() {
-        console.log("Hello");
-        showIPFSDemo = !showIPFSDemo;
-    }
 </script>
 
 <div class="">
+    {#if contentPath && contentPath.trim() !== ""}
+        <div
+            class="bg-background-secondary shadow-sm p-4 sm:p-6 overflow-x-auto"
+        >
+            <MarkdownContent path={actualPath} />
+        </div>
+    {:else}
+        <!-- IPFS Demo Section -->
+        <section class="mb-12 sm:mb-16 md:mb-20">
             <div class="text-center mb-8 sm:mb-12">
-        <h2 class="text-2xl sm:text-3xl font-bold mb-3 sm:mb-4 text-text">
+                <h2
+                    class="text-2xl sm:text-3xl font-bold mb-3 sm:mb-4 text-text"
+                >
                     IPFS Integration
                 </h2>
-        <p class="text-lg sm:text-xl text-text-secondary max-w-3xl mx-auto">
-            Experience the power of decentralized content storage and retrieval
-            with IPFS.
+                <p
+                    class="text-lg sm:text-xl text-text-secondary max-w-3xl mx-auto"
+                >
+                    Experience the power of decentralized content storage and
+                    retrieval with IPFS.
                 </p>
 
                 <div class="mt-6">
                     <Button
                         variant="primary"
                         size="lg"
-                on:click={handleDemoButtonClick}
+                        on:click={() => (showIPFSDemo = !showIPFSDemo)}
                     >
                         {showIPFSDemo ? "Hide IPFS Demo" : "Show IPFS Demo"}
                     </Button>
@@ -39,14 +47,8 @@
             </div>
 
             {#if showIPFSDemo}
-        <section class="mb-12 sm:mb-16 md:mb-20">
                 <IPFSDemo />
+            {/if}
         </section>
-    {:else if contentPath && contentPath.trim() !== ""}
-        <div
-            class="bg-background-secondary shadow-sm p-4 sm:p-6 overflow-x-auto"
-        >
-            <MarkdownContent path={actualPath} />
-        </div>
     {/if}
 </div>

sweb/src/components/MarkdownContent.svelte

@@ -160,11 +160,11 @@
             <p>Loading content...</p>
         </div>
     {:else if error}
-        <div class="text-center p-4 sm:p-8 text-red-500">
+        <div class="text-center p-4 sm:p-8">
             <p>Error: {error}</p>
         </div>
     {:else}
-        <div class="markdown-content">
+        <div class="markdown-content text-green-800">
             {@html content}
         </div>
     {/if}