@devo-bmad-custom/agent-orchestration 1.0.0

package/src/.agents/skills/ui-ux-pro-custom/data/jetpack-compose-expert-skill/references/view-composition.md

@@ -0,0 +1,595 @@
+# Jetpack Compose View Composition Reference
+
+## Composable Function Naming Conventions
+
+Names communicate intent. Follow these patterns consistently.
+
+### Nouns (UI Components)
+- PascalCase, describe *what* the composable displays
+- Used for UI widgets, screens, layout building blocks
+
+```kotlin
+@Composable
+fun Button(...)  // Displays a button
+
+@Composable
+fun UserCard(user: User)  // Displays a user card
+
+@Composable
+fun LoginScreen()  // Displays a login screen
+
+@Composable
+fun CheckboxWithLabel(...)  // Displays a checkbox with label
+```
+
+### Verbs (Side Effects / Effects)
+- PascalCase, describe *what action* happens
+- Used for composables that don't emit UI, only perform side effects
+
+```kotlin
+@Composable
+fun LaunchedEffect(...)  // Launches a coroutine
+
+@Composable
+fun DisposableEffect(...)  // Manages resource lifecycle
+
+@Composable
+fun SideEffect(...)  // Performs a side effect
+```
+
+### Anti-Pattern: Ambiguous Names
+```kotlin
+// ❌ Unclear if this is a UI component or effect
+@Composable
+fun HandleLogin(...)
+
+// ✅ Explicit
+@Composable
+fun LoginScreen(...)  // Displays UI
+
+@Composable
+fun PerformLogin(...)  // Side effect function (if truly a side effect)
+```
+
+## The Slot Pattern
+
+Accept `@Composable` lambda parameters to create flexible, reusable containers.
+
+### Basic Slot Pattern
+```kotlin
+@Composable
+fun Card(
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit
+) {
+    Box(
+        modifier = modifier
+            .background(Color.White)
+            .padding(16.dp)
+    ) {
+        content()
+    }
+}
+
+// Usage
+Card {
+    Text("Hello")
+    Image(...)
+}
+```
+
+### Multiple Slots
+```kotlin
+@Composable
+fun ListItem(
+    modifier: Modifier = Modifier,
+    icon: @Composable () -> Unit,
+    title: @Composable () -> Unit,
+    subtitle: @Composable (() -> Unit)? = null,
+    trailing: @Composable (() -> Unit)? = null
+) {
+    Row(modifier = modifier.padding(16.dp)) {
+        icon()
+        Column(modifier = Modifier.weight(1f)) {
+            title()
+            subtitle?.invoke()
+        }
+        trailing?.invoke()
+    }
+}
+
+// Usage
+ListItem(
+    icon = { Icon(Icons.Default.Person, "") },
+    title = { Text("Alice") },
+    subtitle = { Text("Online") },
+    trailing = { Badge() }
+)
+```
+
+**Key principle:** Slots accept `@Composable` lambdas, not pre-composed values. This ensures composition is deferred and scope-aware.
+
+```kotlin
+// ❌ Wrong: passes composed value
+fun CustomLayout(content: String) { ... }
+
+// ✅ Correct: passes composition lambda
+fun CustomLayout(content: @Composable () -> Unit) { ... }
+```
+
+Source: Material 3 composables in `androidx.compose.material3` use slots extensively.
+
+## Extracting Composables
+
+Know when to extract and when to keep composables together.
+
+### Extract When
+- **Reused in multiple places:** DRY principle
+- **Single responsibility:** Composable handles one concern
+- **Easier to test:** Small, focused unit
+- **Performance:** Enables skipping and independent recomposition
+
+```kotlin
+// ❌ Before: god composable
+@Composable
+fun UserProfile(user: User) {
+    Column {
+        // Header
+        Box(modifier = Modifier.fillMaxWidth()) {
+            Image(user.photo)
+            Text(user.name, style = MaterialTheme.typography.headlineSmall)
+            IconButton({ /* edit */ }) { Icon(Icons.Default.Edit, "") }
+        }
+
+        // Stats
+        Row(modifier = Modifier.fillMaxWidth()) {
+            StatItem(user.followers, "Followers")
+            StatItem(user.following, "Following")
+            StatItem(user.posts, "Posts")
+        }
+
+        // Bio
+        Text(user.bio, style = MaterialTheme.typography.bodyMedium)
+    }
+}
+
+// ✅ After: extracted composables
+@Composable
+fun UserProfile(user: User) {
+    Column {
+        UserProfileHeader(user)
+        UserStats(user)
+        UserBio(user.bio)
+    }
+}
+
+@Composable
+private fun UserProfileHeader(user: User) { ... }
+
+@Composable
+private fun UserStats(user: User) { ... }
+
+@Composable
+private fun UserBio(bio: String) { ... }
+```
+
+### Don't Extract When
+- **Single use:** Extraction adds indirection without benefit
+- **Tightly coupled logic:** Would require passing many parameters
+- **Too small:** Single `Text()` or `Icon()` doesn't need extraction
+
+```kotlin
+// ❌ Over-extraction: trivial wrapper
+@Composable
+private fun UserName(name: String) {
+    Text(name, style = MaterialTheme.typography.headlineSmall)
+}
+
+// ✅ Keep inline if only used once
+@Composable
+fun UserProfile(user: User) {
+    Text(user.name, style = MaterialTheme.typography.headlineSmall)
+}
+```
+
+## Stateful vs Stateless Composables
+
+Structure composables as a stateless layer with optional stateful wrapper.
+
+### Pattern: Stateless + Wrapper
+
+```kotlin
+// ✅ Stateless composable (reusable, testable)
+@Composable
+fun ToggleButton(
+    isEnabled: Boolean,
+    onToggle: (Boolean) -> Unit,
+    text: String
+) {
+    Button(
+        onClick = { onToggle(!isEnabled) },
+        colors = ButtonDefaults.buttonColors(
+            containerColor = if (isEnabled) Color.Blue else Color.Gray
+        )
+    ) {
+        Text(text)
+    }
+}
+
+// ✅ Stateful wrapper (manages state, uses stateless child)
+@Composable
+fun StatefulToggleButton(text: String = "Toggle") {
+    var isEnabled by remember { mutableStateOf(false) }
+    ToggleButton(
+        isEnabled = isEnabled,
+        onToggle = { isEnabled = it },
+        text = text
+    )
+}
+
+// Usage: choose based on need
+@Composable
+fun MyScreen() {
+    // Use stateless when caller manages state
+    var featureEnabled by remember { mutableStateOf(false) }
+    ToggleButton(featureEnabled, { featureEnabled = it }, "Feature")
+
+    // Use stateful wrapper for isolated state
+    StatefulToggleButton("Local Toggle")
+}
+```
+
+**Advantage:** Caller can test and reuse `ToggleButton` without mocking state. `StatefulToggleButton` provides convenience for simple cases.
+
+## Preview Annotations
+
+Use previews for rapid UI development and regression testing.
+
+### @Preview
+Basic preview of a single composable.
+
+```kotlin
+@Preview
+@Composable
+fun UserCardPreview() {
+    UserCard(user = User(1, "Alice"))
+}
+
+// Multiple previews
+@Preview(name = "Light")
+@Preview(name = "Dark", uiMode = UI_MODE_NIGHT_YES)
+@Composable
+fun UserCardPreviews() {
+    UserCard(user = User(1, "Alice"))
+}
+```
+
+### @PreviewLightDark
+Automatically generates light and dark theme previews.
+
+```kotlin
+@PreviewLightDark
+@Composable
+fun UserCardPreview() {
+    MyTheme {
+        UserCard(user = User(1, "Alice"))
+    }
+}
+```
+
+### @PreviewFontScale
+Shows how composable responds to different font sizes.
+
+```kotlin
+@Preview(fontScale = 0.8f, name = "Small Fonts")
+@Preview(fontScale = 1f, name = "Normal Fonts")
+@Preview(fontScale = 1.2f, name = "Large Fonts")
+@Composable
+fun TextPreview() {
+    Text("This is text")
+}
+```
+
+### @PreviewScreenSizes
+Tests multiple screen dimensions.
+
+```kotlin
+@Preview(device = Devices.PHONE, name = "Phone")
+@Preview(device = Devices.TABLET, name = "Tablet")
+@Preview(device = Devices.FOLDABLE, name = "Foldable")
+@Composable
+fun ResponsiveLayoutPreview() {
+    ResponsiveLayout()
+}
+```
+
+Source: `androidx.compose.ui.tooling.preview`
+
+## CompositionLocal
+
+Provide implicit parameters without threading them through the hierarchy.
+
+### When to Use
+- **Theming:** Pass `Colors`, `Typography` implicitly
+- **Navigation:** Access from deep in composable tree
+- **Locale/Strings:** Avoid passing through every composable
+
+```kotlin
+// ✅ Define at top level
+val LocalUser = staticCompositionLocalOf<User?> { null }
+
+@Composable
+fun App(user: User) {
+    CompositionLocalProvider(LocalUser provides user) {
+        MainContent()
+    }
+}
+
+// ✅ Access deep in tree without passing through every composable
+@Composable
+fun UserGreeting() {
+    val user = LocalUser.current
+    Text("Hello, ${user?.name}")
+}
+```
+
+### When NOT to Use
+- **Configuration params:** If only 1-2 levels deep, pass directly
+- **Frequently changing values:** Can cause unnecessary recomposition
+- **Dependencies:** Use dependency injection at ViewModel level
+
+```kotlin
+// ❌ Over-use: should pass `title` directly
+val LocalTitle = staticCompositionLocalOf<String> { "" }
+
+@Composable
+fun Parent() {
+    CompositionLocalProvider(LocalTitle provides "My Title") {
+        Child()
+    }
+}
+
+// ✅ Just pass it
+@Composable
+fun Parent(title: String) {
+    Child(title = title)
+}
+
+@Composable
+fun Child(title: String) { ... }
+```
+
+**Types:**
+- `staticCompositionLocalOf`: Value rarely changes, default is a constant
+- `compositionLocalOf`: Value changes frequently, default is computed
+
+## Composable Return Values
+
+**Never return values from composables.** Use callbacks instead.
+
+```kotlin
+// ❌ Wrong: composables don't return values
+@Composable
+fun UserInput(): String {
+    var text by remember { mutableStateOf("") }
+    return text  // Can't do this
+}
+
+// ✅ Correct: callback pattern
+@Composable
+fun UserInput(onUserInput: (String) -> Unit) {
+    var text by remember { mutableStateOf("") }
+    TextField(
+        value = text,
+        onValueChange = {
+            text = it
+            onUserInput(it)  // Notify parent
+        }
+    )
+}
+
+// Usage
+@Composable
+fun FormScreen() {
+    UserInput(onUserInput = { input -> /* handle */ })
+}
+```
+
+**Rationale:** Composables are executed during composition, which happens at unpredictable times and may be skipped or reordered.
+
+## Screen-Level Composables
+
+Structure screens as a thin ViewModel integration layer above pure composables.
+
+### Recommended Pattern
+```kotlin
+// ✅ Screen composable: connects ViewModel
+@Composable
+fun UserDetailsScreen(
+    viewModel: UserDetailsViewModel = hiltViewModel(),
+    userId: String
+) {
+    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
+    LaunchedEffect(userId) {
+        viewModel.loadUser(userId)
+    }
+
+    UserDetailsContent(
+        uiState = uiState,
+        onRetry = { viewModel.loadUser(userId) }
+    )
+}
+
+// ✅ Content composable: pure (testable, reusable)
+@Composable
+private fun UserDetailsContent(
+    uiState: UiState,
+    onRetry: () -> Unit
+) {
+    when (uiState) {
+        is UiState.Loading -> LoadingUI()
+        is UiState.Success -> SuccessUI(uiState.user)
+        is UiState.Error -> ErrorUI(uiState.message, onRetry)
+    }
+}
+
+// ✅ Composable for preview/testing
+@Preview
+@Composable
+private fun UserDetailsContentPreview() {
+    UserDetailsContent(
+        uiState = UiState.Success(User(1, "Alice")),
+        onRetry = {}
+    )
+}
+```
+
+**Benefits:**
+- Public screen composable integrates ViewModel
+- Private content composable is pure, testable, previewable
+- Clear separation: UI logic (public) vs rendering (private)
+
+**Anti-pattern:** Passing ViewModel to child composables. Keep it at screen level only.
+
+```kotlin
+// ❌ Couples child to ViewModel
+@Composable
+fun UserCard(viewModel: UserViewModel) {
+    val user by viewModel.user.collectAsStateWithLifecycle()
+    Text(user.name)
+}
+
+// ✅ Pass only the data
+@Composable
+fun UserCard(user: User) {
+    Text(user.name)
+}
+```
+
+## Reusability Guidelines
+
+Design composables to be configurable without over-parameterization.
+
+### Configuration via Parameters
+```kotlin
+// ✅ Expose what varies, hide what doesn't
+@Composable
+fun Card(
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit
+) {
+    // Internal: fixed styling, padding, etc.
+    Box(
+        modifier = modifier
+            .background(Color.White)
+            .padding(16.dp)
+            .clip(RoundedCornerShape(8.dp))
+    ) {
+        content()
+    }
+}
+```
+
+### Avoid Parameter Explosion
+```kotlin
+// ❌ Too many parameters, hard to use
+@Composable
+fun Button(
+    text: String,
+    textColor: Color,
+    backgroundColor: Color,
+    cornerRadius: Dp,
+    padding: PaddingValues,
+    elevation: Dp,
+    ...
+)
+
+// ✅ Sensible defaults, style objects
+@Composable
+fun Button(
+    text: String,
+    modifier: Modifier = Modifier,
+    style: ButtonStyle = ButtonStyle.Primary,
+    onClick: () -> Unit
+) { ... }
+
+// Or: use Material composables with built-in styles
+@Composable
+fun Button(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    ...
+) { ... }  // Material3 Button has reasonable defaults
+```
+
+## Common Anti-Patterns
+
+### God Composables
+```kotlin
+// ❌ Does too much
+@Composable
+fun Dashboard() {
+    // Header
+    Box { /* 20 lines */ }
+
+    // List
+    LazyColumn {
+        items(items) { /* 15 lines */ }
+    }
+
+    // Footer
+    Box { /* 15 lines */ }
+
+    // Dialogs, side effects, state management...
+}
+
+// ✅ Extract and delegate
+@Composable
+fun Dashboard() {
+    Column {
+        DashboardHeader()
+        DashboardContent()
+        DashboardFooter()
+    }
+}
+```
+
+### Deep Nesting
+```kotlin
+// ❌ Hard to read and debug
+@Composable
+fun LoginScreen() {
+    Box { Column { Row { Card { Box { Text { ... } } } } } }
+}
+
+// ✅ Intermediate variables and extraction
+@Composable
+fun LoginScreen() {
+    val form = loginFormState()
+    Column {
+        LoginForm(form)
+        LoginButton(form)
+    }
+}
+```
+
+### Passing ViewModel to Children
+```kotlin
+// ❌ Violates composition boundaries
+@Composable
+fun ParentScreen(viewModel: ParentViewModel) {
+    ChildCard(viewModel = viewModel)  // Don't do this
+}
+
+// ✅ Extract data, pass to child
+@Composable
+fun ParentScreen(viewModel: ParentViewModel) {
+    val data by viewModel.data.collectAsStateWithLifecycle()
+    ChildCard(data = data)
+}
+```
+
+---
+
+**Source references:** `androidx.compose.material3`, `androidx.compose.ui.tooling.preview`, `androidx.compose.runtime.CompositionLocal`

