feat(perf,ux): implement performance and UX optimizations

Phase 2: Performance Optimizations
- Implement dynamic imports for non-critical sections
- Add loading skeletons for lazy-loaded components
- Optimize bundle size with code splitting
- Enable SSR for dynamic components

Phase 3: UX Optimizations
- Create ErrorBoundary component for graceful error handling
- Add Toast notification component for user feedback
- Implement success/error notifications in contact form
- Add error handling with user-friendly messages

Files modified:
- src/app/(marketing)/page.tsx: Dynamic imports for sections
- src/app/(marketing)/layout.tsx: Error boundary integration
- src/components/sections/contact-section.tsx: Toast notifications
- src/components/ui/error-boundary.tsx: New error boundary component
- src/components/ui/toast.tsx: New toast notification component

Impact:
- Reduced initial bundle size
- Faster page load times
- Better error handling
- Improved user feedback
- Enhanced user experience

src/app/(marketing)/layout.tsx

@@ -1,3 +1,5 @@
+import { ErrorBoundary } from '@/components/ui/error-boundary';
+
 export default function MarketingLayout({
   children,
 }: {
@@ -5,7 +7,9 @@ export default function MarketingLayout({
 }) {
   return (
     <div className="min-h-screen flex flex-col">
-      <main className="flex-1">{children}</main>
+      <ErrorBoundary>
+        <main className="flex-1">{children}</main>
+      </ErrorBoundary>
     </div>
   );
 }

src/app/(marketing)/page.tsx

@@ -1,13 +1,50 @@
 "use client";
 
+import dynamic from 'next/dynamic';
 import { Header } from "@/components/layout/header";
 import { Footer } from "@/components/layout/footer";
 import { HeroSection } from "@/components/sections/hero-section";
-import { ServicesSection } from "@/components/sections/services-section";
-import { ProductsSection } from "@/components/sections/products-section";
-import { AboutSection } from "@/components/sections/about-section";
-import { NewsSection } from "@/components/sections/news-section";
-import { ContactSection } from "@/components/sections/contact-section";
+import { SectionSkeleton } from "@/components/ui/loading-skeleton";
+
+const ServicesSection = dynamic(
+  () => import('@/components/sections/services-section').then(mod => ({ default: mod.ServicesSection })),
+  { 
+    loading: () => <SectionSkeleton />,
+    ssr: true 
+  }
+);
+
+const ProductsSection = dynamic(
+  () => import('@/components/sections/products-section').then(mod => ({ default: mod.ProductsSection })),
+  { 
+    loading: () => <SectionSkeleton />,
+    ssr: true 
+  }
+);
+
+const AboutSection = dynamic(
+  () => import('@/components/sections/about-section').then(mod => ({ default: mod.AboutSection })),
+  { 
+    loading: () => <SectionSkeleton />,
+    ssr: true 
+  }
+);
+
+const NewsSection = dynamic(
+  () => import('@/components/sections/news-section').then(mod => ({ default: mod.NewsSection })),
+  { 
+    loading: () => <SectionSkeleton />,
+    ssr: true 
+  }
+);
+
+const ContactSection = dynamic(
+  () => import('@/components/sections/contact-section').then(mod => ({ default: mod.ContactSection })),
+  { 
+    loading: () => <SectionSkeleton />,
+    ssr: true 
+  }
+);
 
 export default function HomePage() {
   return (