77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
import Image from 'next/image';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
const quickActions = [
|
|
{
|
|
subtitle: 'Create your own ebook',
|
|
title: 'Wodey Publishing Studio',
|
|
image: '/create.png',
|
|
button: { label: 'Design Now', link: '#' },
|
|
},
|
|
{
|
|
subtitle: 'Unlimited access to',
|
|
title: '15,000 Fonts',
|
|
image: '/text.png',
|
|
button: { label: 'View More', link: '#' },
|
|
},
|
|
{
|
|
subtitle: 'Unlimited access to',
|
|
title: '25,000 Audios',
|
|
image: '/paint.png',
|
|
button: { label: 'View More', link: '#' },
|
|
},
|
|
{
|
|
subtitle: 'Unlimited access to',
|
|
title: '175,000 Graphics',
|
|
image: '/brush.png',
|
|
button: { label: 'View More', link: '#' },
|
|
},
|
|
{
|
|
subtitle: 'Unlimited access to',
|
|
title: '45,000 Videos',
|
|
image: '/camera.png',
|
|
button: { label: 'View More', link: '#' },
|
|
},
|
|
];
|
|
|
|
export default function QuickActions() {
|
|
return (
|
|
<div className="relative w-full">
|
|
{/* Top linear gradient image bar */}
|
|
<div className="absolute top-0 left-0 w-full h-3 z-10">
|
|
<img src="/GradientMesh_Light.png" alt="Gradient Bar" className="w-full h-full object-cover" />
|
|
</div>
|
|
<div
|
|
className="w-full flex flex-col items-center gap-6 py-8 px-20 relative z-20"
|
|
style={{
|
|
background: 'radial-gradient(ellipse at 20% 20%, #f5f7fa 60%, #e8eafc 80%, #f7e7fa 100%, #e3f6fd 100%)',
|
|
minHeight: '100%',
|
|
width: '100vw',
|
|
}}
|
|
>
|
|
<div className="flex items-center w-full">
|
|
<div className="flex items-center mr-8">
|
|
<Image src="/logo.png" alt="Logo" width={240} height={240} className="object-contain" />
|
|
</div>
|
|
<div className="flex gap-6 flex-1">
|
|
{quickActions.map((action, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="bg-white shadow-md flex flex-col items-center justify-center text-center flex-shrink-0"
|
|
style={{ width: '150px', height: '170px', padding: '11px 15px', borderRadius: 8, justifyContent: 'space-between', overflow: 'hidden' }}
|
|
>
|
|
<Image src={action.image} alt={action.title} width={37.43} height={40.8} className="object-contain mx-auto mb-1" />
|
|
<div className="text-[9px] text-[#151C4F] mb-0.5 w-full font-400">{action.subtitle}</div>
|
|
<div className="font-[700] text-[10px] text-[#151C4F] mb-0.5 w-full">{action.title}</div>
|
|
<Button className="w-full h-7 text-[9px] px-0 mt-1 font-400 text-[#1A237E] border-[rgba(48,58,156,0.42)] rounded-sm" variant="outline" asChild>
|
|
<a href={action.button.link}>{action.button.label}</a>
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|