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.
2025-11-06 11:05:31 -07:00 · 2025-11-06 11:05:31 -07:00 · c7a4f163b2
commit c7a4f163b2
parent 3b524d1c23
14 changed files with 3513 additions and 41 deletions
--- a/packages/broadcast-panel/public/assets/images/app/logo_avanzacast.png
+++ b/packages/broadcast-panel/public/assets/images/app/logo_avanzacast.png
--- a/packages/broadcast-panel/public/assets/images/app/logo_avanzacast.svg
+++ b/packages/broadcast-panel/public/assets/images/app/logo_avanzacast.svg
--- a/packages/broadcast-panel/public/assets/images/app/logo_avanzacast_2.svg
+++ b/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>
--- a/packages/broadcast-panel/src/components/Sidebar.module.css
+++ b/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 {
--- a/packages/broadcast-panel/src/components/Sidebar.tsx
+++ b/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} />
-        <span className={styles.logoText}>AvanzaCast</span>
+        <Logo size="sm" showText={true} href="/broadcasts" />
      </div>

      {/* Main Navigation */}
--- a/packages/landing-page/public/assets/images/app/logo_avanzacast.png
+++ b/packages/landing-page/public/assets/images/app/logo_avanzacast.png
--- a/packages/landing-page/public/assets/images/app/logo_avanzacast.svg
+++ b/packages/landing-page/public/assets/images/app/logo_avanzacast.svg
--- a/packages/landing-page/public/assets/images/app/logo_avanzacast_2.svg
+++ b/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>
--- a/packages/landing-page/src/components/ModernSaasFooter.tsx
+++ b/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">
-                <img 
-                  src="/logo_avanzacast.svg" 
-                  alt="AvanzaCast" 
-                  className="w-12 h-12"
-                />
-                <span className="text-2xl text-white" style={{ fontFamily: 'Requiner, sans-serif' }}
-                >Avanza<span className="text-2xl font-bold text-white">Cast</span></span>
-              </a>
+              <Logo 
+                size="sm" 
+                showText={true}
+                className="mb-4 text-white"
+                href="/"
+              />
              <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>
--- a/packages/landing-page/src/components/ModernSaasHeader.tsx
+++ b/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">
-            <img 
-              src="/logo_avanzacast.svg" 
-              alt="AvanzaCast" 
-              className="w-14 h-14 transition-transform duration-300 group-hover:scale-110"
-            />
-            <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>
+          <Logo 
+            size="md" 
+            showText={true}
+            className={`${isScrolled ? 'text-slate-900 dark:text-white' : 'text-slate-900 dark:text-white'}`}
+            href="/"
+          />

          {/* Desktop Menu */}
          <div className="hidden lg:flex items-center space-x-8">
--- a/packages/landing-page/src/pages/Login.tsx
+++ b/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">
-              <img 
-                src="/logo_avanzacast.svg" 
-                alt="AvanzaCast" 
-                className="w-20 h-20"
-              />
-            </Link>
+            <div className="flex items-center justify-center mb-6">
+              <Logo size="lg" showText={false} href="/" />
+            </div>
            
            <h5 className="my-6 text-xl font-semibold text-center">Iniciar Sesión</h5>
            
--- a/packages/landing-page/src/pages/Register.tsx
+++ b/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">
-              <img 
-                src="/logo_avanzacast.svg" 
-                alt="AvanzaCast" 
-                className="w-20 h-20"
-              />
-            </Link>
+            <div className="flex items-center justify-center mb-6">
+              <Logo size="lg" showText={false} href="/" />
+            </div>
            
            <h5 className="my-6 text-xl font-semibold text-center">Crear Cuenta</h5>
            
--- a/shared/components/Logo.tsx
+++ b/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>
+  );
+};
--- a/shared/components/index.ts
+++ b/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';