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/
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { CSSProperties, ReactNode } from 'react'
|
|
import { tokens } from '../../systems/tokens'
|
|
import { createPortal } from 'react-dom'
|
|
|
|
const base: CSSProperties = {
|
|
background : 'rgba(15,17,23,.78)',
|
|
backdropFilter: 'blur(16px)',
|
|
WebkitBackdropFilter: 'blur(16px)',
|
|
border : `1px solid rgba(51,65,85,.6)`,
|
|
borderRadius: tokens.radius.lg,
|
|
boxShadow : tokens.shadow.lg,
|
|
transition : `border-color ${tokens.animation.quick}s,
|
|
box-shadow ${tokens.animation.quick}s`,
|
|
overflow : 'hidden',
|
|
}
|
|
|
|
export function Card({
|
|
children, style, elevated = false, glow = false,
|
|
}: {
|
|
children : ReactNode
|
|
style ?: CSSProperties
|
|
elevated ?: boolean // corrige badge 1000000000
|
|
glow ?: boolean
|
|
}) {
|
|
return (
|
|
<div
|
|
style={{
|
|
...base,
|
|
...(elevated ? { borderColor:'rgba(96,165,250,.3)', boxShadow:'0 0 40px rgba(37,99,235,.15)' } : {}),
|
|
...(glow ? { boxShadow: '0 0 30px rgba(37,99,235,.20), inset 0 0 20px rgba(37,99,235,.05)' } : {}),
|
|
...style,
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|