# Hero Slider Persistence Implementation Plan

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** Enable dealers to save hero slider configurations to the database and display them on dealer pages using Swiper.js

**Architecture:** Next.js 14 Server Actions for save/publish, JSON storage in Dealer model, server-side rendering for display with Swiper.js client component

**Tech Stack:** Next.js 14, Prisma, PostgreSQL, Swiper.js, TypeScript

---

## Task 1: Database Schema Migration

**Files:**

- Modify: `prisma/schema.prisma` (add heroSlider field to Dealer model)
- Create: `prisma/migrations/[timestamp]_add_hero_slider/migration.sql` (auto-generated)

**Step 1: Add heroSlider field to Dealer model**

Open `prisma/schema.prisma` and locate the Dealer model (around line 47). Add the `heroSlider` field after the `settings` field:

```prisma
model Dealer {
  // ... existing fields ...
  contactData         Json?    // Business hours, alternate phones, secondary emails
  socialLinks         Json?    // Facebook, Instagram, Twitter, LinkedIn, YouTube
  pageContent         Json?    // Custom hero text, about section, testimonials
  mediaAssets         Json?    // Logos, images, videos
  settings            Json?    // Feature flags, display preferences
  heroSlider          Json?    // SliderContent: { id, slides: Slide[], updatedAt, publishedAt? }

  // Migration Support (for 3500 existing dealer sites)
  migrationData       Json?    // Scraped raw data, source URL
  // ... rest of model ...
}
```

**Step 2: Generate migration**

Run: `npx prisma migrate dev --name add_hero_slider`

Expected output:

```
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": PostgreSQL database "..."

Applying migration `[timestamp]_add_hero_slider`
Migration applied successfully
✔ Generated Prisma Client
```

**Step 3: Verify migration in database**

Run: `npx prisma studio`

Expected: Open Prisma Studio, navigate to Dealer model, verify `heroSlider` field exists with type Json and nullable

**Step 4: Commit schema change**

```bash
git add prisma/schema.prisma prisma/migrations
git commit -m "feat(db): add heroSlider JSON field to Dealer model

Stores SliderContent as JSON: id, slides array, updatedAt, publishedAt.
Enables dealers to save hero slider configurations.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>"
```

---

## Task 2: Install Swiper Dependency

**Files:**

- Modify: `package.json` (add swiper dependency)
- Modify: `package-lock.json` (auto-updated)

**Step 1: Install Swiper**

Run: `npm install swiper`

Expected output:

```
added 1 package, and audited [N] packages in [time]
```

**Step 2: Verify installation**

Run: `npm list swiper`

Expected: `swiper@11.x.x` (or latest version)

**Step 3: Commit dependency**

```bash
git add package.json package-lock.json
git commit -m "feat(deps): add Swiper.js for hero slider carousel

Installing Swiper v11 for full-featured slider with autoplay,
navigation, pagination, and keyboard support.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>"
```

---

## Task 3: Create Server Actions

**Files:**

- Create: `app/actions/slider.ts`
- Reference: `lib/auth.ts` (for authOptions)
- Reference: `types/slider.ts` (for SliderContent type)

**Step 1: Create slider Server Actions file**

Create `app/actions/slider.ts`:

