yuanhau/news-analyze
1
0
Fork 0
mirror of https://github.com/hpware/news-analyze.git synced 2025-06-23 13:04:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Remake the home page.

Browse source
This commit is contained in:
yuanhau 2025-05-13 14:14:50 +08:00
parent 5a585ddf7c
commit 34a0868b26
6 changed files with 72 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

36
pages/home.vue
View file

@ -5,6 +5,7 @@ import {
AccordionItem,
AccordionTrigger,
} from "~/components/ui/accordion";
import { ComputerDesktopIcon, CircleStackIcon, MagnifyingGlassIcon, ViewfinderCircleIcon, DocumentDuplicateIcon } from "@heroicons/vue/24/outline";
import { gsap } from "gsap";
import { TextPlugin } from "gsap/TextPlugin";
gsap.registerPlugin(TextPlugin);
@ -21,6 +22,23 @@ const messages = [
"BlindSpec",
];
const cards = [
{
icon: ViewfinderCircleIcon,
title: t("home.cards.title.find"),
description: t("home.cards.description.find"),
},
{
icon: ComputerDesktopIcon,
title: t("home.cards.title.interface"),
description: t("home.cards.description.interface"),
},
{
icon: DocumentDuplicateIcon,
title: t("home.cards.title.documentation"),
description: t("home.cards.description.documentation"),
},
]
const accordionItems = [
{
@ -96,6 +114,13 @@ onMounted(() => {
<span>{{ t("home.startusing") }}</span>
</button>
</NuxtLink>
<NuxtLink :to="localePath('/docs/gettingstarted')">
<button
class="m-4 ml-1 mr-1 bg-[#8C9393] text-white p-3 rounded-[10px] bg-gray-700 transition-all duration-150 hover:transform hover:scale-105 hover:shadow-lg"
>
<span>{{ t("home.documentation") }}</span>
</button>
</NuxtLink>
<NuxtLink to="#learnmore">
<button
class="m-4 ml-1 mr-1 bg-[#8C9393] text-white p-3 rounded-[10px] bg-gray-700 transition-all duration-150 hover:transform hover:scale-105 hover:shadow-lg"
@ -107,13 +132,19 @@ onMounted(() => {
</div>
<div class="h-screen"></div>
<div id="learnmore"></div>
<div class="h-[100px]"></div>
<div class="">
<div class=""></div>
<div class="justify-center align-center gap-2 p-2 w-full flex flex-row flex-wrap" id="cards">
<div class="px-10 bg-gray-900/70 w-[300px] h-[200px] rounded-xl shadow-lg hover:shadow-sky-600/90 backdrop-blur-sm border border-gray-800 hover:border-gray-600/70 transition-all duration-700 justify-center align-middle flex flex-col" v-for="item in cards" :key="item.title">
<component :is="item.icon" class="w-8 h-8" />
<h3 class="text-xl font-bold">{{ item.title }}</h3>
<p class="">{{ item.description }}</p>
</div>
</div>
<br />
<div class="justify-center align-center text-center w-full flex">
<div
class="bg-[#C9C9C9]/60 rounded-xl shadow-lg p-4 m-4 w-1/2 align-center justify-center text-center"
class="bg-gray-900/60 rounded-xl shadow-lg p-8 border border-gray-800 hover:border-sky-700 m-4 w-1/2 align-center justify-center text-center duration-700"
>
<span class="text-2xl font-bold">Q/A</span>
<Accordion
@ -135,4 +166,5 @@ onMounted(() => {
</div>
</div>
</div>
</div>
</template>