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,43 +10,45 @@
 
     // Flag to show IPFS demo
     let showIPFSDemo = false;
-
-    function handleDemoButtonClick() {
-        console.log("Hello");
-        showIPFSDemo = !showIPFSDemo;
-    }
 </script>
 
 <div class="">
-    <div class="text-center mb-8 sm:mb-12">
+    {#if contentPath && contentPath.trim() !== ""}
-        <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>
-
-        <div class="mt-6">
-            <Button
-                variant="primary"
-                size="lg"
-                on:click={handleDemoButtonClick}
-            >
-                {showIPFSDemo ? "Hide IPFS Demo" : "Show IPFS Demo"}
-            </Button>
-        </div>
-    </div>
-
-    {#if showIPFSDemo}
-        <section class="mb-12 sm:mb-16 md:mb-20">
-            <IPFSDemo />
-        </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>
+    {: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"
+                >
+                    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>
+
+                <div class="mt-6">
+                    <Button
+                        variant="primary"
+                        size="lg"
+                        on:click={() => (showIPFSDemo = !showIPFSDemo)}
+                    >
+                        {showIPFSDemo ? "Hide IPFS Demo" : "Show IPFS Demo"}
+                    </Button>
+                </div>
+            </div>
+
+            {#if showIPFSDemo}
+                <IPFSDemo />
+            {/if}
+        </section>
     {/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}