svrjs-nextjs-website/components/shared/HeroCards.tsx

191 lines
6.4 KiB
TypeScript
Raw Normal View History

2024-06-15 14:55:33 +02:00
import { BorderBeam } from "@/components/ui/border-beam";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button, buttonVariants } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import Image from "next/image";
import { Happy_Monkey } from "next/font/google";
import {
ArchiveRestore,
Github,
Headset,
Infinity,
LightbulbIcon,
Linkedin,
Twitter,
} from "lucide-react";
import Link from "next/link";
2024-06-15 20:04:12 +02:00
import Iconss from "../ui/icons";
2024-06-15 14:55:33 +02:00
const happyMonkey = Happy_Monkey({
preload: true,
weight: ["400"],
subsets: ["latin"],
});
const HeroCards = () => {
const cards = {
aboutCard: {
description:
"Discover more about our services and offerings. We aim to provide the best experience for our users.",
socialLinks: {
x: "https://x.com/SVR_JS",
Mastodon: "https://mastodon.social/@svrjs",
Bluesky: "https://bsky.app/profile/svrjs.org",
Odysee: "https://odysee.com/@SVRJS",
},
},
pricingCard: {
planName: "Pro Plan",
badgeTitle: "Popular",
pricePerMonth: "$0",
description:
"Get the best features and priority support with our Pro Plan.",
primaryButtonText: "Download SVR Now",
onPrimaryButtonClick: () => alert("Plan chosen"),
features: [
{
title: "Unlimited Projects",
icons: <Infinity className="rounded-full" width={25} height={25} />,
},
{
title: "Priority Support",
icons: (
<ArchiveRestore className="rounded-full" width={25} height={25} />
),
},
{
title: "Free Updates",
icons: <Headset className="rounded-full" width={25} height={25} />,
},
],
curlyText: "Best Value!",
},
serviceCard: {
title: "Our Services",
description:
"We offer a variety of services to cater to your needs, including web development, SEO, and more.",
},
};
return (
<div className="hidden lg:flex flex-row flex-wrap gap-8 relative w-[700px] h-[500px]">
{/* Twitter First Top left */}
<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>Proxy</AvatarFallback>
</Avatar>
<div className="flex flex-col">
<CardTitle className="text-lg">Proxy</CardTitle>
<CardDescription>@proxyxd_s</CardDescription>
</div>
</CardHeader>
<CardContent>
Svrjs has the best server side rendering{" "}
<span className="text-sky-400">#SVRJSONTOP</span>
</CardContent>
<BorderBeam className="-z-10" />
</Card>
{/* Socials Second top right */}
<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="flex justify-center items-center pb-2">
<CardTitle className="text-center">Socials</CardTitle>
<CardDescription className="font-medium text-primary"></CardDescription>
</CardHeader>
<CardContent className="text-center text-muted-foreground pb-2">
<p>{cards.aboutCard.description}</p>
</CardContent>
<CardFooter>
2024-06-15 20:04:12 +02:00
<Iconss />
2024-06-15 14:55:33 +02:00
</CardFooter>
<BorderBeam className="-z-10" />
</Card>
{/* Pricings Bottom left */}
<Card className="absolute top-[170px] left-[50px] w-72 drop-shadow-xl shadow-black/10 dark:shadow-white/10">
<CardHeader>
<CardTitle className="flex items-center justify-between">
{cards.pricingCard.planName}
<Badge variant="secondary" className="text-sm text-primary">
{cards.pricingCard.badgeTitle}
</Badge>
</CardTitle>
<div>
<span className="text-3xl font-bold">
{cards.pricingCard.pricePerMonth}
</span>
<span className="text-muted-foreground"> /month</span>
</div>
<CardDescription>{cards.pricingCard.description}</CardDescription>
<Button
size="sm"
className="w-full"
onClick={cards.pricingCard.onPrimaryButtonClick}
>
{cards.pricingCard.primaryButtonText}
</Button>
</CardHeader>
<hr className="w-4/5 m-auto -mt-2 mb-4" />
<CardFooter className="flex">
<div className="space-y-3">
{cards.pricingCard.features.map((benefit) => (
<span
key={benefit.title}
className="inline-flex justify-center items-center gap-x-3"
>
{benefit.icons}
<h3>{benefit.title}</h3>
</span>
))}
</div>
</CardFooter>
<BorderBeam className="-z-10" />
<div className="pointer-events-none dark:invert -scale-x-100 absolute w-36 top-[9.5rem] -left-[7.5rem] inline-flex justify-center items-center gap-1">
<Image
src="/curly-arrow.png"
width={35}
height={35}
alt="Curly arrow"
/>
<span
style={happyMonkey.style}
className="mt-10 font-bold text-black -scale-x-100 text-sm"
>
{cards.pricingCard.curlyText}
</span>
</div>
</Card>
2024-06-15 17:30:51 +02:00
2024-06-15 14:55:33 +02:00
{/* Service */}
<Card className="absolute w-[350px] -right-[10px] bottom-[75px] 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 className="fill-black dark:fill-[#F596D3]" />
</div>
<div>
<CardTitle>{cards.serviceCard.title}</CardTitle>
<CardDescription className="text-md mt-2">
{cards.serviceCard.description}
</CardDescription>
</div>
</CardHeader>
<BorderBeam className="-z-10" />
</Card>
</div>
);
};
export default HeroCards;