package/src/.agents/skills/ui-ux-pro-custom/data/landing.csv

@@ -0,0 +1,31 @@
+No,Pattern Name,Keywords,Section Order,Primary CTA Placement,Color Strategy,Recommended Effects,Conversion Optimization
+1,Hero + Features + CTA,"hero, hero-centric, features, feature-rich, cta, call-to-action","1. Hero with headline/image, 2. Value prop, 3. Key features (3-5), 4. CTA section, 5. Footer",Hero (sticky) + Bottom,Hero: Brand primary or vibrant. Features: Card bg #FAFAFA. CTA: Contrasting accent color,"Hero parallax, feature card hover lift, CTA glow on hover",Deep CTA placement. Use contrasting color (at least 7:1 contrast ratio). Sticky navbar CTA.
+2,Hero + Testimonials + CTA,"hero, testimonials, social-proof, trust, reviews, cta","1. Hero, 2. Problem statement, 3. Solution overview, 4. Testimonials carousel, 5. CTA",Hero (sticky) + Post-testimonials,"Hero: Brand color. Testimonials: Light bg #F5F5F5. Quotes: Italic, muted color #666. CTA: Vibrant","Testimonial carousel slide animations, quote marks animations, avatar fade-in",Social proof before CTA. Use 3-5 testimonials. Include photo + name + role. CTA after social proof.
+3,Product Demo + Features,"demo, product-demo, features, showcase, interactive","1. Hero, 2. Product video/mockup (center), 3. Feature breakdown per section, 4. Comparison (optional), 5. CTA",Video center + CTA right/bottom,Video surround: Brand color overlay. Features: Icon color #0080FF. Text: Dark #222,"Video play button pulse, feature scroll reveals, demo interaction highlights",Embedded product demo increases engagement. Use interactive mockup if possible. Auto-play video muted.
+4,Minimal Single Column,"minimal, simple, direct, single-column, clean","1. Hero headline, 2. Short description, 3. Benefit bullets (3 max), 4. CTA, 5. Footer","Center, large CTA button",Minimalist: Brand + white #FFFFFF + accent. Buttons: High contrast 7:1+. Text: Black/Dark grey,Minimal hover effects. Smooth scroll. CTA scale on hover (subtle),Single CTA focus. Large typography. Lots of whitespace. No nav clutter. Mobile-first.
+5,Funnel (3-Step Conversion),"funnel, conversion, steps, wizard, onboarding","1. Hero, 2. Step 1 (problem), 3. Step 2 (solution), 4. Step 3 (action), 5. CTA progression",Each step: mini-CTA. Final: main CTA,"Step colors: 1 (Red/Problem), 2 (Orange/Process), 3 (Green/Solution). CTA: Brand color","Step number animations, progress bar fill, step transitions smooth scroll",Progressive disclosure. Show only essential info per step. Use progress indicators. Multiple CTAs.
+6,Comparison Table + CTA,"comparison, table, compare, versus, cta","1. Hero, 2. Problem intro, 3. Comparison table (product vs competitors), 4. Pricing (optional), 5. CTA",Table: Right column. CTA: Below table,Table: Alternating rows (white/light grey). Your product: Highlight #FFFACD (light yellow) or green. Text: Dark,"Table row hover highlight, price toggle animations, feature checkmark animations",Use comparison to show unique value. Highlight your product row. Include 'free trial' in pricing row.
+7,Lead Magnet + Form,"lead, form, signup, capture, email, magnet","1. Hero (benefit headline), 2. Lead magnet preview (ebook cover, checklist, etc), 3. Form (minimal fields), 4. CTA submit",Form CTA: Submit button,Lead magnet: Professional design. Form: Clean white bg. Inputs: Light border #CCCCCC. CTA: Brand color,"Form focus state animations, input validation animations, success confirmation animation",Form fields ≤ 3 for best conversion. Offer valuable lead magnet preview. Show form submission progress.
+8,Pricing Page + CTA,"pricing, plans, tiers, comparison, cta","1. Hero (pricing headline), 2. Price comparison cards, 3. Feature comparison table, 4. FAQ section, 5. Final CTA",Each card: CTA button. Sticky CTA in nav,"Free: Grey, Starter: Blue, Pro: Green/Gold, Enterprise: Dark. Cards: 1px border, shadow","Price toggle animation (monthly/yearly), card comparison highlight, FAQ accordion open/close",Recommend starter plan (pre-select/highlight). Show annual discount (20-30%). Use FAQs to address concerns.
+9,Video-First Hero,"video, hero, media, visual, engaging","1. Hero with video background, 2. Key features overlay, 3. Benefits section, 4. CTA",Overlay on video (center/bottom) + Bottom section,Dark overlay 60% on video. Brand accent for CTA. White text on dark.,"Video autoplay muted, parallax scroll, text fade-in on scroll",86% higher engagement with video. Add captions for accessibility. Compress video for performance.
+10,Scroll-Triggered Storytelling,"storytelling, scroll, narrative, story, immersive","1. Intro hook, 2. Chapter 1 (problem), 3. Chapter 2 (journey), 4. Chapter 3 (solution), 5. Climax CTA",End of each chapter (mini) + Final climax CTA,Progressive reveal. Each chapter has distinct color. Building intensity.,"ScrollTrigger animations, parallax layers, progressive disclosure, chapter transitions",Narrative increases time-on-page 3x. Use progress indicator. Mobile: simplify animations.
+11,AI Personalization Landing,"ai, personalization, smart, recommendation, dynamic","1. Dynamic hero (personalized), 2. Relevant features, 3. Tailored testimonials, 4. Smart CTA",Context-aware placement based on user segment,Adaptive based on user data. A/B test color variations per segment.,"Dynamic content swap, fade transitions, personalized product recommendations",20%+ conversion with personalization. Requires analytics integration. Fallback for new users.
+12,Waitlist/Coming Soon,"waitlist, coming-soon, launch, early-access, notify","1. Hero with countdown, 2. Product teaser/preview, 3. Email capture form, 4. Social proof (waitlist count)",Email form prominent (above fold) + Sticky form on scroll,Anticipation: Dark + accent highlights. Countdown in brand color. Urgency indicators.,"Countdown timer animation, email validation feedback, success confetti, social share buttons",Scarcity + exclusivity. Show waitlist count. Early access benefits. Referral program.
+13,Comparison Table Focus,"comparison, table, versus, compare, features","1. Hero (problem statement), 2. Comparison matrix (you vs competitors), 3. Feature deep-dive, 4. Winner CTA",After comparison table (highlighted row) + Bottom,Your product column highlighted (accent bg or green). Competitors neutral. Checkmarks green.,"Table row hover highlight, feature checkmark animations, sticky comparison header",Show value vs competitors. 35% higher conversion. Be factual. Include pricing if favorable.
+14,Pricing-Focused Landing,"pricing, price, cost, plans, subscription","1. Hero (value proposition), 2. Pricing cards (3 tiers), 3. Feature comparison, 4. FAQ, 5. Final CTA",Each pricing card + Sticky CTA in nav + Bottom,Popular plan highlighted (brand color border/bg). Free: grey. Enterprise: dark/premium.,"Price toggle monthly/annual animation, card hover lift, FAQ accordion smooth open",Annual discount 20-30%. Recommend mid-tier (most popular badge). Address objections in FAQ.
+15,App Store Style Landing,"app, mobile, download, store, install","1. Hero with device mockup, 2. Screenshots carousel, 3. Features with icons, 4. Reviews/ratings, 5. Download CTAs",Download buttons prominent (App Store + Play Store) throughout,Dark/light matching app store feel. Star ratings in gold. Screenshots with device frames.,"Device mockup rotations, screenshot slider, star rating animations, download button pulse",Show real screenshots. Include ratings (4.5+ stars). QR code for mobile. Platform-specific CTAs.
+16,FAQ/Documentation Landing,"faq, documentation, help, support, questions","1. Hero with search bar, 2. Popular categories, 3. FAQ accordion, 4. Contact/support CTA",Search bar prominent + Contact CTA for unresolved questions,"Clean, high readability. Minimal color. Category icons in brand color. Success green for resolved.","Search autocomplete, smooth accordion open/close, category hover, helpful feedback buttons",Reduce support tickets. Track search analytics. Show related articles. Contact escalation path.
+17,Immersive/Interactive Experience,"immersive, interactive, experience, 3d, animation","1. Full-screen interactive element, 2. Guided product tour, 3. Key benefits revealed, 4. CTA after completion",After interaction complete + Skip option for impatient users,Immersive experience colors. Dark background for focus. Highlight interactive elements.,"WebGL, 3D interactions, gamification elements, progress indicators, reward animations",40% higher engagement. Performance trade-off. Provide skip option. Mobile fallback essential.
+18,Event/Conference Landing,"event, conference, meetup, registration, schedule","1. Hero (date/location/countdown), 2. Speakers grid, 3. Agenda/schedule, 4. Sponsors, 5. Register CTA",Register CTA sticky + After speakers + Bottom,Urgency colors (countdown). Event branding. Speaker cards professional. Sponsor logos neutral.,"Countdown timer, speaker hover cards with bio, agenda tabs, early bird countdown",Early bird pricing with deadline. Social proof (past attendees). Speaker credibility. Multi-ticket discounts.
+19,Product Review/Ratings Focused,"reviews, ratings, testimonials, social-proof, stars","1. Hero (product + aggregate rating), 2. Rating breakdown, 3. Individual reviews, 4. Buy/CTA",After reviews summary + Buy button alongside reviews,Trust colors. Star ratings gold. Verified badge green. Review sentiment colors.,"Star fill animations, review filtering, helpful vote interactions, photo lightbox",User-generated content builds trust. Show verified purchases. Filter by rating. Respond to negative reviews.
+20,Community/Forum Landing,"community, forum, social, members, discussion","1. Hero (community value prop), 2. Popular topics/categories, 3. Active members showcase, 4. Join CTA",Join button prominent + After member showcase,"Warm, welcoming. Member photos add humanity. Topic badges in brand colors. Activity indicators green.","Member avatars animation, activity feed live updates, topic hover previews, join success celebration","Show active community (member count, posts today). Highlight benefits. Preview content. Easy onboarding."
+21,Before-After Transformation,"before-after, transformation, results, comparison","1. Hero (problem state), 2. Transformation slider/comparison, 3. How it works, 4. Results CTA",After transformation reveal + Bottom,Contrast: muted/grey (before) vs vibrant/colorful (after). Success green for results.,"Slider comparison interaction, before/after reveal animations, result counters, testimonial videos",Visual proof of value. 45% higher conversion. Real results. Specific metrics. Guarantee offer.
+22,Marketplace / Directory,"marketplace, directory, search, listing","1. Hero (Search focused), 2. Categories, 3. Featured Listings, 4. Trust/Safety, 5. CTA (Become a host/seller)",Hero Search Bar + Navbar 'List your item',Search: High contrast. Categories: Visual icons. Trust: Blue/Green.,Search autocomplete animation," map hover pins,  card carousel, Search bar is the CTA. Reduce friction to search. Popular searches suggestions."
+23,Newsletter / Content First,"newsletter, content, writer, blog, subscribe","1. Hero (Value Prop + Form), 2. Recent Issues/Archives, 3. Social Proof (Subscriber count), 4. About Author",Hero inline form + Sticky header form,Minimalist. Paper-like background. Text focus. Accent color for Subscribe.,Text highlight animations," typewriter effect,  subtle fade-in, Single field form (Email only). Show 'Join X, 000 readers'. Read sample link."
+24,Webinar Registration,"webinar, registration, event, training, live","1. Hero (Topic + Timer + Form), 2. What you'll learn, 3. Speaker Bio, 4. Urgency/Bonuses, 5. Form (again)",Hero (Right side form) + Bottom anchor,Urgency: Red/Orange. Professional: Blue/Navy. Form: High contrast white.,Countdown timer," speaker avatar float,  urgent ticker, Limited seats logic. 'Live' indicator. Auto-fill timezone."
+25,Enterprise Gateway,"enterprise, corporate, gateway, solutions, portal","1. Hero (Video/Mission), 2. Solutions by Industry, 3. Solutions by Role, 4. Client Logos, 5. Contact Sales",Contact Sales (Primary) + Login (Secondary),Corporate: Navy/Grey. High integrity. Conservative accents.,Slow video background," logo carousel,  tab switching for industries, Path selection (I am a...). Mega menu navigation. Trust signals prominent."
+26,Portfolio Grid,"portfolio, grid, showcase, gallery, masonry","1. Hero (Name/Role), 2. Project Grid (Masonry), 3. About/Philosophy, 4. Contact",Project Card Hover + Footer Contact,Neutral background (let work shine). Text: Black/White. Accent: Minimal.,Image lazy load reveal," hover overlay info,  lightbox view, Visuals first. Filter by category. Fast loading essential."
+27,Horizontal Scroll Journey,"horizontal, scroll, journey, gallery, storytelling, panoramic","1. Intro (Vertical), 2. The Journey (Horizontal Track), 3. Detail Reveal, 4. Vertical Footer",Floating Sticky CTA or End of Horizontal Track,Continuous palette transition. Chapter colors. Progress bar #000000.,"Scroll-jacking (careful), parallax layers, horizontal slide, progress indicator","Immersive product discovery. High engagement. Keep navigation visible.
+28,Bento Grid Showcase,bento,  grid,  features,  modular,  apple-style,  showcase"", 1. Hero, 2. Bento Grid (Key Features), 3. Detail Cards, 4. Tech Specs, 5. CTA, Floating Action Button or Bottom of Grid, Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark., Hover card scale (1.02), video inside cards, tilt effect, staggered reveal, Scannable value props. High information density without clutter. Mobile stack.
+29,Interactive 3D Configurator,3d,  configurator,  customizer,  interactive,  product"", 1. Hero (Configurator), 2. Feature Highlight (synced), 3. Price/Specs, 4. Purchase, Inside Configurator UI + Sticky Bottom Bar, Neutral studio background. Product: Realistic materials. UI: Minimal overlay., Real-time rendering, material swap animation, camera rotate/zoom, light reflection, Increases ownership feeling. 360 view reduces return rates. Direct add-to-cart.
+30,AI-Driven Dynamic Landing,ai,  dynamic,  personalized,  adaptive,  generative"", 1. Prompt/Input Hero, 2. Generated Result Preview, 3. How it Works, 4. Value Prop, Input Field (Hero) + 'Try it' Buttons, Adaptive to user input. Dark mode for compute feel. Neon accents., Typing text effects, shimmering generation loaders, morphing layouts, Immediate value demonstration. 'Show, don't tell'. Low friction start."