Spaces:
Running
Running
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Sam Wondimu | GTM Engineer & AI Strategy Consultant</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> | |
.gradient-text { | |
background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
-webkit-background-clip: text; | |
background-clip: text; | |
color: transparent; | |
} | |
.card-hover: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); | |
} | |
.hero-pattern { | |
background-image: radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.05) 90%); | |
} | |
</style> | |
</head> | |
<body class="font-sans antialiased text-gray-800 bg-white"> | |
<!-- Navigation --> | |
<nav class="bg-white border-b border-gray-200 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"> | |
<span class="text-xl font-bold gradient-text">SAM WONDIMU</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="#blog" class="text-gray-700 hover:text-blue-600 transition">Blog</a> | |
<a href="#case-studies" class="text-gray-700 hover:text-blue-600 transition">Case Studies</a> | |
<a href="#contact" class="text-gray-700 hover:text-blue-600 transition">Contact</a> | |
</div> | |
<div class="md:hidden flex items-center"> | |
<button class="text-gray-500 hover:text-gray-600 focus:outline-none"> | |
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> | |
</svg> | |
</button> | |
</div> | |
</div> | |
</div> | |
</nav> | |
<!-- Hero Section --> | |
<section class="hero-pattern pt-32 pb-20 px-4 sm:px-6 lg:px-8"> | |
<div class="max-w-7xl mx-auto"> | |
<div class="md:flex items-center"> | |
<div class="md:w-1/2 mb-10 md:mb-0"> | |
<h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6"> | |
INNOVATIVE INSIGHTS AT THE INTERSECTION OF | |
<span class="gradient-text">TECHNOLOGY, STRATEGY, AND INVESTMENT</span> | |
</h1> | |
<p class="text-xl text-gray-600 mb-8"> | |
Sam Wondimu | GTM Engineer • AI Strategy Consultant • n8n & Salesforce Implementation Expert • Bitcoin & Real Estate Advocate | |
</p> | |
<p class="text-lg text-gray-600 mb-8"> | |
Navigating the future of technology, business automation, strategic implementation, and wealth creation | |
</p> | |
<div class="flex space-x-4"> | |
<a href="#blog" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition shadow-lg"> | |
EXPLORE MY INSIGHTS | |
</a> | |
<a href="#contact" class="border-2 border-blue-600 text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-lg font-medium transition"> | |
CONTACT ME | |
</a> | |
</div> | |
</div> | |
<div class="md:w-1/2 flex justify-center"> | |
<div class="relative"> | |
<div class="w-64 h-64 md:w-80 md:h-80 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full shadow-xl"></div> | |
<div class="absolute -bottom-5 -right-5 bg-white p-4 rounded-lg shadow-lg border border-gray-200"> | |
<p class="text-sm font-medium">Currently working on:</p> | |
<p class="text-blue-600 font-semibold">AI-powered GTM frameworks</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- About Section --> | |
<section id="about" class="py-20 px-4 sm:px-6 lg:px-8 bg-white"> | |
<div class="max-w-7xl mx-auto"> | |
<div class="text-center mb-16"> | |
<h2 class="text-3xl font-bold mb-4">MEET SAM WONDIMU</h2> | |
<div class="w-24 h-1 bg-gradient-to-r from-blue-400 to-purple-500 mx-auto"></div> | |
</div> | |
<div class="md:flex items-start"> | |
<div class="md:w-1/3 mb-10 md:mb-0 md:pr-10"> | |
<div class="bg-gray-50 p-6 rounded-xl border border-gray-200"> | |
<div class="flex items-center mb-4"> | |
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4"> | |
<i class="fas fa-rocket text-blue-600 text-xl"></i> | |
</div> | |
<h3 class="font-bold text-lg">GTM Strategy</h3> | |
</div> | |
<p class="text-gray-600">Crafting data-driven go-to-market approaches that accelerate growth.</p> | |
</div> | |
<div class="bg-gray-50 p-6 rounded-xl border border-gray-200 mt-4"> | |
<div class="flex items-center mb-4"> | |
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4"> | |
<i class="fas fa-robot text-purple-600 text-xl"></i> | |
</div> | |
<h3 class="font-bold text-lg">AI Implementation</h3> | |
</div> | |
<p class="text-gray-600">Practical AI integration that delivers measurable business impact.</p> | |
</div> | |
</div> | |
<div class="md:w-2/3"> | |
<p class="text-lg text-gray-700 mb-6"> | |
With expertise spanning go-to-market strategy, artificial intelligence, workflow automation with n8n, Salesforce implementation, and alternative investment approaches, I help businesses and individuals navigate the complex intersection of technology and opportunity. | |
</p> | |
<p class="text-lg text-gray-700 mb-6"> | |
My diverse background allows me to provide unique perspectives on how emerging technologies and automation platforms are reshaping industries, creating new business models, and opening investment pathways that weren't previously possible. | |
</p> | |
<p class="text-lg text-gray-700 mb-8"> | |
Whether you're looking to optimize your GTM strategy, implement AI solutions, streamline workflows with n8n, maximize your Salesforce ROI, or explore the potential of Bitcoin and real estate in your investment portfolio, my insights are designed to provide actionable value. | |
</p> | |
<div class="flex flex-wrap gap-4"> | |
<span class="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium">Salesforce</span> | |
<span class="bg-purple-100 text-purple-800 px-4 py-2 rounded-full text-sm font-medium">n8n</span> | |
<span class="bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-medium">AI Strategy</span> | |
<span class="bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">Bitcoin</span> | |
<span class="bg-red-100 text-red-800 px-4 py-2 rounded-full text-sm font-medium">Real Estate</span> | |
<span class="bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full text-sm font-medium">GTM Engineering</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Blog Categories --> | |
<section id="blog" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50"> | |
<div class="max-w-7xl mx-auto"> | |
<div class="text-center mb-16"> | |
<h2 class="text-3xl font-bold mb-4">BLOG CATEGORIES</h2> | |
<div class="w-24 h-1 bg-gradient-to-r from-blue-400 to-purple-500 mx-auto"></div> | |
</div> | |
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
<!-- Category 1 --> | |
<div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition card-hover"> | |
<div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> | |
<i class="fas fa-chart-line text-blue-600 text-2xl"></i> | |
</div> | |
<h3 class="text-xl font-bold mb-3">GTM STRATEGY</h3> | |
<p class="text-gray-600 mb-4">Insights on developing effective go-to-market approaches for technology products and services.</p> | |
<a href="#" class="text-blue-600 font-medium flex items-center"> | |
Read articles <i class="fas fa-arrow-right ml-2"></i> | |
</a> | |
</div> | |
<!-- Category 2 --> | |
<div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition card-hover"> | |
<div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-4"> | |
<i class="fas fa-cogs text-purple-600 text-2xl"></i> | |
</div> | |
<h3 class="text-xl font-bold mb-3">AI & AUTOMATION</h3> | |
<p class="text-gray-600 mb-4">Practical guidance on integrating artificial intelligence and workflow automation into business operations.</p> | |
<a href="#" class="text-purple-600 font-medium flex items-center"> | |
Read articles <i class="fas fa-arrow-right ml-2"></i> | |
</a> | |
</div> | |
<!-- Category 3 --> | |
<div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition card-hover"> | |
<div class="w-14 h-14 bg-green-100 rounded-lg flex items-center justify-center mb-4"> | |
<i class="fas fa-cloud text-green-600 text-2xl"></i> | |
</div> | |
<h3 class="text-xl font-bold mb-3">SALESFORCE ECOSYSTEM</h3> | |
<p class="text-gray-600 mb-4">Expert advice on Salesforce implementation, customization, and optimization for businesses of all sizes.</p> | |
<a href="#" class="text-green-600 font-medium flex items-center"> | |
Read articles <i class="fas fa-arrow-right ml-2"></i> | |
</a> | |
</div> | |
<!-- Category 4 --> | |
<div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition card-hover"> | |
<div class="w-14 h-14 bg-yellow-100 rounded-lg flex items-center justify-center mb-4"> | |
<i class="fas fa-project-diagram text-yellow-600 text-2xl"></i> | |
</div> | |
<h3 class="text-xl font-bold mb-3">n8n WORKFLOWS</h3> | |
<p class="text-gray-600 mb-4">Tutorials, use cases, and implementation strategies for leveraging n8n's powerful workflow automation capabilities.</p> | |
<a href="#" class="text-yellow-600 font-medium flex items-center"> | |
Read articles <i class="fas fa-arrow-right ml-2"></i> | |
</a> | |
</div> | |
<!-- Category 5 --> | |
<div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition card-hover"> | |
<div class="w-14 h-14 bg-red-100 rounded-lg flex items-center justify-center mb-4"> | |
<i class="fas fa-coins text-red-600 text-2xl"></i> | |
</div> | |
<h3 class="text-xl font-bold mb-3">INVESTMENT PERSPECTIVES</h3> | |
<p class="text-gray-600 mb-4">Analysis of Bitcoin, real estate, and other alternative investment vehicles in today's economic landscape.</p> | |
<a href="#" class="text-red-600 font-medium flex items-center"> | |
Read articles <i class="fas fa-arrow-right ml-2"></i> | |
</a> | |
</div> | |
<!-- Category 6 --> | |
<div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition card-hover"> | |
<div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-4"> | |
<i class="fas fa-binoculars text-indigo-600 text-2xl"></i> | |
</div> | |
<h3 class="text-xl font-bold mb-3">INDUSTRY TRENDS</h3> | |
<p class="text-gray-600 mb-4">Observations on emerging patterns across technology, business, and investment sectors.</p> | |
<a href="#" class="text-indigo-600 font-medium flex items-center"> | |
Read articles <i class="fas fa-arrow-right ml-2"></i> | |
</a> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Featured Blog Posts --> | |
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-white"> | |
<div class="max-w-7xl mx-auto"> | |
<div class="text-center mb-16"> | |
<h2 class="text-3xl font-bold mb-4">FEATURED BLOG POSTS</h2> | |
<div class="w-24 h-1 bg-gradient-to-r from-blue-400 to-purple-500 mx-auto"></div> | |
</div> | |
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
<!-- Post 1 --> | |
<div class="bg-white rounded-xl overflow-hidden border border-gray-200 shadow-sm hover:shadow-md transition card-hover"> | |
<div class="h-48 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center"> | |
<i class="fas fa-brain text-white text-5xl"></i> | |
</div> | |
<div class="p-6"> | |
<span class="text-xs font-semibold text-blue-600">GTM STRATEGY • AI</span> | |
<h3 class="text-xl font-bold my-3">The Future of GTM in the Age of AI: Balancing Automation and Human Touch</h3> | |
<p class="text-gray-600 mb-4">How artificial intelligence is reshaping go-to-market strategies while maintaining the critical human elements that drive conversion.</p> | |
<a href="#" class="text-blue-600 font-medium flex items-center"> | |
Read more <i class="fas fa-arrow-right ml-2"></i> | |
</a> | |
</div> | |
</div> | |
<!-- Post 2 --> | |
<div class="bg-white rounded-xl overflow-hidden border border-gray-200 shadow-sm hover:shadow-md transition card-hover"> | |
<div class="h-48 bg-gradient-to-r from-purple-400 to-red-500 flex items-center justify-center"> | |
<i class="fas fa-chart-pie text-white text-5xl"></i> | |
</div> | |
<div class="p-6"> | |
<span class="text-xs font-semibold text-purple-600">INVESTMENT</span> | |
<h3 class="text-xl font-bold my-3">Why Bitcoin and Real Estate Create the Perfect Investment Balance</h3> | |
<p class="text-gray-600 mb-4">Exploring the complementary nature of digital and physical assets in building resilient wealth.</p> | |
<a href="#" class="text-purple-600 font-medium flex items-center"> | |
Read more <i class="fas fa-arrow-right ml-2"></i> | |
</a> | |
</div> | |
</div> | |
<!-- Post 3 --> | |
<div class="bg-white rounded-xl overflow-hidden border border-gray-200 shadow-sm hover:shadow-md transition card-hover"> | |
<div class="h-48 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center"> | |
<i class="fas fa-network-wired text-white text-5xl"></i> | |
</div> | |
<div class="p-6"> | |
<span class="text-xs font-semibold text-green-600">n8n • SALESFORCE</span> | |
<h3 class="text-xl font-bold my-3">Building Cross-Platform Workflows: Connecting n8n with Salesforce</h3> | |
<p class="text-gray-600 mb-4">A step-by-step guide to creating powerful automations that bridge your Salesforce instance with other business tools.</p> | |
<a href="#" class="text-green-600 font-medium flex items-center"> | |
Read more <i class="fas fa-arrow-right ml-2"></i> | |
</a> | |
</div> | |
</div> | |
<!-- Post 4 --> | |
<div class="bg-white rounded-xl overflow-hidden border border-gray-200 shadow-sm hover:shadow-md transition card-hover"> | |
<div class="h-48 bg-gradient-to-r from-red-400 to-orange-500 flex items-center justify-center"> | |
<i class="fas fa-exclamation-triangle text-white text-5xl"></i> | |
</div> | |
<div class="p-6"> | |
<span class="text-xs font-semibold text-red-600">SALESFORCE</span> | |
<h3 class="text-xl font-bold my-3">Salesforce Implementation Pitfalls: What Most Consultants Won't Tell You</h3> | |
<p class="text-gray-600 mb-4">Honest insights from years of Salesforce projects on the hidden challenges and how to overcome them.</p> | |
<a href="#" class="text-red-600 font-medium flex items-center"> | |
Read more <i class="fas fa-arrow-right ml-2"></i> | |
</a> | |
</div> | |
</div> | |
<!-- Post 5 --> | |
<div class="bg-white rounded-xl overflow-hidden border border-gray-200 shadow-sm hover:shadow-md transition card-hover"> | |
<div class="h-48 bg-gradient-to-r from-yellow-400 to-green-500 flex items-center justify-center"> | |
<i class="fas fa-robot text-white text-5xl"></i> | |
</div> | |
<div class="p-6"> | |
<span class="text-xs font-semibold text-yellow-600">n8n • AUTOMATION</span> | |
<h3 class="text-xl font-bold my-3">Automating Lead Nurturing with n8n: Beyond Basic CRM Functionality</h3> | |
<p class="text-gray-600 mb-4">How to create sophisticated, personalized lead journeys without expensive marketing automation platforms.</p> | |
<a href="#" class="text-yellow-600 font-medium flex items-center"> | |
Read more <i class="fas fa-arrow-right ml-2"></i> | |
</a> | |
</div> | |
</div> | |
<!-- Post 6 --> | |
<div class="bg-white rounded-xl overflow-hidden border border-gray-200 shadow-sm hover:shadow-md transition card-hover"> | |
<div class="h-48 bg-gradient-to-r from-indigo-400 to-blue-500 flex items-center justify-center"> | |
<i class="fas fa-rocket text-white text-5xl"></i> | |
</div> | |
<div class="p-6"> | |
<span class="text-xs font-semibold text-indigo-600">GTM STRATEGY</span> | |
<h3 class="text-xl font-bold my-3">Product-Led Growth: Lessons from 5 Success Stories</h3> | |
<p class="text-gray-600 mb-4">Case studies on companies that mastered the art of letting their product drive customer acquisition.</p> | |
<a href="#" class="text-indigo-600 font-medium flex items-center"> | |
Read more <i class="fas fa-arrow-right ml-2"></i> | |
</a> | |
</div> | |
</div> | |
</div> | |
<div class="text-center mt-12"> | |
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"> | |
View All Blog Posts <i class="fas fa-arrow-right ml-2"></i> | |
</a> | |
</div> | |
</div> | |
</section> | |
<!-- Recent Accomplishments --> | |
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50"> | |
<div class="max-w-7xl mx-auto"> | |
<div class="text-center mb-16"> | |
<h2 class="text-3xl font-bold mb-4">RECENT MILESTONES</h2> | |
<div class="w-24 h-1 bg-gradient-to-r from-blue-400 to-purple-500 mx-auto"></div> | |
</div> | |
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
<div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm"> | |
<div class="flex items-start"> | |
<div class="flex-shrink-0"> | |
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center"> | |
<i class="fas fa-check-circle text-blue-600 text-xl"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<p class="text-gray-600">Implemented custom n8n workflows for a SaaS company, reducing operational costs by 35%</p> | |
</div> | |
</div> | |
</div> | |
<div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm"> | |
<div class="flex items-start"> | |
<div class="flex-shrink-0"> | |
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center"> | |
<i class="fas fa-check-circle text-purple-600 text-xl"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<p class="text-gray-600">Completed end-to-end Salesforce transformation for a financial services firm with 200+ users</p> | |
</div> | |
</div> | |
</div> | |
<div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm"> | |
<div class="flex items-start"> | |
<div class="flex-shrink-0"> | |
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center"> | |
<i class="fas fa-check-circle text-green-600 text-xl"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<p class="text-gray-600">Advised 3 tech startups on AI integration, resulting in 40%+ efficiency improvements</p> | |
</div> | |
</div> | |
</div> | |
<div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm"> | |
<div class="flex items-start"> | |
<div class="flex-shrink-0"> | |
<div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center"> | |
<i class="fas fa-check-circle text-yellow-600 text-xl"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<p class="text-gray-600">Presented at the Global GTM Strategy Summit (2024)</p> | |
</div> | |
</div> | |
</div> | |
<div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm"> | |
<div class="flex items-start"> | |
<div class="flex-shrink-0"> | |
<div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center"> | |
<i class="fas fa-check-circle text-red-600 text-xl"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<p class="text-gray-600">Published research on the correlation between Bitcoin adoption and real estate market stability</p> | |
</div> | |
</div> | |
</div> | |
<div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm"> | |
<div class="flex items-start"> | |
<div class="flex-shrink-0"> | |
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center"> | |
<i class="fas fa-check-circle text-indigo-600 text-xl"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<p class="text-gray-600">Launched a monthly strategy workshop series on automation and CRM optimization</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Case Studies --> | |
<section id="case-studies" class="py-20 px-4 sm:px-6 lg:px-8 bg-white"> | |
<div class="max-w-7xl mx-auto"> | |
<div class="text-center mb-16"> | |
<h2 class="text-3xl font-bold mb-4">IMPLEMENTATION SUCCESS STORIES</h2> | |
<div class="w-24 h-1 bg-gradient-to-r from-blue-400 to-purple-500 mx-auto"></div> | |
</div> | |
<div class="grid md:grid-cols-2 gap-8"> | |
<!-- Case Study 1 --> | |
<div class="bg-white rounded-xl overflow-hidden border border-gray-200 shadow-lg"> | |
<div class="h-48 bg-gradient-to-r from-blue-500 to-blue-700 flex items-center justify-center"> | |
<i class="fas fa-building text-white text-5xl"></i> | |
</div> | |
<div class="p-8"> | |
<h3 class="text-2xl font-bold mb-4">Enterprise Salesforce Migration</h3> | |
<p class="text-gray-600 mb-6"> | |
How I helped a multinational company transition from legacy CRM systems to a fully optimized Salesforce environment, increasing sales productivity by 28%. | |
</p> | |
<div class="flex items-center"> | |
<div class="flex-shrink-0"> | |
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center"> | |
<i class="fas fa-chart-line text-blue-600"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<p class="text-sm font-medium text-gray-500">Key Result</p> | |
<p class="font-semibold text-blue-600">28% increase in sales productivity</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- Case Study 2 --> | |
<div class="bg-white rounded-xl overflow-hidden border border-gray-200 shadow-lg"> | |
<div class="h-48 bg-gradient-to-r from-purple-500 to-purple-700 flex items-center justify-center"> | |
<i class="fas fa-shopping-cart text-white text-5xl"></i> | |
</div> | |
<div class="p-8"> | |
<h3 class="text-2xl font-bold mb-4">n8n Automation for E-commerce</h3> | |
<p class="text-gray-600 mb-6"> | |
Creating a custom order processing workflow that connected 5 disparate systems through n8n, eliminating manual data entry and reducing errors by 97%. | |
</p> | |
<div class="flex items-center"> | |
<div class="flex-shrink-0"> | |
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center"> | |
<i class="fas fa-bolt text-purple-600"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<p class="text-sm font-medium text-gray-500">Key Result</p> | |
<p class="font-semibold text-purple-600">97% reduction in processing errors</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- Case Study 3 --> | |
<div class="bg-white rounded-xl overflow-hidden border border-gray-200 shadow-lg md:col-span-2"> | |
<div class="md:flex"> | |
<div class="md:w-1/2 h-64 bg-gradient-to-r from-green-500 to-green-700 flex items-center justify-center"> | |
<i class="fas fa-robot text-white text-5xl"></i> | |
</div> | |
<div class="md:w-1/2 p-8"> | |
<h3 class="text-2xl font-bold mb-4">AI-Powered Salesforce Enhancement</h3> | |
<p class="text-gray-600 mb-6"> | |
Implementing AI capabilities within Salesforce to enable predictive lead scoring and personalized customer journeys, resulting in a 45% increase in conversion rates. | |
</p> | |
<div class="flex items-center"> | |
<div class="flex-shrink-0"> | |
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center"> | |
<i class="fas fa-arrow-up text-green-600"></i> | |
</div> | |
</div> | |
<div class="ml-4"> | |
<p class="text-sm font-medium text-gray-500">Key Result</p> | |
<p class="font-semibold text-green-600">45% increase in conversion rates</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Newsletter --> | |
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-blue-600 to-purple-600 text-white"> | |
<div class="max-w-4xl mx-auto text-center"> | |
<h2 class="text-3xl font-bold mb-6">STAY AHEAD OF THE CURVE</h2> | |
<p class="text-xl mb-8 opacity-90"> | |
Subscribe to receive my monthly insights on GTM strategy, Salesforce & n8n implementation tips, AI automation, and investment opportunities directly to your inbox. | |
</p> | |
<div class="max-w-md mx-auto"> | |
<form class="flex flex-col sm:flex-row gap-4"> | |
<input type="email" placeholder="Email Address" class="flex-grow px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-300 text-gray-900"> | |
<button type="submit" class="bg-white text-blue-600 font-semibold px-6 py-3 rounded-lg hover:bg-gray-100 transition shadow-lg"> | |
SUBSCRIBE | |
</button> | |
</form> | |
<p class="text-sm mt-4 opacity-80"> | |
I respect your privacy and will never share your information. | |
</p> | |
</div> | |
</div> | |
</section> | |
<!-- Footer --> | |
<footer id="contact" class="bg-gray-900 text-white py-16 px-4 sm:px-6 lg:px-8"> | |
<div class="max-w-7xl mx-auto"> | |
<div class="grid md:grid-cols-4 gap-12"> | |
<div class="md:col-span-2"> | |
<h3 class="text-xl font-bold mb-6 gradient-text">SAM WONDIMU</h3> | |
<p class="text-gray-400 mb-6"> | |
Helping businesses navigate the intersection of technology, strategy, and investment through innovative insights and practical implementation. | |
</p> | |
<div class="flex space-x-4"> | |
<a href="#" class="text-gray-400 hover:text-white transition"> | |
<i class="fab fa-linkedin-in text-xl"></i> | |
</a> | |
<a href="#" class="text-gray-400 hover:text-white transition"> | |
<i class="fab fa-twitter text-xl"></i> | |
</a> | |
<a href="#" class="text-gray-400 hover:text-white transition"> | |
<i class="fas fa-envelope text-xl"></i> | |
</a> | |
<a href="#" class="text-gray-400 hover:text-white transition"> | |
<i class="fas fa-podcast text-xl"></i> | |
</a> | |
<a href="#" class="text-gray-400 hover:text-white transition"> | |
<i class="fab fa-salesforce text-xl"></i> | |
</a> | |
</div> | |
</div> | |
<div> | |
<h4 class="text-lg font-semibold mb-6">EXPLORE</h4> | |
<ul class="space-y-3"> | |
<li><a href="#about" class="text-gray-400 hover:text-white transition">About</a></li> | |
<li><a href="#blog" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
<li><a href="#case-studies" class="text-gray-400 hover:text-white transition">Case Studies</a></li> | |
<li><a href="#" class="text-gray-400 hover:text-white transition">Speaking</a></li> | |
<li><a href="#" class="text-gray-400 hover:text-white transition">Workshops</a></li> | |
</ul> | |
</div> | |
<div> | |
<h4 class="text-lg font-semibold mb-6">CONNECT</h4> | |
<ul class="space-y-3"> | |
<li class="flex items-center"> | |
<i class="fas fa-envelope text-gray-400 mr-3"></i> | |
<a href="mailto:[email protected]" class="text-gray-400 hover:text-white transition">[email protected]</a> | |
</li> | |
<li class="flex items-center"> | |
<i class="fab fa-linkedin-in text-gray-400 mr-3"></i> | |
<a href="#" class="text-gray-400 hover:text-white transition">LinkedIn</a> | |
</li> | |
<li class="flex items-center"> | |
<i class="fab fa-twitter text-gray-400 mr-3"></i> | |
<a href="#" class="text-gray-400 hover:text-white transition">Twitter</a> | |
</li> | |
<li class="flex items-center"> | |
<i class="fas fa-calendar-alt text-gray-400 mr-3"></i> | |
<a href="#" class="text-gray-400 hover:text-white transition">Book a Consultation</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-500 text-sm mb-4 md:mb-0"> | |
© 2025 Sam Wondimu | AI Strategy • GTM Engineering • n8n & Salesforce Expert • Investment Insights | |
</p> | |
<div class="flex space-x-6"> | |
<a href="#" class="text-gray-500 hover:text-gray-300 text-sm">Privacy Policy</a> | |
<a href="#" class="text-gray-500 hover:text-gray-300 text-sm">Terms of Service</a> | |
</div> | |
</div> | |
</div> | |
</footer> | |
<script> | |
// Simple JavaScript for mobile menu toggle (would need to be expanded in a real implementation) | |
document.addEventListener('DOMContentLoaded', function() { | |
const mobileMenuButton = document.querySelector('.md\\:hidden button'); | |
const mobileMenu = document.querySelector('.mobile-menu'); | |
if (mobileMenuButton) { | |
mobileMenuButton.addEventListener('click', function() { | |
// This would toggle a mobile menu in a complete implementation | |
console.log('Mobile menu clicked - would open menu in complete implementation'); | |
}); | |
} | |
// Smooth scrolling for anchor links | |
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) { | |
window.scrollTo({ | |
top: targetElement.offsetTop - 80, | |
behavior: 'smooth' | |
}); | |
} | |
}); | |
}); | |
}); | |
</script> | |
</html> |