refactor: abstracted components and assets to @common-config (#50)

- Components and some images are now organized in the `@common-config`
package
- Styles are distributed effectively within their respective package

Issue
https://linear.app/defi-wonderland/issue/CHA-339/monorepo-refactor-for-common-components-abstraction
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

* **New Features**
* Introduced reusable visual components (CategoryCards, HeroSection,
HandbookSection, IlustrationsContainer) with customizable props for
enhanced homepage layouts.
* Added new export paths for components and types in the shared
configuration package.

* **Enhancements**
* Updated homepage layouts to use shared, typed components and explicit
configuration for categories, hero sections, and partner handbooks.
* Improved theming and dynamic styling for category cards and
backgrounds.
* Added a styled "Disclaimer" button to the template site's navbar with
responsive behavior.
* Added a modal dialog in the template site triggered by the
"Disclaimer" button.
* Added a responsive background overlay with masked ellipse SVG to
Wonderland site’s local styles.
* Updated CSS to remove redundant background overlays and adjust asset
URL paths for consistency.

* **Bug Fixes**
* Corrected asset paths for icons and logos to ensure proper display
across themes and dropdowns.
  * Updated handbook dropdown URLs to real domains.

* **Chores**
* Added React 19 and type definitions to dependencies for improved
compatibility and type safety.
* Improved TypeScript configuration for better type support and
debugging.
* Removed redundant or now-shared local components in favor of shared
package usage.
* Added TypeScript module declarations for CSS and Docusaurus Link
components.
* Cleaned up modal-related code by removing it from the Wonderland
site’s Root component.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: th0rOdinson

packages/common-config/package.json

@@ -10,6 +10,7 @@
   ],
   "exports": {
     "./styles/global.css": "./static/common/styles/global.css",
+    "./components": "./src/components/index.ts",
     "./preset": "./dist/preset/index.js",
     "./preset/commonDocusaurusConfig": {
       "types": "./preset/commonDocusaurusConfig.ts",
@@ -24,11 +25,15 @@
     "@docusaurus/types": "3.7.0",
     "prism-react-renderer": "2.3.0",
     "remark-math": "6.0.0",
-    "rehype-katex": "7.0.1"
+    "rehype-katex": "7.0.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
     "fs-extra": "11.2.0",
     "@types/fs-extra": "11.0.4",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "typescript": "5.6.2"
   }
 }

packages/common-config/preset/commonDocusaurusConfig.ts

@@ -36,12 +36,6 @@ const commonDocusaurusConfig: Partial<Config> = {
       },
       style: "dark",
       items: [
-        // {
-        //   type: "html",
-        //   position: "right",
-        //   value:
-        //     '<style>#disclaimer-btn::before { content: ""; width: 16px; height: 16px; background-image: url("/img/icons/information-circle.svg"); background-size: contain; background-repeat: no-repeat; margin-right: 8px; } #disclaimer-btn:hover { color: #d1d5db; } @media (max-width: 996px) { #disclaimer-btn { display: none !important; } }</style><button id="disclaimer-btn" style="background: none; border: none; color: #5D6B98; cursor: pointer; margin-left: 8px; display: flex; align-items: center; font-size: 14px; font-family: inherit; transition: color 0.2s ease;">Disclaimer</button>',
-        // },
         {
           type: "dropdown",
           label: "Handbooks",
@@ -53,13 +47,15 @@ const commonDocusaurusConfig: Partial<Config> = {
             },
             {
               label: "Optimism",
-              to: "https://optimism-handbook.example.com",
+              to: "https://handbook.wonderland.xyz/optimism",
               target: "_blank",
               rel: "noopener noreferrer",
             },
+            // // TODO: Enable when Aztec handbook is ready
+            // // TODO: Remember to add the rewrite in vercel.json!
             // {
             //   label: "Aztec",
-            //   to: "https://aztec-handbook.example.com",
+            //   to: "https://handbook.wonderland.xyz/aztec",
             //   target: "_blank",
             //   rel: "noopener noreferrer",
             // },

…s/Backgrounds/FooterBackground/index.tsx …s/Backgrounds/FooterBackground/index.tsxsites/wonderland/src/components/Backgrounds/FooterBackground/index.tsx renamed to packages/common-config/src/components/Backgrounds/FooterBackground/index.tsx sites/wonderland/src/components/Backgrounds/FooterBackground/index.tsx renamed to packages/common-config/src/components/Backgrounds/FooterBackground/index.tsx

@@ -0,0 +1,77 @@
+import Link from "@docusaurus/Link";
+import styles from "./styles.module.css";
+import { ReactNode } from "react";
+
+export interface Category {
+  title: string;
+  icon: string;
+  href: string;
+}
+
+export interface CategoryCardsTheme {
+  gradientStart: string;
+  gradientEnd: string;
+  iconHoverColorEffect?: "white" | "none";
+}
+
+interface CategoryCardsProps {
+  categories: Category[];
+  theme?: CategoryCardsTheme;
+}
+
+export default function CategoryCards({
+  categories,
+  theme,
+}: CategoryCardsProps): ReactNode {
+  const handleCardClick = (
+    e: React.MouseEvent<HTMLAnchorElement>,
+    href: string
+  ) => {
+    e.preventDefault();
+
+    // Scroll to top
+    window.scrollTo({ top: 0 });
+
+    // Navigate after scroll
+    setTimeout(() => {
+      window.location.href = href;
+    }, 10);
+  };
+
+  // Default theme (Wonderland)
+  const defaultTheme: CategoryCardsTheme = {
+    gradientStart: "var(--wonderland-pink)",
+    gradientEnd: "var(--wonderland-yellow)",
+    iconHoverColorEffect: "white",
+  };
+
+  const currentTheme = theme || defaultTheme;
+
+  return (
+    <div className={styles.categoryCards}>
+      {categories.map((category) => (
+        <Link
+          key={category.title}
+          to={category.href}
+          className={`${styles.categoryCard} ${currentTheme.iconHoverColorEffect === "none" ? styles.noIconHoverEffect : ""}`}
+          onClick={(e: React.MouseEvent<HTMLAnchorElement>) =>
+            handleCardClick(e, category.href)
+          }
+          style={
+            {
+              "--gradient-start": currentTheme.gradientStart,
+              "--gradient-end": currentTheme.gradientEnd,
+            } as React.CSSProperties
+          }
+        >
+          <img
+            src={category.icon}
+            alt={category.title}
+            className={styles.categoryIcon}
+          />
+          <span className={styles.categoryTitle}>{category.title}</span>
+        </Link>
+      ))}
+    </div>
+  );
+}