Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

enhancement: Shelve landing page rework #247

Merged
merged 5 commits into from
Oct 21, 2024
Merged

enhancement: Shelve landing page rework #247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f75bac8
enhancement: Shelve landing page rework
HugoRCD Oct 21, 2024
c5e9200
chore: apply automated lint fixes
autofix-ci[bot] Oct 21, 2024
b9bf56d
wip
HugoRCD Oct 21, 2024
7c7e593
fix theme
HugoRCD Oct 21, 2024
714f910
force dark theme on lp
HugoRCD Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/app/app/app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ if (import.meta.client) setPrefersReducedMotion(reduceMotion.value)

<template>
<Html lang="en">
<Body class="selection:bg-primary relative overflow-x-hidden font-geist text-black selection:text-inverted dark:text-white">
<Body class="selection:bg-primary font-geist relative overflow-x-hidden bg-white text-black selection:text-inverted dark:bg-neutral-950 dark:text-white">
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
Expand Down
16 changes: 16 additions & 0 deletions apps/app/app/assets/style/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,22 @@ html, body, #__nuxt, #__layout {
border-radius: 5px;
}

.font-geist-mono {
font-family: 'GeistMono', sans-serif;
}

.font-geist {
font-family: 'Geist', sans-serif;
}

.font-newsreader {
font-family: 'Newsreader', serif;
}

.main-gradient {
@apply font-geist-mono bg-gradient-to-r from-neutral-50 to-neutral-600 to-50% bg-clip-text text-2xl text-transparent;
}

