SuperCharged-Claude-Code-Upgrade/skills/design-pattern-learner/data/ivan-fioravanti-patterns.md

# Ivan Fioravanti Web Design Patterns

**Source:** https://gist.github.com/ivanfioravanti  
**Patterns Analyzed:** Luxury Travel, Sports Car, Animation  
**Last Updated:** 2026-01-26

## Pattern 1: Futuristic Luxury Travel Website

### Design Tokens

**Colors:**
- Background: Near-black (bg-gray-950, bg-black)
- Text: Icy white (text-gray-50, text-white)
- Accents: Cyan → Purple → Magenta gradients
- Highlights: Soft gold (used sparingly)

**Typography:**
- Headings: Space Grotesk
- Body: Inter
- Scale: Display, h1-h6, body, small, caption

**Effects:**
- Glassmorphism (backdrop-blur, bg-opacity)
- Neon accents (glow rings, animated borders)
- Animated gradients (aurora blobs)
- Micro-interactions (hover lift, shimmer, tilt)

### Component Patterns

#### 1. Hero Section
```html
<!-- Structure -->
<section class="relative min-h-screen flex items-center">
  <!-- Animated gradient overlay -->
  <div class="absolute inset-0 bg-gradient-to-br from-cyan-500 via-purple-500 to-magenta-500 opacity-20" />
  
  <!-- Cinematic background -->
  <Image src="hero-bg" alt="" fill priority className="object-cover" />
  
  <!-- Content -->
  <div class="relative z-10 text-center">
    <h1 class="text-6xl md:text-8xl font-bold">Beyond First Class.</h1>
    <p class="text-xl md:text-2xl mt-6 text-gray-300">Ultra-premium concierge travel</p>
    
    <!-- CTAs with animated borders -->
    <div class="flex gap-4 mt-8">
      <button class="px-8 py-4 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-2xl font-semibold hover:scale-105 transition-transform">
        Design My Trip
      </button>
    </div>
  </div>
</section>
```

**Key Elements:**
- Full-screen height (min-h-screen)
- Gradient overlay on background image
- Large, bold headline
- Gradient CTAs with hover scale
- Relative/absolute positioning for layers

#### 2. Destination Card Grid
```html
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- Card -->
  <div class="group relative overflow-hidden rounded-3xl cursor-pointer">
    <Image src="destination" alt="" className="transition-transform group-hover:scale-110" />
    
    <!-- Shimmer overlay -->
    <div class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent" />
    
    <!-- Content reveal on hover -->
    <div class="absolute bottom-0 left-0 right-0 p-6">
      <h3 class="text-2xl font-bold">Maldives</h3>
      <p class="text-sm text-gray-300 mt-2">Private overwater villas</p>
      <p class="text-lg font-semibold text-cyan-400 mt-4">from €5,000</p>
    </div>
  </div>
</div>
```

**Interactions:**
- Image scale on hover (110%)
- Gradient overlay for readability
- Content reveals from bottom
- Shimmer effect (conic gradient animation)

#### 3. Glass Navbar
```html
<nav class="fixed top-0 left-0 right-0 z-50 backdrop-blur-xl bg-black/30 border-b border-white/10">
  <div class="container mx-auto px-6 py-4 flex items-center justify-between">
    <Logo />
    <div class="hidden md:flex gap-8">
      <a href="#destinations">Destinations</a>
      <a href="#experiences">Experiences</a>
      <a href="#tiers">Membership</a>
    </div>
    <CTA>Request Itinerary</CTA>
  </div>
</nav>
```

**Features:**
- Sticky positioning (fixed)
- Glass effect (backdrop-blur + bg-opacity)
- Thin border for separation
- Mobile responsive (hidden/flex)

#### 4. Signature Experiences List
```html
<div class="space-y-6">
  <!-- Experience item -->
  <div class="group flex items-start gap-6 p-6 rounded-2xl bg-gradient-to-r from-gray-900 to-gray-800 hover:from-cyan-900/30 hover:to-purple-900/30 transition-all">
    <Icon className="w-12 h-12 text-cyan-400" />
    <div>
      <h3 class="text-xl font-bold">Private Jet Hops</h3>
      <p class="text-gray-400 mt-2">Seamless multi-destination luxury</p>
    </div>
  </div>
</div>
```

