30f3ecc6ad
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com> This commit refactors the entire application to replace the 'parties' concept with 'events'. All controllers, models, views, and related files have been updated to reflect this change. The parties table has been replaced with an events table, and all related functionality has been updated accordingly.
1189 lines
46 KiB
HTML
Executable File
1189 lines
46 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Aperonight - Discover Premium Afterwork Events</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=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
<link rel="stylesheet" href="enhanced_aperonight_theme.css">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
line-height: 1.6;
|
|
color: var(--color-neutral-900);
|
|
background: var(--color-neutral-50);
|
|
}
|
|
|
|
.hero {
|
|
background: linear-gradient(135deg,
|
|
rgba(168, 85, 247, 0.08) 0%,
|
|
rgba(236, 72, 153, 0.08) 50%,
|
|
rgba(168, 85, 247, 0.08) 100%);
|
|
padding: var(--space-20) 0 var(--space-16);
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background:
|
|
radial-gradient(circle at 20% 80%, rgba(168, 85, 247, 0.1) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.1) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(2.5rem, 6vw, 4.5rem);
|
|
font-weight: 900;
|
|
margin-bottom: var(--space-6);
|
|
background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent-500) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.hero .subtitle {
|
|
font-size: var(--text-xl);
|
|
color: var(--color-neutral-600);
|
|
margin-bottom: var(--space-8);
|
|
max-width: 700px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.cta-group {
|
|
display: flex;
|
|
gap: var(--space-4);
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: var(--space-12);
|
|
}
|
|
|
|
.hero-stats {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: var(--space-8);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.hero-stat {
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-stat-number {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-2xl);
|
|
font-weight: 800;
|
|
color: var(--color-primary-600);
|
|
display: block;
|
|
}
|
|
|
|
.hero-stat-label {
|
|
font-size: var(--text-sm);
|
|
color: var(--color-neutral-500);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Party Finder Styles */
|
|
.party-finder {
|
|
background: white;
|
|
border-radius: var(--radius-2xl);
|
|
box-shadow: var(--shadow-2xl);
|
|
padding: var(--space-8);
|
|
margin: calc(-1 * var(--space-16)) auto var(--space-16);
|
|
position: relative;
|
|
z-index: 10;
|
|
border: 1px solid var(--color-neutral-200);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.finder-header {
|
|
text-align: center;
|
|
margin-bottom: var(--space-8);
|
|
}
|
|
|
|
.finder-title {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-2xl);
|
|
font-weight: 800;
|
|
margin-bottom: var(--space-2);
|
|
color: var(--color-neutral-900);
|
|
}
|
|
|
|
.finder-subtitle {
|
|
color: var(--color-neutral-600);
|
|
font-size: var(--text-lg);
|
|
}
|
|
|
|
.finder-form {
|
|
display: grid;
|
|
gap: var(--space-6);
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.finder-form {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.finder-form {
|
|
grid-template-columns: repeat(4, 1fr) auto;
|
|
align-items: end;
|
|
}
|
|
}
|
|
|
|
.finder-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.finder-label {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-sm);
|
|
font-weight: 700;
|
|
color: var(--color-neutral-700);
|
|
margin-bottom: var(--space-2);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.finder-input,
|
|
.finder-select {
|
|
background: var(--color-neutral-50);
|
|
border: 2px solid var(--color-neutral-200);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-4);
|
|
font-size: var(--text-base);
|
|
font-weight: 500;
|
|
color: var(--color-neutral-900);
|
|
transition: all var(--duration-normal) var(--ease-out);
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
.finder-input:focus,
|
|
.finder-select:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary-500);
|
|
background: white;
|
|
box-shadow: 0 0 0 4px rgb(168 85 247 / 0.1);
|
|
}
|
|
|
|
.finder-input::placeholder {
|
|
color: var(--color-neutral-500);
|
|
}
|
|
|
|
.finder-select {
|
|
cursor: pointer;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
|
|
background-position: right 12px center;
|
|
background-repeat: no-repeat;
|
|
background-size: 16px;
|
|
padding-right: var(--space-12);
|
|
}
|
|
|
|
.price-range {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.price-range-label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
.price-value {
|
|
font-family: var(--font-display);
|
|
font-weight: 800;
|
|
color: var(--color-primary-600);
|
|
}
|
|
|
|
.price-slider {
|
|
width: 100%;
|
|
height: 6px;
|
|
border-radius: var(--radius-full);
|
|
background: var(--color-neutral-200);
|
|
outline: none;
|
|
appearance: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.price-slider::-webkit-slider-thumb {
|
|
appearance: none;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: var(--radius-full);
|
|
background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent-500) 100%);
|
|
cursor: pointer;
|
|
border: 3px solid white;
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.price-slider::-moz-range-thumb {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: var(--radius-full);
|
|
background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent-500) 100%);
|
|
cursor: pointer;
|
|
border: 3px solid white;
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.finder-search-btn {
|
|
background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent-500) 100%);
|
|
color: white;
|
|
border: none;
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-5) var(--space-8);
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-lg);
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
transition: all var(--duration-normal) var(--ease-out);
|
|
box-shadow: var(--shadow-purple-md);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.finder-search-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-purple-lg);
|
|
}
|
|
|
|
.finder-search-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.section {
|
|
padding: var(--space-16) 0;
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: var(--space-12);
|
|
}
|
|
|
|
.section-title {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(1.875rem, 4vw, 3rem);
|
|
font-weight: 800;
|
|
margin-bottom: var(--space-4);
|
|
color: var(--color-neutral-900);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.section-description {
|
|
font-size: var(--text-lg);
|
|
color: var(--color-neutral-600);
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.featured-events {
|
|
background: var(--color-neutral-50);
|
|
}
|
|
|
|
/* Updated Featured Events Grid - 3 Cards Side by Side */
|
|
.featured-events-grid {
|
|
display: grid;
|
|
gap: var(--space-8);
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.featured-events-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.featured-events-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
.featured-event-card {
|
|
background: white;
|
|
border-radius: var(--radius-xl);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-md);
|
|
transition: all var(--duration-slow) var(--ease-out);
|
|
border: 1px solid var(--color-neutral-200);
|
|
position: relative;
|
|
}
|
|
|
|
.featured-event-card:hover {
|
|
transform: translateY(-8px) scale(1.02);
|
|
box-shadow: var(--shadow-2xl);
|
|
border-color: var(--color-primary-200);
|
|
}
|
|
|
|
.featured-event-image {
|
|
width: 100%;
|
|
height: 240px;
|
|
object-fit: cover;
|
|
transition: transform var(--duration-slow) var(--ease-out);
|
|
}
|
|
|
|
.featured-event-card:hover .featured-event-image {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.featured-event-content {
|
|
padding: var(--space-6);
|
|
}
|
|
|
|
.featured-event-badges {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
margin-bottom: var(--space-4);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.featured-event-title {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-xl);
|
|
font-weight: 700;
|
|
margin-bottom: var(--space-3);
|
|
color: var(--color-neutral-900);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.featured-event-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.featured-event-meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
color: var(--color-neutral-600);
|
|
font-size: var(--text-sm);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.featured-event-description {
|
|
color: var(--color-neutral-700);
|
|
margin-bottom: var(--space-6);
|
|
line-height: 1.6;
|
|
font-size: var(--text-sm);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.featured-event-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.featured-event-price {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-xl);
|
|
font-weight: 800;
|
|
color: var(--color-primary-600);
|
|
}
|
|
|
|
.features-section {
|
|
background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-accent-50) 100%);
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
gap: var(--space-8);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.features-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.features-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
|
|
.feature-card {
|
|
background: white;
|
|
padding: var(--space-8);
|
|
border-radius: var(--radius-xl);
|
|
text-align: center;
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--color-neutral-200);
|
|
transition: all var(--duration-normal) var(--ease-out);
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-accent-400) 100%);
|
|
color: white;
|
|
border-radius: var(--radius-xl);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto var(--space-4);
|
|
box-shadow: var(--shadow-purple-sm);
|
|
}
|
|
|
|
.feature-title {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-lg);
|
|
font-weight: 700;
|
|
margin-bottom: var(--space-3);
|
|
color: var(--color-neutral-900);
|
|
}
|
|
|
|
.feature-description {
|
|
color: var(--color-neutral-600);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.stats-section {
|
|
background: var(--color-neutral-900);
|
|
color: white;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
gap: var(--space-8);
|
|
text-align: center;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.stats-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
|
|
.stat-item {
|
|
padding: var(--space-6);
|
|
}
|
|
|
|
.stat-number {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
font-weight: 900;
|
|
color: var(--color-accent-400);
|
|
display: block;
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.stat-label {
|
|
color: var(--color-neutral-300);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.cta-section {
|
|
background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent-500) 100%);
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
|
|
.cta-content h2 {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(1.875rem, 4vw, 2.5rem);
|
|
font-weight: 800;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.cta-content p {
|
|
font-size: var(--text-lg);
|
|
margin-bottom: var(--space-8);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.footer {
|
|
background: var(--color-neutral-800);
|
|
color: var(--color-neutral-300);
|
|
padding: var(--space-12) 0 var(--space-6);
|
|
}
|
|
|
|
.footer-content {
|
|
display: grid;
|
|
gap: var(--space-8);
|
|
margin-bottom: var(--space-8);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.footer-content {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.footer-content {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
|
|
.footer-section h3 {
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
margin-bottom: var(--space-4);
|
|
color: white;
|
|
}
|
|
|
|
.footer-links {
|
|
list-style: none;
|
|
}
|
|
|
|
.footer-links li {
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.footer-links a {
|
|
color: var(--color-neutral-400);
|
|
text-decoration: none;
|
|
transition: color var(--duration-normal);
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: var(--color-accent-400);
|
|
}
|
|
|
|
.footer-bottom {
|
|
border-top: 1px solid var(--color-neutral-700);
|
|
padding-top: var(--space-6);
|
|
text-align: center;
|
|
color: var(--color-neutral-400);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hero {
|
|
padding: var(--space-12) 0 var(--space-8);
|
|
}
|
|
|
|
.cta-group {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.hero-stats {
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.party-finder {
|
|
margin: calc(-1 * var(--space-8)) auto var(--space-8);
|
|
padding: var(--space-6);
|
|
}
|
|
|
|
.finder-form {
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.finder-search-btn {
|
|
justify-content: center;
|
|
padding: var(--space-4) var(--space-6);
|
|
font-size: var(--text-base);
|
|
}
|
|
}
|
|
|
|
/* Enhanced animations */
|
|
.animate-fadeInUp {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.6s var(--ease-out);
|
|
}
|
|
|
|
.animate-fadeInUp.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.animate-slideInLeft {
|
|
opacity: 0;
|
|
transform: translateX(-30px);
|
|
transition: all 0.5s var(--ease-out);
|
|
}
|
|
|
|
.animate-slideInLeft.visible {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.animate-slideInRight {
|
|
opacity: 0;
|
|
transform: translateX(30px);
|
|
transition: all 0.5s var(--ease-out);
|
|
}
|
|
|
|
.animate-slideInRight.visible {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* Loading shimmer effect */
|
|
.shimmer {
|
|
background: linear-gradient(90deg,
|
|
var(--color-neutral-200) 25%,
|
|
var(--color-neutral-100) 50%,
|
|
var(--color-neutral-200) 75%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
</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: 40px; height: 40px; background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent-500) 100%); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-family: var(--font-display); box-shadow: var(--shadow-purple-sm);">A</div>
|
|
<span style="font-size: var(--text-xl); font-weight: 800; color: var(--color-neutral-900); font-family: var(--font-display);">Aperonight</span>
|
|
</div>
|
|
<div style="display: flex; gap: var(--space-2); align-items: center;">
|
|
<a href="#events" class="nav-link">Events</a>
|
|
<a href="#features" class="nav-link">About</a>
|
|
<a href="#contact" class="nav-link">Contact</a>
|
|
<button class="btn btn-md btn-outline" style="margin-left: var(--space-2);">Sign In</button>
|
|
<button class="btn btn-md btn-primary">Get Started</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="container">
|
|
<div class="hero-content">
|
|
<h1>Discover Premium Afterwork Events</h1>
|
|
<p class="subtitle">Connect with professionals, explore unique venues, and create memorable experiences at carefully curated afterwork events in your city.</p>
|
|
|
|
<div class="cta-group">
|
|
<button class="btn btn-lg btn-primary">
|
|
<i data-lucide="search" style="width: 20px; height: 20px;"></i>
|
|
Explore Events
|
|
</button>
|
|
<button class="btn btn-lg btn-secondary">
|
|
<i data-lucide="plus" style="width: 20px; height: 20px;"></i>
|
|
Host an Event
|
|
</button>
|
|
</div>
|
|
|
|
<div class="hero-stats">
|
|
<div class="hero-stat">
|
|
<span class="hero-stat-number">150+</span>
|
|
<span class="hero-stat-label">Events Monthly</span>
|
|
</div>
|
|
<div class="hero-stat">
|
|
<span class="hero-stat-number">5.2K</span>
|
|
<span class="hero-stat-label">Active Members</span>
|
|
</div>
|
|
<div class="hero-stat">
|
|
<span class="hero-stat-number">200+</span>
|
|
<span class="hero-stat-label">Partner Venues</span>
|
|
</div>
|
|
<div class="hero-stat">
|
|
<span class="hero-stat-number">98%</span>
|
|
<span class="hero-stat-label">Satisfaction</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Party Finder Section -->
|
|
<section style="padding: 0;">
|
|
<div class="container">
|
|
<div class="party-finder animate-fadeInUp">
|
|
<div class="finder-header">
|
|
<h2 class="finder-title">Find Your Perfect Event</h2>
|
|
<p class="finder-subtitle">Discover afterwork parties tailored to your preferences</p>
|
|
</div>
|
|
|
|
<form class="finder-form">
|
|
<div class="finder-field">
|
|
<label class="finder-label">
|
|
<i data-lucide="calendar" style="width: 16px; height: 16px; display: inline; margin-right: var(--space-1);"></i>
|
|
Date
|
|
</label>
|
|
<input type="date" class="finder-input focus-ring" id="event-date">
|
|
</div>
|
|
|
|
<div class="finder-field">
|
|
<label class="finder-label">
|
|
<i data-lucide="map-pin" style="width: 16px; height: 16px; display: inline; margin-right: var(--space-1);"></i>
|
|
City
|
|
</label>
|
|
<select class="finder-select focus-ring" id="event-city">
|
|
<option value="">Choose a city</option>
|
|
<option value="paris">Paris</option>
|
|
<option value="london">London</option>
|
|
<option value="berlin">Berlin</option>
|
|
<option value="madrid">Madrid</option>
|
|
<option value="barcelona">Barcelona</option>
|
|
<option value="amsterdam">Amsterdam</option>
|
|
<option value="rome">Rome</option>
|
|
<option value="zurich">Zurich</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="finder-field">
|
|
<label class="finder-label">
|
|
<i data-lucide="users" style="width: 16px; height: 16px; display: inline; margin-right: var(--space-1);"></i>
|
|
Event Type
|
|
</label>
|
|
<select class="finder-select focus-ring" id="event-type">
|
|
<option value="">All types</option>
|
|
<option value="networking">Networking</option>
|
|
<option value="tech">Tech & Innovation</option>
|
|
<option value="creative">Creative & Design</option>
|
|
<option value="business">Business</option>
|
|
<option value="startup">Startup</option>
|
|
<option value="wine">Wine & Tasting</option>
|
|
<option value="art">Art & Culture</option>
|
|
<option value="music">Music & Entertainment</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="finder-field price-range">
|
|
<label class="finder-label">
|
|
<div class="price-range-label">
|
|
<span>
|
|
<i data-lucide="euro" style="width: 16px; height: 16px; display: inline; margin-right: var(--space-1);"></i>
|
|
Price Range
|
|
</span>
|
|
<span class="price-value" id="price-display">€0 - €100</span>
|
|
</div>
|
|
</label>
|
|
<div style="display: flex; gap: var(--space-3); align-items: center;">
|
|
<input type="range" class="price-slider" id="price-min" min="0" max="100" value="0" style="flex: 1;">
|
|
<span style="color: var(--color-neutral-500); font-weight: 600;">to</span>
|
|
<input type="range" class="price-slider" id="price-max" min="0" max="100" value="100" style="flex: 1;">
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="finder-search-btn">
|
|
<i data-lucide="search" style="width: 20px; height: 20px;"></i>
|
|
Find Events
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Featured Events Section -->
|
|
<section class="section featured-events" id="events">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Featured This Week</h2>
|
|
<p class="section-description">Handpicked premium events that bring together the best professionals and creators in the city.</p>
|
|
</div>
|
|
|
|
<div class="featured-events-grid animate-fadeInUp">
|
|
<!-- Featured Event 1 -->
|
|
<div class="featured-event-card animate-slideInLeft">
|
|
<img src="https://images.unsplash.com/photo-1540039155733-5bb30b53aa14?w=600&h=300&fit=crop" alt="Tech Networking Night" class="featured-event-image">
|
|
<div class="featured-event-content">
|
|
<div class="featured-event-badges">
|
|
<span class="badge badge-featured">★ Featured</span>
|
|
<span class="badge badge-available">Available</span>
|
|
</div>
|
|
<h3 class="featured-event-title">Tech & Innovation Networking Night</h3>
|
|
<div class="featured-event-meta">
|
|
<div class="featured-event-meta-item">
|
|
<i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
|
|
Thu, Mar 15 • 18:30 - 22:00
|
|
</div>
|
|
<div class="featured-event-meta-item">
|
|
<i data-lucide="map-pin" style="width: 16px; height: 16px;"></i>
|
|
Le Perchoir Marais, Paris
|
|
</div>
|
|
<div class="featured-event-meta-item">
|
|
<i data-lucide="users" style="width: 16px; height: 16px;"></i>
|
|
85 attendees • 15 spots left
|
|
</div>
|
|
</div>
|
|
<p class="featured-event-description">Join 100+ tech professionals for an exclusive evening of networking, drinks, and insights into the latest innovation trends. Connect with startups, investors, and industry leaders.</p>
|
|
<div class="featured-event-footer">
|
|
<span class="featured-event-price">€35</span>
|
|
<button class="btn btn-sm btn-primary">Reserve Spot</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Featured Event 2 -->
|
|
<div class="featured-event-card animate-fadeInUp">
|
|
<img src="https://images.unsplash.com/photo-1574391884720-bbc3740c59d1?w=400&h=240&fit=crop" alt="Creative Afterwork" class="featured-event-image">
|
|
<div class="featured-event-content">
|
|
<div class="featured-event-badges">
|
|
<span class="badge badge-vip">VIP</span>
|
|
<span class="badge badge-limited">Limited</span>
|
|
</div>
|
|
<h3 class="featured-event-title">Creative Directors Exclusive Meetup</h3>
|
|
<div class="featured-event-meta">
|
|
<div class="featured-event-meta-item">
|
|
<i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
|
|
Fri, Mar 16 • 19:00 - 23:00
|
|
</div>
|
|
<div class="featured-event-meta-item">
|
|
<i data-lucide="map-pin" style="width: 16px; height: 16px;"></i>
|
|
Atelier Des Lumières, Paris
|
|
</div>
|
|
<div class="featured-event-meta-item">
|
|
<i data-lucide="users" style="width: 16px; height: 16px;"></i>
|
|
30 creatives • 8 spots left
|
|
</div>
|
|
</div>
|
|
<p class="featured-event-description">An intimate gathering of creative directors, designers, and visual artists. Experience immersive art installations while networking with industry pioneers.</p>
|
|
<div class="featured-event-footer">
|
|
<span class="featured-event-price">€65</span>
|
|
<button class="btn btn-sm btn-primary">Join VIP</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Featured Event 3 -->
|
|
<div class="featured-event-card animate-slideInRight">
|
|
<img src="https://images.unsplash.com/photo-1569949381669-ecf31ae8e613?w=400&h=240&fit=crop" alt="Wine Tasting" class="featured-event-image">
|
|
<div class="featured-event-content">
|
|
<div class="featured-event-badges">
|
|
<span class="badge badge-available">Available</span>
|
|
</div>
|
|
<h3 class="featured-event-title">Wine & Business Premium Tasting</h3>
|
|
<div class="featured-event-meta">
|
|
<div class="featured-event-meta-item">
|
|
<i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
|
|
Sat, Mar 18 • 17:00 - 21:00
|
|
</div>
|
|
<div class="featured-event-meta-item">
|
|
<i data-lucide="map-pin" style="width: 16px; height: 16px;"></i>
|
|
Cave Legrand, Paris
|
|
</div>
|
|
<div class="featured-event-meta-item">
|
|
<i data-lucide="users" style="width: 16px; height: 16px;"></i>
|
|
45 professionals • 12 spots left
|
|
</div>
|
|
</div>
|
|
<p class="featured-event-description">Discover exceptional French wines while connecting with business professionals. Expert sommelier guidance and premium tastings in a historic wine cellar.</p>
|
|
<div class="featured-event-footer">
|
|
<span class="featured-event-price">€55</span>
|
|
<button class="btn btn-sm btn-secondary">Book Now</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-top: var(--space-12);">
|
|
<button class="btn btn-lg btn-outline">View All Events</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section class="section features-section" id="features">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Why Choose Aperonight?</h2>
|
|
<p class="section-description">We curate premium experiences that connect professionals and create lasting relationships.</p>
|
|
</div>
|
|
|
|
<div class="features-grid animate-fadeInUp">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i data-lucide="crown" style="width: 28px; height: 28px;"></i>
|
|
</div>
|
|
<h3 class="feature-title">Premium Curation</h3>
|
|
<p class="feature-description">Every event is carefully selected and designed to provide exceptional value and networking opportunities.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i data-lucide="shield-check" style="width: 28px; height: 28px;"></i>
|
|
</div>
|
|
<h3 class="feature-title">Secure & Trusted</h3>
|
|
<p class="feature-description">Safe payments, verified venues, and trusted community with comprehensive insurance coverage.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i data-lucide="users-2" style="width: 28px; height: 28px;"></i>
|
|
</div>
|
|
<h3 class="feature-title">Quality Networking</h3>
|
|
<p class="feature-description">Connect with verified professionals, entrepreneurs, and industry leaders in intimate settings.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i data-lucide="zap" style="width: 28px; height: 28px;"></i>
|
|
</div>
|
|
<h3 class="feature-title">Instant Booking</h3>
|
|
<p class="feature-description">Seamless reservation process with instant confirmation and easy event management.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Section -->
|
|
<section class="section stats-section">
|
|
<div class="container">
|
|
<div class="stats-grid animate-fadeInUp">
|
|
<div class="stat-item">
|
|
<span class="stat-number">150+</span>
|
|
<div class="stat-label">Monthly Events</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number">5.2K</span>
|
|
<div class="stat-label">Active Members</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number">200+</span>
|
|
<div class="stat-label">Partner Venues</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number">98%</span>
|
|
<div class="stat-label">Satisfaction Rate</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="section cta-section">
|
|
<div class="container">
|
|
<div class="cta-content">
|
|
<h2>Ready to Join the Community?</h2>
|
|
<p>Start discovering amazing events and connect with like-minded professionals in your city.</p>
|
|
<div style="display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap;">
|
|
<button class="btn btn-lg" style="background: white; color: var(--color-primary-600); border: 2px solid white;">
|
|
<i data-lucide="user-plus" style="width: 20px; height: 20px;"></i>
|
|
Join Now - Free
|
|
</button>
|
|
<button class="btn btn-lg btn-ghost" style="border: 2px solid rgba(255,255,255,0.5); color: white;">
|
|
<i data-lucide="calendar" style="width: 20px; height: 20px;"></i>
|
|
Browse Events
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer" id="contact">
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-section">
|
|
<h3>Events</h3>
|
|
<ul class="footer-links">
|
|
<li><a href="#">Find Events</a></li>
|
|
<li><a href="#">Host an Event</a></li>
|
|
<li><a href="#">Event Categories</a></li>
|
|
<li><a href="#">Premium Events</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h3>Community</h3>
|
|
<ul class="footer-links">
|
|
<li><a href="#">Join Us</a></li>
|
|
<li><a href="#">Member Benefits</a></li>
|
|
<li><a href="#">Success Stories</a></li>
|
|
<li><a href="#">Ambassador Program</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h3>Support</h3>
|
|
<ul class="footer-links">
|
|
<li><a href="#">Help Center</a></li>
|
|
<li><a href="#">Contact Us</a></li>
|
|
<li><a href="#">Safety Guidelines</a></li>
|
|
<li><a href="#">Cancellation Policy</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h3>Company</h3>
|
|
<ul class="footer-links">
|
|
<li><a href="#">About Aperonight</a></li>
|
|
<li><a href="#">Careers</a></li>
|
|
<li><a href="#">Press & Media</a></li>
|
|
<li><a href="#">Partner With Us</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© 2024 Aperonight. All rights reserved. • <a href="#" style="color: var(--color-accent-400);">Privacy Policy</a> • <a href="#" style="color: var(--color-accent-400);">Terms of Service</a></p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Initialize Lucide icons
|
|
lucide.createIcons();
|
|
|
|
// Party Finder Functionality
|
|
const priceMin = document.getElementById('price-min');
|
|
const priceMax = document.getElementById('price-max');
|
|
const priceDisplay = document.getElementById('price-display');
|
|
|
|
function updatePriceDisplay() {
|
|
const minVal = parseInt(priceMin.value);
|
|
const maxVal = parseInt(priceMax.value);
|
|
|
|
// Ensure min doesn't exceed max
|
|
if (minVal > maxVal) {
|
|
priceMin.value = maxVal;
|
|
}
|
|
|
|
// Ensure max doesn't go below min
|
|
if (maxVal < minVal) {
|
|
priceMax.value = minVal;
|
|
}
|
|
|
|
const finalMin = Math.min(parseInt(priceMin.value), parseInt(priceMax.value));
|
|
const finalMax = Math.max(parseInt(priceMin.value), parseInt(priceMax.value));
|
|
|
|
priceDisplay.textContent = `€${finalMin} - €${finalMax}`;
|
|
}
|
|
|
|
priceMin.addEventListener('input', updatePriceDisplay);
|
|
priceMax.addEventListener('input', updatePriceDisplay);
|
|
|
|
// Form submission
|
|
document.querySelector('.finder-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = {
|
|
date: document.getElementById('event-date').value,
|
|
city: document.getElementById('event-city').value,
|
|
type: document.getElementById('event-type').value,
|
|
priceMin: priceMin.value,
|
|
priceMax: priceMax.value
|
|
};
|
|
|
|
console.log('Search filters:', formData);
|
|
|
|
// Add loading state to button
|
|
const searchBtn = document.querySelector('.finder-search-btn');
|
|
const originalText = searchBtn.innerHTML;
|
|
searchBtn.innerHTML = '<div style="width: 20px; height: 20px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite;"></div> Searching...';
|
|
|
|
// Simulate search
|
|
setTimeout(() => {
|
|
searchBtn.innerHTML = originalText;
|
|
alert('Search completed! Results would be displayed here.');
|
|
}, 2000);
|
|
});
|
|
|
|
// Set default date to tomorrow
|
|
const tomorrow = new Date();
|
|
tomorrow.setDate(tomorrow.getDate() + 1);
|
|
document.getElementById('event-date').value = tomorrow.toISOString().split('T')[0];
|
|
|
|
// Intersection Observer for animations
|
|
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('visible');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Observe animated elements
|
|
document.querySelectorAll('.animate-fadeInUp, .animate-slideInLeft, .animate-slideInRight').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
|
|
// Add staggered animation delays
|
|
document.querySelectorAll('.feature-card').forEach((card, index) => {
|
|
card.style.transitionDelay = `${index * 0.1}s`;
|
|
});
|
|
|
|
document.querySelectorAll('.stat-item').forEach((stat, index) => {
|
|
stat.style.transitionDelay = `${index * 0.1}s`;
|
|
});
|
|
|
|
document.querySelectorAll('.featured-event-card').forEach((card, index) => {
|
|
card.style.transitionDelay = `${index * 0.2}s`;
|
|
});
|
|
|
|
// Smooth scrolling for navigation links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Add spin animation for loading states
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
</script>
|
|
</body>
|
|
</html> |