Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NeoChic - AI Powered Fashion</title> | |
| <!-- Font Awesome for icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Three.js --> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script> | |
| <style> | |
| :root { | |
| --primary: #000000; | |
| --secondary: #ffffff; | |
| --accent: #ff4d6d; | |
| --text: #2d2d2d; | |
| --light-gray: #f5f5f5; | |
| --gray: #e0e0e0; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| color: var(--text); | |
| background-color: var(--secondary); | |
| overflow-x: hidden; | |
| } | |
| /* Header styles */ | |
| header { | |
| background-color: var(--secondary); | |
| padding: 1.5rem 5%; | |
| position: fixed; | |
| width: 100%; | |
| z-index: 1000; | |
| box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| text-decoration: none; | |
| } | |
| .logo span { | |
| color: var(--accent); | |
| } | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| gap: 2rem; | |
| } | |
| nav ul li a { | |
| text-decoration: none; | |
| color: var(--text); | |
| font-weight: 500; | |
| font-size: 0.9rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| transition: color 0.3s; | |
| } | |
| nav ul li a:hover { | |
| color: var(--accent); | |
| } | |
| .header-actions { | |
| display: flex; | |
| gap: 1.5rem; | |
| align-items: center; | |
| } | |
| .header-actions i { | |
| font-size: 1.2rem; | |
| cursor: pointer; | |
| transition: color 0.3s; | |
| } | |
| .header-actions i:hover { | |
| color: var(--accent); | |
| } | |
| .account-btn { | |
| background-color: var(--accent); | |
| color: white; | |
| border: none; | |
| padding: 0.6rem 1.2rem; | |
| border-radius: 25px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .account-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(255, 77, 109, 0.3); | |
| } | |
| /* Hero section */ | |
| .hero { | |
| height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 5%; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero-content { | |
| width: 50%; | |
| z-index: 10; | |
| } | |
| .hero h1 { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 3.5rem; | |
| margin-bottom: 1.5rem; | |
| line-height: 1.2; | |
| } | |
| .hero p { | |
| font-size: 1.1rem; | |
| margin-bottom: 2rem; | |
| line-height: 1.6; | |
| max-width: 85%; | |
| } | |
| .hero-btn { | |
| background-color: var(--accent); | |
| color: white; | |
| border: none; | |
| padding: 1rem 2rem; | |
| border-radius: 30px; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| display: inline-block; | |
| text-decoration: none; | |
| } | |
| .hero-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px rgba(255, 77, 109, 0.3); | |
| } | |
| .hero-btn.secondary { | |
| background-color: transparent; | |
| color: var(--primary); | |
| border: 2px solid var(--primary); | |
| margin-left: 1rem; | |
| } | |
| .hero-btn.secondary:hover { | |
| background-color: var(--primary); | |
| color: white; | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| /* 3D Model container */ | |
| #model-container { | |
| position: absolute; | |
| right: 5%; | |
| width: 45%; | |
| height: 80%; | |
| border-radius: 20px; | |
| overflow: hidden; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); | |
| } | |
| /* Features section */ | |
| .features { | |
| padding: 6rem 5%; | |
| background-color: var(--secondary); | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| } | |
| .section-title h2 { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 2.5rem; | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| } | |
| .section-title p { | |
| font-size: 1.1rem; | |
| color: #666; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 2rem; | |
| } | |
| .feature-card { | |
| background-color: var(--light-gray); | |
| border-radius: 15px; | |
| padding: 2rem; | |
| text-align: center; | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .feature-icon { | |
| background-color: var(--accent); | |
| color: white; | |
| width: 70px; | |
| height: 70px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 1.5rem; | |
| font-size: 1.8rem; | |
| } | |
| .feature-card h3 { | |
| font-size: 1.3rem; | |
| margin-bottom: 1rem; | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .feature-card p { | |
| color: #666; | |
| line-height: 1.6; | |
| } | |
| /* AI Outfits section */ | |
| .ai-outfits { | |
| padding: 6rem 5%; | |
| background-color: var(--light-gray); | |
| } | |
| .outfits-container { | |
| display: flex; | |
| gap: 2rem; | |
| overflow-x: auto; | |
| padding-bottom: 2rem; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--accent) var(--light-gray); | |
| } | |
| .outfits-container::-webkit-scrollbar { | |
| height: 8px; | |
| } | |
| .outfits-container::-webkit-scrollbar-track { | |
| background: var(--light-gray); | |
| border-radius: 10px; | |
| } | |
| .outfits-container::-webkit-scrollbar-thumb { | |
| background-color: var(--accent); | |
| border-radius: 10px; | |
| } | |
| .outfit-card { | |
| min-width: 300px; | |
| background-color: var(--secondary); | |
| border-radius: 15px; | |
| overflow: hidden; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .outfit-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .outfit-image { | |
| height: 350px; | |
| width: 100%; | |
| object-fit: cover; | |
| } | |
| .outfit-details { | |
| padding: 1.5rem; | |
| } | |
| .outfit-details h3 { | |
| font-size: 1.2rem; | |
| margin-bottom: 0.5rem; | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .outfit-details p { | |
| color: #666; | |
| margin-bottom: 1rem; | |
| font-size: 0.9rem; | |
| } | |
| .outfit-price { | |
| font-weight: 700; | |
| color: var(--primary); | |
| font-size: 1.2rem; | |
| margin-bottom: 1rem; | |
| display: block; | |
| } | |
| .outfit-actions { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .outfit-btn { | |
| background-color: var(--primary); | |
| color: white; | |
| border: none; | |
| padding: 0.6rem 1.2rem; | |
| border-radius: 25px; | |
| font-weight: 500; | |
| font-size: 0.8rem; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| .outfit-btn:hover { | |
| background-color: var(--accent); | |
| } | |
| .outfit-like { | |
| background: none; | |
| border: none; | |
| font-size: 1.2rem; | |
| color: var(--primary); | |
| cursor: pointer; | |
| } | |
| .outfit-like.liked { | |
| color: var(--accent); | |
| } | |
| /* AI Stylist section */ | |
| .ai-stylist { | |
| padding: 6rem 5%; | |
| display: flex; | |
| align-items: center; | |
| gap: 3rem; | |
| } | |
| .stylist-content { | |
| flex: 1; | |
| } | |
| .stylist-content h2 { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 2.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .stylist-content p { | |
| font-size: 1.1rem; | |
| line-height: 1.6; | |
| margin-bottom: 2rem; | |
| color: #666; | |
| } | |
| .stylist-steps { | |
| margin-top: 2rem; | |
| } | |
| .step { | |
| display: flex; | |
| margin-bottom: 1.5rem; | |
| align-items: flex-start; | |
| } | |
| .step-number { | |
| background-color: var(--accent); | |
| color: white; | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 700; | |
| margin-right: 1rem; | |
| flex-shrink: 0; | |
| } | |
| .step-content h4 { | |
| font-size: 1.1rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .step-content p { | |
| font-size: 0.95rem; | |
| margin-bottom: 0; | |
| color: #666; | |
| } | |
| .stylist-demo { | |
| flex: 1; | |
| height: 500px; | |
| border-radius: 20px; | |
| overflow: hidden; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); | |
| background-color: var(--gray); | |
| position: relative; | |
| } | |
| #stylist-container { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* Testimonials section */ | |
| .testimonials { | |
| padding: 6rem 5%; | |
| background-color: var(--secondary); | |
| } | |
| .testimonial-slider { | |
| display: flex; | |
| gap: 2rem; | |
| overflow-x: auto; | |
| padding-bottom: 2rem; | |
| } | |
| .testimonial-card { | |
| min-width: 350px; | |
| background-color: var(--light-gray); | |
| border-radius: 15px; | |
| padding: 2rem; | |
| } | |
| .testimonial-text { | |
| font-style: italic; | |
| margin-bottom: 1.5rem; | |
| line-height: 1.6; | |
| position: relative; | |
| } | |
| .testimonial-text::before { | |
| content: '"'; | |
| font-size: 3rem; | |
| color: var(--accent); | |
| opacity: 0.2; | |
| position: absolute; | |
| top: -15px; | |
| left: -15px; | |
| line-height: 1; | |
| font-family: serif; | |
| } | |
| .testimonial-author { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .author-avatar { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| } | |
| .author-info h4 { | |
| font-size: 1rem; | |
| margin-bottom: 0.2rem; | |
| } | |
| .author-info p { | |
| font-size: 0.8rem; | |
| color: #666; | |
| } | |
| /* Newsletter section */ | |
| .newsletter { | |
| padding: 5rem 5%; | |
| background: linear-gradient(135deg, #ff4d6d 0%, #ff758f 100%); | |
| color: white; | |
| text-align: center; | |
| } | |
| .newsletter h2 { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .newsletter p { | |
| font-size: 1.1rem; | |
| margin-bottom: 2rem; | |
| max-width: 600px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .newsletter-form { | |
| display: flex; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| } | |
| .newsletter-input { | |
| flex: 1; | |
| padding: 1rem; | |
| border: none; | |
| border-radius: 30px 0 0 30px; | |
| font-size: 1rem; | |
| } | |
| .newsletter-input:focus { | |
| outline: none; | |
| } | |
| .newsletter-btn { | |
| background-color: var(--primary); | |
| color: white; | |
| border: none; | |
| padding: 0 2rem; | |
| border-radius: 0 30px 30px 0; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| .newsletter-btn:hover { | |
| background-color: #111; | |
| } | |
| /* Footer */ | |
| footer { | |
| background-color: var(--primary); | |
| color: white; | |
| padding: 4rem 5% 2rem; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: 2fr 1fr 1fr 1fr; | |
| gap: 3rem; | |
| margin-bottom: 3rem; | |
| } | |
| .footer-logo { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: white; | |
| margin-bottom: 1rem; | |
| display: block; | |
| } | |
| .footer-logo span { | |
| color: var(--accent); | |
| } | |
| .footer-about p { | |
| margin-bottom: 1.5rem; | |
| color: #ccc; | |
| line-height: 1.6; | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .social-links a { | |
| color: white; | |
| font-size: 1.2rem; | |
| transition: color 0.3s; | |
| } | |
| .social-links a:hover { | |
| color: var(--accent); | |
| } | |
| .footer-title { | |
| font-size: 1.2rem; | |
| margin-bottom: 1.5rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .footer-links ul { | |
| list-style: none; | |
| } | |
| .footer-links ul li { | |
| margin-bottom: 0.8rem; | |
| } | |
| .footer-links ul li a { | |
| color: #ccc; | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .footer-links ul li a:hover { | |
| color: white; | |
| } | |
| .footer-contact p { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-bottom: 0.8rem; | |
| color: #ccc; | |
| } | |
| .footer-contact i { | |
| color: var(--accent); | |
| } | |
| .footer-bottom { | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| padding-top: 2rem; | |
| text-align: center; | |
| color: #999; | |
| font-size: 0.9rem; | |
| } | |
| /* Responsive styles */ | |
| @media (max-width: 1024px) { | |
| .hero-content { | |
| width: 60%; | |
| } | |
| #model-container { | |
| width: 40%; | |
| } | |
| .features-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .ai-stylist { | |
| flex-direction: column; | |
| } | |
| .footer-content { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| header { | |
| padding: 1rem 5%; | |
| } | |
| nav { | |
| display: none; | |
| } | |
| .hero { | |
| flex-direction: column; | |
| height: auto; | |
| padding-top: 7rem; | |
| padding-bottom: 3rem; | |
| } | |
| .hero-content { | |
| width: 100%; | |
| margin-bottom: 2rem; | |
| } | |
| #model-container { | |
| position: relative; | |
| right: auto; | |
| width: 100%; | |
| height: 400px; | |
| margin-top: 2rem; | |
| } | |
| .features-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| .section-title h2 { | |
| font-size: 2rem; | |
| } | |
| .outfits-container { | |
| flex-direction: column; | |
| overflow-x: visible; | |
| } | |
| .outfit-card { | |
| min-width: auto; | |
| } | |
| .footer-content { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <a href="#" class="logo">Neo<span>Chic</span></a> | |
| <nav> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">Discover</a></li> | |
| <li><a href="#">AI Stylist</a></li> | |
| <li><a href="#">Collections</a></li> | |
| <li><a href="#">About</a></li> | |
| </ul> | |
| </nav> | |
| <div class="header-actions"> | |
| <i class="fas fa-search"></i> | |
| <i class="fas fa-heart"></i> | |
| <i class="fas fa-shopping-bag"></i> | |
| <button class="account-btn">Sign In</button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="hero-content"> | |
| <h1>Discover Your Perfect Style with AI</h1> | |
| <p>Our artificial intelligence analyzes your preferences, body type, and current trends to create personalized fashion recommendations just for you.</p> | |
| <a href="#" class="hero-btn">Get Started</a> | |
| <a href="#" class="hero-btn secondary">Learn More</a> | |
| </div> | |
| <!-- 3D Model Container --> | |
| <div id="model-container"></div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features"> | |
| <div class="section-title"> | |
| <h2>AI-Powered Fashion</h2> | |
| <p>Experience the future of personalized shopping with our cutting-edge technology</p> | |
| </div> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <h3>Smart Recommendations</h3> | |
| <p>Our AI learns your style preferences and suggests items you'll love, tailored to your unique taste.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-tshirt"></i> | |
| </div> | |
| <h3>Virtual Try-On</h3> | |
| <p>See how clothes look on your digital avatar before purchasing, eliminating guesswork.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-magic"></i> | |
| </div> | |
| <h3>Outfit Generator</h3> | |
| <p>Create complete outfits with pieces from your wardrobe and new items that complement them.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Outfits Section --> | |
| <section class="ai-outfits"> | |
| <div class="section-title"> | |
| <h2>AI-Generated Outfits</h2> | |
| <p>Explore fashion combinations you might not have considered - perfected by our AI</p> | |
| </div> | |
| <div class="outfits-container"> | |
| <div class="outfit-card"> | |
| <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?w=600&auto=format&fit=crop" alt="AI Outfit" class="outfit-image"> | |
| <div class="outfit-details"> | |
| <h3>Urban Elegance</h3> | |
| <p>Monochromatic layers with statement accessories</p> | |
| <span class="outfit-price">$245.00</span> | |
| <div class="outfit-actions"> | |
| <button class="outfit-btn">Add to Cart</button> | |
| <button class="outfit-like"><i class="far fa-heart"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="outfit-card"> | |
| <img src="https://images.unsplash.com/photo-1556905055-8f358a7a10b7?w=600&auto=format&fit=crop" alt="AI Outfit" class="outfit-image"> | |
| <div class="outfit-details"> | |
| <h3>Minimalist Chic</h3> | |
| <p>Clean lines and neutral tones with a pop of color</p> | |
| <span class="outfit-price">$298.00</span> | |
| <div class="outfit-actions"> | |
| <button class="outfit-btn">Add to Cart</button> | |
| <button class="outfit-like"><i class="far fa-heart"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="outfit-card"> | |
| <img src="https://images.unsplash.com/photo-1556905055-8f358a7a10b7?w=600&auto=format&fit=crop" alt="AI Outfit" class="outfit-image"> | |
| <div class="outfit-details"> | |
| <h3>Casual Friday</h3> | |
| <p>Relaxed yet polished for weekend vibes</p> | |
| <span class="outfit-price">$175.00</span> | |
| <div class="outfit-actions"> | |
| <button class="outfit-btn">Add to Cart</button> | |
| <button class="outfit-like"><i class="far fa-heart"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="outfit-card"> | |
| <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?w=600&auto=format&fit=crop" alt="AI Outfit" class="outfit-image"> | |
| <div class="outfit-details"> | |
| <h3>Business Edge</h3> | |
| <p>Professional with contemporary minimalist flair</p> | |
| <span class="outfit-price">$320.00</span> | |
| <div class="outfit-actions"> | |
| <button class="outfit-btn">Add to Cart</button> | |
| <button class="outfit-like liked"><i class="fas fa-heart"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Stylist Section --> | |
| <section class="ai-stylist"> | |
| <div class="stylist-content"> | |
| <h2>Your Personal AI Stylist</h2> | |
| <p>Answer a few simple questions about your lifestyle, preferences, and body type, and our AI will become your personal fashion consultant, suggesting outfits and items that complement your existing wardrobe.</p> | |
| <div class="stylist-steps"> | |
| <div class="step"> | |
| <div class="step-number">1</div> | |
| <div class="step-content"> | |
| <h4>Style Quiz</h4> | |
| <p>Tell us about your fashion preferences, lifestyle and body measurements.</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">2</div> | |
| <div class="step-content"> | |
| <h4>Digital Wardrobe</h4> | |
| <p>Upload images of your current wardrobe items for personalized recommendations.</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">3</div> | |
| <div class="step-content"> | |
| <h4>Receive Suggestions</h4> | |
| <p>Get daily outfit ideas and shopping recommendations tailored just for you.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#" class="hero-btn" style="margin-top: 1.5rem;">Take the Style Quiz</a> | |
| </div> | |
| <div class="stylist-demo"> | |
| <div id="stylist-container"></div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="testimonials"> | |
| <div class="section-title"> | |
| <h2>What Our Community Says</h2> | |
| <p>Join thousands of satisfied customers who found their perfect style with NeoChic</p> | |
| </div> | |
| <div class="testimonial-slider"> | |
| <div class="testimonial-card"> | |
| <div class="testimonial-text"> | |
| <p>I've never been fashionable until I tried NeoChic. The AI understood my style better than I did! Now I get compliments every day.</p> | |
| </div> | |
| <div class="testimonial-author"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User" class="author-avatar"> | |
| <div class="author-info"> | |
| <h4>Sarah Johnson</h4> | |
| <p>Marketing Executive, NYC</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-card"> | |
| <div class="testimonial-text"> | |
| <p>The virtual try-on feature saved me so much time and money. No more returning items that don't fit right!</p> | |
| </div> | |
| <div class="testimonial-author"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="author-avatar"> | |
| <div class="author-info"> | |
| <h4>Michael Chen</h4> | |
| <p>Software Engineer, SF</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-card"> | |
| <div class="testimonial-text"> | |
| <p>As a busy mom, I don't have time to shop. NeoChic's recommendations help me look put together with minimal effort.</p> | |
| </div> | |
| <div class="testimonial-author"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="author-avatar"> | |
| <div class="author-info"> | |
| <h4>Lisa Rodriguez</h4> | |
| <p>Teacher, Chicago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Section --> | |
| <section class="newsletter"> | |
| <h2>Join the Fashion Revolution</h2> | |
| <p>Subscribe to get early access to new features, exclusive offers, and style tips from our AI stylists.</p> | |
| <form class="newsletter-form"> | |
| <input type="email" placeholder="Your email address" class="newsletter-input" required> | |
| <button type="submit" class="newsletter-btn">Subscribe</button> | |
| </form> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="footer-content"> | |
| <div class="footer-about"> | |
| <a href="#" class="footer-logo">Neo<span>Chic</span></a> | |
| <p>We're revolutionizing fashion through artificial intelligence. Our mission is to help everyone discover their personal style effortlessly.</p> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| <a href="#"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-pinterest"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-links"> | |
| <h3 class="footer-title">Shop</h3> | |
| <ul> | |
| <li><a href="#">Women</a></li> | |
| <li><a href="#">Men</a></li> | |
| <li><a href="#">Accessories</a></li> | |
| <li><a href="#">New Arrivals</a></li> | |
| <li><a href="#">Sale</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-links"> | |
| <h3 class="footer-title">Company</h3> | |
| <ul> | |
| <li><a href="#">About Us</a></li> | |
| <li><a href="#">Our Technology</a></li> | |
| <li><a href="#">Careers</a></li> | |
| <li><a href="#">Press</a></li> | |
| <li><a href="#">Sustainability</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-contact"> | |
| <h3 class="footer-title">Contact</h3> | |
| <p><i class="fas fa-map-marker-alt"></i> 123 Fashion Ave, New York, NY</p> | |
| <p><i class="fas fa-phone"></i> (555) 123-4567</p> | |
| <p><i class="fas fa-envelope"></i> hello@neochic.com</p> | |
| <p><i class="fas fa-clock"></i> Mon-Fri: 9AM - 5PM EST</p> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2023 NeoChic. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Three.js scene for 3D model | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Create scene for hero section | |
| const heroContainer = document.getElementById('model-container'); | |
| const heroScene = initHeroScene(heroContainer); | |
| // Create scene for AI stylist demo | |
| const stylistContainer = document.getElementById('stylist-container'); | |
| const stylistScene = initStylistScene(stylistContainer); | |
| // Add event listeners for outfit likes | |
| const likeButtons = document.querySelectorAll('.outfit-like'); | |
| likeButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const icon = this.querySelector('i'); | |
| if (icon.classList.contains('far')) { | |
| icon.classList.remove('far'); | |
| icon.classList.add('fas'); | |
| this.classList.add('liked'); | |
| } else { | |
| icon.classList.remove('fas'); | |
| icon.classList.add('far'); | |
| this.classList.remove('liked'); | |
| } | |
| }); | |
| }); | |
| window.addEventListener('resize', function() { | |
| heroScene.handleResize(); | |
| stylistScene.handleResize(); | |
| }); | |
| }); | |
| function initHeroScene(container) { | |
| // Scene setup | |
| const width = container.clientWidth; | |
| const height = container.clientHeight; | |
| const scene = new THREE.Scene(); | |
| scene.background = new THREE.Color(0xf5f5f5); | |
| const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000); | |
| camera.position.z = 5; | |
| const renderer = new THREE.WebGLRenderer({ antialias: true }); | |
| renderer.setSize(width, height); | |
| container.appendChild(renderer.domElement); | |
| // Lighting | |
| const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); | |
| scene.add(ambientLight); | |
| const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); | |
| directionalLight.position.set(0, 1, 1); | |
| scene.add(directionalLight); | |
| const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.3); | |
| directionalLight2.position.set(0, -1, 1); | |
| scene.add(directionalLight2); | |
| // Create fashion mannequin (placeholder geometry) | |
| const geometry = new THREE.TorusKnotGeometry(0.5, 0.2, 100, 16); | |
| const material = new THREE.MeshStandardMaterial({ | |
| color: 0xff4d6d, | |
| roughness: 0.1, | |
| metalness: 0.8 | |
| }); | |
| const mannequin = new THREE.Mesh(geometry, material); | |
| scene.add(mannequin); | |
| // Add controls | |
| const controls = new THREE.OrbitControls(camera, renderer.domElement); | |
| controls.enableDamping = true; | |
| controls.dampingFactor = 0.25; | |
| controls.enableZoom = false; | |
| controls.autoRotate = true; | |
| controls.autoRotateSpeed = 0.5; | |
| // Animation loop | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| controls.update(); | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| // Handle window resize | |
| function handleResize() { | |
| const newWidth = container.clientWidth; | |
| const newHeight = container.clientHeight; | |
| camera.aspect = newWidth / newHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(newWidth, newHeight); | |
| } | |
| return { | |
| handleResize: handleResize | |
| }; | |
| } | |
| function initStylistScene(container) { | |
| // Scene setup | |
| const width = container.clientWidth; | |
| const height = container.clientHeight; | |
| const scene = new THREE.Scene(); | |
| scene.background = new THREE.Color(0x333333); | |
| const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000); | |
| camera.position.z = 4; | |
| const renderer = new THREE.WebGLRenderer({ antialias: true }); | |
| renderer.setSize(width, height); | |
| container.appendChild(renderer.domElement); | |
| // Lighting | |
| const ambientLight = new THREE.AmbientLight(0xffffff, 0.3); | |
| scene.add(ambientLight); | |
| const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); | |
| directionalLight.position.set(1, 1, 1); | |
| scene.add(directionalLight); | |
| // Create scene elements | |
| const cubeSize = 0.5; | |
| // T-shirt | |
| const tshirtGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize); | |
| const tshirtMaterial = new THREE.MeshStandardMaterial({ | |
| color: 0xff758f, | |
| roughness: 0.3, | |
| metalness: 0.1 | |
| }); | |
| const tshirt = new THREE.Mesh(tshirtGeometry, tshirtMaterial); | |
| tshirt.position.set(-1, 0, 0); | |
| scene.add(tshirt); | |
| // Pants | |
| const pantsGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize); | |
| const pantsMaterial = new THREE.MeshStandardMaterial({ | |
| color: 0x4d4dff, | |
| roughness: 0.5, | |
| metalness: 0 | |
| }); | |
| const pants = new THREE.Mesh(pantsGeometry, pantsMaterial); | |
| pants.position.set(0, 0, 0); | |
| scene.add(pants); | |
| // Shoes | |
| const shoesGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize); | |
| const shoesMaterial = new THREE.MeshStandardMaterial({ | |
| color: 0x000000, | |
| roughness: 0.1, | |
| metalness: 0.5 | |
| }); | |
| const shoes = new THREE.Mesh(shoesGeometry, shoesMaterial); | |
| shoes.position.set(1, 0, 0); | |
| scene.add(shoes); | |
| // Animation - rotate items | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| tshirt.rotation.x += 0.01; | |
| tshirt.rotation.y += 0.01; | |
| pants.rotation.y += 0.01; | |
| pants.rotation.z += 0.01; | |
| shoes.rotation.x += 0.01; | |
| shoes.rotation.z += 0.01; | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| // Handle window resize | |
| function handleResize() { | |
| const newWidth = container.clientWidth; | |
| const newHeight = container.clientHeight; | |
| camera.aspect = newWidth / newHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(newWidth, newHeight); | |
| } | |
| return { | |
| handleResize: handleResize | |
| }; | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> | |
| </html> |