Mentorship services

src/components/Menu/Menu.js

@@ -51,6 +51,7 @@ export const menuData = [
         href: "/services/development",
       },
       { label: "Workshops", href: "/services/workshops" },
+      { label: "Mentorship", href: "/services/mentorship" },
       { label: "Speaking", href: "/services/speaking" },
     ],
   },

src/pages/index.js

@@ -54,26 +54,24 @@ const IndexPage = ({ data }) => {
     >
       <ImageBlock imageRight image={<Avatar />} margin={{ top: "medium" }}>
         <Paragraph size="large" standout lead margin={{ vertical: "none" }}>
-          I am Varya Stepanova, a <b>design systems architect</b> with extensive
-          experience in management, design, and the technical side. In my ~20
-          years of technical career, my focus has been on component-focused UI
-          design and development, creating helpful tools for the subject, and
-          spreading best practices across large organizations. I hold two
-          Master&apos;s degrees - one in physics and one in computer science
-          from Aalto University&apos;s{" "}
+          I am Varya Stepanova, a <b>design systems architect and engineering manager</b> with 
+          20+ years in tech and 15+ years leading engineering teams. My expertise spans 
+          component-focused UI design and development, creating helpful tools for the subject, 
+          and spreading best practices across large organizations while managing distributed 
+          teams and scaling design system operations. I hold two Master&apos;s degrees - one 
+          in physics and one in computer science from Aalto University&apos;s{" "}
           <Link to="https://www.idbm.aalto.fi/" target="_blank" rel="noopener">
             IDBM
           </Link>{" "}
-          program, which focuses on service design and business. I also have 15+
-          years of engineering experience and have held several leading roles.
+          program, which focuses on service design and business.
+        </Paragraph>
+        <Paragraph size="large" standout lead>
+          Currently, my focus is on bringing design systems to the next level of
+          success, which includes working cooperatively with a client
+          company&apos;s design & development community and bridging the gap
+          between designers, developers, and business specialists.
         </Paragraph>
       </ImageBlock>
-      <Paragraph size="large" standout lead>
-        Currently, my focus is on bringing design systems to the next level of
-        success, which includes working cooperatively with a client
-        company&apos;s design & development community and bridging the gap
-        between designers, developers, and business specialists.
-      </Paragraph>
 
       {/* <Workshop /> */}
       <Section heading="Services">

src/pages/services/mentorship.js

@@ -0,0 +1,161 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { Box, Button, Text } from "grommet";
+import { Heading, Paragraph, Avatar, ImageBlock, Link } from "@components";
+import { Page } from "@templates/Page";
+
+import { InlineWidget } from "react-calendly";
+
+import heroImage from "./hero-supervision.jpg"; // Using supervision hero image as placeholder
+
+const HeroContent = () => (
+  <Heading
+    level={1}
+    alignSelf="center"
+    responsive
+    size="large"
+    margin={{ top: "auto" }}
+  >
+    <Text size="inherit" color="accent">
+      Mentorship
+    </Text>
+  </Heading>
+);
+
+const Mentorship = ({ location }) => (
+  <Page
+    hero={{
+      props: {
+        imageUrl: heroImage,
+        hasOverlay: true,
+      },
+      content: HeroContent,
+    }}
+    seo={{
+      title: "Design Systems and Frontend Development Mentorship",
+      description: `Expert mentorship for designers and developers looking to advance their skills in design systems, frontend development, and team collaboration. Get personalized guidance from an experienced professional.`,
+      cover: heroImage,
+      keywords: [
+        "mentorship",
+        "design systems mentoring",
+        "frontend development mentor",
+        "career guidance",
+        "professional development",
+        "design systems expert",
+      ],
+    }}
+    location={location}
+  >
+    <ImageBlock imageLeft image={<Avatar />} margin={{ top: "medium" }}>
+      <Paragraph size="large" standout lead margin={{ vertical: "none" }}>
+        With 20+ years in tech and 15+ years leading engineering teams, I offer personalized 
+        mentorship for professionals looking to excel in design systems, UI development, 
+        and team leadership. My experience spans from building UI frameworks with 150+ components 
+        for one of Europe's largest internet companies to leading distributed teams across 
+        multiple countries and cultures.
+      </Paragraph>
+      <Paragraph size="large" standout lead>
+        I've successfully grown teams from 1 to 7 people, managed design system adoption 
+        across large retail organizations that ship products to multiple markets, and led 
+        comprehensive design system implementations for SaaS platforms, messaging services, 
+        and international agricultural technology companies. My approach combines technical 
+        expertise with strong people management and cross-cultural collaboration skills.
+      </Paragraph>
+    </ImageBlock>
+    <Paragraph>
+      My mentorship focuses on:
+      <ul>
+        <li><strong>Design Systems Leadership:</strong> Strategy, roadmapping, stakeholder alignment, and measuring success through adoption metrics</li>
+        <li><strong>Team Management:</strong> Building and scaling design system teams, conducting 1-1s, facilitating cross-functional collaboration</li>
+        <li><strong>UI Architecture & Component Design:</strong> Creating scalable component libraries, design tokens, and documentation systems</li>
+        <li><strong>Product Ownership:</strong> Establishing OKRs, tracking DORA metrics, and driving data-driven roadmap prioritization</li>
+        <li><strong>Career Development:</strong> Transitioning from individual contributor to leadership roles, mentoring team members' growth</li>
+        <li><strong>Cross-Cultural Collaboration:</strong> Managing distributed teams across time zones and fostering inclusive team environments</li>
+        <li><strong>Community Building:</strong> Championing design system adoption, organizing knowledge sharing, and building internal communities</li>
+      </ul>
+    </Paragraph>
+    <Paragraph>
+      <strong>How mentorship works:</strong>
+    </Paragraph>
+    <Paragraph>
+      Mentorship takes place through semi-regular online meetings where we discuss your current 
+      challenges, review your progress, and plan next steps. Between sessions, you'll receive 
+      practical homework assignments designed to help you apply what we've discussed and build 
+      real-world experience.
+    </Paragraph>
+    <Paragraph>
+      The frequency of our meetings depends entirely on your needs and availability. Some mentees 
+      benefit from sessions a couple of times per month for intensive guidance during critical 
+      projects or career transitions, while others prefer quarterly check-ins to maintain momentum 
+      and get strategic advice. We'll find a rhythm that works best for your challenges and 
+      schedule.
+    </Paragraph>
+    <Paragraph>
+      <strong>What exactly could I ask as a mentee?</strong>
+    </Paragraph>
+    <Paragraph>
+      You can ask anything you feel relevant. Here are a few ideas — these are real questions 
+      I've discussed with my mentees. Maybe they're similar to your challenges:
+    </Paragraph>
+    <Paragraph>
+      <ul>
+        <li>"This is the status of my design system now, where do I invest time to make the best progress right now?"</li>
+        <li>"How do I organize sync with designers?"</li>
+        <li>"How exactly could I improve our documentation in Storybook?"</li>
+        <li>"How to display what are our available CSS utilities so that a designer sees it?"</li>
+        <li>"What to start with if we want visual regression testing in our specific setup?"</li>
+        <li>"How do we increase adoption of design system in our product?"</li>
+        <li>"What topics should I learn for my next interview to a design system position?"</li>
+      </ul>
+    </Paragraph>
+    <Paragraph>
+      Topics are not limited to this list — bring whatever challenges you're facing, and we'll 
+      work through them together.
+    </Paragraph>
+
+    <Heading level={2} margin={{ top: "large", bottom: "medium" }}>
+      Get in Touch
+    </Heading>
+
+    <Paragraph>
+      Ready to start your mentorship journey? I'd love to hear about your challenges and goals.
+    </Paragraph>
+
+    <Box direction="row" gap="medium" wrap margin={{ bottom: "medium" }}>
+      <Button
+        primary
+        size="medium"
+        label="Email me at mail@varya.me"
+        href="mailto:mail@varya.me"
+        target="_blank"
+        rel="noopener"
+      />
+      <Button
+        secondary
+        size="medium"
+        label="Connect on LinkedIn"
+        href="https://www.linkedin.com/in/varyastepanova/"
+        target="_blank"
+        rel="noopener"
+      />
+    </Box>
+
+    <Paragraph>
+      Or book a video session directly via{" "}
+      <Link to="https://calendly.com/var_ya">Calendly</Link> — I keep my calendar
+      up to date, so you can easily see available times and choose what works best for you.
+    </Paragraph>
+
+    <InlineWidget
+      styles={{ minWidth: "320px", height: "700px" }}
+      url="https://calendly.com/var_ya/30min"
+    />
+  </Page>
+);
+
+Mentorship.propTypes = {
+  location: PropTypes.object,
+};
+
+export default Mentorship;