```typescript
'use server';

import { getServerSession } from 'next-auth';
import { authOptions } from '@/lib/auth';
import { prisma } from '@/lib/prisma';
import { SliderContent } from '@/types/slider';

export async function saveHeroSlider(sliderContent: SliderContent) {
  // 1. Authenticate user
  const session = await getServerSession(authOptions);
  if (!session?.user?.id) {
    throw new Error('Unauthorized');
  }

  // 2. Verify dealer exists
  const dealer = await prisma.dealer.findUnique({
    where: { userId: session.user.id },
  });

  if (!dealer) {
    throw new Error('Dealer not found');
  }

  // 3. Validate slider content
  if (!sliderContent.slides || sliderContent.slides.length === 0) {
    throw new Error('Slider must have at least one slide');
  }

  // Validate each slide has required fields
  for (const slide of sliderContent.slides) {
    if (!slide.image?.url) {
      throw new Error('All slides must have an image');
    }
  }

  // 4. Update database
  await prisma.dealer.update({
    where: { id: dealer.id },
    data: {
      heroSlider: sliderContent as any, // Prisma JSON type
      updatedAt: new Date(),
    },
  });

  return { success: true };
}

export async function getHeroSlider(userId: string) {
  const dealer = await prisma.dealer.findUnique({
    where: { userId },
    select: { heroSlider: true },
  });

  return (dealer?.heroSlider as SliderContent) || null;
}
```

**Step 2: Verify TypeScript compilation**

Run: `npx tsc --noEmit`

Expected: No errors (TypeScript compilation successful)

**Step 3: Commit Server Actions**

```bash
git add app/actions/slider.ts
git commit -m "feat(slider): add Server Actions for save and fetch

- saveHeroSlider: Auth check, validation, save to DB
- getHeroSlider: Fetch slider by userId

Validates slides array not empty and all slides have images.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>"
```

---

## Task 4: Update SliderEditorContext

**Files:**

- Modify: `app/components/SliderEditorContext.tsx:115-126`

**Step 1: Import Server Action**

At the top of `app/components/SliderEditorContext.tsx`, add import after existing imports:

```typescript
import { saveHeroSlider } from '@/app/actions/slider';
```

**Step 2: Replace saveAndPublish function**

Replace the `saveAndPublish` callback (lines 115-126) with:

```typescript
const saveAndPublish = useCallback(async () => {
  try {
    // 1. Mark as published
    const contentToSave = {
      ...sliderContent,
      publishedAt: new Date(),
    };

    // 2. Call Server Action
    await saveHeroSlider(contentToSave);

    // 3. Update local state
    setSliderContent(contentToSave);
    setFormState((prev) => ({
      ...prev,
      hasUnsavedChanges: false,
    }));
  } catch (error) {
    console.error('Failed to save slider:', error);
    // TODO: Show error toast notification
    throw error; // Re-throw for modal to handle
  }
}, [sliderContent]);
```

**Step 3: Verify TypeScript compilation**

Run: `npx tsc --noEmit`

Expected: No errors

**Step 4: Test in development**

Run: `npm run dev`

Then:

1. Navigate to dashboard
2. Open slider editor
3. Make changes
4. Click "Save & Publish"
5. Check browser console for any errors

Expected: No errors in console (database save may fail if not connected, but Server Action should be called)

**Step 5: Commit editor integration**

```bash
git add app/components/SliderEditorContext.tsx
git commit -m "feat(slider): implement saveAndPublish with Server Action

Replaces TODO with actual database save via saveHeroSlider.
Handles errors and re-throws for modal error display.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>"
```

---

## Task 5: Create HeroSlider Component

**Files:**

- Create: `components/HeroSlider.tsx`
- Reference: `types/slider.ts` (for SliderContent type)

**Step 1: Create HeroSlider component**

Create `components/HeroSlider.tsx`:

