icon changed
This commit is contained in:
Cypro Freelance
parent
e4f144e93e
commit
7535227245
2 changed files with 206 additions and 215 deletions
|
|
@ -5,193 +5,184 @@ 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,
|
||||
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";
|
||||
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"],
|
||||
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: <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.",
|
||||
},
|
||||
};
|
||||
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: <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={"twitteravatar"}
|
||||
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>
|
||||
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={"twitteravatar"}
|
||||
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>
|
||||
{/* 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>
|
||||
<Iconss />
|
||||
</CardFooter>
|
||||
<BorderBeam className="-z-10" />
|
||||
</Card>
|
||||
<CardContent className="text-center text-muted-foreground pb-2">
|
||||
<p>{cards.aboutCard.description}</p>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Iconss />
|
||||
</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>
|
||||
{/* 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>
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
);
|
||||
{/* 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;
|
||||
|
|
|
|||
|
|
@ -1,58 +1,58 @@
|
|||
"use client"
|
||||
"use client";
|
||||
|
||||
import * as React from "react"
|
||||
import * as AccordionPrimitive from "@radix-ui/react-accordion"
|
||||
import { ChevronDown } from "lucide-react"
|
||||
import * as React from "react";
|
||||
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
||||
import { ChevronDown, PlusCircleIcon, PlusIcon } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Accordion = AccordionPrimitive.Root
|
||||
const Accordion = AccordionPrimitive.Root;
|
||||
|
||||
const AccordionItem = React.forwardRef<
|
||||
React.ElementRef<typeof AccordionPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
|
||||
React.ElementRef<typeof AccordionPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AccordionPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn("border-b", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
AccordionItem.displayName = "AccordionItem"
|
||||
<AccordionPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn("border-b", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
AccordionItem.displayName = "AccordionItem";
|
||||
|
||||
const AccordionTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof AccordionPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
|
||||
React.ElementRef<typeof AccordionPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<AccordionPrimitive.Header className="flex">
|
||||
<AccordionPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
|
||||
</AccordionPrimitive.Trigger>
|
||||
</AccordionPrimitive.Header>
|
||||
))
|
||||
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
|
||||
<AccordionPrimitive.Header className="flex">
|
||||
<AccordionPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-45",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<PlusIcon className="h-5 w-5 shrink-0 transition-transform duration-200" />
|
||||
</AccordionPrimitive.Trigger>
|
||||
</AccordionPrimitive.Header>
|
||||
));
|
||||
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
|
||||
|
||||
const AccordionContent = React.forwardRef<
|
||||
React.ElementRef<typeof AccordionPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
|
||||
React.ElementRef<typeof AccordionPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<AccordionPrimitive.Content
|
||||
ref={ref}
|
||||
className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
|
||||
{...props}
|
||||
>
|
||||
<div className={cn("pb-4 pt-0", className)}>{children}</div>
|
||||
</AccordionPrimitive.Content>
|
||||
))
|
||||
<AccordionPrimitive.Content
|
||||
ref={ref}
|
||||
className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
|
||||
{...props}
|
||||
>
|
||||
<div className={cn("pb-4 pt-0", className)}>{children}</div>
|
||||
</AccordionPrimitive.Content>
|
||||
));
|
||||
|
||||
AccordionContent.displayName = AccordionPrimitive.Content.displayName
|
||||
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
|
||||
|
||||
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
|
||||
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
|
||||
|
|
|
|||
Loading…
Reference in a new issue