Added out of the box plugins

docs/site/docs/examples/_cards.mdx

@@ -0,0 +1,22 @@
+<div class="card-container" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1rem', marginBottom: '2rem' }}>
+    <div class="card" style={{ border: '1px solid #e5e7eb', borderRadius: '8px', padding: '1.5rem' }}>
+        <h3><a href="/examples/dev-daily">Dev Daily Plugin</a></h3>
+        <p>A developer productivity dashboard showcasing developer-centric metrics and insights.</p>
+    </div>
+
+    <div class="card" style={{ border: '1px solid #e5e7eb', borderRadius: '8px', padding: '1.5rem' }}>
+        <h3><a href="/examples/security">Security Plugin</a></h3>
+        <p>A security dashboard that helps you manage security policies and compliance.</p>
+    </div>
+
+    <div class="card" style={{ border: '1px solid #e5e7eb', borderRadius: '8px', padding: '1.5rem' }}>
+        <h3><a href="/examples/incident-management">Incident Management Plugin</a></h3>
+        <p>An incident management dashboard that helps you manage incidents and be more efficient when you are on call.</p>
+    </div>
+
+    <div class="card" style={{ border: '1px solid #e5e7eb', borderRadius: '8px', padding: '1.5rem', backgroundColor: '#f9fafb' }}>
+        <h3>More Coming Soon</h3>
+        <p>We're working on additional example plugins to support more use cases.</p>
+    </div>
+
+</div>

docs/site/docs/examples/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Enterprise-Ready Plugins",
+  "position": 6
+}

docs/site/docs/examples/dev-daily.md

@@ -0,0 +1,40 @@
+---
+title: Dev Daily Plugin
+description: A dashboard that consolidates developers' daily activities like pull requests, tasks and reviews to help plan and manage their day.
+sidebar_position: 2
+---
+
+# Dev Daily Plugin
+
+The Dev Daily Plugin provides developers with a consolidated dashboard of their daily development activities, including pull requests, tasks, and reviews. This plugin helps developers efficiently plan and manage their day by bringing together key information in one place.
+
+![Dev Daily Plugin Dashboard](/img/dev-daily/plan-my-day.png)
+
+## Prerequisites
+
+- Complete the [Getting Started](/getting-started) guide
+- Jira and Github accounts
+
+## Install
+
+```bash
+yarn --cwd packages/app add @port-labs/backstage-plugin-dev-daily
+```
+
+Next, add the `DevDailyPage` component to your Backstage instance.
+
+In the file `packages/app/src/App.tsx`, add the route:
+
+```tsx
+import { DevDailyPluginPage } from "@port-labs/backstage-plugin-dev-daily";
+// ...
+<Route path="/dev-daily" element={<DevDailyPluginPage />} />;
+```
+
+Then add the link to the NavBar, in the file: `packages/app/src/components/Root/Root.tsx`:
+
+```tsx
+import AssignmentTurnedInIcon from "@material-ui/icons/AssignmentTurnedIn";
+// ...
+<SidebarItem icon={AssignmentTurnedInIcon} to="dev-daily" text="Plan My Day" />;
+```

docs/site/docs/examples/incident-management.md

@@ -0,0 +1,9 @@
+---
+title: Incident Management Plugin
+description: A plugin that helps you manage incidents and be more efficient when you are on call.
+sidebar_position: 4
+---
+
+# Incident Management Plugin
+
+Coming soon...

docs/site/docs/examples/intro.md

@@ -0,0 +1,22 @@
+---
+title: Introduction
+description: Example plugins showcasing Port's plugin framework capabilities
+sidebar_position: 1
+slug: /examples
+---
+
+import Cards from './\_cards.mdx';
+
+# Enterprise-Ready Plugins
+
+Port's plugin framework for Backstage empowers you to build custom plugins that perfectly match your organization's needs. To help you get started, we provide free, enterprise-grade example plugins.
+
+## Available plugins
+
+<Cards />
+
+## Build Your Own
+
+Remember, these examples are just the beginning. Port's plugin framework enables you to build any custom functionality your organization needs. Whether you want to modify these examples or create entirely new plugins from scratch, the framework provides the foundation for building powerful Backstage extensions.
+
+Check out our [Getting Started guide](../getting-started.md) to begin building your own custom plugins.

docs/site/docs/examples/security.md

@@ -0,0 +1,9 @@
+---
+title: Security Plugin
+description: A plugin that helps you manage security policies and compliance.
+sidebar_position: 3
+---
+
+# Security Plugin
+
+Coming soon...

docs/site/docs/getting-started.md

@@ -6,6 +6,8 @@ sidebar_position: 2
 
 Let's discover **Port's Backstage plugin in less than 5 minutes**.
 
+![Dev Daily Plugin Dashboard](/img/dev-daily/plan-my-day.png)
+
 ### Prerequisites
 
 - A Backstage instance
