Skip to content

Omnivoltaic Site

Version: 4.2.0
Date: 2026-04-12
Site URL: www.omnivoltaic.com
Dev Port: 3100
Extends: all-sites.md

Site Purpose

Corporate hub and central entry point to Omnivoltaic's digital ecosystem. Gateway to all three information flow dimensions: Solutions, Regional Operations, and Enterprise Capabilities.

Header

default

Navigation Menu: - Home - Products - Articles

Footer

default

Homepage

Hero Section

Block: HeroWithBackground (from marketing/uxi/blocks)

Title: Omnivoltaic

Tagline: Electrify the World!

Subtitle: Power Everywhere. For Everyone.

Background: Image with dark overlay - https://res.cloudinary.com/oves/image/upload/t_article12_5/v1632057887/promo/missing_link_cube.jpg

CTA: Partner with Us → https://forms.office.com/r/45vCYswcf4

Solution Features Section

Layout Pattern: Alternating FeatureGrid and FeatureGridRight blocks for visual interest

Feature 1: E-Mobility

Block: FeatureGrid (from marketing/uxi/blocks)

Props: - Eyebrow: "E-Mobility" - Heading: "On the Road" - Description: "Clean. Economic. Sustainable." - Image: https://res.cloudinary.com/oves/image/upload/t_banner-bg22/v1760327090/promo/Riders_fts3z5.png - CTA Button: - Label: "Explore" - Link: canonical path /mobility - Local development override: NEXT_PUBLIC_MOBILITY_URL

Feature 2: Off-Grid Energy

Block: FeatureGridRight (from marketing/uxi/blocks)

Props: - Eyebrow: "Off-Grid Energy" - Heading: "At Home" - Description: "Connecting Communities" - Image: https://res.cloudinary.com/oves/image/upload/t_banner-bg22/v1769161506/promo/Off-Grid_Web_230123_1_kxmnst.png - CTA Button: - Label: "Explore" - Link: canonical path /off-grid - Local development override: NEXT_PUBLIC_OFF_GRID_URL

Feature 3: Cross-Grid

Block: FeatureGrid (from marketing/uxi/blocks)

Props: - Eyebrow: "Cross-Grid" - Heading: "Cross Boundaries" - Description: "Bridging the Power Gaps" - Image: https://res.cloudinary.com/oves/image/upload/t_banner-bg22/v1769075841/promo/Cross-Grid__Web_230122_pllc2u.png - CTA Button: - Label: "Explore" - Link: canonical path /cross-grid - Local development override: NEXT_PUBLIC_CROSS_GRID_URL

Feature 4: Productive Use

Block: FeatureGridRight (from marketing/uxi/blocks)

Props: - Eyebrow: "Productive Use" - Heading: "At Work" - Description: "Tools to Power Income Generation" - Image: https://res.cloudinary.com/oves/image/upload/t_banner-bg22/v1769075841/promo/18Ah_Solar_Sewing_Machine_Pack_-_6_yvgspt.png - CTA Button: - Label: "Explore" - Link: canonical path /productive - Local development override: NEXT_PUBLIC_PRODUCTIVE_URL

Products Page (New Products)

Route: /products

Purpose: Cross-portfolio showcase of newest and featured products — a "sneak peek" into the solution sites, encouraging exploration.

Hero Section

Pattern: Same hero style as other pages for consistency

  • Background Image: https://res.cloudinary.com/oves/image/upload/t_article12_5/v1660471804/promo/Battery_Production.jpg
  • Overlay: Dark gradient overlay (bg-gray-900/70)
  • Decorative Blob: Gradient shape overlay (pink-to-purple, 20% opacity)
  • Eyebrow: "New Products" (cyan badge)
  • Heading: "Latest Innovations"
  • Description: "Discover our newest solar systems, e-mobility solutions, and productive use equipment across all portfolios."

Product Grid Section

Block: ProductGrid (dark-mode variant)

Layout: - 3-column responsive grid (lg:3, md:2, sm:1) - Dark background (bg-gray-900) - Each card links to product detail page

Product Card Elements: - Product image (component diagram style, aspect-square) - Product name/title - Portfolio badge (Off-Grid, E-Mobility, Cross-Grid, Productive Use) - Brief tagline/description - "View Details" link → /products/[slug]

