From d1f6877ee7109ef4539f514979a3f2a2f64e5a02 Mon Sep 17 00:00:00 2001 From: Daniel K Date: Fri, 31 Jan 2025 14:17:29 -0800 Subject: [PATCH] feat: add roadmap + FAQ + Pricing to platform landing page --- ee/insiders | 2 +- .../console/components/pricing-section.tsx | 225 +++++++++++ .../console/components/pricing-toggle.tsx | 36 ++ .../console/components/roadmap-section.tsx | 242 ++++++++++++ ee/packages/console/modules/landing/index.tsx | 372 ++++++++++-------- ee/platform | 2 +- 6 files changed, 703 insertions(+), 176 deletions(-) create mode 100644 ee/packages/console/components/pricing-section.tsx create mode 100644 ee/packages/console/components/pricing-toggle.tsx create mode 100644 ee/packages/console/components/roadmap-section.tsx diff --git a/ee/insiders b/ee/insiders index 3dc5aada3..64183d83e 160000 --- a/ee/insiders +++ b/ee/insiders @@ -1 +1 @@ -Subproject commit 3dc5aada3db42821e728e91f6a96a4296897fadc +Subproject commit 64183d83ec85571ebb4889ea5bba16dbfc0f8679 diff --git a/ee/packages/console/components/pricing-section.tsx b/ee/packages/console/components/pricing-section.tsx new file mode 100644 index 000000000..5c0ed200b --- /dev/null +++ b/ee/packages/console/components/pricing-section.tsx @@ -0,0 +1,225 @@ +"use client"; + +import { Button } from "@karrio/insiders/components/ui/button"; +import { Check } from "lucide-react"; +import { useState } from "react"; + +type PricingFeature = { + text: string; + soon?: boolean; +}; + +type PricingPlan = { + name: string; + description: string; + price: string | "Contact us"; + priceDetail?: string; + popular?: boolean; + features: PricingFeature[]; + button: { + text: string; + variant?: "default" | "outline"; + }; +}; + +const PRICING_PLANS: Record = { + insiders: { + cloud: { + name: "Insiders", + description: "Advanced features included. Dedicated support team. Scale your operations.", + price: "$299", + priceDetail: "/month", + popular: true, + button: { + text: "Join Waitlist", + }, + features: [ + { text: "10,000 labels/trackers a month" }, + { text: "$0.04 overage beyond" }, + { text: "Multi-tenant & User management" }, + { text: "Email & Slack support" }, + { text: "Customizable dashboard", soon: true }, + { text: "Platform Admin dashboard" }, + { text: "Platform APIs" }, + ], + }, + selfHosted: { + name: "Insiders", + description: "Advanced features included. Dedicated support team. Scale your operations.", + price: "$299", + priceDetail: "/month", + popular: true, + button: { + text: "Join Now", + }, + features: [ + { text: "Unlimited labels/trackers a month" }, + { text: "No overages" }, + { text: "Multi-tenant & User management" }, + { text: "Email & Slack support" }, + { text: "Customizable dashboard", soon: true }, + { text: "Platform Admin dashboard" }, + { text: "Platform APIs" }, + ], + }, + }, + scale: { + cloud: { + name: "Scale", + description: "High-volume enterprise features. Premium support included. Enterprise-grade security.", + price: "$2,499", + priceDetail: "/month", + button: { + text: "Get Started", + variant: "outline", + }, + features: [ + { text: "100,000 labels/trackers a month" }, + { text: "$0.02 overage beyond" }, + { text: "One-on-one developer calls" }, + { text: "Up to 5 new carrier integrations/month" }, + { text: "Expedited features and integrations" }, + { text: "SLA (99.999% uptime)" }, + { text: "Compliance Check SOC2, HIPAA", soon: true }, + ], + }, + selfHosted: { + name: "Scale", + description: "High-volume enterprise features. Premium support included. Enterprise-grade security.", + price: "$2,499", + priceDetail: "/month", + button: { + text: "Get Started", + variant: "outline", + }, + features: [ + { text: "Unlimited labels/trackers a month" }, + { text: "No overages" }, + { text: "One-on-one developer calls" }, + { text: "Up to 5 new carrier integrations/month" }, + { text: "Expedited features and integrations" }, + { text: "SLA (99.999% uptime)" }, + { text: "Compliance Check SOC2, HIPAA", soon: true }, + ], + }, + }, + enterprise: { + cloud: { + name: "Enterprise", + description: "Custom-tailored solution. Unlimited shipping volume. Dedicated enterprise support.", + price: "Contact us", + button: { + text: "Contact Sales", + variant: "outline", + }, + features: [ + { text: "Unlimited labels/trackers a month" }, + { text: "No overages" }, + { text: "One-on-one developer calls" }, + { text: "Dedicated carrier onboarding support" }, + { text: "Expedited features and integrations" }, + { text: "SLA (99.999% uptime)" }, + { text: "Volume Discount" }, + { text: "Compliance Check SOC2, HIPAA", soon: true }, + ], + }, + }, +}; + +function PricingCard({ plan, className = "" }: { plan: PricingPlan; className?: string }) { + return ( +
+ {plan.popular && ( +
+ Most Popular +
+ )} +
+

{plan.name}

+
+ {plan.price} + {plan.priceDetail && {plan.priceDetail}} +
+

{plan.description}

+ +
+
    + {plan.features.map((feature, index) => ( +
  • +
    + +
    + + {feature.text} + {feature.soon && (soon)} + +
    • + ))} +
+
+ ); +} + +export function PricingSection() { + const [deploymentType, setDeploymentType] = useState<"cloud" | "self-hosted">("cloud"); + + return ( +
+
+
+
+
+
+
Pricing
+

+ Simple, transparent pricing +

+

+ Choose the plan that best fits your business needs. All plans include access to our core features. +

+
+ +
+
+ + +
+
+ +
+ {Object.entries(PRICING_PLANS).map(([key, { cloud, selfHosted: selfHosted }]) => { + const plan = deploymentType === "cloud" ? cloud : (selfHosted ?? cloud); + return ( + + ); + })} +
+
+
+ ); +} diff --git a/ee/packages/console/components/pricing-toggle.tsx b/ee/packages/console/components/pricing-toggle.tsx new file mode 100644 index 000000000..857020e55 --- /dev/null +++ b/ee/packages/console/components/pricing-toggle.tsx @@ -0,0 +1,36 @@ +import * as React from "react"; +import { cn } from "@karrio/insiders/lib/utils"; + +interface PricingToggleProps { + value: "cloud" | "self-hosted"; + onChange: (value: "cloud" | "self-hosted") => void; +} + +export function PricingToggle({ value, onChange }: PricingToggleProps) { + return ( +
+ + +
+ ); +} diff --git a/ee/packages/console/components/roadmap-section.tsx b/ee/packages/console/components/roadmap-section.tsx new file mode 100644 index 000000000..894c46ba4 --- /dev/null +++ b/ee/packages/console/components/roadmap-section.tsx @@ -0,0 +1,242 @@ +"use client" + +import { useState } from "react"; +import { ChevronRight, Check } from "lucide-react"; + +interface RoadmapSubItem { + title: string; + status: "completed" | "in_progress" | "planned"; +} + +interface RoadmapItem { + title: string; + status: "in_progress" | "planned" | "completed"; + description: string; + items: RoadmapSubItem[]; +} + +const ROADMAP_ITEMS: RoadmapItem[] = [ + { + title: "Admin Dashboard", + status: "in_progress", + description: "Comprehensive admin tools for platform and carrier management", + items: [ + { title: "Platform API", status: "completed" }, + { title: "System Carrier Management & Rate sheets", status: "in_progress" }, + { title: "Connected Account Management", status: "in_progress" }, + { title: "Markups Management", status: "planned" }, + { title: "Docs", status: "planned" } + ] + }, + { + title: "Karrio Automation", + status: "in_progress", + description: "Advanced automation tools for shipping workflows and integrations", + items: [ + { title: "Finalize Cron Job support", status: "completed" }, + { title: "Shipping Rules API", status: "in_progress" }, + { title: "Shipping Rules Dashboard", status: "in_progress" }, + { title: "Finalize Connections Management", status: "planned" }, + { title: "Finalize Integration Presets Management", status: "planned" }, + { title: "Docs", status: "planned" } + ] + }, + { + title: "Customizable Shipper Dashboard", + status: "planned", + description: "Flexible and customizable dashboard solutions for shippers", + items: [ + { title: "Portal app template", status: "planned" }, + { title: "Reusable Elements", status: "planned" } + ] + }, + { + title: "Karrio CLI", + status: "planned", + description: "Command-line tools for developers and integrations", + items: [ + { title: "Finalize API reader", status: "planned" }, + { title: "Finalize Carrier integration cli", status: "planned" } + ] + }, + { + title: "Karrio Enterprise Features", + status: "planned", + description: "Advanced features for enterprise customers", + items: [ + { title: "SSO", status: "planned" }, + { title: "Audit Log (API + Management UI)", status: "planned" }, + { title: "Advanced Analytics", status: "planned" }, + { title: "Compliance Check", status: "planned" } + ] + }, + { + title: "Karrio Dashboard Apps", + status: "planned", + description: "Extensible app ecosystem for the Karrio platform", + items: [ + { title: "Embedded apps toolkit", status: "planned" }, + { title: "Billing reconciliation app", status: "planned" }, + { title: "Pickup management app", status: "planned" } + ] + }, + { + title: "Carrier On-boarding Dev tool", + status: "planned", + description: "AI-powered tools for carrier integration", + items: [ + { title: "AI assisted carrier integration", status: "planned" }, + { title: "Onboard Lifecycle management", status: "planned" } + ] + }, + { + title: "Carrier Dashboard Mode", + status: "planned", + description: "Advanced carrier management and customization tools", + items: [ + { title: "Generic carrier hooks", status: "planned" }, + { title: "Custom Tracking Event mapping", status: "planned" }, + { title: "Advanced Label designer", status: "planned" } + ] + } +]; + +function StatusIndicator({ status }: { status: RoadmapSubItem["status"] }) { + if (status === "completed") { + return ( +
+ +
+ ); + } + + return ( +
+
+
+ ); +} + +export function RoadmapSection() { + const [selectedItem, setSelectedItem] = useState(ROADMAP_ITEMS[0]); + + return ( +
+
+
+
+
+
+
Product Roadmap
+

+ Building the future of logistics +

+

+ Our vision for revolutionizing the shipping and logistics industry through continuous innovation and development. +

+
+ +
+
+ {ROADMAP_ITEMS.map((item) => ( +
setSelectedItem(item)} + > +
+
+

+ {item.title} +

+
+ +
+ ))} +
+ +
+ {selectedItem && ( +
+
+
+
+ {selectedItem.status === "in_progress" + ? "In Progress" + : selectedItem.status === "completed" + ? "Completed" + : "Planned"} +
+
+
+
+
+ + {selectedItem.items.filter(i => i.status === "completed").length} completed + +
+
+
+ + {selectedItem.items.filter(i => i.status === "in_progress").length} in progress + +
+
+
+ +

{selectedItem.title}

+

{selectedItem.description}

+ +
+
+

Features

+
+ {selectedItem.items.map((item, index) => ( +
+
+ +
+

{item.title}

+
+
+
+ ))} +
+
+
+
+ )} +
+
+
+
+ ); +} diff --git a/ee/packages/console/modules/landing/index.tsx b/ee/packages/console/modules/landing/index.tsx index 1518247de..d6b71277c 100644 --- a/ee/packages/console/modules/landing/index.tsx +++ b/ee/packages/console/modules/landing/index.tsx @@ -10,8 +10,9 @@ import { Globe, Layers, } from "lucide-react"; -import { CarrierNetwork } from "@karrio/console/components/features-illustrations/carrier-network"; import { FeatureShowcase } from "@karrio/console/components/feature-showcase"; +import { RoadmapSection } from "@karrio/console/components/roadmap-section"; +import { PricingSection } from "@karrio/console/components/pricing-section"; import { CodePreview } from "@karrio/console/components/code-preview"; import { FeatureTabs } from "@karrio/console/components/feature-tabs"; import { CTASection } from "@karrio/console/components/cta-section"; @@ -322,219 +323,176 @@ export default async function LandingPage() {
- {/* How It Works Section */} + {/* Use Cases Section */}
-
How it works
+
Use Cases

- Build your shipping operations with speed and flexibility + Tailored solutions for specialized shipping needs

- Offer your users a great experience from day one with fast - onboarding, accurate dashboards, and useful workflows – such as - returns, tracking notifications, and carrier management. + From marketplaces to enterprise logistics, Karrio provides a customizable platform to meet the unique requirements of different business models and industries.

- Karrio hosted shipping interface -
- ), - }, - { - label: "Embedded", - value: "embedded", - content: ( -
- Karrio embedded shipping components -
- ), - }, - { - label: "API", - value: "api", - content: ( -
-
- 
-                          {`// Create a new shipment
-const shipment = await karrio.shipments.create({
-  service: "fedex_ground",
-  shipper: {
-    company_name: "ACME Inc",
-    address_line1: "123 Shipping St",
-    postal_code: "V6M2V9",
-    city: "Vancouver",
-    country_code: "CA",
-  },
-  recipient: {
-    name: "John Doe",
-    address_line1: "456 Delivery Ave",
-    postal_code: "27401",
-    city: "Greensboro",
-    country_code: "US",
-  },
-  parcels: [{
-    weight: 1.5,
-    weight_unit: "KG",
-    width: 20,
-    height: 10,
-    length: 15,
-    dimension_unit: "CM"
-  }]
-});`}
-
+
+
+
    +
  • +
    +
    +
    + API-first platform for seamless integration +
    • +
  • +
    +
    +
    + Real-time visibility and tracking capabilities +
    • +
  • +
    +
    +
    + Automated documentation and customs compliance +
    • +
  • +
    +
    +
    + Enhanced partner collaboration tools +
    • +
+
+
+ Logistics Providers illustration
), - }, + } ]} /> - Karrio hosted dashboard -
- ), - }, - { - label: "Embedded", - value: "embedded", + label: "Overview", + value: "overview", content: ( -
- Karrio embedded dashboard components -
- ), - }, - { - label: "API", - value: "api", - content: ( -
-
- 
-                          {`// Fetch shipment details and tracking
-const shipment = await karrio.shipments.retrieve('shp_123');
-const tracking = await karrio.tracking.get(shipment.tracking_number);
-
-console.log(tracking.status); // "in_transit"
-console.log(tracking.estimated_delivery); // "2024-01-28"
-console.log(tracking.events); // Array of tracking events`}
-
+
+
+
    +
  • +
    +
    +
    + Multi-carrier rate shopping and automated carrier selection +
    • +
  • +
    +
    +
    + Automated label generation and tracking updates +
    • +
  • +
    +
    +
    + Seamless integration with major e-commerce platforms +
    • +
  • +
    +
    +
    + Advanced analytics and reporting for merchant insights +
    • +
+
+
+ Marketplace & OMS illustration
), - }, + } ]} /> - Karrio hosted carrier account management -
- ), - }, - { - label: "Embedded", - value: "embedded", + label: "Overview", + value: "overview", content: ( -
- Karrio embedded carrier account components -
- ), - }, - { - label: "API", - value: "api", - content: ( -
-
- 
-                          {`// Add a new carrier account
-const carrierAccount = await karrio.carrierAccounts.create({
-  carrier: "fedex",
-  account_number: "123456789",
-  account_country: "US",
-  test_mode: false,
-  active: true,
-  credentials: {
-    user_key: "YOUR_FEDEX_USER_KEY",
-    password: "YOUR_FEDEX_PASSWORD",
-    meter_number: "YOUR_FEDEX_METER_NUMBER",
-    account_number: "YOUR_FEDEX_ACCOUNT_NUMBER"
-  }
-});
-
-console.log(carrierAccount.id); // "ca_123456789"
-console.log(carrierAccount.status); // "active"`}
-
+
+
+
    +
  • +
    +
    +
    + Advanced security features and compliance controls +
    • +
  • +
    +
    +
    + Specialized handling for sensitive shipments +
    • +
  • +
    +
    +
    + Custom workflows and approval processes +
    • +
  • +
    +
    +
    + Dedicated support and SLA guarantees +
    • +
+
+
+ Enterprise Solutions illustration
), - }, + } ]} />
@@ -714,6 +672,72 @@ shipment = karrio.shipments.create(
+ {/* Roadmap Section */} + + + {/* Pricing Section */} + + + {/* FAQ Section */} +
+
+
+
+
+
+
FAQ
+

+ Frequently Asked Questions +

+

+ Everything you need to know about Karrio and our services. +

+
+
+
+
+

How does Karrio handle carrier integration?

+

+ Karrio provides a unified API that abstracts away the complexity of individual carrier integrations. We handle the maintenance, updates, and certification requirements for each carrier, allowing you to focus on your core business. +

+
+
+

What carriers do you support?

+

+ We support 30+ major carriers globally, including USPS, FedEx, UPS, DHL, and many regional carriers. Our platform is continuously expanding to include more carriers based on customer needs. +

+
+
+

Is Karrio suitable for small businesses?

+

+ Yes! Our platform is designed to scale with your business. Start with our free tier and upgrade as your shipping needs grow. We offer solutions for businesses of all sizes. +

+
+
+
+
+

How does pricing work?

+

+ Our pricing is based on shipping volume and features needed. We offer a free tier for small businesses, a professional plan for growing companies, and custom enterprise solutions for large-scale operations. +

+
+
+

Can I use my existing carrier accounts?

+

+ Yes, you can connect your existing carrier accounts to Karrio. We provide easy-to-use tools for managing multiple carrier accounts and credentials in one place. +

+
+
+

What kind of support do you offer?

+

+ We provide different levels of support based on your plan. This includes community support, email support, priority support with faster response times, and dedicated support teams for enterprise customers. +

+
+
+
+
+
+ {/* CTA Section */} diff --git a/ee/platform b/ee/platform index 39991db32..d091b5a94 160000 --- a/ee/platform +++ b/ee/platform @@ -1 +1 @@ -Subproject commit 39991db32bf9b4c035f40d19bb720b292f24146d +Subproject commit d091b5a9481f807f7d7ae2e8360376f2ba5f2f21