Change the modern saas
This commit is contained in:
parent
e486c96b98
commit
0ea9b47dcd
@ -4,10 +4,7 @@
|
||||
"path": "."
|
||||
},
|
||||
{
|
||||
"path": "../vristo-main-1.1.8/react/vristo-react-main"
|
||||
},
|
||||
{
|
||||
"path": "../../Next"
|
||||
"path": "../../../Descargas/techwind_v2.2.0"
|
||||
}
|
||||
],
|
||||
"settings": {}
|
||||
|
||||
365
docs/SISTEMA_DISENO_UNIFICADO.md
Normal file
365
docs/SISTEMA_DISENO_UNIFICADO.md
Normal file
@ -0,0 +1,365 @@
|
||||
# Sistema de Diseño Unificado - AvanzaCast
|
||||
|
||||
## 📋 Resumen
|
||||
|
||||
Se ha implementado un **sistema de diseño unificado** basado en el template **Techwind** para toda la aplicación AvanzaCast, asegurando consistencia visual entre:
|
||||
- Landing Page
|
||||
- Broadcast Studio
|
||||
- Admin Panel
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Configuración Tailwind Compartida
|
||||
|
||||
### Archivo: `tailwind.config.shared.js`
|
||||
|
||||
#### **Colores Principales**
|
||||
```javascript
|
||||
{
|
||||
primary: {
|
||||
// Indigo - Color principal de AvanzaCast
|
||||
500: '#8b5cf6',
|
||||
600: '#7c3aed', // Principal
|
||||
700: '#6d28d9',
|
||||
},
|
||||
secondary: {
|
||||
// Blue - Color secundario
|
||||
500: '#3b82f6',
|
||||
600: '#2563eb', // Principal
|
||||
700: '#1d4ed8',
|
||||
},
|
||||
dark: '#3c4858',
|
||||
black: '#161c2d',
|
||||
'dark-footer': '#192132',
|
||||
}
|
||||
```
|
||||
|
||||
#### **Tipografía**
|
||||
- **Font Family**: Nunito (Google Fonts)
|
||||
- **Weights**: 300, 400, 500, 600, 700
|
||||
- Fuentes alternativas: Alex Brush (cursiva), EB Garamond (serif)
|
||||
|
||||
#### **Breakpoints**
|
||||
```javascript
|
||||
{
|
||||
xs: '540px',
|
||||
sm: '640px',
|
||||
md: '768px',
|
||||
lg: '1024px',
|
||||
xl: '1280px',
|
||||
'2xl': '1536px',
|
||||
}
|
||||
```
|
||||
|
||||
#### **Shadows (Techwind Style)**
|
||||
```javascript
|
||||
{
|
||||
sm: '0 2px 4px 0 rgb(60 72 88 / 0.15)',
|
||||
DEFAULT: '0 0 3px rgb(60 72 88 / 0.15)',
|
||||
md: '0 5px 13px rgb(60 72 88 / 0.20)',
|
||||
lg: '0 10px 25px -3px rgb(60 72 88 / 0.15)',
|
||||
xl: '0 20px 25px -5px rgb(60 72 88 / 0.1), 0 8px 10px -6px rgb(60 72 88 / 0.1)',
|
||||
'2xl': '0 25px 50px -12px rgb(60 72 88 / 0.25)',
|
||||
}
|
||||
```
|
||||
|
||||
#### **Animaciones**
|
||||
```javascript
|
||||
{
|
||||
'float': 'float 6s ease-in-out infinite',
|
||||
'float-delayed': 'float 6s ease-in-out infinite 3s',
|
||||
'fadeInUp': 'fadeInUp 0.6s ease-out',
|
||||
'marquee': 'marquee 30s linear infinite',
|
||||
'spin-slow': 'spin 10s linear infinite',
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🧩 Componentes UI Compartidos
|
||||
|
||||
Todos disponibles en `@avanzacast/shared-components`
|
||||
|
||||
### 1. **Button Component**
|
||||
|
||||
```tsx
|
||||
import { Button } from '@avanzacast/shared-components'
|
||||
|
||||
// Variantes
|
||||
<Button variant="primary">Primary</Button>
|
||||
<Button variant="secondary">Secondary</Button>
|
||||
<Button variant="outline">Outline</Button>
|
||||
<Button variant="ghost">Ghost</Button>
|
||||
<Button variant="danger">Danger</Button>
|
||||
|
||||
// Tamaños
|
||||
<Button size="sm">Small</Button>
|
||||
<Button size="md">Medium</Button>
|
||||
<Button size="lg">Large</Button>
|
||||
|
||||
// Loading state
|
||||
<Button isLoading>Processing...</Button>
|
||||
```
|
||||
|
||||
**Props:**
|
||||
- `variant`: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
|
||||
- `size`: 'sm' | 'md' | 'lg'
|
||||
- `isLoading`: boolean
|
||||
- Todos los props nativos de `<button>`
|
||||
|
||||
**Estilos aplicados:**
|
||||
- Indigo 600/700 para primary
|
||||
- Border radius: `rounded-md`
|
||||
- Transition: `duration-500`
|
||||
- Disabled state con opacity 60%
|
||||
|
||||
---
|
||||
|
||||
### 2. **Card Component**
|
||||
|
||||
```tsx
|
||||
import { Card, CardHeader, CardBody } from '@avanzacast/shared-components'
|
||||
|
||||
// Variantes
|
||||
<Card variant="default">
|
||||
<CardHeader>Card Title</CardHeader>
|
||||
<CardBody>Card content</CardBody>
|
||||
</Card>
|
||||
|
||||
<Card variant="hover">Hover effect card</Card>
|
||||
<Card variant="gradient">Gradient card</Card>
|
||||
```
|
||||
|
||||
**Props:**
|
||||
- `variant`: 'default' | 'hover' | 'gradient'
|
||||
|
||||
**Estilos aplicados:**
|
||||
- Rounded: `rounded-xl`
|
||||
- Padding: `p-6`
|
||||
- Shadow: Techwind shadow system
|
||||
- Dark mode support
|
||||
|
||||
---
|
||||
|
||||
### 3. **Input & Textarea Components**
|
||||
|
||||
```tsx
|
||||
import { Input, Textarea } from '@avanzacast/shared-components'
|
||||
|
||||
// Con label y error
|
||||
<Input
|
||||
label="Email"
|
||||
placeholder="tu@email.com"
|
||||
error="Email requerido"
|
||||
/>
|
||||
|
||||
// Con helper text
|
||||
<Input
|
||||
label="Username"
|
||||
helperText="Min 3 caracteres"
|
||||
/>
|
||||
|
||||
// Textarea
|
||||
<Textarea
|
||||
label="Descripción"
|
||||
rows={4}
|
||||
placeholder="Escribe aquí..."
|
||||
/>
|
||||
```
|
||||
|
||||
**Props:**
|
||||
- `label`: string
|
||||
- `error`: string (muestra mensaje de error en rojo)
|
||||
- `helperText`: string (texto de ayuda en gris)
|
||||
- Todos los props nativos de `<input>` / `<textarea>`
|
||||
|
||||
**Estilos aplicados:**
|
||||
- Focus ring: indigo-500
|
||||
- Error state: red-500
|
||||
- Dark mode support
|
||||
- Smooth transitions
|
||||
|
||||
---
|
||||
|
||||
### 4. **Badge Component**
|
||||
|
||||
```tsx
|
||||
import { Badge } from '@avanzacast/shared-components'
|
||||
|
||||
// Variantes
|
||||
<Badge variant="primary">Primary</Badge>
|
||||
<Badge variant="success">Success</Badge>
|
||||
<Badge variant="danger">Danger</Badge>
|
||||
<Badge variant="warning">Warning</Badge>
|
||||
<Badge variant="info">Info</Badge>
|
||||
|
||||
// Tamaños
|
||||
<Badge size="sm">Small</Badge>
|
||||
<Badge size="md">Medium</Badge>
|
||||
<Badge size="lg">Large</Badge>
|
||||
```
|
||||
|
||||
**Props:**
|
||||
- `variant`: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'
|
||||
- `size`: 'sm' | 'md' | 'lg'
|
||||
|
||||
**Estilos aplicados:**
|
||||
- Background: color/10 opacity
|
||||
- Rounded: `rounded-md`
|
||||
- Dark mode: color/20 opacity
|
||||
|
||||
---
|
||||
|
||||
## 📁 Estructura de Archivos Actualizada
|
||||
|
||||
```
|
||||
AvanzaCast/
|
||||
├── tailwind.config.shared.js ✅ Nueva - Config compartida
|
||||
├── packages/
|
||||
│ ├── landing-page/
|
||||
│ │ ├── tailwind.config.cjs ✅ Actualizado
|
||||
│ │ └── src/
|
||||
│ │ └── index.css ✅ Actualizado (Nunito font)
|
||||
│ ├── broadcast-studio/
|
||||
│ │ └── tailwind.config.cjs ✅ Actualizado
|
||||
│ ├── admin-panel/
|
||||
│ │ └── tailwind.config.cjs ✅ Actualizado
|
||||
│ └── shared-components/
|
||||
│ └── src/
|
||||
│ ├── Button.tsx ✅ Nuevo
|
||||
│ ├── Card.tsx ✅ Nuevo
|
||||
│ ├── Input.tsx ✅ Nuevo
|
||||
│ ├── Badge.tsx ✅ Nuevo
|
||||
│ └── index.ts ✅ Actualizado
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Guía de Uso para Desarrolladores
|
||||
|
||||
### **1. Importar Componentes Compartidos**
|
||||
|
||||
```tsx
|
||||
// En cualquier módulo (landing-page, broadcast-studio, admin-panel)
|
||||
import { Button, Card, Input, Badge } from '@avanzacast/shared-components'
|
||||
```
|
||||
|
||||
### **2. Usar Colores del Sistema**
|
||||
|
||||
```tsx
|
||||
// Usar clases de Tailwind con colores compartidos
|
||||
<div className="bg-indigo-600 text-white">
|
||||
<h1 className="text-2xl font-semibold">Título</h1>
|
||||
</div>
|
||||
|
||||
// Gradientes
|
||||
<div className="bg-gradient-to-t from-indigo-600 to-indigo-500">
|
||||
Gradiente
|
||||
</div>
|
||||
```
|
||||
|
||||
### **3. Aplicar Sombras Techwind**
|
||||
|
||||
```tsx
|
||||
// Sombras consistentes en toda la app
|
||||
<div className="shadow">Default shadow</div>
|
||||
<div className="shadow-md">Medium shadow</div>
|
||||
<div className="shadow-lg">Large shadow</div>
|
||||
<div className="dark:shadow-gray-800">Dark mode shadow</div>
|
||||
```
|
||||
|
||||
### **4. Usar Animaciones**
|
||||
|
||||
```tsx
|
||||
// Animaciones predefinidas
|
||||
<div className="animate-float">Floating element</div>
|
||||
<div className="animate-fadeInUp">Fade in animation</div>
|
||||
<div className="animate-marquee">Marquee scroll</div>
|
||||
```
|
||||
|
||||
### **5. Dark Mode Support**
|
||||
|
||||
```tsx
|
||||
// Todos los componentes soportan dark mode automáticamente
|
||||
<Card>
|
||||
{/* Se adapta a dark mode automáticamente */}
|
||||
<p className="text-gray-700 dark:text-gray-300">
|
||||
Texto que cambia en dark mode
|
||||
</p>
|
||||
</Card>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Paleta de Colores Completa
|
||||
|
||||
### **Primarios**
|
||||
- **Indigo**: `indigo-50` a `indigo-900` (Principal de AvanzaCast)
|
||||
- **Blue**: `blue-50` a `blue-900` (Secundario)
|
||||
|
||||
### **Semánticos**
|
||||
- **Success**: `green-500`, `green-600`
|
||||
- **Danger**: `red-500`, `red-600`
|
||||
- **Warning**: `orange-500`, `orange-600`
|
||||
- **Info**: `blue-500`, `blue-600`
|
||||
|
||||
### **Neutrales**
|
||||
- **Gray**: `gray-50` a `gray-900`
|
||||
- **Dark**: `#3c4858`
|
||||
- **Black**: `#161c2d`
|
||||
|
||||
---
|
||||
|
||||
## ✅ Checklist de Implementación
|
||||
|
||||
- [x] Crear `tailwind.config.shared.js` con configuración Techwind
|
||||
- [x] Actualizar `tailwind.config.cjs` en landing-page
|
||||
- [x] Actualizar `tailwind.config.cjs` en broadcast-studio
|
||||
- [x] Actualizar `tailwind.config.cjs` en admin-panel
|
||||
- [x] Crear componentes UI compartidos (Button, Card, Input, Badge)
|
||||
- [x] Exportar componentes en `@avanzacast/shared-components`
|
||||
- [x] Aplicar fuente Nunito en landing-page
|
||||
- [ ] Migrar componentes existentes a usar nuevos componentes compartidos
|
||||
- [ ] Verificar consistencia visual en las 3 apps
|
||||
- [ ] Documentar patrones de diseño adicionales
|
||||
|
||||
---
|
||||
|
||||
## 📝 Próximos Pasos
|
||||
|
||||
1. **Migrar componentes existentes**
|
||||
- Reemplazar botones custom por `<Button>` compartido
|
||||
- Reemplazar cards custom por `<Card>` compartido
|
||||
- Reemplazar inputs custom por `<Input>` compartido
|
||||
|
||||
2. **Crear componentes adicionales**
|
||||
- Modal/Dialog
|
||||
- Dropdown/Select
|
||||
- Tabs
|
||||
- Alert/Toast
|
||||
- Avatar
|
||||
- Tooltip
|
||||
|
||||
3. **Optimizar rendimiento**
|
||||
- Lazy load de componentes pesados
|
||||
- Code splitting por ruta
|
||||
- Optimización de imágenes
|
||||
|
||||
4. **Testing**
|
||||
- Unit tests para componentes compartidos
|
||||
- Visual regression testing
|
||||
- Accessibility testing (A11y)
|
||||
|
||||
---
|
||||
|
||||
## 🔗 Referencias
|
||||
|
||||
- **Techwind Template**: Fuente de inspiración para el diseño
|
||||
- **Tailwind CSS**: https://tailwindcss.com/docs
|
||||
- **Nunito Font**: https://fonts.google.com/specimen/Nunito
|
||||
|
||||
---
|
||||
|
||||
**Última actualización**: 3 de noviembre de 2025
|
||||
**Versión**: 1.0.0
|
||||
**Autor**: GitHub Copilot
|
||||
135
docs/hero_diagonal_implementacion.md
Normal file
135
docs/hero_diagonal_implementacion.md
Normal file
@ -0,0 +1,135 @@
|
||||
# Implementación del Hero con Fondo Diagonal - AvanzaCast Landing Page
|
||||
|
||||
## 📋 Resumen
|
||||
Se migró exitosamente el efecto de fondo diagonal del template **Techwind index-saas.html** al componente `StreamingHeroSection` de la landing page de AvanzaCast.
|
||||
|
||||
## 🎨 Cambios Realizados
|
||||
|
||||
### 1. Ajustes en el Efecto Diagonal del Hero
|
||||
**Archivo**: `packages/landing-page/src/components/StreamingHeroSection.tsx`
|
||||
|
||||
#### Correcciones de z-index:
|
||||
```tsx
|
||||
// ANTES:
|
||||
before:z-1
|
||||
z-2
|
||||
|
||||
// DESPUÉS:
|
||||
before:z-0 // El fondo diagonal en el nivel más bajo
|
||||
z-10 // El contenido principal por encima
|
||||
z-20 // Elementos decorativos y preview en el nivel superior
|
||||
```
|
||||
|
||||
#### Simplificación de la rotación:
|
||||
```tsx
|
||||
// ANTES:
|
||||
ltr:before:-rotate-12 rtl:before:rotate-12
|
||||
|
||||
// DESPUÉS:
|
||||
before:-rotate-12 // Rotación consistente en todas direcciones
|
||||
```
|
||||
|
||||
### 2. Clases Tailwind CSS del Efecto Diagonal
|
||||
|
||||
El efecto diagonal se logra con las siguientes clases en el `<section>`:
|
||||
|
||||
```tsx
|
||||
className="relative
|
||||
before:content-['']
|
||||
before:absolute
|
||||
xl:before:-top-[30%]
|
||||
lg:before:-top-[50%]
|
||||
sm:before:-top-[80%]
|
||||
before:-top-[90%]
|
||||
before:-start-80
|
||||
before:end-0
|
||||
before:w-[140rem]
|
||||
before:h-[65rem]
|
||||
before:-rotate-12
|
||||
before:bg-indigo-600/5
|
||||
dark:before:bg-indigo-600/10
|
||||
before:z-0
|
||||
items-center
|
||||
overflow-hidden
|
||||
pt-32 md:pt-44 pb-16"
|
||||
```
|
||||
|
||||
### 3. Elementos Decorativos
|
||||
|
||||
Se mantuvieron los 4 elementos decorativos del diseño original de Techwind:
|
||||
|
||||
```tsx
|
||||
{/* Esquina inferior izquierda */}
|
||||
<div className="bg-indigo-600 w-8 h-16 z-20 absolute start-2 lg:bottom-28 md:bottom-36 sm:bottom-40 bottom-16"></div>
|
||||
<div className="bg-indigo-600/20 dark:bg-indigo-600/40 w-8 h-16 z-20 absolute start-12 lg:bottom-32 md:bottom-40 sm:bottom-44 bottom-20"></div>
|
||||
|
||||
{/* Esquina inferior derecha */}
|
||||
<div className="bg-indigo-600/20 dark:bg-indigo-600/40 w-8 h-16 z-20 absolute end-12 xl:bottom-[420px] lg:bottom-[315px] md:bottom-[285px] sm:bottom-80 bottom-32"></div>
|
||||
<div className="bg-indigo-600 w-8 h-16 z-20 absolute end-2 xl:bottom-[440px] lg:bottom-[335px] md:bottom-[305px] sm:bottom-[340px] bottom-36"></div>
|
||||
```
|
||||
|
||||
## 🔧 Configuración Técnica
|
||||
|
||||
### Tailwind CSS
|
||||
- **Dark Mode**: Habilitado con `class` strategy
|
||||
- **Plugins**:
|
||||
- `@tailwindcss/forms`
|
||||
- `@tailwindcss/typography`
|
||||
|
||||
### Breakpoints Responsivos
|
||||
El efecto diagonal se adapta a diferentes tamaños de pantalla:
|
||||
- **XL**: `-top-[30%]`
|
||||
- **LG**: `-top-[50%]`
|
||||
- **SM**: `-top-[80%]`
|
||||
- **Mobile**: `-top-[90%]`
|
||||
|
||||
## 🎯 Resultado Visual
|
||||
|
||||
### Efecto Diagonal:
|
||||
- Fondo rotado -12 grados
|
||||
- Color: `indigo-600` con opacidad 5% (light mode)
|
||||
- Color Dark: `indigo-600` con opacidad 10% (dark mode)
|
||||
- Dimensiones: 140rem × 65rem
|
||||
- Posicionamiento: Absoluto, superior derecha
|
||||
|
||||
### Elementos Decorativos:
|
||||
- 4 barras verticales (`8px × 64px`)
|
||||
- Colores: `indigo-600` (sólido) y `indigo-600/20` (semitransparente)
|
||||
- Ubicación: Esquinas inferiores (izquierda y derecha)
|
||||
- Adaptables al dark mode
|
||||
|
||||
## 🚀 Servidor de Desarrollo
|
||||
|
||||
```bash
|
||||
cd packages/landing-page
|
||||
npm run dev -- --port 3001
|
||||
```
|
||||
|
||||
**URL Local**: http://localhost:3001/
|
||||
|
||||
## 📝 Notas Importantes
|
||||
|
||||
1. **Compatibilidad**: El efecto funciona correctamente en light y dark mode
|
||||
2. **Responsive**: Totalmente adaptable a todos los breakpoints
|
||||
3. **Performance**: Usa pseudo-elemento `::before` para evitar elementos DOM adicionales
|
||||
4. **Accesibilidad**: El fondo es puramente decorativo y no afecta la legibilidad del contenido
|
||||
|
||||
## 🔗 Referencias
|
||||
|
||||
- **Template Original**: Techwind v2.2.0 - `HTML/Landing/src/index-saas.html`
|
||||
- **Componente Modificado**: `packages/landing-page/src/components/StreamingHeroSection.tsx`
|
||||
- **Documentación Tailwind**: https://tailwindcss.com/docs/content
|
||||
|
||||
## ✅ Checklist de Migración
|
||||
|
||||
- [x] Efecto diagonal implementado
|
||||
- [x] z-index corregidos
|
||||
- [x] Elementos decorativos añadidos
|
||||
- [x] Dark mode compatible
|
||||
- [x] Responsive design verificado
|
||||
- [x] Servidor de desarrollo funcionando
|
||||
|
||||
---
|
||||
|
||||
**Última actualización**: 3 de noviembre de 2025
|
||||
**Estado**: ✅ Completado y funcionando
|
||||
178
docs/javascript-snippets.md
Normal file
178
docs/javascript-snippets.md
Normal file
@ -0,0 +1,178 @@
|
||||
|
||||
# Javascript snippets
|
||||
|
||||
- `np` - nextPage
|
||||
- `npssp` - nextPageServerSideProps
|
||||
- `npsp` - nextPageStaticProps
|
||||
- `npspth` - nextPageStaticPaths
|
||||
- `nssp` - nextServerSideProps
|
||||
- `nsp` - nextStaticProps
|
||||
- `nspth` - nextStaticPaths
|
||||
- `nip` - nextInitialProps
|
||||
- `nimg` - nextImage
|
||||
- `napp` - nextApp
|
||||
- `ndoc` - nextDocument
|
||||
- `napi` - nextApi
|
||||
- `nmid` - nextMiddleware
|
||||
|
||||
## `np` - nextPage
|
||||
|
||||
```javascript
|
||||
const FileName = ({}) => {
|
||||
return <div></div>
|
||||
}
|
||||
|
||||
export default FileName
|
||||
```
|
||||
|
||||
## `npssp` - nextPageServerSideProps
|
||||
|
||||
```javascript
|
||||
const FileName = ({}) => {
|
||||
return <div></div>
|
||||
}
|
||||
|
||||
export const getServerSideProps = async (ctx) => {
|
||||
return {
|
||||
props: {}
|
||||
}
|
||||
}
|
||||
|
||||
export default FileName
|
||||
```
|
||||
|
||||
## `npsp` - nextPageStaticProps
|
||||
|
||||
```javascript
|
||||
const FileName = ({}) => {
|
||||
return <div></div>
|
||||
}
|
||||
|
||||
export const getStaticProps = async (ctx) => {
|
||||
return {
|
||||
props: {},
|
||||
}
|
||||
}
|
||||
|
||||
export default FileName
|
||||
```
|
||||
|
||||
## `npspth` - nextPageStaticPaths
|
||||
|
||||
```javascript
|
||||
const FileName = ({}) => {
|
||||
return <div></div>
|
||||
}
|
||||
|
||||
export const getStaticPaths = async () => {
|
||||
return {
|
||||
paths: [],
|
||||
fallback: false,
|
||||
}
|
||||
}
|
||||
|
||||
export default FileName
|
||||
```
|
||||
|
||||
## `nssp` - nextServerSideProps
|
||||
|
||||
```javascript
|
||||
export const getServerSideProps = async (ctx) => {
|
||||
return {
|
||||
props: {}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `nsp` - nextStaticProps
|
||||
|
||||
```javascript
|
||||
export const getStaticProps = async (ctx) => {
|
||||
return {
|
||||
props: {},
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `nspth` - nextStaticPaths
|
||||
|
||||
```javascript
|
||||
export const getStaticPaths = async () => {
|
||||
return {
|
||||
paths: [],
|
||||
fallback: false,
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `nip` - nextInitialProps
|
||||
|
||||
```javascript
|
||||
FileName.getInitialProps = async (ctx) => {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `nimg` - nextImage
|
||||
|
||||
```javascript
|
||||
<Image src="" alt="" />
|
||||
```
|
||||
|
||||
## `napp` - nextApp
|
||||
|
||||
```javascript
|
||||
export default function MyApp({ Component, pageProps }) {
|
||||
return <Component {...pageProps} />
|
||||
}
|
||||
```
|
||||
|
||||
## `ndoc` - nextDocument
|
||||
|
||||
```javascript
|
||||
import Document, { Html, Head, Main, NextScript } from 'next/document'
|
||||
|
||||
class MyDocument extends Document {
|
||||
static async getInitialProps(ctx) {
|
||||
const initialProps = await Document.getInitialProps(ctx)
|
||||
return { ...initialProps }
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Html>
|
||||
<Head />
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MyDocument
|
||||
```
|
||||
|
||||
## `napi` - nextApi
|
||||
|
||||
```javascript
|
||||
export default async function handler(req, res) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
## `nmid` - nextMiddleware
|
||||
|
||||
```javascript
|
||||
import { NextResponse } from 'next/server'
|
||||
export async function middleware(request) {
|
||||
|
||||
}
|
||||
|
||||
export const config = {
|
||||
matcher: '/about/:path*',
|
||||
}
|
||||
```
|
||||
202
docs/typescript-snippets.md
Normal file
202
docs/typescript-snippets.md
Normal file
@ -0,0 +1,202 @@
|
||||
|
||||
# Typescript snippets
|
||||
|
||||
- `np` - nextPage
|
||||
- `npssp` - nextPageServerSideProps
|
||||
- `npsp` - nextPageStaticProps
|
||||
- `npspth` - nextPageStaticPaths
|
||||
- `nssp` - nextServerSideProps
|
||||
- `nsp` - nextStaticProps
|
||||
- `nspth` - nextStaticPaths
|
||||
- `nip` - nextInitialProps
|
||||
- `nimg` - nextImage
|
||||
- `napp` - nextApp
|
||||
- `ndoc` - nextDocument
|
||||
- `napi` - nextApi
|
||||
- `nmid` - nextMiddleware
|
||||
|
||||
## `np` - nextPage
|
||||
|
||||
```typescript
|
||||
import { NextPage } from 'next'
|
||||
|
||||
interface Props {}
|
||||
|
||||
const FileName: NextPage<Props> = ({}) => {
|
||||
return <div></div>
|
||||
}
|
||||
|
||||
export default FileName
|
||||
```
|
||||
|
||||
## `npssp` - nextPageServerSideProps
|
||||
|
||||
```typescript
|
||||
import { NextPage, GetServerSideProps } from 'next'
|
||||
|
||||
interface Props {}
|
||||
|
||||
const FileName: NextPage<Props> = ({}) => {
|
||||
return <div></div>
|
||||
}
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
return {
|
||||
props: {}
|
||||
}
|
||||
}
|
||||
|
||||
export default FileName
|
||||
```
|
||||
|
||||
## `npsp` - nextPageStaticProps
|
||||
|
||||
```typescript
|
||||
import { NextPage, GetStaticProps } from 'next'
|
||||
|
||||
interface Props {}
|
||||
|
||||
const FileName: NextPage<Props> = ({}) => {
|
||||
return <div></div>
|
||||
}
|
||||
|
||||
export const getStaticProps: GetStaticProps = async (ctx) => {
|
||||
return {
|
||||
props: {},
|
||||
}
|
||||
}
|
||||
|
||||
export default FileName
|
||||
```
|
||||
|
||||
## `npspth` - nextPageStaticPaths
|
||||
|
||||
```typescript
|
||||
import { NextPage, GetStaticPaths } from 'next'
|
||||
|
||||
interface Props {}
|
||||
|
||||
const FileName: NextPage<Props> = ({}) => {
|
||||
return <div></div>
|
||||
}
|
||||
|
||||
export const getStaticPaths: GetStaticPaths = async () => {
|
||||
return {
|
||||
paths: [],
|
||||
fallback: false,
|
||||
}
|
||||
}
|
||||
|
||||
export default FileName
|
||||
```
|
||||
|
||||
## `nssp` - nextServerSideProps
|
||||
|
||||
```typescript
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
return {
|
||||
props: {}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `nsp` - nextStaticProps
|
||||
|
||||
```typescript
|
||||
export const getStaticProps: GetStaticProps = async (ctx) => {
|
||||
return {
|
||||
props: {},
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `nspth` - nextStaticPaths
|
||||
|
||||
```typescript
|
||||
export const getStaticPaths: GetStaticPaths = async () => {
|
||||
return {
|
||||
paths: [],
|
||||
fallback: false,
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `nip` - nextInitialProps
|
||||
|
||||
```typescript
|
||||
FileName.getInitialProps = async (ctx) => {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `nimg` - nextImage
|
||||
|
||||
```typescript
|
||||
<Image src="" alt="" />
|
||||
```
|
||||
|
||||
## `napp` - nextApp
|
||||
|
||||
```typescript
|
||||
import type { AppProps } from 'next/app'
|
||||
|
||||
export default function MyApp({ Component, pageProps }: AppProps) {
|
||||
return <Component {...pageProps} />
|
||||
}
|
||||
```
|
||||
|
||||
## `ndoc` - nextDocument
|
||||
|
||||
```typescript
|
||||
import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
|
||||
|
||||
class MyDocument extends Document {
|
||||
static async getInitialProps(ctx: DocumentContext) {
|
||||
const initialProps = await Document.getInitialProps(ctx)
|
||||
return { ...initialProps }
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Html>
|
||||
<Head />
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MyDocument
|
||||
```
|
||||
|
||||
## `napi` - nextApi
|
||||
|
||||
```typescript
|
||||
import type { NextApiRequest, NextApiResponse } from 'next'
|
||||
|
||||
interface Data {}
|
||||
|
||||
export default async function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
## `nmid` - nextMiddleware
|
||||
|
||||
```typescript
|
||||
import { NextResponse } from 'next/server'
|
||||
import type { NextRequest } from 'next/server'
|
||||
|
||||
export async function middleware(request: NextRequest) {
|
||||
|
||||
}
|
||||
|
||||
export const config = {
|
||||
matcher: '/about/:path*',
|
||||
}
|
||||
```
|
||||
3856
package-lock.json
generated
3856
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,11 @@
|
||||
const sharedConfig = require('../../tailwind.config.shared.js')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
...sharedConfig,
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
"../shared-components/src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
}
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
const sharedConfig = require('../../tailwind.config.shared.js')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [require('@tailwindcss/forms')],
|
||||
...sharedConfig,
|
||||
content: [
|
||||
'./index.html',
|
||||
'./src/**/*.{js,ts,jsx,tsx}',
|
||||
'../shared-components/src/**/*.{js,ts,jsx,tsx}',
|
||||
],
|
||||
}
|
||||
|
||||
@ -3,7 +3,14 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>AvanzaCast Vite</title>
|
||||
<title>AvanzaCast - Plataforma Profesional de Streaming en Vivo</title>
|
||||
<meta name="description" content="Transmite en vivo a múltiples plataformas simultáneamente. Streaming profesional con grabación en la nube." />
|
||||
|
||||
<!-- Iconos Unicons -->
|
||||
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
|
||||
|
||||
<!-- Material Design Icons -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@ -13,9 +13,23 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@heroicons/react": "^2.2.0",
|
||||
"@iconscout/unicons": "^4.0.8",
|
||||
"@mdi/font": "^7.4.47",
|
||||
"animate.css": "^4.1.1",
|
||||
"choices.js": "^10.2.0",
|
||||
"feather-icons": "^4.29.1",
|
||||
"gumshoejs": "^5.1.2",
|
||||
"jarallax": "^2.2.1",
|
||||
"js-datepicker": "^5.18.4",
|
||||
"particles.js": "^2.0.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.30.1"
|
||||
"react-router-dom": "^6.30.1",
|
||||
"shufflejs": "^6.1.2",
|
||||
"swiper": "4.5.0",
|
||||
"tiny-slider": "^2.9.4",
|
||||
"tobii": "^2.0.0-alpha",
|
||||
"wow.js": "^1.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.4",
|
||||
|
||||
38
packages/landing-page/public/images/client/amazon.svg
Normal file
38
packages/landing-page/public/images/client/amazon.svg
Normal file
@ -0,0 +1,38 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 200.4 66.5" style="enable-background:new 0 0 200.4 66.5;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.amazon-0{fill:#8C98A4;}
|
||||
</style>
|
||||
<g>
|
||||
<path id="arrow_1_" class="amazon-0" d="M120.9,47.6c-12.1,5.1-25.2,7.6-37.1,7.6c-17.7,0-34.8-4.8-48.7-12.9c-1.2-0.7-2.1,0.6-1.1,1.5
|
||||
c12.8,11.5,29.8,18.5,48.7,18.5c13.4,0,29-4.3,39.8-12.2C124.2,48.8,122.6,46.8,120.9,47.6z"/>
|
||||
<path id="arrow" class="amazon-0" d="M114.1,43.1c-0.9,0.7-0.7,1.6,0.3,1.5c3.4-0.4,11.2-1.3,12.6,0.5c1.4,1.8-1.5,9-2.8,12.3
|
||||
c-0.4,1,0.5,1.4,1.3,0.7c5.8-4.8,7.3-15,6-16.4C130.3,40,120.2,38.8,114.1,43.1z"/>
|
||||
<path id="z" class="amazon-0" d="M135.1,30.8c-3.3-1.9-7.2-2.4-10.8-2.3l9.8-14c0.9-1.2,1.4-2,1.4-2.6V8.3c0-0.7-0.5-1-1.1-1h-18.9
|
||||
c-0.6,0-1,0.5-1,1v4.2l0,0c0,0.7,0.5,1,1.1,1h9.9l-11.4,16.2c-0.7,1-0.7,2.2-0.7,2.9v4.3c0,0.7,0.7,1.3,1.3,0.9
|
||||
c6.4-3.4,14.1-3.1,19.9,0c0.7,0.4,1.4-0.4,1.4-0.9v-4.4C136,31.8,135.8,31.3,135.1,30.8z"/>
|
||||
<path id="m" class="amazon-0" d="M40.1,38.8h5.8c0.7,0,1.1-0.5,1.1-1V22.2c0-3.4-0.2-8.1,4-8.1c4.1,0,3.5,4.8,3.5,8.1v15.6
|
||||
c0,0.6,0.5,1,1,1h5.8c0.7,0,1.1-0.5,1.1-1V22.2c0-1.7-0.1-4.2,0.6-5.7c0.6-1.5,2-2.4,3.4-2.4c1.7,0,3,0.6,3.3,2.5
|
||||
c0.3,1.2,0.2,4.3,0.2,5.5v15.6c0,0.6,0.5,1,1,1h5.8c0.7,0,1.1-0.5,1.1-1V19.1c0-3.2,0.4-6.8-1.5-9.2c-1.6-2.2-4.3-3.3-6.6-3.3
|
||||
c-3.3,0-6.5,1.8-7.9,5.5c-1.6-3.7-3.8-5.5-7.4-5.5c-3.5,0-6.1,1.8-7.5,5.5h-0.1V8.3c0-0.6-0.5-0.9-1-1h-5.3c-0.7,0-1.1,0.5-1.1,1
|
||||
v29.4C39.1,38.3,39.5,38.7,40.1,38.8z"/>
|
||||
<path id="o" class="amazon-0" d="M151.7,6.7c-8.3,0-12.9,7.2-12.9,16.3s4.6,16.4,12.9,16.4c8,0,13.1-7.2,13.1-16.1
|
||||
C164.9,14.1,160.3,6.7,151.7,6.7z M151.7,33.3c-4.5,0-4.5-7.7-4.5-11.3c0-3.6,0.3-9.3,4.5-9.3c1.9,0,3.1,0.8,3.7,2.9
|
||||
c0.7,2.3,0.8,5.3,0.8,7.8C156.4,27.2,156.2,33.3,151.7,33.3z"/>
|
||||
<path id="n" class="amazon-0" d="M184.5,6.7c-4,0-6.2,2-7.8,6h-0.1V8.2c-0.1-0.5-0.6-0.8-1-0.8h-5.3c-0.6,0-1,0.5-1.1,0.9v29.4
|
||||
c0,0.6,0.5,1,1,1h5.7c0.7,0,1.1-0.5,1.1-1V21.9c0-2,0.1-3.8,0.9-5.6c0.7-1.4,2-2.3,3.3-2.3c4,0,3.6,4.7,3.6,7.9v16
|
||||
c0.1,0.5,0.5,0.9,1,0.9h5.8c0.6,0,1-0.4,1.1-0.9V19.4c0-2.9,0-6.8-1.5-9.1C189.6,7.6,187.1,6.7,184.5,6.7z"/>
|
||||
<path id="a_1_" class="amazon-0" d="M99.6,18.9c-3.3,0.4-7.6,0.7-10.8,2c-3.6,1.6-6.1,4.7-6.1,9.4c0,6,3.7,8.9,8.6,8.9
|
||||
c4.1,0,6.3-0.9,9.5-4.2c1,1.5,1.4,2.2,3.3,3.8c0.5,0.2,0.9,0.2,1.4-0.1l0,0c1.1-1,3.3-2.8,4.4-3.8c0.5-0.4,0.4-1,0-1.5
|
||||
c-1-1.5-2.1-2.6-2.1-5.3v-8.9c0-3.8,0.3-7.3-2.5-9.9c-2.1-2.1-5.9-2.9-8.7-2.9c-5.5,0-11.5,2-12.8,8.7c-0.1,0.7,0.4,1.1,0.8,1.2
|
||||
L90,17c0.6,0,0.9-0.6,1-1c0.5-2.3,2.4-3.4,4.6-3.4c1.2,0,2.5,0.5,3.3,1.5c0.8,1.2,0.7,2.8,0.7,4.2V18.9L99.6,18.9z M98.4,30.8
|
||||
c-0.9,1.6-2.3,2.6-4,2.6c-2.2,0-3.5-1.7-3.5-4.2c0-4.9,4.4-5.8,8.6-5.8v1.2C99.6,27,99.6,28.9,98.4,30.8z"/>
|
||||
<path id="a" class="amazon-0" d="M34.6,33.4c-1-1.5-2.1-2.6-2.1-5.3v-8.9c0-3.8,0.3-7.3-2.5-9.9c-2.2-2.1-5.9-2.9-8.7-2.9
|
||||
c-5.5,0-11.5,2-12.8,8.7c-0.1,0.7,0.4,1.1,0.8,1.2l5.6,0.6c0.6,0,0.9-0.6,1-1c0.5-2.3,2.4-3.4,4.7-3.4c1.2,0,2.5,0.5,3.3,1.5
|
||||
c0.8,1.2,0.7,2.8,0.7,4.2v0.7c-3.4,0.4-7.7,0.7-10.9,2c-3.6,1.6-6.1,4.7-6.1,9.4c0,6,3.7,8.9,8.6,8.9c4.1,0,6.3-0.9,9.5-4.2
|
||||
c1,1.5,1.4,2.2,3.3,3.8c0.5,0.2,0.9,0.2,1.4-0.1l0,0c1.1-1,3.3-2.8,4.4-3.8C35.1,34.5,35,33.9,34.6,33.4z M23.4,30.8
|
||||
c-0.9,1.6-2.3,2.6-4,2.6c-2.2,0-3.4-1.7-3.4-4.2c0-4.9,4.4-5.8,8.6-5.8v1.2C24.4,27,24.5,28.9,23.4,30.8z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
27
packages/landing-page/public/images/client/google.svg
Normal file
27
packages/landing-page/public/images/client/google.svg
Normal file
@ -0,0 +1,27 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 200.4 66.5" style="enable-background:new 0 0 200.4 66.5;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.google-0{fill:#8c98a4;}
|
||||
</style>
|
||||
<g>
|
||||
<path id="g_1_" class="google-0" d="M51.5,24.4H29v6.6h16c-0.8,9.3-8.6,13.4-15.9,13.4c-9.4,0-17.6-7.4-17.6-17.7
|
||||
c0-10.1,7.8-17.9,17.6-17.9c7.6,0,12,4.8,12,4.8l4.6-4.8c0,0-6-6.6-16.9-6.6C14.9,2.1,4.2,13.8,4.2,26.5c0,12.4,10.1,24.5,25,24.5
|
||||
c13.1,0,22.7-8.9,22.7-22.2C51.9,26,51.5,24.4,51.5,24.4L51.5,24.4z"/>
|
||||
<path id="o_2_" class="google-0" d="M69.8,19.5c-9.2,0-15.8,7.2-15.8,15.6c0,8.6,6.4,15.9,16,15.9c8.7,0,15.7-6.5,15.7-15.7
|
||||
C85.6,24.9,77.4,19.5,69.8,19.5L69.8,19.5z M69.9,25.8c4.5,0,8.8,3.7,8.8,9.5c0,5.8-4.2,9.5-8.8,9.5c-5,0-8.9-4-8.9-9.6
|
||||
C60.9,29.8,64.8,25.8,69.9,25.8L69.9,25.8z"/>
|
||||
<path id="o_1_" class="google-0" d="M104.2,19.5c-9.2,0-15.8,7.2-15.8,15.6c0,8.6,6.4,15.9,16,15.9c8.7,0,15.7-6.5,15.7-15.7
|
||||
C120,24.9,111.8,19.5,104.2,19.5L104.2,19.5z M104.3,25.8c4.5,0,8.8,3.7,8.8,9.5c0,5.8-4.2,9.5-8.8,9.5c-5,0-8.9-4-8.9-9.6
|
||||
C95.3,29.8,99.2,25.8,104.3,25.8L104.3,25.8z"/>
|
||||
<path id="g" class="google-0" d="M137.9,19.6c-8.5,0-15.1,7.4-15.1,15.7c0,9.4,7.7,15.8,14.9,15.8c4.5,0,6.8-1.7,8.7-3.8v3.1
|
||||
c0,5.4-3.3,8.7-8.3,8.7c-4.8,0-7.2-3.6-8.1-5.6l-6.1,2.5c2.1,4.5,6.4,9.2,14.1,9.2c8.4,0,14.8-5.3,14.8-16.4V20.5h-6.6v2.7
|
||||
C144.4,21,141.6,19.6,137.9,19.6L137.9,19.6z M138.5,25.8c4.1,0,8.4,3.6,8.4,9.6c0,6.2-4.2,9.5-8.5,9.5c-4.5,0-8.7-3.7-8.7-9.4
|
||||
C129.8,29.3,134.1,25.8,138.5,25.8L138.5,25.8z"/>
|
||||
<path id="e" class="google-0" d="M182.4,19.5c-8,0-14.7,6.3-14.7,15.7c0,9.9,7.5,15.8,15.4,15.8c6.6,0,10.8-3.7,13.2-6.9l-5.5-3.7
|
||||
c-1.4,2.2-3.8,4.3-7.7,4.3c-4.4,0-6.4-2.4-7.7-4.8l21.1-8.8l-1.1-2.6C193.3,23.7,188.6,19.5,182.4,19.5L182.4,19.5z M182.6,25.6
|
||||
c2.9,0,4.9,1.5,5.9,3.4l-14,5.9C173.7,30.3,178.1,25.6,182.6,25.6L182.6,25.6z"/>
|
||||
<path id="l" class="google-0" d="M157.7,50.1h6.9V3.7h-6.9V50.1z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
27
packages/landing-page/public/images/client/lenovo.svg
Normal file
27
packages/landing-page/public/images/client/lenovo.svg
Normal file
@ -0,0 +1,27 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 200.4 66.5" style="enable-background:new 0 0 200.4 66.5;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.lenovo-0{fill:#8C98A4;}
|
||||
</style>
|
||||
<g>
|
||||
<path id="n_1_" class="lenovo-0" d="M80.4,21.2c-3.5,0-7.4,1.6-9.8,4.8l0,0l0,0v-4.3h-8.2v30h8.2V34.6c0-3.1,2.4-6.3,6.8-6.3
|
||||
c3.4,0,6.9,2.4,6.9,6.3v17.1h8.2V33.1C92.6,26.2,87.7,21.2,80.4,21.2z"/>
|
||||
<polygon id="v" class="lenovo-0" points="151.2,21.7 143.8,42.1 136.3,21.7 126.9,21.7 139.3,51.7 148.3,51.7 160.6,21.7 "/>
|
||||
<path id="e_1_" class="lenovo-0" d="M55.8,26.1c-2.8-3.2-6.9-4.9-11.9-4.9c-9.1,0-15.9,6.7-15.9,15.5c0,9.1,6.9,15.5,16.8,15.5
|
||||
c5.6,0,11.3-2.6,14-5.7l-5.2-4c-3.4,2.5-5.4,3.2-8.6,3.2c-2.8,0-5.1-0.9-6.6-2.4l21.1-8.7C59,31.2,57.7,28.3,55.8,26.1z M36.1,37.9
|
||||
c-0.4-3.1,0.4-5.5,1.7-7.2c1.4-1.9,3.6-3,6.3-3c3,0,5.2,1.7,6.4,4.2L36.1,37.9z"/>
|
||||
<polygon id="l_1_" class="lenovo-0" points="8.6,12.7 0.2,12.7 0.2,51.7 27.3,51.7 27.3,44.1 8.6,44.1 "/>
|
||||
<path id="o_4_" class="lenovo-0" d="M175.6,21.2c-9.1,0-16.2,6.8-16.2,15.5c0,8.8,7.1,15.5,16.1,15.5c9.1,0,16.2-6.8,16.2-15.5
|
||||
C191.6,27.9,184.6,21.2,175.6,21.2z M175.6,45.1c-4.5,0-8.1-3.7-8.1-8.5c0-5,3.3-8.5,7.9-8.5c4.5,0,8.1,3.7,8.1,8.5
|
||||
C183.5,41.6,180.2,45.1,175.6,45.1z"/>
|
||||
<path id="o_3_" class="lenovo-0" d="M112.1,21.2c-9.1,0-16.2,6.8-16.2,15.5c0,8.8,7.1,15.5,16.1,15.5c9.1,0,16.2-6.8,16.2-15.5
|
||||
C128.2,27.9,121.1,21.2,112.1,21.2z M112.1,45.1c-4.5,0-8.1-3.7-8.1-8.5c0-5,3.3-8.5,7.9-8.5c4.5,0,8.1,3.7,8.1,8.5
|
||||
C120,41.6,116.7,45.1,112.1,45.1z"/>
|
||||
<polygon id="t" class="lenovo-0" points="191.4,48.1 192.8,48.1 192.8,51.7 193.6,51.7 193.6,48.1 194.9,48.1 194.9,47.4 191.4,47.4
|
||||
"/>
|
||||
<polygon id="m_1_" class="lenovo-0" points="199.3,47.4 198,49.4 196.7,47.4 195.8,47.4 195.8,51.7 196.6,51.7 196.6,48.6 198,50.7
|
||||
198.1,50.7 199.4,48.6 199.4,51.7 200.2,51.7 200.2,47.4 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
41
packages/landing-page/public/images/client/paypal.svg
Normal file
41
packages/landing-page/public/images/client/paypal.svg
Normal file
@ -0,0 +1,41 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 200.4 66.5" style="enable-background:new 0 0 200.4 66.5;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.paypal-0{fill:#8C98A4;}
|
||||
.paypal-1{fill:#909DA5;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="paypal-0" d="M161.8,21.8c-1.6-1.8-4.4-2.8-8.1-2.8h-11.1c-0.8,0-1.4,0.6-1.5,1.3l-4.5,28.4c-0.1,0.6,0.3,1.1,0.9,1.1h5.7
|
||||
c0.5,0,1-0.4,1.1-0.9l1.3-8c0.1-0.7,0.8-1.3,1.5-1.3h3.5c7.3,0,11.5-3.5,12.6-10.5C163.7,25.9,163.2,23.5,161.8,21.8z M155,29.4
|
||||
c-0.6,4-3.6,4-6.6,4h-1.7l1.2-7.4c0.1-0.4,0.5-0.8,0.9-0.8h0.8c2,0,3.9,0,4.9,1.1C155,27,155.2,28,155,29.4z"/>
|
||||
<path class="paypal-0" d="M186.8,29.3h-5.3c-0.5,0-0.8,0.3-0.9,0.8l-0.2,1.5l-0.4-0.5c-1.1-1.7-3.7-2.2-6.3-2.2
|
||||
c-5.9,0-10.9,4.4-11.8,10.7c-0.5,3.1,0.2,6.1,2,8.1c1.6,1.9,3.9,2.7,6.7,2.7c4.7,0,7.3-3,7.3-3l-0.2,1.5c-0.1,0.6,0.3,1.1,0.9,1.1
|
||||
h4.8c0.8,0,1.4-0.6,1.5-1.3l2.9-18.1C187.8,29.8,187.4,29.3,186.8,29.3z M179.4,39.6c-0.5,3-2.9,5.1-6,5.1c-1.5,0-2.8-0.5-3.6-1.4
|
||||
s-1.1-2.3-0.8-3.7c0.5-3,2.9-5.1,5.9-5.1c1.5,0,2.7,0.5,3.5,1.4C179.3,36.8,179.7,38.1,179.4,39.6z"/>
|
||||
<path class="paypal-0" d="M199.1,19H194c-0.5,0-0.8,0.3-0.9,0.8l-4.5,28.9c-0.1,0.6,0.3,1.1,0.9,1.1h4.6c0.8,0,1.4-0.5,1.5-1.3l4.4-28.4
|
||||
C200.1,19.5,199.6,19,199.1,19z"/>
|
||||
<path class="paypal-0" d="M82.9,21.8C81.3,20,78.5,19,74.8,19H63.7c-0.8,0-1.4,0.6-1.5,1.3l-4.5,28.4c-0.1,0.6,0.3,1.1,0.9,1.1h5.3
|
||||
c0.8,0,1.4-0.5,1.5-1.3l1.2-7.7c0.1-0.7,0.8-1.3,1.5-1.3h3.5c7.3,0,11.5-3.5,12.6-10.5C84.8,25.9,84.3,23.5,82.9,21.8z M76.1,29.4
|
||||
c-0.6,4-3.6,4-6.6,4h-1.7L69,26c0.1-0.4,0.5-0.8,0.9-0.8h0.8c2,0,3.9,0,4.9,1.1C76.1,27,76.3,28,76.1,29.4z"/>
|
||||
<path class="paypal-0" d="M107.9,29.3h-5.3c-0.5,0-0.8,0.3-0.9,0.8l-0.2,1.5l-0.4-0.5c-1.1-1.7-3.7-2.2-6.3-2.2
|
||||
c-5.9,0-10.9,4.4-11.8,10.7c-0.5,3.1,0.2,6.1,2,8.1c1.6,1.9,3.9,2.7,6.7,2.7c4.7,0,7.3-3,7.3-3l-0.2,1.5c-0.1,0.6,0.3,1.1,0.9,1.1
|
||||
h4.8c0.8,0,1.4-0.6,1.5-1.3l2.9-18.1C108.9,29.8,108.4,29.3,107.9,29.3z M100.5,39.6c-0.5,3-2.9,5.1-6,5.1c-1.5,0-2.8-0.5-3.6-1.4
|
||||
c-0.8-0.9-1.1-2.3-0.8-3.7c0.5-3,2.9-5.1,5.9-5.1c1.5,0,2.7,0.5,3.5,1.4C100.4,36.8,100.7,38.1,100.5,39.6z"/>
|
||||
<path class="paypal-0" d="M136.1,29.3h-5.3c-0.5,0-1,0.3-1.3,0.7l-7.3,10.8L119,30.4c-0.2-0.7-0.8-1.1-1.5-1.1h-5.2
|
||||
c-0.6,0-1.1,0.6-0.9,1.2l5.9,17.2l-5.5,7.8c-0.4,0.6,0,1.5,0.8,1.5h5.3c0.5,0,1-0.2,1.3-0.7l17.7-25.6
|
||||
C137.3,30.1,136.8,29.3,136.1,29.3z"/>
|
||||
<path class="paypal-1" d="M39.5,22.2c-0.6-0.7-1.3-1.2-2.2-1.7l0,0c0,0.3-0.1,0.6-0.2,0.9C37,21.7,37,22,36.9,22.2
|
||||
c-1.9,8.5-7.3,12.1-14.3,12.9c-0.5,0.1-0.9,0.1-1.4,0.1s-1.1,0-1.6,0h-4.5c-1.1,0-2,0.8-2.1,1.8l-2,12.8l-0.3,1.7L10,55.6
|
||||
c-0.1,0.7,0.4,1.3,1.1,1.3H19c0.9,0,1.7-0.7,1.9-1.6l0.1-0.4l1.5-9.4l0.1-0.5c0.1-0.9,0.9-1.6,1.9-1.6h1.2
|
||||
c7.7,0,13.6-3.1,15.4-12.1C41.8,27.5,41.4,24.4,39.5,22.2z"/>
|
||||
<path class="paypal-0" d="M13,37.1l0.1-0.5l2.5-16c0.1-0.6,0.5-1.2,1.1-1.4c0.3-0.1,0.5-0.2,0.8-0.2h11.9c1.4,0,2.7,0.1,3.9,0.3
|
||||
c0.3,0.1,0.7,0.1,1,0.2c0.3,0.1,0.6,0.2,0.9,0.2c0.1,0,0.2,0.1,0.3,0.1h0.1c0,0,0,0,0.1,0c0.6,0.2,1.1,0.4,1.6,0.7l0,0
|
||||
c0.6-3.8,0-6.4-2.1-8.7C33,9.2,28.9,8.1,23.7,8.1H8.5c-1.1,0-2,0.8-2.1,1.8L0,50c-0.1,0.8,0.5,1.5,1.3,1.5h9.4l0.3-1.7L13,37.1z"/>
|
||||
<path class="paypal-0" d="M37.3,20.5c-0.5-0.3-1-0.5-1.6-0.7c0,0,0,0-0.1,0h-0.1c-0.1,0-0.2-0.1-0.3-0.1c-0.3-0.1-0.6-0.2-0.9-0.2
|
||||
c-0.3-0.1-0.7-0.1-1-0.2c-1.2-0.2-2.5-0.3-3.9-0.3h-12c-0.3,0-0.6,0.1-0.8,0.2c-0.5,0.3-1,0.8-1.1,1.4l-2.5,16v0.5
|
||||
c0.2-1.1,1.1-1.8,2.1-1.8h4.5c0.5,0,1.1,0,1.6,0s1-0.1,1.4-0.1c7-0.8,12.4-4.4,14.4-12.8c0.1-0.3,0.1-0.5,0.2-0.8
|
||||
C37.2,21.1,37.3,20.8,37.3,20.5L37.3,20.5z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
36
packages/landing-page/public/images/client/shopify.svg
Normal file
36
packages/landing-page/public/images/client/shopify.svg
Normal file
@ -0,0 +1,36 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 200.4 66.5" style="enable-background:new 0 0 200.4 66.5;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.shopify-0{fill:#8C98A4;}
|
||||
.shopify-1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="shopify-0" d="M43.6,15.3c0-0.3-0.3-0.4-0.5-0.5c-0.2,0-4.5-0.3-4.5-0.3s-3-3-3.3-3.3s-1-0.2-1.2-0.2c0,0-0.7,0.2-1.7,0.5
|
||||
c-1-2.9-2.7-5.5-5.8-5.5h-0.2c-0.9-1.1-2-1.7-2.9-1.7c-7.2,0-10.6,9-11.7,13.6c-2.8,0.9-4.8,1.5-5,1.5c-1.5,0.5-1.6,0.5-1.8,2
|
||||
C4.8,22.4,0.8,54,0.8,54l31.7,5.9l17.2-3.6C49.7,56.3,43.7,15.6,43.6,15.3z M30.7,12.1c-0.8,0.3-1.7,0.5-2.7,0.8v-0.6
|
||||
c0-1.8-0.3-3.2-0.7-4.3C29,8.1,30.1,10,30.7,12.1z M25.5,8.4c0.4,1.1,0.7,2.7,0.7,4.8v0.3c-1.7,0.5-3.6,1.1-5.5,1.7
|
||||
C21.7,11.1,23.7,9.1,25.5,8.4z M23.3,6.4c0.3,0,0.6,0.1,0.9,0.3c-2.3,1.1-4.8,3.8-5.8,9.3c-1.5,0.5-3,0.9-4.4,1.3
|
||||
C15.3,13.1,18.2,6.4,23.3,6.4z"/>
|
||||
<path class="shopify-0" d="M43.1,14.8c-0.2,0-4.5-0.3-4.5-0.3s-3-3-3.3-3.3C35.2,11.1,35,11,34.8,11L32.4,60l17.3-3.7
|
||||
c0,0-6-40.8-6.1-41.1C43.6,14.9,43.3,14.8,43.1,14.8z"/>
|
||||
<path class="shopify-1" d="M26.7,24.3l-2.1,6.3c0,0-1.9-1-4.1-1c-3.3,0-3.5,2.1-3.5,2.6c0,2.9,7.5,4,7.5,10.7c0,5.3-3.4,8.7-7.9,8.7
|
||||
c-5.4,0-8.2-3.4-8.2-3.4l1.4-4.8c0,0,2.9,2.5,5.3,2.5c1.6,0,2.2-1.2,2.2-2.2c0-3.8-6.2-3.9-6.2-10.1c0-5.2,3.7-10.2,11.3-10.2
|
||||
C25.3,23.4,26.7,24.3,26.7,24.3z"/>
|
||||
<path class="shopify-0" d="M69.8,36.1c-1.7-0.9-2.6-1.7-2.6-2.8c0-1.4,1.2-2.3,3.2-2.3c2.2,0,4.2,0.9,4.2,0.9l1.6-4.8
|
||||
c0,0-1.4-1.1-5.7-1.1c-5.9,0-10,3.4-10,8.1c0,2.7,1.9,4.8,4.5,6.2c2.1,1.2,2.8,2,2.8,3.2c0,1.3-1,2.3-3,2.3c-2.9,0-5.5-1.5-5.5-1.5
|
||||
l-1.7,4.8c0,0,2.5,1.7,6.7,1.7c6.1,0,10.4-3,10.4-8.4C74.6,39.7,72.4,37.7,69.8,36.1L69.8,36.1z M94,26.1c-3,0-5.3,1.4-7.2,3.6
|
||||
h-0.1L89.3,16h-6.8l-6.6,34.6h6.8L85,38.8c0.9-4.5,3.2-7.2,5.3-7.2c1.5,0,2.1,1,2.1,2.5c0,0.9-0.1,2.1-0.3,3l-2.6,13.5h6.9l2.7-14
|
||||
c0.3-1.5,0.5-3.2,0.5-4.4C99.5,28.4,97.5,26.1,94,26.1L94,26.1z M114.8,26.1c-8.1,0-13.5,7.4-13.5,15.5c0,5.3,3.2,9.5,9.3,9.5
|
||||
c8,0,13.4-7.2,13.4-15.5C124,30.6,121.1,26.1,114.8,26.1L114.8,26.1z M111.5,45.8c-2.3,0-3.3-2-3.3-4.4c0-3.9,2-10.2,5.7-10.2
|
||||
c2.4,0,3.2,2.1,3.2,4.1C117,39.4,115,45.8,111.5,45.8z M141.3,26.1c-4.6,0-7.2,4-7.2,4H134l0.4-3.6h-6c-0.3,2.5-0.8,6.2-1.4,9
|
||||
l-4.6,24.7h6.7l1.9-10h0.1c0,0,1.4,0.9,4,0.9c7.9,0,13.1-8.1,13.1-16.4C148.2,30.1,146.2,26.1,141.3,26.1L141.3,26.1z M134.8,45.8
|
||||
c-1.8,0-2.8-1-2.8-1l1.1-6.3c0.8-4.2,3-7,5.3-7c2.1,0,2.7,1.9,2.7,3.7C141.2,39.7,138.6,45.8,134.8,45.8z M157.9,16.3
|
||||
c-2.2,0-3.9,1.7-3.9,3.9c0,2,1.3,3.4,3.2,3.4h0.1c2.1,0,3.9-1.4,4-3.9C161.3,17.8,159.9,16.3,157.9,16.3L157.9,16.3z M148.4,50.4
|
||||
h6.8l4.6-24H153 M177,26.6h-4.7l0.2-1.1c0.4-2.3,1.8-4.4,4-4.4c1.2,0,2.2,0.3,2.2,0.3l1.3-5.3c0,0-1.2-0.6-3.7-0.6
|
||||
c-2.4,0-4.8,0.7-6.6,2.3c-2.3,2-3.4,4.8-3.9,7.6l-0.2,1.1h-3.2l-1,5.1h3.2L161,50.4h6.8l3.6-18.9h4.7L177,26.6L177,26.6z
|
||||
M193.2,26.6c0,0-4.2,10.7-6.1,16.5H187c-0.1-1.9-1.7-16.5-1.7-16.5h-7.1l4.1,22c0.1,0.5,0,0.8-0.1,1.1c-0.8,1.5-2.1,3-3.7,4.1
|
||||
c-1.3,0.9-2.7,1.5-3.8,1.9l1.9,5.7c1.4-0.3,4.2-1.4,6.6-3.7c3.1-2.9,5.9-7.4,8.9-13.4l8.3-17.7L193.2,26.6L193.2,26.6z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
38
packages/landing-page/public/images/client/spotify.svg
Normal file
38
packages/landing-page/public/images/client/spotify.svg
Normal file
@ -0,0 +1,38 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 200.4 66.5" style="enable-background:new 0 0 200.4 66.5;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.spotify-0{fill:#8c98a4;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="spotify-0" d="M30,2.8c-16.6,0-30,13.4-30,30s13.4,30,30,30s30-13.4,30-30S46.6,2.8,30,2.8L30,2.8z M43.8,46.1
|
||||
c-0.5,0.9-1.7,1.2-2.6,0.6c-7-4.3-15.9-5.3-26.4-2.9c-1,0.2-2-0.4-2.2-1.4s0.4-2,1.4-2.2c11.4-2.6,21.2-1.5,29.1,3.3
|
||||
C44,44,44.3,45.2,43.8,46.1z M47.4,37.9c-0.7,1.1-2.1,1.4-3.2,0.8c-8.1-5-20.4-6.4-29.9-3.5c-1.2,0.4-2.5-0.3-2.9-1.6
|
||||
c-0.4-1.2,0.3-2.5,1.6-2.9c10.9-3.3,24.4-1.7,33.7,4C47.8,35.4,48.1,36.8,47.4,37.9L47.4,37.9z M47.8,29.4
|
||||
c-9.7-5.7-25.6-6.3-34.9-3.5c-1.5,0.4-3.1-0.4-3.5-1.9s0.4-3,1.9-3.5c10.6-3.2,28.2-2.6,39.3,4c1.3,0.8,1.8,2.5,1,3.8
|
||||
C50.8,29.7,49.1,30.2,47.8,29.4L47.8,29.4z M81.6,30.5c-5.2-1.2-6.1-2.1-6.1-3.9c0-1.7,1.6-2.9,4-2.9c2.3,0,4.7,0.9,7.1,2.7
|
||||
c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2-0.1,0.2-0.1l2.5-3.6c0.1-0.1,0.1-0.3-0.1-0.5c-2.9-2.3-6.1-3.4-9.9-3.4c-5.6,0-9.5,3.4-9.5,8.2
|
||||
c0,5.1,3.4,7,9.2,8.4c5,1.1,5.8,2.1,5.8,3.8c0,1.9-1.7,3.1-4.4,3.1c-3,0-5.5-1-8.3-3.4c0-0.2-0.1-0.2-0.2-0.2
|
||||
c-0.1,0-0.2,0.1-0.2,0.1l-2.8,3.4c-0.1,0.1-0.1,0.4,0,0.5c3.2,2.9,7.2,4.4,11.4,4.4c6,0,9.9-3.3,9.9-8.4C90.5,34.4,88,32,81.6,30.5
|
||||
L81.6,30.5z M104.2,25.4c-2.6,0-4.8,1-6.5,3.1v-2.4c0-0.2-0.2-0.3-0.3-0.3h-4.6c-0.2,0-0.3,0.2-0.3,0.3v26.4c0,0.2,0.2,0.3,0.3,0.3
|
||||
h4.5c0.2,0,0.3-0.2,0.3-0.3v-8.3c1.8,2,3.9,3,6.5,3c4.9,0,9.8-3.7,9.8-10.9C113.9,29.1,109,25.4,104.2,25.4L104.2,25.4L104.2,25.4z
|
||||
M108.5,36.3c0,3.6-2.2,6.2-5.4,6.2c-3.2,0-5.6-2.7-5.6-6.2s2.4-6.2,5.6-6.2C106.2,30.1,108.5,32.7,108.5,36.3L108.5,36.3z
|
||||
M126.5,25.4c-6.3,0-11.1,4.8-11.1,11c0,6.1,4.9,10.8,11.1,10.8c6.3,0,11.2-4.8,11.2-10.9C137.6,30.2,132.7,25.4,126.5,25.4
|
||||
L126.5,25.4z M126.5,42.5c-3.3,0-5.8-2.7-5.8-6.2c0-3.6,2.4-6.1,5.8-6.1c3.3,0,5.9,2.7,5.9,6.2C132.3,39.9,129.9,42.5,126.5,42.5z
|
||||
M151,25.8h-5.1v-5.2c0-0.2-0.2-0.3-0.3-0.3H141c-0.2,0-0.3,0.2-0.3,0.3v5.2h-2.4c-0.2,0-0.3,0.2-0.3,0.3v4c0,0.2,0.2,0.3,0.3,0.3
|
||||
h2.2v10.4c0,4.2,2.1,6.3,6.2,6.3c1.7,0,3-0.3,4.3-1.1c0.1-0.1,0.2-0.2,0.2-0.3v-3.8c0-0.1-0.1-0.2-0.2-0.3c-0.1-0.1-0.2-0.1-0.3,0
|
||||
c-0.9,0.4-1.8,0.7-2.7,0.7c-1.5,0-2.2-0.7-2.2-2.2v-9.6h5.1c0.2,0,0.3-0.2,0.3-0.3v-4C151.3,26,151.2,25.8,151,25.8L151,25.8
|
||||
L151,25.8z M168.8,25.8v-0.6c0-1.9,0.7-2.7,2.3-2.7c1,0,1.7,0.2,2.6,0.5c0.1,0,0.2,0,0.3,0c0.1-0.1,0.1-0.2,0.1-0.3v-3.9
|
||||
c0-0.1-0.1-0.3-0.2-0.3c-0.9-0.3-2.1-0.6-3.9-0.6c-4.3,0-6.5,2.4-6.5,7v1h-2.2c-0.2,0-0.3,0.2-0.3,0.3v4c0,0.2,0.2,0.3,0.3,0.3h2.2
|
||||
v15.9c0,0.2,0.2,0.3,0.3,0.3h4.6c0.2,0,0.3-0.2,0.3-0.3V30.5h4.3l6.6,15.9c-0.8,1.7-1.5,2-2.5,2c-0.8,0-1.7-0.2-2.6-0.7
|
||||
c-0.1,0-0.2-0.1-0.3,0c-0.1,0-0.2,0.1-0.2,0.2l-1.6,3.4c-0.1,0.2,0,0.4,0.1,0.4c1.6,0.9,3.1,1.3,5,1.3c3.4,0,5.3-1.6,7-5.9l8-20.8
|
||||
c0-0.1,0-0.2,0-0.3c-0.1-0.1-0.2-0.1-0.3-0.1h-4.8c-0.1,0-0.3,0.1-0.3,0.2l-4.9,14.1l-5.4-14.1c-0.1-0.1-0.2-0.2-0.3-0.2
|
||||
L168.8,25.8L168.8,25.8L168.8,25.8z M158.4,25.8h-4.6c-0.2,0-0.3,0.2-0.3,0.3v20.2c0,0.2,0.2,0.3,0.3,0.3h4.6
|
||||
c0.2,0,0.3-0.2,0.3-0.3V26.2C158.8,26,158.6,25.8,158.4,25.8L158.4,25.8z M156.2,16.6c-1.8,0-3.3,1.5-3.3,3.3s1.5,3.3,3.3,3.3
|
||||
s3.3-1.5,3.3-3.3S158,16.6,156.2,16.6z M196.8,32.3c-1.8,0-3.3-1.5-3.3-3.3s1.4-3.3,3.3-3.3s3.3,1.5,3.3,3.3S198.6,32.3,196.8,32.3
|
||||
z M196.8,26.1c-1.7,0-2.9,1.3-2.9,3c0,1.6,1.3,2.9,2.9,2.9c1.7,0,2.9-1.3,2.9-3C199.7,27.4,198.5,26.1,196.8,26.1z M197.5,29.4
|
||||
l0.9,1.3h-0.8l-0.8-1.2h-0.7v1.2h-0.7v-3.4h1.5c0.8,0,1.3,0.4,1.3,1.1C198.3,28.9,198,29.2,197.5,29.4L197.5,29.4z M197,27.8h-0.8
|
||||
v1.1h0.8c0.4,0,0.7-0.2,0.7-0.5C197.6,28,197.4,27.8,197,27.8z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
27
packages/landing-page/public/images/features/branding.svg
Normal file
27
packages/landing-page/public/images/features/branding.svg
Normal file
@ -0,0 +1,27 @@
|
||||
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grad4" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#8B5CF6;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#A855F7;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="600" height="400" fill="url(#grad4)"/>
|
||||
<g transform="translate(300, 200)">
|
||||
<!-- Monitor/Screen -->
|
||||
<rect x="-100" y="-80" width="200" height="140" rx="8" fill="white" opacity="0.2"/>
|
||||
<rect x="-90" y="-70" width="180" height="110" fill="white" opacity="0.1"/>
|
||||
<!-- Logo placeholder -->
|
||||
<circle cx="-60" cy="-40" r="15" fill="white" opacity="0.3"/>
|
||||
<!-- Text lines (branding) -->
|
||||
<rect x="-60" y="0" width="120" height="8" rx="4" fill="white" opacity="0.3"/>
|
||||
<rect x="-60" y="15" width="80" height="8" rx="4" fill="white" opacity="0.2"/>
|
||||
<!-- Paint palette -->
|
||||
<circle cx="70" cy="-30" r="25" fill="white" opacity="0.2"/>
|
||||
<circle cx="60" cy="-35" r="6" fill="#FF6B6B" opacity="0.8"/>
|
||||
<circle cx="75" cy="-35" r="6" fill="#4ECDC4" opacity="0.8"/>
|
||||
<circle cx="68" cy="-25" r="6" fill="#FFE66D" opacity="0.8"/>
|
||||
</g>
|
||||
<text x="300" y="350" font-family="system-ui, -apple-system, sans-serif" font-size="20" fill="white" text-anchor="middle" opacity="0.9">
|
||||
Personalización de Marca
|
||||
</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
21
packages/landing-page/public/images/features/guests.svg
Normal file
21
packages/landing-page/public/images/features/guests.svg
Normal file
@ -0,0 +1,21 @@
|
||||
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#6366F1;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#8B5CF6;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="600" height="400" fill="url(#grad1)"/>
|
||||
<g transform="translate(300, 200)">
|
||||
<!-- User icons -->
|
||||
<circle cx="-60" cy="0" r="30" fill="white" opacity="0.2"/>
|
||||
<circle cx="0" cy="0" r="30" fill="white" opacity="0.3"/>
|
||||
<circle cx="60" cy="0" r="30" fill="white" opacity="0.2"/>
|
||||
<!-- Webcam icon -->
|
||||
<rect x="-40" y="50" width="80" height="60" rx="8" fill="white" opacity="0.3"/>
|
||||
<circle cx="0" cy="80" r="15" fill="white" opacity="0.5"/>
|
||||
</g>
|
||||
<text x="300" y="350" font-family="system-ui, -apple-system, sans-serif" font-size="20" fill="white" text-anchor="middle" opacity="0.9">
|
||||
Invitados Remotos
|
||||
</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 977 B |
27
packages/landing-page/public/images/features/multistream.svg
Normal file
27
packages/landing-page/public/images/features/multistream.svg
Normal file
@ -0,0 +1,27 @@
|
||||
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#3B82F6;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#6366F1;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="600" height="400" fill="url(#grad3)"/>
|
||||
<g transform="translate(300, 200)">
|
||||
<!-- Central broadcast icon -->
|
||||
<circle cx="0" cy="0" r="40" fill="white" opacity="0.3"/>
|
||||
<circle cx="0" cy="0" r="8" fill="white" opacity="0.5"/>
|
||||
<!-- Arrows to platforms -->
|
||||
<path d="M 0,-40 L 0,-80 L -10,-70 M 0,-80 L 10,-70" stroke="white" stroke-width="3" fill="none" opacity="0.3"/>
|
||||
<path d="M 40,0 L 80,0 L 70,-10 M 80,0 L 70,10" stroke="white" stroke-width="3" fill="none" opacity="0.3"/>
|
||||
<path d="M -40,0 L -80,0 L -70,-10 M -80,0 L -70,10" stroke="white" stroke-width="3" fill="none" opacity="0.3"/>
|
||||
<path d="M 0,40 L 0,80 L -10,70 M 0,80 L 10,70" stroke="white" stroke-width="3" fill="none" opacity="0.3"/>
|
||||
<!-- Platform circles -->
|
||||
<circle cx="0" cy="-100" r="20" fill="white" opacity="0.2"/>
|
||||
<circle cx="100" cy="0" r="20" fill="white" opacity="0.2"/>
|
||||
<circle cx="-100" cy="0" r="20" fill="white" opacity="0.2"/>
|
||||
<circle cx="0" cy="100" r="20" fill="white" opacity="0.2"/>
|
||||
</g>
|
||||
<text x="300" y="350" font-family="system-ui, -apple-system, sans-serif" font-size="20" fill="white" text-anchor="middle" opacity="0.9">
|
||||
Multistreaming
|
||||
</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
25
packages/landing-page/public/images/features/recording.svg
Normal file
25
packages/landing-page/public/images/features/recording.svg
Normal file
@ -0,0 +1,25 @@
|
||||
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#EC4899;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#F43F5E;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="600" height="400" fill="url(#grad2)"/>
|
||||
<g transform="translate(300, 200)">
|
||||
<!-- Microphone -->
|
||||
<rect x="-15" y="-60" width="30" height="80" rx="15" fill="white" opacity="0.3"/>
|
||||
<rect x="-20" y="30" width="40" height="8" fill="white" opacity="0.3"/>
|
||||
<rect x="-2" y="38" width="4" height="30" fill="white" opacity="0.3"/>
|
||||
<!-- Waveform -->
|
||||
<rect x="-80" y="-10" width="4" height="40" fill="white" opacity="0.2"/>
|
||||
<rect x="-60" y="-20" width="4" height="60" fill="white" opacity="0.2"/>
|
||||
<rect x="-40" y="0" width="4" height="20" fill="white" opacity="0.2"/>
|
||||
<rect x="40" y="-10" width="4" height="40" fill="white" opacity="0.2"/>
|
||||
<rect x="60" y="-20" width="4" height="60" fill="white" opacity="0.2"/>
|
||||
<rect x="80" y="0" width="4" height="20" fill="white" opacity="0.2"/>
|
||||
</g>
|
||||
<text x="300" y="350" font-family="system-ui, -apple-system, sans-serif" font-size="20" fill="white" text-anchor="middle" opacity="0.9">
|
||||
Grabación de Calidad Profesional
|
||||
</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
263
packages/landing-page/src/components/ModernSaasFooter.tsx
Normal file
263
packages/landing-page/src/components/ModernSaasFooter.tsx
Normal file
@ -0,0 +1,263 @@
|
||||
/**
|
||||
* Modern SaaS Footer - Estilo Techwind
|
||||
* Footer completo con newsletter, links y redes sociales
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react'
|
||||
|
||||
const ModernSaasFooter: React.FC = () => {
|
||||
const [newsletter, setNewsletter] = useState('')
|
||||
|
||||
const handleNewsletterSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
console.log('Newsletter subscription:', newsletter)
|
||||
setNewsletter('')
|
||||
}
|
||||
|
||||
return (
|
||||
<footer className="footer bg-slate-900 relative text-gray-200 dark:text-gray-200">
|
||||
{/* Newsletter Section */}
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid grid-cols-1">
|
||||
<div className="relative py-16">
|
||||
{/* Newsletter Card */}
|
||||
<div className="relative w-full">
|
||||
<div className="grid md:grid-cols-12 grid-cols-1 items-center gap-[30px]">
|
||||
<div className="lg:col-span-8 md:col-span-7">
|
||||
<div className="lg:text-start text-center">
|
||||
<h3 className="mb-4 md:text-3xl text-2xl md:leading-normal leading-normal font-semibold text-white">
|
||||
Suscríbete a nuestro newsletter
|
||||
</h3>
|
||||
<p className="text-slate-300 max-w-xl">
|
||||
Recibe las últimas noticias, tutoriales y ofertas especiales directamente en tu bandeja de entrada.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-4 md:col-span-5">
|
||||
<form className="text-end" onSubmit={handleNewsletterSubmit}>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="email"
|
||||
id="newsletter"
|
||||
name="email"
|
||||
value={newsletter}
|
||||
onChange={(e) => setNewsletter(e.target.value)}
|
||||
className="py-4 pe-40 ps-6 w-full h-[50px] outline-none text-black dark:text-white rounded-full bg-white dark:bg-slate-900 shadow dark:shadow-gray-800"
|
||||
placeholder="Tu email..."
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="py-2 px-5 inline-block font-semibold tracking-wide align-middle duration-500 text-base text-center absolute top-[2px] end-[3px] h-[46px] bg-indigo-600 hover:bg-indigo-700 border border-indigo-600 hover:border-indigo-700 text-white rounded-full"
|
||||
>
|
||||
Suscribirse <i className="uil uil-arrow-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Content */}
|
||||
<div className="py-[30px] px-0 border-t border-slate-800">
|
||||
<div className="container mx-auto px-4">
|
||||
<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-2 mb-4">
|
||||
<div className="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-2xl font-bold text-white">AvanzaCast</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>
|
||||
<ul className="list-none flex items-center space-x-2">
|
||||
<li>
|
||||
<a href="#" className="size-10 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center border border-gray-700 rounded-md hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600">
|
||||
<i className="uil uil-facebook-f align-middle"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="size-10 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center border border-gray-700 rounded-md hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600">
|
||||
<i className="uil uil-instagram align-middle"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="size-10 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center border border-gray-700 rounded-md hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600">
|
||||
<i className="uil uil-twitter align-middle"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="size-10 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center border border-gray-700 rounded-md hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600">
|
||||
<i className="uil uil-linkedin align-middle"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="size-10 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center border border-gray-700 rounded-md hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600">
|
||||
<i className="uil uil-youtube align-middle"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Company Links */}
|
||||
<div className="lg:col-span-2 md:col-span-4">
|
||||
<h5 className="tracking-[1px] text-white font-semibold mb-4">Compañía</h5>
|
||||
<ul className="list-none footer-list space-y-3">
|
||||
<li>
|
||||
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
||||
<i className="uil uil-angle-right-b me-1"></i> Acerca de
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
||||
<i className="uil uil-angle-right-b me-1"></i> Servicios
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
||||
<i className="uil uil-angle-right-b me-1"></i> Equipo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
||||
<i className="uil uil-angle-right-b me-1"></i> Precios
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
||||
<i className="uil uil-angle-right-b me-1"></i> Proyecto
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
||||
<i className="uil uil-angle-right-b me-1"></i> Carreras
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Useful Links */}
|
||||
<div className="lg:col-span-3 md:col-span-4">
|
||||
<h5 className="tracking-[1px] text-white font-semibold mb-4">Enlaces Útiles</h5>
|
||||
<ul className="list-none footer-list space-y-3">
|
||||
<li>
|
||||
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
||||
<i className="uil uil-angle-right-b me-1"></i> Términos de Servicio
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
||||
<i className="uil uil-angle-right-b me-1"></i> Política de Privacidad
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
||||
<i className="uil uil-angle-right-b me-1"></i> Documentación
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
||||
<i className="uil uil-angle-right-b me-1"></i> Changelog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
||||
<i className="uil uil-angle-right-b me-1"></i> Componentes
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Newsletter Info */}
|
||||
<div className="lg:col-span-3 md:col-span-4">
|
||||
<h5 className="tracking-[1px] text-white font-semibold mb-4">Recursos</h5>
|
||||
<ul className="list-none footer-list space-y-3">
|
||||
<li>
|
||||
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
||||
<i className="uil uil-angle-right-b me-1"></i> Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
||||
<i className="uil uil-angle-right-b me-1"></i> Tutoriales
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
||||
<i className="uil uil-angle-right-b me-1"></i> Centro de Ayuda
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
||||
<i className="uil uil-angle-right-b me-1"></i> Soporte
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
||||
<i className="uil uil-angle-right-b me-1"></i> API
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Bottom */}
|
||||
<div className="py-[30px] px-0 border-t border-slate-800">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid md:grid-cols-2 items-center gap-6">
|
||||
<div className="md:text-start text-center">
|
||||
<p className="mb-0 text-slate-300">
|
||||
© {new Date().getFullYear()} AvanzaCast. Diseñado con <i className="mdi mdi-heart text-red-600"></i> por{' '}
|
||||
<a href="#" target="_blank" rel="noopener noreferrer" className="text-reset">
|
||||
Nextream
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul className="list-none md:text-end text-center space-x-2 md:space-x-4">
|
||||
<li className="inline">
|
||||
<a href="#">
|
||||
<img src="https://shreethemes.in/techwind/layouts/assets/images/payments/american-ex.png" className="max-h-6 inline" title="American Express" alt="American Express" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="inline">
|
||||
<a href="#">
|
||||
<img src="https://shreethemes.in/techwind/layouts/assets/images/payments/discover.png" className="max-h-6 inline" title="Discover" alt="Discover" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="inline">
|
||||
<a href="#">
|
||||
<img src="https://shreethemes.in/techwind/layouts/assets/images/payments/master-card.png" className="max-h-6 inline" title="Master Card" alt="Master Card" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="inline">
|
||||
<a href="#">
|
||||
<img src="https://shreethemes.in/techwind/layouts/assets/images/payments/paypal.png" className="max-h-6 inline" title="Paypal" alt="Paypal" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="inline">
|
||||
<a href="#">
|
||||
<img src="https://shreethemes.in/techwind/layouts/assets/images/payments/visa.png" className="max-h-6 inline" title="Visa" alt="Visa" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default ModernSaasFooter
|
||||
403
packages/landing-page/src/components/ModernSaasHeader.tsx
Normal file
403
packages/landing-page/src/components/ModernSaasHeader.tsx
Normal file
@ -0,0 +1,403 @@
|
||||
/**
|
||||
* Modern SaaS Header - Estilo Techwind
|
||||
* Navbar responsive con dropdown menus, theme switcher y animaciones
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect } from 'react'
|
||||
|
||||
const ModernSaasHeader: React.FC = () => {
|
||||
const [isScrolled, setIsScrolled] = useState(false)
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
|
||||
const [activeDropdown, setActiveDropdown] = useState<string | null>(null)
|
||||
const [isDarkMode, setIsDarkMode] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
// Verificar el tema guardado en localStorage
|
||||
const savedTheme = localStorage.getItem('theme')
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
|
||||
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
|
||||
setIsDarkMode(true)
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
setIsDarkMode(false)
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 50)
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handleScroll)
|
||||
return () => window.removeEventListener('scroll', handleScroll)
|
||||
}, [])
|
||||
|
||||
const toggleTheme = () => {
|
||||
if (isDarkMode) {
|
||||
document.documentElement.classList.remove('dark')
|
||||
localStorage.setItem('theme', 'light')
|
||||
setIsDarkMode(false)
|
||||
} else {
|
||||
document.documentElement.classList.add('dark')
|
||||
localStorage.setItem('theme', 'dark')
|
||||
setIsDarkMode(true)
|
||||
}
|
||||
}
|
||||
|
||||
const toggleDropdown = (menu: string) => {
|
||||
setActiveDropdown(activeDropdown === menu ? null : menu)
|
||||
}
|
||||
|
||||
return (
|
||||
<nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
|
||||
isScrolled
|
||||
? 'bg-white/90 dark:bg-slate-900/90 backdrop-blur-md shadow-md'
|
||||
: 'bg-transparent'
|
||||
}`}>
|
||||
<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-2 group">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-indigo-600 to-indigo-700 rounded-lg flex items-center justify-center shadow-lg group-hover:shadow-xl transition-shadow duration-300">
|
||||
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className={`text-2xl font-bold transition-colors duration-300 ${
|
||||
isScrolled ? 'text-slate-900 dark:text-white' : 'text-slate-900 dark:text-white'
|
||||
}`}>
|
||||
AvanzaCast
|
||||
</span>
|
||||
</a>
|
||||
|
||||
{/* Desktop Menu */}
|
||||
<div className="hidden lg:flex items-center space-x-8">
|
||||
<a href="/" className={`font-medium transition-colors duration-300 ${
|
||||
isScrolled
|
||||
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
|
||||
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
|
||||
}`}>
|
||||
Inicio
|
||||
</a>
|
||||
|
||||
{/* Características Dropdown */}
|
||||
<div className="relative group">
|
||||
<button className={`font-medium transition-colors duration-300 flex items-center ${
|
||||
isScrolled
|
||||
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
|
||||
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
|
||||
}`}>
|
||||
Características
|
||||
<i className="uil uil-angle-down ml-1 transition-transform group-hover:rotate-180 duration-300"></i>
|
||||
</button>
|
||||
<div className="absolute left-0 mt-2 w-64 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform group-hover:translate-y-0 translate-y-2">
|
||||
<div className="bg-white dark:bg-slate-800 rounded-xl shadow-xl py-3 border border-slate-100 dark:border-slate-700">
|
||||
<a href="#multistreaming" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
|
||||
<div className="flex items-center">
|
||||
<div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
|
||||
<i className="uil uil-broadcast text-indigo-600"></i>
|
||||
</div>
|
||||
<span className="font-medium">Multistreaming</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#recording" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
|
||||
<div className="flex items-center">
|
||||
<div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
|
||||
<i className="uil uil-video text-indigo-600"></i>
|
||||
</div>
|
||||
<span className="font-medium">Grabación en la Nube</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#studio" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
|
||||
<div className="flex items-center">
|
||||
<div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
|
||||
<i className="uil uil-cube text-indigo-600"></i>
|
||||
</div>
|
||||
<span className="font-medium">Estudio Virtual</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#analytics" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
|
||||
<div className="flex items-center">
|
||||
<div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
|
||||
<i className="uil uil-chart-line text-indigo-600"></i>
|
||||
</div>
|
||||
<span className="font-medium">Analytics</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="#pricing" className={`font-medium transition-colors duration-300 ${
|
||||
isScrolled
|
||||
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
|
||||
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
|
||||
}`}>
|
||||
Precios
|
||||
</a>
|
||||
|
||||
{/* Recursos Dropdown */}
|
||||
<div className="relative group">
|
||||
<button className={`font-medium transition-colors duration-300 flex items-center ${
|
||||
isScrolled
|
||||
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
|
||||
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
|
||||
}`}>
|
||||
Recursos
|
||||
<i className="uil uil-angle-down ml-1 transition-transform group-hover:rotate-180 duration-300"></i>
|
||||
</button>
|
||||
<div className="absolute left-0 mt-2 w-64 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform group-hover:translate-y-0 translate-y-2">
|
||||
<div className="bg-white dark:bg-slate-800 rounded-xl shadow-xl py-3 border border-slate-100 dark:border-slate-700">
|
||||
<a href="#blog" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
|
||||
<div className="flex items-center">
|
||||
<div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
|
||||
<i className="uil uil-book-open text-indigo-600"></i>
|
||||
</div>
|
||||
<span className="font-medium">Blog</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#tutorials" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
|
||||
<div className="flex items-center">
|
||||
<div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
|
||||
<i className="uil uil-graduation-cap text-indigo-600"></i>
|
||||
</div>
|
||||
<span className="font-medium">Tutoriales</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#help" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
|
||||
<div className="flex items-center">
|
||||
<div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
|
||||
<i className="uil uil-question-circle text-indigo-600"></i>
|
||||
</div>
|
||||
<span className="font-medium">Centro de Ayuda</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#api" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
|
||||
<div className="flex items-center">
|
||||
<div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
|
||||
<i className="uil uil-code-branch text-indigo-600"></i>
|
||||
</div>
|
||||
<span className="font-medium">API Docs</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="#contact" className={`font-medium transition-colors duration-300 ${
|
||||
isScrolled
|
||||
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
|
||||
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
|
||||
}`}>
|
||||
Contacto
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<div className="hidden lg:flex items-center space-x-4">
|
||||
{/* Theme Switcher */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className={`size-9 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center rounded-full transition-all ${
|
||||
isScrolled
|
||||
? 'bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700'
|
||||
: 'bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700'
|
||||
}`}
|
||||
aria-label="Cambiar tema"
|
||||
>
|
||||
{isDarkMode ? (
|
||||
<i className={`uil uil-sun text-xl ${isScrolled ? 'text-yellow-500' : 'text-yellow-500'}`}></i>
|
||||
) : (
|
||||
<i className={`uil uil-moon text-xl ${isScrolled ? 'text-slate-700' : 'text-slate-700'}`}></i>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<a href="/auth/login" className={`font-medium transition-colors duration-300 ${
|
||||
isScrolled
|
||||
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
||||
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
||||
}`}>
|
||||
Iniciar Sesión
|
||||
</a>
|
||||
<a href="/auth/register" className="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-all duration-300 inline-flex items-center shadow-lg hover:shadow-xl font-medium">
|
||||
Comenzar Gratis
|
||||
<i className="uil uil-arrow-right ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
className={`lg:hidden transition-colors duration-300 ${
|
||||
isScrolled ? 'text-slate-700 dark:text-slate-300' : 'text-slate-700 dark:text-slate-300'
|
||||
}`}
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
>
|
||||
<i className={`uil text-3xl transition-transform duration-300 ${isMobileMenuOpen ? 'uil-times rotate-90' : 'uil-bars'}`}></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className={`lg:hidden py-4 border-t transition-colors duration-300 ${
|
||||
isScrolled
|
||||
? 'border-slate-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md'
|
||||
: 'border-slate-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md'
|
||||
}`}>
|
||||
<div className="space-y-4">
|
||||
<a href="/" className={`block py-2 font-medium transition-colors ${
|
||||
isScrolled
|
||||
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
||||
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
||||
}`}>
|
||||
Inicio
|
||||
</a>
|
||||
|
||||
{/* Características Mobile */}
|
||||
<div>
|
||||
<button
|
||||
onClick={() => toggleDropdown('features')}
|
||||
className={`flex items-center justify-between w-full py-2 font-medium transition-colors ${
|
||||
isScrolled
|
||||
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
||||
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
||||
}`}
|
||||
>
|
||||
Características
|
||||
<i className={`uil uil-angle-down transition-transform ${activeDropdown === 'features' ? 'rotate-180' : ''}`}></i>
|
||||
</button>
|
||||
{activeDropdown === 'features' && (
|
||||
<div className="mt-2 ml-4 space-y-2">
|
||||
<a href="#multistreaming" className={`block py-2 text-sm transition-colors ${
|
||||
isScrolled
|
||||
? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
||||
: 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
||||
}`}>
|
||||
<i className="uil uil-broadcast mr-2"></i>Multistreaming
|
||||
</a>
|
||||
<a href="#recording" className={`block py-2 text-sm transition-colors ${
|
||||
isScrolled
|
||||
? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
||||
: 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
||||
}`}>
|
||||
<i className="uil uil-video mr-2"></i>Grabación en la Nube
|
||||
</a>
|
||||
<a href="#studio" className={`block py-2 text-sm transition-colors ${
|
||||
isScrolled
|
||||
? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
||||
: 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
||||
}`}>
|
||||
<i className="uil uil-cube mr-2"></i>Estudio Virtual
|
||||
</a>
|
||||
<a href="#analytics" className={`block py-2 text-sm transition-colors ${
|
||||
isScrolled
|
||||
? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
||||
: 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
||||
}`}>
|
||||
<i className="uil uil-chart-line mr-2"></i>Analytics
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<a href="#pricing" className={`block py-2 font-medium transition-colors ${
|
||||
isScrolled
|
||||
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
||||
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
||||
}`}>
|
||||
Precios
|
||||
</a>
|
||||
|
||||
{/* Recursos Mobile */}
|
||||
<div>
|
||||
<button
|
||||
onClick={() => toggleDropdown('resources')}
|
||||
className={`flex items-center justify-between w-full py-2 font-medium transition-colors ${
|
||||
isScrolled
|
||||
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
||||
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
||||
}`}
|
||||
>
|
||||
Recursos
|
||||
<i className={`uil uil-angle-down transition-transform ${activeDropdown === 'resources' ? 'rotate-180' : ''}`}></i>
|
||||
</button>
|
||||
{activeDropdown === 'resources' && (
|
||||
<div className="mt-2 ml-4 space-y-2">
|
||||
<a href="#blog" className={`block py-2 text-sm transition-colors ${
|
||||
isScrolled
|
||||
? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
||||
: 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
||||
}`}>
|
||||
<i className="uil uil-book-open mr-2"></i>Blog
|
||||
</a>
|
||||
<a href="#tutorials" className={`block py-2 text-sm transition-colors ${
|
||||
isScrolled
|
||||
? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
||||
: 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
||||
}`}>
|
||||
<i className="uil uil-graduation-cap mr-2"></i>Tutoriales
|
||||
</a>
|
||||
<a href="#help" className={`block py-2 text-sm transition-colors ${
|
||||
isScrolled
|
||||
? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
||||
: 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
||||
}`}>
|
||||
<i className="uil uil-question-circle mr-2"></i>Centro de Ayuda
|
||||
</a>
|
||||
<a href="#api" className={`block py-2 text-sm transition-colors ${
|
||||
isScrolled
|
||||
? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
||||
: 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
||||
}`}>
|
||||
<i className="uil uil-code-branch mr-2"></i>API Docs
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<a href="#contact" className={`block py-2 font-medium transition-colors ${
|
||||
isScrolled
|
||||
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
||||
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
||||
}`}>
|
||||
Contacto
|
||||
</a>
|
||||
|
||||
<div className="pt-4 space-y-2 border-t border-slate-200 dark:border-slate-700">
|
||||
{/* Theme Switcher Mobile */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className={`w-full flex items-center justify-between px-4 py-3 rounded-lg transition-colors ${
|
||||
isScrolled
|
||||
? 'bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300'
|
||||
: 'bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300'
|
||||
}`}
|
||||
>
|
||||
<span className="font-medium">Tema</span>
|
||||
{isDarkMode ? (
|
||||
<i className="uil uil-sun text-xl text-yellow-500"></i>
|
||||
) : (
|
||||
<i className={`uil uil-moon text-xl ${isScrolled ? 'text-slate-700' : 'text-slate-700'}`}></i>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<a href="/auth/login" className={`block text-center px-5 py-3 border rounded-lg transition-colors font-medium ${
|
||||
isScrolled
|
||||
? 'border-indigo-600 text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/20'
|
||||
: 'border-indigo-600 text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/20'
|
||||
}`}>
|
||||
Iniciar Sesión
|
||||
</a>
|
||||
<a href="/auth/register" className="block text-center px-5 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors font-medium shadow-lg">
|
||||
Comenzar Gratis
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
export default ModernSaasHeader
|
||||
@ -13,14 +13,14 @@ const contentBlocks: ContentBlock[] = [
|
||||
{
|
||||
title: 'Transmite en vivo o graba podcasts con invitados remotos',
|
||||
description: 'Los invitados pueden unirse fácilmente desde su navegador o teléfono en unos pocos clics. No necesitan crear una cuenta ni descargar nada.',
|
||||
image: '/images/features/guests.png',
|
||||
image: '/images/features/guests.svg',
|
||||
link: '/features/guests',
|
||||
reverse: false
|
||||
},
|
||||
{
|
||||
title: 'Grabaciones con calidad de estudio, independientemente de tu conexión',
|
||||
description: '¿Te cansaste de que tus podcasts queden arruinados con Zoom y Skype? AvanzaCast graba localmente en la computadora de cada invitado para obtener pistas de audio y video perfectas.',
|
||||
image: '/images/features/recording.png',
|
||||
image: '/images/features/recording.svg',
|
||||
link: '/features/recording',
|
||||
background: 'bg-pink-50',
|
||||
reverse: true
|
||||
@ -28,14 +28,14 @@ const contentBlocks: ContentBlock[] = [
|
||||
{
|
||||
title: 'Transmite a YouTube, Facebook, LinkedIn y más',
|
||||
description: 'Transmite simultáneamente a múltiples destinos. Alcanza a tu audiencia dondequiera que estén, todo desde un solo lugar.',
|
||||
image: '/images/features/multistream.png',
|
||||
image: '/images/features/multistream.svg',
|
||||
link: '/features/multistream',
|
||||
reverse: false
|
||||
},
|
||||
{
|
||||
title: 'Personaliza con tu marca',
|
||||
description: 'Añade tu logo, fondos personalizados y overlays para crear transmisiones profesionales que reflejen tu marca.',
|
||||
image: '/images/features/branding.png',
|
||||
image: '/images/features/branding.svg',
|
||||
link: '/features/branding',
|
||||
background: 'bg-purple-50',
|
||||
reverse: true
|
||||
@ -83,13 +83,15 @@ const NewContentDetailsSection: React.FC = () => {
|
||||
|
||||
{/* Imagen */}
|
||||
<div className={block.reverse ? 'lg:col-start-1 lg:row-start-1' : ''}>
|
||||
<div className="relative rounded-2xl overflow-hidden shadow-2xl">
|
||||
<div className="relative rounded-2xl overflow-hidden shadow-2xl bg-gradient-to-br from-indigo-500 to-purple-600">
|
||||
<img
|
||||
src={block.image}
|
||||
alt={block.title}
|
||||
className="w-full h-auto"
|
||||
onError={(e) => {
|
||||
e.currentTarget.src = 'https://via.placeholder.com/600x400?text=' + encodeURIComponent(block.title);
|
||||
// Crear un placeholder SVG inline
|
||||
const svg = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Crect width='600' height='400' fill='%234F46E5'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='system-ui' font-size='18' fill='white'%3E${encodeURIComponent(block.title.substring(0, 50))}%3C/text%3E%3C/svg%3E`;
|
||||
e.currentTarget.src = svg;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
File diff suppressed because one or more lines are too long
47
packages/landing-page/src/components/ScrollToTop.tsx
Normal file
47
packages/landing-page/src/components/ScrollToTop.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
/**
|
||||
* Scroll to Top Button - Estilo Techwind
|
||||
* Botón flotante que aparece al hacer scroll
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect } from 'react'
|
||||
|
||||
const ScrollToTop: React.FC = () => {
|
||||
const [isVisible, setIsVisible] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const toggleVisibility = () => {
|
||||
if (window.pageYOffset > 300) {
|
||||
setIsVisible(true)
|
||||
} else {
|
||||
setIsVisible(false)
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', toggleVisibility)
|
||||
|
||||
return () => window.removeEventListener('scroll', toggleVisibility)
|
||||
}, [])
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{isVisible && (
|
||||
<button
|
||||
onClick={scrollToTop}
|
||||
className="fixed bottom-5 end-5 z-50 size-12 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center bg-indigo-600 hover:bg-indigo-700 border border-indigo-600 hover:border-indigo-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all animate-bounce"
|
||||
aria-label="Volver arriba"
|
||||
>
|
||||
<i className="uil uil-arrow-up text-xl"></i>
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ScrollToTop
|
||||
@ -51,88 +51,43 @@ export default function StreamingFeatures() {
|
||||
const [activeFeature, setActiveFeature] = useState(1);
|
||||
|
||||
return (
|
||||
<section className="py-20 bg-white dark:bg-gray-900">
|
||||
<section className="py-20 bg-white dark:bg-slate-900 transition-colors duration-500">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center mb-16">
|
||||
<span className="inline-flex items-center gap-2 text-purple-600 dark:text-purple-400 font-semibold mb-4">
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 3.5a1.5 1.5 0 013 0V4a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-.5a1.5 1.5 0 000 3h.5a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-.5a1.5 1.5 0 00-3 0v.5a1 1 0 01-1 1H6a1 1 0 01-1-1v-3a1 1 0 00-1-1h-.5a1.5 1.5 0 010-3H4a1 1 0 001-1V6a1 1 0 011-1h3a1 1 0 001-1v-.5z" />
|
||||
</svg>
|
||||
Características Poderosas
|
||||
</span>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Todo lo que Necesitas para Transmitir
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
|
||||
Herramientas profesionales diseñadas para creadores de contenido, empresas y educadores
|
||||
<div className="grid grid-cols-1 pb-8 text-center">
|
||||
<h3 className="mb-6 md:text-3xl text-2xl md:leading-normal leading-normal font-semibold text-slate-900 dark:text-white transition-colors duration-500">
|
||||
Características Clave
|
||||
</h3>
|
||||
<p className="text-slate-400 dark:text-slate-500 max-w-xl mx-auto transition-colors duration-500">
|
||||
Comienza a trabajar con AvanzaCast que puede proporcionarte todo lo que necesitas para generar conciencia, impulsar tráfico y conectar.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{features.map((feature) => (
|
||||
<div
|
||||
key={feature.id}
|
||||
className={`group bg-gradient-to-br ${
|
||||
activeFeature === feature.id
|
||||
? 'from-purple-50 to-blue-50 dark:from-purple-900/20 dark:to-blue-900/20 border-purple-500 shadow-xl shadow-purple-500/20'
|
||||
: 'from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-800/50 border-gray-200 dark:border-gray-700'
|
||||
} rounded-2xl p-8 border-2 transition-all duration-300 hover:shadow-2xl hover:transform hover:-translate-y-2 cursor-pointer`}
|
||||
onMouseEnter={() => setActiveFeature(feature.id)}
|
||||
>
|
||||
<div className="text-6xl mb-4 transform group-hover:scale-110 transition-transform duration-300">
|
||||
{feature.icon}
|
||||
<div className="grid md:grid-cols-12 grid-cols-1 gap-[30px] mt-8">
|
||||
{features.map((feature, index) => (
|
||||
<div key={feature.id} className="lg:col-span-4 md:col-span-6">
|
||||
<div className="flex duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900 transition-all">
|
||||
<div className="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 dark:text-indigo-400 text-center rounded-full me-3 transition-colors duration-500">
|
||||
<span className="text-2xl rotate-45">{feature.icon}</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="mb-0 text-lg font-medium text-slate-900 dark:text-white transition-colors duration-500">
|
||||
{feature.title}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-6">
|
||||
{feature.description}
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
{feature.benefits.map((benefit, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5 text-green-500 flex-shrink-0"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
{benefit}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className="text-center mt-12">
|
||||
<button className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white font-bold py-4 px-8 rounded-full text-lg shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all duration-300">
|
||||
Comienza Gratis Hoy
|
||||
<svg
|
||||
className="inline-block ml-2 w-5 h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
<div className="grid grid-cols-1 justify-center mt-6">
|
||||
<div className="text-center">
|
||||
<a
|
||||
href="/features"
|
||||
className="relative inline-block font-semibold tracking-wide align-middle text-base text-center border-none after:content-[''] after:absolute after:h-px after:w-0 hover:after:w-full after:end-0 hover:after:end-auto after:bottom-0 after:start-0 after:duration-500 text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 after:bg-indigo-600 dark:after:bg-indigo-400 duration-500 ease-in-out transition-colors"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M14 5l7 7m0 0l-7 7m7-7H3"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
Ver Más <i className="uil uil-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -12,200 +12,70 @@ export default function StreamingHeroSection() {
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900">
|
||||
{/* Animated Background */}
|
||||
<div className="absolute inset-0 opacity-20">
|
||||
<div className="absolute top-20 left-20 w-72 h-72 bg-purple-500 rounded-full filter blur-3xl animate-float"></div>
|
||||
<div className="absolute bottom-20 right-20 w-96 h-96 bg-blue-500 rounded-full filter blur-3xl animate-float-delayed"></div>
|
||||
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-pink-500 rounded-full filter blur-3xl animate-pulse"></div>
|
||||
</div>
|
||||
|
||||
{/* Grid Pattern Overlay */}
|
||||
<div className="absolute inset-0 bg-grid-pattern opacity-10"></div>
|
||||
|
||||
<section className="relative before:content-[''] before:absolute xl:before:-top-[30%] lg:before:-top-[50%] sm:before:-top-[80%] before:-top-[90%] before:-start-80 before:end-0 before:w-[140rem] before:h-[65rem] before:-rotate-12 before:bg-indigo-600/5 dark:before:bg-indigo-600/10 before:z-0 items-center overflow-hidden pt-32 md:pt-44 pb-16">
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Left Content */}
|
||||
<div className="text-left space-y-8 animate-fadeInUp">
|
||||
<div className="inline-flex items-center gap-2 bg-purple-500/20 backdrop-blur-sm px-4 py-2 rounded-full border border-purple-400/30">
|
||||
<span className="relative flex h-3 w-3">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
|
||||
</span>
|
||||
<span className="text-white text-sm font-semibold">
|
||||
🔴 50,000+ transmisiones en vivo ahora
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-bold text-white leading-tight">
|
||||
Transmite
|
||||
<span className="block bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
|
||||
Multistreaming
|
||||
</span>
|
||||
Profesional
|
||||
</h1>
|
||||
|
||||
<p className="text-xl md:text-2xl text-gray-300 max-w-2xl">
|
||||
La plataforma todo-en-uno para creadores de contenido. Transmite a YouTube, Twitch, Facebook y más de 15 plataformas simultáneamente. Sin software, desde tu navegador.
|
||||
<div className="grid grid-cols-1 text-center">
|
||||
{/* Content */}
|
||||
<div className="space-y-8">
|
||||
<h4 className="font-bold lg:leading-normal leading-normal text-4xl lg:text-5xl mb-5 text-slate-900 dark:text-white transition-colors duration-500">
|
||||
Transmite Multistreaming Profesional
|
||||
</h4>
|
||||
<p className="text-slate-400 dark:text-slate-500 text-lg max-w-xl mx-auto transition-colors duration-500">
|
||||
La plataforma todo-en-uno para creadores de contenido. Transmite a YouTube, Twitch, Facebook y más de 15 plataformas simultáneamente.
|
||||
</p>
|
||||
|
||||
{/* Key Features */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{[
|
||||
{ icon: '📡', text: 'Multistreaming ilimitado' },
|
||||
{ icon: '☁️', text: 'Grabación en la nube' },
|
||||
{ icon: '👥', text: 'Hasta 10 invitados remotos' },
|
||||
{ icon: '🎨', text: 'Branding personalizado' },
|
||||
].map((feature, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center gap-3 bg-white/10 backdrop-blur-sm px-4 py-3 rounded-xl border border-white/20"
|
||||
>
|
||||
<span className="text-2xl">{feature.icon}</span>
|
||||
<span className="text-white font-medium">{feature.text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA Form */}
|
||||
<form onSubmit={handleGetStarted} className="flex flex-col sm:flex-row gap-4 max-w-xl">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="tu@email.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="flex-1 px-6 py-4 rounded-xl bg-white/10 backdrop-blur-sm border border-white/20 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-bold rounded-xl shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all duration-300 flex items-center justify-center gap-2"
|
||||
>
|
||||
<div className="mt-6">
|
||||
<a href="/auth/register" className="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-indigo-600 hover:bg-indigo-700 border-indigo-600 hover:border-indigo-700 text-white rounded-md transition-all">
|
||||
Comenzar Gratis
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="text-gray-400 text-sm">
|
||||
✓ Sin tarjeta de crédito ✓ 14 días de prueba gratis ✓ Cancela cuando quieras
|
||||
</p>
|
||||
|
||||
{/* Trust Indicators */}
|
||||
<div className="flex items-center gap-6 pt-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex -space-x-2">
|
||||
{['👨', '👩', '🧑', '👨💼'].map((avatar, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-xl border-2 border-white"
|
||||
>
|
||||
{avatar}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="ml-2">
|
||||
<div className="flex gap-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<svg key={i} className="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-white text-sm font-semibold">50,000+ usuarios activos</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<p className="text-slate-400 dark:text-slate-500 text-sm mt-3 transition-colors duration-500">Sin tarjeta de crédito. Prueba gratis por 14 días</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Content - Studio Preview */}
|
||||
<div className="relative animate-fadeInUp" style={{ animationDelay: '0.2s' }}>
|
||||
<div className="relative">
|
||||
{/* Studio Interface Mockup */}
|
||||
<div className="bg-gray-900/50 backdrop-blur-xl rounded-3xl border border-gray-700 shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-500">
|
||||
{/* Browser Bar */}
|
||||
<div className="bg-gray-800 px-4 py-3 flex items-center gap-2 border-b border-gray-700">
|
||||
<div className="flex gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500"></div>
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-500"></div>
|
||||
<div className="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div className="flex-1 text-center text-gray-400 text-sm">
|
||||
studio.avanzacast.com
|
||||
</div>
|
||||
{/* Studio Preview Mockup */}
|
||||
<div className="relative mt-8 z-20">
|
||||
<div className="bg-gray-900/50 dark:bg-slate-800/50 backdrop-blur-xl rounded-3xl border border-gray-700 dark:border-slate-600 shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-500 max-w-4xl mx-auto">
|
||||
{/* Browser Bar */}
|
||||
<div className="bg-gray-800 dark:bg-slate-700 px-4 py-3 flex items-center gap-2 border-b border-gray-700 dark:border-slate-600">
|
||||
<div className="flex gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500"></div>
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-500"></div>
|
||||
<div className="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div className="flex-1 text-center text-gray-400 text-sm">
|
||||
studio.avanzacast.com
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Video Preview */}
|
||||
<div className="aspect-video bg-black relative">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center animate-pulse">
|
||||
<svg className="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-gray-400">Vista previa de tu transmisión</p>
|
||||
{/* Video Preview */}
|
||||
<div className="aspect-video bg-gradient-to-br from-slate-900 to-slate-800 dark:from-slate-800 dark:to-slate-900 relative transition-colors duration-500">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-indigo-600 to-indigo-700 dark:from-indigo-500 dark:to-indigo-600 rounded-full flex items-center justify-center">
|
||||
<svg className="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Live Indicator */}
|
||||
<div className="absolute top-4 left-4 flex items-center gap-2 bg-red-500 px-4 py-2 rounded-full animate-pulse">
|
||||
<div className="w-2 h-2 rounded-full bg-white"></div>
|
||||
<span className="text-white text-sm font-bold">EN VIVO</span>
|
||||
</div>
|
||||
|
||||
{/* Viewer Count */}
|
||||
<div className="absolute top-4 right-4 bg-black/80 backdrop-blur-sm px-4 py-2 rounded-full">
|
||||
<span className="text-white text-sm">👁️ 1,234 espectadores</span>
|
||||
</div>
|
||||
|
||||
{/* Platform Indicators */}
|
||||
<div className="absolute bottom-4 right-4 flex gap-2">
|
||||
{['🎥', '🟣', '👥'].map((emoji, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="w-10 h-10 bg-black/80 backdrop-blur-sm rounded-lg flex items-center justify-center border border-green-500"
|
||||
>
|
||||
<span className="text-lg">{emoji}</span>
|
||||
</div>
|
||||
))}
|
||||
<p className="text-gray-400">Vista previa de tu transmisión</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="bg-gray-800 px-6 py-4 flex items-center justify-between">
|
||||
<div className="flex gap-3">
|
||||
{[
|
||||
{ icon: '🎤', label: 'Mic' },
|
||||
{ icon: '📹', label: 'Cam' },
|
||||
{ icon: '🖥️', label: 'Screen' },
|
||||
].map((ctrl, i) => (
|
||||
<button
|
||||
key={i}
|
||||
className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors text-white text-sm flex items-center gap-2"
|
||||
>
|
||||
<span>{ctrl.icon}</span>
|
||||
<span>{ctrl.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<button className="px-6 py-2 bg-red-500 hover:bg-red-600 rounded-lg text-white font-semibold transition-colors">
|
||||
Finalizar Stream
|
||||
</button>
|
||||
{/* Live Indicator */}
|
||||
<div className="absolute top-4 left-4 flex items-center gap-2 bg-red-500 px-4 py-2 rounded-full">
|
||||
<div className="w-2 h-2 rounded-full bg-white animate-pulse"></div>
|
||||
<span className="text-white text-sm font-bold">EN VIVO</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating Elements */}
|
||||
<div className="absolute -top-6 -right-6 bg-green-500 text-white px-4 py-2 rounded-full shadow-lg animate-bounce">
|
||||
✓ Conectado a 3 plataformas
|
||||
</div>
|
||||
<div className="absolute -bottom-6 -left-6 bg-blue-500 text-white px-4 py-2 rounded-full shadow-lg animate-float">
|
||||
📊 Analytics en tiempo real
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Decorative Elements - Estilo index-saas.html */}
|
||||
<div className="bg-indigo-600 w-8 h-16 z-20 absolute start-2 lg:bottom-28 md:bottom-36 sm:bottom-40 bottom-16"></div>
|
||||
<div className="bg-indigo-600/20 dark:bg-indigo-600/40 w-8 h-16 z-20 absolute start-12 lg:bottom-32 md:bottom-40 sm:bottom-44 bottom-20 transition-colors duration-500"></div>
|
||||
|
||||
<div className="bg-indigo-600/20 dark:bg-indigo-600/40 w-8 h-16 z-20 absolute end-12 xl:bottom-[420px] lg:bottom-[315px] md:bottom-[285px] sm:bottom-80 bottom-32 transition-colors duration-500"></div>
|
||||
<div className="bg-indigo-600 w-8 h-16 z-20 absolute end-2 xl:bottom-[440px] lg:bottom-[335px] md:bottom-[305px] sm:bottom-[340px] bottom-36"></div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<div className="min-h-screen bg-white">
|
||||
<NextreamHeader />
|
||||
<NextreamHeroSection />
|
||||
|
||||
<PageContainer>
|
||||
<NewFeaturesGrid />
|
||||
<NewContentDetailsSection />
|
||||
<NewTestimonialsCarousel />
|
||||
</PageContainer>
|
||||
|
||||
<NewCallToAction />
|
||||
<NewFooter />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
useEffect(() => {
|
||||
// Inicializar Feather Icons
|
||||
feather.replace()
|
||||
}, [])
|
||||
|
||||
export default NextreamLanding;
|
||||
return (
|
||||
<div className="min-h-screen font-nunito bg-white dark:bg-slate-900 transition-colors duration-500">
|
||||
{/* Modern SaaS Header */}
|
||||
<ModernSaasHeader />
|
||||
|
||||
{/* Hero Section - Estilo index-saas.html */}
|
||||
<StreamingHeroSection />
|
||||
|
||||
{/* Business Partner / Platform Logos */}
|
||||
<PlatformLogos />
|
||||
|
||||
{/* Features Section - Estilo index-saas.html */}
|
||||
<StreamingFeatures />
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<TestimonialsSection />
|
||||
|
||||
{/* Pricing Section */}
|
||||
<PricingSection />
|
||||
|
||||
{/* Modern SaaS Footer */}
|
||||
<ModernSaasFooter />
|
||||
|
||||
{/* Scroll to Top Button */}
|
||||
<ScrollToTop />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NextreamLanding
|
||||
|
||||
@ -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 (
|
||||
<main className="min-h-screen bg-white dark:bg-gray-900">
|
||||
<StreamingHeroSection />
|
||||
<StreamingStats />
|
||||
<PlatformLogos />
|
||||
<StreamingFeatures />
|
||||
<StudioPreview />
|
||||
<TestimonialsSection />
|
||||
<PricingSection />
|
||||
|
||||
{/* CTA Final */}
|
||||
<section className="py-20 bg-gradient-to-r from-purple-600 to-blue-600">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||
¿Listo para Revolucionar tus Transmisiones?
|
||||
</h2>
|
||||
<p className="text-xl text-purple-100 mb-8 max-w-2xl mx-auto">
|
||||
Únete a miles de creadores que ya confían en AvanzaCast para sus streams profesionales
|
||||
</p>
|
||||
<button className="bg-white text-purple-600 hover:bg-gray-100 font-bold py-4 px-12 rounded-full text-lg shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all duration-300">
|
||||
Comenzar Gratis - 14 Días de Prueba
|
||||
</button>
|
||||
<div className="min-h-screen font-nunito">
|
||||
{/* Hero Section - Modern SaaS Style */}
|
||||
<section className="relative w-full py-36 overflow-hidden bg-gradient-to-b to-transparent from-indigo-600/20 dark:from-indigo-600/40">
|
||||
<div className="container mx-auto px-4 relative">
|
||||
<div className="relative grid md:grid-cols-12 grid-cols-1 items-center mt-10 gap-[30px]">
|
||||
<div className="md:col-span-6">
|
||||
<div className="md:me-8">
|
||||
<h4 className="font-bold lg:leading-normal leading-normal text-4xl lg:text-5xl mb-5 text-black dark:text-white">
|
||||
La forma más fácil de <span className="before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-indigo-600 relative inline-block"><span className="relative text-white">transmitir</span></span> a múltiples plataformas
|
||||
</h4>
|
||||
<p className="text-slate-400 text-lg max-w-xl">
|
||||
Lanza tu transmisión en vivo a YouTube, Twitch, Facebook, LinkedIn y más. Todo desde un solo lugar con calidad profesional.
|
||||
</p>
|
||||
|
||||
<div className="subcribe-form mt-6 mb-3">
|
||||
<form className="relative max-w-xl" onSubmit={handleSubmit}>
|
||||
<input
|
||||
type="email"
|
||||
id="subcribe"
|
||||
name="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="py-4 pe-40 ps-6 w-full h-[50px] outline-none text-black dark:text-white rounded-full bg-white dark:bg-slate-900 shadow dark:shadow-gray-800"
|
||||
placeholder="Tu Email..."
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="py-2 px-5 inline-block font-semibold tracking-wide align-middle duration-500 text-base text-center absolute top-[2px] end-[3px] h-[46px] bg-indigo-600 hover:bg-indigo-700 border border-indigo-600 hover:border-indigo-700 text-white rounded-full"
|
||||
>
|
||||
Prueba Gratis <i className="uil uil-arrow-right"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<span className="text-slate-400 font-medium">
|
||||
¿Buscas ayuda? <a href="#" className="text-indigo-600">Contáctanos</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-6">
|
||||
<div className="relative">
|
||||
<div className="relative rounded-xl overflow-hidden shadow-md dark:shadow-gray-800">
|
||||
<div className="w-full py-72 bg-gradient-to-br from-slate-900 to-slate-800 bg-cover bg-no-repeat bg-top flex items-center justify-center">
|
||||
{/* Studio mockup */}
|
||||
<div className="text-center">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-red-600 rounded-full mb-4 animate-pulse">
|
||||
<span className="w-3 h-3 bg-white rounded-full animate-ping"></span>
|
||||
<span className="text-white font-semibold">● EN VIVO</span>
|
||||
</div>
|
||||
<p className="text-white/60 text-sm">Estudio Virtual en el Navegador</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating card - Viewer stats */}
|
||||
<div className="absolute flex justify-between items-center md:bottom-10 bottom-5 md:-start-16 p-4 rounded-lg shadow-md dark:shadow-gray-800 bg-white dark:bg-slate-900 w-60 m-3">
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center justify-center h-[65px] min-w-[65px] bg-indigo-600/5 text-indigo-600 text-center rounded-full me-3">
|
||||
<i className="uil uil-users-alt text-3xl"></i>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h6 className="text-slate-400">Espectadores</h6>
|
||||
<p className="text-xl font-bold">2,847</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-green-600"><i className="uil uil-arrow-up"></i> 12%</span>
|
||||
</div>
|
||||
|
||||
{/* Floating card - Streaming progress */}
|
||||
<div className="absolute xl:top-20 top-40 xl:-end-20 lg:-end-10 -end-1 p-4 rounded-lg shadow-md dark:shadow-gray-800 bg-white dark:bg-slate-900 w-60 m-3">
|
||||
<h5 className="text-xl font-semibold mb-3">Transmitiendo a 5 plataformas</h5>
|
||||
<div className="flex justify-between mt-3 mb-2">
|
||||
<span className="text-slate-400">En progreso</span>
|
||||
<span className="text-slate-400">100%</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-100 dark:bg-gray-800 rounded-full h-[6px]">
|
||||
<div className="bg-indigo-600 h-[6px] rounded-full" style={{width: '100%'}}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Brand Section */}
|
||||
<section className="relative w-full md:pb-24 pb-16 overflow-hidden">
|
||||
<div className="container mx-auto px-4 relative">
|
||||
<div className="grid grid-cols-1 pb-8 text-center">
|
||||
<div className="flex items-center justify-center rounded-full mx-auto bg-gray-50 dark:bg-slate-800 shadow dark:shadow-gray-800 size-[110px]">
|
||||
<svg className="w-12 h-12 text-indigo-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5zm0 18c-4.41 0-8-3.59-8-8V8.3l8-4.44 8 4.44V12c0 4.41-3.59 8-8 8z"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="mb-6 mt-8 md:text-4xl text-3xl md:leading-normal leading-normal font-bold">
|
||||
La mejor plataforma de streaming <br /> para crear contenido en <br />
|
||||
<span className="after:absolute after:end-0 after:start-0 after:bottom-1 after:lg:h-3 after:h-2 after:w-auto after:rounded-md after:bg-indigo-600/30 relative text-indigo-600">vivo profesional.</span>
|
||||
</h3>
|
||||
<p className="text-slate-400 max-w-xl mx-auto">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Video Preview Section */}
|
||||
<div className="grid mt-8">
|
||||
<div className="relative overflow-hidden rounded-lg shadow-md dark:shadow-gray-800 bg-gradient-to-br from-slate-900 to-slate-800">
|
||||
<div className="aspect-video flex items-center justify-center">
|
||||
{/* Video placeholder */}
|
||||
<div className="text-center">
|
||||
<div className="inline-flex items-center gap-3 mb-4">
|
||||
<div className="w-16 h-16 rounded-full bg-indigo-600/20 flex items-center justify-center animate-pulse">
|
||||
<i className="uil uil-play text-3xl text-indigo-600"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-white/80 text-lg font-semibold">Ver Demo del Estudio Virtual</p>
|
||||
<p className="text-white/50 text-sm mt-2">Transmisión multiplatforma en acción</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-2/4 translate-y-2/4 start-0 end-0 text-center">
|
||||
<a href="#!" className="lg:h-20 h-16 lg:w-20 w-16 rounded-full shadow-lg dark:shadow-gray-800 inline-flex items-center justify-center bg-white dark:bg-slate-900 hover:bg-indigo-600 dark:hover:bg-indigo-600 text-indigo-600 hover:text-white duration-500 ease-in-out mx-auto">
|
||||
<i className="mdi mdi-play inline-flex items-center justify-center text-3xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="relative w-full md:py-24 py-16">
|
||||
{/* Why Everyone Loves AvanzaCast */}
|
||||
<div className="container mx-auto px-4 relative md:mt-24 mt-16">
|
||||
<div className="grid grid-cols-1 pb-8 text-center">
|
||||
<h3 className="mb-6 md:text-3xl text-2xl md:leading-normal leading-normal font-semibold">
|
||||
Por qué todos aman AvanzaCast
|
||||
</h3>
|
||||
<p className="text-slate-400 max-w-xl mx-auto">
|
||||
La plataforma de streaming que necesitas para crear contenido profesional y llegar a más audiencia en menos tiempo.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 1 - Multistreaming */}
|
||||
<div className="grid md:grid-cols-2 grid-cols-1 items-center mt-16 gap-[30px]">
|
||||
<div className="relative">
|
||||
<img src="/images/features/multistream.svg" className="rounded-lg shadow-md dark:shadow-gray-800" alt="Multistreaming" />
|
||||
<div className="overflow-hidden absolute lg:size-[400px] size-[320px] bg-indigo-600/5 dark:bg-indigo-600/20 bottom-0 start-0 rotate-45 -z-1 rounded-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div className="lg:ms-8">
|
||||
<h4 className="mb-4 text-2xl leading-normal font-medium">
|
||||
Transmisión Multiplatforma <br /> Alcanza Más Audiencia
|
||||
</h4>
|
||||
<p className="text-slate-400">
|
||||
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.
|
||||
</p>
|
||||
<ul className="list-none text-slate-400 mt-4">
|
||||
<li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> Streaming a 15+ plataformas simultáneamente</li>
|
||||
<li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> Configuración en segundos sin software adicional</li>
|
||||
<li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> Calidad hasta 4K Ultra HD</li>
|
||||
</ul>
|
||||
|
||||
<div className="mt-4">
|
||||
<a href="#" className="relative inline-block font-semibold tracking-wide align-middle text-base text-center border-none after:content-[''] after:absolute after:h-px after:w-0 hover:after:w-full after:end-0 hover:after:end-auto after:bottom-0 after:start-0 after:duration-500 text-indigo-600 hover:text-indigo-600 after:bg-indigo-600 duration-500 ease-in-out">
|
||||
Descubre más <i className="uil uil-angle-right-b align-middle"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Feature 2 - Cloud Recording */}
|
||||
<div className="container mx-auto px-4 relative md:mt-24 mt-16">
|
||||
<div className="grid md:grid-cols-2 grid-cols-1 items-center gap-[30px]">
|
||||
<div className="relative order-1 md:order-2">
|
||||
<img src="/images/features/recording.svg" className="rounded-lg shadow-md dark:shadow-gray-800" alt="Grabación en la nube" />
|
||||
<div className="overflow-hidden absolute lg:size-[400px] size-[320px] bg-indigo-600/5 dark:bg-indigo-600/20 bottom-0 end-0 rotate-45 -z-1 rounded-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div className="lg:me-8 order-2 md:order-1">
|
||||
<h4 className="mb-4 text-2xl leading-normal font-medium">
|
||||
Grabación Automática en la Nube
|
||||
</h4>
|
||||
<p className="text-slate-400">
|
||||
Todas tus transmisiones se graban automáticamente en la nube con calidad profesional. Accede, edita y comparte tus videos cuando quieras. Almacenamiento ilimitado disponible.
|
||||
</p>
|
||||
<ul className="list-none text-slate-400 mt-4">
|
||||
<li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> Grabación automática de todas las sesiones</li>
|
||||
<li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> Almacenamiento seguro en la nube</li>
|
||||
<li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> Descarga y comparte en cualquier momento</li>
|
||||
</ul>
|
||||
|
||||
<div className="mt-4">
|
||||
<a href="#" className="relative inline-block font-semibold tracking-wide align-middle text-base text-center border-none after:content-[''] after:absolute after:h-px after:w-0 hover:after:w-full after:end-0 hover:after:end-auto after:bottom-0 after:start-0 after:duration-500 text-indigo-600 hover:text-indigo-600 after:bg-indigo-600 duration-500 ease-in-out">
|
||||
Descubre más <i className="uil uil-angle-right-b align-middle"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<div className="container mx-auto px-4 relative md:mt-24 mt-16">
|
||||
<div className="grid grid-cols-1 pb-8 text-center">
|
||||
<h6 className="text-indigo-600 text-base mb-2">Testimonios</h6>
|
||||
<h3 className="mb-4 md:text-3xl md:leading-normal text-2xl leading-normal font-semibold">
|
||||
Lo que dicen nuestros usuarios
|
||||
</h3>
|
||||
<p className="text-slate-400 max-w-xl mx-auto">
|
||||
Creadores de contenido, empresas y educadores confían en AvanzaCast para sus transmisiones en vivo.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 grid-cols-1 mt-8 gap-[30px]">
|
||||
{/* Testimonial 1 */}
|
||||
<div className="text-center">
|
||||
<div className="content relative rounded shadow dark:shadow-gray-800 m-2 p-6 bg-white dark:bg-slate-900">
|
||||
<i className="mdi mdi-format-quote-open mdi-48px text-indigo-600"></i>
|
||||
<p className="text-slate-400">
|
||||
"AvanzaCast revolucionó mi forma de hacer streaming. Ahora llego a todas mis plataformas simultáneamente sin complicaciones."
|
||||
</p>
|
||||
<ul className="list-none mb-0 text-amber-400 mt-3">
|
||||
<li className="inline"><i className="mdi mdi-star"></i></li>
|
||||
<li className="inline"><i className="mdi mdi-star"></i></li>
|
||||
<li className="inline"><i className="mdi mdi-star"></i></li>
|
||||
<li className="inline"><i className="mdi mdi-star"></i></li>
|
||||
<li className="inline"><i className="mdi mdi-star"></i></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="text-center mt-5">
|
||||
<div className="size-14 rounded-full bg-indigo-600/10 flex items-center justify-center mx-auto">
|
||||
<i className="uil uil-user text-2xl text-indigo-600"></i>
|
||||
</div>
|
||||
<h6 className="mt-2 font-semibold">Carlos Mendoza</h6>
|
||||
<span className="text-slate-400 text-sm">Creador de Contenido</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Testimonial 2 */}
|
||||
<div className="text-center">
|
||||
<div className="content relative rounded shadow dark:shadow-gray-800 m-2 p-6 bg-white dark:bg-slate-900">
|
||||
<i className="mdi mdi-format-quote-open mdi-48px text-indigo-600"></i>
|
||||
<p className="text-slate-400">
|
||||
"La calidad de grabación es excepcional. Mis podcasts nunca se habían visto tan profesionales. ¡Totalmente recomendado!"
|
||||
</p>
|
||||
<ul className="list-none mb-0 text-amber-400 mt-3">
|
||||
<li className="inline"><i className="mdi mdi-star"></i></li>
|
||||
<li className="inline"><i className="mdi mdi-star"></i></li>
|
||||
<li className="inline"><i className="mdi mdi-star"></i></li>
|
||||
<li className="inline"><i className="mdi mdi-star"></i></li>
|
||||
<li className="inline"><i className="mdi mdi-star"></i></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="text-center mt-5">
|
||||
<div className="size-14 rounded-full bg-indigo-600/10 flex items-center justify-center mx-auto">
|
||||
<i className="uil uil-user text-2xl text-indigo-600"></i>
|
||||
</div>
|
||||
<h6 className="mt-2 font-semibold">María González</h6>
|
||||
<span className="text-slate-400 text-sm">Podcaster</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Testimonial 3 */}
|
||||
<div className="text-center">
|
||||
<div className="content relative rounded shadow dark:shadow-gray-800 m-2 p-6 bg-white dark:bg-slate-900">
|
||||
<i className="mdi mdi-format-quote-open mdi-48px text-indigo-600"></i>
|
||||
<p className="text-slate-400">
|
||||
"Perfecto para nuestros webinars corporativos. La función de invitados remotos funciona sin problemas."
|
||||
</p>
|
||||
<ul className="list-none mb-0 text-amber-400 mt-3">
|
||||
<li className="inline"><i className="mdi mdi-star"></i></li>
|
||||
<li className="inline"><i className="mdi mdi-star"></i></li>
|
||||
<li className="inline"><i className="mdi mdi-star"></i></li>
|
||||
<li className="inline"><i className="mdi mdi-star"></i></li>
|
||||
<li className="inline"><i className="mdi mdi-star"></i></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="text-center mt-5">
|
||||
<div className="size-14 rounded-full bg-indigo-600/10 flex items-center justify-center mx-auto">
|
||||
<i className="uil uil-user text-2xl text-indigo-600"></i>
|
||||
</div>
|
||||
<h6 className="mt-2 font-semibold">Roberto Silva</h6>
|
||||
<span className="text-slate-400 text-sm">Director de Marketing</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pricing Section - Modern SaaS Style */}
|
||||
<div className="container mx-auto px-4 relative md:mt-24 mt-16">
|
||||
<div className="grid lg:grid-cols-12 grid-cols-1 items-center gap-[30px]">
|
||||
<div className="lg:col-span-5">
|
||||
<div className="lg:text-start text-center">
|
||||
<h3 className="mb-6 md:text-3xl text-2xl md:leading-normal leading-normal font-semibold">
|
||||
Planes cómodos y accesibles
|
||||
</h3>
|
||||
<p className="text-slate-400 max-w-xl mx-auto">
|
||||
Comienza con AvanzaCast y elige el plan que mejor se adapte a tus necesidades. Actualiza o cancela cuando quieras.
|
||||
</p>
|
||||
<div className="mt-6">
|
||||
<a href="#" className="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-indigo-600 hover:bg-indigo-700 border-indigo-600 hover:border-indigo-700 text-white rounded-md me-2 mt-2">
|
||||
<i className="uil uil-credit-card"></i> Ver Todos los Planes
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-7 mt-8 lg:mt-0">
|
||||
<div className="lg:ms-8">
|
||||
<div className="grid md:grid-cols-2 grid-cols-1 md:gap-0 gap-[30px]">
|
||||
{/* Starter Plan */}
|
||||
<div className="group border-b-[3px] dark:border-gray-700 relative shadow dark:shadow-gray-800 rounded-md md:scale-110 z-3 bg-white dark:bg-slate-900">
|
||||
<div className="p-6 py-8">
|
||||
<h6 className="font-bold uppercase mb-5 text-indigo-600">Básico</h6>
|
||||
<div className="flex mb-5">
|
||||
<span className="text-xl font-semibold">$</span>
|
||||
<span className="price text-4xl font-semibold mb-0">29</span>
|
||||
<span className="text-xl font-semibold self-end mb-1">/mes</span>
|
||||
</div>
|
||||
|
||||
<ul className="list-none text-slate-400">
|
||||
<li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> 5 destinos streaming</li>
|
||||
<li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> 1080p Full HD</li>
|
||||
<li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> 100GB almacenamiento</li>
|
||||
<li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> Soporte prioritario</li>
|
||||
</ul>
|
||||
<a href="#" className="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-indigo-600 hover:bg-indigo-700 border-indigo-600 hover:border-indigo-700 text-white rounded-md mt-5">
|
||||
Comenzar
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Professional Plan */}
|
||||
<div className="group border-b-[3px] dark:border-gray-700 relative shadow dark:shadow-gray-800 rounded-md z-2 bg-gray-50 dark:bg-slate-800">
|
||||
<div className="p-6 py-8 md:ps-10">
|
||||
<h6 className="font-bold uppercase mb-5 text-indigo-600">Profesional</h6>
|
||||
<div className="flex mb-5">
|
||||
<span className="text-xl font-semibold">$</span>
|
||||
<span className="price text-4xl font-semibold mb-0">79</span>
|
||||
<span className="text-xl font-semibold self-end mb-1">/mes</span>
|
||||
</div>
|
||||
|
||||
<ul className="list-none text-slate-400">
|
||||
<li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> Destinos ilimitados</li>
|
||||
<li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> 4K Ultra HD</li>
|
||||
<li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> Almacenamiento ilimitado</li>
|
||||
<li className="mb-1 flex"><i className="uil uil-check-circle text-indigo-600 text-xl me-2"></i> Soporte 24/7</li>
|
||||
</ul>
|
||||
<a href="#" className="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-indigo-600 hover:bg-indigo-700 border-indigo-600 hover:border-indigo-700 text-white rounded-md mt-5">
|
||||
Pruébalo Ahora
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<div className="container mx-auto px-4 relative md:mt-24 mt-16">
|
||||
<div className="grid grid-cols-1 pb-8 text-center">
|
||||
<h3 className="mb-4 md:text-3xl md:leading-normal text-2xl leading-normal font-semibold">
|
||||
Preguntas Frecuentes
|
||||
</h3>
|
||||
<p className="text-slate-400 max-w-xl mx-auto">
|
||||
Respuestas a las preguntas más comunes sobre AvanzaCast y el streaming profesional.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative grid md:grid-cols-2 grid-cols-1 items-center mt-8 gap-[30px]">
|
||||
<div className="relative">
|
||||
<div className="relative rounded-xl overflow-hidden shadow-md dark:shadow-gray-800">
|
||||
<img src="/images/features/guests.svg" className="w-full h-auto" alt="FAQ" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="space-y-4">
|
||||
{/* FAQ 1 */}
|
||||
<div className="relative shadow dark:shadow-gray-800 rounded-md overflow-hidden">
|
||||
<details className="group">
|
||||
<summary className="flex justify-between items-center p-5 w-full font-medium cursor-pointer list-none">
|
||||
<span>¿Cómo funciona el multistreaming?</span>
|
||||
<span className="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24">
|
||||
<path d="M6 9l6 6 6-6"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div className="p-5 pt-0">
|
||||
<p className="text-slate-400">
|
||||
AvanzaCast envía tu transmisión simultáneamente a todas las plataformas que configures. Solo necesitas conectar tus cuentas una vez y listo.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
{/* FAQ 2 */}
|
||||
<div className="relative shadow dark:shadow-gray-800 rounded-md overflow-hidden">
|
||||
<details className="group">
|
||||
<summary className="flex justify-between items-center p-5 w-full font-medium cursor-pointer list-none">
|
||||
<span>¿Necesito descargar software?</span>
|
||||
<span className="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24">
|
||||
<path d="M6 9l6 6 6-6"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div className="p-5 pt-0">
|
||||
<p className="text-slate-400">
|
||||
No, AvanzaCast funciona 100% en tu navegador web. Solo necesitas una conexión a internet estable.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
{/* FAQ 3 */}
|
||||
<div className="relative shadow dark:shadow-gray-800 rounded-md overflow-hidden">
|
||||
<details className="group">
|
||||
<summary className="flex justify-between items-center p-5 w-full font-medium cursor-pointer list-none">
|
||||
<span>¿A cuántas plataformas puedo transmitir?</span>
|
||||
<span className="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24">
|
||||
<path d="M6 9l6 6 6-6"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div className="p-5 pt-0">
|
||||
<p className="text-slate-400">
|
||||
Dependiendo de tu plan, puedes transmitir desde 5 hasta destinos ilimitados simultáneamente.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
{/* FAQ 4 */}
|
||||
<div className="relative shadow dark:shadow-gray-800 rounded-md overflow-hidden">
|
||||
<details className="group">
|
||||
<summary className="flex justify-between items-center p-5 w-full font-medium cursor-pointer list-none">
|
||||
<span>¿Las grabaciones se guardan automáticamente?</span>
|
||||
<span className="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24">
|
||||
<path d="M6 9l6 6 6-6"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div className="p-5 pt-0">
|
||||
<p className="text-slate-400">
|
||||
Sí, todas tus transmisiones se graban automáticamente en la nube y puedes acceder a ellas en cualquier momento.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Final */}
|
||||
<div className="container mx-auto px-4 relative md:mt-24 mt-16">
|
||||
<div className="grid grid-cols-1 text-center">
|
||||
<h3 className="mb-4 md:text-3xl md:leading-normal text-2xl leading-normal font-semibold">
|
||||
¿Tienes preguntas? ¡Contáctanos!
|
||||
</h3>
|
||||
<p className="text-slate-400 max-w-xl mx-auto">
|
||||
Nuestro equipo está listo para ayudarte a comenzar con AvanzaCast y llevar tu streaming al siguiente nivel.
|
||||
</p>
|
||||
<div className="mt-6">
|
||||
<a href="#" className="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-indigo-600 hover:bg-indigo-700 border-indigo-600 hover:border-indigo-700 text-white rounded-md">
|
||||
<i className="uil uil-phone align-middle me-2"></i> Contáctanos
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-gray-900 text-white py-12">
|
||||
<div className="container mx-auto px-4">
|
||||
<footer className="footer bg-dark-footer relative text-gray-200 dark:text-gray-200">
|
||||
<div className="container">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold mb-4 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
|
||||
AvanzaCast
|
||||
</h3>
|
||||
<h3 className="text-2xl font-bold mb-4">AvanzaCast</h3>
|
||||
<p className="text-gray-400">
|
||||
La plataforma profesional de multistreaming para creadores de contenido.
|
||||
La plataforma profesional de multistreaming para creadores
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4">Producto</h4>
|
||||
<ul className="space-y-2 text-gray-400">
|
||||
<li><a href="#" className="hover:text-white">Características</a></li>
|
||||
<li><a href="#" className="hover:text-white">Precios</a></li>
|
||||
<li><a href="#" className="hover:text-white">Casos de Uso</a></li>
|
||||
<li><a href="#" className="hover:text-white">Integraciones</a></li>
|
||||
<li><a href="#" className="hover:text-white transition-colors">Características</a></li>
|
||||
<li><a href="#" className="hover:text-white transition-colors">Precios</a></li>
|
||||
<li><a href="#" className="hover:text-white transition-colors">Integraciones</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4">Recursos</h4>
|
||||
<ul className="space-y-2 text-gray-400">
|
||||
<li><a href="#" className="hover:text-white">Blog</a></li>
|
||||
<li><a href="#" className="hover:text-white">Guías</a></li>
|
||||
<li><a href="#" className="hover:text-white">API Docs</a></li>
|
||||
<li><a href="#" className="hover:text-white">Soporte</a></li>
|
||||
<li><a href="#" className="hover:text-white transition-colors">Blog</a></li>
|
||||
<li><a href="#" className="hover:text-white transition-colors">Soporte</a></li>
|
||||
<li><a href="#" className="hover:text-white transition-colors">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4">Compañía</h4>
|
||||
<ul className="space-y-2 text-gray-400">
|
||||
<li><a href="#" className="hover:text-white">Acerca de</a></li>
|
||||
<li><a href="#" className="hover:text-white">Contacto</a></li>
|
||||
<li><a href="#" className="hover:text-white">Términos</a></li>
|
||||
<li><a href="#" className="hover:text-white">Privacidad</a></li>
|
||||
<li><a href="#" className="hover:text-white transition-colors">Acerca de</a></li>
|
||||
<li><a href="#" className="hover:text-white transition-colors">Contacto</a></li>
|
||||
<li><a href="#" className="hover:text-white transition-colors">Privacidad</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
|
||||
<p>© 2024 AvanzaCast. Todos los derechos reservados.</p>
|
||||
<p>© 2025 AvanzaCast. Todos los derechos reservados.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
);
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,171 +1,23 @@
|
||||
const sharedConfig = require('../../tailwind.config.shared.js')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
...sharedConfig,
|
||||
darkMode: 'class', // Habilitar dark mode con clase 'dark'
|
||||
content: [
|
||||
'./index.html',
|
||||
'./src/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'../shared-components/src/**/*.{js,ts,jsx,tsx}',
|
||||
],
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: '1rem',
|
||||
},
|
||||
...sharedConfig.theme,
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#eef2ff',
|
||||
100: '#e0e7ff',
|
||||
200: '#c7d2fe',
|
||||
300: '#a5b4fc',
|
||||
400: '#818cf8',
|
||||
500: '#4361ee',
|
||||
600: '#4f46e5',
|
||||
700: '#4338ca',
|
||||
800: '#3730a3',
|
||||
900: '#312e81',
|
||||
DEFAULT: '#4361ee',
|
||||
light: '#eaf1ff',
|
||||
'dark-light': 'rgba(67,97,238,.15)',
|
||||
},
|
||||
secondary: {
|
||||
50: '#f5f3ff',
|
||||
100: '#ede9fe',
|
||||
200: '#ddd6fe',
|
||||
300: '#c4b5fd',
|
||||
400: '#a78bfa',
|
||||
500: '#805dca',
|
||||
600: '#8b5cf6',
|
||||
700: '#7c3aed',
|
||||
800: '#6d28d9',
|
||||
900: '#5b21b6',
|
||||
DEFAULT: '#805dca',
|
||||
light: '#ebe4f7',
|
||||
'dark-light': 'rgb(128 93 202 / 15%)',
|
||||
},
|
||||
success: {
|
||||
50: '#f0fdf4',
|
||||
100: '#dcfce7',
|
||||
200: '#bbf7d0',
|
||||
300: '#86efac',
|
||||
400: '#4ade80',
|
||||
500: '#00ab55',
|
||||
600: '#16a34a',
|
||||
700: '#15803d',
|
||||
800: '#166534',
|
||||
900: '#14532d',
|
||||
DEFAULT: '#00ab55',
|
||||
light: '#ddf5f0',
|
||||
'dark-light': 'rgba(0,171,85,.15)',
|
||||
},
|
||||
danger: {
|
||||
50: '#fef2f2',
|
||||
100: '#fee2e2',
|
||||
200: '#fecaca',
|
||||
300: '#fca5a5',
|
||||
400: '#f87171',
|
||||
500: '#e7515a',
|
||||
600: '#dc2626',
|
||||
700: '#b91c1c',
|
||||
800: '#991b1b',
|
||||
900: '#7f1d1d',
|
||||
DEFAULT: '#e7515a',
|
||||
light: '#fff5f5',
|
||||
'dark-light': 'rgba(231,81,90,.15)',
|
||||
},
|
||||
warning: {
|
||||
50: '#fffbeb',
|
||||
100: '#fef3c7',
|
||||
200: '#fde68a',
|
||||
300: '#fcd34d',
|
||||
400: '#fbbf24',
|
||||
500: '#e2a03f',
|
||||
600: '#d97706',
|
||||
700: '#b45309',
|
||||
800: '#92400e',
|
||||
900: '#78350f',
|
||||
DEFAULT: '#e2a03f',
|
||||
light: '#fff9ed',
|
||||
'dark-light': 'rgba(226,160,63,.15)',
|
||||
},
|
||||
info: {
|
||||
50: '#eff6ff',
|
||||
100: '#dbeafe',
|
||||
200: '#bfdbfe',
|
||||
300: '#93c5fd',
|
||||
400: '#60a5fa',
|
||||
500: '#2196f3',
|
||||
600: '#2563eb',
|
||||
700: '#1d4ed8',
|
||||
800: '#1e40af',
|
||||
900: '#1e3a8a',
|
||||
DEFAULT: '#2196f3',
|
||||
light: '#e7f7ff',
|
||||
'dark-light': 'rgba(33,150,243,.15)',
|
||||
},
|
||||
dark: {
|
||||
DEFAULT: '#3b3f5c',
|
||||
light: '#eaeaec',
|
||||
'dark-light': 'rgba(59,63,92,.15)',
|
||||
},
|
||||
black: {
|
||||
DEFAULT: '#0e1726',
|
||||
light: '#e3e4eb',
|
||||
'dark-light': 'rgba(14,23,38,.15)',
|
||||
},
|
||||
white: {
|
||||
DEFAULT: '#ffffff',
|
||||
light: '#e0e6ed',
|
||||
dark: '#888ea8',
|
||||
},
|
||||
'white-light': '#e0e6ed',
|
||||
'white-dark': '#888ea8',
|
||||
/* Semantic aliases for admin (Vristo) */
|
||||
accent: '#4361ee',
|
||||
'accent-light': '#eaf1ff',
|
||||
muted: '#e0e6ed',
|
||||
body: '#0e1726',
|
||||
surface: '#ffffff',
|
||||
},
|
||||
fontFamily: {
|
||||
nunito: ['var(--font-nunito)', 'Nunito', 'sans-serif'],
|
||||
sans: ['var(--font-nunito)', 'Nunito', 'system-ui', 'sans-serif'],
|
||||
},
|
||||
spacing: {
|
||||
4.5: '1.125rem',
|
||||
5.5: '1.375rem',
|
||||
},
|
||||
boxShadow: {
|
||||
'3xl': '0 2px 2px rgb(224 230 237 / 46%), 1px 6px 7px rgb(224 230 237 / 46%)',
|
||||
'card': '0 0 15px 1px rgba(113, 106, 202, 0.1)',
|
||||
},
|
||||
borderRadius: {
|
||||
'xl': '0.75rem',
|
||||
'2xl': '1rem',
|
||||
},
|
||||
animation: {
|
||||
'fadeIn': 'fadeIn 0.3s ease-in-out',
|
||||
'slideDown': 'slideDown 0.3s ease-out',
|
||||
'slideUp': 'slideUp 0.3s ease-out',
|
||||
},
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
'0%': { opacity: '0' },
|
||||
'100%': { opacity: '1' },
|
||||
},
|
||||
slideDown: {
|
||||
'0%': { transform: 'translateY(-10px)', opacity: '0' },
|
||||
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||||
},
|
||||
slideUp: {
|
||||
'0%': { transform: 'translateY(10px)', opacity: '0' },
|
||||
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||||
},
|
||||
},
|
||||
...sharedConfig.theme.extend,
|
||||
typography: ({ theme }) => ({
|
||||
DEFAULT: {
|
||||
css: {
|
||||
'--tw-prose-invert-headings': theme('colors.white.dark'),
|
||||
'--tw-prose-invert-links': theme('colors.white.dark'),
|
||||
'--tw-prose-invert-headings': theme('colors.white.dark || white'),
|
||||
'--tw-prose-invert-links': theme('colors.white.dark || white'),
|
||||
h1: { fontSize: '2.5rem', marginBottom: '0.5rem', marginTop: 0 },
|
||||
h2: { fontSize: '2rem', marginBottom: '0.5rem', marginTop: 0 },
|
||||
h3: { fontSize: '1.75rem', marginBottom: '0.5rem', marginTop: 0 },
|
||||
|
||||
40
packages/shared-components/src/Badge.tsx
Normal file
40
packages/shared-components/src/Badge.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import React from 'react'
|
||||
|
||||
export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
|
||||
variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
|
||||
({ variant = 'primary', size = 'md', className = '', children, ...props }, ref) => {
|
||||
const baseStyles = 'inline-flex items-center font-semibold rounded-md'
|
||||
|
||||
const variantStyles = {
|
||||
primary: 'bg-indigo-600/10 text-indigo-600 dark:bg-indigo-600/20',
|
||||
secondary: 'bg-gray-600/10 text-gray-600 dark:bg-gray-600/20',
|
||||
success: 'bg-green-600/10 text-green-600 dark:bg-green-600/20',
|
||||
danger: 'bg-red-600/10 text-red-600 dark:bg-red-600/20',
|
||||
warning: 'bg-orange-600/10 text-orange-600 dark:bg-orange-600/20',
|
||||
info: 'bg-blue-600/10 text-blue-600 dark:bg-blue-600/20',
|
||||
}
|
||||
|
||||
const sizeStyles = {
|
||||
sm: 'px-2 py-0.5 text-xs',
|
||||
md: 'px-2.5 py-0.5 text-sm',
|
||||
lg: 'px-3 py-1 text-base',
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
ref={ref}
|
||||
className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
Badge.displayName = 'Badge'
|
||||
47
packages/shared-components/src/Button.tsx
Normal file
47
packages/shared-components/src/Button.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
import React from 'react'
|
||||
|
||||
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
isLoading?: boolean
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ variant = 'primary', size = 'md', isLoading = false, className = '', children, disabled, ...props }, ref) => {
|
||||
const baseStyles = 'inline-flex items-center justify-center font-semibold tracking-wide border align-middle duration-500 text-center rounded-md'
|
||||
|
||||
const variantStyles = {
|
||||
primary: 'bg-indigo-600 hover:bg-indigo-700 border-indigo-600 hover:border-indigo-700 text-white',
|
||||
secondary: 'bg-gray-600 hover:bg-gray-700 border-gray-600 hover:border-gray-700 text-white',
|
||||
outline: 'bg-transparent hover:bg-indigo-600 border-indigo-600 text-indigo-600 hover:text-white',
|
||||
ghost: 'bg-transparent hover:bg-gray-50 dark:hover:bg-gray-800 border-transparent text-gray-700 dark:text-gray-300',
|
||||
danger: 'bg-red-600 hover:bg-red-700 border-red-600 hover:border-red-700 text-white',
|
||||
}
|
||||
|
||||
const sizeStyles = {
|
||||
sm: 'px-3 py-1 text-sm h-8',
|
||||
md: 'px-5 py-2 text-base h-10',
|
||||
lg: 'px-6 py-3 text-lg h-12',
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className} ${disabled || isLoading ? 'opacity-60 cursor-not-allowed' : ''}`}
|
||||
disabled={disabled || isLoading}
|
||||
{...props}
|
||||
>
|
||||
{isLoading && (
|
||||
<svg className="animate-spin -ml-1 mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
)}
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
Button.displayName = 'Button'
|
||||
70
packages/shared-components/src/Card.tsx
Normal file
70
packages/shared-components/src/Card.tsx
Normal file
@ -0,0 +1,70 @@
|
||||
import React from 'react'
|
||||
|
||||
export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
variant?: 'default' | 'hover' | 'gradient'
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export const Card = React.forwardRef<HTMLDivElement, CardProps>(
|
||||
({ variant = 'default', className = '', children, ...props }, ref) => {
|
||||
const baseStyles = 'rounded-xl p-6 duration-500'
|
||||
|
||||
const variantStyles = {
|
||||
default: 'bg-white dark:bg-slate-900 shadow dark:shadow-gray-800',
|
||||
hover: 'bg-white dark:bg-slate-900 hover:shadow dark:hover:shadow-gray-800',
|
||||
gradient: 'bg-gradient-to-t from-indigo-600 to-indigo-500 shadow-lg',
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={`${baseStyles} ${variantStyles[variant]} ${className}`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
Card.displayName = 'Card'
|
||||
|
||||
export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
|
||||
({ className = '', children, ...props }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={`pb-4 border-b border-gray-100 dark:border-gray-800 ${className}`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
CardHeader.displayName = 'CardHeader'
|
||||
|
||||
export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export const CardBody = React.forwardRef<HTMLDivElement, CardBodyProps>(
|
||||
({ className = '', children, ...props }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={`pt-4 ${className}`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
CardBody.displayName = 'CardBody'
|
||||
89
packages/shared-components/src/Input.tsx
Normal file
89
packages/shared-components/src/Input.tsx
Normal file
@ -0,0 +1,89 @@
|
||||
import React from 'react'
|
||||
|
||||
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
||||
label?: string
|
||||
error?: string
|
||||
helperText?: string
|
||||
}
|
||||
|
||||
export const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
({ label, error, helperText, className = '', ...props }, ref) => {
|
||||
return (
|
||||
<div className="w-full">
|
||||
{label && (
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
<input
|
||||
ref={ref}
|
||||
className={`
|
||||
w-full px-3 py-2 text-sm bg-white dark:bg-slate-900
|
||||
border ${error ? 'border-red-500' : 'border-gray-200 dark:border-gray-800'}
|
||||
rounded-md outline-none
|
||||
focus:ring-2 ${error ? 'focus:ring-red-500' : 'focus:ring-indigo-500'}
|
||||
focus:border-transparent
|
||||
placeholder-gray-400 dark:placeholder-gray-600
|
||||
text-gray-900 dark:text-white
|
||||
disabled:opacity-60 disabled:cursor-not-allowed
|
||||
duration-200
|
||||
${className}
|
||||
`}
|
||||
{...props}
|
||||
/>
|
||||
{error && (
|
||||
<p className="mt-1 text-sm text-red-500">{error}</p>
|
||||
)}
|
||||
{helperText && !error && (
|
||||
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{helperText}</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
Input.displayName = 'Input'
|
||||
|
||||
export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
||||
label?: string
|
||||
error?: string
|
||||
helperText?: string
|
||||
}
|
||||
|
||||
export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
({ label, error, helperText, className = '', ...props }, ref) => {
|
||||
return (
|
||||
<div className="w-full">
|
||||
{label && (
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
<textarea
|
||||
ref={ref}
|
||||
className={`
|
||||
w-full px-3 py-2 text-sm bg-white dark:bg-slate-900
|
||||
border ${error ? 'border-red-500' : 'border-gray-200 dark:border-gray-800'}
|
||||
rounded-md outline-none
|
||||
focus:ring-2 ${error ? 'focus:ring-red-500' : 'focus:ring-indigo-500'}
|
||||
focus:border-transparent
|
||||
placeholder-gray-400 dark:placeholder-gray-600
|
||||
text-gray-900 dark:text-white
|
||||
disabled:opacity-60 disabled:cursor-not-allowed
|
||||
duration-200
|
||||
${className}
|
||||
`}
|
||||
{...props}
|
||||
/>
|
||||
{error && (
|
||||
<p className="mt-1 text-sm text-red-500">{error}</p>
|
||||
)}
|
||||
{helperText && !error && (
|
||||
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{helperText}</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
Textarea.displayName = 'Textarea'
|
||||
8
packages/shared-components/src/index.ts
Normal file
8
packages/shared-components/src/index.ts
Normal file
@ -0,0 +1,8 @@
|
||||
// UI Components (Techwind Design System)
|
||||
export * from './Button'
|
||||
export * from './Card'
|
||||
export * from './Input'
|
||||
export * from './Badge'
|
||||
|
||||
// Layouts & Sections
|
||||
export { default as Header } from './Header'
|
||||
BIN
public/ajax-loader.gif
Normal file
BIN
public/ajax-loader.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
public/materialdesignicons-webfont.eot
Normal file
BIN
public/materialdesignicons-webfont.eot
Normal file
Binary file not shown.
9879
public/materialdesignicons-webfont.svg
Normal file
9879
public/materialdesignicons-webfont.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 3.5 MiB |
BIN
public/materialdesignicons-webfont.ttf
Normal file
BIN
public/materialdesignicons-webfont.ttf
Normal file
Binary file not shown.
BIN
public/materialdesignicons-webfont.woff
Normal file
BIN
public/materialdesignicons-webfont.woff
Normal file
Binary file not shown.
BIN
public/materialdesignicons-webfont.woff2
Normal file
BIN
public/materialdesignicons-webfont.woff2
Normal file
Binary file not shown.
6
src/styles/custom/_fonts.scss
Normal file
6
src/styles/custom/_fonts.scss
Normal file
@ -0,0 +1,6 @@
|
||||
/* Fuentes de Google Fonts usadas en Techwind */
|
||||
@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');
|
||||
13
src/styles/custom/_general.scss
Normal file
13
src/styles/custom/_general.scss
Normal file
@ -0,0 +1,13 @@
|
||||
/* _general.scss - Estilos generales del template Techwind */
|
||||
|
||||
p {
|
||||
@apply leading-relaxed;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
@apply leading-normal;
|
||||
}
|
||||
|
||||
::selection {
|
||||
@apply bg-indigo-600/90 text-white;
|
||||
}
|
||||
14
src/styles/custom/pages/_helper.scss
Normal file
14
src/styles/custom/pages/_helper.scss
Normal file
@ -0,0 +1,14 @@
|
||||
/* _helper.scss - Utilidades y helpers */
|
||||
|
||||
.mover {
|
||||
animation: move 3s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes move {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
138
src/styles/custom/pages/_hero.scss
Normal file
138
src/styles/custom/pages/_hero.scss
Normal file
@ -0,0 +1,138 @@
|
||||
/* _hero.scss - Efectos para secciones Hero */
|
||||
|
||||
/* Efecto de background animado para Job Hero */
|
||||
.background-effect {
|
||||
.circles {
|
||||
li {
|
||||
@apply absolute block -bottom-[150px] bg-indigo-600/30;
|
||||
animation: animate 25s linear infinite;
|
||||
|
||||
&.brand-img {
|
||||
&:nth-child(1),
|
||||
&:nth-child(2),
|
||||
&:nth-child(3),
|
||||
&:nth-child(4),
|
||||
&:nth-child(5),
|
||||
&:nth-child(6),
|
||||
&:nth-child(7),
|
||||
&:nth-child(8),
|
||||
&:nth-child(9),
|
||||
&:nth-child(10) {
|
||||
@apply bg-transparent;
|
||||
}
|
||||
}
|
||||
&:nth-child(1),
|
||||
&:nth-child(2),
|
||||
&:nth-child(3),
|
||||
&:nth-child(4),
|
||||
&:nth-child(5),
|
||||
&:nth-child(6),
|
||||
&:nth-child(7),
|
||||
&:nth-child(8),
|
||||
&:nth-child(9),
|
||||
&:nth-child(10) {
|
||||
@apply size-12;
|
||||
}
|
||||
&:nth-child(1) {
|
||||
@apply start-1/4;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
@apply start-[10%];
|
||||
animation-delay: 2s;
|
||||
animation-duration: 12s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
@apply start-[70%];
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
@apply start-[40%];
|
||||
animation-delay: 0s;
|
||||
animation-duration: 18s;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
@apply start-[65%];
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
@apply start-3/4;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
&:nth-child(7) {
|
||||
@apply start-[35%];
|
||||
animation-delay: 7s;
|
||||
}
|
||||
|
||||
&:nth-child(8) {
|
||||
@apply start-1/2;
|
||||
animation-delay: 15s;
|
||||
animation-duration: 45s;
|
||||
}
|
||||
|
||||
&:nth-child(9) {
|
||||
@apply start-[20%];
|
||||
animation-delay: 2s;
|
||||
animation-duration: 35s;
|
||||
}
|
||||
|
||||
&:nth-child(10) {
|
||||
@apply start-[85%];
|
||||
animation-delay: 0s;
|
||||
animation-duration: 11s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animate {
|
||||
0% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
opacity: 1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-1000px) rotate(720deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Kenburn Effect para Business Demo */
|
||||
.image-wrap {
|
||||
animation: 100s ppb_kenburns linear infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes move {
|
||||
0% {
|
||||
transform-origin: bottom;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
}
|
||||
|
||||
@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%);
|
||||
}
|
||||
}
|
||||
15
src/styles/techwind.scss
Normal file
15
src/styles/techwind.scss
Normal file
@ -0,0 +1,15 @@
|
||||
/* techwind.scss - Archivo principal de estilos personalizados de Techwind */
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
// FONTS
|
||||
@import "./custom/fonts";
|
||||
|
||||
// GENERAL
|
||||
@import "./custom/general";
|
||||
|
||||
// PAGES
|
||||
@import "./custom/pages/helper";
|
||||
@import "./custom/pages/hero";
|
||||
129
tailwind.config.shared.js
Normal file
129
tailwind.config.shared.js
Normal file
@ -0,0 +1,129 @@
|
||||
const colors = require('tailwindcss/colors')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: 'class',
|
||||
important: true,
|
||||
theme: {
|
||||
screens: {
|
||||
xs: '540px',
|
||||
sm: '640px',
|
||||
md: '768px',
|
||||
lg: '1024px',
|
||||
xl: '1280px',
|
||||
'2xl': '1536px',
|
||||
},
|
||||
fontFamily: {
|
||||
'sans': ['"Nunito", sans-serif'],
|
||||
'nunito': ['"Nunito", sans-serif'],
|
||||
'cursive': ['"Alex Brush", cursive'],
|
||||
'serif': ['"EB Garamond", serif'],
|
||||
},
|
||||
container: {
|
||||
center: true,
|
||||
padding: {
|
||||
DEFAULT: '12px',
|
||||
sm: '1rem',
|
||||
lg: '45px',
|
||||
xl: '5rem',
|
||||
'2xl': '13rem',
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
'dark': '#3c4858',
|
||||
'black': '#161c2d',
|
||||
'dark-footer': '#192132',
|
||||
// Colores principales de AvanzaCast
|
||||
primary: {
|
||||
50: '#f5f3ff',
|
||||
100: '#ede9fe',
|
||||
200: '#ddd6fe',
|
||||
300: '#c4b5fd',
|
||||
400: '#a78bfa',
|
||||
500: '#8b5cf6',
|
||||
600: '#7c3aed',
|
||||
700: '#6d28d9',
|
||||
800: '#5b21b6',
|
||||
900: '#4c1d95',
|
||||
},
|
||||
secondary: {
|
||||
50: '#eff6ff',
|
||||
100: '#dbeafe',
|
||||
200: '#bfdbfe',
|
||||
300: '#93c5fd',
|
||||
400: '#60a5fa',
|
||||
500: '#3b82f6',
|
||||
600: '#2563eb',
|
||||
700: '#1d4ed8',
|
||||
800: '#1e40af',
|
||||
900: '#1e3a8a',
|
||||
},
|
||||
},
|
||||
|
||||
boxShadow: {
|
||||
sm: '0 2px 4px 0 rgb(60 72 88 / 0.15)',
|
||||
DEFAULT: '0 0 3px rgb(60 72 88 / 0.15)',
|
||||
md: '0 5px 13px rgb(60 72 88 / 0.20)',
|
||||
lg: '0 10px 25px -3px rgb(60 72 88 / 0.15)',
|
||||
xl: '0 20px 25px -5px rgb(60 72 88 / 0.1), 0 8px 10px -6px rgb(60 72 88 / 0.1)',
|
||||
'2xl': '0 25px 50px -12px rgb(60 72 88 / 0.25)',
|
||||
inner: 'inset 0 2px 4px 0 rgb(60 72 88 / 0.05)',
|
||||
testi: '2px 2px 2px -1px rgb(60 72 88 / 0.15)',
|
||||
},
|
||||
|
||||
spacing: {
|
||||
0.75: '0.1875rem',
|
||||
3.25: '0.8125rem'
|
||||
},
|
||||
|
||||
maxWidth: {
|
||||
'1200': '71.25rem',
|
||||
'992': '60rem',
|
||||
'768': '45rem',
|
||||
},
|
||||
|
||||
zIndex: {
|
||||
1: '1',
|
||||
2: '2',
|
||||
3: '3',
|
||||
999: '999',
|
||||
},
|
||||
|
||||
animation: {
|
||||
'float': 'float 6s ease-in-out infinite',
|
||||
'float-delayed': 'float 6s ease-in-out infinite 3s',
|
||||
'fadeInUp': 'fadeInUp 0.6s ease-out',
|
||||
'marquee': 'marquee 30s linear infinite',
|
||||
'spin-slow': 'spin 10s linear infinite',
|
||||
},
|
||||
|
||||
keyframes: {
|
||||
float: {
|
||||
'0%, 100%': { transform: 'translateY(0px)' },
|
||||
'50%': { transform: 'translateY(-20px)' },
|
||||
},
|
||||
fadeInUp: {
|
||||
'0%': {
|
||||
opacity: '0',
|
||||
transform: 'translateY(30px)',
|
||||
},
|
||||
'100%': {
|
||||
opacity: '1',
|
||||
transform: 'translateY(0)',
|
||||
},
|
||||
},
|
||||
marquee: {
|
||||
'0%': { transform: 'translateX(0%)' },
|
||||
'100%': { transform: 'translateX(-50%)' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
plugins: [
|
||||
require('@tailwindcss/forms')({
|
||||
strategy: 'class',
|
||||
}),
|
||||
],
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user