New pricing landing page (#1621)

* First section * Add table * Add FAQ * Mobile table * Fix desktop table * Add secondary buttons * Last touches * Copy * Add og image * Add monthly * Addressed comments * Update SEO metadata * Monthly -> Month * 5000 -> 2000 * Remove tw logo * Latest changes
thirdweb-dev · Sep 6, 2023 · 4589391 · 4589391
1 parent ffbafd3
commit 4589391
Show file tree

Hide file tree

Showing 7 changed files with 796 additions and 1 deletion.
diff --git a/components/footer/footerLinks.tsx b/components/footer/footerLinks.tsx
@@ -41,6 +41,11 @@ export const COMMUNITY: FooterLinkInfo[] = [
 ];
 
 export const RESOURCES: FooterLinkInfo[] = [
+  {
+    label: "pricing",
+    name: "Pricing",
+    link: "/pricing",
+  },
   {
     label: "about",
     name: "About",

diff --git a/components/landing-pages/faq.tsx b/components/landing-pages/faq.tsx
@@ -0,0 +1,71 @@
+import {
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionIcon,
+  AccordionPanel,
+  Flex,
+  Box,
+} from "@chakra-ui/react";
+import { useTrack } from "hooks/analytics/useTrack";
+import { Heading, Text } from "tw-components";
+
+interface LandingFAQProps {
+  TRACKING_CATEGORY: string;
+  title: string;
+  faqs: {
+    title: string;
+    description: React.ReactNode;
+  }[];
+}
+
+export const LandingFAQ: React.FC<LandingFAQProps> = ({
+  TRACKING_CATEGORY,
+  title = "FAQ",
+  faqs,
+}) => {
+  const trackEvent = useTrack();
+  const trackToggleFAQ = (faqTitle: string) => {
+    trackEvent({
+      category: TRACKING_CATEGORY,
+      action: "toggle",
+      label: "faq",
+      faqTitle,
+    });
+  };
+
+  return (
+    <Flex
+      mt={12}
+      flexDirection="column"
+      w="full"
+      maxW={{
+        base: "100%",
+        lg: "container.md",
+      }}
+    >
+      <Heading size="title.md" alignSelf="center">
+        {title}
+      </Heading>
+      <Accordion mt={8} allowMultiple rounded="xl">
+        {faqs.map((faq) => (
+          <AccordionItem key={faq.title}>
+            <Text fontSize="1rem">
+              <AccordionButton p={6} onClick={() => trackToggleFAQ(faq.title)}>
+                <Box as="span" flex="1" textAlign="left">
+                  {faq.title}
+                </Box>
+                <AccordionIcon />
+              </AccordionButton>
+            </Text>
+            <AccordionPanel pb={4}>
+              <Flex direction="column" gap={4}>
+                {faq.description}
+              </Flex>
+            </AccordionPanel>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </Flex>
+  );
+};
diff --git a/components/product-pages/common/nav/DesktopMenu.tsx b/components/product-pages/common/nav/DesktopMenu.tsx
@@ -22,7 +22,21 @@ export const DesktopMenu: React.FC = () => {
       >
         <ProductHoverMenu title="Products" items={PRODUCTS} />
         <HoverMenu title="Solutions" items={SOLUTIONS} />
-        <HoverMenu title="Resources" items={RESOURCES} />
+        <HoverMenu
+          title="Resources"
+          items={RESOURCES.filter(({ label }) => label !== "pricing")}
+        />
+        <TrackedLink
+          fontWeight={400}
+          href="/pricing"
+          category="landing-page"
+          label="pricing"
+          _hover={{
+            textDecor: "none",
+          }}
+        >
+          Pricing
+        </TrackedLink>
         <TrackedLink
           fontWeight={400}
           isExternal
@@ -207,6 +221,14 @@ export const SOLUTIONS: NavCardProps[] = [
 ];
 
 export const RESOURCES: NavCardProps[] = [
+  {
+    name: "Pricing",
+    label: "pricing",
+    description: "Simple, transparent & flexible pricing",
+    link: "/pricing",
+    icon: require("public/assets/tw-icons/access-nft.png"),
+    section: "resources",
+  },
   {
     name: "About",
     label: "about",

diff --git a/page-id.ts b/page-id.ts
@@ -28,6 +28,9 @@ export enum PageId {
   // thirdweb.com/auth
   AuthenticationLanding = "auth-landing",
 
+  // thirdweb..com/pricing
+  Pricing = "pricing-page",
+
   // thirdweb.com/cli/login
   CliLoginPage = "cli-login-page",