Update src/app/page.tsx

Merge version_17 into main

src/app/page.tsx

@@ -7,8 +7,7 @@ import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import { ShieldCheck, FileCheck, FlaskConical, Microscope } from "lucide-react";
-import AboutMetric from '@/components/sections/about/AboutMetric';
+import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 
 export default function LandingPage() {
@@ -55,30 +54,6 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="quality" data-section="quality">
-    <AboutMetric
-      title="Quality Assured Standards (Third-Party Verified)"
-      metrics={[
-        { icon: ShieldCheck, label: "HPLC Verified", value: "99%+ Purity" },
-        { icon: FileCheck, label: "Batch Certified", value: "ISO 9001" },
-        { icon: Microscope, label: "Purity Analysis", value: "MS Verified" },
-        { icon: FlaskConical, label: "Lab Grade", value: "Sterile Tested" }
-      ]}
-      metricsAnimation="slide-up"
-      useInvertedBackground={false}
-    />
-  </div>
-
-  <div id="trusted" data-section="trusted">
-    <SocialProofOne
-      title="Trusted by Researchers"
-      names={["Advanced Science Inst.", "Global Bio-Research", "Metabolic Studies Group", "Peptide Analysis Lab", "Cellular Dynamics Inc."]}
-      description="Leading laboratories trust our high-purity compounds for their critical studies."
-      useInvertedBackground={false}
-      textboxLayout="default"
-    />
-  </div>
-
   <div id="products" data-section="products">
       <ProductCardFour
       animationType="slide-up"
@@ -110,6 +85,31 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="quality" data-section="quality">
+    <MetricCardFourteen
+      title="Quality Assured Standards"
+      tag="Our Commitment"
+      metrics={[
+        { id: "1", value: "99%+ Purity Guaranteed", description: "HPLC Verified" },
+        { id: "2", value: "ISO 9001 Compliant", description: "Batch Certified" },
+        { id: "3", value: "MS Verification", description: "Purity Analysis" },
+        { id: "4", value: "Sterile Tested", description: "High Purity Lab Grade" }
+      ]}
+      metricsAnimation="slide-up"
+      useInvertedBackground={false}
+    />
+  </div>
+
+  <div id="trusted" data-section="trusted">
+    <SocialProofOne
+      title="Trusted by Researchers"
+      names={["Advanced Science Inst.", "Global Bio-Research", "Metabolic Studies Group", "Peptide Analysis Lab", "Cellular Dynamics Inc."]}
+      description="Leading laboratories trust our high-purity compounds for their critical studies."
+      useInvertedBackground={false}
+      textboxLayout="default"
+    />
+  </div>
+
   <div id="footer" data-section="footer">
       <FooterSimple
       columns={[
@@ -123,4 +123,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}