Skip to content

Commit 839ad27

Browse files
xlgzsgfxlgzsgf
committed
refactor: ♻️ perfect Hero self-adaption
1 parent df43d0b commit 839ad27

File tree

1 file changed

+133
-108
lines changed

1 file changed

+133
-108
lines changed

‎src/components/home/Hero.astro

Lines changed: 133 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,148 @@
11
---
2-
import { Picture } from "astro:assets";
2+
import {Picture} from "astro:assets";
33
import nextIcon from "../../assets/icons/next.svg";
44
import startIcon from "../../assets/icons/start.svg";
55
import Container from "../Container.astro";
6-
76
---
87
<Container>
9-
<main>
10-
<div class="w-full aspect-[2/1] mx-auto text-center flex flex-col justify-center gap-5 items-center overflow-hidden relative top-0" >
11-
<div class="hero-background"></div>
12-
<a href="https://registry.serverless-devs.com/" class="bg-white bg-opacity-20 opacity-80 border-[#9295a5] border-[0.8px] px-3 py-2 w-fit rounded-3xl text-center flex flex-row items-center gap-3 z-10">
13-
<div class="text-center text-white rounded-3xl text-xs px-5 py-2" style="background:linear-gradient(134.09deg, rgba(38, 44, 244, 1) 0%, rgba(113, 64, 255, 1) 100%)">HOT !</div>
14-
<p class="text-white text-xs">stable-diffusion,comfyui,cosyvoice,ollama 等应用模版上架</p>
15-
<Picture
16-
src={nextIcon}
17-
alt="nextIcon"
18-
loading="eager"
19-
format="avif"
20-
/>
21-
</a>
22-
<h1
23-
class="text-4xl lg:text-5xl xl:text-6xl text-white text-center z-10">
24-
一站式 AI WEB 函数<br>应用开发部署平台
25-
</h1>
26-
<p class="text-lg font-thin mt-4 text-white text-center z-10">
27-
Serverless + AI 应用开发的精彩组合， 帮助 AI 应用开发者实现从idea 到商业落地的一站式服务，是众多企业的选择。
28-
</p>
29-
<div class="mt-6 flex flex-col sm:flex-row gap-3 text-center text-sm z-10">
30-
<a href="/docs/getting-started" class="bg-white px-6 py-3 flex flex-row items-center gap-2 rounded-3xl">
31-
<Picture
32-
src={startIcon}
33-
alt="startIcon"
34-
loading="eager"
35-
format="avif"
36-
/>
37-
38-
快速开始
39-
</a>
40-
<a href="https://registry.serverless-devs.com/" class="bg-none border-[#b3b6c1] border-[0.8px] text-white px-6 py-3 flex flex-row items-center gap-2 rounded-3xl">
41-
访问 Registry
42-
</a>
43-
</div>
44-
</div>
45-
</main>
8+
<main>
9+
<div class="w-full aspect-[2/1] mx-auto text-center flex flex-col justify-center gap-1 md:gap-5 items-center overflow-hidden relative top-0">
10+
<div class="hero-background"></div>
11+
12+
<!-- 热门模板 -->
13+
<a href="https://registry.serverless-devs.com/"
14+
class="hidden md:flex bg-white bg-opacity-20 opacity-80 border-[#9295a5] border-[0.8px] px-3 py-2 w-fit rounded-3xl text-center flex-row items-center gap-3 z-10">
15+
<div class="text-center text-white rounded-3xl text-xs px-5 py-2"
16+
style="background:linear-gradient(134.09deg, rgba(38, 44, 244, 1) 0%, rgba(113, 64, 255, 1) 100%)">
17+
HOT !
18+
</div>
19+
<p class="text-white text-xs">stable-diffusion,comfyui,cosyvoice,ollama 等应用模版上架</p>
20+
<Picture
21+
src={nextIcon}
22+
alt="nextIcon"
23+
loading="eager"
24+
format="avif"
25+
/>
26+
</a>
27+
28+
<!-- 大标题 -->
29+
<h1
30+
class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl text-white text-center z-10">
31+
一站式 AI WEB 函数<br>应用开发部署平台
32+
</h1>
33+
34+
<!-- 详细描述 -->
35+
<p class="text-sm md:text-lg max-w-[85%] font-thin mt-4 text-white text-center z-10">
36+
Serverless + AI 应用开发的精彩组合， 帮助 AI 应用开发者实现从idea 到商业落地的一站式服务，是众多企业的选择。
37+
</p>
38+
39+
<!-- 操作栏 -->
40+
<div class="mt-6 flex flex-row gap-3 text-center text-sm z-10">
41+
<a href="/docs/getting-started" class="bg-white px-6 py-3 flex flex-row items-center gap-2 rounded-3xl">
42+
<Picture
43+
src={startIcon}
44+
alt="startIcon"
45+
loading="eager"
46+
format="avif"
47+
/>
48+
49+
快速开始
50+
</a>
51+
<a href="https://registry.serverless-devs.com/"
52+
class="bg-none border-[#b3b6c1] border-[0.8px] text-white px-6 py-3 flex flex-row items-center gap-2 rounded-3xl">
53+
访问 Registry
54+
</a>
55+
</div>
56+
</div>
57+
</main>
4658
</Container>
4759

4860

