| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Thokerunga Innocent | Amazon KDP Design Specialist</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"> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| body { |
| font-family: 'Inter', sans-serif; |
| scroll-behavior: smooth; |
| } |
| .portfolio-item { |
| transition: all 0.3s ease; |
| } |
| .portfolio-item:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
| .lightbox { |
| display: none; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(0,0,0,0.9); |
| z-index: 1000; |
| align-items: center; |
| justify-content: center; |
| } |
| .lightbox-content { |
| max-width: 90%; |
| max-height: 90%; |
| } |
| .lightbox-caption { |
| color: white; |
| text-align: center; |
| margin-top: 20px; |
| } |
| .nav-link { |
| position: relative; |
| } |
| .nav-link:after { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 2px; |
| bottom: -2px; |
| left: 0; |
| background-color: #4F46E5; |
| transition: width 0.3s ease; |
| } |
| .nav-link:hover:after { |
| width: 100%; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 text-gray-800"> |
| |
| <nav class="bg-white shadow-sm fixed w-full z-10"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <a href="#home" class="text-xl font-bold text-indigo-600">Thokerunga<span class="text-gray-800">Innocent</span></a> |
| </div> |
| <div class="hidden md:flex items-center space-x-8"> |
| <a href="#home" class="nav-link text-gray-700 hover:text-indigo-600">Home</a> |
| <a href="#portfolio" class="nav-link text-gray-700 hover:text-indigo-600">Portfolio</a> |
| <a href="#services" class="nav-link text-gray-700 hover:text-indigo-600">Services</a> |
| <a href="#about" class="nav-link text-gray-700 hover:text-indigo-600">About</a> |
| <a href="#contact" class="nav-link text-gray-700 hover:text-indigo-600">Contact</a> |
| </div> |
| <div class="md:hidden flex items-center"> |
| <button id="menu-btn" class="text-gray-700 hover:text-indigo-600"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t"> |
| <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-gray-700 hover:text-indigo-600 hover:bg-gray-50">Home</a> |
| <a href="#portfolio" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Portfolio</a> |
| <a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Services</a> |
| <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">About</a> |
| <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Contact</a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-r from-indigo-50 to-purple-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <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">Helping Authors Dominate Amazon with Stunning Books</h1> |
| <p class="text-lg text-gray-600 mb-8">I'm Thokerunga Innocent, a graphic designer + publishing specialist helping authors, entrepreneurs, and creatives build bestselling books on Amazon. From keyword research and covers to A+ content and publishing, I turn ideas into real, high-impact books.</p> |
| <div class="flex flex-wrap gap-4 mb-8"> |
| <span class="bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full text-sm font-medium">🎯 50+ titles published</span> |
| <span class="bg-purple-100 text-purple-800 px-4 py-2 rounded-full text-sm font-medium">🖼️ 300+ graphics delivered</span> |
| <span class="bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-medium">🚀 Amazon KDP expert</span> |
| </div> |
| <div class="flex space-x-4"> |
| <a href="#portfolio" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-md font-medium transition duration-300">View My Work</a> |
| <a href="#contact" class="border border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-md font-medium transition duration-300">Get in Touch</a> |
| </div> |
| </div> |
| <div class="md:w-1/2 md:pl-12"> |
| <div class="relative"> |
| <div class="absolute -top-6 -left-6 w-full h-full bg-indigo-100 rounded-xl -z-10"></div> |
| <img src="https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" alt="Book Design" class="rounded-xl shadow-xl"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">My Amazon KDP Services</h2> |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">Comprehensive design and publishing solutions to make your book stand out in the crowded Amazon marketplace.</p> |
| </div> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300"> |
| <div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-search text-indigo-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Title & Niche Research</h3> |
| <p class="text-gray-600">SEO-rich keyword strategies to position your book for maximum visibility and sales on Amazon.</p> |
| </div> |
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300"> |
| <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-book-open text-purple-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Cover Design</h3> |
| <p class="text-gray-600">Kindle + Paperback covers across all genres that grab attention and convert browsers to buyers.</p> |
| </div> |
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300"> |
| <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-layer-group text-green-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Interior Layout</h3> |
| <p class="text-gray-600">Professional formatting for recipe books, self-help guides, planners, and more with perfect readability.</p> |
| </div> |
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300"> |
| <div class="w-14 h-14 bg-yellow-100 rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-images text-yellow-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">A+ Content Design</h3> |
| <p class="text-gray-600">Compelling Amazon graphics and branding that boosts your book's perceived value and conversions.</p> |
| </div> |
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300"> |
| <div class="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-rocket text-red-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Publishing Workflow</h3> |
| <p class="text-gray-600">Full journey from idea to live book on Amazon, handling all technical aspects of the publishing process.</p> |
| </div> |
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300"> |
| <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-chart-line text-blue-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Marketing Assets</h3> |
| <p class="text-gray-600">Lead magnets, social media graphics, and landing pages to support your book launch and promotions.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="portfolio" class="py-16 bg-gray-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">My Portfolio</h2> |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">A showcase of my best Amazon KDP design work across various categories.</p> |
| </div> |
| |
| |
| <div class="flex flex-wrap justify-center gap-3 mb-12"> |
| <button class="filter-btn active px-4 py-2 bg-indigo-600 text-white rounded-md" data-filter="all">All Work</button> |
| <button class="filter-btn px-4 py-2 bg-white border border-gray-300 hover:bg-gray-50 rounded-md" data-filter="covers">Book Covers</button> |
| <button class="filter-btn px-4 py-2 bg-white border border-gray-300 hover:bg-gray-50 rounded-md" data-filter="aplus">A+ Content</button> |
| <button class="filter-btn px-4 py-2 bg-white border border-gray-300 hover:bg-gray-50 rounded-md" data-filter="infographics">Infographics</button> |
| <button class="filter-btn px-4 py-2 bg-white border border-gray-300 hover:bg-gray-50 rounded-md" data-filter="beforeafter">Before & After</button> |
| <button class="filter-btn px-4 py-2 bg-white border border-gray-300 hover:bg-gray-50 rounded-md" data-filter="leadmagnets">Lead Magnets</button> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="portfolio-item covers" data-category="covers"> |
| <div class="bg-white rounded-xl overflow-hidden shadow-md cursor-pointer" onclick="openLightbox('https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80', 'Self-Help Book Cover', 'Modern minimalist cover design for a personal development book targeting young professionals.')"> |
| <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Book Cover" class="w-full h-64 object-cover"> |
| <div class="p-6"> |
| <span class="inline-block px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-xs font-medium mb-2">Book Cover</span> |
| <h3 class="text-xl font-semibold mb-2">Self-Help Book Cover</h3> |
| <p class="text-gray-600">Modern minimalist design for personal development</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="portfolio-item aplus" data-category="aplus"> |
| <div class="bg-white rounded-xl overflow-hidden shadow-md cursor-pointer" onclick="openLightbox('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80', 'A+ Content Slides', '5-slide A+ content module for a cookbook highlighting key features and benefits.')"> |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="A+ Content" class="w-full h-64 object-cover"> |
| <div class="p-6"> |
| <span class="inline-block px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-xs font-medium mb-2">A+ Content</span> |
| <h3 class="text-xl font-semibold mb-2">A+ Content Slides</h3> |
| <p class="text-gray-600">5-slide module for a bestselling cookbook</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="portfolio-item infographics" data-category="infographics"> |
| <div class="bg-white rounded-xl overflow-hidden shadow-md cursor-pointer" onclick="openLightbox('https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80', 'Business Infographic', 'Data visualization for a business strategy book showing key concepts and frameworks.')"> |
| <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Infographic" class="w-full h-64 object-cover"> |
| <div class="p-6"> |
| <span class="inline-block px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium mb-2">Infographic</span> |
| <h3 class="text-xl font-semibold mb-2">Business Infographic</h3> |
| <p class="text-gray-600">Data visualization for business strategy book</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="portfolio-item beforeafter" data-category="beforeafter"> |
| <div class="bg-white rounded-xl overflow-hidden shadow-md cursor-pointer" onclick="openLightbox('https://images.unsplash.com/photo-1510172951991-856a62a68832?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80', 'Cover Transformation', 'Before and after of a book cover redesign that increased conversion rate by 40%.')"> |
| <img src="https://images.unsplash.com/photo-1510172951991-856a62a68832?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Before & After" class="w-full h-64 object-cover"> |
| <div class="p-6"> |
| <span class="inline-block px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium mb-2">Before & After</span> |
| <h3 class="text-xl font-semibold mb-2">Cover Transformation</h3> |
| <p class="text-gray-600">Redesign that increased conversions by 40%</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="portfolio-item leadmagnets" data-category="leadmagnets"> |
| <div class="bg-white rounded-xl overflow-hidden shadow-md cursor-pointer" onclick="openLightbox('https://images.unsplash.com/photo-1506880018603-83d5b814b5a6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80', 'Planner Lead Magnet', 'Free downloadable planner designed as a lead magnet for a productivity book.')"> |
| <img src="https://images.unsplash.com/photo-1506880018603-83d5b814b5a6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Lead Magnet" class="w-full h-64 object-cover"> |
| <div class="p-6"> |
| <span class="inline-block px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium mb-2">Lead Magnet</span> |
| <h3 class="text-xl font-semibold mb-2">Planner Lead Magnet</h3> |
| <p class="text-gray-600">Downloadable planner for book promotion</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="portfolio-item covers" data-category="covers"> |
| <div class="bg-white rounded-xl overflow-hidden shadow-md cursor-pointer" onclick="openLightbox('https://images.unsplash.com/photo-1589998059171-988d322b23dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80', 'Cookbook Cover', 'Appetizing cover design for a keto cookbook with professional food photography.')"> |
| <img src="https://images.unsplash.com/photo-1589998059171-988d322b23dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Cookbook Cover" class="w-full h-64 object-cover"> |
| <div class="p-6"> |
| <span class="inline-block px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-xs font-medium mb-2">Book Cover</span> |
| <h3 class="text-xl font-semibold mb-2">Cookbook Cover</h3> |
| <p class="text-gray-600">Appetizing design for keto cookbook</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <a href="#" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-md font-medium transition duration-300">View Full Portfolio</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-16 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">Comprehensive Amazon KDP Services</h2> |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">End-to-end solutions to create, publish, and market your Amazon book successfully.</p> |
| </div> |
| |
| <div class="grid md:grid-cols-2 gap-12"> |
| |
| <div class="flex"> |
| <div class="mr-6"> |
| <div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center"> |
| <i class="fas fa-search text-indigo-600 text-xl"></i> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-semibold mb-3">Title & Niche Research</h3> |
| <p class="text-gray-600 mb-4">I conduct in-depth market analysis to identify profitable niches and high-converting book titles that align with Amazon's search algorithms. My research includes:</p> |
| <ul class="list-disc pl-5 text-gray-600 space-y-2"> |
| <li>Competitor analysis and gap identification</li> |
| <li>Keyword research for optimal discoverability</li> |
| <li>Bestseller list analysis for trending topics</li> |
| <li>Profitability assessment of niche markets</li> |
| </ul> |
| </div> |
| </div> |
| |
| |
| <div class="flex"> |
| <div class="mr-6"> |
| <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center"> |
| <i class="fas fa-book-open text-purple-600 text-xl"></i> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-semibold mb-3">Cover Design</h3> |
| <p class="text-gray-600 mb-4">I create eye-catching covers that stand out in Amazon's thumbnail view while clearly communicating your book's value proposition. My cover design process includes:</p> |
| <ul class="list-disc pl-5 text-gray-600 space-y-2"> |
| <li>Genre-appropriate design styles</li> |
| <li>High-resolution 3D mockups for preview</li> |
| <li>Kindle and paperback version optimization</li> |
| <li>Title and subtitle hierarchy for readability</li> |
| </ul> |
| </div> |
| </div> |
| |
| |
| <div class="flex"> |
| <div class="mr-6"> |
| <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center"> |
| <i class="fas fa-layer-group text-green-600 text-xl"></i> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-semibold mb-3">Interior Layout</h3> |
| <p class="text-gray-600 mb-4">Professional interior formatting that enhances readability and creates a premium reading experience. My interior design services include:</p> |
| <ul class="list-disc pl-5 text-gray-600 space-y-2"> |
| <li>Custom typography and chapter styling</li> |
| <li>Image placement and caption formatting</li> |
| <li>Table of contents and navigation</li> |
| <li>Print-ready PDF with proper margins and bleeds</li> |
| </ul> |
| </div> |
| </div> |
| |
| |
| <div class="flex"> |
| <div class="mr-6"> |
| <div class="w-14 h-14 bg-yellow-100 rounded-full flex items-center justify-center"> |
| <i class="fas fa-images text-yellow-600 text-xl"></i> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-semibold mb-3">A+ Content Design</h3> |
| <p class="text-gray-600 mb-4">Enhanced brand content that boosts conversions by showcasing your book's value through compelling visuals and copy. My A+ content services include:</p> |
| <ul class="list-disc pl-5 text-gray-600 space-y-2"> |
| <li>3-slide and 5-slide module designs</li> |
| <li>Feature/benefit comparison tables</li> |
| <li>Customer testimonial integration</li> |
| <li>Mobile-optimized layouts</li> |
| </ul> |
| </div> |
| </div> |
| |
| |
| <div class="flex"> |
| <div class="mr-6"> |
| <div class="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center"> |
| <i class="fas fa-rocket text-red-600 text-xl"></i> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-semibold mb-3">Publishing Workflow</h3> |
| <p class="text-gray-600 mb-4">Complete handling of the technical publishing process to get your book live on Amazon. My publishing services include:</p> |
| <ul class="list-disc pl-5 text-gray-600 space-y-2"> |
| <li>ISBN assignment and metadata optimization</li> |
| <li>KDP dashboard setup and configuration</li> |
| <li>Print and digital version synchronization</li> |
| <li>Quality assurance checks pre-launch</li> |
| </ul> |
| </div> |
| </div> |
| |
| |
| <div class="flex"> |
| <div class="mr-6"> |
| <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center"> |
| <i class="fas fa-chart-line text-blue-600 text-xl"></i> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-semibold mb-3">Marketing Assets</h3> |
| <p class="text-gray-600 mb-4">Additional promotional materials to support your book launch and ongoing marketing efforts. My marketing services include:</p> |
| <ul class="list-disc pl-5 text-gray-600 space-y-2"> |
| <li>Social media graphics and banners</li> |
| <li>Email header images and lead magnets</li> |
| <li>Landing page designs for book promotions</li> |
| <li>Author website graphics</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-16 bg-gray-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="md:flex items-center"> |
| <div class="md:w-1/3 mb-10 md:mb-0"> |
| <div class="relative"> |
| <div class="absolute -top-6 -left-6 w-full h-full bg-indigo-100 rounded-xl -z-10"></div> |
| <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Thokerunga Innocent" class="rounded-xl shadow-xl"> |
| </div> |
| </div> |
| <div class="md:w-2/3 md:pl-16"> |
| <h2 class="text-3xl font-bold mb-6">About Me</h2> |
| <p class="text-lg text-gray-600 mb-6">I'm Thokerunga Innocent, a graphic designer and Amazon KDP publishing specialist with over 5 years of experience helping authors create bestselling books. My journey began when I self-published my first book and discovered the challenges authors face in navigating Amazon's complex ecosystem.</p> |
| <p class="text-lg text-gray-600 mb-8">Since then, I've dedicated myself to mastering every aspect of Amazon publishing—from cover design that converts to metadata optimization that ranks. I've worked with over 100 authors across genres including self-help, cookbooks, fiction, and business books.</p> |
| |
| <div class="mb-8"> |
| <h3 class="text-xl font-semibold mb-4">Tools & Technologies I Use</h3> |
| <div class="flex flex-wrap gap-3"> |
| <span class="bg-white px-4 py-2 rounded-md shadow-sm text-sm font-medium">Adobe Photoshop</span> |
| <span class="bg-white px-4 py-2 rounded-md shadow-sm text-sm font-medium">Adobe Illustrator</span> |
| <span class="bg-white px-4 py-2 rounded-md shadow-sm text-sm font-medium">InDesign</span> |
| <span class="bg-white px-4 py-2 rounded-md shadow-sm text-sm font-medium">Canva</span> |
| <span class="bg-white px-4 py-2 rounded-md shadow-sm text-sm font-medium">KDP Rocket</span> |
| <span class="bg-white px-4 py-2 rounded-md shadow-sm text-sm font-medium">Publisher Rocket</span> |
| <span class="bg-white px-4 py-2 rounded-md shadow-sm text-sm font-medium">Amazon A+ Content</span> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-xl font-semibold mb-4">My Mission</h3> |
| <p class="text-lg text-gray-600">To help authors navigate the complex world of Amazon publishing with confidence, creating books that not only look professional but also achieve their full sales potential. I believe every author deserves access to high-quality design and publishing expertise, regardless of their budget or experience level.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-indigo-600 text-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">What My Clients Say</h2> |
| <p class="text-lg text-indigo-100 max-w-3xl mx-auto">Don't just take my word for it—here's what authors I've worked with have to say.</p> |
| </div> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-indigo-700 p-8 rounded-xl"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah J." class="w-full h-full object-cover"> |
| </div> |
| <div> |
| <h4 class="font-semibold">Sarah J.</h4> |
| <p class="text-indigo-200 text-sm">Self-Help Author</p> |
| </div> |
| </div> |
| <p class="italic mb-4">"Thokerunga transformed my book from amateur to professional. The cover he designed increased my conversion rate by 35% and his A+ content helped me stand out in a crowded niche."</p> |
| <div class="flex 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="bg-indigo-700 p-8 rounded-xl"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-full h-full object-cover"> |
| </div> |
| <div> |
| <h4 class="font-semibold">Michael T.</h4> |
| <p class="text-indigo-200 text-sm">Cookbook Author</p> |
| </div> |
| </div> |
| <p class="italic mb-4">"Working with Thokerunga was a game-changer for my cookbook series. His niche research identified a profitable gap in the market, and his designs made my books look like they came from a major publisher."</p> |
| <div class="flex 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="bg-indigo-700 p-8 rounded-xl"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Jessica L." class="w-full h-full object-cover"> |
| </div> |
| <div> |
| <h4 class="font-semibold">Jessica L.</h4> |
| <p class="text-indigo-200 text-sm">Business Author</p> |
| </div> |
| </div> |
| <p class="italic mb-4">"The infographics and tables Thokerunga created for my business book made complex concepts easily understandable. His attention to detail in the interior layout elevated the entire reading experience."</p> |
| <div class="flex 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> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">Amazon KDP Insights</h2> |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">Tips, trends, and tutorials about Amazon publishing and book design.</p> |
| </div> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300"> |
| <img src="https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Blog Post" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <span class="inline-block px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-xs font-medium mb-3">Design Tips</span> |
| <h3 class="text-xl font-semibold mb-3">5 Book Cover Design Trends Dominating Amazon in 2023</h3> |
| <p class="text-gray-600 mb-4">Discover the visual trends that are converting browsers into buyers across different genres.</p> |
| <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800">Read More →</a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300"> |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Blog Post" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <span class="inline-block px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-xs font-medium mb-3">A+ Content</span> |
| <h3 class="text-xl font-semibold mb-3">How to Structure A+ Content for Maximum Conversions</h3> |
| <p class="text-gray-600 mb-4">Learn the psychological principles behind high-converting A+ content layouts.</p> |
| <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800">Read More →</a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300"> |
| <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Blog Post" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <span class="inline-block px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium mb-3">SEO Strategy</span> |
| <h3 class="text-xl font-semibold mb-3">The Complete Amazon KDP Keyword Research Guide</h3> |
| <p class="text-gray-600 mb-4">Step-by-step process to find profitable keywords for your book title and metadata.</p> |
| <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800">Read More →</a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <a href="#" class="inline-block border border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-md font-medium transition duration-300">View All Articles</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-16 bg-gray-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="md:flex"> |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-12"> |
| <h2 class="text-3xl font-bold mb-6">Let's Work Together</h2> |
| <p class="text-lg text-gray-600 mb-8">Ready to create a bestselling book on Amazon? Fill out the form or reach out directly to discuss your project.</p> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="mr-6"> |
| <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center"> |
| <i class="fas fa-envelope text-indigo-600 text-xl"></i> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-1">Email Me</h3> |
| <p class="text-gray-600">hello@thokerungainnocent.com</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="mr-6"> |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center"> |
| <i class="fas fa-calendar-alt text-purple-600 text-xl"></i> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-1">Schedule a Call</h3> |
| <p class="text-gray-600">Book a free 30-minute consultation to discuss your project</p> |
| <a href="#" class="inline-block mt-2 text-indigo-600 font-medium hover:text-indigo-800">View Calendar →</a> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="mr-6"> |
| <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center"> |
| <i class="fas fa-comments text-green-600 text-xl"></i> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-1">Follow Me</h3> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-600 hover:text-indigo-600"><i class="fab fa-twitter text-xl"></i></a> |
| <a href="#" class="text-gray-600 hover:text-indigo-600"><i class="fab fa-linkedin text-xl"></i></a> |
| <a href="#" class="text-gray-600 hover:text-indigo-600"><i class="fab fa-instagram text-xl"></i></a> |
| <a href="#" class="text-gray-600 hover:text-indigo-600"><i class="fab fa-pinterest text-xl"></i></a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="md:w-1/2"> |
| <div class="bg-white p-8 rounded-xl shadow-md"> |
| <h3 class="text-2xl font-semibold mb-6">Send a Message</h3> |
| <form> |
| <div class="mb-6"> |
| <label for="name" class="block text-gray-700 font-medium mb-2">Your Name</label> |
| <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="John Smith"> |
| </div> |
| <div class="mb-6"> |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label> |
| <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="you@example.com"> |
| </div> |
| <div class="mb-6"> |
| <label for="project" class="block text-gray-700 font-medium mb-2">Project Type</label> |
| <select id="project" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| <option value="">Select a service</option> |
| <option value="cover">Book Cover Design</option> |
| <option value="aplus">A+ Content Design</option> |
| <option value="interior">Interior Layout</option> |
| <option value="full">Full Publishing Package</option> |
| <option value="other">Other</option> |
| </select> |
| </div> |
| <div class="mb-6"> |
| <label for="message" class="block text-gray-700 font-medium mb-2">Project Details</label> |
| <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Tell me about your book project..."></textarea> |
| </div> |
| <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-md font-medium transition duration-300">Send Message</button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="md:flex md:justify-between"> |
| <div class="mb-8 md:mb-0"> |
| <a href="#" class="text-xl font-bold text-white">Thokerunga<span class="text-indigo-400">Innocent</span></a> |
| <p class="mt-4 text-gray-400 max-w-xs">Helping authors create bestselling books through strategic design and Amazon publishing expertise.</p> |
| </div> |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-8"> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Navigation</h3> |
| <ul class="space-y-3"> |
| <li><a href="#home" class="text-gray-400 hover:text-white">Home</a></li> |
| <li><a href="#portfolio" class="text-gray-400 hover:text-white">Portfolio</a></li> |
| <li><a href="#services" class="text-gray-400 hover:text-white">Services</a></li> |
| <li><a href="#about" class="text-gray-400 hover:text-white">About</a></li> |
| <li><a href="#contact" class="text-gray-400 hover:text-white">Contact</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Services</h3> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Cover Design</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">A+ Content</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Interior Layout</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Full Publishing</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Marketing Assets</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Legal</h3> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <div class="mt-12 pt-8 border-t border-gray-800"> |
| <div class="md:flex md:items-center md:justify-between"> |
| <div class="flex justify-center md:order-2 space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-pinterest"></i></a> |
| </div> |
| <p class="mt-8 md:mt-0 text-center md:order-1 text-sm text-gray-400">© 2023 Thokerunga Innocent. All rights reserved.</p> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="lightbox" class="lightbox"> |
| <div class="lightbox-content"> |
| <img id="lightbox-img" src="" alt="" class="max-w-full max-h-full"> |
| <div class="lightbox-caption"> |
| <h3 id="lightbox-title" class="text-xl font-semibold"></h3> |
| <p id="lightbox-desc" class="text-gray-300"></p> |
| </div> |
| </div> |
| <button onclick="closeLightbox()" class="absolute top-4 right-4 text-white text-3xl">×</button> |
| </div> |
|
|
| <script> |
| |
| document.getElementById('menu-btn').addEventListener('click', function() { |
| document.getElementById('mobile-menu').classList.toggle('hidden'); |
| }); |
| |
| |
| const filterButtons = document.querySelectorAll('.filter-btn'); |
| const portfolioItems = document.querySelectorAll('.portfolio-item'); |
| |
| filterButtons.forEach(button => { |
| button.addEventListener('click', () => { |
| |
| filterButtons.forEach(btn => btn.classList.remove('active', 'bg-indigo-600', 'text-white')); |
| filterButtons.forEach(btn => btn.classList.add('bg-white', 'border', 'border-gray-300', 'hover:bg-gray-50')); |
| button.classList.add('active', 'bg-indigo-600', 'text-white'); |
| button.classList.remove('bg-white', 'border', 'border-gray-300', 'hover:bg-gray-50'); |
| |
| |
| const filter = button.getAttribute('data-filter'); |
| portfolioItems.forEach(item => { |
| if (filter === 'all' || item.getAttribute('data-category') === filter) { |
| item.style.display = 'block'; |
| } else { |
| item.style.display = 'none'; |
| } |
| }); |
| }); |
| }); |
| |
| |
| function openLightbox(imgSrc, title, description) { |
| const lightbox = document.getElementById('lightbox'); |
| const lightboxImg = document.getElementById('lightbox-img'); |
| const lightboxTitle = document.getElementById('lightbox-title'); |
| const lightboxDesc = document.getElementById('lightbox-desc'); |
| |
| lightboxImg.src = imgSrc; |
| lightboxImg.alt = title; |
| lightboxTitle.textContent = title; |
| lightboxDesc.textContent = description; |
| |
| lightbox.style.display = 'flex'; |
| document.body.style.overflow = 'hidden'; |
| } |
| |
| function closeLightbox() { |
| document.getElementById('lightbox').style.display = 'none'; |
| document.body.style.overflow = 'auto'; |
| } |
| |
| |
| document.getElementById('lightbox').addEventListener('click', function(e) { |
| if (e.target === this) { |
| closeLightbox(); |
| } |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| const targetElement = document.querySelector(targetId); |
| |
| if (targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| |
| |
| document.getElementById('mobile-menu').classList.add('hidden'); |
| } |
| }); |
| }); |
| </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=nyaringe/my-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
