Spaces:
Runtime error
Runtime error
File size: 5,777 Bytes
64c5e26 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 |
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
import { Badge } from "./ui/badge";
import { Button, buttonVariants } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
CardFooter,
} from "@/components/ui/card";
import { Check, Linkedin } from "lucide-react";
import { LightBulbIcon } from "./Icons";
import { GitHubLogoIcon } from "@radix-ui/react-icons";
export const HeroCards = () => {
return (
<div className="hidden lg:flex flex-row flex-wrap gap-8 relative w-[700px] h-[500px]">
{/* Testimonial */}
<Card className="absolute w-[340px] -top-[15px] drop-shadow-xl shadow-black/10 dark:shadow-white/10">
<CardHeader className="flex flex-row items-center gap-4 pb-2">
<Avatar>
<AvatarImage
alt=""
src="https://github.com/shadcn.png"
/>
<AvatarFallback>SH</AvatarFallback>
</Avatar>
<div className="flex flex-col">
<CardTitle className="text-lg">John Doe React</CardTitle>
<CardDescription>@john_doe</CardDescription>
</div>
</CardHeader>
<CardContent>This landig page is awesome!</CardContent>
</Card>
{/* Team */}
<Card className="absolute right-[20px] top-4 w-80 flex flex-col justify-center items-center drop-shadow-xl shadow-black/10 dark:shadow-white/10">
<CardHeader className="mt-8 flex justify-center items-center pb-2">
<img
src="https://i.pravatar.cc/150?img=58"
alt="user avatar"
className="absolute grayscale-[0%] -top-12 rounded-full w-24 h-24 aspect-square object-cover"
/>
<CardTitle className="text-center">Leo Miranda</CardTitle>
<CardDescription className="font-normal text-primary">
Frontend Developer
</CardDescription>
</CardHeader>
<CardContent className="text-center pb-2">
<p>
I really enjoy transforming ideas into functional software that
exceeds expectations
</p>
</CardContent>
<CardFooter>
<div>
<a
href="https://github.com/leoMirandaa"
target="_blank"
className={buttonVariants({
variant: "ghost",
size: "sm",
})}
>
<span className="sr-only">Github icon</span>
<GitHubLogoIcon className="w-5 h-5" />
</a>
<a
href="https://twitter.com/leo_mirand4"
target="_blank"
className={buttonVariants({
variant: "ghost",
size: "sm",
})}
>
<span className="sr-only">X icon</span>
<svg
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
className="fill-foreground w-5 h-5"
>
<title>X</title>
<path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
</svg>
</a>
<a
href="https://www.linkedin.com/"
target="_blank"
className={buttonVariants({
variant: "ghost",
size: "sm",
})}
>
<span className="sr-only">Linkedin icon</span>
<Linkedin size="20" />
</a>
</div>
</CardFooter>
</Card>
{/* Pricing */}
<Card className="absolute top-[150px] left-[50px] w-72 drop-shadow-xl shadow-black/10 dark:shadow-white/10">
<CardHeader>
<CardTitle className="flex item-center justify-between">
Free
<Badge
variant="secondary"
className="text-sm text-primary"
>
Most popular
</Badge>
</CardTitle>
<div>
<span className="text-3xl font-bold">$0</span>
<span className="text-muted-foreground"> /month</span>
</div>
<CardDescription>
Lorem ipsum dolor sit, amet ipsum consectetur adipisicing elit.
</CardDescription>
</CardHeader>
<CardContent>
<Button className="w-full">Start Free Trial</Button>
</CardContent>
<hr className="w-4/5 m-auto mb-4" />
<CardFooter className="flex">
<div className="space-y-4">
{["4 Team member", "4 GB Storage", "Upto 6 pages"].map(
(benefit: string) => (
<span
key={benefit}
className="flex"
>
<Check className="text-green-500" />{" "}
<h3 className="ml-2">{benefit}</h3>
</span>
)
)}
</div>
</CardFooter>
</Card>
{/* Service */}
<Card className="absolute w-[350px] -right-[10px] bottom-[35px] drop-shadow-xl shadow-black/10 dark:shadow-white/10">
<CardHeader className="space-y-1 flex md:flex-row justify-start items-start gap-4">
<div className="mt-1 bg-primary/20 p-1 rounded-2xl">
<LightBulbIcon />
</div>
<div>
<CardTitle>Light & dark mode</CardTitle>
<CardDescription className="text-md mt-2">
Lorem ipsum dolor sit amet consect adipisicing elit. Consectetur
natusm.
</CardDescription>
</div>
</CardHeader>
</Card>
</div>
);
};
|