BlogWriterLanding Component

A beautiful, animated landing page for the ALwrity Blog Writer that utilizes the custom background image with artistic button placement and subtle animations.

Features

🎨 Visual Design

Full-screen background image (/blog-writer-bg.png) with horizontal stretching (56% width) and left alignment
Gradient overlays for subtle depth
Clean, minimal design without decorative elements
Glassmorphism effects on secondary buttons

✨ Interactions

Button hover effects with smooth transitions
Modal interactions with clean transitions
Responsive hover states for all interactive elements

🚀 Interactive Elements

Primary CTA Button: "Chat/Write with ALwrity Copilot" with gradient background
Secondary CTA Button: "ALwrity Blog Writer SuperPowers" opens feature modal
SuperPowers Modal: Showcases 6 key features with hover effects
Responsive design that works on all screen sizes

🎯 User Experience

Clear messaging about the blog writing capabilities
Feature showcase in an engaging modal format
Clean, focused messaging without distracting text
Clean transitions between states

Usage

import BlogWriterLanding from './BlogWriterLanding';

<BlogWriterLanding 
  onStartWriting={() => {
    // Handle start writing action
    // This can trigger copilot interaction
  }}
/>

Props

onStartWriting: () => void - Callback function called when user clicks "Chat/Write with ALwrity Copilot"

Integration

The component integrates with:

useCopilotTrigger hook for copilot interaction
BlogWriter main component as the initial state
Responsive design that adapts to different screen sizes

Styling

All styles are inline with CSS-in-JS approach for:

Better performance (no external CSS files)
Component isolation (styles don't leak)
Dynamic theming (easy to modify colors/effects)
Animation control (precise timing and effects)

Accessibility

Semantic HTML structure
Keyboard navigation support
Screen reader friendly
High contrast text and buttons
Focus indicators for interactive elements

2.2 KiB Raw Blame History