Feat/improve website layout#409
Conversation
…sistency - Fix page <title> and meta description (removed placeholder text) - Add secondary "View on GitHub" CTA button with gap and flex-wrap - Increase hero padding (5rem desktop, 3rem mobile) for better rhythm - Add margin-top to buttons group so it breathes below the tagline - Remove stray `.container_lyt7` leaked CSS module class from custom.css - Add `scroll-behavior: smooth` to html element - Add :focus-visible outline for keyboard accessibility - Add --ifm-navbar-shadow CSS variable for light/dark mode - Add footer border-top to visually separate it from page content - Fix footer style from 'dark' to 'light' to match #f8fafc background - Fix navbar logo alt text from 'My Site Logo' to 'AgentCube Logo' - Reduce feature SVG size from 200px to 160px for better text balance - Increase features section padding from 2rem to 4rem - Add .featureCard wrapper with hover shadow and lift transition - Add aria-label to feature SVGs for screen reader accessibility - Add padding-top--md to feature card text area for internal spacing - Run prettier on all modified files for consistent formatting Signed-off-by: Vanshika <pahalvanshikaa@gmail.com>
- Replace default Docusaurus hero--primary with a custom branded hero
component implemented via CSS modules
- Define CSS variables for Volcano brand red and blue palette, hero
background, card backgrounds, borders, shadows, and navbar/footer
colors, covering both light and dark modes
- Audit existing theme overrides; preserve all variables still in use
to keep dark mode intact
- Restyle navbar with a thin bottom border, clean spacing, and
hover accent color using the brand palette
- Restyle footer with a top border, improved typography hierarchy,
letter-spaced section titles, and hover link accent color
- Add custom button classes (brand-primary, brand-secondary) with
rounded corners, transition, and hover shadow lift
- Replace undraw template illustration SVGs with original, minimal
inline vector icons inspired by Kubernetes / cloud infrastructure:
- Low-Latency Scheduling: clock/speed icon
- Stateful Lifecycle: isometric cube / layers icon
- Efficient Resource Utilization: cluster / nodes icon
- Redesign feature cards with rounded corners, light border, subtle
box-shadow, equal flex heights, and 220ms cubic-bezier hover lift
- Icon container sized at 96px, colored with brand blue accent
- Fix hero title color variable in dark mode so the AgentCube heading
is fully readable against the dark background
- Run prettier on all modified files
Signed-off-by: Vanshika <pahalvanshikaa@gmail.com>
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the AgentCube Docusaurus documentation site by formatting configuration files, replacing generic SVGs with custom inline SVG icons, updating the homepage layout, and introducing comprehensive CSS refinements for light and dark modes. The review feedback highlights several key improvement opportunities: updating the placeholder production URL, correcting mismatched primary color variables in the dark theme, removing a global border-radius override on :focus-visible, leveraging Infima's built-in CSS variables instead of using !important overrides, and resolving a redundant browser tab title on the homepage.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
There was a problem hiding this comment.
Pull request overview
This PR updates the AgentCube Docusaurus documentation site homepage and global theme styling to better match Volcano branding, improve responsiveness, and refine navigation/footer presentation.
Changes:
- Redesigned the homepage hero section (layout, CTA buttons, SEO title/description).
- Replaced placeholder feature illustrations with custom inline SVG feature icons and updated feature-card styling.
- Introduced new global design tokens and navbar/footer/button styling in the site’s custom CSS (including dark-mode adjustments).
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| docs/agentcube/src/pages/index.tsx | Updates homepage hero markup/CTAs and replaces placeholder SEO metadata. |
| docs/agentcube/src/pages/index.module.css | Replaces default hero styling with branded hero section styles. |
| docs/agentcube/src/css/custom.css | Adds design tokens and global styling for navbar/footer/buttons, plus dark-mode refinements. |
| docs/agentcube/src/components/HomepageFeatures/styles.module.css | Introduces redesigned feature section/card layout and styling. |
| docs/agentcube/src/components/HomepageFeatures/index.tsx | Switches from imported SVGs to inline SVG icons and updates feature rendering. |
| docs/agentcube/docusaurus.config.ts | Updates site config formatting and adjusts branding/footer theme settings. |
| { | ||
| label: 'Discussions', | ||
| href: 'https://github.com/volcano-sh/agentcube', | ||
| label: "Discussions", | ||
| href: "https://github.com/volcano-sh/agentcube", | ||
| }, |
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #409 +/- ##
===========================================
+ Coverage 47.57% 58.57% +11.00%
===========================================
Files 30 37 +7
Lines 2819 3491 +672
===========================================
+ Hits 1341 2045 +704
+ Misses 1338 1237 -101
- Partials 140 209 +69
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
Signed-off-by: Vanshika <pahalvanshikaa@gmail.com>
- Replace aria-hidden="true" with role="img" + aria-label on all three feature section SVG icons so screen readers can announce their purpose - Fix placeholder production URL to https://agentcube.volcano.sh for correct canonical links and sitemap generation Signed-off-by: Vanshika <pahalvanshikaa@gmail.com>
What type of PR is this?
What this PR does / why we need it
This PR enhances the AgentCube documentation website by improving its layout, accessibility, responsiveness, and overall user experience while redesigning the homepage to align with the Volcano ecosystem's visual language.
Homepage Improvements
:focus-visible) for improved accessibility.Volcano Ecosystem Redesign
Replaced the default Docusaurus hero styling with a custom branded hero section.
Introduced Volcano-inspired design tokens using:
Added custom branded primary and secondary button variants.
Refined navbar and footer styling with subtle borders and shadows for a cleaner appearance.
Feature Section Redesign
Replaced default placeholder illustrations with custom Kubernetes-inspired inline SVG icons representing:
Redesigned feature cards with:
Accessibility Improvements
aria-labels for feature icons.Code Cleanup
Which issue(s) this PR fixes
Special notes for your reviewer
Does this PR introduce a user-facing change?