File size: 9,432 Bytes
1c5961e 1227598 1c5961e 8a5c175 1c5961e 8a5c175 1c5961e | 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 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wear.Fun - From Memes to Merch</title>
<link rel="icon" type="image/x-icon" href="https://huggingface.co/dodey917/wear-fun/resolve/main/images/KZr0gBp.png">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="bg-black text-white">
<custom-header></custom-header>
<main>
<section class="min-h-screen flex items-center justify-center relative overflow-hidden">
<!-- Animated background -->
<div class="absolute inset-0 bg-gradient-to-r from-red-700 via-black to-red-900 opacity-20 animate-pulse"></div>
<!-- Floating t-shirt icon -->
<div class="absolute top-1/4 left-1/4 w-16 h-16 opacity-20 animate-bounce">
<i data-feather="t-shirt" class="w-full h-full"></i>
</div>
<div class="absolute bottom-1/3 right-1/3 w-12 h-12 opacity-30 animate-bounce" style="animation-delay: 0.5s">
<i data-feather="smile" class="w-full h-full"></i>
</div>
<div class="z-20 text-center px-6 max-w-4xl">
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
From Memes to Merch <span class="text-red-500">🚀</span>
</h1>
<p class="text-lg md:text-2xl text-gray-300 mb-10">
Upload your favorite meme or crypto logo and turn it into a wearable joke — in seconds.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="/meme.html" class="bg-red-600 hover:bg-red-700 text-white px-8 py-4 rounded-full shadow-lg text-lg font-semibold transition transform hover:scale-105">
Upload Image
</a>
<a href="/shop.html" class="border-2 border-red-600 text-red-600 px-8 py-4 rounded-full hover:bg-red-900/30 text-lg font-semibold transition transform hover:scale-105">
Browse Shop
</a>
</div>
</div>
</section>
<section class="py-20 px-6">
<div class="max-w-6xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">How It Works</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
<div class="bg-gray-900 p-8 rounded-xl border border-gray-800 hover:border-red-500 transition">
<div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mb-6">
<span class="text-2xl font-bold">1</span>
</div>
<h3 class="text-xl font-bold mb-3">Upload Your Meme</h3>
<p class="text-gray-400">Share your funniest meme or design with us. We support all popular image formats.</p>
</div>
<div class="bg-gray-900 p-8 rounded-xl border border-gray-800 hover:border-red-500 transition">
<div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mb-6">
<span class="text-2xl font-bold">2</span>
</div>
<h3 class="text-xl font-bold mb-3">Generate Captions</h3>
<p class="text-gray-400">Our AI creates hilarious captions perfect for printing on apparel.</p>
</div>
<div class="bg-gray-900 p-8 rounded-xl border border-gray-800 hover:border-red-500 transition">
<div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mb-6">
<span class="text-2xl font-bold">3</span>
</div>
<h3 class="text-xl font-bold mb-3">Wear Your Humor</h3>
<p class="text-gray-400">Get your custom merch delivered right to your door. Show off your sense of humor!</p>
</div>
</div>
</div>
</section>
<section class="py-20 bg-gray-900/50">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Featured Products</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700 hover:border-red-500 transition">
<div class="h-60 bg-gradient-to-r from-red-900 to-black flex items-center justify-center">
<i data-feather="t-shirt" class="w-24 h-24 text-red-500/30"></i>
</div>
<div class="p-6">
<h3 class="font-bold text-xl mb-2">Classic Tee</h3>
<p class="text-gray-400 mb-4">Premium cotton t-shirt with your custom design</p>
<div class="flex justify-between items-center">
<span class="font-bold">$24.99</span>
<button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg transition">View</button>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700 hover:border-red-500 transition">
<div class="h-60 bg-gradient-to-r from-blue-900 to-black flex items-center justify-center">
<i data-feather="coffee" class="w-24 h-24 text-blue-500/30"></i>
</div>
<div class="p-6">
<h3 class="font-bold text-xl mb-2">Mug Design</h3>
<p class="text-gray-400 mb-4">Ceramic mug with your favorite meme</p>
<div class="flex justify-between items-center">
<span class="font-bold">$14.99</span>
<button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg transition">View</button>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700 hover:border-red-500 transition">
<div class="h-60 bg-gradient-to-r from-purple-900 to-black flex items-center justify-center">
<i data-feather="smartphone" class="w-24 h-24 text-purple-500/30"></i>
</div>
<div class="p-6">
<h3 class="font-bold text-xl mb-2">Phone Case</h3>
<p class="text-gray-400 mb-4">Protect your phone with style</p>
<div class="flex justify-between items-center">
<span class="font-bold">$19.99</span>
<button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg transition">View</button>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700 hover:border-red-500 transition">
<div class="h-60 bg-gradient-to-r from-green-900 to-black flex items-center justify-center">
<i data-feather="shopping-bag" class="w-24 h-24 text-green-500/30"></i>
</div>
<div class="p-6">
<h3 class="font-bold text-xl mb-2">Tote Bag</h3>
<p class="text-gray-400 mb-4">Eco-friendly tote with your design</p>
<div class="flex justify-between items-center">
<span class="font-bold">$17.99</span>
<button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg transition">View</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="/shop.html" class="inline-block bg-red-600 hover:bg-red-700 text-white px-8 py-4 rounded-full shadow-lg font-semibold transition transform hover:scale-105">
View All Products
</a>
</div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script src="components/header.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |