fix svg compatibility problem

[zjy365]

🤖 Generated by Copilot at de94616

Summary

🎨🛠️🚀

This pull request updates the website's appearance and performance by changing some of the header images and styles. It replaces some SVG and CSS backgrounds with PNG images, and adjusts the layout and responsiveness of the Banner component.

We're changing the header image, no more SVG
We're using PNG, for better speed and quality
We're tweaking the style sheet, to make it look neat
We're rocking the self-hosting page, with a new design and theme

Walkthrough

• Replace SVG images with PNG images for header backgrounds on all pages (link, link, link, link)
• Remove the import of HeaderSvg component from Header/index.tsx (link)
• Use img elements with require function to load PNG images from static folder in HomeHeader and Header components (link, link)
• Use a different PNG image for the header background on the self-hosting page in self-hosting/index.tsx (link)
• Adjust the style and layout of the banner box on the home page (link, link)
  • Remove the line-height property from the .sealos-banner-box class in Banner/index.scss (link)
  • Add a media query to reduce the font size and weight of the .sealos-banner-box class on smaller screens in Banner/index.scss (link)
• Set the width and position of the header image on the self-hosting page (link)
  • Add a style rule for the .header-img class in self-hosting/index.scss (link)

[sealos-ci-robot]

🤖 Generated by lychee action

Summary

Status	Count
🔍 Total	981
✅ Successful	379
⏳ Timeouts	0
🔀 Redirected	0
👻 Excluded	601
❓ Unknown	0
🚫 Errors	0

Full action output

Full Github Actions output

[sweep-ai]

Apply Sweep Rules to your PR?

• Apply: All new business logic should have corresponding unit tests.
• Apply: Refactor large functions to be more modular.

[sealos-ci-robot]

📘 Preview documentation website

👀 Visit Preview