feat: add free tier pricing card

src/app/(app)/pricing/page.tsx

@@ -11,6 +11,23 @@ export default function Page() {
     setIsYearly(parseInt(value) === 1);
 
   const plans = [
+    {
+      title: "Free",
+      monthlyPrice: 0,
+      yearlyPrice: 0,
+      description: "Essential features you need to get started",
+      features: [
+        "Access to a selection of introductory courses",
+        "Limited content library",
+        "Basic skill assessments",
+        "Community support",
+      ],
+      idealFor: [
+        "Beginners looking to dip their toes into upskilling",
+        "Those on a tight budget who want to explore our platform before committing",
+      ],
+      actionLabel: "Get Started",
+    },
     {
       title: "Basic",
       monthlyPrice: 10,
@@ -23,6 +40,10 @@ export default function Page() {
         "Community forums for networking and support",
         "Certificate of completion for each course",
       ],
+      idealFor: [
+        "Individuals committed to continuous learning and professional growth",
+        "Those seeking a comprehensive upskilling solution at an affordable price",
+      ],
       actionLabel: "Get Started",
     },
     {
@@ -37,6 +58,11 @@ export default function Page() {
         "Priority customer support",
         "Premium resources such as e-books and industry reports",
       ],
+      idealFor: [
+        "Experienced developers aiming to specialize in specific areas",
+        "Professionals seeking personalized guidance to advance their careers",
+        "Individuals looking for premium upskilling resources and support",
+      ],
       actionLabel: "Get Started",
       popular: true,
     },
@@ -51,6 +77,11 @@ export default function Page() {
         "Team analytics and progress tracking",
         "On-site workshops and training sessions (optional)",
       ],
+      idealFor: [
+        "Companies looking to invest in the continuous growth and development of their engineering teams",
+        "HR departments seeking scalable upskilling solutions for their workforce",
+        "Organizations with specific training needs and goals",
+      ],
       actionLabel: "Contact Sales",
       exclusive: true,
     },
@@ -62,7 +93,7 @@ export default function Page() {
         subtitle="At Skilld, we empower software engineers with top-notch upskilling resources tailored to their career goals. Explore our pricing plans below and take the next step towards mastering your craft."
       />
       <PricingSwitch onSwitch={togglePricingPeriod} />
-      <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 justify-center gap-8 mt-8">
+      <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3  xl:grid-cols-4 justify-center gap-6 mt-8">
         {plans.map((plan) => {
           return <PricingCard key={plan.title} {...plan} isYearly={isYearly} />;
         })}

src/components/pricing/check-item.tsx

@@ -2,7 +2,7 @@ import { CheckCircle2 } from "lucide-react"
 
 const CheckItem = ({ text }: { text: string }) => (
     <div className="flex gap-2">
-      <CheckCircle2 size={18} className="my-auto text-green-400" />
+      <CheckCircle2 className="my-auto text-green-400 size-4 shrink-0 " />
       <p className="pt-0.5 text-zinc-700 dark:text-zinc-300 text-sm">{text}</p>
     </div>
   )

src/components/pricing/pricing-card.tsx

@@ -9,6 +9,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import CheckItem from "./check-item";
+import { ArrowRight } from "lucide-react";
 
 type PricingCardProps = {
   isYearly?: boolean;
@@ -20,6 +21,7 @@ type PricingCardProps = {
   actionLabel: string;
   popular?: boolean;
   exclusive?: boolean;
+  idealFor: string[];
 };
 
 const PricingCard = ({
@@ -32,12 +34,13 @@ const PricingCard = ({
   actionLabel,
   popular,
   exclusive,
+  idealFor,
 }: PricingCardProps) => (
   <Card
     className={cn(
-      `w-72 flex flex-col justify-between py-1 ${
+      `max-w-80 flex flex-col justify-between py-1 ${
         popular ? "border border-primary" : "border"
-      } mx-auto sm:mx-0`,
+      } mx-auto`,
       {
         "animate-background-shine bg-white dark:bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] transition-colors":
           exclusive,
@@ -74,10 +77,20 @@ const PricingCard = ({
               ? "$" + yearlyPrice
               : monthlyPrice
               ? "$" + monthlyPrice
+              : title === "Free"
+              ? "$" + monthlyPrice
               : "Custom"}
           </h3>
           <span className="flex flex-col justify-end text-sm mb-1">
-            {yearlyPrice && isYearly ? "/year" : monthlyPrice ? "/month" : null}
+            {yearlyPrice && isYearly
+              ? "/year"
+              : isYearly && title === "Free"
+              ? "/year"
+              : monthlyPrice
+              ? "/month"
+              : title === "Free"
+              ? "/month"
+              : null}
           </span>
         </div>
         <CardDescription className="pt-1.5 h-12">{description}</CardDescription>
@@ -86,6 +99,16 @@ const PricingCard = ({
         {features.map((feature: string) => (
           <CheckItem key={feature} text={feature} />
         ))}
+        <p className="font-semibold mt-4">Ideal For:</p>
+
+        {idealFor.map((item) => (
+          <div key={item} className="flex gap-2">
+            <ArrowRight className="my-auto text-green-400 size-4 shrink-0 " />
+            <p className="pt-0.5 text-zinc-700 dark:text-zinc-300 text-sm">
+              {item}
+            </p>
+          </div>
+        ))}
       </CardContent>
     </div>
     <CardFooter className="mt-2">