extended-18

1<script setup lang="ts">
2import { Button } from "@/registry/default/ui/button";
3import { Card, CardContent } from "@/registry/default/ui/card";
4import { Separator } from "@/registry/default/ui/separator";
5import { LucideBookmark, LucideMail, LucideStar, LucideVerified } from "lucide-vue-next";
6</script>
7 
8<template>
9  <Card class="relative overflow-hidden rounded-4xl p-0">
10    <img
11      src="/img/card-avatar.jpg"
12      class="absolute inset-0 h-full w-full rounded-2xl object-cover"
13    />
14    <div
15      class="absolute inset-0 h-full w-full rounded-2xl bg-linear-180 from-transparent from-40% to-black/90 to-80%"
16    ></div>
17    <CardContent class="relative flex flex-col gap-4 p-4">
18      <div aria-hidden="true" class="aspect-square w-full"></div>
19 
20      <div class="flex flex-col gap-2">
21        <div class="flex items-center gap-2">
22          <p class="text-lg/none font-semibold text-white">Marcus Wilson</p>
23          <LucideVerified class="size-5 text-blue-600" />
24        </div>
25        <p class="text-sm/relaxed text-white">
26          I'm a Brand Designer who focuses on clarity & emotional connection.
27        </p>
28      </div>
29      <div class="flex items-center justify-around gap-2">
30        <div class="flex flex-col items-center gap-1 text-center">
31          <div class="flex items-center gap-1">
32            <LucideStar class="size-5 text-yellow-400" />
33            <p class="text-base/none font-semibold text-white">4.8</p>
34          </div>
35          <span class="text-xs/none font-medium text-gray-200">Rating</span>
36        </div>
37        <Separator orientation="vertical" class="bg-white/20 data-[orientation=vertical]:h-8" />
38        <div class="flex flex-col items-center gap-1 text-center">
39          <p class="text-base/none font-semibold text-white">$42K+</p>
40          <span class="text-xs/none font-medium text-gray-200">Earned</span>
41        </div>
42        <Separator orientation="vertical" class="bg-white/20 data-[orientation=vertical]:h-8" />
43        <div class="flex flex-col items-center gap-1 text-center">
44          <p class="text-base/none font-semibold text-white">$45/hr</p>
45          <span class="text-xs/none font-medium text-gray-200">Rate</span>
46        </div>
47      </div>
48      <div class="flex gap-2">
49        <Button variant="outline" size="lg" class="w-full flex-1 rounded-full">
50          <LucideMail class="size-4" />
51          <span>Get in touch</span>
52        </Button>
53// … truncated