Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Kamen Entertainments | Premium Music Studio</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8fafc; | |
| color: #1e293b; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); | |
| } | |
| .audio-player { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .audio-wave { | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| width: 100%; | |
| } | |
| .audio-wave div { | |
| height: 100%; | |
| width: 3px; | |
| background: #3b82f6; | |
| border-radius: 5px; | |
| animation: wave 1.5s infinite ease-in-out; | |
| } | |
| @keyframes wave { | |
| 0%, 100% { | |
| transform: scaleY(0.3); | |
| } | |
| 50% { | |
| transform: scaleY(1); | |
| } | |
| } | |
| .audio-wave div:nth-child(1) { animation-delay: 0.1s; } | |
| .audio-wave div:nth-child(2) { animation-delay: 0.2s; } | |
| .audio-wave div:nth-child(3) { animation-delay: 0.3s; } | |
| .audio-wave div:nth-child(4) { animation-delay: 0.4s; } | |
| .audio-wave div:nth-child(5) { animation-delay: 0.5s; } | |
| .audio-wave div:nth-child(6) { animation-delay: 0.6s; } | |
| .audio-wave div:nth-child(7) { animation-delay: 0.7s; } | |
| .audio-wave div:nth-child(8) { animation-delay: 0.8s; } | |
| .portfolio-item { | |
| transition: all 0.3s ease; | |
| } | |
| .portfolio-item:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: #3b82f6; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .progress-bar { | |
| height: 4px; | |
| background-color: #e2e8f0; | |
| border-radius: 2px; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background-color: #3b82f6; | |
| border-radius: 2px; | |
| width: 0%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm fixed w-full z-10"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <span class="text-2xl font-bold text-blue-800">KAMEN</span> | |
| <span class="text-2xl font-light text-blue-500">ENTERTAINMENTS</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#home" class="nav-link text-blue-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Home</a> | |
| <a href="#services" class="nav-link text-blue-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Services</a> | |
| <a href="#portfolio" class="nav-link text-blue-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Portfolio</a> | |
| <a href="#studio" class="nav-link text-blue-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Studio</a> | |
| <a href="#team" class="nav-link text-blue-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Team</a> | |
| <a href="#contact" class="nav-link text-blue-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Contact</a> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-blue-800 hover:text-blue-600 focus:outline-none"> | |
| <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="block px-3 py-2 text-base font-medium text-blue-900 hover:text-blue-600 hover:bg-blue-50">Home</a> | |
| <a href="#services" class="block px-3 py-2 text-base font-medium text-blue-900 hover:text-blue-600 hover:bg-blue-50">Services</a> | |
| <a href="#portfolio" class="block px-3 py-2 text-base font-medium text-blue-900 hover:text-blue-600 hover:bg-blue-50">Portfolio</a> | |
| <a href="#studio" class="block px-3 py-2 text-base font-medium text-blue-900 hover:text-blue-600 hover:bg-blue-50">Studio</a> | |
| <a href="#team" class="block px-3 py-2 text-base font-medium text-blue-900 hover:text-blue-600 hover:bg-blue-50">Team</a> | |
| <a href="#contact" class="block px-3 py-2 text-base font-medium text-blue-900 hover:text-blue-600 hover:bg-blue-50">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="gradient-bg text-white pt-24 pb-20 md:pt-32 md:pb-28"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="md:flex md:items-center md:justify-between"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">Crafting Exceptional <span class="text-blue-200">Sound Experiences</span></h1> | |
| <p class="text-lg md:text-xl text-blue-100 mb-8">Kamen Entertainments delivers premium audio production, mixing, mastering, and sound design services for artists and creators worldwide.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#contact" class="bg-white text-blue-800 hover:bg-blue-100 px-6 py-3 rounded-full font-medium transition duration-300">Get Started</a> | |
| <a href="#portfolio" class="border-2 border-white text-white hover:bg-white hover:text-blue-800 px-6 py-3 rounded-full font-medium transition duration-300">Our Work</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Music Studio" class="rounded-xl shadow-2xl w-full h-auto"> | |
| <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-xl shadow-lg w-64"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-headphones text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-xs text-blue-500">Currently Working On</p> | |
| <p class="text-sm font-medium text-blue-900">New Album Mix</p> | |
| </div> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 65%;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Our <span class="text-blue-600">Services</span></h2> | |
| <p class="text-lg text-blue-800 max-w-3xl mx-auto">We offer a comprehensive range of audio production services tailored to meet your creative needs.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-blue-50 rounded-xl p-8 hover:shadow-lg transition duration-300"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-microphone text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-900 mb-3">Recording</h3> | |
| <p class="text-blue-800">Professional recording sessions in our state-of-the-art studio with premium equipment and acoustics.</p> | |
| </div> | |
| <div class="bg-blue-50 rounded-xl p-8 hover:shadow-lg transition duration-300"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-sliders-h text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-900 mb-3">Mixing</h3> | |
| <p class="text-blue-800">Expert audio mixing to balance and enhance all elements of your track for optimal sound quality.</p> | |
| </div> | |
| <div class="bg-blue-50 rounded-xl p-8 hover:shadow-lg transition duration-300"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-volume-up text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-900 mb-3">Mastering</h3> | |
| <p class="text-blue-800">Final polish for your tracks ensuring they sound perfect on all playback systems and platforms.</p> | |
| </div> | |
| <div class="bg-blue-50 rounded-xl p-8 hover:shadow-lg transition duration-300"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-music text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-900 mb-3">Sound Design</h3> | |
| <p class="text-blue-800">Custom sound effects and audio elements for films, games, and multimedia projects.</p> | |
| </div> | |
| <div class="bg-blue-50 rounded-xl p-8 hover:shadow-lg transition duration-300"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-film text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-900 mb-3">Audio Post-Production</h3> | |
| <p class="text-blue-800">Complete audio post-production services for film, TV, and video content.</p> | |
| </div> | |
| <div class="bg-blue-50 rounded-xl p-8 hover:shadow-lg transition duration-300"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-podcast text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-900 mb-3">Podcast Production</h3> | |
| <p class="text-blue-800">Full-service podcast production including recording, editing, mixing, and publishing.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Portfolio Section --> | |
| <section id="portfolio" class="py-20 bg-blue-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Our <span class="text-blue-600">Portfolio</span></h2> | |
| <p class="text-lg text-blue-800 max-w-3xl mx-auto">Explore our recent projects and hear the difference professional audio production makes.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16"> | |
| <div class="portfolio-item bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Music Production" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-blue-900 bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300"> | |
| <button class="bg-white text-blue-800 rounded-full w-16 h-16 flex items-center justify-center"> | |
| <i class="fas fa-play text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-blue-900 mb-2">Electronic Dance Album</h3> | |
| <p class="text-blue-800 mb-4">Full production, mixing and mastering for an upcoming EDM artist.</p> | |
| <!-- Audio Player --> | |
| <div class="audio-player rounded-lg p-4 mb-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div> | |
| <p class="text-sm font-medium text-white">Before Mixing</p> | |
| <p class="text-xs text-blue-200">Demo Version</p> | |
| </div> | |
| <button class="text-white hover:text-blue-200"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| <div class="audio-wave mb-2"> | |
| <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-blue-200"> | |
| <span>0:45</span> | |
| <span>3:22</span> | |
| </div> | |
| </div> | |
| <div class="audio-player rounded-lg p-4 bg-blue-800"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div> | |
| <p class="text-sm font-medium text-white">After Mixing</p> | |
| <p class="text-xs text-blue-200">Final Master</p> | |
| </div> | |
| <button class="text-white hover:text-blue-200"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| <div class="audio-wave mb-2"> | |
| <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-blue-200"> | |
| <span>0:45</span> | |
| <span>3:22</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="portfolio-item bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Hip Hop Recording" class="w-full h-64 object-cover"> | |
| <div class="absolute inset-0 bg-blue-900 bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300"> | |
| <button class="bg-white text-blue-800 rounded-full w-16 h-16 flex items-center justify-center"> | |
| <i class="fas fa-play text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-blue-900 mb-2">Hip Hop Single</h3> | |
| <p class="text-blue-800 mb-4">Recording and mixing for an independent hip hop artist's latest single.</p> | |
| <!-- Audio Player --> | |
| <div class="audio-player rounded-lg p-4 mb-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div> | |
| <p class="text-sm font-medium text-white">Before Mixing</p> | |
| <p class="text-xs text-blue-200">Demo Version</p> | |
| </div> | |
| <button class="text-white hover:text-blue-200"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| <div class="audio-wave mb-2"> | |
| <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-blue-200"> | |
| <span>0:45</span> | |
| <span>3:22</span> | |
| </div> | |
| </div> | |
| <div class="audio-player rounded-lg p-4 bg-blue-800"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div> | |
| <p class="text-sm font-medium text-white">After Mixing</p> | |
| <p class="text-xs text-blue-200">Final Master</p> | |
| </div> | |
| <button class="text-white hover:text-blue-200"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| <div class="audio-wave mb-2"> | |
| <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-blue-200"> | |
| <span>0:45</span> | |
| <span>3:22</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <a href="#" class="inline-block border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-6 py-3 rounded-full font-medium transition duration-300">View All Projects</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Studio Section --> | |
| <section id="studio" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Our <span class="text-blue-600">Studio</span></h2> | |
| <p class="text-lg text-blue-800 max-w-3xl mx-auto">A creative sanctuary equipped with the finest tools for audio production.</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Studio Control Room" class="rounded-xl shadow-xl w-full"> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-blue-900 mb-6">World-Class Facilities</h3> | |
| <p class="text-blue-800 mb-6">Our studio features acoustically treated rooms, high-end analog and digital equipment, and a comfortable creative environment designed to bring out the best in your music.</p> | |
| <div class="grid grid-cols-2 gap-6 mb-8"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-volume-off text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-blue-900 mb-1">Sound Isolation</h4> | |
| <p class="text-sm text-blue-800">Premium acoustic treatment for optimal sound.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-microphone-alt text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-blue-900 mb-1">Premium Mics</h4> | |
| <p class="text-sm text-blue-800">Selection of industry-standard microphones.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-sliders-h text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-blue-900 mb-1">Analog Gear</h4> | |
| <p class="text-sm text-blue-800">Vintage and modern outboard equipment.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-headphones text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-blue-900 mb-1">Monitoring</h4> | |
| <p class="text-sm text-blue-800">High-end studio monitors for accurate playback.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full font-medium transition duration-300">Book Studio Time</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team Section --> | |
| <section id="team" class="py-20 bg-blue-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Meet The <span class="text-blue-600">Team</span></h2> | |
| <p class="text-lg text-blue-800 max-w-3xl mx-auto">Our team of experienced audio professionals is dedicated to bringing your vision to life.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md text-center p-6"> | |
| <div class="w-32 h-32 mx-auto rounded-full overflow-hidden mb-4 border-4 border-blue-100"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Alex Kamen" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-900 mb-1">Alex Kamen</h3> | |
| <p class="text-blue-600 mb-4">Founder & Lead Engineer</p> | |
| <p class="text-blue-800 text-sm">With over 15 years in the industry, Alex brings technical expertise and creative vision to every project.</p> | |
| <div class="flex justify-center space-x-3 mt-4"> | |
| <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md text-center p-6"> | |
| <div class="w-32 h-32 mx-auto rounded-full overflow-hidden mb-4 border-4 border-blue-100"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Miller" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-900 mb-1">Sarah Miller</h3> | |
| <p class="text-blue-600 mb-4">Mixing Engineer</p> | |
| <p class="text-blue-800 text-sm">Specializing in modern pop and electronic music, Sarah has a keen ear for detail and balance.</p> | |
| <div class="flex justify-center space-x-3 mt-4"> | |
| <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md text-center p-6"> | |
| <div class="w-32 h-32 mx-auto rounded-full overflow-hidden mb-4 border-4 border-blue-100"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="James Wilson" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-900 mb-1">James Wilson</h3> | |
| <p class="text-blue-600 mb-4">Mastering Engineer</p> | |
| <p class="text-blue-800 text-sm">James ensures your music sounds its best across all platforms with his precise mastering techniques.</p> | |
| <div class="flex justify-center space-x-3 mt-4"> | |
| <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md text-center p-6"> | |
| <div class="w-32 h-32 mx-auto rounded-full overflow-hidden mb-4 border-4 border-blue-100"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-900 mb-1">Emma Rodriguez</h3> | |
| <p class="text-blue-600 mb-4">Producer & Composer</p> | |
| <p class="text-blue-800 text-sm">Emma brings musical expertise to help develop your sound and create compelling arrangements.</p> | |
| <div class="flex justify-center space-x-3 mt-4"> | |
| <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Client <span class="text-blue-600">Testimonials</span></h2> | |
| <p class="text-lg text-blue-800 max-w-3xl mx-auto">Hear what artists and creators say about working with Kamen Entertainments.</p> | |
| </div> | |
| </html> |