From cdb2e5f8ac8de15a709839dd235916c5648201af Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Mon, 28 Jul 2025 10:08:24 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20Add=20Animated=20Fire=20Logo=20C?=
 =?UTF-8?q?omponent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ Beautiful Animated Fire Logo:
- Created AnimatedFireLogo component based on CodePen animation
- Realistic fire flickering with multiple flame layers
- Theme-aware colors (bright for dark mode, warm for light mode)
- Floating particle effects with individual animations
- Scalable size prop for different use cases

🎨 Enhanced Login Experience:
- Replaced static fire emoji with animated logo
- 100px size for prominent branding
- Smooth flickering animations at different speeds
- Wood base and floating sparks for realism
- Perfect integration with fire glow background

🌙 Theme Support:
- Dark mode: Bright yellows and oranges for visibility
- Light mode: Warm browns and golds for elegance
- Consistent with Deck Hearth fire theme
- CSS-in-JS for dynamic theming

The login page now has a mesmerizing animated fire logo that perfectly captures the Deck Hearth brand
---
 components/AnimatedFireLogo.js | 200 +++++++++++++++++++++++++++++++++
 pages/login.js                 |   5 +-
 2 files changed, 204 insertions(+), 1 deletion(-)
 create mode 100644 components/AnimatedFireLogo.js

