532 lines
22 KiB
TypeScript
532 lines
22 KiB
TypeScript
|
|
import { UpgradeBlock } from "@/components/blocks/upgrade-block";
|
|
import { WelcomeBlock, BlockBadge } from "@/components/blocks/welcome-block";
|
|
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Eye } from "lucide-react";
|
|
import Image from "next/image";
|
|
|
|
const WidgetPage = () => {
|
|
return (
|
|
<div>
|
|
<SiteBreadcrumb />
|
|
<div className="space-y-5" >
|
|
<div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5">
|
|
{/* Block 1 */}
|
|
<WelcomeBlock >
|
|
<div className="max-w-[180px] relative z-10">
|
|
<h4 className="text-xl font-medium text-primary-foreground dark:text-default-900 mb-2">
|
|
Upgrade your Dashcode
|
|
</h4>
|
|
<p className="text-sm text-primary-foreground dark:text-default-800 text-opacity-80">
|
|
Pro plan for better results
|
|
</p>
|
|
</div>
|
|
<BlockBadge>Now</BlockBadge>
|
|
<Image
|
|
src="/images/all-img/widget-bg-3.png"
|
|
width={400}
|
|
height={150}
|
|
priority
|
|
alt="Description of the image"
|
|
className="absolute top-0 start-0 w-full h-full object-cover rounded-md"
|
|
/>
|
|
</WelcomeBlock>
|
|
{/* Block 2 */}
|
|
<WelcomeBlock >
|
|
<div className="max-w-[180px] relative z-10">
|
|
<div className="text-xl font-medium text-default-900 dark:text-default-100 mb-2">
|
|
Upgrade your Dashcode
|
|
</div>
|
|
<p className="text-sm text-default-800 dark:text-default-100">
|
|
Pro plan for better results
|
|
</p>
|
|
</div>
|
|
<BlockBadge>Now</BlockBadge>
|
|
<Image
|
|
src="/images/all-img/widget-bg-1.png"
|
|
width={400}
|
|
height={150}
|
|
alt="Description of the image"
|
|
className="absolute top-0 start-0 w-full h-full object-cover rounded-md"
|
|
/>
|
|
</WelcomeBlock>
|
|
{/* Block 3 */}
|
|
<WelcomeBlock >
|
|
<div className="max-w-[180px] relative z-10">
|
|
<div className="text-xl font-medium text-default-900 dark:text-default-100 mb-2">
|
|
Upgrade your Dashcode
|
|
</div>
|
|
<p className="text-sm text-default-800 dark:text-default-100">
|
|
Pro plan for better results
|
|
</p>
|
|
</div>
|
|
<BlockBadge>Now</BlockBadge>
|
|
<Image
|
|
src="/images/all-img/widget-bg-3-1.png"
|
|
width={400}
|
|
height={150}
|
|
alt="Description of the image"
|
|
className="absolute top-0 start-0 w-full h-full object-cover rounded-md"
|
|
/>
|
|
</WelcomeBlock>
|
|
{/* Block 4 */}
|
|
<WelcomeBlock >
|
|
<div className="max-w-[180px] relative z-10">
|
|
<h4 className="text-xl font-medium text-primary-foreground dark:text-default-900 mb-2">
|
|
<span className="block font-normal">Good evening,</span>
|
|
<span className="block">Mr. Dianne Russell</span>
|
|
</h4>
|
|
<p className="text-sm text-primary-foreground dark:text-default-900 font-normal">
|
|
Welcome to Dashcode
|
|
</p>
|
|
</div>
|
|
<Image
|
|
src="/images/all-img/widget-bg-2.png"
|
|
width={400}
|
|
height={150}
|
|
alt="Description of the image"
|
|
className="absolute top-0 start-0 w-full h-full object-cover rounded-md"
|
|
/>
|
|
</WelcomeBlock>
|
|
{/* Block 5 */}
|
|
<WelcomeBlock className="flex items-center" >
|
|
<div className="flex-1 relative z-10">
|
|
<div className="max-w-[180px]">
|
|
<div className="text-xl font-medium text-default-900 dark:text-default-100 mb-2">
|
|
<span className="block font-normal">Good evening,</span>
|
|
<span className="block">Mr. Dianne Russell</span>
|
|
</div>
|
|
<p className="text-sm text-default-900 dark:text-default-100 font-normal">
|
|
Welcome to Dashcode
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex-none relative w-[120px] z-10">
|
|
<Image
|
|
src="/images/all-img/widgetvector.png"
|
|
alt=""
|
|
width={220}
|
|
height={100}
|
|
className="w-full h-full"
|
|
/>
|
|
</div>
|
|
<Image
|
|
src="/images/all-img/widget-bg-4.png"
|
|
width={400}
|
|
height={150}
|
|
alt="Description of the image"
|
|
className="absolute top-0 start-0 w-full h-full object-cover rounded-md"
|
|
/>
|
|
</WelcomeBlock>
|
|
{/* block 6 */}
|
|
<WelcomeBlock className="flex items-center" >
|
|
<div className="flex-1 relative z-10">
|
|
<div className="max-w-[180px]">
|
|
<div className="text-xl font-medium text-primary-foreground mb-2">
|
|
<span className="block font-normal">Good evening,</span>
|
|
<span className="block">Mr. Dianne Russell</span>
|
|
</div>
|
|
<p className="text-sm text-wgite text-primary-foreground font-normal">
|
|
Welcome to Dashcode
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex-none relative z-10">
|
|
<Image
|
|
alt=""
|
|
src="/images/all-img/widgetvector2.png"
|
|
className="ms-auto w-[100px] h-[80px]"
|
|
width={120}
|
|
height={100}
|
|
/>
|
|
</div>
|
|
<Image
|
|
src="/images/all-img/widget-bg-5.png"
|
|
width={400}
|
|
height={150}
|
|
priority
|
|
alt="Description of the image"
|
|
className="absolute top-0 start-0 w-full h-full object-cover rounded-md"
|
|
/>
|
|
</WelcomeBlock>
|
|
{/* Block 7 */}
|
|
<WelcomeBlock className="bg-default" >
|
|
<div className="max-w-[180px] relative z-10">
|
|
<h4 className="text-xl font-medium text-primary-foreground mb-2">
|
|
Upgrade your Dashcode
|
|
</h4>
|
|
<p className="text-sm text-primary-foreground text-opacity-80">
|
|
Pro plan for better results
|
|
</p>
|
|
</div>
|
|
<BlockBadge className="bg-destructive text-destructive-foreground dark:bg-default-100 dark:text-default-900">Now</BlockBadge>
|
|
|
|
</WelcomeBlock>
|
|
{/* Block 8 */}
|
|
<WelcomeBlock className="bg-primary" >
|
|
<div className="max-w-[180px] relative z-10">
|
|
<h4 className="text-xl font-medium text-primary-foreground dark:text-default-900 mb-2">
|
|
Upgrade your Dashcode
|
|
</h4>
|
|
<p className="text-sm text-primary-foreground dark:text-default-900 text-opacity-80">
|
|
Pro plan for better results
|
|
</p>
|
|
</div>
|
|
<BlockBadge className="bg-success text-success-foreground">Now</BlockBadge>
|
|
</WelcomeBlock>
|
|
{/* Block 9 */}
|
|
<WelcomeBlock className="bg-gradient-to-r from-primary to-success" >
|
|
<div className="max-w-[180px] relative z-10">
|
|
<h4 className="text-xl font-medium text-primary-foreground dark:text-default-900 mb-2">
|
|
Upgrade your Dashcode
|
|
</h4>
|
|
<p className="text-sm text-primary-foreground dark:text-default-900 text-opacity-80">
|
|
Pro plan for better results
|
|
</p>
|
|
</div>
|
|
<BlockBadge className="bg-warning text-warning-foreground">Now</BlockBadge>
|
|
</WelcomeBlock>
|
|
{/* Block 10 */}
|
|
<WelcomeBlock className="flex items-center py-7" >
|
|
<div className="flex-1 relative z-10">
|
|
<div className="max-w-[180px]">
|
|
<h4 className="text-2xl font-medium text-primary-foreground dark:text-default-900 mb-2">
|
|
<span className="block text-sm">Current balance,</span>
|
|
<span className="block">$34,564</span>
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
<div className="flex-none relative z-10">
|
|
<Button
|
|
color="primary"
|
|
className="hover:ring-0 hover:ring-offset-0 "
|
|
>
|
|
<Eye className="w-4 h-4 text-primary-foreground me-2" />
|
|
View details
|
|
</Button>
|
|
</div>
|
|
<Image
|
|
src="/images/all-img/widget-bg-6.png"
|
|
width={400}
|
|
height={150}
|
|
alt="Description of the image"
|
|
className="absolute top-0 start-0 w-full h-full object-cover rounded-md"
|
|
/>
|
|
</WelcomeBlock>
|
|
{/* Block 11 */}
|
|
<WelcomeBlock className="flex items-center py-7" >
|
|
<div className="flex-1 relative z-10">
|
|
<div className="max-w-[180px]">
|
|
<h4 className="text-2xl font-medium mb-2">
|
|
<span className="block text-sm text-default-800 dark:text-default-100">Current balance,</span>
|
|
<span className="block text-default-900 dark:text-default-100">$34,564</span>
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
<div className="flex-none relative z-10">
|
|
<Button
|
|
color="primary"
|
|
className="hover:ring-0 hover:ring-offset-0 "
|
|
>
|
|
<Eye className="w-4 h-4 text-primary-foreground me-2" />
|
|
View details
|
|
</Button>
|
|
</div>
|
|
<Image
|
|
src="/images/all-img/widget-bg-7.png"
|
|
width={400}
|
|
height={150}
|
|
priority
|
|
alt="Description of the image"
|
|
className="absolute top-0 start-0 w-full h-full object-cover rounded-md"
|
|
/>
|
|
</WelcomeBlock>
|
|
{/* Block 12 */}
|
|
<WelcomeBlock className="flex items-center py-7" >
|
|
<div className="flex-1 relative z-10">
|
|
<div className="max-w-[180px]">
|
|
<h4 className="text-2xl font-medium mb-2">
|
|
<span className="block text-sm text-default-800 dark:text-default-100">Current balance,</span>
|
|
<span className="block text-default-900 dark:text-default-100">$34,564</span>
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
<div className="flex-none relative z-10">
|
|
<Button
|
|
color="primary"
|
|
className="hover:ring-0 hover:ring-offset-0 "
|
|
>
|
|
<Eye className="w-4 h-4 text-primary-foreground me-2" />
|
|
View details
|
|
</Button>
|
|
</div>
|
|
<Image
|
|
src="/images/all-img/widget-bg-8.png"
|
|
width={400}
|
|
height={150}
|
|
priority
|
|
alt="Description of the image"
|
|
className="absolute top-0 start-0 w-full h-full object-cover rounded-md"
|
|
/>
|
|
</WelcomeBlock>
|
|
</div>
|
|
{/* Upgrade Block */}
|
|
<div className="grid xl:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-5">
|
|
<UpgradeBlock className="bg-default dark:bg-default-50">
|
|
<div className="max-w-[168px] relative z-10">
|
|
<div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
|
|
<div className="text-xs font-normal text-default-foreground dark:text-default-800">
|
|
Upgrade your system to business plan
|
|
</div>
|
|
</div>
|
|
<div className="mt-6 mb-14 relative z-10">
|
|
<Button
|
|
size="md"
|
|
className="bg-default-foreground text-default hover:bg-default-foreground hover:opacity-80 dark:bg-default dark:text-default-100 font-medium"
|
|
>
|
|
Upgrade
|
|
</Button>
|
|
</div>
|
|
<div className="absolute bottom-0 start-0 z-10 w-full">
|
|
<Image
|
|
src="/images/svg/line.svg"
|
|
width={500}
|
|
height={200}
|
|
alt="Line Image"
|
|
draggable={false}
|
|
/>
|
|
</div>
|
|
<div className="absolute -bottom-4 end-5">
|
|
<Image
|
|
src="/images/svg/rabit.svg"
|
|
width={96}
|
|
height={96}
|
|
alt="Rabbit"
|
|
draggable={false}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
</UpgradeBlock>
|
|
<UpgradeBlock className="bg-primary">
|
|
<div className="max-w-[168px] relative z-10">
|
|
<div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
|
|
<div className="text-xs font-normal text-default-foreground dark:text-default-800">
|
|
Upgrade your system to business plan
|
|
</div>
|
|
</div>
|
|
<div className="mt-6 mb-14 relative z-10">
|
|
<Button
|
|
size="md"
|
|
className="bg-default-foreground text-default hover:bg-default-foreground hover:opacity-80 dark:bg-default dark:text-default-100 font-medium"
|
|
>
|
|
Upgrade
|
|
</Button>
|
|
</div>
|
|
<div className="absolute bottom-0 start-0 z-10 w-full">
|
|
<Image
|
|
src="/images/svg/line.svg"
|
|
width={500}
|
|
height={200}
|
|
alt="Line Image"
|
|
draggable={false}
|
|
/>
|
|
</div>
|
|
<div className="absolute -bottom-4 end-5">
|
|
<Image
|
|
src="/images/svg/rabit.svg"
|
|
width={96}
|
|
height={96}
|
|
alt="Rabbit"
|
|
draggable={false}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
</UpgradeBlock>
|
|
<UpgradeBlock className="bg-success">
|
|
<div className="max-w-[168px] relative z-10">
|
|
<div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
|
|
<div className="text-xs font-normal text-default-foreground dark:text-default-800">
|
|
Upgrade your system to business plan
|
|
</div>
|
|
</div>
|
|
<div className="mt-6 mb-14 relative z-10">
|
|
<Button
|
|
size="md"
|
|
className="bg-default-foreground text-default hover:bg-default-foreground hover:opacity-80 dark:bg-default dark:text-default-100 font-medium"
|
|
>
|
|
Upgrade
|
|
</Button>
|
|
</div>
|
|
<div className="absolute bottom-0 start-0 z-10 w-full">
|
|
<Image
|
|
src="/images/svg/line.svg"
|
|
width={500}
|
|
height={200}
|
|
alt="Line Image"
|
|
draggable={false}
|
|
/>
|
|
</div>
|
|
<div className="absolute -bottom-4 end-5">
|
|
<Image
|
|
src="/images/svg/rabit.svg"
|
|
width={96}
|
|
height={96}
|
|
alt="Rabbit"
|
|
draggable={false}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
</UpgradeBlock>
|
|
<UpgradeBlock className="bg-info">
|
|
<div className="max-w-[168px] relative z-10">
|
|
<div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
|
|
<div className="text-xs font-normal text-default-foreground dark:text-default-800">
|
|
Upgrade your system to business plan
|
|
</div>
|
|
</div>
|
|
<div className="mt-6 mb-14 relative z-10">
|
|
<Button
|
|
size="md"
|
|
className="bg-default-foreground text-default hover:bg-default-foreground hover:opacity-80 dark:bg-default dark:text-default-100 font-medium"
|
|
>
|
|
Upgrade
|
|
</Button>
|
|
</div>
|
|
<div className="absolute bottom-0 start-0 z-10 w-full">
|
|
<Image
|
|
src="/images/svg/line.svg"
|
|
width={500}
|
|
height={200}
|
|
alt="Line Image"
|
|
draggable={false}
|
|
/>
|
|
</div>
|
|
<div className="absolute -bottom-4 end-5">
|
|
<Image
|
|
src="/images/svg/rabit.svg"
|
|
width={96}
|
|
height={96}
|
|
alt="Rabbit"
|
|
draggable={false}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
</UpgradeBlock>
|
|
|
|
</div>
|
|
{/* gift block */}
|
|
|
|
<div className="grid xl:grid-cols-6 lg:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-5">
|
|
<UpgradeBlock
|
|
className="bg-default dark:bg-default-200 mt-14">
|
|
<div className="absolute start-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
|
|
<Image
|
|
src="/images/svg/gift.svg"
|
|
alt="image"
|
|
height={72}
|
|
width={72}
|
|
className="h-16 w-16"
|
|
/>
|
|
</div>
|
|
<div className="max-w-[160px] mx-auto mt-10">
|
|
<div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
|
|
<div className="text-xs font-normal text-default-foreground dark:text-default-900 mt-1">
|
|
Upgrade your system to business plan
|
|
</div>
|
|
</div>
|
|
<div className="mt-6">
|
|
<Button fullWidth size="md"
|
|
className="bg-primary-foreground dark:bg-white hover:ring-0 hover:ring-offset-0 ring-offset-transparent dark:text-default-100 hover:bg-primary-foreground hover:text-default hover:opacity-90 text-default">
|
|
Upgrade
|
|
</Button>
|
|
</div>
|
|
</UpgradeBlock>
|
|
{
|
|
["primary", "success", "info", "destructive", "warning"].map((item, index) => (
|
|
<UpgradeBlock
|
|
key={index}
|
|
className={`bg-${item} mt-14`}>
|
|
<div className="absolute start-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
|
|
<Image
|
|
src="/images/svg/gift.svg"
|
|
alt="image"
|
|
height={72}
|
|
width={72}
|
|
className="h-16 w-16"
|
|
/>
|
|
</div>
|
|
<div className="max-w-[160px] mx-auto mt-10">
|
|
<div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
|
|
<div className="text-xs font-normal text-default-foreground dark:text-default-900 mt-1">
|
|
Upgrade your system to business plan
|
|
</div>
|
|
</div>
|
|
<div className="mt-6">
|
|
<Button fullWidth size="md" className="bg-primary-foreground hover:ring-0 hover:ring-offset-0 ring-offset-transparent dark:bg-white dark:text-default-100 hover:bg-primary-foreground hover:text-default hover:opacity-90 text-default">
|
|
Upgrade
|
|
</Button>
|
|
</div>
|
|
</UpgradeBlock>
|
|
))
|
|
}
|
|
</div>
|
|
{/* rabbit block */}
|
|
<div className="grid grid-cols-6 gap-5">
|
|
<UpgradeBlock
|
|
className="bg-default dark:bg-default-200 mt-14">
|
|
<div className="absolute start-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
|
|
<Image
|
|
src="/images/svg/rabit.svg"
|
|
alt="image"
|
|
height={100}
|
|
width={100}
|
|
className="h-24 w-24"
|
|
/>
|
|
</div>
|
|
<div className="max-w-[160px] mx-auto mt-14">
|
|
<div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
|
|
<div className="text-xs font-normal text-default-foreground mt-1 dark:text-default-900">
|
|
Upgrade your system to business plan
|
|
</div>
|
|
</div>
|
|
<div className="mt-6">
|
|
<Button fullWidth size="md" className="bg-primary-foreground hover:ring-0 hover:ring-offset-0 ring-offset-transparent dark:bg-white dark:text-default-100 hover:bg-primary-foreground hover:text-default hover:opacity-90 text-default">
|
|
Upgrade
|
|
</Button>
|
|
</div>
|
|
</UpgradeBlock>
|
|
{
|
|
["primary", "success", "info", "destructive", "warning"].map((item, index) => (
|
|
<UpgradeBlock key={index} className={`bg-${item} mt-14`}>
|
|
<div className="absolute start-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
|
|
<Image
|
|
src="/images/svg/rabit.svg"
|
|
alt="image"
|
|
height={100}
|
|
width={100}
|
|
className="h-24 w-24"
|
|
/>
|
|
</div>
|
|
<div className="max-w-[160px] mx-auto mt-14">
|
|
<div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
|
|
<div className="text-xs font-normal text-default-foreground dark:text-default-900 mt-1">
|
|
Upgrade your system to business plan
|
|
</div>
|
|
</div>
|
|
<div className="mt-6">
|
|
<Button fullWidth size="md" className="bg-primary-foreground hover:ring-0 hover:ring-offset-0 ring-offset-transparent dark:bg-white dark:text-default-100 hover:bg-primary-foreground hover:text-default hover:opacity-90 text-default">
|
|
Upgrade
|
|
</Button>
|
|
</div>
|
|
</UpgradeBlock>
|
|
))
|
|
}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WidgetPage; |