docs: Fixed pricing page colors (#1901)

* Fixed colors on pricing page

* Fixed home page link

Author: matthewlipski

docs/app/(home)/faq/FAQ.tsx

@@ -59,7 +59,7 @@ export function FAQ() {
               <dt className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
                 {faq.question}
               </dt>
-              <dd className="mt-2 text-base leading-7 text-gray-600 dark:text-gray-300">
+              <dd className="prose mt-2 text-base leading-7 text-gray-600 dark:text-gray-300">
                 {faq.answer}
               </dd>
             </div>

docs/app/pricing/layout.tsx

@@ -5,9 +5,9 @@ import { Footer } from "@/components/Footer";
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <HomeLayout {...baseOptions}>
-      {children}
+    <>
+      <HomeLayout {...baseOptions}>{children}</HomeLayout>
       <Footer />
-    </HomeLayout>
+    </>
   );
 }

docs/app/pricing/tiers.tsx

@@ -33,7 +33,7 @@ function TierTitle({ tier }: { tier: Tier }) {
 
 function TierPrice({ tier, frequency }: { tier: Tier; frequency: Frequency }) {
   return (
-    <p className="text-md font-semibold text-[#00000080] dark:text-[#FFFFFFB2]">
+    <p className="text-md text-fd-muted-foreground font-semibold">
       {typeof tier.price === "string"
         ? tier.price
         : `$${tier.price[frequency]} / ${frequency}`}
@@ -92,7 +92,7 @@ function TierCTAButton({ tier }: { tier: Tier }) {
       aria-describedby={tier.id}
       className={classNames(
         tier.mostPopular
-          ? "text-fd-foreground bg-indigo-600 shadow-sm hover:bg-indigo-500"
+          ? "text-fd-background dark:text-fd-foreground bg-indigo-600 shadow-sm hover:bg-indigo-500"
           : "text-indigo-600 ring-1 ring-inset ring-indigo-600 hover:text-indigo-500 hover:ring-indigo-500",
         "mt-8 block cursor-pointer rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600",
       )}
@@ -104,7 +104,7 @@ function TierCTAButton({ tier }: { tier: Tier }) {
 
 function TierFeature({ feature }: { feature: React.ReactNode }) {
   return (
-    <li className="flex gap-x-3">
+    <li className="prose flex gap-x-3 text-sm">
       <CheckIcon
         aria-hidden="true"
         className="h-6 w-5 flex-none text-indigo-600"