1 — Project structure (recommended)

wear-fun/
├─ public/
│ └─ logo.png
├─ src/
│ ├─ pages/ # or app/ if using Next 13+ app router
│ │ ├─ index.tsx # Home / hero
│ │ ├─ meme.tsx # Meme generator page
│ │ ├─ shop.tsx # Shop page
│ │ └─ community.tsx
│ ├─ components/
│ │ ├─ Hero.tsx
│ │ ├─ MemeUploader.tsx
│ │ ├─ ProductCard.tsx
│ │ └─ Footer.tsx
│ ├─ lib/
│ │ └─ openai.ts
│ └─ styles/
├─ pages/api/
│ ├─ generate-caption.ts # text generation endpoint
│ ├─ generate-mockup.ts # image generation endpoint (OpenAI)
│ ├─ printful-order.ts # Printful proxy order endpoint
│ └─ stripe-checkout.ts # Stripe checkout session (optional)
├─ .env.local
├─ tailwind.config.js
├─ package.json
└─ README.md

2 — Environment variables (important)

Add to .env.local:

NEXT_PUBLIC_SITE_NAME="Wear.Fun"
OPENAI_API_KEY=sk-...
PRINTFUL_API_KEY=pf_...
STRIPE_SECRET_KEY=sk_live_...
SUPABASE_URL=...
SUPABASE_KEY=...
NEXT_PUBLIC_STRIPE_PK=pk_live_...


(Use staging/test keys in dev.)

3 — Prompts (ready-to-use)

Caption generation prompt (send to GPT text model):

You are a witty meme copywriter. Given an uploaded image and an optional style hint, produce 3 short, funny, and shareable captions (one-liners, 3-10 words) suitable for printing on T-shirts and stickers. Avoid profanity and violent content. Keep them family-friendly but edgy and internet-culture-savvy.

IMAGE_DESCRIPTION: <brief description of the uploaded image here>
STYLE_HINT: <e.g., "crypto meme", "XRP joke", "sarcastic", or empty>

Return JSON:
{
"captions": [
"caption A",
"caption B",
"caption C"
]
}


T-shirt mockup prompt (for DALL·E / gpt-image-1):

Generate a photorealistic image of a unisex T-shirt on a neutral background (or worn by a gender-neutral model) with realistic folds and lighting. Apply the provided uploaded image as a seamless printed design on the front. Match fabric texture and follow shirt wrinkles and lighting so the design looks printed, not pasted. Provide a 1024x1024 PNG. Shirt color should be white by default but must be easily changeable by replacing "white" in the prompt.

4 — Backend: Next.js API examples

These endpoints run server-side only. They accept multipart/form-data (image uploads) and call OpenAI or Printful. Keep API keys server-side.

/pages/api/generate-caption.ts (text caption)
// pages/api/generate-caption.ts
import type { NextApiRequest, NextApiResponse } from "next";
import OpenAI from "openai";

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try {
const { imageDescription = "", styleHint = "" } = req.body;

const prompt = `You are a witty meme copywriter...
IMAGE_DESCRIPTION: ${imageDescription}
STYLE_HINT: ${styleHint}

Return JSON:
{ "captions": [ ... ] }`;

const completion = await openai.chat.completions.create({
model: "gpt-5o-mini", // example text model; replace with your preferred model
messages: [{ role: "user", content: prompt }],
max_tokens: 150,
temperature: 0.9,
});

// extract and parse JSON safely:
const raw = completion.choices?.[0]?.message?.content ?? "";
// attempt to parse JSON from raw content
let parsed;
try { parsed = JSON.parse(raw); } catch { parsed = { captions: [raw] }; }

res.status(200).json(parsed);
} catch (err) {
console.error(err);
res.status(500).json({ error: "Caption generation failed" });
}
}


Note: use model you have access to; adjust temperature.

/pages/api/generate-mockup.ts (image mockup with OpenAI Image API)
// pages/api/generate-mockup.ts
import type { NextApiRequest, NextApiResponse } from "next";
import formidable from "formidable";
import fs from "fs";
import OpenAI from "openai";

