🧭 Blueprint du Site Inspiré

Document généré par cloclo depuis https://linear.app

1. Informations générales

1.1 URL analysée

• https://linear.app

2. Structure du site (Architecture)

2.1 Arborescence des sections

• Section 1 : Header
• Section 2 : Hero
• Section 3 : Hero Frame (product showcase)
• Section 4 : Feature Sections (Intake, Plan, Build, Diffs, Monitor)
• Section 5 : Changelog
• Section 6 : Testimonials
• Section 7 : Stats Section
• Section 8 : CTA Section
• Section 9 : Footer

2.2 Description détaillée des sections

Section : Hero

• Rôle : Main value proposition
• Contenu principal : Large headline "The product development system for teams and agents" with animated word-by-word reveal, description, and CTA linking to "/next"
• Composants présents : Hero title with text animations, Description text, Primary CTA button, Feature badge
• Organisation visuelle : Full-width centered text with animated blur transitions, vertical spacing 80px

Section : Hero Frame

• Rôle : Product showcase
• Contenu principal : Interactive screenshot showcase of Linear app interface with sidebar navigation and issue details
• Composants présents : Frame wrapper with grain texture, Sidebar navigation, Issue view panel, Multiple layered images with parallax
• Organisation visuelle : Centered responsive frame with depth effects and shadowing

Section : Feature Sections

• Rôle : Product feature breakdown — Intake, Plan, Build, Diffs, Monitor
• Contenu principal : Sequential full-width sections, each showcasing one product capability with embedded product UI demos
• Composants présents : Section headers with version numbers, Descriptive text, Feature lists, Kanban cards, Gantt chart, Code diff blocks, Charts
• Organisation visuelle : Alternating sections with consistent vertical rhythm, embedded product screenshots with parallax

2.3 Patterns UX identifiés

• Pattern 1 : Sticky top navigation bar
• Pattern 2 : Centered hero with embedded product screenshot
• Pattern 3 : Word-by-word reveal animations with blur transitions
• Pattern 4 : Announcement banner/pill on the right side of hero
• Pattern 5 : Sidebar navigation within product UI demos

3. Design (Identité visuelle)

3.1 Palette de couleurs

• Couleur principale : #5E6AD2
• Couleur secondaire : #FFFFFF
• Couleur d'accent : #F5C518
• Couleurs de fond : #0D0D0D, #1A1A1A, #141414
• Couleurs de texte : #FFFFFF, #A0A0A0, #6B6B6B

3.2 Typographies

Police principale

• Nom : Inter
• Poids utilisés : 400, 500, 600, 700, 800
• Tailles utilisées : 64px (hero), 18px (body), 14px (nav), 12px (meta)

3.3 Styles globaux

• Boutons : Rounded pill-shaped buttons with subtle border (outlined for "Sign up"), filled dark for primary
• Formulaires : Minimal dark-themed inputs with subtle 1px borders
• Cartes : Dark cards with #2A2A2A border, minimal shadow, rounded 8px
• Images : App UI screenshots embedded as hero visuals, sharp edges with rounded container, grain overlay

3.4 Layouts et grilles

• Type de grille : Full-width single column hero with nested app UI demos
• Nombre de colonnes : 1 (page-level), variable per section
• Marges latérales : 60px
• Espacements verticaux : 80px entre sections majeures

4. Interactions

4.1 Interactions simples

• Hover states on buttons and links (subtle brightness shift)
• Menu dropdown on trigger click
• Issue card selection with status change
• Favorite toggle (star icon)
• Copy to clipboard buttons on code blocks

4.2 Interactions de scroll

• Parallax effects on hero images with opacity changes
• Sticky header on scroll with backdrop blur
• Lazy loading of below-fold images
• Animated text reveal on scroll using blur and translate

4.3 Animations

• Text word-by-word reveal with blur + translateY on hero title (~600ms staggered)
• Grain texture overlay with varying opacity loop
• Shadow layers with opacity transitions on product frame
• Smooth transitions on all interactive elements (~150ms ease)

5. Composants réutilisables

Composant : Button

• Rôle : Interactive call-to-action element
• Éléments internes : Text label, Optional icon
• Variantes : Primary (filled), Secondary (outlined), Small, Large, Disabled state

Composant : Issue Card

• Rôle : Represents individual work item in kanban/list
• Éléments internes : Issue ID, Title, Status badge, Priority icon, Labels, Avatar
• Variantes : Backlog, Todo, In Progress, Done states

Composant : Frame

• Rôle : Screenshot container with depth effects
• Éléments internes : Background image, Shadow layer, Grain texture, Frame border
• Variantes : With grain, With shadows, Responsive sizing

7. Technologies front-end

7.1 Frameworks détectés

• Next.js — React framework for server-side rendering
• React — UI library
• React Native — Mobile app (visible in code examples)

7.2 Librairies d'animation

• Framer Motion or native CSS — Text animations with blur and translateY transforms on hero title

7.3 Systèmes de design

• Custom Design System — Tailwind-like utility classes + custom CSS modules
• Radix UI — Headless accessibility primitives (dropdown menus, etc.)