[Advanced]: Update TSC page banner image

[aceppaluni]

🧑‍🔬 Advanced Issue

Welcome! This is an Advanced Issue touching core website architecture.

It is designed for expert contributors who have demonstrated deep architectural understanding and a proven track record of high-quality contributions.

🐞 Problem Description

Currently our TSC page banner image does not follow our desired design.

With the new vote of the website redesign we would like to update this to reflect the design of our Homepage.

🛠️ Implementation Notes

Implement the same feature on the homepage into the TSC banner section.

The design should match the figma file speciation outlined here
https://www.figma.com/design/hZztcL7ukzpYLlIklBFzwP/Hiero-Website-Design-Daniel?node-id=1-3&t=3UYJ7D1bhd7NWafv-0

PUSH WORK TO websiteRedesign BRANCH

Markdown Specification:
https://github.com/hiero-ledger/hiero-website/blob/main/docs/design-specs.md

Blog & Content Workflow:

• Writing Blog Posts — covers the current posting flow, front matter format, and content conventions

Project Conventions:

• Components live in src/components/ — follow existing patterns for props, naming, and file structure
• Pages are under src/app/ using the Next.js App Router
• Content (blog posts, etc.) lives in content/
• Styling uses Tailwind CSS

🧠 Advanced Contributors — Prerequisites & Expectations

Caution

Advanced issues are the highest-risk work in this project. We will reject PRs that do not meet these standards.

🏁 Concrete Prerequisites

• Advanced Web Development: Proficient with React, Next.js, and TypeScript.
• Expertise: Deep architectural understanding of the website's component structure, routing, and build pipeline.
• Proven History: Successfully completed ≥ 10 intermediate issues in this repo.
• Consistency: ≥ 3–4 months of active, human-led contributions to this project.

Note

CI/CD Exception: For issues focused on GitHub Actions / Workflows, the repo-specific thresholds above may be waived if the contributor demonstrates advanced-level proficiency in CI/CD.

⚠️ AI Usage Policy

• Using AI to generate code for Advanced issues is strictly discouraged
• AI may be used to help explain file relationships, but cannot be the main source of research.
• Submitting AI-generated or unvalidated code is grounds for immediate closure

⏱️ Timeline & Workflow

• Typical time: ~1 month / ~50 hours.
• 🔴 Completing an advanced issue in 1–3 days is a red flag and will likely be rejected.
• Suggested: Post your proposed architectural approach as a comment and wait for explicit maintainer approval before writing any code.

🔬 Technical Domains

• Advanced React / Next.js (Server Components, App Router, dynamic routing, middleware)
• Component Architecture (design systems, reusable patterns, composition)
• Performance & Optimization (Core Web Vitals, image optimization, code splitting, caching)
• Accessibility (WCAG compliance, screen reader support, keyboard navigation)
• Build & Deployment (Next.js config, CI/CD, hosting/deployment integration)
• Testing (unit, integration, E2E, accessibility testing, visual regression)

🛡️ Quality & Review Standards

Advanced PRs must be "safe, maintainable, architecturally sound, and production-ready."

1. Architectural Fit: The solution must fit naturally into the existing website architecture.
2. Security & Correctness: Evaluate all logic for injection risks, XSS vulnerabilities, or state corruption issues.
3. Maintainability: Code must be short and clear enough for any other maintainer to debug without your assistance.
4. Backward Compatibility: Existing pages, routes, and components must not break. If a breaking change is required, it must be explicitly managed.
5. Comprehensive Testing: Must include unit and integration tests covering all new logic paths, edge cases, and failure modes. AI-generated tests based on AI-generated code are grounds for immediate rejection.

✅ PR Quality Checklist

Before opening your PR, the contributor must confirm:

• I have spent the majority of my time researching the problem and solution space extensively, including reviewing relevant code, documentation, and external resources.
• I understand the system-wide impact of these changes on affected modules and performance.
• The design fits with the current website's architectural approaches.
• I have tested my changes extensively across browsers and screen sizes.
• Every line of code is personally understood and explainable.

📚 Resources & Support

References:

• Next.js Documentation
• React Documentation
• Tailwind CSS Documentation
• Vitest Documentation
• Writing Blog Posts

🆘 Stuck?

• Community Calls
• Discord

[tannaya7]

Hi, Can I work on this issue?

[exploreriii]

Yes, please create this to the website redevelopment branch and stay in sync with that, not main :)

[tannaya7]

Sure , thankyou!

[tannaya7]

Hey, quick heads up before I dig into this - the Figma link in the issue (node-id=1-3) doesn't actually point to a TSC banner mockup. When I open it fresh, it lands on "Jump to our Hiero Repositories," which is a section further down the homepage, not a banner design.

I went through the whole file just to be sure - there's only one page in there, with 4 screenshots total (Issue Explorer, Jump to Open Issues, Community Calls, and the Repositories section), and none of them are named or laid out as a TSC banner. Closest thing style-wise is the "Issue Explorer" one, since it's a full-width banner with a page title + subtitle, but it's not TSC-specific.

Could you point me to the right frame/file for the TSC banner, @daniel or whoever put the spec together? Want to make sure I'm matching the actual intended design before I touch any code, especially since this is flagged as an advanced issue.

[aceppaluni]

Hi @tannaya7 Thank you for asking!

The listed figma file is intended to be reference as to what the banner image could potentially look like after updating. Ideally we would like to this to look a bit more advanced.

Examples of this can be found here Design 1 and here Design 2

Apologies for any confusion. I hope this helps provide a bit more guidance.

Please let us know if you have any more questions.

Thank you!!

[aceppaluni]

@tannaya7 Are you still working on this?

[tannaya7]

yes yess