Hugging Face's logo

Spaces:
Advait3009
/
website1
Running

App Files Community
website1 / index.html
Advait3009's picture
Advait3009
Add 1 files
228a7bf verified
raw
history blame contribute delete
34.5 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StyleForge AI | AI-Powered Fashion Revolution</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;900&family=Playfair+Display:wght@400;700&display=swap');
:root {
--primary: #FF2D55;
--secondary: #3225D2;
--accent: #00C4FF;
--dark: #0A0A0A;
--light: #FFFFFF;
--gray: #F5F5F7;
--text-dark: #2C2C2C;
--text-light: #8E8E93;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: var(--light);
color: var(--text-dark);
overflow-x: hidden;
line-height: 1.6;
}
.pattern-bg {
position: absolute;
width: 100%;
height: 100vh;
background-image:
radial-gradient(circle at 25% 25%, rgba(255,45,85,0.05) 0%, transparent 40%),
radial-gradient(circle at 75% 75%, rgba(0,196,255,0.05) 0%, transparent 40%);
z-index: -1;
pointer-events: none;
}
header {
padding: 2rem 5%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
width: 100%;
background-color: rgba(255,255,255,0.9);
backdrop-filter: blur(10px);
z-index: 100;
box-shadow: 0 2px 20px rgba(0,0,0,0.05);
}
.logo {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 700;
color: var(--dark);
}
.logo span {
color: var(--primary);
}
nav ul {
display: flex;
list-style: none;
gap: 2rem;
}
nav a {
text-decoration: none;
color: var(--text-dark);
font-weight: 600;
font-size: 0.95rem;
transition: color 0.3s ease;
position: relative;
}
nav a:hover {
color: var(--primary);
}
nav a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary);
transition: width 0.3s ease;
}
nav a:hover::after {
width: 100%;
}
.hero {
height: 100vh;
display: flex;
align-items: center;
padding: 0 5%;
position: relative;
}
.hero-content {
max-width: 600px;
}
.hero h1 {
font-family: 'Playfair Display', serif;
font-size: 4.5rem;
font-weight: 700;
line-height: 1.1;
margin-bottom: 1.5rem;
}
.hero h1 span {
position: relative;
}
.hero h1 span::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 12px;
background-color: var(--accent);
opacity: 0.3;
z-index: -1;
}
.hero p {
font-size: 1.2rem;
color: var(--text-light);
margin-bottom: 2.5rem;
max-width: 500px;
}
.hero-image {
position: absolute;
right: 5%;
width: 40%;
max-width: 600px;
height: 80%;
background-color: var(--gray);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 30px 50px rgba(0,0,0,0.1);
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.5s ease;
position: absolute;
top: 0;
left: 0;
}
.hero-image img.active {
opacity: 1;
}
.cta-button {
display: inline-flex;
align-items: center;
gap: 0.8rem;
padding: 1rem 2rem;
background: linear-gradient(90deg, var(--primary), var(--secondary));
color: var(--light);
border: none;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(255,45,85,0.2);
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(255,45,85,0.3);
}
.section {
padding: 6rem 5%;
}
.section-title {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
text-align: center;
margin-bottom: 3rem;
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
}
.feature-card {
background-color: var(--light);
border-radius: 15px;
padding: 2rem;
box-shadow: 0 5px 30px rgba(0,0,0,0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.feature-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
color: var(--light);
font-size: 1.5rem;
}
.feature-card h3 {
font-size: 1.3rem;
margin-bottom: 1rem;
}
.feature-card p {
color: var(--text-light);
}
.demo-section {
background-color: var(--gray);
padding: 6rem 5%;
border-radius: 30px;
margin: 0 5%;
position: relative;
overflow: hidden;
}
.demo-container {
display: flex;
align-items: center;
gap: 3rem;
}
.demo-image {
width: 50%;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.demo-image img {
width: 100%;
display: block;
}
.demo-content {
width: 50%;
}
.demo-content h2 {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
.demo-content p {
color: var(--text-light);
margin-bottom: 2rem;
}
.input-group {
margin-bottom: 1.5rem;
}
.input-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
}
.input-group input, .input-group select {
width: 100%;
padding: 1rem;
border: 2px solid #E0E0E0;
border-radius: 10px;
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.input-group input:focus, .input-group select:focus {
outline: none;
border-color: var(--accent);
}
.demo-decoration {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: rgba(0,196,255,0.1);
z-index: -1;
}
.decoration-1 {
top: -50px;
right: -50px;
}
.decoration-2 {
bottom: -100px;
left: -50px;
width: 300px;
height: 300px;
}
.fashion-showcase {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.showcase-item {
position: relative;
border-radius: 20px;
overflow: hidden;
height: 400px;
background-color: var(--gray);
transition: transform 0.3s ease;
}
.showcase-item:hover {
transform: scale(1.03);
}
.showcase-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.showcase-item:hover img {
transform: scale(1.1);
}
.showcase-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 2rem;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
color: var(--light);
}
.showcase-overlay h3 {
font-size: 1.3rem;
margin-bottom: 0.5rem;
}
.showcase-overlay p {
color: rgba(255,255,255,0.7);
font-size: 0.9rem;
}
.pricing {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.pricing-card {
background-color: var(--light);
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 5px 30px rgba(0,0,0,0.05);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
.pricing-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.pricing-card.popular::before {
content: 'Popular';
position: absolute;
top: 20px;
right: -40px;
width: 150px;
background-color: var(--primary);
color: var(--light);
font-weight: 600;
font-size: 0.8rem;
padding: 0.2rem 0;
text-align: center;
transform: rotate(45deg);
}
.pricing-card h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.price {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1.5rem;
position: relative;
}
.price small {
font-size: 1rem;
color: var(--text-light);
}
.price-underline {
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 3px;
background-color: var(--accent);
}
.pricing-features {
list-style: none;
margin-bottom: 2rem;
}
.pricing-features li {
padding: 0.7rem 0;
border-bottom: 1px solid #F0F0F0;
color: var(--text-light);
}
.secondary-button {
display: inline-block;
padding: 0.8rem 2rem;
background-color: transparent;
border: 2px solid var(--primary);
color: var(--primary);
border-radius: 50px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.secondary-button:hover {
background-color: var(--primary);
color: var(--light);
}
.testimonials {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.testimonial-card {
background-color: var(--light);
border-radius: 15px;
padding: 2rem;
box-shadow: 0 5px 30px rgba(0,0,0,0.05);
}
.testimonial-header {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
}
.testimonial-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
margin-right: 1rem;
}
.testimonial-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-info h4 {
font-size: 1.1rem;
margin-bottom: 0.2rem;
}
.testimonial-info p {
color: var(--text-light);
font-size: 0.9rem;
}
.testimonial-rating {
color: var(--primary);
margin-bottom: 1rem;
}
.testimonial-text {
font-style: italic;
color: var(--text-dark);
}
footer {
background-color: var(--dark);
color: var(--light);
padding: 5rem 5% 2rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 3rem;
margin-bottom: 3rem;
}
.footer-column h3 {
font-family: 'Playfair Display', serif;
font-size: 1.3rem;
margin-bottom: 1.5rem;
position: relative;
}
.footer-column h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 3px;
background-color: var(--accent);
}
.footer-column ul {
list-style: none;
}
.footer-column li {
margin-bottom: 0.8rem;
}
.footer-column a {
color: rgba(255,255,255,0.7);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-column a:hover {
color: var(--accent);
}
.social-links {
display: flex;
gap: 1rem;
}
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255,255,255,0.1);
border-radius: 50%;
color: var(--light);
transition: all 0.3s ease;
}
.social-links a:hover {
background-color: var(--primary);
transform: translateY(-3px);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.5);
font-size: 0.9rem;
}
/* Responsive styles */
@media (max-width: 1024px) {
.hero h1 {
font-size: 3.5rem;
}
.demo-container {
flex-direction: column;
}
.demo-image, .demo-content {
width: 100%;
}
.fashion-showcase {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
header {
padding: 1.5rem 5%;
}
nav ul {
display: none;
}
.hero h1 {
font-size: 2.8rem;
}
.section-title {
font-size: 2rem;
}
.fashion-showcase {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.hero {
padding-top: 100px;
height: auto;
flex-direction: column-reverse;
}
.hero-content, .hero-image {
width: 100%;
margin-bottom: 2rem;
}
.hero-image {
height: 300px;
position: relative;
right: auto;
}
}
</style>
</head>
<body>
<div class="pattern-bg"></div>
<header>
<div class="logo">StyleForge<span>AI</span></div>
<nav>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#demo">Demo</a></li>
<li><a href="#showcase">Showcase</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#testimonials">Testimonials</a></li>
</ul>
</nav>
</header>
<section class="hero">
<div class="hero-content">
<h1>Revolutionize Fashion with <span>AI Power</span></h1>
<p>Personalized outfit recommendations, virtual try-ons, and trend forecasting powered by cutting-edge artificial intelligence.</p>
<button class="cta-button">
<i class="fas fa-magic"></i> TRY IT NOW
</button>
</div>
<div class="hero-image">
<img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="AI Fashion Model" class="active">
<img src="https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Virtual Try-On">
<img src="https://images.unsplash.com/photo-1539109136881-3be0616acf4b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Trend Analysis">
</div>
</section>
<section class="section" id="features">
<h2 class="section-title">AI-Powered Features</h2>
<div class="features">
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-tshirt"></i>
</div>
<h3>Virtual Wardrobe</h3>
<p>Digitize your entire wardrobe with AI scanning and create endless outfit combinations without the hassle.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-user-tie"></i>
</div>
<h3>Personal Stylist</h3>
<p>Our AI analyzes your body type, preferences, and occasions to suggest perfect outfits tailored just for you.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-chart-line"></i>
</div>
<h3>Trend Forecasting</h3>
<p>Get real-time fashion trend analysis from social media and runway shows before they go mainstream.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-camera-retro"></i>
</div>
<h3>Virtual Try-On</h3>
<p>See how clothes will look on you in augmented reality before making any purchases.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-shopping-bag"></i>
</div>
<h3>Smart Shopping</h3>
<p>AI finds the best deals and suggests alternatives when your preferred items are out of stock.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-leaf"></i>
</div>
<h3>Sustainability Scoring</h3>
<p>Our algorithm evaluates the environmental impact of your fashion choices and suggests eco-friendly alternatives.</p>
</div>
</div>
</section>
<section class="demo-section" id="demo">
<div class="demo-decoration decoration-1"></div>
<div class="demo-decoration decoration-2"></div>
<div class="demo-container">
<div class="demo-image">
<img src="https://images.unsplash.com/photo-1485178575877-1a13bf489dfe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2001&q=80" alt="AI Fashion Demo">
</div>
<div class="demo-content">
<h2>Try Our AI Fashion Assistant</h2>
<p>Experience the future of personal styling with our intelligent recommendation engine.</p>
<div class="input-group">
<label for="style-preference">Your Style Preference</label>
<select id="style-preference">
<option value="casual">Casual</option>
<option value="business">Business</option>
<option value="elegant">Elegant</option>
<option value="bohemian">Bohemian</option>
<option value="streetwear">Streetwear</option>
</select>
</div>
<div class="input-group">
<label for="budget">Budget Range</label>
<select id="budget">
<option value="low">$ - Budget Friendly</option>
<option value="medium">$$ - Mid-Range</option>
<option value="high">$$$ - Luxury</option>
</select>
</div>
<button class="cta-button">
<i class="fas fa-robot"></i> GENERATE OUTFITS
</button>
</div>
</div>
</section>
<section class="section" id="showcase">
<h2 class="section-title">AI Fashion Showcase</h2>
<div class="fashion-showcase">
<div class="showcase-item">
<img src="https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="AI Generated Outfit 1">
<div class="showcase-overlay">
<h3>Summer Elegance</h3>
<p>AI-generated collection for warm weather formal events</p>
</div>
</div>
<div class="showcase-item">
<img src="https://images.unsplash.com/photo-1529139574466-a303027c1d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="AI Generated Outfit 2">
<div class="showcase-overlay">
<h3>Urban Explorer</h3>
<p>Streetwear recommendation based on current city trends</p>
</div>
</div>
<div class="showcase-item">
<img src="https://images.unsplash.com/photo-1479064555552-3ef4979f8908?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="AI Generated Outfit 3">
<div class="showcase-overlay">
<h3>Sustainable Chic</h3>
<p>Eco-friendly outfit with 92% sustainability score</p>
</div>
</div>
</div>
</section>
<section class="section" id="pricing">
<h2 class="section-title">Simple Pricing</h2>
<div class="pricing">
<div class="pricing-card">
<h3>Basic</h3>
<div class="price">
$9<small>/month</small>
<div class="price-underline"></div>
</div>
<ul class="pricing-features">
<li>Virtual Wardrobe</li>
<li>Limited Outfit Recommendations</li>
<li>Basic Trend Analysis</li>
<li>Ads Supported</li>
</ul>
<button class="secondary-button">GET STARTED</button>
</div>
<div class="pricing-card popular">
<h3>Pro</h3>
<div class="price">
$29<small>/month</small>
<div class="price-underline"></div>
</div>
<ul class="pricing-features">
<li>Advanced AI Stylist</li>
<li>Unlimited Recommendations</li>
<li>Virtual Try-On</li>
<li>Sustainability Scoring</li>
<li>Ad-Free Experience</li>
</ul>
<button class="cta-button">GET STARTED</button>
</div>
<div class="pricing-card">
<h3>Enterprise</h3>
<div class="price">
Custom
<div class="price-underline"></div>
</div>
<ul class="pricing-features">
<li>All Pro Features Plus</li>
<li>Dedicated Account Manager</li>
<li>API Access</li>
<li>Custom AI Model Training</li>
<li>Premium Support</li>
</ul>
<button class="secondary-button">CONTACT SALES</button>
</div>
</div>
</section>
<section class="section" id="testimonials">
<h2 class="section-title">What Our Users Say</h2>
<div class="testimonials">
<div class="testimonial-card">
<div class="testimonial-header">
<div class="testimonial-avatar">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson">
</div>
<div class="testimonial-info">
<h4>Sarah Johnson</h4>
<p>Fashion Blogger</p>
</div>
</div>
<div class="testimonial-rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<p class="testimonial-text">"I've saved hours of outfit planning every week. The AI understands my style better than I do and always suggests fresh combinations from items I already own."</p>
</div>
<div class="testimonial-card">
<div class="testimonial-header">
<div class="testimonial-avatar">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen">
</div>
<div class="testimonial-info">
<h4>Michael Chen</h4>
<p>Tech Executive</p>
</div>
</div>
<div class="testimonial-rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<p class="testimonial-text">"As someone who hated shopping, this has been a game-changer. The virtual try-on is scarily accurate and has saved me countless return trips."</p>
</div>
<div class="testimonial-card">
<div class="testimonial-header">
<div class="testimonial-avatar">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez">
</div>
<div class="testimonial-info">
<h4>Emma Rodriguez</h4>
<p>Sustainability Advocate</p>
</div>
</div>
<div class="testimonial-rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<p class="testimonial-text">"The sustainability scoring helped me transition to a more eco-conscious wardrobe without sacrificing style. I've reduced my fashion carbon footprint by 63%!"</p>
</div>
</div>
</section>
<footer>
<div class="footer-content">
<div class="footer-column">
<h3>StyleForge AI</h3>
<p>The future of fashion powered by artificial intelligence. Making personal style effortless and sustainable for everyone.</p>
<div class="social-links">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-tiktok"></i></a>
<a href="#"><i class="fab fa-pinterest"></i></a>
</div>
</div>
<div class="footer-column">
<h3>Features</h3>
<ul>
<li><a href="#">Virtual Wardrobe</a></li>
<li><a href="#">AI Stylist</a></li>
<li><a href="#">Trend Forecasting</a></li>
<li><a href="#">Virtual Try-On</a></li>
<li><a href="#">Sustainability</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Company</h3>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Legal</h3>
<ul>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Cookie Policy</a></li>
<li><a href="#">GDPR</a></li>
<li><a href="#">Ethical AI</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<div>© 2023 StyleForge AI. All rights reserved.</div>
<div>Made with <i class="fas fa-heart" style="color: var(--primary);"></i> in San Francisco</div>
</div>
</footer>
<script>
// Hero image carousel
document.addEventListener('DOMContentLoaded', function() {
const heroImages = document.querySelectorAll('.hero-image img');
let currentImage = 0;
function changeHeroImage() {
heroImages[currentImage].classList.remove('active');
currentImage = (currentImage + 1) % heroImages.length;
heroImages[currentImage].classList.add('active');
}
setInterval(changeHeroImage, 4000);
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 100,
behavior: 'smooth'
});
}
});
});
// Demo form submission
const demoForm = document.querySelector('.demo-content');
const generateBtn = demoForm.querySelector('.cta-button');
generateBtn.addEventListener('click', function() {
const style = document.getElementById('style-preference').value;
const budget = document.getElementById('budget').value;
// In a real app, this would call an AI API
alert(`Generating ${style} outfit recommendations for ${budget} budget...\n\nThis demo would interface with our AI server for real results.`);
});
// Animate elements when they come into view
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate');
}
});
}, observerOptions);
document.querySelectorAll('.feature-card, .showcase-item, .pricing-card, .testimonial-card').forEach(card => {
observer.observe(card);
});
});
</script>
</body>
</html>