feat: added office-hours page

website/docusaurus.config.js

@@ -252,6 +252,12 @@ const config = {
               description: 'Join our WeChat community',
               icon: '/assets/menu/wechat.svg',
             },
+            {
+              label: 'Office Hours',
+              to: '/office-hours',
+              description: 'Book a session with our developer advocates',
+              icon: '/assets/menu/event.png',
+            }
           ],
         },
         {

website/src/components/UI/Card/Card.module.scss

@@ -1,5 +1,5 @@
 .card {
-  padding: var(--space-3) var(--space-1) var(--space-1);
+  padding: var(--space-1);
   border-radius: var(--radius-card);
   border: var(--border-card);
   background: var(--color-bg-surface);
@@ -233,8 +233,8 @@
   // Title element
   &__title {
     margin: var(--space-1) 0 var(--space-3) 0;
-    font-size: var(--text-xl);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--text-md);
+    font-weight: var(--font-weight-bold);
     line-height: var(--leading-tight);
   }
 
@@ -243,7 +243,7 @@
     flex-grow: 1;
     margin: 0;
     line-height: var(--leading-relaxed);
-    font-size: var(--text-base);
+    font-size: var(--text-md);
   }
 
   // Content element

website/src/pages/office-hours.jsx

@@ -0,0 +1,60 @@
+import Layout from '@theme/Layout'
+import Card from '@site/src/components/UI/Card'
+
+
+// Are you a developer building on NEAR? Do you have questions about the NEAR protocol, tools, or best practices? Join our weekly office hours to connect with technical experts and get your questions answered.
+// Building a Shade Agent? Using chain signatures? Book a session with Owen: https://calendly.com/owen-proximity/office-hours
+// Building a Smart Contract? A general question about the NEAR protocol? Book a session with Guille: https://calendar.app.google/6q2ssGUmvFcMoJk97
+
+
+export default function OfficeHours() {
+
+  return <>
+    <Layout title="Office Hours" description="Book a session with our developer advocates">
+      <main className="container--lg margin-vert--xl">
+        <div className="row">
+          <div className="col col--6 col--offset-3">
+            <h1>Office Hours</h1>
+            <p>Are you a developer building on NEAR? Do you have questions about the NEAR protocol, tools, or best practices? Join our weekly office hours to connect with technical experts and get your questions answered.</p>
+            <br />
+            <h2 className="text--center padding-bottom--md"> What are you Building? </h2>
+            <div className="row">
+              <div className="col col--4 text--center">
+                <Card title="Multi-chain">
+                  <a href="https://calendly.com/owen-proximity/office-hours" className="button button--primary margin-bottom--sm">Book Support</a>
+                </Card>
+              </div>
+              <div className="col col--4 text--center">
+                <Card title="Shade Agent">
+                  <a href="https://calendly.com/owen-proximity/office-hours" className="button button--primary margin-bottom--sm">Book Support</a>
+                </Card>
+              </div>
+              <div className="col col--4 text--center">
+                <Card title="Smart Contracts">
+                  <a href="https://calendar.app.google/6q2ssGUmvFcMoJk97" className="button button--primary margin-bottom--sm">Book Support</a>
+                </Card>
+              </div>
+            </div>
+            <div className="row margin-top--lg">
+              <div className="col col--4 text--center">
+                <Card title="Web3 App">
+                  <a href="https://calendar.app.google/6q2ssGUmvFcMoJk97" className="button button--primary margin-bottom--sm">Book Support</a>
+                </Card>
+              </div>
+              <div className="col col--4 text--center">
+                <Card title="Data Infra">
+                  <a href="https://calendar.app.google/6q2ssGUmvFcMoJk97" className="button button--primary margin-bottom--sm">Book Support</a>
+                </Card>
+              </div>
+              <div className="col col--4 text--center">
+                <Card title="Tooling">
+                  <a href="https://calendar.app.google/6q2ssGUmvFcMoJk97" className="button button--primary margin-bottom--sm">Book Support</a>
+                </Card>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </Layout>
+  </>
+}

website/src/pages/office-hours.module.scss

@@ -0,0 +1,63 @@
+.page {
+  padding: var(--space-8) 0;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--space-6);
+}
+
+.header {
+  max-width: 860px;
+  margin-bottom: var(--space-8);
+}
+
+.title {
+  margin: 0 0 var(--space-4) 0;
+  font-size: var(--text-4xl);
+  line-height: var(--leading-tight);
+  color: var(--color-text-primary);
+}
+
+.paragraph {
+  margin: 0 0 var(--space-4) 0;
+  font-size: var(--text-lg);
+  line-height: var(--leading-relaxed);
+  color: var(--color-text-secondary);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.columns {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-6);
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.cardTitle {
+  margin: 0;
+  font-size: var(--text-xl);
+  line-height: var(--leading-snug);
+  color: var(--color-text-primary);
+}
+
+.cardText {
+  margin: 0;
+  color: var(--color-text-secondary);
+  line-height: var(--leading-relaxed);
+}
+
+@media (max-width: 996px) {
+  .columns {
+    grid-template-columns: 1fr;
+  }
+}