feat: add new logo component and SVG logo asset

- Introduced a new Logo component in TypeScript that supports different sizes and optional text display.
- Added hover effects for the logo image.
- Included a new SVG logo asset for AvanzaCast.

packages/broadcast-panel/public/assets/images/app/logo_avanzacast_2.svg

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="500"
+   zoomAndPan="magnify"
+   viewBox="0 0 375 374.999991"
+   height="500"
+   preserveAspectRatio="xMidYMid meet"
+   version="1.0"
+   id="svg5"
+   sodipodi:docname="logo_avanzacast.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs5" />
+  <sodipodi:namedview
+     id="namedview5"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.598"
+     inkscape:cx="249.68711"
+     inkscape:cy="250"
+     inkscape:window-width="1920"
+     inkscape:window-height="1007"
+     inkscape:window-x="2560"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg5" />
+  <path
+     fill="#5e17eb"
+     d="M 316.738281 152.15625 L 98.78125 21.066406 C 70.617188 2.410156 33.015625 22.601562 33.015625 56.382812 L 33.015625 318.570312 C 33.015625 352.347656 70.617188 372.542969 98.78125 353.886719 L 125.273438 337.957031 C 112.703125 332.902344 103.800781 320.601562 103.800781 306.253906 L 103.800781 177.839844 C 103.800781 159 119.136719 143.679688 137.984375 143.679688 C 144.527344 143.679688 150.921875 145.585938 156.5 149.207031 L 263.285156 213.433594 L 263.527344 213.59375 C 273.09375 219.933594 278.804688 230.570312 278.804688 242.046875 C 278.804688 243.289062 278.726562 244.515625 278.597656 245.738281 L 316.738281 222.796875 C 342.027344 206.042969 342.027344 168.910156 316.738281 152.15625 "
+     fill-opacity="1"
+     fill-rule="nonzero"
+     id="path2" />
+  <path
+     fill="#ffeb99"
+     d="M 153.699219 260.164062 C 142.910156 260.164062 132.890625 251.585938 132.890625 239.378906 L 132.890625 157.699219 C 134.546875 157.277344 136.261719 157.054688 137.996094 157.054688 C 141.832031 157.054688 145.769531 158.140625 149.386719 160.535156 L 237.167969 213.332031 L 165.101562 256.679688 C 161.480469 259.078125 157.542969 260.164062 153.699219 260.164062 "
+     fill-opacity="1"
+     fill-rule="nonzero"
+     id="path3" />
+  <path
+     fill="#ffeb99"
+     d="M 132.890625 144.058594 L 132.890625 144.054688 C 134.507812 143.8125 136.164062 143.683594 137.847656 143.679688 C 136.164062 143.683594 134.507812 143.816406 132.890625 144.058594 M 137.867188 143.679688 C 137.875 143.679688 137.878906 143.679688 137.886719 143.679688 C 137.878906 143.679688 137.875 143.679688 137.867188 143.679688 M 137.917969 143.679688 C 137.925781 143.679688 137.929688 143.679688 137.9375 143.679688 C 137.929688 143.679688 137.925781 143.679688 137.917969 143.679688 "
+     fill-opacity="1"
+     fill-rule="nonzero"
+     id="path4" />
+  <path
+     fill="#8c52ff"
+     d="M 250.144531 205.527344 L 156.5 149.207031 C 150.921875 145.585938 144.527344 143.679688 137.984375 143.679688 C 137.96875 143.679688 137.953125 143.679688 137.9375 143.679688 C 137.929688 143.679688 137.925781 143.679688 137.917969 143.679688 C 137.910156 143.679688 137.898438 143.679688 137.886719 143.679688 C 137.878906 143.679688 137.875 143.679688 137.867188 143.679688 C 137.859375 143.679688 137.855469 143.679688 137.847656 143.679688 C 136.164062 143.683594 134.507812 143.8125 132.890625 144.054688 L 132.890625 110.964844 C 132.890625 98.757812 142.90625 90.179688 153.699219 90.179688 C 157.542969 90.179688 161.480469 91.265625 165.101562 93.664062 L 271.859375 157.871094 C 284.246094 166.078125 284.246094 184.261719 271.859375 192.472656 L 250.144531 205.527344 "
+     fill-opacity="1"
+     fill-rule="nonzero"
+     id="path5" />
+</svg>

