Lap Gadgets | Enhanced Service & Product Ecosystem

# Lap Gadgets | Enhanced Service & Product Ecosystem

{
  "summary": "A modern, high-trust service and retail ecosystem blending professional slate tones with high-energy blue (#2563EB) and orange (#FF9500) accents. The layout prioritizes clarity through modular grids, large border radii (up to 40px/2.5rem), and elegant typography pairings (General Sans/Satoshi) to convey expertise and efficiency.",
  "style": {
    "description": "The style is a technical-modern aesthetic characterized by a clean light background with heavy use of Slate-50 and Slate-100 for sectioning. It uses a primary blue for trust and an orange for urgency/action. Typography relies on 'General Sans' for a geometric, bold header feel and 'Satoshi' for highly readable body text. Micro-interactions include floating hero cards, smooth hover-scale effects on icons, and 0.4s cubic-bezier view transitions.",
    "prompt": "Create a design using a professional color palette: Primary Blue (#2563EB), Accent Orange (#FF9500), Dark Text (#0F172A), and backgrounds ranging from pure White to Slate-50 (#F8FAFC). Typography: Headers in 'General Sans' (weights 500-700), Body in 'Satoshi' (400-500). Elements should feature large rounded corners (1rem for small buttons, 2.5rem for large cards). Use a glassmorphism effect (backdrop-blur: 12px, border: 1px solid white/0.3) for floating hero elements. Apply a floating animation (transform: translateY(0 to -10px)) over 4 seconds ease-in-out. Implementation must include subtle shadows (shadow-xl shadow-blue-200) for primary buttons and high-contrast sections like a Slate-900 footer and stat banner."
  },
  "layout_and_structure": {
    "description": "A multi-section landing page with a sticky header, info-bar, hero section, and specialized grids for services and products, concluding with social proof and a two-column contact module.",
    "prompts": [
      {
        "part": "Top Info Bar & Header",
        "prompt": "Design a slim 40px height Top Bar in Slate-900 with white text (12px), including repair tracking links and phone numbers. Below, a sticky 80px white header with a blue logo icon (rounded-xl), navigation links in Slate-600 (font-medium), and a pill-shaped Blue CTA button with a shadow-blue-200."
      },
      {
        "part": "Hero Section",
        "prompt": "Create a split layout with a light slate gradient background (#F8FAFC to #E2E8F0). Left side: Pill-shaped badge with award icon, H1 text with blue highlight, and two large buttons (Blue primary, White secondary). Right side: A floating glass-card with a 2.5rem border radius, featuring a large high-res image and a bottom stat row with high-contrast colored backgrounds (Blue-50 and Orange-50)."
      },
      {
        "part": "Problem Awareness Grid",
        "prompt": "A 4-column grid of Slate-50 cards. Each card contains a white-background icon container that flips to Blue-600 on hover. Include a bold H3, body text in Slate-500, and a persistent 'Solution Available' indicator with a check-circle icon."
      },
      {
        "part": "Service Catalog Section",
        "prompt": "Design a 3-column grid of cards with extremely rounded corners (2.5rem/40px). Each card uses a light-colored icon background (Blue-50, Orange-50, etc.) that transitions to full color on hover. Include a price range in bold blue and a high-contrast 'Get Service' button at the bottom right of each card."
      },
      {
        "part": "Product Showcase Grid",
        "prompt": "A 5-column layout for product items. Each item features an aspect-square light-gray container for the product icon/image, a 5-star rating system in orange, bold price text, and a tiny uppercase tracking-widest 'View More' link."
      },
      {
        "part": "Success Stories Comparison",
        "prompt": "A two-column section. Left: Two overlapping images with 'Before' (Red) and 'After' (Green) labels, featuring rounded-3xl corners. Right: A testimonial block with an orange pill badge for case numbers, large H3 title, and a user profile with name and subtitle."
      },
      {
        "part": "Contact & Location Module",
        "prompt": "A large card with 3rem radius split into a 60% white form area and 40% blue information sidebar. The blue sidebar includes orange icons for contact details and a founder profile with an avatar and orange-bordered circle."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Service Detail Card",
      "description": "Ultra-rounded service card with dynamic icon background",
      "prompt": "Card properties: Background Slate-50, Border 1px solid Slate-100, Padding 2rem, Radius 2.5rem. Inside: Icon container 64x64px, Radius 1rem, background transitions from Blue-100 to Blue-600 on parent hover. Bottom flex-row includes pricing on left and a 12px padding Blue Button on right."
    },
    {
      "component": "Before/After Comparison Slider",
      "description": "Visual proof component with status badges",
      "prompt": "Two equal-width images side-by-side with 2.5rem corner radius on the container. Each image has a top-left badge (10px font, uppercase, font-bold, padding 4px 8px). Left badge: 'Before' (bg-red-600), Right badge: 'After' (bg-green-600). Navigation arrows are white circles (48px) with subtle shadow-lg."
    }
  ]
}