Card

1import Image from 'next/image'
2import Link from 'next/link'
3import { ExternalLink } from 'lucide-react'
4
5import {
6    Card,
7    CardContent,
8    CardDescription,
9    CardFooter,
10    CardHeader,
11    CardTitle,
12} from '@/components/ui/card'
13
14export function CardDemo() {
15    return (
16        <Card className="w-full max-w-sm">
17            <CardHeader>
18                <div className="size-10 shrink-0 overflow-hidden rounded-lg bg-gray-100">
19                    <Image
20                        src="/images/profile1.png"
21                        alt="Avatar"
22                        width={40}
23                        height={40}
24                    />
25                </div>
26                <div className="space-y-1">
27                    <CardTitle>Sbtheme</CardTitle>
28                    <CardDescription>sbtheme.com</CardDescription>
29                </div>
30            </CardHeader>
31            <CardContent className="space-y-2 text-sm">
32                <p>
33                    Build modern, beautiful websites with ease, regardless of
34                    your experience.
35                </p>
36                <p>
37                    With our tools, you can create responsive layouts, integrate
38                    animations, add interactive components, and customize every
39                    element to fit your brand.
40                </p>
41            </CardContent>
42            <CardFooter>
43                <Link
44                    href="https://sbthemes.com/"
45                    target="_blank"
46                    className="text-primary hover:text-secondary flex items-center gap-1.5 text-sm font-medium transition"
47                >
48                    Visit our website
49                    <ExternalLink className="size-4" />
50                </Link>
51            </CardFooter>
52        </Card>
53    )
54}
55

1import Link from 'next/link'
2import { MoveRight } from 'lucide-react'
3
4import { Button } from '@/components/ui/button'
5import {
6    Card,
7    CardContent,
8    CardDescription,
9    CardImage,
10    CardTitle,
11} from '@/components/ui/card'
12
13export function CardWithImage() {
14    return (
15        <Card className="max-w-xs">
16            <CardImage
17                src="https://images.unsplash.com/photo-1587698530300-0d51916a1c8c?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
18                alt="Card"
19                width={400}
20                height={250}
21            />
22            <CardContent>
23                <CardTitle className="mb-1.5 text-lg">
24                    Modern Website Template
25                </CardTitle>
26                <CardDescription>
27                    Build modern, beautiful websites with ease, regardless of
28                    your experience.
29                </CardDescription>
30
31                <Button
32                    type="button"
33                    size={'sm'}
34                    asChild
35                    className="group/icon mt-3"
36                >
37                    <Link href="https://sbtheme.com" target="_blank">
38                        Read more
39                        <MoveRight className="transition group-hover/icon:translate-x-0.5" />
40                    </Link>
41                </Button>
42            </CardContent>
43        </Card>
44    )
45}
46