Card

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction } from "@/components/optics/card";import { Button } from "@/components/optics/button";import { Bell } from "lucide-react";<div className="flex items-stretch justify-center gap-4">  <Card className="w-[350px]">    <CardHeader>      <CardTitle>        Notifications      </CardTitle>      <CardDescription>        You have 3 unread messages.      </CardDescription>      <CardAction>        <Button          size="icon-sm"          variant="ghost"        >          <Bell />        </Button>      </CardAction>    </CardHeader>    <CardContent>      <p className="text-sm">        This is a sample card with header, content, and footer sections.      </p>    </CardContent>    <CardFooter>      <Button className="w-full">        Mark all as read      </Button>    </CardFooter>  </Card>  <Card    className="w-[350px]"    decorations  >    <CardHeader>      <CardTitle>        Notifications      </CardTitle>      <CardDescription>        You have 3 unread messages.      </CardDescription>      <CardAction>        <Button          size="icon-sm"          variant="ghost"        >          <Bell />        </Button>      </CardAction>    </CardHeader>    <CardContent>      <p className="text-sm">        This is a sample card with header, content, and footer sections.      </p>    </CardContent>    <CardFooter      background      className="justify-end"    >      <Button size="lg">        Mark all as read      </Button>    </CardFooter>  </Card></div>