@@ -31,24 +33,6 @@ Then register the backend plugin in `packages/backend/src/index.ts`:
 backend.add(import("@port-labs/backstage-plugin-framework-backend"));
 ```
 
-Finally, add components as you like from the frontend plugin to your Backstage instance.
-
-For example, let's add the Scorecard component to the NavBar:
-
-in the file: `packages/app/src/App.tsx`, add the route:
-
-```typescript
-<Route path="/scorecards" element={<ScorecardsPage />} />
-```
-
-and then add the link to the NavBar, in the file: `packages/app/src/components/Root/Root.tsx`:
-
-```typescript
-<SidebarItem icon={DoneAllIcon} to="scorecards" text="Scorecards" />
-```
-
-![Scorecards page](/img/scorecards.png)
-
 ### Configure Credentials
 
 1. In Port, on the top right, click on the `...` (three dots) and select **Credentials**.
@@ -68,6 +52,35 @@ and then add the link to the NavBar, in the file: `packages/app/src/components/R
 
 Read more [find your Port credentials](https://docs.getport.io/build-your-software-catalog/custom-integration/api/#find-your-port-credentials)
 
+## Adding the settings page
+
+The settings page is a page that allows you to configure the plugin.
+
+To add the settings page, you need to add the `SettingsPage` component to your Backstage instance.
+
+In the file `packages/app/src/App.tsx`, replace the `<Route path="/settings" element={<UserSettingsPage />}>` with the following code:
+
+```tsx
+import { SettingsPage } from "@port-labs/backstage-plugin-framework";
+
+// ...
+<Route path="/settings" element={<UserSettingsPage />}>
+  <RequirePermission permission={catalogEntityCreatePermission}>
+    <SettingsLayout.Route
+      path="/port"
+      title="Port"
+      children={<SettingsPage />}
+    />
+  </RequirePermission>
+</Route>;
+```
+
+## Example out-of-the-box plugin - Dev Daily
+
+Follow the [Dev Daily Plugin documentation](./examples/dev-daily.md) to learn how to use the Dev Daily Plugin.
+
+![Dev Daily Plugin Dashboard](/img/dev-daily/plan-my-day.png)
+
 ## Extend your Backstage instance
 
 Take your Backstage instance to the next level by integrating with Port's powerful API.

docs/site/docs/intro.md

@@ -3,22 +3,32 @@ sidebar_position: 1
 slug: /
 ---
 
+import Cards from './examples/\_cards.mdx';
+
 # Introduction
 
-The Port Backstage plugin allows you to ramp up your Backstage instance quickly.
-Building a developer portal from scratch can be a daunting task, but with the Port Backstage plugin, you can have a **fully functional portal in days not months**.
+The **Backstage Plugin Framework** by Port will help you build plugins for your Backstage instance faster.
+
+We are also providing a few enterprise-ready example plugins to help you get started.
+
+Building a developer portal from scratch can be a daunting task, but with the **Backstage Plugin Framework** by Port, you can have a **fully functional portal in days not months**.
 
 <div style={{ textAlign: "center" }}>
-  <img src="img/plugin-base.png" alt="Port Backstage plugin" height="500" />
+  <img src="img/plugin-base.png" alt="Port Backstage plugin" />
 </div>
 
-With this plugin, you can:
+With this framework, you can:
 
-- Build new plugin with **PortSDK** in days and not months
-- Consolidate data from multiple sources into a single, unified view
-- Implement governance and compliance through Port's rules engine and scorecards
-- Enable self-service actions for developers
+- Build a new plugin with the framework in days and not months
+- Use our enterprise-ready [out-of-the-box plugins](/examples) to get started faster
 - Integrate with 50+ tools and services through Port's extensive integration library
+- Use our rules engine to build scorecards which promote standards across your software catalog
+
+## Enterprise-Ready Plugins
+
+Port's plugin framework for Backstage empowers you to build custom plugins that perfectly match your organization's needs. To help you get started, we provide free, enterprise-grade example plugins.
+
+<Cards />
 
 ## Key benefits
 

docs/site/docusaurus.config.ts

@@ -4,8 +4,8 @@ import { themes as prismThemes } from "prism-react-renderer";
 import tailwindPlugin from "./src/plugins/tailwind-config.cjs";
 
 const config: Config = {
-  title: "Port Backstage Plugin",
-  tagline: "Combine all your integrations in one plugin",
+  title: "Port Plugin Framework for Backstage",
+  tagline: "Build plugins for your Backstage instance faster",
   favicon: "img/icon.svg",
 
   url: "https://docs.backstage-plugin.getport.io",
@@ -45,7 +45,7 @@ const config: Config = {
     // Replace with your project's social card
     image: "img/icon.svg",
     navbar: {
-      title: "Port Backstage Plugin",
+      title: "Backstage Plugin Framework",
       logo: {
         alt: "Port Logo",
         src: "img/icon.svg",