# Role You are a Creative Technologist and Frontend Expert specializing in modern marketing layouts and visual storytelling through UI design. # Objective Build a 2x2 bento-style feature grid section that highlights four key product or service features with a visually engaging, asymmetric layout optimized for marketing landing pages. # Instructions 1. Create a bento grid container with a 2x2 layout: - Top-left: large feature card spanning emphasis (can be taller or wider) - Top-right: standard feature card - Bottom-left: standard feature card - Bottom-right: large feature card (mirror emphasis of top-left) 2. Each feature card must include: - An icon or illustration placeholder (SVG or emoji) - A bold feature title (short, action-oriented) - A brief description (1–2 sentences max) - Optional: subtle background pattern or gradient unique to each card 3. Add hover interactions: - Subtle lift effect with increased shadow - Slight border glow or color accent shift 4. Style with Tailwind CSS in dark mode: - Dark card backgrounds with low-opacity borders - Consistent padding, rounded corners, and spacing - Accent colors to differentiate each feature # Constraints - Use semantic HTML (`<section>`, `<article>`, `<h3>`, `<p>`) - Tailwind CSS only — no custom CSS unless needed for grid spans - Responsive: single column on mobile, 2x2 on tablet and desktop - Keep text concise — titles under 5 words, descriptions under 20 words - Add `aria-label` on the section for screen reader context # Output Format - Single HTML file using Tailwind CSS CDN - Clean, well-indented markup with comments for each grid cell - Use placeholder content that demonstrates a realistic SaaS feature set

# Role You are a Senior Frontend Developer and Product Communications Specialist with expertise in release documentation, content feeds, and information hierarchy design. # Objective Build a product changelog feed page displaying categorized release updates with version badges, date headers, change-type labels, and expandable detail sections — suitable for a public-facing product updates page. # Instructions 1. Create the changelog page layout: - Single-column, centered content (max-width: 720px) - Optional: left sidebar with version quick-links for navigation - Dark background with clean typography 2. Build each release entry: - Version badge at the top: pill-shaped label (e.g., "v2.4.0") with accent background - Release date beneath the version - List of changes grouped by type with colored labels: - **New**: green badge — new features - **Improved**: blue badge — enhancements to existing features - **Fixed**: orange badge — bug fixes - **Breaking**: red badge — breaking changes requiring action - Each change item: label badge + one-line description - Optional: "Read more" expandable section for detailed descriptions 3. Add filtering controls (top of page): - Filter pills: "All", "New", "Improved", "Fixed", "Breaking" - Active filter highlighted with accent background - Filtering hides entries that don't match (with smooth CSS transition) 4. Design the version quick-links (optional sidebar or top section): - Scrollable list of version numbers - Click scrolls to that release entry (smooth scroll) - Active version highlighted based on scroll position 5. Style and polish: - Version entries separated by subtle horizontal rules or spacing - Change-type badges in consistent pill style with category colors - Clean serif or sans-serif reading font for descriptions # Constraints - Vanilla JavaScript for filtering and scroll behavior - Semantic HTML: `<article>` for each release, `<time>` for dates - Filter transitions using CSS — hide/show with opacity + height animation - Include at least 4 release entries with 3–5 changes each - Dark mode only - Responsive: sidebar hidden on mobile, full-width content - No external dependencies # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include realistic changelog data (developer tool or SaaS product theme) - Well-commented code with sections: layout, release entries, filtering logic, scroll navigation

# Role You are a Senior Frontend Developer and Conversion Optimization Specialist with expertise in comparison interfaces, data tables, and decision-support UI design. # Objective Build a side-by-side feature comparison table that helps users evaluate multiple products or plans, with checkmark/cross indicators, category groupings, and a sticky header — optimized for scanning and decision-making. # Instructions 1. Create the comparison table structure: - Sticky header row with product/plan names and logos or icons - First column: feature names (left-aligned, grouped by category) - Subsequent columns: one per product/plan (3–4 products) - Highlighted column for the "recommended" product (subtle accent background) 2. Build the header row: - Product name in bold - Optional: price or tagline beneath the name - "Recommended" badge on the highlighted column - Sticky on scroll (`position: sticky; top: 0`) 3. Organize features by category: - Category headers spanning the full width as section dividers - Categories: "Core Features", "Integrations", "Support", "Security" - At least 5 features per category 4. Feature value indicators: - Boolean features: green checkmark (✓) for included, red cross (✗) or dash for excluded - Quantitative features: display the value (e.g., "10 GB", "Unlimited", "24/7") - Use tooltips on hover for features that need extra explanation 5. Style in dark mode: - Alternating row backgrounds for readability (subtle shade difference) - Sticky header with solid background and bottom border - Feature names left-aligned, values center-aligned in each column - Responsive: on mobile, allow horizontal scroll with the feature name column frozen # Constraints - Semantic HTML `<table>` with `<thead>`, `<tbody>`, `<th>`, `<td>` - Feature name column sticky on horizontal scroll (`position: sticky; left: 0`) - No JavaScript required for the table layout — CSS only - Include at least 20 feature rows across 4 categories - Use `scope` attributes on header cells for accessibility - Dark mode only - Responsive: horizontal scroll with frozen first column on mobile # Output Format - Single HTML file with embedded `<style>` block - Include realistic comparison data (project management tools or cloud hosting theme) - Well-commented code with sections: table structure, sticky behavior, responsive handling - Use CSS custom properties for the accent/highlight color

# Role You are a Senior Frontend Engineer and Conversion Specialist with expertise in landing page design and visual hierarchy optimization. # Objective Build a feature showcase section that presents product or service features in a visually compelling 3-column grid with icon-driven cards, hover interactions, and responsive behavior. # Instructions 1. Create a section with a centered heading and subheading: - Section title: bold, large (e.g., "Why Choose Us" or "Features") - Subtitle: muted, descriptive one-liner beneath the title 2. Build a 3-column grid of feature cards: - Each card contains: - Icon container: 48x48px circle or rounded square with gradient background - SVG icon inside the container (use Lucide or Heroicons style) - Feature title: bold, concise (3–5 words) - Feature description: muted text, 1–2 sentences (under 20 words) 3. Add hover interactions on each card: - Subtle upward lift (`translateY(-4px)`) - Increased `box-shadow` for depth - Smooth transition (200ms ease) 4. Style with a dark-mode-first design: - Dark card backgrounds with subtle borders - Gradient icon containers using brand-compatible accent colors - Consistent spacing and alignment across all cards 5. Ensure responsive layout: - 1 column on mobile (<640px) - 2 columns on tablet (640px–1024px) - 3 columns on desktop (>1024px) # Constraints - Use semantic HTML (`<section>`, `<article>`, `<h3>`, `<p>`) - CSS Grid or Flexbox for layout — no JavaScript required - Use inline SVG icons or placeholder icon containers — do not rely on external icon CDNs - Keep all descriptions under 20 words for scannability - 6 feature cards total (2 rows of 3) for visual balance # Output Format - Single HTML file with embedded `<style>` block - Include 6 placeholder features with realistic SaaS content - Well-indented code with comments for each section