Update src/app/page.tsx

Merge version_2 into main

public/service-worker.js

@@ -0,0 +1,50 @@
+const CACHE_NAME = 'grunauer-cache-v1';
+const urlsToCache = [
+  '/',
+  '/index.html',
+  // Add other critical static assets here, e.g., images, fonts, main CSS/JS bundles
+  // For a Next.js app, consider using a library like Workbox for more robust asset pre-caching and runtime caching strategies.
+  '/favicon.ico'
+];
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then((cache) => {
+        console.log('Service Worker: Opened cache');
+        return cache.addAll(urlsToCache);
+      })
+      .then(() => self.skipWaiting()) // Forces the waiting service worker to become the active service worker.
+  );
+});
+
+self.addEventListener('activate', (event) => {
+  const cacheWhitelist = [CACHE_NAME];
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((cacheName) => {
+          if (cacheWhitelist.indexOf(cacheName) === -1) {
+            console.log('Service Worker: Deleting old cache', cacheName);
+            return caches.delete(cacheName); // Delete old caches
+          }
+          return null;
+        })
+      );
+    }).then(() => self.clients.claim()) // Takes control of the clients associated with the current service worker.
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request)
+      .then((response) => {
+        // Cache hit - return response
+        if (response) {
+          return response;
+        }
+        // No cache hit - fetch from network
+        return fetch(event.request);
+      })
+  );
+});

src/app/page.tsx

@@ -1,18 +1,21 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import React, { Suspense } from "react";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import HeroBillboard from '@/components/sections/hero/HeroBillboard';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 import TextAbout from '@/components/sections/about/TextAbout';
-import { Star, Users, Utensils } from "lucide-react";
+import { Star, Utensils, Globe } from "lucide-react";
+
+// Lazy imports for below-the-fold sections
+const LazyTestimonialCardSixteen = React.lazy(() => import('@/components/sections/testimonial/TestimonialCardSixteen'));
+const LazyMetricCardThree = React.lazy(() => import('@/components/sections/metrics/MetricCardThree'));
+const LazyFaqDouble = React.lazy(() => import('@/components/sections/faq/FaqDouble'));
+const LazyContactCenter = React.lazy(() => import('@/components/sections/contact/ContactCenter'));
+const LazyFooterLogoReveal = React.lazy(() => import('@/components/sections/footer/FooterLogoReveal'));
 
 export default function LandingPage() {
   return (
@@ -170,7 +173,8 @@ export default function LandingPage() {
   </div>
 
   <div id="reviews" data-section="reviews">
-      <TestimonialCardSixteen
+    <Suspense fallback={<div>Loading Reviews...</div>}>
+      <LazyTestimonialCardSixteen
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={false}
@@ -206,32 +210,36 @@ export default function LandingPage() {
       description="Hear from diners who have experienced the authentic taste and warm hospitality of Grünauer. With over 4,000 positive reviews, our reputation speaks for itself."
       tag="Guest Reviews"
     />
+    </Suspense>
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardThree
+    <Suspense fallback={<div>Loading Metrics...</div>}>
+      <LazyMetricCardThree
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={true}
       metrics={[
         {
           id: "m1",          icon: Star,
-          title: "Customer Rating",          value: "4.7"},
+          title: "Years Crafting Excellence",          value: "25+"},
         {
-          id: "m2",          icon: Users,
-          title: "Positive Reviews",          value: "4.4K+"},
+          id: "m2",          icon: Utensils,
+          title: "Signature Dishes Created",          value: "150+"},
         {
-          id: "m3",          icon: Utensils,
-          title: "Dishes Served Annually",          value: "10K+"},
+          id: "m3",          icon: Globe,
+          title: "Global Ingredients Sourced",          value: "12+"},
       ]}
       title="Grünauer by the Numbers"
       description="Proudly serving our community with culinary excellence and unwavering dedication."
       tag="Our Achievements"
     />
+    </Suspense>
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqDouble
+    <Suspense fallback={<div>Loading FAQ...</div>}>
+      <LazyFaqDouble
       textboxLayout="default"
       useInvertedBackground={false}
       faqs={[
@@ -249,10 +257,12 @@ export default function LandingPage() {
       tag="Need Help?"
       faqsAnimation="slide-up"
     />
+    </Suspense>
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCenter
+    <Suspense fallback={<div>Loading Contact...</div>}>
+      <LazyContactCenter
       useInvertedBackground={true}
       background={{
         variant: "plain"}}
@@ -263,18 +273,21 @@ export default function LandingPage() {
       buttonText="Send Inquiry"
       termsText="By sending an inquiry, you agree to our privacy policy."
     />
+    </Suspense>
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoReveal
+    <Suspense fallback={<div>Loading Footer...</div>}>
+      <LazyFooterLogoReveal
       logoText="Grünauer"
       leftLink={{
         text: "Privacy Policy",        href: "#"}}
       rightLink={{
         text: "Terms of Service",        href: "#"}}
     />
+    </Suspense>
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}