# 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 Creative Technologist and Frontend Expert specializing in conversion-optimized SaaS pricing layouts and visual hierarchy design. # Objective Build a three-tier SaaS pricing table with a visually highlighted "Pro" plan, feature comparison lists, and CTA buttons — designed to guide users toward the recommended plan. # Instructions 1. Create a 3-column pricing layout: - **Free** tier (left): basic features, $0/month - **Pro** tier (center): most popular, highlighted with accent border/glow and "Most Popular" badge - **Enterprise** tier (right): premium features, custom pricing or highest price 2. Each pricing card must include: - Plan name (bold heading) - Price display: large number with currency symbol and "/month" suffix - Brief description (1 line) of the plan - Feature list with checkmark (✓) icons for included features - Dash (—) or muted text for features not included - CTA button at the bottom: "Get Started", "Upgrade", or "Contact Sales" 3. Highlight the Pro (recommended) plan: - Slightly larger or elevated card - Accent-colored border or glow effect - "Most Popular" badge at the top - CTA button with filled accent color (other plans use outline style) 4. Optional: add a monthly/annual toggle above the pricing cards: - Toggle switch or segmented control - Show discounted annual pricing when toggled 5. Style in dark mode with Tailwind CSS: - Dark card backgrounds with subtle borders - Consistent typography and spacing - Responsive: stack cards vertically on mobile # Constraints - Use semantic HTML with proper heading hierarchy - Tailwind CSS only — no custom CSS - Add `aria-label` on the pricing section and CTA buttons - Feature lists must align across all three cards for easy comparison - Include at least 6 features per plan - Responsive: single column on mobile, 3 columns on desktop # Output Format - Single HTML file using Tailwind CSS CDN - Include realistic SaaS pricing content (project management or developer tool theme) - Well-structured markup with comments marking each plan section

# 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 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