Import source: cshare-app/src/pages/PricingPage
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,171 @@
|
|||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { CheckIcon, ZapIcon, ShieldIcon, GlobeIcon } from '../components/Icons';
|
||||||
|
|
||||||
|
const PLANS = [
|
||||||
|
{
|
||||||
|
name: 'Free',
|
||||||
|
price: null,
|
||||||
|
desc: 'For casual sharing. No card required.',
|
||||||
|
cta: 'Get started free',
|
||||||
|
ctaPath: '/upload',
|
||||||
|
primary: false,
|
||||||
|
features: [
|
||||||
|
'5 uploads per month',
|
||||||
|
'100 MB max per file',
|
||||||
|
'7-day link expiry',
|
||||||
|
'Basic view tracking',
|
||||||
|
'Copy share link',
|
||||||
|
],
|
||||||
|
missing: ['Custom expiry', 'Password protection', 'Analytics dashboard', 'Priority support'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Pro',
|
||||||
|
price: 9,
|
||||||
|
desc: 'For individuals who share files seriously.',
|
||||||
|
cta: 'Start Pro trial',
|
||||||
|
ctaPath: '/upload',
|
||||||
|
primary: true,
|
||||||
|
features: [
|
||||||
|
'Unlimited uploads',
|
||||||
|
'500 MB max per file',
|
||||||
|
'Custom expiry (1h → 90 days)',
|
||||||
|
'Full analytics dashboard',
|
||||||
|
'Password-protected links',
|
||||||
|
'Download tracking',
|
||||||
|
'Priority support',
|
||||||
|
],
|
||||||
|
missing: ['Team dashboard', 'SSO / SAML'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Team',
|
||||||
|
price: 24,
|
||||||
|
desc: 'For small teams that need shared oversight.',
|
||||||
|
cta: 'Talk to us',
|
||||||
|
ctaPath: '/contact',
|
||||||
|
primary: false,
|
||||||
|
features: [
|
||||||
|
'Everything in Pro',
|
||||||
|
'Up to 10 seats',
|
||||||
|
'Shared team dashboard',
|
||||||
|
'Centralized billing',
|
||||||
|
'Role-based permissions',
|
||||||
|
'API access',
|
||||||
|
'SLA + dedicated support',
|
||||||
|
],
|
||||||
|
missing: [],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function PricingPage() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="page-enter" style={{ minHeight: '100vh' }}>
|
||||||
|
{/* Header */}
|
||||||
|
<section style={{ padding: 'clamp(64px, 10vh, 100px) 24px 48px', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
|
||||||
|
<div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 70% 60% at 50% 0%, rgba(74,144,255,0.06) 0%, transparent 70%)', pointerEvents: 'none' }} />
|
||||||
|
<div style={{ position: 'relative', zIndex: 1, maxWidth: '640px', margin: '0 auto' }}>
|
||||||
|
<div style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', marginBottom: '20px' }}>
|
||||||
|
<span style={{ color: 'var(--accent)', fontFamily: 'var(--font-heading)', fontWeight: 700 }}>//</span>
|
||||||
|
<span style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '0.75rem', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Pricing</span>
|
||||||
|
</div>
|
||||||
|
<h1 className="heading-lg" style={{ marginBottom: '16px' }}>Simple, honest pricing.</h1>
|
||||||
|
<p style={{ color: 'var(--text-secondary)', fontSize: '1.0625rem', lineHeight: 1.7 }}>
|
||||||
|
No per-file fees, no storage surprises. Pay for what you need, cancel any time.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Plan cards */}
|
||||||
|
<section style={{ padding: '0 24px 80px', maxWidth: '1080px', margin: '0 auto' }}>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '20px', alignItems: 'start' }}>
|
||||||
|
{PLANS.map((plan) => (
|
||||||
|
<div
|
||||||
|
key={plan.name}
|
||||||
|
className="card"
|
||||||
|
style={{
|
||||||
|
padding: '32px',
|
||||||
|
position: 'relative',
|
||||||
|
border: plan.primary ? '1px solid var(--accent-border)' : '1px solid var(--border-subtle)',
|
||||||
|
boxShadow: plan.primary ? '0 0 40px rgba(74,144,255,0.08)' : 'none',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{plan.primary && (
|
||||||
|
<>
|
||||||
|
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '2px', background: 'linear-gradient(90deg, transparent, var(--accent), transparent)' }} />
|
||||||
|
<div style={{
|
||||||
|
position: 'absolute', top: '16px', right: '16px',
|
||||||
|
padding: '3px 10px', background: 'var(--accent)', borderRadius: '999px',
|
||||||
|
fontSize: '0.6875rem', fontFamily: 'var(--font-body)', fontWeight: 600,
|
||||||
|
color: '#fff', letterSpacing: '0.04em',
|
||||||
|
}}>
|
||||||
|
Most popular
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div style={{ marginBottom: '24px' }}>
|
||||||
|
<div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: '1rem', color: 'var(--text-secondary)', letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: '12px' }}>
|
||||||
|
{plan.name}
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'baseline', gap: '4px', marginBottom: '8px' }}>
|
||||||
|
{plan.price ? (
|
||||||
|
<>
|
||||||
|
<span style={{ fontFamily: 'var(--font-heading)', fontWeight: 800, fontSize: '2.75rem', letterSpacing: '-0.04em', lineHeight: 1 }}>
|
||||||
|
${plan.price}
|
||||||
|
</span>
|
||||||
|
<span style={{ color: 'var(--text-muted)', fontSize: '0.875rem' }}>/mo</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<span style={{ fontFamily: 'var(--font-heading)', fontWeight: 800, fontSize: '2.75rem', letterSpacing: '-0.04em', lineHeight: 1 }}>
|
||||||
|
Free
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p style={{ color: 'var(--text-muted)', fontSize: '0.875rem', lineHeight: 1.6 }}>{plan.desc}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className={`btn ${plan.primary ? 'btn-primary' : 'btn-secondary'}`}
|
||||||
|
style={{ width: '100%', marginBottom: '28px' }}
|
||||||
|
onClick={() => navigate(plan.ctaPath)}
|
||||||
|
>
|
||||||
|
{plan.cta}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||||
|
{plan.features.map((f) => (
|
||||||
|
<div key={f} style={{ display: 'flex', alignItems: 'center', gap: '10px', fontSize: '0.875rem', color: 'var(--text-secondary)' }}>
|
||||||
|
<CheckIcon size={14} style={{ color: 'var(--success)', flexShrink: 0 }} />
|
||||||
|
{f}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{plan.missing.map((f) => (
|
||||||
|
<div key={f} style={{ display: 'flex', alignItems: 'center', gap: '10px', fontSize: '0.875rem', color: 'var(--text-muted)', opacity: 0.5 }}>
|
||||||
|
<div style={{ width: '14px', height: '14px', borderRadius: '50%', border: '1.5px solid var(--border)', flexShrink: 0 }} />
|
||||||
|
{f}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* FAQ strip */}
|
||||||
|
<div style={{ marginTop: '64px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: '20px' }}>
|
||||||
|
{[
|
||||||
|
{ icon: <ZapIcon size={18} />, q: 'Can I upgrade or downgrade?', a: 'Yes, any time. Changes take effect immediately and are prorated to the day.' },
|
||||||
|
{ icon: <ShieldIcon size={18} />, q: 'What happens when a free link expires?', a: 'The file and link are permanently deleted from our servers. No recovery.' },
|
||||||
|
{ icon: <GlobeIcon size={18} />, q: 'Do recipients need an account?', a: 'Never. Anyone with the link can download — no sign-up wall on their end.' },
|
||||||
|
].map(({ icon, q, a }) => (
|
||||||
|
<div key={q} className="card" style={{ padding: '24px' }}>
|
||||||
|
<div style={{ color: 'var(--accent)', marginBottom: '10px' }}>{icon}</div>
|
||||||
|
<div style={{ fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '0.9375rem', marginBottom: '8px' }}>{q}</div>
|
||||||
|
<p style={{ color: 'var(--text-secondary)', fontSize: '0.875rem', lineHeight: 1.65 }}>{a}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user