81e56ef6a0
- Updated SearchBar component to use max-width and height utilities for better responsiveness. - Adjusted ArtistsPage layout to include container for consistent padding and spacing. - Modified BestSeller and NewRelease components to use grid layout for better item arrangement. - Enhanced Frame component layout and styling for improved visual hierarchy. - Refined HomeBanner component for better spacing and text sizing. - Improved Navbar component with mobile menu functionality and responsive design. - Updated RecentDesign and SideNav components for better mobile experience and layout. - Enhanced Sidebar component with mobile menu toggle and improved navigation links. - Refactored marketplace Navbar to include mobile menu and improved layout for icons and buttons.
100 lines
3.4 KiB
TypeScript
100 lines
3.4 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">
|
|
<Image src="/GradientMesh_Light.png" alt="Gradient Bar" className="w-full h-full object-cover" width={100} height={100} />
|
|
</div>
|
|
<div
|
|
className="w-full flex flex-col items-center gap-6 py-4 sm:py-8 px-4 sm:px-8 md:px-12 lg:px-20 relative z-20"
|
|
style={{
|
|
background: 'radial-gradient(ellipse at 20% 20%, #f5f7fa 60%, #e8eafc 80%, #f7e7fa 100%, #e3f6fd 100%)',
|
|
minHeight: '100%',
|
|
width: '100%',
|
|
}}
|
|
>
|
|
<div className="flex flex-col md:flex-row items-center w-full gap-6 md:gap-8">
|
|
<div className="flex items-center">
|
|
<Image
|
|
src="/logo.png"
|
|
alt="Logo"
|
|
width={240}
|
|
height={240}
|
|
className="object-contain w-[120px] sm:w-[180px] md:w-[240px]"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4 w-full">
|
|
{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={{
|
|
height: 'auto',
|
|
minHeight: '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 w-[30px] sm:w-[37.43px] h-auto"
|
|
/>
|
|
<div className="text-[8px] sm:text-[9px] text-[#151C4F] mb-0.5 w-full font-400">{action.subtitle}</div>
|
|
<div className="font-[700] text-[9px] sm:text-[10px] text-[#151C4F] mb-0.5 w-full">{action.title}</div>
|
|
<Button
|
|
className="w-full h-6 sm:h-7 text-[8px] sm: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>
|
|
);
|
|
}
|