---
import Layout from '../layouts/Layout.astro';
import { APP_NAME } from '../config/app';
import { baiduLdjson } from '../../utils/ldjson';
import { formatDateTime } from '../../utils/date';

export const prerender = true;


// SEO meta tags
const title = `${APP_NAME} - 产品介绍`;
const description = '知识回声是一款专业的有声阅读学习应用，提供海量图书与精品课程，简洁界面与便捷操作，随时随地开启充实知识旅程，助您轻松成长与学习。';
const keywords = '知识回声介绍,知识回声是什么,知识回声的特点,知识回声平台';

const LDJSON = {
  context: "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
  id: "https://www.zhishihuisheng.com/product",
  appid: "",
  title: title,
  image: "https://www.zhishihuisheng.com/app-showcase.png",
  pubDate: "2025-06-09T11:20:04",
  updateDate: formatDateTime(),
  description: description,
};
---
<Layout title={title} description={description} keywords={keywords}>
	<main>
		<section class="product-hero" aria-label="产品介绍">
			<div class="container">
				<h1>知识回声 - 您的知识成长伙伴@@</h1>
				<p>随时随地，开启充实知识旅程</p>
				<div class="cta-buttons">
					<button class="cta-primary">
						<a rel="nofollow" title="立即下载" href="https://sj.qq.com/appdetail/com.xjyk.balegjh" target="_blank">立即下载</a>
					</button>
				</div>
			</div>
		</section>

		<section class="product-intro" aria-label="产品简介">
			<div class="container">
				<h2>什么是知识回声？</h2>
				<div class="intro-content">
					<div class="intro-text">
						<p>知识回声是一款专业的阅读学习应用，致力于为用户提供优质的学习内容和便捷的阅读体验。我们汇聚了海量图书资源和精品课程，让您随时随地都能开启充实知识旅程。</p>
						<p>为国内外用户提供免费正版小说、免费实用工具等。无需安装，一点即用，即用即走，给予用户最贴心周到的服务和最舒适的产品体验。</p>
						<p>作为华为、vivo、OPPO等知名厂商的战略合作伙伴，我们始终坚持"厂商满意、用户喜欢"的产品理念，为用户打造"便捷、安全可靠"的移动互联生态。</p>
					</div>
					<div class="intro-image">
						<img src="/app-showcase.png" alt="知识回声海报" width="400" height="600" loading="lazy" />
					</div>
				</div>
			</div>
		</section>

		<section class="user-experience" aria-label="用户体验">
			<div class="container">
				<h2>用户真实体验</h2>
				<div class="experience-grid">
					<article class="experience-card">
						<div class="user-info">
							<img src="/avatar_1.jpg" alt="用户头像" width="50" height="50" loading="lazy" />
							<div class="user-details">
								<h3>李女士</h3>
								<div class="rating">⭐⭐⭐⭐⭐</div>
							</div>
						</div>
						<p>"界面设计非常简洁，操作很流畅。内容质量很高，每天都能学到新知识。"</p>
					</article>
					<article class="experience-card">
						<div class="user-info">
							<img src="/avatar_2.jpg" alt="用户头像" width="50" height="50" loading="lazy" />
							<div class="user-details">
								<h3>张先生</h3>
								<div class="rating">⭐⭐⭐⭐⭐</div>
							</div>
						</div>
						<p>"推荐的内容很符合我的兴趣，学习效率提高了很多。客服响应也很及时。"</p>
					</article>
					<article class="experience-card">
						<div class="user-info">
							<img src="/avatar_3.jpg" alt="用户头像" width="50" height="50" loading="lazy" />
							<div class="user-details">
								<h3>王同学</h3>
								<div class="rating">⭐⭐⭐⭐⭐</div>
							</div>
						</div>
						<p>"课程内容很专业，老师讲解很清晰。功能很实用。"</p>
					</article>
				</div>
			</div>
		</section>

		<section class="download-section" aria-label="下载体验">
			<div class="container">
				<h2>立即体验</h2>
				<p>加入百万用户的学习之旅</p>
				<div class="cta-buttons">
					<button class="cta-primary">
						<a rel="nofollow" title="立即下载" href="https://sj.qq.com/appdetail/com.xjyk.balegjh" target="_blank">立即下载</a>
					</button>
				</div>
			</div>
		</section>
	</main>

	<!-- 百度结构化数据 -->
	<script type="application/ld+json" set:html={JSON.stringify({
		"@context": LDJSON.context,
		"@id": LDJSON.id,
		"appid": LDJSON.appid,
		"title": LDJSON.title,
		"images": [LDJSON.image],
		"pubDate": LDJSON.pubDate,
		"Update": LDJSON.updateDate,
		"description": LDJSON.description,
	  })}/>
</Layout>

