# Design Engineer / UI Engineer Skill

**Role**: Design Engineer - Bridge between design and development
**Purpose**: Create beautiful, modern, conversion-optimized landing pages and interfaces
**Output**: Production-ready HTML/CSS/React components with Tailwind

---

## Overview

A Design Engineer combines:
- **Visual Design**: Typography, color, spacing, hierarchy
- **Interaction Design**: Animations, transitions, micro-interactions
- **Frontend Development**: Semantic HTML, modern CSS, React components
- **Conversion Optimization**: CTAs, social proof, trust signals

---

## Activation

```
/designer "Create landing page for [PRODUCT]"
/designer "Design hero section for [FEATURE]"
/designer "Build pricing section with 3 tiers"
```

---

## Core Principles

### 1. Design System

**Typography Scale** (Tailwind):
```
text-xs    → 12px (captions, labels)
text-sm    → 14px (secondary text)
text-base  → 16px (body text)
text-lg    → 18px (large body)
text-xl    → 20px (subheadings)
text-2xl   → 24px (h3)
text-3xl   → 30px (h2)
text-4xl   → 36px (h1 mobile)
text-5xl   → 48px (h1 tablet)
text-6xl   → 60px (h1 desktop)
text-7xl   → 72px (hero headline)
```

**Spacing Scale**:
```
4  → 1rem  (16px)
8  → 2rem  (32px)
12 → 3rem  (48px)
16 → 4rem  (64px)
24 → 6rem  (96px)
32 → 8rem  (128px)
```

**Color Palette** (for SaaS):
```css
Primary: Blue (#3B82F6) - Trust, tech
Accent: Purple (#8B5CF6) - Innovation
Success: Green (#10B981) - Positive
Warning: Orange (#F59E0B) - Urgency
Error: Red (#EF4444) - Danger
Neutral: Gray (#6B7280) - Text

Gradients:
- Purple to Blue (modern)
- Blue to Cyan (tech)
- Orange to Pink (energetic)
```

---

### 2. Layout Patterns

**Container Widths**:
```tsx
max-w-7xl  → 1280px (default)
max-w-6xl  → 1152px (text-heavy)
max-w-5xl  → 1024px (focused)
max-w-4xl  → 896px (articles)
```

**Grid Systems**:
```tsx
// 2-column (tablet+)
<div className="grid md:grid-cols-2 gap-8">

// 3-column (desktop)
<div className="grid lg:grid-cols-3 gap-6">

// 4-column (features)
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
```

---

### 3. Component Library

#### Hero Section (Modern)

```tsx
export function HeroModern() {
  return (
    <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50">
      {/* Background decoration */}
      <div className="absolute inset-0 bg-grid-slate-100 [mask-image:linear-gradient(0deg,white,rgba(255,255,255,0.6))]" />

      <div className="relative mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8">
        {/* Badge (optional) */}
        <div className="flex justify-center">
          <div className="relative rounded-full px-4 py-1.5 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
            Announcing our $10M Series A{' '}
            <a href="#" className="font-semibold text-blue-600">
              Read more <span aria-hidden="true">&rarr;</span>
            </a>
          </div>
        </div>

        {/* Main content */}
        <div className="mx-auto max-w-4xl text-center mt-10">
          <h1 className="text-5xl font-bold tracking-tight text-gray-900 sm:text-7xl">
            Build SaaS Features in{' '}
            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
              Minutes, Not Months
            </span>
          </h1>

          <p className="mt-6 text-lg leading-8 text-gray-600 max-w-2xl mx-auto">
            The only SaaS boilerplate with AI Skills that adapt to your quality level.
            Generate production-ready code with tests, validation, and perfect architecture.
          </p>

          {/* CTAs */}
          <div className="mt-10 flex items-center justify-center gap-x-6">
            <a
              href="#"
              className="rounded-md bg-blue-600 px-6 py-3 text-base font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 transition-all"
            >
              Start Building Free
            </a>
            <a
              href="#"
              className="text-base font-semibold leading-6 text-gray-900 group"
            >
              Watch demo <span aria-hidden="true" className="inline-block transition-transform group-hover:translate-x-1">→</span>
            </a>
          </div>

          {/* Trust signals */}
          <div className="mt-10 flex items-center justify-center gap-x-6 text-sm">
            <div className="flex items-center gap-x-2 text-gray-500">
              <svg className="h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
              </svg>
              No credit card required
            </div>
            <div className="flex items-center gap-x-2 text-gray-500">
              <svg className="h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
              </svg>
              Open source MIT
            </div>
            <div className="flex items-center gap-x-2 text-gray-500">
              <svg className="h-5 w-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
              1,247 projects created
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
```

