good to go

Author: avb-is-me

src/pages/pricing/index.jsx

@@ -4,6 +4,23 @@ import LandingPageFooter from '../../components/landing-page-components/sections
 import { MobileContextProvider, useIsMobile } from '../../components/landing-page-components/context-providers/mobile-context-provider';
 import LandingPageHeader from '../../components/landing-page-components/sections/landing-page-header';
 import LandingPageFaqCard from '../../components/landing-page-components/sections/landing-page-faq';
+import LandingPageCard from '../../components/landing-page-components/parts/landing-page-card';
+import LandingPageFeatureCard from '../../components/landing-page-components/parts/landing-page-feature-card.jsx';
+
+
+const FEATURES = [
+  {
+    iconSrc: "/landing-page/docs-icon.png",
+    title: "Markdown docs by default",
+    description: "We believe developer content should live as code, aka markdown. Your content lives right next to your codebase or in a documentation framework.",
+  },
+  {
+    iconSrc: "/landing-page/update-icon.png",
+    title: "Real-time updates",
+    description: "Syncs with your CI/CD pipeline to keep everything up-to-date as you ship new code. Your docs stay great -- and acurate -- as you build your product.",
+  }
+];
+
 
 const PricingPage = () => {
   const isMobile = useIsMobile();
@@ -19,9 +36,30 @@ const PricingPage = () => {
       >
         <LandingPageHeader />
 
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit
-        </div>
+        <div
+        className={isMobile ?
+          "mt-[3rem] flex flex-col flex-wrap gap-[1.25rem] justify-center items-center w-full"
+          :
+          "mt-[3rem] flex flex-col flex-wrap gap-x-[1rem] gap-y-[5rem] justify-center items-center"
+        }
+      >
+        {FEATURES.map((feature, idx) => (
+          <div
+            key={`landing-page-features-card-feature-card-${idx}`}
+            className={isMobile ?
+              "flex flex-row justify-center"
+              :
+              "flex flex-row justify-center h-[23rem]"
+            }
+          >
+            <LandingPageFeatureCard
+              iconSrc={feature.iconSrc}
+              title={feature.title}
+              description={feature.description}
+            />
+          </div>
+        ))}
+      </div>
 
         <LandingPageFaqCard />
         <LandingPageFooter />