Phase 01 to 06

Audit, structure and design system

The groundwork behind the site: where every fact came from, how the site is organised, and the tokens and motion rules every page shares.

Back to homepage

Content audit

Every fact on the site was copied from mgi.org on 12 Nov 2026. Rows marked amber need MGI's confirmation.

Item	What we used	Source	Status
Stats	51 years · 57 industrial units · 65,000 employees · 52 exporting countries · 6,650 distributors · 20,000 suppliers · 4 private economic zones · 1 in 2 households	mgi.org home & About	Verified
History	1976 Kamal Trading Company; 1989 Meghna Vegetable Oil Industries; 1990 first export; timeline to 2018	mgi.org home, About	Verified
Vision, mission, values	Verbatim	who-we-are/vision-mission-values	Verified
Leadership	Board of 6 with portraits; 95-person leadership team	board-of-director, leadership-team	Verified
Verticals	60 verticals in 10 sectors, first sentence of each page verbatim	businessverticals/*	Verified
Brands	16 brand logos + 3 economic-zone logos; /brands/* pages on mgi.org return 404	vertical pages	Verified
Companies	29 group concerns compiled from vertical pages (no single list on mgi.org)	businessverticals/*	Please confirm list
Exports	52-country export market list	who-we-are/at-a-glance	Verified
Sustainability & CSR	Environment page + 21 Giving Back items	environment-friendly, giving-back	Verified
News	Only 4 items, none dated on mgi.org	media/news	Need dates and newer items
Contact	Head office, FMCG office, Chattogram office	contact	Verified
Logo	Only 80×42 and 114×114 PNGs on mgi.org	assets	Need vector logo
Film	Home loop (v1.mp4) in use; 49 MB brand film too large for preview	assets	Optional

Sitemap

Six top-level items. Dropdowns only where a section has real children.

HomeHero filmOverview & statsPortfolio, brands, capabilitiesGlobal, sustainability, news, CTA

About MGIAbout MGI (story, timeline)LeadershipAt a Glance

Our BusinessesOur Brands → brand detailBusiness Verticals → vertical detailOur Companies (filterable directory)Global Presence

SustainabilityESG themes, initiatives

News & InsightsListing with filters → article

ContactHead office, inquiry form, careers, media

Homepage strategy

Eight sections, alternating dark and light so each change of audience reads as a change of scene.

Section	Job	Composition	Audience
Hero	Scale and ambition in one frame	Full-bleed film, headline set bottom-left, CTAs right	Everyone
Overview	Credibility	Light, offset headline, four counters on a hairline rule	Investors, partners
Portfolio	Route into businesses	Dark, six expanding panels	Buyers, partners
Brands	Consumer recognition	White bento with one lead brand	Consumers, distributors
Capabilities	Industrial depth	Full-bleed parallax footage, three lines of copy	Buyers, investors
Global	Reach	Dot-matrix map from Dhaka	International buyers
Sustainability	Responsibility	Image left, three pillars right	Investors, media
News + CTA	Currency and next step	Three cards, then oversized inquiry band	Media, job seekers, all

Colour

Midnight carries the industrial scenes, off-white the corporate ones. Brass is the only warm note and stays under 5% of any screen.

Typography

Manrope for display, set tight. Inter for text and UI.

Hero · Manrope 700
56–150px / 0.92

Breaking Boundaries.

H1 · Manrope 600
38–86px / 1.02

Beyond Borders.

H2 · Manrope 600
32–62px

Trusted Across Generations.

Stat · Manrope 300
48–92px

65,000+

Lead · Inter 400
17–21px / 1.5

A diversified industrial powerhouse shaping everyday life.

Label · Inter 600
11.5px / 0.16em caps

Business portfolio

Space & grid

12 columns, 16–28px gaps, 1440px container, 16–56px gutters. Sections breathe at 88–168px.

144

Breakpoints: 1440 large desktop · 1180 desktop (nav collapses below) · 900 tablet (grids stack) · 560 mobile.

Components

Pill buttons with a rotating arrow, underline links, square-cornered panels with 6px radius at most.

Explore Our Businesses Discover MGI Placeholder tag

Motion

GSAP + ScrollTrigger. Short, eased, one move per element, nothing loops except the hero film. All of it switches off under reduced motion.

Hero entranceFilm scales 1.12 → 1, headline lines rise from masks, copy follows. 1.4s · expo.out

Line revealsSection headlines split per line, 90ms stagger. 0.9s · expo.out

Content revealFade + 24px rise when 85% into view, once. 0.8s · power3.out

ParallaxCapability and sustainability imagery drift 8–12%. scrub

Hero hand-offFilm eases to 0.94 scale and darkens as overview arrives. scrub

Portfolio panelsActive panel widens, image eases in. 0.8s · cubic(.16,1,.3,1)

CountersCount up once, tabular figures. 1.6s · power2.out

MapDots light outward from Dhaka. 1.8s

NavBrass underline draws left to right; dropdowns fade and drop 6px. 0.28–0.45s

Page transitionMidnight curtain wipes up and away. 0.9s · power3.inOut

Still needed from MGI

Everything else on the site uses official content.

Vector logo (SVG or AI) for MGI. The site only has small PNGs, which look soft on large screens.
Brand film in web-ready form (under 10 MB, 1080p) to replace the short hero loop.
Dated news and recent announcements; mgi.org lists four undated items.
Company list confirmation, with official website links for each concern.
Brand pages: mgi.org links to /brands/* but those pages return 404.