feat: add skeleton screen components and optimize image config

next.config.ts

@@ -4,10 +4,16 @@ const nextConfig: NextConfig = {
   output: 'export',
   distDir: 'dist',
   images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**',
+      },
+    ],
     unoptimized: true,
+    formats: ['image/avif', 'image/webp'],
     deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
     imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-    formats: ['image/webp'],
   },
   compress: true,
   poweredByHeader: false,

src/app/(marketing)/services/page.tsx

@@ -3,10 +3,11 @@
 import Link from 'next/link';
 import { motion } from 'framer-motion';
 import { useInView } from 'framer-motion';
-import { useRef } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { PageHeader } from '@/components/ui/page-header';
+import { ServiceCardSkeleton } from '@/components/ui/loading-skeleton';
 import { ArrowRight, Code, Cloud, BarChart3, Shield } from 'lucide-react';
 import { SERVICES } from '@/lib/constants';
 
@@ -20,6 +21,12 @@ const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
 export default function ServicesPage() {
   const contentRef = useRef(null);
   const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setIsLoading(false), 1000);
+    return () => clearTimeout(timer);
+  }, []);
 
   return (
     <div className="min-h-screen bg-white">
@@ -30,6 +37,13 @@ export default function ServicesPage() {
 
       <div className="container-wide relative z-10 py-16" ref={contentRef}>
         <div className="max-w-6xl mx-auto">
+          {isLoading ? (
+            <div className="grid md:grid-cols-2 gap-8">
+              {Array.from({ length: 4 }).map((_, index) => (
+                <ServiceCardSkeleton key={index} />
+              ))}
+            </div>
+          ) : (
             <div className="grid md:grid-cols-2 gap-8">
               {SERVICES.map((service, index) => {
                 const Icon = iconMap[service.icon];
@@ -37,7 +51,7 @@ export default function ServicesPage() {
                   <motion.div
                     key={service.id}
                     initial={{ opacity: 0, y: 20 }}
-                  animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+                    animate={isContentInView ? { opacity:1, y: 0 } : {}}
                     transition={{ duration: 0.5, delay: index * 0.1 }}
                   >
                     <Link
@@ -78,6 +92,7 @@ export default function ServicesPage() {
                 );
               })}
             </div>
+          )}
         </div>
       </div>
 

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>
   );