Profile Card

1import * as React from "react";
2import { ArrowUpRight, Dribbble, Github, MapPin } from "lucide-react";
3 
4import { Avatar, AvatarFallback } from "@/components/ui/avatar";
5import { Badge } from "@/components/ui/badge";
6import { Button } from "@/components/ui/button";
7import { cn } from "@/lib/utils";
8 
9function ProfileCard01({
10  className,
11  ...props
12}: React.ComponentProps<"article">) {
13  return (
14    <article
15      className={cn(
16        "relative mx-auto w-full max-w-lg overflow-hidden rounded-[2rem] border border-foreground/10 bg-background p-6 shadow-[0_30px_90px_-65px_var(--foreground)] sm:p-8",
17        className,
18      )}
19      data-slot="profile-card"
20      {...props}
21    >
22      <div className="absolute inset-x-0 top-0 h-28 bg-[radial-gradient(circle_at_20%_0%,color-mix(in_oklch,var(--primary)_24%,transparent),transparent_66%)]" />
23      <div className="relative flex items-start justify-between gap-5">
24        <Avatar className="size-20 border-4 border-background shadow-lg">
25          <AvatarFallback className="text-lg">AL</AvatarFallback>
26        </Avatar>
27        <Badge variant="success">Available</Badge>
28      </div>
29      <div className="relative mt-5">
30        <h2 className="text-2xl font-semibold tracking-[-.035em]">
31          Avery Lane
32        </h2>
33        <p className="mt-1 text-sm font-medium text-primary">
34          Independent product designer
35        </p>
36        <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
37          I help ambitious teams turn complex products into clear, memorable
38          experiences.
39        </p>
40        <p className="mt-4 flex items-center gap-2 text-xs text-muted-foreground">
41          <MapPin className="size-3.5" /> Copenhagen · Working worldwide
42        </p>
43      </div>
44      <div className="relative mt-6 flex items-center gap-2">
45        <Button className="flex-1">
46          Start a project <ArrowUpRight />
47        </Button>
48        <Button aria-label="GitHub" size="icon" variant="outline">
49          <Github />
50        </Button>
51        <Button aria-label="Dribbble" size="icon" variant="outline">
52          <Dribbble />
53        </Button>
54      </div>
55    </article>
56  );
57}
58 
59export { ProfileCard01 };