487 lines
28 KiB
Vue
487 lines
28 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { useUserStore } from '../stores/user'
|
||
import BaseButton from '../components/ui/BaseButton.vue'
|
||
import LoginDialog from '../components/ui/LoginDialog.vue'
|
||
import {
|
||
SparklesIcon,
|
||
ArrowRightOnRectangleIcon,
|
||
MicrophoneIcon,
|
||
} from '@heroicons/vue/24/outline'
|
||
|
||
const { locale } = useI18n()
|
||
const router = useRouter()
|
||
const userStore = useUserStore()
|
||
|
||
// ========== 导航栏状态 ==========
|
||
const showUserMenu = ref(false)
|
||
|
||
function switchLocale(lang: 'en' | 'zh') {
|
||
locale.value = lang
|
||
localStorage.setItem('locale', lang)
|
||
}
|
||
|
||
// ========== 登录对话框状态 ==========
|
||
const showLoginDialog = ref(false)
|
||
|
||
// ========== 创作入口 ==========
|
||
// 旧的创作变量已移除，现在只负责跳转
|
||
function openCreateModal() {
|
||
if (!userStore.user) {
|
||
showLoginDialog.value = true
|
||
return
|
||
}
|
||
// 跳转到后台创作
|
||
router.push({ path: '/my-stories', query: { openCreate: 'true' } })
|
||
}
|
||
|
||
function openVoiceStudio() {
|
||
if (!userStore.user) {
|
||
showLoginDialog.value = true
|
||
return
|
||
}
|
||
router.push('/voice-studio')
|
||
}
|
||
|
||
function scrollToFeatures() {
|
||
document.getElementById('features')?.scrollIntoView({ behavior: 'smooth' })
|
||
}
|
||
|
||
// ========== 统计数据 (静态模拟) ==========
|
||
// const storiesCount = 10000
|
||
// const familiesCount = 5000
|
||
// const satisfactionCount = 99
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<div class="landing-page min-h-screen flex flex-col">
|
||
<!-- ========== 导航栏 ========== -->
|
||
<nav class="sticky top-0 z-50 bg-[#FDFBF7]/90 backdrop-blur-md border-b border-stone-200">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex items-center justify-between h-16">
|
||
<router-link to="/" class="text-2xl font-bold tracking-tight text-amber-600 flex items-center gap-2">
|
||
<SparklesIcon class="w-6 h-6" />
|
||
<span>梦语织机</span>
|
||
</router-link>
|
||
|
||
<div class="hidden md:flex space-x-8">
|
||
<a href="#features" class="text-stone-600 hover:text-amber-600 font-medium transition-colors">功能</a>
|
||
<a href="#how-it-works" class="text-stone-600 hover:text-amber-600 font-medium transition-colors">使用方法</a>
|
||
<a href="#faq" class="text-stone-600 hover:text-amber-600 font-medium transition-colors">常见问题</a>
|
||
</div>
|
||
|
||
<div class="flex items-center space-x-4">
|
||
<div class="flex items-center bg-white rounded-lg border border-stone-200 p-1">
|
||
<button
|
||
class="px-2 py-1 text-xs font-medium rounded-md transition-colors"
|
||
:class="locale === 'en' ? 'bg-stone-100 text-stone-900' : 'text-stone-500 hover:text-stone-900'"
|
||
@click="switchLocale('en')"
|
||
>
|
||
EN
|
||
</button>
|
||
<button
|
||
class="px-2 py-1 text-xs font-medium rounded-md transition-colors"
|
||
:class="locale === 'zh' ? 'bg-amber-100 text-amber-900' : 'text-stone-500 hover:text-stone-900'"
|
||
@click="switchLocale('zh')"
|
||
>
|
||
中文
|
||
</button>
|
||
</div>
|
||
|
||
<template v-if="userStore.user">
|
||
<div class="relative">
|
||
<button class="flex items-center space-x-2 text-stone-700 hover:text-amber-600 transition-colors" @click="showUserMenu = !showUserMenu">
|
||
<img
|
||
v-if="userStore.user.avatar_url"
|
||
:src="userStore.user.avatar_url"
|
||
:alt="userStore.user.name"
|
||
class="w-8 h-8 rounded-full border border-stone-200"
|
||
/>
|
||
<div v-else class="w-8 h-8 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center font-bold">
|
||
{{ userStore.user.name.charAt(0) }}
|
||
</div>
|
||
<span class="font-medium hidden sm:inline">{{ userStore.user.name }}</span>
|
||
</button>
|
||
|
||
<div v-if="showUserMenu" class="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-lg border border-stone-100 py-1 origin-top-right transform transition-all z-50">
|
||
<div class="px-4 py-2 border-b border-stone-50">
|
||
<p class="text-sm text-stone-500">已登录为</p>
|
||
<p class="text-sm font-medium text-stone-900 truncate">{{ userStore.user.name }}</p>
|
||
</div>
|
||
<router-link to="/my-stories" class="block px-4 py-2 text-sm text-stone-700 hover:bg-stone-50">我的故事</router-link>
|
||
<router-link to="/profiles" class="block px-4 py-2 text-sm text-stone-700 hover:bg-stone-50">孩子档案</router-link>
|
||
<button @click="userStore.logout(); showUserMenu = false" class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-stone-50 flex items-center gap-2">
|
||
<ArrowRightOnRectangleIcon class="w-4 h-4" />
|
||
退出登录
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<BaseButton size="sm" @click="showLoginDialog = true">登录 / 注册</BaseButton>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<div v-if="showUserMenu" class="fixed inset-0 z-40" @click="showUserMenu = false"></div>
|
||
|
||
<!-- ========== Hero Section ========== -->
|
||
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 lg:py-32">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
<div>
|
||
<div class="inline-flex items-center gap-2 px-3 py-1 bg-amber-50 text-amber-700 text-sm font-medium rounded-full mb-6">
|
||
<span>✨</span> 专为 3-8 岁孩子设计的魔法故事机
|
||
</div>
|
||
<h1 class="text-5xl md:text-6xl font-bold text-stone-900 mb-6 leading-tight">
|
||
为孩子编织
|
||
<span class="text-amber-600">温暖的童年记忆</span>
|
||
</h1>
|
||
<p class="text-xl text-stone-600 mb-8 leading-relaxed">
|
||
每一个孩子都是天生的梦想家。我们用 AI 科技，将天马行空的想象编织成独一无二的有声绘本，陪伴孩子快乐成长。
|
||
</p>
|
||
<div class="flex flex-col sm:flex-row gap-4">
|
||
<BaseButton size="lg" @click="openCreateModal" class="shadow-xl shadow-amber-200/50">
|
||
<SparklesIcon class="h-5 w-5 mr-2" />
|
||
开始创作故事
|
||
</BaseButton>
|
||
<BaseButton size="lg" variant="secondary" @click="openVoiceStudio">
|
||
<MicrophoneIcon class="h-5 w-5 mr-2" />
|
||
进入语音共创
|
||
</BaseButton>
|
||
<button @click="scrollToFeatures" class="px-6 py-3 rounded-xl font-semibold text-stone-600 bg-white border border-stone-200 hover:border-amber-400 hover:text-amber-700 transition-all shadow-sm">
|
||
了解更多功能
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Trust Indicators -->
|
||
<div class="mt-12 flex items-center gap-8 text-stone-500">
|
||
<div class="flex -space-x-2">
|
||
<div class="w-8 h-8 rounded-full bg-stone-200 border-2 border-white"></div>
|
||
<div class="w-8 h-8 rounded-full bg-stone-300 border-2 border-white"></div>
|
||
<div class="w-8 h-8 rounded-full bg-stone-400 border-2 border-white"></div>
|
||
<div class="w-8 h-8 rounded-full bg-stone-100 border-2 border-white flex items-center justify-center text-xs font-bold">+2k</div>
|
||
</div>
|
||
<div class="text-sm">
|
||
已有 <span class="font-bold text-stone-800">5,000+</span> 个家庭正在使用
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hero Visual -->
|
||
<div class="relative">
|
||
<!-- 背景装饰圆 -->
|
||
<div class="absolute top-0 right-0 w-72 h-72 bg-amber-100 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob"></div>
|
||
<div class="absolute bottom-0 left-0 w-72 h-72 bg-orange-100 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob animation-delay-2000"></div>
|
||
|
||
<!-- Preview Card -->
|
||
<div class="relative bg-white p-6 rounded-2xl shadow-xl transform rotate-1 hover:rotate-0 transition-transform duration-500 border border-stone-100">
|
||
<div class="aspect-[4/3] bg-stone-100 rounded-xl mb-4 overflow-hidden relative group">
|
||
<!-- Placeholder Image -->
|
||
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1618331835717-801e976710b2?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80')] bg-cover bg-center opacity-80 group-hover:scale-105 transition-transform duration-700"></div>
|
||
<div class="absolute bottom-4 right-4 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-bold text-stone-800 shadow-sm">
|
||
绘本插画
|
||
</div>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-stone-900 mb-2">小狐狸的第一次探险</h3>
|
||
<p class="text-stone-500 text-sm leading-relaxed mb-4">
|
||
这是一个关于勇气和友谊的故事。小狐狸第一次离开家，在森林里遇到了需要帮助的小松鼠...
|
||
</p>
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex gap-2">
|
||
<span class="px-2 py-1 bg-amber-50 text-amber-700 text-xs font-bold rounded-lg">勇气</span>
|
||
<span class="px-2 py-1 bg-green-50 text-green-700 text-xs font-bold rounded-lg">友谊</span>
|
||
</div>
|
||
<div class="w-8 h-8 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center">
|
||
<SparklesIcon class="w-4 h-4" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ========== Features Section ========== -->
|
||
<section id="features" class="py-24 bg-white scroll-mt-16">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl font-bold text-stone-900 mb-4">为什么选择梦语织机？</h2>
|
||
<p class="text-lg text-stone-600 max-w-2xl mx-auto">我们不仅仅是在生成故事，更是在为孩子创造一个安全、温暖、富有教育意义的成长空间。</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
<div class="p-8 rounded-2xl bg-[#FDFBF7] border border-stone-100 hover:shadow-lg transition-shadow">
|
||
<div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center mb-6 text-2xl">🎨</div>
|
||
<h3 class="text-xl font-bold text-stone-900 mb-3">AI 绘本创作</h3>
|
||
<p class="text-stone-600">根据故事内容自动生成精美插画，让文字活起来，培养孩子的艺术审美。</p>
|
||
</div>
|
||
<div class="p-8 rounded-2xl bg-[#FDFBF7] border border-stone-100 hover:shadow-lg transition-shadow">
|
||
<div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center mb-6 text-2xl">🌱</div>
|
||
<h3 class="text-xl font-bold text-stone-900 mb-3">个性化成长档案</h3>
|
||
<p class="text-stone-600">为每个孩子定制专属的主角人设，将性格培养和习惯养成融入故事之中。</p>
|
||
</div>
|
||
<div class="p-8 rounded-2xl bg-[#FDFBF7] border border-stone-100 hover:shadow-lg transition-shadow">
|
||
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mb-6 text-2xl">🎙️</div>
|
||
<h3 class="text-xl font-bold text-stone-900 mb-3">温暖语音陪伴</h3>
|
||
<p class="text-stone-600">像爸爸妈妈一样的温柔讲述，无论何时何地，都能给孩子最长情的陪伴。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ========== How It Works Section ========== -->
|
||
<section id="how-it-works" class="py-24 bg-[#FDFBF7] scroll-mt-16 relative overflow-hidden">
|
||
<!-- Background decoration -->
|
||
<div class="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-stone-200 to-transparent"></div>
|
||
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl font-bold text-stone-900 mb-4">只需三步，开启奇妙旅程</h2>
|
||
<p class="text-lg text-stone-600">零门槛操作，让创意的火花瞬间变成精彩的故事。</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 relative">
|
||
<!-- Connector Line (Desktop) -->
|
||
<div class="hidden md:block absolute top-12 left-[16%] right-[16%] h-0.5 bg-stone-200 -z-10"></div>
|
||
|
||
<!-- Step 1 -->
|
||
<div class="text-center group">
|
||
<div class="w-24 h-24 mx-auto bg-white border border-stone-200 rounded-full flex items-center justify-center mb-6 shadow-sm group-hover:scale-110 transition-transform duration-300 relative z-10">
|
||
<span class="text-4xl">📝</span>
|
||
<div class="absolute -top-2 -right-2 w-8 h-8 bg-amber-500 text-white rounded-full flex items-center justify-center font-bold border-4 border-[#FDFBF7]">1</div>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-stone-900 mb-2">建立档案</h3>
|
||
<p class="text-stone-600">输入孩子的名字、年龄和兴趣，让故事里的主角就是他自己。</p>
|
||
</div>
|
||
|
||
<!-- Step 2 -->
|
||
<div class="text-center group">
|
||
<div class="w-24 h-24 mx-auto bg-white border border-stone-200 rounded-full flex items-center justify-center mb-6 shadow-sm group-hover:scale-110 transition-transform duration-300 relative z-10">
|
||
<span class="text-4xl">✨</span>
|
||
<div class="absolute -top-2 -right-2 w-8 h-8 bg-amber-500 text-white rounded-full flex items-center justify-center font-bold border-4 border-[#FDFBF7]">2</div>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-stone-900 mb-2">输入灵感</h3>
|
||
<p class="text-stone-600">"想做一个关于勇敢的小恐龙的故事"，一句话告诉 AI 你的想法。</p>
|
||
</div>
|
||
|
||
<!-- Step 3 -->
|
||
<div class="text-center group">
|
||
<div class="w-24 h-24 mx-auto bg-white border border-stone-200 rounded-full flex items-center justify-center mb-6 shadow-sm group-hover:scale-110 transition-transform duration-300 relative z-10">
|
||
<span class="text-4xl">📖</span>
|
||
<div class="absolute -top-2 -right-2 w-8 h-8 bg-amber-500 text-white rounded-full flex items-center justify-center font-bold border-4 border-[#FDFBF7]">3</div>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-stone-900 mb-2">生成绘本</h3>
|
||
<p class="text-stone-600">稍等片刻，一个图文并茂、配有语音的专属绘本就诞生了。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ========== Testimonials Section (家长评价) ========== -->
|
||
<section id="testimonials" class="py-24 bg-white scroll-mt-16">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl font-bold text-stone-900 mb-4">听听家长们怎么说</h2>
|
||
<p class="text-lg text-stone-600">超过 5000 个家庭正在使用梦语织机陪伴孩子成长</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
<!-- Review 1 -->
|
||
<div class="p-8 bg-[#FDFBF7] rounded-3xl border border-stone-100 relative">
|
||
<div class="absolute -top-4 left-8 text-6xl text-amber-200">"</div>
|
||
<p class="text-stone-700 italic mb-6 relative z-10">
|
||
自从有了梦语织机，每天晚上的睡前时光都成了我和女儿最期待的时刻。她最喜欢把自己变成故事里的魔法公主，看到她眼里闪着光，我也觉得好幸福。
|
||
</p>
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center text-xl">👩</div>
|
||
<div>
|
||
<div class="font-bold text-stone-900">张雨涵妈妈</div>
|
||
<div class="text-xs text-stone-500">5岁女孩的母亲</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Review 2 -->
|
||
<div class="p-8 bg-[#FDFBF7] rounded-3xl border border-stone-100 relative">
|
||
<div class="absolute -top-4 left-8 text-6xl text-amber-200">"</div>
|
||
<p class="text-stone-700 italic mb-6 relative z-10">
|
||
工作太忙，以前总是没时间给儿子编故事。现在我只需要输入一个想法，AI 就能帮我生成一个完整又富有教育意义的故事，而且声音特别温柔，简直是哄睡神器！
|
||
</p>
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-xl">👨</div>
|
||
<div>
|
||
<div class="font-bold text-stone-900">李强爸爸</div>
|
||
<div class="text-xs text-stone-500">4岁男孩的父亲</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Review 3 -->
|
||
<div class="p-8 bg-[#FDFBF7] rounded-3xl border border-stone-100 relative">
|
||
<div class="absolute -top-4 left-8 text-6xl text-amber-200">"</div>
|
||
<p class="text-stone-700 italic mb-6 relative z-10">
|
||
作为幼儿园老师，我经常用它来生成针对性的教育故事。比如班里有小朋友不爱刷牙，我就做了一个《牙齿王国的保卫战》，孩子们特别吃这一套！效果满分。
|
||
</p>
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-xl">🧑🏫</div>
|
||
<div>
|
||
<div class="font-bold text-stone-900">王老师</div>
|
||
<div class="text-xs text-stone-500">资深幼教</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ========== Story Gallery (精选绘本展) ========== -->
|
||
<section id="gallery" class="py-24 bg-[#FDFBF7] relative overflow-hidden">
|
||
<!-- 装饰背景 -->
|
||
<div class="absolute top-0 inset-x-0 h-px bg-stone-200"></div>
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||
<div class="flex flex-col md:flex-row items-end justify-between mb-12 gap-6">
|
||
<div>
|
||
<h2 class="text-3xl font-bold text-stone-900 mb-2">探索无限可能</h2>
|
||
<p class="text-stone-600">从奇幻冒险到温馨日常，每一个故事都是独一无二的宝藏</p>
|
||
</div>
|
||
<BaseButton class="shrink-0" @click="openCreateModal">我也要创作</BaseButton>
|
||
</div>
|
||
|
||
<!-- 滚动展示区 -->
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||
<!-- Book 1 -->
|
||
<div class="group cursor-pointer">
|
||
<div class="aspect-[3/4] rounded-2xl bg-amber-100 mb-3 overflow-hidden shadow-md group-hover:shadow-xl transition-all duration-300 relative">
|
||
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1535905557558-afc4877a26fc?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80')] bg-cover bg-center group-hover:scale-105 transition-transform duration-700"></div>
|
||
<div class="absolute bottom-0 inset-x-0 p-4 bg-gradient-to-t from-black/60 to-transparent text-white opacity-0 group-hover:opacity-100 transition-opacity">
|
||
<span class="text-sm font-bold">阅读故事 →</span>
|
||
</div>
|
||
</div>
|
||
<h3 class="font-bold text-stone-800 text-lg">魔法书店的奇妙夜</h3>
|
||
<p class="text-xs text-stone-500">奇幻 • 想象力</p>
|
||
</div>
|
||
<!-- Book 2 -->
|
||
<div class="group cursor-pointer">
|
||
<div class="aspect-[3/4] rounded-2xl bg-blue-100 mb-3 overflow-hidden shadow-md group-hover:shadow-xl transition-all duration-300 relative">
|
||
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1459369510627-9efbee1e6051?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80')] bg-cover bg-center group-hover:scale-105 transition-transform duration-700"></div>
|
||
</div>
|
||
<h3 class="font-bold text-stone-800 text-lg">小熊的蜂蜜罐</h3>
|
||
<p class="text-xs text-stone-500">分享 • 友谊</p>
|
||
</div>
|
||
<!-- Book 3 -->
|
||
<div class="group cursor-pointer">
|
||
<div class="aspect-[3/4] rounded-2xl bg-green-100 mb-3 overflow-hidden shadow-md group-hover:shadow-xl transition-all duration-300 relative">
|
||
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1503919005314-30d93d07d823?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80')] bg-cover bg-center group-hover:scale-105 transition-transform duration-700"></div>
|
||
</div>
|
||
<h3 class="font-bold text-stone-800 text-lg">森林里的音乐会</h3>
|
||
<p class="text-xs text-stone-500">艺术 • 自在</p>
|
||
</div>
|
||
<!-- Book 4 -->
|
||
<div class="group cursor-pointer">
|
||
<div class="aspect-[3/4] rounded-2xl bg-purple-100 mb-3 overflow-hidden shadow-md group-hover:shadow-xl transition-all duration-300 relative">
|
||
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1534447677768-be436bb09401?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80')] bg-cover bg-center group-hover:scale-105 transition-transform duration-700"></div>
|
||
</div>
|
||
<h3 class="font-bold text-stone-800 text-lg">冲向月球！</h3>
|
||
<p class="text-xs text-stone-500">科学 • 探索</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ========== FAQ Section ========== -->
|
||
<section id="faq" class="py-24 bg-white scroll-mt-16">
|
||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-3xl font-bold text-stone-900 mb-4">常见问题解答</h2>
|
||
<p class="text-lg text-stone-600">这里是关于使用梦语织机的一些详细解答</p>
|
||
</div>
|
||
|
||
<div class="space-y-4">
|
||
<!-- FAQ 1: Customization -->
|
||
<details class="group bg-[#FDFBF7] rounded-2xl border border-stone-100 overflow-hidden">
|
||
<summary class="flex items-center justify-between p-6 cursor-pointer font-bold text-stone-800 text-lg select-none hover:bg-stone-50 transition-colors">
|
||
我可以把孩子设为故事主角吗？
|
||
<span class="transform group-open:rotate-180 transition-transform">▼</span>
|
||
</summary>
|
||
<div class="px-6 pb-6 text-stone-600 leading-relaxed border-t border-stone-100 pt-4 bg-white">
|
||
当然可以！这是我们最核心的功能。您可以在"孩子档案"中设置孩子的名字、年龄、性格特点，AI 会根据这些信息量身定制故事，让孩子在故事中看到自己的影子，代入感极强。
|
||
</div>
|
||
</details>
|
||
|
||
<!-- FAQ 2: Voice -->
|
||
<details class="group bg-[#FDFBF7] rounded-2xl border border-stone-100 overflow-hidden">
|
||
<summary class="flex items-center justify-between p-6 cursor-pointer font-bold text-stone-800 text-lg select-none hover:bg-stone-50 transition-colors">
|
||
生成的故事有语音朗读吗？
|
||
<span class="transform group-open:rotate-180 transition-transform">▼</span>
|
||
</summary>
|
||
<div class="px-6 pb-6 text-stone-600 leading-relaxed border-t border-stone-100 pt-4 bg-white">
|
||
是的，我们采用最先进的 TTS（文本转语音）技术，能够生成媲美真人的情感语音。您可以选择不同的讲述人音色（如温柔妈妈、磁性爸爸等），让故事听起来生动有趣。
|
||
</div>
|
||
</details>
|
||
|
||
<!-- FAQ 3: Education -->
|
||
<details class="group bg-[#FDFBF7] rounded-2xl border border-stone-100 overflow-hidden">
|
||
<summary class="flex items-center justify-between p-6 cursor-pointer font-bold text-stone-800 text-lg select-none hover:bg-stone-50 transition-colors">
|
||
可以设定特定的教育目标吗？比如"如果不爱吃蔬菜"？
|
||
<span class="transform group-open:rotate-180 transition-transform">▼</span>
|
||
</summary>
|
||
<div class="px-6 pb-6 text-stone-600 leading-relaxed border-t border-stone-100 pt-4 bg-white">
|
||
没问题！在创作故事时，您可以选择或者自定义"教育主题"。例如输入"教孩子为什么要吃蔬菜"或者"如何克服怕黑的心理"，AI 会巧妙地将这些道理融入有趣的剧情中，避免生硬的说教。
|
||
</div>
|
||
</details>
|
||
|
||
<!-- FAQ 4: Download/Print -->
|
||
<details class="group bg-[#FDFBF7] rounded-2xl border border-stone-100 overflow-hidden">
|
||
<summary class="flex items-center justify-between p-6 cursor-pointer font-bold text-stone-800 text-lg select-none hover:bg-stone-50 transition-colors">
|
||
生成的绘本可以下载打印吗？
|
||
<span class="transform group-open:rotate-180 transition-transform">▼</span>
|
||
</summary>
|
||
<div class="px-6 pb-6 text-stone-600 leading-relaxed border-t border-stone-100 pt-4 bg-white">
|
||
支持。对于会员用户，我们提供高清 PDF 导出功能。您可以将绘本下载并打印出来，装订成独一无二的实体书，成为孩子珍贵的成长纪念。
|
||
</div>
|
||
</details>
|
||
|
||
<!-- FAQ 5: Safety -->
|
||
<details class="group bg-[#FDFBF7] rounded-2xl border border-stone-100 overflow-hidden">
|
||
<summary class="flex items-center justify-between p-6 cursor-pointer font-bold text-stone-800 text-lg select-none hover:bg-stone-50 transition-colors">
|
||
故事内容对孩子安全吗？
|
||
<span class="transform group-open:rotate-180 transition-transform">▼</span>
|
||
</summary>
|
||
<div class="px-6 pb-6 text-stone-600 leading-relaxed border-t border-stone-100 pt-4 bg-white">
|
||
安全是我们最重视的原则。我们的 AI 模型经过严格训练和多重内容过滤，确保输出的内容阳光、积极，绝不包含恐怖、暴力或成人向内容，您可以放心给孩子使用。
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="bg-stone-50 border-t border-stone-200 py-12 mt-auto">
|
||
<div class="max-w-7xl mx-auto px-4 text-center text-stone-500 text-sm">
|
||
<p>© 2024 DreamWeaver AI. 用爱编织每一个梦想。</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<LoginDialog v-model="showLoginDialog" />
|
||
</div>
|
||
</template>
|
||
|
||
<style>
|
||
/* Custom animations if needed */
|
||
@keyframes blob {
|
||
0% { transform: translate(0px, 0px) scale(1); }
|
||
33% { transform: translate(30px, -50px) scale(1.1); }
|
||
66% { transform: translate(-20px, 20px) scale(0.9); }
|
||
100% { transform: translate(0px, 0px) scale(1); }
|
||
}
|
||
.animate-blob {
|
||
animation: blob 7s infinite;
|
||
}
|
||
.animation-delay-2000 {
|
||
animation-delay: 2s;
|
||
}
|
||
</style>
|