Merge version_4_1782129763092 into main

Merge version_4_1782129763092 into main

src/App.tsx

@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
+import InventoryPage from "@/pages/InventoryPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/inventory" element={<InventoryPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -27,7 +27,9 @@ export default function Layout() {
   },
   {
     "name": "Contact",    "href": "#contact"
-  }
+  },
+  { name: "Inventory", href: "/inventory" },
+
 ];
 
   return (

src/pages/HomePage/sections/Shop.tsx

@@ -72,6 +72,58 @@ interface FeaturesRevealCardsBentoProps {
   items: [FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem];
 }
 
+const ProductCard = ({ item, index, staggerDelays, gridClasses }: any) => {
+  const [volume, setVolume] = useState("5ml");
+  const volumeOptions = [
+    { value: "5ml", label: "5ml" },
+    { value: "10ml", label: "10ml" },
+    { value: "30ml", label: "30ml" },
+    { value: "full", label: "Full" },
+  ];
+
+  return (
+    <ScrollReveal
+      variant="slide-up"
+      delay={staggerDelays[index]}
+      className={cls(
+        "card rounded-lg overflow-hidden flex flex-col group relative",
+        gridClasses[index]
+      )}
+    >
+      <div className="relative w-full aspect-video md:aspect-auto md:h-64 overflow-hidden">
+        <ImageOrVideo
+          imageSrc={item.imageSrc}
+          videoSrc={item.videoSrc}
+          className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+        />
+      </div>
+      <div className="p-6 flex flex-col flex-grow gap-4">
+        <div>
+          <h3 className="text-xl font-semibold text-foreground mb-2">
+            {item.title}
+          </h3>
+          <p className="text-accent text-sm">
+            {item.description}
+          </p>
+        </div>
+        
+        <div className="mt-auto flex flex-col gap-4">
+          <div className="flex flex-col gap-2">
+            <Label className="text-xs font-medium text-foreground">Select Volume</Label>
+            <SelectorButton 
+              options={volumeOptions} 
+              activeValue={volume} 
+              onValueChange={setVolume} 
+              className="w-full"
+            />
+          </div>
+          <Button text={`Add to Cart`} variant="primary" className="w-full" />
+        </div>
+      </div>
+    </ScrollReveal>
+  );
+};
+
 const ShopInline = () => {
   const gridClasses = [
     "md:col-span-2",

src/pages/InventoryPage.tsx

@@ -0,0 +1,15 @@
+import { ArrowUpRight, Loader2 } from "lucide-react";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import useProducts from "@/hooks/useProducts";
+
+export default function InventoryPage() {
+  return (
+    <>
+      <div data-webild-section="ProductVariantCards"><section aria-label="Products section" className="py-20"><div className="w-content-width mx-auto flex justify-center"><Loader2 className="size-8 animate-spin text-foreground" strokeWidth={1.5} /></div></section></div>
+    </>
+  );
+}

src/routes.ts

@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/inventory', label: 'Inventory', pageFile: 'InventoryPage' },
 ];