Table of Contents Scope of Work (Introduction) 1 A. Functional Requirements 2 Frontend Components 2 1. Home Page 2 2. Overview of the Organization 5 3. Team Member with Mapping 7 4. Projects / Portfolio 8 5. Facilities / Why Choose Us / Highlights Section / Unique Selling Points 9 6. Downloads Module 10 7. Clients & Partners 11 8. Career 11 9. Photo & Video Gallery Module 11 10. Media 11 11. Contact Us 12 12. FAQs / Helpdesk 12 13. Feedback/Grievance/Contact Us Form 12 14. Quick Link 12 15. Newsletter Signup / Updates 12 16. Achievement and Accreditation 12 Backend Components 14 17. Content Management 14 18. Project & Sector Management 14 19. Media & Publications 15 20. Interaction & Engagement 15 21. Careers / Job Management 16 22. Achievements & Accreditation 16 23. Clients & Partners 16 24. Site Administration 17 B. Non-Functional Requirements 17 1. Performance & Speed 17 2. Scalability 17 3. Security 17 4. Responsiveness & Compatibility 17 5. Usability & Accessibility 18 6. Maintainability 18 7. Reliability & Availability 18 8. SEO & Analytics 18 9. Extensibility 18 10. Internationalization (Optional) 18 C. Overall Timeline Summary 19 Final Notes: 23 Scope of Work (Introduction) The purpose of this Scope of Work (SOW) is to define the objectives, deliverables, and responsibilities for the design, development, and deployment of a modern, responsive, and professional website for ABACO INFRA. The website will serve as a primary platform to showcase the company’s multidisciplinary consulting services, highlight its global presence, and provide an interactive experience for clients, partners, and stakeholders. The website will reflect ABACO INFRA’s brand identity, international credibility, and technical expertise, incorporating modern UI/UX design principles, sector-focused content, and seamless navigation. It will include dedicated sections such as the organizational overview, leadership and team members, portfolio of projects, sectoral services, clients and partners, achievements, news and events, career opportunities, downloadable resources, and contact information. This project aims to: 1. Enhance Online Visibility: Develop a website that effectively communicates ABACO INFRA’s expertise, experience, and sectoral impact to domestic and international audiences. 2. Present Information Clearly: Ensure that content is structured, accessible, and easy to navigate for multiple stakeholders including donors, government bodies, and private clients. 3. Promote Engagement: Incorporate interactive elements such as project galleries, sector filters, and client showcases to encourage exploration of the firm’s services. 4. Ensure Scalability & Flexibility: Build a CMS-based platform (Laravel) that allows future content updates, resource uploads, and functional expansions without significant redevelopment. 5. Provide Responsive Design: Guarantee full compatibility across devices, including desktops, tablets, and mobile phones, while maintaining accessibility standards and high performance. The SOW defines the project phases, deliverables, timelines and technical requirements to ensure the website aligns with ABACO INFRA’s professional standards and strategic objectives. The functional and non-functional requirements of the website are as listed below: A. Functional Requirements Frontend Components 1. Home Page 1.1. Interactive Loader • Minimal logo animation representing engineering/consulting precision 1.2. Announcement Spotlight / Pop-Up • Latest tenders, procurement notices, or project milestones • External link support (donors, partners, contract announcements) 1.3. Top Utility Bar • Contact info & office locations • Donor / partner icons (ADB, World Bank, JICA…) • Quick external links (Career Portal, Procurement, Office Login) 1.4. Smart Navigation Bar • Logo + global search • Multi-level sector & service navigation • Sticky on scroll with background blur effect • Primary CTA: “Work with Us” / “Consultation Request” 1.5. Hero: Project Impact Visual / Motion Banner • Full-width drone footage or engineering site visuals • Optional: ESRM/SDG alignment badges 1.6. Strategic Service / Sector Shortcuts (Impact-driven CTA blocks with icons) • Transportation • Hydropower & Energy • Water & Sanitation • Urban Development • GIS & Mapping • Irrigation & Agriculture 1.7. Flagship Project Highlights • Tabbed or filtered cards by sector or region • Each card: project photo, client, location, key outcome • CTA: “Explore All Projects” 1.8. About ABACO INFRA — Global Footprint Preview • Short intro on regional/global presence • Chairman’s insight in quote slider format • CTA: “Who We Are” 1.9. Why ABACO INFRA — Key Differentiators (Value-based blocks instead of generic statements) • ISO-Certified Excellence • 40+ Years of Proven Delivery • Asia & Africa Project Expertise • Top-ranked by ADB • Cutting-edge Engineering & Technology 1.10. Sectors Overview • 6 featured sectors with image + outcome icons • Remaining sectors available via categorized list 1.11. Impact Slider / Sector Banner • Photos of field work, project sites, community impact • Quick link tags: Climate Resilience, SDG Impact, Innovation, GIS 1.12. News, Contracts & Opportunities • Latest tenders, notices, career openings • Filterable by category • CTA: “All Updates” 1.13. Project Media Gallery • Visual impact: aerial imagery, time-lapse, field operations • Toggle between photos/videos • CTA: “View Project Stories” 1.14. Achievements & Recognitions • Completed project count • ADB Top Consultant ranking • International collaborations • Scholarships & capacity building achievements 1.15. Client Voices / Partner Testimonials • Donor + government stakeholder feedback • Optional partner endorsement logos 1.16. ABACO INFRA by Numbers (Animated counters with icons) • Years of Experience • Total Clients • Countries of Operation • Completed / Ongoing Projects 1.17. Strategic Partners & Clients • Donor + government client logos • Logo tooltip showing project sector or scope 1.18. Global Locations & Contact • Map with geographic presence pins • Multi-office contact details • CTA: “Get in Touch” 1.19. Footer — Professional Standard • ISO & accreditation badges • Full sitemap + legal • ESG / CSR statement • Policy & procurement links 2. Overview of the Organization 2.1. Section Title & Identity • Title: Overview of the Organization / About ABACO INFRA • Sub-heading: Short tagline such as "Delivering Engineering Excellence Since 1986" 2.2. Introductory Summary • Brief statement introducing ABACO INFRA as Nepal’s largest multidisciplinary consulting firm • Highlight ISO certification and international presence 2.3. Organizational Background • Year of establishment: 1986 • Fields of expertise: planning, feasibility studies, surveys, design, supervision & project management • Multidisciplinary engineering and development consultancy 2.4. Core Sectors of Operation • Transportation • Hydropower & Energy • Water Supply & Sanitation • Urban Development • Irrigation & Agriculture • Water Resources Planning & Development • GIS & Mapping • Capacity Building & Training 2.5. Geographical Presence • Operations in Nepal and multiple countries across Asia & Africa • Optional: Map visualization with activity highlights 2.6. Client Base and Partnerships • Donors: ADB, World Bank, JICA, etc. • Government & semi-government bodies • Private sector clients • Strategic partnerships & international collaborations 2.7. Organizational Strengths / Key Differentiators • ISO-certified quality standards • Top-ranking ADB consultant over multiple years • 40+ years of development experience • Proven work completion in diverse sectors • Highly skilled multidisciplinary workforce • Use of state-of-the-art technologies & methodologies 2.8. Commitment to Quality & Impact • Focus on client satisfaction • Delivery aligned with international standards • Prioritizing sustainable development & innovative solutions • Quality-first approach throughout project lifecycle 2.9. Achievements & Recognition • High number of successfully completed national & international projects • Recognized leadership in Nepal’s consulting industry • Strong track record in donor-funded assignments 2.10. Leadership Insight • Short quote or key message from Chairman / Managing Director • Visual: profile image or signature (optional) 2.11. Organizational Statistics / Facts • Animated counters: o Years of excellence o Number of clients o Completed projects o Countries of operation o Ongoing projects 2.12. Company Profile Resources • Downloadable company profile PDF • Portfolio / project summary links • Annual performance report (optional) 2.13. Visual & UI Recommendations • Chairman image with quote slider • Infographic-based strengths highlights • Sector icons with interactive hover effects • Timeline showing establishment to current presence • Accreditation badges (ISO, top ADB consultant ranking) 2.14. Call to Action • “Explore Our Projects” • “View Sector Expertise” • “Contact Our Experts” • “Download Profile” 3. Team Member with Mapping 3.1. Team • Title: Our Team / Meet Our Experts / Leadership & Professionals • Sub-heading: "Driven by expertise, powered by experience." • Showcase ABACO INFRA’s multidisciplinary human resources • Highlight leadership, senior experts, and key personnel who drive project success • Build trust and credibility for international partners, donors & clients 3.2. Team Structure Display • Hierarchical or categorized presentation: o Leadership Team (Board Members / Directors / Managing Director / Chairman) o Senior Consultants & Discipline Experts o Project Leads / Team Leaders o Technical & Field Professionals (optional) 3.3. Profile Information Requirements • Name (Full name) • Designation / Role • Department / Sector specialization • Email or contact link (optional depending on policy) 3.4. Photograph & Media Requirements • Professional headshot (uniform style) • Portrait orientation recommended 3.5. Call to Action • “Connect with Our Experts” • “Request Consulting Support” • “Explore Our Services” • “View Our Projects” 4. Projects / Portfolio 4.1. Section Title • Title: Our Projects / Project Portfolio / Completed & Ongoing Projects • Sub-heading: "Transforming development through engineering excellence." 4.2. Content Categories • Completed Projects • Ongoing Projects • Flagship / Mega Projects • International Projects • Donor-funded Assignments • Sector-wise projects (Transportation, Hydropower, etc.) 4.3. Project Card Information Requirements • Thumbnail Image • Project Name / Title • Client / Funding Agency • Location (District / Country) • Sector / Service Type • Project Duration (Start End) • Short project overview (2 3 lines) • Project status (Completed / Ongoing) 4.4. Project Media Requirements • Project site images or drone visuals 4.5. UI Display Structure • Grid card layout • Tabs or filters for sector sorting 4.6. Project Dedicated Page • Thumbnail Image • Project Name / Title • Client / Funding Agency • Location (District / Country) • Sector / Service Type • Project Duration (Start End) • Short project overview (2 3 lines) • Description: Key outputs or outcomes o Scope of work o Project outputs & outcomes o Methodologies / innovations used o Challenges & solutions • Project status (Completed / Ongoing) • Downloadable documentation (optional) 5. Facilities / Why Choose Us / Highlights Section / Unique Selling Points 5.1. Section Title • Title: Our Sectors / Areas of Expertise / Sectors & Services • Sub-heading: "Comprehensive multidisciplinary engineering and development solutions." 5.2. Core Sectors of Operation (Each sector can be displayed as a card with icon + short description) • Transportation Engineering • Hydropower & Energy • Water Supply & Sanitation • Urban Development • Irrigation & Agriculture • Water Resources Planning & Development • GIS, Mapping & Surveying • Capacity Building & Training 5.3. Sectors Card Information Requirements • Thumbnail Image • Sectors Name / Title • Short project overview (2 3 lines) • Project status (Completed / Ongoing) 5.4. UI Display Structure • Grid card layout • Tabs for sector 5.5. Sectors Dedicated Page • Thumbnail Image • Image(s) • Sector Name / Title • Tagline • Short Sector overview (2 3 lines) • Description: Key outputs or outcomes o List of specialized services o Featured projects with summaries o Sector-specific achievements o Accreditations & Standards o Impact & Achievements Summary (optional) 6. Downloads Module • Upload Files (PDF, Doc, Image) the icon will change according to the extension • Resource categories: o Company Profile / Brochures o Project Reports / Case Studies o Policies / Guidelines o Circulars / Notices o Tender Documents • Each download includes: Title, File type Icon, Date uploaded, Download button. 7. Clients & Partners • Display partner logos in a clean, responsive grid. • Show logo info on hover/tap (name + sector focus). • Maintain equal visual treatment for all logos. • Smooth carousel on mobile. • Neutral background with modern spacing. • Logos in grayscale; switch to color on hover. • Consistent logo sizing; subtle hover animation. 8. Career • Brief introduction about ABACO INFRA as an employer. • Showcase current job openings, internships, and volunteering opportunities. • Clean, modern card/grid layout for openings. • Job listing fields: Title, Department, Location, Type, Deadline, Short Description. • Application CTA: “Apply Now” button per listing. • Job Detail Page • Apply Form (File Upload for CV) • Optional email notifications on application submission. 9. Photo & Video Gallery Module • Album Management (Create/Edit/Delete) • Photo Upload (Multiple per album) • Video Embeds (YouTube/Vimeo or upload) • Modal view on frontend • Categorized gallery filters 10. Media Includes Notice, Publication, Event, Media, Story with list page and Detailed page can be redirected from the home page and the header • Title • Short Description • Image(s) • Content • Date • External Link • Author • Tagline 11. Contact Us • Address with Google map • Email/phone form • Inquiry form (auto email) 12. FAQs / Helpdesk • Accordion-style FAQs • Contact Support Link • Categorized (e.g., Admission, Fees, etc.) 13. Feedback/Grievance/Contact Us Form • Address with Google map • Email/phone form • Inquiry form (auto email) 14. Quick Link • Add / Manage Important Links • Categories (e.g., Government, Academic Portals) 15. Newsletter Signup / Updates • Email form for parents/students • Subscribe to School Updates 16. Achievement and Accreditation • Showcase major organizational milestones, recognitions, and awards. • Highlight key achievements in each sector. • Option for timeline or milestone slider for chronological display. • Clickable items reveal detailed descriptions or certificate images. • Grid, card, or timeline layout with visual icons/badges. • Include award logos or certificates where applicable. • Highlight notable international recognitions (ADB, ISO, donor-funded projects). • Consistent card design with hover effect showing short info.   Backend Components 17. Content Management 17.1. Home Page CMS • Announcement / Pop-up manager • Top utility bar content (contact info, donor logos, quick links) • Hero banner / video manager • Featured sectors / shortcut blocks • Flagship project highlights (linked to project module) • Achievements / recognitions counters • Testimonials & partner feedback • ABACO INFRA statistics (animated counters) • Footer content and accreditation badges 17.2. Overview / About Module • Organizational summary, history, strengths • Core sectors (linked to sectors module) • Geographical presence (map coordinates) • Leadership insights / Chairman quote • Downloadable company profile, portfolio, reports 17.3. Team / Human Resource Module • Add/Edit/Delete team members • Roles / Departments / Hierarchy • Profile image upload and cropping • Contact info / optional email • Team member mapping / grouping 18. Project & Sector Management 18.1. Projects / Portfolio Module • Add/Edit/Delete projects • Project categories: Completed, Ongoing, Flagship, Donor-funded, Sector-wise • Project media uploads (images, drone footage, videos) • Project details page: Scope, methodology, outcomes, documentation download 18.2. Sectors / Services Module • Add/Edit/Delete sectors • Sector descriptions, images, icons • Featured projects per sector • Accreditations & achievements per sector 19. Media & Publications 19.1. Downloads / Resources Module • File upload (PDF, DOC, Image) with automatic icon • Categories: Company profile, Reports, Policies, Circulars, Tender documents • File management: Add/Edit/Delete, date uploaded • Download tracking (optional) 19.2. Photo & Video Gallery Module • Album management (Add/Edit/Delete) • Multiple photo upload per album • Video embed/upload management • Frontend modal and filter options 19.3. Media / News / Events Module • Add/Edit/Delete media items: Notices, Publications, Events, Stories • Fields: Title, Description, Image(s), Content, Date, Author, Tags, External links • Dedicated pages for each item • Homepage redirect functionality 20. Interaction & Engagement 20.1. Contact / Inquiry Module • Address / map integration • Email & phone information • Inquiry / contact form (auto email notifications) 20.2. FAQs / Helpdesk Module • Add/Edit/Delete FAQ categories • Accordion-style questions and answers • Link to support / contact page 20.3. Feedback / Grievance Form Module • Form management (Add/Edit/Delete) • Submission handling and notifications • Optional attachment support 20.4. Newsletter / Updates Module • Subscription form management • Subscriber list & export • Email notifications / newsletter integration 20.5. Quick Links Module • Add/Edit/Delete important links • Categories for grouping links (e.g., Government, Academic Portals) 21. Careers / Job Management 21.1. Career / Job Portal Module • Job listing management (Add/Edit/Delete) • Fields: Title, Department, Location, Type, Deadline, Description • Job application form with file upload • Application notifications • Job detail pages 22. Achievements & Accreditation 22.1. Achievements & Awards Module • Add/Edit/Delete achievements • Categories: National, International, Sector-specific, Donor recognitions • Images, certificates, logos • Timeline or milestone slider • Homepage highlights & counters 23. Clients & Partners 23.1. Clients / Partners Module • Add/Edit/Delete client or partner entries • Logo upload (grayscale/color toggle) • Categories: Donors, Government, Private, Strategic • Tooltip / hover info: sector involvement or project scope • Frontend carousel / grid management 24. Site Administration 24.1. User / Role Management Module • Admin roles: Super Admin, Content Editor, Media Manager • Permissions management per module • Login and authentication (Laravel Auth) 24.2. Settings & Configurations Module • Site-wide settings: contact info, social links, logo, favicon • Homepage & footer configuration • SEO meta management • Cache / performance settings B. Non-Functional Requirements 1. Performance & Speed • Fast page load (<3 seconds) with optimized assets. • Efficient database queries. • Lazy-loading for images, videos, and resource-heavy modules. 2. Scalability • Website should support growing content: projects, team members, downloads, media. • Backend architecture allows future functional expansions without full redevelopment. 3. Security • Use HTTPS/SSL for secure communication as client provides with the certificate. • Protection against SQL injection, XSS, CSRF, and file upload vulnerabilities. • Role-based access control for admin and staff users. 4. Responsiveness & Compatibility • Fully responsive across desktop, tablet, and mobile devices. • Compatible with major browsers (Chrome, Edge, Firefox, Safari). • Tailwind CSS ensures consistency in design and spacing across breakpoints. 5. Usability & Accessibility • Clean, intuitive navigation and user-friendly interface. • Proper alt text for images, semantic HTML, and keyboard navigation support. 6. Maintainability • Modular Laravel structure for easy updates and bug fixes. • Use of Tailwind components and Blade templates for reusable design elements. 7. Reliability & Availability • Error handling with friendly messages and logging. 8. SEO & Analytics • Optimized URL structure, meta tags, headings, and alt attributes. 9. Extensibility • Easy to add new modules: e.g., projects, sectors, case studies, publications. 10. Internationalization (Optional) • Support for multiple languages if needed (English + Nepali). • Easy text replacement in Blade templates.   C. Overall Timeline Summary Phase Duration Week Range 1. Planning 1 Week Week 1 2. Analysis 1 Week Week 2 3. Design 1 Weeks Week 3 4. Implementation 6 Weeks Week 4 9 5. Testing 2 Weeks Week 10 11 6. Deployment + Testing in live 1 Week Week 12 Buffer & Support — Parallel/Final TOTAL 12 Weeks 3 Months D. Website Development Life Cycle 1. Planning Objective: Lay the foundation for the project with clear understanding and goals. Milestones: • Kickoff meeting with school representatives • Finalize feature modules & backend requirements • Draft content checklist (text, images, videos) • Setup project tracking • Agree on tools & stack (Laravel, Tailwind, MySQL, etc.) • Feasibility Analysis • Risk and Constraints Management 2. Analysis Objective: Break down functional and technical requirements. Milestones: • Create detailed SRS (Software Requirement Specification) • Finalize database structure (ER diagrams) • User roles and access permissions • Confirm third-party integrations (Google Maps, YouTube, SMTP) • Signed Off (Scope of Work) 3. Design Objective: Build UI/UX prototypes and visual assets. Milestones: • Homepage UI prototype (Figma) • Internal page layouts (Gallery, About, Admission, etc.) • Admin panel UI/UX (Tailwind dashboards) • Design responsive layouts (mobile/tablet/desktop) • Stakeholder approval for design 4. Implementation Objective: Develop frontend and backend modules. Milestones: Week 4 5: Project Setup & Core Architecture Goal: Foundation setup, core architecture, and reusable components. Backend Developers • Laravel base setup, database schema, migrations • User & Role Management Module (Admin, Content Editors, Media Managers) • Settings Module (Site info, logos, social links, SEO) • Menu CRUD (3-level navigation) Frontend Developers • Tailwind CSS base theme & layout • Dashboard UI (Admin) • Menu UI and interactions (Sticky, dropdowns) • Reusable component library (cards, buttons, modals) Week 6: Home Page & Announcement Management Goal: Build homepage essentials and pop-up management. Backend Developers • Page Builder Module (Hero, Blocks, Text + Image) • Pop-up CRUD (Image, Link, Status) • Slider / Hero Banner CRUD • Homepage featured sectors & flagship project module Frontend Developers • Homepage layout & slider integration • Pop-up display & animations • Page Builder reusable block templates • Hero banner / video / impact visuals Week 7: Organizational Overview & Team Goal: Showcase company profile, leadership, and team members. Backend Developers • Overview / About ABACO INFRA module • Team Management Module (Add/Edit/Delete team members, roles, hierarchy, images) • Leadership insight / Chairman quote module Frontend Developers • Overview page UI with timeline & sector icons • Team section with filters (department, role) • Quote slider / animated counters for stats Week 8: Projects & Sector Management Goal: Build portfolio and sectors modules and Public engagement via media, resources, and partner showcases. Backend Developers • Projects / Portfolio Module (Add/Edit/Delete, categories, media) • Sectors / Services Module (Add/Edit/Delete, icons, achievements, featured projects) • Media / News / Events Module (CRUD, categories, external links) • Downloads / Resources Module (File upload, categories, tracking) • Clients / Partners Module (Logo management, categories, tooltips) Frontend Developers • Project grid & filtering by sector/status • Project detail page layout • Sectors cards & detailed sector pages • Media gallery layout (grid, filters, modal view) • Download center UI • Partner carousel / grid display Week 9: Careers & Engagement Goal: Interactive sections for job applications, newsletter, and forms, Highlight organizational credibility and prepare final frontend touches. Backend Developers • Career / Job Applications Module (Add/Edit/Delete jobs, application form, file uploads) • Newsletter / Updates Module (Subscriber list, email notifications) • Feedback / Grievance / Contact Form Module • Achievements / Awards / Accreditation Module • Testimonials CRUD (Client / Donor / Partner feedback) Frontend Developers • Career listings & detail pages • Job application form validation & submission • Newsletter signup form UI • Feedback / contact form UI • Achievements timeline / milestone slider • Testimonials carousel • Homepage & section final UI adjustments (interactive counters, hover effects) Week 10: Gallery, Contact & Final Testing Goal: Backend Developers • Photo & Video Gallery Module (Albums, multi-upload, category filters) • Contact / Inquiry Module (Map integration, forms, email notifications) Frontend Developers • Gallery modal view & filtering • Contact page UI (map + forms) • Final cross-browser and responsiveness testing Cross-Cutting Tasks (Ongoing Across All Weeks) • Authentication + Roles & Permissions • API setup and integration (for dynamic modules) • Frontend + Backend validation • QA & Testing (unit, functional, regression) • Content migration / seeding (projects, sectors, team, media) • Deployment & Hosting Setup (Final Week) 5. Testing Objective: Ensure the site is bug-free, responsive, and secure. Milestones: • Functional testing (forms, search, sliders) • Responsive testing (mobile, tablet, desktop) • Performance testing (loading time, cache, minification) • Security: CSRF, file validation, form spam protection • Admin UAT (User Acceptance Testing) with school 6. Deployment Objective: Push the site live and provide documentation. Milestones: • Final hosting setup (cPanel /VPS) • Domain and SSL setup • Launch website to public • Transfer admin credentials • Training for school staff 7. Buffer, Maintenance & Support (Parallel/End) • Post-launch bug fixes (1 year) • Feature enhancements (within scope) • Minor training or walkthroughs E. Final Notes: • Deliverables include full source code, database, documentation, and login credentials. • Technology Stack: Laravel (Backend), Tailwind CSS (Frontend), MySQL (DB), jQuery/AlpineJS, SMTP, cPanel/Cloud Hosting