File size: 6,860 Bytes
c349726 50fb7b5 c349726 a6a54a0 c349726 50fb7b5 c349726 f379688 744d41e 21f4ab1 ed06a9b 21f4ab1 ed06a9b 21f4ab1 c1639d1 50fb7b5 6c6280e 50fb7b5 c349726 50fb7b5 f379688 9f582a9 4007e0c a6a54a0 f1cb6eb 3a3bcd5 f379688 c349726 e7ad23e c349726 9f900a2 c349726 e7ad23e c349726 50fb7b5 c349726 50fb7b5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twinory | Amazon Seller Experts</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Montserrat:wght@700;800&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
color: #FFFFFF;
background-color: #0D0D0D;
}
h1, h2, h3 {
font-family: 'Montserrat', sans-serif;
}
.hero-bg {
background: linear-gradient(135deg, #1A1A1A 0%, #0D0D0D 100%);
}
</style>
</head>
<body class="min-h-screen">
<!-- Navigation -->
<nav class="fixed w-full z-50 bg-black bg-opacity-90 border-b border-gray-800">
<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">
<div class="flex-shrink-0 flex items-center">
<img id="logo" src="https://huggingface.co/spaces/Twinory/undefined/resolve/main/images/TWINORY%20Logo%20-%20Edited.png" alt="Twinory Logo" class="h-10 opacity-0 absolute top-4 right-4">
<span id="tagline" class="text-xs text-yellow-400 opacity-0 ml-2">Just list it, with perfection!</span>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
document.getElementById('hero-logo').classList.remove('opacity-0', 'translate-y-10');
setTimeout(() => {
document.getElementById('hero-tagline').classList.remove('opacity-0', 'translate-y-10');
}, 500);
}, 200);
});
</script>
</div>
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
<a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium hover:text-orange-400">Home</a>
<a href="about.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
<a href="services.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Services</a>
<a href="contact.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
<a href="contact.html" class="ml-4 bg-[#FF9900] text-black px-6 py-2 rounded-md font-medium hover:bg-orange-600 transition duration-300">Get Started</a>
</div>
<div class="-mr-2 flex items-center md:hidden">
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="hero-bg pt-32 pb-20 md:pt-40 md:pb-32">
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="absolute inset-0 bg-[url('https://static.photos/legal/1200x630/42')] opacity-10 bg-cover bg-center -z-10"></div>
<img id="hero-logo" src="https://huggingface.co/spaces/Twinory/undefined/resolve/main/images/TWINORY%20Logo%20-%20Edited.png" alt="Twinory Logo" class="h-80 mx-auto mb-6 opacity-0 transform translate-y-10 transition-all duration-1000" loading="eager">
<p id="hero-tagline" class="text-3xl md:text-5xl text-gray-300 max-w-3xl mx-auto opacity-0 transform translate-y-10 transition-all duration-1000 delay-300 italic tracking-wide" style="font-family: 'Montserrat', sans-serif; font-style: italic;">
Just list it, with perfection!
</p>
</div>
</div>
<!-- Footer -->
<footer class="bg-black py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div class="md:col-span-2">
<h3 class="text-2xl font-bold mb-4">TWINORY</h3>
<p class="text-gray-400">Amazon Seller Growth & Compliance Solutions.</p>
<div class="flex space-x-4 mt-4">
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="facebook"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="linkedin"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="instagram"></i>
</a>
</div>
</div>
<div>
<h4 class="text-white font-bold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
<li><a href="about.html" class="text-gray-400 hover:text-white">About</a></li>
<li><a href="services.html" class="text-gray-400 hover:text-white">Services</a></li>
<li><a href="contact.html" class="text-gray-400 hover:text-white">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">Legal</h4>
<ul class="space-y-2">
<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 class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
<p>© 2023 TWINORY LLC. All rights reserved.</p>
</div>
</div>
</footer>
<script>
feather.replace();
</script>
</body>
</html> |