> For the complete documentation index, see [llms.txt](https://sonic-ai-works.gitbook.io/sonic-networks-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sonic-ai-works.gitbook.io/sonic-networks-docs/documentation/developers/frontend-and-design-system/website-and-application-design-guide/marketing-component-contracts.md). # Marketing component contracts Canonical implementation contracts for SONIC AI Works public-site components, including hero, product previews, pricing, FAQ, CTA, footer, legal and 404 surfaces. These contracts define the production behavior for the SONIC AI Works public-site component layer. They complement the Website & Application Design Guide and are intended to reduce route-level design drift. > **Scope rule:** The public website is product-first. Do not introduce a generic Membership product or navigation surface. Governance is documented separately and only appears where governance functionality is actually configured and supported. ## File ownership Recommended component ownership: ``` components/marketing/ ├── logo.tsx ├── hero.tsx ├── footer.tsx ├── cta.tsx ├── faq.tsx ├── partnership.tsx ├── product-view.tsx ├── product.tsx ├── features.tsx ├── pricing.tsx └── legals.tsx app/ └── not-found.tsx ``` If the repository still uses the Pages Router, `pages/404.tsx` may provide the route while rendering the shared not-found component. Do not maintain two visually divergent 404 experiences. ## Shared implementation rules All components in this layer must: * consume semantic theme tokens instead of hard-coded route-level colors; * expose light/dark-safe neutral surfaces while preserving dark-red branded surfaces; * support keyboard navigation and visible `:focus-visible` states; * respect `prefers-reduced-motion`; * avoid fabricated metrics, wallet state, token state, partner status and reward status; * avoid arbitrary wallet CTAs on general marketing surfaces; * use **Launch Studio →** as the canonical primary marketing CTA; * use the canonical waveform logo as product identity; * use the current circular red SONIC coin only for token/economic artwork; * render loading/error/disabled states explicitly when a component depends on runtime data. ## `logo.tsx` `logo.tsx` is the single source of truth for brand lockups used by the website and application shell. Recommended API: ```ts type LogoVariant = "dark" | "light" | "red" | "gray"; type LogoLayout = "horizontal" | "vertical" | "mark"; type LogoProps = { variant?: LogoVariant; layout?: LogoLayout; size?: "sm" | "md" | "lg"; priority?: boolean; className?: string; }; ``` Rules: * light page surface → dark/black lockup; * dark/cinematic page surface → white lockup; * dark-red branded surface → white lockup; * icon-only contexts → waveform mark; * never use token artwork as the navigation logo; * never crop a logo from a screenshot; * decorative mark images use empty alt text when the surrounding lockup already exposes the brand name. ## `hero.tsx` The homepage hero is a **product proof surface with cinematic support**, not a full-screen illustration. Canonical content: **Eyebrow** THE CREATIVE PRODUCTION PLATFORM **H1** Turn an idea into a finished creative project. **Description** Generate music with AI, shape ideas into structured productions, collaborate with creators, and manage your work from concept to release in one connected workspace. **Primary CTA** Launch Studio → **Secondary CTA** Explore Projects **Proof line** AI creation · Project production · Creator collaboration · Solana infrastructure Desktop layout: ``` copy / CTA rail | Studio product preview | over controlled hero.webp treatment ``` Requirements: * one H1 only; * primary CTA visible above the fold; * product preview visually outranks decorative artwork; * `hero.webp` is a background/supporting layer, not the only proof of product value; * headline should normally remain within 12–14 words; * mobile stacks copy first and focused product preview second; * do not place important copy over faces or dense waveform regions; * hero animation is cinematic tier motion and must disable/reduce under reduced-motion preferences. ## `product-view.tsx` `product-view.tsx` is the shared shell for marketing representations of real product workflows. Recommended model: ```ts type ProductViewKind = | "studio" | "project-builder" | "marketplace" | "community" | "governance"; type ProductViewProps = { kind: ProductViewKind; state?: "idle" | "loading" | "success" | "error"; compact?: boolean; interactive?: boolean; }; ``` Rules: * marketing previews may simulate transitions, but must be visually identified as previews and must not imply confirmed provider or chain state; * product views should reuse real product vocabulary and information hierarchy; * do not use meaningless charts as decoration; * a Studio preview prioritizes prompt → model → generation → result → Open in Project; * a Project Builder preview prioritizes prompt → scenes/tasks/assets → collaborators/timeline → Open Project; * marketplace previews show products/opportunities, not invented balances; * governance previews show proposal state and participation requirements only when the capability exists. ## `product.tsx` `product.tsx` owns the main product-story sections and should reinforce the canonical journey: ``` Create → Build → Collaborate → Publish → Participate ``` Recommended section responsibilities: | Section | Single argument | Primary next step | | --------------- | --------------------------------------- | ------------------- | | AI Studio | Create the starting point | Open Studio | | Project Builder | Turn direction into a production | Explore Projects | | Collaboration | Build with the right creators | Explore Community | | Marketplace | Move work into commerce/discovery | Explore Marketplace | | Participation | Make supported participation verifiable | Learn how it works | Do not combine Studio, wallet connection, Tokenomics, rewards and community into a single mega-section. ## `features.tsx` `features.tsx` should describe outcomes, not repeat generic AI/Web3 claims. Preferred capability set: ``` AI creation Structured projects Creator collaboration Community production Marketplace workflows Verifiable participation ``` Feature cards should remain editorial and mostly borderless. Use visible borders when the card itself is interactive. Do not hard-code platform statistics into feature cards. ## `partnership.tsx` This component must distinguish **verified partners/integrations** from general ecosystem compatibility. Use three semantic categories: ```ts type RelationshipKind = | "partner" | "integration" | "infrastructure"; ``` Rules: * use `partner` only when there is a verified partnership relationship; * use `integration` for supported product/provider integrations; * use `infrastructure` for underlying networks/platform dependencies; * never label a logo strip **Trusted by** unless the relationship is verifiable; * do not imply endorsement because a technology is supported; * official third-party marks must use approved provider assets and brand guidelines. Until partner status is verified, prefer labels such as **Built with**, **Integrates with**, or **Infrastructure** according to the actual relationship. ## `pricing.tsx` Pricing is editorial, high-clarity and entitlement-aware. Canonical section copy: **PRICING** **Choose the workspace that fits your production.** Start with the core creative workflow, then upgrade when you need additional generation capacity, advanced production tools, or team features. Recommended plan CTA hierarchy: ``` Free → Start Creating Pro → Upgrade to Pro Studio/Team → Contact Sales ``` Rules: * plan names, prices, included credits/limits and entitlements must come from the canonical price catalog or approved static product configuration; * historical/checkout pricing uses immutable price snapshots; * do not say `Unlimited` unless the entitlement is operationally unlimited under the published policy; * do not mix SONIC token value with SaaS plan value; * wallet connection is not the default pricing CTA; * highlight at most one plan as recommended/popular; * mobile stacks plans vertically; comparison tables may horizontally scroll. ## `faq.tsx` Use an accessible accordion with semantic buttons, `aria-expanded`, `aria-controls`, keyboard support and persistent visible focus. Recommended website questions: 1. What is SONIC AI Works? 2. What can I create in AI Studio? 3. What is Project Builder? 4. Do I need a Solana wallet to use SONIC? 5. Does connecting a wallet authorize transactions? 6. Who owns work created with SONIC? 7. How do creator rewards work? 8. What blockchain does SONIC use? 9. Can I collaborate with other creators? 10. Where can I read the technical documentation? Answer rules: * keep answers concise enough for scanning; * link to authoritative docs for legal, wallet, Tokenomics and technical depth; * avoid absolute ownership/licensing claims that depend on provider or contributor terms; * explain that connected wallet context does not equal transaction authorization; * explain that participation, leaderboard position or token ownership alone does not create a claimable reward. ## `cta.tsx` `cta.tsx` is the reusable final conversion block. Canonical final CTA: **Create what comes next.** Move from an idea to a structured creative project with SONIC AI Works. **Launch Studio →** Rules: * one dominant CTA; * dark-red brand surface is preferred for the homepage final CTA; * secondary links, when necessary, remain visually subordinate; * do not add wallet connection here unless the CTA is inside a transaction-specific page; * no fake urgency/countdowns. ## `footer.tsx` The default public footer remains dark red in both light and dark themes. Canonical intro: **SONIC AI WORKS** **Create what comes next.** AI creation, structured production, creator collaboration, and supported Solana-native participation in one connected platform. Recommended navigation: ``` PRODUCT Studio Projects Marketplace Pricing ECOSYSTEM Community Creators Challenges Tokenomics Governance RESOURCES Docs Developers Whitepaper Help Status COMPANY About Partners Careers Contact ``` Bottom row: ``` © 2026 SONIC AI Works Terms · Privacy · Cookies System theme ``` Do not add a Membership footer group or Membership CTA. ## `legals.tsx` `legals.tsx` provides reusable legal-navigation and disclosure primitives; it does not replace full Terms, Privacy or Cookie documents. Recommended API: ```ts type LegalLink = "terms" | "privacy" | "cookies"; type LegalsProps = { compact?: boolean; includeCopyright?: boolean; includeThemeControl?: boolean; }; ``` Rules: * legal links are always reachable from public pages; * checkout/wallet flows may include contextual terms/privacy disclosures without duplicating entire legal documents; * token, reward, market and governance disclaimers must accurately reflect MVP/production state; * avoid generic investment-return language; * legal copy should not imply wallet connection authorizes a transaction; * legal content must be versioned and linked to authoritative published documents. ## `app/not-found.tsx` / not-found surface The 404 experience stays on-brand but intentionally simple. Recommended content: **404** **This page could not be found.** The link may have changed, or the page may no longer be available. **Back Home** **Launch Studio →** Rules: * no wallet CTA; * no Tokenomics promotion; * no fabricated status message; * keep the page lightweight and fast; * preserve site header/footer only when they do not obscure recovery actions; * provide correct metadata/noindex behavior according to framework defaults. ## Responsive composition At `<= 767px`: * hero becomes one column; * product previews become focused single-panel views; * pricing stacks vertically; * FAQ becomes a single-column accordion; * footer groups collapse or stack cleanly; * partnership/integration logos wrap without shrinking below brand legibility; * CTAs maintain at least 44px touch targets; * avoid horizontal page overflow. ## Interaction-state contract Every interactive marketing primitive defines: ``` default hover focus pressed selected disabled loading error success ``` SONIC red indicates primary action, active state or selection. It should not be applied to every hover state. ## Production validation Before shipping changes to these components: ``` □ canonical waveform logo used □ new circular token artwork used where token art is needed □ no Membership surface added □ Governance only shown where relevant □ one H1 per page □ one primary CTA above fold □ Launch Studio label consistent □ no fake metrics □ no fake partner claims □ no fake wallet/network state □ no unverified reward state □ no excessive dark red □ 375px layout verified □ keyboard navigation verified □ focus-visible verified □ reduced motion verified □ theme behavior verified □ footer stays dark red □ metadata complete □ images optimized □ no avoidable layout shift ``` ## Implementation invariant ``` shared components + canonical copy + semantic theme tokens + verified product data + accessible interaction states + responsive reflow = production-consistent SONIC marketing UI ``` --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://sonic-ai-works.gitbook.io/sonic-networks-docs/documentation/developers/frontend-and-design-system/website-and-application-design-guide/marketing-component-contracts.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.