---

#### Feature Section (Bento Grid)

```tsx
export function FeaturesBento() {
  return (
    <section className="py-24 bg-white">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-base font-semibold leading-7 text-blue-600">
            Everything you need
          </h2>
          <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
            Ship faster without compromising quality
          </p>
        </div>

        <div className="mx-auto mt-16 max-w-7xl">
          {/* Bento grid */}
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {/* Large feature (spans 2 columns) */}
            <div className="relative sm:col-span-2 lg:row-span-2">
              <div className="absolute inset-px rounded-lg bg-white shadow-sm ring-1 ring-black/5" />
              <div className="relative flex h-full flex-col overflow-hidden rounded-lg">
                <div className="p-8 pb-8 sm:p-10">
                  <h3 className="text-2xl font-semibold text-gray-900">
                    🎯 3 Quality Levels
                  </h3>
                  <p className="mt-4 text-gray-600 max-w-lg">
                    Crafted adapts to your needs: Rapid for MVPs, Balanced for growing products,
                    or Crafted for enterprise. Same commands, different quality.
                  </p>

                  {/* Code example */}
                  <div className="mt-6 rounded-lg bg-gray-900 p-4">
                    <code className="text-sm text-gray-300">
                      <span className="text-blue-400">$</span> crafted clone<br/>
                      <span className="text-gray-500"># Select: Balanced - Web Only</span><br/>
                      <span className="text-green-400">✓</span> Project created!
                    </code>
                  </div>
                </div>
              </div>
            </div>

            {/* Regular features */}
            <div className="relative">
              <div className="absolute inset-px rounded-lg bg-white shadow-sm ring-1 ring-black/5" />
              <div className="relative p-8">
                <div className="text-4xl mb-4">⚡</div>
                <h3 className="text-lg font-semibold text-gray-900">
                  AI Skills
                </h3>
                <p className="mt-2 text-sm text-gray-600">
                  Describe features in plain English. Get production code in minutes.
                </p>
              </div>
            </div>

            <div className="relative">
              <div className="absolute inset-px rounded-lg bg-white shadow-sm ring-1 ring-black/5" />
              <div className="relative p-8">
                <div className="text-4xl mb-4">🏆</div>
                <h3 className="text-lg font-semibold text-gray-900">
                  Quality Guaranteed
                </h3>
                <p className="mt-2 text-sm text-gray-600">
                  70-100% test coverage. Architecture validated. Type-safe.
                </p>
              </div>
            </div>

            <div className="relative sm:col-span-2">
              <div className="absolute inset-px rounded-lg bg-white shadow-sm ring-1 ring-black/5" />
              <div className="relative p-8">
                <div className="text-4xl mb-4">🚀</div>
                <h3 className="text-lg font-semibold text-gray-900">
                  Full-Stack Complete
                </h3>
                <p className="mt-2 text-sm text-gray-600">
                  Next.js, tRPC, Prisma, Supabase, Stripe, Resend. Everything included.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
```

---

#### Pricing Section (3-tier)

