💄 Optimized header & landing page
This commit is contained in:
parent
3e7f259834
commit
e4111dc06e
@ -31,7 +31,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<article v-if="post.type == 'story' || props.forceShowContent" class="text-base prose max-w-none">
|
||||
<article v-if="(post.type == 'story' || props.forceShowContent) && post.body?.content" class="text-base prose max-w-none">
|
||||
<m-d-c :value="post.body?.content"></m-d-c>
|
||||
</article>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-app-bar flat color="primary">
|
||||
<v-app-bar app flat color="surface" class="app-bar-blur">
|
||||
<v-container fluid class="mx-auto d-flex align-center justify-center pr-8">
|
||||
<v-app-bar-nav-icon @click="openDrawer = !openDrawer" />
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
</v-container>
|
||||
</v-app-bar>
|
||||
|
||||
<v-navigation-drawer v-model="openDrawer" location="left" width="300" floating>
|
||||
<v-navigation-drawer v-model="openDrawer" location="left" width="300" temporary order="-1">
|
||||
<v-list density="compact" nav color="primary">
|
||||
<v-list-item title="Knowledge Base" prepend-icon="mdi-library" to="/docs" exact />
|
||||
<v-list-item title="Developer Portal" prepend-icon="mdi-code-tags" to="/dev" exact />
|
||||
@ -48,9 +48,16 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Logo from "../assets/logo-w-shadow.png"
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const openDrawer = ref(false)
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.app-bar-blur {
|
||||
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0.5) 65%, rgba(0, 0, 0, 0) 100%);
|
||||
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0.5) 65%, rgba(0, 0, 0, 0) 100%);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -151,7 +151,7 @@ export default defineNuxtConfig({
|
||||
"@pinia/nuxt",
|
||||
"@nuxtjs/i18n",
|
||||
"nuxt-schema-org",
|
||||
"nuxt-gtag",
|
||||
"@vueuse/motion/nuxt",
|
||||
(_options, nuxt) => {
|
||||
nuxt.hooks.hook("vite:extendConfig", (config) => {
|
||||
// @ts-expect-error
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
"@nuxtjs/i18n": "^8.5.6",
|
||||
"@nuxtjs/sitemap": "^6.1.5",
|
||||
"@pinia/nuxt": "^0.5.5",
|
||||
"@vueuse/motion": "^3.0.3",
|
||||
"feed": "^4.2.2",
|
||||
"nuxt": "^3.16.0",
|
||||
"nuxt-gtag": "^2.1.0",
|
||||
|
||||
@ -1,39 +1,71 @@
|
||||
<template>
|
||||
<v-container class="flex flex-col my-2 px-12 gap-[4rem]">
|
||||
<v-row class="content-section">
|
||||
<v-col cols="12" md="4" class="flex justify-start">
|
||||
<div class="flex flex-col items-start">
|
||||
<h1 class="text-4xl font-bold">{{ t("brandName") }}</h1>
|
||||
<p class="text-lg mt-3 max-w-2/3">
|
||||
{{ t("indexIntroduce") }}
|
||||
</p>
|
||||
<p class="text-grey mt-2">
|
||||
{{ t("indexProductListHint") }}
|
||||
<v-icon icon="mdi-arrow-right" size="16" class="mb-0.5" />
|
||||
</p>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" md="8">
|
||||
<v-card>
|
||||
<section class="content-section flex flex-col items-center justify-center text-center px-4">
|
||||
<img
|
||||
v-motion="{
|
||||
initial: {
|
||||
y: 100,
|
||||
opacity: 0,
|
||||
},
|
||||
enter: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
},
|
||||
}"
|
||||
:src="Logo"
|
||||
alt="Company Logo"
|
||||
class="w-32 h-32 mb-4"
|
||||
/>
|
||||
<h1 class="text-4xl font-bold">Welcome to {{ t("brandName") }}</h1>
|
||||
<p class="mt-2 text-lg">Building cool, open-source, and elegant apps for human.</p>
|
||||
<v-btn class="mt-4" color="primary" prepend-icon="mdi-arrow-down" href="#products">{{ t("learnMore") }}</v-btn>
|
||||
</section>
|
||||
|
||||
<section class="content-section py-16" id="products">
|
||||
<div class="container mx-auto text-center">
|
||||
<h2 class="text-3xl font-bold">Our Projects</h2>
|
||||
<p>Take a peek of our works.</p>
|
||||
<v-card class="mt-12">
|
||||
<product-carousel class="carousel-section" :products="products as any[]" />
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<v-row class="content-section">
|
||||
<v-col cols="12" md="8">
|
||||
<v-card class="h-[500px]">
|
||||
<activity-list class="carousel-section" />
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
title="GitHub"
|
||||
subtitle="The place hosts most of our public projects' code"
|
||||
prepend-icon="mdi-github"
|
||||
href="https://github.com/Solsynth"
|
||||
target="_blank"
|
||||
/>
|
||||
<v-list-item
|
||||
lines="two"
|
||||
title="Solsynth Code Repository"
|
||||
subtitle="Our self-hosted git server, may contains some unpublished projects' code"
|
||||
prepend-icon="mdi-git"
|
||||
href="https://git.solsynth.dev/explore"
|
||||
target="_blank"
|
||||
/>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4" class="flex justify-end" order="first" order-md="last">
|
||||
<v-col cols="12" md="6" class="flex justify-end" order="first" order-md="last">
|
||||
<div class="text-right flex flex-col items-end">
|
||||
<h2 class="text-4xl font-bold">{{ t("indexActivities") }}</h2>
|
||||
<p class="text-lg mt-3 max-w-2/3">
|
||||
{{ t("indexActivitiesCaption") }}
|
||||
<h2 class="text-4xl font-bold">
|
||||
We<br />
|
||||
❤️ Open-source
|
||||
</h2>
|
||||
<p class="text-md mt-3 max-w-2/3">
|
||||
No software can run without the support of open source software, and our software is no exception.
|
||||
Therefore, we feel it is important to contribute to open source as well.
|
||||
</p>
|
||||
<p class="text-grey mt-2">
|
||||
<v-icon icon="mdi-arrow-left" size="16" class="mb-0.5" />
|
||||
{{ t("indexActivitiesHint") }}
|
||||
Check out our GitHub
|
||||
</p>
|
||||
</div>
|
||||
</v-col>
|
||||
@ -42,6 +74,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Logo from "../assets/logo-w-shadow.png"
|
||||
|
||||
import { getLocale } from "~/utils/locale"
|
||||
|
||||
const { t } = useI18n()
|
||||
@ -61,13 +95,16 @@ useSeoMeta({
|
||||
})
|
||||
|
||||
const { data: products } = await useAsyncData("products", () => {
|
||||
return queryContent("/products").where({ _locale: getLocale(), archived: { $ne: true } }).limit(5).find()
|
||||
return queryContent("/products")
|
||||
.where({ _locale: getLocale(), archived: { $ne: true } })
|
||||
.limit(5)
|
||||
.find()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.carousel-section {
|
||||
height: 96rem;
|
||||
height: 120rem;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
@ -76,3 +113,10 @@ const { data: products } = await useAsyncData("products", () => {
|
||||
place-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
/>
|
||||
</v-card>
|
||||
|
||||
<article class="text-base prose xl:text-lg mx-auto">
|
||||
<article v-if="post.body?.content" class="text-base prose xl:text-lg mx-auto">
|
||||
<m-d-c :value="post.body?.content"></m-d-c>
|
||||
</article>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user