feat: Add reusable CodeExample component with hydration section

website/src/app/page.module.css

@@ -206,6 +206,49 @@
     line-height: 1.5;
 }
 
+.hydrationSection {
+    padding: 6rem 15em;
+    min-height: 50vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    border-top: 1px solid var(--gray-alpha-200);
+}
+
+.hydrationContainer {
+    display: flex;
+    gap: 4rem;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    max-width: 1200px;
+}
+
+.hydrationCode {
+    flex: 1;
+    min-width: 45%;
+}
+
+.hydrationText {
+    flex: 1;
+    padding: 2rem;
+}
+
+.hydrationText h2 {
+    color: #ff0080;
+    margin: 0 0 1.5rem 0;
+    font-size: 2rem;
+}
+
+.hydrationText p {
+    color: #fff;
+    opacity: 0.8;
+    margin: 1rem 0;
+    font-size: 1.1rem;
+    line-height: 1.6;
+}
+
 @media (max-width: 1200px) {
     .pillars {
         padding: 4rem 2rem;
@@ -220,4 +263,22 @@
         max-width: 400px;
         margin: 0 auto;
     }
-}
+
+    .hydrationSection {
+        padding: 4rem 2rem;
+    }
+
+    .hydrationContainer {
+        flex-direction: column;
+        gap: 2rem;
+    }
+
+    .hydrationCode {
+        width: 100%;
+    }
+
+    .hydrationText {
+        width: 100%;
+        padding: 1rem;
+    }
+}