aperonight/app/views/pages/components.html.erb

<div class="py-12">
  <div class="text-center mb-16">
    <h1 class="mb-4">Aperonight Design System</h1>
    <p class="text-xl text-neutral-600 max-w-3xl mx-auto">
      A comprehensive collection of reusable components for premium event booking experiences.
    </p>
  </div>

  <!-- Buttons Section -->
  <section class="mb-16">
    <h2 class="mb-8 text-2xl font-bold">Buttons</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      <div class="card">
        <h3 class="demo-title mb-4">Primary Buttons</h3>
        <div class="flex flex-wrap gap-3">
          <button class="btn btn-sm btn-primary">Small</button>
          <button class="btn btn-md btn-primary">Medium</button>
          <button class="btn btn-lg btn-primary">Large</button>
        </div>
      </div>
      
      <div class="card">
        <h3 class="demo-title mb-4">Secondary Buttons</h3>
        <div class="flex flex-wrap gap-3">
          <button class="btn btn-sm btn-secondary">Small</button>
          <button class="btn btn-md btn-secondary">Medium</button>
          <button class="btn btn-lg btn-secondary">Large</button>
        </div>
      </div>
      
      <div class="card">
        <h3 class="demo-title mb-4">Outline Buttons</h3>
        <div class="flex flex-wrap gap-3">
          <button class="btn btn-sm btn-outline">Small</button>
          <button class="btn btn-md btn-outline">Medium</button>
          <button class="btn btn-lg btn-outline">Large</button>
        </div>
      </div>
      
      <div class="card">
        <h3 class="demo-title mb-4">Ghost Buttons</h3>
        <div class="flex flex-wrap gap-3">
          <button class="btn btn-sm btn-ghost">Small</button>
          <button class="btn btn-md btn-ghost">Medium</button>
          <button class="btn btn-lg btn-ghost">Large</button>
        </div>
      </div>
    </div>
  </section>

  <!-- Form Elements -->
  <section class="mb-16">
    <h2 class="mb-8 text-2xl font-bold">Form Elements</h2>
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <div class="card">
        <h3 class="demo-title mb-4">Input Fields</h3>
        <form>
          <div class="form-group">
            <label class="form-label">Event Name</label>
            <input type="text" class="form-input focus-ring" placeholder="Enter event name">
          </div>
          
          <div class="form-group">
            <label class="form-label">Description</label>
            <textarea class="form-textarea focus-ring" rows="3" placeholder="Describe your event"></textarea>
          </div>
          
          <div class="form-group">
            <label class="form-label">Category</label>
            <select class="form-select focus-ring">
              <option>Select category</option>
              <option>Networking</option>
              <option>Tech</option>
              <option>Creative</option>
            </select>
          </div>
          
          <div class="form-group">
            <div class="search-box">
              <input type="search" class="form-input search-input focus-ring" placeholder="Search events...">
              <i class="search-icon">
                <!-- Search icon would be inserted by Lucide JS -->
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="11" cy="11" r="8"></circle>
                  <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
              </i>
            </div>
          </div>
          
          <div class="flex gap-3 mt-6">
            <button type="submit" class="btn btn-md btn-primary">Submit</button>
            <button type="reset" class="btn btn-md btn-outline">Reset</button>
          </div>
        </form>
      </div>
      
      <div class="card">
        <h3 class="demo-title mb-4">Validation States</h3>
        <div class="form-group">
          <label class="form-label">Email (Valid)</label>
          <input type="email" class="form-input" value="user@example.com" style="border-color: var(--color-success); background: var(--color-success-light);">
          <div class="form-error mt-1" style="color: var(--color-success); display: flex; align-items: center; gap: 0.25rem;">
            <!-- Check icon -->
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
              <polyline points="22 4 12 14.01 9 11.01"></polyline>
            </svg>
            Email is valid
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">Password (Error)</label>
          <input type="password" class="form-input" value="123" style="border-color: var(--color-danger); background: var(--color-danger-light);">
          <div class="form-error">
            <!-- Alert icon -->
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="12" y1="8" x2="12" y2="12"></line>
              <line x1="12" y1="16" x2="12.01" y2="16"></line>
            </svg>
            Password must be at least 8 characters
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">Phone (Warning)</label>
          <input type="tel" class="form-input" value="+33 1 23 45" style="border-color: var(--color-warning); background: var(--color-warning-light);">
          <div class="form-error mt-1" style="color: var(--color-warning-dark); display: flex; align-items: center; gap: 0.25rem;">
            <!-- Warning icon -->
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
              <line x1="12" y1="9" x2="12" y2="13"></line>
              <line x1="12" y1="17" x2="12.01" y2="17"></line>
            </svg>
            Please complete phone number
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Badges and Tags -->
  <section class="mb-16">
    <h2 class="mb-8 text-2xl font-bold">Badges & Tags</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <div class="card">
        <h3 class="demo-title mb-4">Event Status Badges</h3>
        <div class="flex flex-wrap gap-3">
          <span class="badge badge-available">Available</span>
          <span class="badge badge-limited">Limited</span>
          <span class="badge badge-sold-out">Sold Out</span>
          <span class="badge badge-featured">★ Featured</span>
          <span class="badge badge-vip">VIP</span>
        </div>
      </div>
      
      <div class="card">
        <h3 class="demo-title mb-4">Price Tags</h3>
        <div class="flex flex-wrap items-center gap-4">
          <div class="price-tag price-tag-sm" style="color: var(--color-neutral-600);">€15</div>
          <div class="price-tag price-tag-md" style="color: var(--color-primary-600);">€35</div>
          <div class="price-tag price-tag-lg" style="color: var(--color-accent-600);">€55</div>
          <div class="price-tag price-tag-md" style="color: var(--color-neutral-600);">
            <span style="text-decoration: line-through; opacity: 0.7;">€60</span>
            <span style="color: var(--color-success); margin-left: 0.5rem;">€45</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Cards -->
  <section class="mb-16">
    <h2 class="mb-8 text-2xl font-bold">Cards</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="card hover-lift">
        <div class="card-header">
          <h3 class="font-bold mb-2">Basic Card</h3>
          <p class="text-neutral-600 m-0">Simple card with header and content</p>
        </div>
        <div class="card-body">
          <p>This is a basic card component that can be used for various content types. It includes proper spacing and hover effects.</p>
          <button class="btn btn-md btn-primary mt-4">Learn More</button>
        </div>
      </div>
      
      <div class="event-card hover-glow">
        <div style="height: 200px; background: linear-gradient(135deg, var(--color-primary-500), var(--color-accent-500)); display: flex; align-items: center; justify-content: center; color: white; font-size: var(--text-xl); font-weight: bold;">
          Event Image
        </div>
        <div style="padding: var(--space-6);">
          <div class="flex gap-2 mb-4">
            <span class="badge badge-featured">★ Featured</span>
            <span class="badge badge-available">Available</span>
          </div>
          <h3 class="font-bold mb-2 text-neutral-900">Networking Event</h3>
          <p class="text-neutral-600 mb-6 text-sm">Join professionals for an evening of networking and insights.</p>
          <div class="flex justify-between items-center">
            <span class="price-tag price-tag-md" style="color: var(--color-primary-600);">€35</span>
            <button class="btn btn-sm btn-primary">Book Now</button>
          </div>
        </div>
      </div>
      
      <div class="card">
        <h3 class="demo-title mb-4">User Profile</h3>
        <div class="flex items-center gap-4 mb-4">
          <div class="avatar avatar-lg">
            <div class="avatar-image" style="background: linear-gradient(135deg, var(--color-primary-200), var(--color-accent-200));"></div>
            <div class="avatar-status status-online"></div>
          </div>
          <div>
            <h4 class="font-bold mb-1">Alex Johnson</h4>
            <p class="text-neutral-600 text-sm m-0">Senior Developer</p>
            <div class="rating mt-1">
              <!-- Stars would be inserted by Lucide JS -->
              <div class="flex">
                <svg class="rating-star filled" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
                <svg class="rating-star filled" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
                <svg class="rating-star filled" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
                <svg class="rating-star filled" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
                <svg class="rating-star empty" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
              </div>
              <span class="text-sm text-neutral-600 ml-2">4.2</span>
            </div>
          </div>
        </div>
        <div class="flex gap-2">
          <button class="btn btn-sm btn-primary flex-1">Connect</button>
          <button class="btn btn-sm btn-outline">Message</button>
        </div>
      </div>
    </div>
  </section>
</div>