new pricing plan cards (#6564)

Author: hasparus

.eslintrc.cjs

@@ -230,6 +230,7 @@ module.exports = {
             'hive-focus-within',
             'nextra-scrollbar',
             'no-scrollbar', // from Nextra
+            'hive-slider',
           ],
           config: path.join(__dirname, './packages/web/docs/tailwind.config.ts'),
         },

.github/workflows/tests-e2e.yaml

@@ -48,7 +48,7 @@ jobs:
             up -d --wait
 
       - name: cypress
-        timeout-minutes: 6
+        timeout-minutes: 8
         uses: cypress-io/github-action@v6
         env:
           CI: true

packages/web/docs/src/app/oss-friends/page.tsx

@@ -95,7 +95,7 @@ export default async function OSSFriendsPage() {
           </div>
         </section>
       </div>
-      <section className="relative mx-4 mt-12 overflow-hidden rounded-3xl bg-[#003834] p-12 text-center sm:p-24 md:mx-6">
+      <section className="bg-blueish-green relative mx-4 mt-12 overflow-hidden rounded-3xl p-12 text-center sm:p-24 md:mx-6">
         <DecorationIsolation>
           <ArchDecoration className="absolute -left-1/2 -top-1/2 rotate-180 sm:-left-1/4 md:left-[-105px] md:top-[-109px] [&>path]:fill-none" />
           <HighlightDecoration className="absolute -left-1 -top-16 size-[600px] -scale-x-100 overflow-visible" />

packages/web/docs/src/app/page.tsx

@@ -117,7 +117,7 @@ function GetStartedTodaySection({ className }: { className?: string }) {
   return (
     <section
       className={cn(
-        'relative overflow-hidden rounded-3xl bg-[#003834] p-12 text-center sm:p-24',
+        'bg-blueish-green relative overflow-hidden rounded-3xl p-12 text-center sm:p-24',
         className,
       )}
     >
@@ -224,7 +224,7 @@ function LearnGraphQLFederationSection(props: { className?: string }) {
   return (
     <section
       className={cn(
-        'to-green-1000 relative rounded-3xl bg-gradient-to-br from-[#003834] p-8 sm:py-12 md:px-6 md:text-center lg:p-24',
+        'to-green-1000 from-blueish-green relative rounded-3xl bg-gradient-to-br p-8 sm:py-12 md:px-6 md:text-center lg:p-24',
         props.className,
       )}
     >

packages/web/docs/src/app/pricing/page.tsx

@@ -22,13 +22,12 @@ export default function PricingPage() {
     <LandingPageContainer className="text-green-1000 light mx-auto max-w-[90rem] overflow-hidden">
       <PricingPageHero className="mx-4 max-sm:mt-2 md:mx-6" />
 
-      <Pricing className="mt-4" />
+      <Pricing className="mx-4 md:mx-6" />
 
       <PlanComparison className="mx-4 md:mx-6" />
 
       <CompanyTestimonialsSection className="mx-4 mt-6 md:mx-6" />
 
-      {/* TODO: Pricing specific questions in the future? */}
       <FrequentlyAskedQuestions className="mx-4 md:mx-6" />
 
       <GetYourAPIGameRightSection className="mx-4 sm:mb-6 md:mx-6" />

packages/web/docs/src/components/check-icon.tsx

@@ -1,6 +1,6 @@
 export function CheckIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
-    <svg width="20" height="20" fill="none" {...props}>
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
       <path
         d="M16.667 5 7.5 14.167 3.333 10"
         stroke="currentColor"

packages/web/docs/src/components/code-icon-green.svg renamed to packages/web/docs/src/components/code-icon-white.svg

@@ -5,7 +5,9 @@ import { Anchor, cn, Heading } from '@theguild/components';
 import { AttachPageFAQSchema } from '../../lib';
 import FederationQuestions from './federation-questions.mdx';
 import HomeQuestions from './home-questions.mdx';
+import { OpenAccordionItemWhenLinkedTo } from './open-accordion-item-when-linked-to';
 import PartnersQuestions from './partners-questions.mdx';
+import { questionToId } from './question-to-id';
 
 const a = (props: ComponentPropsWithoutRef<'a'>) => (
   <Anchor
@@ -24,9 +26,12 @@ const h2 = (props: ComponentPropsWithoutRef<'h2'>) => (
 const UnwrapChild = (props: { children?: ReactNode }) => props.children as unknown as ReactElement;
 
 const Accordion = (props: ComponentPropsWithoutRef<'ul'>) => (
-  <RadixAccordion.Root asChild type="single" collapsible>
-    <ul className="divide-beige-400 basis-1/2 divide-y max-xl:grow" {...props} />
-  </RadixAccordion.Root>
+  <>
+    <RadixAccordion.Root asChild type="single" collapsible>
+      <ul className="divide-beige-400 basis-1/2 divide-y max-xl:grow" {...props} />
+    </RadixAccordion.Root>
+    <OpenAccordionItemWhenLinkedTo />
+  </>
 );
 
 const AccordionItem = (props: ComponentPropsWithoutRef<'li'>) => {
@@ -60,6 +65,7 @@ const AccordionItem = (props: ComponentPropsWithoutRef<'li'>) => {
       itemScope
       itemProp="mainEntity"
       itemType="https://schema.org/Question"
+      id={questionToId(question)}
     >
       <li>
         <RadixAccordion.Header>

packages/web/docs/src/components/frequently-asked-questions/index.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useEffect, useLayoutEffect, useSyncExternalStore } from 'react';
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+export function OpenAccordionItemWhenLinkedTo() {
+  const hash = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+
+  useIsomorphicLayoutEffect(() => {
+    console.log('hash', hash);
+    if (hash) {
+      const button = document.querySelector<HTMLButtonElement>(
+        `#${hash} button[aria-expanded="false"]`,
+      );
+      if (button) {
+        button.click();
+        // in the case where user scrolls up and clicks the same link again,
+        // we couldn't rely on hash change, so we just consume it here
+        window.history.replaceState({}, '', window.location.pathname);
+      }
+    }
+  }, [hash]);
+
+  return null;
+}
+
+const subscribe = (onStoreChange: () => void) => {
+  const handler = () => {
+    onStoreChange();
+  };
+
+  window.addEventListener('hashchange', handler);
+  return () => void window.removeEventListener('hashchange', handler);
+};
+
+const getSnapshot = () => {
+  const hash = window.location.hash;
+  if (hash.startsWith('#faq')) {
+    return hash.slice(1);
+  }
+  return undefined;
+};
+
+const getServerSnapshot = () => {
+  return undefined;
+};

packages/web/docs/src/components/frequently-asked-questions/open-accordion-item-when-linked-to.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+export function questionToId(question: string | ReactNode) {
+  return typeof question === 'string'
+    ? `faq--${question.slice(0, -1).replace(/ /g, '-').toLowerCase()}`
+    : undefined;
+}