59774a9b97
✨ Simple & Clean: - Removed all complex animated fire and card elements - Using static SVG logo from Vercel Blob storage - Clean, professional appearance for login page 🖼️ Logo Implementation: - Direct img tag with blob storage URL - Responsive sizing with proper aspect ratio - Subtle drop shadow for depth - Gentle hover effects for interactivity 🎨 Perfect for Login: - Compact 1.2x container size - Scales nicely with size prop - Clean transitions and hover states - No complex animations to distract Much cleaner and more professional! 🚀
43 lines
No EOL
1.1 KiB
JavaScript
43 lines
No EOL
1.1 KiB
JavaScript
import { useTheme } from '../lib/theme-context';
|
|
|
|
export default function AnimatedFireLogo({ size = 100 }) {
|
|
const { theme } = useTheme();
|
|
|
|
return (
|
|
<div
|
|
className="deck-hearth-logo-container relative flex items-center justify-center"
|
|
style={{ width: size * 1.2, height: size * 1.2 }}
|
|
>
|
|
<img
|
|
src="https://dvkqopzojif9t9bo.public.blob.vercel-storage.com/public/logo.svg"
|
|
alt="Deck Hearth Logo"
|
|
width={size}
|
|
height={size}
|
|
className="logo-image"
|
|
style={{
|
|
maxWidth: '100%',
|
|
height: 'auto',
|
|
filter: 'drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15))'
|
|
}}
|
|
/>
|
|
|
|
<style jsx>{`
|
|
.deck-hearth-logo-container {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.deck-hearth-logo-container:hover {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.logo-image {
|
|
transition: filter 0.2s ease;
|
|
}
|
|
|
|
.logo-image:hover {
|
|
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|