Add new themes from Claude
This commit is contained in:
kbe
423
.superdesign/design_iterations/modern_minimalist_home.html
Normal file
423
.superdesign/design_iterations/modern_minimalist_home.html
Normal file
@@ -0,0 +1,423 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Aperonight - Premium Event Booking</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
<link rel="stylesheet" href="modern_minimalist_theme.css">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
line-height: 1.6;
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(236, 72, 153, 0.05) 100%);
|
||||
padding: 120px 0 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: var(--text-4xl);
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--space-6);
|
||||
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: var(--text-xl);
|
||||
color: var(--muted-foreground);
|
||||
margin-bottom: var(--space-8);
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--space-4);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: var(--space-16) 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: var(--text-3xl);
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: var(--space-12);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.events-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--space-8);
|
||||
margin-bottom: var(--space-12);
|
||||
}
|
||||
|
||||
.event-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||
}
|
||||
|
||||
.event-content {
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.event-title {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--space-2);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.event-date {
|
||||
color: var(--muted-foreground);
|
||||
font-size: var(--text-sm);
|
||||
margin-bottom: var(--space-3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.event-description {
|
||||
color: var(--muted-foreground);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.event-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.event-price {
|
||||
font-weight: 600;
|
||||
font-size: var(--text-lg);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--space-8);
|
||||
}
|
||||
|
||||
.feature {
|
||||
text-align: center;
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto var(--space-4);
|
||||
}
|
||||
|
||||
.feature h3 {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--space-3);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.feature p {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.stats {
|
||||
background: var(--muted);
|
||||
padding: var(--space-12) 0;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: var(--space-8);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: var(--text-4xl);
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: var(--muted-foreground);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: var(--foreground);
|
||||
color: var(--background);
|
||||
padding: var(--space-12) 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--space-6);
|
||||
margin-bottom: var(--space-6);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-normal);
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--background);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 {
|
||||
font-size: var(--text-3xl);
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.events-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="nav">
|
||||
<div class="container">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) 0;">
|
||||
<div style="display: flex; align-items: center; gap: var(--space-3);">
|
||||
<div style="width: 32px; height: 32px; background: var(--primary); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700;">A</div>
|
||||
<span style="font-size: var(--text-xl); font-weight: 700; color: var(--foreground);">Aperonight</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: var(--space-2); align-items: center;">
|
||||
<a href="#" class="nav-link">Events</a>
|
||||
<a href="#" class="nav-link">About</a>
|
||||
<a href="#" class="nav-link">Contact</a>
|
||||
<button class="btn-primary" style="margin-left: var(--space-4);">Sign In</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<h1>Discover Amazing Events in Your City</h1>
|
||||
<p>Join thousands of people at premium afterwork events, networking sessions, and exclusive gatherings.</p>
|
||||
<div class="cta-buttons">
|
||||
<button class="btn-primary">Browse Events</button>
|
||||
<button class="btn-secondary">Host an Event</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Events -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Featured Events</h2>
|
||||
<div class="events-grid">
|
||||
<div class="event-card">
|
||||
<img src="https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=400&h=200&fit=crop" alt="Tech Afterwork" class="event-image">
|
||||
<div class="event-content">
|
||||
<h3 class="event-title">Tech Afterwork Networking</h3>
|
||||
<div class="event-date">
|
||||
<i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
|
||||
Thursday, March 15, 2024 • 6:00 PM
|
||||
</div>
|
||||
<p class="event-description">Connect with tech professionals over drinks and discover the latest trends in the industry.</p>
|
||||
<div class="event-footer">
|
||||
<span class="event-price">€25</span>
|
||||
<div style="display: flex; gap: var(--space-2);">
|
||||
<span class="badge-available">Available</span>
|
||||
<button class="btn-primary" style="padding: var(--space-2) var(--space-4); font-size: var(--text-sm);">Book Now</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="event-card">
|
||||
<img src="https://images.unsplash.com/photo-1514525253161-7a46d19cd819?w=400&h=200&fit=crop" alt="Music Event" class="event-image">
|
||||
<div class="event-content">
|
||||
<h3 class="event-title">Rooftop Music Session</h3>
|
||||
<div class="event-date">
|
||||
<i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
|
||||
Saturday, March 18, 2024 • 8:00 PM
|
||||
</div>
|
||||
<p class="event-description">Enjoy live music performances under the stars with amazing city views.</p>
|
||||
<div class="event-footer">
|
||||
<span class="event-price">€35</span>
|
||||
<div style="display: flex; gap: var(--space-2);">
|
||||
<span class="badge-featured">Featured</span>
|
||||
<button class="btn-primary" style="padding: var(--space-2) var(--space-4); font-size: var(--text-sm);">Book Now</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="event-card">
|
||||
<img src="https://images.unsplash.com/photo-1547587932-6b25ba6e6f9c?w=400&h=200&fit=crop" alt="Art Gallery" class="event-image">
|
||||
<div class="event-content">
|
||||
<h3 class="event-title">Art Gallery Opening</h3>
|
||||
<div class="event-date">
|
||||
<i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
|
||||
Friday, March 22, 2024 • 7:00 PM
|
||||
</div>
|
||||
<p class="event-description">Discover emerging artists in an intimate gallery setting with wine and appetizers.</p>
|
||||
<div class="event-footer">
|
||||
<span class="event-price">€20</span>
|
||||
<div style="display: flex; gap: var(--space-2);">
|
||||
<span class="badge-sold-out">Few Left</span>
|
||||
<button class="btn-secondary" style="padding: var(--space-2) var(--space-4); font-size: var(--text-sm);">Book Now</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<button class="btn-secondary">View All Events</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features -->
|
||||
<section class="section" style="background: var(--muted);">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Why Choose Aperonight?</h2>
|
||||
<div class="features-grid">
|
||||
<div class="feature">
|
||||
<div class="feature-icon">
|
||||
<i data-lucide="users" style="width: 24px; height: 24px;"></i>
|
||||
</div>
|
||||
<h3>Curated Events</h3>
|
||||
<p>Hand-picked premium events that bring together like-minded professionals and creatives.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="feature-icon">
|
||||
<i data-lucide="shield-check" style="width: 24px; height: 24px;"></i>
|
||||
</div>
|
||||
<h3>Secure Booking</h3>
|
||||
<p>Safe and secure payment processing with instant ticket confirmation and easy refunds.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="feature-icon">
|
||||
<i data-lucide="calendar-clock" style="width: 24px; height: 24px;"></i>
|
||||
</div>
|
||||
<h3>Easy Management</h3>
|
||||
<p>Simple event discovery, booking, and management all in one seamless platform.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="feature-icon">
|
||||
<i data-lucide="heart" style="width: 24px; height: 24px;"></i>
|
||||
</div>
|
||||
<h3>Community Focused</h3>
|
||||
<p>Building meaningful connections through shared experiences and quality events.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stats -->
|
||||
<section class="stats">
|
||||
<div class="container">
|
||||
<div class="stats-grid">
|
||||
<div>
|
||||
<span class="stat-number">50+</span>
|
||||
<div class="stat-label">Events This Month</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="stat-number">2.5K</span>
|
||||
<div class="stat-label">Happy Attendees</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="stat-number">100+</span>
|
||||
<div class="stat-label">Partner Venues</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="stat-number">95%</span>
|
||||
<div class="stat-label">Satisfaction Rate</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-links">
|
||||
<a href="#">About Us</a>
|
||||
<a href="#">Events</a>
|
||||
<a href="#">Help Center</a>
|
||||
<a href="#">Privacy Policy</a>
|
||||
<a href="#">Terms of Service</a>
|
||||
</div>
|
||||
<p>© 2024 Aperonight. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Initialize Lucide icons
|
||||
lucide.createIcons();
|
||||
|
||||
// Add animation classes on scroll
|
||||
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-fadeInUp');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.event-card, .feature').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user