prd.json

{
  "project_metadata": {
    "project_name": "holylife-hospital-prime",
    "project_category": "Healthcare Landing Page Wireframe",
    "description": "Professional, medical-grade hospital/healthcare landing page wireframe for Figma. Includes hero, services, about, specialists, CTA, testimonials, and contact sections in a minimalist, clean, glassmorphic design.",
    "core_purpose": "Professional hospital landing with clear service, profile, and action sections.",
    "target_audience": "Hospital management, healthcare designers, UI/UX teams",
    "key_features": [
      "Hero/banner with call-to-action",
      "Medical services/departments grid",
      "About hospital section",
      "Doctors/specialists showcase",
      "Appointment booking CTA panel",
      "Patient testimonials slider",
      "Contact/location info grid"
    ]
  },
  "frontend": {
    "pages": [
      {
        "page_name": "Home",
        "route": "/",
        "show_in_nav": true,
        "nav_order": 1,
        "purpose": "Hospital professional landing for first impression, info, conversion.",
        "description": "Full landing page structured with: sticky glass header; hero/banner, services grid, about two-col, doctors carousel, appointment CTA panel, testimonials slider, contact/location grid, glass footer. Each section clear, visually separated. All content styled medical, pro, clean, soft glass and blue. No login, single interactive page.",
        "sections": [
          "Header",
          "HeroBanner",
          "ServicesOverview",
          "AboutHospital",
          "DoctorsShowcase",
          "AppointmentCTA",
          "TestimonialsSection",
          "ContactSection",
          "Footer"
        ],
        "content_notes": "One single landing page. All sections: hero/banner, services, about, doctors, appointment CTA, testimonials, contact, footer in strict top-bottom order. Only modals for button CTAs (not new pages). Internal anchor links for navigation.",
        "data_needs": [
          "services",
          "doctors",
          "testimonials",
          "address",
          "phone",
          "email",
          "map_src"
        ],
        "is_protected": false
      }
    ],
    "navigation": {
      "type": "horizontal",
      "position": "top-fixed",
      "style": "glassmorphism",
      "has_logo": true,
      "has_search": false,
      "extra_items": [],
      "links": [
        {
          "label": "Home",
          "route": "/"
        },
        {
          "label": "Departments",
          "route": "/#services"
        },
        {
          "label": "Doctors",
          "route": "/#doctors"
        },
        {
          "label": "Book Appointment",
          "route": "/#appointment"
        },
        {
          "label": "Contact",
          "route": "/#contact"
        }
      ]
    },
    "theme": {
      "design_dna": "GLASSMORPHISM",
      "color_scheme": "light",
      "primary_color": "#0D1C3D",
      "secondary_color": "#71C8D4",
      "accent_color": "#274BDB",
      "font_family": "Plus Jakarta Sans, sans-serif",
      "font_type": "sans-serif",
      "border_radius": "20px",
      "shadow_style": "glassmorphic, soft-xl",
      "animation_style": "Framer glassy-slide-in-300ms",
      "interaction_style": "slide, hover-glow, fade-in"
    },
    "components": [
      {
        "component_name": "Header",
        "type": "Header",
        "description": "Top section spanning full width, flexbox horizontal layout, hospital logo left, navigation menu right. 24px py, logo max-height 48px. Nav links spaced, semibold, blue hover underline. Z-index 50, white bg, subtle bottom border.",
        "used_on": [
          "Home"
        ],
        "purpose": "Branding, primary navigation",
        "props": [
          "logo_src",
          "nav_links"
        ]
      },
      {
        "component_name": "HeroBanner",
        "type": "Hero",
        "description": "Full-width intro, glassmorphism effect (blur:20px), min-h 420px. Left: bold hospital name, subheading, tagline in large Plus Jakarta Sans, primary CTA button (rounded-xl, blue, hover glow, text-lg), secondary CTA (bordered). Right: high-contrast medical staff photo in soft glow glass panel. Main text: bold-3xl/semibold, tagline: medium/gray-700.",
        "used_on": [
          "Home"
        ],
        "purpose": "Immediate branding, high-impact intro, appointment prompt",
        "props": [
          "title",
          "subtitle",
          "cta_label",
          "cta_url",
          "image_src"
        ]
      },
      {
        "component_name": "ServicesOverview",
        "type": "CardGrid",
        "description": "Grid (2-3 cols, gap-6), glass cards for each medical department. Card: icon top, dept title bold-lg, quick description sm/gray-600, blue accent left bar 4px. Hover slight scale, shadow. Section heading-2xl, center.",
        "used_on": [
          "Home"
        ],
        "purpose": "Summarize major departments/services",
        "props": [
          "services"
        ]
      },
      {
        "component_name": "AboutHospital",
        "type": "Feature",
        "description": "Two-column layout. Left: hospital exterior photo (rounded-xl, subtle drop shadow). Right: brand story, 3-4 bullet USPs (tick icon, indigo accent), brief text, CEO signature (italic, gray-600). Heading bold-xl. Bg: white, px-12 py-10, cards glassmorphic with blue underline.",
        "used_on": [
          "Home"
        ],
        "purpose": "Institution overview, credibility",
        "props": [
          "about_text",
          "usp_list",
          "image_src",
          "signature"
        ]
      },
      {
        "component_name": "DoctorsShowcase",
        "type": "Carousel",
        "description": "Carousel/scrollable row, glass panels for 3-5 doctors. Each: circular avatar (96px), name semibold, specialty sm/indigo-700, 1-line quote. Chevron buttons for scroll. Section heading center-aligned. Soft background gradient, shadow on hover. Z-index 10.",
        "used_on": [
          "Home"
        ],
        "purpose": "Highlight specialists, humanize brand",
        "props": [
          "doctors"
        ]
      },
      {
        "component_name": "AppointmentCTA",
        "type": "CTA",
        "description": "Centered glass panel, 480px max-width, vertical flex. Heading bold, short motivating text. CTA button: wide, blue, pill-shaped, hover lift. Option: phone/online, radio. Top margin 44px. Secondary subdued text: \"No insurance? Contact us\" link. Shadows glassy.",
        "used_on": [
          "Home"
        ],
        "purpose": "Drive users to book appointments",
        "props": [
          "cta_label",
          "cta_url"
        ]
      },
      {
        "component_name": "TestimonialsSection",
        "type": "Slider",
        "description": "Swipable/testimonial slider, card for each testimonial (avatar left, text, small quotation icon top-left, patient name bold-sm, treatment tag blue badge, star rating inline). 2-col on desktop, 1-col stack on mobile. Section heading 'Patient Voices', semibold.",
        "used_on": [
          "Home"
        ],
        "purpose": "Show patient satisfaction, trust signals",
        "props": [
          "testimonials"
        ]
      },
      {
        "component_name": "ContactSection",
        "type": "Contact",
        "description": "Grid: left info panel (address, phone, email, all with inline icon), right embedded map (placeholder gray box, 16:9 ratio). Heading-lg, contacts bold, details light-gray text. Map: rounded-xl, slight drop shadow. Bottom: social icons row, blue hover. Z-index 30, px-10 py-14.",
        "used_on": [
          "Home"
        ],
        "purpose": "Give direct contact/location info",
        "props": [
          "address",
          "phone",
          "email",
          "map_src"
        ]
      },
      {
        "component_name": "Footer",
        "type": "Footer",
        "description": "Full-width, white bg, 2-col grid. Left: small logo + copyright-sm gray. Right: quick nav links, social icons row (rounded, gray/blue hover). Padding-y 24px. Subtle top border, z-20. Compact text.",
        "used_on": [
          "Home"
        ],
        "purpose": "Persistent site links, legal info",
        "props": [
          "logo_src",
          "footer_links"
        ]
      }
    ],
    "layout": {
      "has_header": true,
      "has_footer": true,
      "has_sidebar": false,
      "max_width": "1440px",
      "spacing": "32px section, 12px elements",
      "footer_links": [
        {
          "label": "Contact",
          "route": "/#contact"
        },
        {
          "label": "Departments",
          "route": "/#services"
        },
        {
          "label": "Doctors",
          "route": "/#doctors"
        },
        {
          "label": "Book Appointment",
          "route": "/#appointment"
        }
      ]
    }
  },
  "backend": {
    "requires_backend": false,
    "apis": [],
    "database": {
      "models": []
    },
    "authentication": {
      "required": false,
      "type": "N/A",
      "providers": [],
      "protected_apis": null
    },
    "external_apis": [],
    "file_storage": {
      "required": false,
      "types": [],
      "max_size": "N/A"
    }
  },
  "technical_specs": {
    "frontend": {
      "framework": "React",
      "routing": "react-router-dom, hash anchors for nav",
      "styling": "Tailwind CSS v4, glassmorphism classes",
      "state_management": "Local/props only (MVP)",
      "animation": "Framer Motion (300ms slide/fade)",
      "dependencies": [
        "react",
        "react-router-dom",
        "tailwindcss@4",
        "framer-motion"
      ]
    },
    "backend": {
      "framework": "N/A",
      "database": "N/A",
      "orm": "N/A",
      "auth": "N/A",
      "dependencies": []
    }
  }
}