```typescript
'use client';

import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Navigation, Pagination, Keyboard } from 'swiper/modules';
import { SliderContent } from '@/types/slider';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

interface HeroSliderProps {
  sliderContent: SliderContent;
}

export function HeroSlider({ sliderContent }: HeroSliderProps) {
  if (!sliderContent.slides || sliderContent.slides.length === 0) {
    return null;
  }

  return (
    <Swiper
      modules={[Autoplay, Navigation, Pagination, Keyboard]}
      autoplay={{
        delay: 5000,
        disableOnInteraction: false,
      }}
      navigation
      pagination={{ clickable: true }}
      keyboard={{ enabled: true }}
      loop={sliderContent.slides.length > 1}
      className="hero-slider"
    >
      {sliderContent.slides.map((slide) => (
        <SwiperSlide key={slide.id}>
          <div
            className="slide-content"
            style={{
              backgroundImage: `url(${slide.image.url})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
            }}
          >
            <div className="slide-overlay">
              {slide.headline && (
                <h1
                  style={{
                    color: slide.headlineFormatting?.color,
                    fontWeight: slide.headlineFormatting?.bold ? 'bold' : 'normal',
                    fontStyle: slide.headlineFormatting?.italic ? 'italic' : 'normal',
                  }}
                >
                  {slide.headline}
                </h1>
              )}

              {slide.subheading && (
                <p
                  style={{
                    color: slide.subheadingFormatting?.color,
                    fontWeight: slide.subheadingFormatting?.bold ? 'bold' : 'normal',
                    fontStyle: slide.subheadingFormatting?.italic ? 'italic' : 'normal',
                  }}
                >
                  {slide.subheading}
                </p>
              )}

              {slide.button.text && slide.button.url && (
                <a href={slide.button.url} className="slide-button">
                  {slide.button.text}
                </a>
              )}
            </div>
          </div>
        </SwiperSlide>
      ))}
    </Swiper>
  );
}
```

**Step 2: Verify TypeScript compilation**

Run: `npx tsc --noEmit`

Expected: No errors

**Step 3: Commit HeroSlider component**

```bash
git add components/HeroSlider.tsx
git commit -m "feat(slider): add HeroSlider display component

Swiper.js wrapper with all features:
- Autoplay (5s delay)
- Navigation arrows
- Pagination dots
- Keyboard navigation

Handles text formatting and button CTAs.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>"
```

---

## Task 6: Add Swiper Styles

**Files:**

- Modify: `app/globals.css` (append hero slider styles)

**Step 1: Add hero slider styles**

Open `app/globals.css` and append at the end:

```css
/* ============================================
   Hero Slider Styles (Swiper.js)
   ============================================ */

.hero-slider {
  width: 100%;
  height: 500px;
}

.hero-slider .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-slider .slide-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-slider .slide-overlay {
  position: relative;
  z-index: 10;
  text-align: center;
  color: white;
  padding: 2rem;
  max-width: 800px;
}

.hero-slider .slide-overlay::before {
  content: '';
  position: absolute;
  inset: -2rem;
  background: rgba(0, 0, 0, 0.3);
  z-index: -1;
  border-radius: 8px;
}

