kovakmedya
cb150f7a24
- CRM domain modules removed (customers, services, software, calendar, tasks, invoices, leads, finance, etc.)
- DLS branding: package name=lab, logo wordmark, sidebar nav, header CTA
- Tenant layer extended with kind dimension (lab|clinic) + requireTenantKind helper
- Schema rewritten for DLS domain: jobs, job_files, job_status_history, prosthetics, connections, finance_entries, notifications
- Onboarding form: clinic/lab account-type selection + auto-generated memberNumber
- Placeholder routes for jobs/{inbound,outbound,new}, products, finance, connections
- PDF spec + spec.md under belgeler/
- db: lab database + 13 collections + indexes + storage bucket (job-files) provisioned via Appwrite MCP
Ref: belgeler/dls-ui-tasarim.pdf
88 lines
3.2 KiB
TypeScript
88 lines
3.2 KiB
TypeScript
"use client"
|
|
|
|
import Image from 'next/image'
|
|
import { cn } from "@/lib/utils"
|
|
|
|
interface Image3DProps {
|
|
lightSrc: string
|
|
darkSrc: string
|
|
alt: string
|
|
className?: string
|
|
direction?: "left" | "right"
|
|
}
|
|
|
|
export function Image3D({
|
|
lightSrc,
|
|
darkSrc,
|
|
alt,
|
|
className,
|
|
direction = "left"
|
|
}: Image3DProps) {
|
|
const isRight = direction === "right"
|
|
|
|
return (
|
|
<div className={cn("group relative aspect-[4/3] w-full", className)}>
|
|
<div className="perspective-distant transform-3d">
|
|
{/* Animated background glow */}
|
|
<div className="absolute sm:-inset-8 rounded-3xl bg-gradient-to-r from-primary/10 via-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-all duration-1000 blur-2xl" />
|
|
|
|
{/* Main 3D container */}
|
|
<div className="relative size-full transform-3d group-hover:rotate-x-8 group-hover:rotate-y-12 group-hover:translate-z-16 transition-all duration-700 ease-out">
|
|
|
|
{/* Depth layers for 3D effect */}
|
|
<div className="absolute inset-0 translate-y-4 translate-x-2 -translate-z-8 rounded-2xl">
|
|
<div className="size-full rounded-2xl bg-gradient-to-br from-primary/10 via-background/40 to-secondary/10 shadow-xl" />
|
|
</div>
|
|
|
|
{/* Main image container */}
|
|
<div className="relative z-10 size-full rounded-2xl overflow-hidden shadow-2xl shadow-primary/20">
|
|
{/* Shimmer effect */}
|
|
<div className={cn(
|
|
"absolute inset-0 z-20 bg-gradient-to-r from-transparent via-white/20 to-transparent -skew-x-12 transition-transform duration-1000 ease-out pointer-events-none",
|
|
isRight
|
|
? "translate-x-full group-hover:-translate-x-full"
|
|
: "-translate-x-full group-hover:translate-x-full"
|
|
)} />
|
|
|
|
{/* Content fade mask */}
|
|
<div className={cn(
|
|
"absolute inset-0 z-15 pointer-events-none",
|
|
isRight
|
|
? "bg-linear-to-l from-background from-0% via-background/85 via-15% to-transparent to-40%"
|
|
: "bg-linear-to-r from-background from-0% via-background/85 via-15% to-transparent to-40%"
|
|
)} />
|
|
|
|
{/* Theme-aware images */}
|
|
<Image
|
|
src={lightSrc}
|
|
alt={`${alt} - Light Mode`}
|
|
width={800}
|
|
height={600}
|
|
className={cn(
|
|
"block size-full object-cover dark:hidden transition-transform duration-700 group-hover:scale-105",
|
|
isRight ? "object-center" : "object-left"
|
|
)}
|
|
loading="lazy"
|
|
/>
|
|
|
|
<Image
|
|
src={darkSrc}
|
|
alt={`${alt} - Dark Mode`}
|
|
width={800}
|
|
height={600}
|
|
className={cn(
|
|
"hidden dark:block size-full object-cover transition-transform duration-700 group-hover:scale-105",
|
|
isRight ? "object-center" : "object-left"
|
|
)}
|
|
loading="lazy"
|
|
/>
|
|
|
|
{/* Border highlight */}
|
|
<div className="absolute inset-0 rounded-2xl ring-1 ring-white/20 dark:ring-white/10 group-hover:ring-primary/40 transition-all duration-500" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|