| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Hanzo — Design Craftsman's Portfolio</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=Inter:wght@300;400;500;600;700&display=swap'); |
| | |
| | body { |
| | font-family: 'Inter', sans-serif; |
| | scroll-behavior: smooth; |
| | } |
| | |
| | .marquee { |
| | animation: marquee 30s linear infinite; |
| | white-space: nowrap; |
| | } |
| | |
| | @keyframes marquee { |
| | 0% { transform: translateX(0); } |
| | 100% { transform: translateX(-50%); } |
| | } |
| | |
| | .image-grid { |
| | display: grid; |
| | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| | gap: 1rem; |
| | } |
| | |
| | @media (max-width: 768px) { |
| | .image-grid { |
| | grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); |
| | } |
| | } |
| | |
| | .testimonial-slider { |
| | scroll-snap-type: x mandatory; |
| | scroll-behavior: smooth; |
| | } |
| | |
| | .testimonial-slide { |
| | scroll-snap-align: start; |
| | flex: 0 0 100%; |
| | } |
| | |
| | .hover-scale { |
| | transition: transform 0.3s ease; |
| | } |
| | |
| | .hover-scale:hover { |
| | transform: scale(1.03); |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-white text-gray-900"> |
| | |
| | <nav class="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur-md z-50 border-b border-gray-100"> |
| | <div class="container mx-auto px-6 py-4 flex justify-between items-center"> |
| | <a href="#" class="text-2xl font-bold tracking-tight">Ikhlas</a> |
| | <div class="hidden md:flex space-x-8"> |
| | <a href="#work" class="hover:text-gray-600 transition">Work</a> |
| | <a href="#process" class="hover:text-gray-600 transition">Process</a> |
| | <a href="#about" class="hover:text-gray-600 transition">About</a> |
| | <a href="#pricing" class="hover:text-gray-600 transition">Pricing</a> |
| | </div> |
| | <a href="#pricing" class="bg-black text-white px-6 py-2 rounded-full hover:bg-gray-800 transition"> |
| | Contact |
| | </a> |
| | <button class="md:hidden text-2xl"> |
| | <i class="fas fa-bars"></i> |
| | </button> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <section class="pt-32 pb-20 px-6"> |
| | <div class="container mx-auto"> |
| | <div class="flex flex-col md:flex-row items-center"> |
| | <div class="md:w-1/2 mb-12 md:mb-0"> |
| | <div class="bg-yellow-100 text-yellow-800 px-4 py-1 rounded-full inline-block mb-6"> |
| | <span class="font-medium">Booking Open — 2 Spots Left</span> |
| | </div> |
| | <h1 class="text-5xl md:text-7xl font-bold leading-tight mb-6"> |
| | U n l i m i t e d |
| | </h1> |
| | <p class="text-xl text-gray-600 mb-8 max-w-lg"> |
| | We help startups and brands create beautiful, functional products — fast and hassle-free. |
| | </p> |
| | <div class="flex space-x-4"> |
| | <a href="#pricing" class="bg-black text-white px-8 py-3 rounded-full hover:bg-gray-800 transition"> |
| | Choose your plan |
| | </a> |
| | <a href="#work" class="border border-black text-black px-8 py-3 rounded-full hover:bg-gray-100 transition"> |
| | See Recent Work |
| | </a> |
| | </div> |
| | </div> |
| | <div class="md:w-1/2 relative"> |
| | <div class="relative overflow-hidden rounded-2xl shadow-xl"> |
| | <img src="https://framerusercontent.com/images/0Y1cjcOdQp68PBw6G3HHfHz6TYo.jpg" alt="Design work" class="w-full h-auto"> |
| | <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6"> |
| | <h3 class="text-white text-xl font-medium">Strida portfolio sidebar</h3> |
| | <p class="text-white/80">UI/UX Design</p> |
| | </div> |
| | </div> |
| | <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-xl shadow-lg"> |
| | <div class="flex space-x-2"> |
| | <button class="bg-gray-100 p-2 rounded-full hover:bg-gray-200 transition"> |
| | <i class="fas fa-arrow-left"></i> |
| | </button> |
| | <button class="bg-gray-100 p-2 rounded-full hover:bg-gray-200 transition"> |
| | <i class="fas fa-arrow-right"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 bg-gray-50"> |
| | <div class="container mx-auto px-6"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-4xl md:text-5xl font-bold mb-4"> |
| | D e s i g n<br> |
| | f o r |
| | </h2> |
| | <h3 class="text-3xl md:text-4xl font-bold text-gray-700"> |
| | S o l i d S t a r t u p s |
| | </h3> |
| | </div> |
| | |
| | <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
| | <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| | <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4"> |
| | <i class="fas fa-lightbulb text-blue-500 text-xl"></i> |
| | </div> |
| | <h4 class="font-bold text-lg mb-2">Strategy</h4> |
| | <p class="text-gray-600">Thoughtful planning for long-term success</p> |
| | </div> |
| | <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| | <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4"> |
| | <i class="fas fa-pencil-ruler text-purple-500 text-xl"></i> |
| | </div> |
| | <h4 class="font-bold text-lg mb-2">UI/UX</h4> |
| | <p class="text-gray-600">Beautiful, intuitive interfaces</p> |
| | </div> |
| | <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| | <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4"> |
| | <i class="fas fa-cube text-green-500 text-xl"></i> |
| | </div> |
| | <h4 class="font-bold text-lg mb-2">Prototyping</h4> |
| | <p class="text-gray-600">Interactive models for testing</p> |
| | </div> |
| | <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| | <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mb-4"> |
| | <i class="fas fa-film text-yellow-500 text-xl"></i> |
| | </div> |
| | <h4 class="font-bold text-lg mb-2">Animation</h4> |
| | <p class="text-gray-600">Bringing interfaces to life</p> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20"> |
| | <div class="container mx-auto px-6"> |
| | <h2 class="text-3xl font-bold text-center mb-12">Trusted by Leaders</h2> |
| | |
| | <div class="marquee-container overflow-hidden"> |
| | <div class="marquee flex space-x-16 py-4"> |
| | <img src="https://framerusercontent.com/images/670uUrkwoRnzhCl9b3kEMwUmgE4.jpg" alt="Client logo" class="h-12 opacity-70 hover:opacity-100 transition"> |
| | <img src="https://framerusercontent.com/images/J4Ox47KYv4g8Lb2C0PXNkjDaA.jpg" alt="Client logo" class="h-12 opacity-70 hover:opacity-100 transition"> |
| | <img src="https://framerusercontent.com/images/wo0P2ApHuac8yCSOoIU4GYSCkOc.png" alt="Client logo" class="h-12 opacity-70 hover:opacity-100 transition"> |
| | <img src="https://framerusercontent.com/images/670uUrkwoRnzhCl9b3kEMwUmgE4.jpg" alt="Client logo" class="h-12 opacity-70 hover:opacity-100 transition"> |
| | <img src="https://framerusercontent.com/images/J4Ox47KYv4g8Lb2C0PXNkjDaA.jpg" alt="Client logo" class="h-12 opacity-70 hover:opacity-100 transition"> |
| | <img src="https://framerusercontent.com/images/wo0P2ApHuac8yCSOoIU4GYSCkOc.png" alt="Client logo" class="h-12 opacity-70 hover:opacity-100 transition"> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="about" class="py-20 bg-gray-50"> |
| | <div class="container mx-auto px-6"> |
| | <div class="flex flex-col md:flex-row items-center"> |
| | <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> |
| | <h2 class="text-4xl font-bold mb-6">Hello!</h2> |
| | <p class="text-xl text-gray-600 mb-8"> |
| | We help startups and enterprise to establish an emotional connection between their products and happy engaged customers. |
| | </p> |
| | <div class="grid grid-cols-2 gap-4"> |
| | <div class="bg-white p-4 rounded-lg shadow-sm"> |
| | <h4 class="font-bold">Strategy</h4> |
| | </div> |
| | <div class="bg-white p-4 rounded-lg shadow-sm"> |
| | <h4 class="font-bold">UI/UX</h4> |
| | </div> |
| | <div class="bg-white p-4 rounded-lg shadow-sm"> |
| | <h4 class="font-bold">Prototyping</h4> |
| | </div> |
| | <div class="bg-white p-4 rounded-lg shadow-sm"> |
| | <h4 class="font-bold">Animation</h4> |
| | </div> |
| | <div class="bg-white p-4 rounded-lg shadow-sm"> |
| | <h4 class="font-bold">Research</h4> |
| | </div> |
| | <div class="bg-white p-4 rounded-lg shadow-sm"> |
| | <h4 class="font-bold">Design systems</h4> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="md:w-1/2"> |
| | <img src="https://framerusercontent.com/images/zRVCa2eOgJIf1mJK5PYcBLrYI.png" alt="Joris van Dijk" class="rounded-2xl shadow-xl w-full"> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="process" class="py-20"> |
| | <div class="container mx-auto px-6"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl font-bold mb-2">Our Process, Explained</h2> |
| | <p class="text-xl text-gray-600">Here's how it works</p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| | <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| | <div class="w-16 h-16 bg-black text-white rounded-full flex items-center justify-center text-2xl font-bold mb-4">1</div> |
| | <h3 class="font-bold text-xl mb-4">Subscribe</h3> |
| | <p class="text-gray-600">Choose a plan and request as many designs as you need.</p> |
| | </div> |
| | <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| | <div class="w-16 h-16 bg-black text-white rounded-full flex items-center justify-center text-2xl font-bold mb-4">2</div> |
| | <h3 class="font-bold text-xl mb-4">Request</h3> |
| | <p class="text-gray-600">Choose a plan and request as many designs as you need.</p> |
| | </div> |
| | <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| | <div class="w-16 h-16 bg-black text-white rounded-full flex items-center justify-center text-2xl font-bold mb-4">3</div> |
| | <h3 class="font-bold text-xl mb-4">Get Your Designs</h3> |
| | <p class="text-gray-600">Choose a plan and request as many designs as you need.</p> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 bg-gray-50"> |
| | <div class="container mx-auto px-6"> |
| | <h2 class="text-3xl font-bold text-center mb-12">What Clients Say</h2> |
| | |
| | <div class="relative"> |
| | <div class="testimonial-slider flex overflow-x-auto snap-x snap-mandatory scrollbar-hide"> |
| | <div class="testimonial-slide flex-shrink-0 w-full"> |
| | <div class="bg-white p-8 md:p-12 rounded-xl shadow-sm max-w-4xl mx-auto"> |
| | <div class="flex items-center mb-6"> |
| | <img src="https://framerusercontent.com/images/GQYbkjoIOqJZo9gC9bpE4YLn18.png" alt="Sophie Lemaire" class="w-16 h-16 rounded-full mr-4"> |
| | <div> |
| | <h4 class="font-bold">Sophie Lemaire</h4> |
| | <p class="text-gray-600">Product Lead at Loomi</p> |
| | </div> |
| | </div> |
| | <p class="text-xl italic mb-6"> |
| | "Working with Joris was a game-changer. He instantly understood our vision and translated it into a sleek, intuitive product. The process felt effortless, and the results exceeded our expectations." |
| | </p> |
| | <div class="text-4xl text-gray-300">"</div> |
| | </div> |
| | </div> |
| | <div class="testimonial-slide flex-shrink-0 w-full"> |
| | <div class="bg-white p-8 md:p-12 rounded-xl shadow-sm max-w-4xl mx-auto"> |
| | <div class="flex items-center mb-6"> |
| | <img src="https://framerusercontent.com/images/TjQr3Mj8oNK6Ndfogb5IMNxXGg.png" alt="Milan Bakker" class="w-16 h-16 rounded-full mr-4"> |
| | <div> |
| | <h4 class="font-bold">Milan Bakker</h4> |
| | <p class="text-gray-600">Founder of Drifted Studio</p> |
| | </div> |
| | </div> |
| | <p class="text-xl italic mb-6"> |
| | "Joris brings clarity to chaos. His design work is not only beautiful but deeply strategic. He helped us rebrand from the ground up, and our audience response has been incredible." |
| | </p> |
| | <div class="text-4xl text-gray-300">"</div> |
| | </div> |
| | </div> |
| | </div> |
| | <button class="absolute left-0 top-1/2 -translate-y-1/2 -ml-4 bg-white p-2 rounded-full shadow-md hover:bg-gray-100 transition"> |
| | <i class="fas fa-chevron-left"></i> |
| | </button> |
| | <button class="absolute right-0 top-1/2 -translate-y-1/2 -mr-4 bg-white p-2 rounded-full shadow-md hover:bg-gray-100 transition"> |
| | <i class="fas fa-chevron-right"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="work" class="py-20"> |
| | <div class="container mx-auto px-6"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl font-bold mb-2">Our Projects</h2> |
| | <p class="text-xl text-gray-600">Pushing boundaries since 2011</p> |
| | </div> |
| | |
| | <div class="image-grid"> |
| | <a href="#" class="hover-scale"> |
| | <div class="relative overflow-hidden rounded-xl shadow-sm"> |
| | <img src="https://framerusercontent.com/images/aLickQcDkn7JlTftxkq33tHE.jpg" alt="Strida portfolio sidebar" class="w-full h-full object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex flex-col justify-end p-6"> |
| | <h3 class="text-white font-bold text-xl">Strida portfolio sidebar</h3> |
| | <p class="text-white/80">UI/UX Design</p> |
| | </div> |
| | </div> |
| | </a> |
| | <a href="#" class="hover-scale"> |
| | <div class="relative overflow-hidden rounded-xl shadow-sm"> |
| | <img src="https://framerusercontent.com/images/ISAjHKBwJV6BJzD55lhE8XAFBM.jpg" alt="Bravo UI/UX App" class="w-full h-full object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex flex-col justify-end p-6"> |
| | <h3 class="text-white font-bold text-xl">Bravo UI/UX App</h3> |
| | <p class="text-white/80">Mobile Design</p> |
| | </div> |
| | </div> |
| | </a> |
| | <a href="#" class="hover-scale"> |
| | <div class="relative overflow-hidden rounded-xl shadow-sm"> |
| | <img src="https://framerusercontent.com/images/nT9mTBoP2h9YdschdGP72ovRHk.jpg" alt="Nitro Design System Web" class="w-full h-full object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex flex-col justify-end p-6"> |
| | <h3 class="text-white font-bold text-xl">Nitro Design System Web</h3> |
| | <p class="text-white/80">Design System</p> |
| | </div> |
| | </div> |
| | </a> |
| | <a href="#" class="hover-scale"> |
| | <div class="relative overflow-hidden rounded-xl shadow-sm"> |
| | <img src="https://framerusercontent.com/images/vzQsCEYy7zN2RmDQcgrizz0O0MI.jpg" alt="Fargo SaaS Web" class="w-full h-full object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex flex-col justify-end p-6"> |
| | <h3 class="text-white font-bold text-xl">Fargo SaaS Web</h3> |
| | <p class="text-white/80">Web Design</p> |
| | </div> |
| | </div> |
| | </a> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="pricing" class="py-20 bg-gray-50"> |
| | <div class="container mx-auto px-6"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl font-bold mb-2">Pricing</h2> |
| | <p class="text-xl text-gray-600">Fixed Price, Zero Limits</p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto"> |
| | <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| | <div class="flex justify-between items-start mb-6"> |
| | <div> |
| | <h3 class="font-bold text-2xl">Monthly</h3> |
| | <p class="text-gray-600">Ongoing design support</p> |
| | </div> |
| | <div class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm"> |
| | Booking Open — only 2 Spots Left |
| | </div> |
| | </div> |
| | <div class="mb-8"> |
| | <span class="text-5xl font-bold">$7,500</span> |
| | <span class="text-gray-600">/mo</span> |
| | </div> |
| | <a href="#" class="block w-full bg-black text-white text-center py-3 rounded-full hover:bg-gray-800 transition mb-8"> |
| | Book Free Discovery Call |
| | </a> |
| | <div class="space-y-4"> |
| | <h4 class="font-bold text-lg">What's included</h4> |
| | <ul class="space-y-2"> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| | <span>U n l i m i t e d d e s i g n r e q u e s t s</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| | <span>F a s t t u r n a r o u n d</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| | <span>F i x e d m o n t h l y r a t e</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| | <span>A s y n c c o m m u n i c a t i o n</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| | <span>F l e x i b l e s c o p e</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| | <span>P a u s e a n y t i m e</span> |
| | </li> |
| | </ul> |
| | </div> |
| | </div> |
| | <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| | <div class="mb-6"> |
| | <h3 class="font-bold text-2xl">Custom</h3> |
| | <p class="text-gray-600">One-time projects</p> |
| | </div> |
| | <div class="mb-8"> |
| | <span class="text-5xl font-bold">Custom</span> |
| | <span class="text-gray-600">quote</span> |
| | </div> |
| | <a href="#" class="block w-full bg-black text-white text-center py-3 rounded-full hover:bg-gray-800 transition mb-8"> |
| | Get a Quote |
| | </a> |
| | <div class="space-y-4"> |
| | <h4 class="font-bold text-lg">Why choose us</h4> |
| | <ul class="space-y-2"> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| | <span>Senior-level quality</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| | <span>Systems thinking</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| | <span>Developer-friendly</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| | <span>Clear process</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| | <span>On-brand, every time</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| | <span>Reliable partner</span> |
| | </li> |
| | </ul> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20"> |
| | <div class="container mx-auto px-6 max-w-4xl"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl font-bold mb-2">FAQ</h2> |
| | <p class="text-xl text-gray-600">Your Questions, Answered</p> |
| | </div> |
| | |
| | <div class="space-y-6 mb-12"> |
| | <div class="border-b border-gray-200 pb-6"> |
| | <h3 class="font-bold text-xl mb-2">What's the difference between a subscription and a custom project?</h3> |
| | <p class="text-gray-600"> |
| | The subscription is ongoing and flexible — ideal for continuous design needs. Custom projects are one-time, fixed-scope engagements for larger goals like a rebrand or product launch. |
| | </p> |
| | </div> |
| | <div class="border-b border-gray-200 pb-6"> |
| | <h3 class="font-bold text-xl mb-2">How fast is the turnaround?</h3> |
| | <p class="text-gray-600"> |
| | Most requests are delivered within 1–2 business days. Larger tasks may take longer, but you'll always be kept in the loop. |
| | </p> |
| | </div> |
| | <div class="border-b border-gray-200 pb-6"> |
| | <h3 class="font-bold text-xl mb-2">How many requests can I make?</h3> |
| | <p class="text-gray-600"> |
| | As many as you like — with a subscription, you can queue unlimited requests, and they'll be handled one at a time in priority order. |
| | </p> |
| | </div> |
| | <div class="border-b border-gray-200 pb-6"> |
| | <h3 class="font-bold text-xl mb-2">What types of design do you handle?</h3> |
| | <p class="text-gray-600"> |
| | Websites, product UI, landing pages, brand assets, decks, social media visuals — anything digital that needs to look and feel sharp. |
| | </p> |
| | </div> |
| | </div> |
| | |
| | <div class="text-center"> |
| | <h3 class="font-bold text-xl mb-4">Have more questions? Book a free discovery call</h3> |
| | <a href="#" class="inline-block bg-black text-white px-8 py-3 rounded-full hover:bg-gray-800 transition mb-4"> |
| | Book a Discovery Call |
| | </a> |
| | <p class="text-gray-600"> |
| | Or, email me at <a href="mailto:joris@hanzo.com" class="underline">joris@hanzo.com</a> |
| | </p> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="contact" class="py-20 bg-black text-white"> |
| | <div class="container mx-auto px-6"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-4xl font-bold mb-4">2 spots available</h2> |
| | <h3 class="text-3xl font-light">Let's Connect</h3> |
| | </div> |
| | |
| | <div class="max-w-2xl mx-auto text-center"> |
| | <p class="text-xl text-gray-300 mb-8"> |
| | Feel free to contact me if having any questions. I'm available for new projects or just for chatting. |
| | </p> |
| | <a href="#" class="inline-block bg-white text-black px-8 py-3 rounded-full hover:bg-gray-200 transition mb-12"> |
| | Book a free intro call |
| | </a> |
| | |
| | <div class="flex justify-center space-x-6 mb-8"> |
| | <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-2xl"></i></a> |
| | <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in text-2xl"></i></a> |
| | <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-2xl"></i></a> |
| | </div> |
| | |
| | <p class="text-gray-500">© Hanzo Studio, 2025</p> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | <script> |
| | |
| | document.addEventListener('DOMContentLoaded', function() { |
| | const slider = document.querySelector('.testimonial-slider'); |
| | const slides = document.querySelectorAll('.testimonial-slide'); |
| | const prevBtn = document.querySelector('.testimonial-slider-container button:first-of-type'); |
| | const nextBtn = document.querySelector('.testimonial-slider-container button:last-of-type'); |
| | let currentSlide = 0; |
| | |
| | function goToSlide(n) { |
| | slides.forEach((slide, i) => { |
| | slide.style.transform = `translateX(${100 * (i - n)}%)`; |
| | }); |
| | currentSlide = n; |
| | } |
| | |
| | function nextSlide() { |
| | if (currentSlide === slides.length - 1) { |
| | goToSlide(0); |
| | } else { |
| | goToSlide(currentSlide + 1); |
| | } |
| | } |
| | |
| | function prevSlide() { |
| | if (currentSlide === 0) { |
| | goToSlide(slides.length - 1); |
| | } else { |
| | goToSlide(currentSlide - 1); |
| | } |
| | } |
| | |
| | nextBtn.addEventListener('click', nextSlide); |
| | prevBtn.addEventListener('click', prevSlide); |
| | |
| | |
| | goToSlide(0); |
| | |
| | |
| | setInterval(nextSlide, 5000); |
| | }); |
| | </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=ikhlaspv/ikhlas" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
