Memphis Playful

# Memphis Playful Landing Page

Create a fun, energetic landing page inspired by the Memphis design movement with bold geometric shapes, bright saturated colors, and playful typography.

## Design Specifications

**Style**: Memphis Design / 80s-90s Revival
**Typography**: Bold, playful, varied sizes
**Layout**: Asymmetric, layered elements, scattered shapes
**Colors**: Bright yellow, hot pink, cyan, black accents

## Prompt for AI Code Generation

```
Build a Memphis-style playful landing page with these characteristics:

LAYOUT:
- Asymmetric, dynamic compositions
- Overlapping elements and layers
- Scattered decorative shapes in background
- Content cards with thick borders and shadows

TYPOGRAPHY:
- Headlines: 48-80px, extra bold, varied colors
- Mix of sizes within single headlines for emphasis
- All caps for impact
- Playful, slightly quirky font choices

COLORS:
- Yellow: #FFE135 (primary bright)
- Pink: #FF6B9D (secondary)
- Cyan: #00D4FF (accent)
- Black: #000000 (borders, text)
- White: #FFFFFF (backgrounds, contrast)

DECORATIVE SHAPES (create with CSS):
- Circles (various sizes, solid fills)
- Triangles (rotated divs or SVG)
- Squiggly lines (SVG paths)
- Dots in grid patterns
- Rotated squares
- Plus signs / crosses

INTERACTIONS:
- Bouncy hover animations
- Color shifts on hover
- Playful shadow offsets (4-8px solid black)
- Scale transforms

SECTIONS TO INCLUDE:
1. Navigation with fun logo and bold CTA
2. Hero with multi-colored headline and geometric graphic
3. Features with colorful cards on black background
4. Stats with playful number styling
5. Testimonial with emoji avatar
6. CTA with floating shapes
7. Footer with bright sections

TECHNICAL:
- Create shapes with CSS (divs, borders, transforms)
- Use rotate() for tilted elements
- Solid box-shadows (no blur)
- z-index layering for depth
- SVG for complex shapes (squiggles)
```

## Example React Component Structure

```tsx
export default function MemphisPlayful() {
  return (
    <div className="relative min-h-screen w-full overflow-hidden bg-white">
      {/* Background Shapes */}
      <div className="pointer-events-none fixed inset-0">
        {/* Yellow circle */}
        <div className="absolute top-20 left-10 h-32 w-32 rounded-full bg-[#FFE135]" />
        {/* Pink triangle */}
        <div className="absolute top-40 right-20 h-0 w-0 border-r-[40px] border-b-[70px] border-l-[40px] border-r-transparent border-b-[#FF6B9D] border-l-transparent" />
        {/* Rotated cyan square */}
        <div className="absolute bottom-20 left-1/4 h-16 w-16 rotate-45 bg-[#00D4FF]" />
      </div>

      {/* Hero */}
      <section className="relative z-10 px-8 py-24">
        <div className="mx-auto max-w-4xl text-center">
          <h1 className="text-6xl font-black uppercase md:text-8xl">
            <span className="text-black">Let&apos;s Get</span>
            <br />
            <span className="text-[#FF6B9D]">Funky</span>{' '}
            <span className="text-[#00D4FF]">Fresh!</span>
          </h1>
          <button
            className="mt-12 border-4 border-black bg-[#FFE135] px-8 py-4 text-xl font-bold text-black uppercase"
            style={{ boxShadow: '6px 6px 0 #000' }}
          >
            Join the Party
          </button>
        </div>
      </section>

      {/* Features on black */}
      <section className="relative bg-black py-24">
        <div className="mx-auto grid max-w-6xl gap-8 px-8 md:grid-cols-3">
          <div
            className="border-4 border-black bg-[#FFE135] p-8"
            style={{ boxShadow: '8px 8px 0 #FF6B9D' }}
          >
            <span className="text-6xl font-black">01</span>
            <h3 className="mt-4 text-2xl font-bold">Bold Ideas</h3>
          </div>
        </div>
      </section>
    </div>
  );
}
```

## CSS Variables

```css
:root {
  --color-yellow: #ffe135;
  --color-pink: #ff6b9d;
  --color-cyan: #00d4ff;
  --color-black: #000000;
  --border-width: 4px;
  --shadow-offset: 6px;
}

.memphis-shadow {
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-black);
}

.memphis-shadow:hover {
  box-shadow: calc(var(--shadow-offset) + 2px) calc(var(--shadow-offset) + 2px) 0 var(--color-black);
  transform: translate(-2px, -2px);
}
```

## Key Principles

1. **Embrace chaos**: Asymmetry and unexpected placements
2. **Bold colors**: Saturated, clashing, unapologetic
3. **Geometric fun**: Shapes everywhere as decoration
4. **Thick borders**: Heavy black outlines define elements
5. **Playful energy**: Everything should feel fun and energetic