Aravind/tenext-next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6625bb9018453b46eeea1391a352f41647e080e1
tenext-next/docs/BLUEPRINT.md
Aravind 6625bb9018 tenext redesign
2026-08-03 14:42:01 +05:30

33 KiB
Raw Blame History

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
  2. Website Analysis
  3. Design Comparison (section by section)
  4. Content Mapping Table
  5. Homepage Blueprint
  6. Navigation Structure
  7. Complete Sitemap
  8. Content Strategy
  9. Visual Style Guide
  10. UX Recommendations
  11. UI Component Inventory
  12. Design System
  13. SEO Strategy
  14. Performance Recommendations
  15. Implementation Roadmap
  16. Appendix A — Content Debt (leftover Aiero placeholders to replace)

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).

Round 2 — section-level copy (cleared)

The table above covered config and navigation. A second pass cleared the template copy still sitting inside the section components. All of it now resolves from data/site-content.ts.

File Was (Aiero) Now (Tenext)
about/AboutIntroSection.tsx "Awesome things in working with tenext WordPress theme" / "At XXLando, we are a leading AI services provider…" aboutContent.intro — enterprise transformation positioning
about/MissionSection.tsx "Certainly, crafting a clear and inspiring mission statement is essential…" (writing instructions left in as copy) + 1250+ Created projects aboutContent.mission + the three Tenext commitments
shared/ContactFormSection.tsx "Pacific hake false trevally queen parrotfish…" + fake second phone + (123) 1800-234-5678 ctaContent.contact; single real number from site-config
services/ServiceCardsGrid.tsx Neural Network Development / Training & Optimization / Neural Network Integration The five real service lines from services
services/ServiceFeaturesSection.tsx "Emphasize the expertise…", "Mention your ability…" (instructions as copy) differentiators — six real reasons to engage
services/PricingSection.tsx → EngagementModelsSection.tsx $59/mo SaaS tiers, "1 Gb workspace", "Download prototypes" engagementModels — project / dedicated team / managed services, no published prices
services/TestimonialsSection.tsx → DeliveryPrinciplesSection.tsx 12 invented client quotes about "our AI solutions" deliveryPrinciples — how delivery stays predictable
about/TeamSection.tsx Invented people: Alan Begham, Arthur Dowson "AI Programmer", "CEO Neuro" practiceTeams — the disciplines that staff an engagement
BlogSection.tsx AI-model / ML / AI-ethics posts, 2025 dates, dead /blog/* links resources from site-pages.ts, linking to /resources#id
PreFooterCTA.tsx "Elevate your business with our innovative solutions" ctaContent.preFooter

Single-source wiring added: data/navigation.ts and siteConfig.footerLinks.services now derive from services / solutions / industries instead of restating them, so a label only has to change in one place.

Open content debt

  1. Unverified statistics. Every figure in companyStats (data/site-content.ts) is a placeholder inherited from the template build — 500K+ daily transactions, 270k engineering hours, 250+ projects, 15+ years. Each is flagged verified: false. Replace with audited numbers or delete the counters; do not ship them as-is.
  2. No named people or client quotes. tenext.in publishes neither, so none were invented. practiceTeams and deliveryPrinciples hold those slots. Add real leadership profiles (with consent) and attributable testimonials when available.
  3. Team photography in practiceTeams is still stock imagery.
  4. since 2024 in Footer.tsx is decorative and unconfirmed — check the real founding year.
  5. Legal pages. siteConfig.legalLinks still point at #.
Reference in New Issue View Git Blame Copy Permalink