From c0adc7fd630738c77ecb1334776726e36a08b8d4 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 30 Jan 2026 20:27:50 +0100
Subject: [PATCH] chore: update @ciphera-net/ui dependency to version 0.0.37 in
 package.json and package-lock.json; add showPricing prop to LayoutContent and
 Footer components

---
 app/layout-content.tsx        |   2 +
 app/pricing/page.tsx          |   9 ++
 components/PricingSection.tsx | 182 ++++++++++++++++++++++++++++++++++
 package-lock.json             |   8 +-
 package.json                  |   2 +-
 5 files changed, 198 insertions(+), 5 deletions(-)
 create mode 100644 app/pricing/page.tsx
 create mode 100644 components/PricingSection.tsx

diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index da822fe..d26bb88 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -51,6 +51,7 @@ export default function LayoutContent({ children }: { children: React.ReactNode
         allowPersonalWorkspace={false}
         showFaq={false}
         showSecurity={false}
+        showPricing={true}
       />
       <main className="flex-1 pt-24 pb-8">
         {children}
@@ -58,6 +59,7 @@ export default function LayoutContent({ children }: { children: React.ReactNode
       <Footer 
         LinkComponent={Link}
         appName="Pulse"
+        showPricing={true}
       />
     </>
   )
diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx
new file mode 100644
index 0000000..d7ce1c2
--- /dev/null
+++ b/app/pricing/page.tsx
@@ -0,0 +1,9 @@
+import PricingSection from '@/components/PricingSection'
+
+export default function PricingPage() {
+  return (
+    <div className="min-h-screen pt-20">
+      <PricingSection />
+    </div>
+  )
+}
diff --git a/components/PricingSection.tsx b/components/PricingSection.tsx
new file mode 100644
index 0000000..fb7570e
--- /dev/null
+++ b/components/PricingSection.tsx
@@ -0,0 +1,182 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, CheckCircleIcon } from '@ciphera-net/ui'
+
+// Pricing Tiers Configuration
+const TIERS = [
+  {
+    name: 'Starter',
+    description: 'For personal sites and startups',
+    basePrice: 9, // Base price for lowest tier
+    features: [
+      '1 site',
+      '1 year data retention',
+      'Email reports',
+      '100% Data ownership'
+    ]
+  },
+  {
+    name: 'Growth',
+    description: 'For growing businesses',
+    basePrice: 19,
+    features: [
+      'Up to 3 sites',
+      '3 years data retention',
+      'Team dashboard',
+      'Shared links'
+    ]
+  },
+  {
+    name: 'Business',
+    description: 'For large organizations',
+    basePrice: 49,
+    features: [
+      'Up to 10 sites',
+      'Unlimited data retention',
+      'Priority support',
+      'Custom events'
+    ]
+  }
+]
+
+// Slider Steps (Pageviews)
+const TRAFFIC_TIERS = [
+  { label: '10k', value: 10000, multiplier: 1 },
+  { label: '100k', value: 100000, multiplier: 2 },
+  { label: '500k', value: 500000, multiplier: 5 },
+  { label: '1M', value: 1000000, multiplier: 8 },
+  { label: '10M+', value: 10000000, multiplier: 15 },
+]
+
+export default function PricingSection() {
+  const [isYearly, setIsYearly] = useState(false)
+  const [sliderIndex, setSliderIndex] = useState(2) // Default to middle tier (500k)
+
+  const currentTraffic = TRAFFIC_TIERS[sliderIndex]
+
+  const calculatePrice = (basePrice: number, multiplier: number) => {
+    let price = basePrice * multiplier
+    if (isYearly) {
+      price = price * 0.8 // 20% discount (approx 2 months free)
+    }
+    return Math.round(price)
+  }
+
+  return (
+    <section className="py-24 px-4 max-w-7xl mx-auto">
+      <div className="text-center mb-16">
+        <h2 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white mb-6">
+          Traffic based plans that match your growth
+        </h2>
+        <p className="text-xl text-neutral-600 dark:text-neutral-400">
+          Sign up for 30-day free trial. No credit card required.
+        </p>
+      </div>
+
+      {/* Controls Container */}
+      <div className="max-w-3xl mx-auto mb-20 bg-neutral-100 dark:bg-neutral-800/50 rounded-2xl p-8 border border-neutral-200 dark:border-neutral-800">
+        
+        {/* Slider */}
+        <div className="mb-12">
+          <div className="flex justify-between text-sm font-medium text-neutral-500 mb-4">
+            <span>10k</span>
+            <span className="text-brand-orange font-bold text-lg">
+              Up to {currentTraffic.label} monthly pageviews
+            </span>
+            <span>10M+</span>
+          </div>
+          <input
+            type="range"
+            min="0"
+            max={TRAFFIC_TIERS.length - 1}
+            step="1"
+            value={sliderIndex}
+            onChange={(e) => setSliderIndex(parseInt(e.target.value))}
+            className="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-neutral-700 accent-brand-orange"
+          />
+        </div>
+
+        {/* Toggle */}
+        <div className="flex justify-center items-center gap-4">
+          <span className={!isYearly ? 'text-neutral-900 dark:text-white font-medium' : 'text-neutral-500'}>Monthly</span>
+          <button
+            onClick={() => setIsYearly(!isYearly)}
+            className="relative w-14 h-8 bg-neutral-200 dark:bg-neutral-700 rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
+          >
+            <div
+              className={`absolute top-1 left-1 w-6 h-6 bg-white rounded-full shadow-sm transition-transform duration-200 ${
+                isYearly ? 'translate-x-6 bg-brand-orange' : 'translate-x-0'
+              }`}
+            />
+          </button>
+          <span className={isYearly ? 'text-neutral-900 dark:text-white font-medium' : 'text-neutral-500'}>
+            Yearly <span className="text-xs text-brand-orange bg-brand-orange/10 px-2 py-0.5 rounded-full ml-1">2 months free</span>
+          </span>
+        </div>
+      </div>
+
+      {/* Pricing Cards Grid */}
+      <div className="grid md:grid-cols-4 gap-6">
+        {TIERS.map((tier) => (
+          <div key={tier.name} className="card-glass p-8 flex flex-col relative overflow-hidden">
+            <div className="mb-8">
+              <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-2">{tier.name}</h3>
+              <div className="flex items-baseline gap-1">
+                <span className="text-4xl font-bold text-neutral-900 dark:text-white">
+                  €{calculatePrice(tier.basePrice, currentTraffic.multiplier)}
+                </span>
+                <span className="text-neutral-500">/{isYearly ? 'mo' : 'month'}</span>
+              </div>
+              {isYearly && (
+                <p className="text-xs text-brand-orange mt-2">Billed yearly</p>
+              )}
+            </div>
+
+            <Button className="w-full mb-8 bg-brand-orange hover:bg-brand-orange/90 text-white">
+              Start free trial
+            </Button>
+
+            <ul className="space-y-4 flex-grow">
+              {tier.features.map((feature) => (
+                <li key={feature} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
+                  <CheckCircleIcon className="w-5 h-5 text-brand-orange shrink-0" />
+                  <span>{feature}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+
+        {/* Enterprise Card (Dark Style) */}
+        <div className="p-8 rounded-2xl bg-neutral-900 text-white border border-neutral-800 flex flex-col shadow-2xl">
+          <div className="mb-8">
+            <h3 className="text-lg font-medium text-white mb-2">Enterprise</h3>
+            <div className="text-4xl font-bold text-white">Custom</div>
+            <p className="text-neutral-400 mt-2 text-sm">For high volume sites</p>
+          </div>
+
+          <Button variant="secondary" className="w-full mb-8 bg-white text-neutral-900 hover:bg-neutral-100">
+            Contact us
+          </Button>
+
+          <ul className="space-y-4">
+            {[
+              'Everything in Business',
+              '10+ sites',
+              'Unlimited team members',
+              'SLA & Priority Support',
+              'Managed Proxy',
+              'Raw data export'
+            ].map((feature) => (
+              <li key={feature} className="flex items-start gap-3 text-sm text-neutral-300">
+                <CheckCircleIcon className="w-5 h-5 text-white shrink-0" />
+                <span>{feature}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/package-lock.json b/package-lock.json
index 1878d61..cc3302d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.1.0",
       "dependencies": {
-        "@ciphera-net/ui": "^0.0.36",
+        "@ciphera-net/ui": "^0.0.37",
         "axios": "^1.13.2",
         "country-flag-icons": "^1.6.4",
         "d3-scale": "^4.0.2",
@@ -269,9 +269,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.0.36",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.36/85a14ec1af822cc96707e88e22c2dbb5019459a1",
-      "integrity": "sha512-kUvm27uE5hJboLmsrt0KusLAIvLfqk/I6M/7P2ihIURVt9kVbZaAA7b+rKMVzCsexrCIFN7PdgjIKi6cS6723Q==",
+      "version": "0.0.37",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.37/b77e51ee8faddab0d75e9f114e7a055bb3f2e5c8",
+      "integrity": "sha512-8/EpoGUcbhdPtkuGQB1fIECP60LnSwPq/4EWWTyxNN/I9Ghp+2ajDVgWG+oYvMfl7XwqHoE1ccldZtAlBq4aEg==",
       "dependencies": {
         "@radix-ui/react-icons": "^1.3.0",
         "clsx": "^2.1.0",
diff --git a/package.json b/package.json
index b861bf8..28c24e1 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.0.36",
+    "@ciphera-net/ui": "^0.0.37",
     "axios": "^1.13.2",
     "country-flag-icons": "^1.6.4",
     "d3-scale": "^4.0.2",