Bob AI: auto-fix build error (runtime_error)

src/app/page.tsx

@@ -10,6 +10,7 @@ import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCar
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterBase from '@/components/sections/footer/FooterBase';
 import { Leaf, Sparkles } from "lucide-react";
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 
 export default function LandingPage() {
   return (
@@ -45,6 +46,69 @@ export default function LandingPage() {
           frameStyle="card"
         />
       </div>
+
+      <div id="metriccardone" data-section="metriccardone">
+        <MetricCardOne
+          metrics={[
+              {
+                id: "1",
+                value: "15+",
+                title: "Years Experience",
+                description: "Serving authentic Asian cuisine",
+                icon: typeof ChefHat !== 'undefined' ? ChefHat : null
+              },
+              {
+                id: "2",
+                value: "50K+",
+                title: "Happy Customers",
+                description: "Satisfied diners every month",
+                icon: typeof Users !== 'undefined' ? Users : null
+              },
+              {
+                id: "3",
+                value: "100%",
+                title: "Fresh Ingredients",
+                description: "Sourced daily from local markets",
+                icon: typeof Leaf !== 'undefined' ? Leaf : null
+              },
+            {
+              id: "4",
+              value: "24/7",
+              title: "Online Ordering",
+              description: "Delivery available anytime",
+              icon: Clock
+            }
+          ]}
+          gridVariant="bento-grid"
+          animationType="scale-in"
+          title="Why Choose Nin Ja"
+          description="Experience authentic Asian flavors with our commitment to quality, tradition, and excellence"
+          tag="Premium Quality"
+          textboxLayout="bottom"
+          useInvertedBackground="light"
+          buttons={[
+            {
+              label: "View Menu",
+              href: "#menu",
+              dataWebildId: "btn_view_menu"
+            },
+            {
+              label: "Order Now",
+              href: "#order",
+              dataWebildId: "btn_order_now"
+            }
+          ]}
+          buttonAnimation="fade-in"
+          className="py-16"
+          containerClassName="max-w-6xl mx-auto"
+          cardClassName="bg-gradient-to-br from-orange-50 to-red-50 border border-orange-200"
+          valueClassName="text-4xl font-bold text-orange-600"
+          titleClassName="text-lg font-semibold text-gray-800"
+          descriptionClassName="text-sm text-gray-600"
+          iconContainerClassName="bg-orange-100 rounded-lg p-3"
+          iconClassName="text-orange-600 w-6 h-6"
+        />
+      </div>
       <div id="about-section" data-section="about-section">
         <TextAbout 
           tag="OUR STORY"

src/app/styles/variables.css

@@ -3,22 +3,22 @@
   /* --vw is set by ThemeProvider */
 
   /* --background: #f5f5f5;;
-  --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #1c1c1c;;
-  --secondary-cta: #ffffff;;
-  --accent: #159c49;;
-  --background-accent: #a8e8ba;; */
+  --card: #2d2d2d;;
+  --foreground: #ffffff;;
+  --primary-cta: #dc2626;;
+  --secondary-cta: #1a1a1a;;
+  --accent: #ef4444;;
+  --background-accent: #7f1d1d;; */
 
-  --background: #f5f5f5;;
-  --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #1c1c1c;;
+  --background: #1a1a1a;;
+  --card: #2d2d2d;;
+  --foreground: #ffffff;;
+  --primary-cta: #dc2626;;
   --primary-cta-text: #f5f5f5;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #1a1a1a;;
   --secondary-cta-text: #1c1c1c;;
-  --accent: #159c49;;
-  --background-accent: #a8e8ba;;
+  --accent: #ef4444;;
+  --background-accent: #7f1d1d;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);