101 lines
3.7 KiB
TypeScript
101 lines
3.7 KiB
TypeScript
import React from 'react'
|
|
|
|
interface BlogPost {
|
|
image: string
|
|
color: string
|
|
title: string
|
|
author: string
|
|
tag: string
|
|
}
|
|
|
|
const blogPosts: BlogPost[] = [
|
|
{
|
|
image: '📅',
|
|
color: 'bg-red-500',
|
|
title: 'Cómo programar una transmisión en vivo en YouTube',
|
|
author: 'Kelsey Bentz',
|
|
tag: 'YouTube'
|
|
},
|
|
{
|
|
image: '🎙️',
|
|
color: 'bg-blue-600',
|
|
title: '7 formas de mejorar el audio de la transmisión en vivo',
|
|
author: 'AvanzaCast',
|
|
tag: 'Audio'
|
|
},
|
|
{
|
|
image: '⏱️',
|
|
color: 'bg-yellow-500',
|
|
title: '¿Cuánto tiempo debe durar un podcast? Elegir la duración adecuada del episodio',
|
|
author: 'AvanzaCast',
|
|
tag: 'Podcast'
|
|
},
|
|
{
|
|
image: '📺',
|
|
color: 'bg-blue-700',
|
|
title: 'Cómo realizar una transmisión en vivo de prueba sin ir en vivo | 3 formas fáciles',
|
|
author: 'AvanzaCast',
|
|
tag: 'Tutorial'
|
|
}
|
|
]
|
|
|
|
export default function ContentSection() {
|
|
return (
|
|
<>
|
|
{/* Content Header Section */}
|
|
<section className="bg-gradient-to-r from-blue-600 via-purple-600 to-green-500 py-20">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-white mb-8">
|
|
Transmite mejor, crece más rápido
|
|
</h2>
|
|
<p className="text-xl text-white/90 mb-8 max-w-4xl mx-auto">
|
|
Descubre consejos de expertos, guías prácticas y acciones reales diseñadas para ayudarte a
|
|
crear contenido de alta calidad, involucrar a tu audiencia y aumentar tu presencia—una
|
|
transmisión a la vez.
|
|
</p>
|
|
<button className="text-blue-600 bg-white hover:bg-gray-50 px-6 py-3 rounded-lg font-medium transition-colors">
|
|
Ver todas las publicaciones
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Blog Posts Grid */}
|
|
<section className="bg-white py-20">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{blogPosts.map((post, index) => (
|
|
<article key={index} className="group cursor-pointer">
|
|
<div className={`${post.color} rounded-2xl p-6 mb-4 text-center text-white relative overflow-hidden hover:scale-105 transition-transform`}>
|
|
<div className="text-6xl mb-4">{post.image}</div>
|
|
<div className="absolute bottom-4 left-4 right-4">
|
|
<p className="text-sm opacity-90">avanzacast.com/blog</p>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center space-x-2">
|
|
<span className="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
|
|
{post.tag}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-gray-500">
|
|
Escrito por <span className="text-blue-600 font-medium">{post.author}</span>
|
|
</p>
|
|
<h3 className="font-bold text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-3">
|
|
{post.title}
|
|
</h3>
|
|
<button className="text-blue-600 text-sm font-medium flex items-center hover:text-blue-800 transition-colors">
|
|
Leer más
|
|
<svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|