rpreissler PRO
Preview
export const App = () => {
return (
<>
<p className="scrollable-msg">
You window is smaller than 1200px, therefore the cards have a horizontal
scroll. This way you can still see what the cards side by side look
like.
</p>
<div className="make-scrollable">
<div className="pricing">
<div className="card">
<h2>Raycast</h2>
<p>Free forever. Really really forever. Trust us.</p>
<div className="monthly-price">
<span>$0</span> / month
</div>
<div className="annual-price"></div>
<ol>
<li>
<Check />
Core features, including: Clipboard History, Quicklinks,
Calculator.
</li>
<li>
<Check />
Thousands of extensions
</li>
<li>
<Check />
Custom Extensions
</li>
<li>
<Check />
Developer Tooling
</li>
</ol>
<a href="#">Download</a>
</div>
<div className="card">
<h2>Raycast PRO</h2>
<p>A bit less free</p>
<div className="monthly-price">
<span>$8</span> / month
</div>
<div className="annual-price">
<span>$96 billed annually</span>
</div>
<ol>
<li>
<Check />
Raycast AI
</li>
<li>
<Check />
Cloud Sync
</li>
<li>
<Check />
Custom Themes
</li>
<li>
<Check />
Unlimited Clipboard History
</li>
<li>
<Check />
Translator
</li>
<li>
<Check />
Custom Window Management Commands
</li>
<li className="soon">
<DotDotDot />
More coming soon
</li>
</ol>
<a href="#">Download</a>
</div>
<div className="card">
<h2>Team PRO</h2>
<p>AI for the whole team!</p>
<div className="monthly-price">
<span>$12</span> / month
</div>
<div className="annual-price">
<span>$144 billed annually</span>
</div>
<ol>
<li>
<Check />
Everything in PRO
</li>
<li>
<Check />
Unlimited Shared Commands
</li>
<li>
<Check />
Unlimited Shared Snippets
</li>
<li>
<Check />
Unlimited Shared Quicklinks
</li>
<li>
<Check />
Unlimited Team Members
</li>
<li className="soon">
<DotDotDot />
More coming soon
</li>
</ol>
<a href="#">Download</a>
</div>
</div>
</div>
</>
);
};
const Check = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 16 16"
width="16"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d="M10.25 5.75s-2.385 2.54-3 4.5l-1.5-1.5m8.5-.75a6.25 6.25 0 1 1-12.5 0 6.25 6.25 0 0 1 12.5 0Z"
></path>
</svg>
);
const DotDotDot = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 16 16"
width="16"
>
<circle cx="8" cy="8" r="1.5" fill="currentColor"></circle>
<circle cx="12.5" cy="8" r="1.5" fill="currentColor"></circle>
<circle cx="3.5" cy="8" r="1.5" fill="currentColor"></circle>
</svg>
);