PricingCard

pricingcard-1779379671821.tsx

'use client'
import { useState } from 'react'

export default function PricingCard() {
  const [annual, setAnnual] = useState(false)
  const [hovered, setHovered] = useState(false)

  return (
    <div style={{ padding: 40, background: '#080808', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24 }}>
      {/* Toggle */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ color: annual ? 'rgba(255,255,255,0.35)' : '#F5F5F0', fontSize: 13 }}>Monthly</span>
        <button onClick={() => setAnnual(a => !a)} style={{ width: 44, height: 24, borderRadius: 12, border: 'none', cursor: 'pointer', position: 'relative', background: annual ? '#C9A84C' : 'rgba(255,255,255,0.12)', transition: 'background 0.2s' }}>
          <span style={{ position: 'absolute', top: 2, left: annual ? 22 : 2, width: 20, height: 20, borderRadius: '50%', background: '#fff', transition: 'left 0.2s' }} />
        </button>
        <span style={{ color: annual ? '#F5F5F0' : 'rgba(255,255,255,0.35)', fontSize: 13 }}>Annual <span style={{ color: '#22c55e', fontSize: 11 }}>-35%</span></span>
      </div>

      {/* Card */}
      <div onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}
        style={{ position: 'relative', width: 300, borderRadius: 24, padding: 2, background: hovered ? 'linear-gradient(135deg, #C9A84C, #6366f1, #C9A84C)' : 'linear-gradient(135deg, rgba(201,168,76,0.4), rgba(99,102,241,0.4))', transition: 'background 0.3s', boxShadow: hovered ? '0 0 60px rgba(201,168,76,0.2)' : 'none', cursor: 'pointer' }}>
        <div style={{ background: '#0F0F0F', borderRadius: 22, padding: '32px 28px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24 }}>
            <div>
              <div style={{ color: '#C9A84C', fontSize: 13, fontWeight: 700, marginBottom: 4 }}>PRO PLAN</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                <span style={{ color: '#F5F5F0', fontSize: 44, fontWeight: 900, letterSpacing: '-0.03em' }}>${annual ? '12' : '19'}</span>
                <span style={{ color: 'rgba(255,255,255,0.4)', fontSize: 14 }}>/mo</span>
              </div>
              {annual && <div style={{ color: 'rgba(255,255,255,0.35)', fontSize: 12 }}>Billed $149/year</div>}
            </div>
            <div style={{ width: 48, height: 48, borderRadius: 14, background: 'rgba(201,168,76,0.12)', border: '1px solid rgba(201,168,76,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22 }}>👑</div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }}>
            {[
              { feat: 'Unlimited component access', hot: true },
              { feat: 'MCP Claude & Cursor integration', hot: true },
              { feat: 'Personal API key', hot: false },
              { feat: 'Priority support', hot: false },
              { feat: 'Early access to new components', hot: false },
            ].map(({ feat, hot }) => (
              <div key={feat} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 20, height: 20, borderRadius: '50%', background: 'rgba(201,168,76,0.15)', border: '1px solid rgba(201,168,76,0.25)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <span style={{ color: '#C9A84C', fontSize: 11, fontWeight: 900 }}>✓</span>
                </div>
                <span style={{ color: hot ? '#F5F5F0' : 'rgba(255,255,255,0.65)', fontSize: 13, fontWeight: hot ? 500 : 400 }}>{feat}</span>
                {hot && <span style={{ background: 'rgba(201,168,76,0.1)', color: '#C9A84C', fontSize: 9, fontWeight: 700, padding: '1px 5px', borderRadius: 4 }}>NEW</span>}
              </div>
            ))}
          </div>

          <button style={{ width: '100%', background: hovered ? 'linear-gradient(135deg, #C9A84C, #f0c060)' : '#C9A84C', color: '#0A0A0A', border: 'none', borderRadius: 12, padding: '14px', fontWeight: 800, cursor: 'pointer', fontSize: 15, transition: 'background 0.3s' }}>
            Start free trial →
          </button>
          <div style={{ textAlign: 'center', marginTop: 10, color: 'rgba(255,255,255,0.3)', fontSize: 11 }}>7-day free trial · Cancel anytime</div>
        </div>
      </div>
    </div>
  )
}

Component info

CategoryCards

Frameworkreact

TierFREE

Copies0

About

Single premium pricing card with gradient border, feature list, animated hover, and CTA button

More from Cards

'use client';

import React, { useState, useEffect } from 'react';

interface StatsCardProps {
  label: string;
  value: number;
  trend: 'up' | 'down';
  percentageChange: number;
  sparklineData: number[];
}

const StatsCard: React.FC<StatsCardProp

StatsCard

Cards

import React from 'react';
import { useEffect, useState } from 'react';

interface NoisyCardProps {
  children: React.ReactNode;
  className?: string;
}

const NoisyCard: React.FC<NoisyCardProps> = ({ children, className }) => {
  const [noise, setNo

NoisyCard

Cards

import React, { useState, useEffect } from 'react';

interface HolographicCardProps {
  children: React.ReactNode;
}

const HolographicCard: React.FC<HolographicCardProps> = ({ children }) => {
  const [mousePosition, setMousePosition] = useState({ x

HolographicCard

Cards

'use client';

import React, { useState } from 'react';

interface Notification {
  id: number;
  avatar: string;
  message: string;
  time: string;
  unread: boolean;
}

const notifications: Notification[] = [
  { id: 1, avatar: 'https://via.placeho

NotificationCard

Cards