<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>
