From 81bd30a7afcc7c1dcf9cb9b45bb1bee77849d080 Mon Sep 17 00:00:00 2001 From: kbe Date: Wed, 27 Aug 2025 20:00:39 +0200 Subject: [PATCH] Improved design system --- .../enhanced_aperonight_components.html | 262 +++++ .../enhanced_aperonight_home.html | 892 ------------------ .../modern_minimalist_home.html | 423 --------- .../modern_minimalist_theme.css | 252 ----- 4 files changed, 262 insertions(+), 1567 deletions(-) delete mode 100644 .superdesign/design_iterations/enhanced_aperonight_home.html delete mode 100644 .superdesign/design_iterations/modern_minimalist_home.html delete mode 100644 .superdesign/design_iterations/modern_minimalist_theme.css diff --git a/.superdesign/design_iterations/enhanced_aperonight_components.html b/.superdesign/design_iterations/enhanced_aperonight_components.html index c3630cb..4b7332b 100644 --- a/.superdesign/design_iterations/enhanced_aperonight_components.html +++ b/.superdesign/design_iterations/enhanced_aperonight_components.html @@ -525,6 +525,268 @@ color: var(--color-neutral-400); } + /* Enhanced form elements based on finder styles */ + .form-group { + margin-bottom: var(--space-4); + } + + .form-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; + display: block; + } + + .form-input, + .form-select, + .form-textarea { + 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); + width: 100%; + } + + .form-input:focus, + .form-select:focus, + .form-textarea:focus { + outline: none; + border-color: var(--color-primary-500); + background: white; + box-shadow: 0 0 0 4px rgb(168 85 247 / 0.1); + } + + .form-input::placeholder { + color: var(--color-neutral-500); + } + + .form-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); + } + + .form-textarea { + min-height: 100px; + resize: vertical; + } + + .form-error { + color: var(--color-danger); + font-size: var(--text-sm); + margin-top: var(--space-1); + display: flex; + align-items: center; + gap: var(--space-1); + } + + .focus-ring { + transition: all var(--duration-normal) var(--ease-out); + } + + .focus-ring:focus { + outline: none; + border-color: var(--color-primary-500); + background: white; + box-shadow: 0 0 0 4px rgb(168 85 247 / 0.1); + } + + /* Enhanced buttons with gradient effects */ + .btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-2); + font-family: var(--font-display); + font-weight: 700; + border: none; + cursor: pointer; + border-radius: var(--radius-lg); + transition: all var(--duration-normal) var(--ease-out); + text-transform: uppercase; + letter-spacing: 0.05em; + white-space: nowrap; + } + + .btn-sm { + padding: var(--space-2) var(--space-4); + font-size: var(--text-sm); + } + + .btn-md { + padding: var(--space-3) var(--space-6); + font-size: var(--text-base); + } + + .btn-lg { + padding: var(--space-4) var(--space-8); + font-size: var(--text-lg); + } + + .btn-primary { + background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent-500) 100%); + color: white; + box-shadow: var(--shadow-purple-md); + } + + .btn-primary:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-purple-lg); + } + + .btn-secondary { + background: var(--color-neutral-800); + color: white; + } + + .btn-secondary:hover { + background: var(--color-neutral-900); + transform: translateY(-2px); + } + + .btn-outline { + background: transparent; + border: 2px solid var(--color-primary-600); + color: var(--color-primary-600); + } + + .btn-outline:hover { + background: var(--color-primary-50); + transform: translateY(-2px); + } + + .btn-ghost { + background: transparent; + color: var(--color-neutral-700); + } + + .btn-ghost:hover { + background: var(--color-neutral-100); + } + + /* Enhanced badges with better styling */ + .badge { + display: inline-flex; + align-items: center; + padding: var(--space-1) var(--space-3); + border-radius: var(--radius-full); + font-size: var(--text-xs); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + } + + .badge-available { + background: var(--color-success-light); + color: var(--color-success-dark); + border: 1px solid var(--color-success); + } + + .badge-limited { + background: var(--color-warning-light); + color: var(--color-warning-dark); + border: 1px solid var(--color-warning); + } + + .badge-sold-out { + background: var(--color-danger-light); + color: var(--color-danger-dark); + border: 1px solid var(--color-danger); + } + + .badge-featured { + background: var(--color-accent-100); + color: var(--color-accent-700); + border: 1px solid var(--color-accent-300); + } + + .badge-vip { + background: var(--color-primary-100); + color: var(--color-primary-800); + border: 1px solid var(--color-primary-300); + } + + /* Enhanced cards with hover effects */ + .card { + background: white; + border-radius: var(--radius-xl); + padding: var(--space-6); + border: 1px solid var(--color-neutral-200); + box-shadow: var(--shadow-sm); + transition: all var(--duration-slow) var(--ease-out); + } + + .card.hover-lift:hover { + transform: translateY(-8px) scale(1.02); + box-shadow: var(--shadow-2xl); + border-color: var(--color-primary-200); + } + + .card-header { + margin-bottom: var(--space-4); + } + + .card-body { + margin-bottom: var(--space-4); + } + + .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; + } + + .event-card.hover-glow:hover { + transform: translateY(-8px) scale(1.02); + box-shadow: var(--shadow-2xl); + border-color: var(--color-primary-200); + } + + .nav { + background: white; + box-shadow: var(--shadow-sm); + position: sticky; + top: 0; + z-index: 100; + } + + .nav-link { + color: var(--color-neutral-700); + text-decoration: none; + font-weight: 600; + padding: var(--space-3) var(--space-2); + border-radius: var(--radius); + transition: all var(--duration-normal); + } + + .nav-link:hover { + color: var(--color-primary-600); + background: var(--color-primary-50); + } + + .container { + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--space-4); + } + @media (max-width: 768px) { .component-grid { grid-template-columns: 1fr; diff --git a/.superdesign/design_iterations/enhanced_aperonight_home.html b/.superdesign/design_iterations/enhanced_aperonight_home.html deleted file mode 100644 index 1fe0ef0..0000000 --- a/.superdesign/design_iterations/enhanced_aperonight_home.html +++ /dev/null @@ -1,892 +0,0 @@ - - - - - - Aperonight - Discover Premium Afterwork Events - - - - - - - - - - - - -
-
-
-

Discover Premium Afterwork Events

-

Connect with professionals, explore unique venues, and create memorable experiences at carefully curated afterwork events in your city.

- -
- - -
- -
-
- 150+ - Events Monthly -
-
- 5.2K - Active Members -
-
- 200+ - Partner Venues -
-
- 98% - Satisfaction -
-
-
-
-
- - - - - -
-
-
-

Why Choose Aperonight?

-

We curate premium experiences that connect professionals and create lasting relationships.

-
- -
-
-
- -
-

Premium Curation

-

Every event is carefully selected and designed to provide exceptional value and networking opportunities.

-
- -
-
- -
-

Secure & Trusted

-

Safe payments, verified venues, and trusted community with comprehensive insurance coverage.

-
- -
-
- -
-

Quality Networking

-

Connect with verified professionals, entrepreneurs, and industry leaders in intimate settings.

-
- -
-
- -
-

Instant Booking

-

Seamless reservation process with instant confirmation and easy event management.

-
-
-
-
- - -
-
-
-
- 150+ -
Monthly Events
-
-
- 5.2K -
Active Members
-
-
- 200+ -
Partner Venues
-
-
- 98% -
Satisfaction Rate
-
-
-
-
- - -
-
-
-

Ready to Join the Community?

-

Start discovering amazing events and connect with like-minded professionals in your city.

-
- - -
-
-
-
- - - - - - - \ No newline at end of file diff --git a/.superdesign/design_iterations/modern_minimalist_home.html b/.superdesign/design_iterations/modern_minimalist_home.html deleted file mode 100644 index 6cbf4f3..0000000 --- a/.superdesign/design_iterations/modern_minimalist_home.html +++ /dev/null @@ -1,423 +0,0 @@ - - - - - - Aperonight - Premium Event Booking - - - - - - - - - - - - -
-
-

Discover Amazing Events in Your City

-

Join thousands of people at premium afterwork events, networking sessions, and exclusive gatherings.

-
- - -
-
-
- - -
-
-

Featured Events

-
-
- Tech Afterwork -
-

Tech Afterwork Networking

-
- - Thursday, March 15, 2024 • 6:00 PM -
-

Connect with tech professionals over drinks and discover the latest trends in the industry.

-
- €25 -
- Available - -
-
-
-
- -
- Music Event -
-

Rooftop Music Session

-
- - Saturday, March 18, 2024 • 8:00 PM -
-

Enjoy live music performances under the stars with amazing city views.

-
- €35 -
- Featured - -
-
-
-
- -
- Art Gallery -
-

Art Gallery Opening

-
- - Friday, March 22, 2024 • 7:00 PM -
-

Discover emerging artists in an intimate gallery setting with wine and appetizers.

-
- €20 -
- Few Left - -
-
-
-
-
-
- -
-
-
- - -
-
-

Why Choose Aperonight?

-
-
-
- -
-

Curated Events

-

Hand-picked premium events that bring together like-minded professionals and creatives.

-
-
-
- -
-

Secure Booking

-

Safe and secure payment processing with instant ticket confirmation and easy refunds.

-
-
-
- -
-

Easy Management

-

Simple event discovery, booking, and management all in one seamless platform.

-
-
-
- -
-

Community Focused

-

Building meaningful connections through shared experiences and quality events.

-
-
-
-
- - -
-
-
-
- 50+ -
Events This Month
-
-
- 2.5K -
Happy Attendees
-
-
- 100+ -
Partner Venues
-
-
- 95% -
Satisfaction Rate
-
-
-
-
- - - - - - - \ No newline at end of file diff --git a/.superdesign/design_iterations/modern_minimalist_theme.css b/.superdesign/design_iterations/modern_minimalist_theme.css deleted file mode 100644 index 97bca41..0000000 --- a/.superdesign/design_iterations/modern_minimalist_theme.css +++ /dev/null @@ -1,252 +0,0 @@ -/* Modern Minimalist Design System for Event Booking */ -:root { - /* Colors - Clean and Professional */ - --background: #ffffff; - --foreground: #0a0a0a; - --card: #ffffff; - --card-foreground: #0a0a0a; - --popover: #ffffff; - --popover-foreground: #0a0a0a; - --primary: #2563eb; - --primary-foreground: #ffffff; - --secondary: #f1f5f9; - --secondary-foreground: #334155; - --muted: #f8fafc; - --muted-foreground: #64748b; - --accent: #3b82f6; - --accent-foreground: #ffffff; - --destructive: #ef4444; - --destructive-foreground: #ffffff; - --border: #e2e8f0; - --input: #f8fafc; - --ring: #3b82f6; - - /* Event-specific colors */ - --event-featured: #8b5cf6; - --event-sold-out: #ef4444; - --event-available: #10b981; - --ticket-premium: #f59e0b; - --ticket-standard: #6b7280; - - /* Typography - Clean and readable */ - --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - --font-mono: 'JetBrains Mono', monospace; - - /* Font sizes */ - --text-xs: 0.75rem; - --text-sm: 0.875rem; - --text-base: 1rem; - --text-lg: 1.125rem; - --text-xl: 1.25rem; - --text-2xl: 1.5rem; - --text-3xl: 1.875rem; - --text-4xl: 2.25rem; - - /* Spacing */ - --space-1: 0.25rem; - --space-2: 0.5rem; - --space-3: 0.75rem; - --space-4: 1rem; - --space-6: 1.5rem; - --space-8: 2rem; - --space-12: 3rem; - --space-16: 4rem; - - /* Border radius */ - --radius: 8px; - --radius-sm: 4px; - --radius-md: 6px; - --radius-lg: 12px; - --radius-xl: 16px; - - /* Shadows - Subtle and clean */ - --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); - --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); -} - -/* Component styles */ -.btn-primary { - background: var(--primary); - color: var(--primary-foreground); - padding: 12px 24px; - border-radius: var(--radius); - font-weight: 600; - border: none; - cursor: pointer; - transition: all 0.2s ease; - box-shadow: var(--shadow-sm); -} - -.btn-primary:hover { - background: #1d4ed8; - box-shadow: var(--shadow-md); - transform: translateY(-1px); -} - -.btn-secondary { - background: var(--secondary); - color: var(--secondary-foreground); - padding: 12px 24px; - border-radius: var(--radius); - font-weight: 500; - border: 1px solid var(--border); - cursor: pointer; - transition: all 0.2s ease; -} - -.btn-secondary:hover { - background: #e2e8f0; - border-color: var(--accent); -} - -.card { - background: var(--card); - border-radius: var(--radius-lg); - box-shadow: var(--shadow); - padding: var(--space-6); - border: 1px solid var(--border); - transition: all 0.3s ease; -} - -.card:hover { - box-shadow: var(--shadow-lg); - transform: translateY(-2px); -} - -.event-card { - background: var(--card); - border-radius: var(--radius-lg); - overflow: hidden; - box-shadow: var(--shadow); - transition: all 0.3s ease; - border: 1px solid var(--border); -} - -.event-card:hover { - box-shadow: var(--shadow-xl); - transform: translateY(-4px); -} - -.ticket-card { - background: var(--muted); - border-radius: var(--radius); - padding: var(--space-4); - border: 2px solid transparent; - transition: all 0.2s ease; -} - -.ticket-card.selected { - border-color: var(--primary); - background: var(--primary-foreground); - box-shadow: 0 0 0 4px rgb(59 130 246 / 0.1); -} - -.form-input { - background: var(--input); - border: 1px solid var(--border); - border-radius: var(--radius); - padding: 12px 16px; - font-size: var(--text-base); - transition: all 0.2s ease; -} - -.form-input:focus { - outline: none; - border-color: var(--primary); - box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1); -} - -.badge { - display: inline-flex; - align-items: center; - padding: 4px 12px; - border-radius: 9999px; - font-size: var(--text-xs); - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.badge-available { - background: rgb(220 252 231); - color: rgb(22 163 74); -} - -.badge-sold-out { - background: rgb(254 226 226); - color: rgb(220 38 38); -} - -.badge-featured { - background: rgb(243 232 255); - color: rgb(147 51 234); -} - -/* Navigation */ -.nav { - background: var(--background); - backdrop-filter: blur(10px); - border-bottom: 1px solid var(--border); -} - -.nav-link { - color: var(--muted-foreground); - font-weight: 500; - padding: 8px 16px; - border-radius: var(--radius); - transition: all 0.2s ease; - text-decoration: none; -} - -.nav-link:hover, .nav-link.active { - color: var(--primary); - background: rgb(59 130 246 / 0.05); -} - -/* Animations */ -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes slideIn { - from { - opacity: 0; - transform: translateX(-10px); - } - to { - opacity: 1; - transform: translateX(0); - } -} - -.animate-fadeInUp { - animation: fadeInUp 0.6s ease-out; -} - -.animate-slideIn { - animation: slideIn 0.4s ease-out; -} - -/* Responsive design */ -@media (max-width: 768px) { - :root { - --space-4: 0.75rem; - --space-6: 1rem; - --space-8: 1.5rem; - } - - .btn-primary, .btn-secondary { - padding: 10px 20px; - font-size: var(--text-sm); - } -} \ No newline at end of file