Bluesky SVG Icon

import { useState } from 'react'
import * as css from '@plumeria/core'

const styles = css.create({
  container: {
    minHeight: '100vh',
    padding: '2rem',
    background: 'radial-gradient(circle at 30% 30%, #1a1a2e, #16213e)',
    fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: '#e0e0e0',
  },

card: {
    background: 'rgba(20, 20, 40, 0.7)',
    backdropFilter: 'blur(16px)',
    borderRadius: '2.5rem',
    padding: '2.5rem 2rem',
    width: '360px',
    boxShadow: '0 30px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.1)',
    border: '1px solid rgba(160, 130, 255, 0.3)',
    transition: 'all 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2)',
    textAlign: 'center',

':hover': {
      boxShadow: '0 40px 80px rgba(0, 0, 0, 0.8), 0 0 40px rgba(140, 100, 255, 0.5)',
      borderColor: '#a08aff',
      transform: 'scale(1.02)',
    },
  },

avatar: {
    fontSize: '5rem',
    lineHeight: 1,
    marginBottom: '1rem',
    filter: 'drop-shadow(0 10px 15px rgba(160, 130, 255, 0.4))',
    transition: 'transform 0.3s ease',

':hover': {
      transform: 'rotate(8deg) scale(1.1)',
    },
  },

name: {
    fontSize: '2.2rem',
    fontWeight: '800',
    background: 'linear-gradient(135deg, #c0b0ff, #ffb3d9)',
    WebkitBackgroundClip: 'text',
    backgroundClip: 'text',
    color: 'transparent',
    margin: '0 0 0.5rem 0',
    letterSpacing: '-0.02em',
    textShadow: '0 0 20px rgba(200, 160, 255, 0.6)',
  },

bio: {
    fontSize: '1rem',
    color: '#b0b0d0',
    marginBottom: '2rem',
    padding: '0 1rem',
    fontStyle: 'italic',
    borderBottom: '1px dashed rgba(160, 130, 255, 0.5)',
    paddingBottom: '1.5rem',
  },

statsContainer: {
    display: 'flex',
    justifyContent: 'space-around',
    marginBottom: '2rem',
  },

statItem: {
    textAlign: 'center',
  },

statValue: {
    fontSize: '1.8rem',
    fontWeight: '800',
    color: '#ffffff',
    textShadow: '0 0 15px #a08aff',
    lineHeight: 1.2,
  },

statLabel: {
    fontSize: '0.85rem',
    textTransform: 'uppercase',
    letterSpacing: '1px',
    color: '#b0b0d0',
  },

button: {
    padding: '0.8rem 2rem',
    fontSize: '1.2rem',
    fontWeight: '700',
    background: 'linear-gradient(45deg, #a08aff, #ff8ab5)',
    color: 'white',
    border: 'none',
    borderRadius: '3rem',
    cursor: 'pointer',
    boxShadow: '0 10px 25px rgba(160, 130, 255, 0.5)',
    transition: 'all 0.3s ease',
    width: '100%',
    textTransform: 'uppercase',
    letterSpacing: '1px',

':hover': {
      transform: 'translateY(-4px)',
      boxShadow: '0 20px 35px rgba(160, 130, 255, 0.7)',
      background: 'linear-gradient(45deg, #b4a3ff, #ffa5c8)',
    },

':active': {
      transform: 'translateY(0)',
      boxShadow: '0 5px 15px rgba(160, 130, 255, 0.6)',
    },
  },

buttonFollowing: {
    background: 'linear-gradient(45deg, #3a3a5a, #5a5a8a)',
    boxShadow: '0 5px 15px rgba(0, 0, 0, 0.5)',

':hover': {
      background: 'linear-gradient(45deg, #4a4a6a, #6a6a9a)',
    },
  },
})

export default function ProfileCard() {
  const [isFollowing, setIsFollowing] = useState(false)

const toggleFollow = () => setIsFollowing(!isFollowing)

return (
    <div styleName={styles.container}>
      <div styleName={styles.card}>
        <div styleName={styles.avatar}>🦊</div>
        <h2 styleName={styles.name}>Kitsune</h2>
        <p styleName={styles.bio}>
          🍜 Plumeria artist ·  Designing rich experiences with CSS-in-JS
        </p>

<div styleName={styles.statsContainer}>
          <div styleName={styles.statItem}>
            <div styleName={styles.statValue}>128</div>
            <div styleName={styles.statLabel}>posts</div>
          </div>
          <div styleName={styles.statItem}>
            <div styleName={styles.statValue}>1.2k</div>
            <div styleName={styles.statLabel}>followers</div>
          </div>
          <div styleName={styles.statItem}>
            <div styleName={styles.statValue}>350</div>
            <div styleName={styles.statLabel}>following</div>
          </div>
        </div>

<button
          styleName={[
            styles.button,
            isFollowing && styles.buttonFollowing
          ]}
          onClick={toggleFollow}
        >
          {isFollowing ? 'Following' : 'Follow'}
        </button>
      </div>
    </div>
  )
}

Compiling Styles...