shi — Smart & High IT
A 215-page French-language Astro site for a Casablanca IT integrator, with a WebGL2 liquid-metal logo and a local-SEO network of 155 city pages across 9 Moroccan cities, all generated from one SEO dataset.
One integrator, every service, every city it serves.
shi (always written lowercase; it stands for Smart & High IT) is an IT integrator based in Sidi Moumen, Casablanca, active since 2020 according to its own site. Its offer is unusually broad for a single company: structured cabling and fibre, CCTV and access control, servers, virtualisation and backup, VoIP and IPBX telephony, managed IT and maintenance contracts, solar and electrical works, home automation and hardware supply, from AI workstations to business laptops. Its buyers are just as varied: SME owners in Casablanca, plant managers in the industrial zones of Berrechid and Settat, clinics and laboratories, and premium residential clients who want a connected villa. They do not search for "IT integrator". They search for a specific service in a specific city, in French, and they often ask an AI assistant before they ask Google.
The brief to RAIN Design Studio had four parts: explain the whole offer in one credible site; reach buyers searching by service and by city across Morocco, not only in Casablanca; present local compliance topics clearly, such as CNDP and law 09-08 for video surveillance; and set out fixed-price maintenance contracts without a sales call. We answered it with a French-language (fr-MA) static site of 215 pages, built on Astro 7 with React 19 islands only where interaction needs them. The page network is organised as a hub-and-spoke "cocon sémantique":
- 6 core service pages linked from the main navigation — câblage et fibre, vidéosurveillance, serveurs et cloud, téléphonie IP, maintenance et infogérance, énergie solaire — each backed by 2 guide articles (12 in total) on topics such as video-surveillance rules in Morocco or NVR versus DVR.
- 7 pillar hubs — networks and telecoms, electronic security, energy and electrical, home automation and smart spaces, healthcare IT, hardware, and audit and cybersecurity consulting — with 25 sub-service pages beneath them, from AI-enabled CCTV to biometric access control and PRA disaster-recovery plans.
- 155 city pages across 9 cities: Casablanca and Rabat (25 each), Tanger (24), Marrakech (22), El Jadida (15), Agadir, Berrechid and Settat (13 each) and Khouribga (5). Each city carries only the sub-services chosen for it, not a blind grid of every service in every town.
- A /cases directory of 18 use cases across prestige homes, offices and factories, and /seo-architecture, an interactive map of the whole internal-linking structure.
All of this sits behind a calm, light, engineering-led interface: white surfaces, near-black type, an emerald status accent, network-topology graphics, and a lowercase shi wordmark rendered live as a WebGL2 liquid-metal shader. The 187 generated hub, sub-service and city pages come from one central SEO dataset, so titles, structured data, FAQs and breadcrumbs stay consistent without anyone editing pages one by one. The build is complete and versioned as v27.0.1, with every page pointing to the production domain shi.co.ma.
Deployable pages in one static build
City pages across 9 Moroccan cities
Pillar hubs and sub-service pages
URLs in the XML sitemap
A page for every search, generated from one source of truth.
Hub-and-spoke semantic tree
Home, pillar hub, sub-service, city: four levels, each linking up to its parent, across to its siblings and down to its children. A buyer who lands on a city page can climb to the national service page, and authority flows back down to the local pages that convert.
One SEO dataset, 187 generated pages
src/data/seoData.js holds 187 page records (7 hubs, 25 sub-services, 155 city pages). Each carries its meta title and description, primary and secondary keywords, H1, intro, stats, execution points, a specification table and FAQs. A single catch-all route, [...slug].astro, renders them all.
City pages with real local context
Every city page names the zones it serves, such as Sidi Maârouf and Technopark in Casablanca, Agdal and Hay Riad in Rabat, the Tanger Free Zone and Tanger Med, or the Jorf Lasfar platform near El Jadida, and carries its own FAQ. City coverage follows demand, from 25 pages in Casablanca to 5 in Khouribga.
Structured data layered by depth
Every page carries ITService (address, geo coordinates, opening hours, 9 served cities, an offer catalogue) and WebSite. The homepage adds FAQPage; hubs, sub-services and city pages add FAQPage, BreadcrumbList and a page-level service node typed as ITService and LocalBusiness.
Static-first, React only where needed
Astro 7 renders every page to HTML at build time. React 19 islands handle only the navigation, the contact form, animated cards, the motion engine and the logo. build.format: 'file' and inlineStylesheets: 'always' put CSS inside each page, with no render-blocking stylesheet; hover prefetch and view transitions make page changes feel instant.
WebGL2 liquid-metal wordmark
The lowercase shi logo is a custom GLSL ES 3.0 fragment shader: a raymarched chromatic fluid with caustic reflections, masked to the letterforms and reacting to hover. It makes the brand memorable on the first screen without a video file or an image sequence.
An explorable internal-linking map
/seo-architecture draws every generated page as a canvas constellation with physics, live search, zoom, pan, pinch and a node inspector. Below it, a plain-HTML hierarchical directory with city filters lists the same pages, so people and crawlers read the same map.
Apache-ready delivery and PWA
A post-build script syncs dist/ to the Apache DocumentRoot. The .htaccess forces HTTPS, serves clean URLs, strips trailing slashes, sets long-lived immutable caching and security headers, and maps custom 404 and 500 pages. A web manifest and a stale-while-revalidate service worker make the site installable.
From a villa in Marrakech to a plant in Berrechid.
Not a brochure with a contact form. shi.co.ma is a page network, a sales site and an interactive map of itself, built to be found by service and by city. Hover any item to see what it does.
- 6 core services
- 12 guide articles
- 7 pillar hubs
- 25 sub-services
- 155 city pages
- Catch-all route
- Casablanca · 25
- Rabat · 25
- Tanger · 24
- Marrakech · 22
- El Jadida · 15
- Agadir · 13
- Berrechid · 13
- Settat · 13
- Khouribga · 5
- Breadcrumb header
- Local hero
- Key stats strip
- Execution points
- Specification table
- Sibling & city links
- FAQ + final CTA
- ITService
- 9 served cities
- OfferCatalog
- WebSite
- FAQPage
- BreadcrumbList
- Page-level service node
- Absolute canonicals
- fr-MA hreflang
- 212-URL sitemap
- llms.txt & llms-full.txt
- Open Graph & Twitter
- Geo meta
- Robots directives
- Canvas constellation
- Physics toggle
- Zoom, pan & pinch
- Live search
- Node inspector
- Hierarchical directory
- City filter chips
- Liquid-metal logo
- Pill navbar
- Character roll hover
- Folding hero background
- Network diagram
- Emerald status accent
- Bento stats
- 4 flagship services
- 9 solution tiles
- La Livraison shi
- 3 contract plans
- Software showcase
- Hardware showcase
- Partner marquee
- Support channels
- Homepage FAQ
- Sector pills
- Prestige homes · 6
- Smart office · 6
- Smart factory · 6
- Quick orientation
- Services dropdown
- Mobile drawer
- Hide-on-scroll nav
- View transitions
- Hover prefetch
- Motion engine
- Inlined CSS
- Post-build sync
- Clean-URL rewrites
- Cache & security headers
- Service worker
- Full icon set
- 404 & 500 pages
77 capabilities across 11 areas, in one French-language static build.
Found by service and by city, then sold in one visit.
In Morocco, a buyer searching for a CCTV installer in Rabat or fibre cabling in Tanger usually finds a few-page brochure site, a dealer page or a quote directory that sells the same lead to several firms. Here is how shi's site compares.
| shi.co.ma | Integrator brochure | Devis directory | WordPress + SEO plugin | |
|---|---|---|---|---|
| Page per service and city | ✓ | — | ✓ | ○ |
| Local zones and FAQ per city | ✓ | — | ○ | ○ |
| Lead goes to one company | ✓ | ✓ | — | ✓ |
| ITService, FAQPage, Breadcrumb JSON-LD | ✓ | — | ○ | ○ |
| llms.txt for AI answer engines | ✓ | — | — | ○ |
| Public maintenance pricing | ✓ | ○ | — | ○ |
| Interactive internal-linking map | ✓ | — | — | — |
| Owned domain and content | ✓ | ✓ | — | ✓ |
| No database or plugins to patch | ✓ | ○ | ○ | — |
| Installable PWA | ✓ | — | ○ | ○ |
A national page network for a Casablanca integrator.
The build is complete and versioned as v27.0.1: 215 deployable pages, a 212-URL sitemap, structured data on every page and llms.txt files for AI answer engines, all pointing to the production domain shi.co.ma. A buyer in Agadir looking for professional Wi-Fi, a clinic in Rabat looking for medical IT, or a plant manager in Berrechid looking for fire detection now lands on a page written for that service in that city, with the specifications, the local FAQ and a direct line to one company. The 187 generated pages can be extended by adding records to one dataset rather than writing pages by hand. The project README reports Lighthouse mobile scores of 96 to 100 for performance and 100 for accessibility and SEO, and a 91% cut in image weight through a WebP pipeline; these figures are self-reported and were not re-measured for this case study. We have no traffic, ranking or lead data for this project, so we make no claims about business results.
shi — Smart & High IT — FAQ
shi stands for Smart & High IT, an IT integrator based in Casablanca, Morocco. The brand always writes its name in lowercase as shi.
The build that RAIN Design Studio shipped has 215 deployable pages. They include 155 city pages across 9 Moroccan cities, 7 pillar hubs, 25 sub-service pages, 6 core service pages and 12 guide articles.
The site is a static Astro 7 build with React islands for the navigation, contact form and animated components. The logo is a custom WebGL2 shader, and the site is installable as a PWA and deployed on Apache.
Every page carries ITService and WebSite JSON-LD, and deeper pages add FAQPage and BreadcrumbList. The site also ships llms.txt and llms-full.txt, linked from the head of every page.
No. The site is in French for the Moroccan market, with hreflang set to fr-MA and x-default; only the homepage headline is in English. All 215 pages target French-language searches by service and by city.
Yes. RAIN Design Studio in Casablanca builds service and city page networks on Astro, generated from structured data rather than copy-pasted. Custom fixed-scope projects start at $10,000, and a free 15-minute call is the first step.