Ctrl+K
This prompt captures the **visual design**, **functional layout**, **content structure**, **UX best practices**, and **technical expectations** — everything a skilled developer or AI system would need to generate a production-quality, modern demo homepage. --- ## ✅ AI PROMPT FOR WEBSITE BUILDER (DETAILED VERSION) > I want you to build a **demo homepage** for a brand called **Engram** — an early intervention and child development centre based in Vasai, Mumbai, India, with a growing pan-India presence. This website needs to reflect **a premium, minimalist, emotionally resonant design** suitable for the **education/therapy/nonprofit niche**. > > Please follow these detailed **visual design**, **structure**, **UX**, and **technical guidelines** exactly: --- ### 🎨 1. **VISUAL DESIGN DIRECTION** * Use a **clean, modern, minimalist** aesthetic. * Base colors: * White background * Black for typography and accents * Use accents of soft **purple** (#8E44AD or #B388EB) for CTAs and highlights. * Rounded corners, gentle drop shadows, soft transitions. * Elegant use of whitespace and balanced layout. * Font: Use a modern sans-serif font like **Poppins** or **Inter** for all headings and body copy. --- ### 🧠 2. **UX & UI BEHAVIOR GUIDELINES** * Fully responsive design (mobile-first, fluid grid). * Should work across all modern browsers (Chrome, Safari, Firefox, Edge). * Implement subtle CSS animations on scroll (use Animate.css or AOS.js for inspiration). * Smooth section transitions (fade in, slide up). * Clean, sticky top navigation bar that collapses into a hamburger menu on mobile. * Use lazy loading and web-optimized assets. * Ensure text readability and contrast (WCAG AA-compliant). * Integrate soft hover states and button transitions. --- ### 📋 3. **MENU NAVIGATION** Include the following pages in the **top navigation** bar (simple text links, no dropdowns for now): * Home * About * Services * Blog * Impact * CSR * Contact --- ### 🧩 4. **HOMEPAGE STRUCTURE** #### SECTION 1: HERO (Above the Fold) * Full-width hero section with a white background and/or a soft purple gradient overlay. * Left: * **Headline**: “Early Intervention That Changes Lives” * **Subheadline**: “Supporting children with developmental and learning needs through personalized therapy and multisensory education — across Vasai, Mumbai, and pan-India.” * **Two CTA Buttons**: * “Get Started Today” (Primary CTA in purple) * “Book a Free Consultation” (Secondary CTA in outline style) * Right: * Image placeholder for founder **Shreya** (circular or softly-rounded image of a smiling woman with a child) * Add a subtle animation or slider to this image block * Include smooth entrance animation on load (fade-in + zoom) --- #### SECTION 2: WHY EARLY INTERVENTION MATTERS * Title: “Why Start Early?” * Three bullet points or stat blocks (use icons or graphics): * “1 in 6 children need some form of developmental support.” * “Early therapy improves learning, social, and emotional outcomes.” * “We partner with parents for progress that lasts.” * Include a soft horizontal divider and fade-in on scroll --- #### SECTION 3: OUR CORE SERVICES * Title: “Our Core Services” * Display 6 service blocks in a grid (use icons for each): * Speech Therapy * Occupational Therapy * Multisensory Learning * Shadow Teaching * Parent Counseling * Early Developmental Assessment * Each service block should link to a future services page (placeholder links). * CTA Button below grid: “Explore All Services” --- #### SECTION 4: SHREYA’S STORY – Founder Vision * Title: “Built with Compassion, Led by Experience” * One-paragraph bio: Shreya started Engram to provide affordable early intervention across India. * Image placeholder: Shreya with a child (circular image with a soft border). * Button: “Read Our Story” --- #### SECTION 5: TESTIMONIALS & IMPACT * Title: “Real Families. Real Progress.” * Display: * Two short testimonials (quote style) * Optionally, a carousel of client photos or before/after anonymized visuals * Trust indicators (Google rating stars or badges if possible) * CTA: “See More Stories” --- #### SECTION 6: CSR & COMMUNITY SUPPORT * Title: “Creating Access Through CSR & Community Support” * Brief paragraph: “We collaborate with companies and NGOs to offer therapy to underserved children.” * Logos or placeholders for NGO partners (e.g., CPAI) * Button: “Partner with Us” --- #### SECTION 7: BLOG HIGHLIGHTS * Title: “Parenting & Therapy Insights” * Display 3 blog tiles: * Title + 1-line teaser * Read More links * Sample blogs: “How to Detect Speech Delays Early”, “What is Multisensory Learning?”, “Is Shadow Teaching Right for Your Child?” * CTA: “Visit Blog” --- #### SECTION 8: FINAL CTA BANNER * Soft pastel or lavender background * Headline: “Ready to Support Your Child’s Growth Journey?” * Two CTA buttons: * “Schedule a Free Consultation” * “Call Now” --- #### SECTION 9: FOOTER * Include: * Company logo + short tagline * Quick links (same as top navigation) * Contact info (phone, email, address) * Google Maps embed or placeholder * Social icons (Instagram, LinkedIn) * Optional newsletter signup input --- ### ⚙️ 5. TECHNICAL REQUIREMENTS * Use **HTML5**, **Tailwind CSS** or SCSS-based styling, and **JavaScript** (or a React framework if preferred). * Use **AOS.js**, **GSAP**, or **Framer Motion** for scroll animations. * All images should be optimized (use placeholders for now). * Mobile breakpoints must stack sections properly. * Page must pass basic Lighthouse performance and accessibility audit. --- ### 📦 6. FOLDER & STRUCTURE SUGGESTION ``` index.html /assets /images (use placeholders) /icons /css styles.css or Tailwind config /js scripts.js ``` --- ### ✅ Final Output Expectation: * Fully functional **demo homepage** of Engram. * Mobile-first, responsive, and elegant design. * Animations that enhance (not distract) from user experience. * Submit as ZIP, GitHub repo, or live preview link. --- - Initial Deployment
f68e04f verified