anyame/anyame-frontend-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add theme selection, dark/light mode selection

Browse Source
This commit is contained in:
bivashy
2026-01-15 02:01:41 +05:00
parent 3cfaad10cf
commit c0524494e9
94 changed files with 8035 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
app/components/ui/internal/HeroSection.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<div class="flex flex-col items-center gap-4 mt-32">
<h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance">
The next-generation anime platform
</h1>
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight text-center max-w-2/5">
Track, share, and discover your favorite anime and manga with Anyame
</h3>
</div>
<div class="flex items-center justify-center">
<div class="grid grid-cols-2 gap-16">
<div class="flex max-w-96 gap-8">
<NuxtImg src="discover-icon.svg" width="96" height="96" />
<div>
<h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
Discover your obsessions
</h4>
<p class="font-semibold text-sm text-muted-foreground">
What are your highest rated genres or most watched voice actors?
Follow your watching habits over time with in-depth statistics.
</p>
</div>
</div>
<div class="flex max-w-96 gap-8">
<NuxtImg src="anywhere-icon.svg" width="96" height="96" />
<div>
<h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
Bring Anyame anywhere
</h4>
<p class="font-semibold text-sm text-muted-foreground">
Keep track of your progress on-the-go with one of many Anyame apps across iOS, Android,
macOS, and Windows.
</p>
</div>
</div>
<div class="flex max-w-96 gap-8">
<NuxtImg src="conversation-icon.svg" width="96" height="96" />
<div>
<h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
Join the conversation
</h4>
<p class="font-semibold text-sm text-muted-foreground">
Share your thoughts with our thriving community, make friends, socialize, and receive
recommendations.
</p>
</div>
</div>
<div class="flex max-w-96 gap-8">
<NuxtImg src="tweak-icon.svg" width="96" height="96" />
<div>
<h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
Tweak it to your liking
</h4>
<p class="font-semibold text-sm text-muted-foreground">
Customize your scoring system, title format, color scheme, and much more! Also, we have a
dark mode.
</p>
</div>
</div>
</div>
</div>
</template>