Skip to content

Commit 261000d

Browse files
davidmyersdevdavidmyersdev
committed
Update app title and description
1 parent 2908983 commit 261000d

File tree

4 files changed

+60
-44
lines changed

4 files changed

+60
-44
lines changed

‎README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
[![Donate](https://img.shields.io/badge/donate-FF5F5F?style=for-the-badge&logo=ko-fi&logoColor=white)](https://voracious.link/donate)
55
# Octo
66

7-
Unlock the full potential of your accumulated knowledge. Sign up at [octo.app](https://octo.app).
7+
A local-first knowledge management app for deep work.
8+
9+
Get started for free at [octo.app](https://octo.app).
810

911
<a href="https://octo.app">
1012
<picture>

‎assets/waves.svg

Lines changed: 7 additions & 0 deletions
Loading

‎nuxt.config.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -41,18 +41,18 @@ export default defineNuxtConfig({
4141
{ href: '/img/icons/icon-maskable-192x192.png', rel: 'apple-touch-icon' },
4242
],
4343
meta: [
44-
{ content: 'Unlock the full potential of your accumulated knowledge.', name: 'description' },
44+
{ content: 'We swim in an ocean of knowledge. Discover its pearls of wisdom with Octo.', name: 'description' },
4545
{ content: '#121212', name: 'theme-color' },
4646
{ property: 'og:url', content: 'https://octo.app' },
4747
{ property: 'og:type', content: 'website' },
48-
{ property: 'og:title', content: 'Octo | Write meaningful notes' },
49-
{ property: 'og:description', content: 'Unlock the full potential of your accumulated knowledge.' },
48+
{ property: 'og:title', content: 'Octo | Your home for deep work' },
49+
{ property: 'og:description', content: 'We swim in an ocean of knowledge. Discover its pearls of wisdom with Octo.' },
5050
{ property: 'og:image', content: 'https://octo.app/img/og.png' },
5151
{ name: 'twitter:card', content: 'summary_large_image' },
5252
{ property: 'twitter:domain', content: 'octo.app' },
5353
{ property: 'twitter:url', content: 'https://octo.app' },
54-
{ name: 'twitter:title', content: 'Octo | Write meaningful notes' },
55-
{ name: 'twitter:description', content: 'Unlock the full potential of your accumulated knowledge.' },
54+
{ name: 'twitter:title', content: 'Octo | Your home for deep work' },
55+
{ name: 'twitter:description', content: 'We swim in an ocean of knowledge. Discover its pearls of wisdom with Octo.' },
5656
{ name: 'twitter:image', content: 'https://octo.app/img/og.png' },
5757
],
5858
script: [
@@ -283,8 +283,8 @@ export default defineNuxtConfig({
283283
runtimeConfig: {
284284
public: {
285285
appName: 'Octo',
286-
appTitle: 'Write meaningful notes',
287-
appSubtitle: 'Unlock the full potential of your accumulated knowledge',
286+
appTitle: 'Your home for deep work',
287+
appSubtitle: 'We swim in an ocean of knowledge. Discover its pearls of wisdom with Octo.',
288288
cdnUrl: '',
289289
discordInviteLink: '',
290290
fathomEventAccountRegistration: '',

‎pages/index.vue

Lines changed: 43 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ definePageMeta({ layout: 'minimal' })
77
const { isDark, isLight } = useAppearance()
88
99
const { user } = useUser()
10-
const { public: { appSubtitle, appTitle, appName, fathomEventCtaSignUpNow, firebaseDisabled } } = useConfig()
10+
const { public: { fathomEventCtaSignUpNow, firebaseDisabled } } = useConfig()
1111
const isCtaRelevant = computed(() => !(user.value.id || firebaseDisabled))
1212
1313
const ctaLabel = computed(() => isCtaRelevant.value ? 'Get started for free' : 'Open the app')
@@ -21,10 +21,6 @@ const ctaHandler = () => () => {
2121
}
2222
}
2323
24-
useHead({
25-
titleTemplate: (title) => `${appName} - ${title}`,
26-
})
27-
2824
onMounted(() => {
2925
window.localStorage.setItem('octo/welcome/v1', '1')
3026
})
@@ -37,13 +33,13 @@ onMounted(() => {
3733
<div class="flex items-center text-center gap-8 lg:gap-16 py-8 lg:py-16">
3834
<div class="w-full flex flex-col justify-between gap-12">
3935
<div class="flex flex-col items-center gap-8 w-full">
40-
<div class="flex flex-col gap-4">
41-
<h1 class="text-4xl lg:text-5xl font-semibold">
42-
{{ appTitle }}
43-
</h1>
44-
<p class="text-2xl lg:text-2xl" v-html="appSubtitle" />
45-
</div>
46-
<CoreButton :as="CoreLink" :to="ctaRoute" class="bg-brand hover:bg-brand transition whitespace-nowrap justify-center gap-3 mt-1 text-black text-xl py-2 px-8 hover:scale-110 focus:scale-110" @click="ctaHandler">
36+
<h1 class="text-4xl lg:text-5xl font-bold">
37+
Your home for <span class="text-blue-600">deep work</span>
38+
</h1>
39+
<p class="text-xl lg:text-2xl">
40+
We swim in an ocean of knowledge.<br>Discover its pearls of wisdom with Octo.
41+
</p>
42+
<CoreButton :as="CoreLink" :to="ctaRoute" class="bg-blue-700 hover:bg-blue-700 transition whitespace-nowrap justify-center gap-3 mt-1 text-white text-xl py-2 px-8 hover:scale-110 focus:scale-110" @click="ctaHandler">
4743
<span class="flex items-center gap-3 align-center">
4844
<span>{{ ctaLabel }}</span>
4945
<Icon name="ArrowRight" />
@@ -54,41 +50,43 @@ onMounted(() => {
5450
</div>
5551
</div>
5652
</section>
57-
<section class="p-4 lg:p-8">
58-
<div class="container mx-auto max-w-6xl">
59-
<picture v-if="isDark">
60-
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(orientation: portrait)" srcset="~/assets/screenshot-mobile-dark.png" width="1080" height="2400">
61-
<img alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." src="~/assets/screenshot-dark.png" width="1600" height="900" class="max-lg:bg-black max-lg:border-8 max-lg:border-black max-lg:overflow-hidden max-lg:rounded-2xl w-full">
62-
</picture>
63-
<picture v-else-if="isLight">
64-
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(orientation: portrait)" srcset="~/assets/screenshot-mobile-light.png" width="1080" height="2400">
65-
<img alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." src="~/assets/screenshot-light.png" width="1600" height="900" class="max-lg:bg-black max-lg:border-8 max-lg:border-black max-lg:overflow-hidden max-lg:rounded-2xl w-full">
66-
</picture>
67-
<picture v-else>
68-
<!-- mobile -->
69-
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(orientation: portrait) and (prefers-color-scheme: dark)" srcset="~/assets/screenshot-mobile-dark.png" width="1080" height="2400">
70-
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(orientation: portrait) and (prefers-color-scheme: light)" srcset="~/assets/screenshot-mobile-light.png" width="1080" height="2400">
71-
<!-- desktop -->
72-
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(prefers-color-scheme: dark)" srcset="~/assets/screenshot-dark.png" width="1600" height="900">
73-
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(prefers-color-scheme: light)" srcset="~/assets/screenshot-light.png" width="1600" height="900">
74-
<!-- fallback -->
75-
<img alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." src="~/assets/screenshot-dark.png" width="1600" height="900" class="max-lg:bg-black max-lg:border-8 max-lg:border-black max-lg:overflow-hidden max-lg:rounded-2xl w-full">
76-
</picture>
77-
</div>
53+
<section class="hero">
54+
<section class="p-4 lg:p-8">
55+
<div class="container mx-auto max-w-6xl">
56+
<picture v-if="isDark">
57+
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(orientation: portrait)" srcset="~/assets/screenshot-mobile-dark.png" width="1080" height="2400">
58+
<img alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." src="~/assets/screenshot-desktop-dark.png" width="1600" height="900" class="w-full">
59+
</picture>
60+
<picture v-else-if="isLight">
61+
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(orientation: portrait)" srcset="~/assets/screenshot-mobile-light.png" width="1080" height="2400">
62+
<img alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." src="~/assets/screenshot-desktop-light.png" width="1600" height="900" class="w-full">
63+
</picture>
64+
<picture v-else>
65+
<!-- mobile -->
66+
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(orientation: portrait) and (prefers-color-scheme: dark)" srcset="~/assets/screenshot-mobile-dark.png" width="1080" height="2400">
67+
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(orientation: portrait) and (prefers-color-scheme: light)" srcset="~/assets/screenshot-mobile-light.png" width="1080" height="2400">
68+
<!-- desktop -->
69+
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(prefers-color-scheme: dark)" srcset="~/assets/screenshot-desktop-dark.png" width="1600" height="900">
70+
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(prefers-color-scheme: light)" srcset="~/assets/screenshot-desktop-light.png" width="1600" height="900">
71+
<!-- fallback -->
72+
<img alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." src="~/assets/screenshot-desktop-dark.png" width="1600" height="900" class="w-full">
73+
</picture>
74+
</div>
75+
</section>
7876
</section>
7977
<section>
8078
<CoreContainer class="p-4 lg:p-8">
8179
<CoreCard outline>
8280
<CoreProse class="max-w-none">
83-
<h2>We care about privacy</h2>
81+
<h2>Privacy-first by design</h2>
8482
<p>In today's hyper-connected world, your privacy matters more than ever. Octo has been built from the ground up with privacy as a core tenet. We use the Web Crypto API to support client-side (end-to-end) encryption so that your data can be securely and privately synced across all of your devices. That means that no one, not even people on our team, can access your data.</p>
8583
</CoreProse>
8684
</CoreCard>
8785
</CoreContainer>
8886
<CoreContainer class="p-4 lg:p-8">
8987
<CoreCard outline>
9088
<CoreProse class="max-w-none">
91-
<h2>Your second brain is always accessible</h2>
89+
<h2>Available wherever you are</h2>
9290
<p>Thanks to modern browser APIs, such as Service Workers and IndexedDB, web apps can be made to function entirely offline just as native apps can. Octo takes advantage of these APIs to make sure you always have access to your second brain. All you need is a device with a web browser.</p>
9391
<p>We understand the pain of vendor lock-in, so we maintain import and export tools to help you move your data into or out of Octo.</p>
9492
</CoreProse>
@@ -113,7 +111,7 @@ onMounted(() => {
113111
<div class="flex items-center text-center gap-8 lg:gap-16 py-8 lg:py-16">
114112
<div class="w-full flex flex-col justify-between gap-12">
115113
<div class="flex flex-col items-center gap-8 w-full">
116-
<CoreButton :as="CoreLink" :to="ctaRoute" class="bg-brand hover:bg-brand transition whitespace-nowrap justify-center gap-3 mt-1 text-black text-xl py-2 px-8 hover:scale-110 focus:scale-110" @click="ctaHandler">
114+
<CoreButton :as="CoreLink" :to="ctaRoute" class="bg-blue-700 hover:bg-blue-700 transition whitespace-nowrap justify-center gap-3 mt-1 text-white text-xl py-2 px-8 hover:scale-110 focus:scale-110" @click="ctaHandler">
117115
<span class="flex items-center gap-3 align-center">
118116
<span>{{ ctaLabel }}</span>
119117
<Icon name="ArrowRight" />
@@ -126,3 +124,12 @@ onMounted(() => {
126124
</section>
127125
</div>
128126
</template>
127+
128+
<style>
129+
.hero {
130+
background-image: url('~/assets/waves.svg');
131+
background-repeat: no-repeat;
132+
background-position: top;
133+
background-size: 100% 100%;
134+
}
135+
</style>

0 commit comments

Comments
 (0)