96 lines
4.2 KiB
Plaintext
96 lines
4.2 KiB
Plaintext
|
---
|
||
|
|
import MainLayout from "../layouts/MainLayout.astro";
|
||
|
|
import MorphingText from "../components/aceternity/MorphingText.astro";
|
||
|
|
|
||
|
|
// 导航数据
|
||
|
|
---
|
||
|
|
|
||
|
|
<MainLayout title="首页 - 河北游礼">
|
||
|
|
<!-- 主页文字特效区域 -->
|
||
|
|
<section class="hero-section relative w-full h-screen flex items-center justify-center overflow-hidden">
|
||
|
|
<!-- 背景效果 -->
|
||
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary-50 via-white to-secondary-100 dark:from-dark-bg dark:via-dark-surface dark:to-dark-primary-100"></div>
|
||
|
|
|
||
|
|
<!-- 背景装饰 -->
|
||
|
|
<div class="absolute inset-0 opacity-10 bg-grid-pattern"></div>
|
||
|
|
|
||
|
|
<!-- 径向渐变叠加 -->
|
||
|
|
<div class="absolute inset-0 bg-radial-gradient opacity-80"></div>
|
||
|
|
|
||
|
|
<!-- 文字特效容器 -->
|
||
|
|
<div class="relative z-10 text-center px-4 w-full max-w-7xl mx-auto">
|
||
|
|
<div class="text-size-boost">
|
||
|
|
<MorphingText
|
||
|
|
phrases={["这么近", "那么美", "周末来河北"]}
|
||
|
|
className="mb-8 text-primary-800 dark:text-primary-300 font-extrabold"
|
||
|
|
textSize="text-8xl sm:text-9xl md:text-[10rem] lg:text-[12rem]"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- 页面指示器 -->
|
||
|
|
<div class="absolute bottom-6 left-1/2 transform -translate-x-1/2 flex space-x-4">
|
||
|
|
<a href="#highlights" class="text-primary-600 dark:text-primary-400 animate-bounce">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</MainLayout>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
/* 背景网格图案 */
|
||
|
|
.bg-grid-pattern {
|
||
|
|
background-image:
|
||
|
|
linear-gradient(to right, rgba(180, 83, 9, 0.05) 1px, transparent 1px),
|
||
|
|
linear-gradient(to bottom, rgba(180, 83, 9, 0.05) 1px, transparent 1px);
|
||
|
|
background-size: 40px 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 径向渐变 */
|
||
|
|
.bg-radial-gradient {
|
||
|
|
background: radial-gradient(circle at center, transparent 0%, var(--color-primary-50, rgba(255, 251, 235, 0.8)) 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 特殊样式来增强文字大小 */
|
||
|
|
.text-size-boost :global(.text-span-1),
|
||
|
|
.text-size-boost :global(.text-span-2) {
|
||
|
|
font-size: clamp(4rem, 15vw, 14rem) !important;
|
||
|
|
line-height: 1.1 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
.bg-radial-gradient {
|
||
|
|
background: radial-gradient(circle at center, rgba(69, 51, 25, 0.5) 0%, var(--color-dark-bg, rgba(26, 22, 19, 0.8)) 70%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 背景渐变动画 */
|
||
|
|
@keyframes gradient-shift {
|
||
|
|
0% { background-position: 0% 50%; }
|
||
|
|
50% { background-position: 100% 50%; }
|
||
|
|
100% { background-position: 0% 50%; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-section::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
background: linear-gradient(120deg,
|
||
|
|
var(--color-primary-600, rgba(217, 119, 6, 0.05)),
|
||
|
|
var(--color-secondary-600, rgba(182, 125, 73, 0.05)),
|
||
|
|
var(--color-accent-600, rgba(175, 63, 63, 0.05)));
|
||
|
|
background-size: 200% 200%;
|
||
|
|
animation: gradient-shift 15s ease infinite;
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 波浪底部装饰 */
|
||
|
|
.bg-wave-pattern {
|
||
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' opacity='.25' fill='%23f59e0b'%3E%3C/path%3E%3Cpath d='M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z' opacity='.5' fill='%23d97706'%3E%3C/path%3E%3Cpath d='M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z' fill='%23b45309' opacity='.25'%3E%3C/path%3E%3C/svg%3E");
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center top;
|
||
|
|
}
|
||
|
|
</style>
|