.hero-slider .slide-overlay h1 {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.hero-slider .slide-overlay p {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.hero-slider .slide-button {
  display: inline-block;
  padding: 1rem 2rem;
  background: #ffd700;
  color: #003366;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: background 0.3s;
}

.hero-slider .slide-button:hover {
  background: #ffc700;
}

/* Swiper navigation */
.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev {
  color: white;
}

.hero-slider .swiper-pagination-bullet {
  background: white;
  opacity: 0.5;
}

.hero-slider .swiper-pagination-bullet-active {
  background: #ffd700;
  opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-slider {
    height: 300px;
  }

  .hero-slider .slide-overlay h1 {
    font-size: 2rem;
  }

  .hero-slider .slide-overlay p {
    font-size: 1.25rem;
  }
}
```

**Step 2: Verify styles in dev mode**

Run: `npm run dev`

Then navigate to a page with the slider and inspect styles in browser DevTools.

Expected: Styles applied correctly, no CSS conflicts

**Step 3: Commit styles**

```bash
git add app/globals.css
git commit -m "style(slider): add hero slider CSS styles

Full-width responsive slider with:
- Desktop: 500px height
- Mobile: 300px height
- Dark overlay for text readability
- AMSOIL brand colors for buttons and pagination

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>"
```

---

## Task 7: Integration Testing & Verification

**Files:**

- Test with existing slider editor
- Manual verification of database saves
- Manual verification of display

**Step 1: Start development environment**

Run: `npm run power-cycle`

Expected: Development server starts on port 3000, database connected

**Step 2: Test editor save flow**

1. Navigate to `http://localhost:3000/dashboard`
2. Click "Edit Hero Slider" (or wherever the editor is accessible)
3. Add/edit slides with:
   - Images from library
   - Headline text with formatting
   - Subheading text with formatting
   - Button text and URL
4. Click "Save & Publish"

Expected:

- No errors in console
- Modal closes successfully
- Success indication shown

**Step 3: Verify database save**

Run: `npx prisma studio`

Navigate to Dealer table, find your test dealer, inspect `heroSlider` field.

Expected: JSON data contains slides array with all configured data

**Step 4: Test display on dealer page**

This step requires implementing the display integration on the actual dealer page. For now, create a test page to verify the HeroSlider component renders correctly.

Create `app/test-slider/page.tsx` (temporary test page):

```typescript
import { HeroSlider } from '@/components/HeroSlider';
import { SliderContent } from '@/types/slider';

const mockSlider: SliderContent = {
  id: 'test-123',
  slides: [
    {
      id: 'slide-1',
      order: 0,
      image: { url: 'https://via.placeholder.com/1200x500', source: 'library' },
      headline: 'Welcome to AMSOIL',
      headlineFormatting: { color: '#FFD700', bold: true },
      subheading: 'Premium Synthetic Motor Oil',
      subheadingFormatting: { color: '#FFFFFF' },
      button: { text: 'Shop Now', url: '/products' },
    },
    {
      id: 'slide-2',
      order: 1,
      image: { url: 'https://via.placeholder.com/1200x500/003366', source: 'library' },
      headline: 'Performance You Can Trust',
      headlineFormatting: { color: '#FFFFFF', bold: true },
      subheading: 'Engineered for Excellence',
      subheadingFormatting: { color: '#FFD700' },
      button: { text: 'Learn More', url: '/about' },
    },
  ],
  updatedAt: new Date(),
  publishedAt: new Date(),
};

export default function TestSliderPage() {
  return (
    <div>
      <HeroSlider sliderContent={mockSlider} />
    </div>
  );
}
```

Navigate to `http://localhost:3000/test-slider`

Expected:

- Slider renders with 2 slides
- Auto-play works (slides change every 5 seconds)
- Navigation arrows work
- Pagination dots work
- Keyboard arrows work
- Text formatting displays correctly
- Button links work

**Step 5: Clean up test page**

Delete `app/test-slider/page.tsx` after verification.

**Step 6: Commit verification notes**

```bash
git add -A
git commit -m "test: verify hero slider end-to-end functionality

Manual testing completed:
- Editor saves to database successfully
- Swiper.js displays slides correctly
- All features working (autoplay, nav, pagination, keyboard)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>"
```

---

## Task 8: Dashboard Integration (Load Initial Slider)

**Files:**

- Modify: `app/dashboard/page.tsx` (or wherever slider editor is opened)

**Implementation Note:**

This task depends on your current dashboard implementation. You need to:

1. Import `getHeroSlider` from `@/app/actions/slider`
2. Fetch the current slider when opening the editor modal
3. Pass it as `initialSliderContent` prop to `SliderEditorProvider`

**Example integration pattern:**

```typescript
// In the component that opens the slider editor modal
const session = await getServerSession(authOptions);
if (session?.user?.id) {
  const currentSlider = await getHeroSlider(session.user.id);

  // Pass to editor:
  // <SliderEditorProvider initialSliderContent={currentSlider || undefined}>
  //   <SliderEditorModal />
  // </SliderEditorProvider>
}
```

**Step 1: Identify where slider editor is opened**

Search for SliderEditorModal usage:

Run: `grep -r "SliderEditorModal" app/`

**Step 2: Implement initial data loading**

Modify the identified file to fetch and pass initial slider data.

**Step 3: Test round-trip**

1. Create a slider with specific content
2. Save it
3. Close modal
4. Reopen modal

Expected: Modal opens with previously saved slider content

**Step 4: Commit dashboard integration**

```bash
git add app/dashboard/page.tsx  # or actual file
git commit -m "feat(slider): load existing slider in editor

Fetch current slider from DB when opening editor.
Enables editing existing sliders instead of starting fresh.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>"
```

---

## Task 9: Dealer Page Integration (Display Slider)

**Files:**

- Modify: Dealer page component (location TBD based on routing structure)

**Implementation Note:**

This task depends on your dealer page routing structure. Based on the design, you'll need to:

1. Fetch dealer data including `heroSlider` field
2. Conditionally render `<HeroSlider />` if slider exists
3. Display above other page content

**Example integration pattern:**

```typescript
import { HeroSlider } from '@/components/HeroSlider';
import { SliderContent } from '@/types/slider';

export default async function DealerPage({ params }: { params: { subdomain: string } }) {
  const dealer = await prisma.dealer.findUnique({
    where: { subdomain: params.subdomain },
    select: {
      heroSlider: true,
      // ... other fields
    },
  });

  return (
    <>
      {dealer?.heroSlider && (
        <HeroSlider sliderContent={dealer.heroSlider as SliderContent} />
      )}
      {/* Rest of dealer page content */}
    </>
  );
}
```

**Step 1: Identify dealer page location**

Search for dealer page routes:

Run: `find app -name "*dealer*" -o -name "*subdomain*" | grep -v node_modules`

**Step 2: Implement slider display**

Modify the dealer page to fetch and display hero slider.

**Step 3: Test on actual dealer page**

1. Configure slider for a test dealer
2. Navigate to that dealer's public page
3. Verify slider displays at top

Expected: Slider renders correctly on dealer's public page

**Step 4: Commit dealer page integration**

```bash
git add [dealer-page-file]
git commit -m "feat(slider): display hero slider on dealer pages

Fetch heroSlider from DB and render at page top.
Only displays if slider configured (null-safe).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>"
```

---

## Task 10: Error Handling & Edge Cases

**Files:**

- Modify: `app/components/SliderEditorContext.tsx` (add validation)
- Modify: `app/actions/slider.ts` (enhance error messages)

**Step 1: Add client-side validation**

In `app/components/SliderEditorContext.tsx`, add validation before save:

```typescript
const saveAndPublish = useCallback(async () => {
  // Validate all slides have images
  const hasEmptyImages = sliderContent.slides.some((slide) => !slide.image?.url);
  if (hasEmptyImages) {
    alert('All slides must have an image before publishing.');
    return;
  }

  try {
    // ... rest of save logic
  } catch (error) {
    const errorMessage = error instanceof Error ? error.message : 'Failed to save slider';
    alert(`Error: ${errorMessage}`);
    console.error('Failed to save slider:', error);
    throw error;
  }
}, [sliderContent]);
```

**Step 2: Test validation**

1. Open slider editor
2. Try to save with a slide that has no image

Expected: Alert shown, save prevented

**Step 3: Test error handling**

1. Disconnect database or cause save to fail
2. Try to save slider

Expected: Error alert shown, modal stays open

**Step 4: Commit error handling**

```bash
git add app/components/SliderEditorContext.tsx app/actions/slider.ts
git commit -m "feat(slider): add validation and error handling

Client-side: validate all slides have images
Server-side: clear error messages
UI: alert on errors, keep modal open for retry

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>"
```

---

## Task 11: Documentation Update

**Files:**

- Modify: `CLAUDE.md` (add slider documentation reference)
- Create: `docs/SLIDER_USAGE.md` (user guide)

**Step 1: Create user documentation**

Create `docs/SLIDER_USAGE.md`:

```markdown
# Hero Slider Usage Guide

## Overview

The hero slider allows dealers to create full-width carousel slides at the top of their landing page.

## Features

- Full-width responsive slider
- Auto-play (5 second intervals)
- Navigation arrows
- Pagination dots
- Keyboard navigation (arrow keys)
- Text formatting (color, bold, italic)
- Call-to-action buttons

## Editing Your Slider

### Opening the Editor

1. Log in to your dashboard
2. Click "Edit Hero Slider"

### Adding Slides

1. Click "Add Slide"
2. Upload an image or select from library
3. Add headline text (required)
4. Add subheading text (optional)
5. Add button text and URL (optional)
6. Use formatting toolbar for text styling

### Formatting Text

- **Color:** Choose from AMSOIL brand colors
- **Bold:** Emphasize important text
- **Italic:** Add style to text

### Publishing

1. Review all slides in preview
2. Click "Save & Publish"
3. Your slider will appear immediately on your dealer page

## Technical Details

### Storage

- Slider configuration stored as JSON in database
- Each dealer has one hero slider
- Images stored separately (not in JSON)

### Display

- Desktop: 500px height
- Mobile: 300px height
- Responsive images with background-cover
- Dark overlay for text readability

## Troubleshooting

**Slider not appearing:**

- Ensure at least one slide configured
- Verify all slides have images
- Check that slider is published (not draft)

**Images not displaying:**

- Verify image URLs are accessible
- Check image file formats (JPG, PNG, WebP supported)
- Ensure images uploaded to library

**Text not readable:**

- Use light colors for text on dark backgrounds
- Use dark colors for text on light backgrounds
- Enable bold for better contrast
```

**Step 2: Update CLAUDE.md**

Add to documentation table in `CLAUDE.md`:

```markdown
| Hero slider usage | docs/SLIDER_USAGE.md |
```

**Step 3: Commit documentation**

```bash
git add docs/SLIDER_USAGE.md CLAUDE.md
git commit -m "docs: add hero slider usage guide

User-facing documentation for:
- Editing slider
- Adding slides
- Text formatting
- Publishing
- Troubleshooting

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>"
```

---

## Task 12: Final Testing & Cleanup

**Step 1: Run full test suite**

Run: `npm test`

Expected: All existing tests pass (slider has no automated tests yet)

**Step 2: Run build**

Run: `npm run build`

Expected: Production build succeeds with no errors

**Step 3: Run linter**

Run: `npm run lint`

Expected: No linting errors

**Step 4: Manual end-to-end test**

Complete user journey:

1. Login as dealer
2. Open slider editor
3. Create multi-slide slider with formatting
4. Save and publish
5. View dealer page
6. Verify slider displays correctly
7. Test all interactive features

**Step 5: Create final commit**

```bash
git add -A
git commit -m "feat(slider): complete hero slider implementation

Implemented:
- Database persistence (JSON in Dealer model)
- Server Actions (save/fetch)
- Swiper.js display component
- Editor integration
- Dealer page integration
- Error handling
- Documentation

All tests passing. Ready for production.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>"
```

**Step 6: Push branch**

Run: `git push -u origin feature/hero-slider-persistence`

---

## Completion Checklist

- [ ] Database migration applied (`heroSlider` field added)
- [ ] Swiper dependency installed
- [ ] Server Actions created (`saveHeroSlider`, `getHeroSlider`)
- [ ] SliderEditorContext updated (saveAndPublish implemented)
- [ ] HeroSlider component created
- [ ] Swiper styles added
- [ ] Dashboard integration (load initial slider)
- [ ] Dealer page integration (display slider)
- [ ] Error handling implemented
- [ ] Documentation created
- [ ] All tests passing
- [ ] Build succeeds
- [ ] Linter passes
- [ ] Manual testing complete

---

## Next Steps After Implementation

1. **Code Review:** Create PR for review
2. **QA Testing:** Test on staging environment
3. **Performance:** Optimize image loading (WebP conversion, responsive images)
4. **Analytics:** Add tracking for slide views and button clicks
5. **Enhancements:** Consider future features (video backgrounds, A/B testing)