Merge branch 'main' into re-enable-beta

docs/docs/api/observers.mdx

@@ -2,7 +2,7 @@
 title: Observers
 ---
 
-import { PubBadge } from '../../src/components/PubBadge';
+import { PubBadge } from '../../src/components/Shield';
 
 ## Observer Widget
 

docs/docs/core-concepts.mdx → docs/docs/concepts.mdx

@@ -1,11 +1,10 @@
 ---
 title: Core Concepts
-id: concepts
 ---
 
+import { PubBadge } from '../src/components/Shield';
 import mobxTriad from '../src/images/mobx-triad.png';
 import mobxIsometric from '../src/images/mobx-isometric.png';
-import { PubBadge } from '../src/components/PubBadge';
 
 <img
   src={mobxTriad}

docs/docs/examples/connectivity/index.mdx

@@ -3,8 +3,8 @@ title: Connectivity
 slug: /examples/connectivity
 ---
 
-import { PubBadge } from '../../../src/components/PubBadge';
-import { Profile } from '../../../src/components/Testimonial';
+import { PubBadge } from '../../../src/components/Shield';
+import { Profile } from '../../../src/components/home/Testimonial';
 import connectivityGif from './connectivity.gif';
 
 <Profile

docs/docs/examples/dice/index.mdx

@@ -3,9 +3,9 @@ title: Dice
 slug: /examples/dice
 ---
 
-import { Profile } from '../../../src/components/Testimonial';
+import { PubBadge } from '../../../src/components/Shield';
+import { Profile } from '../../../src/components/home/Testimonial';
 import diceJpg from './dice.gif';
-import { PubBadge } from '../../../src/components/PubBadge';
 
 <Profile
   author="Giri Jeedigunta"

docs/docs/examples/github/index.mdx

@@ -6,7 +6,7 @@ description:
   also show the use of an ObservableFuture with an Observer.
 ---
 
-import { PubBadge } from '../../../src/components/PubBadge';
+import { PubBadge } from '../../../src/components/Shield';
 
 In this example, we will use the <PubBadge name="github" /> package to fetch the
 repositories for a user. This will also show the use of an `ObservableFuture`

docs/docs/examples/todos/index.mdx

@@ -6,7 +6,7 @@ description:
   default way of showcasing the capabilities of a state-management library.
 ---
 
-import { PubBadge } from '../../../src/components/PubBadge';
+import { PubBadge } from '../../../src/components/Shield';
 
 In this example, we will build the classic [TodoMVC](http://todomvc.com/), which
 has become the default way of showcasing the capabilities of a state-management

docs/docs/guides/cheat-sheet.mdx

@@ -4,7 +4,7 @@ title: MobX Cheat Sheet 🚀
 description: The MobX.dart cheat sheet
 ---
 
-import { PubBadge } from '../../src/components/PubBadge';
+import { PubBadge } from '../../src/components/Shield';
 
 MobX has a pretty small API surface and tries to get out of your way as much as
 possible. Although minimal, there are few concepts you should be familiar with.

docs/docs/guides/json-serialization.mdx

@@ -3,7 +3,7 @@ slug: /guides/json
 title: JSON Serialization of Stores
 ---
 
-import { PubBadge } from '../../src/components/PubBadge';
+import { PubBadge } from '../../src/components/Shield';
 
 The <PubBadge name="json_serializable" /> package is a popular way to
 encode/decode between json representations of your models. It works by attaching

docs/docs/guides/organizing-stores.mdx

@@ -3,7 +3,7 @@ slug: /guides/stores
 title: Organizing Stores
 ---
 
-import { PubBadge } from '../../src/components/PubBadge';
+import { PubBadge } from '../../src/components/Shield';
 import storeHierarchy from './store-hierarchy.png';
 import dependencyOrder from './dependency-order.png';
 

docs/docusaurus.config.js

@@ -80,13 +80,13 @@ module.exports = {
           title: 'More',
           items: [
             {
-              label: 'Twitter',
+              label: 'X',
               href: 'https://twitter.com/pavanpodila',
             },
           ],
         },
       ],
