+ {/* Browser Bar */}
+
+
+
+ studio.avanzacast.com
+
+
- {/* Video Preview */}
-
-
-
-
-
Vista previa de tu transmisión
+ {/* Video Preview */}
+
+
+
-
- {/* Live Indicator */}
-
-
- {/* Viewer Count */}
-
- 👁️ 1,234 espectadores
-
-
- {/* Platform Indicators */}
-
- {['🎥', '🟣', '👥'].map((emoji, i) => (
-
- {emoji}
-
- ))}
+
Vista previa de tu transmisión
- {/* Controls */}
-
-
- {[
- { icon: '🎤', label: 'Mic' },
- { icon: '📹', label: 'Cam' },
- { icon: '🖥️', label: 'Screen' },
- ].map((ctrl, i) => (
-
- ))}
-
-
+ {/* Live Indicator */}
+
-
- {/* Floating Elements */}
-
- ✓ Conectado a 3 plataformas
-
-
- 📊 Analytics en tiempo real
-
+
+ {/* Decorative Elements - Estilo index-saas.html */}
+
+
+
+
+
);
diff --git a/packages/landing-page/src/index.css b/packages/landing-page/src/index.css
index 313eaa6..d3243e6 100644
--- a/packages/landing-page/src/index.css
+++ b/packages/landing-page/src/index.css
@@ -1,19 +1,80 @@
+@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,500,600,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
+
@tailwind base;
@tailwind components;
@tailwind utilities;
+@layer base {
+ body {
+ @apply font-nunito text-base leading-relaxed bg-white dark:bg-slate-900 text-gray-900 dark:text-white;
+ }
+
+ p {
+ @apply leading-relaxed;
+ }
+
+ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+ @apply leading-normal font-semibold;
+ }
+
+ ::selection {
+ @apply bg-indigo-600/90 text-white;
+ }
+
+ /* Form inputs base styles */
+ .form-input {
+ @apply bg-white dark:bg-slate-900 border-gray-200 dark:border-gray-800 focus:border-indigo-600 focus:ring-0;
+ }
+}
+
@layer components {
- .panel { @apply bg-white rounded-lg shadow-sm border border-slate-200; }
- .btn { @apply inline-flex items-center justify-center px-3 py-1.5 rounded-md bg-slate-800 text-white text-sm; }
- .btn-ghost { @apply bg-transparent text-slate-700; }
- .input { @apply border border-slate-200 rounded-md px-3 py-2 text-sm bg-white; }
- .nav-item { @apply w-full text-left px-3 py-2 rounded-md text-sm text-slate-700 hover:bg-slate-50; }
- .nav-item.active { @apply bg-slate-100 font-medium; }
+ /* Techwind Software Components */
+ .container {
+ @apply mx-auto px-4;
+ }
+
+ /* Buttons */
+ .btn {
+ @apply inline-flex items-center justify-center font-semibold tracking-wide border align-middle duration-500 text-base text-center rounded-md;
+ }
+
+ .btn-primary {
+ @apply bg-indigo-600 hover:bg-indigo-700 border-indigo-600 hover:border-indigo-700 text-white;
+ }
+
+ .btn-orange {
+ @apply bg-orange-500 hover:bg-orange-600 border-orange-500 hover:border-orange-600 text-white;
+ }
+
+ /* Feature Cards */
+ .feature-card {
+ @apply group relative hover:bg-white dark:hover:bg-slate-900 hover:shadow dark:hover:shadow-gray-800 p-6 duration-500 rounded-xl overflow-hidden text-center;
+ }
+
+ .feature-icon-bg {
+ @apply size-28 fill-indigo-600/5 dark:fill-white/5 mx-auto bg-indigo-600/5 rounded-full;
+ }
+
+ /* Pricing Cards */
+ .pricing-card {
+ @apply p-6 bg-white dark:bg-slate-900 rounded-xl shadow dark:shadow-gray-800;
+ }
+
+ .pricing-card-featured {
+ @apply shadow-xl rounded-xl p-6 bg-gradient-to-t from-indigo-600 to-indigo-500 scale-105;
+ }
+
+ /* Shape divider */
+ .shape {
+ @apply absolute sm:-bottom-px -bottom-[2px] start-0 end-0 overflow-hidden;
+ }
}
@layer utilities {
- .font-sans { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
-
/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
display: none;
@@ -24,6 +85,20 @@
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
+
+ /* Text utilities */
+ .text-dark {
+ color: #3c4858;
+ }
+
+ .text-black {
+ color: #161c2d;
+ }
+
+ /* Background patterns */
+ .bg-pattern {
+ background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ }
}
/* Broadcasts (Transmisiones) specific */
@@ -141,3 +216,231 @@
.animate-slideDown {
animation: slideDown 0.3s ease-out;
}
+
+/* Techwind Helper Styles */
+/* Cookies */
+.cookie-popup-not-accepted {
+ @apply block;
+ animation: cookie-popup-in .5s ease forwards;
+}
+
+.cookie-popup-accepted {
+ @apply hidden;
+}
+
+@keyframes cookie-popup-in {
+ from {
+ bottom: -6.25rem;
+ }
+ to {
+ bottom: 1.25rem;
+ }
+}
+
+/* Preloader */
+#preloader {
+ background-image: linear-gradient(45deg, #ffffff, #ffffff);
+ z-index: 99999;
+ @apply fixed inset-0;
+}
+
+#preloader #status {
+ @apply absolute start-0 end-0 top-1/2 -translate-y-1/2;
+}
+
+#preloader #status .spinner {
+ @apply size-10 relative my-[100px] mx-auto;
+}
+
+#preloader #status .spinner .double-bounce1,
+#preloader #status .spinner .double-bounce2 {
+ @apply w-full h-full rounded-full bg-indigo-600/60 absolute top-0 start-0;
+ animation: sk-bounce 2.0s infinite ease-in-out;
+}
+
+#preloader #status .spinner .double-bounce2 {
+ animation-delay: -1.0s;
+}
+
+@keyframes sk-bounce {
+ 0%, 100% {
+ transform: scale(0.0);
+ }
+ 50% {
+ transform: scale(1.0);
+ }
+}
+
+/* Switcher */
+.label .ball {
+ transition: transform 0.2s linear;
+ @apply translate-x-0;
+}
+
+.checkbox:checked + .label .ball {
+ @apply translate-x-6;
+}
+
+/* Mover animation */
+.mover {
+ animation: mover 1.5s infinite alternate;
+}
+
+@keyframes mover {
+ 0% {
+ transform: translateY(0);
+ }
+ 100% {
+ transform: translateY(10px);
+ }
+}
+
+/* Background effect for hero sections */
+.background-effect .circles li {
+ @apply absolute block -bottom-[150px] bg-indigo-600/30;
+ animation: animate-circles 25s linear infinite;
+}
+
+.background-effect .circles li.brand-img:nth-child(1),
+.background-effect .circles li.brand-img:nth-child(2),
+.background-effect .circles li.brand-img:nth-child(3),
+.background-effect .circles li.brand-img:nth-child(4),
+.background-effect .circles li.brand-img:nth-child(5),
+.background-effect .circles li.brand-img:nth-child(6),
+.background-effect .circles li.brand-img:nth-child(7),
+.background-effect .circles li.brand-img:nth-child(8),
+.background-effect .circles li.brand-img:nth-child(9),
+.background-effect .circles li.brand-img:nth-child(10) {
+ @apply bg-transparent;
+}
+
+.background-effect .circles li:nth-child(1),
+.background-effect .circles li:nth-child(2),
+.background-effect .circles li:nth-child(3),
+.background-effect .circles li:nth-child(4),
+.background-effect .circles li:nth-child(5),
+.background-effect .circles li:nth-child(6),
+.background-effect .circles li:nth-child(7),
+.background-effect .circles li:nth-child(8),
+.background-effect .circles li:nth-child(9),
+.background-effect .circles li:nth-child(10) {
+ @apply size-12;
+}
+
+.background-effect .circles li:nth-child(1) {
+ @apply start-1/4;
+ animation-delay: 0s;
+}
+
+.background-effect .circles li:nth-child(2) {
+ @apply start-[10%];
+ animation-delay: 2s;
+ animation-duration: 12s;
+}
+
+.background-effect .circles li:nth-child(3) {
+ @apply start-[70%];
+ animation-delay: 4s;
+}
+
+.background-effect .circles li:nth-child(4) {
+ @apply start-[40%];
+ animation-delay: 0s;
+ animation-duration: 18s;
+}
+
+.background-effect .circles li:nth-child(5) {
+ @apply start-[65%];
+ animation-delay: 0s;
+}
+
+.background-effect .circles li:nth-child(6) {
+ @apply start-3/4;
+ animation-delay: 3s;
+}
+
+.background-effect .circles li:nth-child(7) {
+ @apply start-[35%];
+ animation-delay: 7s;
+}
+
+.background-effect .circles li:nth-child(8) {
+ @apply start-1/2;
+ animation-delay: 15s;
+ animation-duration: 45s;
+}
+
+.background-effect .circles li:nth-child(9) {
+ @apply start-[20%];
+ animation-delay: 2s;
+ animation-duration: 35s;
+}
+
+.background-effect .circles li:nth-child(10) {
+ @apply start-[85%];
+ animation-delay: 0s;
+ animation-duration: 11s;
+}
+
+@keyframes animate-circles {
+ 0% {
+ transform: translateY(0) rotate(0deg);
+ opacity: 1;
+ border-radius: 10px;
+ }
+ 100% {
+ transform: translateY(-1000px) rotate(720deg);
+ opacity: 0;
+ }
+}
+
+/* Kenburn Effect */
+.image-wrap {
+ animation: 100s ppb_kenburns linear infinite alternate;
+}
+
+@keyframes ppb_kenburns {
+ 0% {
+ transform: scale(1.3) translate(-10%, 10%);
+ }
+ 25% {
+ transform: scale(1) translate(0, 0);
+ }
+ 50% {
+ transform: scale(1.3) translate(10%, 10%);
+ }
+ 75% {
+ transform: scale(1) translate(0, 0);
+ }
+ 100% {
+ transform: scale(1.3) translate(-10%, 10%);
+ }
+}
+
+/* Blob Animation for Hero Section */
+@keyframes blob {
+ 0% {
+ transform: translate(0px, 0px) scale(1);
+ }
+ 33% {
+ transform: translate(30px, -50px) scale(1.1);
+ }
+ 66% {
+ transform: translate(-20px, 20px) scale(0.9);
+ }
+ 100% {
+ transform: translate(0px, 0px) scale(1);
+ }
+}
+
+.animate-blob {
+ animation: blob 7s infinite;
+}
+
+.animation-delay-2000 {
+ animation-delay: 2s;
+}
+
+.animation-delay-4000 {
+ animation-delay: 4s;
+}
diff --git a/packages/landing-page/src/pages/NextreamLanding.tsx b/packages/landing-page/src/pages/NextreamLanding.tsx
index 113fbbe..a13c906 100644
--- a/packages/landing-page/src/pages/NextreamLanding.tsx
+++ b/packages/landing-page/src/pages/NextreamLanding.tsx
@@ -1,29 +1,53 @@
-import React from 'react';
-import PageContainer from '../components/PageContainer';
-import NextreamHeader from '../components/NextreamHeader';
-import NextreamHeroSection from '../components/NextreamHeroSection';
-import NewFeaturesGrid from '../components/NewFeaturesGrid';
-import NewContentDetailsSection from '../components/NewContentDetailsSection';
-import NewTestimonialsCarousel from '../components/NewTestimonialsCarousel';
-import NewCallToAction from '../components/NewCallToAction';
-import NewFooter from '../components/NewFooter';
+/**
+ * AvanzaCast Landing Page - Modern SaaS Style
+ * Basado en Techwind Modern SaaS Template
+ * Enfocado en streaming multiplatforma y broadcasting profesional
+ */
+
+import React, { useEffect } from 'react'
+import feather from 'feather-icons'
+import ModernSaasHeader from '../components/ModernSaasHeader'
+import StreamingHeroSection from '../components/StreamingHeroSection'
+import StreamingFeatures from '../components/StreamingFeatures'
+import PlatformLogos from '../components/PlatformLogos'
+import TestimonialsSection from '../components/TestimonialsSection'
+import PricingSection from '../components/PricingSection'
+import ModernSaasFooter from '../components/ModernSaasFooter'
+import ScrollToTop from '../components/ScrollToTop'
const NextreamLanding: React.FC = () => {
- return (
-
- );
-};
+ useEffect(() => {
+ // Inicializar Feather Icons
+ feather.replace()
+ }, [])
-export default NextreamLanding;
+ return (
+
+ {/* Modern SaaS Header */}
+
+
+ {/* Hero Section - Estilo index-saas.html */}
+
+
+ {/* Business Partner / Platform Logos */}
+
+
+ {/* Features Section - Estilo index-saas.html */}
+
+
+ {/* Testimonials Section */}
+
+
+ {/* Pricing Section */}
+
+
+ {/* Modern SaaS Footer */}
+
+
+ {/* Scroll to Top Button */}
+
+
+ )
+}
+
+export default NextreamLanding
diff --git a/packages/landing-page/src/pages/index.tsx b/packages/landing-page/src/pages/index.tsx
index d6e901f..700df7b 100644
--- a/packages/landing-page/src/pages/index.tsx
+++ b/packages/landing-page/src/pages/index.tsx
@@ -1,88 +1,542 @@
/**
- * AvanzaCast Landing Page - Plataforma de Streaming Profesional
- * SaaS optimizado para creadores de contenido, empresas y educadores
- * Enfocado en multistreaming, broadcasting y grabación en la nube
+ * AvanzaCast Landing Page - Modern SaaS Style
+ * Basado en Techwind Modern SaaS Template
+ * Enfocado en streaming multiplatforma y broadcasting profesional
*/
-import StreamingHeroSection from '../components/StreamingHeroSection';
-import StreamingStats from '../components/StreamingStats';
-import PlatformLogos from '../components/PlatformLogos';
-import StreamingFeatures from '../components/StreamingFeatures';
-import StudioPreview from '../components/StudioPreview';
-import TestimonialsSection from '../components/TestimonialsSection';
-import PricingSection from '../components/PricingSection';
+'use client'
+
+import { useState } from 'react'
+
+export default function Home() {
+ const [email, setEmail] = useState('')
+
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault()
+ console.log('Email submitted:', email)
+ }
-export default function LandingPage() {
return (
-
-
-
-
-
-
-
-
-
- {/* CTA Final */}
-
-
-
- ¿Listo para Revolucionar tus Transmisiones?
-
-
- Únete a miles de creadores que ya confían en AvanzaCast para sus streams profesionales
-
-
+
+ {/* Hero Section - Modern SaaS Style */}
+
+
+
+
+
+
+ La forma más fácil de transmitir a múltiples plataformas
+
+
+ Lanza tu transmisión en vivo a YouTube, Twitch, Facebook, LinkedIn y más. Todo desde un solo lugar con calidad profesional.
+
+
+
+
+
+
+
+ ¿Buscas ayuda? Contáctanos
+
+
+
+
+
+
+
+
+ {/* Studio mockup */}
+
+
+
+ ● EN VIVO
+
+
Estudio Virtual en el Navegador
+
+
+
+
+ {/* Floating card - Viewer stats */}
+
+
+ {/* Floating card - Streaming progress */}
+
+
Transmitiendo a 5 plataformas
+
+ En progreso
+ 100%
+
+
+
+
+
+
+
+
+
+ {/* Brand Section */}
+
+
+
+
+
+ La mejor plataforma de streaming
para crear contenido en
+ vivo profesional.
+
+
+ Comienza a transmitir con AvanzaCast, la plataforma que puede ofrecerte todo lo necesario para generar audiencia, aumentar el tráfico y conectar con tu comunidad.
+
+
+
+ {/* Video Preview Section */}
+
+
+
+ {/* Video placeholder */}
+
+
+
Ver Demo del Estudio Virtual
+
Transmisión multiplatforma en acción
+
+
+
+
+
+
+
+
+
+ {/* Features Section */}
+
+ {/* Why Everyone Loves AvanzaCast */}
+
+
+
+ Por qué todos aman AvanzaCast
+
+
+ La plataforma de streaming que necesitas para crear contenido profesional y llegar a más audiencia en menos tiempo.
+
+
+
+ {/* Feature 1 - Multistreaming */}
+
+
+

+
+
+
+
+
+ Transmisión Multiplatforma
Alcanza Más Audiencia
+
+
+ Transmite simultáneamente a YouTube, Twitch, Facebook, LinkedIn, TikTok y más. Con AvanzaCast, tu contenido llega a todas partes con un solo clic. No más configuraciones complicadas ni software pesado.
+
+
+ - Streaming a 15+ plataformas simultáneamente
+ - Configuración en segundos sin software adicional
+ - Calidad hasta 4K Ultra HD
+
+
+
+
+
+
+
+ {/* Feature 2 - Cloud Recording */}
+
+
+
+

+
+
+
+
+
+ Grabación Automática en la Nube
+
+
+ Todas tus transmisiones se graban automáticamente en la nube con calidad profesional. Accede, edita y comparte tus videos cuando quieras. Almacenamiento ilimitado disponible.
+
+
+ - Grabación automática de todas las sesiones
+ - Almacenamiento seguro en la nube
+ - Descarga y comparte en cualquier momento
+
+
+
+
+
+
+
+ {/* Testimonials Section */}
+
+
+
Testimonios
+
+ Lo que dicen nuestros usuarios
+
+
+ Creadores de contenido, empresas y educadores confían en AvanzaCast para sus transmisiones en vivo.
+
+
+
+
+ {/* Testimonial 1 */}
+
+
+
+
+ "AvanzaCast revolucionó mi forma de hacer streaming. Ahora llego a todas mis plataformas simultáneamente sin complicaciones."
+
+
+
+
+
+
+
+
Carlos Mendoza
+
Creador de Contenido
+
+
+
+ {/* Testimonial 2 */}
+
+
+
+
+ "La calidad de grabación es excepcional. Mis podcasts nunca se habían visto tan profesionales. ¡Totalmente recomendado!"
+
+
+
+
+
+
+
+
María González
+
Podcaster
+
+
+
+ {/* Testimonial 3 */}
+
+
+
+
+ "Perfecto para nuestros webinars corporativos. La función de invitados remotos funciona sin problemas."
+
+
+
+
+
+
+
+
Roberto Silva
+
Director de Marketing
+
+
+
+
+
+ {/* Pricing Section - Modern SaaS Style */}
+
+
+
+
+
+ Planes cómodos y accesibles
+
+
+ Comienza con AvanzaCast y elige el plan que mejor se adapte a tus necesidades. Actualiza o cancela cuando quieras.
+
+
+
+
+
+
+
+
+ {/* Starter Plan */}
+
+
+
Básico
+
+ $
+ 29
+ /mes
+
+
+
+ - 5 destinos streaming
+ - 1080p Full HD
+ - 100GB almacenamiento
+ - Soporte prioritario
+
+
+ Comenzar
+
+
+
+
+ {/* Professional Plan */}
+
+
+
Profesional
+
+ $
+ 79
+ /mes
+
+
+
+ - Destinos ilimitados
+ - 4K Ultra HD
+ - Almacenamiento ilimitado
+ - Soporte 24/7
+
+
+ Pruébalo Ahora
+
+
+
+
+
+
+
+
+
+ {/* FAQ Section */}
+
+
+
+ Preguntas Frecuentes
+
+
+ Respuestas a las preguntas más comunes sobre AvanzaCast y el streaming profesional.
+
+
+
+
+
+
+

+
+
+
+
+
+ {/* FAQ 1 */}
+
+
+
+ ¿Cómo funciona el multistreaming?
+
+
+
+
+
+
+ AvanzaCast envía tu transmisión simultáneamente a todas las plataformas que configures. Solo necesitas conectar tus cuentas una vez y listo.
+
+
+
+
+
+ {/* FAQ 2 */}
+
+
+
+ ¿Necesito descargar software?
+
+
+
+
+
+
+ No, AvanzaCast funciona 100% en tu navegador web. Solo necesitas una conexión a internet estable.
+
+
+
+
+
+ {/* FAQ 3 */}
+
+
+
+ ¿A cuántas plataformas puedo transmitir?
+
+
+
+
+
+
+ Dependiendo de tu plan, puedes transmitir desde 5 hasta destinos ilimitados simultáneamente.
+
+
+
+
+
+ {/* FAQ 4 */}
+
+
+
+ ¿Las grabaciones se guardan automáticamente?
+
+
+
+
+
+
+ Sí, todas tus transmisiones se graban automáticamente en la nube y puedes acceder a ellas en cualquier momento.
+
+
+
+
+
+
+
+
+
+ {/* CTA Final */}
+
+
+
+ ¿Tienes preguntas? ¡Contáctanos!
+
+
+ Nuestro equipo está listo para ayudarte a comenzar con AvanzaCast y llevar tu streaming al siguiente nivel.
+
+
+
{/* Footer */}
-