```tsx
export function PricingModern() {
  return (
    <section className="relative isolate bg-white px-6 py-24 sm:py-32 lg:px-8">
      <div className="absolute inset-x-0 -top-3 -z-10 transform-gpu overflow-hidden px-36 blur-3xl">
        <div className="mx-auto aspect-[1155/678] w-[72.1875rem] bg-gradient-to-tr from-blue-400 to-purple-600 opacity-20" />
      </div>

      <div className="mx-auto max-w-4xl text-center">
        <p className="text-base font-semibold leading-7 text-blue-600">Pricing</p>
        <h2 className="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
          Choose the right plan for you
        </h2>
      </div>

      <div className="mx-auto mt-16 grid max-w-lg grid-cols-1 items-center gap-y-6 sm:mt-20 sm:gap-y-0 lg:max-w-6xl lg:grid-cols-3">
        {/* Tier 1: Free */}
        <div className="rounded-3xl p-8 ring-1 ring-gray-200 sm:p-10">
          <h3 className="text-base font-semibold leading-7 text-gray-900">Open Source</h3>
          <p className="mt-4 flex items-baseline gap-x-2">
            <span className="text-5xl font-bold tracking-tight text-gray-900">$0</span>
            <span className="text-base text-gray-500">/forever</span>
          </p>
          <p className="mt-6 text-base leading-7 text-gray-600">
            Perfect for solo founders and side projects
          </p>

          <ul className="mt-8 space-y-3 text-sm leading-6 text-gray-600">
            <li className="flex gap-x-3">
              <svg className="h-6 w-5 flex-none text-blue-600" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
              </svg>
              All templates
            </li>
            <li className="flex gap-x-3">
              <svg className="h-6 w-5 flex-none text-blue-600" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
              </svg>
              AI Skills
            </li>
            <li className="flex gap-x-3">
              <svg className="h-6 w-5 flex-none text-blue-600" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
              </svg>
              Community support
            </li>
          </ul>

          <a
            href="#"
            className="mt-8 block rounded-md py-2.5 px-3.5 text-center text-sm font-semibold text-blue-600 ring-1 ring-inset ring-blue-200 hover:ring-blue-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
          >
            Start Building
          </a>
        </div>

        {/* Tier 2: Pro (Highlighted) */}
        <div className="relative rounded-3xl bg-gradient-to-b from-blue-600 to-blue-700 p-8 shadow-2xl ring-1 ring-gray-900/10 sm:p-10">
          {/* Popular badge */}
          <div className="absolute -top-5 left-0 right-0 flex justify-center">
            <div className="rounded-full bg-blue-600 px-4 py-1 text-sm font-semibold text-white shadow-sm">
              Most Popular
            </div>
          </div>

          <h3 className="text-base font-semibold leading-7 text-white">Pro</h3>
          <p className="mt-4 flex items-baseline gap-x-2">
            <span className="text-5xl font-bold tracking-tight text-white">$299</span>
            <span className="text-base text-blue-200">/month</span>
          </p>
          <p className="mt-6 text-base leading-7 text-blue-100">
            For growing teams (1-10 devs)
          </p>

          <ul className="mt-8 space-y-3 text-sm leading-6 text-white">
            <li className="flex gap-x-3">
              <svg className="h-6 w-5 flex-none" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
              </svg>
              Everything in Open Source
            </li>
            <li className="flex gap-x-3">
              <svg className="h-6 w-5 flex-none" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
              </svg>
              Premium templates
            </li>
            <li className="flex gap-x-3">
              <svg className="h-6 w-5 flex-none" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
              </svg>
              Priority support
            </li>
            <li className="flex gap-x-3">
              <svg className="h-6 w-5 flex-none" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
              </svg>
              2h consulting/month
            </li>
          </ul>

          <a
            href="#"
            className="mt-8 block rounded-md bg-white py-2.5 px-3.5 text-center text-sm font-semibold text-blue-600 shadow-sm hover:bg-blue-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
          >
            Get Started
          </a>
        </div>

        {/* Tier 3: Enterprise */}
        <div className="rounded-3xl p-8 ring-1 ring-gray-200 sm:p-10">
          <h3 className="text-base font-semibold leading-7 text-gray-900">Enterprise</h3>
          <p className="mt-4 flex items-baseline gap-x-2">
            <span className="text-5xl font-bold tracking-tight text-gray-900">Custom</span>
          </p>
          <p className="mt-6 text-base leading-7 text-gray-600">
            For large teams (10+ devs)
          </p>

          <ul className="mt-8 space-y-3 text-sm leading-6 text-gray-600">
            <li className="flex gap-x-3">
              <svg className="h-6 w-5 flex-none text-blue-600" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
              </svg>
              Everything in Pro
            </li>
            <li className="flex gap-x-3">
              <svg className="h-6 w-5 flex-none text-blue-600" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
              </svg>
              Custom skills
            </li>
            <li className="flex gap-x-3">
              <svg className="h-6 w-5 flex-none text-blue-600" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
              </svg>
              SLA 99.9%
            </li>
            <li className="flex gap-x-3">
              <svg className="h-6 w-5 flex-none text-blue-600" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
              </svg>
              24/7 support
            </li>
          </ul>

          <a
            href="#"
            className="mt-8 block rounded-md py-2.5 px-3.5 text-center text-sm font-semibold text-blue-600 ring-1 ring-inset ring-blue-200 hover:ring-blue-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
          >
            Contact Sales
          </a>
        </div>
      </div>
    </section>
  )
}
```

---

#### CTA Section

