Development

app/home/page.tsx

@@ -34,6 +34,7 @@ import {
   LeaderboardSection,
 } from '@/components/home';
 import { DEMO_CARDS } from '@/utils/constants/demos';
+import { BackgroundSnow } from '@/components/ui/christmas/BackgroundSnow';
 
 export default function HomePageContent() {
   const { isConnected } = useGlobalWallet();
@@ -230,6 +231,9 @@ export default function HomePageContent() {
 
   return (
     <div className='min-h-screen bg-gradient-to-br from-neutral-900 via-brand-900 to-neutral-900 relative overflow-hidden'>
+      {/* Christmas Background Snow */}
+      <BackgroundSnow />
+
       {/* Structured Data for SEO */}
       <script
         type='application/ld+json'

app/layout.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
+import '../styles/christmas-animations.css';
 import { config } from '@/lib/config';
 import { RootProviders } from './root';
 import { GoogleAnalytics } from '@/components/analytics/GoogleAnalytics';

components/home/HeroSection.tsx

@@ -2,6 +2,7 @@
 
 import Image from 'next/image';
 import { Tooltip } from '@/components/ui/Tooltip';
+import { ChristmasHat } from '@/components/ui/christmas/ChristmasHat';
 
 interface HeroSectionProps {
   isVideoPlaying: boolean;
@@ -30,7 +31,7 @@ export const HeroSection = ({
       <div className='text-center'>
         {/* Page Header */}
         <div className='text-center mb-16'>
-          <div className='flex justify-center mb-6'>
+          <div className='flex justify-center mb-6 relative'>
             <Image
               src='/images/logo/logoicon.png'
               alt='STELLAR NEXUS'
@@ -39,6 +40,15 @@ export const HeroSection = ({
               priority
               style={{ zIndex: -1, position: 'relative', width: 'auto', height: 'auto' }}
             />
+            <ChristmasHat
+              size={200}
+              style={{
+                position: 'absolute',
+                top: '25px',
+                right: 'calc(50% - 130px)',
+                zIndex: 10
+              }}
+            />
           </div>
 
           {/* Epic Legendary Background for Title */}
@@ -135,10 +145,9 @@ export const HeroSection = ({
                   text-white shadow-lg border-2 border-white/20 
 
                   // ✅ 2. ESTILOS CONDICIONALES BASADOS EN EL ESTADO ✅
-                  ${
-                    isTechTreeDisabled
-                      ? 'opacity-50 cursor-not-allowed transform scale-100' // Estado Deshabilitado
-                      : 'bg-gradient-to-r from-brand-500/20 to-accent-500/20 hover:from-brand-800/50 hover:to-accent-800/50 transform hover:scale-105 hover:shadow-xl hover:border-white/40' // Estado Habilitado
+                  ${isTechTreeDisabled
+                    ? 'opacity-50 cursor-not-allowed transform scale-100' // Estado Deshabilitado
+                    : 'bg-gradient-to-r from-brand-500/20 to-accent-500/20 hover:from-brand-800/50 hover:to-accent-800/50 transform hover:scale-105 hover:shadow-xl hover:border-white/40' // Estado Habilitado
                   }
                 `}
               >
@@ -190,11 +199,10 @@ export const HeroSection = ({
                       e.preventDefault();
                     }
                   }}
-                  className={`relative w-full md:w-auto px-6 md:px-8 py-4 font-bold rounded-xl transition-all duration-300 flex items-center justify-center space-x-3 transform shadow-lg border-2 ${
-                    miniGamesUnlocked
-                      ? '!animate-none bg-gradient-to-r from-brand-500 to-accent-500 hover:from-brand-600 hover:to-accent-600 text-white hover:scale-105 hover:shadow-xl border-white/20 hover:border-white/40 cursor-pointer '
-                      : 'bg-gray-600 text-gray-400 border-gray-600 cursor-not-allowed'
-                  }`}
+                  className={`relative w-full md:w-auto px-6 md:px-8 py-4 font-bold rounded-xl transition-all duration-300 flex items-center justify-center space-x-3 transform shadow-lg border-2 ${miniGamesUnlocked
+                    ? '!animate-none bg-gradient-to-r from-brand-500 to-accent-500 hover:from-brand-600 hover:to-accent-600 text-white hover:scale-105 hover:shadow-xl border-white/20 hover:border-white/40 cursor-pointer '
+                    : 'bg-gray-600 text-gray-400 border-gray-600 cursor-not-allowed'
+                    }`}
                   title={
                     isLoadingAccount && isConnected
                       ? 'Loading your account...'

components/layout/Footer.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { appConfig, stellarConfig } from '@/lib/stellar/wallet-config';
+import { ChristmasHat } from '@/components/ui/christmas/ChristmasHat';
 import Image from 'next/image';
 
 export const Footer = () => {
@@ -13,13 +14,22 @@ export const Footer = () => {
           {/* App Information */}
           <div className='max-w-2xl mx-auto'>
             <div className='flex items-center justify-center space-x-3 mb-4'>
-              <div className='-mt-4'>
+              <div className='-mt-4 relative inline-block'>
                 <Image
                   src='/images/logo/logoicon.png'
                   alt='STELLAR NEXUS'
                   width={150}
                   height={150}
                 />
+                <ChristmasHat
+                  size={105}
+                  style={{
+                    position: 'absolute',
+                    top: '-5px',
+                    right: '15px',
+                    zIndex: 10
+                  }}
+                />
               </div>
               <div>
                 <Image

components/layout/Header.tsx

@@ -8,6 +8,7 @@ import { Tooltip } from '@/components/ui/Tooltip';
 import { UserDropdown } from '@/components/ui/navigation/UserDropdown';
 import { RewardsSidebar } from '@/components/ui/RewardsSidebar';
 import { NotificationBell } from '@/components/ui/NotificationBell';
+import { ChristmasHat } from '@/components/ui/christmas/ChristmasHat';
 import Image from 'next/image';
 
 export const Header = () => {
@@ -95,14 +96,23 @@ export const Header = () => {
           {/* Logo and App Name */}
           <div className='flex items-center space-x-1'>
             <div className='flex items-center space-x-2'>
-              <a href='/' className='hover:opacity-80 transition-opacity duration-300'>
+              <a href='/' className='hover:opacity-80 transition-opacity duration-300 relative inline-block'>
                 <Image
                   src='/images/logo/iconletter.png'
                   alt='STELLAR NEXUS'
                   width={80}
                   height={24}
                   style={{ width: 'auto', height: 'auto' }}
                 />
+                <ChristmasHat
+                  size={35}
+                  style={{
+                    position: 'absolute',
+                    top: '-18px',
+                    right: '-5px',
+                    zIndex: 10
+                  }}
+                />
               </a>
               <span className='font-bold'>Web3 Experience</span>
               <p className='text-xs text-white/60'>v{appConfig.version}</p>
@@ -281,8 +291,8 @@ export const Header = () => {
                     }
                   }}
                   className={`block px-3 py-2 rounded-md transition-colors ${miniGamesUnlocked
-                      ? 'text-white/80 hover:text-white hover:bg-white/10'
-                      : 'text-white/40 cursor-not-allowed'
+                    ? 'text-white/80 hover:text-white hover:bg-white/10'
+                    : 'text-white/40 cursor-not-allowed'
                     }`}
                 >
                   <div className='flex items-center space-x-2'>

components/layout/NexusPrime.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import Image from 'next/image';
+import { ChristmasHat } from '@/components/ui/christmas/ChristmasHat';
 
 interface NexusPrimeProps {
   currentPage?: string;
@@ -159,12 +160,12 @@ export const NexusPrime: React.FC<NexusPrimeProps> = ({
       if (
         gameId &&
         characterMessages['mini-games'].games[
-          gameId as keyof (typeof characterMessages)['mini-games']['games']
+        gameId as keyof (typeof characterMessages)['mini-games']['games']
         ]
       ) {
         const gameMessages =
           characterMessages['mini-games'].games[
-            gameId as keyof (typeof characterMessages)['mini-games']['games']
+          gameId as keyof (typeof characterMessages)['mini-games']['games']
           ];
         // Rotate through different message types for variety
         const messageTypes = [gameMessages.welcome, gameMessages.tips, gameMessages.encouragement];
@@ -435,6 +436,17 @@ export const NexusPrime: React.FC<NexusPrimeProps> = ({
                 </div>
               )}
             </div>
+
+            {/* Christmas Hat on NexusPrime */}
+            <ChristmasHat
+              size={85}
+              style={{
+                position: 'absolute',
+                top: '-26px',
+                right: '22px',
+                zIndex: 20
+              }}
+            />
           </div>
 
           {/* Speech Bubble - Don't show during loading */}
@@ -537,11 +549,10 @@ export const NexusPrime: React.FC<NexusPrimeProps> = ({
                       <button
                         onClick={previousTutorialStep}
                         disabled={tutorialStep === 0}
-                        className={`flex-1 px-2 py-1.5 text-xs rounded-lg transition-colors border ${
-                          tutorialStep === 0
-                            ? 'bg-white/5 text-white/30 border-white/10 cursor-not-allowed'
-                            : 'bg-white/10 hover:bg-white/20 text-white border-white/20 hover:border-white/30'
-                        }`}
+                        className={`flex-1 px-2 py-1.5 text-xs rounded-lg transition-colors border ${tutorialStep === 0
+                          ? 'bg-white/5 text-white/30 border-white/10 cursor-not-allowed'
+                          : 'bg-white/10 hover:bg-white/20 text-white border-white/20 hover:border-white/30'
+                          }`}
                       >
                         ← Previous
                       </button>

components/ui/NotificationBell.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useRef } from 'react';
 import { useAccount } from '@/contexts/auth/AccountContext';
 import { notificationService, Notification } from '@/lib/services/notification-service';
 import { useRouter } from 'next/navigation';
+import { getBadgeIcon } from '@/utils/constants/badges/assets';
 
 export const NotificationBell: React.FC = () => {
   const { account } = useAccount();
@@ -138,6 +139,21 @@ export const NotificationBell: React.FC = () => {
     }
   };
 
+  const getBadgeNotificationColor = (badgeId?: string) => {
+    switch (badgeId) {
+      case 'escrow_expert':
+        return 'bg-blue-500/20'; // Blue for Escrow Expert
+      case 'trust_guardian':
+        return 'bg-orange-500/20'; // Orange for Trust Guardian
+      case 'stellar_champion':
+        return 'bg-pink-500/20'; // Pink for Stellar Champion
+      case 'nexus_master':
+        return 'bg-green-500/20'; // Green for Nexus Master
+      default:
+        return 'bg-gray-500/20'; // Default gray
+    }
+  };
+
   const formatTimeAgo = (timestamp: any) => {
     const now = new Date();
     const notificationDate = timestamp.toDate();
@@ -207,17 +223,12 @@ export const NotificationBell: React.FC = () => {
                   <button
                     key={notification.id}
                     onClick={() => handleNotificationClick(notification)}
-                    className={`w-full text-left p-3 rounded-lg border transition-all duration-200 hover:scale-[1.02] ${
-                      notification.read
-                        ? 'bg-white/5 border-white/10 opacity-60'
-                        : `bg-gradient-to-br ${getNotificationColor(notification.type)}`
-                    }`}
+                    className={`w-full text-left p-3 rounded-lg border transition-all duration-200 hover:scale-[1.02] ${notification.read
+                      ? 'bg-white/5 border-white/10 opacity-60'
+                      : `bg-gradient-to-br ${getNotificationColor(notification.type)}`
+                      }`}
                   >
                     <div className='flex items-start gap-3'>
-                      {/* Icon */}
-                      <div className='text-2xl flex-shrink-0'>
-                        {getNotificationIcon(notification.type)}
-                      </div>
 
                       {/* Content */}
                       <div className='flex-1 min-w-0'>
@@ -245,8 +256,15 @@ export const NotificationBell: React.FC = () => {
                           )}
                           {/* Mostrar Insignia Ganada (NUEVO) */}
                           {notification.data?.badgeName && (
-                            <div className='inline-flex items-center gap-1 text-xs font-semibold text-purple-400 bg-purple-500/20 px-2 py-1 rounded'>
-                              🏅 {notification.data.badgeName}
+                            <div className={`inline-flex items-center gap-1 text-xs font-semibold text-white ${getBadgeNotificationColor(notification.data.badgeId)} px-2 py-1 rounded`}>
+                              {notification.data.badgeId ? (
+                                <span className="w-4 h-4 flex items-center justify-center">
+                                  {getBadgeIcon(notification.data.badgeId, 'w-4 h-4')}
+                                </span>
+                              ) : (
+                                '🏅'
+                              )}
+                              {notification.data.badgeName}
                             </div>
                           )}
                         </div>