Add src/app/commitments/page.tsx

src/app/commitments/page.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import { Shield, Leaf, Zap, Award } from "lucide-react";
+import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
+
+export default function CommitmentsPage() {
+  return (
+    <ThemeProvider>
+      <NavbarStyleCentered
+        navItems={[{ name: "Home", id: "/" }, { name: "Commitments", id: "/commitments" }, { name: "Blog", id: "/blog" }, { name: "Contact", id: "/contact" }]}
+        brandName="Prestige Packaging"
+      />
+      <div className="pt-32 pb-20">
+        <FeatureHoverPattern
+          title="Our Core Commitments"
+          description="We hold ourselves to the highest standards of quality, sustainability, and reliability in every package we deliver."
+          features={[
+            { icon: Shield, title: "Integrity", description: "Honesty and transparency in every client relationship." },
+            { icon: Leaf, title: "Sustainability", description: "Committed to a greener future through eco-conscious design." },
+            { icon: Zap, title: "Innovation", description: "Always pushing the boundaries of packaging technology." },
+            { icon: Award, title: "Excellence", description: "Uncompromising quality control in every production step." }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+      <FooterBaseReveal
+        logoText="Prestige Packaging"
+        columns={[]}
+      />
+    </ThemeProvider>
+  );
+}