diff --git a/app/assets/stylesheets/application.postcss.css b/app/assets/stylesheets/application.postcss.css index 39944f4..421b4fb 100644 --- a/app/assets/stylesheets/application.postcss.css +++ b/app/assets/stylesheets/application.postcss.css @@ -3,10 +3,47 @@ /* Import Tailwind using PostCSS */ @import "tailwindcss"; -/* Import flash message styles */ -@import "components/flash"; +/* Import our custom theme */ +@import "theme"; -/** Default text color */ +/* Import components */ +@import "components/hero"; +@import "components/flash"; +@import "components/footer"; +@import "components/party-finder"; + +/* Base styles */ body { - color: #555555; + font-family: var(--font-sans); + line-height: 1.6; + color: var(--color-neutral-900); + background: var(--color-neutral-50); +} + +/* App wrapper */ +.app-wrapper { + min-height: 100vh; + display: flex; + flex-direction: column; +} + +/* Main content */ +main { + flex: 1; +} + +/* Footer */ +.footer { + background: var(--color-neutral-800); + color: var(--color-neutral-300); +} + +/* Flash messages */ +.flash { + width: 100%; +} + +/* Yield content */ +.yield { + width: 100%; } diff --git a/app/assets/stylesheets/components/footer.css b/app/assets/stylesheets/components/footer.css new file mode 100644 index 0000000..7cb9f75 --- /dev/null +++ b/app/assets/stylesheets/components/footer.css @@ -0,0 +1,82 @@ + +.footer { + background: var(--color-neutral-800); + color: var(--color-neutral-300); + padding: var(--space-8) 0 var(--space-4); +} + +.footer-content { + display: grid; + gap: var(--space-6); + margin-bottom: var(--space-6); +} + +@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-3); + color: white; + font-size: var(--text-lg); +} + +.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); + font-size: var(--text-sm); +} + +.footer-links a:hover { + color: var(--color-accent-400); +} + +.footer-bottom { + border-top: 1px solid var(--color-neutral-700); + padding-top: var(--space-4); + text-align: center; + color: var(--color-neutral-400); + font-size: var(--text-sm); +} + +@media (max-width: 768px) { + .hero { + padding: var(--space-8) 0 var(--space-6); + } + + .cta-group { + flex-direction: column; + align-items: center; + } + + .hero-stats { + gap: var(--space-4); + } + + .features-grid { + grid-template-columns: 1fr; + } + + .stats-grid { + grid-template-columns: repeat(2, 1fr); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/hero.css b/app/assets/stylesheets/components/hero.css new file mode 100644 index 0000000..a48eb11 --- /dev/null +++ b/app/assets/stylesheets/components/hero.css @@ -0,0 +1,238 @@ +.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-12) 0 var(--space-8); + 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(2rem, 5vw, 3.5rem); + font-weight: 900; + margin-bottom: var(--space-4); + 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-lg); + color: var(--color-neutral-600); + margin-bottom: var(--space-6); + 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-8); +} + +.hero-stats { + display: flex; + justify-content: center; + gap: var(--space-6); + flex-wrap: wrap; +} + +.hero-stat { + text-align: center; +} + +.hero-stat-number { + font-family: var(--font-display); + font-size: var(--text-xl); + font-weight: 800; + color: var(--color-primary-600); + display: block; +} + +.hero-stat-label { + font-size: var(--text-xs); + color: var(--color-neutral-500); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.section { + padding: var(--space-12) 0; +} + +.section-header { + text-align: center; + margin-bottom: var(--space-8); +} + +.section-title { + font-family: var(--font-display); + font-size: clamp(1.5rem, 3vw, 2.5rem); + font-weight: 800; + margin-bottom: var(--space-3); + 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; +} + +.features-section { + background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-accent-50) 100%); +} + +.features-grid { + display: grid; + gap: var(--space-6); +} + +@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-6); + 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: 56px; + height: 56px; + 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-3); + 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-2); + color: var(--color-neutral-900); +} + +.feature-description { + color: var(--color-neutral-600); + line-height: 1.6; + font-size: var(--text-sm); +} + +.stats-section { + background: var(--color-neutral-900); + color: white; +} + +.stats-grid { + display: grid; + gap: var(--space-6); + 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-4); +} + +.stat-number { + font-family: var(--font-display); + font-size: clamp(1.5rem, 4vw, 2.5rem); + font-weight: 900; + color: var(--color-accent-400); + display: block; + margin-bottom: var(--space-1); +} + +.stat-label { + color: var(--color-neutral-300); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.1em; + font-size: var(--text-xs); +} + +.cta-section { + background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent-500) 100%); + color: white; + text-align: center; + padding: var(--space-12) 0; +} + +.cta-content h2 { + font-family: var(--font-display); + font-size: clamp(1.5rem, 3vw, 2rem); + font-weight: 800; + margin-bottom: var(--space-3); +} + +.cta-content p { + font-size: var(--text-lg); + margin-bottom: var(--space-6); + opacity: 0.9; +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/party-finder.css b/app/assets/stylesheets/components/party-finder.css new file mode 100644 index 0000000..6f4d9a7 --- /dev/null +++ b/app/assets/stylesheets/components/party-finder.css @@ -0,0 +1,210 @@ +.party-finder { + background: white; + border-radius: var(--radius-2xl); + box-shadow: var(--shadow-2xl); + padding: var(--space-8); + margin: var(--space-12) auto; + 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); +} + +@media (max-width: 768px) { + .party-finder { + margin: var(--space-8) auto; + 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); +} + +/* Loading spinner animation */ +@keyframes spin { + to { transform: rotate(360deg); } +} \ No newline at end of file diff --git a/app/assets/stylesheets/theme.css b/app/assets/stylesheets/theme.css index a15a5b9..76931c7 100644 --- a/app/assets/stylesheets/theme.css +++ b/app/assets/stylesheets/theme.css @@ -1,161 +1,795 @@ -/* Theme Rules from docs/theme-rules.md - Light Theme Only */ - -/* Custom properties for the design system */ :root { - /* Primary - Purple gradient system */ - --color-primary-50: #faf5ff; - --color-primary-100: #f3e8ff; - --color-primary-200: #e9d5ff; - --color-primary-300: #d8b4fe; - --color-primary-400: #c084fc; - --color-primary-500: #a855f7; - --color-primary-600: #9333ea; - --color-primary-700: #7e22ce; - --color-primary-800: #6b21a8; - --color-primary-900: #581c87; + /* Colors */ + --color-primary-50: #f5f3ff; + --color-primary-100: #ede9fe; + --color-primary-200: #ddd6fe; + --color-primary-300: #c4b5fd; + --color-primary-400: #a78bfa; + --color-primary-500: #8b5cf6; + --color-primary-600: #7c3aed; + --color-primary-700: #6d28d9; + --color-primary-800: #5b21b6; + --color-primary-900: #4c1d95; - /* Accent - Pink gradient */ - --color-accent-400: #f472b6; - --color-accent-500: #ec4899; - --color-accent-600: #db2777; + --color-accent-50: #fdf2f8; + --color-accent-100: #fce7f3; + --color-accent-200: #fbcfe8; + --color-accent-300: #f9a8d4; + --color-accent-400: #f472b6; + --color-accent-500: #ec4899; + --color-accent-600: #db2777; + --color-accent-700: #be185d; + --color-accent-800: #9d174d; + --color-accent-900: #831843; - /* Neutral - Slate system */ - --color-neutral-50: #f8fafc; - --color-neutral-100: #f1f5f9; - --color-neutral-200: #e2e8f0; - --color-neutral-300: #cbd5e1; - --color-neutral-400: #94a3b8; - --color-neutral-500: #64748b; - --color-neutral-600: #475569; - --color-neutral-700: #334155; - --color-neutral-800: #1e293b; - --color-neutral-900: #0f172a; + --color-neutral-50: #fafafa; + --color-neutral-100: #f5f5f5; + --color-neutral-200: #e5e5e5; + --color-neutral-300: #d4d4d4; + --color-neutral-400: #a3a3a3; + --color-neutral-500: #737373; + --color-neutral-600: #525252; + --color-neutral-700: #404040; + --color-neutral-800: #262626; + --color-neutral-900: #171717; - /* Font families */ - --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --color-success: #10b981; + --color-success-light: #d1fae5; + --color-success-dark: #047857; - /* Spacing scale */ - --space-1: 0.25rem; /* 4px */ - --space-2: 0.5rem; /* 8px */ - --space-3: 0.75rem; /* 12px */ - --space-4: 1rem; /* 16px */ - --space-5: 1.25rem; /* 20px */ - --space-6: 1.5rem; /* 24px */ - --space-8: 2rem; /* 32px */ - --space-10: 2.5rem; /* 40px */ - --space-12: 3rem; /* 48px */ + --color-warning: #f59e0b; + --color-warning-light: #fef3c7; + --color-warning-dark: #b45309; + + --color-danger: #ef4444; + --color-danger-light: #fee2e2; + --color-danger-dark: #b91c1c; + + /* Typography */ + --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + --font-display: 'Outfit', var(--font-sans); + + --text-xs: 0.75rem; /* 12px */ + --text-sm: 0.875rem; /* 14px */ + --text-base: 1rem; /* 16px */ + --text-lg: 1.125rem; /* 18px */ + --text-xl: 1.25rem; /* 20px */ + --text-2xl: 1.5rem; /* 24px */ + --text-3xl: 1.875rem; /* 30px */ + --text-4xl: 2.25rem; /* 36px */ + --text-5xl: 3rem; /* 48px */ + + /* Spacing */ + --space-1: 0.25rem; /* 4px */ + --space-2: 0.5rem; /* 8px */ + --space-3: 0.75rem; /* 12px */ + --space-4: 1rem; /* 16px */ + --space-5: 1.25rem; /* 20px */ + --space-6: 1.5rem; /* 24px */ + --space-8: 2rem; /* 32px */ + --space-10: 2.5rem; /* 40px */ + --space-12: 3rem; /* 48px */ + --space-16: 4rem; /* 64px */ + --space-20: 5rem; /* 80px */ + + /* Radius */ + --radius: 0.25rem; /* 4px */ + --radius-md: 0.5rem; /* 8px */ + --radius-lg: 0.75rem; /* 12px */ + --radius-xl: 1rem; /* 16px */ + --radius-2xl: 1.5rem; /* 24px */ + --radius-full: 9999px; + + /* Shadows */ + --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); + --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + + --shadow-purple-sm: 0 1px 3px 0 rgba(168, 85, 247, 0.1), 0 1px 2px 0 rgba(168, 85, 247, 0.06); + --shadow-purple-md: 0 4px 6px -1px rgba(168, 85, 247, 0.1), 0 2px 4px -1px rgba(168, 85, 247, 0.06); + --shadow-purple-lg: 0 10px 15px -3px rgba(168, 85, 247, 0.1), 0 4px 6px -2px rgba(168, 85, 247, 0.05); + + /* Transitions */ + --duration-fast: 150ms; + --duration-normal: 300ms; + --duration-slow: 500ms; + + --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +/* Base styles */ +* { + 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); +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--space-4); +} + +/* Typography */ +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-display); + font-weight: 700; + line-height: 1.2; + margin-bottom: var(--space-2); +} + +h1 { + font-size: var(--text-4xl); + font-weight: 900; +} + +h2 { + font-size: var(--text-3xl); + font-weight: 800; +} + +h3 { + font-size: var(--text-2xl); + font-weight: 700; +} + +h4 { + font-size: var(--text-xl); + font-weight: 700; +} + +p { + margin-bottom: var(--space-4); +} + +/* Buttons */ +.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); } -/* Button components */ .btn-primary { - @apply bg-gradient-to-r from-purple-600 to-pink-600 text-white font-medium py-2 px-4 rounded-lg shadow-sm hover:shadow-md transition-all duration-200; + 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 { - @apply bg-white text-purple-600 border border-purple-200 font-medium py-2 px-4 rounded-lg hover:bg-purple-50 transition-colors duration-200; + background: var(--color-neutral-800); + color: white; } -.btn-destructive { - @apply bg-red-600 text-white font-medium py-2 px-4 rounded-lg shadow-sm hover:bg-red-700 transition-colors duration-200; +.btn-secondary:hover { + background: var(--color-neutral-900); + transform: translateY(-2px); } -/* Card components */ -.card { - @apply bg-white rounded-lg shadow-sm border border-neutral-200 p-6 hover:shadow-md transition-shadow duration-200; +.btn-outline { + background: transparent; + border: 2px solid var(--color-primary-600); + color: var(--color-primary-600); } -.card-header { - @apply pb-4 border-b border-neutral-200 mb-4; +.btn-outline:hover { + background: var(--color-primary-50); + transform: translateY(-2px); } -.card-body { - @apply space-y-4; +.btn-ghost { + background: transparent; + color: var(--color-neutral-700); } -/* Form components */ -.form-input { - @apply block w-full rounded-md border-neutral-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm; +.btn-ghost:hover { + background: var(--color-neutral-100); +} + +/* Form elements */ +.form-group { + margin-bottom: var(--space-4); } .form-label { - @apply block text-sm font-medium text-neutral-700 mb-1; + 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 rgba(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 { - @apply text-sm text-red-600 mt-1; -} - -/* Navigation */ -.nav-link { - @apply text-neutral-600 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200; -} - -.nav-link-active { - @apply text-purple-600 bg-purple-50; -} - -/* Layout utilities */ -.container { - @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8; -} - -.grid-responsive { - @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6; -} - -.grid-cards { - @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6; -} - -/* Animation utilities */ -.hover-lift { - @apply transition-transform duration-200 hover:-translate-y-1; -} - -.hover-glow { - @apply transition-all duration-200 hover:shadow-lg hover:shadow-purple-500/25; + 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 { - @apply focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2; + transition: all var(--duration-normal) var(--ease-out); } -.transition-fast { - @apply transition-all duration-150 ease-in-out; +.focus-ring:focus { + outline: none; + border-color: var(--color-primary-500); + background: white; + box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.1); } -.transition-normal { - @apply transition-all duration-200 ease-in-out; +/* Badges */ +.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; } -.transition-slow { - @apply transition-all duration-300 ease-in-out; +.badge-available { + background: var(--color-success-light); + color: var(--color-success-dark); + border: 1px solid var(--color-success); } -/* State utilities */ -.disabled { - @apply opacity-50 cursor-not-allowed; +.badge-limited { + background: var(--color-warning-light); + color: var(--color-warning-dark); + border: 1px solid var(--color-warning); } -.animate-pulse-subtle { - @apply animate-pulse; - animation-duration: 3s; +.badge-sold-out { + background: var(--color-danger-light); + color: var(--color-danger-dark); + border: 1px solid var(--color-danger); } -.fade-in { - @apply animate-in fade-in-0 duration-500; +.badge-featured { + background: var(--color-accent-100); + color: var(--color-accent-700); + border: 1px solid var(--color-accent-300); } -/* Accessibility utilities */ -.focus-visible { - @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2; +.badge-vip { + background: var(--color-primary-100); + color: var(--color-primary-800); + border: 1px solid var(--color-primary-300); } -.text-primary { - @apply text-neutral-900; +/* Cards */ +.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); +} + +/* Navigation */ +.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); +} + +/* Search box */ +.search-box { + position: relative; + max-width: 400px; +} + +.search-input { + padding-left: var(--space-12); +} + +.search-icon { + position: absolute; + left: var(--space-4); + top: 50%; + transform: translateY(-50%); + color: var(--color-neutral-400); +} + +/* Price tags */ +.price-tag { + display: inline-flex; + align-items: center; + gap: var(--space-1); + font-family: var(--font-display); + font-weight: 800; +} + +.price-tag-sm { + font-size: var(--text-sm); +} + +.price-tag-md { + font-size: var(--text-lg); +} + +.price-tag-lg { + font-size: var(--text-2xl); +} + +/* Avatars */ +.avatar-group { + display: flex; + align-items: center; + gap: var(--space-2); +} + +.avatar { + width: 40px; + height: 40px; + border-radius: var(--radius-full); + background: var(--color-primary-100); + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; + color: var(--color-primary-600); + border: 2px solid white; + box-shadow: var(--shadow-sm); + position: relative; +} + +.avatar-lg { + width: 60px; + height: 60px; +} + +.avatar-sm { + width: 32px; + height: 32px; + font-size: var(--text-xs); +} + +.avatar-image { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: var(--radius-full); +} + +.avatar-status { + position: absolute; + bottom: 0; + right: 0; + width: 12px; + height: 12px; + border-radius: var(--radius-full); + border: 2px solid white; +} + +.status-online { background: var(--color-success); } +.status-offline { background: var(--color-neutral-400); } +.status-busy { background: var(--color-danger); } + +/* Progress bars */ +.progress-bar { + width: 100%; + height: 8px; + background: var(--color-neutral-200); + border-radius: var(--radius-full); + overflow: hidden; + margin-bottom: var(--space-3); +} + +.progress-fill { + height: 100%; + background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-accent-400) 100%); + border-radius: var(--radius-full); + transition: width var(--duration-slow) var(--ease-out); +} + +/* Rating stars */ +.rating { + display: flex; + gap: var(--space-1); + align-items: center; +} + +.rating-star { + width: 16px; + height: 16px; + color: var(--color-warning); +} + +.rating-star.filled { + fill: currentColor; +} + +.rating-star.empty { + fill: none; + stroke: currentColor; + stroke-width: 2; +} + +/* Notifications */ +.notification { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-4); + border-radius: var(--radius-lg); + margin-bottom: var(--space-3); + font-weight: 500; +} + +.notification-success { + background: var(--color-success-light); + color: var(--color-success-dark); + border: 1px solid var(--color-success); +} + +.notification-warning { + background: var(--color-warning-light); + color: var(--color-warning-dark); + border: 1px solid var(--color-warning); +} + +.notification-error { + background: var(--color-danger-light); + color: var(--color-danger-dark); + border: 1px solid var(--color-danger); +} + +.notification-info { + background: var(--color-primary-50); + color: var(--color-primary-800); + border: 1px solid var(--color-primary-200); +} + +/* Tabs */ +.tabs { + border-bottom: 1px solid var(--color-neutral-200); + margin-bottom: var(--space-6); +} + +.tab-list { + display: flex; + gap: var(--space-1); +} + +.tab-button { + background: none; + border: none; + padding: var(--space-3) var(--space-4); + font-weight: 500; + color: var(--color-neutral-600); + cursor: pointer; + border-bottom: 2px solid transparent; + transition: all var(--duration-normal); + font-family: var(--font-display); +} + +.tab-button:hover { + color: var(--color-primary-600); + background: var(--color-primary-50); + border-radius: var(--radius-md) var(--radius-md) 0 0; +} + +.tab-button.active { + color: var(--color-primary-600); + border-bottom-color: var(--color-primary-600); +} + +.tab-content { + display: none; + padding: var(--space-4) 0; +} + +.tab-content.active { + display: block; +} + +/* Tooltips */ +.tooltip { + position: relative; + display: inline-block; +} + +.tooltip-content { + position: absolute; + bottom: 125%; + left: 50%; + transform: translateX(-50%); + background: var(--color-neutral-900); + color: white; + padding: var(--space-2) var(--space-3); + border-radius: var(--radius); + font-size: var(--text-sm); + white-space: nowrap; + opacity: 0; + visibility: hidden; + transition: all var(--duration-normal); + z-index: 100; +} + +.tooltip-content::after { + content: ''; + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + border: 5px solid transparent; + border-top-color: var(--color-neutral-900); +} + +.tooltip:hover .tooltip-content { + opacity: 1; + visibility: visible; +} + +/* Loading states */ +.loading-spinner { + width: 40px; + height: 40px; + border: 3px solid var(--color-neutral-200); + border-top-color: var(--color-primary-600); + border-radius: var(--radius-full); + animation: spin 1s linear infinite; +} + +.loading-dots { + display: flex; + gap: var(--space-1); +} + +.loading-dot { + width: 8px; + height: 8px; + background: var(--color-primary-600); + border-radius: var(--radius-full); + animation: bounce 1.4s infinite both; +} + +.loading-dot:nth-child(2) { animation-delay: 0.2s; } +.loading-dot:nth-child(3) { animation-delay: 0.4s; } + +@keyframes spin { + to { transform: rotate(360deg); } +} + +@keyframes bounce { + 0%, 80%, 100% { transform: scale(0); } + 40% { transform: scale(1); } +} + +/* Breadcrumbs */ +.breadcrumb { + display: flex; + align-items: center; + gap: var(--space-2); + font-size: var(--text-sm); +} + +.breadcrumb-item { + color: var(--color-neutral-600); + text-decoration: none; +} + +.breadcrumb-item:hover { + color: var(--color-primary-600); +} + +.breadcrumb-item.current { + color: var(--color-neutral-900); + font-weight: 600; +} + +.breadcrumb-separator { + color: var(--color-neutral-400); +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .container { + padding: 0 var(--space-3); + } + + h1 { + font-size: var(--text-3xl); + } + + h2 { + font-size: var(--text-2xl); + } + + .btn-lg { + padding: var(--space-3) var(--space-6); + font-size: var(--text-base); + } + + .btn-md { + padding: var(--space-2) var(--space-4); + font-size: var(--text-sm); + } + + .form-input, + .form-select, + .form-textarea { + padding: var(--space-3); + } +} + +/* Additional styles for enhanced Aperonight design */ +.event-card.hover-glow:hover { + transform: translateY(-8px) scale(1.02); + box-shadow: var(--shadow-2xl); + border-color: var(--color-primary-200); +} + +.price-tag { + display: inline-flex; + align-items: center; + gap: var(--space-1); + font-family: var(--font-display); + font-weight: 800; +} + +.price-tag-sm { + font-size: var(--text-sm); +} + +.price-tag-md { + font-size: var(--text-lg); +} + +.price-tag-lg { + font-size: var(--text-2xl); +} + +.search-box { + position: relative; + width: 100%; +} + +.search-input { + padding-left: var(--space-12); +} + +.search-icon { + position: absolute; + left: var(--space-4); + top: 50%; + transform: translateY(-50%); + color: var(--color-neutral-400); } -.text-secondary { - @apply text-neutral-600; -} \ No newline at end of file diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb index 4a4948c..50dc752 100644 --- a/app/controllers/pages_controller.rb +++ b/app/controllers/pages_controller.rb @@ -8,7 +8,7 @@ class PagesController < ApplicationController # Homepage showing featured parties def home # @parties = Party.published.featured.limit(3) - @parties = Party.where(state: :published).order(created_at: :desc) + # @parties = Party.where(state: :published).order(created_at: :desc) if user_signed_in? return redirect_to(dashboard_path) diff --git a/app/views/components/_footer.html.erb b/app/views/components/_footer.html.erb index 6afdaf0..a9d6524 100644 --- a/app/views/components/_footer.html.erb +++ b/app/views/components/_footer.html.erb @@ -1,83 +1,41 @@ - \ No newline at end of file +
+

Community

+ +
+
+

Support

+ +
+
+

Company

+ +
+ +
+

© 2024 Aperonight. All rights reserved. • Privacy Policy • Terms of Service

+
\ No newline at end of file diff --git a/app/views/components/_header.html.erb b/app/views/components/_header.html.erb index 7856db2..a0f0921 100644 --- a/app/views/components/_header.html.erb +++ b/app/views/components/_header.html.erb @@ -1,140 +1,17 @@ -
-
-
+ + \ No newline at end of file diff --git a/app/views/components/_party_finder.html.erb b/app/views/components/_party_finder.html.erb new file mode 100644 index 0000000..10d0e4a --- /dev/null +++ b/app/views/components/_party_finder.html.erb @@ -0,0 +1,157 @@ + +
+
+
+
+

Find Your Perfect Event

+

Discover afterwork parties tailored to your preferences

+
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ + + + +
+
+
+
+ + + + \ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index a941dea..eb9ccd5 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,5 +1,5 @@ - + <%= content_for(:title) || "Aperonight" %> @@ -8,24 +8,33 @@ <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= yield :head %> + + + + + + + + + <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %> <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %> + <%# Includes all stylesheet files in app/assets/stylesheets %> <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %> - <%= stylesheet_link_tag "theme", "data-turbo-track": "reload" %> <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %> - - -
+ + +
<%= render "components/header" %> -
+
<% if flash.any? %> -
+
<%= render "shared/flash_messages" %>
<% end %> @@ -35,12 +44,108 @@
-