packages/broadcast-panel/src/components/Sidebar.module.css

@@ -16,9 +16,8 @@
 .logoSection {
   display: flex;
   align-items: center;
-  padding: 20px;
+  padding: 16px 20px;
   border-bottom: 1px solid var(--border-light);
-  gap: 12px;
 }
 
 .logoIcon {
@@ -28,7 +27,7 @@
 }
 
 .logoText {
-  font-size: 18px;
+  font-size: 22px;
   font-weight: 600;
   color: var(--text-primary);
 }
@@ -116,7 +115,6 @@
   padding-left: 18px;
   /* match main nav left offset */
   width: calc(100% + 44px);
-  margin-left: -24px;
 }
 
 .storageTitle {

packages/broadcast-panel/src/components/Sidebar.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { MdHome, MdVideoLibrary, MdLink, MdPeople, MdCardGiftcard, MdSettings, MdAssessment } from 'react-icons/md'
 import { Tooltip } from './Tooltip'
+import { Logo } from '../../../../shared/components/Logo'
 import styles from './Sidebar.module.css'
 
 interface SidebarProps {
@@ -25,8 +26,7 @@ const Sidebar: React.FC<SidebarProps> = ({ activeLink = 'inicio' }) => {
     <aside className={styles.sidebar}>
       {/* Logo Section */}
       <div className={styles.logoSection}>
-        <img src="/assets/logo-icon.png" alt="Logo" className={styles.logoIcon} />
+        <Logo size="sm" showText={true} href="/broadcasts" />
-        <span className={styles.logoText}>AvanzaCast</span>
       </div>
 
       {/* Main Navigation */}

packages/landing-page/public/assets/images/app/logo_avanzacast_2.svg

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="500"
+   zoomAndPan="magnify"
+   viewBox="0 0 375 374.999991"
+   height="500"
+   preserveAspectRatio="xMidYMid meet"
+   version="1.0"
+   id="svg5"
+   sodipodi:docname="logo_avanzacast.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs5" />
+  <sodipodi:namedview
+     id="namedview5"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.598"
+     inkscape:cx="249.68711"
+     inkscape:cy="250"
+     inkscape:window-width="1920"
+     inkscape:window-height="1007"
+     inkscape:window-x="2560"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg5" />
+  <path
+     fill="#5e17eb"
+     d="M 316.738281 152.15625 L 98.78125 21.066406 C 70.617188 2.410156 33.015625 22.601562 33.015625 56.382812 L 33.015625 318.570312 C 33.015625 352.347656 70.617188 372.542969 98.78125 353.886719 L 125.273438 337.957031 C 112.703125 332.902344 103.800781 320.601562 103.800781 306.253906 L 103.800781 177.839844 C 103.800781 159 119.136719 143.679688 137.984375 143.679688 C 144.527344 143.679688 150.921875 145.585938 156.5 149.207031 L 263.285156 213.433594 L 263.527344 213.59375 C 273.09375 219.933594 278.804688 230.570312 278.804688 242.046875 C 278.804688 243.289062 278.726562 244.515625 278.597656 245.738281 L 316.738281 222.796875 C 342.027344 206.042969 342.027344 168.910156 316.738281 152.15625 "
+     fill-opacity="1"
+     fill-rule="nonzero"
+     id="path2" />
+  <path
+     fill="#ffeb99"
+     d="M 153.699219 260.164062 C 142.910156 260.164062 132.890625 251.585938 132.890625 239.378906 L 132.890625 157.699219 C 134.546875 157.277344 136.261719 157.054688 137.996094 157.054688 C 141.832031 157.054688 145.769531 158.140625 149.386719 160.535156 L 237.167969 213.332031 L 165.101562 256.679688 C 161.480469 259.078125 157.542969 260.164062 153.699219 260.164062 "
+     fill-opacity="1"
+     fill-rule="nonzero"
+     id="path3" />
+  <path
+     fill="#ffeb99"
+     d="M 132.890625 144.058594 L 132.890625 144.054688 C 134.507812 143.8125 136.164062 143.683594 137.847656 143.679688 C 136.164062 143.683594 134.507812 143.816406 132.890625 144.058594 M 137.867188 143.679688 C 137.875 143.679688 137.878906 143.679688 137.886719 143.679688 C 137.878906 143.679688 137.875 143.679688 137.867188 143.679688 M 137.917969 143.679688 C 137.925781 143.679688 137.929688 143.679688 137.9375 143.679688 C 137.929688 143.679688 137.925781 143.679688 137.917969 143.679688 "
+     fill-opacity="1"
+     fill-rule="nonzero"
+     id="path4" />
+  <path
+     fill="#8c52ff"
+     d="M 250.144531 205.527344 L 156.5 149.207031 C 150.921875 145.585938 144.527344 143.679688 137.984375 143.679688 C 137.96875 143.679688 137.953125 143.679688 137.9375 143.679688 C 137.929688 143.679688 137.925781 143.679688 137.917969 143.679688 C 137.910156 143.679688 137.898438 143.679688 137.886719 143.679688 C 137.878906 143.679688 137.875 143.679688 137.867188 143.679688 C 137.859375 143.679688 137.855469 143.679688 137.847656 143.679688 C 136.164062 143.683594 134.507812 143.8125 132.890625 144.054688 L 132.890625 110.964844 C 132.890625 98.757812 142.90625 90.179688 153.699219 90.179688 C 157.542969 90.179688 161.480469 91.265625 165.101562 93.664062 L 271.859375 157.871094 C 284.246094 166.078125 284.246094 184.261719 271.859375 192.472656 L 250.144531 205.527344 "
+     fill-opacity="1"
+     fill-rule="nonzero"
+     id="path5" />
+</svg>

packages/landing-page/src/components/ModernSaasFooter.tsx

@@ -4,6 +4,7 @@
  */
 
 import React, { useState } from 'react'
+import { Logo } from '../../../../shared/components/Logo'
 
 const ModernSaasFooter: React.FC = () => {
   const [newsletter, setNewsletter] = useState('')
@@ -68,15 +69,12 @@ const ModernSaasFooter: React.FC = () => {
           <div className="grid md:grid-cols-12 grid-cols-1 gap-[30px]">
             {/* Company Info */}
             <div className="lg:col-span-4 md:col-span-12">
-              <a href="/" className="flex items-center space-x-1.5 mb-4">
+              <Logo 
-                <img 
+                size="sm" 
-                  src="/logo_avanzacast.svg" 
+                showText={true}
-                  alt="AvanzaCast" 
+                className="mb-4 text-white"
-                  className="w-12 h-12"
+                href="/"
-                />
+              />
-                <span className="text-2xl text-white" style={{ fontFamily: 'Requiner, sans-serif' }}
-                >Avanza<span className="text-2xl font-bold text-white">Cast</span></span>
-              </a>
               <p className="text-slate-300 mb-6">
                 La plataforma profesional de multistreaming que transforma la manera en que creas y compartes contenido en vivo.
               </p>

packages/landing-page/src/components/ModernSaasHeader.tsx

@@ -5,6 +5,7 @@
 
 import React, { useState, useEffect } from 'react'
 import { useScrollSticky } from '../hooks/useScrollSticky'
+import { Logo } from '../../../../shared/components/Logo'
 
 const ModernSaasHeader: React.FC = () => {
   const isScrolled = useScrollSticky()
@@ -53,18 +54,12 @@ const ModernSaasHeader: React.FC = () => {
       <div className="container mx-auto px-4">
         <div className="flex items-center justify-between h-20">
           {/* Logo */}
-          <a href="/" className="flex items-center space-x-1.5 group">
+          <Logo 
-            <img 
+            size="md" 
-              src="/logo_avanzacast.svg" 
+            showText={true}
-              alt="AvanzaCast" 
+            className={`${isScrolled ? 'text-slate-900 dark:text-white' : 'text-slate-900 dark:text-white'}`}
-              className="w-14 h-14 transition-transform duration-300 group-hover:scale-110"
+            href="/"
-            />
+          />
-            <span className={`text-2xl transition-colors duration-300 ${
-              isScrolled ? 'text-slate-900 dark:text-white' : 'text-slate-900 dark:text-white'
-            }`} style={{ fontFamily: 'Requiner, sans-serif' }}>
-              Avanza<span className="font-bold">Cast</span>
-            </span>
-          </a>
 
           {/* Desktop Menu */}
           <div className="hidden lg:flex items-center space-x-8">

packages/landing-page/src/pages/Login.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { useNavigate, Link } from 'react-router-dom'
 import { useAuth } from '../hooks/useApi'
+import { Logo } from '../../../../shared/components/Logo'
 
 export default function Login(){
   const [email, setEmail] = useState('cesar@avanzacast.com')
@@ -30,13 +31,9 @@ export default function Login(){
         <div className="flex justify-center">
           <div className="max-w-[400px] w-full m-auto p-6 bg-white dark:bg-slate-900 shadow-md dark:shadow-gray-800 rounded-md">
             {/* Logo */}
-            <Link to="/" className="flex items-center justify-center mb-6">
+            <div className="flex items-center justify-center mb-6">
-              <img 
+              <Logo size="lg" showText={false} href="/" />
-                src="/logo_avanzacast.svg" 
+            </div>
-                alt="AvanzaCast" 
-                className="w-20 h-20"
-              />
-            </Link>
             
             <h5 className="my-6 text-xl font-semibold text-center">Iniciar Sesión</h5>
             

packages/landing-page/src/pages/Register.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { useNavigate, Link } from 'react-router-dom'
 import { useAuth } from '../hooks/useApi'
+import { Logo } from '../../../../shared/components/Logo'
 
 export default function Register(){
   const [name, setName] = useState('')
@@ -37,13 +38,9 @@ export default function Register(){
         <div className="flex justify-center">
           <div className="max-w-[400px] w-full m-auto p-6 bg-white dark:bg-slate-900 shadow-md dark:shadow-gray-800 rounded-md">
             {/* Logo */}
-            <Link to="/" className="flex items-center justify-center mb-6">
+            <div className="flex items-center justify-center mb-6">
-              <img 
+              <Logo size="lg" showText={false} href="/" />
-                src="/logo_avanzacast.svg" 
+            </div>
-                alt="AvanzaCast" 
-                className="w-20 h-20"
-              />
-            </Link>
             
             <h5 className="my-6 text-xl font-semibold text-center">Crear Cuenta</h5>
             

shared/components/Logo.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+
+interface LogoProps {
+  size?: 'sm' | 'md' | 'lg';
+  showText?: boolean;
+  className?: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+const sizeMap = {
+  sm: { width: 50, height: 50, fontSize: '18px' },
+  md: { width: 56, height: 56, fontSize: '24px' },
+  lg: { width: 80, height: 80, fontSize: '28px' }
+};
+
+export const Logo: React.FC<LogoProps> = ({ 
+  size = 'md', 
+  showText = true, 
+  className = '',
+  href = '/',
+  onClick
+}) => {
+  const dimensions = sizeMap[size];
+
+  const content = (
+    <>
+      <img 
+        src="/assets/images/app/logo_avanzacast.svg" 
+        alt="AvanzaCast" 
+        style={{ 
+          width: `${dimensions.width}px`, 
+          height: `${dimensions.height}px`,
+          transition: 'transform 0.3s ease'
+        }}
+        onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.1)'}
+        onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
+      />
+      {showText && (
+        <span 
+          style={{ 
+            fontSize: dimensions.fontSize,
+            fontFamily: 'Requiner, sans-serif',
+            transition: 'color 0.3s ease'
+          }}
+        >
+          Avanza<span style={{ fontWeight: 700 }}>Cast</span>
+        </span>
+      )}
+    </>
+  );
+
+  const containerStyle: React.CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px',
+    textDecoration: 'none',
+    color: 'inherit'
+  };
+
+  // Si hay onClick, renderizar como div clickeable
+  if (onClick) {
+    return (
+      <div 
+        onClick={onClick}
+        style={{ ...containerStyle, cursor: 'pointer' }}
+        className={className}
+      >
+        {content}
+      </div>
+    );
+  }
+
+  // Si no, renderizar como link
+  return (
+    <a 
+      href={href} 
+      style={containerStyle}
+      className={className}
+    >
+      {content}
+    </a>
+  );
+};

shared/components/index.ts

@@ -3,6 +3,7 @@ export { LanguageSelector } from './LanguageSelector';
 export { AuthButton } from './AuthButton';
 export { Modal } from './Modal';
 export type { ModalProps } from './Modal';
+export { Logo } from './Logo';
 
 // Modal parts - reusable components
 export { ModalLink } from './modal-parts/ModalLink';