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"; 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: , }, { 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 */} Proxy

Proxy @proxyxd_s

Svrjs has the best server side rendering{" "} #SVRJSONTOP {/* Socials Second top right */} Socials

{cards.aboutCard.description}

X icon

Mastodon icon

Bluesky icon

Odysee icon

{/* 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}

))}

{cards.pricingCard.curlyText}

{/* Service */}

{cards.serviceCard.title} {cards.serviceCard.description}

); }; export default HeroCards;