Data Source: - BFF-backed featured or curated product collections exposed through the site product/content surface

Featured Products Collection: - 6-9 products representing all 4 portfolios - Selection criteria: newest releases, best sellers, flagship items - Rotate quarterly based on product launches

Product Detail Page

Route: /products/[slug]

Purpose: Individual product showcase with specifications, images, and portfolio context.

Layout Structure

Block: ProductDetail (dark-mode variant)

Two-Column Layout: - Left (60%): Image gallery with thumbnail navigation - Right (40%): Product information panel

  • Primary image display (large)
  • Thumbnail strip below (4-6 images)
  • Images: component diagrams, product photos, system schematics
  • Navigation: prev/next arrows or click thumbnails

Product Information Section

  • Product Title: Full product name/SKU
  • Portfolio Badge: Category indicator (Off-Grid, E-Mobility, etc.)
  • Description: Product overview paragraph
  • Tab Navigation:
  • Description tab (default active)
  • Specifications tab (technical data)
  • CTA Buttons:
  • "Download Datasheet" (PDF) — primary action
  • "Request Quote" → contact form or partner link
  • Portfolio Link: "Explore more [Portfolio Name] products →" links to solution site

Expandable Details Section

Block: Accordion/Disclosure pattern

  • Features: Key product features list
  • Specifications: Technical specifications table
  • Included Items: What's in the box/package contents
  • Warranty: Warranty and support information
  • 3-4 related products from same portfolio
  • Horizontal scroll or grid
  • Encourages cross-selling within portfolio

Data Source: - BFF-backed product detail payloads for the resolved product object

Articles Page

Pattern: Same hero style as homepage for consistency

Route: /articles

Hero Section: - Background Image: https://res.cloudinary.com/oves/image/upload/t_article12_5/v1652757787/promo/pexels-startup-stock-photos-212286_ouagov.jpg - Overlay: Dark gradient overlay (bg-gray-900/70) for text readability - Decorative Blob: Gradient shape overlay (pink-to-purple, 20% opacity) - Eyebrow: "Learn. Share. Illuminate." (cyan badge) - Heading: "Energy Solutions Insights" - Description: "Explore the latest innovations in solar storage, community power systems, and sustainable energy technologies." - Principle: Consistent hero treatment across site sections reinforces brand identity

Content: - Collection: omnivoltaic_vision (defined in all-sites.md) - Articles: Display articles from the Omnivoltaic Vision collection: - About Omnivoltaic Technologies - About Omnivoltaic Markets - Electrifying the World: Off-Grid Power and Convergence Technologies - Off-Grid Power - Convergence Technologies - Omnivoltaic's Competitive Edge: A Solar Revolution Beyond the Ordinary - Omnivoltaic Broad Product Range - Omnivoltaic Partnerships - Global Partnerships and Global Reach - Display: Article cards in grid layout, each with: - Hero image (if available) - Title - Excerpt/subtitle - Read more link → /articles/[slug]

Implementation: - Reuse homepage hero structure with integrated header - Fetch articles from BFF using collection ID: omnivoltaic_vision - List view with article cards below hero - Article detail pages at /articles/[slug] (minimal hero with article image) - ISR pattern with BFF data fetching

Contact Page

Route: /contact on the Omnivoltaic site root; solution apps under a basePath use contactPagePath(BASE_PATH) (e.g. /mobility/contact) — see footer-widgets.yaml and all-sites.md §Default Footer.

Navigation: Contact is not a header navigation item (header shows Home, Products, Articles only). Contact is reachable through the footer widget and direct CTA links. Footer links must use the basePath-aware path (contactPagePath(BASE_PATH)), not a bare /contact, on prefixed apps.

Composition: One block-composed page section translated by scaffold from registered block intent.

Block: ContactFormCentered (from @dirac/oves-uxi-blocks)

Purpose: Collect direct inquiries from CTA jumps and campaign flows without adding another permanent top-level navigation item.

Block Props: - Eyebrow: "Contact Omnivoltaic" — color #00FFFF (cyan) on dark hero; Montserrat for eyebrow/heading, Lato for body (see all-sites.md §Brand Colors / Typography). - Heading: "Talk to the Omnivoltaic team" - Description: "Share your project context, deployment needs, or partnership interest and our team will follow up directly." - Submit Label: "Send contact request" - Message Label: "How can we help you?" - Return Route: / (used after successful submit — safe same-site navigation) - Submission Transport: App runtime must submit through the site-level contactBffUrl rather than a hardcoded page-local action URL. - No cancel control — visitors use browser back or site navigation. - No privacy-policy line or checkbox — there is no published privacy policy URL for this flow; do not block submit on consent text.

