a login page with goole and github login buttons

Add a listing of existing product reviews before the form

help me with a floating squares with images for my front page. They shouldd follow a specific pattern but rather be distributed to impress the user

<script setup lang="ts"> import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card' import { Button } from '@/components/ui/button' import { MailIcon } from 'lucide-vue-next' import { useSidebar } from '@/components/ui/sidebar' import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible' import { onMounted, ref } from 'vue' import type { MenuAdmin } from '@/types/menuAdmin' import { getMenuAdmin } from '@/services/module/api' import MenuAdminIcon from '@/components/icons/MenuAdminIcon.vue' const { open } = useSidebar() const menu = ref<MenuAdmin[]>([]) onMounted(async () => { const { data } = await getMenuAdmin() menu.value = data }) </script> <template> <li class="w-full inline-block" v-for="(item, index) in menu" :key="index"> <HoverCard v-if="!open" :open-delay="300"> <HoverCardTrigger> <Button variant="ghost"> <MenuAdminIcon class="h-4 w-4 mr-2" v-if="item.icon" :name="item.icon" /> </Button> </HoverCardTrigger> <HoverCardContent align="center" side="right" class="p-2"> <Button variant="ghost" class="w-full justify-start" v-for="(child, index) in item.children" :key="index" > {{ child.title }} </Button> </HoverCardContent> </HoverCard> <Collapsible v-else> <CollapsibleTrigger class="w-full justify-start"> <Button variant="ghost" class="w-full justify-start"> <MenuAdminIcon class="h-4 w-4 mr-2" v-if="item.icon" :name="item.icon" /> {{ item.title }} </Button> </CollapsibleTrigger> <CollapsibleContent v-for="(child, index) in item.children" :key="index"> <Button variant="ghost" class="w-full justify-start"> {{ child.title }} </Button> </CollapsibleContent> </Collapsible> </li> </template>

<script setup lang="ts"> import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible' import { MailIcon } from 'lucide-vue-next' import { Button } from '@/components/ui/button' import { useSidebar } from '@/components/ui/sidebar' const { open } = useSidebar() </script> <template> <Collapsible class="space-y-2"> <CollapsibleTrigger as-child> <li class="w-full justify-start"> <MailIcon class="w-4 h-4" /> <span v-if="open">Mail</span> </li> </CollapsibleTrigger> <CollapsibleContent class="space-y-2"> <Button variant="ghost" class="w-full justify-start"> @radix-ui/colors</Button> </CollapsibleContent> </Collapsible> </template> fix the ui better, will only show the icon when closed, when hovering over the icon will show a popup inside a nested menu

写一个app下载界面

un dashboard moderne

try again

bien. Les tags doivent pouvoir être sélectionner avec haut et bas, mais aussi avec TAB, ESPACE et ENTER. ECHAP permet de sortir du composant. C'est important pour l'accessibilité

non je veux dire, un carré de boutons : deux en bas et deux en haut, les uns sur les autres

nice. The cards don't need any footer, but they'll have butons on the right. The tabs content is some more cards

A login page

change the gradient, it looks with a lot of vertical lines, make it much more smoother also make it darker (the background)

a login page

a login page