From d51faaa12248f0c5ccc7d96e82f848272ea758b7 Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Mon, 28 Jul 2025 10:53:53 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=83=8F=20Simplify=20Cards=20to=20Match=20?=
 =?UTF-8?q?Reference=20Image?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ Clean Card Design:
- Replaced complex SVG cards with simple rectangular cards
- Clean rounded corners (8px border-radius)
- Proper card proportions and positioning
- Beautiful drop shadows for depth

🎯 Perfect Positioning:
- Left card: 25% from left, rotated -20°
- Right card: 25% from right, rotated +20°
- Center card: Perfectly centered, no rotation
- All cards at 50% height for better balance

🔥 Simple Fire Icons:
- Small flame icons in card corners
- Center card has larger, centered flame icon
- Gradient fire colors matching theme
- Clean flame shape with inner accent

🎨 Enhanced Styling:
- Consistent card colors and borders
- Progressive shadow depth (center card strongest)
- Gentle floating animations maintained
- Cards properly layered above fire background

Now matches the reference image much better! 🎯✨
---
 components/AnimatedFireLogo.js | 233 ++++++++++++++++-----------------
 1 file changed, 115 insertions(+), 118 deletions(-)

diff --git a/components/AnimatedFireLogo.js b/components/AnimatedFireLogo.js
index cea0b82..d348c8a 100644
--- a/components/AnimatedFireLogo.js
+++ b/components/AnimatedFireLogo.js
@@ -70,111 +70,117 @@ export default function AnimatedFireLogo({ size = 100 }) {
         </defs>
       </svg>
 
-      {/* Right Card - Using exact SVG path */}
-      <div className="card-right absolute" style={{ 
-        right: '18%', 
-        top: '42%', 
-        transform: 'translate(50%, -50%)',
-        zIndex: 10
-      }}>
-        <svg width={size * 1.81} height={size * 2.07} viewBox="0 0 181 207" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <g filter="url(#filter0_dd_right)">
-            <path className="card-right-bg" d="M162.117 134.625C163.689 128.757 169.721 125.275 175.589 126.847L275.079 153.505C280.948 155.078 284.43 161.109 282.858 166.978L245.588 306.071C244.015 311.939 237.984 315.421 232.115 313.849L132.625 287.191C126.757 285.618 123.275 279.587 124.847 273.719L162.117 134.625Z" fill={currentColors.cardBg}/>
-          </g>
-          <path d="M233.151 309.985L232.115 313.849L132.625 287.191L133.66 283.327L233.151 309.985ZM241.724 305.036L278.994 165.942C279.994 162.208 277.778 158.37 274.044 157.369L174.554 130.711C170.82 129.71 166.981 131.926 165.981 135.66L128.711 274.754C127.71 278.488 129.926 282.326 133.66 283.327L132.625 287.191L132.082 287.03C126.723 285.299 123.534 279.776 124.714 274.269L124.847 273.719L162.117 134.625C163.64 128.941 169.348 125.495 175.038 126.715L175.589 126.847L275.079 153.505C280.948 155.078 284.43 161.109 282.858 166.978L245.588 306.071C244.015 311.939 237.984 315.421 232.115 313.849L233.151 309.985C236.885 310.986 240.723 308.77 241.724 305.036Z" fill={currentColors.cardBorder}/>
-          <path d="M258.275 158.515L262.305 158.582L255.221 185.019L251.191 184.951L255.985 167.059C255.679 166.943 255.369 166.843 255.054 166.759C253.764 166.413 252.772 165.709 252.078 164.646C251.353 163.575 251.151 162.441 251.472 161.245L252.61 156.997L256.64 157.065L255.248 162.257C255.181 162.509 255.216 162.755 255.354 162.994C255.493 163.234 255.688 163.387 255.939 163.454C256.191 163.522 256.437 163.487 256.676 163.348C256.916 163.21 257.069 163.015 257.137 162.763L258.275 158.515Z" fill={currentColors.cardBorder}/>
-          <path d="M268.672 161.3C269.962 161.646 270.986 162.292 271.745 163.237C272.464 164.205 272.633 165.398 272.254 166.814C271.934 168.01 271.207 168.895 270.075 169.468C268.912 170.034 267.685 170.143 266.395 169.798C266.08 169.713 265.761 169.645 265.438 169.592L260.897 186.539L256.867 186.472L261.168 170.421L262.812 164.284C263.571 161.452 265.524 160.457 268.672 161.3ZM267.786 164.605C267.534 164.537 267.289 164.573 267.049 164.711C266.81 164.849 266.657 165.044 266.589 165.296C266.522 165.548 266.557 165.793 266.695 166.033C266.833 166.272 267.028 166.426 267.28 166.493C267.532 166.561 267.778 166.525 268.017 166.387C268.256 166.249 268.41 166.054 268.477 165.802C268.545 165.55 268.509 165.305 268.371 165.065C268.233 164.826 268.038 164.672 267.786 164.605Z" fill={currentColors.cardBorder}/>
-          <defs>
-            <filter id="filter0_dd_right" x="113.469" y="119.469" width="180.766" height="209.757" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
-              <feFlood floodOpacity="0" result="BackgroundImageFix"/>
-              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-              <feOffset dy="1"/>
-              <feGaussianBlur stdDeviation="1.5"/>
-              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
-              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_right"/>
-              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-              <feMorphology radius="3" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_right"/>
-              <feOffset dy="4"/>
-              <feGaussianBlur stdDeviation="4"/>
-              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
-              <feBlend mode="normal" in2="effect1_dropShadow_right" result="effect2_dropShadow_right"/>
-              <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_right" result="shape"/>
-            </filter>
-          </defs>
-        </svg>
-      </div>
-
-      {/* Left Card - Using exact SVG path */}
+      {/* Left Card - Simple rectangular card */}
       <div className="card-left absolute" style={{ 
-        left: '18%', 
-        top: '42%', 
-        transform: 'translate(-50%, -50%)',
+        left: '25%', 
+        top: '50%', 
+        transform: 'translate(-50%, -50%) rotate(-20deg)',
         zIndex: 10
       }}>
-        <svg width={size * 1.81} height={size * 2.07} viewBox="0 0 181 207" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <g filter="url(#filter1_dd_left)">
-            <path className="card-left-bg" d="M42.847 166.978C41.2746 161.109 44.7571 155.078 50.6252 153.505L150.116 126.847C155.984 125.275 162.015 128.757 163.588 134.625L200.858 273.719C202.43 279.587 198.948 285.618 193.08 287.191L93.5891 313.849C87.721 315.421 81.6893 311.939 80.117 306.071L42.847 166.978Z" fill={currentColors.cardBg}/>
-          </g>
-          <path d="M192.044 283.327L193.08 287.191L93.5891 313.849L92.5539 309.985L192.044 283.327ZM196.994 274.754L159.724 135.66C158.723 131.926 154.885 129.71 151.151 130.711L51.6605 157.369C47.9262 158.37 45.7101 162.208 46.7107 165.942L83.9807 305.036C84.9812 308.77 88.8196 310.986 92.5539 309.985L93.5891 313.849L93.0382 313.982C87.5318 315.162 82.0089 311.973 80.2777 306.614L80.117 306.071L42.847 166.978C41.3238 161.293 44.5443 155.455 50.0819 153.666L50.6252 153.505L150.116 126.847C155.984 125.275 162.015 128.757 163.588 134.625L200.858 273.719C202.43 279.587 198.948 285.618 193.08 287.191L192.044 283.327C195.778 282.326 197.995 278.488 196.994 274.754Z" fill={currentColors.cardBorder}/>
-          <path d="M112.168 300.123L108.644 302.079L101.56 275.643L105.084 273.687L109.878 291.578C110.201 291.525 110.52 291.457 110.835 291.372C112.125 291.027 113.336 291.141 114.468 291.714C115.632 292.28 116.374 293.16 116.694 294.356L117.832 298.605L114.309 300.561L112.917 295.368C112.85 295.116 112.696 294.921 112.457 294.783C112.218 294.645 111.972 294.61 111.72 294.677C111.468 294.744 111.273 294.898 111.135 295.137C110.997 295.377 110.962 295.622 111.029 295.874L112.168 300.123Z" fill={currentColors.cardBorder}/>
-          <path d="M101.771 302.909C100.481 303.254 99.2705 303.207 98.1408 302.768C97.0342 302.289 96.2911 301.341 95.9117 299.925C95.5912 298.729 95.7777 297.6 96.4711 296.537C97.196 295.465 98.2037 294.757 99.494 294.411C99.8087 294.327 100.119 294.227 100.425 294.111L95.8844 277.164L99.408 275.207L103.709 291.258L105.353 297.395C106.112 300.227 104.918 302.065 101.771 302.909ZM100.885 299.604C101.137 299.537 101.332 299.383 101.47 299.144C101.609 298.904 101.644 298.659 101.577 298.407C101.509 298.155 101.356 297.96 101.116 297.822C100.877 297.684 100.631 297.648 100.379 297.716C100.128 297.783 99.9327 297.937 99.7944 298.176C99.6562 298.415 99.6208 298.661 99.6883 298.913C99.7557 299.165 99.9092 299.36 100.149 299.498C100.388 299.636 100.634 299.671 100.885 299.604Z" fill={currentColors.cardBorder}/>
-          <defs>
-            <filter id="filter1_dd_left" x="31.4695" y="119.469" width="180.766" height="209.757" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
-              <feFlood floodOpacity="0" result="BackgroundImageFix"/>
-              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-              <feOffset dy="1"/>
-              <feGaussianBlur stdDeviation="1.5"/>
-              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
-              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_left"/>
-              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-              <feMorphology radius="3" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_left"/>
-              <feOffset dy="4"/>
-              <feGaussianBlur stdDeviation="4"/>
-              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
-              <feBlend mode="normal" in2="effect1_dropShadow_left" result="effect2_dropShadow_left"/>
-              <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_left" result="shape"/>
-            </filter>
-          </defs>
-        </svg>
+        <div 
+          className="simple-card"
+          style={{
+            width: size * 0.8,
+            height: size * 1.1,
+            backgroundColor: currentColors.cardBg,
+            border: `3px solid ${currentColors.cardBorder}`,
+            borderRadius: '8px',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
+            position: 'relative'
+          }}
+        >
+          {/* Small fire icon in corner */}
+          <div style={{
+            position: 'absolute',
+            top: '8px',
+            left: '8px',
+            width: '16px',
+            height: '20px',
+            background: `linear-gradient(135deg, ${currentColors.fireAccent1}, ${currentColors.fireAccent2})`,
+            borderRadius: '50% 50% 50% 50% / 60% 60% 40% 40%',
+            opacity: 0.8
+          }} />
+        </div>
       </div>
 
-      {/* Center Card - Using exact SVG path */}
+      {/* Right Card - Simple rectangular card */}
+      <div className="card-right absolute" style={{ 
+        right: '25%', 
+        top: '50%', 
+        transform: 'translate(50%, -50%) rotate(20deg)',
+        zIndex: 10
+      }}>
+        <div 
+          className="simple-card"
+          style={{
+            width: size * 0.8,
+            height: size * 1.1,
+            backgroundColor: currentColors.cardBg,
+            border: `3px solid ${currentColors.cardBorder}`,
+            borderRadius: '8px',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
+            position: 'relative'
+          }}
+        >
+          {/* Small fire icon in corner */}
+          <div style={{
+            position: 'absolute',
+            top: '8px',
+            right: '8px',
+            width: '16px',
+            height: '20px',
+            background: `linear-gradient(135deg, ${currentColors.fireAccent1}, ${currentColors.fireAccent2})`,
+            borderRadius: '50% 50% 50% 50% / 60% 60% 40% 40%',
+            opacity: 0.8
+          }} />
+        </div>
+      </div>
+
+      {/* Center Card - Simple rectangular card, larger */}
       <div className="card-center absolute" style={{ 
         left: '50%', 
-        top: '42%', 
+        top: '48%', 
         transform: 'translate(-50%, -50%)',
         zIndex: 15
       }}>
-        <svg width={size * 1.47} height={size * 1.88} viewBox="0 0 147 188" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <g filter="url(#filter2_dd_center)">
-            <path className="card-center-bg" d="M101 145.661C101 139.586 105.925 134.661 112 134.661H215C221.075 134.661 226 139.586 226 145.661V289.661C226 295.736 221.075 300.661 215 300.661H112C105.925 300.661 101 295.736 101 289.661V145.661Z" fill={currentColors.cardBg}/>
-          </g>
-          <path d="M215 296.661V300.661H112V296.661H215ZM222 289.661V145.661C222 141.795 218.866 138.661 215 138.661H112C108.134 138.661 105 141.795 105 145.661V289.661C105 293.527 108.134 296.661 112 296.661V300.661L111.434 300.647C105.809 300.361 101.3 295.852 101.015 290.228L101 289.661V145.661C101 139.776 105.622 134.971 111.434 134.676L112 134.661H215C221.075 134.661 226 139.586 226 145.661V289.661C226 295.736 221.075 300.661 215 300.661V296.661C218.866 296.661 222 293.527 222 289.661Z" fill={currentColors.cardBorder}/>
-          
-          {/* Fire icon in center */}
-          <g transform="translate(163, 217)">
-            <path className="center-fire-icon" d="M181.609 201.765C188.88 205.293 188.88 237.652 161.249 237.888C151.904 237.968 141.259 232.089 140.169 222.734C139.078 213.378 143.639 208.674 143.639 208.674C143.639 208.674 146.342 215.945 150.523 216.491C150.523 216.491 146.968 207.015 154.785 198.835C162.603 190.654 160.434 183.661 160.434 183.661C160.434 183.661 177.713 193.075 173.247 210.492C173.247 210.492 178.519 208.233 181.609 201.765Z" fill={currentColors.cardBorder} transform="translate(-163, -217) scale(0.6)"/>
-            <path className="center-fire-accent" d="M152.315 218.732C154.661 207.266 162.935 212.747 160.854 196.676C160.854 196.676 174.608 204.058 170.65 220.084C173.309 220.372 176.973 217.713 178.329 215.568C178.329 215.568 177.37 230.976 161.725 230.976C154.439 230.976 151.446 222.98 152.315 218.732Z" fill="#EAC93E" transform="translate(-163, -217) scale(0.6)"/>
-          </g>
-          
-          <defs>
-            <filter id="filter2_dd_center" x="90" y="127.661" width="147" height="188" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
-              <feFlood floodOpacity="0" result="BackgroundImageFix"/>
-              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-              <feOffset dy="1"/>
-              <feGaussianBlur stdDeviation="1.5"/>
-              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
-              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_center"/>
-              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-              <feMorphology radius="3" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_center"/>
-              <feOffset dy="4"/>
-              <feGaussianBlur stdDeviation="4"/>
-              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
-              <feBlend mode="normal" in2="effect1_dropShadow_center" result="effect2_dropShadow_center"/>
-              <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_center" result="shape"/>
-            </filter>
-          </defs>
-        </svg>
+        <div 
+          className="simple-card"
+          style={{
+            width: size * 0.9,
+            height: size * 1.2,
+            backgroundColor: currentColors.cardBg,
+            border: `3px solid ${currentColors.cardBorder}`,
+            borderRadius: '8px',
+            boxShadow: '0 6px 16px rgba(0, 0, 0, 0.4)',
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}
+        >
+          {/* Centered fire icon */}
+          <div style={{
+            width: '24px',
+            height: '30px',
+            background: `linear-gradient(135deg, ${currentColors.fireAccent1}, ${currentColors.fireAccent2})`,
+            borderRadius: '50% 50% 50% 50% / 60% 60% 40% 40%',
+            opacity: 0.9,
+            position: 'relative'
+          }}>
+            {/* Inner flame accent */}
+            <div style={{
+              position: 'absolute',
+              top: '4px',
+              left: '50%',
+              transform: 'translateX(-50%)',
+              width: '12px',
+              height: '18px',
+              background: currentColors.fireAccent2,
+              borderRadius: '50% 50% 50% 50% / 60% 60% 40% 40%',
+              opacity: 0.8
+            }} />
+          </div>
+        </div>
       </div>
 
       <style jsx>{`
@@ -201,23 +207,19 @@ export default function AnimatedFireLogo({ size = 100 }) {
         .flame-small-4 { animation: flame-small 1.3s ease-in-out infinite alternate; animation-delay: -0.2s; }
         .flame-small-5 { animation: flame-small 1.5s ease-in-out infinite alternate; animation-delay: -0.4s; }
         
-        /* Card Animations */
+        /* Card Animations - Gentle floating */
         .card-center {
-          animation: card-float-center 3.5s ease-in-out infinite;
+          animation: card-float-center 4s ease-in-out infinite;
         }
         
         .card-left {
-          animation: card-float-left 4.2s ease-in-out infinite;
-          animation-delay: -0.8s;
+          animation: card-float-left 4.5s ease-in-out infinite;
+          animation-delay: -1s;
         }
         
         .card-right {
-          animation: card-float-right 3.8s ease-in-out infinite;
-          animation-delay: -1.2s;
-        }
-        
-        .center-fire-icon {
-          animation: icon-glow 2s ease-in-out infinite alternate;
+          animation: card-float-right 4.2s ease-in-out infinite;
+          animation-delay: -2s;
         }
         
         /* Fire Animations */
@@ -284,38 +286,33 @@ export default function AnimatedFireLogo({ size = 100 }) {
         
         @keyframes card-float-left {
           0%, 100% { 
-            transform: translate(-50%, -50%) rotate(0deg) scale(1);
+            transform: translate(-50%, -50%) rotate(-20deg) scale(1);
           }
           25% { 
-            transform: translate(-48%, -52%) rotate(-2deg) scale(1.01);
+            transform: translate(-48%, -52%) rotate(-19deg) scale(1.01);
           }
           50% { 
-            transform: translate(-52%, -50%) rotate(1deg) scale(0.99);
+            transform: translate(-52%, -50%) rotate(-21deg) scale(0.99);
           }
           75% { 
-            transform: translate(-50%, -48%) rotate(-1deg) scale(1.02);
+            transform: translate(-50%, -48%) rotate(-18deg) scale(1.02);
           }
         }
         
         @keyframes card-float-right {
           0%, 100% { 
-            transform: translate(50%, -50%) rotate(0deg) scale(1);
+            transform: translate(50%, -50%) rotate(20deg) scale(1);
           }
           25% { 
-            transform: translate(52%, -52%) rotate(2deg) scale(1.01);
+            transform: translate(52%, -52%) rotate(19deg) scale(1.01);
           }
           50% { 
-            transform: translate(48%, -50%) rotate(-1deg) scale(0.99);
+            transform: translate(48%, -50%) rotate(21deg) scale(0.99);
           }
           75% { 
-            transform: translate(50%, -48%) rotate(1deg) scale(1.02);
+            transform: translate(50%, -48%) rotate(18deg) scale(1.02);
           }
         }
-        
-        @keyframes icon-glow {
-          0% { opacity: 0.9; transform: scale(1); }
-          100% { opacity: 1; transform: scale(1.1); }
-        }
       `}</style>
     </div>
   );