BounceBee - Refined Buzz Curve

# BounceBee - Refined Buzz Curve

{
  "summary": "A vibrant, hand-drawn 'Buzz Curve' landing page theme featuring a 'sketch-box' aesthetic, animated bee-stripe journey lines, and glassmorphism elements with irregular borders. It uses a high-contrast palette of #F5A623 orange against a #FCF8F3 cream background.",
  "style": {
    "description": "The style is a fusion of hand-sketched organic forms and clean modern layouts. It uses 'Plus Jakarta Sans' for bold, heavy headers (often italicized and uppercase) paired with 'Caveat' for annotations and quotes. The color palette centers on a primary orange (#F5A623), a warm cream background (#FCF8F3), and deep carbon black (#1A1A1A) for structural lines. Key visual hooks include 'sketchy' borders with irregular radii, 'wiggle' hover animations on icons, and an infinite scrolling dash animation on SVG curves.",
    "prompt": "Create a design system with the following specs: Colors: Primary Orange (#F5A623), Background Cream (#FCF8F3), Dark Text/Border (#1A1A1A). Typography: Headings in 'Plus Jakarta Sans' (Weight 800+, often italic/uppercase); Accents in 'Caveat' (Weight 400-700). Component styling: Use a 'sketch-box' effect with a 2px solid border and irregular border-radius: '255px 15px 225px 15px / 15px 225px 15px 255px'. Cards should use backdrop-filter: blur(8px) and background: rgba(255, 255, 255, 0.85). Animation: Implement a 'wiggle' effect on hover (rotate -2deg to 2deg) and an SVG path 'buzz-line' with a black dashed stroke (stroke-dasharray: 2 15) that animates infinitely using 'stroke-dashoffset'. Buttons: Large, rectangular with 2px borders and a black offset shadow box behind them that moves on hover."
  },
  "layout_and_structure": {
    "description": "The layout is based on a vertical narrative flow that centers around a horizontal SVG graph 'The Buzz Curve'. Sections are spacious with heavy use of white space and floating annotations.",
    "prompts": [
      {
        "part": "Hero Title Section",
        "prompt": "Centered header with a very large title (text-6xl to 8xl) in uppercase italic 'Plus Jakarta Sans'. Below the title, include a centered handwritten subtext in 'Caveat' (text-3xl) in orange (#F5A623). Spacing: mb-24."
      },
      {
        "part": "The Buzz Curve Graph",
        "prompt": "A full-width relative container (min-height 600px). Background features a light 4px L-shaped border representing graph axes with handwritten labels 'Buzz' (vertical, rotated) and 'Time' (horizontal). Centerpiece is a large SVG path with two layers: a solid yellow base (#F5A623) and a black dashed top layer that animates. Position 6 small sketch-box cards (width 200px) that 'hug' the curve tightly at specific intervals. Each card features a handwritten step number, a bold title, and small text. Phase labels like 'PRE-JOY', 'JOURNEY', and 'AFTER-GLOW' should sit in the background at 30% opacity in large handwritten font."
      },
      {
        "part": "Adventure / CTA Section",
        "prompt": "A section with a hand-drawn SVG curve background at 20% opacity. Include multiple floating speech bubbles of varying sizes with handwritten quotes, rotated slightly (-3deg to 2deg). Central focus: two large emojis (e.g., train and bee) with 'wiggle' animations. Main CTA is a heavy-bordered button with a 4px black offset shadow that translates on hover. Secondary CTA is a bold handwritten link with a thick underline decoration."
      },
      {
        "part": "Footer",
        "prompt": "Simple centered footer with high-letter-spacing uppercase text (text-sm, tracking-[0.3em]) and a small pulsing orange star icon."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Animated Buzz Curve",
      "description": "A dual-layered SVG path that looks like a bee stripe.",
      "prompt": "Create an SVG path with two identical 'd' paths. Path 1: stroke='#F5A623', stroke-width='12', solid. Path 2: stroke='black', stroke-width='12', stroke-dasharray='2 15'. Apply a CSS animation to Path 2: @keyframes dash { to { stroke-dashoffset: -300; } } with a linear infinite duration of 20s."
    },
    {
      "component": "Sketch-Box Card",
      "description": "Glassmorphism card with a hand-drawn border effect.",
      "prompt": "Style a div with: border: 2px solid #1A1A1A; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px). Add a transition of 0.3s and a hover state that rotates the card by -1deg and scales it to 1.02."
    },
    {
      "component": "Hand-Drawn Speech Bubble",
      "description": "A chat bubble with a custom geometric tail.",
      "prompt": "Create a div with a 2px border and 12px border-radius. Use ::after and ::before pseudo-elements to create a triangular 'tail' at the bottom-left. The ::after creates the black border triangle (border-width: 15px 15px 0 0), and the ::before creates the white inner fill (border-width: 13px 13px 0 0) offset by 2px to mask the border."
    }
  ],
  "special_notes": "Must maintain the 'imperfect' hand-drawn aesthetic; avoid perfectly straight lines or standard rounded corners. Must use the specific 8-value border-radius for all cards to achieve the sketch look. Must use high-contrast thick borders (2px+) for all structural elements. Don't use generic sans-serif for annotations—always use Caveat."
}