<style>
	.container h2 {
		margin-left: 1.5rem;
	}
	.product-hero {
		background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
		color: white;
		padding: 6rem 0;
		text-align: center;
	}

	.product-hero h1 {
		font-size: 3rem;
		margin-bottom: 1.5rem;
	}

	.product-hero p {
		font-size: 1.5rem;
		opacity: 0.9;
		margin-bottom: 2rem;
	}

	.cta-buttons {
		display: flex;
		justify-content: center;
		gap: 1rem;
	}

	.cta-primary {
		background: white;
		color: var(--primary-color);
		border: none;
		padding: 1rem 2rem;
		border-radius: 8px;
		font-weight: 600;
		font-size: 1.1rem;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.cta-primary:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.cta-primary a {
		text-decoration: none;
		color: inherit;
	}

	.product-intro {
		padding: 6rem 0;
		/* background: var(--background-off-white); */
	}

	.intro-content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
		align-items: center;
		max-width: 1200px;
		margin: 0 auto;
	}

	.intro-text p {
		font-size: 1.2rem;
		line-height: 1.8;
		color: var(--text-secondary);
		margin-bottom: 1.5rem;
		padding: 1rem 1.5rem 1rem 1.5rem;
	}

	.intro-image img {
		width: 100%;
		height: auto;
		border-radius: 16px;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	}

	.features-section {
		padding: 6rem 0;
	}

	.features-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 2rem;
		max-width: 1200px;
		margin: 0 auto;
	}

	.feature-card {
		background: white;
		padding: 2rem;
		border-radius: 16px;
		text-align: center;
		transition: all 0.3s ease;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	}

	.feature-card:hover {
		transform: translateY(-10px);
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	}

	.feature-icon {
		font-size: 3rem;
		margin-bottom: 1.5rem;
	}

	.feature-card h3 {
		font-size: 1.5rem;
		color: var(--text-primary);
		margin-bottom: 1rem;
	}

	.feature-card p {
		color: var(--text-secondary);
		line-height: 1.6;
	}

	.user-experience {
		padding: 6rem 0;
	}

	.experience-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 2rem;
		max-width: 1200px;
		margin: 0 auto;
	}

	.experience-card {
		background: white;
		padding: 2rem;
		border-radius: 16px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	}

	.user-info {
		display: flex;
		align-items: center;
		gap: 1rem;
		margin-bottom: 1.5rem;
	}

	.user-info img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		object-fit: cover;
	}

	.user-details h3 {
		font-size: 1.2rem;
		color: var(--text-primary);
		margin-bottom: 0.25rem;
	}

	.rating {
		color: #fbbf24;
	}

	.experience-card p {
		color: var(--text-secondary);
		line-height: 1.6;
	}

	.faq-section {
		padding: 6rem 0;
	}

	.faq-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 2rem;
		max-width: 1200px;
		margin: 0 auto;
	}

	.faq-item {
		background: white;
		padding: 2rem;
		border-radius: 16px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	}

	.faq-item h3 {
		font-size: 1.3rem;
		color: var(--text-primary);
		margin-bottom: 1rem;
	}

	.faq-item p {
		color: var(--text-secondary);
		line-height: 1.6;
	}

	.download-section {
		padding: 6rem 0;
		background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
		color: white;
		text-align: center;
	}

	.download-section h2 {
		font-size: 2.5rem;
		margin-bottom: 1rem;
	}

	.download-section p {
		font-size: 1.2rem;
		opacity: 0.9;
		margin-bottom: 2rem;
	}

	@media (max-width: 768px) {
		.product-hero {
			padding: 4rem 0;
		}

		.product-hero h1 {
			font-size: 2.5rem;
		}

		.product-hero p {
			font-size: 1.2rem;
		}

		.intro-content {
			grid-template-columns: 1fr;
			gap: 2rem;
		}

		.intro-text p {
			font-size: 1.1rem;
		}

		.features-grid,
		.experience-grid,
		.faq-grid {
			grid-template-columns: 1fr;
		}

		.download-section h2 {
			font-size: 2rem;
		}
	}

	@media (max-width: 480px) {
		.product-hero {
			padding: 3rem 0;
		}

		.product-hero h1 {
			font-size: 2rem;
		}

		.product-hero p {
			font-size: 1.1rem;
		}

		.cta-primary {
			padding: 0.8rem 1.5rem;
			font-size: 1rem;
		}

		.feature-card,
		.experience-card,
		.faq-item {
			padding: 1.5rem;
		}

		.feature-icon {
			font-size: 2.5rem;
		}

		.feature-card h3 {
			font-size: 1.3rem;
		}

		.download-section {
			padding: 4rem 0;
		}

		.download-section h2 {
			font-size: 1.8rem;
		}

		.download-section p {
			font-size: 1.1rem;
		}
	}
</style> 