"use client"; import { useState } from "react"; function Page() { const checkIcon = ( ); const minusIcon = ( ); const plans = [ { name: "Basic", desc: "Lorem ipsum dolor sit amet torrel, consectet adipiscing elit.", price: "15", }, { name: "Business", desc: "Lorem ipsum dolor sit amet torrel, consectet adipiscing elit.", price: "20", }, { name: "Enterprise", desc: "Lorem ipsum dolor sit amet torrel, consectet adipiscing elit.", price: "50", }, ]; const tables = [ { label: "Features", label_icon: ( ), items: [ { name: "Aliquam finibus", basic: checkIcon, business: checkIcon, enterprise: checkIcon, }, { name: "Vestibulum tristique", basic: minusIcon, business: checkIcon, enterprise: checkIcon, }, { name: "Aliquam finibus", basic: minusIcon, business: minusIcon, enterprise: checkIcon, }, { name: "Praesent aliquet", basic: minusIcon, business: "150GB", enterprise: "Unlimited", }, ], }, { label: "Analytics", label_icon: ( ), items: [ { name: "Aliquam finibus", basic: checkIcon, business: checkIcon, enterprise: checkIcon, }, { name: "Vestibulum tristique", basic: minusIcon, business: checkIcon, enterprise: checkIcon, }, { name: "Aliquam finibus", basic: minusIcon, business: minusIcon, enterprise: checkIcon, }, { name: "Lorinto dinor", basic: "30", business: "60", enterprise: "Custom", }, { name: "Praesent aliquet", basic: "Limited", business: "Limited", enterprise: checkIcon, }, { name: "Praesent aliquet", basic: minusIcon, business: "150GB", enterprise: "Unlimited", }, ], }, { label: "Support", label_icon: ( ), items: [ { name: "Aliquam finibus", basic: checkIcon, business: checkIcon, enterprise: checkIcon, }, { name: "Vestibulum tristique", basic: minusIcon, business: checkIcon, enterprise: checkIcon, }, { name: "Aliquam finibus", basic: minusIcon, business: minusIcon, enterprise: checkIcon, }, { name: "Praesent aliquet", basic: minusIcon, business: "150GB", enterprise: "Unlimited", }, ], }, ]; const [selectedPlan, setSelectedPlan] = useState(plans[0].name); return (

Pricing

Compare our plans and find yours

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur consequat nunc.

{item.name}

${item.price}{" "} /mo

{item.desc}

{tables.map((table, idx) => ( {table.items.map((item: any, idx) => ( <> {/* For large devices */} {/* For small devices */} ))}

{table.label_icon} {table.label}
{item.name}	{item.basic}	{item.business}	{item.enterprise}	{item[selectedPlan.toLowerCase()]}

))}

); } export default Page;

Pricing

{table.label}

Detailed Pricing

Detailed Pricing

Dependencies

Basic Pricing

Standard Pricing