html.light {
--primary-color: rgb(255, 255, 255);
--primary-hover-color: rgb(255, 255, 255, 0.9);
Expand Down
53 changes: 53 additions & 0 deletions apps/app/app/components/CrossedDiv.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<script setup lang="ts">
type CrossedDivProps = {
encryptedText: boolean
}

const { encryptedText } = defineProps<CrossedDivProps>()
</script>

<template>
<div class="relative -mb-px -ml-px h-40 border border-gray-500/15 border-b-transparent lg:border-t-transparent">
<span class="bottom absolute -bottom-px -left-px size-px" />
<span class="bottom absolute -bottom-px -right-px size-px" />
<span class="bottom absolute -left-px -top-px size-px" />
<span class="bottom absolute -right-px -top-px size-px" />
<div v-if="encryptedText" class="encryption absolute left-0 top-0 size-full overflow-hidden break-words font-mono text-xs leading-5 text-gray-400">
GIHXTrTBRIPocF8gMJPAM5dyuwCO7DIqMlrx45EFKa8Ky06RHwDafK1CpxdOLAI6mM8YX4iHsZ188j00gNkbgDYEtrq1S5vaOIxHhALKib3EKVD5tuYf3Ej2QA0R363viNI0tP8RVD4GlLzNPHpBkePL76KLzZrXa6x88wsJN8sslwiKTxEeepv1760YPcdyrfnqv4W4RRv2Fw9f6rBIgzOaBF5Jet4rjo2eIuKCUDkM9t8ZnfvGCzguyoFkTlmLtQuzQKPZLVuPtpbbBOdrUG795uSVFCnFjnJKgHGAiAeGZmu0n1lnfNgOB9t7cLc7Gk7jUfW3aHK3es56mORlQyACrHBDVQjPiBaIbfBBAreNiZAo8NzadXQ28HOHTvdL90GYoqJC9fqitNn0R1CWVJyEqCCKlTZSU2UFhgUNCI7Zzozl7QlZceSE5SrXNjtBnAi0sMiIeJb43o2x2vHQehvUmTaejG3UqETeRxzvg4qhD1qFDkk8y3mwuq31NWDlaszIhhVNnu6NTapPGT9XKXDCMee8QOGnQuBsPEQHCNs3eX3jsZLitOCTTVljHuY8A3AEAiWudJduue5X5PTFSc1UfFt8U1Yhj4qiVQaip3XkfesyBnk7wVaAWUKrKMToGVSyeoD23U1CNibAimwV7TKRpWWGSvXdFclFM6XuigtHlZzSLOE40wY3eEw4rAPeZF30jJMZytpXVc9AsprMpCfoKMbKSPUnDuXCq1nhggY2MTkCdcGkABxsbolIuyYUZMu2Lqt18aNIN1ZudI08ZVJHCX8q2XcPv43nDtjeHE8djSxcxoXb2b0vw4Wc4AuO2Uph0K6fYSXt54nRHit19TkgCi8dhY2PZAfyiULAvmQy6CQYc5Xw8yfSVMtHnNs2kuC1e376penaAMQ1jUozKWJneHjF21aleJWjN2NJ8bMNyfTNIL1ijpGwz6urHGrSyYR94ghvxNxBwZgRJZbx5IVqjwqDxnzAacMBvViVG4UHluE4UaoLPCHkHBrYj6m32mAIjkso2tC3kBu5XmGnAVdz8UzkPzxgtORxHPEisInmi7fgLGywdQ8Zz3Zdh9912kMR9b6MQ3xRFrlZo5gOQYhSSgyH1gIyGAjjcO3O3EptA7CcRsIeaNR5O3NG4iABwLfN1ebEBC6fLMzIDLlSYs8zQwHYsdSZMbb5yoYxvfB7G4rmEQA9FJ2o1kLzk1OTAk4vUKIEt8gfSDxzgROhMjqDoIeLiWgbXLefVRNVDf0mldlPY7oinEnos1JuxfpukoDhQL5aP2e8pqvhnctNHEGyNDtL3nea1JtDOlBic0OriZlTvIRCADyDFWE7otCHnFipuCFMViCR30HM0pzuCAeQdtvChyIe3mXBxIQnbAqgbLQXhhOD79Nyf8wlyT3fWvufGlgJO4jKD0iwerKMeXGQ0lIClU2fsEGfYAno4b2xeDD1mUO78hXABPREdtj38GoIZCNpxN69TLnCqLDG0pIkXxyYDaMmU9C5YnUr81n1xOgVyeH4iJvMF7CQkuYgWAsvwSwcNtIDtU2vjzXORp4VDlRjXDu4SqGbCDvijjn4wCJLJE1mLvv9R5mMOjHDBVdEOjoJuMp7YpVqSIWenC3oLGsJPJl5KarsVxaMnSWTHRw8wDVHNOcXXO9ZGGQGdi31ikeIfZABoUBKmeyBbgepVlCkDy3aytzYiwmX7fosxj1vk6qbji9GbVNEhimXHZR2rFuKBpov1nahPbopBpfaGKY15UoN2pQOtV5oG1MngCxTTqNBu8khxbYDbRDilYYwbiWk
</div>
<div class="relative z-10 ml-4 flex h-full flex-col justify-center">
<slot />
</div>
</div>
</template>

<style scoped>
.bottom:before {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
content: "";
width: 1px;
height: 9px;
position: absolute;
top: -4px;
}

.bottom:after {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
content: "";
width: 9px;
height: 1px;
position: absolute;
left: -4px;
}

.encryption {
--x: 80%;
--y: 0%;
transition: .5s;
-webkit-mask-image: radial-gradient(300px circle at var(--x) var(--y), #000 10%, rgba(0, 0, 0, .25), transparent);
mask-image: radial-gradient(300px circle at var(--x) var(--y), #000 10%, rgba(0, 0, 0, .25), transparent);
opacity: .4;
}
</style>
11 changes: 1 addition & 10 deletions apps/app/app/components/DropdownMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,17 +62,8 @@ const items = [
</div>
</template>
</UDropdown>
<NuxtLink v-else to="/login" class="btn-primary">
Login
</NuxtLink>
<UButton v-else to="/login" label="Login" color="gray" />
</div>
</template>

<style scoped>
.btn-primary {
@apply px-4 py-2 text-sm font-semibold text-white;
@apply bg-neutral-800 hover:bg-neutral-700;
@apply rounded-full shadow-md;
}
</style>

4 changes: 2 additions & 2 deletions apps/app/app/components/landing/Faq.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const items = [
<template>
<div>
<div class="mb-10 flex flex-col items-center justify-center gap-2">
<h3 class="from-primary-300 to-primary-400 bg-gradient-to-tr bg-clip-text text-3xl font-bold text-transparent sm:text-4xl">
<h3 class="main-gradient">
<LandingScrambleText label="FAQ" />
</h3>
<p class="max-w-lg text-center text-sm text-gray-500 sm:text-base">
Expand All @@ -41,7 +41,7 @@ const items = [
</div>
<div class="mx-auto max-w-3xl">
<UAccordion
color="primary"
color="gray"
variant="ghost"
size="sm"
:items
Expand Down
6 changes: 3 additions & 3 deletions apps/app/app/components/landing/Features.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const features = [
<template>
<div class="mx-auto max-w-5xl">
<div class="mb-10 flex flex-col items-center justify-center gap-2">
<h3 class="from-primary-300 to-primary-400 bg-gradient-to-tr bg-clip-text text-3xl font-bold text-transparent sm:text-4xl">
<h3 class="main-gradient">
<LandingScrambleText label="Features" />
</h3>
<p class="max-w-lg text-pretty text-center text-sm text-gray-500 sm:text-base">
Expand All @@ -59,8 +59,8 @@ const features = [
<UIcon :name="feature.icon" class="size-5 fill-white text-gray-300" />
</div>

<div class="ml-4 font-semibold text-gray-300">
{{ feature.title }} <span v-if="feature.soon" class="ml-1 text-xs text-gray-400">(soon)</span>
<div class="ml-4 text-gray-300">
{{ feature.title }}<span v-if="feature.soon" class="ml-1 text-xs text-gray-400">(soon)</span>
</div>
</div>

Expand Down
15 changes: 10 additions & 5 deletions apps/app/app/components/landing/Hero.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,23 @@ defineShortcuts({
</script>

<template>
<div class="h-96 w-full overflow-hidden">
<div class="mx-auto mt-32 w-full max-w-2xl font-inter font-light">
<div class="z-20 h-96 w-full overflow-hidden">
<div class="mx-auto mt-32 w-full max-w-2xl">
<div class="text-balance text-center text-3xl sm:text-4xl">
Meet <span class="font-newsreader font-light italic">{{ title }}</span> a cosy home for all your <span class="font-newsreader font-light italic">projects</span>
</div>
<p class="mt-4 hidden text-center text-gray-400 sm:block">
Press <UKbd>S</UKbd> to start your journey
</p>
<div class="mt-4 flex flex-col items-center justify-center gap-2 sm:flex-row sm:gap-4">
<UButton class="sm:hidden" @click="useRouter().push('/login')">
<span class="text-balance">Start your journey <UIcon name="heroicons-outline:arrow-sm-right" class="inline-block size-4" /></span>
</UButton>
<UButton
class="sm:hidden"
to="/login"
label="Start your journey"
icon="lucide:arrow-right"
trailing
color="gray"
/>
</div>
</div>

Expand Down
16 changes: 16 additions & 0 deletions apps/app/app/components/layout/Footer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,22 @@ const nav = [

<template>
<div class="my-6">
<div class="relative">
<div class="flex">
<NuxtLink to="/docs" class="group -mb-px -ml-px flex w-full cursor-pointer justify-between gap-2 border border-gray-800 border-opacity-50 p-4 text-xs text-gray-500 transition-all duration-300 ease-in-out hover:border-opacity-100 hover:bg-gray-800/50 hover:text-gray-200">
<span class="text-gray-400">
Documentation
</span>
<UIcon name="lucide:arrow-right" class="ml-1 inline-block text-gray-400 transition-all duration-300 ease-in-out group-hover:-rotate-45" />
</NuxtLink>
<NuxtLink to="/login" class="group -mb-px -ml-px flex w-full cursor-pointer justify-between gap-2 border border-gray-800 border-opacity-50 p-4 text-xs text-gray-500 transition-all duration-300 ease-in-out hover:border-opacity-100 hover:bg-gray-800/50 hover:text-gray-200">
<span class="text-gray-400">
Login
</span>
<UIcon name="lucide:arrow-right" class="ml-1 inline-block text-gray-400 transition-all duration-300 ease-in-out group-hover:-rotate-45" />
</NuxtLink>
</div>
</div>
<hr class="border-gray-800">
<footer class="mt-6 flex flex-col justify-around gap-8 p-5 sm:flex-row sm:gap-0">
<div class="flex flex-col gap-1">
Expand Down
63 changes: 28 additions & 35 deletions apps/app/app/components/layout/Navbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,47 +3,40 @@ const navigation = getNavigation('home')
</script>

<template>
<div>
<nav class="fixed inset-x-0 top-0 z-50 flex items-center justify-between bg-neutral-900/50 p-4 backdrop-blur-lg sm:px-5 sm:py-2">
<NuxtLink to="/" class="font-newsreader text-2xl font-light italic">
Shelve
</NuxtLink>
<div class="nav-pill">
<NuxtLink
v-for="item in navigation"
:key="item.name"
class="text-sm text-gray-300 hover:text-gray-400"
:to="item.path"
>
{{ item.name }}
</NuxtLink>
</div>
<div class="flex items-center gap-5">
<LandingGithubStar class="hidden sm:flex" />
<AuthState>
<DropdownMenu />
<template #placeholder>
<NuxtLink to="/login" class="btn-primary">
Login
<div class="z-[99]">
<nav class="fixed top-0 flex w-full">
<div class="backdrop" />
<div class="z-50 flex w-full items-center justify-around p-4 sm:px-5 sm:py-2">
<div class="flex gap-2">
<NuxtLink to="/" class="font-newsreader text-2xl font-light italic">
Shelve
</NuxtLink>
<UDivider orientation="vertical" class="mx-2" />
<div class="flex items-center gap-3">
<NuxtLink
v-for="item in navigation"
:key="item.name"
class="font-geist-mono text-sm text-gray-200 hover:text-gray-400"
:to="item.path"
>
{{ item.name }}
</NuxtLink>
</template>
</AuthState>
</div>
</div>
<div class="flex items-center gap-5">
<LandingGithubStar class="hidden sm:flex" />
<AuthState>
<DropdownMenu />
</AuthState>
</div>
</div>
</nav>
</div>
</template>

<style scoped>
.nav-pill {
@apply flex gap-3 sm:gap-5 rounded-full sm:px-6 sm:py-2;
@apply sm:hover:bg-gray-800/50;
@apply border border-transparent sm:hover:border-gray-600/50 hover:shadow-lg;
@apply transition-colors duration-300;
}

.btn-primary {
@apply px-4 py-2 text-sm font-semibold text-white;
@apply bg-neutral-800 hover:bg-neutral-700;
@apply rounded-full shadow-md;
.backdrop {
@apply absolute inset-x-0 top-0 z-40 h-40;
@apply bg-gradient-to-b from-neutral-900 to-transparent;
}
</style>
59 changes: 11 additions & 48 deletions apps/app/app/pages/docs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,22 @@
<script setup lang="ts">
definePageMeta({
colorMode: 'dark',
})
</script>

<template>
<div class="flex h-72 flex-col items-center justify-center gap-2 py-5">
<div class="w-full border-y border-gray-500/20">
<div class="mx-auto max-w-4xl">
<div class="relative -mb-px -ml-px h-40 border border-gray-500/15 border-b-transparent lg:border-t-transparent">
<span class="bottom absolute -bottom-px -left-px size-px" />
<span class="bottom absolute -bottom-px -right-px size-px" />
<span class="bottom absolute -left-px -top-px size-px" />
<span class="bottom absolute -right-px -top-px size-px" />
<div class="encryption absolute left-0 top-0 size-full overflow-hidden break-words font-mono text-xs leading-5 text-gray-400">
GIHXTrTBRIPocF8gMJPAM5dyuwCO7DIqMlrx45EFKa8Ky06RHwDafK1CpxdOLAI6mM8YX4iHsZ188j00gNkbgDYEtrq1S5vaOIxHhALKib3EKVD5tuYf3Ej2QA0R363viNI0tP8RVD4GlLzNPHpBkePL76KLzZrXa6x88wsJN8sslwiKTxEeepv1760YPcdyrfnqv4W4RRv2Fw9f6rBIgzOaBF5Jet4rjo2eIuKCUDkM9t8ZnfvGCzguyoFkTlmLtQuzQKPZLVuPtpbbBOdrUG795uSVFCnFjnJKgHGAiAeGZmu0n1lnfNgOB9t7cLc7Gk7jUfW3aHK3es56mORlQyACrHBDVQjPiBaIbfBBAreNiZAo8NzadXQ28HOHTvdL90GYoqJC9fqitNn0R1CWVJyEqCCKlTZSU2UFhgUNCI7Zzozl7QlZceSE5SrXNjtBnAi0sMiIeJb43o2x2vHQehvUmTaejG3UqETeRxzvg4qhD1qFDkk8y3mwuq31NWDlaszIhhVNnu6NTapPGT9XKXDCMee8QOGnQuBsPEQHCNs3eX3jsZLitOCTTVljHuY8A3AEAiWudJduue5X5PTFSc1UfFt8U1Yhj4qiVQaip3XkfesyBnk7wVaAWUKrKMToGVSyeoD23U1CNibAimwV7TKRpWWGSvXdFclFM6XuigtHlZzSLOE40wY3eEw4rAPeZF30jJMZytpXVc9AsprMpCfoKMbKSPUnDuXCq1nhggY2MTkCdcGkABxsbolIuyYUZMu2Lqt18aNIN1ZudI08ZVJHCX8q2XcPv43nDtjeHE8djSxcxoXb2b0vw4Wc4AuO2Uph0K6fYSXt54nRHit19TkgCi8dhY2PZAfyiULAvmQy6CQYc5Xw8yfSVMtHnNs2kuC1e376penaAMQ1jUozKWJneHjF21aleJWjN2NJ8bMNyfTNIL1ijpGwz6urHGrSyYR94ghvxNxBwZgRJZbx5IVqjwqDxnzAacMBvViVG4UHluE4UaoLPCHkHBrYj6m32mAIjkso2tC3kBu5XmGnAVdz8UzkPzxgtORxHPEisInmi7fgLGywdQ8Zz3Zdh9912kMR9b6MQ3xRFrlZo5gOQYhSSgyH1gIyGAjjcO3O3EptA7CcRsIeaNR5O3NG4iABwLfN1ebEBC6fLMzIDLlSYs8zQwHYsdSZMbb5yoYxvfB7G4rmEQA9FJ2o1kLzk1OTAk4vUKIEt8gfSDxzgROhMjqDoIeLiWgbXLefVRNVDf0mldlPY7oinEnos1JuxfpukoDhQL5aP2e8pqvhnctNHEGyNDtL3nea1JtDOlBic0OriZlTvIRCADyDFWE7otCHnFipuCFMViCR30HM0pzuCAeQdtvChyIe3mXBxIQnbAqgbLQXhhOD79Nyf8wlyT3fWvufGlgJO4jKD0iwerKMeXGQ0lIClU2fsEGfYAno4b2xeDD1mUO78hXABPREdtj38GoIZCNpxN69TLnCqLDG0pIkXxyYDaMmU9C5YnUr81n1xOgVyeH4iJvMF7CQkuYgWAsvwSwcNtIDtU2vjzXORp4VDlRjXDu4SqGbCDvijjn4wCJLJE1mLvv9R5mMOjHDBVdEOjoJuMp7YpVqSIWenC3oLGsJPJl5KarsVxaMnSWTHRw8wDVHNOcXXO9ZGGQGdi31ikeIfZABoUBKmeyBbgepVlCkDy3aytzYiwmX7fosxj1vk6qbji9GbVNEhimXHZR2rFuKBpov1nahPbopBpfaGKY15UoN2pQOtV5oG1MngCxTTqNBu8khxbYDbRDilYYwbiWk
</div>
<div class="relative z-10 ml-4 flex h-full flex-col justify-center">
<h3 class="from-primary-300 to-primary-400 bg-gradient-to-tr bg-clip-text text-2xl font-bold text-transparent sm:text-4xl">
<LandingScrambleText label="The documentation is coming soon" />
</h3>
<p class="max-w-lg text-sm text-gray-300 sm:text-base">
We are working hard to provide you with the best documentation possible.
</p>
</div>
</div>
<CrossedDiv encrypted-text>
<h3 class="main-gradient font-geist-mono text-2xl font-bold sm:text-4xl">
<LandingScrambleText label="// The documentation is coming soon" />
</h3>
<p class="max-w-lg text-sm leading-6 text-gray-300">
We are working hard to provide you with the best documentation possible.
</p>
</CrossedDiv>
</div>
</div>
</div>
</template>

<style scoped>
.bottom:before {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
content: "";
width: 1px;
height: 9px;
position: absolute;
top: -4px;
}

.bottom:after {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
content: "";
width: 9px;
height: 1px;
position: absolute;
left: -4px;
}

.encryption {
--x: 80%;
--y: 0%;
transition: .5s;
-webkit-mask-image: radial-gradient(300px circle at var(--x) var(--y), #000 10%, rgba(0, 0, 0, .25), transparent);
mask-image: radial-gradient(300px circle at var(--x) var(--y), #000 10%, rgba(0, 0, 0, .25), transparent);
opacity: .4;
}
</style>
Loading