chore: updates website (#176)

Co-authored-by: Dmitry Filimonov <[email protected]>

Author: Rperry2174

docusaurus.config.js

@@ -84,7 +84,7 @@ module.exports = {
     },
     announcementBar: {
       id: 'news',
-      content: '<strong>NEWS:</strong> Pyroscope is now part of Grafana Labs. The Pyroscope and Grafana Phlare OSS projects are merging&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="button" style="text-decoration: none;" target="_blank" href="https://grafana.com/blog/2023/03/15/pyroscope-grafana-phlare-join-for-oss-continuous-profiling">Learn more</a>',
+      content: '<strong>NEWS:</strong> Pyroscope Cloud is NOW Grafana Cloud Profiles &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="button" style="text-decoration: none;" target="_blank" href="https://grafana.com/blog/2023/06/07/continuous-profiling-now-in-public-preview-in-grafana-cloud">Read more</a>',
       backgroundColor: '#D14600', // Defaults to `#fff`
       textColor: 'white', // Defaults to `#000`
     },

src/components/Homepage/HeadSection/index.jsx

@@ -59,7 +59,7 @@ const HeadSection = ({ isOpenMenu, setIsOpen }) => {
                         <div className={styles.githubButtonWrapper}>
                             <GitHubButton href="https://github.com/pyroscope-io/pyroscope" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star pyroscope-io/pyroscope on GitHub">Star</GitHubButton>
                         </div>
-                        <GetStartedButton />
+                        <GetStartedButton href="https://grafana.com/auth/sign-up/create-user?src=pyroscope&cnt=hp" />
                     </div>
                     <ToggleMenuButton onClick={() => setIsOpen((prevState) => !prevState)} />
                 </div>
@@ -68,7 +68,7 @@ const HeadSection = ({ isOpenMenu, setIsOpen }) => {
                         <h1 className={styles.appTitle}>Open Source <br />Continuous <br />Profiling</h1>
                         <div className={styles.appSubtitle}>Find and debug your most painful performance issues across code,<br /> infrastructure and CI/CD pipelines</div>
                         <div className={styles.plans}>
-                            <Plan className={styles.preferred} title='Pyroscope Cloud' subTitle='Try it for free' url='https://pyroscope.cloud/signup' />
+                            <Plan className={styles.preferred} title='Pyroscope Cloud NOW on Grafana Cloud' subTitle='Try it for free' url='https://grafana.com/auth/sign-up/create-user?src=pyroscope&cnt=hp' />
                             <Plan title='Pyroscope OSS' subTitle='Use it for free' url='https://github.com/pyroscope-io/pyroscope' />
                         </div>
                     </div>

src/components/PricingPage/Head/index.jsx

@@ -64,7 +64,7 @@ const Head = ({ isOpenMenu, setIsOpen }) => {
                     <Logo />
                     <HeaderMenu menuItems={headerMenuItems} />
                     <div className={styles.rightSideButtons}>
-                        <GetStartedButton />
+                        <GetStartedButton href="https://grafana.com/auth/sign-up/create-user?src=pyroscope&cnt=pricing" />
                     </div>
                     <ToggleMenuButton onClick={() => setIsOpen((prevState) => !prevState)} />
                 </div>
@@ -93,10 +93,9 @@ const Head = ({ isOpenMenu, setIsOpen }) => {
                             Cloud
                         </h3>
                         <p className={clsx([styles.planDescription, styles.cloud])}>
-                            Hosted and fully–managed version of Pyroscope, designed for all your deployment and business needs.
-                            Horizontally scalable and with first-class support for high cardinality data.
+                            Hosted and fully–managed version of Pyroscope, is now available on Grafrana Cloud as Cloud Profiles. Horizontally scalable and with first-class support for high cardinality data
                         </p>
-                        <a target="_blank" className={clsx([styles.chooseButton, styles.cloud])} href="https://pyroscope.cloud/signup">
+                        <a target="_blank" className={clsx([styles.chooseButton, styles.cloud])} href="https://grafana.com/auth/sign-up/create-user?src=pyroscope&cnt=pricing">
                             Sign Up
                         </a>
                     </div>

src/components/PricingPage/TheCloudAdvantage/PlansTable/index.jsx

@@ -198,4 +198,4 @@ const Row = ({ children, className }) =>
 const Cell = ({ children, className }) =>
     <div className={clsx([styles.cell, className])}>{children}</div>
 
-export default PlansTable;
+export default PlansTable;

src/components/PricingPage/TheCloudAdvantage/index.jsx

@@ -28,17 +28,17 @@ const TheCloudAdvantage = () => {
                     <Advantage title="Grows with you" description="Write millions of profiles per second. Store hundreds of billions of individual profiles." icon={GrowsIcon} />
                     <Advantage title="Enterprise-ready" description="AWS PrivateLink, SOC2 compliance." icon={EnterpriseIcon} />
                 </div>
-                <h2 className={clsx([styles.sectionTitle, styles.comparePlans])}>
-                    Compare Plans
-                </h2>
                 <div className={styles.stripes}>
                     <div className={styles.blueStripe} />
                     <div className={styles.orangeStripe} />
                 </div>
+                {/* <h2 className={clsx([styles.sectionTitle, styles.comparePlans])}>
+                    Compare Plans
+                </h2>
                 <p className={styles.sectionSubtitle}>
                     Start with a hobby project, collaborate with a team, and scale to thousands of applications
-                </p>
-                <PlansTable />
+                </p> */}
+                {/* <PlansTable /> */}
             </div>
         </SectionWrapper>
     )
@@ -56,4 +56,4 @@ const Advantage = ({ title, description, icon }) => {
 
 }
 
-export default TheCloudAdvantage;
+export default TheCloudAdvantage;

src/components/PricingPage/TheCloudAdvantage/styles.module.scss

@@ -1,5 +1,5 @@
-$bg_height: 2300px;
-$bg_height_tablet: 1900px;
+$bg_height: 2300px - 950px;
+$bg_height_tablet: 1900px - 700px;
 
 .sectionWrapper {
   margin-top: -330px;
@@ -34,6 +34,14 @@ $bg_height_tablet: 1900px;
     padding: 0 16px;
     padding-bottom: 0px;
   }
+
+  @media (max-width: 992px) {
+    height: $bg_height;
+  }
+
+  @media (max-width: 675px) {
+    height: $bg_height;
+  }
 }
 
 .background {
@@ -54,7 +62,7 @@ $bg_height_tablet: 1900px;
 
   @media (max-width: 992px) {
     clip-path: polygon(0 9vw, 100% 0%, 100% calc(100% - 9vw), 0% 100%);
-    height: $bg_height_tablet;
+    height: $bg_height;
   }
 
   @media (max-width: 675px) {
@@ -192,8 +200,8 @@ $bg_height_tablet: 1900px;
   z-index: -1;
 
   @media (max-width: 3000px) {
-    top: calc($bg_height - 6%);
-    transform: rotate(-4deg);
+    top: calc($bg_height - 12%);
+    transform: rotate(-6deg);
   }
 
   @media (max-width: 2000px) {

src/components/PricingPage/index.jsx

@@ -5,13 +5,18 @@ import TheCloudAdvantage from './TheCloudAdvantage';
 import Footer from '../shared/Footer';
 import styles from './styles.module.scss';
 import { Helmet } from "react-helmet";
+import AnnouncementBar from './../../theme/AnnouncementBar';
+import {AnnouncementBarProvider} from '@docusaurus/theme-common';
 
 
 const PricingPage = () => {
     const [isOpenMenu, setIsOpen] = useState(false);
 
     return (
         <>
+            <AnnouncementBarProvider>
+                <AnnouncementBar/>
+            </AnnouncementBarProvider>
             <Helmet>
                 <title>Pricing Pyroscope | Open Source Continuous Profiling Platform</title>
                 <meta name="description" content='Pricing Pyroscope | Open Source Continuous Profiling Platform' />
@@ -31,4 +36,4 @@ const PricingPage = () => {
     )
 }
 
-export default PricingPage;
+export default PricingPage;

src/components/shared/Footer/index.jsx

@@ -108,7 +108,7 @@ const HelpUsBanner = () => (
   <div className={styles.banner}>
     <ContactUsImage />
     <h3 className={styles.title}>Get started with Pyroscope Cloud<br />for free</h3>
-    <a href="https://pyroscope.cloud/signup" target="_blank" className={styles.joinPrivateBeta}>Sign Up</a>
+    <a href="https://grafana.com/auth/sign-up/create-user?src=pyroscope&cnt=hp" target="_blank" className={styles.joinPrivateBeta}>Sign Up</a>
   </div>
 )
 

src/components/shared/GetStartedButton/index.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import styles from './styles.module.scss';
 
-const GetStartedButton = () => (
+const GetStartedButton = ({ href }) => (
     <a
-        href="https://pyroscope.cloud/signup"
+        href={href}
         target="_blank"
         className={styles.getStartedButton}
     >
         Get Started
     </a>
 )
 
-export default GetStartedButton;
+export default GetStartedButton;