feat: add skeleton screen components and optimize image config

src/components/ui/loading-skeleton.tsx

@@ -1,27 +1,79 @@
-export function LoadingSkeleton({ className = '' }: { className?: string }) {
+'use client';
+
+import { cn } from '@/lib/utils';
+
+interface SkeletonProps {
+  className?: string;
+}
+
+export function Skeleton({ className }: SkeletonProps) {
   return (
-    <div className={`animate-pulse bg-gray-200 rounded ${className}`} />
+    <div
+      className={cn(
+        'animate-pulse rounded-md bg-[#F5F5F5]',
+        className
+      )}
+    />
   );
 }
 
-export function FormSkeleton() {
+export function CardSkeleton() {
   return (
-    <div className="space-y-4">
-      <LoadingSkeleton className="h-12 w-full" />
-      <LoadingSkeleton className="h-12 w-full" />
-      <LoadingSkeleton className="h-12 w-full" />
-      <LoadingSkeleton className="h-32 w-full" />
+    <div className="bg-[#FAFAFA] rounded-xl border border-[#E5E5E5] p-6">
+      <Skeleton className="h-12 w-12 rounded-xl mb-4" />
+      <Skeleton className="h-6 w-3/4 mb-3" />
+      <Skeleton className="h-4 w-full mb-2" />
+      <Skeleton className="h-4 w-2/3" />
     </div>
   );
 }
 
-export function SectionSkeleton() {
+export function ServiceCardSkeleton() {
   return (
-    <div className="py-24">
-      <div className="container-wide">
-        <LoadingSkeleton className="h-12 w-1/3 mb-8" />
-        <LoadingSkeleton className="h-6 w-2/3 mb-4" />
-        <LoadingSkeleton className="h-6 w-1/2" />
+    <div className="bg-white rounded-xl border border-[#E5E5E5] p-6 h-full">
+      <Skeleton className="h-14 w-14 rounded-xl mb-4" />
+      <Skeleton className="h-6 w-3/4 mb-3" />
+      <Skeleton className="h-4 w-full mb-2" />
+      <Skeleton className="h-4 w-2/3" />
+    </div>
+  );
+}
+
+export function CaseCardSkeleton() {
+  return (
+    <div className="bg-white rounded-xl border border-[#E5E5E5] overflow-hidden">
+      <Skeleton className="h-48 w-full" />
+      <div className="p-6">
+        <Skeleton className="h-5 w-1/2 mb-3" />
+        <Skeleton className="h-6 w-3/4 mb-3" />
+        <Skeleton className="h-4 w-full mb-2" />
+        <Skeleton className="h-4 w-2/3" />
+      </div>
+    </div>
+  );
+}
+
+export function ProductCardSkeleton() {
+  return (
+    <div className="bg-[#FAFAFA] rounded-xl border border-[#E5E5E5] p-6 h-full flex flex-col">
+      <Skeleton className="h-6 w-1/3 mb-3" />
+      <Skeleton className="h-7 w-3/4 mb-4" />
+      <Skeleton className="h-4 w-full mb-2" />
+      <Skeleton className="h-4 w-2/3 mb-4" />
+      <Skeleton className="h-10 w-full mt-auto" />
+    </div>
+  );
+}
+
+export function NewsCardSkeleton() {
+  return (
+    <div className="bg-white rounded-xl border border-[#E5E5E5] overflow-hidden">
+      <Skeleton className="h-48 w-full" />
+      <div className="p-6">
+        <Skeleton className="h-5 w-1/4 mb-3" />
+        <Skeleton className="h-6 w-3/4 mb-3" />
+        <Skeleton className="h-4 w-full mb-2" />
+        <Skeleton className="h-4 w-2/3" />
       </div>
     </div>
   );