**Pattern:**
- Horizontal flex layout
- Icon + text grouping
- Gradient background on hover
- Rounded corners (rounded-2xl)

#### 5. Membership Tier Cards
```html
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
  <!-- Tier card -->
  <div class="relative p-8 rounded-3xl bg-gradient-to-b from-gray-900 to-black border border-gray-800 hover:border-cyan-500/50 transition-colors">
    <div class="absolute inset-0 bg-gradient-to-br from-cyan-500/10 to-purple-500/10 rounded-3xl" />
    <div class="relative z-10">
      <h3 class="text-2xl font-bold">Silver</h3>
      <p class="text-gray-400 mt-4">Access to curated destinations</p>
      <ul class="mt-6 space-y-3">
        <li>✓ Priority support</li>
        <li>✓ Flexible bookings</li>
      </ul>
    </div>
  </div>
</div>
```

**Visual Hierarchy:**
- Gradient backgrounds
- Border color change on hover
- Layered content (relative + absolute)
- Checkmark lists

### Animation Patterns

#### Scroll Reveal
```javascript
// Framer Motion
<motion.div
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}
  transition={{ duration: 0.6 }}
/>
```

#### Hover Effects
```css
/* Tilt effect */
.card {
  transition: transform 0.3s ease;
}
.card:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
}

/* Shimmer */
@keyframes shimmer {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}
```

#### Aurora Gradient
```css
@keyframes aurora {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
}
.aurora-blob {
  animation: aurora 8s ease-in-out infinite;
}
```

### Responsive Patterns

```css
/* Mobile-first */
.hero { padding: 1rem; }
@media (min-width: 768px) { .hero { padding: 2rem; } }

/* Container queries */
@container (min-width: 400px) { .card { grid-template-columns: 1fr 1fr; } }
```

### Form Patterns

```html
<form class="space-y-6">
  <!-- Name -->
  <div>
    <label class="block text-sm font-medium mb-2">Full Name</label>
    <input type="text" class="w-full px-4 py-3 rounded-xl bg-gray-900 border border-gray-800 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500 outline-none transition-colors" />
  </div>
  
  <!-- Budget select -->
  <div>
    <label class="block text-sm font-medium mb-2">Budget Range</label>
    <select class="w-full px-4 py-3 rounded-xl bg-gray-900 border border-gray-800">
      <option>€5,000 - €10,000</option>
      <option>€10,000 - €25,000</option>
      <option>€25,000+</option>
    </select>
  </div>
  
  <!-- Interest chips -->
  <div>
    <label class="block text-sm font-medium mb-2">Interests</label>
    <div class="flex flex-wrap gap-2">
      <button type="button" class="px-4 py-2 rounded-full border border-gray-700 hover:border-cyan-500 hover:bg-cyan-500/10 transition-colors">Beach</button>
      <button type="button" class="px-4 py-2 rounded-full border border-gray-700 hover:border-cyan-500 hover:bg-cyan-500/10 transition-colors">Adventure</button>
    </div>
  </div>
</form>
```

## Pattern 2: Sports Car Website (High Performance)

### Design Tokens

**Colors:**
- Primary: Racing red (red-600)
- Secondary: Carbon fiber black (gray-900)
- Accents: Speed yellow (yellow-400)
- Metallic gradients

**Typography:**
- Headings: Racing Sans One / Orbitron
- Body: Rajdhani
- Numbers: Monospace (for stats)

### Component Patterns

#### Spec Card
```html
<div class="bg-gradient-to-br from-gray-900 to-black p-8 rounded-3xl border border-red-500/30">
  <div class="grid grid-cols-2 gap-8">
    <div>
      <p class="text-red-400 text-sm">Top Speed</p>
      <p class="text-4xl font-mono font-bold">217 <span class="text-lg">mph</span></p>
    </div>
    <div>
      <p class="text-red-400 text-sm">0-60</p>
      <p class="text-4xl font-mono font-bold">2.9 <span class="text-lg">sec</span></p>
    </div>
  </div>
</div>
```