-      copyright: `Copyright © ${new Date().getFullYear()} MobX.dart team. Built with Docusaurus.`,
+      copyright: `Copyright © ${new Date().getFullYear()} MobX.dart team. All rights reserved.`,
     },
     prism: {
       theme: require('prism-react-renderer').themes.vsDark,

docs/package.json

@@ -16,6 +16,8 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@mdx-js/react": "^3.0.0",
+    "@splinetool/react-spline": "^2.2.6",
+    "@splinetool/runtime": "^1.0.17",
     "axios": "^1.6.3",
     "dotenv": "^16.3.1",
     "lodash.get": "^4.4.2",
@@ -25,6 +27,7 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.0.0",
     "@docusaurus/types": "^3.0.1",
+    "raw-loader": "^4.0.2",
     "@types/lodash.get": "^4.4.9",
     "@types/node": "^20.10.5",
     "@types/react": "^18.2.45",

docs/src/components/Shield.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 
 const GithubWorkflowStatus = ({
   label,
@@ -60,3 +60,20 @@ export const FlutterFavorite = () => (
     />
   </a>
 );
+
+interface Props {
+  name: string;
+}
+
+export const PubBadge: FunctionComponent<Props> = (props) => {
+  const { name } = props;
+
+  return (
+    <a href={`https://pub.dartlang.org/packages/${name}`}>
+      <img
+        alt="pub"
+        src={`https://img.shields.io/pub/v/${name}.svg?label=${name}&logo=dart&color=blue&style=for-the-badge`}
+      />
+    </a>
+  );
+};

docs/src/components/home/HeroSection.tsx

@@ -0,0 +1,62 @@
+import { Section } from './Section';
+import React from 'react';
+import Spline from '@splinetool/react-spline';
+
+export function HeroSection() {
+  return (
+    <Section
+      className={'bg-white'}
+      containerClassName={
+        'grid grid-cols-1 sm:grid-cols-2 gap-8 items-center justify-items-center'
+      }
+    >
+      <div className={'order-2 sm:order-1 py-0 md:py-16 lg:py-32'}>
+        <div className={'text-4xl sm:text-6xl font-extrabold'}>
+          <a href={'https://github.com/mobxjs/mobx'}>MobX</a> for Dart and
+          Flutter
+        </div>
+
+        <div className={'text-2xl sm:text-3xl my-4'}>
+          Hassle free state-management for your Dart and Flutter apps.
+        </div>
+
+        <div className={'text-lg text-gray-500 mb-16'}>
+          Use the power of <code>Observables</code>, <code>Actions</code> and{' '}
+          <code>Reactions</code> to supercharge the state in your apps.
+        </div>
+
+        <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-4 text-center">
+          <a
+            className={
+              'text-xl lg:text-2xl p-4 rounded-md sm:rounded-lg border-blue-800 border bg-blue-500 hover:bg-blue-600 hover:transition-colors hover:no-underline text-white hover:text-white'
+            }
+            href={'/getting-started'}
+          >
+            Get Started 🚀
+          </a>
+          <a
+            className={
+              'text-xl lg:text-2xl p-4 rounded-md sm:rounded-lg border-blue-500 border-2 border-solid hover:no-underline hover:border-blue-600 hover:transition-colors '
+            }
+            href={'/concepts'}
+          >
+            Learn More...
+          </a>
+        </div>
+      </div>
+
+      <MobXLogoViewer
+        className={'order-1 sm:order-2 w-full min-h-56 md:min-h-0'}
+      />
+    </Section>
+  );
+}
+
+function MobXLogoViewer({ className }: { className?: string }) {
+  return (
+    <Spline
+      scene="https://prod.spline.design/CB9ncfOuCZuIaUKV/scene.splinecode"
+      className={className}
+    />
+  );
+}