✨ Add updated pricing page and commerical benefits (#2972)

* 🚧 Add updated pricing page and commerical benefits

* 📝 Update README with dev site info

* ✨ Add Polar integration with Astro Action

* 🔥 Remove unused component

* 💄 Add button disable and animation on purchase

README.md

@@ -15,7 +15,7 @@
 [![Test Coverage](https://api.codeclimate.com/v1/badges/b295b0cc0d828ccc1b76/test_coverage)](https://codeclimate.com/github/shipshapecode/shepherd/test_coverage)
 [![StackShare](https://img.shields.io/badge/Follow%20on-StackShare-blue.svg?logo=stackshare&style=flat)](https://stackshare.io/shepherd-js) 
 
-[Shepherd](https://shepherdpro.com/) is an open source, fully featured, digital adoption platform (DAP) and user on-boarding service. Use our
+[Shepherd](https://shepherdjs.dev/) is an open source, fully featured, digital adoption platform (DAP) and user on-boarding service. Use our
 hosted SaaS or deploy to your own infrastructure to run on-premise.
 
 Supported Browsers
@@ -31,22 +31,9 @@ Shepherd makes it simple to create custom user on-boarding tours, trainings and
 
 Shepherd enables you to guide users through a custom tour or journey within your app or website. Highly customizable with minimal styles, Shepherd allows for powerful customization while being easy to use. Various frameworks supported including React, Ember, Angular, Vue.js, ES Modules, or plain JavaScript. 
 
-# Shepherd Pro 
-
-Unlock additional capabilities and more full featured Journeys.
-
-* **Customizable Tour Templates**: Pre-designed templates for different types of software that can be easily customized.
-* **Analytics Integration**: To track user engagement and effectiveness of the tours.
-* **Multi-Language Support**: For global reach and accessibility.
-* **User Behavior Tracking**: To understand how users interact with the tours and optimize accordingly.
-* **Integration Capabilities**: Easy integration with a wide range of web applications and software.
-* **Responsive Design**: Ensuring tours work seamlessly on all devices.
-* **Feedback Mechanisms**: Allowing users to provide feedback directly within the tours.
-* **Advanced Branching Logic**: For personalized tour experiences based on user actions or profiles.
-
 # Demo
-See Shepherd Live on our docs website by clicking on the image:
-<a href="https://blog.shepherdpro.com/demo">
+See Shepherd Live on our website by clicking on the image:
+<a href="https://shepherdjs.dev">
  <img 
  src="https://blog.shepherdpro.com/img/demo.png" 
  alt="Guide your users through a tour of your app" 
@@ -55,34 +42,29 @@ See Shepherd Live on our docs website by clicking on the image:
 
 # Using Shepherd
 
-### Shepherd Pro hosted SaaS
-
-You can try our hosted version for free at [https://shepherdpro.com/](https://shepherdpro.com)
-
-The Entire Shepherd Service that powers Shepherd Pro is the newest iteration of Shepherd and includes the features of Shepherd Pro. 
-
-
-### Shepherd Library (MIT License)
+### Shepherd Open Source Library
 
 The Shepherd Standalone Library has been open source since the very beginning. Check out our tutorials here:
 
-#### [React Shepherd Wrapper](https://github.com/shepherd-pro/react-shepherd)
-#### [Angular Shepherd Wrapper](https://github.com/shepherd-pro/angular-shepherd)
-#### [Vue Shepherd Wrapper](https://github.com/shepherd-pro/vue-shepherd)
+#### [React Shepherd Wrapper](packages/react)
+#### [Angular Shepherd Wrapper](https://github.com/shipshapecode/angular-shepherd)
+#### [Vue Shepherd Wrapper](https://github.com/shipshapecode/vue-shepherd)
 #### [Ember Shepherd Wrapper](https://github.com/shepherd-pro/ember-shepherd)
 
+### Commercial license
 
-# White Glove Services
+If you want to use Shepherd for a commercial application, theme or plugin the commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase a commercial license at [shepherdjs.dev](http://shepherdjs.dev/pricing)
 
-If you have an idea or project in mind and would like to engage our team to build a custom tour, training or on-boarding experience, get in touch! [[email protected]](mailto:[email protected]) 
+# White Glove Services
 
+If you have an idea or project in mind and would like to engage our team to build a custom tour, training or on-boarding experience, [get in touch](mailto:[email protected])! 
 
 
 ## Resources
 
-- [Website](https://shepherdpro.com/)
+- [Website](https://shepherdjs.dev/)
 - [Documentation](https://docs.shepherdpro.com/)
-- [Demo](https://blog.shepherdpro.com/demo/)
+- [Demo](https://shepherdjs.dev/)
 - [Discord](https://discord.gg/EGcDW5NSud)
 - If you have any questions about our projects you can email [[email protected]](mailto:[email protected])
 

landing/astro.config.mjs

@@ -4,14 +4,18 @@ import sitemap from '@astrojs/sitemap';
 import tailwind from '@astrojs/tailwind';
 import { loadEnv } from 'vite';
 
-const { STORYBLOK_TOKEN } = loadEnv(process.env.NODE_ENV, process.cwd(), '');
+import vercel from '@astrojs/vercel/serverless';
 
 // https://astro.build/config
 export default defineConfig({
  site: 'https://blog.shepherdpro.com',
+
  integrations: [
  mdx(),
  sitemap(),
  tailwind()
  ],
-});
+
+ output: 'hybrid',
+ adapter: vercel(),
+});

landing/package.json

@@ -16,6 +16,8 @@
  "@astrojs/rss": "^4.0.7",
  "@astrojs/sitemap": "^3.1.6",
  "@astrojs/tailwind": "^5.1.0",
+ "@astrojs/vercel": "^7.8.1",
+ "@polar-sh/sdk": "^0.8.1",
  "astro": "^4.15.4",
  "shepherd.js": "workspace:*",
  "tailwindcss": "^3.4.11",

landing/src/actions/index.ts

@@ -0,0 +1,35 @@
+import { defineAction } from 'astro:actions';
+import { z } from 'astro:schema';
+
+import { Polar } from "@polar-sh/sdk";
+
+const polar = new Polar({
+ accessToken: process.env["POLAR_ACCESS_TOKEN"] ?? "",
+});
+
+export const server = {
+ checkout: defineAction({ 
+ input: z.object({
+ productPriceId: z.string(),
+ }),
+ handler: async (input) => {
+ const { productPriceId } = input;
+ let result;
+
+ try {
+ result = await polar.checkouts.create({
+ productPriceId: productPriceId,
+ successUrl: 'https://docs.shepherdjs.dev',
+ });
+ } catch (error) {
+ console.error("Checkout error:", error);
+ } finally {
+ if (result?.url) {
+ return result.url;
+ } else {
+ return 'https://shepherdjs.dev';
+ }
+ }
+ }
+ })
+}

landing/src/components/Footer.astro

@@ -2,58 +2,58 @@
 import ShepherdWink from '../images/shepherd-head-wink.svg';
 ---
 
-<footer class="flex justify-center mt-auto w-full">
+<footer class='flex justify-center mt-auto w-full'>
  <img
- class="footer-logo absolute w-48"
+ class='footer-logo absolute w-48'
  src={ShepherdWink.src}
- alt="Shepherd Winking"
- role="presentation"
+ alt='Shepherd Winking'
+ role='presentation'
  />
 
  <div
- class="bg-grey border-4 border-navy flex flex-wrap items-center justify-center md:justify-between max-w-8xl p-8 pt-20 w-full md:pt-8"
+ class='bg-grey border-4 border-navy flex flex-wrap items-center justify-center md:justify-between max-w-8xl p-8 pt-20 w-full md:pt-8'
  >
  <div
- class="flex items-center justify-center w-full md:justify-between md:w-auto"
+ class='flex items-center justify-center w-full md:justify-between md:w-auto'
  >
  <img
- class="inline mr-2 w-8"
- src="/img/ship-shape-logo.svg"
- alt="Ship Shape Logo"
+ class='inline mr-2 w-8'
+ src='/img/ship-shape-logo.svg'
+ alt='Ship Shape Logo'
  />
 
- <span class="font-heading text-xl uppercase">
+ <span class='font-heading text-xl uppercase'>
  Library by
- <a class="underline hover:text-navy-light" href="https://shipshape.io"
+ <a class='underline hover:text-navy-light' href='https://shipshape.io'
  >Ship Shape</a
  >
  </span>
  </div>
 
- <div class="flex items-center">
- <a href="https://github.com/shepherd-pro">
+ <div class='flex items-center'>
+ <a href='https://github.com/shipshapecode/shepherd'>
  <img
- class="footer-icon mr-4 w-6"
- src="/img/github.svg"
- alt="GitHub Logo"
+ class='footer-icon mr-4 w-6'
+ src='/img/github.svg'
+ alt='GitHub Logo'
  />
  </a>
 
- <!-- <a href="https://twitter.com/whiskeywebfm">
+ <a href='https://twitter.com/whiskeywebfm'>
  <img
- class="footer-icon mr-4 w-6"
- src="/img/twitter.svg"
- alt="Twitter Logo"
+ class='footer-icon mr-4 w-6'
+ src='/img/twitter.svg'
+ alt='Twitter Logo'
  />
  </a>
 
- <a href="https://www.linkedin.com/company/ship-shape/">
+ <a href='https://www.linkedin.com/company/ship-shape/'>
  <img
- class="footer-icon mr-4 w-6"
- src="/img/linkedin.svg"
- alt="LinkedIn Logo"
+ class='footer-icon mr-4 w-6'
+ src='/img/linkedin.svg'
+ alt='LinkedIn Logo'
  />
- </a> -->
+ </a>
  </div>
  </div>
 </footer>