4961
<script>
50-
import { BreathingColor } from '@b-design/color';
51-
52-
let animateBackground,bdColor;
53-
const config =
54-
{
55-
"dpr":0.5,
56-
"background":"6483ff",
57-
"palette":[
58-
"ffffff",
59-
"6218FF",
60-
"3400FA",
61-
"9968FF",
62-
"1A79FF"
63-
],
64-
"offsets":[1.02,1.5,1.05,-0.95,-1.75,0.27,0.99,-1.5,0.95,0.54],
65-
"twist":[2,-0.5,0.24,5.7,0.68,0.15,1.5,1,0.07,0.04],
66-
"symbolColor":"#6483FF"
67-
}
68-
69-
document.addEventListener('DOMContentLoaded', () => {
70-
animateBackground = document.querySelector('.hero-background');
71-
72-
bdColor = new BreathingColor({
73-
config: config,
74-
container: animateBackground,
75-
initWidth: animateBackground.getBoundingClientRect().width,
76-
initHeight: animateBackground.getBoundingClientRect().height
77-
});
78-
79-
bdColor.init();
80-
81-
const animate = () => {
82-
bdColor.update()
83-
requestAnimationFrame(animate);
84-
}
85-
animate();
86-
87-
//该部分离开屏幕外后暂停，以优化性能体验
88-
const observer = new IntersectionObserver(entries => {
89-
entries.forEach(entry => {
90-
if (entry.isIntersecting) {
91-
bdColor.resume();
92-
} else {
93-
bdColor.pause();
94-
}
95-
});
96-
});
97-
observer.observe(animateBackground);
98-
})
99-
100-
101-
window.onresize = () => {
102-
bdColor.setSize(animateBackground.getBoundingClientRect().width,animateBackground.getBoundingClientRect().height)
103-
}
62+
import {BreathingColor} from '@b-design/color';
63+
64+
let animateBackground, bdColor;
65+
const config =
66+
{
67+
"dpr": 0.5,
68+
"background": "6483ff",
69+
"palette": [
70+
"ffffff",
71+
"6218FF",
72+
"3400FA",
73+
"9968FF",
74+
"1A79FF"
75+
],
76+
"offsets": [1.02, 1.5, 1.05, -0.95, -1.75, 0.27, 0.99, -1.5, 0.95, 0.54],
77+
"twist": [2, -0.5, 0.24, 5.7, 0.68, 0.15, 1.5, 1, 0.07, 0.04],
78+
"symbolColor": "#6483FF"
79+
}
80+
81+
document.addEventListener('DOMContentLoaded', () => {
82+
animateBackground = document.querySelector('.hero-background');
83+
84+
bdColor = new BreathingColor({
85+
config: config,
86+
container: animateBackground,
87+
initWidth: animateBackground.getBoundingClientRect().width,
88+
initHeight: animateBackground.getBoundingClientRect().height
89+
});
90+
91+
bdColor.init();
92+
93+
const animate = () => {
94+
bdColor.update()
95+
requestAnimationFrame(animate);
96+
}
97+
animate();
98+
99+
//该部分离开屏幕外后暂停，以优化性能体验
100+
const observer = new IntersectionObserver(entries => {
101+
entries.forEach(entry => {
102+
if (entry.isIntersecting) {
103+
bdColor.resume();
104+
} else {
105+
bdColor.pause();
106+
}
107+
});
108+
});
109+
observer.observe(animateBackground);
110+
})
111+
112+
function debounce(func, wait) {
113+
let timeout;
114+
return function (...args) {
115+
clearTimeout(timeout);
116+
timeout = setTimeout(() => func.apply(this, args), wait);
117+
};
118+
}
119+
120+
const resetBgColorSize = debounce(() => {
121+
bdColor.resume();
122+
bdColor.setSize(animateBackground.getBoundingClientRect().width, animateBackground.getBoundingClientRect().height)
123+
}, 200)
124+
125+
126+
window.onresize = () => {
127+
bdColor.pause();
128+
resetBgColorSize();
129+
};
104130
</script>
105131

106132

107-
108133
<style>
109-
.hero-background{
110-
position: absolute;
111-
z-index:-10000;
112-
top: 0;
113-
left: 50%;
114-
transform: translateX(-50%);
115-
width: 100%;
116-
border-radius: 30px;
117-
overflow: hidden;
118-
height: 100%;
119-
120-
background: linear-gradient(180deg, rgba(18, 19, 22, 1) 0%, rgba(18, 19, 22, 0) 100%),
121-
linear-gradient(135deg, rgba(26, 121, 255, 1) 0%, rgba(155, 106, 255, 1) 100%);
122-
}
134+
.hero-background {
135+
position: absolute;
136+
z-index: -10000;
137+
top: 0;
138+
left: 50%;
139+
transform: translateX(-50%);
140+
width: 100%;
141+
border-radius: 30px;
142+
overflow: hidden;
143+
height: 100%;
144+
145+
background: linear-gradient(180deg, rgba(18, 19, 22, 1) 0%, rgba(18, 19, 22, 0) 100%),
146+
linear-gradient(135deg, rgba(26, 121, 255, 1) 0%, rgba(155, 106, 255, 1) 100%);
147+
}
123148
</style>

0 commit comments

Comments
 (0)