Spaces:

Advait3009
/

website2

Running

App Files Files Community

Advait3009 commited on Mar 29, 2025

Commit

4f4c6ea

verified ·

1 Parent(s): a5d51af

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +1185 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Website2
-emoji: 🐢
-colorFrom: pink
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: website2
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

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

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>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>&copy; 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>