Spaces:
Running
Running
Create a landing page based on this LinkedIn profile. Highlight the B2B aquisition skills and make it relatable. Make sure to use the profile picture.
be47250
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Henk Peters | B2B Acquisition Specialist</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .testimonial-card { | |
| backdrop-filter: blur(10px); | |
| background: rgba(255, 255, 255, 0.8); | |
| } | |
| .skill-pill { | |
| transition: all 0.3s ease; | |
| } | |
| .skill-pill:hover { | |
| transform: translateY(-3px); | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white shadow-sm z-50"> | |
| <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"> | |
| <span class="text-xl font-bold text-blue-600">Henk Peters</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#about" class="text-gray-700 hover:text-blue-600 transition">About</a> | |
| <a href="#skills" class="text-gray-700 hover:text-blue-600 transition">Skills</a> | |
| <a href="#experience" class="text-gray-700 hover:text-blue-600 transition">Experience</a> | |
| <a href="#contact" class="text-gray-700 hover:text-blue-600 transition">Contact</a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button id="menu-btn" class="text-gray-700 focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden fixed inset-0 bg-white z-40 pt-16"> | |
| <div class="flex flex-col items-center space-y-6 py-8"> | |
| <a href="#about" class="text-lg text-gray-700 hover:text-blue-600 transition">About</a> | |
| <a href="#skills" class="text-lg text-gray-700 hover:text-blue-600 transition">Skills</a> | |
| <a href="#experience" class="text-lg text-gray-700 hover:text-blue-600 transition">Experience</a> | |
| <a href="#contact" class="text-lg text-gray-700 hover:text-blue-600 transition">Contact</a> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient pt-32 pb-20 px-4" id="home"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0" data-aos="fade-right"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Transforming B2B Growth Through Strategic Acquisitions</h1> | |
| <p class="text-xl text-gray-600 mb-8">I help companies scale through targeted business development and partnership strategies.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#contact" class="btn-primary text-white px-6 py-3 rounded-lg font-medium">Get in Touch</a> | |
| <a href="#experience" class="border border-blue-600 text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-blue-50 transition">My Experience</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center" data-aos="fade-left"> | |
| <div class="relative"> | |
| <img src="https://scontent-mrs2-1.xx.fbcdn.net/v/t39.30808-6/490134827_122109671180815700_5751613321801131673_n.jpg?_nc_cat=100&ccb=1-7&_nc_sid=6ee11a&_nc_ohc=-MNyiEZ6lakQ7kNvwGH70tE&_nc_oc=Adm2UndTfIysO15_uwX15DzMu-EqXSCpYOEBqs833P8nyt6mK3F_SGaeVJ82UkUtkYy1Y8t7SCIQmq5lKp66GGQE&_nc_zt=23&_nc_ht=scontent-mrs2-1.xx&_nc_gid=wHpcReTB-6uMAKRq-XJ7-A&oh=00_AfbQUa_GtXVJiIhgtbyQbkLzBCKFXQtbF5wh94kz-CV8PQ&oe=68CF7C43" | |
| alt="Henk Peters" | |
| class="rounded-2xl shadow-xl w-80 h-80 object-cover border-4 border-white"> | |
| <div class="absolute -bottom-5 -right-5 bg-white p-4 rounded-lg shadow-md"> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-2"> | |
| <i data-feather="award" class="text-blue-600 w-5 h-5"></i> | |
| </div> | |
| <span class="font-medium">10+ Years Experience</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="py-20 px-4 bg-white" id="about"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4" data-aos="fade-up">About Henk Peters</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto" data-aos="fade-up"> | |
| Seasoned business development professional with a proven track record in B2B acquisitions, strategic partnerships, and revenue growth. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div data-aos="fade-right"> | |
| <h3 class="text-2xl font-semibold text-gray-800 mb-4">My Approach</h3> | |
| <p class="text-gray-600 mb-6"> | |
| I believe in building long-term value through strategic acquisitions that complement existing business models and create synergistic opportunities. | |
| </p> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-4 flex-shrink-0"> | |
| <i data-feather="search" class="text-blue-600 w-5 h-5"></i> | |
| </div> | |
| <span class="text-gray-700">Comprehensive market analysis to identify ideal acquisition targets</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-4 flex-shrink-0"> | |
| <i data-feather="dollar-sign" class="text-blue-600 w-5 h-5"></i> | |
| </div> | |
| <span class="text-gray-700">Financial modeling to ensure acquisition creates shareholder value</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-4 flex-shrink-0"> | |
| <i data-feather="users" class="text-blue-600 w-5 h-5"></i> | |
| </div> | |
| <span class="text-gray-700">Cultural integration planning for seamless post-acquisition transition</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div data-aos="fade-left"> | |
| <h3 class="text-2xl font-semibold text-gray-800 mb-4">Key Achievements</h3> | |
| <div class="space-y-6"> | |
| <div class="p-6 bg-gray-50 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-blue-600 text-white p-2 rounded-full mr-4"> | |
| <i data-feather="trending-up" class="w-5 h-5"></i> | |
| </div> | |
| <h4 class="font-semibold text-lg">$50M+ in Closed Deals</h4> | |
| </div> | |
| <p class="text-gray-600"> | |
| Successfully negotiated and closed numerous B2B acquisition deals with a combined value exceeding $50 million. | |
| </p> | |
| </div> | |
| <div class="p-6 bg-gray-50 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-blue-600 text-white p-2 rounded-full mr-4"> | |
| <i data-feather="globe" class="w-5 h-5"></i> | |
| </div> | |
| <h4 class="font-semibold text-lg">International Expansion</h4> | |
| </div> | |
| <p class="text-gray-600"> | |
| Led cross-border acquisitions that expanded company operations into 3 new international markets. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section class="py-20 px-4 bg-gray-50" id="skills"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4" data-aos="fade-up">Core Competencies</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto" data-aos="fade-up"> | |
| My expertise spans the full B2B acquisition lifecycle from target identification through post-merger integration. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="bg-blue-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6"> | |
| <i data-feather="search" class="text-blue-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Target Identification</h3> | |
| <p class="text-gray-600"> | |
| Sophisticated market mapping to identify ideal acquisition targets that align with strategic objectives and growth plans. | |
| </p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="bg-blue-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6"> | |
| <i data-feather="dollar-sign" class="text-blue-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Valuation & Deal Structuring</h3> | |
| <p class="text-gray-600"> | |
| Comprehensive financial analysis and creative deal structuring to maximize value for all stakeholders. | |
| </p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="bg-blue-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6"> | |
| <i data-feather="users" class="text-blue-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Negotiation & Due Diligence</h3> | |
| <p class="text-gray-600"> | |
| Meticulous due diligence processes and win-win negotiation strategies that protect buyer interests. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-16"> | |
| <h3 class="text-2xl font-semibold text-center mb-8" data-aos="fade-up">Technical Skills</h3> | |
| <div class="flex flex-wrap justify-center gap-4 max-w-4xl mx-auto"> | |
| <div class="skill-pill bg-white px-6 py-3 rounded-full shadow-sm flex items-center" data-aos="fade-up" data-aos-delay="100"> | |
| <i data-feather="bar-chart-2" class="text-blue-600 mr-2"></i> | |
| <span>Financial Modeling</span> | |
| </div> | |
| <div class="skill-pill bg-white px-6 py-3 rounded-full shadow-sm flex items-center" data-aos="fade-up" data-aos-delay="150"> | |
| <i data-feather="file-text" class="text-blue-600 mr-2"></i> | |
| <span>Term Sheet Drafting</span> | |
| </div> | |
| <div class="skill-pill bg-white px-6 py-3 rounded-full shadow-sm flex items-center" data-aos="fade-up" data-aos-delay="200"> | |
| <i data-feather="cpu" class="text-blue-600 mr-2"></i> | |
| <span>CRM Systems</span> | |
| </div> | |
| <div class="skill-pill bg-white px-6 py-3 rounded-full shadow-sm flex items-center" data-aos="fade-up" data-aos-delay="250"> | |
| <i data-feather="database" class="text-blue-600 mr-2"></i> | |
| <span>Market Research</span> | |
| </div> | |
| <div class="skill-pill bg-white px-6 py-3 rounded-full shadow-sm flex items-center" data-aos="fade-up" data-aos-delay="300"> | |
| <i data-feather="globe" class="text-blue-600 mr-2"></i> | |
| <span>Cross-Cultural Negotiation</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experience Section --> | |
| <section class="py-20 px-4 bg-white" id="experience"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4" data-aos="fade-up">Professional Journey</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto" data-aos="fade-up"> | |
| A track record of driving growth through strategic acquisitions and partnerships. | |
| </p> | |
| </div> | |
| <div class="relative"> | |
| <!-- Timeline line --> | |
| <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gray-200"></div> | |
| <!-- Timeline items --> | |
| <div class="space-y-12"> | |
| <!-- Item 1 --> | |
| <div class="flex flex-col md:flex-row items-center" data-aos="fade-up"> | |
| <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 text-right"> | |
| <div class="text-blue-600 font-medium">2022 - Present</div> | |
| <h3 class="text-xl font-semibold mt-1">Business Development Manager</h3> | |
| <p class="text-gray-600">Avanade</p> | |
| </div> | |
| <div class="hidden md:block w-12 h-12 rounded-full bg-blue-600 border-4 border-white flex items-center justify-center relative"> | |
| <i data-feather="briefcase" class="text-white"></i> | |
| </div> | |
| <div class="md:w-1/2 md:pl-16"> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 rounded-full p-1 mr-2 mt-1"> | |
| <i data-feather="check" class="text-blue-600 w-3 h-3"></i> | |
| </div> | |
| <span>Led acquisition strategy for technology service providers in Europe</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 rounded-full p-1 mr-2 mt-1"> | |
| <i data-feather="check" class="text-blue-600 w-3 h-3"></i> | |
| </div> | |
| <span>Developed pipeline of potential acquisition targets worth €15M+</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 rounded-full p-1 mr-2 mt-1"> | |
| <i data-feather="check" class="text-blue-600 w-3 h-3"></i> | |
| </div> | |
| <span>Structured joint venture agreements with strategic partners</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Item 2 --> | |
| <div class="flex flex-col md:flex-row items-center" data-aos="fade-up"> | |
| <div class="md:w-1/2 md:pr-16 order-1 md:order-none mb-8 md:mb-0 text-left md:text-right"> | |
| <div class="md:hidden text-blue-600 font-medium">2020 - 2022</div> | |
| <h3 class="text-xl font-semibold mt-1">Acquisition Specialist</h3> | |
| <p class="text-gray-600">Accenture</p> | |
| </div> | |
| <div class="hidden md:block w-12 h-12 rounded-full bg-blue-600 border-4 border-white flex items-center justify-center relative"> | |
| <i data-feather="briefcase" class="text-white"></i> | |
| </div> | |
| <div class="md:w-1/2 md:pl-16 order-first md:order-none"> | |
| <div class="hidden md:block text-blue-600 font-medium text-right">2020 - 2022</div> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 rounded-full p-1 mr-2 mt-1"> | |
| <i data-feather="check" class="text-blue-600 w-3 h-3"></i> | |
| </div> | |
| <span>Executed 5 strategic acquisitions in the cloud computing sector</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 rounded-full p-1 mr-2 mt-1"> | |
| <i data-feather="check" class="text-blue-600 w-3 h-3"></i> | |
| </div> | |
| <span>Conducted commercial due diligence for potential targets</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 rounded-full p-1 mr-2 mt-1"> | |
| <i data-feather="check" class="text-blue-600 w-3 h-3"></i> | |
| </div> | |
| <span>Managed post-merger integration for acquired companies</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Item 3 --> | |
| <div class="flex flex-col md:flex-row items-center" data-aos="fade-up"> | |
| <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 text-right"> | |
| <div class="text-blue-600 font-medium">2017 - 2020</div> | |
| <h3 class="text-xl font-semibold mt-1">Business Development Associate</h3> | |
| <p class="text-gray-600">Capgemini</p> | |
| </div> | |
| <div class="hidden md:block w-12 h-12 rounded-full bg-blue-600 border-4 border-white flex items-center justify-center relative"> | |
| <i data-feather="briefcase" class="text-white"></i> | |
| </div> | |
| <div class="md:w-1/2 md:pl-16"> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 rounded-full p-1 mr-2 mt-1"> | |
| <i data-feather="check" class="text-blue-600 w-3 h-3"></i> | |
| </div> | |
| <span>Supported evaluation of acquisition opportunities in digital transformation space</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 rounded-full p-1 mr-2 mt-1"> | |
| <i data-feather="check" class="text-blue-600 w-3 h-3"></i> | |
| </div> | |
| <span>Built financial models to assess target company valuations</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 rounded-full p-1 mr-2 mt-1"> | |
| <i data-feather="check" class="text-blue-600 w-3 h-3"></i> | |
| </div> | |
| <span>Coordinated cross-functional due diligence teams</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonial Section --> | |
| <section class="py-20 px-4 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4" data-aos="fade-up">Client & Partner Testimonials</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto" data-aos="fade-up"> | |
| What industry peers and partners say about working with me. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="testimonial-card p-8 rounded-xl shadow-sm" data-aos="fade-up"> | |
| <div class="flex items-center mb-6"> | |
| <img src="http://static.photos/office/200x200/1" alt="Testimonial" class="w-12 h-12 rounded-full object-cover mr-4"> | |
| <div> | |
| <h4 class="font-semibold">Michael Brandt</h4> | |
| <p class="text-gray-500 text-sm">CEO, TechSolutions GmbH</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic"> | |
| "Henk's strategic approach to our acquisition was exceptional. He identified synergies we hadn't considered and structured a deal that created value for both companies. His attention to detail during due diligence saved us from potential pitfalls." | |
| </p> | |
| <div class="flex mt-4"> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <div class="testimonial-card p-8 rounded-xl shadow-sm" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center mb-6"> | |
| <img src="http://static.photos/office/200x200/2" alt="Testimonial" class="w-12 h-12 rounded-full object-cover mr-4"> | |
| <div> | |
| <h4 class="font-semibold">Sarah Chen</h4> | |
| <p class="text-gray-500 text-sm">M&A Director, Global Ventures</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic"> | |
| "Working with Henk on multiple transactions has been a pleasure. He combines financial acumen with deep industry knowledge to create win-win scenarios. His ability to navigate complex negotiations while maintaining positive relationships is remarkable." | |
| </p> | |
| <div class="flex mt-4"> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="py-20 px-4 bg-white" id="contact"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4" data-aos="fade-up">Let's Connect</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto" data-aos="fade-up"> | |
| Interested in discussing how strategic acquisitions can fuel your company's growth? | |
| </p> | |
| </div> | |
| <div class="flex flex-col md:flex-row gap-12"> | |
| <div class="md:w-1/2" data-aos="fade-right"> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-gray-700 mb-2">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-gray-700 mb-2">Message</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea> | |
| </div> | |
| <button type="submit" class="btn-primary text-white px-6 py-3 rounded-lg font-medium w-full">Send Message</button> | |
| </form> | |
| </div> | |
| <div class="md:w-1/2" data-aos="fade-left"> | |
| <div class="bg-gray-50 p-8 rounded-xl h-full"> | |
| <h3 class="text-xl font-semibold mb-6">Contact Information</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4 flex-shrink-0"> | |
| <i data-feather="mail" class="text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Email</h4> | |
| <a href="mailto:henk.peters@example.com" class="text-gray-600 hover:text-blue-600 transition">henk.peters@example.com</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4 flex-shrink-0"> | |
| <i data-feather="linkedin" class="text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">LinkedIn</h4> | |
| <a href="https://www.linkedin.com/in/henk-peters-07650631a/" target="_blank" class="text-gray-600 hover:text-blue-600 transition">linkedin.com/in/henk-peters</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4 flex-shrink-0"> | |
| <i data-feather="phone" class="text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Phone</h4> | |
| <a href="tel:+1234567890" class="text-gray-600 hover:text-blue-600 transition">+31 123 456 789</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12"> | |
| <h3 class="text-xl font-semibold mb-6">Let's Connect on LinkedIn</h3> | |
| <a href="https://www.linkedin.com/in/henk-peters-07650631a/" target="_blank" class="inline-flex items-center px-6 py-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition"> | |
| <i data-feather="linkedin" class="text-blue-600 mr-2"></i> | |
| <span>Visit My Profile</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12 px-4"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <span class="text-xl font-bold">Henk Peters</span> | |
| <p class="text-gray-400 mt-2">B2B Acquisition & Business Development Specialist</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="mail"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 Henk Peters. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const menuBtn = document.getElementById('menu-btn'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| menuBtn.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| const icon = menuBtn.querySelector('svg'); | |
| if (mobileMenu.classList.contains('hidden')) { | |
| feather.replace(); | |
| } else { | |
| icon.setAttribute('data-feather', 'x'); | |
| feather.replace(); | |
| } | |
| }); | |
| // Close mobile menu when clicking on a link | |
| document.querySelectorAll('#mobile-menu a').forEach(link => { | |
| link.addEventListener('click', () => { | |
| mobileMenu.classList.add('hidden'); | |
| menuBtn.querySelector('svg').setAttribute('data-feather', 'menu'); | |
| feather.replace(); | |
| }); | |
| }); | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| </script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> | |