feat: ef handbook (#90) (#117)

EF Handbook
https://linear.app/defi-wonderland/issue/EFI-490/ef-handbook-privacy

---------

Author: 0xtiti

packages/common-config/preset/commonDocusaurusConfig.ts

@@ -56,6 +56,11 @@ const commonDocusaurusConfig: Partial<Config> = {
               to: "https://aztec.handbook.wonderland.xyz",
               target: "_self",
             },
+            {
+              label: "Ethereum Foundation",
+              to: "https://ef.handbook.wonderland.xyz",
+              target: "_self",
+            },
           ],
         },
         {

packages/common-config/src/components/CategoryCards/index.tsx

@@ -19,11 +19,13 @@ export interface CategoryCardsTheme {
 interface CategoryCardsProps {
   categories: Category[];
   theme?: CategoryCardsTheme;
+  columns?: number;
 }
 
 export default function CategoryCards({
   categories,
   theme,
+  columns = 4,
 }: CategoryCardsProps): ReactNode {
   const handleCardClick = (
     e: React.MouseEvent<HTMLAnchorElement>,
@@ -56,7 +58,12 @@ export default function CategoryCards({
   const currentTheme = theme || defaultTheme;
 
   return (
-    <div className={styles.categoryCards}>
+    <div 
+      className={styles.categoryCards}
+      style={{
+        gridTemplateColumns: `repeat(${columns}, 1fr)`
+      }}
+    >
       {categories.map((category) => (
         <Link
           key={category.title}

packages/common-config/static/common/img/ef-background-handbook-card.png

@@ -1482,6 +1482,21 @@ div[class*="buttonGroup"] button {
   transition: opacity 0.3s ease;
 }
 
+/* Ethereum Foundation logo */
+.dropdown__menu li:nth-child(4) .dropdown__link::before {
+  content: "";
+  width: 24px;
+  height: 24px;
+  background-image: url("/common/img/ef-logo.svg");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  position: absolute;
+  left: 1rem;
+  opacity: 0.8;
+  transition: opacity 0.3s ease;
+}
+
 .dropdown__link:hover {
   background: var(--wonderland-blue-900) !important;
   color: var(--wonderland-gray-200) !important;

packages/common-config/static/common/img/ef-common-background.png

@@ -63,6 +63,15 @@ const aztecHandbooks: Handbook[] = [
       bgImage: "/common/img/background-handbook-card.jpg",
     },
   },
+  {
+    title: "Ethereum Foundation Handbook",
+    image: "/common/img/ef-logo.png",
+    href: "https://ef.handbook.wonderland.xyz",
+    background: {
+      bgType: "other",
+      bgImage: "/common/img/ef-social-card.png",
+    },
+  },
 ];
 
 const aztecHandbookProps: HandbookSectionProps = {

packages/common-config/static/common/img/ef-logo.svg

@@ -0,0 +1,2 @@
+# Static assets
+/static/common/