tenext-next/docs/BLUEPRINT.md

# Tenext Technologies — Website Strategic Blueprint

**Reference (design/UX only):** Aiero *Home 9* — https://demo.artureanec.com/themes/aiero/home-9/
**Content source of truth:** https://www.tenext.in/
**Codebase:** Next.js 16 (App Router) · React 19 · Tailwind v4 (CSS-first) · token-driven design system · hand-rolled motion (no Framer Motion)

> This is a **strategic adaptation**, not a redesign and not a content copy. We keep Aiero Home-9's premium editorial layout, motion restraint, and card architecture, and replace all copy/branding with Tenext's real enterprise-IT positioning. Every recommendation is tied to a file or token that already exists in this repo so the change propagates from a single source.

---

## Table of Contents

1. [Executive Summary](#1-executive-summary)
2. [Website Analysis](#2-website-analysis)
3. [Design Comparison (section by section)](#3-design-comparison)
4. [Content Mapping Table](#4-content-mapping-table)
5. [Homepage Blueprint](#5-homepage-blueprint)
6. [Navigation Structure](#6-navigation-structure)
7. [Complete Sitemap](#7-complete-sitemap)
8. [Content Strategy](#8-content-strategy)
9. [Visual Style Guide](#9-visual-style-guide)
10. [UX Recommendations](#10-ux-recommendations)
11. [UI Component Inventory](#11-ui-component-inventory)
12. [Design System](#12-design-system)
13. [SEO Strategy](#13-seo-strategy)
14. [Performance Recommendations](#14-performance-recommendations)
15. [Implementation Roadmap](#15-implementation-roadmap)
16. [Appendix A — Content Debt (leftover Aiero placeholders to replace)](#appendix-a--content-debt)

---

## 1. Executive Summary

### Why Aiero Home-9 is a strong reference for Tenext
Aiero Home-9 is an **editorial, card-driven, image-heavy** template built for a premium AI/technology brand. Its strengths map directly onto what an enterprise IT + AI consulting firm like Tenext needs:

- A **hero that gives ~70% of the composition to visual/artwork and ~30% to a compact left-aligned message** — reads as confident and modern, not a busy SaaS dashboard.
- **Magazine-style cards** with large radii (25px), generous spacing, and varied proportions — ideal for expressing a services/solutions portfolio without looking like a widget grid.
- **Restrained motion** — fade-up on reveal, small hover lift, opacity transitions — which signals maturity and keeps performance high.
- A **clear vertical storytelling rhythm**: hook → capability proof → deeper explanation → metrics → process → people → social proof → insights → conversion.

### Design principles to preserve
1. Hero visual dominance (70/30) and left-aligned compact CTA.
2. The shared **design-token system** (`data/design-tokens.ts`) as the only place colors, spacing, radius, type, shadows, and motion are defined.
3. Card architecture: large radii, editorial (non-uniform) proportions, consistent gaps.
4. Motion restraint via `RevealOnView` + token-driven hover.
5. Shared layout primitives (`PageContainer`, `SectionContainer`, `SectionHeading`) on every section.

### What changes for Tenext
- **All copy and taxonomy** move from Aiero's chatbot/neural-network narrative to Tenext's enterprise offering: Digital Transformation, Cloud & Enterprise Platforms, AI & Data Science, Enterprise Mobility, Digital Commerce; solutions across IoT, SMAC, DevOps, Blockchain; industries Retail, Financial Services, Healthcare, Manufacturing, Education.
- **Information architecture deepens** — Aiero is a single marketing page plus theme demos; Tenext needs real Services/Solutions/Industries/Case-Studies/Careers structure.
- **Trust signals become enterprise-grade** — outcome language ("predictable outcomes from IT investments," "lowest TCO," "accelerated time to value"), industries served, delivery process, and real credentials replace Aiero's playful ML demos.
- **Aiero-only novelty sections are repurposed, not deleted**: the neural-network "Tinker" playground becomes a Technology/Capabilities showcase; the ML "How it works" steps become Tenext's engagement/delivery process.

### Overall strategy
Keep the skeleton, replace the organs. Reuse the existing component library and tokens; drive all changes through `data/*.ts`. Fill the four content-debt gaps (site-config, navigation, home marquee/novelty sections, metadata), then extend the IA with Solutions / Industries / Case-Studies pages built from the **same** shared components. Target **95%+ visual fidelity** to Aiero's *feel* while being 100% Tenext in substance.

---

## 2. Website Analysis

### Similarities (why the adaptation is natural)
- Both are technology/AI-forward brands selling **capability and outcomes**, not a single product.
- Both benefit from **card-based service portfolios** and **metric-driven credibility**.
- Both want a **premium, modern, minimal** aesthetic with strong typography.

### Differences
| Dimension | Aiero Home-9 | Tenext (tenext.in) |
|---|---|---|
| Nature | Marketing theme demo | Real enterprise IT + AI services company |
| Offering | AI product/agency (chatbots, dashboards, NN demos) | Services + Solutions + Industries consulting |
| Depth | One long page + theme demo pages | Needs multi-level IA (services → solution → industry → case study) |
| Proof | Fictional stats, generic testimonials | Real outcomes, industries, TCO/time-to-value framing |
| Audience | Startups / AI hobbyists | Enterprise decision-makers (CIO/CTO/VP Eng, LOB owners) |

### Opportunities
- Convert Aiero's decorative ML sections into **substance** (technology stack, delivery process, industry solutions).
- Add **case studies** and **industry pages** — Tenext.in is thin here; this is the biggest storytelling upside.
- Introduce **outcome-led metrics** (delivery, TCO, time-to-value) instead of vanity numbers.

### Missing content / sections to create
- **Case Studies / Work** (none in Aiero, none strong in Tenext) — critical enterprise trust builder.
- **Industries** as first-class pages (Retail, Financial Services, Healthcare, Manufacturing, Education).
- **Solutions** hub (Digital Transformation, Product Development, IoT, SMAC, DevOps, Blockchain).
- **Careers** and **Resources/Insights** (blog exists structurally; needs real editorial).
- **Real testimonials / client logos** to replace Aiero placeholders.

### Better storytelling opportunities
- Lead the hero with a **business-outcome promise**, not a technology boast.
- Use the metrics band to state **delivery credibility** (projects, industries, retention) rather than fictional revenue.
- Turn the process section into a **transparent engagement model** — a common enterprise buying concern.

---

## 3. Design Comparison

For each major section: **Purpose · Layout · Components · Visual hierarchy · Why it works · Tenext adaptation**. Existing component is named in `code`.

### Navbar — `components/aiero/Navbar.tsx` (data: `data/navigation.ts`)
- **Purpose:** wayfinding + primary CTA. **Layout:** absolute overlay on hero, rounded pill container, left logo / center menu / right CTA. **Components:** logo, dropdown nav items, `AieroButton`. **Hierarchy:** logo → nav → "Get in touch" CTA. **Why it works:** floats over the hero art, minimal, premium.
- **Tenext adaptation:** replace Aiero mega-menu (Home 1–9, Shop) with real IA (About, Services, Solutions, Industries, Case Studies, Resources, Careers, Contact). Keep CTA as **"Talk to an expert"**.

### Hero — `components/aiero/HeroSection.tsx` + `HeroImageScene.tsx` (WebGL via `ogl`)
- **Purpose:** hook + positioning. **Layout:** 70% artwork / 30% left content, `ScrollDown` indicator. **Components:** headline, subcopy, compact CTA cluster, `ScrollDown`. **Hierarchy:** big headline → one-line subcopy → 1–2 CTAs. **Why it works:** visual dominance signals confidence.
- **Tenext adaptation:** outcome-led headline (see §5). Keep the WebGL scene but tune palette to Tenext brand; ensure it degrades gracefully and is `prefers-reduced-motion`-aware.

### Feature Cards — `components/aiero/CardsGrid.tsx` (+ `shared/CardShared.tsx`, `IconBox`)
- **Purpose:** at-a-glance capability proof. **Layout:** 3–4 icon cards. **Hierarchy:** icon → title → one line. **Why it works:** fast scannable value. **Tenext adaptation:** four pillars — *Engineering, Cloud, AI & Data, Digital Commerce* — each linking to its service page.

### Services — `components/aiero/services/ServiceCardsGrid.tsx`, `ServiceFeaturesSection.tsx`
- **Purpose:** portfolio depth. **Layout:** editorial card grid + feature list. **Tenext adaptation:** Technology Engineering, Digital Commerce, Enterprise Mobility, AI & Data Science, Cloud & Enterprise Platforms — each card → `/services/<slug>`.

### Solutions *(new)* — reuse `CardsGrid` / `CardShared`
- **Purpose:** map capabilities to business problems. **Tenext adaptation:** Digital Transformation, Product Development, IoT, SMAC, DevOps, Blockchain. Build `/solutions` from existing card components — no new layout system.

### Industries *(new)* — reuse `CardsGrid` + a new `IndustryCard` variant
- **Purpose:** relevance by vertical. **Tenext adaptation:** Retail, Financial Services, Healthcare, Manufacturing, Education. Card = image + industry + outcome line → `/industries/<slug>`.

### About — `components/aiero/about/AboutIntroSection.tsx`, `MissionSection.tsx`
- **Purpose:** credibility + values. **Layout:** intro + mission split. **Tenext adaptation:** Tenext story ("Experience the Digital Revolution"), mission, differentiators (predictable outcomes, lowest TCO, accelerated time to value).

### Statistics — `components/aiero/MetricsSection.tsx` (+ `shared/Counter.tsx`)
- **Purpose:** quantified trust. **Why it works:** animated counters add momentum. **Tenext adaptation:** replace fictional "$150b" with real, defensible numbers (projects delivered, industries served, years, retention). Keep `Counter`.

### Process — `components/aiero/HowItWorksSection.tsx`
- **Purpose:** de-risk the buy. **Tenext adaptation:** retire ML steps (Neurons/Activation) → **engagement model**: Discover → Design → Build → Deploy → Optimize (or Diagnostic → Focused Solution → Delivery → Support, echoing Tenext's "process diagnostic and improvement").

### Technology *(repurposed from Tinker)* — `components/aiero/TinkerSection.tsx`
- **Purpose:** show technical depth. **Tenext adaptation:** convert the neural-net playground into a **technology/capability showcase** (stack logos, SMAC/DevOps/Cloud/Blockchain, integration story). Keep the interactive/visual flavor, drop the ML demo semantics.

### Testimonials — `components/aiero/services/TestimonialsSection.tsx`
- **Purpose:** social proof. **Layout:** carousel + ratings. **Tenext adaptation:** real client quotes; if unavailable at launch, use outcome statements / logos and phase in named testimonials.

### Blog / Insights — `components/aiero/BlogSection.tsx`
- **Purpose:** thought leadership + SEO. **Tenext adaptation:** enterprise topics (digital transformation, cloud migration, data platforms, AI adoption). Cards → `/resources/<slug>`.

### CTA — `components/shared/PreFooterCTA.tsx`
- **Purpose:** conversion. **Layout:** full-width band, headline + dual buttons. **Tenext adaptation:** "Let's build your digital advantage" → **Talk to an expert / See our work**.

### Footer — `components/shared/Footer.tsx` (data: `data/site-config.ts`)
- **Purpose:** navigation + trust + legal. **Tenext adaptation:** replace placeholder columns/contact with real Tenext data (see Appendix A). Columns: Company, Services, Solutions, Industries, Resources; real Coimbatore address, phone, email, socials.

---

## 4. Content Mapping Table

| Aiero Section | Purpose | Tenext Equivalent | Content Changes | Existing Component / Notes |
|---|---|---|---|---|
| Navbar (Home 1–9, Shop, Blog) | Wayfinding | Enterprise nav | New IA; drop Shop/Home-variants; real routes | `Navbar.tsx` / `data/navigation.ts` |
| Hero ("Revolutionizing… AI") | Hook | Outcome-led hero | New headline/subcopy/CTA; tune WebGL palette | `HeroSection.tsx`, `HeroImageScene.tsx` |
| Feature cards (chatbot, dashboard, OpenAI) | Capability glance | 4 capability pillars | Engineering / Cloud / AI & Data / Commerce | `CardsGrid.tsx`, `CardShared.tsx` |
| Possibilities (4 service cards) | Core offering | Services overview | Tenext 5 services | `PossibilitiesSection.tsx` |
| Tinker (neural net playground) | Novelty/interaction | **Technology showcase** | Stack/SMAC/Cloud; drop ML demo | `TinkerSection.tsx` (repurpose) |
| Marquee ("Join ChatGPT…") | Rhythm/energy | Brand message strip | New enterprise line | `app/page.tsx:28` `MarqueeStrip` |
| WOW / Features / Benefits | Deeper value | Why Tenext / differentiators | Predictable outcomes, TCO, time-to-value | `WOWSection.tsx`, `FeaturesSection.tsx`, `BenefitsGridSection.tsx` |
| Statistics ("$150b", "95%") | Trust | Delivery metrics | Real, defensible numbers | `MetricsSection.tsx`, `Counter.tsx` |
| How it works (NN steps) | Process | **Engagement model** | Discover→Design→Build→Deploy→Optimize | `HowItWorksSection.tsx` |
| Team ("NN experts") | People | Leadership / team | Real roles; or phase in | `about/TeamSection.tsx` |
| Testimonials | Social proof | Client outcomes | Real quotes/logos | `services/TestimonialsSection.tsx` |
| Blog (NLP, "get started with AI") | Insights | Enterprise insights | DX/Cloud/Data/AI articles | `BlogSection.tsx` |
| Partners (grayscale logos) | Credibility | Client/partner logos | Real logos | `shared/PartnerLogosSection.tsx` |
| CTA ("Elevate your business") | Convert | Talk to an expert | New copy/buttons | `shared/PreFooterCTA.tsx` |
| Footer (USA/NY, Air/Sea transport) | Nav/legal | Tenext footer | Real Coimbatore contact + link columns | `shared/Footer.tsx` / `data/site-config.ts` |
| — (missing) | — | **Industries** | New vertical cards/pages | new `IndustryCard` + `CardsGrid` |
| — (missing) | — | **Case Studies** | New work pages | new `CaseStudyCard` + `CardShared` |

---

## 5. Homepage Blueprint

Section order mirrors the current `app/page.tsx`. For each: Purpose · Business objective · User objective · Heading · Subheading · CTA · Content structure · Visual.

1. **Hero** — *Purpose:* position Tenext. *Business:* generate qualified inquiries. *User:* "do they solve my problem?" *Heading:* "Engineering predictable outcomes from your digital investments." *Subheading:* "Tenext helps enterprises transform with cloud, data, AI, and product engineering — built to lower total cost of ownership and accelerate time to value." *CTA:* **Talk to an expert** / **See our work**. *Structure:* left content 30%, artwork 70%, `ScrollDown`. *Visual:* branded WebGL scene.

2. **Capability pillars (`CardsGrid`)** — *Heading:* "Full-stack capability, enterprise-grade delivery." *Subheading:* "Four pillars behind every engagement." *Cards:* Technology Engineering · Cloud & Enterprise Platforms · AI & Data Science · Digital Commerce. *CTA per card:* Explore →.

3. **Services overview (`PossibilitiesSection`)** — *Heading:* "Services that move the business, not just the tech." *Structure:* 5 service cards (add Enterprise Mobility). *CTA:* View all services.

4. **Technology showcase (`TinkerSection`, repurposed)** — *Heading:* "Modern technology, integrated with what you already run." *Content:* stack + SMAC/DevOps/IoT/Blockchain; integration narrative. *Visual:* interactive/animated tech graphic (no ML-demo semantics).

5. **Brand marquee (`MarqueeStrip`)** — *Copy:* "/ Building the digital backbone for enterprises across industries." (replaces the ChatGPT line).

6. **Why Tenext (`WOWSection` / `FeaturesSection` / `BenefitsGridSection`)** — *Heading:* "Why enterprises choose Tenext." *Content:* predictable outcomes · lowest TCO · accelerated time to value · process diagnostic & improvement · customer-experience excellence.

7. **Metrics (`MetricsSection`)** — *Heading:* "Proof in delivery." *Content:* real counters (projects, industries, years, retention %). *CTA:* See case studies.

8. **Engagement model (`HowItWorksSection`)** — *Heading:* "A transparent path from idea to impact." *Steps:* Discover & Diagnose → Design → Build → Deploy → Optimize.

9. **Industries (new)** — *Heading:* "Depth across the industries you operate in." *Cards:* Retail · Financial Services · Healthcare · Manufacturing · Education.

10. **Team (`TeamSection`)** — *Heading:* "The people behind your transformation." (Phase in real profiles.)

11. **Testimonials (`TestimonialsSection`)** — *Heading:* "Outcomes our clients stand behind."

12. **Insights (`BlogSection`)** — *Heading:* "Ideas for the digital enterprise." *Cards:* 2–3 latest articles.

13. **Partner logos (`PartnerLogosSection`)** — *Heading:* "Trusted by teams building for scale."

14. **Pre-footer CTA (`PreFooterCTA`)** — *Heading:* "Let's build your digital advantage." *CTA:* **Talk to an expert**.

---

## 6. Navigation Structure

Replace `data/navigation.ts` (currently Aiero: Home 1–9, Pages, Shop, Blog, Contacts with mostly `#`).

| Top-level | Route | Dropdown |
|---|---|---|
| Home | `/` | — |
| About | `/about` | Company · Mission & Vision · Leadership · Careers |
| Services | `/services` | Technology Engineering · Cloud & Enterprise Platforms · AI & Data Science · Enterprise Mobility · Digital Commerce |
| Solutions | `/solutions` | Digital Transformation · Product Development · IoT · SMAC · DevOps · Blockchain |
| Industries | `/industries` | Retail · Financial Services · Healthcare · Manufacturing · Education |
| Case Studies | `/case-studies` | — (filterable index) |
| Resources | `/resources` | Blog / Insights · Whitepapers · Events |
| Careers | `/careers` | — |
| Contact | `/contacts` | — |

Primary CTA (right): **Talk to an expert** → `/contacts`.

---

## 7. Complete Sitemap

| Page | Route | Purpose | Audience | Required sections | Internal links |
|---|---|---|---|---|---|
| Home | `/` | Convert + orient | All | Hero, pillars, services, tech, why, metrics, process, industries, team, testimonials, insights, CTA | All hubs |
| About | `/about` *(exists)* | Credibility | All | Intro, mission, differentiators, team, CTA | Careers, Contact |
| Services hub | `/services` *(exists)* | Portfolio | Buyers | Cards, features, testimonials, pricing/engagement, CTA | Each service, Solutions |
| Service detail | `/services/<slug>` *(new)* | Depth | Buyers | Overview, capabilities, tech, case studies, CTA | Related solutions/industries |
| Solutions hub | `/solutions` *(new)* | Problem→solution | Buyers | Cards, outcomes, CTA | Services, Case studies |
| Solution detail | `/solutions/<slug>` *(new)* | Depth | Buyers | Problem, approach, tech, proof, CTA | Services, Industries |
| Industries hub | `/industries` *(new)* | Relevance | LOB owners | Vertical cards, CTA | Industry pages |
| Industry detail | `/industries/<slug>` *(new)* | Vertical proof | LOB owners | Challenges, solutions, cases, CTA | Solutions, Case studies |
| Case studies | `/case-studies` *(new)* | Proof | Buyers | Filterable grid | Case detail |
| Case detail | `/case-studies/<slug>` *(new)* | Deep proof | Buyers | Challenge, solution, results, CTA | Related services |
| Resources | `/resources` *(new)* | SEO/authority | All | Article grid, categories | Articles |
| Article | `/resources/<slug>` *(new)* | Authority | All | Body, related, CTA | Related services |
| Careers | `/careers` *(new)* | Hiring | Candidates | Culture, roles, apply | About |
| Contacts | `/contacts` *(exists)* | Convert | All | Form, map, contact | — |

---

## 8. Content Strategy

**Voice:** enterprise, outcome-led, plain-spoken. No hype, no fluff. Every claim should be defensible.

**Message pillars → how to communicate them:**
- **Trust** — name real industries, delivery metrics, engagement model, and TCO/time-to-value outcomes. Show, don't assert.
- **Innovation** — frame technology (AI, cloud, IoT, blockchain) as a means to business results, never as a buzzword list.
- **Enterprise capability** — emphasize integration with existing systems/processes ("integrate solutions with existing business processes"), scale, and governance.
- **AI & Data Science** — position as applied outcomes (automation, insight, personalization), not research demos.
- **Digital Transformation** — anchor on Tenext's core line: "digital transformation is imperative for all businesses"; pair with predictable outcomes.
- **Cloud / Data / Automation / Product Engineering** — each gets a services/solution page with concrete capabilities and proof.

**Copy rules:** headlines state an outcome; subheads add the mechanism; body stays short with editorial line lengths (per CLAUDE.md typography rules). CTAs are action-verbs ("Talk to an expert," "See our work," "Explore the solution").

---

## 9. Visual Style Guide

All values below already live in `data/design-tokens.ts` (mirrored as CSS vars in `app/globals.css`). **Do not hardcode** — edit tokens so changes propagate.

- **Color:** dark canvas `#1F1F1F`, cards `#282828` / border `#3F3F3F`, white `#FFFFFF`; accents teal `#45D0BD`, blue `#44B6E9`, red `#EF6464` (+hover `#F57E7E`); purple gradient `#8258C8 → #6766C8 → #2C84C8`; muted text `#87899B`; surface `#ECF0F4`. *Tenext adjustment (optional):* if brand calls for a more corporate palette, change accents **in the token file only**; recommend leading with teal/blue (trust) and reserving red for a single primary CTA.
- **Typography:** fonts Manrope / Sora / DM Sans (`next/font`). Scale: hero `clamp(38–100px)/700`, section `clamp(32–56px)/500`, card `30px/500`, body `16px/1.6`, small `14px`, tag `12px` uppercase. Tight tracking (`-0.03em`) on headings.
- **Buttons:** `AieroButton`; radius `25px` or pill `9999px`; hover shadow `0 15px 30px rgba(239,100,100,.28)`.
- **Cards:** `CardShared`; radius `25px`; hover shadow `0 22px 55px rgba(31,31,31,.16)` + teal ring; lift `-4px`.
- **Radius:** card/button/section `25px`, tag `15px`, navbar `10px`, pill `9999px`.
- **Shadows:** `cardHover`, `buttonHover`, `scrollBtn` (token set — reuse, don't invent).
- **Grid / container:** max `1260px`, inner padding `15px`, page gutter `20px`, card gap `20px`.
- **Section spacing:** vertical `60 / 80 / 100 / 120px`; component gaps `30 / 40 / 50px`. No arbitrary values (72/94/113/147).
- **Image style:** rounded (`25px`), editorial crops, non-uniform card heights.
- **Illustration/icon style:** `shared/icons/*` + `lucide-react`; consistent stroke, contained in `IconBox`.

---

## 10. UX Recommendations

- **Scroll experience:** preserve the top-to-bottom narrative rhythm; use `RevealOnView` fade-up per section, staggered within grids.
- **Storytelling flow:** hook → capability → depth → proof → process → people → social proof → insights → convert.
- **Card interactions:** hover lift `-4px` + shadow (token `hoverLift` / `cardHover`); whole card clickable.
- **Motion hierarchy:** hero > section reveals > hover micro-interactions; nothing competes with content. Honor `prefers-reduced-motion` (also for the `ogl` WebGL hero).
- **CTA placement:** persistent navbar CTA + one per major section + pre-footer band; never more than two competing CTAs in a viewport.
- **Reading rhythm:** constrain line length; body `16px/1.6`; ample whitespace via spacing tokens.
- **Responsive:** desktop is source of truth → tablet → mobile (per CLAUDE.md). Cards collapse gracefully; hero content stacks above/over artwork on mobile.
- **Accessibility:** semantic headings, focus states on `AieroButton`/nav, alt text on all imagery, WCAG AA contrast (verify teal/blue on dark), keyboard-navigable dropdowns.
- **Performance:** lazy-load below-fold sections and the WebGL scene; see §14.

---

## 11. UI Component Inventory

**Existing — reuse:**
- `shared/AieroButton` — themed pill/CTA button.
- `shared/CardShared` (+ `.module.css`) — base editorial card.
- `shared/IconBox` — icon container.
- `shared/Counter` — animated stat counter.
- `shared/SectionHeading` — standardized section title.
- `shared/SectionContainer` / `PageContainer` — layout wrappers.
- `shared/RevealOnView` — scroll-reveal wrapper.
- `shared/ScrollDown` — hero scroll indicator.
- `shared/SocialIcons`, `shared/Footer`, `shared/PartnerLogosSection`, `shared/PreFooterCTA`, `shared/PageTitleBanner`, `shared/ContactFormSection`.
- `aiero/Navbar`, `HeroSection`, `HeroImageScene`, `CardsGrid`, `PossibilitiesSection`, `TinkerSection`, `MarqueeStrip`, `WOWSection`, `FeaturesSection`, `BenefitsGridSection`, `MetricsSection`, `HowItWorksSection`, `BlogSection`.
- `aiero/about/*`, `aiero/services/*` (ServiceCardsGrid, ServiceFeaturesSection, TestimonialsSection, PricingSection), `aiero/contacts/MapSection`.

**New — to add (build from `CardShared`/`CardsGrid`, no new layout system):**
- `IndustryCard` — image + industry + outcome line.
- `CaseStudyCard` — client/logo + challenge + result metric.
- `SolutionCard` (optional variant) — problem-framed card for `/solutions`.
- `StatBar` / trust strip variant (optional) — inline credibility row.

---

## 12. Design System

Documented from the **living tokens** in `data/design-tokens.ts` (not a parallel spec):

- **Spacing scale:** section Y `60/80/100/120`; component gap `30/40/50`; gutter `20`, container padding `15`, card gap `20`.
- **Typography scale:** hero / sectionTitle / cardTitle / body / small / tag (sizes in §9).
- **Radius scale:** `10 (nav) / 15 (tag) / 25 (card·button·section) / 9999 (pill)`.
- **Shadow system:** `cardHover`, `buttonHover`, `scrollBtn`.
- **Elevation:** flat surfaces + hover elevation via `cardHover`; navbar floats above hero (z-50).
- **Container widths:** max `1260px`.
- **Breakpoints:** desktop-first; use Tailwind defaults (sm 640 / md 768 / lg 1024 / xl 1280), designing desktop → tablet → mobile.
- **Animation principles:** reveal `0.72s cubic-bezier(0.22,1,0.36,1)`; hover `0.32s ease`, lift `-4px`. Subtle only (fade-up, lift, opacity) per CLAUDE.md.

**Rule:** any global change (color, spacing, radius, motion) is made in `data/design-tokens.ts`; any brand/contact/nav change in `data/site-config.ts` / `data/navigation.ts`.

---

## 13. SEO Strategy

- **Page hierarchy:** Home → hubs (Services, Solutions, Industries, Case Studies, Resources) → detail pages. One `<h1>` per page; logical `<h2>/<h3>`.
- **Metadata:** per-route `metadata` exports (App Router). Fix `app/layout.tsx` (currently "Home 9 – tenext"). Titles like *"Cloud & Enterprise Platforms | Tenext Technologies"*; unique descriptions; OG/Twitter images.
- **Structured data (JSON-LD):** `Organization` + `LocalBusiness` (Coimbatore address, phone, email) sitewide; `Service` on service pages; `BreadcrumbList` on inner pages; `Article` on resources.
- **Internal linking:** services ↔ solutions ↔ industries ↔ case studies cross-links; contextual CTAs.
- **URL structure:** clean, lowercase, hyphenated (`/services/cloud-enterprise-platforms`, `/industries/financial-services`).
- **Content hierarchy:** outcome-led H1, capability H2s, proof/case H3s; `sitemap.xml` + `robots.txt`.

---

## 14. Performance Recommendations

- **Images:** use `next/image` (responsive sizes, AVIF/WebP, lazy by default) for all card/hero imagery.
- **Lazy loading:** defer below-the-fold sections and heavy visuals; dynamic-import the `ogl` WebGL hero scene client-side.
- **Fonts:** keep `next/font` (Manrope/Sora/DM Sans) with `display: swap`; subset; avoid extra weights.
- **Animation:** keep motion GPU-cheap (transform/opacity via tokens); gate the WebGL scene on `prefers-reduced-motion` and viewport visibility.
- **Core Web Vitals:** protect LCP (hero image/text priority), CLS (reserve media dimensions), INP (avoid heavy JS on interaction).
- **Accessibility:** AA contrast, focus-visible states, alt text, keyboard nav — treated as a performance/quality gate, not an afterthought.

---

## 15. Implementation Roadmap

**Phase 1 — Design system + Navbar + Hero**
- Confirm/adjust tokens in `data/design-tokens.ts`; fix `app/layout.tsx` metadata.
- Rewrite `data/navigation.ts` to the §6 IA; update `Navbar` CTA.
- Rewrite hero copy in `HeroSection.tsx`; tune `HeroImageScene` palette + reduced-motion.

**Phase 2 — Homepage sections**
- Apply §5 copy across `CardsGrid`, `PossibilitiesSection`, `TinkerSection` (→ tech showcase), `MarqueeStrip` (`app/page.tsx:28`), `WOWSection`/`FeaturesSection`/`BenefitsGridSection`, `MetricsSection` (real numbers), `HowItWorksSection` (engagement model).
- Add Industries section (new `IndustryCard`).
- Replace `data/site-config.ts` placeholders (Appendix A) → real Footer/Contact.

**Phase 3 — Inner pages**
- Build `/solutions`, `/industries`, `/case-studies` hubs + detail templates from `CardShared`/`CardsGrid`; expand `/services` detail pages; add `/resources`, `/careers`.

**Phase 4 — Animations**
- Standardize `RevealOnView` usage + stagger; verify hover tokens; reduced-motion pass.

**Phase 5 — SEO**
- Per-route metadata, JSON-LD (Organization/Service/Breadcrumb/Article), sitemap/robots, internal linking.

**Phase 6 — Performance optimization**
- `next/image` migration, lazy/dynamic imports, font tuning, CWV audit, a11y audit.

---

## Appendix A — Content Debt

Exact leftover-Aiero values in the repo and their Tenext replacements.

| File | Current (Aiero) | Replace with (Tenext) |
|---|---|---|
| `data/site-config.ts` | `tagline: "AI Agency"` | Tenext positioning (e.g. "Enterprise Digital Transformation") |
| `data/site-config.ts` | `phone: "+1 800 529 10 37"` | `+91 9629415770` |
| `data/site-config.ts` | `email: "tenext@mail.co"` | `info@tenext.in` |
| `data/site-config.ts` | address USA / New York | 424 Redrose Towers, DB Road, RS Puram, Coimbatore, India |
| `data/site-config.ts` | footer services: AI Systems / Deep Learning / Neural Networks | Cloud & Enterprise Platforms / AI & Data Science / Enterprise Mobility / Digital Commerce |
| `data/site-config.ts` | `copyright: "©tenext 2025…"` | `©Tenext Technologies 2026. All rights reserved.` |
| `data/navigation.ts` | Home 1–9, Pages, Shop, Products/Cart/Checkout, generic Blog, `#` links | §6 IA (About, Services, Solutions, Industries, Case Studies, Resources, Careers, Contact) with real routes |
| `app/page.tsx:28` | Marquee "/ Join ChatGPT in shaping the future…" | "/ Building the digital backbone for enterprises across industries." |
| `app/page.tsx` | `TinkerSection`, `HowItWorksSection` (ML semantics) | Technology showcase + engagement model |
| `app/layout.tsx` | metadata "Home 9 – tenext" | Tenext title/description/OG |

> **Guardrails:** no Aiero marketing copy is reproduced; Aiero informs structure/UX only. All business facts trace to tenext.in. Preserve the existing component architecture and single-source-of-truth tokens (per CLAUDE.md / AGENTS.md).