Linc Consultancy Website

Overview

Linc Consultancy Website is a single-page marketing site built for Linc, a management consulting firm headquartered in Baabda, Lebanon with branch offices in the region. The site introduces the firm's mission and vision, its six core service lines (proposal and concept notes, grant and funding advisory, monitoring and evaluation, financial and investment advisory, strategic planning, and capacity building), a dedicated AI Services section, leadership team profiles, regional office locations, partner logos, a portfolio of past donor and private-sector projects, and a contact section with a lead form.

Approach

The page is structured as a series of full-width sections (hero, about, vision and mission, services, AI services, why us, presence, team, partners, experience, contact, footer) built with semantic HTML and Tailwind utility classes, styled with a custom brand palette (teal, aqua, orange, cream) defined directly in the Tailwind config. Content is entirely static and hand-authored: team bios, office addresses, and past-project descriptions are real, specific text rather than placeholder copy. Scroll-based reveal animations bring sections in as the user scrolls, and a slide-in mobile menu handles small-screen navigation.

Tech stack

• HTML5 with semantic sectioning
• Tailwind CSS via CDN, extended with a custom theme (brand colors, fonts, keyframe animations)
• Vanilla JavaScript (app.js) for mobile menu toggle, scroll-based navbar styling, and an IntersectionObserver-driven reveal animation
• Custom CSS (styles.css) for brand-specific effects: gradient text, dot-pattern backgrounds, card hover states, and button styles
• Google Fonts (Manrope and Space Grotesk)
• Static image assets (logo variants: horizontal, circle, vertical, white)

Engineering highlights

• Uses IntersectionObserver rather than a scroll event listener to trigger reveal animations, so animation cost is paid only near the viewport rather than on every scroll tick.
• Custom Tailwind theme extension centralizes the brand color system and animation keyframes in one config block instead of scattering hex values across markup.
• Mobile navigation is a separate full-screen overlay panel with its own open and close handlers, keeping the desktop nav markup simple while still supporting a distinct mobile experience.
• Content model favors real, specific detail over generic placeholder copy: named team members with credentials, named past projects with funders, and precise office addresses.