| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Kaizer | Creative Media Agency</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;800;900&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #0a0a0a; |
| color: #ffffff; |
| overflow-x: hidden; |
| } |
| |
| .gradient-text { |
| background: linear-gradient(90deg, #ff4d4d, #f9cb28); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| |
| .hero-gradient { |
| background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%); |
| } |
| |
| .service-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 20px 25px -5px rgba(255, 77, 77, 0.1), 0 10px 10px -5px rgba(255, 77, 77, 0.04); |
| } |
| |
| .glow { |
| box-shadow: 0 0 15px rgba(255, 77, 77, 0.5); |
| } |
| |
| .nav-link::after { |
| content: ''; |
| display: block; |
| width: 0; |
| height: 2px; |
| background: linear-gradient(90deg, #ff4d4d, #f9cb28); |
| transition: width 0.3s; |
| } |
| |
| .nav-link:hover::after { |
| width: 100%; |
| } |
| |
| .animate-float { |
| animation: float 6s ease-in-out infinite; |
| } |
| |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-20px); } |
| 100% { transform: translateY(0px); } |
| } |
| |
| .animate-pulse-slow { |
| animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
| |
| .scroll-down { |
| position: absolute; |
| bottom: 30px; |
| left: 50%; |
| transform: translateX(-50%); |
| color: #ffffff; |
| font-size: 30px; |
| animation: bounce 2s infinite; |
| } |
| |
| @keyframes bounce { |
| 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} |
| 40% {transform: translateY(-20px);} |
| 60% {transform: translateY(-10px);} |
| } |
| |
| .testimonial-card { |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| |
| .stats-item { |
| position: relative; |
| } |
| |
| .stats-item::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, rgba(255, 77, 77, 0.1), rgba(249, 203, 40, 0.1)); |
| border-radius: 12px; |
| z-index: -1; |
| } |
| </style> |
| </head> |
| <body class="antialiased"> |
| |
| <nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between items-center h-20"> |
| <div class="flex-shrink-0 flex items-center"> |
| <span class="text-2xl font-bold gradient-text">KAIZER</span> |
| </div> |
| <div class="hidden md:block"> |
| <div class="ml-10 flex items-center space-x-8"> |
| <a href="#home" class="nav-link text-white hover:text-gray-300 px-3 py-2 text-sm font-medium">Home</a> |
| <a href="#services" class="nav-link text-white hover:text-gray-300 px-3 py-2 text-sm font-medium">Services</a> |
| <a href="#work" class="nav-link text-white hover:text-gray-300 px-3 py-2 text-sm font-medium">Work</a> |
| <a href="#about" class="nav-link text-white hover:text-gray-300 px-3 py-2 text-sm font-medium">About</a> |
| <a href="#contact" class="nav-link text-white hover:text-gray-300 px-3 py-2 text-sm font-medium">Contact</a> |
| </div> |
| </div> |
| <div class="hidden md:block"> |
| <a href="#contact" class="ml-8 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-r from-red-500 to-yellow-500 hover:from-red-600 hover:to-yellow-600 transition duration-300"> |
| Get Started |
| </a> |
| </div> |
| <div class="-mr-2 flex md:hidden"> |
| <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> |
| <span class="sr-only">Open main menu</span> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-90 backdrop-filter backdrop-blur-lg"> |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
| <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-800">Home</a> |
| <a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-800">Services</a> |
| <a href="#work" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-800">Work</a> |
| <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-800">About</a> |
| <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-800">Contact</a> |
| <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gradient-to-r from-red-500 to-yellow-500 hover:from-red-600 hover:to-yellow-600 transition duration-300"> |
| Get Started |
| </a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section id="home" class="hero-gradient min-h-screen flex items-center justify-center relative overflow-hidden pt-20"> |
| <div class="absolute top-0 left-0 w-full h-full opacity-20"> |
| <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-red-500 filter blur-3xl opacity-70 animate-pulse-slow"></div> |
| <div class="absolute top-2/3 right-1/4 w-64 h-64 rounded-full bg-yellow-500 filter blur-3xl opacity-70 animate-pulse-slow animation-delay-2000"></div> |
| </div> |
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> |
| <div class="text-center md:text-left"> |
| <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6"> |
| <span class="gradient-text">Elevate</span> Your Brand With <span class="gradient-text">Creative</span> Media |
| </h1> |
| <p class="text-lg md:text-xl text-gray-300 mb-8 max-w-lg mx-auto md:mx-0"> |
| We craft unforgettable digital experiences that captivate audiences and drive results for your business. |
| </p> |
| <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start"> |
| <a href="#contact" class="px-8 py-3 bg-gradient-to-r from-red-500 to-yellow-500 hover:from-red-600 hover:to-yellow-600 text-white font-medium rounded-lg transition duration-300 text-center"> |
| Get Started |
| </a> |
| <a href="#work" class="px-8 py-3 border border-gray-600 hover:border-white text-white font-medium rounded-lg transition duration-300 text-center"> |
| View Our Work |
| </a> |
| </div> |
| </div> |
| <div class="relative hidden md:block"> |
| <div class="relative z-10 animate-float"> |
| <div class="absolute -top-10 -left-10 w-32 h-32 bg-red-500 rounded-full filter blur-xl opacity-30"></div> |
| <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-yellow-500 rounded-full filter blur-xl opacity-30"></div> |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Creative Media" class="rounded-2xl shadow-2xl w-full max-w-lg border border-gray-800"> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <a href="#services" class="scroll-down"> |
| <i class="fas fa-chevron-down"></i> |
| </a> |
| </section> |
|
|
| |
| <section class="bg-gray-900 py-16"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
| <div class="stats-item p-6 text-center"> |
| <div class="text-4xl md:text-5xl font-bold gradient-text mb-2">150+</div> |
| <div class="text-gray-300 uppercase text-sm tracking-wider">Projects Completed</div> |
| </div> |
| <div class="stats-item p-6 text-center"> |
| <div class="text-4xl md:text-5xl font-bold gradient-text mb-2">50+</div> |
| <div class="text-gray-300 uppercase text-sm tracking-wider">Happy Clients</div> |
| </div> |
| <div class="stats-item p-6 text-center"> |
| <div class="text-4xl md:text-5xl font-bold gradient-text mb-2">10+</div> |
| <div class="text-gray-300 uppercase text-sm tracking-wider">Years Experience</div> |
| </div> |
| <div class="stats-item p-6 text-center"> |
| <div class="text-4xl md:text-5xl font-bold gradient-text mb-2">24/7</div> |
| <div class="text-gray-300 uppercase text-sm tracking-wider">Support Available</div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-20 bg-black"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <span class="text-sm font-semibold tracking-wider uppercase gradient-text">Our Services</span> |
| <h2 class="mt-2 text-3xl font-bold text-white sm:text-4xl">What We <span class="gradient-text">Excel</span> At</h2> |
| <p class="mt-4 max-w-2xl text-xl text-gray-300 mx-auto"> |
| Comprehensive media solutions tailored to your unique business needs. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="service-card bg-gray-900 rounded-xl p-8 transition duration-500 hover:border-red-500 border border-gray-800"> |
| <div class="w-14 h-14 bg-gradient-to-r from-red-500 to-yellow-500 rounded-lg flex items-center justify-center mb-6"> |
| <i class="fas fa-video text-white text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-white mb-3">Video Production</h3> |
| <p class="text-gray-400"> |
| From concept to final cut, we create compelling video content that tells your story and engages your audience. |
| </p> |
| </div> |
| |
| |
| <div class="service-card bg-gray-900 rounded-xl p-8 transition duration-500 hover:border-red-500 border border-gray-800"> |
| <div class="w-14 h-14 bg-gradient-to-r from-red-500 to-yellow-500 rounded-lg flex items-center justify-center mb-6"> |
| <i class="fas fa-bullhorn text-white text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-white mb-3">Digital Marketing</h3> |
| <p class="text-gray-400"> |
| Data-driven strategies that increase visibility, drive traffic, and convert leads into loyal customers. |
| </p> |
| </div> |
| |
| |
| <div class="service-card bg-gray-900 rounded-xl p-8 transition duration-500 hover:border-red-500 border border-gray-800"> |
| <div class="w-14 h-14 bg-gradient-to-r from-red-500 to-yellow-500 rounded-lg flex items-center justify-center mb-6"> |
| <i class="fas fa-paint-brush text-white text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-white mb-3">Brand Design</h3> |
| <p class="text-gray-400"> |
| Crafting memorable brand identities that stand out in competitive markets and resonate with your audience. |
| </p> |
| </div> |
| |
| |
| <div class="service-card bg-gray-900 rounded-xl p-8 transition duration-500 hover:border-red-500 border border-gray-800"> |
| <div class="w-14 h-14 bg-gradient-to-r from-red-500 to-yellow-500 rounded-lg flex items-center justify-center mb-6"> |
| <i class="fas fa-globe text-white text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-white mb-3">Web Development</h3> |
| <p class="text-gray-400"> |
| Custom, responsive websites designed for performance, user experience, and conversion optimization. |
| </p> |
| </div> |
| |
| |
| <div class="service-card bg-gray-900 rounded-xl p-8 transition duration-500 hover:border-red-500 border border-gray-800"> |
| <div class="w-14 h-14 bg-gradient-to-r from-red-500 to-yellow-500 rounded-lg flex items-center justify-center mb-6"> |
| <i class="fas fa-mobile-alt text-white text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-white mb-3">Social Media</h3> |
| <p class="text-gray-400"> |
| Strategic social media management that builds communities, enhances engagement, and grows your following. |
| </p> |
| </div> |
| |
| |
| <div class="service-card bg-gray-900 rounded-xl p-8 transition duration-500 hover:border-red-500 border border-gray-800"> |
| <div class="w-14 h-14 bg-gradient-to-r from-red-500 to-yellow-500 rounded-lg flex items-center justify-center mb-6"> |
| <i class="fas fa-chart-line text-white text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-white mb-3">Content Strategy</h3> |
| <p class="text-gray-400"> |
| Developing content frameworks that align with business goals and deliver measurable results. |
| </p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="work" class="py-20 bg-gray-900"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <span class="text-sm font-semibold tracking-wider uppercase gradient-text">Our Portfolio</span> |
| <h2 class="mt-2 text-3xl font-bold text-white sm:text-4xl">Featured <span class="gradient-text">Projects</span></h2> |
| <p class="mt-4 max-w-2xl text-xl text-gray-300 mx-auto"> |
| A selection of our most impactful work across various industries. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="group relative overflow-hidden rounded-xl"> |
| <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Project 1" class="w-full h-80 object-cover transition duration-500 group-hover:scale-110"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6"> |
| <div> |
| <h3 class="text-white text-xl font-bold mb-1">Lumina Brand Campaign</h3> |
| <p class="text-gray-300">Video Production • Brand Strategy</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="group relative overflow-hidden rounded-xl"> |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Project 2" class="w-full h-80 object-cover transition duration-500 group-hover:scale-110"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6"> |
| <div> |
| <h3 class="text-white text-xl font-bold mb-1">Nexus Web Platform</h3> |
| <p class="text-gray-300">Web Development • UI/UX Design</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="group relative overflow-hidden rounded-xl"> |
| <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Project 3" class="w-full h-80 object-cover transition duration-500 group-hover:scale-110"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6"> |
| <div> |
| <h3 class="text-white text-xl font-bold mb-1">Aurora Social Campaign</h3> |
| <p class="text-gray-300">Social Media • Content Creation</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-gray-600 text-white font-medium rounded-lg hover:bg-gray-800 transition duration-300"> |
| View All Projects |
| <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-black"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <span class="text-sm font-semibold tracking-wider uppercase gradient-text">Testimonials</span> |
| <h2 class="mt-2 text-3xl font-bold text-white sm:text-4xl">What Our <span class="gradient-text">Clients</span> Say</h2> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="testimonial-card p-8 rounded-xl"> |
| <div class="flex items-center mb-6"> |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah Johnson" class="w-full h-full object-cover"> |
| </div> |
| <div> |
| <h4 class="text-white font-medium">Sarah Johnson</h4> |
| <p class="text-gray-400 text-sm">CEO, Lumina Tech</p> |
| </div> |
| </div> |
| <p class="text-gray-300"> |
| "Kaizer transformed our brand identity completely. Their creative approach and attention to detail resulted in a 40% increase in customer engagement." |
| </p> |
| <div class="mt-4 text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| |
| |
| <div class="testimonial-card p-8 rounded-xl"> |
| <div class="flex items-center mb-6"> |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen" class="w-full h-full object-cover"> |
| </div> |
| <div> |
| <h4 class="text-white font-medium">Michael Chen</h4> |
| <p class="text-gray-400 text-sm">Marketing Director, Nexus</p> |
| </div> |
| </div> |
| <p class="text-gray-300"> |
| "The video campaign Kaizer produced for us went viral, generating over 2M views and significantly boosting our sales. Their team is incredibly talented." |
| </p> |
| <div class="mt-4 text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| |
| |
| <div class="testimonial-card p-8 rounded-xl"> |
| <div class="flex items-center mb-6"> |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Emma Rodriguez" class="w-full h-full object-cover"> |
| </div> |
| <div> |
| <h4 class="text-white font-medium">Emma Rodriguez</h4> |
| <p class="text-gray-400 text-sm">Founder, Aurora Apparel</p> |
| </div> |
| </div> |
| <p class="text-gray-300"> |
| "Working with Kaizer was a game-changer for our social media presence. They developed a strategy that tripled our Instagram following in just 3 months." |
| </p> |
| <div class="mt-4 text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20 bg-gray-900"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> |
| <div class="order-2 md:order-1"> |
| <span class="text-sm font-semibold tracking-wider uppercase gradient-text">About Us</span> |
| <h2 class="mt-2 text-3xl font-bold text-white sm:text-4xl mb-6">The Story Behind <span class="gradient-text">Kaizer</span></h2> |
| <p class="text-gray-300 mb-6"> |
| Founded in 2012, Kaizer began as a small creative studio with a passion for storytelling through media. Today, we've grown into a full-service media agency with a team of 50+ talented professionals. |
| </p> |
| <p class="text-gray-300 mb-8"> |
| Our mission is to help brands find their unique voice and connect with their audience through innovative media solutions. We believe in the power of creativity combined with strategy to deliver exceptional results. |
| </p> |
| <div class="flex flex-wrap gap-4"> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-red-500 to-yellow-500 flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-white text-xs"></i> |
| </div> |
| <span class="text-white">Award-winning team</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-red-500 to-yellow-500 flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-white text-xs"></i> |
| </div> |
| <span class="text-white">Data-driven approach</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-red-500 to-yellow-500 flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-white text-xs"></i> |
| </div> |
| <span class="text-white">Custom solutions</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-red-500 to-yellow-500 flex items-center justify-center mr-3"> |
| <i class="fas fa-check text-white text-xs"></i> |
| </div> |
| <span class="text-white">Proven results</span> |
| </div> |
| </div> |
| </div> |
| <div class="order-1 md:order-2 relative"> |
| <div class="relative z-10"> |
| <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our Team" class="rounded-2xl shadow-2xl w-full border border-gray-800"> |
| </div> |
| <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-red-500 rounded-full filter blur-xl opacity-20"></div> |
| <div class="absolute -top-6 -left-6 w-32 h-32 bg-yellow-500 rounded-full filter blur-xl opacity-20"></div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-gradient-to-r from-gray-900 to-black"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Ready to <span class="gradient-text">Elevate</span> Your Brand?</h2> |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-8"> |
| Let's create something extraordinary together. Get in touch with our team to discuss your project. |
| </p> |
| <a href="#contact" class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-red-500 to-yellow-500 hover:from-red-600 hover:to-yellow-600 text-white font-medium rounded-lg transition duration-300 text-lg"> |
| Start Your Project |
| <i class="fas fa-arrow-right ml-3"></i> |
| </a> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 bg-black"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> |
| <div> |
| <span class="text-sm font-semibold tracking-wider uppercase gradient-text">Contact Us</span> |
| <h2 class="mt-2 text-3xl font-bold text-white sm:text-4xl mb-6">Let's <span class="gradient-text">Connect</span></h2> |
| <p class="text-gray-300 mb-8 max-w-lg"> |
| Have a project in mind or want to learn more about our services? Fill out the form or reach out directly. |
| </p> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-red-500 to-yellow-500 flex items-center justify-center mr-4 mt-1"> |
| <i class="fas fa-map-marker-alt text-white"></i> |
| </div> |
| <div> |
| <h4 class="text-white font-medium mb-1">Our Office</h4> |
| <p class="text-gray-400">123 Creative Ave, Media District<br>Los Angeles, CA 90028</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-red-500 to-yellow-500 flex items-center justify-center mr-4 mt-1"> |
| <i class="fas fa-envelope text-white"></i> |
| </div> |
| <div> |
| <h4 class="text-white font-medium mb-1">Email Us</h4> |
| <p class="text-gray-400">hello@kaizer.media<br>support@kaizer.media</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-red-500 to-yellow-500 flex items-center justify-center mr-4 mt-1"> |
| <i class="fas fa-phone-alt text-white"></i> |
| </div> |
| <div> |
| <h4 class="text-white font-medium mb-1">Call Us</h4> |
| <p class="text-gray-400">+1 (555) 123-4567<br>Mon-Fri, 9am-6pm PST</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <h4 class="text-white font-medium mb-4">Follow Us</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="w-10 h-10 rounded-full border border-gray-700 flex items-center justify-center text-gray-300 hover:text-white hover:bg-gray-800 transition duration-300"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full border border-gray-700 flex items-center justify-center text-gray-300 hover:text-white hover:bg-gray-800 transition duration-300"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full border border-gray-700 flex items-center justify-center text-gray-300 hover:text-white hover:bg-gray-800 transition duration-300"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full border border-gray-700 flex items-center justify-center text-gray-300 hover:text-white hover:bg-gray-800 transition duration-300"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-gray-900 rounded-xl p-8 border border-gray-800"> |
| <form> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label for="name" class="block text-sm font-medium text-gray-300 mb-1">Name</label> |
| <input type="text" id="name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="Your name"> |
| </div> |
| <div> |
| <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email</label> |
| <input type="email" id="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="Your email"> |
| </div> |
| </div> |
| <div class="mt-6"> |
| <label for="subject" class="block text-sm font-medium text-gray-300 mb-1">Subject</label> |
| <input type="text" id="subject" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="Subject"> |
| </div> |
| <div class="mt-6"> |
| <label for="message" class="block text-sm font-medium text-gray-300 mb-1">Message</label> |
| <textarea id="message" rows="5" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="Your message"></textarea> |
| </div> |
| <div class="mt-8"> |
| <button type="submit" class="w-full px-6 py-4 bg-gradient-to-r from-red-500 to-yellow-500 hover:from-red-600 hover:to-yellow-600 text-white font-medium rounded-lg transition duration-300"> |
| Send Message |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 py-12 border-t border-gray-800"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div class="md:col-span-2"> |
| <span class="text-2xl font-bold gradient-text mb-4 block">KAIZER</span> |
| <p class="text-gray-400 mb-6"> |
| We're a creative media agency dedicated to helping brands tell their stories through innovative digital solutions. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-300 hover:text-white hover:bg-gradient-to-r from-red-500 to-yellow-500 transition duration-300"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-300 hover:text-white hover:bg-gradient-to-r from-red-500 to-yellow-500 transition duration-300"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-300 hover:text-white hover:bg-gradient-to-r from-red-500 to-yellow-500 transition duration-300"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="text-white font-medium text-lg mb-4">Quick Links</h4> |
| <ul class="space-y-3"> |
| <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a></li> |
| <li><a href="#services" class="text-gray-400 hover:text-white transition duration-300">Services</a></li> |
| <li><a href="#work" class="text-gray-400 hover:text-white transition duration-300">Work</a></li> |
| <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About</a></li> |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-white font-medium text-lg mb-4">Services</h4> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Video Production</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Digital Marketing</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Brand Design</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Web Development</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Social Media</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 text-sm mb-4 md:mb-0"> |
| © 2023 Kaizer Media. All rights reserved. |
| </p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Privacy Policy</a> |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Terms of Service</a> |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Cookies</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| if (targetId === '#') return; |
| |
| const targetElement = document.querySelector(targetId); |
| if (targetElement) { |
| |
| const mobileMenu = document.getElementById('mobile-menu'); |
| mobileMenu.classList.add('hidden'); |
| |
| |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| } |
| }); |
| }); |
| |
| |
| window.addEventListener('scroll', function() { |
| const nav = document.querySelector('nav'); |
| if (window.scrollY > 50) { |
| nav.classList.add('shadow-lg'); |
| } else { |
| nav.classList.remove('shadow-lg'); |
| } |
| }); |
| |
| |
| const animateOnScroll = function() { |
| const elements = document.querySelectorAll('.service-card, .stats-item, .testimonial-card'); |
| |
| elements.forEach(element => { |
| const elementPosition = element.getBoundingClientRect().top; |
| const windowHeight = window.innerHeight; |
| |
| if (elementPosition < windowHeight - 100) { |
| element.classList.add('opacity-100', 'translate-y-0'); |
| } |
| }); |
| }; |
| |
| |
| document.querySelectorAll('.service-card, .stats-item, .testimonial-card').forEach(element => { |
| element.classList.add('opacity-0', 'translate-y-10', 'transition', 'duration-500'); |
| }); |
| |
| |
| window.addEventListener('load', animateOnScroll); |
| window.addEventListener('scroll', animateOnScroll); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Ketnago/kaizer-io" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
