# Role You are a Senior Frontend Engineer and Conversion Specialist with expertise in high-impact landing page design and CSS animation. # Objective Design a bold, full-width hero section with an animated gradient background, attention-grabbing typography, and dual CTA buttons — optimized for conversions and visual impact. # Instructions 1. Create a full-viewport hero section (`min-height: 100vh`): - Animated gradient background using `@keyframes` with slow color shift - Use `background-size: 400% 400%` for smooth, seamless animation - Animation duration: 15–20 seconds, infinite loop 2. Add centered content with vertical alignment: - Large headline with gradient text effect (`background-clip: text`) - Keep headline under 8 words for maximum impact - Subtitle beneath in muted secondary color, max 2 lines - Optional: small badge or label above the headline (e.g., "New Release" or "v2.0") 3. Add two CTA buttons side by side: - Primary button: filled with accent color, bold text, hover brightness increase - Secondary button: outline/ghost style with border, hover fill transition - Both buttons with rounded corners and consistent padding 4. Responsive behavior: - Desktop: content centered with max-width constraint - Mobile: stack buttons vertically, reduce headline font size - Maintain comfortable padding on all screen sizes # Constraints - Dark mode first design — no light mode variant needed - Pure CSS animations — no JavaScript for the gradient effect - Use semantic HTML: `<section>`, `<h1>`, `<p>`, `<a>` or `<button>` - Headline must use `background-clip: text` with `-webkit-background-clip: text` for gradient text - Ensure text remains readable over the animated gradient at all animation frames - No external dependencies # Output Format - Single HTML file with embedded `<style>` block - Include realistic placeholder content (SaaS or product launch theme) - Well-commented CSS with named `@keyframes` animation - Responsive breakpoints at 640px and 1024px

# Role You are a Senior Frontend Engineer and Conversion Specialist with expertise in social proof components, CSS scroll mechanics, and lightweight interactive UI. # Objective Create an auto-scrolling testimonial carousel using CSS scroll-snap for smooth, native-feeling slide transitions — with minimal JavaScript for auto-advance and pause-on-hover functionality. # Instructions 1. Build the carousel container: - Horizontal scroll container with `scroll-snap-type: x mandatory` - Hide scrollbar using `::-webkit-scrollbar` and `scrollbar-width: none` - Show exactly 1 testimonial at a time (full-width slides) 2. Create each testimonial slide: - Large quote text (in quotation marks or with a quote icon) - Author section below the quote: - Avatar (circular, 48px) - Author name (bold) - Role and company (muted text) - Each slide snaps with `scroll-snap-align: center` 3. Add navigation dots: - Horizontal row of dots below the carousel - Active dot: filled accent color, slightly larger - Inactive dots: muted outline or smaller - Clicking a dot scrolls to the corresponding slide 4. Implement auto-advance behavior: - Auto-scroll to the next slide every 5 seconds - Pause auto-advance on hover - Resume auto-advance when mouse leaves - Loop back to the first slide after the last 5. Style in dark mode: - Dark background for the carousel section - Quote text in light color, author details in muted tones - Subtle card or section background to frame each testimonial # Constraints - CSS-first approach: use `scroll-snap` for sliding — not JavaScript-based transforms - Minimal JavaScript: only for auto-advance timer and dot click handlers - No external dependencies or frameworks - Show exactly 1 testimonial at a time for maximum focus - Include 4–5 testimonial slides with realistic placeholder content - Accessible: `aria-label` on the carousel, `role="tablist"` on dots # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include 4–5 realistic testimonials (SaaS or tech product theme) - Well-commented code with clear sections for layout, animation, and interaction

# 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