feat: Pricing card2 component added

app/docs/navigation.ts

@@ -29,7 +29,13 @@ export const NAVIGATION: NavigationGroup[] = [
     children: [
       { name: 'Timeline Rail', href: '/docs/timeline-rail', isNew: true },
       { name: 'Testimonial', href: '/docs/testimonial', isUpdated: true },
+    ],
+  },
+  {
+    name: 'Pricing Card',
+    children: [
       { name: 'Pricing Card One', href: '/docs/pricing-card-one', isNew: true },
+      { name: 'Pricing Card Two', href: '/docs/pricing-card-two', isNew: true },
     ],
   },
   {

app/docs/pricing-card-two/page.mdx

@@ -0,0 +1,55 @@
+export const metadata = {
+  title: 'Pricing Card Two – Shadcn-Extras',
+  description:
+    'Outlined pricing card with colored frame, icon, price and feature list (✓/✕). Simple, accessible, and themable.',
+};
+
+import ComponentCodePreview from '@/components/website/component-code-preview';
+import { Pc2Basic } from './pc2-basic';
+
+# Pricing Card Two
+
+Matches the “3 cards with colored borders” layout. Pass your own icon, data, and tone.
+
+## Example
+
+<ComponentCodePreview
+  component={<Pc2Basic />}
+  filePath='app/docs/pricing-card-two/pc2-basic.tsx'
+/>
+
+## Installation
+
+<Tabs defaultValue="cli">
+  <TabsList>
+    <TabsTrigger value="cli">CLI</TabsTrigger>
+    <TabsTrigger value="manual">Manual</TabsTrigger>
+  </TabsList>
+
+<TabsContent value='cli'>
+  <InstallationCli value='pricing-card-two' />
+</TabsContent>
+
+  <TabsContent value="manual">
+    <Steps className="steps space-y-6">
+      <Step>Copy the component into <code>components/core/pricing-card-two.tsx</code>.</Step>
+      <CodeBlock filePath="components/core/pricing-card-two.tsx" />
+      <Step>Use it with your data (icon, price, features, CTA).</Step>
+    </Steps>
+  </TabsContent>
+</Tabs>
+
+## Props
+
+| Prop          | Type                                                 | Default                | Description                                      |
+| ------------- | ---------------------------------------------------- | ---------------------- | ------------------------------------------------ |
+| `icon`        | `ReactNode`                                          | —                      | Large top icon.                                  |
+| `name`        | `string`                                             | —                      | Plan name.                                       |
+| `subtitle`    | `string`                                             | `'the starter choise'` | Small helper text.                               |
+| `price`       | `number \| string`                                   | —                      | Price (number uses `currency`).                  |
+| `currency`    | `string`                                             | `'$'`                  | Currency prefix when `price` is a number.        |
+| `periodLabel` | `string`                                             | `'/month'`             | Next to price.                                   |
+| `features`    | `{ label: ReactNode; included?: boolean }[]`         | `[]`                   | List of features; `included` defaults to `true`. |
+| `cta`         | `href` or `onClick` + `label?`                       | —                      | Call-to-action (link or button).                 |
+| `tone`        | `'pink' \| 'blue' \| 'amber' \| 'emerald' \| 'zinc'` | `'blue'`               | Accent color.                                    |
+| `*ClassName`  | `string`                                             | —                      | Slot class overrides.                            |

app/docs/pricing-card-two/pc2-basic.tsx

@@ -0,0 +1,68 @@
+import PricingCardTwo from '@/components/core/pricing-card-two';
+import { User, Users, Briefcase } from 'lucide-react';
+
+export function Pc2Basic() {
+  return (
+    <div className='mx-auto grid max-w-6xl gap-8 md:grid-cols-3'>
+      <PricingCardTwo
+        tone='pink'
+        icon={<User />}
+        name='Personal'
+        subtitle='the starter choise'
+        price={5}
+        periodLabel='/month'
+        features={[
+          { label: 'Lorem ipsum' },
+          { label: 'Lorem set' },
+          { label: 'Lorem ipsum dolor.' },
+          {
+            label: 'Lorem ipsum dolor sit amet, consectetur.',
+            included: false,
+          },
+          { label: 'Only lorem', included: false },
+          { label: 'Lorem ipsum dolor.', included: false },
+          { label: 'Lorem ipsum.', included: false },
+        ]}
+        cta={{ href: '#', label: 'Choose Plan' }}
+      />
+
+      <PricingCardTwo
+        tone='blue'
+        icon={<Users />}
+        name='Team'
+        subtitle='the starter choise'
+        price={15}
+        periodLabel='/month'
+        features={[
+          { label: 'Lorem ipsum' },
+          { label: 'Lorem set' },
+          { label: 'Lorem ipsum dolor.' },
+          { label: 'Lorem ipsum dolor sit amet, consectetur.' },
+          { label: 'Only lorem' },
+          { label: 'Lorem ipsum dolor.', included: false },
+          { label: 'Lorem ipsum.', included: false },
+        ]}
+        cta={{ href: '#', label: 'Choose Plan' }}
+      />
+
+      <PricingCardTwo
+        tone='amber'
+        icon={<Briefcase />}
+        name='Business'
+        subtitle='the starter choise'
+        price={25}
+        periodLabel='/month'
+        features={[
+          { label: 'Lorem ipsum' },
+          { label: 'Lorem set' },
+          { label: 'Lorem ipsum dolor.' },
+          { label: 'Lorem ipsum dolor sit amet, consectetur.' },
+          { label: 'Only lorem' },
+          { label: 'Lorem ipsum dolor.' },
+          { label: 'Lorem ipsum.' },
+        ]}
+        cta={{ href: '#', label: 'Choose Plan' }}
+      />
+    </div>
+  );
+}

commitlint.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+};