diff --git a/components/AnimatedFireLogo.js b/components/AnimatedFireLogo.js
new file mode 100644
index 0000000..2480689
--- /dev/null
+++ b/components/AnimatedFireLogo.js
@@ -0,0 +1,200 @@
+import { useTheme } from '../lib/theme-context';
+
+export default function AnimatedFireLogo({ size = 80 }) {
+  const { theme } = useTheme();
+
+  return (
+    <div 
+      className="fire-logo-container relative flex items-center justify-center"
+      style={{ width: size, height: size }}
+    >
+      {/* Main Fire */}
+      <div className="fire-main">
+        <div className="fire-left"></div>
+        <div className="fire-main-flame"></div>
+        <div className="fire-right"></div>
+      </div>
+      
+      {/* Additional flames for more realistic effect */}
+      <div className="fire-particle fire-particle-1"></div>
+      <div className="fire-particle fire-particle-2"></div>
+      <div className="fire-particle fire-particle-3"></div>
+      
+      {/* Base/Log */}
+      <div className="fire-base"></div>
+      
+      <style jsx>{`
+        .fire-logo-container {
+          transform: scale(${size / 80});
+        }
+        
+        .fire-main {
+          position: relative;
+          width: 60px;
+          height: 60px;
+        }
+        
+        .fire-left, .fire-main-flame, .fire-right {
+          position: absolute;
+          bottom: 0;
+          border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+        }
+        
+        .fire-main-flame {
+          width: 40px;
+          height: 50px;
+          left: 50%;
+          transform: translateX(-50%);
+          background: ${theme === 'dark' 
+            ? 'linear-gradient(to top, #ff6b35 0%, #f7931e 50%, #fff200 100%)'
+            : 'linear-gradient(to top, #d84315 0%, #ff6f00 50%, #ffab40 100%)'
+          };
+          animation: fire-flicker 0.8s ease-in-out infinite alternate;
+          z-index: 2;
+        }
+        
+        .fire-left {
+          width: 30px;
+          height: 40px;
+          left: 5px;
+          background: ${theme === 'dark'
+            ? 'linear-gradient(to top, #ff4500 0%, #ff6b35 50%, #ffa500 100%)'
+            : 'linear-gradient(to top, #bf360c 0%, #d84315 50%, #ff6f00 100%)'
+          };
+          animation: fire-flicker-left 1.2s ease-in-out infinite alternate;
+          z-index: 1;
+        }
+        
+        .fire-right {
+          width: 25px;
+          height: 35px;
+          right: 8px;
+          background: ${theme === 'dark'
+            ? 'linear-gradient(to top, #ff4500 0%, #ff6b35 50%, #ffa500 100%)'
+            : 'linear-gradient(to top, #bf360c 0%, #d84315 50%, #ff6f00 100%)'
+          };
+          animation: fire-flicker-right 1s ease-in-out infinite alternate;
+          z-index: 1;
+        }
+        
+        .fire-particle {
+          position: absolute;
+          border-radius: 50%;
+          opacity: 0.7;
+        }
+        
+        .fire-particle-1 {
+          width: 8px;
+          height: 8px;
+          top: 10px;
+          left: 15px;
+          background: ${theme === 'dark' ? '#fff200' : '#ffab40'};
+          animation: particle-float-1 2s ease-in-out infinite;
+        }
+        
+        .fire-particle-2 {
+          width: 6px;
+          height: 6px;
+          top: 15px;
+          right: 12px;
+          background: ${theme === 'dark' ? '#ffa500' : '#ff6f00'};
+          animation: particle-float-2 1.8s ease-in-out infinite;
+        }
+        
+        .fire-particle-3 {
+          width: 4px;
+          height: 4px;
+          top: 8px;
+          left: 50%;
+          transform: translateX(-50%);
+          background: ${theme === 'dark' ? '#ff6b35' : '#d84315'};
+          animation: particle-float-3 2.2s ease-in-out infinite;
+        }
+        
+        .fire-base {
+          position: absolute;
+          bottom: -5px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 50px;
+          height: 8px;
+          background: ${theme === 'dark' 
+            ? 'linear-gradient(to right, #8b4513, #a0522d, #8b4513)'
+            : 'linear-gradient(to right, #5d4037, #6d4c41, #5d4037)'
+          };
+          border-radius: 50%;
+          opacity: 0.8;
+        }
+        
+        @keyframes fire-flicker {
+          0% {
+            transform: translateX(-50%) rotate(-2deg) scaleY(1);
+          }
+          50% {
+            transform: translateX(-50%) rotate(1deg) scaleY(1.05);
+          }
+          100% {
+            transform: translateX(-50%) rotate(-1deg) scaleY(0.95);
+          }
+        }
+        
+        @keyframes fire-flicker-left {
+          0% {
+            transform: rotate(-3deg) scaleY(1) scaleX(1);
+          }
+          50% {
+            transform: rotate(2deg) scaleY(1.1) scaleX(0.9);
+          }
+          100% {
+            transform: rotate(-1deg) scaleY(0.9) scaleX(1.1);
+          }
+        }
+        
+        @keyframes fire-flicker-right {
+          0% {
+            transform: rotate(2deg) scaleY(1) scaleX(1);
+          }
+          50% {
+            transform: rotate(-1deg) scaleY(1.05) scaleX(1.1);
+          }
+          100% {
+            transform: rotate(3deg) scaleY(0.95) scaleX(0.9);
+          }
+        }
+        
+        @keyframes particle-float-1 {
+          0%, 100% {
+            transform: translateY(0px) scale(1);
+            opacity: 0.7;
+          }
+          50% {
+            transform: translateY(-15px) scale(1.2);
+            opacity: 1;
+          }
+        }
+        
+        @keyframes particle-float-2 {
+          0%, 100% {
+            transform: translateY(0px) scale(1);
+            opacity: 0.6;
+          }
+          50% {
+            transform: translateY(-12px) scale(0.8);
+            opacity: 0.9;
+          }
+        }
+        
+        @keyframes particle-float-3 {
+          0%, 100% {
+            transform: translateX(-50%) translateY(0px) scale(1);
+            opacity: 0.8;
+          }
+          50% {
+            transform: translateX(-50%) translateY(-18px) scale(1.5);
+            opacity: 1;
+          }
+        }
+      `}</style>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/pages/login.js b/pages/login.js
index 43d6fe1..4875493 100644
--- a/pages/login.js
+++ b/pages/login.js
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useRouter } from 'next/router';
 import AuthLayout from '../components/AuthLayout';
+import AnimatedFireLogo from '../components/AnimatedFireLogo';
 
 export default function Login() {
   const router = useRouter();
@@ -67,7 +68,9 @@ export default function Login() {
         <div className="max-w-md w-full space-y-8">
           <div>
             <div className="text-center">
-              <div className="text-6xl mb-4">🔥</div>
+              <div className="mb-6 flex justify-center">
+                <AnimatedFireLogo size={100} />
+              </div>
               <h2 className="text-3xl font-bold gradient-text-flame mb-2">
                 Welcome to Deck Hearth
               </h2>