```tsx
export function CTASection() {
  return (
    <section className="relative isolate overflow-hidden bg-gray-900 px-6 py-24 sm:py-32 lg:px-8">
      <div className="absolute -top-80 left-[max(6rem,33%)] -z-10 transform-gpu blur-3xl sm:left-1/2 md:top-20 lg:ml-20 xl:top-3 xl:ml-56">
        <div className="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-blue-500 to-purple-600 opacity-30" />
      </div>

      <div className="mx-auto max-w-2xl text-center">
        <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
          Ready to ship 66x faster?
        </h2>
        <p className="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-300">
          Join 1,247 developers building production-ready SaaS in minutes, not months.
        </p>
        <div className="mt-10 flex items-center justify-center gap-x-6">
          <a
            href="#"
            className="rounded-md bg-white px-6 py-3 text-base font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
          >
            Start Building Free
          </a>
          <a href="#" className="text-base font-semibold leading-6 text-white">
            Watch demo <span aria-hidden="true">→</span>
          </a>
        </div>
      </div>
    </section>
  )
}
```

---

## Animations & Micro-interactions

### Hover Effects

```tsx
// Button hover
className="transition-all duration-200 hover:scale-105 hover:shadow-lg"

// Card hover
className="transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"

// Link hover
className="group transition-colors hover:text-blue-600"
// With arrow
<span className="inline-block transition-transform group-hover:translate-x-1">→</span>
```

### Fade In on Scroll

```tsx
// Using Intersection Observer
className="opacity-0 translate-y-8 transition-all duration-700 [&.visible]:opacity-100 [&.visible]:translate-y-0"
```

### Gradient Text

```tsx
className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
```

---

## Conversion Optimization

### Above the Fold Checklist
- [ ] Clear headline (value prop)
- [ ] Subheadline (elaborate)
- [ ] Primary CTA (visible, contrasting)
- [ ] Trust signals (no CC, open source, users count)
- [ ] Hero image/video (optional)

### Trust Signals
- Social proof (testimonials, logos)
- Numbers (users, GitHub stars, projects)
- Security badges (SSL, SOC2, GDPR)
- Guarantees (money-back, free trial)

### CTAs Best Practices
- **Primary CTA**: High contrast (blue on white, white on blue)
- **Secondary CTA**: Ghost button (outline)
- **Text**: Action-oriented ("Start Building" vs "Submit")
- **Placement**: Hero, after features, pricing, footer

---

## Responsive Design

### Mobile First
```tsx
// Base (mobile)
className="text-4xl"

// Tablet
className="text-4xl sm:text-5xl"

// Desktop
className="text-4xl sm:text-5xl lg:text-6xl"
```

### Breakpoints (Tailwind)
```
sm:  640px
md:  768px
lg:  1024px
xl:  1280px
2xl: 1536px
```

---

## Accessibility (a11y)

### Checklist
- [ ] Semantic HTML (`<header>`, `<main>`, `<nav>`, `<section>`)
- [ ] Alt text for images
- [ ] Aria labels for icons
- [ ] Keyboard navigation (tab order)
- [ ] Focus states (`:focus-visible`)
- [ ] Color contrast (WCAG AA minimum)

### Example
```tsx
<button
  className="..."
  aria-label="Start building your SaaS"
  type="button"
>
  Start Building Free
</button>
```

---

## Performance

### Image Optimization
```tsx
// Use Next.js Image
import Image from 'next/image'

<Image
  src="/hero.png"
  alt="Product screenshot"
  width={1920}
  height={1080}
  priority // for above-the-fold
  className="rounded-lg shadow-2xl"
/>
```

### Lazy Loading
```tsx
// Below the fold images
loading="lazy"
```

### Font Optimization
```tsx
// next/font (automatic optimization)
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })
```

---

## Tools to Use

### For Design Inspiration
- WebSearch: "modern SaaS landing pages 2025"
- WebSearch: "best converting landing pages"
- WebFetch: dribbble.com, awwwards.com

### For Color Palettes
- WebSearch: "SaaS color palettes"
- Use Tailwind's built-in colors

### For Icons
- Heroicons (included in Tailwind)
- Lucide icons
- Feather icons

---

## Delivery Checklist

- [ ] Responsive (mobile, tablet, desktop)
- [ ] Accessible (semantic HTML, ARIA, keyboard nav)
- [ ] Fast (optimized images, fonts)
- [ ] Modern design (gradients, shadows, spacing)
- [ ] Clear CTAs (above fold + pricing + footer)
- [ ] Social proof (testimonials, numbers)
- [ ] SEO optimized (meta tags, headings)

---

**Status**: Ready to design beautiful, high-converting landing pages! 🎨