#### Performance Graph
```html
<div class="relative h-64 bg-gray-900 rounded-2xl p-6">
  <!-- SVG Graph -->
  <svg viewBox="0 0 400 200" class="w-full h-full">
    <path d="M0,200 Q100,180 200,100 T400,50" fill="none" stroke="url(#gradient)" stroke-width="3" />
    <defs>
      <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#ef4444" />
        <stop offset="100%" stop-color="#facc15" />
      </linearGradient>
    </defs>
  </svg>
</div>
```

## Pattern 3: Animation Showcase

### Animation Types

#### 1. Scroll Parallax
```javascript
const { scrollY } = useScroll();
const y = useTransform(scrollY, [0, 500], [0, 150]);
<motion.div style={{ y }} />
```

#### 2. Text Reveal
```javascript
const text = "Beyond First Class";
return (
  <div>
    {text.split('').map((char, i) => (
      <motion.span
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: i * 0.05 }}
      >
        {char}
      </motion.span>
    ))}
  </div>
);
```

#### 3. Magnetic Button
```javascript
const magneticButton = useRef(null);
const handleMouseMove = (e) => {
  const { clientX, clientY } = e;
  const { left, top, width, height } = magneticButton.current.getBoundingClientRect();
  const x = (clientX - left - width / 2) * 0.3;
  const y = (clientY - top - height / 2) * 0.3;
  magneticButton.current.style.transform = `translate(${x}px, ${y}px)`;
};
```

## Common Patterns Across All Designs

### 1. Gradient Overlays
```css
.gradient-overlay {
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.2) 0%,
    rgba(168, 85, 247, 0.2) 50%,
    rgba(236, 72, 153, 0.2) 100%
  );
}
```

### 2. Glow Effects
```css
.glow {
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.5),
              0 0 40px rgba(168, 85, 247, 0.3),
              0 0 60px rgba(236, 72, 153, 0.2);
}
```

### 3. Border Gradients
```css
.border-gradient {
  position: relative;
  background: linear-gradient(black, black) padding-box,
              linear-gradient(135deg, #06b6d4, #a855f7, #ec4899) border-box;
  border: 2px solid transparent;
  border-radius: 1rem;
}
```

### 4. Backdrop Patterns
```css
.glass {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
```

## Tailwind Config Additions

```javascript
module.exports = {
  theme: {
    extend: {
      colors: {
        aurora: {
          cyan: '#06b6d4',
          purple: '#a855f7',
          magenta: '#ec4899',
        },
      },
      backgroundImage: {
        'aurora-gradient': 'linear-gradient(135deg, #06b6d4, #a855f7, #ec4899)',
        'glass-gradient': 'linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05))',
      },
      animation: {
        'aurora': 'aurora 8s ease-in-out infinite',
        'shimmer': 'shimmer 2s linear infinite',
        'float': 'float 6s ease-in-out infinite',
      },
    },
  },
};
```

## Implementation Checklist

For each new luxury/high-end website:

- [ ] Dark mode base (bg-gray-950/black)
- [ ] Glass navbar (backdrop-blur + fixed)
- [ ] Hero with gradient overlay + cinematic bg
- [ ] Animated CTAs (hover scale + gradient)
- [ ] Card grids (rounded-3xl + hover effects)
- [ ] Scroll reveal animations (Framer Motion)
- [ ] Micro-interactions (hover, focus, active)
- [ ] Responsive breakpoints (sm, md, lg, xl)
- [ ] Accessible (aria-labels, keyboard nav, contrast)
- [ ] Performance (lazy load, optimize images)

## Credit & Attribution

All patterns extracted from gists by Ivan Fioravanti:
- https://gist.github.com/ivanfioravanti/98ba7e5d3f7a88c1756b045d3e565630
- https://gist.github.com/ivanfioravanti/6c019ac5b971ca22c63d9853573b4953
- https://gist.github.com/ivanfioravanti/055070fb66f90fbcc1e54db1ccc5e526

License: These are design prompts/patterns for learning and inspiration.