feat: implement redesign of the home page

components/CodeAnimation/AsyncAPIcontent.tsx

@@ -0,0 +1,12 @@
+/**
+ * @description Renders the content related to AsyncAPI in a styled div container. 
+ * This is used as the default content for the "AsyncAPI Document" tab in the DemoAnimation component.
+ */
+
+export default function renderAsyncAPIContent() {
+    return (
+        <div className="font-mono text-sm text-[#98c379] leading-relaxed">
+          content here
+        </div>
+    )
+}

components/CodeAnimation/CodeGeneration.tsx

@@ -0,0 +1,12 @@
+/**
+ * @description Renders the content related to code generation in a styled div container.
+ * This is used as the content for the "Code Generation" tab in the DemoAnimation component.
+ */
+
+export default function renderCodeGeneration() {
+    return (
+        <div className="font-mono text-sm leading-relaxed">
+            <h1 className="text-[#98c379]">content here</h1>
+        </div>
+    )
+}

components/CodeAnimation/DemoAnimation.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import renderAsyncAPIContent from './AsyncAPIcontent';
+import renderCodeGeneration from './CodeGeneration';
+import renderDocumentation from './Documentation';
+import Container from '../layout/Container';
+
+/**
+ * @description A React component that displays a demo animation interface with three tabs: 
+ * "AsyncAPI Document," "Code Generation," and "Documentation." The content of each tab 
+ * dynamically updates based on the active tab selected by the user.
+ * 
+ */
+
+export default function DemoAnimation() {
+  const [activeTab, setActiveTab] = useState('AsyncAPI Document');
+  const tabs = ['AsyncAPI Document', 'Code Generation', 'Documentation'];
+
+
+  /**
+   * @description Determines and renders the content for the currently active tab.
+   */
+
+  const renderContent = () => {
+    switch (activeTab) {
+      case 'Code Generation':
+        return renderCodeGeneration();
+      case 'Documentation':
+        return renderDocumentation();
+      default:
+        return renderAsyncAPIContent();
+    }
+  };
+
+  return (
+    <div className="relative left-1/2 right-1/2 -mx-[50vw] w-screen bg-blue-100 p-6 font-sans">
+      <Container>
+      <h1 className="text-2xl font-medium text-center mb-2">
+        Sneak Peek Into The Real Process
+      </h1>
+      <p className="text-center text-gray-600 text-sm mb-6">
+        One of our main goals is to improve the current state of Event<br />
+        Driven Architecture (EDA!)
+      </p>
+
+      <div className="flex flex-wrap mb-4 bg-black rounded-lg overflow-hidden">
+        {tabs.map((tab) => (
+          <button
+            key={tab}
+            className={`flex-1 py-2 px-4 m-2 text-center rounded text-sm transition-colors duration-200 ${activeTab === tab
+                ? 'bg-white text-black'
+                : 'bg-gray-700 text-gray-300 hover:bg-gray-800'
+              }`}
+            onClick={() => setActiveTab(tab)}
+          >
+            {tab}
+          </button>
+        ))}
+      </div>
+
+      <div className="bg-[#1a1b26] rounded-lg p-6 min-h-[400px] transition-all duration-200">
+          <div className="overflow-auto max-w-full">
+            <div className="overflow-x-auto whitespace-pre-wrap">
+              {renderContent()}
+            </div>
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+};

components/CodeAnimation/Documentation.tsx

@@ -0,0 +1,12 @@
+/**
+ * @description Renders the documentation content in a styled container.
+ * This is used as the content for the "Documentation" tab in the DemoAnimation component.
+ */
+
+export default function renderDocumentation() {
+    return (
+        <div className="text-white font-sans">
+            <h1 className="text-xl font-semibold mb-4">Documentation</h1>
+        </div>
+    )
+}