Workflow Rules: - Successful submit navigates back using a safe same-site rule (referrer or returnHref), appends ?status=success to the URL, and the root layout renders ContactStatusToast — a clear green banner (not low-contrast inline text).

Implementation (ISR): - Intent first: This document (oves-sites) is the source of truth; dirac-uxi-isr implements the same props and behavior in code (SharedContactPage, ContactFormCentered, omnivoltaicContactPageIntent). - Shared layout: SharedContactPage + ContactFormCentered; copy and labels are centralized in omnivoltaicContactPageIntent() (@dirac/uxi-design-system/lib/contact-page-intent) unless overridden per app (returnHref, sourceCampaign). - GraphQL: submitAction = site CONTACT_BFF_URL / NEXT_PUBLIC_CONTACT_BFF_URL (default https://dirac-fed-dev.omnivoltaic.com/contact-bff). The form POSTs createContact JSON (see ContactFormCentered).

Site Assistant (Chat)

Scope: ISR marketing sites (dirac-uxi-isr) surface a lightweight embedded assistant for visitor questions.

Composition: Fixed-position iframe loading the approved bot host (https://bot.omnivoltaic.com/) with page query set to the current URL for context. Implementation lives in @dirac/uxi-design-system (ChatBotWidget) and is included from each site root layout.

Behavior: - Lazy interaction: iframe remains small until expanded; resize/postMessage coordination for open/close. - Must not block page content (z-index elevated, no overlay until opened). - Accessibility: iframe has a descriptive title (e.g. “Chat with us”).

Governance: Styling of the iframe chrome (rounded corners, position) uses TWP tokens; the bot UI inside the iframe is owned by the bot service, not duplicated in ISR.

Product datasheet PDF (client-generated)

Purpose: On product detail pages (ProductDetailWithBom), visitors may download a specification PDF generated in the browser from live BFF/product data (BoP/BoM, description, hero image), so the PDF always matches the on-screen product record.

Implementation stack (Apps — canonical for ISR): - pdfmake (pdfmake/build/pdfmake) with custom VFS (lib/vfs_custom_fonts.ts) containing Montserrat (headings) and Lato (body) — the same fonts specified in all-sites.md §Typography. defaultStyle.font: 'Lato'; heading styles use font: 'Montserrat'. TTF sources live in packages/uxi-design-system/fonts/, generated into base64 VFS by scripts/build-pdf-fonts.js. - markdown-to-text to strip Markdown from long descriptions before flowing into the PDF. - Images: loaded via <img> (browser pipeline; original Cloudinary URLs, no transform segments that 401) → <canvas> with white background (JPEG has no alpha) → logos as image/png data URLs; product hero as image/jpeg (~0.94 quality). imageSmoothingQuality: 'high'. - Fonts (pdfmake 0.3.x): pdfMake.addVirtualFileSystem(customVfs) and pdfMake.addFonts({ Montserrat, Lato }) once per session, then pdfMake.createPdf(docDefinition).download(filename) — second argument must be an object or omitted (not null). No server-side PDF service.

Brand / layout in PDF: - Table widths: [320, 60, 60, 60] (pt); product hero uses fit: [376, 320] in the merged image cell; header logo fit: [300, 56]. - Colors: Navy #002552 table headers, body text #334155, accent #0891b2 — aligned with all-sites.md §Brand Colors.

Raster: Canvas output is always PNG or JPEG data URLs pdfmake accepts; transparent sources are flattened on white before encode.

Content alignment: Structure mirrors the legacy Hydrogen “spec sheet” table (properties, BoM sections, issue date). Product model lines are parsed from description Markdown when present.

Intent bundle — cross-site ISR (reference)

Capability Intent Technology note
Contact ContactFormCentered + contactBffUrl / NEXT_PUBLIC_CONTACT_BFF_URL GraphQL POST to contact-bff; no privacy line or cancel in v4.2 corporate intent (optional privacy props supported by block).
Assistant Embedded bot iframe https://bot.omnivoltaic.com/?page=<url>
Datasheet PDF Client-side pdfmake, Montserrat + Lato fonts, high-res logo, BoP/BoM tables pdfmake + custom VFS (Montserrat/Lato TTFs) + markdown-to-text

Future Pages

All future pages (About, Solutions, Impact) deferred to Phase 2+

Content Evolution

Phase 1: MVP (Current)

  • ✅ Hero section with background image
  • ✅ 4 solution feature blocks (alternating left/right layout)
  • ✅ Articles page (reuse marketing pattern)
  • ✅ Basic header with Home/Articles navigation
  • ✅ Default footer

Phase 1.5: Products Page (In Progress)

  • [ ] New Products grid page (/products)
  • [ ] Product detail page (/products/[slug])
  • [ ] Dark-mode ProductGrid block
  • [ ] Dark-mode ProductDetail block
  • [ ] featured products selection sourced from a stable BFF-backed collection or equivalent contract
  • [ ] Navigation update: Home → Products → Articles

Phase 2: Enhanced Content

  • [ ] About page
  • [ ] Impact metrics section
  • [ ] Featured case studies
  • [ ] Additional navigation pages

Phase 3: Dynamic Content

  • [ ] BFF integration for solution site data
  • [ ] Featured products from CMS
  • [ ] Dynamic regional office links

Site-Specific Notes

  • Three pages: Home, Products, and Articles
  • Home links to 4 solution subsites via feature blocks
  • Products showcases cross-portfolio featured items
  • Articles reuses marketing app pattern

Page Layout Strategy

  • Home: Hero + Alternating FeatureGrid/FeatureGridRight (4 features)
  • Products: Hero + ProductGrid (dark-mode, 3-col)
  • Product Detail: ImageGallery + ProductInfo + Accordions (dark-mode)
  • Articles: Reuse marketing/app/articles-isr pattern

Block Sources

  • All blocks from marketing/src/uxi/blocks/
  • HeroWithBackground for hero section
  • FeatureGrid and FeatureGridRight alternate for visual interest

Branding

  • Use large logo in header (omnivoltaic is the master brand)
  • Prominent "Omnivoltaic" typography in hero
  • Solutions presented as equals (no hierarchy in grid)

Development

  • Port 3100 for local development
  • Source docs and intents should use canonical path URLs for solution links
  • Local development URLs are injected via environment overrides in the ISR suite
  • Canonical production URLs use path routing under www.omnivoltaic.com

Change Log

v4.2.0 - 2026-04-12

  • Contact page: removed cancel control and privacy-policy checkbox/copy from intent (no published privacy URL); submit-only flow with safe return after success

v4.1.0 - 2026-04-12

  • Documented site assistant (chat iframe) and product datasheet PDF intents
  • Recorded ISR implementation stack: pdfmake with custom VFS (Montserrat + Lato TTFs), markdown-to-text, canvas-based image pipeline for PDF (no Cloudinary transforms)
  • Clarified PDF raster rules: pdfmake browser build only supports JPEG/PNG; Cloudinary URLs must use explicit f_jpg / f_png (no WebP/AVIF in data URLs)
  • Footer widget presets: Contact → /contact (see docs/shared/footer-widgets.yaml and all-sites.md §Default Footer)

v4.0.0 - 2026-02-13

  • Added Products page specification (/products)
  • Added Product Detail page specification (/products/[slug])
  • Defined ProductGrid and ProductDetail block requirements (dark-mode)
  • Added Phase 1.5 milestone for products implementation
  • Updated navigation: Home → Products → Articles

v3.0.0 - 2026-01-22

  • Simplified to 2-page site: Home + Articles
  • Home page: Hero + 4 alternating feature blocks (FeatureGrid/FeatureGridRight)
  • Articles page: Reuse marketing/app/articles-isr pattern
  • Specified approved blocks from marketing/src/uxi/blocks/
  • Removed future page placeholders (deferred to Phase 2+)

v2.0.0 - 2026-01-19

  • Converted to new human-readable format
  • Now extends all-sites.md for shared configuration
  • Simplified to page intent descriptions only
  • Removed technical implementation details (belongs in code)

v1.0.0 - 2026-01-19

  • Initial design intent document created

This document is the design intent "source code" for the omnivoltaic site. Update this document to plan content changes, then implement in actual site code.