export const config = { api: { bodyParser: false } };

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const form = new formidable.IncomingForm();
form.parse(req, async (err, fields, files) => {
try {
if (err) throw err;
// fields: shirtColor (optional), promptHint
const shirtColor = fields.shirtColor || "white";
const promptHint = fields.promptHint || "";

const design = files.design as formidable.File;
if (!design) return res.status(400).json({ error: "No design uploaded" });

// read file
const imageBuffer = fs.readFileSync(design.filepath);

const prompt = `Generate a photorealistic unisex ${shirtColor} T-shirt...
${promptHint}`;

// call OpenAI images.generate
const response = await openai.images.generate({
model: "gpt-image-1",
prompt,
image: [imageBuffer], // pass the user image to be applied
size: "1024x1024",
// you may add `background` or other params depending on SDK
});

// The SDK may return base64 or a URL. Adjust to your SDK version:
const imageData = response.data?.[0];
// If base64:
const b64 = imageData?.b64_json;
if (b64) {
const imgBuffer = Buffer.from(b64, "base64");
res.setHeader("Content-Type", "image/png");
return res.send(imgBuffer);
}

// Otherwise, if URL is returned:
const url = imageData?.url;
return res.status(200).json({ url });
} catch (error) {
console.error(error);
res.status(500).json({ error: "Mockup generation failed" });
}
});
}


Important: adapt to the OpenAI SDK version you use (some return b64_json, others return a url). If using streaming/remote, you may proxy the returned URL to your frontend.

/pages/api/printful-order.ts (proxy to Printful)
// pages/api/printful-order.ts
import type { NextApiRequest, NextApiResponse } from "next";
import fetch from "node-fetch";

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try {
const body = req.body; // expect validated order payload
const printfulApiKey = process.env.PRINTFUL_API_KEY;

// Build Printful Order structure
const order = {
recipient: body.recipient,
items: body.items, // make sure to validate these
// optional sync_product or external variants
};

const response = await fetch("https://api.printful.com/orders", {
method: "POST",
headers: {
Authorization: `Basic ${Buffer.from(`${printfulApiKey}:`).toString("base64")}`,
"Content-Type": "application/json",
},
body: JSON.stringify(order),
});

const data = await response.json();
res.status(response.status).json(data);
} catch (error) {
console.error(error);
res.status(500).json({ error: "Printful order failed" });
}
}


Printful requires product configuration (sync products, variant IDs). Typically you'll create a product on Printful dashboard that accepts a print file, then use product variant IDs when creating order items.

5 — Frontend snippets

Below are 3 essential React components. Use Tailwind and Framer Motion.

Install:

npm install framer-motion @headlessui/react openai
npm install -D tailwindcss postcss autoprefixer

Hero component (src/components/Hero.tsx)
import { motion } from "framer-motion";

export default function Hero() {
return (
<section className="min-h-screen flex items-center justify-center bg-black text-white relative overflow-hidden">
{/* red neon gradient animated background */}
<div className="absolute inset-0 bg-gradient-to-r from-red-700 via-black to-red-900 opacity-20 animate-[pulse_8s_infinite]"></div>

{/* floating t-shirt icons */}
<motion.img src="/logo.png" alt="Wear.Fun" className="w-28 z-10"
initial={{ y: -30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 1 }}
/>

<div className="z-20 text-center px-6">
<motion.h1 className="text-5xl md:text-7xl font-extrabold tracking-tight"
initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }}>
From Memes to Merch 🚀
</motion.h1>
<motion.p className="mt-4 text-lg md:text-2xl text-gray-200"
initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.3 }}>
Upload your favorite meme or crypto logo and turn it into a wearable joke — in seconds.
</motion.p>

<motion.div className="mt-8 flex gap-4 justify-center"
initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.4 }}>
<button className="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-full shadow-lg">
Upload Image
</button>
<button className="border border-red-600 text-red-600 px-6 py-3 rounded-full hover:bg-red-900/30">
Generate Meme
</button>
</motion.div>
</div>
</section>
);
}

MemeUploader component (core UX)
// src/components/MemeUploader.tsx
import React, { useState } from "react";
import { motion } from "framer-motion";

export default function MemeUploader() {
const [file, setFile] = useState<File | null>(null);
const [captions, setCaptions] = useState<string[]>([]);
const [mockupUrl, setMockupUrl] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const [styleHint, setStyleHint] = useState("");

async function handleGenerateCaption() {
if (!file) return;
setLoading(true);

// Basic image description — in prod use vision or let user add description
const imageDescription = file.name;

const res = await fetch("/api/generate-caption", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ imageDescription, styleHint }),
});
const data = await res.json();
setCaptions(data.captions || []);
setLoading(false);
}

