extended-17

1<script setup lang="ts">
2import { Card, CardContent } from "@/registry/default/ui/card";
3import { Separator } from "@/registry/default/ui/separator";
4import { LucideMail, LucideStar, LucideVerified } from "lucide-vue-next";
5</script>
6 
7<template>
8  <Card class="rounded-4xl py-4">
9    <CardContent class="flex flex-col gap-4 px-4">
10      <img src="/img/card-avatar.jpg" class="aspect-square w-full rounded-2xl object-cover" />
11      <div class="flex flex-col gap-2">
12        <div class="flex items-center gap-2">
13          <p class="text-lg/none font-semibold">Marcus Wilson</p>
14          <LucideVerified class="size-5 text-blue-600" />
15        </div>
16        <p class="text-foreground/80 text-sm/relaxed">
17          I'm a Brand Designer who focuses on clarity & emotional connection.
18        </p>
19      </div>
20      <div class="flex items-center justify-around gap-2">
21        <div class="flex flex-col items-center gap-1 text-center">
22          <div class="flex items-center gap-1">
23            <LucideStar class="size-5 text-yellow-500" />
24            <p class="text-base/none font-semibold">4.8</p>
25          </div>
26          <span class="text-foreground/70 text-xs/none font-medium">Rating</span>
27        </div>
28        <Separator orientation="vertical" class="data-[orientation=vertical]:h-8" />
29        <div class="flex flex-col items-center gap-1 text-center">
30          <p class="text-base/none font-semibold">$42K+</p>
31          <span class="text-foreground/70 text-xs/none font-medium">Earned</span>
32        </div>
33        <Separator orientation="vertical" class="data-[orientation=vertical]:h-8" />
34        <div class="flex flex-col items-center gap-1 text-center">
35          <p class="text-base/none font-semibold">$45/hr</p>
36          <span class="text-foreground/70 text-xs/none font-medium">Rate</span>
37        </div>
38      </div>
39      <div class="flex gap-2">
40        <Button size="lg" class="w-full flex-1 rounded-full">
41          <LucideMail class="size-4" />
42          <span>Contact me</span>
43        </Button>
44      </div>
45    </CardContent>
46  </Card>
47</template>