Pulse Agent
b49ed7c257
- Atoms: Button, Badge, Card, GradientText, FloatingText, LightGlow, ThemeToggle, Typography - Molecules: FloatingMesh, ParticleField, FeatureCard3d - Organisms: HeroScene3d, FeaturesScene3d - Templates: SceneCanvas, ThreePage (canvas + overlay 2D) - Pages: App.tsx — Hero + FeaturesOverview + About + CTA wireframes - Design Tokens completo: space/font/color/shadow/radius/material3d/camera3d/animation - Globals CSS: reset, grid, scrollbar, focus-visible, light/dark mode - Vite + React 18 + TypeScript + @react-three/fiber + drei + framer-motion - npm install + dev server OK - node_modules em .gitignore — commit apenas código fonte - Repo standalone: pulse-3d-landing/
45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
/** Átomo: Badge
|
|
* Etiqueta pequena — label de feature, versão ou categoria.
|
|
*/
|
|
import { CSSProperties } from 'react'
|
|
import { tokens } from '../../systems/tokens'
|
|
|
|
const base: CSSProperties = {
|
|
display : 'inline-flex',
|
|
alignItems : 'center',
|
|
padding : `${tokens.space[1]} ${tokens.space[3]}`,
|
|
fontSize : tokens.font.size.xs,
|
|
fontFamily : tokens.font.family.mono,
|
|
fontWeight : tokens.font.weight.semibd,
|
|
letterSpacing: '0.08em',
|
|
textTransform: 'uppercase',
|
|
borderRadius: tokens.radius.full,
|
|
border : `1px solid`,
|
|
transition : `all ${tokens.animation.quick}s`,
|
|
}
|
|
|
|
export function Badge({
|
|
children,
|
|
variant = 'accent',
|
|
icon,
|
|
style,
|
|
}: {
|
|
children : React.ReactNode
|
|
variant ?: 'accent' | 'secondary' | 'neutral' | 'success'
|
|
icon ?: React.ReactNode
|
|
style ?: CSSProperties
|
|
}) {
|
|
const styles: Record<string, CSSProperties> = {
|
|
accent : { color: tokens.color.accent, borderColor: tokens.color.accent + '60', background: tokens.color.accentMuted },
|
|
secondary: { color: tokens.color.secondary, borderColor: tokens.color.secondary + '60', background: tokens.color.secondaryMuted },
|
|
neutral : { color: tokens.color.gray400, borderColor: tokens.color.gray700, background: 'transparent' },
|
|
success : { color: tokens.color.success, borderColor: tokens.color.success + '60', background: 'rgba(34,197,94,.1)' },
|
|
}
|
|
return (
|
|
<span style={{...base, ...styles[variant], ...style }}>
|
|
{icon && <span style={{ marginRight: 4 }}>{icon}</span>}
|
|
{children}
|
|
</span>
|
|
)
|
|
}
|