# 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 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 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 Information Architecture Specialist with expertise in temporal data display, feed design, and activity logging interfaces. # Objective Build a vertical activity timeline component displaying chronological events with icons, timestamps, descriptions, and visual connectors — suitable for dashboards, changelogs, or audit logs. # Instructions 1. Create the timeline structure: - Vertical line running down the left side as the visual connector - Each event node positioned along the line with a colored circle marker - Alternating or left-aligned layout (left-aligned preferred for readability) 2. Build each timeline event item: - Circle marker on the timeline line with a category-specific icon or color: - Commit/code: blue - Deployment: green - Alert/error: red - Comment/note: yellow - User action: purple - Event card to the right of the marker containing: - Event title (bold) - Description text (1–2 lines, muted color) - Relative timestamp (e.g., "2 hours ago", "Yesterday at 3:45 PM") - Optional: user avatar + name inline 3. Add date separators: - Group events by day with a date header (e.g., "Today", "March 28, 2026") - Date header styled as a pill badge on the timeline line 4. Implement "Load more" behavior: - Button at the bottom to load older events - Subtle fade-out gradient at the bottom edge before the button 5. Style in dark mode: - Dark background, slightly lighter event cards - Timeline line in low-opacity white - Consistent spacing between events (24px gap) # Constraints - Semantic HTML using `<ol>` for the event list and `<time>` for timestamps - CSS-only timeline connector — no SVG or canvas - Timeline line using `::before` pseudo-element on the list container - Circle markers using `::before` on each list item - No JavaScript required for the layout — static HTML/CSS component - Include at least 8 sample events across 3 date groups - Responsive: timeline shifts to full-width cards on mobile (line hidden) # Output Format - Single HTML file with embedded `<style>` block - Include realistic sample data (developer project or SaaS audit log theme) - Well-commented CSS explaining the timeline connector technique - Use CSS custom properties for colors and spacing