You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
172 lines
6.3 KiB
172 lines
6.3 KiB
import Image from "next/image";
|
|
|
|
export function DashboardSection() {
|
|
return (
|
|
<section
|
|
id="dashboard-section"
|
|
className="relative -mt-[175px] w-full flex flex-col items-center z-20 px-4"
|
|
>
|
|
{/* Dashboard Glass Card (Dashboard_4178_61403: w: 1216, h: 785, radius: 32) */}
|
|
<div
|
|
id="dashboard-preview-card"
|
|
className="relative w-full max-w-[1216px] rounded-[32px] p-[8px] bg-white/[0.04] backdrop-blur-[24px] border border-white/[0.12] shadow-[0_20px_80px_rgba(0,0,0,0.8)] overflow-hidden"
|
|
>
|
|
{/* Dashboard Screenshot Image (Dashboard_image_4178_61404: w: 1200, h: 769, radius: 24) */}
|
|
<div className="relative w-full aspect-[1200/769] rounded-[24px] overflow-hidden bg-[#0a0f19]">
|
|
<Image
|
|
src="/assets/images/dashboard_image.svg"
|
|
alt="TeamBy Time Tracking Dashboard UI"
|
|
fill
|
|
priority
|
|
unoptimized
|
|
className="object-cover object-top select-none"
|
|
sizes="(max-width: 1280px) 100vw, 1200px"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Glow Aura (Background_4178_61405: w: 1216, h: 302, y: 1137) */}
|
|
<div className="absolute bottom-[-50px] w-full max-w-[1216px] h-[302px] pointer-events-none -z-10 opacity-70">
|
|
<Image
|
|
src="/assets/images/dashboard_bottom_glow.svg"
|
|
alt=""
|
|
fill
|
|
unoptimized
|
|
className="object-contain object-bottom"
|
|
/>
|
|
</div>
|
|
|
|
{/* Feature Switcher Tab Bar (Navigation_4178_61406: w: 1010, h: 66, radius: 48) */}
|
|
<div
|
|
id="dashboard-navigation-bar"
|
|
className="nav-bar-glass mt-[33px] mb-[60px] w-full max-w-[1010px] h-[66px] rounded-[48px] p-[10px] pr-[32px] pl-[10px] flex items-center justify-between overflow-x-auto overflow-y-hidden no-scrollbar"
|
|
>
|
|
{/* Active Tab: Time Tracking (Header_4178_61407: w: 190, h: 46, radius: 24) */}
|
|
<button
|
|
type="button"
|
|
id="tab-time-tracking"
|
|
className="tab-active-gradient relative z-10 h-[46px] rounded-[24px] px-[20px] py-[12px] flex items-center gap-[6px] cursor-pointer hover:brightness-110 transition-all flex-shrink-0"
|
|
>
|
|
<div className="relative w-[22px] h-[22px] flex items-center justify-center">
|
|
<Image
|
|
src="/assets/images/tab_icon_star.svg"
|
|
alt=""
|
|
width={22}
|
|
height={22}
|
|
unoptimized
|
|
className="w-[22px] h-[22px] object-contain"
|
|
/>
|
|
</div>
|
|
<span className="tab-active-text text-[18px] font-medium tracking-tight whitespace-nowrap">
|
|
Time Tracking
|
|
</span>
|
|
</button>
|
|
|
|
{/* Line 6 Divider */}
|
|
<div className="relative z-10 w-[1px] h-[40px] flex-shrink-0 flex items-center justify-center">
|
|
<Image
|
|
src="/assets/images/line_divider.svg"
|
|
alt=""
|
|
width={1}
|
|
height={40}
|
|
unoptimized
|
|
className="h-[40px] w-[1px]"
|
|
/>
|
|
</div>
|
|
|
|
{/* Tab: Meeting (Value_4178_61415) */}
|
|
<button
|
|
type="button"
|
|
id="tab-meeting"
|
|
className="relative z-10 h-[46px] flex items-center text-[#cbdaef] text-[18px] font-medium hover:text-white transition-colors cursor-pointer px-2 flex-shrink-0 whitespace-nowrap"
|
|
>
|
|
Meeting
|
|
</button>
|
|
|
|
{/* Line 5 Divider */}
|
|
<div className="relative z-10 w-[1px] h-[40px] flex-shrink-0 flex items-center justify-center">
|
|
<Image
|
|
src="/assets/images/line_divider.svg"
|
|
alt=""
|
|
width={1}
|
|
height={40}
|
|
unoptimized
|
|
className="h-[40px] w-[1px]"
|
|
/>
|
|
</div>
|
|
|
|
{/* Tab: Chat App (Button_title_4178_61417) */}
|
|
<button
|
|
type="button"
|
|
id="tab-chat-app"
|
|
className="relative z-10 h-[46px] flex items-center text-[#cbdaef] text-[18px] font-medium hover:text-white transition-colors cursor-pointer px-2 flex-shrink-0 whitespace-nowrap"
|
|
>
|
|
Chat App
|
|
</button>
|
|
|
|
{/* Line 3 Divider */}
|
|
<div className="relative z-10 w-[1px] h-[40px] flex-shrink-0 flex items-center justify-center">
|
|
<Image
|
|
src="/assets/images/line_divider.svg"
|
|
alt=""
|
|
width={1}
|
|
height={40}
|
|
unoptimized
|
|
className="h-[40px] w-[1px]"
|
|
/>
|
|
</div>
|
|
|
|
{/* Tab: Project Management (Button_title_4178_61419) */}
|
|
<button
|
|
type="button"
|
|
id="tab-project-management"
|
|
className="relative z-10 h-[46px] flex items-center text-[#cbdaef] text-[18px] font-medium hover:text-white transition-colors cursor-pointer px-2 flex-shrink-0 whitespace-nowrap"
|
|
>
|
|
Project Management
|
|
</button>
|
|
|
|
{/* Line 4 Divider */}
|
|
<div className="relative z-10 w-[1px] h-[40px] flex-shrink-0 flex items-center justify-center">
|
|
<Image
|
|
src="/assets/images/line_divider.svg"
|
|
alt=""
|
|
width={1}
|
|
height={40}
|
|
unoptimized
|
|
className="h-[40px] w-[1px]"
|
|
/>
|
|
</div>
|
|
|
|
{/* Tab: File Manager (Button_title_4178_61421) */}
|
|
<button
|
|
type="button"
|
|
id="tab-file-manager"
|
|
className="relative z-10 h-[46px] flex items-center text-[#cbdaef] text-[18px] font-medium hover:text-white transition-colors cursor-pointer px-2 flex-shrink-0 whitespace-nowrap"
|
|
>
|
|
File Manager
|
|
</button>
|
|
|
|
{/* Line 2 Divider */}
|
|
<div className="relative z-10 w-[1px] h-[40px] flex-shrink-0 flex items-center justify-center">
|
|
<Image
|
|
src="/assets/images/line_divider.svg"
|
|
alt=""
|
|
width={1}
|
|
height={40}
|
|
unoptimized
|
|
className="h-[40px] w-[1px]"
|
|
/>
|
|
</div>
|
|
|
|
{/* Tab: Finance (Button_title_4178_61423: exact string "Finance ") */}
|
|
<button
|
|
type="button"
|
|
id="tab-finance"
|
|
className="relative z-10 h-[46px] flex items-center text-[#cbdaef] text-[18px] font-medium hover:text-white transition-colors cursor-pointer px-2 flex-shrink-0 whitespace-nowrap"
|
|
>
|
|
Finance{" "}
|
|
</button>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|