📚 Add Ivan Fioravanti web design patterns to design-pattern-learner

ANALYZED PATTERNS: - Luxury Travel Website (futuristic luxury theme) - Sports Car Website (high performance theme) - Animation Showcase (motion patterns) PATTERNS EXTRACTED: - Design tokens (colors, typography, effects) - Component templates (hero, cards, navbar, forms) - Animation patterns (scroll reveal, hover effects, parallax) - Responsive patterns (mobile-first, breakpoints) - Tailwind config extensions INCLUDED IN KNOWLEDGE BASE: ✓ Hero sections with gradient overlays ✓ Glass navbar with backdrop blur ✓ Destination cards with hover effects ✓ Membership tier cards ✓ Form patterns with chips ✓ Animation templates (aurora, shimmer, magnetic) ✓ Color gradients (cyan-purple-magenta) ✓ Typography scales (Space Grotesk, Inter) ✓ Micro-interactions (hover lift, tilt, glow) USAGE: The skill now has pre-studied patterns from Ivan Fioravanti's gists. Can immediately apply these patterns to new projects. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-26 14:17:30 +04:00
parent 39e480484f
commit b42e694305
2 changed files with 431 additions and 0 deletions
--- a/skills/design-pattern-learner/data/ivan-fioravanti-patterns.md
+++ b/skills/design-pattern-learner/data/ivan-fioravanti-patterns.md
@@ -0,0 +1,424 @@
+# 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.