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

<!-- 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

<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

<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

<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

<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

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

Hover Effects

/* 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

@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

/* 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

<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

<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

<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

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

2. Text Reveal

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

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

.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

.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

.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

.glass {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

Tailwind Config Additions

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.