teespace / index.html
arpansri's picture
Add 2 files
b499170 verified
Raw History Blame Contribute Delete
53.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teemind - AI-Powered Custom T-Shirts</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>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
scroll-behavior: smooth;
}
.gradient-bg {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.t-shirt-mockup {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE1LjUgMTVIMTlWMThIMTVWMTVIMTNWMTlIMjFWMTRDMjEgMTMuNDQ3NyAyMC41NTIzIDEzIDIwIDEzSDE1LjVWMTVNMjEgMTFWMTRDMjEgMTUuNjU0NCAxOS42NTQ0IDE3IDE4IDE3SDE1VjE5SDRWMTdIMlYxMkMxLjQ0NzcyIDEyIDEgMTEuNTUyMyAxIDExVjVDMSA0LjQ0NzcyIDEuNDQ3NzIgNCAyIDRIN1YySDE3VjRIMjBDMjAuNTUyMyA0IDIxIDQuNDQ3NzIgMjEgNVYxMU0xOCA1VjJIMTZWNUgxOE0xMiA1VjJIMTBWNVgxMk03IDVWMkg5VjVIN1oiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjwvc3ZnPg==');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.design-preview {
transition: all 0.3s ease;
}
.fade-in {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.slide-up {
animation: slideUp 0.5s ease-out;
}
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: #3b82f6;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.cart-count {
position: absolute;
top: -8px;
right: -8px;
background-color: #ef4444;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-sm sticky top-0 z-50">
<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="#" class="flex-shrink-0 flex items-center">
<span class="text-2xl font-bold text-blue-600">Teemind</span>
</a>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<a href="#" class="nav-link border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
<a href="#marketplace" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Marketplace</a>
<a href="#how-it-works" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">How It Works</a>
<a href="#designer" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Designer</a>
</div>
</div>
<div class="hidden sm:ml-6 sm:flex sm:items-center">
<button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<span class="sr-only">View notifications</span>
<i class="fas fa-bell h-6 w-6"></i>
</button>
<div class="ml-3 relative">
<div>
<button type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</button>
</div>
</div>
<div class="ml-4 relative">
<a href="#" class="relative text-gray-500 hover:text-gray-700">
<i class="fas fa-shopping-cart h-6 w-6"></i>
<span class="cart-count">3</span>
</a>
</div>
</div>
<div class="-mr-2 flex items-center sm:hidden">
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<i class="fas fa-bars h-6 w-6"></i>
</button>
</div>
</div>
</div>
<div class="sm:hidden hidden" id="mobile-menu">
<div class="pt-2 pb-3 space-y-1">
<a href="#" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
<a href="#marketplace" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Marketplace</a>
<a href="#how-it-works" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">How It Works</a>
<a href="#designer" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Designer</a>
</div>
<div class="pt-4 pb-3 border-t border-gray-200">
<div class="flex items-center px-4">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</div>
<div class="ml-3">
<div class="text-base font-medium text-gray-800">Tom Cook</div>
<div class="text-sm font-medium text-gray-500">tom@example.com</div>
</div>
<button class="ml-auto flex-shrink-0 bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<span class="sr-only">View notifications</span>
<i class="fas fa-bell h-6 w-6"></i>
</button>
</div>
<div class="mt-3 space-y-1">
<a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Your Profile</a>
<a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Settings</a>
<a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Sign out</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="gradient-bg">
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
<div class="text-center">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl slide-up">
<span class="block">Design Your</span>
<span class="block text-blue-600">Dream Tee</span>
</h1>
<p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl slide-up">
Create unique, AI-generated t-shirt designs with just a few words. No design skills needed!
</p>
<div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8 slide-up">
<div class="rounded-md shadow">
<a href="#designer" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10">
Start Designing
</a>
</div>
<div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
<a href="#marketplace" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
Browse Designs
</a>
</div>
</div>
</div>
</div>
</div>
<!-- How It Works Section -->
<div id="how-it-works" class="py-12 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Process</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
How It Works
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
Create your custom t-shirt in just a few simple steps
</p>
</div>
<div class="mt-10">
<div class="space-y-10 md:space-y-0 md:grid md:grid-cols-4 md:gap-x-8 md:gap-y-10">
<div class="relative fade-in" style="animation-delay: 0.1s;">
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
<span class="text-xl font-bold">1</span>
</div>
<div class="ml-16">
<h3 class="text-lg leading-6 font-medium text-gray-900">Describe Your Design</h3>
<p class="mt-2 text-base text-gray-500">
Enter a text prompt describing what you want on your t-shirt. Our AI will generate unique artwork based on your description.
</p>
</div>
</div>
<div class="relative fade-in" style="animation-delay: 0.3s;">
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
<span class="text-xl font-bold">2</span>
</div>
<div class="ml-16">
<h3 class="text-lg leading-6 font-medium text-gray-900">Customize Your Design</h3>
<p class="mt-2 text-base text-gray-500">
Adjust colors, position, and size of your design. Choose from different t-shirt styles and colors.
</p>
</div>
</div>
<div class="relative fade-in" style="animation-delay: 0.5s;">
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
<span class="text-xl font-bold">3</span>
</div>
<div class="ml-16">
<h3 class="text-lg leading-6 font-medium text-gray-900">Preview & Refine</h3>
<p class="mt-2 text-base text-gray-500">
See your design on a realistic t-shirt mockup. Make any final adjustments before ordering.
</p>
</div>
</div>
<div class="relative fade-in" style="animation-delay: 0.7s;">
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
<span class="text-xl font-bold">4</span>
</div>
<div class="ml-16">
<h3 class="text-lg leading-6 font-medium text-gray-900">Order Your Tee</h3>
<p class="mt-2 text-base text-gray-500">
Add to cart and checkout. Your custom t-shirt will be printed and shipped within 3-5 business days.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Featured Designs -->
<div class="py-12 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center mb-12">
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Featured</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Popular Designs
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
Check out some of our most popular AI-generated designs
</p>
</div>
<div class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
<div class="group fade-in">
<div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
<div class="t-shirt-mockup h-full w-full bg-white flex items-center justify-center">
<img src="https://source.unsplash.com/random/300x300/?abstract,art" alt="Abstract art design" class="design-preview w-3/4 h-3/4 object-contain group-hover:opacity-75">
</div>
</div>
<div class="mt-4 flex justify-between">
<div>
<h3 class="text-sm text-gray-700">Abstract Universe</h3>
<p class="mt-1 text-sm text-gray-500">AI-generated abstract art</p>
</div>
<p class="text-sm font-medium text-gray-900">$29.99</p>
</div>
<button class="mt-2 w-full bg-white border border-gray-300 rounded-md py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
Customize This Design
</button>
</div>
<div class="group fade-in" style="animation-delay: 0.2s;">
<div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
<div class="t-shirt-mockup h-full w-full bg-gray-100 flex items-center justify-center">
<img src="https://source.unsplash.com/random/300x300/?cat,cartoon" alt="Cartoon cat design" class="design-preview w-3/4 h-3/4 object-contain group-hover:opacity-75">
</div>
</div>
<div class="mt-4 flex justify-between">
<div>
<h3 class="text-sm text-gray-700">Cool Cat</h3>
<p class="mt-1 text-sm text-gray-500">Cartoon style</p>
</div>
<p class="text-sm font-medium text-gray-900">$24.99</p>
</div>
<button class="mt-2 w-full bg-white border border-gray-300 rounded-md py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
Customize This Design
</button>
</div>
<div class="group fade-in" style="animation-delay: 0.4s;">
<div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
<div class="t-shirt-mockup h-full w-full bg-black flex items-center justify-center">
<img src="https://source.unsplash.com/random/300x300/?space,galaxy" alt="Space galaxy design" class="design-preview w-3/4 h-3/4 object-contain group-hover:opacity-75">
</div>
</div>
<div class="mt-4 flex justify-between">
<div>
<h3 class="text-sm text-gray-700">Galaxy Explorer</h3>
<p class="mt-1 text-sm text-gray-500">Futuristic space art</p>
</div>
<p class="text-sm font-medium text-gray-900">$27.99</p>
</div>
<button class="mt-2 w-full bg-white border border-gray-300 rounded-md py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
Customize This Design
</button>
</div>
<div class="group fade-in" style="animation-delay: 0.6s;">
<div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
<div class="t-shirt-mockup h-full w-full bg-green-100 flex items-center justify-center">
<img src="https://source.unsplash.com/random/300x300/?nature,forest" alt="Nature forest design" class="design-preview w-3/4 h-3/4 object-contain group-hover:opacity-75">
</div>
</div>
<div class="mt-4 flex justify-between">
<div>
<h3 class="text-sm text-gray-700">Forest Dreams</h3>
<p class="mt-1 text-sm text-gray-500">Nature illustration</p>
</div>
<p class="text-sm font-medium text-gray-900">$25.99</p>
</div>
<button class="mt-2 w-full bg-white border border-gray-300 rounded-md py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
Customize This Design
</button>
</div>
</div>
<div class="mt-12 text-center">
<a href="#marketplace" 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 Designs
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
<!-- AI Designer Section -->
<div id="designer" class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center mb-12">
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Designer</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Create Your Custom Design
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
Use our AI designer to create a unique t-shirt in minutes
</p>
</div>
<div class="lg:grid lg:grid-cols-2 lg:gap-12">
<div class="mb-8 lg:mb-0">
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<div class="mb-6">
<label for="design-prompt" class="block text-sm font-medium text-gray-700 mb-2">Describe your design</label>
<textarea id="design-prompt" rows="3" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md p-3" placeholder="e.g. A futuristic city skyline at sunset, digital art style"></textarea>
<p class="mt-2 text-sm text-gray-500">The more descriptive you are, the better the results!</p>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">Style</label>
<div class="grid grid-cols-3 gap-3">
<button class="style-option border border-gray-300 rounded-md py-2 px-3 text-sm font-medium text-gray-700 hover:bg-gray-50">Cartoon</button>
<button class="style-option border border-gray-300 rounded-md py-2 px-3 text-sm font-medium text-gray-700 hover:bg-gray-50">Realistic</button>
<button class="style-option border border-gray-300 rounded-md py-2 px-3 text-sm font-medium text-gray-700 hover:bg-gray-50">Abstract</button>
<button class="style-option border border-gray-300 rounded-md py-2 px-3 text-sm font-medium text-gray-700 hover:bg-gray-50">Vintage</button>
<button class="style-option border border-gray-300 rounded-md py-2 px-3 text-sm font-medium text-gray-700 hover:bg-gray-50">Minimal</button>
<button class="style-option border border-gray-300 rounded-md py-2 px-3 text-sm font-medium text-gray-700 hover:bg-gray-50">Cyberpunk</button>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">T-Shirt Color</label>
<div class="flex space-x-2">
<button class="color-option w-8 h-8 rounded-full bg-white border-2 border-gray-300 focus:ring-2 focus:ring-blue-500" data-color="white"></button>
<button class="color-option w-8 h-8 rounded-full bg-black border-2 border-gray-300 focus:ring-2 focus:ring-blue-500" data-color="black"></button>
<button class="color-option w-8 h-8 rounded-full bg-gray-300 border-2 border-gray-300 focus:ring-2 focus:ring-blue-500" data-color="gray"></button>
<button class="color-option w-8 h-8 rounded-full bg-blue-500 border-2 border-gray-300 focus:ring-2 focus:ring-blue-500" data-color="blue"></button>
<button class="color-option w-8 h-8 rounded-full bg-red-500 border-2 border-gray-300 focus:ring-2 focus:ring-blue-500" data-color="red"></button>
<button class="color-option w-8 h-8 rounded-full bg-green-500 border-2 border-gray-300 focus:ring-2 focus:ring-blue-500" data-color="green"></button>
<button class="color-option w-8 h-8 rounded-full bg-yellow-300 border-2 border-gray-300 focus:ring-2 focus:ring-blue-500" data-color="yellow"></button>
<button class="color-option w-8 h-8 rounded-full bg-purple-500 border-2 border-gray-300 focus:ring-2 focus:ring-blue-500" data-color="purple"></button>
</div>
</div>
<div class="flex space-x-3">
<button id="generate-btn" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md">
Generate Design
</button>
<button class="flex-1 bg-white border border-gray-300 text-gray-700 font-medium py-2 px-4 rounded-md hover:bg-gray-50">
Random Prompt
</button>
</div>
</div>
</div>
<div>
<div class="bg-gray-50 p-6 rounded-lg shadow-sm h-full">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-gray-900">Design Preview</h3>
<div class="flex space-x-2">
<button class="p-1 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100">
<i class="fas fa-undo-alt"></i>
</button>
<button class="p-1 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100">
<i class="fas fa-redo-alt"></i>
</button>
</div>
</div>
<div id="preview-container" class="t-shirt-mockup h-96 w-full bg-white flex items-center justify-center mb-4">
<div id="default-preview" class="text-center p-8">
<i class="fas fa-tshirt text-5xl text-gray-300 mb-4"></i>
<p class="text-gray-500">Your design will appear here</p>
<p class="text-gray-400 text-sm mt-2">Describe your design and click "Generate"</p>
</div>
<img id="generated-design" src="" alt="Generated design" class="hidden design-preview w-3/4 h-3/4 object-contain">
</div>
<div class="grid grid-cols-2 gap-3">
<button class="bg-white border border-gray-300 text-gray-700 font-medium py-2 px-4 rounded-md hover:bg-gray-50">
<i class="fas fa-heart mr-2"></i> Save Design
</button>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md">
<i class="fas fa-shopping-cart mr-2"></i> Add to Cart
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Marketplace Section -->
<div id="marketplace" class="py-16 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center mb-12">
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Marketplace</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Browse Community Designs
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
Discover and purchase designs created by our community
</p>
</div>
<div class="mb-8 flex flex-wrap justify-between items-center">
<div class="w-full sm:w-auto mb-4 sm:mb-0">
<div class="relative">
<input type="text" placeholder="Search designs..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-md w-full sm:w-64 focus:ring-blue-500 focus:border-blue-500">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-search text-gray-400"></i>
</div>
</div>
</div>
<div class="w-full sm:w-auto flex space-x-2">
<select class="border border-gray-300 rounded-md px-3 py-2 bg-white text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
<option>All Categories</option>
<option>Art</option>
<option>Nature</option>
<option>Animals</option>
<option>Abstract</option>
<option>Pop Culture</option>
</select>
<select class="border border-gray-300 rounded-md px-3 py-2 bg-white text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
<option>Sort by: Popular</option>
<option>Newest</option>
<option>Price: Low to High</option>
<option>Price: High to Low</option>
<option>Top Rated</option>
</select>
</div>
</div>
<div class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
<div class="group">
<div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8 relative">
<div class="t-shirt-mockup h-full w-full bg-white flex items-center justify-center">
<img src="https://source.unsplash.com/random/300x300/?robot,future" alt="Robot future design" class="design-preview w-3/4 h-3/4 object-contain group-hover:opacity-75">
</div>
<div class="absolute top-2 right-2">
<button class="p-1 bg-white rounded-full shadow-md text-gray-400 hover:text-red-500">
<i class="far fa-heart"></i>
</button>
</div>
</div>
<div class="mt-4 flex justify-between">
<div>
<h3 class="text-sm text-gray-700">Future Bot</h3>
<div class="flex mt-1">
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<span class="text-xs text-gray-500 ml-1">(42)</span>
</div>
</div>
<p class="text-sm font-medium text-gray-900">$29.99</p>
</div>
<button class="mt-2 w-full bg-white border border-gray-300 rounded-md py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
Add to Cart
</button>
</div>
<div class="group">
<div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8 relative">
<div class="t-shirt-mockup h-full w-full bg-black flex items-center justify-center">
<img src="https://source.unsplash.com/random/300x300/?moon,night" alt="Moon night design" class="design-preview w-3/4 h-3/4 object-contain group-hover:opacity-75">
</div>
<div class="absolute top-2 right-2">
<button class="p-1 bg-white rounded-full shadow-md text-gray-400 hover:text-red-500">
<i class="far fa-heart"></i>
</button>
</div>
</div>
<div class="mt-4 flex justify-between">
<div>
<h3 class="text-sm text-gray-700">Lunar Night</h3>
<div class="flex mt-1">
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star-half-alt text-yellow-400 text-xs"></i>
<span class="text-xs text-gray-500 ml-1">(36)</span>
</div>
</div>
<p class="text-sm font-medium text-gray-900">$26.99</p>
</div>
<button class="mt-2 w-full bg-white border border-gray-300 rounded-md py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
Add to Cart
</button>
</div>
<div class="group">
<div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8 relative">
<div class="t-shirt-mockup h-full w-full bg-blue-100 flex items-center justify-center">
<img src="https://source.unsplash.com/random/300x300/?ocean,wave" alt="Ocean wave design" class="design-preview w-3/4 h-3/4 object-contain group-hover:opacity-75">
</div>
<div class="absolute top-2 right-2">
<button class="p-1 bg-white rounded-full shadow-md text-gray-400 hover:text-red-500">
<i class="far fa-heart"></i>
</button>
</div>
</div>
<div class="mt-4 flex justify-between">
<div>
<h3 class="text-sm text-gray-700">Ocean Wave</h3>
<div class="flex mt-1">
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="far fa-star text-yellow-400 text-xs"></i>
<span class="text-xs text-gray-500 ml-1">(28)</span>
</div>
</div>
<p class="text-sm font-medium text-gray-900">$24.99</p>
</div>
<button class="mt-2 w-full bg-white border border-gray-300 rounded-md py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
Add to Cart
</button>
</div>
<div class="group">
<div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8 relative">
<div class="t-shirt-mockup h-full w-full bg-red-100 flex items-center justify-center">
<img src="https://source.unsplash.com/random/300x300/?dragon,fantasy" alt="Dragon fantasy design" class="design-preview w-3/4 h-3/4 object-contain group-hover:opacity-75">
</div>
<div class="absolute top-2 right-2">
<button class="p-1 bg-white rounded-full shadow-md text-gray-400 hover:text-red-500">
<i class="far fa-heart"></i>
</button>
</div>
</div>
<div class="mt-4 flex justify-between">
<div>
<h3 class="text-sm text-gray-700">Mythic Dragon</h3>
<div class="flex mt-1">
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<span class="text-xs text-gray-500 ml-1">(51)</span>
</div>
</div>
<p class="text-sm font-medium text-gray-900">$31.99</p>
</div>
<button class="mt-2 w-full bg-white border border-gray-300 rounded-md py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
Add to Cart
</button>
</div>
</div>
<div class="mt-12 text-center">
<button 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">
Load More Designs
<i class="fas fa-sync-alt ml-2"></i>
</button>
</div>
</div>
</div>
<!-- Testimonials -->
<div class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center mb-12">
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Testimonials</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
What Our Customers Say
</p>
</div>
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</div>
<div class="ml-4">
<h4 class="text-sm font-medium text-gray-900">Sarah Johnson</h4>
<div class="flex mt-1">
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
</div>
</div>
</div>
<p class="text-gray-600 text-sm">
"I created a custom t-shirt for my husband's birthday with an AI-generated design of our favorite vacation spot. The quality is amazing and he absolutely loved it!"
</p>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</div>
<div class="ml-4">
<h4 class="text-sm font-medium text-gray-900">Michael Chen</h4>
<div class="flex mt-1">
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
</div>
</div>
</div>
<p class="text-gray-600 text-sm">
"As someone with zero design skills, this platform is a game-changer. I was able to create professional-looking merch for my startup in minutes."
</p>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</div>
<div class="ml-4">
<h4 class="text-sm font-medium text-gray-900">David Rodriguez</h4>
<div class="flex mt-1">
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star text-yellow-400 text-xs"></i>
<i class="fas fa-star-half-alt text-yellow-400 text-xs"></i>
</div>
</div>
</div>
<p class="text-gray-600 text-sm">
"The AI designer is incredibly powerful. I've sold over 50 of my custom designs through their marketplace. It's become a nice side income!"
</p>
</div>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="bg-blue-600">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
<span class="block">Ready to create your custom tee?</span>
<span class="block text-blue-200">Start designing today.</span>
</h2>
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="inline-flex rounded-md shadow">
<a href="#designer" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50">
Start Designing
</a>
</div>
<div class="ml-3 inline-flex rounded-md shadow">
<a href="#marketplace" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-500 bg-opacity-60 hover:bg-opacity-70">
Browse Marketplace
</a>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-800">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div>
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Shop</h3>
<ul class="mt-4 space-y-4">
<li><a href="#" class="text-base text-gray-400 hover:text-white">All Designs</a></li>
<li><a href="#" class="text-base text-gray-400 hover:text-white">New Arrivals</a></li>
<li><a href="#" class="text-base text-gray-400 hover:text-white">Best Sellers</a></li>
<li><a href="#" class="text-base text-gray-400 hover:text-white">On Sale</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Company</h3>
<ul class="mt-4 space-y-4">
<li><a href="#" class="text-base text-gray-400 hover:text-white">About Us</a></li>
<li><a href="#" class="text-base text-gray-400 hover:text-white">Careers</a></li>
<li><a href="#" class="text-base text-gray-400 hover:text-white">Press</a></li>
<li><a href="#" class="text-base text-gray-400 hover:text-white">Blog</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Support</h3>
<ul class="mt-4 space-y-4">
<li><a href="#" class="text-base text-gray-400 hover:text-white">Contact Us</a></li>
<li><a href="#" class="text-base text-gray-400 hover:text-white">FAQs</a></li>
<li><a href="#" class="text-base text-gray-400 hover:text-white">Shipping</a></li>
<li><a href="#" class="text-base text-gray-400 hover:text-white">Returns</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Connect</h3>
<div class="mt-4 flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-facebook-f"></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-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-pinterest"></i>
</a>
</div>
<div class="mt-6">
<h4 class="text-sm font-medium text-gray-300">Subscribe to our newsletter</h4>
<div class="mt-2 flex">
<input type="email" placeholder="Your email" class="px-3 py-2 border border-gray-600 bg-gray-700 text-white text-sm rounded-l-md focus:outline-none focus:ring-1 focus:ring-blue-500 w-full">
<button class="px-3 py-2 bg-blue-600 text-white text-sm font-medium rounded-r-md hover:bg-blue-700">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
<div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between">
<p class="text-base text-gray-400">
&copy; 2023 Teemind, Inc. All rights reserved.
</p>
<div class="mt-4 md:mt-0 flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
<a href="#" class="text-gray-400 hover:text-white text-sm">Cookie Policy</a>
</div>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Color selection for t-shirt
document.querySelectorAll('.color-option').forEach(button => {
button.addEventListener('click', function() {
const color = this.getAttribute('data-color');
const previewContainer = document.getElementById('preview-container');
// Remove all color classes
previewContainer.classList.remove('bg-white', 'bg-black', 'bg-gray-300', 'bg-blue-500', 'bg-red-500', 'bg-green-500', 'bg-yellow-300', 'bg-purple-500');
// Add selected color class
previewContainer.classList.add(`bg-${color}`);
// Update active state
document.querySelectorAll('.color-option').forEach(btn => {
btn.classList.remove('ring-2', 'ring-blue-500');
});
this.classList.add('ring-2', 'ring-blue-500');
});
});
// Style selection
document.querySelectorAll('.style-option').forEach(button => {
button.addEventListener('click', function() {
document.querySelectorAll('.style-option').forEach(btn => {
btn.classList.remove('bg-blue-100', 'border-blue-500', 'text-blue-700');
});
this.classList.add('bg-blue-100', 'border-blue-500', 'text-blue-700');
});
});
// Generate design button
document.getElementById('generate-btn').addEventListener('click', function() {
const prompt = document.getElementById('design-prompt').value;
const defaultPreview = document.getElementById('default-preview');
const generatedDesign = document.getElementById('generated-design');
if (prompt.trim() === '') {
alert('Please describe your design first!');
return;
}
// Show loading state
this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Generating...';
this.disabled = true;
// Simulate API call with timeout
setTimeout(() => {
// Hide default and show generated design
defaultPreview.classList.add('hidden');
generatedDesign.classList.remove('hidden');
// Set a random image (in a real app, this would be the AI-generated image)
generatedDesign.src = `https://source.unsplash.com/random/600x600/?${encodeURIComponent(prompt)}`;
// Reset button
this.innerHTML = 'Generate Design';
this.disabled = false;
// Add fade-in effect
generatedDesign.classList.add('fade-in');
}, 1500);
});
// 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) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
});
});
</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=arpansri/teespace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>