"use client"; 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, Headset, Infinity, LightbulbIcon } from "lucide-react"; import Iconss from "../ui/icons"; import { useRouter } from "next/navigation"; const happyMonkey = Happy_Monkey({ preload: true, weight: ["400"], subsets: ["latin"] }); const HeroCards = () => { const router = useRouter(); 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: () => router.push("/downloads"), features: [ { title: "Unlimited Projects", icons: }, { title: "Priority Support", icons: ( ) }, { title: "Free Updates", icons: } ], 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 (
{/* Twitter First Top left */} acrosett
acrosett @acrosettdev
My pleasure, SVR.js is an awesome project! 🔥🚀
{/* Socials Second top right */} Socials

{cards.aboutCard.description}

{/* Pricings Bottom left */} {cards.pricingCard.planName} {cards.pricingCard.badgeTitle}
{cards.pricingCard.pricePerMonth} /month
{cards.pricingCard.description}

{cards.pricingCard.features.map((benefit) => ( {benefit.icons}

{benefit.title}

))}
Curly arrow {cards.pricingCard.curlyText}
{/* Service */}
{cards.serviceCard.title} {cards.serviceCard.description}
); }; export default HeroCards;