svrjs/svrjs-nextjs-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

icon changed

Browse source
This commit is contained in:
Cypro Freelance 2024-07-28 15:33:33 +05:30
parent e4f144e93e
commit 7535227245
2 changed files with 206 additions and 215 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

333
components/shared/HeroCards.tsx
View file

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

88
components/ui/accordion.tsx
View file

@ -1,58 +1,58 @@
"use client" "use client";
import * as React from "react" import * as React from "react";
import * as AccordionPrimitive from "@radix-ui/react-accordion" import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { ChevronDown } from "lucide-react" 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< const AccordionItem = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Item>, React.ElementRef<typeof AccordionPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<AccordionPrimitive.Item <AccordionPrimitive.Item
ref={ref} ref={ref}
className={cn("border-b", className)} className={cn("border-b", className)}
{...props} {...props}
/> />
)) ));
AccordionItem.displayName = "AccordionItem" AccordionItem.displayName = "AccordionItem";
const AccordionTrigger = React.forwardRef< const AccordionTrigger = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Trigger>, React.ElementRef<typeof AccordionPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => ( >(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Header className="flex"> <AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger <AccordionPrimitive.Trigger
ref={ref} ref={ref}
className={cn( className={cn(
"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180", "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-45",
className className
)} )}
{...props} {...props}
> >
{children} {children}
<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" /> <PlusIcon className="h-5 w-5 shrink-0 transition-transform duration-200" />
</AccordionPrimitive.Trigger> </AccordionPrimitive.Trigger>
</AccordionPrimitive.Header> </AccordionPrimitive.Header>
)) ));
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
const AccordionContent = React.forwardRef< const AccordionContent = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Content>, React.ElementRef<typeof AccordionPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => ( >(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Content <AccordionPrimitive.Content
ref={ref} ref={ref}
className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
{...props} {...props}
> >
<div className={cn("pb-4 pt-0", className)}>{children}</div> <div className={cn("pb-4 pt-0", className)}>{children}</div>
</AccordionPrimitive.Content> </AccordionPrimitive.Content>
)) ));
AccordionContent.displayName = AccordionPrimitive.Content.displayName AccordionContent.displayName = AccordionPrimitive.Content.displayName;
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };