Transform FeatureGrid to Feature sections + UI fixes by dqii · Pull Request #113 · lanterndata/lantern-ui

dqii · 2025-09-10T18:46:38Z

• Transformed FeatureGrid components (01-04) into full Feature sections (11-14) with eyebrow, title, subtitle, and CTA support
• Unified background image handling in Section/Container components with proper z-index layering
• Fixed various UI issues in feature components including hover animations, carousel functionality, and mobile layouts
• Improved spacing system with adjusted margins for Section component and ContentActions/ContentItems
• Simplified animations across feature components using standard fadeInUp presets instead of complex motion variants

- Add 2-column grid layout for feature cards using layout="grid-2" - Simplify animations by removing complex motion.div wrappers and variants - Use standard fadeInUp animation presets for cleaner, more maintainable code - Remove unnecessary motion import 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

- Remove unnecessary motion.div wrappers and complex variants - Use standard fadeInUp animation presets for cleaner code - Remove blur effects from animations - Maintain consistent animation patterns across feature components 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

- Fix hover animation to work per-tab instead of affecting all tabs - Remove unnecessary vertical line in mobile layout - Simplify mobile design with icon and text side-by-side - Remove motion library and complex blur animations - Use simpler Tailwind animate classes for content transitions - Restructure mobile content panels for better UX 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

- Adjust margins to ~1.5x padding values for better section separation - sm: 9/15/21 (was 6/10/14) - md: 15/24/30 (was 10/16/20) - lg: 24/36/48 (was 16/24/32) This ensures proper visual spacing between adjacent sections when margins collapse. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

- Add infinite scroll with loop option - Fix counter display to show correct current/total (no more 5/3 bug) - Move all action buttons above carousel for better hierarchy - Increase counter text size and add tracking for better visibility - Remove unused rulesLabel prop - Change from center to left alignment - Enlarge navigation arrows (40x40px) with rounded borders - Simplify layout with cleaner card structure 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

…s spacing ContentActions: - Add default mt-6 md:mt-8 for consistent spacing - Ensures proper separation from content above without repetition ContentItems: - Update margin values to mt/mb/my-9 md:12 lg:16 (from 12/16) - Add lg breakpoint for better responsive scaling - Provides more granular control across screen sizes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

- Center-align component for better visual balance - Fix vertical alignment on both mobile and desktop - Simplify connecting lines to use clean borders instead of gradients - Make connecting lines continuous from top to bottom - Improve mobile text alignment with step numbers - Center content vertically with images on desktop 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

… components - Update Section and Container to render images as separate elements with proper z-index layering - Simplify background.ts to use className-based overlays instead of inline styles - Refactor Hero components (21, 23, 25, 27, 29) to use Section's built-in bg prop - Remove custom background implementations in favor of unified approach - Ensure proper stacking order: image (z-0) → overlay (z-10) → content (z-20) - Remove unused imageAlt prop from Hero components 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

- Renamed FeatureGrid-01 through 04 to Feature-11 through 14 - Moved components from marketing to section category - Added full section support with eyebrow, title, subtitle, and CTAs - Feature-11: Split layout with 1/2 grid - Feature-12/13/14: Centered layouts with different grid styles - Removed standalone FeatureGrid components and examples - Updated registry configuration and data files 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

vercel · 2025-09-10T18:46:43Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
component-library	Ready	Preview	Comment	Sep 10, 2025 9:49pm

Copilot

Pull Request Overview

This PR transforms FeatureGrid components into full Feature sections and implements unified background image handling. It adds new Feature sections (11-14) with complete eyebrow, title, subtitle, and CTA support while removing the standalone FeatureGrid components. The PR also modernizes the background system with proper z-index layering and improves spacing consistency across components.

Creates 4 new Feature sections (11-14) to replace the removed FeatureGrid components
Unified background image handling in Section/Container components with HTML img elements instead of CSS background-image
Improved spacing system with adjusted margins and simplified animations using standard fadeInUp presets

Reviewed Changes

Copilot reviewed 45 out of 45 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
feature-11.tsx to feature-14.tsx	New feature sections replacing FeatureGrid components
hero-*.tsx	Updated to use new background image system with proper z-index structure
section.tsx & container.tsx	Unified background image handling with HTML img elements
section-content*.tsx	Adjusted margin spacing for consistency
background.ts	Simplified background type to use className for overlays

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

registry/new-york/section/feature-08.tsx

registry/new-york/section/feature-06.tsx

registry/new-york/section/feature-04.tsx

- Fixed Testimonials-09 wrapping issue by adjusting column layout classes - Added margin support to ContentActions component (default: none) - Fixed CTA-05 to be normal mode version of CTA-04 - Updated CTA-09 description to correctly describe colored background - Removed imageAlt prop from Hero example files (21, 23, 25, 27, 29) - Various CTA component improvements and consistency fixes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

- Swapped CTA-04 and CTA-05 to maintain pattern consistency - Updated CTA-02, CTA-03, CTA-06, CTA-07 to accept imageUrl prop instead of bg - Components now handle overlay and token configuration internally - CTA-02/CTA-06: Light overlay (bg-background/80) - CTA-03/CTA-07: Dark overlay (bg-foreground/60) with inverse token - Updated all examples to use simplified imageUrl prop - Updated descriptions to be independent and descriptive Component pairs: - CTA-00/01: Horizontal (normal/inverse) - CTA-02/03: Horizontal with image (light/dark overlay) - CTA-04/05: Centered (normal/inverse) - CTA-06/07: Centered with image (light/dark overlay) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

…gh CTA-11 - Updated CTA-10 and CTA-11 to accept imageUrl prop instead of bg - CTA-10: Light overlay (bg-background/80) for container CTAs - CTA-11: Dark overlay (bg-foreground/60) with inverse token - Updated examples to use simplified imageUrl prop - Updated descriptions to be independent and descriptive Container CTA quartet (CTA-08/09/10/11): - CTA-08: Border styling - CTA-09: Colored background - CTA-10: With image (light overlay) - CTA-11: With image (dark overlay) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

dqii and others added 14 commits September 10, 2025 11:58

Add todo

85e5801

Remove space explicit set

8e52de1

Fix color

9c10f71

Space edits

f71a8da

Make components not clickable

4bf867f

dqii requested a review from Copilot September 10, 2025 18:46

Copilot AI reviewed Sep 10, 2025

View reviewed changes

registry/new-york/section/feature-08.tsx Show resolved Hide resolved

registry/new-york/section/feature-06.tsx Outdated Show resolved Hide resolved

registry/new-york/section/feature-04.tsx Show resolved Hide resolved

dqii and others added 2 commits September 10, 2025 15:29

Fix color palettes

d215286

vercel bot deployed to Preview September 10, 2025 19:33 View deployment

dqii and others added 2 commits September 10, 2025 17:28

vercel bot deployed to Preview September 10, 2025 21:36 View deployment

Index fixes

5e252a0

vercel bot deployed to Preview September 10, 2025 21:49 View deployment

dqii merged commit 378083a into main Sep 11, 2025
4 checks passed

dqii deleted the di/sept10 branch September 11, 2025 05:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Transform FeatureGrid to Feature sections + UI fixes#113

Transform FeatureGrid to Feature sections + UI fixes#113
dqii merged 19 commits intomainfrom
di/sept10

dqii commented Sep 10, 2025

Uh oh!

vercel bot commented Sep 10, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

dqii commented Sep 10, 2025

Uh oh!

vercel bot commented Sep 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Sep 10, 2025 •

edited

Loading