async function handleGenerateMockup(caption?: string) {
if (!file) return;
setLoading(true

README.md

@@ -1,10 +1,13 @@
 ---
-title: Wear Fun
-emoji: 🏆
-colorFrom: pink
+title: Wear.Fun 🚀
+colorFrom: gray
 colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html

@@ -1,19 +1,161 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!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="/public/logo.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>

meme.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Meme Generator - Wear.Fun</title>
+    <link rel="icon" type="image/x-icon" href="/public/logo.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 class="py-12 px-6">
+        <div class="max-w-4xl mx-auto">
+            <h1 class="text-3xl md:text-4xl font-bold text-center mb-2">Meme Generator</h1>
+            <p class="text-gray-400 text-center mb-12">Turn your memes into wearable art</p>
+            
+            <div class="bg-gray-900 rounded-2xl p-6 md:p-8 border border-gray-800">
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                    <div>
+                        <h2 class="text-xl font-bold mb-4">Upload Your Image</h2>
+                        
+                        <div class="border-2 border-dashed border-gray-700 rounded-xl p-8 text-center mb-6 transition hover:border-red-500 cursor-pointer">
+                            <i data-feather="upload" class="w-12 h-12 mx-auto text-gray-500 mb-4"></i>
+                            <p class="mb-2">Drag & drop your image here</p>
+                            <p class="text-sm text-gray-500 mb-4">or</p>
+                            <button class="bg-red-600 hover:bg-red-700 px-6 py-2 rounded-lg font-medium">Browse Files</button>
+                            <input type="file" class="hidden" accept="image/*">
+                        </div>
+                        
+                        <div class="mb-6">
+                            <label class="block text-gray-400 mb-2">Style Hint (Optional)</label>
+                            <input type="text" placeholder="e.g., crypto meme, sarcastic" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-red-500">
+                        </div>
+                        
+                        <button class="w-full bg-red-600 hover:bg-red-700 text-white py-3 rounded-lg font-semibold transition">
+                            Generate Captions
+                        </button>
+                    </div>
+                    
+                    <div>
+                        <h2 class="text-xl font-bold mb-4">Generated Captions</h2>
+                        
+                        <div class="space-y-4">
+                            <div class="bg-gray-800 p-4 rounded-lg border border-gray-700 hover:border-red-500 transition">
+                                <p class="font-medium mb-3">This is a hilarious caption for your meme!</p>
+                                <div class="flex gap-2">
+                                    <button class="flex-1 bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm transition">Preview Mockup</button>
+                                    <button class="flex-1 bg-red-600 hover:bg-red-700 py-2 rounded-lg text-sm transition">Add to T-Shirt</button>
+                                </div>
+                            </div>
+                            
+                            <div class="bg-gray-800 p-4 rounded-lg border border-gray-700 hover:border-red-500 transition">
+                                <p class="font-medium mb-3">Another funny caption option</p>
+                                <div class="flex gap-2">
+                                    <button class="flex-1 bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm transition">Preview Mockup</button>
+                                    <button class="flex-1 bg-red-600 hover:bg-red-700 py-2 rounded-lg text-sm transition">Add to T-Shirt</button>
+                                </div>
+                            </div>
+                            
+                            <div class="bg-gray-800 p-4 rounded-lg border border-gray-700 hover:border-red-500 transition">
+                                <p class="font-medium mb-3">Third hilarious caption idea</p>
+                                <div class="flex gap-2">
+                                    <button class="flex-1 bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm transition">Preview Mockup</button>
+                                    <button class="flex-1 bg-red-600 hover:bg-red-700 py-2 rounded-lg text-sm transition">Add to T-Shirt</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="mt-12">
+                    <h2 class="text-xl font-bold mb-4">T-Shirt Preview</h2>
+                    <div class="bg-gray-800 rounded-xl p-8 flex items-center justify-center min-h-[400px] border border-gray-700">
+                        <div class="text-center">
+                            <i data-feather="t-shirt" class="w-24 h-24 mx-auto text-gray-600 mb-4"></i>
+                            <p class="text-gray-500">Your t-shirt mockup will appear here</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </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>
+</body>
+</html>

shop.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shop - Wear.Fun</title>
+    <link rel="icon" type="image/x-icon" href="/public/logo.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 class="py-12 px-6">
+        <div class="max-w-7xl mx-auto">
+            <h1 class="text-3xl md:text-4xl font-bold text-center mb-2">Shop Collection</h1>
+            <p class="text-gray-400 text-center mb-12">Wear your humor with pride</p>
+            
+            <div class="flex flex-wrap gap-4 mb-8">
+                <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg transition">All Products</button>
+                <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg transition">T-Shirts</button>
+                <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg transition">Accessories</button>
+                <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg transition">Hoodies</button>
+                <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg transition">Mugs</button>
+            </div>
+            
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-
+</body>
+</html>