| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>OOTD | AI-Powered Fashion</title> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| 'soft-mint': '#10b981', |
| 'gentle-lavender': '#8b5cf6', |
| 'warm-coral': '#f97316', |
| 'charcoal': '#1e293b', |
| 'medium-gray': '#475569', |
| 'cool-gray-200': '#e2e8f0', |
| 'cool-gray-300': '#cbd5e1', |
| 'cool-gray-400': '#94a3b8', |
| }, |
| fontFamily: { |
| 'inter': ['Inter', 'sans-serif'] |
| } |
| } |
| } |
| } |
| </script> |
| <style type="text/css"> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; |
| } |
| body { |
| background-color: #fefefe; |
| color: #475569; |
| overflow-x: hidden; |
| } |
| .animate-in { |
| animation: fadeInUp 0.3s ease-out forwards; |
| opacity: 0; |
| } |
| .slide-in { |
| animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; |
| transform: translateX(30px); |
| opacity: 0; |
| } |
| .stagger-delay-50:nth-child(1) { animation-delay: 0.1s; } |
| .stagger-delay-50:nth-child(2) { animation-delay: 0.2s; } |
| .stagger-delay-50:nth-child(3) { animation-delay: 0.3s; } |
| .stagger-delay-50:nth-child(4) { animation-delay: 0.4s; } |
| .stagger-delay-50:nth-child(5) { animation-delay: 0.5s; } |
| .hero-gradient { |
| background: linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%); |
| } |
| .card-gradient { |
| background: linear-gradient(to bottom right, #ffffff 0%, #f1f5f9 100%); |
| } |
| .button-gradient { |
| background: linear-gradient(90deg, #ecfdf5 0%, #d1fae5 100%); |
| } |
| .hover-scale { |
| transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; |
| } |
| .hover-scale:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 16px rgba(0,0,0,0.08); |
| } |
| .zoom-hover { |
| transition: transform 0.3s ease-out; |
| } |
| .zoom-hover:hover { |
| transform: scale(1.03); |
| } |
| .underlined-link { |
| position: relative; |
| text-decoration: none; |
| } |
| .underlined-link:after { |
| content: ''; |
| position: absolute; |
| bottom: -2px; |
| left: 50%; |
| width: 0; |
| height: 2px; |
| background: #10b981; |
| transition: width 0.3s ease; |
| transform: translateX(-50%); |
| } |
| .underlined-link:hover:after { |
| width: 100%; |
| } |
| .product-card { |
| overflow: hidden; |
| border-radius: 16px; |
| } |
| .design-canvas { |
| background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSI4IiBoZWlnaHQ9IjgiIGZpbGw9IiNmOGZhZmMiLz48cGF0aCBkPSJNMCAwTDggOFpNOCAwTDAgOFoiIHN0cm9rZS13aWR0aD0iMC41IiBzdHJva2U9IiNlMmU4ZjAiLz48L3N2Zz4='); |
| height: 400px; |
| border-radius: 16px; |
| position: relative; |
| } |
| .ai-badge { |
| animation: pulse 2s infinite; |
| } |
| @keyframes fadeInUp { |
| from { |
| opacity: 0; |
| transform: translateY(10px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| @keyframes slideIn { |
| from { |
| opacity: 0; |
| transform: translateX(30px); |
| } |
| to { |
| opacity: 1; |
| transform: translateX(0); |
| } |
| } |
| @keyframes pulse { |
| 0% { |
| box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.5); |
| } |
| 70% { |
| box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); |
| } |
| 100% { |
| box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); |
| } |
| } |
| .dash-loader { |
| border: 2px dashed #94a3b8; |
| border-radius: 16px; |
| animation: spin 15s linear infinite; |
| } |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| .feature-card:hover .feature-icon { |
| transform: scale(1.1); |
| background: linear-gradient(135deg, #ede9fe 0%, #dbeafe 100%); |
| } |
| @media (max-width: 768px) { |
| .hero-content { |
| padding: 2rem 1.5rem; |
| } |
| .mobile-menu { |
| display: block; |
| } |
| .desktop-menu { |
| display: none; |
| } |
| } |
| .fade-in { |
| animation: fadeIn 0.5s ease-in forwards; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| </style> |
| </head> |
| <body class="bg-white"> |
| |
| <header class="sticky top-0 z-50 bg-white shadow-sm shadow-black/5 backdrop-blur-sm"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between items-center h-16"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <div class="bg-gradient-to-r from-gentle-lavender to-soft-mint w-8 h-8 rounded-lg"></div> |
| <span class="ml-2 text-charcoal text-xl font-semibold">OOTD</span> |
| </div> |
| <nav class="hidden md:block desktop-menu ml-10"> |
| <div class="flex space-x-8"> |
| <a href="#" class="text-charcoal underlined-link px-1 py-2 text-sm font-medium">Discover</a> |
| <a href="#" class="text-medium-gray hover:text-charcoal underlined-link px-1 py-2 text-sm font-medium">AI Studio</a> |
| <a href="#" class="text-medium-gray hover:text-charcoal underlined-link px-1 py-2 text-sm font-medium">Shop</a> |
| <a href="#" class="text-medium-gray hover:text-charcoal underlined-link px-1 py-2 text-sm font-medium">Collections</a> |
| </div> |
| </nav> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="hidden md:block relative rounded-md"> |
| <input type="text" name="search" id="search" class="bg-cool-gray-200/50 focus:ring-2 focus:ring-soft-mint focus:bg-white py-2 px-4 block w-64 rounded-md text-sm border border-cool-gray-300" placeholder="Search for styles..."> |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3"> |
| <i class="fas fa-search text-cool-gray-400"></i> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <button class="p-2 rounded-full text-charcoal hover:bg-cool-gray-200/50"> |
| <i class="fas fa-shopping-bag"></i> |
| </button> |
| <button class="ml-2 p-2 rounded-full text-charcoal hover:bg-cool-gray-200/50"> |
| <i class="fas fa-user"></i> |
| </button> |
| </div> |
| <button class="md:hidden mobile-menu text-charcoal"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="hero-gradient rounded-b-3xl"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 hero-content md:pr-12"> |
| <h1 class="text-4xl md:text-5xl font-semibold text-charcoal tracking-tight leading-tight animate-in"> |
| AI-Powered Personal Style <br> |
| <span class="text-gentle-lavender">Designed Just For You</span> |
| </h1> |
| <p class="mt-6 text-medium-gray text-lg max-w-2xl animate-in" style="animation-delay: 0.15s;"> |
| Our AI creates unique clothing designs based on your preferences. Discover custom outfits tailored to your lifestyle. |
| </p> |
| <div class="mt-8 flex flex-wrap gap-4 stagger-delay-50"> |
| <button class="button-gradient hover-scale px-8 py-3 rounded-lg font-medium text-charcoal shadow-sm transition-all animate-in"> |
| Create Your Style |
| <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| <button class="bg-white hover:bg-cool-gray-100 px-6 py-3 rounded-lg font-medium border border-cool-gray-300 text-charcoal shadow-sm transition-all animate-in" style="animation-delay: 0.25s"> |
| <i class="fas fa-play-circle mr-2 text-soft-mint"></i> |
| How It Works |
| </button> |
| </div> |
| <div class="mt-10 flex items-center animate-in" style="animation-delay: 0.35s"> |
| <div class="flex -space-x-2"> |
| <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="User"> |
| <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="User"> |
| <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1998&q=80" alt="User"> |
| </div> |
| <p class="ml-4 text-medium-gray text-sm"> |
| <span class="text-charcoal font-medium">1,200+</span> designs created today |
| </p> |
| </div> |
| </div> |
| <div class="md:w-1/2 mt-12 md:mt-0 relative"> |
| <div class="relative"> |
| <div class="card-gradient hover-scale border border-cool-gray-300 rounded-2xl p-4 shadow-sm"> |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-80 md:h-96 overflow-hidden relative dash-loader"> |
| |
| </div> |
| </div> |
| <div class="absolute -top-3 -right-3 bg-gradient-to-r from-warm-coral to-soft-mint text-white font-semibold px-4 py-1 rounded-lg ai-badge"> |
| AI Generated |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-cool-gray-200/30"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center max-w-3xl mx-auto slide-in"> |
| <h2 class="text-3xl md:text-4xl font-semibold text-charcoal">AI Design Studio</h2> |
| <p class="mt-4 text-medium-gray"> |
| Our generative AI creates unique clothing designs based on your personal preferences, body type, and current trends. |
| </p> |
| </div> |
|
|
| <div class="mt-16 grid grid-cols-1 md:grid-cols-2 gap-12"> |
| <div class="card-gradient p-6 rounded-2xl shadow-sm flex flex-col"> |
| <h3 class="text-xl font-semibold text-charcoal">Create Your Design</h3> |
| <div class="mt-4 space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-charcoal mb-2">Style Prompt</label> |
| <textarea class="bg-cool-gray-200/50 border border-cool-gray-300 rounded-lg w-full px-4 py-3 text-medium-gray focus:outline-none focus:ring-2 focus:ring-soft-mint" placeholder="Describe the outfit you want to create..."></textarea> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-charcoal mb-2">Style Influences</label> |
| <div class="flex flex-wrap gap-2"> |
| <span class="bg-cool-gray-200/50 text-charcoal px-3 py-1 rounded-lg text-sm flex items-center"> |
| Minimalist |
| <button class="ml-1 text-cool-gray-400 hover:text-medium-gray"> |
| <i class="fas fa-times"></i> |
| </button> |
| </span> |
| <span class="bg-cool-gray-200/50 text-charcoal px-3 py-1 rounded-lg text-sm flex items-center"> |
| Streetwear |
| <button class="ml-1 text-cool-gray-400 hover:text-medium-gray"> |
| <i class="fas fa-times"></i> |
| </button> |
| </span> |
| <button class="text-gentle-lavender text-sm flex items-center"> |
| <i class="fas fa-plus mr-1"></i> |
| Add influence |
| </button> |
| </div> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-charcoal mb-2">Color Palette</label> |
| <div class="flex space-x-2"> |
| <div class="w-8 h-8 rounded-full bg-soft-mint border-2 border-white shadow"></div> |
| <div class="w-8 h-8 rounded-full bg-white border-2 border-cool-gray-300 shadow"></div> |
| <div class="w-8 h-8 rounded-full bg-gentle-lavender border-2 border-white shadow"></div> |
| <div class="w-8 h-8 rounded-full bg-charcoal border-2 border-white shadow"></div> |
| <button class="text-gentle-lavender text-sm flex items-center"> |
| <i class="fas fa-plus mr-1"></i> |
| </button> |
| </div> |
| </div> |
| <div class="mt-8"> |
| <button class="button-gradient w-full py-3 rounded-lg font-medium text-charcoal shadow-sm transition-all flex items-center justify-center"> |
| <i class="fas fa-magic mr-2"></i> |
| Generate Design |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="design-canvas p-2 relative"> |
| <div class="bg-white w-full h-full rounded-xl flex items-center justify-center overflow-hidden"> |
| <div class="text-center p-8"> |
| <div class="bg-cool-gray-200/80 rounded-full w-16 h-16 flex items-center justify-center mx-auto"> |
| <i class="fas fa-tshirt text-3xl text-gentle-lavender"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-charcoal mt-4">Your Design Preview</h3> |
| <p class="mt-2 text-medium-gray max-w-xs mx-auto"> |
| Create your first design or choose from trending templates below |
| </p> |
| <div class="mt-6"> |
| <button class="bg-cool-gray-200/50 hover:bg-cool-gray-200 text-charcoal px-4 py-2 rounded-lg"> |
| Browse Templates |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex flex-col md:flex-row md:items-center justify-between gap-4"> |
| <h2 class="text-3xl md:text-4xl font-semibold text-charcoal">Trending Designs</h2> |
| <div class="flex gap-3"> |
| <button class="bg-cool-gray-200/50 hover:bg-cool-gray-200 text-medium-gray px-4 py-2 rounded-lg"> |
| <i class="fas fa-filter mr-2"></i> |
| Filters |
| </button> |
| <button class="bg-soft-mint hover:bg-teal-500 text-white px-4 py-2 rounded-lg"> |
| View Collection |
| </button> |
| </div> |
| </div> |
|
|
| <div class="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> |
| |
| <div class="product-card card-gradient rounded-2xl shadow-sm overflow-hidden hover-scale transition-all duration-300"> |
| <div class="h-56 bg-gradient-to-r from-soft-mint to-teal-300 flex items-center justify-center zoom-hover"> |
| <div class="bg-white rounded-full w-24 h-24 flex items-center justify-center shadow-lg"> |
| <i class="fas fa-tshirt text-3xl text-soft-mint"></i> |
| </div> |
| </div> |
| <div class="p-5"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h3 class="text-lg font-medium text-charcoal">Neo Minimalist Tee</h3> |
| <div class="flex items-center mt-1"> |
| <div class="flex"> |
| <div class="w-4 h-4 rounded-full bg-soft-mint border border-white"></div> |
| <div class="w-4 h-4 rounded-full bg-charcoal border border-white -ml-2"></div> |
| </div> |
| <span class="text-sm text-medium-gray ml-2">2 colors</span> |
| </div> |
| </div> |
| <button class="text-medium-gray hover:text-charcoal"> |
| <i class="far fa-heart"></i> |
| </button> |
| </div> |
| <div class="flex items-center justify-between mt-4"> |
| <span class="text-charcoal font-semibold">$59</span> |
| <button class="bg-cool-gray-200/50 hover:bg-cool-gray-200 text-charcoal text-sm px-3 py-1.5 rounded-lg"> |
| Add to Bag |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="product-card card-gradient rounded-2xl shadow-sm overflow-hidden hover-scale transition-all duration-300"> |
| <div class="h-56 bg-gradient-to-r from-gentle-lavender to-violet-300 flex items-center justify-center zoom-hover"> |
| <div class="bg-white rounded-full w-24 h-24 flex items-center justify-center shadow-lg"> |
| <i class="fas fa-wind text-3xl text-gentle-lavender"></i> |
| </div> |
| </div> |
| <div class="p-5"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h3 class="text-lg font-medium text-charcoal">Aeroweave Hoodie</h3> |
| <div class="flex items-center mt-1"> |
| <div class="flex"> |
| <div class="w-4 h-4 rounded-full bg-white border border-cool-gray-300"></div> |
| <div class="w-4 h-4 rounded-full bg-warm-coral border border-white -ml-2"></div> |
| <div class="w-4 h-4 rounded-full bg-charcoal border border-white -ml-2"></div> |
| </div> |
| <span class="text-sm text-medium-gray ml-2">3 colors</span> |
| </div> |
| </div> |
| <button class="text-medium-gray hover:text-charcoal"> |
| <i class="fas fa-heart text-warm-coral"></i> |
| </button> |
| </div> |
| <div class="flex items-center justify-between mt-4"> |
| <span class="text-charcoal font-semibold">$89</span> |
| <button class="bg-cool-gray-200/50 hover:bg-cool-gray-200 text-charcoal text-sm px-3 py-1.5 rounded-lg"> |
| Add to Bag |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="product-card card-gradient rounded-2xl shadow-sm overflow-hidden hover-scale transition-all duration-300"> |
| <div class="h-56 bg-gradient-to-r from-warm-coral to-orange-300 flex items-center justify-center zoom-hover"> |
| <div class="bg-white rounded-full w-24 h-24 flex items-center justify-center shadow-lg"> |
| <i class="fas fa-hat-cowboy text-3xl text-warm-coral"></i> |
| </div> |
| </div> |
| <div class="p-5"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h3 class="text-lg font-medium text-charcoal">Desert Nomad Vest</h3> |
| <div class="flex items-center mt-1"> |
| <div class="flex"> |
| <div class="w-4 h-4 rounded-full bg-warm-coral border border-white"></div> |
| <div class="w-4 h-4 rounded-full bg-soft-mint border border-white -ml-2"></div> |
| </div> |
| <span class="text-sm text-medium-gray ml-2">2 colors</span> |
| </div> |
| </div> |
| <button class="text-medium-gray hover:text-charcoal"> |
| <i class="far fa-heart"></i> |
| </button> |
| </div> |
| <div class="flex items-center justify-between mt-4"> |
| <span class="text-charcoal font-semibold">$75</span> |
| <button class="bg-cool-gray-200/50 hover:bg-cool-gray-200 text-charcoal text-sm px-3 py-1.5 rounded-lg"> |
| Add to Bag |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="product-card card-gradient rounded-2xl shadow-sm overflow-hidden hover-scale transition-all duration-300"> |
| <div class="h-56 bg-gradient-to-r from-cyan-200 to-blue-200 flex items-center justify-center zoom-hover"> |
| <div class="bg-white rounded-full w-24 h-24 flex items-center justify-center shadow-lg"> |
| <i class="fas fa-socks text-3xl text-soft-mint"></i> |
| </div> |
| </div> |
| <div class="p-5"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h3 class="text-lg font-medium text-charcoal">Tech Knit Socks</h3> |
| <div class="flex items-center mt-1"> |
| <div class="flex"> |
| <div class="w-4 h-4 rounded-full bg-blue-400 border border-white"></div> |
| <div class="w-4 h-4 rounded-full bg-charcoal border border-white -ml-2"></div> |
| <div class="w-4 h-4 rounded-full bg-white border border-cool-gray-300 -ml-2"></div> |
| <div class="w-4 h-4 rounded-full bg-warm-coral border border-white -ml-2"></div> |
| </div> |
| <span class="text-sm text-medium-gray ml-2">4 colors</span> |
| </div> |
| </div> |
| <button class="text-medium-gray hover:text-charcoal"> |
| <i class="fas fa-heart text-warm-coral"></i> |
| </button> |
| </div> |
| <div class="flex items-center justify-between mt-4"> |
| <span class="text-charcoal font-semibold">$25</span> |
| <button class="bg-cool-gray-200/50 hover:bg-cool-gray-200 text-charcoal text-sm px-3 py-1.5 rounded-lg"> |
| Add to Bag |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center max-w-3xl mx-auto"> |
| <h2 class="text-3xl md:text-4xl font-semibold text-charcoal">Why Choose OOTD</h2> |
| <p class="mt-4 text-medium-gray"> |
| The future of fashion is personalized, sustainable, and designed just for you |
| </p> |
| </div> |
|
|
| <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="feature-card card-gradient p-6 rounded-2xl shadow-sm transition-all duration-300"> |
| <div class="feature-icon w-16 h-16 rounded-full bg-cool-gray-200/50 flex items-center justify-center transition-all duration-300"> |
| <i class="fas fa-brain text-3xl text-gentle-lavender"></i> |
| </div> |
| <h3 class="mt-4 text-xl font-semibold text-charcoal">AI-Powered Personalization</h3> |
| <p class="mt-2 text-medium-gray"> |
| Our algorithms create designs uniquely tailored to your body type, preferences, and lifestyle. |
| </p> |
| </div> |
| |
| <div class="feature-card card-gradient p-6 rounded-2xl shadow-sm transition-all duration-300"> |
| <div class="feature-icon w-16 h-16 rounded-full bg-cool-gray-200/50 flex items-center justify-center transition-all duration-300"> |
| <i class="fas fa-leaf text-3xl text-soft-mint"></i> |
| </div> |
| <h3 class="mt-4 text-xl font-semibold text-charcoal">Sustainable Production</h3> |
| <p class="mt-2 text-medium-gray"> |
| Items are made on-demand with eco-friendly materials to reduce waste and carbon footprint. |
| </p> |
| </div> |
| |
| <div class="feature-card card-gradient p-6 rounded-2xl shadow-sm transition-all duration-300"> |
| <div class="feature-icon w-16 h-16 rounded-full bg-cool-gray-200/50 flex items-center justify-center transition-all duration-300"> |
| <i class="fas fa-gem text-3xl text-warm-coral"></i> |
| </div> |
| <h3 class="mt-4 text-xl font-semibold text-charcoal">Blockchain Authenticity</h3> |
| <p class="mt-2 text-medium-gray"> |
| Each design is registered on the blockchain, ensuring authenticity and enabling digital ownership. |
| </p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-white py-12 border-t border-cool-gray-300"> |
| <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> |
| <div class="flex items-center"> |
| <div class="bg-gradient-to-r from-gentle-lavender to-soft-mint w-8 h-8 rounded-lg"></div> |
| <span class="ml-2 text-charcoal text-xl font-semibold">OOTD</span> |
| </div> |
| <p class="mt-4 text-medium-gray max-w-xs"> |
| Where artificial intelligence meets fashion design to create your perfect outfits. |
| </p> |
| <div class="mt-6 flex space-x-4"> |
| <a href="#" class="text-cool-gray-400 hover:text-gentle-lavender"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-cool-gray-400 hover:text-gentle-lavender"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="text-cool-gray-400 hover:text-gentle-lavender"> |
| <i class="fab fa-tiktok"></i> |
| </a> |
| <a href="#" class="text-cool-gray-400 hover:text-gentle-lavender"> |
| <i class="fab fa-discord"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-sm font-semibold text-charcoal uppercase tracking-wider">Company</h3> |
| <ul class="mt-4 space-y-2"> |
| <li><a href="#" class="text-medium-gray hover:text-charcoal underlined-link">About Us</a></li> |
| <li><a href="#" class="text-medium-gray hover:text-charcoal underlined-link">Careers</a></li> |
| <li><a href="#" class="text-medium-gray hover:text-charcoal underlined-link">Press</a></li> |
| <li><a href="#" class="text-medium-gray hover:text-charcoal underlined-link">Contact</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-sm font-semibold text-charcoal uppercase tracking-wider">Resources</h3> |
| <ul class="mt-4 space-y-2"> |
| <li><a href="#" class="text-medium-gray hover:text-charcoal underlined-link">Help Center</a></li> |
| <li><a href="#" class="text-medium-gray hover:text-charcoal underlined-link">Style Guide</a></li> |
| <li><a href="#" class="text-medium-gray hover:text-charcoal underlined-link">Blog</a></li> |
| <li><a href="#" class="text-medium-gray hover:text-charcoal underlined-link">Sustainability</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-sm font-semibold text-charcoal uppercase tracking-wider">Newsletter</h3> |
| <p class="mt-4 text-medium-gray">Be the first to know about new features and collections</p> |
| <form class="mt-4"> |
| <div class="flex"> |
| <input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l-lg border border-cool-gray-300 focus:outline-none focus:ring-2 focus:ring-soft-mint"> |
| <button class="bg-soft-mint hover:bg-teal-500 text-white px-4 rounded-r-lg"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
| |
| <div class="mt-12 pt-8 border-t border-cool-gray-300 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-medium-gray text-sm">© 2023 OOTD. All rights reserved.</p> |
| <div class="flex space-x-6 mt-4 md:mt-0"> |
| <a href="#" class="text-medium-gray hover:text-charcoal text-sm underlined-link">Privacy Policy</a> |
| <a href="#" class="text-medium-gray hover:text-charcoal text-sm underlined-link">Terms of Service</a> |
| <a href="#" class="text-medium-gray hover:text-charcoal text-sm underlined-link">Accessibility</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const animElements = document.querySelectorAll('.animate-in, .slide-in'); |
| animElements.forEach(el => { |
| el.style.opacity = '1'; |
| el.style.transform = 'translateY(0)'; |
| }); |
| |
| |
| const products = document.querySelectorAll('.product-card'); |
| products.forEach(product => { |
| product.addEventListener('mouseenter', () => { |
| product.style.transform = 'translateY(-8px)'; |
| }); |
| product.addEventListener('mouseleave', () => { |
| product.style.transform = 'translateY(0)'; |
| }); |
| }); |
| }); |
| </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=Kus669/ootd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
