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

85
app/pages/index.vue
View File

@ -1,62 +1,35 @@
<script setup lang="ts">
import { Search, SlidersHorizontal } from 'lucide-vue-next';
import HeroSection from '@/components/ui/internal/HeroSection.vue';
</script>
<template>
<div class="space-y-16">
<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>
<HeroSection />
<div class="flex flex-col items-center m-8 gap-8">
<div class="flex gap-4 max-w-1/4 md:min-w-3xl sm:min-w-64">
<InputGroup>
<InputGroupInput placeholder="Search" />
<InputGroupAddon>
<Search />
</InputGroupAddon>
</InputGroup>
<Button>
<SlidersHorizontal />
</Button>
</div>
<div class="w-full">
<div class="flex w-full justify-between">
<Button variant="ghost" class="text-2xl font-bold tracking-tight">
TRENDING NOW
</Button>
<Button variant="ghost" class="text-muted-foreground text-xl font-semibold tracking-tight">
View all
</Button>
</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>
Test
</div>
</div>
</div>